Andy Smith
c853d3c570
* main: (31 commits) Style drafted cards Considering needs to include drafted cards or you'll never be able to see them This item makes no sense until it's saved Tighten engagement switch design, only display it for published cards Needed to come first In order of appearance Schema movement -- is this because the dumper doesnt sort deterministically? cc @flavorjones Move comments under cards Fix indention Refresh timers when morphing happens Extract helper for card articles, use classes to determine when to show golden status Only consider golden those cards in "doing" Fix recently completed order for good! Place recently closed cards first Monkey patch a prepend_order method Rename inconsistency: go with goldness Touch Use gild/ungild Format Fix test ...
98 lines
3.4 KiB
CSS
98 lines
3.4 KiB
CSS
@layer reset, base, components, modules, utilities;
|
|
|
|
:root {
|
|
/* Spacing */
|
|
--inline-space: 1ch;
|
|
--inline-space-half: calc(var(--inline-space) / 2);
|
|
--inline-space-double: calc(var(--inline-space) * 2);
|
|
--block-space: 1rem;
|
|
--block-space-half: calc(var(--block-space) / 2);
|
|
--block-space-double: calc(var(--block-space) * 2);
|
|
|
|
/* Text */
|
|
--text-xx-small: 0.55rem;
|
|
--text-x-small: 0.7rem;
|
|
--text-small: 0.8rem;
|
|
--text-normal: 1rem;
|
|
--text-medium: 1.1rem;
|
|
--text-large: 1.5rem;
|
|
--text-x-large: 1.8rem;
|
|
--text-xx-large: 2.5rem;
|
|
|
|
/* Borders */
|
|
--border: 1px solid var(--color-subtle);
|
|
|
|
/* Shadows */
|
|
--shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02),
|
|
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
|
|
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
|
|
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
|
|
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
|
|
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
|
|
|
|
/* Components */
|
|
--btn-size: 2.65em;
|
|
|
|
/* Color values */
|
|
--lch-black: 27.13% 0.1035 284.77;
|
|
--lch-white: 100% 0 0;
|
|
--lch-gray-light: 96% 0.005 96;
|
|
--lch-gray: 92% 0.005 96;
|
|
--lch-gray-dark: 75% 0.005 96;
|
|
--lch-blue: 54% 0.15 255;
|
|
--lch-blue-light: 95% 0.03 255;
|
|
--lch-blue-dark: 80% 0.08 255;
|
|
--lch-golden: 83% 0.1128 72.43;
|
|
--lch-orange: 70% 0.2 44;
|
|
--lch-red: 51% 0.2 31;
|
|
--lch-green: 65.59% 0.234 142.49;
|
|
--lch-green-light: 95% 0.03 142.49;
|
|
--lch-yellow: 92.62% 0.1 91.5;
|
|
--lch-always-black: 0% 0 0;
|
|
--lch-always-white: 100% 0 0;
|
|
--lch-light-blue: 84.94% 0.048 216.62;
|
|
|
|
/* Color abstractions */
|
|
--color-negative: oklch(var(--lch-red));
|
|
--color-positive: oklch(var(--lch-green));
|
|
--color-positive-light: oklch(var(--lch-green-light));
|
|
--color-bg: oklch(var(--lch-white));
|
|
--color-ink: oklch(var(--lch-black));
|
|
--color-ink-reversed: oklch(var(--lch-white));
|
|
--color-link: oklch(var(--lch-blue));
|
|
--color-subtle-light: oklch(var(--lch-gray-light));
|
|
--color-subtle: oklch(var(--lch-gray));
|
|
--color-subtle-dark: oklch(var(--lch-gray-dark));
|
|
--color-selected: oklch(var(--lch-blue-light));
|
|
--color-selected-dark: oklch(var(--lch-blue-dark));
|
|
--color-highlight: oklch(var(--lch-yellow));
|
|
--color-marker: oklch(var(--lch-orange));
|
|
--color-always-black: oklch(var(--lch-always-black));
|
|
--color-always-white: oklch(var(--lch-always-white));
|
|
--color-container: oklch(var(--lch-light-blue));
|
|
--color-golden: oklch(var(--lch-golden));
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--lch-black: 100% 0 0;
|
|
--lch-white: 0% 0 0;
|
|
--lch-gray-light: 25.2% 0 0;
|
|
--lch-gray: 30.12% 0 0;
|
|
--lch-gray-dark: 44.95% 0 0;
|
|
--lch-blue: 72.25% 0.16 248;
|
|
--lch-blue-light: 28.11% 0.053 248;
|
|
--lch-blue-dark: 42.25% 0.07 248;
|
|
--lch-red: 73.8% 0.184 29.18;
|
|
--lch-green: 75% 0.21 141.89;
|
|
--lch-green-light: 28.11% 0.02 142.49;
|
|
--lch-yellow: 40.9% 0.06 88.9;
|
|
--lch-light-blue: 20.62% 0.048 216.62;
|
|
|
|
--shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42),
|
|
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
|
|
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
|
|
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
|
|
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
|
|
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
|
|
}
|
|
}
|