:root { /* Spacing */ --inline-space: 1ch; --inline-space-quarter: calc(var(--inline-space) / 4); --inline-space-half: calc(var(--inline-space) / 2); --inline-space-double: calc(var(--inline-space) * 2); --block-space: 1rem; --block-space-quarter: calc(var(--block-space) / 4); --block-space-half: calc(var(--block-space) / 2); --block-space-double: calc(var(--block-space) * 2); /* Text */ --font-sans: system-ui; --font-serif: ui-serif, serif; --font-mono: ui-monospace, monospace; --text-xx-small: 0.55rem; --text-x-small: 0.75rem; --text-small: 0.85rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.5rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; @media (max-width: 639px) { --text-xx-small: 0.65rem; --text-x-small: 0.85rem; --text-small: 0.95rem; --text-normal: 1.1rem; --text-medium: 1.2rem; --text-large: 1.3rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; } /* Borders */ --border: 1px solid var(--color-ink-lighter); /* Shadows */ --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 5%), 0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%); /* Components */ --btn-size: 2.65em; --footer-height: 2.65rem; --tray-size: clamp(12rem, 25dvw, 24rem); /* Focus rings for keyboard navigation */ --focus-ring-color: var(--color-link); --focus-ring-offset: 1px; --focus-ring-size: 2px; --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color); /* Dialogs */ --dialog-duration: 150ms; /* Easing functions from https://easingwizard.com/ */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1); --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1); @media (max-width: 799px) { --tray-size: var(--footer-height); } /* Layout */ --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3)); --main-width: 960px; /* Z-index */ --z-events-column-header: 1; --z-events-day-header: 3; --z-popup: 10; --z-nav: 30; --z-flash: 40; --z-tooltip: 50; --z-bar: 60; --z-tray: 61; /* OKLCH colors: Fixed */ --lch-black: 0% 0 0; --lch-white: 100% 0 0; /* Theme Colors */ /* https://harmonizer.evilmartians.com/#W1tmYWxzZSwxMDYsbnVsbCxmYWxzZSwxMDEsbnVsbCwiNTAiLDk1LG51bGwsIjE1MCIsODksbnVsbCwiMjUwIiw4MyxudWxsLCIzMDAiLDc3LG51bGwsIjQwMCIsNjUsbnVsbCwiNTAwIiw1MSxudWxsLCI2MDAiLDY1LG51bGwsIjcwMCIsNzcsbnVsbCwiODAwIiw4OSxudWxsLCI5MDAiLDEwMCxudWxsXSxbIlJvc2UiLDIwLCJDaW5uYW1vbiIsNjUsIkNvbXBsZW1lbnRhcnkgQmx1ZSIsMjQ4LCJGZXJuIiwxMDhdLFsiYXBjYSIsImZnVG9CZyIsImV2ZW4iLCIjZmZmIiwiIzExMSIsOCwicDMiXV0 */ --lch-theme-cinnamon-darkest: 0.3037 0.07 65; --lch-theme-cinnamon-darker: 0.4155 0.10 65; --lch-theme-cinnamon-dark: 0.5298 0.13 65; --lch-theme-cinnamon-medium: 0.6201 0.15 65; /* #e2ac78 */ --lch-theme-cinnamon-light: 0.7185 0.17 65; --lch-theme-cinnamon-lighter: 0.7972 0.12 65; --lch-theme-cinnamon-lightest: 0.8587 0.08 65; --lch-theme-cinnamon-bg: 0.97 0.02 65; --lch-theme-cinnamon-bg-light: 0.99 0.001 65; --lch-theme-blue-darkest: 0.2988 0.07 248; --lch-theme-blue-darker: 0.4082 0.10 248; --lch-theme-blue-dark: 0.5205 0.13 248; --lch-theme-blue-medium: 0.6094 0.15 248; /* #78aee2 */ --lch-theme-blue-light: 0.7065 0.17 248; --lch-theme-blue-lighter: 0.788 0.12 248; --lch-theme-blue-lightest: 0.853 0.08 248; --lch-theme-rose-darkest: 0.3066 0.07 20.0; --lch-theme-rose-darker: 0.4199 0.10 20.0; --lch-theme-rose-dark: 0.5361 0.13 20.0; --lch-theme-rose-medium: 0.6284 0.15 20.0; /* #e27879 */ --lch-theme-rose-light: 0.8048 0.12 20.0; --lch-theme-rose-lighter: 0.8643 0.08 20.0; --lch-theme-rose-lightest: 0.8924 0.06 20.0; --lch-theme-moss-darkest: 0.2983 0.07 108; --lch-theme-moss-darker: 0.4072 0.10 108; --lch-theme-moss-dark: 0.5186 0.13 108; --lch-theme-moss-medium: 0.6064 0.15 108; /* #e2e178 */ --lch-theme-moss-light: 0.7037 0.17 108; --lch-theme-moss-lighter: 0.7864 0.12 108; --lch-theme-moss-lightest: 0.8514 0.08 108; /* OKLCH colors: Light mode */ --lch-canvas: var(--lch-white); --lch-ink-inverted: var(--lch-white); --lch-ink-darkest: 26% 0.05 264; /* #3d3e3e */ --lch-ink-darker: 40% 0.026 262; /* #5e5e5e */ --lch-ink-dark: 56% 0.014 260; /* #868686 */ --lch-ink-medium: 66% 0.008 258; /* #a0a0a0 */ --lch-ink-light: 84% 0.005 256; /* #d1d1d1 */ --lch-ink-lighter: 92% 0.003 254; /* #e8e8e8 */ --lch-ink-lightest: 96% 0.002 252; /* #f3f3f3 */ --lch-uncolor-darkest: 26% 0.018 40; --lch-uncolor-darker: 40.04% 0.0376 50.06; --lch-uncolor-dark: 57.09% 0.0676 60.5; --lch-uncolor-medium: 66% 0.0944 71.46; --lch-uncolor-light: 83.97% 0.0457 80.84; --lch-uncolor-lighter: 92% 0.014 90; --lch-uncolor-lightest: 96% 0.012 100; --lch-red-darkest: 26% 0.105 34; --lch-red-darker: 40% 0.154 36; --lch-red-dark: 59% 0.19 38; --lch-red-medium: 66% 0.204 40; --lch-red-light: 84.08% 0.0837 41.96; --lch-red-lighter: 92% 0.03 44; --lch-red-lightest: 96% 0.013 46; --lch-yellow-darkest: 26% 0.0729 40; --lch-yellow-darker: 40% 0.12 50; --lch-yellow-dark: 58% 0.156 60; --lch-yellow-medium: 74% 0.184 70; --lch-yellow-light: 84% 0.12 80; --lch-yellow-lighter: 92% 0.076 90; --lch-yellow-lightest: 96% 0.034 100; --lch-lime-darkest: 26% 0.064 109; --lch-lime-darker: 40% 0.101 110; --lch-lime-dark: 56.5% 0.142 111; --lch-lime-medium: 68% 0.176 113.11; --lch-lime-light: 83.92% 0.0927 113.6; --lch-lime-lighter: 92% 0.046 114; --lch-lime-lightest: 96% 0.034 115; --lch-green-darkest: 26% 0.071 149; --lch-green-darker: 40% 0.12 148; --lch-green-dark: 55% 0.162 147; --lch-green-medium: 66% 0.208 146; --lch-green-light: 83.92% 0.0772 145.06; --lch-green-lighter: 92% 0.044 144; --lch-green-lightest: 96% 0.022 143; --lch-aqua-darkest: 26% 0.059 214; --lch-aqua-darker: 40% 0.093 212; --lch-aqua-dark: 55.5% 0.122 210; --lch-aqua-medium: 66% 0.152 208; --lch-aqua-light: 83.88% 0.0555 206.02; --lch-aqua-lighter: 92% 0.02 204; --lch-aqua-lightest: 96% 0.012 202; --lch-blue-darkest: 26% 0.126 264; --lch-blue-darker: 40% 0.166 262; --lch-blue-dark: 57.02% 0.1895 260.46; --lch-blue-medium: 66% 0.196 257.82; --lch-blue-light: 84.04% 0.0719 255.29; --lch-blue-lighter: 92% 0.026 254; --lch-blue-lightest: 96% 0.016 252; --lch-violet-darkest: 26% 0.148 292; --lch-violet-darker: 40% 0.2 290; --lch-violet-dark: 58% 0.216 287.6; --lch-violet-medium: 66% 0.206 285.52; --lch-violet-light: 84.08% 0.0791 283.47; --lch-violet-lighter: 92% 0.03 282; --lch-violet-lightest: 96% 0.015 280; --lch-purple-darkest: 26% 0.131 314; --lch-purple-darker: 40% 0.178 312; --lch-purple-dark: 58% 0.21 310; --lch-purple-medium: 66% 0.258 308; --lch-purple-light: 84.09% 0.0778 305.77; --lch-purple-lighter: 92% 0.03 304; --lch-purple-lightest: 96% 0.019 302; --lch-pink-darkest: 26% 0.12 348; --lch-pink-darker: 40% 0.16 346; --lch-pink-dark: 59% 0.188 344; --lch-pink-medium: 71.8% 0.2008 342; --lch-pink-light: 84.04% 0.0737 340; --lch-pink-lighter: 92% 0.03 338; --lch-pink-lightest: 96% 0.02 336; /* Colors: Named */ --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); --color-theme-cinnamon-darkest: oklch(var(--lch-theme-cinnamon-darkest)); --color-theme-cinnamon-darker: oklch(var(--lch-theme-cinnamon-darker)); --color-theme-cinnamon-dark: oklch(var(--lch-theme-cinnamon-dark)); --color-theme-cinnamon-medium: oklch(var(--lch-theme-cinnamon-medium)); /* #e2ac78 */ --color-theme-cinnamon-light: oklch(var(--lch-theme-cinnamon-light)); --color-theme-cinnamon-lighter: oklch(var(--lch-theme-cinnamon-lighter)); --color-theme-cinnamon-lightest: oklch(var(--lch-theme-cinnamon-lightest)); --color-theme-cinnamon-bg: oklch(var(--lch-theme-cinnamon-bg)); --color-theme-cinnamon-bg-light: oklch(var(--lch-theme-cinnamon-bg-light)); --color-theme-blue-darkest: oklch(var(--lch-theme-blue-darkest)); --color-theme-blue-darker: oklch(var(--lch-theme-blue-darker)); --color-theme-blue-dark: oklch(var(--lch-theme-blue-dark)); --color-theme-blue-medium: oklch(var(--lch-theme-blue-medium)); /* #78aee2 */ --color-theme-blue-light: oklch(var(--lch-theme-blue-light)); --color-theme-blue-lighter: oklch(var(--lch-theme-blue-lighter)); --color-theme-blue-lightest: oklch(var(--lch-theme-blue-lightest)); --color-theme-rose-darkest: oklch(var(--lch-theme-rose-darkest)); --color-theme-rose-darker: oklch(var(--lch-theme-rose-darker)); --color-theme-rose-dark: oklch(var(--lch-theme-rose-dark)); --color-theme-rose-medium: oklch(var(--lch-theme-rose-medium)); /* #e27879 */ --color-theme-rose-light: oklch(var(--lch-theme-rose-light)); --color-theme-rose-lighter: oklch(var(--lch-theme-rose-lighter)); --color-theme-rose-lightest: oklch(var(--lch-theme-rose-lightest)); --color-theme-moss-darkest: oklch(var(--lch-theme-moss-darkest)); --color-theme-moss-darker: oklch(var(--lch-theme-moss-darker)); --color-theme-moss-dark: oklch(var(--lch-theme-moss-dark)); --color-theme-moss-medium: oklch(var(--lch-theme-moss-medium)); /* #e2e178 */ --color-theme-moss-light: oklch(var(--lch-theme-moss-light)); --color-theme-moss-lighter: oklch(var(--lch-theme-moss-lighter)); --color-theme-moss-lightest: oklch(var(--lch-theme-moss-lightest)); --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-darkest: oklch(var(--lch-ink-darkest)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-dark: oklch(var(--lch-ink-dark)); --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-lightest: oklch(var(--lch-ink-lightest)); --color-ink-inverted: oklch(var(--lch-ink-inverted)); /* Colors: Abstractions */ --color-canvas: oklch(var(--lch-canvas)); --color-negative: oklch(var(--lch-red-dark)); --color-positive: oklch(var(--lch-green-dark)); --color-link: oklch(var(--lch-blue-dark)); --color-selected-light: oklch(var(--lch-blue-lightest)); --color-selected: oklch(var(--lch-blue-lighter)); --color-selected-dark: oklch(var(--lch-blue-light)); --color-highlight: oklch(var(--lch-yellow-lighter)); --color-marker: oklch(var(--lch-red-medium)); --color-terminal-bg: oklch(98% 0.002 252); --color-terminal-text: var(--color-ink); --color-terminal-text-light: var(--color-ink-lighter); --color-golden: oklch(89.1% 0.178 95.7); --color-considering: oklch(var(--lch-blue-medium)); /* Colors: Highlighter */ --highlight-1: rgb(136, 118, 38); --highlight-2: rgb(185, 94, 6); --highlight-3: rgb(207, 0, 0); --highlight-4: rgb(216, 28, 170); --highlight-5: rgb(144, 19, 254); --highlight-6: rgb(5, 98, 185); --highlight-7: rgb(17, 138, 15); --highlight-8: rgb(148, 82, 22); --highlight-9: rgb(102, 102, 102); --highlight-bg-1: rgba(229, 223, 6, 0.3); --highlight-bg-2: rgba(255, 185, 87, 0.3); --highlight-bg-3: rgba(255, 118, 118, 0.3); --highlight-bg-4: rgba(248, 137, 216, 0.3); --highlight-bg-5: rgba(190, 165, 255, 0.3); --highlight-bg-6: rgba(124, 192, 252, 0.3); --highlight-bg-7: rgba(140, 255, 129, 0.3); --highlight-bg-8: rgba(221, 170, 123, 0.3); --highlight-bg-9: rgba(200, 200, 200, 0.3); /* Colors: Syntax highlighting */ --color-code-token__att: oklch(var(--lch-blue-dark)); --color-code-token__comment: oklch(var(--lch-ink-medium)); --color-code-token__function: oklch(var(--lch-purple-dark)); --color-code-token__operator: oklch(var(--lch-red-dark)); --color-code-token__property: oklch(var(--lch-purple-dark)); --color-code-token__punctuation: oklch(var(--lch-ink-dark)); --color-code-token__selector: oklch(var(--lch-green-dark)); --color-code-token__variable: oklch(var(--lch-red-dark)); /* Colors: Generating gradient */ --color-gradient-1: oklch(var(--lch-violet-lighter)); --color-gradient-2: oklch(var(--lch-pink-lighter)); --color-gradient-3: oklch(var(--lch-purple-lighter)); --color-gradient-4: var(--color-canvas); --rainbow-gradient: linear-gradient(to right, #9c4f96 0%, #9c4f96 16.67%, #ff6355 16.67%, #ff6355 33.34%, #fba949 33.34%, #fba949 50%, #fae442 50%, #fae442 66.67%, #8bd448 66.67%, #8bd448 83.34%, #2aa8f2 83.34%, #2aa8f2 100% ); /*@media (prefers-color-scheme: dark) {*/ /* --lch-canvas: 20% 0.0195 232.58;*/ /* --lch-ink-inverted: var(--lch-black);*/ /* --lch-ink-darkest: 96.02% 0.0034 260;*/ /* --lch-ink-darker: 86% 0.0061 260;*/ /* --lch-ink-dark: 73.97% 0.009 260;*/ /* --lch-ink-medium: 62% 0.0122 260;*/ /* --lch-ink-light: 40% 0.0148 260;*/ /* --lch-ink-lighter: 30% 0.0178 260;*/ /* --lch-ink-lightest: 25% 0.0204 260;*/ /* --lch-uncolor-darkest: 96.09% 0.0076 100;*/ /* --lch-uncolor-darker: 86% 0.021 90;*/ /* --lch-uncolor-dark: 73.93% 0.041 80;*/ /* --lch-uncolor-medium: 62% 0.0552 70;*/ /* --lch-uncolor-light: 40% 0.0387 60;*/ /* --lch-uncolor-lighter: 30% 0.012 50;*/ /* --lch-uncolor-lightest: 25% 0.0017 40;*/ /* --lch-red-darkest: 95.85% 0.0218 46;*/ /* --lch-red-darker: 86% 0.086 44;*/ /* --lch-red-dark: 73.95% 0.139 42;*/ /* --lch-red-medium: 62% 0.154 40;*/ /* --lch-red-light: 40% 0.088 38;*/ /* --lch-red-lighter: 30% 0.032 36;*/ /* --lch-red-lightest: 25% 0.011 34;*/ /* --lch-yellow-darkest: 96% 0.056 100;*/ /* --lch-yellow-darker: 86% 0.103 90;*/ /* --lch-yellow-dark: 74.06% 0.136 80;*/ /* --lch-yellow-medium: 62.1% 0.146 70;*/ /* --lch-yellow-light: 40% 0.0736 60;*/ /* --lch-yellow-lighter: 30% 0.026 50;*/ /* --lch-yellow-lightest: 25% 0.01 40;*/ /* --lch-lime-darkest: 96.04% 0.066 115;*/ /* --lch-lime-darker: 86% 0.098 114;*/ /* --lch-lime-dark: 73.97% 0.121 113;*/ /* --lch-lime-medium: 62% 0.128 112;*/ /* --lch-lime-light: 40% 0.0637 111;*/ /* --lch-lime-lighter: 30% 0.024 110;*/ /* --lch-lime-lightest: 25% 0.012 109;*/ /* --lch-green-darkest: 96.12% 0.035 143;*/ /* --lch-green-darker: 86% 0.082 144;*/ /* --lch-green-dark: 73.99% 0.117 145;*/ /* --lch-green-medium: 62% 0.1261 146;*/ /* --lch-green-light: 40% 0.065 147;*/ /* --lch-green-lighter: 30% 0.03 148;*/ /* --lch-green-lightest: 25% 0.018 149;*/ /* --lch-aqua-darkest: 96.15% 0.0244 202;*/ /* --lch-aqua-darker: 86% 0.06 204;*/ /* --lch-aqua-dark: 73.92% 0.095 206;*/ /* --lch-aqua-medium: 62% 0.106 208;*/ /* --lch-aqua-light: 40% 0.0594 210;*/ /* --lch-aqua-lighter: 30% 0.028 212;*/ /* --lch-aqua-lightest: 25% 0.017 214;*/ /* --lch-blue-darkest: 95.93% 0.0217 252;*/ /* --lch-blue-darker: 86% 0.068 254;*/ /* --lch-blue-dark: 74% 0.1293 256;*/ /* --lch-blue-medium: 62% 0.159 258;*/ /* --lch-blue-light: 40% 0.094 260;*/ /* --lch-blue-lighter: 30% 0.0452 262;*/ /* --lch-blue-lightest: 25% 0.0318 264;*/ /* --lch-violet-darkest: 95.97% 0.019 280;*/ /* --lch-violet-darker: 86% 0.068 282;*/ /* --lch-violet-dark: 74.08% 0.142 284;*/ /* --lch-violet-medium: 62% 0.184 286;*/ /* --lch-violet-light: 40% 0.108 288;*/ /* --lch-violet-lighter: 30% 0.048 290;*/ /* --lch-violet-lightest: 25% 0.025 292;*/ /* --lch-purple-darkest: 95.99% 0.0217 302;*/ /* --lch-purple-darker: 86% 0.068 304;*/ /* --lch-purple-dark: 73.98% 0.141 306;*/ /* --lch-purple-medium: 62% 0.177 308;*/ /* --lch-purple-light: 40% 0.099 310;*/ /* --lch-purple-lighter: 30% 0.04 312;*/ /* --lch-purple-lightest: 25% 0.017 314;*/ /* --lch-pink-darkest: 95.84% 0.0308 336;*/ /* --lch-pink-darker: 86% 0.074 338;*/ /* --lch-pink-dark: 74.04% 0.1294 340;*/ /* --lch-pink-medium: 62% 0.166 342;*/ /* --lch-pink-light: 40% 0.085 344;*/ /* --lch-pink-lighter: 30% 0.03 346;*/ /* --lch-pink-lightest: 25% 0.011 348;*/ /* --color-terminal-bg: var(--color-canvas);*/ /* --color-terminal-text-light: oklch(var(--lch-green-dark));*/ /* --color-golden: oklch(var(--lch-blue-medium));*/ /* --color-highlight: oklch(var(--lch-blue-lighter));*/ /* --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),*/ /* 0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),*/ /* 0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),*/ /* 0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8),*/ /* 0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),*/ /* 0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);*/ /*}*/ }