Jason Zimdars
a3b81af1da
* main: (284 commits) Polish closed stamp Add new card button to considering column Let's leave inside the menu for now Improve terminal history behavior More space between Add a navigation hint, make "All collections" link navigate like the others Reorder methods Fix: dismiss notifications from comments Fix card icons Filter collections menus, add keyboard shortcuts Style Space between Remove debug Consistent sizing Configure deployment for load balancing Configure the autoclose period at the collection level Rename to avoid using the same name Add brakeman rule Collections can be private now too Not used outside the class anymore ...
273 lines
9.1 KiB
CSS
273 lines
9.1 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.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;
|
|
|
|
/* Borders */
|
|
--border: 1px solid var(--color-ink-lighter);
|
|
|
|
/* Shadows */
|
|
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
|
|
0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.2),
|
|
0 .4em 2.4em -1em oklch(var(--lch-black) / 0.3),
|
|
0 .4em .8em -1.2em oklch(var(--lch-black) / 0.4),
|
|
0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.5),
|
|
0 1.2em 1.6em -2em oklch(var(--lch-black) / 0.6);
|
|
|
|
/* Components */
|
|
--btn-size: 2.65em;
|
|
|
|
/* 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: 70% 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% 0.03 50;
|
|
--lch-uncolor-dark: 57% 0.04 60;
|
|
--lch-uncolor-medium: 70% 0.044 70;
|
|
--lch-uncolor-light: 84% 0.028 80;
|
|
--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: 70.4% 0.19 40;
|
|
--lch-red-light: 84% 0.07 42;
|
|
--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: 76% 0.17 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: 71% 0.158 112;
|
|
--lch-lime-light: 84% 0.08 113;
|
|
--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: 70% 0.19 146;
|
|
--lch-green-light: 84% 0.07 145;
|
|
--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: 70% 0.13 208;
|
|
--lch-aqua-light: 84% 0.04 206;
|
|
--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% 0.19 260;
|
|
--lch-blue-medium: 70% 0.169 258;
|
|
--lch-blue-light: 84% 0.06 256;
|
|
--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 288;
|
|
--lch-violet-medium: 70% 0.178 286;
|
|
--lch-violet-light: 84% 0.07 284;
|
|
--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: 70% 0.22 308;
|
|
--lch-purple-light: 84% 0.07 306;
|
|
--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: 70% 0.198 342;
|
|
--lch-pink-light: 84% 0.07 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: 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-container: oklch(var(--lch-aqua-light));
|
|
--color-terminal-bg: oklch(var(--lch-blue-darkest));
|
|
--color-terminal-text: oklch(var(--lch-green-medium));
|
|
|
|
/* Colors: Cards */
|
|
--color-card-1: oklch(var(--lch-ink-dark));
|
|
--color-card-2: oklch(var(--lch-uncolor-dark));
|
|
--color-card-3: oklch(var(--lch-yellow-dark));
|
|
--color-card-4: oklch(var(--lch-lime-dark));
|
|
--color-card-5: oklch(var(--lch-aqua-dark));
|
|
--color-card-6: oklch(var(--lch-blue-dark));
|
|
--color-card-7: oklch(var(--lch-violet-dark));
|
|
--color-card-8: oklch(var(--lch-purple-dark));
|
|
--color-card-9: oklch(var(--lch-pink-dark));
|
|
|
|
@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-container: oklch(var(--lch-aqua-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);
|
|
}
|
|
}
|