MediaWiki:Citizen.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Bean Wiki theme for the Citizen skin. Published as MediaWiki:Citizen.css by
wiki/theme/deploy.sh -- edit this file, not the wiki page.
Brief (DECISIONS.md 2026-09-30): same family as BeanBooru, Battle Cats energy.
Colours are the booru's own (themes/danbooru2/style.css): blue = navigation,
pink/red = actions, navy page chrome, the cat tile behind everything.
Every colour is a light-dark() pair; Citizen sets color-scheme per theme. */
@font-face {
font-family: "Fredoka";
src: url( /w/extensions/BeanBooruTheme/fredoka-latin.woff2 ) format( "woff2" );
font-weight: 300 700;
font-display: swap;
}
:root {
/* Citizen's two knobs: link/button hue = booru blue, chrome tint = booru navy. */
--color-primary-oklch__h: 256;
--color-neutral-oklch__h: 285;
--bb-nav: light-dark( #006ffa, #009be9 );
--bb-action: light-dark( #d81b45, #ff8fb3 );
--bb-action-strong: light-dark( #c2001d, #e60023 );
--bb-action-fg: #ffffff;
/* Darker than --bb-nav so white button text passes 4.5:1 in both themes (axe, 2026-09-30). */
--bb-btn-nav: light-dark( #0062dd, #006bb8 );
/* Smaller headings: navy/lavender, passes 4.5:1 on each theme. Pink is kept for actions
and the thin bar edges only. */
--bb-heading-accent: light-dark( #3a3f7a, #b9bdf0 );
/* Paw bullets: a quiet navy-lavender, not pink (user, 2026-09-30: "don't use pink too much"). */
--bb-paw: light-dark( #5a5f8a, #a3a6d6 );
--bb-navy: light-dark( #262635, #1c1c28 );
--bb-bar: light-dark( #2e2e40, #37384d );
--bb-bar-fg: #ffffff;
--bb-frame: light-dark( #262635, #44455e );
--bb-panel: light-dark( #f7f7f9, #2e2e40 );
--bb-panel-head: light-dark( #ecedf1, #37384d );
--bb-line: light-dark( #d8d8e0, #44455e );
--bb-muted: light-dark( #60606c, #a0a0b4 );
--bb-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
/* Actions are pink: primary buttons (Save, Publish, Search) take the booru's action colour. */
--background-color-progressive: var( --bb-action-strong );
--background-color-progressive--hover: var( --bb-action );
--background-color-progressive--active: var( --bb-action-strong );
--border-color-progressive: var( --bb-action-strong );
--border-color-progressive--hover: var( --bb-action );
--border-color-progressive--active: var( --bb-action-strong );
}
/* ---- The cat tile behind the page, exactly as on the booru ---- */
html,
body {
background-color: light-dark( #ffffff, #262635 );
background-image: url( /themes/danbooru2/bg.png );
background-repeat: repeat;
}
.skin-theme-clientpref-night,
.skin-theme-clientpref-night body {
background-image: url( /themes/danbooru2/bg-dark.png );
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os,
.skin-theme-clientpref-os body {
background-image: url( /themes/danbooru2/bg-dark.png );
}
}
/* ---- The article sits in a framed panel on top of the tile (Battle Cats' frame) ---- */
.citizen-page-container {
background-color: transparent;
}
.mw-body {
background-color: var( --color-surface-0 );
position: relative; /* anchors the hopping cat */
border: 4px solid var( --bb-frame );
margin-block: 28px 16px; /* room above the frame for the cat */
padding-inline: 20px;
}
@media ( max-width: 640px ) {
.mw-body {
margin-block: 8px;
padding-inline: 12px;
border-width: 3px;
}
}
/* ---- Dark mode uses the booru's navy, not near-black ---- */
:root.skin-theme-clientpref-night {
/* Links: Citizen's dark blue is 3.7:1 on navy; this passes 4.5:1. */
--color-progressive: #7fb2ff;
--color-progressive--hover: #a6c9ff;
/* Links to missing pages: #ff0055 is 3.4:1 on navy panels. */
--color-link-red: #ff8fa6;
--color-link-red--visited: #ff8fa6;
--color-surface-0: #262635;
--color-surface-1: #2e2e40;
--color-surface-2: #34354a;
--color-surface-3: #3b3c52;
--color-surface-4: #44455e;
}
@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--color-progressive: #7fb2ff;
--color-progressive--hover: #a6c9ff;
--color-link-red: #ff8fa6;
--color-link-red--visited: #ff8fa6;
--color-surface-0: #262635;
--color-surface-1: #2e2e40;
--color-surface-2: #34354a;
--color-surface-3: #3b3c52;
--color-surface-4: #44455e;
}
}
/* ---- Navigation rail: solid navy, both themes ---- */
.citizen-header {
background-color: var( --bb-navy );
}
.citizen-header .citizen-ui-icon,
.citizen-header .cdx-button .citizen-ui-icon::before {
filter: invert( 1 );
}
.skin-theme-clientpref-night .citizen-header .citizen-ui-icon,
.skin-theme-clientpref-night .citizen-header .cdx-button .citizen-ui-icon::before {
filter: none;
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .citizen-header .citizen-ui-icon,
.skin-theme-clientpref-os .citizen-header .cdx-button .citizen-ui-icon::before {
filter: none;
}
}
/* The rail's buttons (search, menu, preferences, account) draw inline SVG icons in the text
colour, which the invert rule above does not reach: in light mode they were dark navy on
navy. Same light colour as dark mode gives them, in both themes (about 9:1 on navy).
Found by the 2026-10-01 audit. */
.citizen-header .citizen-dropdown-summary {
color: oklch( 0.8 0.05 262.29 );
}
/* Keyboard focus ring on the rail's own buttons: Citizen's light-mode blue was about 2.6:1
on navy (needs 3:1). Set on the buttons, not the whole rail, so focus inside the
light pop-out menus keeps Citizen's colour. Found by the 2026-10-01 audit. */
.citizen-header .citizen-dropdown-summary,
.citizen-header__logo .mw-logo {
--border-color-progressive--focus: #9fd0ff;
--box-shadow-color-progressive--focus: #9fd0ff;
--outline-color-progressive--focus: #9fd0ff;
}
/* Citizen's CdxButton.less draws the inner focus shadow from --color-progressive, which also
colours the icons, so that one is overridden here instead. One class more specific than it. */
.skin-citizen .citizen-header .citizen-dropdown-summary.cdx-button:not( :active ):not( .cdx-button--is-active ):focus-visible {
box-shadow: inset 0 0 0 1px #9fd0ff;
}
/* ---- Display font: titles, section bars, buttons only; body text stays system ---- */
#firstHeading,
.mw-body-content h2.citizen-section-heading,
.mw-body-content h3.citizen-section-heading,
.mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3,
.bb-btn,
.bb-hero__title,
.bb-infobox__title,
.bb-infobox__bar {
font-family: var( --bb-display );
letter-spacing: 0.01em;
}
#firstHeading {
font-weight: 700;
}
/* ---- Solid coloured section bars (Vocaloid Lyrics Wiki style, booru colours) ----
Citizen 3.23 on MW 1.43 emits h2.citizen-section-heading; .mw-heading2 is the newer
parser markup, kept so the bars survive a MediaWiki upgrade. */
.mw-body-content h2.citizen-section-heading {
background-color: var( --bb-bar );
color: var( --bb-bar-fg );
border: 0;
position: relative; /* anchors its cat ears */
border-left: 6px solid var( --bb-action );
padding: 4px 12px;
margin-top: 2em;
font-size: 1.35rem;
font-weight: 600;
}
.mw-body-content h2.citizen-section-heading .mw-headline,
.mw-body-content h2.citizen-section-heading .mw-editsection a,
.mw-body-content h2.citizen-section-heading .citizen-section-toggle {
color: var( --bb-bar-fg );
}
.mw-body-content h3.citizen-section-heading {
font-weight: 600;
color: var( --bb-heading-accent );
}
.mw-parser-output .mw-heading2 {
background-color: var( --bb-bar );
border-left: 6px solid var( --bb-action );
padding: 4px 12px;
margin-top: 1.4em;
}
.mw-parser-output .mw-heading2 h2 {
color: var( --bb-bar-fg );
font-size: 1.35rem;
font-weight: 600;
margin: 0;
border: 0;
}
.mw-parser-output .mw-heading2 .mw-editsection a,
.mw-parser-output .mw-heading2 .citizen-section-indicator {
color: var( --bb-bar-fg );
opacity: 0.85;
}
.mw-parser-output .mw-heading3 h3 {
font-weight: 600;
color: var( --bb-action-strong );
}
/* ---- Main page: header panel ---- */
.bb-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 16px;
border: 3px solid var( --bb-frame );
background-color: var( --bb-panel );
background-image: url( /themes/danbooru2/bg.png );
background-size: 960px auto;
}
.skin-theme-clientpref-night .bb-hero { background-image: url( /themes/danbooru2/bg-dark.png ); }
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .bb-hero { background-image: url( /themes/danbooru2/bg-dark.png ); }
}
/* TheCoolBeansMan wordmark, the booru's own logo.png, drawn as a background so no upload is needed. */
.bb-hero__logo {
flex: 0 1 320px;
min-width: 200px;
aspect-ratio: 1600 / 672;
max-width: 100%;
background: url( /themes/danbooru2/logo.png ) center / contain no-repeat;
}
.skin-theme-clientpref-night .bb-hero__logo { filter: invert( 1 ); }
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .bb-hero__logo { filter: invert( 1 ); }
}
.bb-hero__text {
position: relative; /* anchors its cat ears */
flex: 1 1 260px;
min-width: 0;
background-color: var( --bb-bar );
color: var( --bb-bar-fg );
border-left: 6px solid var( --bb-action );
padding: 10px 14px;
}
.bb-hero__title {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
}
.bb-hero__text p {
margin: 6px 0 0;
}
.bb-hero__text a {
color: #9fd0ff;
}
.bb-hero__art {
flex: 0 1 180px;
}
@media ( max-width: 640px ) {
.bb-hero__art {
flex: 1 1 100%;
}
}
/* ---- Main page: chunky button grid (Battle Cats) -- blue, because they navigate ---- */
.bb-btn-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
gap: 12px;
margin-block: 16px;
}
.bb-btn-grid a {
text-decoration: none;
}
/* MediaWiki wraps each template line in a paragraph; let the buttons be the grid items. */
.bb-btn-grid > p {
display: contents;
}
.bb-btn-grid br {
display: none;
}
/* No "external link" arrow on buttons that go to the booru. */
.bb-btn-grid a.external {
background-image: none;
padding-right: 0;
}
.bb-btn-grid a.external::after {
content: none;
}
.bb-btn {
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 6px 14px 6px 8px;
background-color: var( --bb-btn-nav );
border: 3px solid var( --bb-navy );
box-shadow: inset 0 -4px 0 rgb( 0 0 0 / 22% );
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.1;
text-shadow: 0 2px 0 rgb( 0 0 0 / 35% );
}
.bb-btn {
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.bb-btn:hover {
filter: brightness( 1.08 );
transform: translateY( -2px );
box-shadow: inset 0 -6px 0 rgb( 0 0 0 / 22% );
}
.bb-btn:active {
transform: translateY( 2px );
box-shadow: inset 0 -1px 0 rgb( 0 0 0 / 22% );
}
.bb-btn--action {
background-color: var( --bb-action-strong );
}
/* .bb-btn__icon and the .bb-icon--<name> pictures live in icons.css, which deploy.sh appends to this page. */
/* ---- Coloured-header panels (booru panel chrome) ---- */
.bb-panel {
display: flow-root; /* never slide under a floated info box */
border: 1px solid var( --bb-line );
background-color: var( --bb-panel );
margin-block: 12px;
}
.bb-panel__head {
background-color: var( --bb-panel-head );
border-left: 4px solid var( --bb-action );
padding: 5px 12px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.bb-panel__body {
padding: 8px 12px;
}
/* ---- Character info box with tabs ---- */
.bb-infobox {
float: right;
clear: right;
width: 300px;
max-width: 100%;
margin: 0 0 12px 16px;
border: 3px solid var( --bb-frame );
background-color: var( --bb-panel );
font-size: 0.9rem;
}
@media ( max-width: 640px ) {
.bb-infobox {
float: none;
width: auto;
margin: 0 0 12px;
}
}
.bb-infobox__title {
position: relative; /* anchors its cat ears */
background-color: var( --bb-navy );
color: #ffffff;
text-align: center;
font-size: 1.3rem;
font-weight: 700;
padding: 4px 8px;
}
.bb-infobox__bar {
background-color: var( --bb-bar );
color: var( --bb-bar-fg );
border-left: 4px solid var( --bb-action );
padding: 2px 8px;
font-weight: 600;
}
.bb-infobox__rows {
display: grid;
grid-template-columns: max-content 1fr;
gap: 3px 10px;
padding: 6px 8px;
}
.bb-infobox__rows > :nth-child( odd ) {
font-weight: 700;
}
.bb-infobox .tabber {
padding: 4px 6px 8px;
}
.bb-infobox img {
max-width: 100%;
height: auto;
}
/* ---- Marked spots waiting for real art ---- */
.bb-art-slot {
display: grid;
place-items: center;
min-height: 180px;
padding: 12px;
border: 2px dashed var( --bb-muted );
background-color: light-dark( #f4f4f8, #2e2e40 );
color: var( --bb-muted );
font-size: 0.8rem;
text-align: center;
}
/* ---- Links inside running text are underlined, so they stand out from the text
around them by more than colour alone (axe link-in-text-block, WCAG 1.4.1). ---- */
.mw-body-content p a,
.mw-body-content li a,
.mw-body-content dd a,
.mw-changeslist a,
.page-info__text a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* ---- Links to missing pages: Citizen colours some of them (user links in lists)
with --color-destructive, which is too dark on navy; use the red-link token. ---- */
a.new,
a.new:visited {
color: var( --color-link-red );
}
/* ---- Cat ears on the bars: two triangles in one element, in the bar's own colour.
Section bars, the welcome box and the info box title all get a pair. ---- */
.mw-body-content h2.citizen-section-heading::after,
.bb-hero__text::before,
.bb-infobox__title::before {
content: "";
position: absolute;
top: -19px;
left: 20px;
width: 76px;
height: 20px;
background-color: inherit;
/* Two wide, slightly rounded-looking ears: each triangle is about a third of the width. */
clip-path: polygon( 0 100%, 6% 30%, 14% 0, 22% 30%, 34% 100%, 66% 100%, 78% 30%, 86% 0, 94% 30%, 100% 100% );
transform-origin: 50% 100%;
pointer-events: none;
}
.mw-body-content h2.citizen-section-heading::after {
background-color: var( --bb-bar );
}
.bb-hero__text::before {
background-color: var( --bb-bar );
}
.bb-infobox__title::before {
background-color: var( --bb-navy );
left: calc( 50% - 38px );
}
.bb-infobox {
margin-top: 20px; /* room for the ears */
}
/* Ear twitch when the pointer is on the bar. */
@keyframes bb-ear-twitch {
0%, 100% { transform: rotate( 0 ); }
30% { transform: rotate( -7deg ) scaleY( 1.15 ); }
60% { transform: rotate( 5deg ); }
}
.mw-body-content h2.citizen-section-heading:hover::after,
.bb-hero__text:hover::before,
.bb-infobox__title:hover::before {
animation: bb-ear-twitch 0.45s ease-in-out;
}
/* ---- Paw-print bullets (the paw from TheCoolBeansMan's logo, used as a stencil) ---- */
.mw-parser-output ul:not( .gallery ) > li {
list-style: none;
position: relative;
}
.mw-parser-output ul:not( .gallery ) > li::before {
content: "";
position: absolute;
left: -1.25em;
top: 0.35em;
width: 0.85em;
height: 0.85em;
background-color: var( --bb-paw );
-webkit-mask: url( /w/extensions/BeanBooruTheme/paw-mask.png ) center / contain no-repeat;
mask: url( /w/extensions/BeanBooruTheme/paw-mask.png ) center / contain no-repeat;
}
/* ---- The hopping cat: the booru tile's cat head trots along the top of the page frame
once when a page loads, then sits peeking over the top-right corner. ---- */
.mw-body::before {
content: "";
position: absolute;
top: -24px;
right: 24px;
width: 34px;
height: 22px;
background-color: var( --bb-frame );
-webkit-mask: url( /w/extensions/BeanBooruTheme/cat-head-mask.png ) center / contain no-repeat;
mask: url( /w/extensions/BeanBooruTheme/cat-head-mask.png ) center / contain no-repeat;
animation: bb-cat-trot 2.6s ease-out 0.3s both;
pointer-events: none;
}
@keyframes bb-cat-trot {
0% { right: calc( 100% - 40px ); transform: translateY( 0 ); }
10% { transform: translateY( -8px ); }
20% { transform: translateY( 0 ); }
30% { transform: translateY( -8px ); }
40% { transform: translateY( 0 ); }
50% { transform: translateY( -8px ); }
60% { transform: translateY( 0 ); }
70% { transform: translateY( -8px ); }
80% { transform: translateY( 0 ); }
100% { right: 24px; transform: translateY( 0 ); }
}
/* ---- "Page not found": the sleeping cat (MediaWiki:Noarticletext) ---- */
.bb-404 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
padding: 18px;
border: 3px solid var( --bb-frame );
background-color: var( --bb-panel );
}
.bb-404__cat {
position: relative;
flex: 0 0 120px;
height: 76px;
background-color: var( --bb-frame );
-webkit-mask: url( /w/extensions/BeanBooruTheme/cat-head-mask.png ) center / contain no-repeat;
mask: url( /w/extensions/BeanBooruTheme/cat-head-mask.png ) center / contain no-repeat;
}
.bb-404__zzz {
flex: 0 0 auto;
align-self: flex-start;
font-family: var( --bb-display );
font-weight: 700;
font-size: 1.4rem;
color: var( --bb-muted );
margin-left: -18px;
animation: bb-zzz 2.4s ease-in-out infinite;
}
@keyframes bb-zzz {
0%, 100% { transform: translateY( 0 ); opacity: 0.5; }
50% { transform: translateY( -6px ); opacity: 1; }
}
.bb-404__text {
flex: 1 1 260px;
min-width: 0;
}
.bb-404__title {
font-family: var( --bb-display );
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 4px;
}
.bb-404 .bb-btn-grid {
grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
margin-block: 10px 0;
}
/* ---- Anyone who asks their device for less motion gets none of it ---- */
@media ( prefers-reduced-motion: reduce ) {
.bb-btn,
.bb-btn:hover,
.bb-btn:active {
transition: none;
transform: none;
}
.mw-body::before,
.bb-404__zzz,
.mw-body-content h2.citizen-section-heading:hover::after,
.bb-hero__text:hover::before,
.bb-infobox__title:hover::before {
animation: none;
}
}
/* Buttons are links inside paragraphs too; keep them free of the text-link underline. */
.mw-body-content .bb-btn-grid a,
.mw-body-content .bb-btn-grid a:hover {
text-decoration: none;
}
/* ---- Main page: two daily features side by side, and a shorter page (2026-10-01) ---- */
.bb-daily {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-block: 12px;
}
.bb-daily > .bb-panel {
margin-block: 0;
}
@media ( max-width: 640px ) {
.bb-daily {
grid-template-columns: 1fr;
}
}
.bb-daily .bb-panel__body {
padding: 10px 12px;
}
.bb-daily .bb-panel__body > p {
margin: 0;
}
/* The art box: the picture, centred, never taller than the article box beside it. */
.bb-daily a > img {
display: block;
margin-inline: auto;
max-width: 100%;
max-height: 220px;
width: auto;
height: auto;
}
/* The article box: small picture on the left, title and a short excerpt on the right. */
.bb-feature {
display: flex;
gap: 12px;
align-items: flex-start;
}
.bb-feature__img img {
display: block;
max-width: 110px;
max-height: 110px;
}
.bb-feature__title {
display: inline-block;
padding-block: 10px; /* a 44 px tall tap target */
font-family: var( --bb-display );
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
}
.bb-feature__text p {
margin: 4px 0 6px;
}
.bb-feature__more {
display: inline-block;
padding-block: 14px; /* a 44 px tall tap target */
font-size: 0.9rem;
}
.bb-daily__empty {
color: var( --bb-muted );
}
/* A link inside a sentence must not rely on colour alone (axe link-in-text-block). */
.bb-daily__empty a {
text-decoration: underline;
}
/* Newest pages: just the page names, no dates, byte counts, editor or edit summaries. */
.page-Main_Page .bb-newest .mw-index-pager-list-header {
display: none;
}
.page-Main_Page .bb-newest ul {
margin: 0;
padding: 0;
list-style: none;
}
.page-Main_Page .bb-newest li {
display: inline-block;
font-size: 0; /* hides the leftover brackets and separators around the parts removed below */
margin: 0 6px 0 0;
}
.page-Main_Page .bb-newest li .mw-newpages-pagename {
display: inline-block;
padding: 12px 8px; /* a 44 px tall tap target */
font-size: 1rem;
line-height: 20px;
}
.page-Main_Page .bb-newest li > * {
display: none;
}
.page-Main_Page .bb-newest li > bdi:has( .mw-newpages-pagename ) {
display: inline;
}
.page-Main_Page .bb-newest .mw-empty-elt {
display: none;
}
/* Main page footer: one slim strip. The wiki's name and blurb repeat the welcome box above, and
the page-info block repeats the licence line, so both go; the links and licence line stay. */
.page-Main_Page .citizen-page-footer,
.page-Main_Page .citizen-footer__siteinfo {
display: none;
}
.page-Main_Page .citizen-footer__container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
padding-block: 12px;
}
.page-Main_Page .citizen-footer__content,
.page-Main_Page .citizen-footer__bottom {
display: contents;
}
.page-Main_Page #footer-places ul {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
margin: 0;
}
.page-Main_Page #footer-tagline {
flex: 1 1 300px;
font-size: 0.85rem;
}
.page-Main_Page #footer-icons ul {
margin: 0;
}
/* The frame is see-through here (every box on this page has its own background), so the cat print
shows between the boxes. Citizen gives the page 900 px of minimum height and the footer 128 px of
space above it; both made a gap, so the footer now follows the frame directly. */
.page-Main_Page .mw-body {
background-color: transparent;
margin-block-end: 12px;
}
.page-Main_Page .citizen-page-container {
min-height: 0;
}
/* The page tools (history, edit, discussion) sit straight on the cat print, so give them a box too. */
.page-Main_Page .citizen-page-actions {
background-color: var( --bb-panel );
border: 1px solid var( --bb-line );
padding-inline: 12px;
}
.page-Main_Page .citizen-footer {
padding-block: 0;
margin: 0 20px 20px;
border: 1px solid var( --bb-line );
background-color: var( --bb-panel );
}
/* ---- Every page: footer tidy-up and tap targets (2026-10-01 quality pass) ---- */
/* Citizen leaves 128 px of empty cat print between the framed page and the footer; keep a small gap instead. */
.citizen-footer {
margin-top: 12px;
}
.citizen-footer #footer-places a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* TabberNeue files every page that uses tabs under "Pages using Tabber parser tag". Visitors do not need to see
that, so the category box is hidden unless the page has some other category as well. */
#catlinks:not( :has( li > a:not( [href*="Tabber_parser_tag"] ) ) ) {
display: none;
}
/* Button icons: the template's icon= names one of these. They are drawn here as masks, so they
take the button's text colour and follow light and dark mode. Replace with real art by pointing
--bb-ico at an image instead. A button with no icon= shows no icon box. */
.bb-btn__icon {
flex: 0 0 40px;
height: 40px;
background-color: currentcolor;
-webkit-mask: var( --bb-ico ) center / 30px 30px no-repeat;
mask: var( --bb-ico ) center / 30px 30px no-repeat;
}
.bb-btn__icon:not( [class*="bb-icon--"] ) {
display: none;
}
.bb-icon--cat { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5l4.5 4h7l4.5-4V14a8 8 0 0 1-16 0z'/%3E%3Ccircle cx='9' cy='13' r='.6' fill='%23000'/%3E%3Ccircle cx='15' cy='13' r='.6' fill='%23000'/%3E%3C/svg%3E" ); }
.bb-icon--book { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h7a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H3z'/%3E%3Cpath d='M21 5h-7a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E" ); }
.bb-icon--play { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M10.5 9.5v5l4-2.5z' fill='%23000'/%3E%3C/svg%3E" ); }
.bb-icon--palette { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.6 0 2.2-1 2.2-2 0-1.6-1.2-1.6-1.2-3.2 0-1.2 1-1.8 2.8-1.8H18a3 3 0 0 0 3-3c0-4.4-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='11' r='1' fill='%23000'/%3E%3Ccircle cx='10' cy='7' r='1' fill='%23000'/%3E%3Ccircle cx='15' cy='7' r='1' fill='%23000'/%3E%3C/svg%3E" ); }
.bb-icon--doc { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h7M9 8h3'/%3E%3C/svg%3E" ); }
.bb-icon--pencil { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E" ); }
.bb-icon--image { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E" ); }
.bb-icon--upload { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 20h16'/%3E%3C/svg%3E" ); }
.bb-icon--search { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E" ); }
.bb-icon--login { --bb-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E" ); }