MediaWiki:Common.css: Difference between revisions
(edit summary removed) |
(edit summary removed) |
||
| Line 263: | Line 263: | ||
gap: 8px; | gap: 8px; | ||
margin-bottom: 8px; | margin-bottom: 8px; | ||
padding | padding: 0 0 10px; | ||
} | } | ||
.vector-pinned-container .vector-pinnable-header-label { min-width: 0; } | .vector-pinned-container .vector-pinnable-header-label { min-width: 0; } | ||
| Line 294: | Line 294: | ||
.vector-body .mw-parser-output > :first-child { margin-top: 0; } | .vector-body .mw-parser-output > :first-child { margin-top: 0; } | ||
.vector-body .mw-parser-output > .mw-heading:first-child h2 { margin-top: 0; } | .vector-body .mw-parser-output > .mw-heading:first-child h2 { margin-top: 0; } | ||
.vector-sticky-header-context-bar { font-family: var(--bc-font); } | .vector-sticky-header-context-bar, | ||
.vector-sticky-header-context-bar-primary { font-family: var(--bc-font); } | |||
.mw-editsection { font-size: 12px; font-weight: 400; } | .mw-editsection { font-size: 12px; font-weight: 400; } | ||
.vector-page-toolbar { margin-bottom: 18px; } | .vector-page-toolbar { margin-bottom: 18px; } | ||
Revision as of 00:27, 1 November 2026
/* Bconomy Wiki: Classic and After Dark.
* Palettes: packages/state/src/schemas/theme.ts and gamedata/themes.ts.
* Keep the native Vector/Minerva theme controls; Automatic follows the OS.
* Screen only: printed articles retain the skin's normal print styling.
*/
@media screen {
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/play/assets/kanit-latin-400-normal-BUlsQXH3.woff2") format("woff2");
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/play/assets/kanit-latin-600-normal-0lS78yAd.woff2") format("woff2");
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/play/assets/kanit-latin-700-normal-xfKc2BN3.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 and (prefers-color-scheme: dark) {
html:root.skin-theme-clientpref-os {
--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);
}
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: clamp(16px, 2.5vw, 32px);
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);
}
.mw-logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--bc-text);
white-space: nowrap;
}
.mw-logo::before {
content: "";
display: block;
width: 30px;
height: 34px;
flex: 0 0 30px;
background: url("https://assets.bconomy.net/brand/outlinethin.webp") center / contain no-repeat;
}
.mw-logo strong { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
body .mw-logo, body .mw-logo:visited { color: var(--bc-text); }
/* The skin normally inverts an image wordmark; this wiki uses live text. */
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; }
/* Vector offsets the unboxed main menu; bordered panels share one gutter. */
.vector-column-start .vector-main-menu-container { margin-left: 0; }
.vector-sticky-pinned-container::after { display: none; }
.vector-header .vector-menu-content { background-color: transparent; }
/* 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-bottom: 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;
}
.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: 600; }
.mw-body h3 { font-weight: 600; }
/* The heading wrapper owns vertical spacing in modern MediaWiki. */
.mw-body .mw-heading h2, .mw-body .mw-heading h3 { margin-block: 0; }
.mw-body .mw-parser-output > .mw-heading:first-child { margin-block-start: 0; }
.vector-body .mw-parser-output > :first-child { margin-top: 0; }
.vector-body .mw-parser-output > .mw-heading:first-child h2 { margin-top: 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: 18px; }
.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; }
.mw-footer { color: var(--bc-muted); }
.mw-footer li { line-height: 1.6; }
body.page-Main_Page .mw-parser-output > p:first-of-type {
background-color: var(--bc-selected);
border: 1px solid var(--bc-border);
border-left: 4px solid var(--bc-link);
border-radius: 8px;
padding: 16px 20px;
line-height: 1.7;
}
.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: 700; }
.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; }
.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 .vector-menu-content {
background-color: var(--bc-surface);
}
.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; }
/* Preserve 44px native controls on phones; keep the wordmark accessible. */
@media (max-width: 480px) {
body .vector-header { gap: 8px; }
.mw-logo { gap: 0; }
.mw-logo strong {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (max-width: 719px) {
.mw-body > .vector-body { border-radius: 0; padding: 16px; }
.mw-logo strong { font-size: 16px; }
.mw-logo::before { width: 24px; height: 28px; flex-basis: 24px; }
.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;
}
}
}