karim/OPENBUREAU
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7a5be9250a8ca1ff0f41d2d3ee7d6891d3a4030d
OPENBUREAU/static/flarum.css
T
karim f586da8ba7 flarum.css: stronger overrides for serif body, hero, post structure 
- Force serif on body/post/composer with broader, !important selectors
  to beat Flarum default cascade
- Hero + DiscussionHero: 2px text-colored bottom rule, larger title,
  italic serif subtitle for a present masthead
- Tag pill (e.g. "General") restyled: accent text on paper, sharp
  corners, mono caps, weighted
- Post divider darker; first post gets a top border for symmetry
- Avatar greyscale softened (30% instead of 80%) so identity reads
  without going washed-out

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 20:55:16 +02:00

435 lines
14 KiB
CSS
Raw Blame History

/* OPENBUREAU — Flarum custom styles. Schriften via Custom Header laden. */
: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
Aggressive: force serif everywhere, then re-override mono/display zones
------------------------------------------------------------------------ */
html, body, .App, .App-content, .container, .IndexPage, .DiscussionPage,
.SettingsPage, .UserPage, .NotificationsPage, .Search-results,
p, li, div, span, td, blockquote, .fa, em, strong {
font-family: var(--ob-serif) !important;
}
html, body, .App {
background: var(--ob-bg) !important;
color: var(--ob-text) !important;
font-size: 16.5px !important;
line-height: 1.55 !important;
}
/* Form fields — serif for prose, sans for short controls */
textarea, .Composer textarea, .Composer-body, .Composer-body *,
.TextEditor, .TextEditor textarea, .ComposerBody-textarea,
.RichEditor, .Post-body, .Post-body * {
font-family: var(--ob-serif) !important;
font-size: 1.02rem !important;
line-height: 1.55 !important;
}
input, select, .FormControl, .Search-input {
font-family: var(--ob-sans) !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, .IndexPage .Hero {
background: var(--ob-bg-2) !important;
color: var(--ob-text) !important;
border-bottom: 2px solid var(--ob-text) !important;
text-shadow: none !important;
padding: 2.5rem 1rem !important;
}
.Hero-title {
color: var(--ob-text) !important;
font-size: 2rem !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
}
.Hero-subtitle {
color: var(--ob-muted) !important;
font-style: italic;
font-family: var(--ob-serif) !important;
font-size: 1.1rem !important;
margin-top: 0.4rem !important;
}
/* Discussion page hero (when viewing a thread) — more present */
.DiscussionHero {
background: var(--ob-bg-2) !important;
border-bottom: 2px solid var(--ob-text) !important;
box-shadow: none !important;
padding: 1.8rem 1rem !important;
}
.DiscussionHero-title {
color: var(--ob-text) !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
}
/* Tag badge above title (e.g. "General") — pill but sharper */
.DiscussionHero .TagsLabel,
.DiscussionHero .TagLabel {
display: inline-block;
background: var(--ob-bg) !important;
border: 1px solid var(--ob-border) !important;
color: var(--ob-accent) !important;
text-transform: uppercase;
font-family: var(--ob-sans) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
padding: 0.2rem 0.55rem !important;
border-radius: 0 !important;
margin-bottom: 0.6rem !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 — squared, lightly desaturated, full color on hover */
.Avatar {
border-radius: 0 !important;
filter: grayscale(30%) contrast(0.95);
transition: filter 0.3s ease;
}
.Avatar:hover,
.DiscussionListItem:hover .Avatar,
.Post:hover .Avatar { filter: grayscale(0%) contrast(1); }
/* ------------------------------------------------------------------------
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: 1.5rem 0 !important;
}
.Post:first-child { border-top: 1px solid var(--ob-border) !important; }
.Post-header,
.Post .PostUser,
.Post .username {
font-family: var(--ob-mono) !important;
font-size: 0.85rem !important;
color: var(--ob-muted) !important;
font-weight: 500;
}
.Post .username { color: var(--ob-text) !important; }
.Post .PostMeta time,
.Post .Post-header time {
font-family: var(--ob-mono) !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 View Git Blame Copy Permalink