MediaWiki:Common.css: Difference between revisions

From razwiki
Jump to navigation Jump to search
(Created page with "→‎CSS placed here will be applied to all skins: .page-Main_Page .firstHeading { display: none; }")
 
No edit summary
 
Line 2: Line 2:
.page-Main_Page .firstHeading {
.page-Main_Page .firstHeading {
display: none;
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);
}
}
}

Latest revision as of 06: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);
  }
}