/* * 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; }