406 lines
16 KiB
CSS
406 lines
16 KiB
CSS
/*
|
|
* 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; }
|