imported>Alistair3149 (Fix border color) |
sctools>Alistair3149 (Deprecate background-color-framed) |
||
Line 9: | Line 9: | ||
.navplate-header { | .navplate-header { | ||
line-height: 1. | line-height: 1.25; | ||
} | } | ||
Line 16: | Line 16: | ||
.navplate-content-item-label { | .navplate-content-item-label { | ||
color: var( --color-base--subtle ); | color: var( --color-base--subtle ); | ||
letter-spacing: | letter-spacing: .05em; | ||
} | } | ||
Line 27: | Line 27: | ||
color: var( --color-base--emphasized ); | color: var( --color-base--emphasized ); | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
font-weight: | font-weight: 600; | ||
} | } | ||
Line 88: | Line 88: | ||
border: 1px solid; | border: 1px solid; | ||
border-color: var( --border-color-base ); | border-color: var( --border-color-base ); | ||
background: var( -- | background: var( --color-surface-2 ); | ||
border-radius: var( --border-radius--medium ); | border-radius: var( --border-radius--medium ); | ||
color: var( --color-base-- | color: var( --color-base--emphasized ); | ||
} | } | ||
.navplate .mw-collapsible-text:hover { | .navplate .mw-collapsible-text:hover { | ||
background: var( -- | background: var( --color-surface-2--hover ); | ||
} | } | ||
.navplate .mw-collapsible-text:active { | .navplate .mw-collapsible-text:active { | ||
background: var( -- | background: var( --color-surface-2--active ); | ||
} | } | ||
Revision as of 04:44, 3 January 2023
.navplate {
margin-top: 1.6rem;
clear: both;
}
.navplate p {
margin: 0;
}
.navplate-header {
line-height: 1.25;
}
.navplate-header-label,
.navplate-content-header,
.navplate-content-item-label {
color: var( --color-base--subtle );
letter-spacing: .05em;
}
.navplate-header-label {
font-size: 0.8125rem;
}
.navplate-header-title {
margin-top: 2px;
color: var( --color-base--emphasized );
font-size: 1.2rem;
font-weight: 600;
}
.navplate-content {
position: relative;
margin: 10px -20px 0;
background: var( --color-surface-3 );
border-radius: var( --border-radius--medium );
font-size: 14px;
}
.navplate-content-header {
padding: 5px 20px;
border-bottom: 1px solid;
border-color: var( --border-color-base );
}
.navplate-content-item {
display: grid;
border-bottom: 1px solid;
border-color: var( --border-color-base );
}
.navplate-content-item-label {
display: flex;
padding: 10px 20px;
}
.navplate-content-item-label-icon {
margin-right: 8px;
}
.navplate-content-item-list {
padding: 10px 14px;
background: var( --color-surface-2 );
}
.navplate-content-item-list a {
display: inline-block;
padding: 0 6px;
}
.navplate .mw-collapsible-toggle {
position: absolute;
right: 0;
margin-top: -47px;
float: none;
}
.navplate .mw-collapsible-toggle-default:before,
.navplate .mw-collapsible-toggle-default:after {
content: none;
}
.navplate .mw-collapsible-text {
position: relative;
right: 0;
display: block;
padding: 4px 12px;
border: 1px solid;
border-color: var( --border-color-base );
background: var( --color-surface-2 );
border-radius: var( --border-radius--medium );
color: var( --color-base--emphasized );
}
.navplate .mw-collapsible-text:hover {
background: var( --color-surface-2--hover );
}
.navplate .mw-collapsible-text:active {
background: var( --color-surface-2--active );
}
.navplate-content .mw-collapsible-content {
overflow: hidden;
border-radius: var( --border-radius--medium );
}
@media only screen and ( min-width: 720px ) {
.navplate-content {
margin-right: 0;
margin-left: 0;
}
.navplate-content-item {
grid-template-columns: 180px auto;
}
.navplate-content-item-label {
padding-right: 10px;
}
.navplate-content-item-list {
padding-left: 6px;
}
}