/* ═══════════════════════════════════════════════════════════ RAPPORT Theme für Gitea 1.26 Material UI + Rapport Farbpalette ═══════════════════════════════════════════════════════════ */ /* ─── Systemfonts (kein Internet nötig) ─────────────────── */ :root { --rapport-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rapport-mono: "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", Consolas, "Liberation Mono", monospace; --rapport-serif: Georgia, "Playfair Display", "Times New Roman", serif; /* Rapport-Farben */ --rapport-bg: #f7f5f2; --rapport-surface: #ffffff; --rapport-surface2: #f0ede8; --rapport-border: #e8e3dc; --rapport-border2: #d8d2ca; --rapport-text: #1a1a18; --rapport-text2: #3a3a34; --rapport-text3: #888880; --rapport-text4: #aaaaaa; --rapport-dark: #1a1a18; --rapport-accent: #b07848; --rapport-accent2: #9a6638; /* Gitea CSS-Variablen überschreiben */ --color-primary: #b07848; --color-primary-dark-1: #9a6638; --color-primary-dark-2: #85552a; --color-primary-dark-3: #70451e; --color-primary-light-1: #bf8a5e; --color-primary-light-2: #cc9d76; --color-primary-light-3: #d8b090; --color-primary-light-4: #e8c9a8; --color-primary-light-5: #f5e8d8; --color-primary-alpha-30: rgba(176,120,72,0.30); --color-primary-alpha-40: rgba(176,120,72,0.40); --color-primary-alpha-60: rgba(176,120,72,0.60); --color-body: #f7f5f2; --color-box-body: #ffffff; --color-nav-bg: #1a1a18; --color-text: #1a1a18; --color-text-dark: #0e0e0c; --color-text-light-1: #3a3a34; --color-text-light-2: #888880; --color-text-light-3: #aaaaaa; --color-secondary: #e8e3dc; --color-secondary-dark-1: #d8d2ca; --color-secondary-dark-2: #c8c1b8; --color-secondary-light-1: #f0ede8; --color-secondary-light-2: #f5f3f0; --color-secondary-light-3: #f8f6f4; --color-input-background: #ffffff; --color-input-border: #d8d2ca; --color-green: #2d6a4f; --color-green-light-2: #e8f5ee; --color-red: #8a1a1a; --color-red-light-2: #fdf0f0; /* Material-Schatten */ --md-shadow-1: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); --md-shadow-2: 0 3px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); --md-shadow-3: 0 8px 24px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08); --border-radius: 8px; --border-radius-sm: 4px; --border-radius-lg: 12px; } /* ─── Basis-Typografie ──────────────────────────────────── */ body, .ui, input, select, textarea, button, a { font-family: var(--rapport-font) !important; -webkit-font-smoothing: antialiased; } code, pre, .code-view, .file-view code, kbd, samp, .markup code { font-family: var(--rapport-mono) !important; font-size: 12.5px !important; } h1, h2, h3 { font-family: var(--rapport-serif) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } body { background: var(--rapport-bg) !important; color: var(--rapport-text) !important; } /* ─── Navbar — dunkel wie Rapport-Sidebar ───────────────── */ #navbar { background: #1a1a18 !important; border-bottom: 1px solid #2d2d28 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; padding: 0 20px !important; } #navbar .item { color: #888880 !important; font-size: 12px !important; letter-spacing: 0.02em !important; transition: color 0.15s !important; border-radius: 6px !important; } #navbar .item:hover { color: #f0ede8 !important; background: rgba(255,255,255,0.07) !important; } #navbar .item.active, #navbar .active.item { color: #f0ede8 !important; background: rgba(255,255,255,0.05) !important; } /* ─── Logo: RAPPORT-Schriftzug ──────────────────────────── */ #navbar-logo { display: flex !important; align-items: center !important; gap: 0 !important; } #navbar-logo img { display: none !important; } #navbar-logo::after { content: "RAPPORT"; font-family: "Archivo Black", "Arial Black", "Impact", sans-serif !important; font-size: 18px !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #f0ede8 !important; line-height: 1 !important; text-transform: uppercase !important; } /* ─── Schwarzen Balken über README entfernen ────────────── */ .ui.top.attached.header, .ui.attached.header, h4.file-header, .file-header { background: var(--rapport-surface) !important; color: var(--rapport-text) !important; border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius) var(--border-radius) 0 0 !important; box-shadow: none !important; } .file-header .muted, .file-header a { color: var(--rapport-text3) !important; } /* ─── Cards & Segmente — Material Elevation ─────────────── */ .ui.segment { background: var(--rapport-surface) !important; border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; box-shadow: var(--md-shadow-1) !important; } /* Segments-Gruppe: nur aussen ein Rahmen, innen Trennlinien */ .ui.segments { border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; box-shadow: var(--md-shadow-1) !important; overflow: hidden !important; } .ui.segments > .segment { border: none !important; border-top: 1px solid var(--rapport-border) !important; border-radius: 0 !important; box-shadow: none !important; background: var(--rapport-surface) !important; } .ui.segments > .segment:first-child { border-top: none !important; } .ui.card, .ui.cards > .card { background: var(--rapport-surface) !important; border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; box-shadow: var(--md-shadow-2) !important; transition: box-shadow 0.2s !important; } .ui.card:hover, .ui.cards > .card:hover { box-shadow: var(--md-shadow-3) !important; } /* ─── Buttons ───────────────────────────────────────────── */ .ui.button, .ui.buttons .button, .btn { font-family: var(--rapport-font) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; border-radius: 20px !important; transition: all 0.15s !important; cursor: pointer !important; } /* Primary = DUNKEL (wie Rapport btn-primary) */ .ui.primary.button, .ui.primary.buttons .button, button[type="submit"].ui.button:not(.basic):not(.secondary):not(.red):not(.green) { background: #1a1a18 !important; color: #f0ede8 !important; border: none !important; box-shadow: var(--md-shadow-1) !important; } .ui.primary.button:hover { background: #2d2d28 !important; box-shadow: var(--md-shadow-2) !important; } /* Basic / Ghost = transparent, umrandet */ .ui.basic.button, .ui.basic.buttons .button { background: transparent !important; border: 1.5px solid var(--rapport-border2) !important; color: var(--rapport-text2) !important; box-shadow: none !important; } .ui.basic.button:hover { border-color: var(--rapport-accent) !important; color: var(--rapport-accent) !important; background: transparent !important; box-shadow: none !important; } /* Aktiv = Gold-Umrandung */ .ui.button.active, .ui.buttons .button.active { background: transparent !important; border: 1.5px solid var(--rapport-accent) !important; color: var(--rapport-accent) !important; box-shadow: none !important; } /* Danger */ .ui.red.button, .ui.negative.button, .ui.danger.button { background: #8a1a1a !important; color: #fff !important; border: none !important; } .ui.red.button:hover { background: #721414 !important; } /* Green */ .ui.green.button, .ui.positive.button { background: #2d6a4f !important; color: #fff !important; border: none !important; } /* btn-octicon (Icon-Buttons) */ .btn-octicon { color: var(--rapport-text3) !important; border-radius: 6px !important; transition: all 0.15s !important; } .btn-octicon:hover { color: var(--rapport-text) !important; background: var(--rapport-surface2) !important; } /* ─── Inputs ────────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select, .ui.input > input { font-family: var(--rapport-font) !important; font-size: 13px !important; border-radius: var(--border-radius) !important; border: 1.5px solid var(--rapport-border2) !important; background: #fff !important; color: var(--rapport-text) !important; transition: border-color 0.15s, box-shadow 0.15s !important; box-shadow: none !important; } input:focus, textarea:focus, select:focus, .ui.input.focus > input, .ui.input > input:focus { border-color: var(--rapport-accent) !important; box-shadow: 0 0 0 3px rgba(176,120,72,0.12) !important; outline: none !important; } /* ─── Links ─────────────────────────────────────────────── */ /* Standard: dunkel */ a { color: var(--rapport-text) !important; transition: color 0.12s !important; } a:hover { color: var(--rapport-accent) !important; } /* Gedimmte Links */ a.muted, .muted { color: var(--rapport-text3) !important; } a.muted:hover { color: var(--rapport-text) !important; } /* Navbar-Links */ #navbar a, #navbar .item { color: #888880 !important; } #navbar a:hover, #navbar .item:hover { color: #f0ede8 !important; } /* Echte Inhalts-Links (Markdown, Kommentare) bleiben gold */ .markup a, .comment-content a, .wiki-content a, .render-content a { color: var(--rapport-accent) !important; } .markup a:hover, .comment-content a:hover { color: var(--rapport-accent2) !important; } /* Dateinamen in der Repo-Liste: schwarz */ .entry-name, .entry-name a { color: var(--rapport-text) !important; font-weight: 500 !important; } .entry-name a:hover { color: var(--rapport-accent) !important; } /* Commit-Nachrichten: dunkel */ .grey.commit-summary, .commit-summary { color: var(--rapport-text2) !important; } /* Labels/Badges in der Liste */ .ui.label.commit-id-short { background: var(--rapport-surface2) !important; color: var(--rapport-text3) !important; border-color: var(--rapport-border) !important; font-family: var(--rapport-mono) !important; border-radius: 4px !important; } /* ─── Tabellen ──────────────────────────────────────────── */ .ui.table { font-family: var(--rapport-font) !important; border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; overflow: hidden !important; box-shadow: var(--md-shadow-1) !important; } .ui.table thead th { background: var(--rapport-bg) !important; color: var(--rapport-text4) !important; font-size: 10px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 600 !important; border-bottom: 1px solid var(--rapport-border) !important; } .ui.table tbody tr:hover td { background: #faf8f5 !important; } .ui.table td { border-bottom: 1px solid var(--rapport-border) !important; color: var(--rapport-text) !important; } /* ─── Labels / Badges ───────────────────────────────────── */ .ui.label { font-family: var(--rapport-font) !important; font-size: 10px !important; letter-spacing: 0.05em !important; font-weight: 600 !important; border-radius: 20px !important; padding: 3px 10px !important; } .ui.green.label { background: #e8f5ee !important; color: #2d6a4f !important; border-color: #a8d8b8 !important; } .ui.red.label { background: #fdf0f0 !important; color: #8a1a1a !important; border-color: #e0b0b0 !important; } .ui.orange.label, .ui.yellow.label { background: #fff3e8 !important; color: #b07848 !important; border-color: #e8c898 !important; } /* ─── Tabs (tabular) ────────────────────────────────────── */ .ui.tabular.menu { border-bottom: 1px solid var(--rapport-border) !important; } .ui.tabular.menu .item { font-size: 12px !important; font-weight: 500 !important; color: var(--rapport-text3) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; transition: all 0.15s !important; } .ui.tabular.menu .active.item { color: var(--rapport-text) !important; border-bottom: 2px solid var(--rapport-accent) !important; background: transparent !important; font-weight: 600 !important; } .ui.tabular.menu .item:hover { color: var(--rapport-text) !important; background: var(--rapport-surface2) !important; } /* ─── Repo-Tabs (Code / Issues / Pulls …) als Pills ──────── */ .ui.secondary.pointing.menu { border-bottom: none !important; gap: 8px !important; flex-wrap: wrap !important; padding: 4px 0 14px 0 !important; } .ui.secondary.pointing.menu .item { border: 1.5px solid var(--rapport-border2) !important; border-radius: 20px !important; background: var(--rapport-surface) !important; color: var(--rapport-text3) !important; font-size: 12px !important; font-weight: 500 !important; padding: 5px 14px !important; margin: 0 !important; transition: all 0.15s !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } .ui.secondary.pointing.menu .item:hover { border-color: var(--rapport-text2) !important; color: var(--rapport-text) !important; background: var(--rapport-surface) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important; } .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .item.active { border-color: var(--rapport-dark) !important; background: var(--rapport-dark) !important; color: #f0ede8 !important; font-weight: 600 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; } /* ─── Meldungen ─────────────────────────────────────────── */ .ui.positive.message, .ui.success.message { background: #e8f5ee !important; border-color: #a8d8b8 !important; color: #2d6a4f !important; border-radius: var(--border-radius) !important; } .ui.negative.message, .ui.error.message { background: #fdf0f0 !important; border-color: #e0b0b0 !important; color: #8a1a1a !important; border-radius: var(--border-radius) !important; } .ui.info.message, .ui.warning.message { background: #fff3e8 !important; border-color: #e8c898 !important; color: #7a5028 !important; border-radius: var(--border-radius) !important; } /* ─── Seitenleiste ──────────────────────────────────────── */ .repository .sidebar { background: var(--rapport-surface2) !important; border-left: 1px solid var(--rapport-border) !important; } /* ─── Code & Diff ───────────────────────────────────────── */ .code-view, .diff-file-box { border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius) !important; } .diff-file-header { background: var(--rapport-surface2) !important; border-bottom: 1px solid var(--rapport-border) !important; font-family: var(--rapport-mono) !important; font-size: 12px !important; } .code-line-num { color: var(--rapport-text4) !important; } /* ─── Footer ────────────────────────────────────────────── */ #footer { background: #1a1a18 !important; border-top: 1px solid #2d2d28 !important; font-size: 11px !important; letter-spacing: 0.04em !important; } #footer, #footer a { color: #555550 !important; } #footer a:hover { color: #888880 !important; } /* ─── Repo-Header (karim/RAPPORT Breadcrumb) ────────────── */ .repo-header { background: var(--rapport-surface) !important; border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; padding: 14px 20px !important; margin-bottom: 12px !important; box-shadow: var(--md-shadow-1) !important; } .repo-header .flex-item-title a { color: var(--rapport-text3) !important; font-weight: 400 !important; } .repo-header .flex-item-title a:last-child { color: var(--rapport-text) !important; font-weight: 600 !important; } .repo-header .flex-item-title a:hover { color: var(--rapport-accent) !important; } /* ─── Dropdown-Menüs ────────────────────────────────────── */ .ui.dropdown .menu { border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; box-shadow: var(--md-shadow-3) !important; background: var(--rapport-surface) !important; } .ui.dropdown .menu .item { font-family: var(--rapport-font) !important; font-size: 13px !important; color: var(--rapport-text) !important; transition: background 0.1s !important; } .ui.dropdown .menu .item:hover { background: var(--rapport-surface2) !important; color: var(--rapport-text) !important; } /* ─── Tippy Popups (Clone, Tooltips) ────────────────────── */ .tippy-box { background: var(--rapport-surface) !important; border: 1px solid var(--rapport-border) !important; border-radius: var(--border-radius-lg) !important; box-shadow: var(--md-shadow-3) !important; color: var(--rapport-text) !important; } .tippy-box .tippy-content { background: var(--rapport-surface) !important; color: var(--rapport-text) !important; padding: 12px !important; } .tippy-box .tippy-arrow { color: var(--rapport-surface) !important; } /* Clone-Panel spezifisch */ .clone-panel-popup { background: var(--rapport-surface) !important; color: var(--rapport-text) !important; } .clone-panel-tab { background: var(--rapport-surface2) !important; border-bottom: 1px solid var(--rapport-border) !important; } .clone-panel-tab .item { color: var(--rapport-text3) !important; font-size: 12px !important; } .clone-panel-tab .item.selected, .clone-panel-tab .item.active { color: var(--rapport-text) !important; border-bottom: 2px solid var(--rapport-accent) !important; font-weight: 600 !important; } .clone-panel-field input { background: var(--rapport-surface) !important; border: 1.5px solid var(--rapport-border2) !important; color: var(--rapport-text) !important; font-family: var(--rapport-mono) !important; font-size: 12px !important; }