D4rkst3randClaude Fable 5
6daa1f7d43
In Gitea ist fast jeder Text ein Link (a { color: var(--color-primary) }),
eine Aktivitätsseite besteht praktisch nur daraus. Das volle #f5c518 hat
90 % Sättigung — als Akzent gedacht, nicht für Fließtext, und blendet
entsprechend.
Links, Flächen und Tönungen nutzen jetzt ein entsättigtes Gold (#dcc275,
47 % Sättigung, Kontrast 11:1 auf Schwarz). Das Neon bleibt den Stellen
vorbehalten, wo es wirken soll: Primär-Buttons, aktive Navigation und
Hover — Links leuchten also erst auf, wenn man draufzeigt.
Die Abstufungen (dark-1..7, light-1..7) sind passend zur neuen Basis neu
berechnet. Oben in der Datei steht, wie sich die Intensität nachjustieren
lässt.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
253 lines
8.8 KiB
CSS
253 lines
8.8 KiB
CSS
/* ═══════════════════════════════════════════════════
|
|
D4RKST3R — Gitea-Theme
|
|
Gold/Orange auf Schwarz, passend zu bot.d4rkst3r.de
|
|
|
|
Einbau: custom/public/assets/css/theme-d4rkst3r.css
|
|
danach Gitea neu starten und das Theme unter
|
|
Einstellungen → Aussehen auswählen.
|
|
|
|
── Augenfreundlichkeit ──
|
|
In Gitea ist fast jeder Text ein Link, deshalb ist die Grundfarbe
|
|
ein ruhiges Gold (#dcc275) statt des vollen Neon-Gelbs. Das Neon
|
|
(#f5c518) erscheint nur dort, wo es soll: Buttons, Hover und
|
|
aktive Elemente.
|
|
|
|
Zu bunt? --color-primary auf #d4bd7f oder #c9b98f setzen.
|
|
Zu blass? Auf #e8cd6b — oder ganz zurück auf #f5c518.
|
|
═══════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
/* ── Marke ───────────────────────────────────── */
|
|
--color-primary: #dcc275; /* Links, Akzente — bewusst entsättigt */
|
|
--color-primary-contrast: #0a0a0a; /* Text auf goldenen Flächen */
|
|
--color-primary-hover: #f5c518; /* Hover leuchtet auf */
|
|
--color-primary-active: #f5c518;
|
|
--color-primary-dark-1: #d6b85f;
|
|
--color-primary-dark-2: #d1ae48;
|
|
--color-primary-dark-3: #caa433;
|
|
--color-primary-dark-4: #b3922d;
|
|
--color-primary-dark-5: #9d7f28;
|
|
--color-primary-dark-6: #876d22;
|
|
--color-primary-dark-7: #705b1c;
|
|
--color-primary-light-1: #ddc88b;
|
|
--color-primary-light-2: #e2d19d;
|
|
--color-primary-light-3: #e7d9ae;
|
|
--color-primary-light-4: #ede1c0;
|
|
--color-primary-light-5: #f2ead2;
|
|
--color-primary-light-6: #f7f2e4;
|
|
--color-primary-light-7: #fcfaf5;
|
|
--color-primary-alpha-10: #dcc2751a;
|
|
--color-primary-alpha-20: #dcc27533;
|
|
--color-primary-alpha-30: #dcc2754d;
|
|
--color-primary-alpha-40: #dcc27566;
|
|
--color-primary-alpha-50: #dcc27580;
|
|
--color-primary-alpha-60: #dcc27599;
|
|
--color-primary-alpha-70: #dcc275b3;
|
|
--color-primary-alpha-80: #dcc275cc;
|
|
--color-primary-alpha-90: #dcc275e6;
|
|
|
|
/* Volles Neon — nur für Buttons und aktive Zustände */
|
|
--d4rk-neon: #f5c518;
|
|
|
|
/* Orange als Akzent (Links, Hervorhebungen) */
|
|
--color-accent: #ff4d00;
|
|
--color-small-accent: #ff4d0033;
|
|
|
|
/* ── Flächen ─────────────────────────────────── */
|
|
--color-body: #0a0a0a;
|
|
--color-box-body: #111111;
|
|
--color-box-body-highlight: #161616;
|
|
--color-box-header: #141414;
|
|
--color-nav-bg: #0d0d0d;
|
|
--color-nav-hover-bg: #1a1a1a;
|
|
--color-header-wrapper: #0d0d0d;
|
|
--color-footer: #0d0d0d;
|
|
--color-menu: #111111;
|
|
--color-card: #111111;
|
|
--color-markup-code-block: #dcc2750f;
|
|
--color-code-bg: #111111;
|
|
--color-code-sidebar-bg: #141414;
|
|
--color-console-bg: #0a0a0a;
|
|
--color-console-fg: #e8e0d0;
|
|
--color-console-fg-subtle: #8a8378;
|
|
--color-console-border: #dcc27526;
|
|
--color-console-hover-bg: #dcc2750f;
|
|
--color-console-active-bg: #dcc27517;
|
|
--color-console-menu-bg: #111111;
|
|
--color-console-menu-border: #dcc27526;
|
|
|
|
/* ── Text ────────────────────────────────────── */
|
|
--color-text: #e8e0d0;
|
|
--color-text-dark: #ffffff;
|
|
--color-text-light: #c9c2b4;
|
|
--color-text-light-1: #a8a294;
|
|
--color-text-light-2: #8a8378;
|
|
--color-text-light-3: #6b665d;
|
|
--color-placeholder-text: #6b665d;
|
|
|
|
/* ── Rahmen & Zustände ───────────────────────── */
|
|
--color-secondary: #2a2a2a;
|
|
--color-secondary-dark-1: #333333;
|
|
--color-secondary-dark-2: #3d3d3d;
|
|
--color-secondary-dark-3: #474747;
|
|
--color-secondary-dark-4: #525252;
|
|
--color-secondary-light-1: #232323;
|
|
--color-secondary-light-2: #1c1c1c;
|
|
--color-secondary-light-3: #161616;
|
|
--color-secondary-light-4: #111111;
|
|
--color-secondary-alpha-40: #2a2a2a66;
|
|
--color-secondary-alpha-50: #2a2a2a80;
|
|
--color-secondary-alpha-60: #2a2a2a99;
|
|
--color-secondary-alpha-70: #2a2a2ab3;
|
|
--color-secondary-alpha-80: #2a2a2acc;
|
|
--color-secondary-alpha-90: #2a2a2ae6;
|
|
--color-secondary-button: #dcc2751a;
|
|
--color-secondary-hover: #dcc27526;
|
|
--color-secondary-active: #dcc27533;
|
|
|
|
--color-light: #dcc2750d;
|
|
--color-light-border: #dcc27526;
|
|
--color-light-mimic-enabled: #dcc2751a;
|
|
--color-hover: #dcc2750f;
|
|
--color-active: #dcc27517;
|
|
--color-input-background: #0f0f0f;
|
|
--color-input-border: #2a2a2a;
|
|
--color-input-border-hover: #dcc27566;
|
|
--color-input-text: #e8e0d0;
|
|
--color-input-toggle-background: #1a1a1a;
|
|
--color-button: #161616;
|
|
--color-caret: #f5c518;
|
|
--color-shadow: #00000080;
|
|
--color-shadow-opaque: #000000;
|
|
--color-overlay-backdrop: #0a0a0acc;
|
|
--color-border: #2a2a2a;
|
|
|
|
/* ── Status ──────────────────────────────────── */
|
|
--color-red: #f23f43;
|
|
--color-orange: #ff4d00;
|
|
--color-yellow: #f5c518;
|
|
--color-olive: #b7c62b;
|
|
--color-green: #00c46a;
|
|
--color-teal: #00b5ad;
|
|
--color-blue: #4183c4;
|
|
--color-violet: #8f6ed5;
|
|
--color-purple: #a333c8;
|
|
--color-pink: #e03997;
|
|
--color-brown: #a5673f;
|
|
--color-grey: #6b665d;
|
|
--color-gold: #f5c518;
|
|
|
|
--color-success: #00c46a;
|
|
--color-info: #4183c4;
|
|
--color-warning: #ff4d00;
|
|
--color-error: #f23f43;
|
|
--color-danger: #f23f43;
|
|
|
|
--color-green-badge: #00c46a1a;
|
|
--color-green-badge-bg: #00c46a26;
|
|
--color-red-badge: #f23f431a;
|
|
--color-red-badge-bg: #f23f4326;
|
|
--color-yellow-badge: #dcc2751a;
|
|
--color-yellow-badge-bg: #dcc27526;
|
|
--color-orange-badge: #ff4d001a;
|
|
--color-orange-badge-bg: #ff4d0026;
|
|
|
|
/* ── Diffs ───────────────────────────────────── */
|
|
--color-diff-added-fg: #00c46a;
|
|
--color-diff-added-row-bg: #00c46a12;
|
|
--color-diff-added-row-border: #00c46a26;
|
|
--color-diff-added-word-bg: #00c46a33;
|
|
--color-diff-added-linenum-bg: #00c46a1a;
|
|
--color-diff-removed-fg: #f23f43;
|
|
--color-diff-removed-row-bg: #f23f4312;
|
|
--color-diff-removed-row-border: #f23f4326;
|
|
--color-diff-removed-word-bg: #f23f4333;
|
|
--color-diff-removed-linenum-bg: #f23f431a;
|
|
--color-diff-inactive: #111111;
|
|
--color-diff-moved-row-bg: #dcc27512;
|
|
--color-diff-moved-row-border: #dcc27526;
|
|
|
|
/* ── Sonstiges ───────────────────────────────── */
|
|
--color-timeline: #2a2a2a;
|
|
--color-editor-line-highlight: #dcc2750d;
|
|
--color-project-column-bg: #111111;
|
|
--color-reaction-bg: #dcc2751a;
|
|
--color-reaction-hover-bg: #dcc27533;
|
|
--color-reaction-active-bg: #dcc27526;
|
|
--color-tooltip-bg: #1a1a1a;
|
|
--color-tooltip-text: #e8e0d0;
|
|
--color-nav-text: #c9c2b4;
|
|
--color-label-text: #e8e0d0;
|
|
--color-label-bg: #dcc2751a;
|
|
--color-label-hover-bg: #dcc27533;
|
|
--color-label-active-bg: #dcc27526;
|
|
}
|
|
|
|
/* ── Feinschliff im D4RKST3R-Stil ─────────────────── */
|
|
|
|
/* Kopfleiste mit Neon-Kante */
|
|
.page-content,
|
|
#navbar {
|
|
border-bottom-color: var(--color-light-border) !important;
|
|
}
|
|
#navbar {
|
|
box-shadow: 0 1px 0 0 var(--color-primary-alpha-20);
|
|
}
|
|
|
|
/* Aktive Navigation darf leuchten — ist ja nur ein Element */
|
|
#navbar .item.active {
|
|
color: var(--d4rk-neon) !important;
|
|
text-shadow: 0 0 12px #f5c51840;
|
|
}
|
|
|
|
/* Primär-Buttons: hier das volle Neon, davon gibt es wenige */
|
|
.ui.primary.button,
|
|
.ui.primary.buttons .button {
|
|
background: var(--d4rk-neon);
|
|
color: #0a0a0a;
|
|
font-weight: 600;
|
|
letter-spacing: .02em;
|
|
}
|
|
.ui.primary.button:hover,
|
|
.ui.primary.buttons .button:hover {
|
|
background: #ffd633;
|
|
color: #0a0a0a;
|
|
box-shadow: 0 0 16px #f5c5184d;
|
|
}
|
|
|
|
/* Links beim Draufzeigen aufleuchten lassen */
|
|
a:hover {
|
|
color: var(--color-primary-hover);
|
|
}
|
|
|
|
/* Repo-Titel in Markenfarbe */
|
|
.repository .header-wrapper .repo-title .name {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Code-Blöcke abheben */
|
|
.markup pre,
|
|
.markup code {
|
|
border: 1px solid var(--color-light-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Weichere Radien wie im Rest der Plattform */
|
|
.ui.segment,
|
|
.ui.attached.segment,
|
|
.ui.card,
|
|
.repository .ui.segment,
|
|
.ui.menu {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Scrollbar passend zum Bot-Webinterface */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: var(--color-body); }
|
|
::-webkit-scrollbar-thumb {
|
|
background: #262626;
|
|
border: 2px solid var(--color-body);
|
|
border-radius: 6px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
|