64 lines
2 KiB
SCSS
64 lines
2 KiB
SCSS
$black: #0a0a0a;
|
|
$white: #ffffff;
|
|
$aqua: #00ffd9;
|
|
$green: #66e2d5;
|
|
$light-green: lighten($green,30%);
|
|
$dark-purple: #4e57ef;
|
|
$purple: #cfd7ff;
|
|
$light-medium-purple: lighten($purple, 4%);
|
|
$light-purple: lighten($purple, 7%);
|
|
$blue: #1395b8;
|
|
$sky-blue: #557de8;
|
|
$light-sky-blue: lighten($sky-blue, 30%);
|
|
$lightest-gray: #f9f9fa;
|
|
$light-gray: #f5f6f7;
|
|
$light-medium-gray:#dbdbdb;
|
|
$medium-gray:#666666;
|
|
$dark-medium-gray:#444444;
|
|
$dark-gray:#333333;
|
|
$red:#ff0000;
|
|
$yellow: #fefa87;
|
|
$tan: #fdf9f3;
|
|
$off-white: #fffffe;
|
|
$bold-blue: #0045ff;
|
|
|
|
$helvetica: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
$monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
$helvetica-condensed: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
|
|
|
|
$outline-color: darken($light-medium-gray, 2%);
|
|
$shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
|
|
$light-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
$dark-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
|
|
$bold-shadow: 3px 3px 0px darken($light-medium-gray, 13%);
|
|
|
|
body {
|
|
&.night-theme {
|
|
background-color: black !important;
|
|
|
|
&,
|
|
& .highlight,
|
|
& iframe,
|
|
& video {
|
|
-webkit-filter: invert(100%);
|
|
filter: invert(100%);
|
|
}
|
|
|
|
& * {
|
|
background-blend-mode: difference;
|
|
}
|
|
|
|
img,
|
|
.image.image {
|
|
-webkit-transition: -webkit-filter 0.5s ease-in, filter 0.5s ease-in;
|
|
-webkit-filter: invert(100%) grayscale(100%);
|
|
transition: -webkit-filter 0.5s ease-in, filter 0.5s ease-in;
|
|
filter: invert(100%) grayscale(100%);
|
|
|
|
&:hover {
|
|
-webkit-filter: invert(100%) grayscale(0%);
|
|
filter: invert(100%) grayscale(0%);
|
|
}
|
|
}
|
|
}
|
|
}
|