MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(override colour for ToC show/hide toggle) |
(remove categorytreepagebullet none) Tag: Reverted |
||
| Line 815: | Line 815: | ||
/* Do NOT add `justify-content: center` again! The whole point is to have the navbox-group rows aligned with each other. */ | /* Do NOT add `justify-content: center` again! The whole point is to have the navbox-group rows aligned with each other. */ | ||
} | } | ||
Revision as of 07:46, 29 March 2026
/* CSS placed here will be applied to all skins */
/* Dune Wiki Style for Vector (default) skin */
/* ResourceLoaderSkinModule: normalize,elements,content-tables,content-links,content-media,interface-message-box,interface-category,toc */
/* Set global colour vars */
:root {
--color-background-base: #23201d;
--color-background-main: #171513;
--color-background-highlight: #e100ff;
--color-background-lowlight: #8f3dbb;
--color-text-main: #f4cf8b;
--color-text-dark: #e39b16;
--active-bg-color: #8f3dbb;
--active-text-color: #f4cf8b;
--inactive-bg-color: #171513;
--inactive-text-color: #e39b16;
--infobox-margin: 0.5rem;
}
/* Set base background colour (body and header bar) */
body {
background-color: var(--color-background-base);
background-image: linear-gradient(0deg, rgba(121,86,52,1) 0%, rgba(121,86,52,1) 2%, rgba(65,50,33,1) 5%, rgba(39,35,30,1) 20%, rgba(35,32,29,1) 100%);
background-size: auto,cover;
background-position:top left, center;
background-attachment:fixed;
color: var(--color-text-main);
}
#mw-head, option:checked {
background: var(--color-background-base);
}
/* Set main background colour */
#content,
.editOptions,
.wikitable,
.wikitable > * > tr > th,
#catlinks,
#searchInput,
#mw-page-base,
#mw-head-base,
#wpSummary,
#wpSummary::placeholder,
#filetoc,
#wpUploadDescription,
.mw-content-ltr figure[typeof~="mw:File/Thumb"],
.mw-content-ltr figure[typeof~="mw:File/Frame"],
figure[typeof~="mw:File/Thumb"] > figcaption,
figure[typeof~="mw:File/Frame"] > figcaption,
li.gallerybox div.thumb,
.toc,
.toccolours,
.infobox,
.oo-ui-inputWidget-input,
.mw-editfont-monospace,
.oo-ui-icon-bookmark,
.mw-ui-icon-bookmark::before,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-rcfilters-ui-changesListWrapperWidget,
.mw-changeslist-legend,
.mw-rcfilters-ui-filterTagMultiselectWidget,
.oo-ui-widget-enabled,
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget,
.oo-ui-inputWidget-input,
.mw-notification,
.mw-notification-autohide,
.postedit,
.mw-notification-visible,
.oo-ui-tagMultiselectWidget,
.oo-ui-widget-enabled,
.oo-ui-tagMultiselectWidget-outlined,
.oo-ui-tagItemWidget,
.oo-ui-widget-enabled,
.oo-ui-textInputWidget,
.oo-ui-inputWidget-input,
.oo-ui-menuSelectWidget,
.oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.mw-rcfilters-ui-row,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header,
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk),
.mw-rcfilters-ui-itemMenuOptionWidget:hover,
.mw-rcfilters-ui-filterMenuSectionOptionWidget,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.oo-ui-popupWidget-popup,
.suggestions-results,
.suggestions-special,
.oo-ui-window-content,
.uls-search,
.uls-filtersuggestion,
.uls-lcd,
.ve-ui-mwTransclusionOutlineTemplateWidget-sticky,
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle
.oo-ui-optionWidget-selected,
.oo-ui-optionWidget-highlighted,
.ve-ui-mwTargetWidget > .ve-init-target > .mw-body-content,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.mw-mmv-post-image,
.mw-mmv-image-metadata,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.ve-ui-mwSaveDialog-options,
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper,
.mw-echo-ui-pageFilterWidget-title,
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected,
.ui-widget-content,
.templateForm,
.mw-widget-dateInputWidget-handle,
.createboxInput,
.fieldBox,
.oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content,
.mwe-popups, .mwe-popups-overlay, .mwe-popups-settings {
background: var(--color-background-main);
}
/* Set main text colour */
body,
h1,
h2,
h3,
h4,
h5,
h6,
li,
text,
span,
option,
*[aria-label],
.mw-body,
.wikitable,
.editOptions,
#footer-info li,
.mw-footer li,
#wpSummary,
#wpSummary::placeholder,
#searchInput,
#searchInput::placeholder,
#wpUploadDescription,
.infobox,
.mw-editfont-monospace,
.oo-ui-inputWidget-input::placeholder,
.oo-ui-textInputWidget::placeholder,
.oo-ui-inputWidget-input,
.oo-ui-textInputWidget,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-widget-enabled,
.oo-ui-menuSelectWidget,
.oo-ui-tagItemWidget.oo-ui-widget-enabled,
.mw-rcfilters-ui-row,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header,
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk),
.mw-rcfilters-ui-filterMenuSectionOptionWidget,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title,
.mw-rcfilters-ui-filterMenuHeaderWidget-title,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label,
.oo-ui-textInputWidget.oo-ui-widget-enabled,
.oo-ui-inputWidget-input:focus,
.webfonts-changed,
.uls-search,
.uls-lcd,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle
.oo-ui-optionWidget-selected,
.oo-ui-optionWidget-highlighted,
.ve-ui-mwTargetWidget > .ve-init-target > .mw-body-content,
.mw-mmv-post-image,
.mw-mmv-image-metadata,
.mw-widget-calendarWidget-day-additional,
.mw-notification-content {
color: var(--color-text-main);
}
/* Set main border colour */
.mw-body,
option:checked,
.toc,
#searchInput,
#wpSummary,
#wpSummary::placeholder,
#wpUploadDescription,
li.gallerybox div.thumb,
.infobox,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.oo-ui-inputWidget-input,
.oo-ui-textInputWidget,
.mw-rcfilters-ui-itemMenuOptionWidget:hover,
.uls-search,
.oo-ui-optionWidget-selected,
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.ve-ui-mwSaveDialog-options,
.ui-dialog,
.ui-dialog-titlebar {
border: 1px solid var(--color-text-main);
}
/* Set Box Shadow colours */
.oo-ui-optionWidget-selected {
box-shadow: inset 0 -2px 0 0 var(--color-text-dark);
}
/* Set link colours */
a, a *, .mw-widget-calendarWidget-day-heading, .createboxInput, .toctogglelabel {
color: var(--color-text-dark) !important;
&:visited {
color: var(--color-text-dark) !important;
}
}
.mw-collapsible-toggle-default, .mw-collapsible-text, .mw-widget-calendarWidget-day {
color: var(--color-text-dark) !important;
&:visited {
color: var(--color-text-dark) !important;
}
}
/* Special case: main tabs */
.vector-menu-tabs-legacy li {
background: var(--color-background-base);
&.selected {
background: var(--color-background-main);
}
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient(to bottom, var(--color-text-dark) 0, var(--color-text-main) 100%);
}
/* Special case: code blocks */
pre, code, .mw-code {
background-color: #000000;
color: var(--color-text-main);
border: 1px solid var(--color-text-dark);
}
/* Special case: toolbars */
.oo-ui-toolbar-bar,
.wikiEditor-ui-toolbar,
.oo-ui-barToolGroup-tools > .oo-ui-tool,
.oo-ui-tool-link,
.ve-ui-toolbar-group-format,
.ve-ui-toolbar-group-style,
.ve-ui-toolbar-group-link,
.ve-ui-toolbar-group-cite,
.ve-ui-toolbar-group-structure,
.ve-ui-toolbar-group-insert,
.ve-ui-toolbar-group-help,
.ve-ui-toolbar-group-pageMenu,
.ve-ui-toolbar-group-editMode,
.oo-ui-toolGroup-tools,
.ve-ui-toolbar-group-specialCharacter,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement,
.ext-WikiEditor-ResizingDragBar-ew,
.ext-WikiEditor-ResizingDragBar,
#pagehistory li.selected {
background-color: var(--color-background-highlight);
}
.oo-ui-popupToolGroup-handle > .oo-ui-labelElement-label, oo-ui-tool-title {
color: var(--color-background-base);
}
/* Special case: buttons */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled, oo-ui-buttonElement-button,
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button,
body .ui-button {
color: var(--color-background-base);
background-color: var(--color-text-main);
border-color: var(--color-text-main);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--color-text-main);
background-color: var(--color-background-base);
border-color: var(--color-text-main);
}
.oo-ui-tool-link .oo-ui-tool-title,
.oo-ui-tool-link .oo-ui-iconElement-icon
.oo-ui-tool-link .oo-ui-tool-accel,
.oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
color: black !important;
}
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, .oo-ui-labelElement-label {
color: var(--color-text-dark);
}
/* Special case: Modals */
.oo-ui-windowManager-modal > .oo-ui-dialog, .ui-widget-overlay {
background-color: rgba(32, 15, 41, 0.75);
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--color-text-dark);
color: var(--color-background-main);
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
background-color: #321541;
}
/* Special case: Unordered List */
ul {
list-style-image: url('https://awakening.wiki/images/1/1d/Spicepile.png');
}
/* Special case: Checkboxes */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span {
background-color: var(--color-background-highlight);
border-color: var(--color-background-highlight);
}
/* Special case: Legacy modal */
body .ui-dialog .ui-widget-header,
.ui-widget-content .ui-state-default {
background-color: var(--color-background-main) !important;
background-image: none !important;
}
/* Diamond Box for Page Headers */
.mw-first-heading {
height: 1.5rem;
line-height: 1.5rem !important;
border-top: 2px solid var(--color-text-main);
border-bottom: 2px solid var(--color-text-main);
width: fit-content;
padding: 0.2rem 0 !important;
text-align: center;
display: flex;
text-transform: uppercase;
font-family: sans-serif !important;
color: var(--color-text-main);
margin-bottom: 0.5rem;
}
.mw-first-heading::before {
content: '';
display: inline-block;
left: -0.75rem;
rotate: -45deg;
border-top: 2px solid var(--color-text-main);
border-left: 2px solid var(--color-text-main);
position: relative;
width: 1.38rem;
height: 1.38rem;
}
.mw-first-heading::after {
content: '';
display: inline-block;
right: -0.75rem;
rotate: 135deg;
border-top: 2px solid var(--color-text-main);
border-left: 2px solid var(--color-text-main);
position: relative;
width: 1.38rem;
height: 1.38rem;
}
.mw-first-heading #firstHeadingTitle {
margin-left: 0.5ch;
}
/* Diamond Box for Header template */
.diamond-box {
height: 1.5rem;
line-height: 1.5rem;
border-top: 2px solid var(--color-text-main);
border-bottom: 2px solid var(--color-text-main);
width: fit-content;
padding: 0.2rem 0;
text-align: center;
display: flex;
font-family: sans-serif;
color: var(--color-text-main)
}
.diamond-box::before {
content: '';
display: inline-block;
left: -0.75rem;
rotate: -45deg;
border-top: 2px solid var(--color-text-main);
border-left: 2px solid var(--color-text-main);
position: relative;
width: 1.38rem;
height: 1.38rem;
}
.diamond-box::after {
content: '';
display: inline-block;
right: -0.75rem;
rotate: 135deg;
border-top: 2px solid var(--color-text-main);
border-left: 2px solid var(--color-text-main);
position: relative;
width: 1.38rem;
height: 1.38rem;
}
/* Infobox template style borrowed from Wikipedia */
.infobox {
background-color: var(--color-background-base);
color: var(--color-text-main);
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5rem;
padding: 0.25rem;
margin: var(--infobox-margin);
border: 1px solid var(--color-text-main);
max-width: 100%;
width: 373px; /* Border and width are sized exactly to fit two infoboxes on mobile screens, and should NOT be randomly changed */
}
/* Double-width infobox variant */
.infobox--wide {
width: 768px; /* Exactly the width of two normal infoboxes including border and default gap when using Template:FlexContainer (class .flex-container) */
}
/* Wrapper container allows infoboxes to stretch align to each other without distorting alignment of inner data rows */
.infobox-wrapper {
background-color: var(--color-background-base);
border: 1px solid var(--color-text-main);
float: right;
margin: var(--infobox-margin);
min-width: 0;
max-width: 100%;
}
.infobox-wrapper .infobox-title {
background-color: var(--color-background-base) !important;
}
/* disable borders and margins of infoboxes inside wrappers */
.infobox-wrapper > .infobox {
border: none;
margin: 2px; /* this is to allow targeted infoboxes to still have visible inset box shadows */
}
/* disable outer margin for infoboxes contained inside flex containers */
.flex-container > .infobox,
.flex-container > .infobox-wrapper {
margin: 0;
}
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
.infobox th,
.infobox td {
vertical-align: top;
}
.infobox-label,
.infobox-data,
.infobox th,
.infobox td {
/* @noflip */
text-align: left;
}
.infobox .infobox-above,
.infobox .infobox-title,
.infobox .infobox-caption {
font-size: 125%;
font-weight: bold;
text-align: center;
padding: 0.2rem;
}
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
text-align: center;
}
.infobox .infobox-navbar {
/* @noflip */
text-align: right;
}
/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
/* @noflip */
text-align: left;
}
/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
text-decoration: none !important;
}
/* Prevent line breaks in silly places where desired (nowrap)
and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}
/* texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml {
font-size: 100%;
}
@media screen {
.nochecker .gallerybox .thumb img {
background-image: none;
}
}
/* Navbox */
.navbox {
box-sizing: border-box;
border: 1px solid var(--color-background-highlight);
width: 100%;
clear: both;
font-size: 88%;
text-align: center;
margin: 1rem auto 0; /* Prevent preceding content from clinging to navboxes */
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
.navbox-group,
.navbox-title {
padding: 0.25rem 1rem;
line-height: 1.5rem;
}
.navbox {
background-color: var(--color-background-main);
}
.navbox-list {
line-height: 1.5rem;
border-color: var(--color-background-lowlight); /* Must match background color */
}
.navbox-list > div {
padding: 0 !important;
}
.navbox-list-with-group {
border-left-width: 2px;
border-left-style: solid;
}
/* Borders above 2nd, 3rd, etc. rows */
tr + tr > .navbox-group,
tr + tr > .navbox-list {
border-top: 2px solid var(--color-background-lowlight); /* Must match background color */
}
.navbox-title {
background-color: var(--color-background-lowlight); /* Level 1 color */
}
.navbox-group {
background-color: var(--color-background-base); /* Level 2 color */
}
.navbox-even {
background-color: var(--color-background-base);
}
.navbox-odd {
background-color: var(--color-background-main);
}
/* NO JS Fallback */
html.client-js .no-js-fallback {
display: none;
}
/* Diff context */
.diff-context {
color: var(--color-text-dark);
background-color: var(--color-background-base);
}
.diff-addedline .diffchange {
background: var(--color-background-highlight) !important;
}
.diff-deletedline .diffchange {
background: var(--color-background-lowlight) !important;
}
/* JSON Page content */
.mw-json th {
background: var(--color-background-main);
}
.mw-json-value, .mw-json-single-value {
background-color: var(--color-background-base);
}
.mw-json tr {
background-color: #2b2b2b;
}
/* Copyable Elements + Tooltips */
.copyable {
position: relative;
display: inline-block;
}
.copyable .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.copyable .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.copyable:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.copy-text {
color: inherit;
}
/* Override targeted text highlight colour */
.target-highlight,
.mw-parser-output :target {
background-color: var(--color-background-base) !important;
box-shadow: inset 0 0 0 2px var(--color-background-highlight);
}
/* Mimic the look of preformatted blocks */
.dialogue-block {
font-family: monospace;
white-space: pre-wrap;
background-color: #000000;
border: 1px solid var(--color-text-dark);
padding: 0rem 1rem;
overflow-x: auto;
}
/* Hide title box on main page */
.page-Dune_Awakening_Community_Wiki .mw-first-heading {
display: none;
}
/* Override background-color to match wiki background */
/* Special:ProtectedPages table */
.mw-datatable td,
/* Special:Upload warning box */
.mw-destfile-warning,
/* MediaWiki documentation box */
.mw-parser-output .documentation,
/* Special:ReplaceText selection boxes */
.ext-replacetext-searchoptions,
/* Interactive Maps search bar dropdown options */
.ext-datamaps-control-search ul.ext-datamaps-control-search-results,
/* boilerplate dropdown options on new pages */
#multiboilerplateform option {
background-color: var(--color-background-base) !important;
}
/* Override button text color to black */
/* Special:ReplaceText buttons and text fields */
#mw-search-toggleall, #mw-search-togglenone, .ext-replacetext-searchoptions input,
/* boilerplate "Load" button on new pages */
#multiboilerplateform input,
/* Change visibility of selected revisions button */
.deleterevision-log-submit, .mw-log-deleterevision-button,
/* Special:Upload destination box */
#wpDestFile,
/* Special:Upload buttons */
.mw-htmlform-submit-buttons input, .mw-htmlform-submit-buttons button {
color: #000000 !important;
}
/* Define standardised styling for a responsive div container that can be used across entire wiki */
.flex-container {
display: flex;
flex-wrap: wrap;
overflow-x: auto;
margin: 1rem 0;
gap: var(--flex-gap, 1rem);
justify-content: var(--flex-justify-content, flex-start);
align-items: var(--flex-align-items, stretch);
text-align: var(--flex-text-align, center);
}
/* Ignore blank lines within Template:FlexContainer content input, which were causing additional gaps between items */
.flex-container > p:empty,
.flex-container > p:has(br:only-child) {
display: none;
}
/* Define standardised styling for Previous/Next infobox buttons that can be used across entire wiki */
.infobox-nav-row {
display: flex;
justify-content: space-between;
}
/* Force collapsible toggle to the left */
.mw-collapsible > .mw-collapsible-toggle {
display: block;
float: none;
margin-left: 0;
}
/* Make all images responsive and never exceed screen display */
.mw-file-element {
max-width: 100%;
height: auto;
}
/* Also make galleries and images within them responsive and never exceed screen display */
ul.gallery li.gallerybox,
ul.gallery li.gallerybox .thumb {
width: auto;
max-width: 100% ;
height: auto;
}
/* Force galleries to push images to the left when using mode=packed */
.mw-gallery-packed {
display: flex !important; /* !important is tested and necessary */
flex-wrap: wrap;
justify-content: flex-start;
}
/* Convert output of #categorytree into a responsive grid of blocks */
.CategoryTreeTag {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(191.5px, 191.5px));
/* Do NOT add `justify-content: center` again! The whole point is to have the navbox-group rows aligned with each other. */
}
.CategoryTreeItem {
padding: 0.25rem 0.5rem;
}
/* Match navbox group column width to match #categorytree rules above */
.navbox-group {
min-width: 157.5px; /* If navbox has group column, it will fill up one column width on mobile screens, to balance out the remaining 3 content columns */
/* @noflip */
text-align: right;
}
/* Ensure that inline icons scale with font size */
.inline-icon img {
height: 1.5em;
width: auto;
vertical-align: top;
}
/* Inline icons in infoboxes need additional nudging, possibly due to line height changes */
.infobox .inline-icon img {
position: relative;
top: 0.15em;
}
/* Dissuade mobile browsers from randomly enlarging pieces of text here and there */
html {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Set breakpoint for mobile devices; minimum viewport is fixed at 1000px */
@media (max-width: 1000px) {
/* Enlarge font size */
.scalable-text,
.mw-parser-output > p,
.mw-parser-output > ul > li,
.mw-parser-output > ol > li,
.mw-parser-output > h2,
.mw-parser-output > h3,
.mw-parser-output > h4,
.mw-parser-output > .dialogue-block {
font-size: 150%;
}
/* Disable margins on solo wide infoboxes because they fill up the whole width on mobile screens but end up off-centre */
.infobox-wrapper:has(> .infobox--wide) {
margin-left: 0;
margin-right: 0;
}
}
/* Restrict width of Template:FeaturedItem infobox to match Template:DiscordWidget on main page */
.featured-item > .infobox {
margin: 0;
width: 300px;
}
/* Display ISO datetime stamp from <time> tags, in the case where JS is disabled and cannot be converted to local timezone */
time[datetime]:empty::before {
content: attr(datetime);
font-family: monospace;
}