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