Toggle search
Toggle menu
3.1K
1
5
7.1K
OHC Network Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Main page/styles.css: Difference between revisions

Template page
More languages
More actions
← Older edit
Robo (talk | contribs)
Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
42 edits
Content deleted Content added
Add knowledge-components showcase grid (Care·ui components-overview style); token-based for dark mode (via update-page on MediaWiki MCP Server)
Bot: careui phase 4 — replace hardcoded teal/ink/lime palette with --ohc-* tokens; status badges now theme-aware (fixes dark mode) - Claude
 
Line 1: Line 1:
/* Main Page — rich landing page styles.
/* OHC Network Wiki -- component styles, careui design system.
Colour comes exclusively from the --ohc-* token layer in
OHC palette (teal #0f8b6c · lime #b8f36f · sage line #d8e1db) on top of
MediaWiki:Common.css; do not introduce literals here. Note the
Citizen skin design tokens. Fonts: Switzer (body), Figtree (display). */
TemplateStyles sanitizer rejects var() in border-radius, font-family,
padding and border-color, so those stay literal.
Reference: [[OHC Network Wiki:Design/careui]] */


/* Search trigger (opens Citizen's native search) */
/* Search trigger (opens Citizen's native search) */
Line 12: Line 15:
margin: 1.2em auto 0;
margin: 1.2em auto 0;
padding: 0.75em 1.2em;
padding: 0.75em 1.2em;
border: 1px solid var(--border-color-base, #d8e1db);
border: 1px solid var(--ohc-border);
border-radius: 999px;
border-radius: 9999px;
background: var(--color-surface-1, #ffffff);
background: var(--ohc-card);
cursor: pointer;
cursor: pointer;
font-family: 'Switzer', 'Figtree', system-ui, sans-serif;
font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 0.95em;
font-size: 0.95em;
color: var(--color-subtle, #54595d);
color: var(--ohc-soft-foreground);
transition: box-shadow 0.2s, border-color 0.2s;
transition: box-shadow 0.2s, border-color 0.2s;
}
}
.ohc-search-trigger:hover {
.ohc-search-trigger:hover {
border-color: #0f8b6c;
border-top-color: var(--ohc-primary);
border-right-color: var(--ohc-primary);
⚫
box-shadow: 0 0 0 3px rgba(15, 139, 108, 0.14);
border-bottom-color: var(--ohc-primary);
border-left-color: var(--ohc-primary);
⚫
box-shadow: 0 0 0 3px var(--ohc-ring);
}
}
.ohc-search-trigger__icon { font-size: 1.1em; }
.ohc-search-trigger__icon { font-size: 1.1em; }
Line 30: Line 36:
padding: 0.1em 0.55em;
padding: 0.1em 0.55em;
border-radius: 6px;
border-radius: 6px;
background: var(--color-surface-2, #eef3f0);
background: var(--ohc-muted-background);
border: 1px solid var(--border-color-base, #d8e1db);
border: 1px solid var(--ohc-border);
font-size: 0.8em;
font-size: 0.8em;
font-family: 'Geist Mono', ui-monospace, monospace;
font-family: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: #0f8b6c;
color: var(--ohc-primary);
}
}


Line 50: Line 56:
gap: 0.4em;
gap: 0.4em;
padding: 0.6em 0.9em;
padding: 0.6em 0.9em;
border-radius: 12px;
border-radius: 10px;
background: var(--color-surface-2, #eef3f0);
background: var(--ohc-muted-background);
border: 1px solid var(--border-color-base, #d8e1db);
border: 1px solid var(--ohc-border);
font-weight: 600;
font-weight: 600;
font-size: 0.88em;
font-size: 0.88em;
Line 59: Line 65:
.ohc-navpill:hover {
.ohc-navpill:hover {
transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(15, 139, 108, 0.16);
box-shadow: 0 4px 12px var(--ohc-shadow-color-strong);
border-color: #0f8b6c;
border-top-color: var(--ohc-primary);
border-right-color: var(--ohc-primary);
border-bottom-color: var(--ohc-primary);
border-left-color: var(--ohc-primary);
}
}
.ohc-navpill a {
.ohc-navpill a {
text-decoration: none !important;
text-decoration: none !important;
color: var(--color-base, #173d34) !important;
color: var(--ohc-foreground) !important;
font-weight: 600;
font-weight: 600;
}
}
Line 71: Line 80:
font-size: 0.8em;
font-size: 0.8em;
font-weight: 700;
font-weight: 700;
color: #0f8b6c;
color: var(--ohc-primary);
}
}


Line 80: Line 89:
grid-auto-columns: 1fr;
grid-auto-columns: 1fr;
gap: 1px;
gap: 1px;
background: var(--border-color-base, #d8e1db);
background: var(--ohc-border);
border-radius: 12px;
border-radius: 10px;
overflow: hidden;
overflow: hidden;
margin: 1em 0;
margin: 1em 0;
Line 90: Line 99:
align-items: center;
align-items: center;
padding: 0.7em 0.5em;
padding: 0.7em 0.5em;
background: var(--color-surface-2, #eef3f0);
background: var(--ohc-muted-background);
}
}
.ohc-statsbar__num {
.ohc-statsbar__num {
font-family: 'Figtree', 'Switzer', sans-serif;
font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1.5em;
font-size: 1.5em;
font-weight: 700;
font-weight: 700;
color: #0f8b6c;
color: var(--ohc-primary);
line-height: 1.2;
line-height: 1.2;
}
}
.ohc-statsbar__label {
.ohc-statsbar__label {
font-size: 0.75em;
font-size: 0.75em;
color: var(--color-subtle, #54595d);
color: var(--ohc-soft-foreground);
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 0.04em;
letter-spacing: 0.04em;
Line 112: Line 121:
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 0.07em;
letter-spacing: 0.07em;
color: var(--color-subtle, #54595d);
color: var(--ohc-soft-foreground);
margin: 1.8em 0 0.5em;
margin: 1.8em 0 0.5em;
padding-bottom: 0.3em;
padding-bottom: 0.3em;
border-bottom: 2px solid #b8f36f;
border-bottom: 2px solid var(--ohc-primary-500);
}
}


Line 131: Line 140:
padding: 1em 1.1em;
padding: 1em 1.1em;
border-radius: 14px;
border-radius: 14px;
background: var(--color-surface-2, #eef3f0);
background: var(--ohc-muted-background);
border: 1px solid var(--border-color-base, #d8e1db);
border: 1px solid var(--ohc-border);
border-top: 3px solid var(--color-progressive, #0f8b6c);
border-top: 3px solid var(--ohc-primary);
transition: box-shadow 0.18s ease, transform 0.18s ease;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
}
.ohc-showcase__card:hover {
.ohc-showcase__card:hover {
transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 139, 108, 0.14);
box-shadow: 0 6px 18px var(--ohc-shadow-color);
}
}
.ohc-showcase__head {
.ohc-showcase__head {
Line 147: Line 156:
}
}
.ohc-showcase__title {
.ohc-showcase__title {
font-family: 'Figtree', 'Switzer', sans-serif;
font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 700;
font-weight: 700;
font-size: 1em;
font-size: 1em;
color: var(--color-base, #173d34);
color: var(--ohc-foreground);
line-height: 1.3;
line-height: 1.3;
}
}
Line 160: Line 169:
flex-shrink: 0;
flex-shrink: 0;
padding: 0.1em 0.55em;
padding: 0.1em 0.55em;
border-radius: 999px;
border-radius: 9999px;
background: rgba(15, 139, 108, 0.12);
background: var(--ohc-primary-bg);
color: var(--color-progressive, #0f8b6c);
color: var(--ohc-primary);
font-size: 0.78em;
font-size: 0.78em;
font-weight: 700;
font-weight: 700;
font-family: 'Geist Mono', ui-monospace, monospace;
font-family: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
}
.ohc-showcase__desc {
.ohc-showcase__desc {
font-size: 0.85em;
font-size: 0.85em;
color: var(--color-subtle, #54595d);
color: var(--ohc-soft-foreground);
line-height: 1.45;
line-height: 1.45;
}
}
Line 176: Line 185:
font-size: 0.8em;
font-size: 0.8em;
font-weight: 600;
font-weight: 600;
color: var(--color-progressive, #0f8b6c);
color: var(--ohc-primary);
}
}
.ohc-showcase__go a {
.ohc-showcase__go a {
Line 182: Line 191:
text-decoration: none;
text-decoration: none;
}
}
.ohc-showcase__card:hover .ohc-showcase__go { color: #0f8b6c; }
.ohc-showcase__card:hover .ohc-showcase__go { color: var(--ohc-primary); }


/* Quick links grid */
/* Quick links grid */
Line 193: Line 202:
.ohc-quicklink {
.ohc-quicklink {
padding: 0.8em 1em;
padding: 0.8em 1em;
border-radius: 12px;
border-radius: 10px;
background: var(--color-surface-2, #eef3f0);
background: var(--ohc-muted-background);
border: 1px solid var(--border-color-base, #d8e1db);
border: 1px solid var(--ohc-border);
border-left: 3px solid #0f8b6c;
border-left: 3px solid var(--ohc-primary);
transition: box-shadow 0.18s ease, transform 0.18s ease;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
}
.ohc-quicklink:hover {
.ohc-quicklink:hover {
box-shadow: 0 6px 18px rgba(15, 139, 108, 0.14);
box-shadow: 0 6px 18px var(--ohc-shadow-color);
transform: translateY(-2px);
transform: translateY(-2px);
}
}
.ohc-quicklink__title { font-family: 'Figtree', 'Switzer', sans-serif; font-weight: 700; font-size: 0.95em; }
.ohc-quicklink__title { font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.95em; }
.ohc-quicklink__desc { font-size: 0.85em; color: var(--color-subtle, #54595d); margin-top: 0.2em; line-height: 1.45; }
.ohc-quicklink__desc { font-size: 0.85em; color: var(--ohc-soft-foreground); margin-top: 0.2em; line-height: 1.45; }


/* Latest/recent section */
/* Latest/recent section */
Retrieved from "https://ohcnwiki.tellmey.fyi/Template:Main_page/styles.css"
This page has been accessed 347 times.