kopia lustrzana https://github.com/bugout-dev/moonstream
270 wiersze
4.9 KiB
CSS
270 wiersze
4.9 KiB
CSS
@import "~slick-carousel/slick/slick.css";
|
|
@import "~slick-carousel/slick/slick-theme.css";
|
|
|
|
.Resizer {
|
|
background: #000;
|
|
opacity: 0.2;
|
|
z-index: 1;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-moz-background-clip: padding;
|
|
-webkit-background-clip: padding;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.Resizer:hover {
|
|
-webkit-transition: all 2s ease;
|
|
transition: all 2s ease;
|
|
}
|
|
|
|
.Resizer.horizontal {
|
|
height: 11px;
|
|
margin: -5px 0;
|
|
border-top: 5px solid rgba(255, 255, 255, 0);
|
|
border-bottom: 5px solid rgba(255, 255, 255, 0);
|
|
cursor: row-resize;
|
|
width: 100%;
|
|
}
|
|
|
|
.Resizer.horizontal:hover {
|
|
border-top: 5px solid rgba(0, 0, 0, 0.5);
|
|
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.Resizer.vertical {
|
|
width: 11px;
|
|
margin: 0 -5px;
|
|
border-left: 5px solid rgba(255, 255, 255, 0);
|
|
border-right: 5px solid rgba(255, 255, 255, 0);
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.Resizer.vertical:hover {
|
|
border-left: 5px solid rgba(0, 0, 0, 0.5);
|
|
border-right: 5px solid rgba(0, 0, 0, 0.5);
|
|
}
|
|
.Resizer.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.Resizer.disabled:hover {
|
|
border-color: transparent;
|
|
cursor: inherit;
|
|
}
|
|
|
|
.triangle {
|
|
border-style: solid;
|
|
border-color: transparent transparent #171d65 transparent;
|
|
border-width: 0 0px 310px 0px;
|
|
height: 0;
|
|
width: 100%;
|
|
box-sizing: content-box;
|
|
position: relative;
|
|
margin: 0px 0 50px 0;
|
|
z-index: -2;
|
|
}
|
|
|
|
.triangle:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 310px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-color: #171d65 transparent transparent transparent;
|
|
border-width: 115px 80vw 0 20vw;
|
|
z-index: -2;
|
|
}
|
|
|
|
.bubble:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 0;
|
|
z-index: 1;
|
|
border-style: solid;
|
|
border-color: #e6eaef transparent;
|
|
border-width: 20px 20px 0;
|
|
bottom: -20px;
|
|
left: 20%;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
.airplaneHandshake {
|
|
z-index: -1;
|
|
background-image: url("https://s3.amazonaws.com/static.simiotics.com/case_studies/humbug_handshake.svg");
|
|
}
|
|
|
|
.ScrollableWrapper {
|
|
overflow: hidden;
|
|
}
|
|
.NonScroll {
|
|
overflow: hidden;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Chrome only */
|
|
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
|
|
::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
height: 1px;
|
|
}
|
|
|
|
.Main *:hover::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.Main *:hover::-webkit-scrollbar-thumb {
|
|
background-color: #7a7fbc;
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* ----- Firefox specific ------- */
|
|
.ScrollableWrapper .Scrollable:hover {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #53b9d1 #eaebf7;
|
|
}
|
|
|
|
.ScrollableWrapper .Scrollable {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #53b9d1 #eaebf7;
|
|
/* max-height: 100%; */
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overflow-y: overlay !important;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* ----- react-mde specific ------- */
|
|
.mde-text {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.mde-text:hover {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #53b9d1 transparent;
|
|
}
|
|
|
|
.mde-preview {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
max-height: 100%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.mde-preview * {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.mde-preview:hover {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #53b9d1 transparent;
|
|
}
|
|
|
|
.mde-preview {
|
|
overflow-y: auto;
|
|
max-height: calc(100% - 49px);
|
|
}
|
|
|
|
.mde-text {
|
|
overflow-y: auto;
|
|
max-height: calc(100% - 49px);
|
|
}
|
|
|
|
.form {
|
|
max-width: 420px;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
code {
|
|
white-space: pre-line !important;
|
|
}
|
|
|
|
.fade-in-section {
|
|
opacity: 0;
|
|
transform: translateY(5vh);
|
|
visibility: hidden;
|
|
transition: opacity 0.3s ease-out, transform 0.6s ease-out;
|
|
will-change: opacity, visibility;
|
|
}
|
|
.fade-in-section.is-visible {
|
|
opacity: 1;
|
|
transform: none;
|
|
visibility: visible;
|
|
}
|
|
|
|
.slide img {
|
|
width: 20rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.slide {
|
|
transform: scale(0.6) translate3D(0, -200px, 0px);
|
|
transition: transform 6000ms;
|
|
/* opacity: 0.6; */
|
|
padding-bottom: 200px;
|
|
animation: off 2s ease-in-out forwards;
|
|
overflow: visible;
|
|
}
|
|
|
|
.activeSlide {
|
|
transform: scale(1.1);
|
|
transition: transform 2000ms;
|
|
animation: change 2s ease-in-out forwards;
|
|
/* opacity: 1; */
|
|
}
|
|
|
|
@keyframes change {
|
|
to {
|
|
opacity: 1
|
|
}
|
|
}
|
|
@keyframes off {
|
|
to {
|
|
opacity: 0.6
|
|
}
|
|
}
|
|
|
|
.arrow {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.arrow svg {
|
|
transition: color 300ms;
|
|
}
|
|
|
|
.arrow svg:hover {
|
|
color: #68edff;
|
|
}
|
|
|
|
.next {
|
|
right: 0%;
|
|
top: 50%;
|
|
}
|
|
|
|
.prev {
|
|
left: 0%;
|
|
top: 50%;
|
|
}
|
|
|
|
.bgGrid {
|
|
background-color: white;
|
|
background-size: 10px 10px, 60px 60px;
|
|
background-image: linear-gradient(to bottom, transparent 6px, white 6px),
|
|
linear-gradient(to right, #444 1px, transparent 1px),
|
|
linear-gradient(to right, transparent 6px, white 6px),
|
|
linear-gradient(to bottom, #444 1px, transparent 1px);
|
|
}
|