From 53028151ee985569c085ca59942d3da11688737e Mon Sep 17 00:00:00 2001 From: karim Date: Sat, 23 May 2026 20:36:52 +0200 Subject: [PATCH] add OPENBUREAU custom CSS for Flarum forum MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mirrors the editorial typography and color system of openbureau.ch onto the Flarum instance (openstudio.kgva.ch). Paste into Flarum admin → Appearance → Custom Styles. File is also served at openbureau.ch/flarum.css once the site is deployed, so Flarum can optionally @import the live URL instead. Co-Authored-By: Claude Opus 4.7 --- static/flarum.css | 369 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 369 insertions(+) create mode 100644 static/flarum.css diff --git a/static/flarum.css b/static/flarum.css new file mode 100644 index 0000000..f5d2bb2 --- /dev/null +++ b/static/flarum.css @@ -0,0 +1,369 @@ +/* ======================================================================== + OPENBUREAU — Flarum custom styles + Spiegelt die Typografie und Farben von openbureau.ch ins Forum. + + Wie verwenden: + 1. Flarum-Admin → Appearance → Custom Styles + 2. Diesen ganzen Inhalt einfügen, speichern + 3. ggf. Cache leeren / Browser refresh + + Live-Quelle dieser Datei: openbureau.ch/flarum.css + ======================================================================== */ + +@import url('https://fonts.bunny.net/css?family=newsreader:400,400i,500,500i,600,600i|ibm-plex-mono:400,500|space-grotesk:400,500,700|inter:400,500,600'); + +:root { + --ob-bg: hsl(35, 14%, 96%); + --ob-bg-2: hsl(35, 14%, 93%); + --ob-text: hsl(25, 18%, 10%); + --ob-muted: hsl(25, 8%, 38%); + --ob-border: hsl(35, 14%, 84%); + --ob-accent: #b54a2c; + --ob-accent-2: #d97a5a; + + --ob-serif: 'Newsreader', Charter, 'Source Serif Pro', Georgia, serif; + --ob-sans: 'Inter', system-ui, -apple-system, sans-serif; + --ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; + --ob-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace; + + /* Flarum LESS vars overridden where it accepts CSS custom props */ + --primary-color: var(--ob-accent); + --secondary-color: var(--ob-text); +} + +/* ------------------------------------------------------------------------ + Body — paper background, serif body, editorial + ------------------------------------------------------------------------ */ +html, body, .App { + background: var(--ob-bg) !important; + color: var(--ob-text) !important; + font-family: var(--ob-serif) !important; + font-size: 16.5px !important; + line-height: 1.55 !important; +} + +/* Headlines — display sans */ +h1, h2, h3, h4, h5, +.DiscussionListItem-title, +.DiscussionHero-title, +.DiscussionPage .Hero-title, +.Post-header h3, +.SignUpModal-title, +.LogInModal-title { + font-family: var(--ob-display) !important; + font-weight: 600 !important; + letter-spacing: -0.01em !important; + color: var(--ob-text) !important; +} + +/* Meta lines + mono labels */ +.DiscussionListItem-count, +.PostMeta, +.Post-meta, +.username, +.item-terminalPost, +.item-startTime, +.notifications-pane-header, +.Search-results { + font-family: var(--ob-mono) !important; + font-size: 0.82rem !important; + color: var(--ob-muted) !important; +} + +/* Listings (tags, controls) — Inter */ +.IndexPage-toolbar, +.DiscussionList-content .DiscussionListItem-info, +.TagsLabel, +.tag-name, +.NotificationsList, +.Dropdown-menu, +.Sidebar .item-newDiscussion { + font-family: var(--ob-sans) !important; +} + +/* ------------------------------------------------------------------------ + Header / Hero + ------------------------------------------------------------------------ */ +.App-header { + background: var(--ob-bg) !important; + border-bottom: 1px solid var(--ob-border) !important; + box-shadow: none !important; + color: var(--ob-text) !important; +} +.App-header .Button, +.App-header .item-search input { + color: var(--ob-text) !important; + background: transparent !important; +} +.App-header .Header-title, +.App-header .Header-title a { + font-family: var(--ob-display) !important; + font-weight: 700 !important; + font-size: 1.4rem !important; + letter-spacing: -0.01em !important; + color: var(--ob-text) !important; + text-transform: none !important; +} + +.Hero { + background: var(--ob-bg-2) !important; + color: var(--ob-text) !important; + border-bottom: 1px solid var(--ob-border) !important; + text-shadow: none !important; +} +.Hero-title { color: var(--ob-text) !important; } +.Hero-subtitle { color: var(--ob-muted) !important; font-style: italic; font-family: var(--ob-serif) !important; } + +/* ------------------------------------------------------------------------ + Discussion list — editorial entries, no cards + ------------------------------------------------------------------------ */ +.IndexPage-results, +.DiscussionList-content, +.DiscussionList { + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + +.DiscussionListItem { + background: transparent !important; + border-bottom: 1px solid var(--ob-border) !important; + padding: 1rem 0.25rem !important; + margin: 0 !important; +} +.DiscussionListItem:hover { background: var(--ob-bg-2) !important; } + +.DiscussionListItem-title { + font-size: 1.15rem !important; + line-height: 1.25 !important; + margin-bottom: 0.3rem !important; +} +.DiscussionListItem-title a { color: var(--ob-text) !important; } +.DiscussionListItem-title a:hover { color: var(--ob-accent) !important; } + +.DiscussionListItem-info { + color: var(--ob-muted) !important; + font-size: 0.85rem !important; +} + +.DiscussionListItem-count { + background: transparent !important; + border: 1px solid var(--ob-border) !important; + border-radius: 0 !important; + color: var(--ob-muted) !important; + padding: 0.15rem 0.4rem !important; +} + +/* Avatar — soften (greyscale until hover, like the website) */ +.Avatar { + border-radius: 0 !important; + filter: grayscale(80%); + transition: filter 0.3s ease; +} +.DiscussionListItem:hover .Avatar, +.Post:hover .Avatar { filter: grayscale(0%); } + +/* ------------------------------------------------------------------------ + Tags + ------------------------------------------------------------------------ */ +.TagsLabel { + font-family: var(--ob-sans) !important; + font-size: 0.78rem !important; + text-transform: uppercase !important; + letter-spacing: 0.04em !important; +} +.TagsLabel .tag { + background: transparent !important; + color: var(--ob-accent) !important; + border: 1px solid var(--ob-border) !important; + border-radius: 0 !important; + padding: 0.1rem 0.45rem !important; + font-weight: 500 !important; +} +.TagsLabel .tag:hover { + background: var(--ob-bg-2) !important; + border-color: var(--ob-accent) !important; +} + +.TagTile { + background: var(--ob-bg-2) !important; + border-radius: 0 !important; + border: 1px solid var(--ob-border) !important; + color: var(--ob-text) !important; + box-shadow: none !important; +} +.TagTile-info h4 { color: var(--ob-text) !important; } +.TagTile-description { color: var(--ob-muted) !important; font-style: italic; font-family: var(--ob-serif) !important; } + +/* ------------------------------------------------------------------------ + Buttons + ------------------------------------------------------------------------ */ +.Button { + border-radius: 0 !important; + font-family: var(--ob-display) !important; + font-weight: 500 !important; + letter-spacing: 0.02em !important; + background: transparent !important; + color: var(--ob-text) !important; + border: 1px solid var(--ob-border) !important; + box-shadow: none !important; + text-transform: none !important; +} +.Button:hover { background: var(--ob-bg-2) !important; border-color: var(--ob-text) !important; } + +.Button--primary { + background: var(--ob-accent) !important; + color: #fff !important; + border-color: var(--ob-accent) !important; +} +.Button--primary:hover { + background: var(--ob-accent-2) !important; + border-color: var(--ob-accent-2) !important; + color: #fff !important; +} + +.Button--link { + border: none !important; + background: transparent !important; + color: var(--ob-text) !important; +} + +/* ------------------------------------------------------------------------ + Links + ------------------------------------------------------------------------ */ +a { + color: var(--ob-text); + border-bottom: 1px solid var(--ob-border); + text-decoration: none !important; +} +a:hover { color: var(--ob-accent); border-bottom-color: var(--ob-accent); } + +/* Strip border-bottom in places where it'd be noisy */ +.App-header a, +.Sidebar a, +.Dropdown a, +.Button, +.TagsLabel a, +.Avatar, +.Search-results a, +.DiscussionListItem-title a, +.PostUser a, +.username, +.notifications a { border-bottom: none !important; } + +/* ------------------------------------------------------------------------ + Discussion / Post view + ------------------------------------------------------------------------ */ +.DiscussionPage-discussion { + background: transparent !important; +} +.DiscussionHero { + background: var(--ob-bg-2) !important; + border-bottom: 1px solid var(--ob-border) !important; + box-shadow: none !important; +} +.DiscussionHero-title { color: var(--ob-text) !important; font-size: 1.6rem !important; } + +.PostStream { background: transparent !important; } + +.Post { + border-bottom: 1px solid var(--ob-border) !important; + padding: 1rem 0 !important; +} +.Post-header { font-family: var(--ob-mono) !important; font-size: 0.85rem !important; color: var(--ob-muted) !important; } +.Post-body { + font-family: var(--ob-serif) !important; + font-size: 1.02rem !important; + line-height: 1.55 !important; + color: var(--ob-text) !important; +} +.Post-body p { margin: 0.6em 0 !important; } +.Post-body blockquote { + border-left: 2px solid var(--ob-accent) !important; + padding-left: 1rem !important; + margin: 0.8rem 0 !important; + font-style: italic; + color: var(--ob-muted) !important; +} +.Post-body code, .Post-body pre { + font-family: var(--ob-mono) !important; + background: var(--ob-bg-2) !important; + border: 1px solid var(--ob-border) !important; + border-radius: 0 !important; +} + +/* ------------------------------------------------------------------------ + Sidebar (left rail with categories/tags) + ------------------------------------------------------------------------ */ +.Sidebar { + background: transparent !important; +} +.Sidebar .item-nav .Dropdown-toggle, +.Sidebar .item-nav a { + font-family: var(--ob-sans) !important; + color: var(--ob-text) !important; + background: transparent !important; + border-radius: 0 !important; + border-left: 2px solid transparent !important; +} +.Sidebar .item-nav .active a, +.Sidebar .item-nav a:hover { + background: var(--ob-bg-2) !important; + border-left-color: var(--ob-accent) !important; +} + +/* ------------------------------------------------------------------------ + Composer (reply / new discussion) + ------------------------------------------------------------------------ */ +.Composer { + background: var(--ob-bg) !important; + border-top: 1px solid var(--ob-border) !important; + box-shadow: 0 -2px 12px rgba(0,0,0,0.04) !important; +} +.Composer-header, .Composer-body, .Composer textarea { + background: var(--ob-bg) !important; + color: var(--ob-text) !important; + font-family: var(--ob-serif) !important; +} + +/* ------------------------------------------------------------------------ + Modals (sign up, log in) + ------------------------------------------------------------------------ */ +.Modal-content { + background: var(--ob-bg) !important; + border-radius: 0 !important; + border: 1px solid var(--ob-border) !important; + box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important; +} +.Modal-header { border-bottom: 1px solid var(--ob-border) !important; } +.Modal input.FormControl, .FormControl { + background: var(--ob-bg-2) !important; + border: 1px solid var(--ob-border) !important; + border-radius: 0 !important; + color: var(--ob-text) !important; + font-family: var(--ob-sans) !important; +} +.Modal input.FormControl:focus, .FormControl:focus { + border-color: var(--ob-accent) !important; + box-shadow: 0 0 0 2px rgba(181, 74, 44, 0.15) !important; +} + +/* ------------------------------------------------------------------------ + Dropdown menus + ------------------------------------------------------------------------ */ +.Dropdown-menu { + background: var(--ob-bg) !important; + border: 1px solid var(--ob-border) !important; + border-radius: 0 !important; + box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; +} + +/* ------------------------------------------------------------------------ + Misc polish + ------------------------------------------------------------------------ */ +.Alert { border-radius: 0 !important; } +.Badge { border-radius: 0 !important; font-family: var(--ob-mono) !important; } +.Pagination-link { border-radius: 0 !important; font-family: var(--ob-mono) !important; } + +/* Remove dark/colored header bar in default Flarum */ +.App-header-primary { background: var(--ob-bg) !important; }