favycon/styles/main.scss
2020-09-11 01:35:45 +01:00

128 lines
2.2 KiB
SCSS

@import 'reset';
@import 'font';
@import 'variables';
@import 'nprogress';
@import 'prism';
html,
body {
padding: 0;
margin: 0;
font-family: Manrope, Arial, Helvetica Neue, Helvetica, sans-serif;
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
/* https://gist.github.com/hsleonis/55712b0eafc9b25f1944 */
font-size: 100%;
text-shadow: rgba($black, 0.01) 0 0 1px;
font-variant-ligatures: none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
transition: background 0.2s ease;
&.light-mode {
background: $off-white;
}
&.dark-mode {
background: $darker-black;
}
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
height: 1px;
margin: 16px 0;
background: $light-grey;
border: none;
transition: background 0.2s ease;
}
.dark-mode {
hr {
background: $darker-grey;
}
}
.ReactModal__Overlay {
opacity: 0;
transition: all 0.2s ease;
transform: translate3d(0, 24px, 0);
}
.ReactModal__Overlay--after-open {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.ReactModal__Overlay--before-close {
opacity: 0;
transform: translate3d(0, 24px, 0);
}
.preload,
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
.collapse-enter {
max-width: 0;
opacity: 0;
}
.collapse-enter-active {
max-width: 50px;
opacity: 1;
transition: all 0.2s linear;
}
.collapse-exit {
max-width: 50px;
opacity: 1;
}
.collapse-exit-active {
max-width: 0;
opacity: 0;
transition: all 0.2s linear;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 0.2s linear;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 0.2s linear;
}
.error-enter {
opacity: 0;
transform: translate3d(0, -8px, 0);
}
.error-enter-active {
opacity: 1;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translate3d(0, 0, 0);
}
.error-exit {
opacity: 1;
}
.error-exit-active {
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translate3d(0, 4px, 0);
}