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
Tag: Reverted
No edit summary
 
(17 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
}
}
@layer base {
:is(html.skin-theme-clientpref-night,
   /* Always apply */
html.skin-citizen-dark,
   .citizen-overflow-wrapper:has(.citizen-overflow-content .wikitable) {
[data-theme="dark"]) .navbox {
    float: right;
   color:#9a9a9a !important;
    clear: right;
   background:#000 !important
     margin-left: 5px;
}
  }
: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 scopes */
}
  :is(html.skin-theme-clientpref-night,
table.ambox {
      html.skin-citizen-dark,
    background-color: var(--color-surface-2, #f8f9fa) !important;
      [data-theme="dark"]) .navbox {
     color: var(--color-base, #202122) !important;
     color: #9a9a9a !important;
     border: 1px solid var(--border-color-base, #a2a9b1);
     background: #000 !important;
}
  }


  /* Zebra striping */
.ambox-notice {
  :is(html.skin-theme-clientpref-night,
     border-left-color: var(--color-primary, #36c) !important;
      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 !important;
  }
  :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 !important;
  }


  /* Title style */
.ambox a {
  :is(html.skin-theme-clientpref-night,
     color: var(--color-primary, #36c) !important;
      html.skin-citizen-dark,
}
      [data-theme="dark"]) .navbox .navbox-title {
    background: #1b1b1b !important;
     color: #e6e6e6 !important;
    border-color: #2a2a2a !important;
  }


  /* Borders & links */
html.skin-theme-clientpref-night .ambox .mbox-image img,
  :is(html.skin-theme-clientpref-night,
html.skin-theme-clientpref-night .ambox .mbox-imageright img {
      html.skin-citizen-dark,
     filter: invert(1) hue-rotate(180deg);
      [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: inherit;
  }
}
}


@layer overrides {
@media (prefers-color-scheme: dark) {
  /* White group bg → keep white text */
     html.skin-theme-clientpref-os .ambox .mbox-image img,
  :is(html.skin-theme-clientpref-night,
    html.skin-theme-clientpref-os .ambox .mbox-imageright img {
      html.skin-citizen-dark,
        filter: invert(1) hue-rotate(180deg);
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #ffffff"],
     }
  :is(html.skin-theme-clientpref-night,
}
      html.skin-citizen-dark,
.infobox-track .infobox-image img {
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#ffffff"],
   width: 350px;
  :is(html.skin-theme-clientpref-night,
   height: auto;
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: white"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:white"] {
     background: none !important;
    color: #ffffff !important;
  }
 
  /* Green */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #07f507"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#07f507"] {
    background: none !important;
    color: #07f507 !important;
  }
 
  /* Blue */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #42caff"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#42caff"] {
    background: none !important;
     color: #42caff !important;
  }
 
  /* Red */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #ff0f0f"],
   :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#ff0f0f"] {
    background: none !important;
    color: #ff0f0f !important;
   }
 
  /* Special black group → white bg, black text */
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background:#000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background: #000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background-color:#000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background-color: #000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background:#000000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background: #000000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background:black"] {
    background: none !important;
    color: #000 !important;
    text-shadow: 0 0 10px #fff;
  }
}
}

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;
}