67f948028c
- new nix/forge-theme/theme-catppuccin-vibec0re.css: full Catppuccin Mocha palette mapped to all Forgejo CSS custom properties + chroma syntax highlighting; vibec0re glow effects on primary buttons, nav, and links - hive-forge.nix: ui.DEFAULT_THEME + ui.THEMES settings - systemd.tmpfiles.rules symlinks the nix-managed CSS into /var/lib/forgejo/custom/public/assets/css/ before forgejo starts; container rebuild picks up CSS changes automatically Closes #55
304 lines
13 KiB
CSS
304 lines
13 KiB
CSS
/* Catppuccin Mocha × vibec0re — hyperhive forge theme
|
||
Palette: https://catppuccin.com/palette (Mocha)
|
||
Primary accent: Mauve #cba6f7 (mirrors hive-c0re dashboard --purple)
|
||
Syntax highlighting: Catppuccin Mocha chroma palette
|
||
*/
|
||
|
||
/* ── chroma syntax highlighting ──────────────────────────────────────── */
|
||
.chroma .bp{color:#89b4fa}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm{color:#6c7086;font-style:italic}.chroma .cp{color:#a6e3a1}.chroma .cpf{color:#89b4fa}.chroma .cs{color:#cba6f7}.chroma .dl{color:#89b4fa}.chroma .gd{color:#f38ba8;background-color:#3b2335}.chroma .ge{color:#cdd6f4;font-style:italic}.chroma .gh{color:#fab387;font-weight:bold}.chroma .gi{color:#a6e3a1;background-color:#1e3320}.chroma .go{color:#6c7086}.chroma .gp{color:#cdd6f4}.chroma .gr{color:#f38ba8}.chroma .gs{color:#cdd6f4;font-weight:bold}.chroma .gt{color:#fab387}.chroma .gu{color:#a6e3a1;font-weight:bold}.chroma .il{color:#fab387}.chroma .k{color:#cba6f7}.chroma .kc{color:#89b4fa}.chroma .kd{color:#cba6f7}.chroma .kn{color:#94e2d5}.chroma .kp{color:#a6e3a1}.chroma .kr{color:#cba6f7}.chroma .kt{color:#89dceb}.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#fab387}.chroma .n{color:#cdd6f4}.chroma .na,.chroma .nb{color:#89b4fa}.chroma .nc{color:#f9e2af}.chroma .nd{color:#a6e3a1}.chroma .ne{color:#fab387}.chroma .nf,.chroma .ni{color:#89b4fa}.chroma .nl{color:#cba6f7}.chroma .nn{color:#cdd6f4}.chroma .no{color:#fab387}.chroma .nt{color:#f38ba8}.chroma .nv{color:#cdd6f4}.chroma .nx{color:#cdd6f4}.chroma .o{color:#89dceb}.chroma .ow{color:#a6e3a1}.chroma .p{color:#bac2de}.chroma .s,.chroma .s1,.chroma .s2{color:#a6e3a1}.chroma .sa{color:#fab387}.chroma .sb{color:#a6e3a1}.chroma .sc{color:#a6e3a1}.chroma .sd{color:#6c7086;font-style:italic}.chroma .se{color:#f38ba8}.chroma .sh{color:#a6e3a1}.chroma .si{color:#94e2d5}.chroma .sr{color:#cba6f7}.chroma .ss{color:#f38ba8}.chroma .sx{color:#fab387}.chroma .vc,.chroma .vg,.chroma .vi{color:#89b4fa}.chroma .w{color:#585b70}
|
||
|
||
/* ── dark-mode image visibility (same as gitea-dark) ─────────────────── */
|
||
.markup [src$="#gh-light-mode-only"],.markup [src$="#light-mode-only"],.markup [href$="#gh-light-mode-only"],.markup [href$="#light-mode-only"]{display:none}
|
||
.markup [src$="#gh-dark-mode-only"],.markup [src$="#dark-mode-only"],.markup [href$="#gh-dark-mode-only"],.markup [href$="#dark-mode-only"]{display:unset}
|
||
|
||
/* ── Catppuccin Mocha palette → Forgejo CSS vars ─────────────────────── */
|
||
:root {
|
||
--is-dark-theme: true;
|
||
color-scheme: dark;
|
||
|
||
/* Primary: Mauve #cba6f7 — matches hive-c0re dashboard --purple */
|
||
--color-primary: #cba6f7;
|
||
--color-primary-contrast: #1e1e2e;
|
||
--color-primary-dark-1: #d0aff8;
|
||
--color-primary-dark-2: #d5b8f9;
|
||
--color-primary-dark-3: #dac2fa;
|
||
--color-primary-dark-4: #dfcbfb;
|
||
--color-primary-dark-5: #ead9fc;
|
||
--color-primary-dark-6: #f4effe;
|
||
--color-primary-dark-7: #faf7ff;
|
||
--color-primary-light-1: #b895e0;
|
||
--color-primary-light-2: #a580c7;
|
||
--color-primary-light-3: #9470b0;
|
||
--color-primary-light-4: #7d5b9a;
|
||
--color-primary-light-5: #4d3866;
|
||
--color-primary-light-6: #2a1e42;
|
||
--color-primary-light-7: #110d1e;
|
||
--color-primary-alpha-10: #cba6f719;
|
||
--color-primary-alpha-20: #cba6f733;
|
||
--color-primary-alpha-30: #cba6f74b;
|
||
--color-primary-alpha-40: #cba6f766;
|
||
--color-primary-alpha-50: #cba6f780;
|
||
--color-primary-alpha-60: #cba6f799;
|
||
--color-primary-alpha-70: #cba6f7b3;
|
||
--color-primary-alpha-80: #cba6f7cc;
|
||
--color-primary-alpha-90: #cba6f7e1;
|
||
--color-primary-hover: var(--color-primary-dark-1);
|
||
--color-primary-active: var(--color-primary-dark-2);
|
||
|
||
/* Secondary: Surface1 #45475a */
|
||
--color-secondary: #45475a;
|
||
--color-secondary-dark-1: #4e5069;
|
||
--color-secondary-dark-2: #585b70;
|
||
--color-secondary-dark-3: #6c7086;
|
||
--color-secondary-dark-4: #7f849c;
|
||
--color-secondary-dark-5: #9399b2;
|
||
--color-secondary-dark-6: #a6adc8;
|
||
--color-secondary-dark-7: #bac2de;
|
||
--color-secondary-dark-8: #cdd6f4;
|
||
--color-secondary-dark-9: #d3dcf6;
|
||
--color-secondary-dark-10: #d8e1f8;
|
||
--color-secondary-dark-11: #dde5f9;
|
||
--color-secondary-dark-12: #e2eafa;
|
||
--color-secondary-dark-13: #e7eefb;
|
||
--color-secondary-light-1: #313244;
|
||
--color-secondary-light-2: #292a3a;
|
||
--color-secondary-light-3: #1e1e2e;
|
||
--color-secondary-light-4: #181825;
|
||
--color-secondary-alpha-10: #45475a19;
|
||
--color-secondary-alpha-20: #45475a33;
|
||
--color-secondary-alpha-30: #45475a4b;
|
||
--color-secondary-alpha-40: #45475a66;
|
||
--color-secondary-alpha-50: #45475a80;
|
||
--color-secondary-alpha-60: #45475a99;
|
||
--color-secondary-alpha-70: #45475ab3;
|
||
--color-secondary-alpha-80: #45475acc;
|
||
--color-secondary-alpha-90: #45475ae1;
|
||
--color-secondary-hover: var(--color-secondary-dark-3);
|
||
--color-secondary-active: var(--color-secondary-dark-2);
|
||
|
||
/* Terminal / console: Crust/Mantle tones */
|
||
--color-console-fg: #cdd6f4;
|
||
--color-console-fg-subtle: #a6adc8;
|
||
--color-console-bg: #11111b;
|
||
--color-console-border: #313244;
|
||
--color-console-hover-bg: #1e1e2e;
|
||
--color-console-active-bg: #313244;
|
||
--color-console-menu-bg: #181825;
|
||
--color-console-menu-border: #45475a;
|
||
|
||
/* Named accent colours → Catppuccin equivalents */
|
||
--color-red: #f38ba8;
|
||
--color-orange: #fab387;
|
||
--color-yellow: #f9e2af;
|
||
--color-olive: #a6e3a1;
|
||
--color-green: #a6e3a1;
|
||
--color-teal: #94e2d5;
|
||
--color-blue: #89b4fa;
|
||
--color-violet: #b4befe;
|
||
--color-purple: #cba6f7;
|
||
--color-pink: #f5c2e7;
|
||
--color-brown: #fab387;
|
||
--color-black: #11111b;
|
||
--color-red-light: #eba0ac;
|
||
--color-orange-light: #fab387;
|
||
--color-yellow-light: #f9e2af;
|
||
--color-olive-light: #a6e3a1;
|
||
--color-green-light: #a6e3a1;
|
||
--color-teal-light: #94e2d5;
|
||
--color-blue-light: #89b4fa;
|
||
--color-violet-light: #b4befe;
|
||
--color-purple-light: #cba6f7;
|
||
--color-pink-light: #f5c2e7;
|
||
--color-brown-light: #fab387;
|
||
--color-black-light: #313244;
|
||
--color-red-dark-1: #f38ba8;
|
||
--color-orange-dark-1:#fab387;
|
||
--color-yellow-dark-1:#f9e2af;
|
||
--color-olive-dark-1: #a6e3a1;
|
||
--color-green-dark-1: #a6e3a1;
|
||
--color-teal-dark-1: #94e2d5;
|
||
--color-blue-dark-1: #74c7ec;
|
||
--color-violet-dark-1:#b4befe;
|
||
--color-purple-dark-1:#cba6f7;
|
||
--color-pink-dark-1: #f5c2e7;
|
||
--color-brown-dark-1: #fab387;
|
||
--color-black-dark-1: #1e1e2e;
|
||
--color-red-dark-2: #eb8da4;
|
||
--color-orange-dark-2:#f5aa80;
|
||
--color-yellow-dark-2:#f4daa8;
|
||
--color-olive-dark-2: #9fd99b;
|
||
--color-green-dark-2: #9fd99b;
|
||
--color-teal-dark-2: #8dd9cd;
|
||
--color-blue-dark-2: #6cbfe6;
|
||
--color-violet-dark-2:#aab4f8;
|
||
--color-purple-dark-2:#c29ef2;
|
||
--color-pink-dark-2: #f0b9e2;
|
||
--color-brown-dark-2: #f0a378;
|
||
--color-black-dark-2: #181825;
|
||
|
||
/* ANSI terminal colours */
|
||
--color-ansi-black: #11111b;
|
||
--color-ansi-red: #f38ba8;
|
||
--color-ansi-green: #a6e3a1;
|
||
--color-ansi-yellow: #f9e2af;
|
||
--color-ansi-blue: #89b4fa;
|
||
--color-ansi-magenta: #f5c2e7;
|
||
--color-ansi-cyan: #94e2d5;
|
||
--color-ansi-white: var(--color-console-fg-subtle);
|
||
--color-ansi-bright-black: #45475a;
|
||
--color-ansi-bright-red: #f38ba8;
|
||
--color-ansi-bright-green: #a6e3a1;
|
||
--color-ansi-bright-yellow: #f9e2af;
|
||
--color-ansi-bright-blue: #89b4fa;
|
||
--color-ansi-bright-magenta: #f5c2e7;
|
||
--color-ansi-bright-cyan: #94e2d5;
|
||
--color-ansi-bright-white: var(--color-console-fg);
|
||
|
||
--color-grey: #45475a;
|
||
--color-grey-light: #7f849c;
|
||
--color-gold: #f9e2af;
|
||
--color-white: #cdd6f4;
|
||
|
||
/* Diff colours */
|
||
--color-diff-removed-word-bg: #4b1c2c;
|
||
--color-diff-added-word-bg: #1c3a2a;
|
||
--color-diff-removed-row-bg: #3b1525;
|
||
--color-diff-moved-row-bg: #3a3520;
|
||
--color-diff-added-row-bg: #1a2e24;
|
||
--color-diff-removed-row-border:#6b3044;
|
||
--color-diff-moved-row-border: #b0a850;
|
||
--color-diff-added-row-border: #2d5040;
|
||
--color-diff-inactive: #181825;
|
||
|
||
/* Feedback colours */
|
||
--color-error-border: #f38ba8;
|
||
--color-error-bg: #3b1525;
|
||
--color-error-bg-active: #4d1e30;
|
||
--color-error-bg-hover: #44192b;
|
||
--color-error-text: #f38ba8;
|
||
--color-success-border: #a6e3a1;
|
||
--color-success-bg: #1a2e24;
|
||
--color-success-text: #a6e3a1;
|
||
--color-warning-border: #f9e2af;
|
||
--color-warning-bg: #2e2a1a;
|
||
--color-warning-text: #f9e2af;
|
||
--color-info-border: #89b4fa;
|
||
--color-info-bg: #1a2040;
|
||
--color-info-text: #89b4fa;
|
||
|
||
/* Badge colours */
|
||
--color-red-badge: #f38ba8;
|
||
--color-red-badge-bg: #f38ba81a;
|
||
--color-red-badge-hover-bg: #f38ba84d;
|
||
--color-green-badge: #a6e3a1;
|
||
--color-green-badge-bg: #a6e3a11a;
|
||
--color-green-badge-hover-bg: #a6e3a14d;
|
||
--color-yellow-badge: #f9e2af;
|
||
--color-yellow-badge-bg: #f9e2af1a;
|
||
--color-yellow-badge-hover-bg:#f9e2af4d;
|
||
--color-orange-badge: #fab387;
|
||
--color-orange-badge-bg: #fab3871a;
|
||
--color-orange-badge-hover-bg:#fab3874d;
|
||
|
||
/* Layout */
|
||
--color-body: #1e1e2e;
|
||
--color-box-header: #181825;
|
||
--color-box-body: #11111b;
|
||
--color-box-body-highlight: #1e1e2e;
|
||
--color-text-dark: #cdd6f4;
|
||
--color-text: #cdd6f4;
|
||
--color-text-light: #bac2de;
|
||
--color-text-light-1: #a6adc8;
|
||
--color-text-light-2: #9399b2;
|
||
--color-text-light-3: #7f849c;
|
||
--color-footer: var(--color-nav-bg);
|
||
--color-timeline: #45475a;
|
||
--color-input-text: var(--color-text-dark);
|
||
--color-input-background: #11111b;
|
||
--color-input-toggle-background: #313244;
|
||
--color-input-border: var(--color-secondary);
|
||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||
--color-light: #cba6f71a;
|
||
--color-light-mimic-enabled: rgba(0,0,0,calc(40/255*222/255/var(--opacity-disabled)));
|
||
--color-light-border: #cba6f726;
|
||
--color-hover: #cba6f714;
|
||
--color-active: #313244;
|
||
--color-menu: #181825;
|
||
--color-card: #181825;
|
||
--fancy-card-bg: #11111b;
|
||
--fancy-card-border: #45475a;
|
||
--color-markup-table-row: #cba6f70d;
|
||
--color-markup-code-block: #cba6f710;
|
||
--color-markup-code-inline:#cba6f724;
|
||
--color-button: #181825;
|
||
--color-code-bg: #11111b;
|
||
--color-shadow: #11111b80;
|
||
--color-secondary-bg: #313244;
|
||
--color-expand-button: #292a3a;
|
||
--color-placeholder-text: var(--color-text-light-3);
|
||
--color-editor-line-highlight: var(--color-primary-light-5);
|
||
--color-project-column-bg: var(--color-secondary-light-2);
|
||
--color-caret: var(--color-text);
|
||
--color-reaction-bg: #cba6f710;
|
||
--color-reaction-hover-bg: var(--color-primary-light-4);
|
||
--color-reaction-active-bg: var(--color-primary-light-5);
|
||
--color-tooltip-text: #cdd6f4;
|
||
--color-tooltip-bg: #11111bee;
|
||
|
||
/* Navigation */
|
||
--color-nav-bg: #181825;
|
||
--color-nav-hover-bg: var(--color-secondary-light-1);
|
||
--color-secondary-nav-bg: #1e1e2e;
|
||
|
||
/* Labels */
|
||
--color-label-text: var(--color-text);
|
||
--color-label-bg: #7f849c40;
|
||
--color-label-hover-bg: #7f849c99;
|
||
--color-label-active-bg: #7f849cff;
|
||
|
||
/* Accent */
|
||
--color-accent: var(--color-primary-light-1);
|
||
--color-small-accent: var(--color-primary-light-5);
|
||
|
||
/* Highlight / selection */
|
||
--color-highlight-fg: #cba6f7;
|
||
--color-highlight-bg: #4d38663a;
|
||
--color-overlay-backdrop: #11111bc0;
|
||
--color-selection-bg: var(--color-primary-light-1);
|
||
--color-selection-fg: #1e1e2e;
|
||
|
||
/* Misc */
|
||
--checkerboard-color-1: #313244;
|
||
--checkerboard-color-2: #1e1e2e;
|
||
--color-indicator-offline: #6c7086;
|
||
--color-indicator-offline-20: #6c70861a;
|
||
--color-indicator-idle: #a6e3a1;
|
||
--color-indicator-idle-20: #a6e3a11a;
|
||
--color-indicator-active: #89b4fa;
|
||
--color-indicator-active-20: #89b4fa33;
|
||
|
||
accent-color: var(--color-accent);
|
||
}
|
||
|
||
/* ── vibec0re: glow accents on interactive elements ──────────────────── */
|
||
.ui.primary.button,
|
||
a.ui.primary.button,
|
||
.ui.primary.buttons .button {
|
||
text-shadow: 0 0 8px rgba(203, 166, 247, 0.6);
|
||
box-shadow: 0 0 12px -2px rgba(203, 166, 247, 0.35);
|
||
}
|
||
.ui.primary.button:hover,
|
||
.ui.primary.buttons .button:hover {
|
||
box-shadow: 0 0 18px -2px rgba(203, 166, 247, 0.55);
|
||
}
|
||
#navbar .item.active,
|
||
#navbar .item:hover {
|
||
text-shadow: 0 0 6px rgba(203, 166, 247, 0.45);
|
||
}
|
||
.repository .file-view .lines-num {
|
||
background: #181825;
|
||
border-color: #313244;
|
||
}
|
||
a:not(.ui.button):not(.item) {
|
||
text-shadow: 0 0 3px rgba(137, 180, 250, 0.25);
|
||
}
|