bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
017bcc9ce1216b5e3379be94f97d4516d18add44
fizzy/app/assets/stylesheets/_global.css
T
Adrien Maston 268c6431af Merge branch 'main' into mobile/prepare-webviews-2 
* main: (73 commits)
  Fix that caching should be disabled in dev by default. References 3cf841d463.
  Revert "Add CJK (Chinese, Japanese, Korean) search support"
  Account for new button sizes on mobile
  Bump filter z-index when filters are open
  Use a dedicated resource for showing cards in draft mode
  Refactor popup.css styles for focus state
  Add Segoe UI Variable Fizzy font face configuration comments
  Update @layer name to `base` in font-face definition for "Segoe UI Variable Fizzy"
  Repair scope for card styles within the columns view
  Add missing list to cards page
  Account for simpler public views
  Fix public layout
  Pull board-tools outside of the list for mobile
  saas: move log_level setting into an environment variable
  Restore log level configurability in production environment
  Remove engagements
  Go back to board after clearing filters
  Ensure filters sit on top of cards
  Fix public boards
  Fix card grid layout
  ...
2026-01-09 10:58:21 +01:00

481 lines
16 KiB
CSS
Raw Blame History

@layer reset, base, components, modules, utilities, native, platform;
:root {
/* Insets - The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
--custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
--custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
--custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
--custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
/* 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: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Fizzy", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--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%);
/* 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: 1400px;
/* Z-index */
--z-events-column-header: 1;
--z-events-day-header: 3;
--z-popup: 10;
--z-nav: 20;
--z-flash: 30;
--z-tooltip: 40;
--z-bar: 50;
--z-tray: 51;
--z-welcome: 52;
--z-nav-open: 100;
/* 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: 56% 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-maybe: 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: 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);
}
/* Dark mode - explicit theme choice overrides system preference */
html[data-theme="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 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
0 0.4em 2.4em -1em oklch(var(--lch-black) / 0.7),
0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8),
0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
}
/* Fallback to system preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--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);
}
}
Reference in New Issue View Git Blame Copy Permalink