MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
@import url("https://icannwiki.org/MediaWiki:Achievements.css?action=raw&ctype=text/css");
@import url("https://icannwiki.org/MediaWiki:Hubs.css?action=raw&ctype=text/css");
@import url("https://icannwiki.org/MediaWiki:Pages.css?action=raw&ctype=text/css");
@import url("https://icannwiki.org/MediaWiki:MainPage.css?action=raw&ctype=text/css");
@import url("https://icannwiki.org/MediaWiki:Templates.css?action=raw&ctype=text/css");
@import url("https://icannwiki.org/MediaWiki:Colors.css?action=raw&ctype=text/css");
/* MediaWiki:Common.css provides core styling, FURTHER IMPORTING THE CSS FILES ABOVE. The order of the imports DOES MATTER, as the further down on this list, the more precedence the file's rules will take. However, performance-wise, this makes no difference, as all CSS is delivered as a single bundle to the frontend. */
/* ------------------------------------------------------------------------- */
/* ANCHOR: PROPERTY GLOBAL VARIABLES */
:root {
/* REVIEW: --mobile-responsive-value: 41rem; may be allowed to be a variable in the future using "CSS Environment Variables" and "Custom Media Queries" */
--value-text-shadow-desktop: 2px 2px 4px;
--value-text-shadow-mobile: 1px 1px 2px;
--icannwiki-spacer-height-desktop: 0.75em;
--icannwiki-spacer-height-mobile: 0.6em;
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: GENERIC STYLES */
/* Separator */
.icannwiki-spacer {
height: var(--icannwiki-spacer-height-desktop);
display: block;
}
/* Separator (Mobile) */
/* By viewport */ @media screen and (max-width: 41rem) {
.icannwiki-spacer
{ height: var(--icannwiki-spacer-height-mobile); }
}
/* By skin */ .skin-minerva .icannwiki-spacer
{ height: var(--icannwiki-spacer-height-mobile); }
/* Centered horizontal divider */
.icannwiki-divider-centered {
height: 20px; /* Adjust for vertical spacing */
position: relative;
margin: 0;
}
.icannwiki-divider-centered::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: var(--divider-centered-color);
transform: translateY(-50%);
}
/* Colored container box for text */
.icannwiki-colored-box {
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
font-size: 1.05em;
background-color: var(--colored-box-bg-day);
color: var(--colored-box-text-color-day);
}
/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .icannwiki-colored-box {
background-color: var(--colored-box-bg-night);
color: var(--colored-box-text-color-night);
}
}
html.skin-theme-clientpref-night .icannwiki-colored-box {
background-color: var(--colored-box-bg-night);
color: var(--colored-box-text-color-night);
}
/* Colored box warning variant */
.icannwiki-colored-box-alternate {
background-color: rgba(250, 220, 70, 0.9);
color: var(--colored-box-text-color-day);
}
/* Hide bullets on lists */
.no-bullets {
list-style: none;
list-style-type: none;
padding-left: 0;
}
/* Hide second level bullets on lists */
.no-second-level-bullets ul ul {
list-style: none;
list-style-type: none;
padding-left: 0; /* Align with the parent list */
}
.no-second-level-bullets ul ul li
{ padding-left: 0px; /* Maintain alignment if needed */ }
/* Centered text */
.icannwiki-centered { text-align: center; }
/* Justified text */
.icannwiki-justified { text-align: justify; }
/* Bold text */
.icannwiki-bold { font-weight: bold; }
/* Larger text */
.icannwiki-font-large { font-size: 1.25em; }
/* Colored text */
.icannwiki-colored { color: var(--colored-text); }
/* Automatic text (adaptive to day and night) */
.icannwiki-automatic-text
{ color: var(--dark-text); }
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .icannwiki-automatic-text
{ color: var(--light-text); }
}
@media screen {
html.skin-theme-clientpref-night .icannwiki-automatic-text
{ color: var(--light-text); }
}
/* Uppercase text */
.icannwiki-uppercase { text-transform: uppercase; }
/* Change icon color: Green */
.filter-icon-green {
filter: brightness(0) saturate(100%) invert(34%) sepia(100%) saturate(300%) hue-rotate(100deg) brightness(90%) contrast(85%);
}
/* Change icon color: White (night mode only); with dummy rule */
.filter-icon-white {
text-shadow: none;
}
/* Night mode: Convert to white */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .filter-icon-white {
filter: brightness(0) invert(1);
}
}
html.skin-theme-clientpref-night .filter-icon-white {
filter: brightness(0) invert(1);
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: HACKS */
/* VECTOR 2022: Hard fix to remove the "Site notice" banner */
.vector-sitenotice-container
{ display: none !important; }
/* MAIN PAGE: Recommended-ish way to remove the title header */
.mainpage h1.page-header__title, body.page-Main_Page h1.firstHeading
{ display: none }
/* MAIN PAGE: Hard fix to remove the "Views" bar */
.page-Main_Page .vector-page-toolbar-container {
display: none !important;
border-bottom: none !important;
}
/* MAIN PAGE: Hide categories */
.page-Main_Page #catlinks { display: none; }
/* MOBILE: Hard fix to manipulate the size of the forced MobileFrontend header */
.pre-content.heading-holder {
padding: 0 !important;
margin-bottom: 1em !important;
border: none !important;
}
/* MOBILE: Hard fix to reduce the large "mw-editsection" button on mobile */
:root {
--mw-editsection-mobile-font-size: 0.8em;
--mw-editsection-mobile-padding: 2px;
}
/* By viewport */ @media only screen and (max-width: 41rem) {
.mw-editsection {
font-size: var(--mw-editsection-mobile-font-size) !important;
padding: var(--mw-editsection-mobile-padding) !important;
}
}
/* By skin */ .skin-minerva .mw-editsection {
font-size: var(--mw-editsection-mobile-font-size) !important;
padding: var(--mw-editsection-mobile-padding) !important;
}
/* SEARCH: Hack to collapse Advanced Search by default, augmented by the gadget CollapseAdvancedSearch.js */
/* Panel: never flash; only show when user opens via external control */
.client-js #mw-searchoptions { display: none }
.client-js #mw-searchoptions.icw-open { display: block }
/* Hide the fieldset’s own toggle; we control visibility externally */
.client-js #mw-searchoptions .mw-collapsible-toggle { display: none !important }
/* Tabs bar to flex so we can right-align the custom control cleanly */
.client-js .mw-search-profile-tabs .search-types ul {
display: flex;
align-items: center;
flex-wrap: wrap; /* for narrow screens */
gap: .25rem;
}
/* Right-align the Filters button */
.client-js .mw-search-profile-tabs .search-types li.filters-toggle {
margin-left: auto;
list-style: none; /* be safe across skins */
}
/* Presentation */
.client-js .mw-search-profile-tabs .search-types li.filters-toggle > button.icw-filters-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .35rem .65rem;
line-height: 1.2;
border: 1px solid rgba(0,0,0,.25);
border-radius: .4rem;
background: rgba(0,0,0,.04);
font-weight: 600;
cursor: pointer;
}
/* Hover/focus states */
.client-js .mw-search-profile-tabs .search-types li.filters-toggle > button.icw-filters-btn:hover {
background: rgba(0,0,0,.08);
}
.client-js .mw-search-profile-tabs .search-types li.filters-toggle > button.icw-filters-btn:focus {
outline: 2px solid #36c; /* Vector-ish focus color; adjust if needed */
outline-offset: 2px;
}
/* Open state accent (optional) */
.client-js .mw-search-profile-tabs .search-types li.filters-toggle.is-open > button.icw-filters-btn {
background: rgba(0,0,0,.12);
border-color: rgba(0,0,0,.35);
}
/* EXTENSION (Lingo): Fix to hide in-line ToC (https://phabricator.wikimedia.org/T348465) */
#mw-content-text #toc
{ display: none; }
/* EXTENSION: Hacks for extensions/features that lack native dark mode support; permanent dark mode */
/* Special:RequestAccount */
textarea#wpBio, textarea#wpNotes { background: none !important; }
/* ConfirmAccount */
li.mw-confirmaccount-type-0
{ background: var(--forced-dark-accent-color) !important; }
/* Semantic Media Wiki */ .smw-ask-result, .smw-factedsearch-intro, .smw-table.smw-ask-options-list { color: var(--dark-text) !important}
/* ConfirmAccount */ .mw-confirmaccount-body-0, .mw-confirmaccount-msg, .mw-confirmaccount-bar, #wpNewBio, /* CiteThisPage */ .mw-specialCiteThisPage-bibliographic, #Bibliographic_details_for_Main_Page, /* Replace Text */ .ext-replacetext-searchoptions h4, .ext-replacetext-searchoptions,
/* Page Forms */ .templateForm, .oo-ui-dropdownInputWidget option
{
background: var(--forced-dark-color) !important;
color: var(--light-text) !important;
}
/* EXTENSION (CiteThisPage): Fix for extension-enforced red links */
.mw-specialCiteThisPage-styles h3 .mw-headline a {
color: var(--dark-text);
text-decoration: none;
pointer-events: none;
cursor: text;
}
/* Night theme */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .mw-specialCiteThisPage-styles h3 .mw-headline a
{ color: var(--light-text); }
}
@media screen {
html.skin-theme-clientpref-night .mw-specialCiteThisPage-styles h3 .mw-headline a
{ color: var(--light-text); }
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: CUSTOM LOGO HANDLING (WIKIMEDIA 1.43) */
/* DESKTOP & MOBILE */
/* Base logo containers */
.vector-header.mw-header .mw-logo, .branding-box a {
display: block;
position: relative;
overflow: hidden;
text-indent: -9999px; /* Hide built‑in text */
/* Responsive width (~200px) */
width: clamp(7.5rem, 20vw, 12.5rem);
/* Maintain a 4:1 horizontal ratio using calc() */
height: calc(clamp(7.5rem, 20vw, 12.5rem) / 4);
aspect-ratio: 4 / 1;
}
/* Insert horizontal logo via a pseudo-element */
.vector-header.mw-header .mw-logo::before, .branding-box a::before {
content: "";
display: block;
background: url("/images/2/28/ICANNWiki-Logo-2025-Horizontal.png") no-repeat center;
background-size: contain;
width: 100%;
height: 100%;
}
/* Provide screen reader text */
.vector-header.mw-header .mw-logo::after, .branding-box a::after {
content: "ICANNWiki logo";
position: absolute;
left: -9999px;
}
/* DESKTOP */
.vector-header.mw-header .mw-logo {
padding: 0 !important;
margin: 0 !important;
width: clamp(7.5rem, 20vw, 12.5rem) !important;
height: calc(clamp(7.5rem, 20vw, 12.5rem) / 4) !important;
aspect-ratio: 4 / 1 !important;
/* Add responsive left margin */
margin-left: clamp(0.5rem, 2vw, 1rem) !important;
/* Scale down the logo by 15% */
transform: scale(0.85);
transform-origin: left center;
}
/* Hide existing image(s) within the logo container */
.vector-header.mw-header .mw-logo img { display: none !important; }
/* MOBILE */
/* Hide Minerva footer logo */
.minerva-footer-logo
{ display: none !important; }
/* Additional positioning */
.branding-box a::before {
position: absolute;
top: 0;
left: 0;
}
/* Hide the internal span and its img */
.branding-box a span
{ display: none !important; }
/* ------------------------------------------------------------------------- */
/* ANCHOR: UI STYLES */
/* "Edit" page summary bar */
.oo-ui-fieldLayout-header { margin-top: 1em; }
/* "Edit" page templates list */
/* Split into two columns */
.templatesUsed > ul.mw-editfooter-list.mw-made-collapsible:not(.mw-collapsed) {
column-count: 2;
column-gap: 1rem;
}
/* Avoid breaking an item across columns */
.templatesUsed > ul.mw-editfooter-list.mw-made-collapsible > li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
/* Mobile */
@media (max-width: 720px) {
.templatesUsed > ul.mw-editfooter-list.mw-made-collapsible:not(.mw-collapsed) {
column-count: 1;
}
}
/* EXTENSION: Lingo, decoration of acronym links */
a.mw-lingo-term {
text-decoration: underline double var(--lingo-underline-color) !important;
text-decoration-thickness: 1px !important;
cursor: default;
border-bottom: none;
}
/* EXTENSION: Lingo, content of popup on hover */
.qtip-content {
padding: 8px;
line-height: 125%;
font-size: 1.25em;
}
.qtip-content a
{ color: var(--general-link-color); }
/* EXTENSION: Lingo, remove visual markup within template tables */
.template-table .mw-lingo-term {
text-decoration: none !important;
cursor: text !important;
}
.template-table .mw-lingo-term:hover::after {
display: none !important;
cursor: text !important;
}
/* JS EXTENSION: "Edit" (old) screen predefined summaries bar */
.predefined-summaries-bar {
background-color: var(--box-shading-lighter);
padding: 2px;
}
/* JS EXTENSION: Back to Top gadget */
#icw-back-to-top{
position:fixed; bottom:20px; right:20px; z-index:100;
width:42px; height:42px; border-radius:50%;
background:var(--general-link-color);
cursor:pointer; text-decoration:none;
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#icw-back-to-top.is-visible
{ opacity:0.8; pointer-events:auto; }
#icw-back-to-top:hover
{ background-color: var(--hover-link-color); }
/* ------------------------------------------------------------------------- */
/* ANCHOR: VECTOR 2022: GENERAL */
/* "Profile" widget styling */
#p-vector-user-menu-userpage a span
{ font-weight: 600; }
/* Footer size control */
.skin-vector-2022 .mw-footer-container {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
margin-top: 0 !important;
margin-bottom: 0.5rem !important;
}
/* ALL LATERAL NAVIGATION PANELS */
/* Font size */
.vector-column-start a span, nav.vector-page-tools-landmark a span, #toc-mw-content-text .vector-toc-text
{ font-size: 1.1em; }
/* Link effects */
/* IMPORTANT: SOCIAL MEDIA ICON EFFECTS AS A WHOLE ARE HANDLED BY MediaWiki:Gadget-OpenExternal.js */
#mw-panel a, #vector-main-menu a, .mw-list-item a, nav.vector-page-tools-landmark a {
width: 100%;
transition: all 0.2s ease-out;
transform-origin: center;
}
#mw-navigation #mw-panel a:hover, #vector-main-menu a:hover, nav.vector-page-tools-landmark a:hover, .mw-list-item a:hover {
transform: scale(1.05);
text-decoration: none;
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: VECTOR 2022: SIDEBAR CUSTOMIZATION */
/* LEFT SIDEBAR */
/* Remove "Switch to old look" prompt (MediaWiki 1.43) */
.vector-main-menu-action-opt-out
{ display: none !important; }
/* Styling of the custom "Sponsor us" menu entry; this ID is auto-generated based on the text entered on https://icannwiki.org/MediaWiki:Sidebar, and if that text changes, the ID changes! */
#n-Sponsor-us a span {
color: var(--general-link-color);
font-size: 1.25em;
}
#n-Sponsor-us a span:hover
{ color: var(--hover-link-color) }
/* RIGHT SIDEBAR */
/* Customization of entries via ID removal (Some ported to the left sidebar) */
#t-print, #t-info, #t-recentchangeslinked, #t-specialpages, #t-upload
{ display: none !important; }
/* Enable link effects */
nav.vector-page-tools-landmark a
{ display: block; }
/* GADGET: SIDEBAR IMAGES */
/* IMPORTANT: Configuration is co-dependent with that of MediaWiki:Gadget-SidebarImages.js */
/* Prepare the SPECIFIC targeted LI elements */
#n-Social-Links {
list-style-image: none !important;
list-style-type: none !important;
opacity: 0;
pointer-events: none;
}
/* SPECIAL: Social media bar style */
.sidebar-icon-group {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
/* SPECIAL: Social media bar navigation anchor override */
#n-Social-Links .sidebar-icon-group a {
width: auto !important; /* Override the inherited width of 100% */
display: inline-block;
flex: none; /* Prevent any flex behavior on the anchors themselves */
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: VECTOR 2022: LOGIN AND REGISTER */
/* Common attributes */
.skin-vector-2022 #p-vector-user-menu-overflow .vector-menu-content-list #pt-login-2 > a,
.skin-vector-2022 #p-vector-user-menu-overflow .vector-menu-content-list #pt-createaccount-2 > a {
border: 1px solid var(--template-border-color);
font-size: 1.2em;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
text-decoration: none;
}
/* "Log in" specific styles */
.skin-vector-2022 #p-vector-user-menu-overflow .vector-menu-content-list #pt-login-2 > a
{ background-color: var(--colored-box-bg-day); }
.skin-vector-2022 #pt-login-2 > a > span
{ color: var(--dark-text) }
/* "Request account" specific styles */
.skin-vector-2022 #p-vector-user-menu-overflow .vector-menu-content-list #pt-createaccount-2 > a
{
background-color: var(--section-header-bg-color);
position: relative;
overflow: hidden;
}
.skin-vector-2022 #pt-createaccount-2 > a > span
{ color: var(--light-text) }
/* Sheen effect on "Request account"; once per render */
.skin-vector-2022 #p-vector-user-menu-overflow .vector-menu-content-list #pt-createaccount-2 > a::after {
content: '';
position: absolute;
top: 0;
left: -30px;
width: 30px;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(154, 216, 162, 0.3) 100%
);
animation: requestaccount-sheen 1.5s 1 forwards; /* Run once only and maintain final state */
opacity: 0;
}
@keyframes requestaccount-sheen {
0% { left: -30px; opacity: 0; }
10% { opacity: 1; }
40% { opacity: 1; }
100% { left: 85%; opacity: 0; }
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: MINERVA NEUE */
/* Styling for the "Register" button added via JS to the mobile sidebar; the desired image itself is declared in Common.js, but Minerva is particular about which images it allows, only accepting those already loaded within the DOM */
#p-personal li.menu__item--register a {
display: flex;
align-items: center;
padding: 0.5em 1em;
margin: -0.1em; /* Line up the inserted icon with the others */
color: inherit;
text-decoration: none;
}
/* The colors themselves are declared in JS */
.toggle-list-item.menu__item--register .minerva-icon {
/* Tint */
filter: brightness(0) saturate(100%) invert(34%) sepia(100%) saturate(300%) hue-rotate(100deg) brightness(90%) contrast(85%);
margin-right: 0.2em;
}
/* Add "Search" text link next to the magnifying glass when Minerva hides the search box */
@media screen and (max-width: 41rem) {
form.minerva-search-form .skin-minerva-search-trigger::before {
content: "SEARCH";
display: inline-block;
margin-right: 0.5em;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
color: var(--minerva-search-text);
}
}
/* Footer size control */
.mw-footer.minerva-footer .post-content.footer-content {
margin-top: 1rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Landscape mobile mode: Center search bar */
@media screen and (orientation: landscape) {
.minerva-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.minerva-header .branding-box {
flex: 0 0 auto;
}
.minerva-header .minerva-search-form {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.minerva-header .minerva-search-form .search-box {
width: min(460px, 70vw);
margin: 0 auto;
}
}
/* SidebarImagesMobile.js: Bottom social icons container */
.skin-minerva #icw-minerva-social-icons.icw-minerva-social-icons {
display: flex;
justify-content: center;
}
/* SidebarImagesMobile.js: Layout for the icon group */
.skin-minerva #icw-minerva-social-icons .sidebar-icon-group {
display: flex;
gap: 16px;
align-items: center;
}
/* SidebarImagesMobile.js: Remove separator line above the social icons slot */
.skin-minerva #icw-minerva-social-icons.icw-minerva-social-icons {
border-top: 0 !important;
}
/* ------------------------------------------------------------------------- */
/* ANCHOR: SEMANTIC MEDIA WIKI */
/* SMW: Remove Semantic Media Wiki's startup animation on page load; since we forcibly free up space at the top of the wiki, these generate bad UX by temporarily forcing the expansion of the content area */
.mw-indicators, .mw-indicator, [class*="mw-indicator-smw"]
{ display: none !important; }
/* SMW: Override MediaWiki-generated Semantics sticky header to align with top of viewport */
@media (min-width: 1120px) {
.client-js.vector-sticky-header-enabled .mw-sticky-header-element,
.client-js.vector-sticky-header-enabled .charts-stickyhead th {
top: 0 !important;
}
}
/* SMW: Hide the Factbox tab label "Facts" + Radial button + "RDF Feed" icon */
#mw-data-after-content .smw-factbox-container #tab-label-facts-list, .nav-tab, .smw-factbox-actions
{ display: none; }
/* SMW: Make the Factbox title font smaller */
.smw-factbox-title
{ font-size: 1.05em; }
/* ------------------------------------------------------------------------- */
/* ANCHOR: Page ID Display */
#icw-page-id {
font-size: 1em;
color: var(--dark-text);
text-align: center;
padding: 0.25em 0.5em;
margin: 0;
font-family: monospace;
user-select: text; /* Allow text selection for copying */
}
/* Dark theme support for page ID */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os #icw-page-id {
color: var(--light-text);
}
}
@media screen {
html.skin-theme-clientpref-night #icw-page-id {
color: var(--light-text);
}
}
/* Mobile responsiveness */
/* By viewport */ @media screen and (max-width: 41rem) {
#icw-page-id {
font-size: 0.7em;
}
}
/* By skin */ .skin-minerva #icw-page-id {
font-size: 0.7em;
}
/* ------------------------------------------------------------------------- */