karim/gitea-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verbesserte Rapport-Theme: DM Mono, Playfair Display, korrekte Buttons

Browse Source
This commit is contained in:
karim
2026-05-09 02:43:37 +02:00
parent e05225d8ee
commit dba3807f06
1 changed files with 288 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme-rapport.css
+282 -91
View File
@@ -1,7 +1,13 @@
/* Rapport Theme für Gitea */ /* ═══════════════════════════════════════════════════════════
RAPPORT Theme für Gitea
Farben & Typografie identisch mit der Rapport App
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Playfair+Display:wght@400;700&display=swap');
/* ─── CSS-Variablen ─────────────────────────────────────── */
:root { :root {
/* Primärfarbe: warmes Amber/Gold wie in Rapport */ /* Primärfarbe: Gold/Amber — nur für Akzente, Links, aktive States */
--color-primary: #b07848; --color-primary: #b07848;
--color-primary-dark-1: #9a6638; --color-primary-dark-1: #9a6638;
--color-primary-dark-2: #85552a; --color-primary-dark-2: #85552a;
@@ -12,13 +18,13 @@
--color-primary-light-2: #cc9d76; --color-primary-light-2: #cc9d76;
--color-primary-light-3: #d8b090; --color-primary-light-3: #d8b090;
--color-primary-light-4: #e4c4ac; --color-primary-light-4: #e4c4ac;
--color-primary-light-5: #f0d8c8; --color-primary-light-5: #f5ede4;
--color-primary-alpha-30: rgba(176,120,72,0.30); --color-primary-alpha-30: rgba(176,120,72,0.30);
--color-primary-alpha-40: rgba(176,120,72,0.40); --color-primary-alpha-40: rgba(176,120,72,0.40);
--color-primary-alpha-60: rgba(176,120,72,0.60); --color-primary-alpha-60: rgba(176,120,72,0.60);
--color-primary-alpha-80: rgba(176,120,72,0.80); --color-primary-alpha-80: rgba(176,120,72,0.80);
/* Hintergründe */ /* Hintergründe — warmes Off-White wie Rapport */
--color-body: #f7f5f2; --color-body: #f7f5f2;
--color-box-body: #ffffff; --color-box-body: #ffffff;
--color-nav-bg: #1a1a18; --color-nav-bg: #1a1a18;
@@ -28,11 +34,11 @@
/* Text */ /* Text */
--color-text: #1a1a18; --color-text: #1a1a18;
--color-text-dark: #0e0e0c; --color-text-dark: #0e0e0c;
--color-text-light-1: #555550; --color-text-light-1: #3a3a34;
--color-text-light-2: #888880; --color-text-light-2: #888880;
--color-text-light-3: #aaaaaa; --color-text-light-3: #aaaaaa;
/* Rahmen */ /* Rahmen — warm, subtil */
--color-secondary: #e8e3dc; --color-secondary: #e8e3dc;
--color-secondary-dark-1: #d8d2ca; --color-secondary-dark-1: #d8d2ca;
--color-secondary-dark-2: #c8c1b8; --color-secondary-dark-2: #c8c1b8;
@@ -47,11 +53,11 @@
--color-secondary-alpha-30: rgba(232,227,220,0.30); --color-secondary-alpha-30: rgba(232,227,220,0.30);
--color-secondary-alpha-60: rgba(232,227,220,0.60); --color-secondary-alpha-60: rgba(232,227,220,0.60);
/* Input / Formular */ /* Formular */
--color-input-background: #ffffff; --color-input-background: #ffffff;
--color-input-border: #d8d2ca; --color-input-border: #d8d2ca;
/* Badges / Status */ /* Status-Farben */
--color-green: #2d6a4f; --color-green: #2d6a4f;
--color-green-dark-1: #245840; --color-green-dark-1: #245840;
--color-green-light-1: #3d8a65; --color-green-light-1: #3d8a65;
@@ -70,102 +76,212 @@
--color-blue-light-2: #e8f0f8; --color-blue-light-2: #e8f0f8;
/* Schatten */ /* Schatten */
--shadow-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-2: 0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06); --shadow-2: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
--shadow-3: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08); --shadow-3: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
/* Radius */
--border-radius: 6px; --border-radius: 6px;
--border-radius-sm: 4px; --border-radius-sm: 4px;
--border-radius-lg: 10px; --border-radius-lg: 10px;
} }
/* ─── Typografie ────────────────────────────────────────── */
body,
.ui,
input, select, textarea, button {
font-family: 'DM Mono', 'Courier New', monospace !important;
font-size: 13px;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 400;
letter-spacing: -0.01em;
}
/* Beschriftungen / Labels uppercase wie in Rapport */
.ui.label,
.ui.header .sub.header,
th, .th,
.text.meta {
font-size: 10px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
font-family: 'DM Mono', monospace !important;
}
/* ─── Navbar ────────────────────────────────────────────── */ /* ─── Navbar ────────────────────────────────────────────── */
.ui.top.attached.header,
.navbar, .navbar,
#navbar { #navbar,
.ui.attached.header {
background: #1a1a18 !important; background: #1a1a18 !important;
border-bottom: 1px solid #2d2d28 !important; border-bottom: 1px solid #2d2d28 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.22) !important;
}
.navbar *,
#navbar * {
font-family: 'DM Mono', monospace !important;
} }
.navbar .item, .navbar .item,
#navbar .item, #navbar .item {
.navbar a, color: #888880 !important;
#navbar a { font-size: 11px !important;
color: #c8c4be !important; letter-spacing: 0.06em !important;
text-transform: uppercase !important;
transition: color 0.15s !important;
} }
.navbar .item:hover, .navbar .item:hover,
#navbar .item:hover, #navbar .item:hover {
.navbar a:hover,
#navbar a:hover {
color: #f0ede8 !important; color: #f0ede8 !important;
background: rgba(255,255,255,0.07) !important; background: rgba(255,255,255,0.06) !important;
} }
/* Gitea-Logo / Sitename in Navbar */ .navbar .item.active,
.navbar .header.item, #navbar .item.active {
#navbar .header.item {
font-family: 'Georgia', serif;
letter-spacing: -0.01em;
color: #f0ede8 !important; color: #f0ede8 !important;
} }
/* ─── Logo / Sitename — identisch mit RAPPORT ───────────── */
.navbar .brand,
#navbar .brand,
.home .hero h1,
.site-name,
a.item.brand {
font-family: 'Archivo Black', 'Krungthep', sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
color: #f0ede8 !important;
text-transform: uppercase !important;
line-height: 1 !important;
}
/* Gitea-Oktokater-Logo neben dem Namen ausblenden, nur Text */
.navbar .brand svg,
#navbar .brand svg,
.navbar .brand img,
#navbar .brand img {
display: none !important;
}
/* ─── Seitenleiste ──────────────────────────────────────── */ /* ─── Seitenleiste ──────────────────────────────────────── */
.ui.attached.sidebar, .repository .sidebar,
.repository.file.list .sidebar, .ui.attached.segment.sidebar {
.sidebar {
background: #f0ede8 !important; background: #f0ede8 !important;
border-right: 1px solid #e0dbd4 !important; border-right: 1px solid #e8e3dc !important;
} }
/* ─── Cards & Segmente ──────────────────────────────────── */ /* ─── Allgemeiner Hintergrund ───────────────────────────── */
body {
background: #f7f5f2 !important;
}
/* ─── Cards / Segmente ──────────────────────────────────── */
.ui.segment, .ui.segment,
.ui.segments, .ui.segments > .segment,
.ui.card, .ui.card,
.ui.cards > .card { .ui.cards > .card,
border-radius: var(--border-radius-lg) !important; .ui.attached.segment {
border: 1px solid #e8e3dc !important; border: 1px solid #e8e3dc !important;
border-radius: var(--border-radius-lg) !important;
box-shadow: var(--shadow-1) !important; box-shadow: var(--shadow-1) !important;
background: #ffffff !important;
} }
/* ─── Buttons ───────────────────────────────────────────── */ /* ─── Buttons — Rapport-Philosophie ────────────────────── */
/* Basis */
.ui.button, .ui.button,
.ui.buttons .button { .ui.buttons .button {
border-radius: var(--border-radius) !important; font-family: 'DM Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.05em !important;
font-weight: 600 !important;
border-radius: 20px !important;
transition: all 0.15s !important; transition: all 0.15s !important;
text-transform: uppercase !important;
} }
/* Primary = DUNKEL (wie btn-primary in Rapport) */
.ui.primary.button, .ui.primary.button,
.ui.primary.buttons .button { .ui.primary.buttons .button,
background: #b07848 !important; .ui.button.primary {
color: #fff !important; background: #1a1a18 !important;
color: #f0ede8 !important;
border: none !important; border: none !important;
box-shadow: none !important;
} }
.ui.primary.button:hover, .ui.primary.button:hover,
.ui.primary.buttons .button:hover { .ui.primary.buttons .button:hover {
background: #9a6638 !important; background: #2d2d28 !important;
color: #ffffff !important;
} }
/* Ghost / Basic = umrandet, transparent — Gold nur beim Hover */
.ui.basic.button, .ui.basic.button,
.ui.basic.buttons .button { .ui.basic.buttons .button,
border: 1.5px solid #e0dbd4 !important; .ui.button.basic {
background: transparent !important;
border: 1.5px solid #d8d2ca !important;
color: #555550 !important; color: #555550 !important;
box-shadow: var(--shadow-1) !important; box-shadow: none !important;
} }
.ui.basic.button:hover { .ui.basic.button:hover,
.ui.basic.buttons .button:hover {
border-color: #b07848 !important; border-color: #b07848 !important;
color: #b07848 !important; color: #b07848 !important;
background: transparent !important;
box-shadow: none !important;
} }
/* ─── Labels / Badges ───────────────────────────────────── */ /* Sekundär */
.ui.label { .ui.secondary.button,
border-radius: 20px !important; .ui.secondary.buttons .button {
font-size: 11px !important; background: transparent !important;
letter-spacing: 0.04em !important; color: #888880 !important;
border: 1.5px solid #e8e3dc !important;
box-shadow: none !important;
}
.ui.secondary.button:hover {
border-color: #b07848 !important;
color: #b07848 !important;
background: transparent !important;
}
/* Danger / Red */
.ui.red.button,
.ui.negative.button {
background: #8a1a1a !important;
color: #fff !important;
border: none !important;
}
.ui.red.button:hover,
.ui.negative.button:hover {
background: #721414 !important;
}
/* Green */
.ui.green.button,
.ui.positive.button {
background: #2d6a4f !important;
color: #fff !important;
border: none !important;
}
/* Aktiver Zustand: Gold-Umrandung */
.ui.button.active,
.ui.buttons .button.active {
border: 1.5px solid #b07848 !important;
color: #b07848 !important;
background: transparent !important;
} }
/* ─── Inputs ────────────────────────────────────────────── */ /* ─── Inputs ────────────────────────────────────────────── */
@@ -173,76 +289,134 @@ input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
input[type="search"], input[type="search"],
input[type="number"],
textarea, textarea,
select,
.ui.input > input, .ui.input > input,
.ui.form input, .ui.form input,
.ui.form textarea, .ui.form textarea,
.ui.form select { .ui.form select {
font-family: 'DM Mono', monospace !important;
font-size: 13px !important;
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
border: 1.5px solid #d8d2ca !important; border: 1.5px solid #d8d2ca !important;
background: #fff !important; background: #ffffff !important;
color: #1a1a18 !important;
transition: border-color 0.15s !important; transition: border-color 0.15s !important;
box-shadow: none !important;
} }
input[type="text"]:focus, input:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus, textarea:focus,
select:focus,
.ui.input > input:focus { .ui.input > input:focus {
border-color: #b07848 !important; border-color: #b07848 !important;
box-shadow: 0 0 0 2px rgba(176,120,72,0.15) !important; box-shadow: 0 0 0 2px rgba(176,120,72,0.12) !important;
outline: none !important;
}
/* ─── Links ─────────────────────────────────────────────── */
a {
color: #b07848 !important;
transition: color 0.12s !important;
}
a:hover {
color: #9a6638 !important;
}
/* Navbar-Links nicht gold */
.navbar a,
#navbar a {
color: #888880 !important;
}
.navbar a:hover,
#navbar a:hover {
color: #f0ede8 !important;
}
/* ─── Tabs / Navigation ─────────────────────────────────── */
.ui.tabular.menu .item {
font-family: 'DM Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #888880 !important;
border-radius: 0 !important;
}
.ui.tabular.menu .active.item {
color: #1a1a18 !important;
border-bottom: 2px solid #b07848 !important;
font-weight: 600 !important;
background: transparent !important;
}
.ui.tabular.menu .item:hover {
color: #1a1a18 !important;
background: #f0ede8 !important;
} }
/* ─── Tabellen ──────────────────────────────────────────── */ /* ─── Tabellen ──────────────────────────────────────────── */
.ui.table { .ui.table {
font-family: 'DM Mono', monospace !important;
border: 1px solid #e8e3dc !important; border: 1px solid #e8e3dc !important;
border-radius: var(--border-radius-lg) !important; border-radius: var(--border-radius-lg) !important;
overflow: hidden !important; overflow: hidden !important;
box-shadow: var(--shadow-1) !important;
} }
.ui.table thead th { .ui.table thead th {
background: #f7f5f2 !important; background: #f7f5f2 !important;
color: #888880 !important; color: #aaaaaa !important;
font-size: 11px !important; font-size: 10px !important;
letter-spacing: 0.08em !important; letter-spacing: 0.1em !important;
text-transform: uppercase !important; text-transform: uppercase !important;
font-weight: 500 !important;
border-bottom: 1px solid #e8e3dc !important; border-bottom: 1px solid #e8e3dc !important;
padding: 10px 16px !important;
} }
.ui.table tbody tr:hover td { .ui.table tbody tr:hover td {
background: #faf8f5 !important; background: #faf8f5 !important;
} }
/* ─── Repository-Header ─────────────────────────────────── */ .ui.table td {
.repository.header { border-bottom: 1px solid #f0ede8 !important;
background: #fff !important; padding: 10px 16px !important;
border-bottom: 1px solid #e8e3dc !important; font-size: 13px !important;
} }
/* ─── Code / Diff ───────────────────────────────────────── */ /* ─── Labels / Badges ───────────────────────────────────── */
.ui.attached.segment.sub.header, .ui.label {
.diff-file-box { border-radius: 20px !important;
border-radius: var(--border-radius) !important; font-size: 10px !important;
border: 1px solid #e8e3dc !important; letter-spacing: 0.06em !important;
} text-transform: uppercase !important;
/* ─── Tabs ──────────────────────────────────────────────── */
.ui.tabular.menu .active.item {
border-color: #e8e3dc !important;
border-bottom-color: #fff !important;
color: #b07848 !important;
font-weight: 600 !important; font-weight: 600 !important;
padding: 3px 10px !important;
font-family: 'DM Mono', monospace !important;
} }
.ui.tabular.menu .item:hover { .ui.primary.label {
color: #b07848 !important; background: #b07848 !important;
color: #fff !important;
border-color: #b07848 !important;
} }
/* ─── Flash-Meldungen ───────────────────────────────────── */ .ui.green.label { background: #e8f5ee !important; color: #2d6a4f !important; border-color: #a8d8b8 !important; }
.ui.positive.message { .ui.red.label { background: #fdf0f0 !important; color: #8a1a1a !important; border-color: #e0b0b0 !important; }
.ui.yellow.label,
.ui.orange.label { background: #fff3e8 !important; color: #b07848 !important; border-color: #e8c898 !important; }
/* ─── Meldungen ─────────────────────────────────────────── */
.ui.positive.message,
.ui.success.message {
background: #e8f5ee !important; background: #e8f5ee !important;
border-color: #a8d8b8 !important; border-color: #a8d8b8 !important;
color: #2d6a4f !important; color: #2d6a4f !important;
border-radius: var(--border-radius) !important;
} }
.ui.negative.message, .ui.negative.message,
@@ -250,31 +424,48 @@ textarea:focus,
background: #fdf0f0 !important; background: #fdf0f0 !important;
border-color: #e0b0b0 !important; border-color: #e0b0b0 !important;
color: #8a1a1a !important; color: #8a1a1a !important;
border-radius: var(--border-radius) !important;
} }
/* ─── Links ─────────────────────────────────────────────── */ .ui.info.message,
a { .ui.warning.message {
color: #b07848; background: #fff3e8 !important;
border-color: #e8c898 !important;
color: #7a5028 !important;
border-radius: var(--border-radius) !important;
} }
a:hover { /* ─── Code ──────────────────────────────────────────────── */
color: #9a6638; code, pre, .code-view {
font-family: 'DM Mono', 'Courier New', monospace !important;
font-size: 12px !important;
background: #f0ede8 !important;
border: 1px solid #e8e3dc !important;
border-radius: var(--border-radius-sm) !important;
} }
/* ─── Commits / Activity ────────────────────────────────── */ /* ─── Diff ──────────────────────────────────────────────── */
.ui.feed .event .label .icon, .diff-file-header {
.timeline-item .badge { background: #f0ede8 !important;
background: #b07848 !important; border: 1px solid #e8e3dc !important;
color: #fff !important; font-family: 'DM Mono', monospace !important;
font-size: 12px !important;
} }
/* ─── Footer ────────────────────────────────────────────── */ /* ─── Footer ────────────────────────────────────────────── */
#footer { #footer {
background: #1a1a18 !important; background: #1a1a18 !important;
border-top: 1px solid #2d2d28 !important; border-top: 1px solid #2d2d28 !important;
color: #555 !important; color: #3a3a34 !important;
font-family: 'DM Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
} }
#footer a { #footer a {
color: #888 !important; color: #555550 !important;
}
#footer a:hover {
color: #888880 !important;
} }