MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be loaded for all skins.
 * See [[MediaWiki:Vector-2022.css]] for CSS loaded for the desktop skin. 
 * See [[MediaWiki:Citizen.css]] for CSS loaded for the mobile skin. 
 */
/*=========*
 | IMPORTS |
 *=========*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=El+Messiri:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:[email protected]&display=swap');


@import url("/index.php?title=MediaWiki:Description.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Edittools.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Fonts.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Formatting.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Hatnote.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:InputText.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Life Guide.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:References.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:TemplateData.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Variables.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:Keys.css&action=raw&ctype=text/css");


/*==============*
 | CONTENT BODY |
 *==============*/
/* Background */
body {
    background-color: var(--background-color-0) !important;
} 

/* Wordmark */
.skin-theme-clientpref-day .mp-header-wordmark img {
   filter: invert(1) hue-rotate(180deg);
}

/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
.mobileHide,
.mobile-only,
.no-desktop {
    display: none;
}

/* Links */
a:where(:not([role='button'])),
a:where(:not([role='button'])):hover,
a:where(:not([role='button'])):visited,
a:where(:not([role='button'])):visited:hover,
a:where(:not([role='button'])):visited:active,
a:where(:not([role='button'])):active {
    color: var(--color-progressive);
}

a:where(.new:not([role='button'])),
a:where(.new:not([role='button'])):hover,
a:where(.new:not([role='button'])):visited,
a:where(.new:not([role='button'])):visited:hover,
a:where(.new:not([role='button'])):visited:active,
a:where(.new:not([role='button'])):active {
    color: var(--color-destructive);
}

/* Popups */
.mwe-popups {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 90px -20px var(--background-color-1b), 0 0 0 1px var(--background-color-1b);
}

.mwe-popups-container {
    background: var(--background-color-0b) !important;
    border-radius: 10px;
    overflow: hidden;
}

.mwe-popups .mwe-popups-extract[dir='ltr']::after {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background-color-0b) 50%) !important;
}

/*===============*
 | MISCELLANEOUS |
 *===============*/
/* Pipe delimiter */
.mw-content-ltr ul.pipe_delimit {
    margin: 0px;
}

.mw-content-ltr ul.pipe_delimit li {
    display:inline;
}

.mw-content-ltr ul.pipe_delimit li + li::before {
    content: " | ";
}

/* SyntaxHighlight copy button */
.mw-highlight-copy--bound button {
    top: -0.5rem;
    right: 0;
    padding: 0.25rem 0.35rem;
    border-radius: 10px;
    background: var(--color-accent);
    border-color: var(--background-color-1);
    color: var(--color-accent-text);
}

.mw-highlight-copy--bound button:hover,
.mw-highlight-copy--bound button:active {
    background: var(--background-color-2);
    border-color: var(--color-progressive);
    color: var(--color-progressive);
}

/* Additional inverts and filters */
/* Default MediaWiki invert classes: .skin-invert and .skin-invert-image */
.skin-theme-clientpref-day .day-invert-image,
.skin-theme-clientpref-day .light-invert-image {
    filter: invert(65%) hue-rotate(180deg);
}

.skin-theme-clientpref-night .night-invert-image,
.skin-theme-clientpref-night .dark-invert-image {
    filter: invert(85%) hue-rotate(180deg);
}

@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os .night-invert-image,
    .skin-theme-clientpref-os .dark-invert-image {
        filter: invert(85%) hue-rotate(180deg);
    }
}

.filter-opacity-60 {
    filter: opacity(60%);
}


/* ==========================================================
 * Generic Pill
 * ========================================================== */

.pill, ul.pill-list > li {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
    border-radius: 10px;
    background: var(--background-color-2);
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

ul.pill-list li {
    margin-right: 4px;
    margin-bottom: 4px;
}

.pill:hover,
.pill:focus-visible,
ul.pill-list > li:hover,
ul.pill-list > li:focus-within {
    background: var(--background-color-2);
    box-shadow: 0 0 0 1px var(--background-color-4);
}

/* remove after from pill in navbox */
.ranger-list .pill-list li::after {
	display: none;
}


/* Cite and Verify */
.cite-template, .verify {
	background-color: color-mix(var(--background-color-4) 50%, transparent 50%);
	padding: 0 3px;
	font-size: 10px;
	border-radius: 3px;
	color: var(--background-color-10);
}