MediaWiki:Common.css: Difference between revisions

Latest revision as of 05:24, 24 December 2023

/* CSS placed here will be applied to all skins */
.page-Main_Page .firstHeading {
	display: none;
}

/* Link colors chosen for level AA conformance, see T233266 and T213778 */
@media screen {
  /* set height for Monobook and Timeless, because the filter in FF needs dimensions to get it to apply */
  html {
    height: 100%;
  }
  .ext-darkmode-link::before {
    content: '\263E';
    /* Moon icon */
    display: inline-block;
  }
  /* Vector 2022 has its own icon, set in Hooks.php */
  .skin-vector-2022 .ext-darkmode-link::before {
    display: none;
  }
  /* START OF DARKMODE STYLES */
  .client-darkmode {
    /* Needed for some skins that have weird DOM structures and CSS such that elements don't appear over the <body> */
    /* This also helps save energy on OLED displays (such as smart phones). */
    background: #fff;
    /* "Default mode" link */
    /* Reset overrides, needed where double application above isn't working. */
    /* Vector modern */
    /* Backgrounds */
    /* Borders */
    /* Links */
    /* Links: normal */
    /* Visited links */
    /* Links: red */
    /* ::: Special Element Treatments ::: */
    /* Image thumbnails */
    /* Content image (thumbnail) SVGs */
    /* `*not( .mbox-image )` exception doesn't work for unclear reasons */
    /* Dealing with false positives from selector above */
    /* Page previews */
    /* Contributions menu */
    /* Mobile logo header */
  }
  .client-darkmode .ext-darkmode-link::before {
    content: '\263C';
    /* Sun icon */
  }
  .client-darkmode:not( .mw-invert ),
  .client-darkmode img:not( .mw-invert ),
  .client-darkmode video:not( .mw-invert ),
  .client-darkmode svg:not( .mw-invert ),
  .client-darkmode iframe:not( .mw-invert ),
  .client-darkmode .mw-no-invert:not( .mw-invert ),
  .client-darkmode .cdx-no-invert:not( .mw-invert ),
  .client-darkmode td .diffchange:not( .mw-invert ),
  .client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content:not( .mw-invert ) {
    filter: invert(1) hue-rotate(180deg);
    -webkit-filter: invert(1) hue-rotate(180deg);
  }
  .client-darkmode .skin-vector .mw-logo-wordmark,
  .client-darkmode .skin-vector .mw-logo-tagline,
  .client-darkmode .skin-timeless .mw-wiki-title > img,
  .client-darkmode .cdx-icon svg {
    filter: none;
  }
  .client-darkmode table,
  .client-darkmode table.ambox-content,
  .client-darkmode table.toccolours,
  .client-darkmode .mw-notification,
  .client-darkmode .mwe-popups,
  .client-darkmode .infobox,
  .client-darkmode .toc,
  .client-darkmode .thumbinner,
  .client-darkmode .wikitable,
  .client-darkmode .cbnnr-main,
  .client-darkmode .cx-callout,
  .client-darkmode #simpleSearch,
  .client-darkmode #searchInput,
  .client-darkmode #centralNotice .cnotice {
    background-color: #ddd;
  }
  .client-darkmode,
  .client-darkmode h1,
  .client-darkmode h2,
  .client-darkmode h3,
  .client-darkmode h4,
  .client-darkmode h5,
  .client-darkmode h6,
  .client-darkmode table.ambox-content,
  .client-darkmode table.toccolours,
  .client-darkmode .mw-notification,
  .client-darkmode .infobox,
  .client-darkmode .toc,
  .client-darkmode .thumbinner,
  .client-darkmode #mw-head,
  .client-darkmode #mw-panel,
  .client-darkmode #content.mw-body,
  .client-darkmode #simpleSearch,
  .client-darkmode #searchInput,
  .client-darkmode #centralNotice .cnotice {
    border-color: #cdcbc8;
  }
  .client-darkmode a,
  .client-darkmode .vector-menu-tabs li a,
  .client-darkmode .vectorTabs li a,
  .client-darkmode .toctogglelabel,
  .client-darkmode .mw-parser-output a.external,
  .client-darkmode .mw-parser-output a.extiw,
  .client-darkmode .mw-parser-output a.extiw:active,
  .client-darkmode #mw-panel .portal .body li a {
    color: #36c;
  }
  .client-darkmode a:visited,
  .client-darkmode .mw-parser-output a.extiw:visited,
  .client-darkmode #mw-panel .portal .body li a:visited {
    color: #6b4ba1;
  }
  .client-darkmode a.new,
  .client-darkmode .vector-menu-tabs li.new a,
  .client-darkmode .vectorTabs li.new a {
    color: #ff6e6e;
  }
  .client-darkmode .thumbimage {
    border: 0;
  }
  .client-darkmode .image img[src*='svg'] {
    background-color: #fff;
    border-radius: 1px;
  }
  .client-darkmode .mw-echo-ui-notificationItemWidget-icon img[src*='svg'],
  .client-darkmode .mbox-image .image img[src*='svg'],
  .client-darkmode .image img[alt^='Symbol'] {
    background-color: transparent;
  }
  .client-darkmode .mwe-popups {
    box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px #000;
  }
  .client-darkmode .mwe-popups.flipped-y::after,
  .client-darkmode .mwe-popups.flipped-x-y::after {
    border-top: 11px solid #ddd;
  }
  .client-darkmode .mwe-popups.mwe-popups-no-image-pointer::after {
    border-bottom: 11px solid #ddd;
  }
  .client-darkmode html .cx-callout-1::after {
    border-bottom-color: #ddd;
  }
  .client-darkmode html .branding-box img {
    filter: brightness(0);
  }
}
MediaWiki:Common.css: Difference between revisions

Latest revision as of 05:24, 24 December 2023

Navigation menu

Search
