mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-23 21:04:07 -06:00
127 lines
3.7 KiB
SCSS
127 lines
3.7 KiB
SCSS
// This CSS is required to render badges properly.
|
|
// WinnerWind.
|
|
:root{
|
|
body{
|
|
--radius-l: 12px;
|
|
--radius-m: 8px;
|
|
--radius-s: 4px;
|
|
a.external .external-icon {
|
|
height:0px;
|
|
margin:0em;
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
:root[saved-theme="dark"] {
|
|
--chalk-grey: #dddddd;
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: hsl(
|
|
calc(var(--accent-h) - 3),
|
|
calc(var(--accent-s) * 1.02),
|
|
calc(var(--accent-l) * 1.15)
|
|
);
|
|
--color-accent-2: hsl(
|
|
calc(var(--accent-h) - 5),
|
|
calc(var(--accent-s) * 1.05),
|
|
calc(var(--accent-l) * 1.29)
|
|
);
|
|
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
|
|
--color-base-00: #090909;
|
|
--color-base-10: #1f1f1f;
|
|
--color-base-100: #c6c6c6;
|
|
--color-base-30: #1f1f1f;
|
|
--color-base-35: #383838;
|
|
--color-base-40: #1f1f1f;
|
|
--color-base-50: #808080;
|
|
--color-base-60: #5f5f5f;
|
|
--color-base-70: #bdbdbd;
|
|
--color-blue: #027aff;
|
|
--color-blue-rgb: 2, 122, 255;
|
|
--color-cyan: #53dfdd;
|
|
--color-cyan-rgb: 83, 223, 221;
|
|
--color-green: #44cf6e;
|
|
--color-green-rgb: 68, 207, 110;
|
|
--color-orange: #e9973f;
|
|
--color-orange-rgb: 233, 151, 63;
|
|
--color-pink: #fa99cd;
|
|
--color-purple: #a882ff;
|
|
--color-purple-rgb: 168, 130, 255;
|
|
--color-red: #fb464c;
|
|
--color-red-rgb: 251, 70, 76;
|
|
--color-yellow: #e0de71;
|
|
--h1-color: var(--chalk-grey);
|
|
--h2-color: var(--chalk-grey);
|
|
--h3-color: var(--chalk-grey);
|
|
--h4-color: var(--chalk-grey);
|
|
--h5-color: var(--chalk-grey);
|
|
--h6-color: var(--chalk-grey);
|
|
--interactive-accent: var(--color-accent);
|
|
--interactive-accent-hover: var(--color-accent-1);
|
|
--mono-rgb-100: 255, 255, 255;
|
|
--shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
|
|
0px 30px 90px rgba(0, 0, 0, 0.2);
|
|
--shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179),
|
|
0px 15px 30px rgba(0, 0, 0, 0.3);
|
|
--text-accent: var(--color-accent-1);
|
|
color-scheme: dark;
|
|
|
|
.callout {
|
|
--callout-blend-mode: lighten;
|
|
}
|
|
}
|
|
|
|
:root[saved-theme="light"] {
|
|
--chalk-grey: #686868;
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: hsl(
|
|
calc(var(--accent-h) - 1),
|
|
calc(var(--accent-s) * 1.01),
|
|
calc(var(--accent-l) * 1.075)
|
|
);
|
|
--color-accent-2: hsl(
|
|
calc(var(--accent-h) - 3),
|
|
calc(var(--accent-s) * 1.02),
|
|
calc(var(--accent-l) * 1.15)
|
|
);
|
|
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
|
|
--color-base-00: #fff;
|
|
--color-base-10: #fafafa;
|
|
--color-base-100: #222;
|
|
--color-base-30: #e0e0e0;
|
|
--color-base-35: #d4d4d4;
|
|
--color-base-40: #bdbdbd;
|
|
--color-base-50: #ababab;
|
|
--color-base-60: #707070;
|
|
--color-base-70: #5a5a5a;
|
|
--color-blue: #086ddd;
|
|
--color-blue-rgb: 8, 109, 221;
|
|
--color-cyan: #00bfbc;
|
|
--color-cyan-rgb: 0, 191, 188;
|
|
--color-green: #08b94e;
|
|
--color-green-rgb: 8, 185, 78;
|
|
--color-orange: #ec7500;
|
|
--color-orange-rgb: 236, 117, 0;
|
|
--color-pink: #d53984;
|
|
--color-purple: #7852ee;
|
|
--color-purple-rgb: 120, 82, 238;
|
|
--color-red: #e93147;
|
|
--color-red-rgb: 233, 49, 71;
|
|
--color-yellow: #e0ac00;
|
|
--h1-color: var(--chalk-grey);
|
|
--h2-color: var(--chalk-grey);
|
|
--h3-color: var(--chalk-grey);
|
|
--h4-color: var(--chalk-grey);
|
|
--h5-color: var(--chalk-grey);
|
|
--h6-color: var(--chalk-grey);
|
|
--mono-rgb-100: 0, 0, 0;
|
|
--shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
|
|
0px 30px 90px rgba(0, 0, 0, 0.2);
|
|
--shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
|
|
0px 15px 30px rgba(0, 0, 0, 0.07);
|
|
color-scheme: light;
|
|
|
|
.callout {
|
|
--callout-blend-mode: darken;
|
|
}
|
|
}
|