add OPENBUREAU custom CSS for Flarum forum
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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; }
|
||||
Reference in New Issue
Block a user