99 lines
2.0 KiB
CSS
99 lines
2.0 KiB
CSS
|
@property --theme-color {
|
||
|
|
syntax: "<color>";
|
||
|
|
inherits: true;
|
||
|
|
}
|
||
|
|
@property --back-color {
|
||
|
|
syntax: "<color>";
|
||
|
|
inherits: true;
|
||
|
|
}
|
||
|
|
@property --grid-color {
|
||
|
|
syntax: "<color>";
|
||
|
|
inherits: true;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* theme color */
|
||
|
|
body, body.light {
|
||
|
|
--color-scheme: light;
|
||
|
|
--white-black: white;
|
||
|
|
--black-white: black;
|
||
|
|
--theme-color: hsl(85, 50%, 60%);
|
||
|
|
--back-color: hsl(60, 100%, 98%);
|
||
|
|
--font-color: #222;
|
||
|
|
--grid-color: #fff;
|
||
|
|
--code-color: #ddd;
|
||
|
|
--code-block: #30303a;
|
||
|
|
--frame-shadow: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.dark {
|
||
|
|
--color-scheme: dark;
|
||
|
|
--white-black: black;
|
||
|
|
--black-white: white;
|
||
|
|
--theme-color: teal;
|
||
|
|
--back-color: hsl(210, 7%, 18%);
|
||
|
|
--font-color: #f5f5f5;
|
||
|
|
--grid-color: #333;
|
||
|
|
--code-color: #445;
|
||
|
|
--code-block: #23232a;
|
||
|
|
--frame-shadow: #111;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(prefers-color-scheme: dark){
|
||
|
|
body {
|
||
|
|
--color-scheme: dark;
|
||
|
|
--white-black: black;
|
||
|
|
--black-white: white;
|
||
|
|
--theme-color: teal;
|
||
|
|
--back-color: hsl(210, 7%, 18%);
|
||
|
|
--font-color: #fafafa;
|
||
|
|
--grid-color: #333;
|
||
|
|
--code-color: #445;
|
||
|
|
--code-block: #23232a;
|
||
|
|
--frame-shadow: #111;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* general */
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
color: var(--font-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
-webkit-user-drag: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (scripting: none) {
|
||
|
|
.js {display: none !important;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* font */
|
||
|
|
body {
|
||
|
|
font-family: "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Segoe UI", "BIZ UDPGothic", sans-serif;
|
||
|
|
/* Apple | Linux | win-en win-jp */
|
||
|
|
}
|
||
|
|
code {
|
||
|
|
font-family: "Source Code Pro", "Monaco", "Consolas", "BIZ UDGothic", monospace;
|
||
|
|
/* Linux | Apple | windows | 和文 */
|
||
|
|
}
|
||
|
|
em {
|
||
|
|
font-family: serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* link style */
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--theme-color);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
&:visited {
|
||
|
|
color: hsl(290, 40%, 50%);
|
||
|
|
}
|
||
|
|
}
|