模块:Navplate/styles.css:修订间差异
来自INFWiki
更多操作
< Navplate
创建页面,内容为“.template-navplate { margin-top: var( --space-md ); clear: both; font-size: var( --font-size-small ); line-height: var( --line-height-sm ); border: 1px solid var( --border-color-base ); border-radius: var( --border-radius--medium ); backdrop-filter: var(--backdrop-filter-frosted-glass); overflow: hidden; } .template-navplate__header { padding: var( --space-sm ) var( --space-md ); background-color: var( --color-surface-2 ); background: linear-grad…” |
无编辑摘要 |
||
| 第3行: | 第3行: | ||
clear: both; | clear: both; | ||
font-size: var( --font-size-small ); | font-size: var( --font-size-small ); | ||
line-height: var( --line-height- | line-height: var( --line-height-xx-small ); | ||
border: 1px solid var( --border-color-base ); | border: 1px solid var( --border-color-base ); | ||
border-radius: var( --border-radius | border-radius: var( --border-radius-medium ); | ||
overflow: hidden; | overflow: hidden; | ||
user-select: none; | |||
} | } | ||
.template-navplate__header { | .template-navplate__header { | ||
padding: var( --space-sm ) var( --space-md ); | padding: var( --space-sm ) var( --space-md ); | ||
background-color: | background-color: transparent; | ||
display: flex; | display: flex; | ||
align-items: center; | |||
gap: var( --space-md ); | |||
cursor: pointer; | |||
user-select: none; | |||
} | } | ||
.template-navplate | .template-navplate[ open ] .template-navplate__header { | ||
background | background-color: var( --color-surface-1 ); | ||
} | } | ||
.template- | .template-navplate .template-navplate__header:hover { | ||
background-color: var( --background-color-button-quiet--hover ); | |||
} | } | ||
.template-navplate__subtitle, | .template-navplate__subtitle, | ||
.template-navplate-item__label { | .template-navplate-item__label { | ||
color: var( --color | color: var( --color-subtle ); | ||
} | } | ||
.template- | .template-navplate-item__label { | ||
font-weight: var( --font-weight-medium ); | |||
font-weight: var( --font-weight- | |||
} | } | ||
.template-navplate__title { | .template-navplate__title { | ||
font-size: var( --font-size- | color: var( --color-emphasized ); | ||
font-weight: var( --font-weight-semi-bold ); | |||
font-size: var( --font-size-medium ); | |||
} | } | ||
.template-navplate__content { | .template-navplate__content { | ||
border-top: var( --border-base ); | |||
border-top: | content-visibility: auto; | ||
} | } | ||
.template-navplate__groupheader { | .template-navplate__groupheader { | ||
background | background-color: var( --color-surface-1 ); | ||
padding: var( --space-xs ) var( --space-md ); | padding: var( --space-xs ) var( --space-md ); | ||
} | } | ||
| 第83行: | 第78行: | ||
.template-navplate__content > div + div { | .template-navplate__content > div + div { | ||
border-top: | border-top: var( --border-base ); | ||
} | } | ||
.template-navplate__header | .template-navplate__header .mw-ui-icon-wikimedia-collapse { | ||
--transform-rotate-collapse: rotate3d(1, 0, 0, 180deg); | |||
width: var( --font-size-small ); | width: var( --font-size-small ); | ||
height: var( --font-size-small ); | |||
transition: var( --transition-hover ); | |||
transition-property: transform; | |||
transform: var( --transform-rotate-collapse ); | |||
} | } | ||
.template- | .template-navplate[ open ] .template-navplate__header .mw-ui-icon-wikimedia-collapse { | ||
transform: | transform: none; | ||
} | } | ||
2025年8月11日 (一) 13:58的版本
.template-navplate {
margin-top: var( --space-md );
clear: both;
font-size: var( --font-size-small );
line-height: var( --line-height-xx-small );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
overflow: hidden;
user-select: none;
}
.template-navplate__header {
padding: var( --space-sm ) var( --space-md );
background-color: transparent;
display: flex;
align-items: center;
gap: var( --space-md );
cursor: pointer;
user-select: none;
}
.template-navplate[ open ] .template-navplate__header {
background-color: var( --color-surface-1 );
}
.template-navplate .template-navplate__header:hover {
background-color: var( --background-color-button-quiet--hover );
}
.template-navplate__subtitle,
.template-navplate-item__label {
color: var( --color-subtle );
}
.template-navplate-item__label {
font-weight: var( --font-weight-medium );
}
.template-navplate__title {
color: var( --color-emphasized );
font-weight: var( --font-weight-semi-bold );
font-size: var( --font-size-medium );
}
.template-navplate__content {
border-top: var( --border-base );
content-visibility: auto;
}
.template-navplate__groupheader {
background-color: var( --color-surface-1 );
padding: var( --space-xs ) var( --space-md );
}
.template-navplate-item {
display: grid;
}
.template-navplate-item__label {
display: flex;
padding: var( --space-sm ) var( --space-md ) 0 var( --space-md );
gap: var( --space-xs );
}
.template-navplate-item__label img {
opacity: var( --opacity-icon-base );
filter: var( --filter-invert );
}
.template-navplate-item__list {
padding: 10px; /* 10px + 2px = space-sm; 10px + 6px = space-md */
}
.template-navplate-item__list a {
display: inline-block;
padding: 2px 6px;
}
.template-navplate__content > div + div {
border-top: var( --border-base );
}
.template-navplate__header .mw-ui-icon-wikimedia-collapse {
--transform-rotate-collapse: rotate3d(1, 0, 0, 180deg);
width: var( --font-size-small );
height: var( --font-size-small );
transition: var( --transition-hover );
transition-property: transform;
transform: var( --transform-rotate-collapse );
}
.template-navplate[ open ] .template-navplate__header .mw-ui-icon-wikimedia-collapse {
transform: none;
}
@media only screen and ( min-width: 640px ) {
.template-navplate-item {
grid-template-columns: 180px auto;
}
.template-navplate-item__label {
border-right: 1px solid var( --border-color-base );
padding-bottom: var( --space-sm );
}
}