「MediaWiki:Common.css」の版間の差分

2025年12月13日 (土) 18:07時点における最新版

/* CSS placed here will be applied to all skins */

/*
 * Remove icon from links to wiki.archlinux.org because they are sometimes
 * used for example to link to edit diffs or in status templates for the
 * "Discuss" link
 */

.mw-body-content a.external[href ^="http://wiki.archlinux.org"],
.mw-body-content a.external[href ^="https://wiki.archlinux.org"] {
	background: none;
	padding-right: 0;
}


/* Template:Pkg, Template:AUR, Template:Grp, Template:Man */

span.archwiki-template-pkg,
span.archwiki-template-man {
	font-family: monospace, monospace;
}


/* Note, Warning, Tip templates */

:root {
	--archwiki-template-note-background-color: light-dark(#dff0ff, #08212e);
	--archwiki-template-note-border-color: #08c;

	--archwiki-template-warning-background-color: light-dark(#fdd, #390009);
	--archwiki-template-warning-border-color: #ff5757;
	
	--archwiki-template-tip-background-color: light-dark(#dfd, #002400);
	--archwiki-template-tip-border-color: #4dcb4d;

	--archwiki-template-highlight-background-color: light-dark(#ffffaa, #1f1f00);
	--archwiki-template-highlight-border-color: #fbe779;
}

div.archwiki-template-box {
	margin: 1em 0;
	padding: 0.5em 1em;
	border: thin solid light-dark(black, white);
	border-left-width: 0.25rem;
	overflow: hidden;

	& > strong:first-child {
		display: block;
		border-bottom: 1px solid var(--border-color-base, #ccc);
		margin-bottom: 0.5em;
		padding-bottom: 0.25em;
	}
}
div.archwiki-template-box.archwiki-template-box-note {
	background-color: var(--archwiki-template-note-background-color);
	border-color: var(--archwiki-template-note-border-color);
}
div.archwiki-template-box.archwiki-template-box-warning {
	background-color: var(--archwiki-template-warning-background-color);
	border-color: var(--archwiki-template-warning-border-color);
}
div.archwiki-template-box.archwiki-template-box-tip {
	background-color: var(--archwiki-template-tip-background-color);
	border-color: var(--archwiki-template-tip-border-color);
}
div.archwiki-template-box.archwiki-template-box-highlight {
	background-color: var(--archwiki-template-highlight-background-color);
	border-color: var(--archwiki-template-highlight-border-color);
}


/* Navigation templates */

:root {
	--archwiki-template-navigation-background-color: light-dark(#f9faff, #101418);
	--archwiki-template-navigation-border-color: light-dark(#d7dfe3, #1b2327);
}

.archwiki-template-navigation {
	margin: 1em 0;
	padding: 0.5em;
	border: thin solid var(--archwiki-template-navigation-border-color);
	overflow: hidden;
	background-color: var(--archwiki-template-navigation-background-color);
	text-align: center;

	& > hr {
		margin-right: -0.5em;
		margin-left: -0.5em;
	}
}


/* Status templates */

:root {
	--archwiki-template-message-background-color: light-dark(#f9faff, #000105);
	--archwiki-template-message-border-color: light-dark(#d7dfe3, #1b2327);
}

div.archwiki-template-message {
	position: relative;
	overflow: hidden; /* This e.g. prevents the template from overlapping the related articles box;
	                     using 'auto' would display a vertical scrollbar in e.g. Chromium and Opera:
	                     increasing min-height would fix it too, but this seems safer and more elegant */
	min-height: 48px; /* Needed to better host the icon at the side */
	margin: 1em 0;
	background-color: var(--archwiki-template-message-background-color);
	border: 1px solid var(--archwiki-template-message-border-color);
	padding-left: 74px;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;

	& > p > span[typeof="mw:File"] {
		display: block;
		position: absolute;
		top: 0.5em;

		&:first-of-type {
			left: 13px; /* the icon is 48px, centering in the 74px padding */
		}
	}
	& > div {
		font-size: 90%;
	}
	& img {
		background-color: inherit;
	}
}



/* Remove the white background from transparent images in Vector 2022 night mode */
@media screen {
	html.skin-theme-clientpref-night body.skin-vector-2022 div.archwiki-template-message img {
		background-color: inherit;
	}
	@media (prefers-color-scheme: dark) {
		html.skin-theme-clientpref-os body.skin-vector-2022 div.archwiki-template-message img {
			background-color: inherit;
		}
	}
}



/* Table cell templates */

:root {
	--archwiki-table-cell-background-red: light-dark(#faa, #6f1a24);
	--archwiki-table-cell-background-orange: light-dark(#fda, #59300a);
	--archwiki-table-cell-background-yellow: light-dark(#ffa, #4a3f00);
	--archwiki-table-cell-background-green: light-dark(#afa, #004100);
	--archwiki-table-cell-background-blue: light-dark(#def, #2a2a4b);
	--archwiki-table-cell-background-violet: light-dark(#dcf, #352457);
	--archwiki-table-cell-background-grey: light-dark(#ddd, #3f3f3f);
}

.archwiki-table-cell {
	background: inherit;
	color: inherit;
	vertical-align: middle;
	text-align: center;
}

.archwiki-table-cell.archwiki-template-r {
	background-color: var(--archwiki-table-cell-background-red);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-o {
	background-color: var(--archwiki-table-cell-background-orange);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-y {
	background-color: var(--archwiki-table-cell-background-yellow);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-g {
	background-color: var(--archwiki-table-cell-background-green);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-b {
	background-color: var(--archwiki-table-cell-background-blue);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-v {
	background-color: var(--archwiki-table-cell-background-violet);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-grey {
	background-color: var(--archwiki-table-cell-background-grey);
	color: var(--archwiki-text-color);
}
.archwiki-table-cell.archwiki-template-l {
	text-align: left;
}


/* Related articles templates */

div.archwiki-template-meta-related-articles {
	float: right;
	clear: right;
	width: 25%;
	margin: 0 0 0.5em 0.5em;

	& > p {
		background: #333;
		color: white;
		padding: 0.2em;
		border-bottom:5px #08c solid;
		margin: 0;
		text-align: center;
		font-weight: bold;
	}
	& > ul {
		list-style-type: none;
		list-style-image: none;
		/* Resetting the margin of ul is necessary for compatibility among browsers */
		margin: 0;
		padding: 0.3em;

		& > li {
			padding: 0.4em 0;
			/* line-height:1 makes wrapped long links distinguishable */
			line-height: 1;
		}
	}
}


/* NOTE: These elements are already dark so we set the inverted background color
 * and let dark mode invert it back to the original. See
 * https://www.mediawiki.org/wiki/Extension:DarkMode#Styling_elements_in_dark_mode
 */

@media screen and ( min-width: 721px ) {
	.client-darkmode div.archwiki-template-meta-related-articles > p {
		background: #ccc;
		color: black;
	}
}


/* Responsive style for the "Related articles" box, similar to category links */

@media screen and ( max-width: 720px ) {
	div.archwiki-template-meta-related-articles {
		float: initial;
		clear: initial;
		width: initial;
		border: 1px solid var(--border-color-base, #a2a9b1);
		background-color: var(--background-color-neutral-subtle, #f8f9fa);
		padding: 5px;
		margin: 1em 0;
		margin-top: 0; /* fix margin between catlinks and related articles */
		clear: both;

		& > p {
			background: initial;
			color: var(--archwiki-text-color);
			padding: 0;
			border: none;
			margin: 0;
			text-align: left;
			font-weight: normal;
			display: inline;
			&::after {
				content: ":";
			}
		}
		& > ul {
			margin: 0;
			padding: 0;
			display: inline;

			& > li {
				padding: 0;
				line-height: initial;
				display: inline;
				white-space: nowrap;
				padding: 0 0.5em;
				border-left: 1px solid #a2a9b1;

				&:first-child {
					padding-left: 0.25em;
					border-left: 0;
				}
				& a {
					font-weight: normal !important;
				}
			}
		}
	}
}


/* Template:Progressbar */

:root {
	--archwiki-template-progressbar-background-color: light-dark(#f9faff, #101418);
	--archwiki-template-progressbar-border-color: light-dark(#bcd, #384756);
	--archwiki-template-progressbar-inner-background-color: light-dark(#def, #2a2a4b);
}

.archwiki-template-progressbar {
	background-color: var(--archwiki-template-progressbar-background-color);
	border: 1px solid var(--archwiki-template-progressbar-border-color);
	margin: 0.5em 0;
	color: var(--archwiki-text-color);

	& > .archwiki-template-progressbar-inner {
		background-color: var(--archwiki-template-progressbar-inner-background-color);
		text-align: center;
	}
}


/* Hardware table for laptop pages */

@media ( min-width: 721px ) {
	.archwiki-table-laptop {
		float: right;
		margin-left: 1em;
	}
}


/*
 * Main Page columns
 * Keep coherent with https://gitlab.archlinux.org/search?search=width-breakpoint-tablet&project_id=82449&group_id=23&search_code=true&repository_ref=master
 */

@media screen and ( min-width: 721px ) {
	div.archwiki-main-page-columns {
		column-count: 2;

		& > * {
			page-break-inside: avoid;
			/* fix alignment of list items in multi-column layout, see https://stackoverflow.com/a/42349512 */
			display: inline-block;
			width: 100%;
		}
	}
}


/*
 * Override syntax highlighting style
 * (CodeMirror should just highlight, not change the size of elements)
 */

#content .CodeMirror pre {
	line-height: 1.5em;
}
#content pre.cm-mw-section-1,
#content pre.cm-mw-section-2 {
	line-height: 1.5em;
	font-size: inherit;
	font-weight: bold;
}
#content .cm-mw-pagename {
	/* avoid underlining which obfuscates underscores */
	text-decoration: unset;
}


/*
 * Add anonymous replaced elements to auto-number sections
 *
 * (This feature was removed in MediaWiki 1.38 for "performance reasons",
 * see https://www.mediawiki.org/wiki/MediaWiki_1.38#Other_changes )
 *
 * Note that MediaWiki does not have nested DOM elements for sections, so we
 * cannot use nested counters and have to hack it with several counters per
 * each level.
 *
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
 */

/* Create counters and set their initial value to 0. */
body {
	counter-reset: h2-section h3-section h4-section h5-section h6-section;
}

/* Set up resetting */
/* (note that counter-reset does not work) */
.mw-heading > h2 {
	counter-increment: h2-section;
	counter-set: h3-section h4-section h5-section h6-section;
}
.mw-heading > h3 {
	counter-increment: h3-section;
	counter-set: h4-section h5-section h6-section;
}
.mw-heading > h4 {
	counter-increment: h4-section;
	counter-set: h5-section h6-section;
}
.mw-heading > h5 {
	counter-increment: h5-section;
	counter-set: h6-section;
}
.mw-heading > h6 {
	counter-increment: h6-section;
}

/* Display the counters in the headings */
.mw-heading > h2::before {
	content: counter(h2-section);
}
.mw-heading > h3::before {
	content: counter(h2-section) "." counter(h3-section);
}
.mw-heading > h4::before {
	content: counter(h2-section) "." counter(h3-section) "." counter(h4-section);
}
.mw-heading > h5::before {
	content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) "." counter(h5-section);
}
.mw-heading > h6::before {
	content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) "." counter(h5-section) "." counter(h6-section);
}
.mw-heading > h2::before,
.mw-heading > h3::before,
.mw-heading > h4::before,
.mw-heading > h5::before,
.mw-heading > h6::before {
	color: light-dark(#6b3e26, #a07501);
	font-style: italic;
	margin-right: 1ex;
}


/* A consistent font for Template:Text art */
@font-face {
	font-family: 'DejaVu Sans Mono';
	src:
		local('DejaVu Sans Mono'),
		url('/title/Special:Redirect/file/DejaVuSansMono.woff2') format('woff2');
}


/* Workaround for broken indentation in the Timeless skin after MediaWiki 1.43 upgrade */
@media screen {
	dd {
		margin-left: 1.6em;
	}
}


/* Workaround for too bright grey background in Special:RecentChanges */
@media screen {
	html.skin-theme-clientpref-night > body.skin-vector-2022 .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not( :nth-child( -n+2 )) {
		background-color: #444546;
	}
	@media (prefers-color-scheme: dark) {
		html.skin-theme-clientpref-os > body.skin-vector-2022 .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not( :nth-child( -n+2 )) {
			background-color: #444546;
		}
	}
}