Add Forgejo theme and homepage
This commit is contained in:
commit
92363fca9b
31 changed files with 4044 additions and 0 deletions
1
themes/_base-forgejo-auto.css
Normal file
1
themes/_base-forgejo-auto.css
Normal file
File diff suppressed because one or more lines are too long
1
themes/_base-forgejo-dark.css
Normal file
1
themes/_base-forgejo-dark.css
Normal file
File diff suppressed because one or more lines are too long
1
themes/_base-forgejo-light.css
Normal file
1
themes/_base-forgejo-light.css
Normal file
File diff suppressed because one or more lines are too long
406
themes/theme-aurora-dark.css
Normal file
406
themes/theme-aurora-dark.css
Normal file
|
|
@ -0,0 +1,406 @@
|
|||
/*
|
||||
* theme-aurora-dark.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Colourful dark + soft-UI.
|
||||
* True neutral-charcoal base (no indigo/purple cast) so it reads as a real
|
||||
* dark theme, with a vivid blue primary and teal links. The neumorphic
|
||||
* highlight is kept subtle since the base is dark.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-dark.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "SF Pro Text", -apple-system, "Segoe UI",
|
||||
"Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code",
|
||||
"SF Mono", "Source Code Pro", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Neutral charcoal ramp (dark → light) ───────────────────────── */
|
||||
--steel-900: #121314;
|
||||
--steel-850: #121314;
|
||||
--steel-800: #191a1c;
|
||||
--steel-750: #212224;
|
||||
--steel-700: #212224;
|
||||
--steel-650: #2e3033;
|
||||
--steel-600: #3d4045;
|
||||
--steel-550: #4d5158;
|
||||
--steel-500: #6b7079;
|
||||
--steel-450: #8a8f98;
|
||||
--steel-400: #a8adb5;
|
||||
--steel-350: #c6cad0;
|
||||
--steel-300: #c6cad0;
|
||||
--steel-250: #dfe1e5;
|
||||
--steel-200: #dfe1e5;
|
||||
--steel-150: #edeef1;
|
||||
--steel-100: #f7f8fa;
|
||||
|
||||
/* ── Primary: vivid blue ────────────────────────────────────────── */
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-contrast: #0b1220;
|
||||
--color-primary-dark-1: #60a5fa;
|
||||
--color-primary-dark-2: #60a5fa;
|
||||
--color-primary-dark-3: #93c5fd;
|
||||
--color-primary-dark-4: #93c5fd;
|
||||
--color-primary-dark-5: #bfdbfe;
|
||||
--color-primary-dark-6: #bfdbfe;
|
||||
--color-primary-dark-7: #dbeafe;
|
||||
--color-primary-light-1: #2563eb;
|
||||
--color-primary-light-2: #1d4ed8;
|
||||
--color-primary-light-3: #1d4ed8;
|
||||
--color-primary-light-4: #1e40af;
|
||||
--color-primary-light-5: #1e3a8a;
|
||||
--color-primary-light-6: #172f6e;
|
||||
--color-primary-light-7: #122452;
|
||||
--color-primary-alpha-10: rgba(59, 130, 246, 0.10);
|
||||
--color-primary-alpha-20: rgba(59, 130, 246, 0.20);
|
||||
--color-primary-alpha-30: rgba(59, 130, 246, 0.30);
|
||||
--color-primary-alpha-40: rgba(59, 130, 246, 0.40);
|
||||
--color-primary-alpha-50: rgba(59, 130, 246, 0.50);
|
||||
--color-primary-alpha-60: rgba(59, 130, 246, 0.60);
|
||||
--color-primary-alpha-70: rgba(59, 130, 246, 0.70);
|
||||
--color-primary-alpha-80: rgba(59, 130, 246, 0.80);
|
||||
--color-primary-alpha-90: rgba(59, 130, 246, 0.90);
|
||||
--color-primary-hover: #60a5fa;
|
||||
--color-primary-active: #2563eb;
|
||||
|
||||
/* ── Secondary ──────────────────────────────────────────────────── */
|
||||
--color-secondary: #2e3033;
|
||||
--color-secondary-dark-1: #4d5158;
|
||||
--color-secondary-dark-2: #6b7079;
|
||||
--color-secondary-dark-3: #8a8f98;
|
||||
--color-secondary-dark-4: #8a8f98;
|
||||
--color-secondary-dark-5: #a8adb5;
|
||||
--color-secondary-dark-6: #a8adb5;
|
||||
--color-secondary-dark-7: #c6cad0;
|
||||
--color-secondary-dark-8: #c6cad0;
|
||||
--color-secondary-dark-9: #dfe1e5;
|
||||
--color-secondary-dark-10: #edeef1;
|
||||
--color-secondary-dark-11: #edeef1;
|
||||
--color-secondary-dark-12: #f7f8fa;
|
||||
--color-secondary-dark-13: #f7f8fa;
|
||||
--color-secondary-light-1: #3d4045;
|
||||
--color-secondary-light-2: #212224;
|
||||
--color-secondary-light-3: #212224;
|
||||
--color-secondary-light-4: #191a1c;
|
||||
--color-secondary-alpha-10: rgba(46, 48, 51, 0.10);
|
||||
--color-secondary-alpha-20: rgba(46, 48, 51, 0.20);
|
||||
--color-secondary-alpha-30: rgba(46, 48, 51, 0.30);
|
||||
--color-secondary-alpha-40: rgba(46, 48, 51, 0.40);
|
||||
--color-secondary-alpha-50: rgba(46, 48, 51, 0.50);
|
||||
--color-secondary-alpha-60: rgba(46, 48, 51, 0.60);
|
||||
--color-secondary-alpha-70: rgba(46, 48, 51, 0.70);
|
||||
--color-secondary-alpha-80: rgba(46, 48, 51, 0.80);
|
||||
--color-secondary-alpha-90: rgba(46, 48, 51, 0.90);
|
||||
--color-secondary-hover: #3d4045;
|
||||
--color-secondary-active: #4d5158;
|
||||
|
||||
/* ── Named accents: vivid, no purple ────────────────────────────── */
|
||||
--color-red: #f87171;
|
||||
--color-orange: #fb923c;
|
||||
--color-yellow: #fbbf24;
|
||||
--color-olive: #a3e635;
|
||||
--color-green: #4ade80;
|
||||
--color-teal: #2dd4bf;
|
||||
--color-blue: #60a5fa;
|
||||
--color-violet: #38bdf8;
|
||||
--color-purple: #7dd3fc;
|
||||
--color-pink: #f472b6;
|
||||
--color-brown: #d1a684;
|
||||
--color-grey: #94a3b8;
|
||||
--color-black: #212224;
|
||||
|
||||
--color-red-light: #fca5a5;
|
||||
--color-orange-light: #fdba74;
|
||||
--color-yellow-light: #fcd34d;
|
||||
--color-olive-light: #bef264;
|
||||
--color-green-light: #86efac;
|
||||
--color-teal-light: #5eead4;
|
||||
--color-blue-light: #93c5fd;
|
||||
--color-violet-light: #7dd3fc;
|
||||
--color-purple-light: #bae6fd;
|
||||
--color-pink-light: #f9a8d4;
|
||||
--color-brown-light: #e3c4a8;
|
||||
--color-grey-light: #cbd5e1;
|
||||
--color-black-light: #2e3033;
|
||||
|
||||
--color-red-dark-1: #dc2626;
|
||||
--color-orange-dark-1: #ea580c;
|
||||
--color-yellow-dark-1: #d97706;
|
||||
--color-olive-dark-1: #65a30d;
|
||||
--color-green-dark-1: #16a34a;
|
||||
--color-teal-dark-1: #0d9488;
|
||||
--color-blue-dark-1: #2563eb;
|
||||
--color-violet-dark-1: #0ea5e9;
|
||||
--color-purple-dark-1: #38bdf8;
|
||||
--color-pink-dark-1: #db2777;
|
||||
--color-brown-dark-1: #a8714a;
|
||||
--color-grey-dark-1: #64748b;
|
||||
--color-black-dark-1: #121314;
|
||||
|
||||
--color-red-dark-2: #b91c1c;
|
||||
--color-orange-dark-2: #c2410c;
|
||||
--color-yellow-dark-2: #b45309;
|
||||
--color-olive-dark-2: #4d7c0f;
|
||||
--color-green-dark-2: #15803d;
|
||||
--color-teal-dark-2: #0f766e;
|
||||
--color-blue-dark-2: #1d4ed8;
|
||||
--color-violet-dark-2: #0284c7;
|
||||
--color-purple-dark-2: #0ea5e9;
|
||||
--color-pink-dark-2: #be185d;
|
||||
--color-brown-dark-2: #8a5a3a;
|
||||
--color-grey-dark-2: #475569;
|
||||
--color-black-dark-2: #121314;
|
||||
|
||||
--color-gold: #eab308;
|
||||
--color-white: #f7f8fa;
|
||||
--color-pure-black: #121314;
|
||||
|
||||
/* ── ANSI ───────────────────────────────────────────────────────── */
|
||||
--color-ansi-black: #212224;
|
||||
--color-ansi-red: #dc2626;
|
||||
--color-ansi-green: #16a34a;
|
||||
--color-ansi-yellow: #d97706;
|
||||
--color-ansi-blue: #2563eb;
|
||||
--color-ansi-magenta: #0ea5e9;
|
||||
--color-ansi-cyan: #0d9488;
|
||||
--color-ansi-white: #a8adb5;
|
||||
--color-ansi-bright-black: #4d5158;
|
||||
--color-ansi-bright-red: #f87171;
|
||||
--color-ansi-bright-green: #4ade80;
|
||||
--color-ansi-bright-yellow: #fbbf24;
|
||||
--color-ansi-bright-blue: #60a5fa;
|
||||
--color-ansi-bright-magenta: #38bdf8;
|
||||
--color-ansi-bright-cyan: #2dd4bf;
|
||||
--color-ansi-bright-white: #f7f8fa;
|
||||
|
||||
/* ── Diffs ──────────────────────────────────────────────────────── */
|
||||
--color-diff-removed-word-bg: rgba(248, 113, 113, 0.30);
|
||||
--color-diff-added-word-bg: rgba(74, 222, 128, 0.26);
|
||||
--color-diff-removed-row-bg: rgba(248, 113, 113, 0.10);
|
||||
--color-diff-moved-row-bg: rgba(251, 191, 36, 0.13);
|
||||
--color-diff-added-row-bg: rgba(74, 222, 128, 0.10);
|
||||
--color-diff-removed-row-border: rgba(248, 113, 113, 0.40);
|
||||
--color-diff-moved-row-border: rgba(251, 191, 36, 0.40);
|
||||
--color-diff-added-row-border: rgba(74, 222, 128, 0.40);
|
||||
--color-diff-inactive: #212224;
|
||||
|
||||
/* ── Status ─────────────────────────────────────────────────────── */
|
||||
--color-error-border: #dc2626;
|
||||
--color-error-bg: #3a1f22;
|
||||
--color-error-bg-active: #4a262a;
|
||||
--color-error-bg-hover: #4a262a;
|
||||
--color-error-text: #fca5a5;
|
||||
--color-success-border: #16a34a;
|
||||
--color-success-bg: #14301f;
|
||||
--color-success-text: #86efac;
|
||||
--color-warning-border: #d97706;
|
||||
--color-warning-bg: #37280f;
|
||||
--color-warning-text: #fcd34d;
|
||||
--color-info-border: #2563eb;
|
||||
--color-info-bg: #16233f;
|
||||
--color-info-text: #93c5fd;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #f87171;
|
||||
--color-red-badge-bg: rgba(248, 113, 113, 0.14);
|
||||
--color-red-badge-hover-bg: rgba(248, 113, 113, 0.26);
|
||||
--color-green-badge: #4ade80;
|
||||
--color-green-badge-bg: rgba(74, 222, 128, 0.14);
|
||||
--color-green-badge-hover-bg: rgba(74, 222, 128, 0.26);
|
||||
--color-yellow-badge: #fbbf24;
|
||||
--color-yellow-badge-bg: rgba(251, 191, 36, 0.14);
|
||||
--color-yellow-badge-hover-bg: rgba(251, 191, 36, 0.26);
|
||||
--color-orange-badge: #fb923c;
|
||||
--color-orange-badge-bg: rgba(251, 146, 60, 0.14);
|
||||
--color-orange-badge-hover-bg: rgba(251, 146, 60, 0.26);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #4ade80;
|
||||
--color-thin-red: #f87171;
|
||||
--color-thin-purple: #38bdf8;
|
||||
--color-thin-orange: #fb923c;
|
||||
--color-thin-red-highlight: #fca5a5;
|
||||
--color-danger-bg: #3a1f22;
|
||||
|
||||
/* ── Surfaces ───────────────────────────────────────────────────── */
|
||||
--color-body: #191a1c;
|
||||
--color-box-header: #212224;
|
||||
--color-box-body: #212224;
|
||||
--color-box-body-highlight: #2e3033;
|
||||
--color-text-dark: #0b0c0d;
|
||||
--color-text: #e6e7e9;
|
||||
--color-text-light: #c6cad0;
|
||||
--color-text-light-1: #c6cad0;
|
||||
--color-text-light-2: #a8adb5;
|
||||
--color-text-light-3: #8a8f98;
|
||||
--color-footer: #121314;
|
||||
--color-timeline: #2e3033;
|
||||
--color-input-text: #e6e7e9;
|
||||
--color-input-background: #141517;
|
||||
--color-input-toggle-background: #2e3033;
|
||||
--color-input-border: #3d4045;
|
||||
--color-input-border-hover: #4d5158;
|
||||
--color-header-wrapper: #121314;
|
||||
--color-header-wrapper-transparent: rgba(18, 19, 20, 0);
|
||||
--color-light: rgba(0, 0, 0, 0.30);
|
||||
--color-light-border: rgba(255, 255, 255, 0.10);
|
||||
--color-hover: #2e3033;
|
||||
--color-active: #383a3e;
|
||||
--color-menu: #212224;
|
||||
--color-card: #212224;
|
||||
--fancy-card-bg: #212224;
|
||||
--fancy-card-border: #2e3033;
|
||||
--color-markup-table-row: rgba(255, 255, 255, 0.03);
|
||||
--color-markup-code-block: #141517;
|
||||
--color-markup-code-inline: #212224;
|
||||
--color-button: #212224;
|
||||
--color-code-bg: #141517;
|
||||
--color-shadow: rgba(0, 0, 0, 0.45);
|
||||
--color-secondary-bg: #212224;
|
||||
--color-text-focus: #f7f8fa;
|
||||
--color-expand-button: #2e3033;
|
||||
--color-placeholder-text: #5f646c;
|
||||
--color-editor-line-highlight: #212224;
|
||||
--color-project-board-bg: #212224;
|
||||
--color-project-board-dark-label: #8a8f98;
|
||||
--color-caret: #3b82f6;
|
||||
--color-reaction-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-reaction-active-bg: rgba(59, 130, 246, 0.22);
|
||||
--color-reaction-hover-bg: rgba(59, 130, 246, 0.32);
|
||||
--color-tooltip-text: #e6e7e9;
|
||||
--color-tooltip-bg: #121314;
|
||||
--color-nav-bg: #121314;
|
||||
--color-nav-hover-bg: #2e3033;
|
||||
--color-secondary-nav-bg: #191a1c;
|
||||
--color-label-text: #e6e7e9;
|
||||
--color-label-bg: #2e3033;
|
||||
--color-label-hover-bg: #3d4045;
|
||||
--color-label-active-bg: #4d5158;
|
||||
--color-label-bg-alt: #3d4045;
|
||||
--color-accent: #3b82f6;
|
||||
--color-small-accent: #2dd4bf;
|
||||
--color-highlight-fg: #60a5fa;
|
||||
--color-highlight-bg: rgba(59, 130, 246, 0.16);
|
||||
--color-overlay-backdrop: rgba(18, 19, 20, 0.80);
|
||||
--color-selection-bg: rgba(59, 130, 246, 0.30);
|
||||
--color-selection-fg: #f7f8fa;
|
||||
--checkerboard-color-1: #212224;
|
||||
--checkerboard-color-2: #141517;
|
||||
--color-indicator-offline: #6b7079;
|
||||
--color-indicator-offline-20: rgba(107, 112, 121, 0.20);
|
||||
--color-indicator-idle: #4ade80;
|
||||
--color-indicator-idle-20: rgba(74, 222, 128, 0.20);
|
||||
--color-indicator-active: #60a5fa;
|
||||
--color-indicator-active-20: rgba(96, 165, 250, 0.20);
|
||||
|
||||
/* ── Console ────────────────────────────────────────────────────── */
|
||||
--color-console-fg: #e6e7e9;
|
||||
--color-console-fg-subtle: #8a8f98;
|
||||
--color-console-bg: #0e0f10;
|
||||
--color-console-border: #212224;
|
||||
--color-console-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-console-active-bg: #3d4045;
|
||||
--color-console-menu-bg: #212224;
|
||||
--color-console-menu-border: #4d5158;
|
||||
|
||||
/* ── Neumorphism (dark base → stronger dark shadow) ─────────────── */
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.72);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.07);
|
||||
--nm-divider-color: rgba(255, 255, 255, 0.07);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Aurora dark flavour
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #191a1c !important;
|
||||
color: #e6e7e9 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: #2dd4bf !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #5eead4 !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a,
|
||||
.sha,
|
||||
.commit-sha { color: #8a8f98 !important; }
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover,
|
||||
.ui.breadcrumb a:hover { color: #5eead4 !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #f7f8fa !important; font-weight: 600; }
|
||||
|
||||
::selection {
|
||||
background: rgba(59, 130, 246, 0.30);
|
||||
color: #f7f8fa;
|
||||
}
|
||||
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha { font-family: var(--fonts-monospace) !important; }
|
||||
|
||||
/* Colourful syntax highlighting */
|
||||
.chroma { background: #141517 !important; }
|
||||
.chroma .err { color: #f87171; background: transparent; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #7f858f; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
|
||||
.chroma .kr, .chroma .kt { color: #f87171; }
|
||||
.chroma .o, .chroma .ow { color: #fb923c; }
|
||||
.chroma .p { color: #a8adb5; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
|
||||
.chroma .sd, .chroma .sh, .chroma .sx { color: #4ade80; }
|
||||
.chroma .se, .chroma .ss { color: #2dd4bf; }
|
||||
.chroma .si, .chroma .sa { color: #fbbf24; }
|
||||
.chroma .sr { color: #60a5fa; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
|
||||
.chroma .mi, .chroma .mo, .chroma .il { color: #fbbf24; }
|
||||
.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv,
|
||||
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #e6e7e9; }
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .ni, .chroma .nl, .chroma .py { color: #fbbf24; }
|
||||
.chroma .nf { color: #60a5fa; }
|
||||
.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #2dd4bf; }
|
||||
.chroma .no { color: #fb923c; }
|
||||
.chroma .go { color: #8a8f98; }
|
||||
.chroma .gp { color: #a8adb5; }
|
||||
.chroma .gh { color: #60a5fa; font-weight: bold; }
|
||||
.chroma .gu { color: #4ade80; }
|
||||
.chroma .gt { color: #f87171; }
|
||||
.chroma .gd { color: #f7f8fa; background-color: #3a1f22; }
|
||||
.chroma .gi { color: #f7f8fa; background-color: #14301f; }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #f87171; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #fbbf24; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #60a5fa; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #7f858f; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #4ade80; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #2dd4bf; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #fbbf24; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #f87171; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #60a5fa; }
|
||||
396
themes/theme-aurora-light.css
Normal file
396
themes/theme-aurora-light.css
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
/*
|
||||
* theme-aurora-light.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Colourful light + soft-UI (no purple). Default theme.
|
||||
* Soft slate base so the neumorphic shadows read, with a vivid blue primary
|
||||
* and teal links.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-light.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "SF Pro Text", -apple-system, "Segoe UI",
|
||||
"Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code",
|
||||
"SF Mono", "Source Code Pro", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Slate neutral ramp (100 = darkest, 900 = lightest) ─────────── */
|
||||
--steel-100: #20262f;
|
||||
--steel-150: #2d3542;
|
||||
--steel-200: #2d3542;
|
||||
--steel-250: #3f4956;
|
||||
--steel-300: #3f4956;
|
||||
--steel-350: #5a6675;
|
||||
--steel-400: #74808f;
|
||||
--steel-450: #8d99a8;
|
||||
--steel-500: #aab4c1;
|
||||
--steel-550: #c3ccd8;
|
||||
--steel-600: #d4dbe4;
|
||||
--steel-650: #d4dbe4;
|
||||
--steel-700: #dee4ec;
|
||||
--steel-750: #e6ebf2;
|
||||
--steel-800: #edf1f6;
|
||||
--steel-850: #f4f7fa;
|
||||
--steel-900: #f4f7fa;
|
||||
|
||||
/* ── Primary: vivid blue ────────────────────────────────────────── */
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-contrast: #f8fafc;
|
||||
--color-primary-dark-1: #2563eb;
|
||||
--color-primary-dark-2: #1d4ed8;
|
||||
--color-primary-dark-3: #1d4ed8;
|
||||
--color-primary-dark-4: #1e40af;
|
||||
--color-primary-dark-5: #1e40af;
|
||||
--color-primary-dark-6: #172f6e;
|
||||
--color-primary-dark-7: #122452;
|
||||
--color-primary-light-1: #3b82f6;
|
||||
--color-primary-light-2: #60a5fa;
|
||||
--color-primary-light-3: #60a5fa;
|
||||
--color-primary-light-4: #93c5fd;
|
||||
--color-primary-light-5: #bfdbfe;
|
||||
--color-primary-light-6: #dbeafe;
|
||||
--color-primary-light-7: #eff6ff;
|
||||
--color-primary-alpha-10: rgba(37, 99, 235, 0.10);
|
||||
--color-primary-alpha-20: rgba(37, 99, 235, 0.20);
|
||||
--color-primary-alpha-30: rgba(37, 99, 235, 0.30);
|
||||
--color-primary-alpha-40: rgba(37, 99, 235, 0.40);
|
||||
--color-primary-alpha-50: rgba(37, 99, 235, 0.50);
|
||||
--color-primary-alpha-60: rgba(37, 99, 235, 0.60);
|
||||
--color-primary-alpha-70: rgba(37, 99, 235, 0.70);
|
||||
--color-primary-alpha-80: rgba(37, 99, 235, 0.80);
|
||||
--color-primary-alpha-90: rgba(37, 99, 235, 0.90);
|
||||
--color-primary-hover: #1d4ed8;
|
||||
--color-primary-active: #1e40af;
|
||||
|
||||
/* ── Secondary slate ────────────────────────────────────────────── */
|
||||
--color-secondary: #c3ccd8;
|
||||
--color-secondary-dark-1: #c3ccd8;
|
||||
--color-secondary-dark-2: #aab4c1;
|
||||
--color-secondary-dark-3: #aab4c1;
|
||||
--color-secondary-dark-4: #8d99a8;
|
||||
--color-secondary-dark-5: #8d99a8;
|
||||
--color-secondary-dark-6: #74808f;
|
||||
--color-secondary-dark-7: #74808f;
|
||||
--color-secondary-dark-8: #5a6675;
|
||||
--color-secondary-dark-9: #5a6675;
|
||||
--color-secondary-dark-10: #3f4956;
|
||||
--color-secondary-dark-11: #3f4956;
|
||||
--color-secondary-dark-12: #2d3542;
|
||||
--color-secondary-dark-13: #2d3542;
|
||||
--color-secondary-light-1: #c3ccd8;
|
||||
--color-secondary-light-2: #d4dbe4;
|
||||
--color-secondary-light-3: #d4dbe4;
|
||||
--color-secondary-light-4: #dee4ec;
|
||||
--color-secondary-alpha-10: rgba(195, 204, 216, 0.10);
|
||||
--color-secondary-alpha-20: rgba(195, 204, 216, 0.20);
|
||||
--color-secondary-alpha-30: rgba(195, 204, 216, 0.30);
|
||||
--color-secondary-alpha-40: rgba(195, 204, 216, 0.40);
|
||||
--color-secondary-alpha-50: rgba(195, 204, 216, 0.50);
|
||||
--color-secondary-alpha-60: rgba(195, 204, 216, 0.60);
|
||||
--color-secondary-alpha-70: rgba(195, 204, 216, 0.70);
|
||||
--color-secondary-alpha-80: rgba(195, 204, 216, 0.80);
|
||||
--color-secondary-alpha-90: rgba(195, 204, 216, 0.90);
|
||||
--color-secondary-hover: #aab4c1;
|
||||
--color-secondary-active: #8d99a8;
|
||||
|
||||
/* ── Named accents: vivid, no purple ────────────────────────────── */
|
||||
--color-red: #dc2626;
|
||||
--color-orange: #ea580c;
|
||||
--color-yellow: #d97706;
|
||||
--color-olive: #65a30d;
|
||||
--color-green: #16a34a;
|
||||
--color-teal: #0d9488;
|
||||
--color-blue: #2563eb;
|
||||
--color-violet: #0ea5e9;
|
||||
--color-purple: #38bdf8;
|
||||
--color-pink: #db2777;
|
||||
--color-brown: #a8714a;
|
||||
--color-grey: #64748b;
|
||||
--color-black: #20262f;
|
||||
|
||||
--color-red-light: #f87171;
|
||||
--color-orange-light: #fb923c;
|
||||
--color-yellow-light: #fbbf24;
|
||||
--color-olive-light: #a3e635;
|
||||
--color-green-light: #4ade80;
|
||||
--color-teal-light: #2dd4bf;
|
||||
--color-blue-light: #60a5fa;
|
||||
--color-violet-light: #38bdf8;
|
||||
--color-purple-light: #7dd3fc;
|
||||
--color-pink-light: #f472b6;
|
||||
--color-brown-light: #d1a684;
|
||||
--color-grey-light: #94a3b8;
|
||||
--color-black-light: #2d3542;
|
||||
|
||||
--color-red-dark-1: #b91c1c;
|
||||
--color-orange-dark-1: #c2410c;
|
||||
--color-yellow-dark-1: #b45309;
|
||||
--color-olive-dark-1: #4d7c0f;
|
||||
--color-green-dark-1: #15803d;
|
||||
--color-teal-dark-1: #0f766e;
|
||||
--color-blue-dark-1: #1d4ed8;
|
||||
--color-violet-dark-1: #0284c7;
|
||||
--color-purple-dark-1: #0ea5e9;
|
||||
--color-pink-dark-1: #be185d;
|
||||
--color-brown-dark-1: #8a5a3a;
|
||||
--color-grey-dark-1: #475569;
|
||||
--color-black-dark-1: #1a1f27;
|
||||
|
||||
--color-red-dark-2: #991b1b;
|
||||
--color-orange-dark-2: #9a3412;
|
||||
--color-yellow-dark-2: #92400e;
|
||||
--color-olive-dark-2: #3f6212;
|
||||
--color-green-dark-2: #166534;
|
||||
--color-teal-dark-2: #115e59;
|
||||
--color-blue-dark-2: #1e40af;
|
||||
--color-violet-dark-2: #0369a1;
|
||||
--color-purple-dark-2: #0284c7;
|
||||
--color-pink-dark-2: #9d174d;
|
||||
--color-brown-dark-2: #6f4830;
|
||||
--color-grey-dark-2: #334155;
|
||||
--color-black-dark-2: #1a1f27;
|
||||
|
||||
--color-gold: #ca8a04;
|
||||
--color-white: #f8fafc;
|
||||
--color-pure-black: #1a1f27;
|
||||
|
||||
/* ── ANSI ───────────────────────────────────────────────────────── */
|
||||
--color-ansi-black: #2d3542;
|
||||
--color-ansi-red: #dc2626;
|
||||
--color-ansi-green: #16a34a;
|
||||
--color-ansi-yellow: #d97706;
|
||||
--color-ansi-blue: #2563eb;
|
||||
--color-ansi-magenta: #0284c7;
|
||||
--color-ansi-cyan: #0d9488;
|
||||
--color-ansi-white: #74808f;
|
||||
--color-ansi-bright-black: #5a6675;
|
||||
--color-ansi-bright-red: #f87171;
|
||||
--color-ansi-bright-green: #4ade80;
|
||||
--color-ansi-bright-yellow: #fbbf24;
|
||||
--color-ansi-bright-blue: #60a5fa;
|
||||
--color-ansi-bright-magenta: #38bdf8;
|
||||
--color-ansi-bright-cyan: #2dd4bf;
|
||||
--color-ansi-bright-white: #f8fafc;
|
||||
|
||||
/* ── Diffs ──────────────────────────────────────────────────────── */
|
||||
--color-diff-removed-word-bg: #f6b4b4;
|
||||
--color-diff-added-word-bg: #b6e8c3;
|
||||
--color-diff-removed-row-bg: #fbe2e2;
|
||||
--color-diff-moved-row-bg: #fdeecb;
|
||||
--color-diff-added-row-bg: #e6f7ea;
|
||||
--color-diff-removed-row-border: #ea9a9a;
|
||||
--color-diff-moved-row-border: #eccb8a;
|
||||
--color-diff-added-row-border: #9fd9ad;
|
||||
--color-diff-inactive: #dee4ec;
|
||||
|
||||
/* ── Status ─────────────────────────────────────────────────────── */
|
||||
--color-error-border: #eba6a6;
|
||||
--color-error-bg: #fbe0e0;
|
||||
--color-error-bg-active: #f6b4b4;
|
||||
--color-error-bg-hover: #fbe0e0;
|
||||
--color-error-text: #991b1b;
|
||||
--color-success-border: #a7dcb6;
|
||||
--color-success-bg: #e2f6e7;
|
||||
--color-success-text: #15803d;
|
||||
--color-warning-border: #eccb8a;
|
||||
--color-warning-bg: #fdeecb;
|
||||
--color-warning-text: #92400e;
|
||||
--color-info-border: #a9c2f0;
|
||||
--color-info-bg: #dfe9fd;
|
||||
--color-info-text: #1e40af;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #dc2626;
|
||||
--color-red-badge-bg: rgba(220, 38, 38, 0.12);
|
||||
--color-red-badge-hover-bg: rgba(220, 38, 38, 0.22);
|
||||
--color-green-badge: #15803d;
|
||||
--color-green-badge-bg: rgba(21, 128, 61, 0.12);
|
||||
--color-green-badge-hover-bg: rgba(21, 128, 61, 0.22);
|
||||
--color-yellow-badge: #b45309;
|
||||
--color-yellow-badge-bg: rgba(180, 83, 9, 0.12);
|
||||
--color-yellow-badge-hover-bg: rgba(180, 83, 9, 0.22);
|
||||
--color-orange-badge: #ea580c;
|
||||
--color-orange-badge-bg: rgba(234, 88, 12, 0.12);
|
||||
--color-orange-badge-hover-bg: rgba(234, 88, 12, 0.22);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #16a34a;
|
||||
--color-thin-red: #dc2626;
|
||||
--color-thin-purple: #0284c7;
|
||||
--color-thin-orange: #ea580c;
|
||||
--color-thin-red-highlight: #b91c1c;
|
||||
--color-danger-bg: #fbe0e0;
|
||||
|
||||
/* ── Surfaces ───────────────────────────────────────────────────── */
|
||||
--color-body: #edf1f6;
|
||||
--color-box-header: #dee4ec;
|
||||
--color-box-body: #e6ebf2;
|
||||
--color-box-body-highlight: #d4dbe4;
|
||||
--color-text-dark: #1a1f27;
|
||||
--color-text: #28303c;
|
||||
--color-text-light: #363d49;
|
||||
--color-text-light-1: #363d49;
|
||||
--color-text-light-2: #48515f;
|
||||
--color-text-light-3: #5b6472;
|
||||
--color-footer: #dee4ec;
|
||||
--color-timeline: #c3ccd8;
|
||||
--color-input-text: #2d3542;
|
||||
--color-input-background: #f4f7fa;
|
||||
--color-input-toggle-background: #f4f7fa;
|
||||
--color-input-border: #c3ccd8;
|
||||
--color-input-border-hover: #aab4c1;
|
||||
--color-header-wrapper: #e6ebf2;
|
||||
--color-header-wrapper-transparent: rgba(230, 235, 242, 0);
|
||||
--color-light: rgba(255, 255, 255, 0.85);
|
||||
--color-light-border: rgba(32, 38, 47, 0.10);
|
||||
--color-hover: #dee4ec;
|
||||
--color-active: #d1d9e3;
|
||||
--color-menu: #e6ebf2;
|
||||
--color-card: #e6ebf2;
|
||||
--fancy-card-bg: #e6ebf2;
|
||||
--fancy-card-border: #d4dbe4;
|
||||
--color-markup-table-row: rgba(0, 0, 0, 0.02);
|
||||
--color-markup-code-block: #dee4ec;
|
||||
--color-markup-code-inline: #d4dbe4;
|
||||
--color-button: #e6ebf2;
|
||||
--color-code-bg: #dee4ec;
|
||||
--color-shadow: rgba(40, 55, 80, 0.18);
|
||||
--color-secondary-bg: #e6ebf2;
|
||||
--color-text-focus: #20262f;
|
||||
--color-expand-button: #d4dbe4;
|
||||
--color-placeholder-text: #6d7787;
|
||||
--color-editor-line-highlight: #e6ebf2;
|
||||
--color-project-board-bg: #e6ebf2;
|
||||
--color-project-board-dark-label: #48515f;
|
||||
--color-caret: #2563eb;
|
||||
--color-reaction-bg: rgba(0, 0, 0, 0.04);
|
||||
--color-reaction-active-bg: rgba(37, 99, 235, 0.18);
|
||||
--color-reaction-hover-bg: rgba(37, 99, 235, 0.28);
|
||||
--color-tooltip-text: #f8fafc;
|
||||
--color-tooltip-bg: #2d3542;
|
||||
--color-nav-bg: #e6ebf2;
|
||||
--color-nav-hover-bg: #dee4ec;
|
||||
--color-secondary-nav-bg: #edf1f6;
|
||||
--color-label-text: #2d3542;
|
||||
--color-label-bg: rgba(170, 180, 193, 0.55);
|
||||
--color-label-hover-bg: rgba(170, 180, 193, 0.75);
|
||||
--color-label-active-bg: #8d99a8;
|
||||
--color-label-bg-alt: #aab4c1;
|
||||
--color-accent: #2563eb;
|
||||
--color-small-accent: #0d9488;
|
||||
--color-highlight-fg: #1d4ed8;
|
||||
--color-highlight-bg: rgba(37, 99, 235, 0.14);
|
||||
--color-overlay-backdrop: rgba(45, 53, 66, 0.50);
|
||||
--color-selection-bg: rgba(37, 99, 235, 0.22);
|
||||
--color-selection-fg: #1a1f27;
|
||||
--checkerboard-color-1: #edf1f6;
|
||||
--checkerboard-color-2: #dee4ec;
|
||||
--color-indicator-offline: #74808f;
|
||||
--color-indicator-offline-20: rgba(116, 128, 143, 0.20);
|
||||
--color-indicator-idle: #16a34a;
|
||||
--color-indicator-idle-20: rgba(22, 163, 74, 0.20);
|
||||
--color-indicator-active: #2563eb;
|
||||
--color-indicator-active-20: rgba(37, 99, 235, 0.20);
|
||||
|
||||
/* ── Console (dark) ─────────────────────────────────────────────── */
|
||||
--color-console-fg: #e2e8f0;
|
||||
--color-console-fg-subtle: #98a2b3;
|
||||
--color-console-bg: #171a20;
|
||||
--color-console-border: #2a2f38;
|
||||
--color-console-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-console-active-bg: #454d5c;
|
||||
--color-console-menu-bg: #2a2f38;
|
||||
--color-console-menu-border: #586172;
|
||||
|
||||
/* ── Neumorphism: strong enough to clearly read on slate ────────── */
|
||||
--nm-shadow-dark: rgba(45, 60, 90, 0.24);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.95);
|
||||
--nm-divider-color: rgba(40, 55, 80, 0.12);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Aurora light flavour
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #edf1f6 !important;
|
||||
color: #2d3542 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: #0f766e !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #115e59 !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a { color: #48515f !important; }
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover { color: #115e59 !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #20262f !important; font-weight: 600; }
|
||||
|
||||
::selection {
|
||||
background: rgba(37, 99, 235, 0.22);
|
||||
color: #20262f;
|
||||
}
|
||||
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha { font-family: var(--fonts-monospace) !important; }
|
||||
|
||||
/* Colourful syntax highlighting */
|
||||
.chroma { background: #dee4ec !important; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #6b7480; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
|
||||
.chroma .kr, .chroma .kt { color: #dc2626; }
|
||||
.chroma .o, .chroma .ow { color: #ea580c; }
|
||||
.chroma .p { color: #5a6675; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
|
||||
.chroma .sd, .chroma .sh, .chroma .sx { color: #16a34a; }
|
||||
.chroma .se, .chroma .ss { color: #0d9488; }
|
||||
.chroma .si, .chroma .sa { color: #b45309; }
|
||||
.chroma .sr { color: #2563eb; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
|
||||
.chroma .mi, .chroma .mo, .chroma .il { color: #b45309; }
|
||||
.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv,
|
||||
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #2d3542; }
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .ni, .chroma .nl, .chroma .py { color: #b45309; }
|
||||
.chroma .nf { color: #2563eb; }
|
||||
.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #0d9488; }
|
||||
.chroma .no { color: #ea580c; }
|
||||
.chroma .gd { color: #20262f; background-color: #f6b4b4; }
|
||||
.chroma .gi { color: #20262f; background-color: #b6e8c3; }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #dc2626; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #b45309; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #2563eb; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #6b7480; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #16a34a; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #0d9488; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #b45309; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #dc2626; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #2563eb; }
|
||||
31
themes/theme-forgejo-auto.css
Normal file
31
themes/theme-forgejo-auto.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* theme-forgejo-auto.css (custom override)
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* The built-in Forgejo auto palette (snapshot: _base-forgejo-auto.css) plus
|
||||
* the shared neumorphic/soft-UI layer, with light/dark shadow primitives that
|
||||
* follow the OS colour-scheme preference.
|
||||
*
|
||||
* Overrides the built-in theme so the soft look applies to anyone who picked
|
||||
* "forgejo-auto". Palette frozen from Forgejo 15.0.0.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-auto.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
/* Light (default) primitives */
|
||||
:root {
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.16);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.95);
|
||||
--nm-divider-color: rgba(0, 0, 0, 0.08);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* Dark primitives when the OS asks for dark */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.62);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.05);
|
||||
--nm-divider-color: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
}
|
||||
25
themes/theme-forgejo-dark.css
Normal file
25
themes/theme-forgejo-dark.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/*
|
||||
* theme-forgejo-dark.css (custom override)
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* The built-in Forgejo dark palette, snapshotted as _base-forgejo-dark.css,
|
||||
* plus the shared neumorphic/soft-UI layer.
|
||||
*
|
||||
* Note: this overrides the built-in theme of the same name so the soft look
|
||||
* applies to anyone who picked "forgejo-dark". The palette is frozen from
|
||||
* Forgejo 15.0.0; update _base-forgejo-dark.css if you upgrade Forgejo and
|
||||
* want newer built-in colours.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-dark.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.62);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.05);
|
||||
--nm-divider-color: rgba(255, 255, 255, 0.07);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
23
themes/theme-forgejo-light.css
Normal file
23
themes/theme-forgejo-light.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
* theme-forgejo-light.css (custom override)
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* The built-in Forgejo light palette (snapshot: _base-forgejo-light.css)
|
||||
* plus the shared neumorphic/soft-UI layer.
|
||||
*
|
||||
* Overrides the built-in theme so the soft look applies to anyone who picked
|
||||
* "forgejo-light". Palette frozen from Forgejo 15.0.0.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-light.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.16);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.95);
|
||||
--nm-divider-color: rgba(0, 0, 0, 0.08);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
411
themes/theme-gruvbox-dark.css
Normal file
411
themes/theme-gruvbox-dark.css
Normal file
|
|
@ -0,0 +1,411 @@
|
|||
/*
|
||||
* theme-gruvbox-dark.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Gruvbox (dark) + soft-UI for Forgejo.
|
||||
*
|
||||
* Palette: morhetz/gruvbox, but the accent is pulled away from the usual
|
||||
* loud yellow to a calm aqua-green, with gruvbox blue for links — closer to
|
||||
* the feel of a mainstream git host while staying warm and retro.
|
||||
*
|
||||
* Layers: built-in dark palette → neumorphism component layer → gruvbox.
|
||||
*
|
||||
* Drop into: <forgejo-work-path>/custom/public/assets/css/
|
||||
* Then add "gruvbox-dark" to [ui].THEMES in app.ini.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-dark.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "SF Pro Text", -apple-system, "Segoe UI",
|
||||
"Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code",
|
||||
"SF Mono", "Source Code Pro", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Warm neutral ramp (dark → light) ───────────────────────────── */
|
||||
--steel-900: #242322;
|
||||
--steel-850: #242322;
|
||||
--steel-800: #282828;
|
||||
--steel-750: #2d2b29;
|
||||
--steel-700: #2d2b29;
|
||||
--steel-650: #383430;
|
||||
--steel-600: #4a443f;
|
||||
--steel-550: #5c554e;
|
||||
--steel-500: #928374;
|
||||
--steel-450: #a89984;
|
||||
--steel-400: #bdae93;
|
||||
--steel-350: #d5c4a1;
|
||||
--steel-300: #d5c4a1;
|
||||
--steel-250: #ebdbb2;
|
||||
--steel-200: #ebdbb2;
|
||||
--steel-150: #ebdbb2;
|
||||
--steel-100: #fbf1c7;
|
||||
|
||||
/* ── Primary: calm gruvbox aqua-green (no more loud yellow) ─────── */
|
||||
--color-primary: #8ec07c;
|
||||
--color-primary-contrast: #1d2021;
|
||||
--color-primary-dark-1: #a9d29a;
|
||||
--color-primary-dark-2: #a9d29a;
|
||||
--color-primary-dark-3: #c0ddb0;
|
||||
--color-primary-dark-4: #c0ddb0;
|
||||
--color-primary-dark-5: #d6e9c9;
|
||||
--color-primary-dark-6: #d6e9c9;
|
||||
--color-primary-dark-7: #e8f3e1;
|
||||
--color-primary-light-1: #689d6a;
|
||||
--color-primary-light-2: #427b58;
|
||||
--color-primary-light-3: #427b58;
|
||||
--color-primary-light-4: #376b4c;
|
||||
--color-primary-light-5: #2f5f43;
|
||||
--color-primary-light-6: #28513a;
|
||||
--color-primary-light-7: #214531;
|
||||
--color-primary-alpha-10: rgba(142, 192, 124, 0.10);
|
||||
--color-primary-alpha-20: rgba(142, 192, 124, 0.20);
|
||||
--color-primary-alpha-30: rgba(142, 192, 124, 0.30);
|
||||
--color-primary-alpha-40: rgba(142, 192, 124, 0.40);
|
||||
--color-primary-alpha-50: rgba(142, 192, 124, 0.50);
|
||||
--color-primary-alpha-60: rgba(142, 192, 124, 0.60);
|
||||
--color-primary-alpha-70: rgba(142, 192, 124, 0.70);
|
||||
--color-primary-alpha-80: rgba(142, 192, 124, 0.80);
|
||||
--color-primary-alpha-90: rgba(142, 192, 124, 0.90);
|
||||
--color-primary-hover: #a9d29a;
|
||||
--color-primary-active: #689d6a;
|
||||
|
||||
/* ── Secondary ──────────────────────────────────────────────────── */
|
||||
--color-secondary: #383430;
|
||||
--color-secondary-dark-1: #5c554e;
|
||||
--color-secondary-dark-2: #928374;
|
||||
--color-secondary-dark-3: #a89984;
|
||||
--color-secondary-dark-4: #bdae93;
|
||||
--color-secondary-dark-5: #d5c4a1;
|
||||
--color-secondary-dark-6: #d5c4a1;
|
||||
--color-secondary-dark-7: #ebdbb2;
|
||||
--color-secondary-dark-8: #ebdbb2;
|
||||
--color-secondary-dark-9: #ebdbb2;
|
||||
--color-secondary-dark-10: #fbf1c7;
|
||||
--color-secondary-dark-11: #fbf1c7;
|
||||
--color-secondary-dark-12: #fbf1c7;
|
||||
--color-secondary-dark-13: #fbf1c7;
|
||||
--color-secondary-light-1: #4a443f;
|
||||
--color-secondary-light-2: #2d2b29;
|
||||
--color-secondary-light-3: #2d2b29;
|
||||
--color-secondary-light-4: #282828;
|
||||
--color-secondary-alpha-10: rgba(56, 52, 48, 0.10);
|
||||
--color-secondary-alpha-20: rgba(56, 52, 48, 0.20);
|
||||
--color-secondary-alpha-30: rgba(56, 52, 48, 0.30);
|
||||
--color-secondary-alpha-40: rgba(56, 52, 48, 0.40);
|
||||
--color-secondary-alpha-50: rgba(56, 52, 48, 0.50);
|
||||
--color-secondary-alpha-60: rgba(56, 52, 48, 0.60);
|
||||
--color-secondary-alpha-70: rgba(56, 52, 48, 0.70);
|
||||
--color-secondary-alpha-80: rgba(56, 52, 48, 0.80);
|
||||
--color-secondary-alpha-90: rgba(56, 52, 48, 0.90);
|
||||
--color-secondary-hover: #4a443f;
|
||||
--color-secondary-active: #5c554e;
|
||||
|
||||
/* ── Named accents ──────────────────────────────────────────────── */
|
||||
--color-red: #fb4934;
|
||||
--color-orange: #fe8019;
|
||||
--color-yellow: #fabd2f;
|
||||
--color-olive: #b8bb26;
|
||||
--color-green: #b8bb26;
|
||||
--color-teal: #8ec07c;
|
||||
--color-blue: #83a598;
|
||||
--color-violet: #b16286;
|
||||
--color-purple: #d3869b;
|
||||
--color-pink: #d3869b;
|
||||
--color-brown: #b57614;
|
||||
--color-grey: #928374;
|
||||
--color-black: #1d2021;
|
||||
|
||||
--color-red-light: #ff6a5a;
|
||||
--color-orange-light: #ff9d4d;
|
||||
--color-yellow-light: #ffd35b;
|
||||
--color-olive-light: #d5d94a;
|
||||
--color-green-light: #d5d94a;
|
||||
--color-teal-light: #a9d29a;
|
||||
--color-blue-light: #a6c8bd;
|
||||
--color-violet-light: #d3869b;
|
||||
--color-purple-light: #e3a6b6;
|
||||
--color-pink-light: #e3a6b6;
|
||||
--color-brown-light: #d79921;
|
||||
--color-grey-light: #a89984;
|
||||
--color-black-light: #2d2b29;
|
||||
|
||||
--color-red-dark-1: #cc241d;
|
||||
--color-orange-dark-1: #d65d0e;
|
||||
--color-yellow-dark-1: #d79921;
|
||||
--color-olive-dark-1: #98971a;
|
||||
--color-green-dark-1: #98971a;
|
||||
--color-teal-dark-1: #689d6a;
|
||||
--color-blue-dark-1: #458588;
|
||||
--color-violet-dark-1: #8f3f71;
|
||||
--color-purple-dark-1: #b16286;
|
||||
--color-pink-dark-1: #b16286;
|
||||
--color-brown-dark-1: #8f6100;
|
||||
--color-grey-dark-1: #7c6f64;
|
||||
--color-black-dark-1: #1d2021;
|
||||
|
||||
--color-red-dark-2: #a5201a;
|
||||
--color-orange-dark-2: #af3a03;
|
||||
--color-yellow-dark-2: #b57614;
|
||||
--color-olive-dark-2: #79740e;
|
||||
--color-green-dark-2: #79740e;
|
||||
--color-teal-dark-2: #427b58;
|
||||
--color-blue-dark-2: #076678;
|
||||
--color-violet-dark-2: #6b2f55;
|
||||
--color-purple-dark-2: #8f3f71;
|
||||
--color-pink-dark-2: #8f3f71;
|
||||
--color-brown-dark-2: #6b4600;
|
||||
--color-grey-dark-2: #665c54;
|
||||
--color-black-dark-2: #1d2021;
|
||||
|
||||
--color-gold: #d79921;
|
||||
--color-white: #fbf1c7;
|
||||
--color-pure-black: #1d2021;
|
||||
|
||||
/* ── ANSI / terminal ────────────────────────────────────────────── */
|
||||
--color-ansi-black: #282828;
|
||||
--color-ansi-red: #cc241d;
|
||||
--color-ansi-green: #98971a;
|
||||
--color-ansi-yellow: #d79921;
|
||||
--color-ansi-blue: #458588;
|
||||
--color-ansi-magenta: #b16286;
|
||||
--color-ansi-cyan: #689d6a;
|
||||
--color-ansi-white: #a89984;
|
||||
--color-ansi-bright-black: #665c54;
|
||||
--color-ansi-bright-red: #fb4934;
|
||||
--color-ansi-bright-green: #b8bb26;
|
||||
--color-ansi-bright-yellow: #fabd2f;
|
||||
--color-ansi-bright-blue: #83a598;
|
||||
--color-ansi-bright-magenta: #d3869b;
|
||||
--color-ansi-bright-cyan: #8ec07c;
|
||||
--color-ansi-bright-white: #ebdbb2;
|
||||
|
||||
/* ── Diffs ──────────────────────────────────────────────────────── */
|
||||
--color-diff-removed-word-bg: rgba(251, 73, 52, 0.30);
|
||||
--color-diff-added-word-bg: rgba(184, 187, 38, 0.26);
|
||||
--color-diff-removed-row-bg: rgba(251, 73, 52, 0.10);
|
||||
--color-diff-moved-row-bg: rgba(254, 128, 25, 0.13);
|
||||
--color-diff-added-row-bg: rgba(184, 187, 38, 0.10);
|
||||
--color-diff-removed-row-border: rgba(251, 73, 52, 0.40);
|
||||
--color-diff-moved-row-border: rgba(250, 189, 47, 0.40);
|
||||
--color-diff-added-row-border: rgba(184, 187, 38, 0.40);
|
||||
--color-diff-inactive: #2d2b29;
|
||||
|
||||
/* ── Status ─────────────────────────────────────────────────────── */
|
||||
--color-error-border: #9d2f24;
|
||||
--color-error-bg: #3d2523;
|
||||
--color-error-bg-active: #4d2a26;
|
||||
--color-error-bg-hover: #4d2a26;
|
||||
--color-error-text: #f9c0b5;
|
||||
--color-success-border: #7d8f2a;
|
||||
--color-success-bg: #29331c;
|
||||
--color-success-text: #d5d94a;
|
||||
--color-warning-border: #d79921;
|
||||
--color-warning-bg: #3f331a;
|
||||
--color-warning-text: #ffd35b;
|
||||
--color-info-border: #458588;
|
||||
--color-info-bg: #24383a;
|
||||
--color-info-text: #a6c8bd;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #fb4934;
|
||||
--color-red-badge-bg: rgba(251, 73, 52, 0.14);
|
||||
--color-red-badge-hover-bg: rgba(251, 73, 52, 0.26);
|
||||
--color-green-badge: #b8bb26;
|
||||
--color-green-badge-bg: rgba(184, 187, 38, 0.14);
|
||||
--color-green-badge-hover-bg: rgba(184, 187, 38, 0.26);
|
||||
--color-yellow-badge: #fabd2f;
|
||||
--color-yellow-badge-bg: rgba(250, 189, 47, 0.14);
|
||||
--color-yellow-badge-hover-bg: rgba(250, 189, 47, 0.26);
|
||||
--color-orange-badge: #fe8019;
|
||||
--color-orange-badge-bg: rgba(254, 128, 25, 0.14);
|
||||
--color-orange-badge-hover-bg: rgba(254, 128, 25, 0.26);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #8ec07c;
|
||||
--color-thin-red: #fb4934;
|
||||
--color-thin-purple: #d3869b;
|
||||
--color-thin-orange: #fe8019;
|
||||
--color-thin-red-highlight: #ff6a5a;
|
||||
--color-danger-bg: #3d2523;
|
||||
|
||||
/* ── Surfaces (kept close together so the soft shadows do the work) */
|
||||
--color-body: #282828;
|
||||
--color-box-header: #2d2b29;
|
||||
--color-box-body: #2d2b29;
|
||||
--color-box-body-highlight: #383430;
|
||||
--color-text-dark: #1d2021;
|
||||
--color-text: #ebdbb2;
|
||||
--color-text-light: #d5c4a1;
|
||||
--color-text-light-1: #d5c4a1;
|
||||
--color-text-light-2: #bdae93;
|
||||
--color-text-light-3: #a89984;
|
||||
--color-footer: #242322;
|
||||
--color-timeline: #383430;
|
||||
--color-input-text: #ebdbb2;
|
||||
--color-input-background: #232221;
|
||||
--color-input-toggle-background: #383430;
|
||||
--color-input-border: #4a443f;
|
||||
--color-input-border-hover: #5c554e;
|
||||
--color-header-wrapper: #242322;
|
||||
--color-header-wrapper-transparent: rgba(36, 35, 34, 0);
|
||||
--color-light: rgba(0, 0, 0, 0.28);
|
||||
--color-light-border: rgba(255, 255, 255, 0.10);
|
||||
--color-hover: #383430;
|
||||
--color-active: #423d38;
|
||||
--color-menu: #2d2b29;
|
||||
--color-card: #2d2b29;
|
||||
--fancy-card-bg: #2d2b29;
|
||||
--fancy-card-border: #383430;
|
||||
--color-markup-table-row: rgba(255, 255, 255, 0.03);
|
||||
--color-markup-code-block: #232221;
|
||||
--color-markup-code-inline: #2d2b29;
|
||||
--color-button: #2d2b29;
|
||||
--color-code-bg: #232221;
|
||||
--color-shadow: rgba(0, 0, 0, 0.45);
|
||||
--color-secondary-bg: #2d2b29;
|
||||
--color-text-focus: #fbf1c7;
|
||||
--color-expand-button: #383430;
|
||||
--color-placeholder-text: #7c6f64;
|
||||
--color-editor-line-highlight: #2d2b29;
|
||||
--color-project-board-bg: #2d2b29;
|
||||
--color-project-board-dark-label: #a89984;
|
||||
--color-caret: #8ec07c;
|
||||
--color-reaction-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-reaction-active-bg: rgba(142, 192, 124, 0.22);
|
||||
--color-reaction-hover-bg: rgba(142, 192, 124, 0.32);
|
||||
--color-tooltip-text: #ebdbb2;
|
||||
--color-tooltip-bg: #1d2021;
|
||||
--color-nav-bg: #242322;
|
||||
--color-nav-hover-bg: #383430;
|
||||
--color-secondary-nav-bg: #282828;
|
||||
--color-label-text: #ebdbb2;
|
||||
--color-label-bg: #383430;
|
||||
--color-label-hover-bg: #4a443f;
|
||||
--color-label-active-bg: #5c554e;
|
||||
--color-label-bg-alt: #4a443f;
|
||||
--color-accent: #8ec07c;
|
||||
--color-small-accent: #83a598;
|
||||
--color-highlight-fg: #8ec07c;
|
||||
--color-highlight-bg: rgba(142, 192, 124, 0.14);
|
||||
--color-overlay-backdrop: rgba(29, 32, 33, 0.78);
|
||||
--color-selection-bg: rgba(142, 192, 124, 0.30);
|
||||
--color-selection-fg: #fbf1c7;
|
||||
--checkerboard-color-1: #2d2b29;
|
||||
--checkerboard-color-2: #232221;
|
||||
--color-indicator-offline: #928374;
|
||||
--color-indicator-offline-20: rgba(146, 131, 116, 0.20);
|
||||
--color-indicator-idle: #b8bb26;
|
||||
--color-indicator-idle-20: rgba(184, 187, 38, 0.20);
|
||||
--color-indicator-active: #83a598;
|
||||
--color-indicator-active-20: rgba(131, 165, 152, 0.20);
|
||||
|
||||
/* ── Console ────────────────────────────────────────────────────── */
|
||||
--color-console-fg: #ebdbb2;
|
||||
--color-console-fg-subtle: #a89984;
|
||||
--color-console-bg: #1d2021;
|
||||
--color-console-border: #3c3836;
|
||||
--color-console-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-console-active-bg: #504945;
|
||||
--color-console-menu-bg: #3c3836;
|
||||
--color-console-menu-border: #665c54;
|
||||
|
||||
/* ── Neumorphism primitives ─────────────────────────────────────── */
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.66);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.05);
|
||||
--nm-divider-color: rgba(255, 255, 255, 0.06);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Gruvbox flavour
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #282828 !important;
|
||||
color: #ebdbb2 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Links: gruvbox blue, gently shifting to the aqua accent on hover */
|
||||
a { color: #83a598 !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #8ec07c !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a,
|
||||
.sha,
|
||||
.commit-sha { color: #a89984 !important; }
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover,
|
||||
.ui.breadcrumb a:hover { color: #8ec07c !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #fbf1c7 !important; font-weight: 600; }
|
||||
|
||||
::selection {
|
||||
background: rgba(142, 192, 124, 0.30);
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
/* Monospace flavour for hashes and chrome */
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha { font-family: var(--fonts-monospace) !important; }
|
||||
|
||||
/* Syntax highlighting — Chroma (gruvbox) */
|
||||
.chroma { background: #232221 !important; }
|
||||
.chroma .err { color: #fb4934; background: transparent; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #928374; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt { color: #fb4934; }
|
||||
.chroma .o, .chroma .ow { color: #fe8019; }
|
||||
.chroma .p { color: #ebdbb2; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .sh, .chroma .sx { color: #b8bb26; }
|
||||
.chroma .se, .chroma .ss { color: #8ec07c; }
|
||||
.chroma .si, .chroma .sa { color: #fabd2f; }
|
||||
.chroma .sr { color: #83a598; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .il { color: #d3869b; }
|
||||
.chroma .n, .chroma .nx, .chroma .nn { color: #ebdbb2; }
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .nf, .chroma .ni, .chroma .nl, .chroma .py { color: #fabd2f; }
|
||||
.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #8ec07c; }
|
||||
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #83a598; }
|
||||
.chroma .no { color: #d3869b; }
|
||||
.chroma .go { color: #928374; }
|
||||
.chroma .gp { color: #a89984; }
|
||||
.chroma .gh { color: #8ec07c; font-weight: bold; }
|
||||
.chroma .gu { color: #b8bb26; }
|
||||
.chroma .gt { color: #fb4934; }
|
||||
.chroma .gd { color: #fbf1c7; background-color: #4a2420; }
|
||||
.chroma .gi { color: #fbf1c7; background-color: #2f3a1c; }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #fb4934; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #d3869b; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #8ec07c; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #928374; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #b8bb26; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #fe8019; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #fabd2f; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #fb4934; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #83a598; }
|
||||
391
themes/theme-gruvbox-light.css
Normal file
391
themes/theme-gruvbox-light.css
Normal file
|
|
@ -0,0 +1,391 @@
|
|||
/*
|
||||
* theme-gruvbox-light.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Gruvbox (light) + soft-UI for Forgejo. Daytime companion to gruvbox-dark:
|
||||
* paper-warm surfaces, a deep aqua-green accent and gruvbox blue links.
|
||||
*
|
||||
* Layers: built-in light palette → neumorphism component layer → gruvbox.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-light.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "SF Pro Text", -apple-system, "Segoe UI",
|
||||
"Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code",
|
||||
"SF Mono", "Source Code Pro", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Neutral ramp (100 = darkest text, 900 = lightest bg) ───────── */
|
||||
--steel-100: #282828;
|
||||
--steel-150: #3c3836;
|
||||
--steel-200: #3c3836;
|
||||
--steel-250: #504945;
|
||||
--steel-300: #504945;
|
||||
--steel-350: #665c54;
|
||||
--steel-400: #7c6f64;
|
||||
--steel-450: #a89984;
|
||||
--steel-500: #bdae93;
|
||||
--steel-550: #d5c4a1;
|
||||
--steel-600: #ebdbb2;
|
||||
--steel-650: #ebdbb2;
|
||||
--steel-700: #f2e5bc;
|
||||
--steel-750: #f6eaca;
|
||||
--steel-800: #fbf1c7;
|
||||
--steel-850: #fbf1c7;
|
||||
--steel-900: #fbf1c7;
|
||||
|
||||
/* ── Primary: deep gruvbox aqua-green ───────────────────────────── */
|
||||
--color-primary: #427b58;
|
||||
--color-primary-contrast: #fbf1c7;
|
||||
--color-primary-dark-1: #427b58;
|
||||
--color-primary-dark-2: #346a4a;
|
||||
--color-primary-dark-3: #346a4a;
|
||||
--color-primary-dark-4: #2c5a3e;
|
||||
--color-primary-dark-5: #2c5a3e;
|
||||
--color-primary-dark-6: #245034;
|
||||
--color-primary-dark-7: #245034;
|
||||
--color-primary-light-1: #689d6a;
|
||||
--color-primary-light-2: #8ec07c;
|
||||
--color-primary-light-3: #8ec07c;
|
||||
--color-primary-light-4: #a9d29a;
|
||||
--color-primary-light-5: #c0ddb0;
|
||||
--color-primary-light-6: #d6e9c9;
|
||||
--color-primary-light-7: #e8f3e1;
|
||||
--color-primary-alpha-10: rgba(66, 123, 88, 0.10);
|
||||
--color-primary-alpha-20: rgba(66, 123, 88, 0.20);
|
||||
--color-primary-alpha-30: rgba(66, 123, 88, 0.30);
|
||||
--color-primary-alpha-40: rgba(66, 123, 88, 0.40);
|
||||
--color-primary-alpha-50: rgba(66, 123, 88, 0.50);
|
||||
--color-primary-alpha-60: rgba(66, 123, 88, 0.60);
|
||||
--color-primary-alpha-70: rgba(66, 123, 88, 0.70);
|
||||
--color-primary-alpha-80: rgba(66, 123, 88, 0.80);
|
||||
--color-primary-alpha-90: rgba(66, 123, 88, 0.90);
|
||||
--color-primary-hover: #346a4a;
|
||||
--color-primary-active: #2c5a3e;
|
||||
|
||||
/* ── Secondary ──────────────────────────────────────────────────── */
|
||||
--color-secondary: #d5c4a1;
|
||||
--color-secondary-dark-1: #d5c4a1;
|
||||
--color-secondary-dark-2: #bdae93;
|
||||
--color-secondary-dark-3: #bdae93;
|
||||
--color-secondary-dark-4: #a89984;
|
||||
--color-secondary-dark-5: #a89984;
|
||||
--color-secondary-dark-6: #928374;
|
||||
--color-secondary-dark-7: #928374;
|
||||
--color-secondary-dark-8: #7c6f64;
|
||||
--color-secondary-dark-9: #7c6f64;
|
||||
--color-secondary-dark-10: #665c54;
|
||||
--color-secondary-dark-11: #665c54;
|
||||
--color-secondary-dark-12: #504945;
|
||||
--color-secondary-dark-13: #504945;
|
||||
--color-secondary-light-1: #d5c4a1;
|
||||
--color-secondary-light-2: #ebdbb2;
|
||||
--color-secondary-light-3: #ebdbb2;
|
||||
--color-secondary-light-4: #f2e5bc;
|
||||
--color-secondary-alpha-10: rgba(213, 196, 161, 0.10);
|
||||
--color-secondary-alpha-20: rgba(213, 196, 161, 0.20);
|
||||
--color-secondary-alpha-30: rgba(213, 196, 161, 0.30);
|
||||
--color-secondary-alpha-40: rgba(213, 196, 161, 0.40);
|
||||
--color-secondary-alpha-50: rgba(213, 196, 161, 0.50);
|
||||
--color-secondary-alpha-60: rgba(213, 196, 161, 0.60);
|
||||
--color-secondary-alpha-70: rgba(213, 196, 161, 0.70);
|
||||
--color-secondary-alpha-80: rgba(213, 196, 161, 0.80);
|
||||
--color-secondary-alpha-90: rgba(213, 196, 161, 0.90);
|
||||
--color-secondary-hover: #bdae93;
|
||||
--color-secondary-active: #a89984;
|
||||
|
||||
/* ── Named accents ──────────────────────────────────────────────── */
|
||||
--color-red: #cc241d;
|
||||
--color-orange: #d65d0e;
|
||||
--color-yellow: #d79921;
|
||||
--color-olive: #98971a;
|
||||
--color-green: #98971a;
|
||||
--color-teal: #689d6a;
|
||||
--color-blue: #458588;
|
||||
--color-violet: #8f3f71;
|
||||
--color-purple: #b16286;
|
||||
--color-pink: #d3869b;
|
||||
--color-brown: #b57614;
|
||||
--color-grey: #7c6f64;
|
||||
--color-black: #282828;
|
||||
|
||||
--color-red-light: #fb4934;
|
||||
--color-orange-light: #fe8019;
|
||||
--color-yellow-light: #fabd2f;
|
||||
--color-olive-light: #b8bb26;
|
||||
--color-green-light: #b8bb26;
|
||||
--color-teal-light: #8ec07c;
|
||||
--color-blue-light: #83a598;
|
||||
--color-violet-light: #b16286;
|
||||
--color-purple-light: #d3869b;
|
||||
--color-pink-light: #d3869b;
|
||||
--color-brown-light: #d79921;
|
||||
--color-grey-light: #a89984;
|
||||
--color-black-light: #3c3836;
|
||||
|
||||
--color-red-dark-1: #a5201a;
|
||||
--color-orange-dark-1: #af3a03;
|
||||
--color-yellow-dark-1: #b57614;
|
||||
--color-olive-dark-1: #79740e;
|
||||
--color-green-dark-1: #79740e;
|
||||
--color-teal-dark-1: #427b58;
|
||||
--color-blue-dark-1: #076678;
|
||||
--color-violet-dark-1: #7a2f5f;
|
||||
--color-purple-dark-1: #8f3f71;
|
||||
--color-pink-dark-1: #8f3f71;
|
||||
--color-brown-dark-1: #8f6100;
|
||||
--color-grey-dark-1: #665c54;
|
||||
--color-black-dark-1: #1d2021;
|
||||
|
||||
--color-red-dark-2: #8f221a;
|
||||
--color-orange-dark-2: #8f2f03;
|
||||
--color-yellow-dark-2: #8f6100;
|
||||
--color-olive-dark-2: #6b6a0a;
|
||||
--color-green-dark-2: #6b6a0a;
|
||||
--color-teal-dark-2: #346a4a;
|
||||
--color-blue-dark-2: #055f6b;
|
||||
--color-violet-dark-2: #63204c;
|
||||
--color-purple-dark-2: #7a2f5f;
|
||||
--color-pink-dark-2: #7a2f5f;
|
||||
--color-brown-dark-2: #6b4600;
|
||||
--color-grey-dark-2: #504945;
|
||||
--color-black-dark-2: #1d2021;
|
||||
|
||||
--color-gold: #b57614;
|
||||
--color-white: #fbf1c7;
|
||||
--color-pure-black: #1d2021;
|
||||
|
||||
/* ── ANSI ───────────────────────────────────────────────────────── */
|
||||
--color-ansi-black: #3c3836;
|
||||
--color-ansi-red: #cc241d;
|
||||
--color-ansi-green: #98971a;
|
||||
--color-ansi-yellow: #d79921;
|
||||
--color-ansi-blue: #458588;
|
||||
--color-ansi-magenta: #b16286;
|
||||
--color-ansi-cyan: #689d6a;
|
||||
--color-ansi-white: #a89984;
|
||||
--color-ansi-bright-black: #665c54;
|
||||
--color-ansi-bright-red: #fb4934;
|
||||
--color-ansi-bright-green: #b8bb26;
|
||||
--color-ansi-bright-yellow: #fabd2f;
|
||||
--color-ansi-bright-blue: #83a598;
|
||||
--color-ansi-bright-magenta: #d3869b;
|
||||
--color-ansi-bright-cyan: #8ec07c;
|
||||
--color-ansi-bright-white: #ebdbb2;
|
||||
|
||||
/* ── Diffs ──────────────────────────────────────────────────────── */
|
||||
--color-diff-removed-word-bg: #eeada4;
|
||||
--color-diff-added-word-bg: #ccd18a;
|
||||
--color-diff-removed-row-bg: #f7d9d3;
|
||||
--color-diff-moved-row-bg: #f6e4b5;
|
||||
--color-diff-added-row-bg: #e6e8c5;
|
||||
--color-diff-removed-row-border: #e0948a;
|
||||
--color-diff-moved-row-border: #e6c377;
|
||||
--color-diff-added-row-border: #c3c877;
|
||||
--color-diff-inactive: #f2e5bc;
|
||||
|
||||
/* ── Status ─────────────────────────────────────────────────────── */
|
||||
--color-error-border: #dda49a;
|
||||
--color-error-bg: #f3d0ca;
|
||||
--color-error-bg-active: #eeada4;
|
||||
--color-error-bg-hover: #f3d0ca;
|
||||
--color-error-text: #8f221a;
|
||||
--color-success-border: #c3c877;
|
||||
--color-success-bg: #e6e8c5;
|
||||
--color-success-text: #4a4d0a;
|
||||
--color-warning-border: #e6c377;
|
||||
--color-warning-bg: #f6e4b5;
|
||||
--color-warning-text: #7c5200;
|
||||
--color-info-border: #9cc0ba;
|
||||
--color-info-bg: #d7e3df;
|
||||
--color-info-text: #1f4d4f;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #cc241d;
|
||||
--color-red-badge-bg: rgba(204, 36, 29, 0.12);
|
||||
--color-red-badge-hover-bg: rgba(204, 36, 29, 0.22);
|
||||
--color-green-badge: #79740e;
|
||||
--color-green-badge-bg: rgba(121, 116, 14, 0.12);
|
||||
--color-green-badge-hover-bg: rgba(121, 116, 14, 0.22);
|
||||
--color-yellow-badge: #b57614;
|
||||
--color-yellow-badge-bg: rgba(181, 118, 20, 0.12);
|
||||
--color-yellow-badge-hover-bg: rgba(181, 118, 20, 0.22);
|
||||
--color-orange-badge: #d65d0e;
|
||||
--color-orange-badge-bg: rgba(214, 93, 14, 0.12);
|
||||
--color-orange-badge-hover-bg: rgba(214, 93, 14, 0.22);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #689d6a;
|
||||
--color-thin-red: #cc241d;
|
||||
--color-thin-purple: #b16286;
|
||||
--color-thin-orange: #d65d0e;
|
||||
--color-thin-red-highlight: #a5201a;
|
||||
--color-danger-bg: #f3d0ca;
|
||||
|
||||
/* ── Surfaces (close together for soft depth) ───────────────────── */
|
||||
--color-body: #fbf1c7;
|
||||
--color-box-header: #f2e5bc;
|
||||
--color-box-body: #f6eaca;
|
||||
--color-box-body-highlight: #f2e5bc;
|
||||
--color-text-dark: #1d2021;
|
||||
--color-text: #3c3836;
|
||||
--color-text-light: #504945;
|
||||
--color-text-light-1: #504945;
|
||||
--color-text-light-2: #665c54;
|
||||
--color-text-light-3: #7c6f64;
|
||||
--color-footer: #f2e5bc;
|
||||
--color-timeline: #ebdbb2;
|
||||
--color-input-text: #3c3836;
|
||||
--color-input-background: #f4e7c4;
|
||||
--color-input-toggle-background: #f4e7c4;
|
||||
--color-input-border: #d5c4a1;
|
||||
--color-input-border-hover: #bdae93;
|
||||
--color-header-wrapper: #f2e5bc;
|
||||
--color-header-wrapper-transparent: rgba(242, 229, 188, 0);
|
||||
--color-light: rgba(255, 255, 255, 0.8);
|
||||
--color-light-border: rgba(0, 0, 0, 0.11);
|
||||
--color-hover: #f0e2b8;
|
||||
--color-active: #ebdbb2;
|
||||
--color-menu: #f6eaca;
|
||||
--color-card: #f6eaca;
|
||||
--fancy-card-bg: #f6eaca;
|
||||
--fancy-card-border: #ebdbb2;
|
||||
--color-markup-table-row: rgba(0, 0, 0, 0.02);
|
||||
--color-markup-code-block: #f2e5bc;
|
||||
--color-markup-code-inline: #f2e5bc;
|
||||
--color-button: #f6eaca;
|
||||
--color-code-bg: #f2e5bc;
|
||||
--color-shadow: rgba(60, 56, 54, 0.20);
|
||||
--color-secondary-bg: #f6eaca;
|
||||
--color-text-focus: #282828;
|
||||
--color-expand-button: #f2e5bc;
|
||||
--color-placeholder-text: #a89984;
|
||||
--color-editor-line-highlight: #f6eaca;
|
||||
--color-project-board-bg: #f6eaca;
|
||||
--color-project-board-dark-label: #665c54;
|
||||
--color-caret: #427b58;
|
||||
--color-reaction-bg: rgba(0, 0, 0, 0.04);
|
||||
--color-reaction-active-bg: rgba(66, 123, 88, 0.18);
|
||||
--color-reaction-hover-bg: rgba(66, 123, 88, 0.28);
|
||||
--color-tooltip-text: #fbf1c7;
|
||||
--color-tooltip-bg: #3c3836;
|
||||
--color-nav-bg: #f2e5bc;
|
||||
--color-nav-hover-bg: #f0e2b8;
|
||||
--color-secondary-nav-bg: #fbf1c7;
|
||||
--color-label-text: #3c3836;
|
||||
--color-label-bg: rgba(189, 174, 147, 0.55);
|
||||
--color-label-hover-bg: rgba(189, 174, 147, 0.75);
|
||||
--color-label-active-bg: #bdae93;
|
||||
--color-label-bg-alt: #d5c4a1;
|
||||
--color-accent: #427b58;
|
||||
--color-small-accent: #458588;
|
||||
--color-highlight-fg: #427b58;
|
||||
--color-highlight-bg: rgba(66, 123, 88, 0.14);
|
||||
--color-overlay-backdrop: rgba(60, 56, 54, 0.55);
|
||||
--color-selection-bg: rgba(66, 123, 88, 0.22);
|
||||
--color-selection-fg: #1d2021;
|
||||
--checkerboard-color-1: #fbf1c7;
|
||||
--checkerboard-color-2: #ebdbb2;
|
||||
--color-indicator-offline: #7c6f64;
|
||||
--color-indicator-offline-20: rgba(124, 111, 100, 0.20);
|
||||
--color-indicator-idle: #79740e;
|
||||
--color-indicator-idle-20: rgba(121, 116, 14, 0.20);
|
||||
--color-indicator-active: #076678;
|
||||
--color-indicator-active-20: rgba(7, 102, 120, 0.20);
|
||||
|
||||
/* ── Console (keep the terminal dark) ───────────────────────────── */
|
||||
--color-console-fg: #ebdbb2;
|
||||
--color-console-fg-subtle: #a89984;
|
||||
--color-console-bg: #1d2021;
|
||||
--color-console-border: #3c3836;
|
||||
--color-console-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-console-active-bg: #504945;
|
||||
--color-console-menu-bg: #3c3836;
|
||||
--color-console-menu-border: #665c54;
|
||||
|
||||
/* ── Neumorphism primitives ─────────────────────────────────────── */
|
||||
--nm-shadow-dark: rgba(74, 68, 63, 0.22);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.95);
|
||||
--nm-divider-color: rgba(60, 56, 54, 0.10);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Gruvbox light flavour
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #fbf1c7 !important;
|
||||
color: #3c3836 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: #076678 !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #427b58 !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a { color: #7c6f64 !important; }
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover,
|
||||
.ui.breadcrumb a:hover { color: #427b58 !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #282828 !important; font-weight: 600; }
|
||||
|
||||
::selection {
|
||||
background: rgba(66, 123, 88, 0.22);
|
||||
color: #1d2021;
|
||||
}
|
||||
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha { font-family: var(--fonts-monospace) !important; }
|
||||
|
||||
/* Syntax highlighting — Chroma (gruvbox light) */
|
||||
.chroma { background: #f2e5bc !important; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #928374; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt { color: #9d0006; }
|
||||
.chroma .o, .chroma .ow { color: #af3a03; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .sh, .chroma .sx { color: #79740e; }
|
||||
.chroma .se, .chroma .ss { color: #427b58; }
|
||||
.chroma .si, .chroma .sa, .chroma .na, .chroma .nb, .chroma .nf,
|
||||
.chroma .ni, .chroma .nl { color: #b57614; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
|
||||
.chroma .mo, .chroma .il, .chroma .no { color: #8f3f71; }
|
||||
.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #427b58; }
|
||||
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #076678; }
|
||||
.chroma .gd { color: #282828; background-color: #f0c6c0; }
|
||||
.chroma .gi { color: #282828; background-color: #daddb2; }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #9d0006; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #8f3f71; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #427b58; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #928374; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #79740e; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #af3a03; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #b57614; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #9d0006; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #076678; }
|
||||
9
themes/theme-gruvbox-soft-dark.css
Normal file
9
themes/theme-gruvbox-soft-dark.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
* theme-gruvbox-soft-dark.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Legacy alias — kept so users who previously selected "gruvbox-soft-dark"
|
||||
* automatically get the reworked Gruvbox theme. Do not edit; edit
|
||||
* theme-gruvbox-dark.css instead.
|
||||
*/
|
||||
|
||||
@import url("./theme-gruvbox-dark.css");
|
||||
394
themes/theme-mono-dark.css
Normal file
394
themes/theme-mono-dark.css
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
/*
|
||||
* theme-mono-dark.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Monochrome dark + soft-UI. The default look: grayscale chrome, a near-white
|
||||
* accent, and a shared neumorphic layer. Colour is reserved for meaning
|
||||
* (success / warning / danger / diffs) rather than decoration.
|
||||
*
|
||||
* Layers: built-in dark palette → neumorphism → monochrome overrides.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-dark.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "SF Pro Text", -apple-system, "Segoe UI",
|
||||
"Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code",
|
||||
"SF Mono", "Source Code Pro", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Neutral ramp (dark → light) ────────────────────────────────── */
|
||||
--steel-900: #101012;
|
||||
--steel-850: #101012;
|
||||
--steel-800: #17171a;
|
||||
--steel-750: #1d1d20;
|
||||
--steel-700: #1d1d20;
|
||||
--steel-650: #2c2c30;
|
||||
--steel-600: #45454b;
|
||||
--steel-550: #5a5a61;
|
||||
--steel-500: #737379;
|
||||
--steel-450: #8f8f96;
|
||||
--steel-400: #ababb2;
|
||||
--steel-350: #c7c7cd;
|
||||
--steel-300: #c7c7cd;
|
||||
--steel-250: #e3e3e8;
|
||||
--steel-200: #e3e3e8;
|
||||
--steel-150: #e3e3e8;
|
||||
--steel-100: #f5f5f7;
|
||||
|
||||
/* ── Primary: near-white ────────────────────────────────────────── */
|
||||
--color-primary: #dcdce1;
|
||||
--color-primary-contrast: #121214;
|
||||
--color-primary-dark-1: #ececf0;
|
||||
--color-primary-dark-2: #ececf0;
|
||||
--color-primary-dark-3: #f3f3f5;
|
||||
--color-primary-dark-4: #f3f3f5;
|
||||
--color-primary-dark-5: #f8f8fa;
|
||||
--color-primary-dark-6: #fafafb;
|
||||
--color-primary-dark-7: #fdfdfe;
|
||||
--color-primary-light-1: #b6b6bd;
|
||||
--color-primary-light-2: #8f8f96;
|
||||
--color-primary-light-3: #8f8f96;
|
||||
--color-primary-light-4: #737379;
|
||||
--color-primary-light-5: #5a5a61;
|
||||
--color-primary-light-6: #45454b;
|
||||
--color-primary-light-7: #36363b;
|
||||
--color-primary-alpha-10: rgba(220, 220, 225, 0.10);
|
||||
--color-primary-alpha-20: rgba(220, 220, 225, 0.20);
|
||||
--color-primary-alpha-30: rgba(220, 220, 225, 0.30);
|
||||
--color-primary-alpha-40: rgba(220, 220, 225, 0.40);
|
||||
--color-primary-alpha-50: rgba(220, 220, 225, 0.50);
|
||||
--color-primary-alpha-60: rgba(220, 220, 225, 0.60);
|
||||
--color-primary-alpha-70: rgba(220, 220, 225, 0.70);
|
||||
--color-primary-alpha-80: rgba(220, 220, 225, 0.80);
|
||||
--color-primary-alpha-90: rgba(220, 220, 225, 0.90);
|
||||
--color-primary-hover: #ececf0;
|
||||
--color-primary-active: #b6b6bd;
|
||||
|
||||
/* ── Secondary ──────────────────────────────────────────────────── */
|
||||
--color-secondary: #2c2c30;
|
||||
--color-secondary-dark-1: #5a5a61;
|
||||
--color-secondary-dark-2: #737379;
|
||||
--color-secondary-dark-3: #8f8f96;
|
||||
--color-secondary-dark-4: #ababb2;
|
||||
--color-secondary-dark-5: #c7c7cd;
|
||||
--color-secondary-dark-6: #c7c7cd;
|
||||
--color-secondary-dark-7: #e3e3e8;
|
||||
--color-secondary-dark-8: #e3e3e8;
|
||||
--color-secondary-dark-9: #e3e3e8;
|
||||
--color-secondary-dark-10: #f5f5f7;
|
||||
--color-secondary-dark-11: #f5f5f7;
|
||||
--color-secondary-dark-12: #f5f5f7;
|
||||
--color-secondary-dark-13: #f5f5f7;
|
||||
--color-secondary-light-1: #36363b;
|
||||
--color-secondary-light-2: #1d1d20;
|
||||
--color-secondary-light-3: #1d1d20;
|
||||
--color-secondary-light-4: #17171a;
|
||||
--color-secondary-alpha-10: rgba(44, 44, 48, 0.10);
|
||||
--color-secondary-alpha-20: rgba(44, 44, 48, 0.20);
|
||||
--color-secondary-alpha-30: rgba(44, 44, 48, 0.30);
|
||||
--color-secondary-alpha-40: rgba(44, 44, 48, 0.40);
|
||||
--color-secondary-alpha-50: rgba(44, 44, 48, 0.50);
|
||||
--color-secondary-alpha-60: rgba(44, 44, 48, 0.60);
|
||||
--color-secondary-alpha-70: rgba(44, 44, 48, 0.70);
|
||||
--color-secondary-alpha-80: rgba(44, 44, 48, 0.80);
|
||||
--color-secondary-alpha-90: rgba(44, 44, 48, 0.90);
|
||||
--color-secondary-hover: #36363b;
|
||||
--color-secondary-active: #45454b;
|
||||
|
||||
/* ── Named accents: muted, used only for meaning ────────────────── */
|
||||
--color-red: #e0736f;
|
||||
--color-orange: #d9a066;
|
||||
--color-yellow: #d9c069;
|
||||
--color-olive: #a8bf7a;
|
||||
--color-green: #9cbf87;
|
||||
--color-teal: #7fb3a4;
|
||||
--color-blue: #8fb0c9;
|
||||
--color-violet: #a894c9;
|
||||
--color-purple: #c09ac9;
|
||||
--color-pink: #c99ab3;
|
||||
--color-brown: #a98d72;
|
||||
--color-grey: #8f8f96;
|
||||
--color-black: #17171a;
|
||||
|
||||
--color-red-light: #ef9a97;
|
||||
--color-orange-light: #e8bd8c;
|
||||
--color-yellow-light: #e8d79a;
|
||||
--color-olive-light: #c3d4a0;
|
||||
--color-green-light: #bcd5ab;
|
||||
--color-teal-light: #a3cdc1;
|
||||
--color-blue-light: #b3cadd;
|
||||
--color-violet-light: #c4b6dd;
|
||||
--color-purple-light: #d6bcdd;
|
||||
--color-pink-light: #ddbcd0;
|
||||
--color-brown-light: #c4ab93;
|
||||
--color-grey-light: #ababb2;
|
||||
--color-black-light: #1d1d20;
|
||||
|
||||
--color-red-dark-1: #b85552;
|
||||
--color-orange-dark-1: #b07f4a;
|
||||
--color-yellow-dark-1: #b09a4a;
|
||||
--color-olive-dark-1: #82965c;
|
||||
--color-green-dark-1: #789660;
|
||||
--color-teal-dark-1: #5f8f82;
|
||||
--color-blue-dark-1: #6f8fa8;
|
||||
--color-violet-dark-1: #8370a3;
|
||||
--color-purple-dark-1: #9a76a3;
|
||||
--color-pink-dark-1: #a3768f;
|
||||
--color-brown-dark-1: #856e58;
|
||||
--color-grey-dark-1: #737379;
|
||||
--color-black-dark-1: #101012;
|
||||
|
||||
--color-red-dark-2: #8f3f3d;
|
||||
--color-orange-dark-2: #8a6339;
|
||||
--color-yellow-dark-2: #8a7839;
|
||||
--color-olive-dark-2: #647346;
|
||||
--color-green-dark-2: #5c734a;
|
||||
--color-teal-dark-2: #486d63;
|
||||
--color-blue-dark-2: #546d80;
|
||||
--color-violet-dark-2: #65557d;
|
||||
--color-purple-dark-2: #775a7d;
|
||||
--color-pink-dark-2: #7d5a6d;
|
||||
--color-brown-dark-2: #665444;
|
||||
--color-grey-dark-2: #5a5a61;
|
||||
--color-black-dark-2: #101012;
|
||||
|
||||
--color-gold: #b8a05a;
|
||||
--color-white: #f5f5f7;
|
||||
--color-pure-black: #101012;
|
||||
|
||||
/* ── ANSI ───────────────────────────────────────────────────────── */
|
||||
--color-ansi-black: #1d1d20;
|
||||
--color-ansi-red: #b85552;
|
||||
--color-ansi-green: #789660;
|
||||
--color-ansi-yellow: #b09a4a;
|
||||
--color-ansi-blue: #6f8fa8;
|
||||
--color-ansi-magenta: #9a76a3;
|
||||
--color-ansi-cyan: #5f8f82;
|
||||
--color-ansi-white: #ababb2;
|
||||
--color-ansi-bright-black: #5a5a61;
|
||||
--color-ansi-bright-red: #ef9a97;
|
||||
--color-ansi-bright-green: #bcd5ab;
|
||||
--color-ansi-bright-yellow: #e8d79a;
|
||||
--color-ansi-bright-blue: #b3cadd;
|
||||
--color-ansi-bright-magenta: #d6bcdd;
|
||||
--color-ansi-bright-cyan: #a3cdc1;
|
||||
--color-ansi-bright-white: #f5f5f7;
|
||||
|
||||
/* ── Diffs ──────────────────────────────────────────────────────── */
|
||||
--color-diff-removed-word-bg: rgba(224, 115, 111, 0.30);
|
||||
--color-diff-added-word-bg: rgba(156, 191, 135, 0.26);
|
||||
--color-diff-removed-row-bg: rgba(224, 115, 111, 0.10);
|
||||
--color-diff-moved-row-bg: rgba(217, 160, 102, 0.13);
|
||||
--color-diff-added-row-bg: rgba(156, 191, 135, 0.10);
|
||||
--color-diff-removed-row-border: rgba(224, 115, 111, 0.40);
|
||||
--color-diff-moved-row-border: rgba(217, 192, 105, 0.40);
|
||||
--color-diff-added-row-border: rgba(156, 191, 135, 0.40);
|
||||
--color-diff-inactive: #1d1d20;
|
||||
|
||||
/* ── Status ─────────────────────────────────────────────────────── */
|
||||
--color-error-border: #a05a58;
|
||||
--color-error-bg: #3a2526;
|
||||
--color-error-bg-active: #4a2c2d;
|
||||
--color-error-bg-hover: #4a2c2d;
|
||||
--color-error-text: #f0b7b5;
|
||||
--color-success-border: #6f9a7e;
|
||||
--color-success-bg: #25302a;
|
||||
--color-success-text: #b8e0c4;
|
||||
--color-warning-border: #b7a05a;
|
||||
--color-warning-bg: #33301f;
|
||||
--color-warning-text: #f0dfa8;
|
||||
--color-info-border: #6f93ad;
|
||||
--color-info-bg: #23303a;
|
||||
--color-info-text: #b8d4e8;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #e0736f;
|
||||
--color-red-badge-bg: rgba(224, 115, 111, 0.14);
|
||||
--color-red-badge-hover-bg: rgba(224, 115, 111, 0.26);
|
||||
--color-green-badge: #9cbf87;
|
||||
--color-green-badge-bg: rgba(156, 191, 135, 0.14);
|
||||
--color-green-badge-hover-bg: rgba(156, 191, 135, 0.26);
|
||||
--color-yellow-badge: #d9c069;
|
||||
--color-yellow-badge-bg: rgba(217, 192, 105, 0.14);
|
||||
--color-yellow-badge-hover-bg: rgba(217, 192, 105, 0.26);
|
||||
--color-orange-badge: #d9a066;
|
||||
--color-orange-badge-bg: rgba(217, 160, 102, 0.14);
|
||||
--color-orange-badge-hover-bg: rgba(217, 160, 102, 0.26);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #9cbf87;
|
||||
--color-thin-red: #e0736f;
|
||||
--color-thin-purple: #c09ac9;
|
||||
--color-thin-orange: #d9a066;
|
||||
--color-thin-red-highlight: #ef9a97;
|
||||
--color-danger-bg: #3a2526;
|
||||
|
||||
/* ── Surfaces ───────────────────────────────────────────────────── */
|
||||
--color-body: #17171a;
|
||||
--color-box-header: #1d1d20;
|
||||
--color-box-body: #1d1d20;
|
||||
--color-box-body-highlight: #2c2c30;
|
||||
--color-text-dark: #121214;
|
||||
--color-text: #e3e3e8;
|
||||
--color-text-light: #c7c7cd;
|
||||
--color-text-light-1: #c7c7cd;
|
||||
--color-text-light-2: #ababb2;
|
||||
--color-text-light-3: #8f8f96;
|
||||
--color-footer: #101012;
|
||||
--color-timeline: #2c2c30;
|
||||
--color-input-text: #e3e3e8;
|
||||
--color-input-background: #121214;
|
||||
--color-input-toggle-background: #2c2c30;
|
||||
--color-input-border: #45454b;
|
||||
--color-input-border-hover: #5a5a61;
|
||||
--color-header-wrapper: #101012;
|
||||
--color-header-wrapper-transparent: rgba(16, 16, 18, 0);
|
||||
--color-light: rgba(0, 0, 0, 0.30);
|
||||
--color-light-border: rgba(255, 255, 255, 0.10);
|
||||
--color-hover: #2c2c30;
|
||||
--color-active: #36363b;
|
||||
--color-menu: #1d1d20;
|
||||
--color-card: #1d1d20;
|
||||
--fancy-card-bg: #1d1d20;
|
||||
--fancy-card-border: #2c2c30;
|
||||
--color-markup-table-row: rgba(255, 255, 255, 0.03);
|
||||
--color-markup-code-block: #121214;
|
||||
--color-markup-code-inline: #1d1d20;
|
||||
--color-button: #1d1d20;
|
||||
--color-code-bg: #121214;
|
||||
--color-shadow: rgba(0, 0, 0, 0.45);
|
||||
--color-secondary-bg: #1d1d20;
|
||||
--color-text-focus: #f5f5f7;
|
||||
--color-expand-button: #2c2c30;
|
||||
--color-placeholder-text: #5a5a61;
|
||||
--color-editor-line-highlight: #1d1d20;
|
||||
--color-project-board-bg: #1d1d20;
|
||||
--color-project-board-dark-label: #8f8f96;
|
||||
--color-caret: #dcdce1;
|
||||
--color-reaction-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-reaction-active-bg: rgba(220, 220, 225, 0.22);
|
||||
--color-reaction-hover-bg: rgba(220, 220, 225, 0.32);
|
||||
--color-tooltip-text: #e3e3e8;
|
||||
--color-tooltip-bg: #101012;
|
||||
--color-nav-bg: #101012;
|
||||
--color-nav-hover-bg: #2c2c30;
|
||||
--color-secondary-nav-bg: #17171a;
|
||||
--color-label-text: #e3e3e8;
|
||||
--color-label-bg: #2c2c30;
|
||||
--color-label-hover-bg: #36363b;
|
||||
--color-label-active-bg: #45454b;
|
||||
--color-label-bg-alt: #36363b;
|
||||
--color-accent: #dcdce1;
|
||||
--color-small-accent: #8f8f96;
|
||||
--color-highlight-fg: #e3e3e8;
|
||||
--color-highlight-bg: rgba(220, 220, 225, 0.12);
|
||||
--color-overlay-backdrop: rgba(16, 16, 18, 0.78);
|
||||
--color-selection-bg: rgba(220, 220, 225, 0.28);
|
||||
--color-selection-fg: #f5f5f7;
|
||||
--checkerboard-color-1: #1d1d20;
|
||||
--checkerboard-color-2: #121214;
|
||||
--color-indicator-offline: #737379;
|
||||
--color-indicator-offline-20: rgba(115, 115, 121, 0.20);
|
||||
--color-indicator-idle: #9cbf87;
|
||||
--color-indicator-idle-20: rgba(156, 191, 135, 0.20);
|
||||
--color-indicator-active: #8fb0c9;
|
||||
--color-indicator-active-20: rgba(143, 176, 201, 0.20);
|
||||
|
||||
/* ── Console ────────────────────────────────────────────────────── */
|
||||
--color-console-fg: #e3e3e8;
|
||||
--color-console-fg-subtle: #8f8f96;
|
||||
--color-console-bg: #0e0e10;
|
||||
--color-console-border: #2c2c30;
|
||||
--color-console-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-console-active-bg: #36363b;
|
||||
--color-console-menu-bg: #1d1d20;
|
||||
--color-console-menu-border: #45454b;
|
||||
|
||||
/* ── Neumorphism ────────────────────────────────────────────────── */
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.58);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.045);
|
||||
--nm-divider-color: rgba(255, 255, 255, 0.06);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Monochrome flavour
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #17171a !important;
|
||||
color: #e3e3e8 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: #c7c7cd !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #f5f5f7 !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a,
|
||||
.sha,
|
||||
.commit-sha { color: #8f8f96 !important; }
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover { color: #f5f5f7 !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #f5f5f7 !important; font-weight: 600; }
|
||||
|
||||
::selection {
|
||||
background: rgba(220, 220, 225, 0.28);
|
||||
color: #f5f5f7;
|
||||
}
|
||||
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha { font-family: var(--fonts-monospace) !important; }
|
||||
|
||||
/* Greyscale syntax highlighting — structure from weight, not colour */
|
||||
.chroma { background: #121214 !important; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #6a6a72; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
|
||||
.chroma .kr, .chroma .kt, .chroma .nt, .chroma .nc, .chroma .ne { color: #e3e3e8; font-weight: 600; }
|
||||
.chroma .o, .chroma .ow, .chroma .p, .chroma .punctuation { color: #8f8f96; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
|
||||
.chroma .sd, .chroma .sh, .chroma .sx, .chroma .se, .chroma .ss { color: #ababb2; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
|
||||
.chroma .mi, .chroma .mo, .chroma .il { color: #c7c7cd; }
|
||||
.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv,
|
||||
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #e3e3e8; }
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .nf,
|
||||
.chroma .ni, .chroma .nl, .chroma .py, .chroma .nd { color: #dcdce1; }
|
||||
.chroma .gd { color: #f5f5f7; background-color: #3a2526; }
|
||||
.chroma .gi { color: #f5f5f7; background-color: #25302a; }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #f5f5f7; font-weight: 600; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #c7c7cd; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #dcdce1; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #6a6a72; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #ababb2; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #c7c7cd; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #dcdce1; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #f5f5f7; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #c7c7cd; }
|
||||
388
themes/theme-mono-light.css
Normal file
388
themes/theme-mono-light.css
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
/*
|
||||
* theme-mono-light.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Monochrome light + soft-UI. Companion to theme-mono-dark.css.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-light.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "SF Pro Text", -apple-system, "Segoe UI",
|
||||
"Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code",
|
||||
"SF Mono", "Source Code Pro", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Neutral ramp (100 = darkest, 900 = lightest) ───────────────── */
|
||||
--steel-100: #1c1c1f;
|
||||
--steel-150: #2a2a2e;
|
||||
--steel-200: #2a2a2e;
|
||||
--steel-250: #45454b;
|
||||
--steel-300: #45454b;
|
||||
--steel-350: #5a5a61;
|
||||
--steel-400: #737379;
|
||||
--steel-450: #8f8f96;
|
||||
--steel-500: #ababb2;
|
||||
--steel-550: #c7c7cd;
|
||||
--steel-600: #d9d9de;
|
||||
--steel-650: #d9d9de;
|
||||
--steel-700: #ececef;
|
||||
--steel-750: #f2f2f4;
|
||||
--steel-800: #f6f6f8;
|
||||
--steel-850: #fafafb;
|
||||
--steel-900: #fafafb;
|
||||
|
||||
/* ── Primary: deep graphite ─────────────────────────────────────── */
|
||||
--color-primary: #2a2a2e;
|
||||
--color-primary-contrast: #f6f6f8;
|
||||
--color-primary-dark-1: #2a2a2e;
|
||||
--color-primary-dark-2: #1c1c1f;
|
||||
--color-primary-dark-3: #1c1c1f;
|
||||
--color-primary-dark-4: #141416;
|
||||
--color-primary-dark-5: #141416;
|
||||
--color-primary-dark-6: #101012;
|
||||
--color-primary-dark-7: #101012;
|
||||
--color-primary-light-1: #45454b;
|
||||
--color-primary-light-2: #5a5a61;
|
||||
--color-primary-light-3: #5a5a61;
|
||||
--color-primary-light-4: #737379;
|
||||
--color-primary-light-5: #8f8f96;
|
||||
--color-primary-light-6: #ababb2;
|
||||
--color-primary-light-7: #c7c7cd;
|
||||
--color-primary-alpha-10: rgba(42, 42, 46, 0.10);
|
||||
--color-primary-alpha-20: rgba(42, 42, 46, 0.20);
|
||||
--color-primary-alpha-30: rgba(42, 42, 46, 0.30);
|
||||
--color-primary-alpha-40: rgba(42, 42, 46, 0.40);
|
||||
--color-primary-alpha-50: rgba(42, 42, 46, 0.50);
|
||||
--color-primary-alpha-60: rgba(42, 42, 46, 0.60);
|
||||
--color-primary-alpha-70: rgba(42, 42, 46, 0.70);
|
||||
--color-primary-alpha-80: rgba(42, 42, 46, 0.80);
|
||||
--color-primary-alpha-90: rgba(42, 42, 46, 0.90);
|
||||
--color-primary-hover: #1c1c1f;
|
||||
--color-primary-active: #141416;
|
||||
|
||||
/* ── Secondary ──────────────────────────────────────────────────── */
|
||||
--color-secondary: #d9d9de;
|
||||
--color-secondary-dark-1: #d9d9de;
|
||||
--color-secondary-dark-2: #c7c7cd;
|
||||
--color-secondary-dark-3: #c7c7cd;
|
||||
--color-secondary-dark-4: #ababb2;
|
||||
--color-secondary-dark-5: #ababb2;
|
||||
--color-secondary-dark-6: #8f8f96;
|
||||
--color-secondary-dark-7: #8f8f96;
|
||||
--color-secondary-dark-8: #737379;
|
||||
--color-secondary-dark-9: #737379;
|
||||
--color-secondary-dark-10: #5a5a61;
|
||||
--color-secondary-dark-11: #5a5a61;
|
||||
--color-secondary-dark-12: #45454b;
|
||||
--color-secondary-dark-13: #45454b;
|
||||
--color-secondary-light-1: #d9d9de;
|
||||
--color-secondary-light-2: #e6e6ea;
|
||||
--color-secondary-light-3: #e6e6ea;
|
||||
--color-secondary-light-4: #ececef;
|
||||
--color-secondary-alpha-10: rgba(217, 217, 222, 0.10);
|
||||
--color-secondary-alpha-20: rgba(217, 217, 222, 0.20);
|
||||
--color-secondary-alpha-30: rgba(217, 217, 222, 0.30);
|
||||
--color-secondary-alpha-40: rgba(217, 217, 222, 0.40);
|
||||
--color-secondary-alpha-50: rgba(217, 217, 222, 0.50);
|
||||
--color-secondary-alpha-60: rgba(217, 217, 222, 0.60);
|
||||
--color-secondary-alpha-70: rgba(217, 217, 222, 0.70);
|
||||
--color-secondary-alpha-80: rgba(217, 217, 222, 0.80);
|
||||
--color-secondary-alpha-90: rgba(217, 217, 222, 0.90);
|
||||
--color-secondary-hover: #c7c7cd;
|
||||
--color-secondary-active: #ababb2;
|
||||
|
||||
/* ── Named accents: muted ───────────────────────────────────────── */
|
||||
--color-red: #c25b58;
|
||||
--color-orange: #b07f4a;
|
||||
--color-yellow: #b09a4a;
|
||||
--color-olive: #82965c;
|
||||
--color-green: #789660;
|
||||
--color-teal: #5f8f82;
|
||||
--color-blue: #6f8fa8;
|
||||
--color-violet: #8370a3;
|
||||
--color-purple: #9a76a3;
|
||||
--color-pink: #a3768f;
|
||||
--color-brown: #856e58;
|
||||
--color-grey: #737379;
|
||||
--color-black: #1c1c1f;
|
||||
|
||||
--color-red-light: #d98a87;
|
||||
--color-orange-light: #c49a6c;
|
||||
--color-yellow-light: #c4b16c;
|
||||
--color-olive-light: #a3b57f;
|
||||
--color-green-light: #98b080;
|
||||
--color-teal-light: #85ab9f;
|
||||
--color-blue-light: #8fa9bd;
|
||||
--color-violet-light: #a292bd;
|
||||
--color-purple-light: #b395bd;
|
||||
--color-pink-light: #bd93a7;
|
||||
--color-brown-light: #a08a72;
|
||||
--color-grey-light: #8f8f96;
|
||||
--color-black-light: #2a2a2e;
|
||||
|
||||
--color-red-dark-1: #a34a48;
|
||||
--color-orange-dark-1: #8f663c;
|
||||
--color-yellow-dark-1: #8f7d3c;
|
||||
--color-olive-dark-1: #6a7a4a;
|
||||
--color-green-dark-1: #627a52;
|
||||
--color-teal-dark-1: #4e756b;
|
||||
--color-blue-dark-1: #5a768a;
|
||||
--color-violet-dark-1: #6b5b85;
|
||||
--color-purple-dark-1: #7e6085;
|
||||
--color-pink-dark-1: #856174;
|
||||
--color-brown-dark-1: #6b5a48;
|
||||
--color-grey-dark-1: #5a5a61;
|
||||
--color-black-dark-1: #101012;
|
||||
|
||||
--color-red-dark-2: #8a3f3d;
|
||||
--color-orange-dark-2: #755331;
|
||||
--color-yellow-dark-2: #756731;
|
||||
--color-olive-dark-2: #566340;
|
||||
--color-green-dark-2: #506344;
|
||||
--color-teal-dark-2: #406059;
|
||||
--color-blue-dark-2: #4a6172;
|
||||
--color-violet-dark-2: #574a6b;
|
||||
--color-purple-dark-2: #684f6b;
|
||||
--color-pink-dark-2: #6b4e5e;
|
||||
--color-brown-dark-2: #574636;
|
||||
--color-grey-dark-2: #45454b;
|
||||
--color-black-dark-2: #101012;
|
||||
|
||||
--color-gold: #8f7d3c;
|
||||
--color-white: #fafafb;
|
||||
--color-pure-black: #101012;
|
||||
|
||||
/* ── ANSI ───────────────────────────────────────────────────────── */
|
||||
--color-ansi-black: #2a2a2e;
|
||||
--color-ansi-red: #a34a48;
|
||||
--color-ansi-green: #627a52;
|
||||
--color-ansi-yellow: #8f7d3c;
|
||||
--color-ansi-blue: #5a768a;
|
||||
--color-ansi-magenta: #7e6085;
|
||||
--color-ansi-cyan: #4e756b;
|
||||
--color-ansi-white: #8f8f96;
|
||||
--color-ansi-bright-black: #5a5a61;
|
||||
--color-ansi-bright-red: #c25b58;
|
||||
--color-ansi-bright-green: #789660;
|
||||
--color-ansi-bright-yellow: #b09a4a;
|
||||
--color-ansi-bright-blue: #6f8fa8;
|
||||
--color-ansi-bright-magenta: #9a76a3;
|
||||
--color-ansi-bright-cyan: #5f8f82;
|
||||
--color-ansi-bright-white: #f6f6f8;
|
||||
|
||||
/* ── Diffs ──────────────────────────────────────────────────────── */
|
||||
--color-diff-removed-word-bg: #e8b4b1;
|
||||
--color-diff-added-word-bg: #c3d4a8;
|
||||
--color-diff-removed-row-bg: #f2dedd;
|
||||
--color-diff-moved-row-bg: #f0e6cf;
|
||||
--color-diff-added-row-bg: #e4ecdb;
|
||||
--color-diff-removed-row-border: #d9a5a2;
|
||||
--color-diff-moved-row-border: #d9c79b;
|
||||
--color-diff-added-row-border: #b3c79b;
|
||||
--color-diff-inactive: #ececef;
|
||||
|
||||
/* ── Status ─────────────────────────────────────────────────────── */
|
||||
--color-error-border: #c98a87;
|
||||
--color-error-bg: #f0d8d7;
|
||||
--color-error-bg-active: #e8c3c1;
|
||||
--color-error-bg-hover: #f0d8d7;
|
||||
--color-error-text: #6d2f2d;
|
||||
--color-success-border: #8fb89c;
|
||||
--color-success-bg: #e0ebe3;
|
||||
--color-success-text: #2f5238;
|
||||
--color-warning-border: #c9b787;
|
||||
--color-warning-bg: #f0ead5;
|
||||
--color-warning-text: #6b5a1f;
|
||||
--color-info-border: #8fadc9;
|
||||
--color-info-bg: #dfe7ee;
|
||||
--color-info-text: #2f4a63;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #c25b58;
|
||||
--color-red-badge-bg: rgba(194, 91, 88, 0.12);
|
||||
--color-red-badge-hover-bg: rgba(194, 91, 88, 0.22);
|
||||
--color-green-badge: #627a52;
|
||||
--color-green-badge-bg: rgba(98, 122, 82, 0.12);
|
||||
--color-green-badge-hover-bg: rgba(98, 122, 82, 0.22);
|
||||
--color-yellow-badge: #8f7d3c;
|
||||
--color-yellow-badge-bg: rgba(143, 125, 60, 0.12);
|
||||
--color-yellow-badge-hover-bg: rgba(143, 125, 60, 0.22);
|
||||
--color-orange-badge: #b07f4a;
|
||||
--color-orange-badge-bg: rgba(176, 127, 74, 0.12);
|
||||
--color-orange-badge-hover-bg: rgba(176, 127, 74, 0.22);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #789660;
|
||||
--color-thin-red: #c25b58;
|
||||
--color-thin-purple: #9a76a3;
|
||||
--color-thin-orange: #b07f4a;
|
||||
--color-thin-red-highlight: #a34a48;
|
||||
--color-danger-bg: #f0d8d7;
|
||||
|
||||
/* ── Surfaces ───────────────────────────────────────────────────── */
|
||||
--color-body: #f6f6f8;
|
||||
--color-box-header: #ececef;
|
||||
--color-box-body: #f2f2f4;
|
||||
--color-box-body-highlight: #e6e6ea;
|
||||
--color-text-dark: #101012;
|
||||
--color-text: #2a2a2e;
|
||||
--color-text-light: #45454b;
|
||||
--color-text-light-1: #45454b;
|
||||
--color-text-light-2: #5a5a61;
|
||||
--color-text-light-3: #737379;
|
||||
--color-footer: #ececef;
|
||||
--color-timeline: #d9d9de;
|
||||
--color-input-text: #2a2a2e;
|
||||
--color-input-background: #f0f0f3;
|
||||
--color-input-toggle-background: #f0f0f3;
|
||||
--color-input-border: #c7c7cd;
|
||||
--color-input-border-hover: #ababb2;
|
||||
--color-header-wrapper: #f0f0f3;
|
||||
--color-header-wrapper-transparent: rgba(240, 240, 243, 0);
|
||||
--color-light: rgba(255, 255, 255, 0.8);
|
||||
--color-light-border: rgba(0, 0, 0, 0.10);
|
||||
--color-hover: #e9e9ed;
|
||||
--color-active: #dcdce1;
|
||||
--color-menu: #f2f2f4;
|
||||
--color-card: #f2f2f4;
|
||||
--fancy-card-bg: #f2f2f4;
|
||||
--fancy-card-border: #e0e0e5;
|
||||
--color-markup-table-row: rgba(0, 0, 0, 0.02);
|
||||
--color-markup-code-block: #ececef;
|
||||
--color-markup-code-inline: #e6e6ea;
|
||||
--color-button: #f2f2f4;
|
||||
--color-code-bg: #ececef;
|
||||
--color-shadow: rgba(0, 0, 0, 0.18);
|
||||
--color-secondary-bg: #f2f2f4;
|
||||
--color-text-focus: #101012;
|
||||
--color-expand-button: #e6e6ea;
|
||||
--color-placeholder-text: #8f8f96;
|
||||
--color-editor-line-highlight: #f2f2f4;
|
||||
--color-project-board-bg: #f2f2f4;
|
||||
--color-project-board-dark-label: #5a5a61;
|
||||
--color-caret: #2a2a2e;
|
||||
--color-reaction-bg: rgba(0, 0, 0, 0.04);
|
||||
--color-reaction-active-bg: rgba(42, 42, 46, 0.16);
|
||||
--color-reaction-hover-bg: rgba(42, 42, 46, 0.26);
|
||||
--color-tooltip-text: #f6f6f8;
|
||||
--color-tooltip-bg: #2a2a2e;
|
||||
--color-nav-bg: #ececef;
|
||||
--color-nav-hover-bg: #e9e9ed;
|
||||
--color-secondary-nav-bg: #f6f6f8;
|
||||
--color-label-text: #2a2a2e;
|
||||
--color-label-bg: rgba(199, 199, 205, 0.6);
|
||||
--color-label-hover-bg: rgba(199, 199, 205, 0.8);
|
||||
--color-label-active-bg: #ababb2;
|
||||
--color-label-bg-alt: #c7c7cd;
|
||||
--color-accent: #2a2a2e;
|
||||
--color-small-accent: #5a5a61;
|
||||
--color-highlight-fg: #2a2a2e;
|
||||
--color-highlight-bg: rgba(42, 42, 46, 0.12);
|
||||
--color-overlay-backdrop: rgba(28, 28, 31, 0.45);
|
||||
--color-selection-bg: rgba(42, 42, 46, 0.20);
|
||||
--color-selection-fg: #101012;
|
||||
--checkerboard-color-1: #f6f6f8;
|
||||
--checkerboard-color-2: #ececef;
|
||||
--color-indicator-offline: #737379;
|
||||
--color-indicator-offline-20: rgba(115, 115, 121, 0.20);
|
||||
--color-indicator-idle: #789660;
|
||||
--color-indicator-idle-20: rgba(120, 150, 96, 0.20);
|
||||
--color-indicator-active: #6f8fa8;
|
||||
--color-indicator-active-20: rgba(111, 143, 168, 0.20);
|
||||
|
||||
/* ── Console (keep it dark) ─────────────────────────────────────── */
|
||||
--color-console-fg: #e3e3e8;
|
||||
--color-console-fg-subtle: #8f8f96;
|
||||
--color-console-bg: #0e0e10;
|
||||
--color-console-border: #2c2c30;
|
||||
--color-console-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-console-active-bg: #36363b;
|
||||
--color-console-menu-bg: #1d1d20;
|
||||
--color-console-menu-border: #45454b;
|
||||
|
||||
/* ── Neumorphism ────────────────────────────────────────────────── */
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.14);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.95);
|
||||
--nm-divider-color: rgba(0, 0, 0, 0.08);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Monochrome light flavour
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #f6f6f8 !important;
|
||||
color: #2a2a2e !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: #45454b !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #101012 !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a { color: #737379 !important; }
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover { color: #101012 !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #101012 !important; font-weight: 600; }
|
||||
|
||||
::selection {
|
||||
background: rgba(42, 42, 46, 0.20);
|
||||
color: #101012;
|
||||
}
|
||||
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha { font-family: var(--fonts-monospace) !important; }
|
||||
|
||||
/* Greyscale syntax highlighting */
|
||||
.chroma { background: #ececef !important; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #8f8f96; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
|
||||
.chroma .kr, .chroma .kt, .chroma .nt, .chroma .nc, .chroma .ne { color: #1c1c1f; font-weight: 600; }
|
||||
.chroma .o, .chroma .ow, .chroma .p, .chroma .punctuation { color: #737379; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
|
||||
.chroma .sd, .chroma .sh, .chroma .sx, .chroma .se, .chroma .ss { color: #45454b; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
|
||||
.chroma .mi, .chroma .mo, .chroma .il { color: #2a2a2e; }
|
||||
.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv,
|
||||
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #2a2a2e; }
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .nf,
|
||||
.chroma .ni, .chroma .nl, .chroma .py, .chroma .nd { color: #1c1c1f; }
|
||||
.chroma .gd { color: #101012; background-color: #f0d8d7; }
|
||||
.chroma .gi { color: #101012; background-color: #e0ebe3; }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #1c1c1f; font-weight: 600; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #2a2a2e; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #1c1c1f; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #8f8f96; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #45454b; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #5a5a61; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #1c1c1f; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #101012; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #45454b; }
|
||||
494
themes/theme-neumorphism.css
Normal file
494
themes/theme-neumorphism.css
Normal file
|
|
@ -0,0 +1,494 @@
|
|||
/*
|
||||
* theme-neumorphism.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Shared "soft UI" / neumorphic layer for Forgejo.
|
||||
*
|
||||
* This file contains no palette of its own — it only defines soft-shadow
|
||||
* primitives and restyles components to look extruded or recessed. Import it
|
||||
* at the TOP of a theme (right after the base palette import) and then set the
|
||||
* --nm-* primitives + colours in that theme's :root.
|
||||
*
|
||||
* Themes that import this: gruvbox-dark, gruvbox-light, terminal,
|
||||
* forgejo-dark, forgejo-light, forgejo-auto.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Derived primitives — themes override --nm-shadow-* / --nm-radius */
|
||||
--nm-bg: var(--color-body, #282828);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
--nm-raised: 7px 7px 16px var(--nm-shadow-dark, rgba(0, 0, 0, 0.5)),
|
||||
-7px -7px 16px var(--nm-shadow-light, rgba(255, 255, 255, 0.05));
|
||||
--nm-raised-sm: 4px 4px 10px var(--nm-shadow-dark, rgba(0, 0, 0, 0.45)),
|
||||
-4px -4px 10px var(--nm-shadow-light, rgba(255, 255, 255, 0.04));
|
||||
/* Buttons sit between the two — clearly lifted, but not chunky */
|
||||
--nm-raised-xs: 2px 2px 5px var(--nm-shadow-dark, rgba(0, 0, 0, 0.4)),
|
||||
-2px -2px 5px var(--nm-shadow-light, rgba(255, 255, 255, 0.04));
|
||||
--nm-inset: inset 5px 5px 12px var(--nm-shadow-dark, rgba(0, 0, 0, 0.5)),
|
||||
inset -5px -5px 12px var(--nm-shadow-light, rgba(255, 255, 255, 0.05));
|
||||
--nm-inset-sm: inset 3px 3px 7px var(--nm-shadow-dark, rgba(0, 0, 0, 0.45)),
|
||||
inset -3px -3px 7px var(--nm-shadow-light, rgba(255, 255, 255, 0.04));
|
||||
--nm-flat: 2px 2px 4px var(--nm-shadow-dark, rgba(0, 0, 0, 0.4)),
|
||||
-2px -2px 4px var(--nm-shadow-light, rgba(255, 255, 255, 0.04));
|
||||
--nm-divider: var(--nm-divider-color, rgba(255, 255, 255, 0.07));
|
||||
--nm-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Surfaces — raised soft panels
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.segment,
|
||||
.ui.segments,
|
||||
.ui.secondary.segment,
|
||||
.ui.tertiary.segment,
|
||||
.ui.raised.segment,
|
||||
.ui.stacked.segment,
|
||||
.ui.card,
|
||||
.ui.cards > .card,
|
||||
.ui.message,
|
||||
.repository .repo-header,
|
||||
.ui.modal,
|
||||
.ui.popup,
|
||||
.ui.fluid.popup,
|
||||
.ui.dropdown .menu {
|
||||
background: var(--color-box-body, var(--color-secondary-bg)) !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-radius: var(--nm-radius) !important;
|
||||
box-shadow: var(--nm-raised) !important;
|
||||
}
|
||||
|
||||
/* Nested / attached pieces are part of a parent panel. Keep them flat so we
|
||||
never stack soft shadows (repo summary + tab bar, attached tables, rows
|
||||
inside a segments group, ...). One panel = one shadow. */
|
||||
.ui.attached.segment,
|
||||
.ui.attached.header,
|
||||
.ui.attached.table,
|
||||
.ui.top.attached.segment,
|
||||
.ui.middle.attached.segment,
|
||||
.ui.bottom.attached.segment,
|
||||
.ui.segments > .ui.segment,
|
||||
.ui.segments .ui.segment {
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border-color: var(--nm-divider) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.card,
|
||||
.ui.cards > .card {
|
||||
transition: box-shadow 0.2s var(--nm-ease), transform 0.2s var(--nm-ease);
|
||||
}
|
||||
.ui.card:hover,
|
||||
.ui.cards > .card:hover {
|
||||
box-shadow: var(--nm-raised), 0 0 0 1px var(--color-primary-alpha-20, transparent) !important;
|
||||
}
|
||||
|
||||
/* Headings inside boxes */
|
||||
.ui.segment > .ui.header,
|
||||
.ui.attached.header,
|
||||
.ui.header.segment {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Buttons — extruded, pressed state sinks in
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.button,
|
||||
.ui.buttons .button {
|
||||
background: var(--color-box-body, var(--color-button)) !important;
|
||||
color: var(--color-text) !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
box-shadow: var(--nm-raised-xs) !important;
|
||||
font-weight: 500 !important;
|
||||
text-transform: none !important;
|
||||
transition: box-shadow 0.16s var(--nm-ease), color 0.16s var(--nm-ease),
|
||||
filter 0.16s var(--nm-ease);
|
||||
}
|
||||
.ui.button:hover,
|
||||
.ui.buttons .button:hover {
|
||||
color: var(--color-primary) !important;
|
||||
box-shadow: var(--nm-raised-sm) !important;
|
||||
}
|
||||
.ui.button:active,
|
||||
.ui.buttons .button:active {
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button,
|
||||
.ui.primary.label {
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
var(--color-primary-light-1, var(--color-primary)),
|
||||
var(--color-primary)
|
||||
) !important;
|
||||
color: var(--color-primary-contrast, #101010) !important;
|
||||
border: 1px solid transparent !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: var(--nm-raised-xs), 0 0 0 1px var(--color-primary-alpha-20, transparent) !important;
|
||||
}
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover {
|
||||
filter: brightness(1.06);
|
||||
color: var(--color-primary-contrast, #101010) !important;
|
||||
box-shadow: var(--nm-raised-sm), 0 0 0 1px var(--color-primary-alpha-40, transparent) !important;
|
||||
}
|
||||
.ui.primary.button:active {
|
||||
filter: brightness(0.95);
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
}
|
||||
|
||||
/* Ghost / basic buttons: no extrusion until hover */
|
||||
.ui.basic.button,
|
||||
.ui.basic.buttons .button {
|
||||
background: transparent !important;
|
||||
color: var(--color-text-light, var(--color-text)) !important;
|
||||
border: 1px solid var(--nm-divider) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ui.basic.button:hover,
|
||||
.ui.basic.buttons .button:hover {
|
||||
background: transparent !important;
|
||||
color: var(--color-primary) !important;
|
||||
border-color: var(--color-primary-alpha-40, var(--color-primary)) !important;
|
||||
box-shadow: var(--nm-flat) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Inputs — recessed wells
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.ui.input input,
|
||||
.ui.form input:not([type="checkbox"]):not([type="radio"]),
|
||||
.ui.form textarea,
|
||||
.ui.form select,
|
||||
.ui.search input,
|
||||
.ui.action.input input,
|
||||
.CodeMirror {
|
||||
background: var(--color-body, var(--nm-bg)) !important;
|
||||
color: var(--color-input-text, var(--color-text)) !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
}
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
.ui.input input::placeholder {
|
||||
color: var(--color-placeholder-text, var(--color-text-light-3)) !important;
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.ui.input input:focus,
|
||||
.ui.form input:focus,
|
||||
.ui.form textarea:focus,
|
||||
.ui.search input:focus {
|
||||
border-color: transparent !important;
|
||||
box-shadow: var(--nm-inset-sm),
|
||||
0 0 0 2px var(--color-primary-alpha-30, transparent) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Input groups (clone panel, code search, explore search)
|
||||
One integrated well instead of separate extruded buttons floating next
|
||||
to a recessed input.
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.action.input {
|
||||
background: var(--color-box-body, var(--color-secondary-bg)) !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
overflow: visible !important;
|
||||
align-items: stretch !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
/* Every segment is transparent on ONE shared rounded surface. Because no
|
||||
child paints an opaque rectangle, the outer corners always follow the
|
||||
group's radius — a child can never square them off. */
|
||||
.ui.action.input > input,
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .buttons .button,
|
||||
.ui.action.input > .ui.dropdown,
|
||||
.ui.action.input > .ui.selection.dropdown {
|
||||
background: transparent !important;
|
||||
color: var(--color-text) !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
align-self: stretch !important;
|
||||
}
|
||||
.ui.action.input > input {
|
||||
flex: 1 1 auto !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.ui.action.input > .ui.dropdown .text,
|
||||
.ui.action.input > .ui.dropdown .dropdown.icon,
|
||||
.ui.action.input > .ui.dropdown .search.icon,
|
||||
.ui.action.input > .ui.dropdown .delete.icon {
|
||||
color: var(--color-text) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
/* The search-type selector hugs its label instead of the 10em default. */
|
||||
.ui.action.input > .ui.dropdown.selection {
|
||||
min-width: 0 !important;
|
||||
width: auto !important;
|
||||
}
|
||||
/* Hairline separators. */
|
||||
.ui.action.input > :not(:first-child) {
|
||||
border-left: 1px solid var(--nm-divider) !important;
|
||||
}
|
||||
/* Hover = colour only, never an opaque block. */
|
||||
.ui.action.input .button:hover,
|
||||
.ui.action.input > .ui.dropdown.selection:hover,
|
||||
.ui.action.input > .ui.dropdown.selection:hover .text,
|
||||
.ui.action.input > .ui.dropdown.selection:hover .dropdown.icon {
|
||||
color: var(--color-primary) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.ui.action.input:focus-within {
|
||||
box-shadow: var(--nm-inset-sm),
|
||||
0 0 0 2px var(--color-primary-alpha-30, transparent) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Navigation & footer — soft, borderless
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.navbar,
|
||||
#navbar,
|
||||
nav.navbar,
|
||||
.ui.menu.navbar,
|
||||
.ui.secondary.menu.navbar {
|
||||
background: var(--color-nav-bg, var(--color-body)) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 8px 18px -12px var(--nm-shadow-dark, rgba(0, 0, 0, 0.6)) !important;
|
||||
}
|
||||
|
||||
.page-footer,
|
||||
footer,
|
||||
.ui.page-footer {
|
||||
background: var(--color-footer, var(--color-body)) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 -8px 18px -14px var(--nm-shadow-dark, rgba(0, 0, 0, 0.6)) !important;
|
||||
}
|
||||
|
||||
.ui.tabular.menu,
|
||||
.ui.secondary.pointing.menu {
|
||||
border: none !important;
|
||||
}
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item {
|
||||
background: transparent !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Menus, sidebar, breadcrumbs
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.vertical.menu,
|
||||
.ui.fluid.vertical.menu,
|
||||
.ui.secondary.vertical.menu,
|
||||
.settings .ui.menu {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ui.vertical.menu .item {
|
||||
border: none !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
color: var(--color-text-light, var(--color-text)) !important;
|
||||
transition: box-shadow 0.16s var(--nm-ease), color 0.16s var(--nm-ease);
|
||||
}
|
||||
.ui.vertical.menu .item:hover {
|
||||
box-shadow: var(--nm-raised-xs) !important;
|
||||
color: var(--color-text) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.ui.vertical.menu .active.item,
|
||||
.ui.vertical.menu .item.active {
|
||||
background: transparent !important;
|
||||
color: var(--color-primary) !important;
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item,
|
||||
.ui.popup .item {
|
||||
border: none !important;
|
||||
}
|
||||
.ui.dropdown .menu > .item:hover,
|
||||
.ui.dropdown .menu > .item.active,
|
||||
.ui.popup .item:hover {
|
||||
background: var(--color-primary-alpha-10, rgba(127, 127, 127, 0.12)) !important;
|
||||
color: var(--color-primary) !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
}
|
||||
|
||||
.ui.divider {
|
||||
border-color: var(--nm-divider) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Tables — one raised sheet, recessed header
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.table {
|
||||
background: var(--color-box-body, var(--color-secondary-bg)) !important;
|
||||
border: none !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
/* No extrusion — tables usually live inside a raised segment already, and
|
||||
stacked shadows are what made list pages look off. */
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ui.table thead th,
|
||||
.ui.table > thead > tr > th {
|
||||
background: transparent !important;
|
||||
border-color: var(--nm-divider) !important;
|
||||
color: var(--color-text-light, var(--color-text)) !important;
|
||||
box-shadow: inset 0 -1px 0 var(--nm-divider);
|
||||
}
|
||||
.ui.table > tbody > tr > td {
|
||||
background: transparent !important;
|
||||
border-color: var(--nm-divider) !important;
|
||||
}
|
||||
.ui.table tbody tr:hover td {
|
||||
background: var(--color-primary-alpha-10, rgba(127, 127, 127, 0.08)) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Labels, badges, avatars
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.label,
|
||||
.ui.labels .label {
|
||||
border: 1px solid transparent !important;
|
||||
border-radius: 999px !important;
|
||||
/* Flat pills: soft shadows on every badge turn busy lists into noise. */
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ui.basic.label {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid var(--nm-divider) !important;
|
||||
}
|
||||
|
||||
.ui.avatar,
|
||||
.avatar,
|
||||
img.ui.avatar,
|
||||
.repository .small-thumbnail,
|
||||
.repo-avatar {
|
||||
border: 1px solid var(--nm-divider) !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Messages — raised with a soft accent edge
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.message {
|
||||
box-shadow: var(--nm-raised), inset 4px 0 0 var(--color-primary-alpha-40, transparent) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Pagination, progress, code, scrollbars
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.pagination.menu {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.ui.pagination.menu .item {
|
||||
border: none !important;
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ui.pagination.menu .active.item {
|
||||
background: linear-gradient(145deg, var(--color-primary-light-1, var(--color-primary)), var(--color-primary)) !important;
|
||||
color: var(--color-primary-contrast, #101010) !important;
|
||||
box-shadow: var(--nm-raised-sm) !important;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.ui.progress {
|
||||
background: var(--color-body) !important;
|
||||
border-radius: 999px !important;
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
}
|
||||
.progress .bar,
|
||||
.ui.progress .bar {
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light-1, var(--color-primary))) !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
|
||||
/* Block code: recess the rectangle that holds the code, never the text.
|
||||
Inline `code` and the text inside a block stay flat, so an empty line or a
|
||||
short snippet never gets its own hugging shadow. */
|
||||
pre,
|
||||
.code-view {
|
||||
border-radius: var(--nm-radius-sm) !important;
|
||||
box-shadow: var(--nm-inset-sm) !important;
|
||||
}
|
||||
code,
|
||||
pre code,
|
||||
pre > code,
|
||||
.highlight code,
|
||||
.code-view .lines-code,
|
||||
.markup,
|
||||
.file-content {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-secondary, var(--nm-divider)) transparent;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-secondary, var(--nm-divider));
|
||||
border-radius: 999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-primary-alpha-40, var(--color-secondary));
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Misc polish
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.flex-item,
|
||||
.repository.file.list .file-row {
|
||||
border-color: var(--nm-divider) !important;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/* Respect users who prefer less motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ui.button,
|
||||
.ui.card,
|
||||
.ui.cards > .card {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
119
themes/theme-terminal.css
Normal file
119
themes/theme-terminal.css
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/*
|
||||
* theme-terminal.css
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* The original CRT / phosphor-green terminal palette, now wearing the shared
|
||||
* neumorphic/soft-UI layer. Surfaces were lifted off pure black so the soft
|
||||
* shadows actually have somewhere to fall; the phosphor green is untouched.
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-dark.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
|
||||
/* ── Typography: keep it terminal-y, but readable ───────────────── */
|
||||
--fonts-proportional: "Inter", "JetBrains Mono", "Cascadia Code",
|
||||
ui-monospace, "DejaVu Sans Mono", Consolas, monospace !important;
|
||||
--fonts-monospace: "Berkeley Mono", "JetBrains Mono", "Fira Code",
|
||||
"SF Mono", "Cascadia Code", ui-monospace, "DejaVu Sans Mono",
|
||||
Consolas, monospace !important;
|
||||
|
||||
/* ── Phosphor green primary ─────────────────────────────────────── */
|
||||
--color-primary: #33ff66;
|
||||
--color-primary-contrast: #08110a;
|
||||
--color-primary-dark-1: #55ff88;
|
||||
--color-primary-dark-2: #55ff88;
|
||||
--color-primary-dark-3: #77ff99;
|
||||
--color-primary-dark-4: #77ff99;
|
||||
--color-primary-dark-5: #99ffbb;
|
||||
--color-primary-dark-6: #99ffbb;
|
||||
--color-primary-dark-7: #bbffcc;
|
||||
--color-primary-light-1: #22cc55;
|
||||
--color-primary-light-2: #1a9940;
|
||||
--color-primary-light-3: #1a9940;
|
||||
--color-primary-light-4: #14732f;
|
||||
--color-primary-light-5: #106027;
|
||||
--color-primary-light-6: #0c4a1e;
|
||||
--color-primary-light-7: #093816;
|
||||
--color-primary-alpha-10: rgba(51, 255, 102, 0.10);
|
||||
--color-primary-alpha-20: rgba(51, 255, 102, 0.20);
|
||||
--color-primary-alpha-30: rgba(51, 255, 102, 0.30);
|
||||
--color-primary-alpha-40: rgba(51, 255, 102, 0.40);
|
||||
--color-primary-alpha-50: rgba(51, 255, 102, 0.50);
|
||||
--color-primary-alpha-60: rgba(51, 255, 102, 0.60);
|
||||
--color-primary-alpha-70: rgba(51, 255, 102, 0.70);
|
||||
--color-primary-alpha-80: rgba(51, 255, 102, 0.80);
|
||||
--color-primary-alpha-90: rgba(51, 255, 102, 0.90);
|
||||
--color-primary-hover: #55ff88;
|
||||
--color-primary-active: #22cc55;
|
||||
--color-accent: #33ff66;
|
||||
--color-small-accent: #22cc55;
|
||||
--color-highlight-fg: #33ff66;
|
||||
--color-highlight-bg: rgba(51, 255, 102, 0.14);
|
||||
--color-caret: #33ff66;
|
||||
|
||||
/* ── Green-tinted surfaces (no longer pure black) ───────────────── */
|
||||
--color-body: #101410;
|
||||
--color-box-header: #141a15;
|
||||
--color-box-body: #141a15;
|
||||
--color-box-body-highlight: #1b241c;
|
||||
--color-secondary: #223023;
|
||||
--color-secondary-bg: #141a15;
|
||||
--color-menu: #141a15;
|
||||
--color-card: #141a15;
|
||||
--fancy-card-bg: #141a15;
|
||||
--fancy-card-border: #223023;
|
||||
--color-hover: #1b241c;
|
||||
--color-active: #223023;
|
||||
--color-nav-bg: #0c110d;
|
||||
--color-footer: #0c110d;
|
||||
--color-header-wrapper: #0c110d;
|
||||
--color-input-background: #0b0f0b;
|
||||
--color-input-toggle-background: #1b241c;
|
||||
--color-code-bg: #0b0f0b;
|
||||
--color-markup-code-block: #0b0f0b;
|
||||
--color-markup-code-inline: #141a15;
|
||||
--color-timeline: #223023;
|
||||
--color-editor-line-highlight: #141a15;
|
||||
--color-placeholder-text: #5d6b5f;
|
||||
|
||||
/* ── Text ───────────────────────────────────────────────────────── */
|
||||
--color-text: #b8c4ba;
|
||||
--color-text-light: #93a396;
|
||||
--color-text-light-1: #93a396;
|
||||
--color-text-light-2: #7c8a7e;
|
||||
--color-text-light-3: #667367;
|
||||
|
||||
/* ── Neumorphism primitives ─────────────────────────────────────── */
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.78);
|
||||
--nm-shadow-light: rgba(90, 255, 140, 0.05);
|
||||
--nm-divider-color: rgba(90, 255, 140, 0.09);
|
||||
--nm-radius: 14px;
|
||||
--nm-radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* Terminal flavour */
|
||||
body {
|
||||
background-color: #101410 !important;
|
||||
color: #b8c4ba !important;
|
||||
}
|
||||
|
||||
a { color: #33ff66 !important; text-decoration: none !important; }
|
||||
a:hover,
|
||||
a:focus { color: #77ff99 !important; text-decoration: underline !important; }
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover { color: #33ff66 !important; }
|
||||
|
||||
::selection {
|
||||
background: rgba(51, 255, 102, 0.25);
|
||||
color: #eaffef;
|
||||
}
|
||||
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt { color: #ff7540; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .sh, .chroma .sx { color: #33ff66; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs, .chroma .cp, .chroma .cpf { color: #5d6b5f; }
|
||||
.chroma .na, .chroma .nb, .chroma .nf, .chroma .ni { color: #8ee6a5; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .il { color: #649bc4; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue