打开/关闭搜索
打开/关闭菜单
324
1711
132
1.2万
星露谷物语扩展百科
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

模板:Mainpage/styles.css：修订间差异

来自星露谷物语扩展百科
更多操作
以互动方式浏览历史
←上一编辑下一编辑→
Sizau​（留言 | 贡献）
行政员、​界面管理员、​监督员、​管理员
5,194次编辑
删除的内容 添加的内容
Sizau​（留言 | 贡献）
行政员、​界面管理员、​监督员、​管理员
5,194次编辑
无编辑摘要
Sizau​（留言 | 贡献）
行政员、​界面管理员、​监督员、​管理员
5,194次编辑
无编辑摘要
第1行： 第1行：
.mp-wrapper {
.mp-wrapper {
--mp-surface-0: var( --color-surface-0 );
--button-color-progressive: #9cbf57;
--mp-surface-1: var( --color-surface-1 );
--button-border-color: #68686b;
--mp-surface-2: var( --color-surface-2 );
--mp-surface-3: var( --color-surface-3, var( --color-surface-2 ) );
--mp-border: var( --border-color-base );
--mp-text: var( --color-emphasized );
--mp-subtle: var( --color-subtle );
--mp-link: var( --color-link );
--mp-progressive: var( --color-progressive );
--mp-progressive-hover: var( --color-progressive--hover );
--mp-progressive-subtle: var( --background-color-progressive-subtle );
--mp-quiet-hover: var( --background-color-button-quiet--hover );
display: flex;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: clamp( 12px, 2vw, 20px );
width: 100%;
width: 100%;
color: var( --mp-text );
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;
}
}
}


第43行： 第25行：
}
}


.mp-section {
.mp-wrapper a {
color: var( --mp-link );
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 {
.mp-wrapper p,
.mp-wrapper ul {
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
}


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


#mp-section-site {
.mp-title {
grid-area: site;
margin: 0;
padding: 0 !important;
display: flex;
border: 0;
flex-direction: column;
color: var( --mp-text );
gap: 8px;
align-items: center;
}
}


.mp-left {
.mp-section {
position: relative;
grid-area: left;
overflow: hidden;
}
padding: clamp( 16px, 2vw, 24px );

background: linear-gradient( 180deg, var( --mp-surface-1 ), var( --mp-surface-0 ) );
.mp-right {
border: 1px solid var( --mp-border );
grid-area: right;
border-radius: var( --border-radius-large );
box-shadow: var( --box-shadow-border );
}
}


.mp-section-header {
.mp-left,
.mp-right {
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
gap: 6px;
gap: 6px;
margin-bottom: 16px;
}
}


.mp-right>:last-child {
.mp-section-header p,
.mp-muted {
flex: 1;
color: var( --mp-subtle );
font-size: 0.95rem;
line-height: 1.7;
}
}


.mp-left-row {
.mp-notice {
padding-block: 14px;
flex: 10 10 0;
background: linear-gradient( 135deg, var( --mp-progressive-subtle ), var( --mp-surface-1 ) 65% );
}
}


.mp-sticky {
.mp-notice p {
font-size: var( --font-size-small );
position: sticky;
top: 20px;
line-height: 1.7;
}
}


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


.mp-wrapper h2 {
.mp-hero-grid {
grid-template-columns: minmax( 0, 1.65fr ) minmax( 280px, 0.9fr );
font-family: revert;
font-weight: bold;
align-items: stretch;
font-size: 1.2em;
color: var(--wiki-content-link-color);
}
}


.mp-title {
.mp-hero {
border: none;
display: grid;
grid-template-columns: minmax( 0, 1.05fr ) minmax( 260px, 0.95fr );
margin: 0;
gap: clamp( 16px, 2vw, 24px );
padding: 0 !important;
padding: clamp( 18px, 2.4vw, 28px );
background: linear-gradient( 135deg, var( --mp-progressive-subtle ), var( --mp-surface-0 ) 38%, var( --mp-surface-1 ) 100% );
}
}


.mp-hero__copy,
.mw-headline {
.mp-side-stack,
font-family: var(--wiki-content-heading-font-family);
.mp-side-card {
display: flex;
flex-direction: column;
gap: 14px;
}
}


.mp-button {
.mp-kicker {
display: inline-flex;
width: 100%;
align-items: center;
gap: 6px;
width: fit-content;
cursor: pointer;
padding: 6px 10px;
position: relative;
background: var( --mp-surface-0 );
text-align: center;
background-color: var(--button-color);
border: 1px solid var( --mp-border );
border-radius: 999px;
color: var(--button-text-color, #000);
color: var( --mp-progressive );
font-size: 1em;
font-weight: bold;
font-size: var( --font-size-small );
font-weight: 700;
transition-property: background-color, color, border-color, box-shadow, opacity, padding, margin;
transition-duration: .1s;
letter-spacing: 0.02em;
text-transform: uppercase;
}
}


.mp-button>* {
.mp-hero__title {
font-size: clamp( 2rem, 4vw, 3.2rem );
--content-text-color: #fff;
line-height: 1.05;
}
}


.mp-hero__lead {
body.mediawiki .mp-button>* {
font-size: var( --font-size-x-large );
width: calc(100% + 4px);
font-weight: 700;
height: calc(100% + 4px);
margin: -2px;
line-height: 1.5;
}
text-shadow: 1px 1px 0 var(--button-text-shadow-color);

.mp-hero__text {
color: var( --mp-subtle );
font-size: var( --font-size-large );
line-height: 1.8;
}

.mp-pill-row {
display: flex;
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 8px 10px !important;
gap: 8px;
}
text-align: center;

.mp-pill {
display: inline-flex;
align-items: center;
align-items: center;
padding: 7px 12px;
justify-content: center;
background: var( --mp-surface-0 );
transition-property: padding, margin;
border: 1px solid var( --mp-border );
transition-duration: .1s;
border-radius: 999px;
color: var( --mp-subtle );
font-size: var( --font-size-small );
}
}


.mp-stat-grid {
body.mediawiki .mp-button span>* {
display: grid;
color: var(--button-text-color, #000) !important;
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
text-decoration: none;
gap: 10px;
}
}


.mp-button::after {
.mp-stat-card,
.mp-monitor-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
min-height: 96px;
padding: 14px;
background: linear-gradient( 180deg, var( --mp-surface-0 ), var( --mp-surface-2 ) );
border: 1px solid var( --mp-border );
border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-border );
}

.mp-stat-card__value,
.mp-monitor-card__value {
font-size: clamp( 1.35rem, 2.1vw, 1.85rem );
font-weight: 700;
line-height: 1.15;
word-break: break-word;
}

.mp-stat-card__value a,
.mp-monitor-card__value a {
display: block;
display: block;
text-decoration: none;
content: '';
}
position: absolute;

top: 0;
.mp-stat-card__label,
left: 0;
.mp-monitor-card__label {
width: 100%;
color: var( --mp-subtle );
height: 100%;
font-size: var( --font-size-small );
z-index: 1;
mix-blend-mode: hard-light;
transition: .4s background-color, box-shadow;
pointer-events: none;
}
}


.mp-monitor-card__value a {
.mp-button:hover:not(:active)::after,
color: var( --mp-progressive ) !important;
.mp-icon:hover:not(:active) .mp-button::after {
background-color: var(--hover-mask);
}
}


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


.mp-hero__actions,
.mp-button-wrapper .mp-button {
.mp-edit-actions {
flex: 1 0 0;
display: grid;
min-width: max-content;
grid-template-columns: repeat( auto-fit, minmax( 172px, 1fr ) );
white-space: nowrap;
align-items: stretch;
}
}


.mp-button.mp-button-progressive {
.mp-button {
position: relative;
background-color: var(--button-color-progressive);
flex: 1 1 160px;
--button-text-color: #fff;
min-width: 0;
--button-text-shadow-color: #157298cf;
background: linear-gradient(to bottom right, var(--color-progressive--hover), var(--color-progressive));
background: var( --mp-surface-2 );
border: 1px solid var( --mp-border );
border-radius: var( --border-radius-base );
box-shadow: var( --box-shadow-border );
transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
}


.mp-button.mp-social-discord {
.mp-button:hover {
background: var( --mp-quiet-hover );
--button-color: #5865f2;
transform: translateY( -2px );
}
}


.mp-button.mp-social-qq {
.mp-wrapper .mp-button > * {
display: flex;
background-color: #1ebafc;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 18px !important;
text-align: center;
font-weight: 700;
line-height: 1.35;
}
}


.mp-wrapper .collapsible-content {
.mp-wrapper .mp-button span * {
color: var( --mp-text ) !important;
display: grid;
text-decoration: none;
grid-template-rows: 1fr;
transition: grid-template-rows 300ms, visibility 300ms;
}
}


.mp-button.mp-button-progressive {
.mp-wrapper .collapsible-content>* {
background: linear-gradient( 135deg, var( --mp-progressive-hover ), var( --mp-progressive ) );
overflow: hidden;
border-color: transparent;
box-shadow: var( --box-shadow-medium );
}
}


.mp-button.mp-button-progressive:hover {
.mp-wrapper .collapsible.collapsed .collapsible-content {
filter: saturate( 1.08 );
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
overflow: hidden;
}
}


.mp-wrapper .collapsible.collapsed .collapsible-content>.mp-section {
.mp-wrapper .mp-button.mp-button-progressive span * {
color: var( --color-inverted-primary ) !important;
padding: 0;
transition: padding 200ms;
}
}


.mp-hero__media {
.mp-button .collapsetoggle-custom {
min-height: clamp( 280px, 32vw, 420px );
position: absolute;
aspect-ratio: 16 / 11;
left: 0;
background: var( --mp-surface-2 );
right: 0;
border-radius: calc( var( --border-radius-large ) - 4px );
top: 0;
box-shadow: var( --box-shadow-large );
bottom: 0;
overflow: hidden;
color: transparent !important;
--button-text-color: transparent;
user-select: none;
display: flex;
align-items: center;
}
}


.mp-hero__media > *,
body.mediawiki .collapsible .mp-button.mp-button-collapsetoggle>h4,
.mp-hero__media > * > * {
body.mediawiki .collapsible .mp-button.mp-button-collapsetoggle:active>h4 {
display: block;
padding-left: 12px !important;
width: 100%;
padding-right: 12px !important;
height: 100%;
}
}


.mp-hero__media img {
.mp-button.mp-button-collapsetoggle>::after {
content: "";
display: block;
display: block;
width: 100%;
pointer-events: none;
width: 16px;
height: 100%;
height: 16px;
object-fit: cover;
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;
}
}


.mp-link-list {
.collapsible.collapsed .mp-button.mp-button-collapsetoggle>::after {
display: grid;
transform: rotate(0);
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
}


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


.mp-icon {
.mp-link-list li > a {
flex: 1 1 auto;
width: var(--icon-base-width);
max-width: var(--icon-max-width);
display: flex;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
transition-property: padding, margin;
gap: 12px;
transition-duration: .1s;
min-height: 52px;
padding: 12px 14px;
background: var( --mp-surface-2 );
border: 1px solid var( --mp-border );
border-radius: var( --border-radius-base );
color: var( --mp-text );
text-decoration: none;
transition: background-color 200ms ease, transform 200ms ease;
}
}


.mp-icon-link {
.mp-link-list li > a::after {
flex: 1;
content: "›";
color: var( --mp-progressive );
margin: -2px 0 0;
font-size: 14px;
font-size: 1.2em;
padding-left: 2px;
line-height: 1;
padding-right: 2px;
}
}


.mp-icon-img {
.mp-link-list li > a:hover,
.mp-chip-link > a:hover {
display: flex;
background: var( --mp-quiet-hover );
align-items: center;
transform: translateY( -2px );
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-link,
.mp-icon:hover .mp-icon-img {
.mp-icon:hover .mp-icon-img {
background-color: var(--icon-background-hover);
background: var( --mp-quiet-hover );
}
}


.mp-icon-img a {
.mp-chip-links {
padding: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
}


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


.mp-icon-img img {
.mp-chip-link > a {
display: inline-flex;
max-width: unset !important;
align-items: center;
width: 40px !important;
height: 40px !important;
min-height: 42px;
padding: 10px 12px;
filter: drop-shadow(2px 2px 1px #00000030);
background: var( --mp-surface-2 );
object-fit: contain;
border: 1px solid var( --mp-border );
border-radius: 999px;
color: var( --mp-text );
text-decoration: none;
transition: background-color 200ms ease, transform 200ms ease;
}
}


.mp-grid--primary {
@media screen and (min-width: 1500px) and (max-width: 2600px) {
grid-template-columns: minmax( 0, 1.12fr ) minmax( 320px, 0.88fr );
.mp-main-icons {
--icon-base-width: 6vw;
}
}
}


.mp-grid--support {
@media screen and (max-width: 950px) {
grid-template-columns: minmax( 0, 1.18fr ) minmax( 300px, 0.82fr );
.mp-icon-wrapper.mp-main-icons {
grid-template-areas:
--icon-base-width: 70px;
"monitor edit"
--icon-max-width: 100px;
"monitor about";
}
align-items: start;

.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 {
.mp-primary-card,
.mp-support-card {
display: flex;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 8px;
gap: 0;
flex: 0 7 0;
}
}


.mp-primary-card .mp-section-header,
.mp-highlight {
.mp-support-card .mp-section-header {
background-size: cover;
margin-bottom: 18px;
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 {
.mp-support-card--monitor {
grid-area: monitor;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
}


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


.mp-highlight a {
.mp-support-card--about {
grid-area: about;
color: #bed9ff !important;
}
}


.mp-support-card--monitor .mp-monitor-grid {
.mp-highlight .hlist li:after {
margin-top: 2px;
background-color: #fff !important;
}
}


.mp-highlight .mp-title {
.mp-support-card--edit .mp-edit-actions {
line-height: 1.2;
margin-top: auto;
margin-bottom: 6px;
padding-top: 18px;
}
}


.mp-support-card--about .mp-mod-icons {
.mp-highlight-image,
margin-top: 2px;
.mp-highlight-image img {
object-fit: cover;
width: 100%;
height: 100%;
max-height: 300px;
user-select: none;
}
}


.mp-icon-wrapper {
.mp-highlight-top-description,
display: grid;
.mp-highlight-bottom-description {
width: 100%;
gap: 12px;
}
}


.mp-main-icons,
.mp-highlight-top-description {
.mp-sub-icons {
background: linear-gradient(180deg, #0008 24px, transparent);
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
padding: 12px;
position: absolute;
top: 0;
}
}


.mp-highlight-bottom-description {
.mp-mod-icons {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
background: linear-gradient(to top, #0008 50%, transparent);
padding: 12px;
position: absolute;
bottom: 0;
}
}


.mp-social-wrapper {
.mp-icon {
display: flex;
display: flex;
flex-direction: column;
display: grid;
min-width: 0;
grid-auto-columns: minmax(0, 1fr);
transition: transform 200ms ease;
grid-auto-flow: column;
gap: 4px;
width: 100%;
}
}


.mp-social-wrapper img {
.mp-icon:hover {
margin: 2px 0;
transform: translateY( -2px );
user-select: none;
}
}


.mp-platform-wrapper {
.mp-icon-img,
.mp-icon-link {
transition: background-color 200ms ease, transform 200ms ease;
}

.mp-icon-img {
display: flex;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: center;
gap: 6px;
min-height: 110px;
margin-top: 5px;
padding: 14px;
background: linear-gradient( 180deg, var( --mp-progressive-subtle ), var( --mp-surface-2 ) );
border: 1px solid var( --mp-border );
border-radius: var( --border-radius-large ) var( --border-radius-large ) var( --border-radius-base ) var( --border-radius-base );
box-shadow: var( --box-shadow-border );
}
}


.mp-platform {
.mp-icon-img a,
.mp-icon-img span {
min-width: 260px;
display: flex;
display: flex;
gap: 5px;
flex-direction: row;
align-items: center;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}


.mp-icon-img img {
@media screen and (max-width: 989px) {
width: 56px !important;
.mp-platform {
height: 56px !important;
flex-direction: row;
max-width: none !important;
flex-wrap: wrap;
object-fit: contain;
filter: drop-shadow( 0 6px 12px rgba( 0, 0, 0, 0.15 ) );
}

.mp-icon-link {
margin-top: -1px;
background: var( --mp-surface-0 );
border: 1px solid var( --mp-border );
border-radius: var( --border-radius-base );
box-shadow: var( --box-shadow-border );
}

.mp-wrapper .mp-icon-link > * {
min-height: 52px;
padding: 10px 10px !important;
line-height: 1.35;
}

.mp-wrapper .mp-icon-link span * {
color: var( --mp-text ) !important;
text-decoration: none;
}

.mp-monitor-grid {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 12px;
}

@media screen and ( max-width: 1200px ) {
.mp-hero-grid,
.mp-grid--primary {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.mp-grid--support {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
grid-template-areas:
"monitor edit"
"about about";
}
}
}
}


@media screen and ( max-width: 980px ) {
.sr-only:not(:focus):not(:active) {
.mp-hero-grid,
clip-path: inset(50%);
.mp-hero,
height: 1px;
.mp-grid--primary,
overflow: hidden;
.mp-grid--support {
position: absolute;
grid-template-columns: 1fr;
white-space: nowrap;
}
width: 1px;

.mp-grid--support {
grid-template-areas:
"monitor"
"edit"
"about";
}

.mp-main-icons,
.mp-sub-icons {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.mp-hero__actions {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
}


@media screen and ( max-width: 820px ) {
.hlist ul {
.mp-main-icons,
display: inline;
.mp-sub-icons,
margin: 0;
.mp-mod-icons {
padding: 0;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
}
}


@media screen and ( max-width: 720px ) {
.hlist li {
.mp-section {
display: inline;
padding: 16px;
}

.mp-hero__title {
font-size: var( --font-size-xxx-large );
}

.mp-hero__lead {
font-size: var( --font-size-large );
}

.mp-stat-grid,
.mp-monitor-grid {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.mp-hero__media {
min-height: 240px;
}

.mp-icon-img {
min-height: 92px;
}

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

.mp-wrapper .mp-button > * {
min-height: 48px;
padding: 0 14px !important;
}

.mp-wrapper .mp-icon-link > * {
min-height: 48px;
padding: 9px 8px !important;
}
}
}


@media screen and ( max-width: 560px ) {
.hlist li:not(:last-child) {
.mp-main-icons,
padding-right: 0.286em;
.mp-sub-icons,
.mp-mod-icons,
.mp-monitor-grid {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.mp-hero__actions,
.mp-edit-actions {
grid-template-columns: 1fr;
}
}
}


@media screen and ( max-width: 480px ) {
.hlist li:not(:last-child)::after {
.mp-button-wrapper {
content: "";
flex-direction: column;
display: inline-block;
}
position: relative;

left: 0.286em;
.mp-button {
bottom: 0.214em;
flex-basis: auto;
background-color: #fff;
}
height: 3px;
width: 3px;
border-radius: 16px;
}
}

2026年4月24日 (五) 11:34的版本

.mp-wrapper {
	--mp-surface-0: var( --color-surface-0 );
	--mp-surface-1: var( --color-surface-1 );
	--mp-surface-2: var( --color-surface-2 );
	--mp-surface-3: var( --color-surface-3, var( --color-surface-2 ) );
	--mp-border: var( --border-color-base );
	--mp-text: var( --color-emphasized );
	--mp-subtle: var( --color-subtle );
	--mp-link: var( --color-link );
	--mp-progressive: var( --color-progressive );
	--mp-progressive-hover: var( --color-progressive--hover );
	--mp-progressive-subtle: var( --background-color-progressive-subtle );
	--mp-quiet-hover: var( --background-color-button-quiet--hover );
	display: flex;
	flex-direction: column;
	gap: clamp( 12px, 2vw, 20px );
	width: 100%;
	color: var( --mp-text );
}

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

.mp-wrapper a {
	color: var( --mp-link );
}

.mp-wrapper p,
.mp-wrapper ul {
	margin-top: 0;
	margin-bottom: 0;
}

.mp-wrapper ul {
	padding-left: 1.2rem;
}

.mp-title {
	margin: 0;
	padding: 0 !important;
	border: 0;
	color: var( --mp-text );
}

.mp-section {
	position: relative;
	overflow: hidden;
	padding: clamp( 16px, 2vw, 24px );
	background: linear-gradient( 180deg, var( --mp-surface-1 ), var( --mp-surface-0 ) );
	border: 1px solid var( --mp-border );
	border-radius: var( --border-radius-large );
	box-shadow: var( --box-shadow-border );
}

.mp-section-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.mp-section-header p,
.mp-muted {
	color: var( --mp-subtle );
	font-size: 0.95rem;
	line-height: 1.7;
}

.mp-notice {
	padding-block: 14px;
	background: linear-gradient( 135deg, var( --mp-progressive-subtle ), var( --mp-surface-1 ) 65% );
}

.mp-notice p {
	font-size: var( --font-size-small );
	line-height: 1.7;
}

.mp-hero-grid,
.mp-grid {
	display: grid;
	gap: clamp( 12px, 2vw, 20px );
}

.mp-hero-grid {
	grid-template-columns: minmax( 0, 1.65fr ) minmax( 280px, 0.9fr );
	align-items: stretch;
}

.mp-hero {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 260px, 0.95fr );
	gap: clamp( 16px, 2vw, 24px );
	padding: clamp( 18px, 2.4vw, 28px );
	background: linear-gradient( 135deg, var( --mp-progressive-subtle ), var( --mp-surface-0 ) 38%, var( --mp-surface-1 ) 100% );
}

.mp-hero__copy,
.mp-side-stack,
.mp-side-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mp-kicker {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 6px 10px;
	background: var( --mp-surface-0 );
	border: 1px solid var( --mp-border );
	border-radius: 999px;
	color: var( --mp-progressive );
	font-size: var( --font-size-small );
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mp-hero__title {
	font-size: clamp( 2rem, 4vw, 3.2rem );
	line-height: 1.05;
}

.mp-hero__lead {
	font-size: var( --font-size-x-large );
	font-weight: 700;
	line-height: 1.5;
}

.mp-hero__text {
	color: var( --mp-subtle );
	font-size: var( --font-size-large );
	line-height: 1.8;
}

.mp-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mp-pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	background: var( --mp-surface-0 );
	border: 1px solid var( --mp-border );
	border-radius: 999px;
	color: var( --mp-subtle );
	font-size: var( --font-size-small );
}

.mp-stat-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 10px;
}

.mp-stat-card,
.mp-monitor-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	min-height: 96px;
	padding: 14px;
	background: linear-gradient( 180deg, var( --mp-surface-0 ), var( --mp-surface-2 ) );
	border: 1px solid var( --mp-border );
	border-radius: var( --border-radius-medium );
	box-shadow: var( --box-shadow-border );
}

.mp-stat-card__value,
.mp-monitor-card__value {
	font-size: clamp( 1.35rem, 2.1vw, 1.85rem );
	font-weight: 700;
	line-height: 1.15;
	word-break: break-word;
}

.mp-stat-card__value a,
.mp-monitor-card__value a {
	display: block;
	text-decoration: none;
}

.mp-stat-card__label,
.mp-monitor-card__label {
	color: var( --mp-subtle );
	font-size: var( --font-size-small );
}

.mp-monitor-card__value a {
	color: var( --mp-progressive ) !important;
}

.mp-button-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mp-hero__actions,
.mp-edit-actions {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 172px, 1fr ) );
	align-items: stretch;
}

.mp-button {
	position: relative;
	flex: 1 1 160px;
	min-width: 0;
	background: var( --mp-surface-2 );
	border: 1px solid var( --mp-border );
	border-radius: var( --border-radius-base );
	box-shadow: var( --box-shadow-border );
	transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.mp-button:hover {
	background: var( --mp-quiet-hover );
	transform: translateY( -2px );
}

.mp-wrapper .mp-button > * {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 18px !important;
	text-align: center;
	font-weight: 700;
	line-height: 1.35;
}

.mp-wrapper .mp-button span * {
	color: var( --mp-text ) !important;
	text-decoration: none;
}

.mp-button.mp-button-progressive {
	background: linear-gradient( 135deg, var( --mp-progressive-hover ), var( --mp-progressive ) );
	border-color: transparent;
	box-shadow: var( --box-shadow-medium );
}

.mp-button.mp-button-progressive:hover {
	filter: saturate( 1.08 );
}

.mp-wrapper .mp-button.mp-button-progressive span * {
	color: var( --color-inverted-primary ) !important;
}

.mp-hero__media {
	min-height: clamp( 280px, 32vw, 420px );
	aspect-ratio: 16 / 11;
	background: var( --mp-surface-2 );
	border-radius: calc( var( --border-radius-large ) - 4px );
	box-shadow: var( --box-shadow-large );
	overflow: hidden;
}

.mp-hero__media > *,
.mp-hero__media > * > * {
	display: block;
	width: 100%;
	height: 100%;
}

.mp-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mp-link-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-link-list li {
	margin: 0;
}

.mp-link-list li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 12px 14px;
	background: var( --mp-surface-2 );
	border: 1px solid var( --mp-border );
	border-radius: var( --border-radius-base );
	color: var( --mp-text );
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms ease;
}

.mp-link-list li > a::after {
	content: "›";
	color: var( --mp-progressive );
	font-size: 1.2em;
	line-height: 1;
}

.mp-link-list li > a:hover,
.mp-chip-link > a:hover {
	background: var( --mp-quiet-hover );
	transform: translateY( -2px );
}

.mp-icon:hover .mp-icon-link,
.mp-icon:hover .mp-icon-img {
	background: var( --mp-quiet-hover );
}

.mp-chip-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mp-chip-link {
	display: inline-flex;
}

.mp-chip-link > a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 10px 12px;
	background: var( --mp-surface-2 );
	border: 1px solid var( --mp-border );
	border-radius: 999px;
	color: var( --mp-text );
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms ease;
}

.mp-grid--primary {
	grid-template-columns: minmax( 0, 1.12fr ) minmax( 320px, 0.88fr );
}

.mp-grid--support {
	grid-template-columns: minmax( 0, 1.18fr ) minmax( 300px, 0.82fr );
	grid-template-areas:
		"monitor edit"
		"monitor about";
	align-items: start;
}

.mp-primary-card,
.mp-support-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mp-primary-card .mp-section-header,
.mp-support-card .mp-section-header {
	margin-bottom: 18px;
}

.mp-support-card--monitor {
	grid-area: monitor;
}

.mp-support-card--edit {
	grid-area: edit;
}

.mp-support-card--about {
	grid-area: about;
}

.mp-support-card--monitor .mp-monitor-grid {
	margin-top: 2px;
}

.mp-support-card--edit .mp-edit-actions {
	margin-top: auto;
	padding-top: 18px;
}

.mp-support-card--about .mp-mod-icons {
	margin-top: 2px;
}

.mp-icon-wrapper {
	display: grid;
	gap: 12px;
}

.mp-main-icons,
.mp-sub-icons {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.mp-mod-icons {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.mp-icon {
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: transform 200ms ease;
}

.mp-icon:hover {
	transform: translateY( -2px );
}

.mp-icon-img,
.mp-icon-link {
	transition: background-color 200ms ease, transform 200ms ease;
}

.mp-icon-img {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	padding: 14px;
	background: linear-gradient( 180deg, var( --mp-progressive-subtle ), var( --mp-surface-2 ) );
	border: 1px solid var( --mp-border );
	border-radius: var( --border-radius-large ) var( --border-radius-large ) var( --border-radius-base ) var( --border-radius-base );
	box-shadow: var( --box-shadow-border );
}

.mp-icon-img a,
.mp-icon-img span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.mp-icon-img img {
	width: 56px !important;
	height: 56px !important;
	max-width: none !important;
	object-fit: contain;
	filter: drop-shadow( 0 6px 12px rgba( 0, 0, 0, 0.15 ) );
}

.mp-icon-link {
	margin-top: -1px;
	background: var( --mp-surface-0 );
	border: 1px solid var( --mp-border );
	border-radius: var( --border-radius-base );
	box-shadow: var( --box-shadow-border );
}

.mp-wrapper .mp-icon-link > * {
	min-height: 52px;
	padding: 10px 10px !important;
	line-height: 1.35;
}

.mp-wrapper .mp-icon-link span * {
	color: var( --mp-text ) !important;
	text-decoration: none;
}

.mp-monitor-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
}

@media screen and ( max-width: 1200px ) {
	.mp-hero-grid,
	.mp-grid--primary {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mp-grid--support {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		grid-template-areas:
			"monitor edit"
			"about about";
	}
}

@media screen and ( max-width: 980px ) {
	.mp-hero-grid,
	.mp-hero,
	.mp-grid--primary,
	.mp-grid--support {
		grid-template-columns: 1fr;
	}

	.mp-grid--support {
		grid-template-areas:
			"monitor"
			"edit"
			"about";
	}

	.mp-main-icons,
	.mp-sub-icons {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.mp-hero__actions {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media screen and ( max-width: 820px ) {
	.mp-main-icons,
	.mp-sub-icons,
	.mp-mod-icons {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media screen and ( max-width: 720px ) {
	.mp-section {
		padding: 16px;
	}

	.mp-hero__title {
		font-size: var( --font-size-xxx-large );
	}

	.mp-hero__lead {
		font-size: var( --font-size-large );
	}

	.mp-stat-grid,
	.mp-monitor-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mp-hero__media {
		min-height: 240px;
	}

	.mp-icon-img {
		min-height: 92px;
	}

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

	.mp-wrapper .mp-button > * {
		min-height: 48px;
		padding: 0 14px !important;
	}

	.mp-wrapper .mp-icon-link > * {
		min-height: 48px;
		padding: 9px 8px !important;
	}
}

@media screen and ( max-width: 560px ) {
	.mp-main-icons,
	.mp-sub-icons,
	.mp-mod-icons,
	.mp-monitor-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mp-hero__actions,
	.mp-edit-actions {
		grid-template-columns: 1fr;
	}
}

@media screen and ( max-width: 480px ) {
	.mp-button-wrapper {
		flex-direction: column;
	}

	.mp-button {
		flex-basis: auto;
	}
}
检索自“https://sve.p1.wiki/index.php?title=模板:Mainpage/styles.css&oldid=12396”