MediaWiki:Common.css

出自 ArchWiki

注意： 发布后，您可能需要绕过浏览器的缓存才能看到更改。

  • Firefox / Safari： 按住 Shift 键并点击重新加载，或按 Ctrl-F5 或 Ctrl-R (Mac 上为 ⌘-R)
  • Google Chrome： 按 Ctrl-Shift-R (Mac 上为 ⌘-Shift-R)
  • Internet Explorer / Edge： 按住 Ctrl 键并点击刷新，或按 Ctrl-F5
  • Opera： 按 Ctrl-F5。
/*
 * 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 ^="https://wiki.archlinux.org.cn"],
.mw-body-content a.external[href ^="https://wiki.archlinux.org.cn"] {
	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 */

div.archwiki-template-box {
	padding: 0.5em;
	border: thin solid black;
	margin: 0.5em 0;
	overflow: hidden;
}
div.archwiki-template-box.archwiki-template-box-note {
	background-color: #ddf;
	border-color: #bbd;
}
div.archwiki-template-box.archwiki-template-box-warning {
	background-color: #fdd;
	border-color: #dbb;
}
div.archwiki-template-box.archwiki-template-box-tip {
	background-color: #dfd;
	border-color: #bdb;
}


/* Status templates */

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: 0.5em 0;
	background-color: #f9faff;
	border: 1px solid #d7dfe3;
	padding-left: 74px;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
div.archwiki-template-message > p > span[typeof="mw:File"] {
	display: block;
	position: absolute;
	top: 0.5em;
}
div.archwiki-template-message > p > span[typeof="mw:File"]:first-of-type {
	left: 13px; /* the icon is 48px, centering in the 74px padding */
}
div.archwiki-template-message > div {
	font-size: 90%;
}


/* Related articles templates */

div.archwiki-template-meta-related-articles {
	float: right;
	clear: right;
	width: 25%;
	margin: 0 0 0.5em 0.5em;
}
div.archwiki-template-meta-related-articles > p {
	background: #333;
	color: white;
	padding: 0.2em;
	border-bottom:5px #08c solid;
	margin:0;
	text-align:center;
	font-weight:bold;
}
div.archwiki-template-meta-related-articles > 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;
}
div.archwiki-template-meta-related-articles > ul > 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 #a2a9b1;
		background-color: #f8f9fa;
		padding: 5px;
		margin: 1em 0;
		margin-top: 0; /* fix margin between catlinks and related articles */
		clear: both;
	}
	div.archwiki-template-meta-related-articles > p {
		background: initial;
		color: initial;
		padding: 0;
		border: none;
		margin: 0;
		text-align: left;
		font-weight: normal;
		display: inline;
	}
	div.archwiki-template-meta-related-articles > p::after {
		content: ":";
	}
	div.archwiki-template-meta-related-articles > ul {
		margin: 0;
		padding: 0;
		display: inline;
	}
	div.archwiki-template-meta-related-articles > ul > li {
		padding: 0;
		line-height: initial;
		display: inline;
		white-space: nowrap;
		padding: 0 0.5em;
		border-left: 1px solid #a2a9b1;
	}
	div.archwiki-template-meta-related-articles > ul > li:first-child {
		padding-left: 0.25em;
		border-left: 0;
	}
	div.archwiki-template-meta-related-articles > ul > li a {
		font-weight: normal !important;
	}
}


/*
 * Main Page columns
 * Keep coherent with https://github.com/archlinux/archwiki/search?q=width-breakpoint-tablet
 */

@media screen and ( min-width: 721px ) {
	div.archwiki-main-page-columns {
		column-count: 2;
	}
	div.archwiki-main-page-columns > * {
		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://mdn.org.cn/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) */
h2 > .mw-headline {
	counter-increment: h2-section;
	counter-set: h3-section h4-section h5-section h6-section;
}
h3 > .mw-headline {
	counter-increment: h3-section;
	counter-set: h4-section h5-section h6-section;
}
h4 > .mw-headline {
	counter-increment: h4-section;
	counter-set: h5-section h6-section;
}
h5 > .mw-headline {
	counter-increment: h5-section;
	counter-set: h6-section;
}
h6 > .mw-headline {
	counter-increment: h6-section;
}

/* counter-set on the .mw-headline does not have the desired effect on webkit.
   Webkit (Safari) supports `_::-webkit-full-page-media, _:future, :root` which
   is ignored on other browsers, so we can use :has() to counter-reset on the
   h2-h5 elements. See https://bbs.archlinux.org/viewtopic.php?pid=2128716#p2128716
*/
_::-webkit-full-page-media, _:future, :root h2:has(> .mw-headline) {
	counter-reset: h3-section h4-section h5-section h6-section;
}
_::-webkit-full-page-media, _:future, :root h3:has(> .mw-headline) {
	counter-reset: h4-section h5-section h6-section;
}
_::-webkit-full-page-media, _:future, :root h4:has(> .mw-headline) {
	counter-reset: h5-section h6-section;
}
_::-webkit-full-page-media, _:future, :root h5:has(> .mw-headline) {
	counter-reset: h6-section;
}

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


/*
 * easter egg
 */
.mw-first-heading .pacman-wrapper {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 80%;
}

.mw-first-heading .pacman {
	position: relative;
	background: transparent;
	z-index: 1;
	height: 36px;
}
.mw-first-heading .pacman::before, .mw-first-heading .pacman::after {
	position: absolute;
	display: block;
	border-radius: 50%;
	content: "";
	height: 0px;
	width: 0px;
}
.mw-first-heading .pacman::before {
	animation: pacman-jaw-top 0.5s ease infinite;
	animation-delay: 0.1s;
	border: 18px solid #FFCC00;
	border-left-color: transparent;
	border-bottom-color: transparent;
}
.mw-first-heading .pacman::after {
	animation: pacman-jaw-bottom 0.5s ease infinite;
	animation-delay: 0.1s;
	border: 18px solid #FFCC00;
	border-right-color: transparent;
	border-top-color: transparent;
}

.mw-first-heading .food {
	display: flex;
	justify-content: space-around;
	animation: pacman-food-translation 0.5s linear infinite;
	width: 100%;
}
.mw-first-heading .food::before {
	background: #fff;
	border: solid 1px;
	border-radius: 50%;
	content: "";
	height: 1rem;
	width: 1rem;
}

@keyframes pacman-jaw-top {
	0%, 100% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(-80deg);
	}
}
@keyframes pacman-jaw-bottom {
	0%, 100% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(0deg);
	}
}
@keyframes pacman-food-translation {
	0% {
		transform: translateX(60%);
	}
	100% {
		transform: translateX(-40%);
	}
}

/* Work around a bug in Extension:DarkMode where it sets the background color to
 * black and then inverts it. See https://phabricator.wikimedia.org/T292697
 */
@media screen {
	html.client-darkmode {
		/* body-background-color from https://github.com/archlinux/archwiki/blob/master/extensions/ArchLinux/modules/arch_definitions.less */
		background-color: #f6f9fc;
	}
}

@font-face {
	font-family: 'DejaVu Sans Mono';
	src:
		local('DejaVu Sans Mono'),
		url('/title/Special:Redirect/file/DejaVuSansMono.woff2') format('woff2');
}
取自“https://wiki.archlinux.org.cn/index.php?title=MediaWiki:Common.css&oldid=819414”