MediaWiki:Common.css
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.
/* Bconomy Wiki: Classic and After Dark.
* Palettes: packages/state/src/schemas/theme.ts and gamedata/themes.ts.
* Classic is the default; After Dark is selected manually.
* Screen only: printed articles retain the skin's normal print styling.
*/
@media screen {
/* Google Fonts CDN URLs are independent of game builds and wiki hostname. */
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraVGwCKd6xB.woff2") format("woff2");
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPxWnVaFrNlJz.woff2") format("woff2");
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWnVaFrNlJz.woff2") format("woff2");
}
html:root {
--bc-font: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--bc-page: #000c25;
--bc-surface: #272b48;
--bc-raised: #35345a;
--bc-text: #f5f5ff;
--bc-muted: #b8b7c9;
--bc-border: #504e6d;
--bc-accent: #17006b;
--bc-primary: #0059ff;
/* Lighter blue keeps text links readable on Classic surfaces. */
--bc-link: #9cbdff;
--bc-link-hover: #c4d8ff;
--bc-visited: #c8b4ff;
--bc-selected: #2d3d6f;
--bc-info: #123d51;
--bc-success: #123d31;
--bc-warning: #493a20;
--bc-error: #492133;
}
html:root.skin-theme-clientpref-night {
--bc-page: #090b12;
--bc-surface: #161a25;
--bc-raised: #252a38;
--bc-text: #f8f7ff;
--bc-muted: #b7b4c8;
--bc-border: #3c4254;
--bc-accent: #5c1fbc;
--bc-primary: #5c1fbc;
--bc-link: #c084fc;
--bc-link-hover: #deb8ff;
--bc-visited: #b9a5d8;
--bc-selected: #252a38;
--bc-info: #102f3c;
--bc-success: #103728;
--bc-warning: #42321c;
--bc-error: #3e1b2a;
}
}
@media screen {
/* Higher specificity than the skin's day/night token definitions. */
html:root:root {
color-scheme: dark;
--color-base: var(--bc-text);
--color-base-fixed: var(--bc-text);
--color-base--hover: var(--bc-text);
--color-emphasized: var(--bc-text);
--color-subtle: var(--bc-muted);
--color-neutral: var(--bc-text);
--color-base--subtle: var(--bc-muted);
--color-placeholder: var(--bc-muted);
--color-disabled: var(--bc-muted);
--color-inverted: #ffffff;
--color-inverted-fixed: #ffffff;
--color-progressive: var(--bc-link);
--color-progressive--hover: var(--bc-link-hover);
--color-progressive--active: var(--bc-link-hover);
--color-progressive--focus: var(--bc-link);
--color-link: var(--bc-link);
--color-link--hover: var(--bc-link-hover);
--color-link--active: var(--bc-link-hover);
--color-link--focus: var(--bc-link);
--color-link--visited: var(--bc-visited);
--color-link--visited--hover: var(--bc-link-hover);
--color-visited: var(--bc-visited);
--color-visited--active: var(--bc-link-hover);
--color-destructive: #ff9aac;
--color-destructive--hover: #ffc0cb;
--color-destructive--active: #ffc0cb;
--color-link-red: #ff9aac;
--color-link-red--hover: #ffc0cb;
--color-link-red--active: #ffc0cb;
--color-link-red--visited: #e7a1b7;
--color-link-red--visited--hover: #ffc0cb;
--color-error: #ff9aac;
--color-warning: #ffd38b;
--color-success: #8ce0b6;
--background-color-base: var(--bc-surface);
--background-color-base-fixed: var(--bc-surface);
--background-color-neutral: var(--bc-raised);
--background-color-neutral-subtle: var(--bc-page);
--background-color-interactive: var(--bc-raised);
--background-color-interactive--hover: var(--bc-selected);
--background-color-interactive--active: var(--bc-selected);
--background-color-interactive-subtle: var(--bc-surface);
--background-color-interactive-subtle--hover: var(--bc-raised);
--background-color-interactive-subtle--active: var(--bc-selected);
--background-color-progressive: var(--bc-primary);
--background-color-progressive--hover: var(--bc-accent);
--background-color-progressive--active: var(--bc-accent);
--background-color-progressive--focus: var(--bc-primary);
--background-color-progressive-subtle: var(--bc-selected);
--background-color-progressive-subtle--hover: var(--bc-raised);
--background-color-progressive-subtle--active: var(--bc-selected);
--background-color-notice-subtle: var(--bc-raised);
--background-color-warning-subtle: var(--bc-warning);
--background-color-error-subtle: var(--bc-error);
--background-color-destructive-subtle: var(--bc-error);
--background-color-success-subtle: var(--bc-success);
--background-color-disabled: var(--bc-raised);
--background-color-disabled-subtle: var(--bc-surface);
--background-color-button-quiet--hover: var(--bc-raised);
--background-color-button-quiet--active: var(--bc-selected);
--border-color-base: var(--bc-border);
--border-color-subtle: var(--bc-border);
--border-color-muted: var(--bc-border);
--border-color-divider: var(--bc-border);
--border-color-emphasized: var(--bc-muted);
--border-color-interactive: var(--bc-border);
--border-color-interactive--hover: var(--bc-link);
--border-color-interactive--active: var(--bc-link);
--border-color-input: var(--bc-border);
--border-color-input--hover: var(--bc-link);
--border-color-input-binary: var(--bc-muted);
--border-color-input-binary--checked: var(--bc-link);
--border-color-input-binary--hover: var(--bc-link-hover);
--border-color-input-binary--active: var(--bc-link-hover);
--border-color-progressive: var(--bc-link);
--border-color-progressive--hover: var(--bc-link-hover);
--border-color-progressive--active: var(--bc-link-hover);
--box-shadow-color-progressive--focus: var(--bc-link);
--box-shadow-color-inverted: var(--bc-page);
--filter-invert-icon: 1;
--font-family-base: var(--bc-font);
--font-family-heading: var(--bc-font);
background-color: var(--bc-page);
color: var(--bc-text);
accent-color: var(--bc-link);
}
/* Classic uses dark surfaces while retaining MediaWiki's day preference.
Match the native night-mode icon treatment, preserving semantic colors,
pre-inverted icons and checkbox ticks. After Dark uses the native rule. */
html.skin-theme-clientpref-day .skin-invert-image img,
html.skin-theme-clientpref-day .skin-invert,
html.skin-theme-clientpref-day .oo-ui-iconElement-icon:not(.oo-ui-image-progressive):not(.oo-ui-image-destructive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-image-invert):not(.mw-no-invert),
html.skin-theme-clientpref-day .oo-ui-indicatorElement-indicator {
filter: invert(1) hue-rotate(180deg);
}
/* Older anonymous Automatic cookies use Classic, independent of the device. */
html.skin-theme-clientpref-os .skin-invert-image img,
html.skin-theme-clientpref-os .skin-invert,
html.skin-theme-clientpref-os .oo-ui-iconElement-icon:not(.oo-ui-image-progressive):not(.oo-ui-image-destructive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-image-invert):not(.mw-no-invert),
html.skin-theme-clientpref-os .oo-ui-indicatorElement-indicator {
filter: invert(1) hue-rotate(180deg);
}
/* Section editing controls are reserved for signed-in readers. */
body.bc-anonymous .mw-editsection { display: none; }
/* Keep the two manual palettes and omit the skin's beta annotation. */
#skin-client-prefs-skin-theme .cdx-radio:has(input[value="os"]),
#skin-client-prefs-skin-theme .vector-menu-heading > span {
display: none;
}
body, .mw-page-container, .vector-header-container,
body .vector-header, body .vector-sticky-header, .vector-column-start,
.vector-column-end, .mw-footer, .vector-main-menu-container,
.vector-sticky-pinned-container {
background-color: var(--bc-page);
color: var(--bc-text);
}
.mw-body {
background-color: var(--bc-page);
color: var(--bc-text);
}
/* MediaWiki also gives its empty popup portal the vector-body class.
Apply panel geometry only to article content inside the main element. */
.mw-body > .vector-body {
align-self: start;
box-sizing: border-box;
min-width: 0;
background-color: var(--bc-surface);
color: var(--bc-text);
border: 1px solid var(--bc-border);
border-top: 3px solid var(--bc-primary);
border-radius: 10px;
padding: 20px 16px 16px;
line-height: 1.7;
box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
}
body, body .mw-body h1, body .mw-body h2, body .mw-body h3,
body .mw-body .mw-heading, body .vector-body {
font-family: var(--bc-font);
}
body .vector-header {
min-height: 64px;
border-bottom: 1px solid var(--bc-border);
}
/* Match the app menu's 35px icon, 110px wordmark, 7px gap and 3px top offset.
A shared unit keeps both images and their spacing proportional on phones. */
.mw-logo {
--bc-brand-unit: 1px;
display: inline-flex;
align-items: center;
gap: calc(7 * var(--bc-brand-unit));
height: 48px;
flex-shrink: 0;
color: var(--bc-text);
white-space: nowrap;
}
.mw-logo::before {
content: "";
display: block;
width: calc(35 * var(--bc-brand-unit));
height: calc(35 * var(--bc-brand-unit));
flex: 0 0 calc(35 * var(--bc-brand-unit));
background: url("https://assets.bconomy.net/brand/outlinethin.webp") center / contain no-repeat;
}
.mw-logo .mw-logo-container {
display: block;
width: calc(110 * var(--bc-brand-unit));
max-width: none;
flex: none;
/* Center alignment accounts for the wordmark's taller 3:1 canvas. */
transform: translateY(calc(3.833333 * var(--bc-brand-unit)));
}
.mw-logo .mw-logo-container::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 3 / 1;
background: url("https://assets.bconomy.net/brand/wordmark.webp") center / contain no-repeat;
filter: invert(1);
}
/* Keep the native home link's full name available to assistive technology. */
.mw-logo strong {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body .mw-logo, body .mw-logo:visited { color: var(--bc-text); }
/* Both themes use dark headers; invert only the black wordmark, once. */
body .mw-logo .skin-invert { filter: none; }
.vector-header .cdx-text-input__input { border-radius: 6px 0 0 6px; }
.vector-header .cdx-search-input__end-button { border-radius: 0 6px 6px 0; }
/* Undo both halves of Vector's optical TOC offset for boxed sidebars. */
.skin-vector-2022 .vector-column-start,
.vector-column-start .vector-main-menu-container { margin-inline: 0; }
.vector-sticky-pinned-container::after { display: none; }
.vector-header .vector-menu-content { background-color: transparent; }
/* Align the menu button and brand with the header's left edge. */
@media (min-width: 1120px) {
body .vector-header .vector-header-start { justify-content: flex-start; }
}
/* Boxed sidebars align with the title instead of Vector's toolbar offset. */
@media (min-width: 1120px) {
.skin-vector-2022 .vector-column-start,
.skin-vector-2022 .vector-column-end {
margin-top: 0;
border-top: 0;
}
.skin-vector-2022 .vector-page-titlebar { padding-top: 0; }
}
/* Keep native pinning and scrolling, with equal panel sizing and spacing. */
body .vector-pinned-container {
box-sizing: border-box;
width: 100%;
margin-bottom: 16px;
background-color: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: 8px;
padding: 10px 12px;
}
body .vector-pinned-container .vector-pinnable-element,
body .vector-pinned-container .vector-menu-content {
background-color: transparent;
}
.vector-pinned-container .vector-pinnable-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 8px;
padding: 0 0 10px;
}
.vector-pinned-container .vector-pinnable-header-label { min-width: 0; }
.vector-pinned-container .vector-pinnable-header-toggle-button { flex-shrink: 0; }
.vector-main-menu .mw-list-item a,
.vector-page-tools .mw-list-item a,
.vector-toc .vector-toc-link {
border-radius: 5px;
padding: 6px 8px;
line-height: 1.4;
}
/* Fill every row; only nested labels receive hierarchy indentation.
Put collapse buttons at the end so all top-level labels align. */
.skin-vector-2022 .vector-toc .vector-toc-contents,
.skin-vector-2022 .vector-toc .vector-toc-list,
.skin-vector-2022 .vector-toc .vector-toc-list-item {
margin-inline: 0;
padding-inline: 0;
}
.skin-vector-2022 .vector-toc .vector-toc-list-item { --bc-toc-indent: 0px; }
.skin-vector-2022 .vector-toc .vector-toc-level-2 { --bc-toc-indent: 12px; }
.skin-vector-2022 .vector-toc .vector-toc-level-3 { --bc-toc-indent: 24px; }
.skin-vector-2022 .vector-toc .vector-toc-level-4 { --bc-toc-indent: 36px; }
.skin-vector-2022 .vector-toc .vector-toc-level-5 { --bc-toc-indent: 48px; }
.skin-vector-2022 .vector-toc .vector-toc-level-6 { --bc-toc-indent: 60px; }
.skin-vector-2022 .vector-toc .vector-toc-link {
box-sizing: border-box;
width: 100%;
padding-inline-start: calc(8px + var(--bc-toc-indent));
}
.skin-vector-2022 .vector-toc .vector-toc-list-item:has(> .vector-toc-toggle) > .vector-toc-link {
padding-inline-end: 32px;
}
.skin-vector-2022 .vector-toc .vector-toc-link .vector-toc-text {
width: auto;
padding: 0;
}
.skin-vector-2022 .vector-toc .vector-toc-toggle {
top: 5px;
left: auto;
right: auto;
inset-inline-end: 2px;
}
.vector-main-menu .mw-list-item a:hover,
.vector-page-tools .mw-list-item a:hover,
.vector-toc .vector-toc-link:hover,
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
background-color: var(--bc-selected);
color: var(--bc-text);
text-decoration: none;
}
.vector-main-menu .mw-list-item a,
.vector-page-tools .mw-list-item a { display: block; }
.vector-pinnable-header-label { font-weight: 600; }
.vector-page-titlebar { padding: 10px 0 12px; }
.mw-body h1 { letter-spacing: -.6px; }
.mw-body h2 { padding-bottom: .35em; font-weight: 400; }
.mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { font-weight: 400; }
/* The heading wrapper owns vertical spacing in modern MediaWiki. */
.mw-body .mw-heading h2, .mw-body .mw-heading h3 { margin-block: 0; }
/* The article card supplies the outer inset; empty subtitles add no gap. */
.mw-body > .vector-body > #contentSub:has(> #mw-content-subtitle:only-child:empty) { margin-top: 0; }
.mw-body > .vector-body > #mw-content-text { margin-top: 0; }
.mw-body .mw-parser-output > :first-child { margin-block-start: 0; }
/* Trim the first heading's native padding and optically offset its font leading. */
.mw-body .mw-parser-output > .mw-heading:first-child {
padding-block-start: 0;
margin-block-start: -.4em;
}
/* Final block and thumbnail margins must not add to the card's bottom inset. */
.mw-body .mw-parser-output > :last-child { margin-block-end: 0; }
.vector-sticky-header-context-bar,
.vector-sticky-header-context-bar-primary { font-family: var(--bc-font); }
.mw-editsection { font-size: 12px; font-weight: 400; }
.vector-page-toolbar { margin-bottom: 12px; }
.vector-dropdown-content { border: 1px solid var(--bc-border); border-radius: 8px; }
.vector-dropdown-content .vector-menu-content { border-radius: 8px; }
body .cdx-button:not(.cdx-button--action-progressive):not(.cdx-button--action-destructive) {
color: var(--bc-text);
}
body .cdx-button--weight-normal:not(.cdx-button--action-progressive),
body .cdx-search-input__end-button {
background-color: var(--bc-raised);
border-color: var(--bc-border);
}
.mw-ui-button, .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
border-radius: 6px;
}
.mw-ui-progressive, .oo-ui-flaggedElement-progressive.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
background-color: var(--bc-primary);
border-color: var(--bc-primary);
color: #fff;
}
.wikitable { font-size: .95em; }
.wikitable th, .wikitable td { padding: .65em .85em; }
.wikitable > tbody > tr:nth-child(even) > td { background-color: var(--bc-surface); }
.wikitable > tbody > tr:hover > td { background-color: var(--bc-selected); }
figure[typeof~="mw:File/Thumb"], .mw-parser-output .thumbinner {
box-sizing: border-box;
max-width: 100%;
border-radius: 8px;
overflow: hidden;
}
figure[typeof~="mw:File/Thumb"] > figcaption { padding: 12px 16px; color: var(--bc-muted); }
.catlinks { padding: 12px 16px; border-radius: 6px; margin-top: 24px; }
/* {{Guide link}} footer: same box as the category links below it. */
.mw-parser-output .bc-guide-link {
padding: 12px 16px;
border: 1px solid var(--bc-border);
border-radius: 6px;
margin-top: 24px;
background-color: var(--bc-raised);
color: var(--bc-text);
}
/* {{Bconomy navbox}}: topic links at the bottom of reference articles. */
.mw-parser-output .bc-navbox {
padding: 12px 16px;
border: 1px solid var(--bc-border);
border-radius: 6px;
margin-top: 24px;
background-color: var(--bc-raised);
color: var(--bc-text);
}
.mw-parser-output .bc-navbox-title { font-weight: bold; text-align: center; }
.mw-parser-output .bc-navbox-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mw-parser-output .bc-navbox-table th,
.mw-parser-output .bc-navbox-table td { padding: 6px 0; vertical-align: top; border-top: 1px solid var(--bc-border); }
.mw-parser-output .bc-navbox-table th { padding-right: 16px; text-align: right; white-space: nowrap; color: var(--bc-muted); }
.mw-parser-output .bc-navbox-table .mw-selflink { font-weight: bold; }
@media (max-width: 640px) {
.mw-parser-output .bc-navbox-table th,
.mw-parser-output .bc-navbox-table td { display: block; text-align: left; }
.mw-parser-output .bc-navbox-table td { border-top: 0; padding-top: 0; }
}
.mw-footer { color: var(--bc-muted); }
.mw-footer li { line-height: 1.6; }
.mw-body h1, .mw-body h2, .mw-body h3,
.vector-pinnable-header-label, .vector-menu-heading {
color: var(--bc-text);
font-family: inherit;
}
.mw-body h1 { font-weight: 400; }
.mw-body h2 { border-color: var(--bc-border); }
.vector-page-titlebar, .vector-page-toolbar,
.vector-pinnable-header, .vector-menu-heading,
.vector-toc, .catlinks, .mw-footer { border-color: var(--bc-border); }
a { color: var(--bc-link); }
a:visited { color: var(--bc-visited); }
a:hover, a:focus { color: var(--bc-link-hover); }
a.new, a.new:visited { color: #ff9aac; }
/* Discussion tabs are normal navigation even before a talk page is created. */
#ca-talk:not(.selected) a { color: var(--bc-link); }
#ca-talk:not(.selected) a:visited { color: var(--bc-visited); }
#ca-talk:not(.selected) a:hover,
#ca-talk:not(.selected) a:focus { color: var(--bc-link-hover); }
.vector-menu-tabs .selected a,
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: var(--bc-text);
border-color: var(--bc-link);
}
.vector-dropdown-content, .vector-menu-content,
.vector-pinnable-element, .vector-search-box .cdx-menu {
color: var(--bc-text);
background-color: var(--bc-page);
}
.vector-dropdown-content { background-color: var(--bc-surface); }
.vector-dropdown-content .vector-pinnable-element,
.vector-dropdown-content .vector-menu-content {
background-color: transparent;
}
.vector-pinnable-header-toggle-button,
.vector-appearance-pinnable-header .cdx-button {
color: var(--bc-muted);
background-color: var(--bc-raised);
}
.wikitable, .catlinks, .toc, pre,
.mw-parser-output code, .mw-parser-output .mw-code,
.mw-parser-output .thumbinner, .mw-parser-output .thumbcaption,
figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
background-color: var(--bc-raised);
color: var(--bc-text);
border-color: var(--bc-border);
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: var(--bc-selected);
color: var(--bc-text);
}
.wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td {
border-color: var(--bc-border);
}
.mw-parser-output figure img, .mw-parser-output .thumbimage {
max-width: 100%;
height: auto;
}
.mw-parser-output { overflow-wrap: break-word; }
.mw-parser-output pre { box-sizing: border-box; max-width: 100%; overflow-x: auto; }
.editOptions, #wikiPreview, .mw-editform .editOptions {
background-color: var(--bc-raised);
color: var(--bc-text);
border-color: var(--bc-border);
}
textarea, input[type="text"], input[type="search"], select {
background-color: var(--bc-page);
color: var(--bc-text);
border-color: var(--bc-border);
}
:focus-visible { outline-color: var(--bc-link); }
::selection { background-color: var(--bc-accent); color: #fff; }
/* Use only the icon on phones, retaining the home link's accessible name. */
@media (max-width: 480px) {
body .vector-header { gap: 8px; }
body .vector-header .vector-header-start { gap: 8px; }
.mw-logo { gap: 0; }
.mw-logo .mw-logo-container { width: 0; transform: none; }
.mw-logo .mw-logo-container::before { display: none; }
}
@media (max-width: 719px) {
.mw-body > .vector-body { border-radius: 0; }
.mw-logo { --bc-brand-unit: .8px; }
.mw-body h1 { font-size: 1.8em; letter-spacing: -.3px; }
.wikitable th, .wikitable td { padding: .5em .6em; }
.mw-parser-output figure[typeof~="mw:File/Thumb"] {
float: none;
margin-inline: auto;
}
}
}
@media screen {
/* Main-page panels use the same surfaces and accents as the wiki shell. */
.bc-home { container: bc-home / inline-size; }
.bc-home-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 16px;
}
.bc-home-panel {
min-width: 0;
overflow: hidden;
background-color: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: 8px;
}
.bc-home-panel > .mw-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 12px;
margin: 0;
padding: 12px 16px;
border-bottom: 1px solid var(--bc-border);
}
.mw-body .bc-home-panel h2 {
margin: 0;
padding: 0;
border: 0;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.4;
}
.bc-home-panel .mw-editsection {
margin: 0;
font-size: 11px;
white-space: nowrap;
}
.bc-home-panel-body { padding: 16px; }
.bc-home-panel-body > :first-child { margin-top: 0; }
.bc-home-panel-body > :last-child { margin-bottom: 0; }
.bc-home-hero {
grid-column: 1 / -1;
background-color: var(--bc-selected);
border-top: 3px solid var(--bc-primary);
padding: 20px;
text-align: center;
}
.bc-home-hero > .mw-heading {
display: block;
border: 0;
padding: 0;
}
.mw-body .bc-home-hero h2 { font-size: clamp(1.6rem, 3.5cqi, 2.15rem); }
.bc-home-hero .mw-editsection { display: block; margin-top: 4px; }
.bc-home-hero .bc-home-panel-body { padding: 12px 0 0; }
.bc-home-more { margin-top: 16px; text-align: end; }
.bc-home-pages { display: flex; flex-direction: column; }
.bc-home-shortcuts {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-content: center;
gap: 12px;
flex: 1;
padding: 20px 16px;
}
.bc-home-tile { min-width: 0; }
.bc-home-tile > a {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
min-height: 140px;
padding: 16px 8px;
background-color: var(--bc-raised);
border: 1px solid var(--bc-border);
border-radius: 8px;
font-weight: 600;
line-height: 1.4;
text-align: center;
text-decoration: none;
}
.bc-home-tile-label {
display: block;
align-self: stretch;
}
.bc-home-tile > a::before {
content: "";
display: block;
flex: none;
width: 64px;
height: 64px;
background: var(--bc-home-icon) center / contain no-repeat;
}
.bc-home-tile > a:hover, .bc-home-tile > a:focus-visible {
background-color: var(--bc-selected);
border-color: var(--bc-link);
color: var(--bc-link-hover);
}
.bc-home-tile-start { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/svg/emoji_u1f44b.svg"); }
.bc-home-tile-items { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/svg/emoji_u1f392.svg"); }
.bc-home-tile-pets { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/svg/emoji_u1f43e.svg"); }
.bc-home-tile-farm { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/svg/emoji_u1f331.svg"); }
.bc-home-tile-relay { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/svg/emoji_u26a1.svg"); }
.bc-home-navigation { margin-top: 16px; }
.bc-home-navigation > .mw-heading { background-color: var(--bc-selected); }
.bc-home-nav-body dl {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
margin: 0;
}
.bc-home-nav-body dt, .bc-home-nav-body dd {
margin: 0;
padding: 10px 16px;
border-bottom: 1px solid var(--bc-border);
}
.bc-home-nav-body dt { background-color: var(--bc-raised); font-weight: 600; }
.bc-home-nav-body dd { min-width: 0; }
.bc-home-nav-body dl > :nth-last-child(-n + 2) { border-bottom: 0; }
@container bc-home (max-width: 900px) {
.bc-home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bc-home-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container bc-home (max-width: 640px) {
.bc-home-grid { grid-template-columns: minmax(0, 1fr); }
.bc-home-hero { padding: 16px; }
.bc-home-nav-body dl { grid-template-columns: 6.5rem minmax(0, 1fr); }
.bc-home-nav-body dt, .bc-home-nav-body dd { padding: 10px 12px; }
}
@container bc-home (max-width: 380px) {
.bc-home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-home-nav-body dl { display: block; }
.bc-home-nav-body dt { border-bottom: 0; }
.bc-home-nav-body dl > dd:last-child { border-bottom: 0; }
}
}