Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
.citizen-overflow-wrapper:has(.citizen-overflow-content .wikitable) {
.citizen-overflow-wrapper:has(.citizen-overflow-content .wikitable) {
   float: right;
   float:right;
   clear: right;
   clear:right;
   margin-left: 5px;
   margin-left:5px
}
}
/* Base (light) */
:is(html.skin-theme-clientpref-night,
:root {
html.skin-citizen-dark,
  --navbox-bg: #f9f9f9;
[data-theme="dark"]) .navbox {
  --navbox-head: #e6e6e6;
   color:#9a9a9a !important;
   --navbox-text: #202122;
   background:#000 !important
   --navbox-border: #a2a9b1;
}
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox tr:has(> td.navbox-list.navbox-odd),
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox td.navbox-list.navbox-odd,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox th.navbox-group:has(+ td.navbox-list.navbox-odd) {
  background-color:#000
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox tr:has(> td.navbox-list.navbox-even),
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox td.navbox-list.navbox-even,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox th.navbox-group:has(+ td.navbox-list.navbox-even) {
  background-color:#111
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox .navbox-title {
  background:#1b1b1b !important;
  color:#e6e6e6 !important;
  border-color:#2a2a2a !important
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox td,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox th {
  border-color:#2a2a2a !important
}
.navbox a {
  color:none
}
.thumb-custom img {
  width: var(--thumb-width, auto) !important;
  height: auto !important;
}
.mw-highlight pre, .hljs, pre code {
    padding-left: 13px !important;
    padding-top: 10px !important;


/* Dark mode */
}
@media (prefers-color-scheme: dark) {
table.ambox {
  :root {
    background-color: var(--color-surface-2, #f8f9fa) !important;
    --navbox-bg: #1b1b1b;
    color: var(--color-base, #202122) !important;
     --navbox-head: #262626;
     border: 1px solid var(--border-color-base, #a2a9b1);
     --navbox-text: #e6e6e6;
}
    --navbox-border: #3a3a3a;
 
  }
.ambox-notice {
     border-left-color: var(--color-primary, #36c) !important;
}
}


/* Apply to navboxes */
.ambox a {
.navbox,
    color: var(--color-primary, #36c) !important;
.navbox-subgroup {
  background: var(--navbox-bg) !important;
  color: var(--navbox-text) !important;
  border: 1px solid var(--navbox-border) !important;
}
}


.navbox .navbox-title,
html.skin-theme-clientpref-night .ambox .mbox-image img,
.navbox-group,
html.skin-theme-clientpref-night .ambox .mbox-imageright img {
.navbox th {
    filter: invert(1) hue-rotate(180deg);
  background: var(--navbox-head) !important;
  color: var(--navbox-text) !important;
  border-color: var(--navbox-border) !important;
}
}


/* Links inherit readable color */
@media (prefers-color-scheme: dark) {
.navbox a { color: inherit; }
    html.skin-theme-clientpref-os .ambox .mbox-image img,
.navbox a:visited { opacity: .9; }
    html.skin-theme-clientpref-os .ambox .mbox-imageright img {
        filter: invert(1) hue-rotate(180deg);
    }
}
.infobox-track .infobox-image img {
  width: 350px;
  height: auto;
}

Latest revision as of 22:34, 31 January 2026

.citizen-overflow-wrapper:has(.citizen-overflow-content .wikitable) {
  float:right;
  clear:right;
  margin-left:5px
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox {
  color:#9a9a9a !important;
  background:#000 !important
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox tr:has(> td.navbox-list.navbox-odd),
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox td.navbox-list.navbox-odd,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox th.navbox-group:has(+ td.navbox-list.navbox-odd) {
  background-color:#000 
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox tr:has(> td.navbox-list.navbox-even),
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox td.navbox-list.navbox-even,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox th.navbox-group:has(+ td.navbox-list.navbox-even) {
  background-color:#111 
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox .navbox-title {
  background:#1b1b1b !important;
  color:#e6e6e6 !important;
  border-color:#2a2a2a !important
}
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox td,
:is(html.skin-theme-clientpref-night,
html.skin-citizen-dark,
[data-theme="dark"]) .navbox th {
  border-color:#2a2a2a !important
}
.navbox a {
  color:none
}
.thumb-custom img {
  width: var(--thumb-width, auto) !important;
  height: auto !important;
}
.mw-highlight pre, .hljs, pre code {
    padding-left: 13px !important;
    padding-top: 10px !important;

}
table.ambox {
    background-color: var(--color-surface-2, #f8f9fa) !important;
    color: var(--color-base, #202122) !important;
    border: 1px solid var(--border-color-base, #a2a9b1);
}

.ambox-notice {
    border-left-color: var(--color-primary, #36c) !important;
}

.ambox a {
    color: var(--color-primary, #36c) !important;
}

html.skin-theme-clientpref-night .ambox .mbox-image img,
html.skin-theme-clientpref-night .ambox .mbox-imageright img {
    filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .ambox .mbox-image img,
    html.skin-theme-clientpref-os .ambox .mbox-imageright img {
        filter: invert(1) hue-rotate(180deg);
    }
}
.infobox-track .infobox-image img {
  width: 350px;
  height: auto;
}