karim
7d31288de1
Eingebettetes Navbar-Logo (#navbar-logo::after) auf das Wortmarken-SVG von dev.openbureau.ch (/logo/logo.svg) umgestellt und Breite an das neue Seitenverhältnis (1412/231) angepasst. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
798 lines
30 KiB
CSS
798 lines
30 KiB
CSS
/* ═══════════════════════════════════════════════════════════
|
|
OPENBUREAU Theme für Gitea 1.26
|
|
Angeglichen an openbureau.ch (Hugo-Theme + OPENBUREAU CMS)
|
|
|
|
Design-DNA:
|
|
· Warmes Off-White (hsl 35 14% 96%) statt kühlem Grau
|
|
· Terrakotta-Akzent #b54a2c
|
|
· Dunkles Masthead/Footer #191919 mit OPENBUREAU-Wortmarke
|
|
· Newsreader (Serif) für Titel · Inter (Sans) für UI
|
|
· Space Grotesk (Display) für Navigation/Labels · IBM Plex Mono für Code
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
/* ─── Webfonts (wie Website & CMS) ─────────────────────────
|
|
Fallbacks sind Systemfonts, falls offline. */
|
|
@import url('https://fonts.bunny.net/css?family=newsreader:400,400i,500,600,700|inter:400,500,600|space-grotesk:400,500,700|ibm-plex-mono:400,500');
|
|
|
|
:root {
|
|
/* ─ Schriftfamilien ─ */
|
|
--ob-serif: 'Newsreader', Charter, 'Source Serif Pro', Georgia, serif;
|
|
--ob-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
|
--ob-mono: 'IBM Plex Mono', "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
|
|
|
|
/* ─ Farben (HSL-System der Website) ─ */
|
|
--ob-bg: hsl(35 14% 96%);
|
|
--ob-panel: #fffdf9; /* Surface — warmes Weiss */
|
|
--ob-panel-2: hsl(35 14% 93%); /* Surface 2 / Tabellenkopf */
|
|
--ob-line: hsl(35 14% 86%); /* Rahmen */
|
|
--ob-line-2: hsl(35 14% 80%); /* Rahmen Inputs */
|
|
--ob-text: hsl(25 18% 12%);
|
|
--ob-text-2: hsl(25 10% 22%);
|
|
--ob-muted: hsl(25 8% 42%);
|
|
--ob-muted-2: hsl(25 8% 55%);
|
|
|
|
--ob-accent: #b54a2c; /* Terrakotta */
|
|
--ob-accent-soft: #d97a5a;
|
|
--ob-accent-dark: #a23f23;
|
|
--ob-accent-alpha: rgba(181,74,44,0.12);
|
|
|
|
--ob-dark: #191919; /* Masthead / Footer */
|
|
--ob-dark-text: #f0f0f0;
|
|
--ob-dark-muted: #a9a9a9;
|
|
|
|
--ob-ok: #5d7d4b;
|
|
--ob-amber: #b8902f;
|
|
--ob-red: #a23320;
|
|
|
|
--ob-radius: 11px;
|
|
--ob-radius-sm: 8px;
|
|
--ob-radius-lg: 14px;
|
|
--ob-pill: 22px;
|
|
--ob-shadow-1: 0 1px 2px rgba(40,20,10,0.05);
|
|
--ob-shadow-2: 0 4px 14px -10px rgba(40,20,10,0.40);
|
|
--ob-shadow-3: 0 12px 36px -22px rgba(40,20,10,0.55);
|
|
|
|
/* ─── Gitea-CSS-Variablen überschreiben ─── */
|
|
--color-primary: #b54a2c;
|
|
--color-primary-dark-1: #a23f23;
|
|
--color-primary-dark-2: #8f371e;
|
|
--color-primary-dark-3: #7a2f19;
|
|
--color-primary-dark-4: #682818;
|
|
--color-primary-light-1: #c25c3f;
|
|
--color-primary-light-2: #d97a5a;
|
|
--color-primary-light-3: #e29478;
|
|
--color-primary-light-4: #ecb39e;
|
|
--color-primary-light-5: #f6dccf;
|
|
--color-primary-light-6: #fbeee6;
|
|
--color-primary-light-7: #fdf5f0;
|
|
--color-primary-alpha-30: rgba(181,74,44,0.30);
|
|
--color-primary-alpha-40: rgba(181,74,44,0.40);
|
|
--color-primary-alpha-50: rgba(181,74,44,0.50);
|
|
--color-primary-alpha-60: rgba(181,74,44,0.60);
|
|
--color-primary-alpha-70: rgba(181,74,44,0.70);
|
|
--color-primary-alpha-80: rgba(181,74,44,0.80);
|
|
--color-primary-alpha-90: rgba(181,74,44,0.90);
|
|
--color-primary-contrast: #ffffff;
|
|
|
|
--color-body: hsl(35 14% 96%);
|
|
--color-box-body: #fffdf9;
|
|
--color-box-header: #fffdf9;
|
|
--color-nav-bg: #191919;
|
|
--color-nav-hover-bg: rgba(255,255,255,0.08);
|
|
--color-footer: #191919;
|
|
--color-text: hsl(25 18% 12%);
|
|
--color-text-dark: hsl(25 18% 8%);
|
|
--color-text-light: hsl(25 12% 20%);
|
|
--color-text-light-1: hsl(25 10% 32%);
|
|
--color-text-light-2: hsl(25 8% 42%);
|
|
--color-text-light-3: hsl(25 8% 55%);
|
|
--color-secondary: hsl(35 14% 86%);
|
|
--color-secondary-dark-1: hsl(35 14% 80%);
|
|
--color-secondary-dark-2: hsl(35 14% 74%);
|
|
--color-secondary-light-1: hsl(35 14% 93%);
|
|
--color-secondary-light-2: hsl(35 14% 95%);
|
|
--color-input-text: hsl(25 18% 12%);
|
|
--color-input-background: #fffdf9;
|
|
--color-input-border: hsl(35 14% 80%);
|
|
--color-input-border-hover:#d97a5a;
|
|
--color-border: hsl(35 14% 86%);
|
|
--color-light-border: hsl(35 14% 88%);
|
|
--color-hover: hsl(35 14% 93%);
|
|
--color-active: hsl(35 14% 91%);
|
|
--color-menu: #fffdf9;
|
|
--color-card: #fffdf9;
|
|
--color-markup-code-block: hsl(35 14% 93%);
|
|
--color-markup-code-inline:hsl(35 14% 91%);
|
|
--color-green: #5d7d4b;
|
|
--color-green-light: #6f9159;
|
|
--color-red: #a23320;
|
|
--color-orange: #b8902f;
|
|
--color-yellow: #b8902f;
|
|
--color-gold: #b8902f;
|
|
|
|
--border-radius: 11px;
|
|
--border-radius-medium: 11px;
|
|
--border-radius-full: 9999px;
|
|
}
|
|
|
|
/* ─── Basis-Typografie ──────────────────────────────────── */
|
|
body, .ui, input, select, textarea, button, a {
|
|
font-family: var(--ob-sans) !important;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
code, pre, .code-view, .file-view code,
|
|
kbd, samp, .markup code, tt {
|
|
font-family: var(--ob-mono) !important;
|
|
font-size: 12.5px !important;
|
|
}
|
|
|
|
/* App-haft: Titel in Inter (Sans), nicht im Artikel-Serif. Kompakt. */
|
|
h1, h2, h3, h4,
|
|
.ui.header,
|
|
.markup h1, .markup h2, .markup h3, .markup h4 {
|
|
font-family: var(--ob-sans) !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.015em !important;
|
|
color: var(--ob-text) !important;
|
|
line-height: 1.2 !important;
|
|
margin-top: 0.5em !important;
|
|
margin-bottom: 0.35em !important;
|
|
}
|
|
|
|
h1, .markup h1, .repo-title { font-size: 1.55rem !important; font-weight: 700 !important; letter-spacing: -0.022em !important; }
|
|
h2, .markup h2 { font-size: 1.2rem !important; }
|
|
h3, .ui.header { font-size: 1.02rem !important; }
|
|
h4 { font-size: 0.9rem !important; }
|
|
|
|
/* Chrome-Links ohne Unterstreichung (App-Look) */
|
|
#navbar .item, .ui.menu .item, .entry-name a,
|
|
#footer a, footer a, .repo-header a, .breadcrumb a {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* Serif bleibt nur für echten Fliesstext-Markup (Issues, Wiki) optional —
|
|
hier bewusst nichts erzwingen, damit die App nüchtern bleibt. */
|
|
|
|
body {
|
|
background: var(--ob-bg) !important;
|
|
color: var(--ob-text) !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* ─── Kompaktere Abstände (weniger „aufgeblasen") ───────── */
|
|
.ui.segment { padding: 13px 15px !important; }
|
|
.ui.attached.segment { padding: 11px 15px !important; }
|
|
.ui.attached.header,
|
|
.ui.top.attached.header,
|
|
.file-header { padding: 9px 14px !important; min-height: 0 !important; }
|
|
.ui.header { margin-top: 0.4rem !important; margin-bottom: 0.5rem !important; }
|
|
.ui.menu .item { padding-top: 8px !important; padding-bottom: 8px !important; }
|
|
.ui.table td,
|
|
.ui.table th { padding-top: 8px !important; padding-bottom: 8px !important; }
|
|
.ui.list > .item,
|
|
.ui.divided.list > .item { padding-top: 7px !important; padding-bottom: 7px !important; }
|
|
.repository .header-wrapper,
|
|
.dashboard .feeds .news,
|
|
.flex-list .flex-item { padding-top: 10px !important; padding-bottom: 10px !important; }
|
|
.markup > *:first-child { margin-top: 0 !important; }
|
|
.repository, .page-content { --page-spacing: 12px; }
|
|
|
|
/* ─── Masthead / Navbar — dunkel wie openbureau.ch ──────── */
|
|
#navbar,
|
|
.page-content .ui.secondary.menu#navbar,
|
|
nav#navbar {
|
|
background: var(--ob-dark) !important;
|
|
border-bottom: none !important;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.4) !important;
|
|
padding: 0 20px !important;
|
|
}
|
|
|
|
/* Flache Navigation wie openbureau.ch (.site-nav) — kein Pillen-Hintergrund */
|
|
#navbar .item {
|
|
color: #d4d4d4 !important;
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
letter-spacing: 0.03em !important;
|
|
background: transparent !important;
|
|
transition: color 0.15s, opacity 0.15s !important;
|
|
}
|
|
|
|
#navbar .item:hover {
|
|
color: #ffffff !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
#navbar .item.active,
|
|
#navbar .active.item {
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Icon-/Avatar-Items im Masthead: dezenter Hover-Kreis */
|
|
#navbar .item.tw-p-0:hover,
|
|
#navbar .item > .ui.label { background: transparent !important; }
|
|
|
|
/* ─── Wortmarke: OPENBUREAU-Logo (eingebettet) ──────────── */
|
|
#navbar-logo {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 0 !important;
|
|
padding-right: 10px !important;
|
|
}
|
|
|
|
#navbar-logo img,
|
|
#navbar-logo svg {
|
|
display: none !important;
|
|
}
|
|
|
|
#navbar-logo::after {
|
|
content: "" !important;
|
|
display: block !important;
|
|
width: 135px !important;
|
|
height: 22px !important;
|
|
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNDEyIDIzMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMCw1Ny41NDdsMTkuMTk2LDBsMCwtMTkuMTk2bDk1Ljk4MiwwbDAsMTkuMTk2bDE5LjE5NiwwbDAsMTE1LjE3OWwtMTkuMTk2LDBsMCwxOS4xOTZsLTk1Ljk4MiwwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwtMTE1LjE3OVptOTUuOTgyLDE5LjE5NmwtNTcuNTg5LDBsMCw3Ni43ODZsNTcuNTg5LDBsMCwtNzYuNzg2WiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNMTgyLjQwOSwxNTMuNTI5bDU3LjU4OSwwbDAsLTc2Ljc4NmwtNTcuNTg5LDBsMCw3Ni43ODZabTAsLTk1Ljk4MmwxOS4xOTYsMGwwLC0xOS4xOTZsNTcuNTg5LDBsMCwxOS4xOTZsMTkuMTk2LDBsMCwxMTUuMTc5bC0xOS4xOTYsMGwwLDE5LjE5NmwtNzYuNzg2LDBsMCwzOC4zOTNsLTM4LjM5MywwbDAsLTE5MS45NjRsMzguMzkzLDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik0yODguMDMyLDU3LjU0N2wxOS4xOTYsMGwwLC0xOS4xOTZsOTUuOTgyLDBsMCwxOS4xOTZsMTkuMTk2LDBsMCw3Ni43ODZsLTk1Ljk4MiwwbDAsMTkuMTk2bDk1Ljk4MiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLDE5LjE5NmwtOTUuOTgyLDBsMCwtMTkuMTk2bC0xOS4xOTYsMGwwLC0xMTUuMTc5Wm0zOC4zOTMsMzguMzkzbDU3LjU4OSwwbDAsLTE5LjE5NmwtNTcuNTg5LDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik00NzAuNDQsNTcuNTQ3bDE5LjE5NiwwbDAsLTE5LjE5Nmw1Ny41ODksMGwwLDE5LjE5NmwxOS4xOTYsMGwwLDEzNC4zNzVsLTM4LjM5MywwbDAsLTExNS4xNzlsLTU3LjU4OSwwbDAsMTE1LjE3OWwtMzguMzkzLDBsMCwtMTUzLjU3MWwzOC4zOTMsMGwwLDE5LjE5NloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PHBhdGggZD0iTTYxNC40NTYsMTUzLjUyOWw1Ny41ODksMGwwLC03Ni43ODZsLTU3LjU4OSwwbDAsNzYuNzg2Wm0wLC05NS45ODJsMTkuMTk2LDBsMCwtMTkuMTk2bDU3LjU4OSwwbDAsMTkuMTk2bDE5LjE5NiwwbDAsMTE1LjE3OWwtMTkuMTk2LDBsMCwxOS4xOTZsLTExNS4xNzksMGwwLC0xOTEuOTY0bDM4LjM5MywwbDAsNTcuNTg5WiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNNzk2Ljg2NSwxOTEuOTIybC01Ny41ODksMGwwLC0xOS4xOTZsLTE5LjE5NiwwbDAsLTEzNC4zNzVsMzguMzkzLDBsMCwxMTUuMTc5bDU3LjU4OSwwbDAsLTExNS4xNzlsMzguMzkzLDBsMCwxNTMuNTcxbC0zOC4zOTMsMGwwLC0xOS4xOTZsLTE5LjE5NiwwbDAsMTkuMTk2WiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNOTQwLjg4MSw3Ni43NDRsLTE5LjE5NiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLDk1Ljk4MmwtMzguMzkzLDBsMCwtMTUzLjU3MWwzOC4zOTMsMGwwLDE5LjE5NmwxOS4xOTYsMGwwLC0xOS4xOTZsMzguMzkzLDBsMCwxOS4xOTZsMTkuMTk2LDBsMCwxOS4xOTZsLTE5LjE5NiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLC0xOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik05ODguOTE1LDU3LjU0N2wxOS4xOTYsMGwwLC0xOS4xOTZsOTUuOTgyLDBsMCwxOS4xOTZsMTkuMTk2LDBsMCw3Ni43ODZsLTk1Ljk4MiwwbDAsMTkuMTk2bDk1Ljk4MiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLDE5LjE5NmwtOTUuOTgyLDBsMCwtMTkuMTk2bC0xOS4xOTYsMGwwLC0xMTUuMTc5Wm0zOC4zOTMsMzguMzkzbDU3LjU4OSwwbDAsLTE5LjE5NmwtNTcuNTg5LDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik0xMTUyLjEyNywxNzIuNzI2bC0xOS4xOTYsMGwwLC01Ny41ODlsMTkuMTk2LDBsMCwtMTkuMTk2bDc2Ljc4NiwwbDAsLTE5LjE5NmwtOTUuOTgyLDBsMCwtMTkuMTk2bDE5LjE5NiwwbDAsLTE5LjE5Nmw5NS45ODIsMGwwLDE5LjE5NmwxOS4xOTYsMGwwLDEzNC4zNzVsLTM4LjM5MywwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwxOS4xOTZsLTU3LjU4OSwwbDAsLTE5LjE5NlptMTkuMTk2LC0xOS4xOTZsNTcuNTg5LDBsMCwtMTkuMTk2bC01Ny41ODksMGwwLDE5LjE5NloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PHBhdGggZD0iTTEzNTMuNzMyLDE5MS45MjJsLTU3LjU4OSwwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwtMTM0LjM3NWwzOC4zOTMsMGwwLDExNS4xNzlsNTcuNTg5LDBsMCwtMTE1LjE3OWwzOC4zOTMsMGwwLDE1My41NzFsLTM4LjM5MywwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==") !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: left center !important;
|
|
background-size: contain !important;
|
|
transition: opacity 0.15s !important;
|
|
}
|
|
|
|
#navbar-logo:hover::after {
|
|
opacity: 0.85 !important;
|
|
}
|
|
|
|
/* ─── Box-/README-Header (dunklen Balken entfernen) ─────── */
|
|
.ui.top.attached.header,
|
|
.ui.attached.header,
|
|
h4.file-header,
|
|
.file-header,
|
|
.repo-button-row,
|
|
.ui.attached.segment {
|
|
background: var(--ob-panel) !important;
|
|
color: var(--ob-text) !important;
|
|
border: 1px solid var(--ob-line) !important;
|
|
}
|
|
|
|
.ui.top.attached.header,
|
|
h4.file-header,
|
|
.file-header {
|
|
border-radius: var(--ob-radius) var(--ob-radius) 0 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.file-header .muted,
|
|
.file-header a {
|
|
color: var(--ob-muted) !important;
|
|
}
|
|
|
|
/* ─── Cards, Segmente, Boxen ────────────────────────────── */
|
|
.ui.segment,
|
|
.ui.box,
|
|
.repository .ui.segment {
|
|
background: var(--ob-panel) !important;
|
|
border: 1px solid var(--ob-line-2) !important; /* klare Haarlinie statt Schatten */
|
|
border-radius: var(--ob-radius) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.ui.segments {
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
box-shadow: none !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.ui.segments > .segment {
|
|
border: none !important;
|
|
border-top: 1px solid var(--ob-line) !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
background: var(--ob-panel) !important;
|
|
}
|
|
|
|
.ui.segments > .segment:first-child {
|
|
border-top: none !important;
|
|
}
|
|
|
|
.ui.card,
|
|
.ui.cards > .card {
|
|
background: var(--ob-panel) !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
box-shadow: none !important;
|
|
transition: box-shadow 0.2s, border-color 0.2s !important;
|
|
}
|
|
|
|
.ui.card:hover,
|
|
.ui.cards > .card:hover {
|
|
box-shadow: var(--ob-shadow-2) !important;
|
|
border-color: var(--ob-accent-soft) !important;
|
|
}
|
|
|
|
/* ─── Buttons — Pill-Form wie im CMS ────────────────────── */
|
|
.ui.button,
|
|
.ui.buttons .button,
|
|
.btn {
|
|
font-family: var(--ob-sans) !important;
|
|
font-size: 12.5px !important;
|
|
font-weight: 500 !important;
|
|
letter-spacing: 0.01em !important;
|
|
border-radius: var(--ob-pill) !important;
|
|
transition: all 0.13s !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
/* Standard-Button = Panel + Linie, Hover = Terrakotta-Rand */
|
|
.ui.button:not(.primary):not(.basic):not(.red):not(.green):not(.negative):not(.positive):not(.labeled) {
|
|
background: var(--ob-panel) !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
color: var(--ob-text) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.ui.button:not(.primary):not(.basic):not(.red):not(.green):not(.negative):not(.positive):not(.labeled):hover {
|
|
border-color: var(--ob-accent-soft) !important;
|
|
color: var(--ob-text) !important;
|
|
}
|
|
|
|
/* Primary = Terrakotta-Füllung (wie CMS .primary) */
|
|
.ui.primary.button,
|
|
.ui.primary.buttons .button {
|
|
background: var(--ob-accent) !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid var(--ob-accent) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.ui.primary.button:hover,
|
|
.ui.primary.buttons .button:hover {
|
|
background: var(--ob-accent-dark) !important;
|
|
border-color: var(--ob-accent-dark) !important;
|
|
}
|
|
|
|
/* Basic / Ghost = transparent, umrandet */
|
|
.ui.basic.button,
|
|
.ui.basic.buttons .button {
|
|
background: transparent !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
color: var(--ob-text-2) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.ui.basic.button:hover,
|
|
.ui.basic.buttons .button:hover {
|
|
border-color: var(--ob-accent) !important;
|
|
color: var(--ob-accent) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Danger */
|
|
.ui.red.button, .ui.negative.button, .ui.danger.button {
|
|
background: var(--ob-red) !important;
|
|
color: #fff !important;
|
|
border: 1px solid var(--ob-red) !important;
|
|
}
|
|
.ui.red.button:hover, .ui.negative.button:hover { background: #8a2b1a !important; }
|
|
|
|
/* Erfolg / Grün */
|
|
.ui.green.button, .ui.positive.button {
|
|
background: var(--ob-ok) !important;
|
|
color: #fff !important;
|
|
border: 1px solid var(--ob-ok) !important;
|
|
}
|
|
.ui.green.button:hover, .ui.positive.button:hover { background: #4f6b40 !important; }
|
|
|
|
/* Icon-Buttons */
|
|
.btn-octicon {
|
|
color: var(--ob-muted) !important;
|
|
border-radius: var(--ob-radius-sm) !important;
|
|
transition: all 0.13s !important;
|
|
}
|
|
.btn-octicon:hover {
|
|
color: var(--ob-text) !important;
|
|
background: var(--ob-panel-2) !important;
|
|
}
|
|
|
|
/* ─── Inputs ────────────────────────────────────────────── */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
input[type="number"],
|
|
textarea,
|
|
select,
|
|
.ui.input > input,
|
|
.ui.selection.dropdown {
|
|
font-family: var(--ob-sans) !important;
|
|
font-size: 13px !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
background: var(--ob-panel) !important;
|
|
color: var(--ob-text) !important;
|
|
transition: border-color 0.15s, box-shadow 0.15s !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Such-, Filter- und einzeilige Action-Felder als volle Pille (wie CMS-Suche) */
|
|
input[type="search"],
|
|
.ui.search > input,
|
|
.search input,
|
|
.ui.action.input > input:not(textarea),
|
|
.repository .filter.menu + .ui.input input {
|
|
border-radius: var(--ob-pill) !important;
|
|
}
|
|
|
|
/* Mehrzeiliges bleibt nur leicht gerundet */
|
|
textarea { border-radius: var(--ob-radius) !important; }
|
|
|
|
input:focus, textarea:focus, select:focus,
|
|
.ui.input.focus > input, .ui.input > input:focus,
|
|
.ui.selection.dropdown:focus,
|
|
.ui.selection.active.dropdown {
|
|
border-color: var(--ob-accent-soft) !important;
|
|
box-shadow: 0 0 0 3px var(--ob-accent-alpha) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* ─── Links ─────────────────────────────────────────────── */
|
|
a {
|
|
color: var(--ob-text) !important;
|
|
transition: color 0.12s !important;
|
|
}
|
|
a:hover {
|
|
color: var(--ob-accent) !important;
|
|
}
|
|
|
|
a.muted, .muted {
|
|
color: var(--ob-muted) !important;
|
|
}
|
|
a.muted:hover {
|
|
color: var(--ob-text) !important;
|
|
}
|
|
|
|
/* Masthead-Links bleiben hell */
|
|
#navbar a, #navbar .item {
|
|
color: var(--ob-dark-muted) !important;
|
|
}
|
|
#navbar a:hover, #navbar .item:hover {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Inhalts-Links (Markdown, Kommentare, Wiki) = Terrakotta */
|
|
.markup a, .comment-content a, .wiki-content a, .render-content a,
|
|
.markup a:visited {
|
|
color: var(--ob-accent) !important;
|
|
}
|
|
.markup a:hover, .comment-content a:hover {
|
|
color: var(--ob-accent-dark) !important;
|
|
}
|
|
|
|
/* Datei-/Repo-Listen */
|
|
.entry-name, .entry-name a {
|
|
color: var(--ob-text) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
.entry-name a:hover {
|
|
color: var(--ob-accent) !important;
|
|
}
|
|
|
|
.repo-list .repo-list-link, .flex-item-title a {
|
|
color: var(--ob-text) !important;
|
|
}
|
|
|
|
.grey.commit-summary, .commit-summary {
|
|
color: var(--ob-text-2) !important;
|
|
}
|
|
|
|
.ui.label.commit-id-short,
|
|
.commit-id-short {
|
|
background: var(--ob-panel-2) !important;
|
|
color: var(--ob-muted) !important;
|
|
border-color: var(--ob-line) !important;
|
|
font-family: var(--ob-mono) !important;
|
|
border-radius: var(--ob-radius-sm) !important;
|
|
}
|
|
|
|
/* ─── Tabellen ──────────────────────────────────────────── */
|
|
.ui.table {
|
|
font-family: var(--ob-sans) !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
overflow: hidden !important;
|
|
box-shadow: none !important;
|
|
background: var(--ob-panel) !important;
|
|
}
|
|
|
|
.ui.table thead th {
|
|
background: var(--ob-panel-2) !important;
|
|
color: var(--ob-muted) !important;
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 10.5px !important;
|
|
letter-spacing: 0.08em !important;
|
|
text-transform: uppercase !important;
|
|
font-weight: 600 !important;
|
|
text-align: left !important;
|
|
border-bottom: 1px solid var(--ob-line) !important;
|
|
}
|
|
|
|
.ui.table tbody tr:hover td,
|
|
.ui.table tr:hover {
|
|
background: hsl(35 14% 94%) !important;
|
|
}
|
|
|
|
.ui.table td {
|
|
border-bottom: 1px solid var(--ob-line) !important;
|
|
color: var(--ob-text) !important;
|
|
}
|
|
|
|
/* ─── Labels / Badges ───────────────────────────────────── */
|
|
.ui.label {
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 10.5px !important;
|
|
letter-spacing: 0.04em !important;
|
|
font-weight: 500 !important;
|
|
border-radius: var(--ob-pill) !important;
|
|
padding: 3px 10px !important;
|
|
}
|
|
|
|
.ui.green.label,
|
|
.ui.positive.label { background: color-mix(in oklab, var(--ob-ok) 16%, transparent) !important; color: var(--ob-ok) !important; border-color: color-mix(in oklab, var(--ob-ok) 35%, transparent) !important; }
|
|
.ui.red.label,
|
|
.ui.negative.label { background: color-mix(in oklab, var(--ob-red) 12%, transparent) !important; color: var(--ob-red) !important; border-color: color-mix(in oklab, var(--ob-red) 35%, transparent) !important; }
|
|
.ui.orange.label,
|
|
.ui.yellow.label { background: color-mix(in oklab, var(--ob-amber) 16%, transparent) !important; color: var(--ob-amber) !important; border-color: color-mix(in oklab, var(--ob-amber) 35%, transparent) !important; }
|
|
.ui.label:not(.green):not(.red):not(.orange):not(.yellow):not(.positive):not(.negative) {
|
|
background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
|
|
color: var(--ob-text) !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
/* ─── Tabs (tabular) — Akzent-Unterstrich ───────────────── */
|
|
.ui.tabular.menu {
|
|
border-bottom: 1px solid var(--ob-line) !important;
|
|
}
|
|
|
|
.ui.tabular.menu .item {
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 12.5px !important;
|
|
font-weight: 500 !important;
|
|
color: var(--ob-muted) !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(--ob-text) !important;
|
|
border-bottom: 2px solid var(--ob-accent) !important;
|
|
background: transparent !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.ui.tabular.menu .item:hover {
|
|
color: var(--ob-text) !important;
|
|
background: var(--ob-panel-2) !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: 1px solid var(--ob-line-2) !important;
|
|
border-radius: var(--ob-pill) !important;
|
|
background: var(--ob-panel) !important;
|
|
color: var(--ob-muted) !important;
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 12px !important;
|
|
font-weight: 500 !important;
|
|
padding: 5px 14px !important;
|
|
margin: 0 !important;
|
|
transition: all 0.15s !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.ui.secondary.pointing.menu .item:hover {
|
|
border-color: var(--ob-accent-soft) !important;
|
|
color: var(--ob-text) !important;
|
|
background: var(--ob-panel) !important;
|
|
}
|
|
|
|
.ui.secondary.pointing.menu .active.item,
|
|
.ui.secondary.pointing.menu .item.active {
|
|
border-color: var(--ob-dark) !important;
|
|
background: var(--ob-dark) !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.ui.secondary.pointing.menu .active.item .label,
|
|
.ui.secondary.pointing.menu .active.item .ui.label {
|
|
background: rgba(255,255,255,0.18) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* ─── Meldungen ─────────────────────────────────────────── */
|
|
.ui.positive.message, .ui.success.message {
|
|
background: color-mix(in oklab, var(--ob-ok) 12%, var(--ob-bg)) !important;
|
|
border: 1px solid color-mix(in oklab, var(--ob-ok) 35%, transparent) !important;
|
|
color: var(--ob-ok) !important; border-radius: var(--ob-radius-sm) !important;
|
|
}
|
|
.ui.negative.message, .ui.error.message {
|
|
background: color-mix(in oklab, var(--ob-red) 9%, var(--ob-bg)) !important;
|
|
border: 1px solid color-mix(in oklab, var(--ob-red) 32%, transparent) !important;
|
|
color: var(--ob-red) !important; border-radius: var(--ob-radius-sm) !important;
|
|
}
|
|
.ui.info.message, .ui.warning.message {
|
|
background: color-mix(in oklab, var(--ob-amber) 12%, var(--ob-bg)) !important;
|
|
border: 1px solid color-mix(in oklab, var(--ob-amber) 32%, transparent) !important;
|
|
color: #7a5f1f !important; border-radius: var(--ob-radius-sm) !important;
|
|
}
|
|
|
|
/* ─── Seitenleiste ──────────────────────────────────────── */
|
|
.repository .sidebar,
|
|
.ui.segment.sidebar {
|
|
background: var(--ob-panel-2) !important;
|
|
border-color: var(--ob-line) !important;
|
|
}
|
|
|
|
/* Aktives Listenelement in VERTIKALEN Menüs/Sidebars: Terrakotta-Schiene (wie CMS).
|
|
Bewusst NICHT für horizontale Menüs (Tabs), sonst klebt links ein Balken. */
|
|
.repository .sidebar .active.item,
|
|
.ui.vertical.menu .active.item,
|
|
.repository .selected.list .selected.item {
|
|
box-shadow: inset 3px 0 0 var(--ob-accent) !important;
|
|
}
|
|
|
|
/* ─── Code & Diff ───────────────────────────────────────── */
|
|
.code-view, .diff-file-box, .file-view {
|
|
border: 1px solid var(--ob-line) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
background: var(--ob-panel) !important;
|
|
}
|
|
|
|
.diff-file-header, .code-view-menu {
|
|
background: var(--ob-panel-2) !important;
|
|
border-bottom: 1px solid var(--ob-line) !important;
|
|
font-family: var(--ob-mono) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.code-line-num, .lines-num { color: var(--ob-muted-2) !important; }
|
|
|
|
.add-comment, .markup pre,
|
|
.code-view .lines-code, .file-view .lines-code {
|
|
background: var(--ob-panel) !important;
|
|
}
|
|
|
|
/* ─── Footer — dunkel wie openbureau.ch ─────────────────── */
|
|
#footer, footer, .page-footer, .ui.footer {
|
|
background: var(--ob-dark) !important;
|
|
border-top: none !important;
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 11.5px !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
#footer, #footer a, footer a,
|
|
.page-footer, .page-footer a,
|
|
.page-footer .item { color: var(--ob-dark-muted) !important; }
|
|
#footer a:hover, footer a:hover,
|
|
.page-footer a:hover { color: var(--ob-accent-soft) !important; }
|
|
|
|
/* ─── Repo-Header (Breadcrumb) ──────────────────────────── */
|
|
.repo-header,
|
|
.repository .header-wrapper {
|
|
background: var(--ob-panel) !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
padding: 12px 18px !important;
|
|
margin-bottom: 12px !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.repo-header .flex-item-title a,
|
|
.repo-title a {
|
|
color: var(--ob-muted) !important;
|
|
font-weight: 400 !important;
|
|
}
|
|
.repo-header .flex-item-title a:last-child,
|
|
.repo-title a:last-child {
|
|
color: var(--ob-text) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
.repo-header .flex-item-title a:hover {
|
|
color: var(--ob-accent) !important;
|
|
}
|
|
|
|
/* ─── Dropdown-Menüs ────────────────────────────────────── */
|
|
.ui.dropdown .menu {
|
|
border: 1px solid var(--ob-line) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
box-shadow: var(--ob-shadow-3) !important;
|
|
background: var(--ob-panel) !important;
|
|
}
|
|
|
|
.ui.dropdown .menu .item {
|
|
font-family: var(--ob-sans) !important;
|
|
font-size: 13px !important;
|
|
color: var(--ob-text) !important;
|
|
transition: background 0.1s !important;
|
|
}
|
|
|
|
.ui.dropdown .menu .item:hover {
|
|
background: var(--ob-panel-2) !important;
|
|
color: var(--ob-text) !important;
|
|
}
|
|
|
|
.ui.dropdown .menu .active.item {
|
|
color: var(--ob-accent) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* ─── Tippy-Popups (Clone, Tooltips) ────────────────────── */
|
|
.tippy-box {
|
|
background: var(--ob-panel) !important;
|
|
border: 1px solid var(--ob-line) !important;
|
|
border-radius: var(--ob-radius) !important;
|
|
box-shadow: var(--ob-shadow-3) !important;
|
|
color: var(--ob-text) !important;
|
|
}
|
|
|
|
.tippy-box .tippy-content {
|
|
background: var(--ob-panel) !important;
|
|
color: var(--ob-text) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
.tippy-box .tippy-arrow { color: var(--ob-panel) !important; }
|
|
|
|
.clone-panel-popup { background: var(--ob-panel) !important; color: var(--ob-text) !important; }
|
|
|
|
.clone-panel-tab {
|
|
background: var(--ob-panel-2) !important;
|
|
border-bottom: 1px solid var(--ob-line) !important;
|
|
}
|
|
|
|
.clone-panel-tab .item {
|
|
color: var(--ob-muted) !important;
|
|
font-family: var(--ob-display) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.clone-panel-tab .item.selected,
|
|
.clone-panel-tab .item.active {
|
|
color: var(--ob-text) !important;
|
|
border-bottom: 2px solid var(--ob-accent) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.clone-panel-field input {
|
|
background: var(--ob-panel) !important;
|
|
border: 1px solid var(--ob-line-2) !important;
|
|
color: var(--ob-text) !important;
|
|
font-family: var(--ob-mono) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* ─── Avatare: runde Kreise statt eckigem Block ─────────── */
|
|
.ui.avatar,
|
|
.ui.avatar.image,
|
|
.ui.avatar img,
|
|
img.avatar,
|
|
a.avatar img,
|
|
.comment .avatar img,
|
|
.timeline-avatar img,
|
|
.flex-item-leading .ui.avatar {
|
|
border-radius: 50% !important;
|
|
overflow: hidden !important;
|
|
background: transparent !important;
|
|
}
|