Andy Smith
58c0314c17
* main: (161 commits) Save expanded state to localStorage Update seeds to use the workflow stages Disable autocomplete when editing columns Reset column form and disable autocomplete Remove unused job Fix Stream workflow stage BG We need the grid layout when filtering events Fix: proper filtering by collection in the collection perma Fix test Fix test Position expander menu Use parent layout when using with_manual_pagination Reinstate gap to cards list Fix: include collection filter in the collection perma Add some basic caching for the new columns approach Format Fix tests No need to use extra method here Move actions to stream templates Prevent recursive loop now that we have nested frames ...
344 lines
12 KiB
CSS
344 lines
12 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 */
|
|
--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.5rem;
|
|
--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%);
|
|
|
|
/* Patterns */
|
|
--wavy-background-mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
|
|
radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
|
|
|
|
/* Components */
|
|
--btn-size: 2.65em;
|
|
--footer-height: 3.5rem;
|
|
--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;
|
|
|
|
/* 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: 1400px;
|
|
|
|
/* Z-index */
|
|
--z-events-column-header: 1;
|
|
--z-events-day-header: 3;
|
|
--z-nav: 11;
|
|
--z-popup: 10;
|
|
--z-terminal: 20;
|
|
--z-tray: 21;
|
|
--z-tooltip: 30;
|
|
|
|
/* OKLCH colors: Fixed */
|
|
--lch-black: 0% 0 0;
|
|
--lch-white: 100% 0 0;
|
|
|
|
/* OKLCH colors: Light mode */
|
|
--lch-canvas: var(--lch-white);
|
|
--lch-ink-inverted: var(--lch-white);
|
|
|
|
--lch-ink-darkest: 26% 0.05 264;
|
|
--lch-ink-darker: 40% 0.026 262;
|
|
--lch-ink-dark: 57% 0.014 260;
|
|
--lch-ink-medium: 66% 0.008 258;
|
|
--lch-ink-light: 84% 0.005 256;
|
|
--lch-ink-lighter: 92% 0.003 254;
|
|
--lch-ink-lightest: 96% 0.002 252;
|
|
|
|
--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-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: Cards */
|
|
--color-card-default: oklch(var(--lch-blue-dark));
|
|
--color-card-complete: var(--color-ink-darker);
|
|
--color-card-1: oklch(var(--lch-ink-medium));
|
|
--color-card-2: oklch(var(--lch-uncolor-medium));
|
|
--color-card-3: oklch(var(--lch-yellow-medium));
|
|
--color-card-4: oklch(var(--lch-lime-medium));
|
|
--color-card-5: oklch(var(--lch-aqua-medium));
|
|
--color-card-6: oklch(var(--lch-violet-medium));
|
|
--color-card-7: oklch(var(--lch-purple-medium));
|
|
--color-card-8: oklch(var(--lch-pink-medium));
|
|
|
|
/* 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);
|
|
|
|
@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));
|
|
|
|
--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);
|
|
}
|
|
}
|