Add Forgejo theme and homepage
This commit is contained in:
commit
92363fca9b
31 changed files with 4044 additions and 0 deletions
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; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue