模板:Mainpage/styles.css

.mp-wrapper {
	--button-color-progressive: #9cbf57;
	--button-border-color: #68686b;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 6px;
    --button-color: #d7f3ff;
    --button-text-color: #0095d3;
    --icon-background: #e4faffa1;
    --icon-background-hover: #e0f9ff;
    --section-background: #00000008;
    --section-border: transparent;
    --hover-mask: #7f7c7c1a;
}

html.skin-theme-clientpref-night .mp-wrapper {
	--button-color: #4e4f51;
	--button-text-color: #fff;
	--icon-background: #ffffff10;
	--icon-background-hover: #ffffff20;
	--section-background: #1c1b1b;
	--section-border: #212121;
	--hover-mask:#ffffff1a;
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .mp-section {
		--button-color: #4e4f51;
		--button-text-color: #fff;
		--icon-background: #ffffff10;
		--icon-background-hover: #ffffff20;
		--section-background: #1c1b1b;
		--section-border: #212121;
		--hover-mask:#ffffff1a;
	}
}

.mp-wrapper *,
.mp-wrapper *::before,
.mp-wrapper *::after {
	box-sizing: border-box;
}

.mp-section {
	width: 100%;
	padding: 12px;
	background: var(--section-background);
	border: 2px solid var(--section-border);
	    box-shadow: inset rgba(0, 0, 0, 0.08) 0px 0px 0px 2px;
}

.mp-wrapper>.mp-section {
	width: 100%;
}

.mp-inline-sections {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "site" "right" "left";
	gap: 6px;
	width: 100%;
}

#mp-section-site {
	grid-area: site;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.mp-left {
	grid-area: left;
}

.mp-right {
	grid-area: right;
}

.mp-left,
.mp-right {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mp-right>:last-child {
	flex: 1;
}

.mp-left-row {
	flex: 10 10 0;
}

.mp-sticky {
	position: sticky;
	top: 20px;
}

@media screen and (min-width: 990px) {
	.mp-inline-sections {
		grid-template-columns: 1fr 2fr;
		grid-template-rows: auto 1fr;
		grid-template-areas: "site right" "left right";
	}
}

.mp-wrapper h2 {
	font-family: revert;
	font-weight: bold;
	font-size: 1.2em;
	color: var(--wiki-content-link-color);
}

.mp-title {
	border: none;
	margin: 0;
	padding: 0 !important;
}

.mw-headline {
	font-family: var(--wiki-content-heading-font-family);
}

.mp-button {
	width: 100%;
	gap: 6px;
	cursor: pointer;
	position: relative;
	text-align: center;
	background-color: var(--button-color);
	color: var(--button-text-color, #000);
	font-size: 1em;
	font-weight: bold;
	transition-property: background-color, color, border-color, box-shadow, opacity, padding, margin;
	transition-duration: .1s;
}

.mp-button>* {
	--content-text-color: #fff;
}

body.mediawiki .mp-button>* {
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	margin: -2px;
	text-shadow: 1px 1px 0 var(--button-text-shadow-color);
	display: flex;
	gap: 6px;
	padding: 8px 10px !important;
	text-align: center;
	align-items: center;
	justify-content: center;
	transition-property: padding, margin;
	transition-duration: .1s;
}

body.mediawiki .mp-button span>* {
	color: var(--button-text-color, #000) !important;
	text-decoration: none;
}

.mp-button::after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	mix-blend-mode: hard-light;
	transition: .4s background-color, box-shadow;
	pointer-events: none;
}

.mp-button:hover:not(:active)::after,
.mp-icon:hover:not(:active) .mp-button::after {
	background-color: var(--hover-mask);
}

.mp-button-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
}

.mp-button-wrapper .mp-button {
	flex: 1 0 0;
	min-width: max-content;
	white-space: nowrap;
}

.mp-button.mp-button-progressive {
	background-color: var(--button-color-progressive);
	--button-text-color: #fff;
	--button-text-shadow-color: #157298cf;
	background: linear-gradient(to bottom right, var(--color-progressive--hover), var(--color-progressive));
}

.mp-button.mp-social-discord {
	--button-color: #5865f2;
}

.mp-button.mp-social-qq {
	background-color: #1ebafc;
}

.mp-wrapper .collapsible-content {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 300ms, visibility 300ms;
}

.mp-wrapper .collapsible-content>* {
	overflow: hidden;
}

.mp-wrapper .collapsible.collapsed .collapsible-content {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	overflow: hidden;
}

.mp-wrapper .collapsible.collapsed .collapsible-content>.mp-section {
	padding: 0;
	transition: padding 200ms;
}

.mp-button .collapsetoggle-custom {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	color: transparent !important;
	--button-text-color: transparent;
	user-select: none;
	display: flex;
	align-items: center;
}

body.mediawiki .collapsible .mp-button.mp-button-collapsetoggle>h4,
body.mediawiki .collapsible .mp-button.mp-button-collapsetoggle:active>h4 {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.mp-button.mp-button-collapsetoggle>::after {
	content: "";
	display: block;
	pointer-events: none;
	width: 16px;
	height: 16px;
	margin-left: auto;
	--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E") no-repeat;
	mask: var(--mask);
	mask-size: 100% 100%;
	mask-position: center center;
	background-color: var(--content-text-color);
	transform: rotate(180deg);
	transition: 300ms transform;
}

.collapsible.collapsed .mp-button.mp-button-collapsetoggle>::after {
	transform: rotate(0);
}

.mp-icon-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: auto;
	--icon-base-width: 90px;
	--icon-max-width: 200px;
}

.mp-icon {
	flex: 1 1 auto;
	width: var(--icon-base-width);
	max-width: var(--icon-max-width);
	display: flex;
	flex-direction: column;
	transition-property: padding, margin;
	transition-duration: .1s;
}

.mp-icon-link {
	flex: 1;
	margin: -2px 0 0;
	font-size: 14px;
	padding-left: 2px;
	padding-right: 2px;
}

.mp-icon-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--icon-background);
	transition-property: background-color, color, border-color, box-shadow, opacity, padding, margin;
	transition-duration: .4s;
	user-select: none;
}

.mp-icon:hover .mp-icon-img {
	background-color: var(--icon-background-hover);
}

.mp-icon-img a {
	padding: 12px;
}

.mp-icon-img a,
.mp-icon-img span {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}

.mp-icon-img img {
	max-width: unset !important;
	width: 40px !important;
	height: 40px !important;
	filter: drop-shadow(2px 2px 1px #00000030);
	object-fit: contain;
}

@media screen and (min-width: 1500px) and (max-width: 2600px) {
	.mp-main-icons {
		--icon-base-width: 6vw;
	}
}

@media screen and (max-width: 950px) {
	.mp-icon-wrapper.mp-main-icons {
		--icon-base-width: 70px;
		--icon-max-width: 100px;
	}

	.mp-icon-link {
		font-size: 12px;
	}

	.mp-icon-img a {
		padding: 6px;
	}

	.mp-icon-img img {
		width: 40px !important;
		height: 40px !important;
	}
}

.mp-highlight-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 7 0;
}

.mp-highlight {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex: 1 1 0;
	min-width: 300px;
	min-height: calc(150px + 5vh);
	max-height: 300px;
	position: relative;
	padding: 0;
	color: #fff !important;
	font-size: small;
	text-shadow: 1px 1px 8px #333, -1px -1px 8px #333;
}

.mp-section.mp-highlight::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

.mp-highlight *:not(a):not(.sprite-text) {
	color: #fff !important;
}

.mp-highlight a {
	color: #bed9ff !important;
}

.mp-highlight .hlist li:after {
	background-color: #fff !important;
}

.mp-highlight .mp-title {
	line-height: 1.2;
	margin-bottom: 6px;
}

.mp-highlight-image,
.mp-highlight-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-height: 300px;
	user-select: none;
}

.mp-highlight-top-description,
.mp-highlight-bottom-description {
	width: 100%;
}

.mp-highlight-top-description {
	background: linear-gradient(180deg, #0008 24px, transparent);
	padding: 12px;
	position: absolute;
	top: 0;
}

.mp-highlight-bottom-description {
	background: linear-gradient(to top, #0008 50%, transparent);
	padding: 12px;
	position: absolute;
	bottom: 0;
}

.mp-social-wrapper {
	display: flex;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 4px;
	width: 100%;
}

.mp-social-wrapper img {
	margin: 2px 0;
	user-select: none;
}

.mp-platform-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 5px;
}

.mp-platform {
	min-width: 260px;
	display: flex;
	gap: 5px;
	flex-direction: row;
	align-items: center;
}

@media screen and (max-width: 989px) {
	.mp-platform {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.sr-only:not(:focus):not(:active) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.hlist ul {
	display: inline;
	margin: 0;
	padding: 0;
}

.hlist li {
	display: inline;
}

.hlist li:not(:last-child) {
	padding-right: 0.286em;
}

.hlist li:not(:last-child)::after {
	content: "";
	display: inline-block;
	position: relative;
	left: 0.286em;
	bottom: 0.214em;
	background-color: #fff;
	height: 3px;
	width: 3px;
	border-radius: 16px;
}