diff --git a/theme-openbureau.css b/theme-openbureau.css new file mode 100644 index 0000000..d6b11ec --- /dev/null +++ b/theme-openbureau.css @@ -0,0 +1,788 @@ +/* ═══════════════════════════════════════════════════════════ + 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: 150px !important; + height: 22px !important; + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgd2lkdGg9IjEwMCUiCiAgIGhlaWdodD0iMTAwJSIKICAgdmlld0JveD0iMCAwIDE3NzIgMjg0IgogICB2ZXJzaW9uPSIxLjEiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiCiAgIGlkPSJzdmcxIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcwogICAgIGlkPSJkZWZzMSIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDM1OC4zMzMzMzMsMCwwLDM1OC4zMzMzMzMsMTc3MC44NTQxMTUsMjY0LjEyMjAxMykiCiAgICAgaWQ9ImcxIiAvPjxnCiAgICAgaWQ9InRleHQxIgogICAgIHN0eWxlPSJmb250LXNpemU6MzU4LjMzM3B4O2ZvbnQtZmFtaWx5OlBQUmlnaHRTZXJpZk1vbm8tRGFyaywgJ1BQIFJpZ2h0IFNlcmlmIE1vbm8nO2ZpbGw6I2YwZjBmMCIKICAgICBhcmlhLWxhYmVsPSJPUEVOQlVSRUFVIj48cGF0aAogICAgICAgZD0ibSA4OC4yODI1OTgsMjY4LjQ5NjE5IGMgNTMuNTM5OTkyLDAgODAuMzA5OTgyLC0zMC43OTQyNCA4MC4zMDk5ODIsLTkzLjI1NzU2IHYgLTY3LjE4NzQ0IGMgMCwtNjIuNDYzMzI1IC0yNi43Njk5OSwtOTMuMjU3NTY4IC04MC4zMDk5ODIsLTkzLjI1NzU2OCAtNTMuNTM5OTkxLDAgLTgwLjMwOTk4NjEsMzAuNzk0MjQzIC04MC4zMDk5ODYxLDkzLjI1NzU2OCB2IDY3LjE4NzQ0IGMgMCw2Mi40NjMzMiAyNi43Njk5OTUxLDkzLjI1NzU2IDgwLjMwOTk4NjEsOTMuMjU3NTYgeiBtIDAsLTE4LjU0NjUzIGMgLTE5LjA3MTQzNSwwIC0yNy40Njk4NjUsLTEzLjk5NzM4IC0yNy40Njk4NjUsLTQ3LjI0MTE3IFYgODIuMzMwOTk2IGMgMCwtMzQuNjQzNTIzIDguMzk4NDMsLTQ4Ljk5MDg0MSAyNy40Njk4NjUsLTQ4Ljk5MDg0MSAxOS4yNDY0MDIsMCAyNy40Njk4NjIsMTQuMzQ3MzE4IDI3LjQ2OTg2Miw0OC45OTA4NDEgViAyMDIuNzA4NDkgYyAwLDMzLjI0Mzc5IC04LjIyMzQ2LDQ3LjI0MTE3IC0yNy40Njk4NjIsNDcuMjQxMTcgeiIKICAgICAgIGlkPSJwYXRoMSIgLz48cGF0aAogICAgICAgZD0ibSAyNzMuOTkwODksMjY0LjEyMjAxIHYgLTE1LjkyMjAyIGMgLTIzLjI3MDY1LC0xLjA0OTgxIC0yNS41NDUyMiwtMi43OTk0OCAtMjUuNTQ1MjIsLTE4LjE5NjYgdiAtNTQuNzY0NzYgaCAyNy4xMTk5MyBjIDQ5LjY5MDcxLDAgNzQuNTM2MDcsLTIzLjI3MDY1IDc0LjUzNjA3LC02OS45ODY5MiBWIDg5LjY3OTYyMiBjIDAsLTQ3LjA2NjIwMSAtMjQuODQ1MzYsLTcwLjUxMTgxNyAtNzQuNTM2MDcsLTcwLjUxMTgxNyBoIC05NC4zMDczNyB2IDE1LjkyMjAyMyBjIDEyLjA3Mjc0LDEuMDQ5ODA0IDEzLjY0NzQ1LDMuMTQ5NDExIDEzLjY0NzQ1LDE1LjU3MjA4OSBWIDIzMi42Mjc5IGMgMCwxMi40MjI2NyAtMS41NzQ3MSwxNC41MjIyOCAtMTMuNjQ3NDUsMTUuNTcyMDkgdiAxNS45MjIwMiB6IE0gMjQ4LjQ0NTY3LDM4Ljc2NDE0MSBoIDE5LjA3MTQzIGMgMjEuMzQ2MDEsMCAzMC42MTkyOCwxMi4wNzI3NDMgMzAuNjE5MjgsNDAuOTQyMzQ2IHYgMzUuODY4MjkzIGMgMCwyOC41MTk2NyAtOS4yNzMyNyw0MC40MTc0NCAtMzAuNjE5MjgsNDAuNDE3NDQgaCAtMTkuMDcxNDMgeiBtIDI3My41NDE4OSwyMjUuMzU3ODY5IDEuMDQ5ODEsLTkyLjczMjY2IGggLTE3LjE0NjggYyAtMTAuODQ3OTcsNTkuNjYzODQgLTI0Ljg0NTM1LDc1LjU4NTg2IC01OS42NjM4NCw3NS41ODU4NiBIIDQyNS4yMzA2NSBWIDE0NS40OTQxOSBoIDExLjU0Nzg0IGMgMTYuMDk2OTksMCAyMi4yMjA4NSw5Ljk3MzEzIDI2LjQyMDA2LDQyLjE2NzExIGggMTQuNTIyMjkgViA4OC42Mjk4MTggaCAtMTQuNTIyMjkgYyAtNC4xOTkyMSwzMi4zNjg5NTIgLTEwLjMyMzA3LDQyLjE2NzEyMiAtMjYuNDIwMDYsNDIuMTY3MTIyIEggNDI1LjIzMDY1IFYgMzYuMzE0NTk5IGggMTkuNzcxMzEgYyAzNC40Njg1NSwwIDQ3Ljk0MTAzLDE0LjY5NzI1MiA1OC40MzkwNyw2OC43NjIxNDEgaCAxNy4zMjE3NiBMIDUxOS4zNjMwNSwxOS4xNjc4MDUgSCAzNTcuMTY4MzggdiAxNS43NDcwNTYgYyAxMi43NzI2MSwwLjg3NDgzNiAxNC41MjIyOCwzLjE0OTQxMSAxNC41MjIyOCwxNi4yNzE5NTggViAyMzIuMTAzIGMgMCwxMy4xMjI1NCAtMS43NDk2NywxNS4zOTcxMiAtMTQuNTIyMjgsMTYuMjcxOTUgdiAxNS43NDcwNiB6IG0gNzkuNjc4MTQsMCB2IC0xNS43NDcwNiBjIC0yMy4wOTU2OCwtMTUuOTIyMDIgLTM0LjY0MzUyLC00OC4yOTA5NyAtMzQuNjQzNTIsLTkwLjI4MzEyIHYgLTM0LjgxODQ5IGMgMCwtMTMuNDcyNDggLTEuMDQ5ODEsLTMxLjg0NDA0NSAtMi40NDk1NCwtNDguMTE2MDAzIGwgMy42NzQzMSwtMC41MjQ5MDIgYyAzLjY3NDMxLDE0Ljg3MjIyIDYuODIzNzIsMjUuMzcwMjU1IDEzLjI5NzUxLDQwLjk0MjM0NSBsIDYxLjU4ODQ5LDE0OC41NDcyMyBoIDQ4LjQ2NTk0IFYgOTEuMDc5MzYgYyAwLC0yNC40OTU0MiAyLjI3NDU3LC00Mi4zNDIwODMgMTEuMzcyODcsLTU2LjE2NDQ5OSBWIDE5LjE2NzgwNSBIIDYzOC41ODM4IHYgMTUuNzQ3MDU2IGMgMTkuNzcxMywxMi40MjI2NzcgMzAuNjE5MjgsNDEuNDY3MjQ3IDMwLjYxOTI4LDc2Ljk4NTYwOSB2IDM0LjExODYyIGMgMCwxNC41MjIyOCAxLjA0OTgsMjkuOTE5NDEgMi42MjQ1LDQ5LjM0MDc3IGwgLTMuNjc0MzEsMC41MjQ5MSBjIC00LjE5OTIxLC0xNS41NzIwOSAtNy4zNDg2MiwtMjYuNTk1MDMgLTEyLjk0NzU4LC00MC4wNjc1MSBMIDU5OC4xNjYzNiwxOS4xNjc4MDUgaCAtNjQuOTEyODcgdiAxNS45MjIwMjMgYyA5Ljk3MzE0LDEuMDQ5ODA0IDExLjM3Mjg4LDMuMTQ5NDExIDExLjM3Mjg4LDE0LjM0NzMxOCBWIDE5Mi4yMTA0NSBjIDAsMjQuNDk1NDIgLTIuMjc0NTgsNDIuMzQyMDkgLTExLjM3Mjg4LDU2LjE2NDUgdiAxNS43NDcwNiB6IG0gMjA5Ljg1Mzc3LDAgYyA0My45MTY3OSwwIDY1LjI2MjgsLTE4LjU0NjUzIDY1LjI2MjgsLTU4LjA4OTE0IHYgLTE2LjA5Njk5IGMgMCwtMzIuMDE5MDIgLTEyLjc3MjYxLC00OC4yOTA5NyAtNDguNDY1OTQsLTUyLjQ5MDE5IHYgLTMuNDk5MzQgYyAzMC45NjkyMSwtMy42NzQzMiA0Mi44NjY5OSwtMTguNTQ2NTQgNDIuODY2OTksLTQ3LjQxNjEzOSBWIDcyLjUzMjgyOCBjIDAsLTM2LjU2ODE2NCAtMjAuMTIxMjQsLTUzLjM2NTAyMyAtNjIuMjg4MzYsLTUzLjM2NTAyMyBoIC05OC42ODE1NSB2IDE1LjkyMjAyMyBjIDEwLjMyMzA3LDEuMDQ5ODA0IDExLjcyMjgxLDIuOTc0NDQ0IDExLjcyMjgxLDE0LjUyMjI4NSBWIDIzMy42Nzc3IGMgMCwxMS41NDc4NCAtMS4zOTk3NCwxMy40NzI0OCAtMTEuNzIyODEsMTQuNTIyMjkgdiAxNS45MjIwMiB6IE0gNzc0LjQyNjQxLDM4LjU4OTE3NCBoIDE3Ljg0NjY2IGMgMTkuMjQ2NCwwIDI3LjI5NDksOS42MjMyMDEgMjcuMjk0OSwzMi4xOTM5ODEgdiAyNS4wMjAzMjIgYyAwLDIyLjA0NTg4MyAtOC4yMjM0NywzMS40OTQxMTMgLTI3LjI5NDksMzEuNDk0MTEzIGggLTE3Ljg0NjY2IHogbSAwLDEwNi4wMzAxNzYgaCAxOS4wNzE0MyBjIDE5Ljk0NjI3LDAgMjguNTE5NjcsMTAuNDk4MDQgMjguNTE5NjcsMzUuMTY4NDMgdiAyOC44Njk2IGMgMCwyNS4wMjAzMiAtOC41NzM0LDM1Ljg2ODI5IC0yOC41MTk2NywzNS44NjgyOSBoIC0xOS4wNzE0MyB6IG0gMTk3LjA4MTE2LDEyNC4wNTE4MSBjIDQ4LjQ2NTkzLDAgNzMuNDg2MjMsLTIzLjA5NTY4IDczLjQ4NjIzLC02OC40MTIyMSBWIDkzLjcwMzg3IGMgMCwtMjUuODk1MTU5IDIuNjI0NSwtNDQuMDkxNzU3IDEyLjI0NzcsLTU4LjQzOTA3NSB2IC0xNi4wOTY5OSBoIC02OC4wNjIyNCB2IDE2LjA5Njk5IGMgMjAuODIxMTQsMTIuNDIyNjc4IDMxLjE0NDE0LDQyLjY5MjAxOSAzMS4xNDQxNCw4NC4zMzQyMzUgdiA3OC4yMTAzOCBjIDAsMjcuODE5OCAtMTEuNTQ3OCw0MS45OTIxNSAtMzQuNDY4NTIsNDEuOTkyMTUgLTIyLjkyMDcxLDAgLTM0LjY0MzUyLC0xNC4xNzIzNSAtMzQuNjQzNTIsLTQxLjk5MjE1IFYgNDkuOTYyMDQ4IGMgMCwtMTEuNzIyODA5IDEuNzQ5NjcsLTEzLjgyMjQxNiAxNS4wNDcxOSwtMTQuNjk3MjUzIHYgLTE2LjA5Njk5IGggLTgwLjY1OTkyIHYgMTYuMDk2OTkgYyAxMC42NzMsMC44NzQ4MzcgMTIuMjQ3NzEsMi45NzQ0NDQgMTIuMjQ3NzEsMTQuNjk3MjUzIFYgMjAwLjI1ODk1IGMgMCw0NS4zMTY1MyAyNS4wMjAzMiw2OC40MTIyMSA3My42NjEyMyw2OC40MTIyMSB6IG0gMTY5Ljc4NTIzLC00LjU0OTE1IHYgLTE2LjA5Njk5IGMgLTEwLjY3MywtMS4wNDk4MSAtMTIuMDcyNywtMy4xNDk0MSAtMTIuMDcyNywtMTQuNjk3MjUgdiAtODQuNTA5MiBoIDExLjg5NzggYyAxNS43NDcsMCAyMC42NDYxLDkuMDk4MjkgMjMuNjIwNiwzNy40NDMgbCAyLjk3NDQsMjguMzQ0NyBjIDIuOTc0NSwyOC4zNDQ3IDUuNDI0LDQwLjU5MjQxIDExLjM3MjksNDkuNTE1NzQgSCAxMjM3IGwgMC41MjQ5LC0xNi4wOTY5OSBjIC04LjM5ODUsLTMuODQ5MjggLTEyLjI0NzgsLTEyLjA3Mjc0IC0xNi43OTY5LC0zOS41NDI2MSBsIC00LjM3NDIsLTI2Ljk0NDk2IGMgLTQuMzc0MiwtMjcuMTE5OTMgLTEzLjQ3MjUsLTM2Ljc0MzEzIC00NS40OTE1LC0zOS41NDI2MSB2IC0zLjMyNDM4IGMgNDAuNzY3NCwtNC4wMjQyNCA1NS45ODk2LC0yMi4yMjA4NCA1NS45ODk2LC01My4wMTUwODUgdiAtOS40NDgyMzQgYyAwLC0zNi45MTgwOTggLTI0LjE0NTUsLTU3LjAzOTMzNiAtNzAuNTExOSwtNTcuMDM5MzM2IGggLTkyLjczMjYgdiAxNi4wOTY5OSBjIDEwLjY3MywxLjA0OTgwNCAxMi4yNDc3LDMuMTQ5NDEyIDEyLjI0NzcsMTQuNjk3MjUzIFYgMjMzLjMyNzc3IGMgMCwxMS41NDc4NCAtMS41NzQ3LDEzLjY0NzQ0IC0xMi4yNDc3LDE0LjY5NzI1IHYgMTYuMDk2OTkgeiBNIDExMjkuMjIwMSwzOS4yODkwNDMgaCAxNy4zMjE4IGMgMTguODk2NCwwIDI3LjI5NDksOC43NDgzNjQgMjcuMjk0OSwzMi4wMTkwMTQgViA5Ny41NTMxNSBjIDAsMjMuNDQ1NjIgLTguMzk4NSwzMi4xOTM5OCAtMjcuMjk0OSwzMi4xOTM5OCBoIC0xNy4zMjE4IHogbSAyNzUuODE2NCwyMjQuODMyOTY3IDEuMDQ5OCwtOTIuNzMyNjYgaCAtMTcuMTQ2NyBjIC0xMC44NDgsNTkuNjYzODQgLTI0Ljg0NTQsNzUuNTg1ODYgLTU5LjY2MzksNzUuNTg1ODYgaCAtMjAuOTk2MSBWIDE0NS40OTQxOSBoIDExLjU0NzkgYyAxNi4wOTcsMCAyMi4yMjA4LDkuOTczMTMgMjYuNDIsNDIuMTY3MTEgaCAxNC41MjIzIFYgODguNjI5ODE4IGggLTE0LjUyMjMgYyAtNC4xOTkyLDMyLjM2ODk1MiAtMTAuMzIzLDQyLjE2NzEyMiAtMjYuNDIsNDIuMTY3MTIyIGggLTExLjU0NzkgViAzNi4zMTQ1OTkgaCAxOS43NzEzIGMgMzQuNDY4NiwwIDQ3Ljk0MTEsMTQuNjk3MjUyIDU4LjQzOTEsNjguNzYyMTQxIGggMTcuMzIxOCBsIC0xLjM5OTgsLTg1LjkwODkzNSBoIC0xNjIuMTk0NiB2IDE1Ljc0NzA1NiBjIDEyLjc3MjYsMC44NzQ4MzYgMTQuNTIyMiwzLjE0OTQxMSAxNC41MjIyLDE2LjI3MTk1OCBWIDIzMi4xMDMgYyAwLDEzLjEyMjU0IC0xLjc0OTYsMTUuMzk3MTIgLTE0LjUyMjIsMTYuMjcxOTUgdiAxNS43NDcwNiB6IG0gNjguMTMwMywwIHYgLTExLjg5Nzc4IGMgLTE5Ljc3MTMsLTIuNzk5NDcgLTI0LjY3MDQsLTE3LjQ5NjczIC0yMC4yOTYyLC0zNy45Njc5IGwgMi45NzQ0LC0xMi45NDc1OCBoIDU5LjMxNCBsIDYuNjQ4NywzMC43OTQyNSBjIDIuOTc0NSwxNC42OTcyNSAwLDE5LjA3MTQzIC0xNC4xNzIzLDIwLjEyMTIzIHYgMTEuODk3NzggaCA4MC40ODQ5IHYgLTE2LjA5Njk5IGMgLTcuMzQ4NiwtMS41NzQ3MSAtOS4wOTgzLC00LjAyNDI1IC0xMS44OTc4LC0xNS4wNDcxOSBMIDE1MjguOTgxNCwxOS4xNjc4MDUgaCAtNTYuMTY0NSBMIDE0MjguMjAwMiwyMjMuMDA0NyBjIC0zLjY3NDMsMTUuNzQ3MDUgLTYuOTk4NywyMi43NDU3NCAtMTQuMTcyMywyNS4wMjAzMiB2IDE2LjA5Njk5IHogbSAwLjM0OTksLTE1MC42NDY4NCBjIDQuMTk5MywtMjAuMjk2MjAyIDcuNTIzNiwtMzguMTQyODY2IDEwLjMyMzEsLTU1LjQ2NDYyNyBoIDMuODQ5MyBjIDIuNjI0NSwxNy40OTY3MjkgNS41OTg5LDM0LjY0MzUyMyA5LjQ0ODIsNTQuNDE0ODI3IGwgMTQuNTIyMyw3Mi40MzY0NiBoIC01Mi4zMTUyIHogbSAyMDQuNDI5OCwxNTUuMTk1OTkgYyA0OC40NjYsMCA3My40ODYzLC0yMy4wOTU2OCA3My40ODYzLC02OC40MTIyMSBWIDkzLjcwMzg3IGMgMCwtMjUuODk1MTU5IDIuNjI0NSwtNDQuMDkxNzU3IDEyLjI0NzcsLTU4LjQzOTA3NSB2IC0xNi4wOTY5OSBoIC02OC4wNjIzIHYgMTYuMDk2OTkgYyAyMC44MjExLDEyLjQyMjY3OCAzMS4xNDQyLDQyLjY5MjAxOSAzMS4xNDQyLDg0LjMzNDIzNSB2IDc4LjIxMDM4IGMgMCwyNy44MTk4IC0xMS41NDc4LDQxLjk5MjE1IC0zNC40Njg2LDQxLjk5MjE1IC0yMi45MjA3LDAgLTM0LjY0MzUsLTE0LjE3MjM1IC0zNC42NDM1LC00MS45OTIxNSBWIDQ5Ljk2MjA0OCBjIDAsLTExLjcyMjgwOSAxLjc0OTcsLTEzLjgyMjQxNiAxNS4wNDcyLC0xNC42OTcyNTMgdiAtMTYuMDk2OTkgaCAtODAuNjU5OSB2IDE2LjA5Njk5IGMgMTAuNjczLDAuODc0ODM3IDEyLjI0NzcsMi45NzQ0NDQgMTIuMjQ3NywxNC42OTcyNTMgViAyMDAuMjU4OTUgYyAwLDQ1LjMxNjUzIDI1LjAyMDMsNjguNDEyMjEgNzMuNjYxMiw2OC40MTIyMSB6IgogICAgICAgaWQ9InBhdGgyIiAvPjwvZz48L3N2Zz4K") !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 etwas weicher ─────────────────────────────── */ +.ui.avatar.image, .ui.avatar img, img.avatar { + border-radius: var(--ob-radius-sm) !important; +} diff --git a/theme-rapport.css b/theme-rapport.css deleted file mode 100644 index bb0a8a0..0000000 --- a/theme-rapport.css +++ /dev/null @@ -1,607 +0,0 @@ -/* ═══════════════════════════════════════════════════════════ - 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; -}