Want to contribute? Join the Discord and ask for the editor role.
Template:Navplate/styles.css: Difference between revisions
Template page
m (1 revision imported) |
No edit summary |
||
(10 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
margin-top: 1.6rem; | margin-top: 1.6rem; | ||
clear: both; | clear: both; | ||
position: relative; | |||
} | } | ||
Line 8: | Line 9: | ||
} | } | ||
. | .navplate__header { | ||
line-height: 1.2; | line-height: 1.2; | ||
} | } | ||
. | .navplate__header-label, | ||
. | .navplate__content-header, | ||
. | .navplate__content-item-label { | ||
color: #72777d; | color: #72777d; | ||
letter-spacing: .75px; | /*letter-spacing: .75px;*/ | ||
} | } | ||
. | .navplate__header-label { | ||
font-size: 0.8125rem; | font-size: 0.8125rem; | ||
} | } | ||
. | .navplate__header-title { | ||
margin-top: 2px; | margin-top: 2px; | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
Line 30: | Line 31: | ||
} | } | ||
. | .navplate__header-title a:not(:hover):not(:focus):not(:active) { | ||
color: inherit; | |||
} | |||
.navplate__content { | |||
margin: 10px -20px 0; | margin: 10px -20px 0; | ||
border-radius: 12px; | border-radius: 12px; | ||
Line 38: | Line 43: | ||
} | } | ||
. | .navplate__content-header { | ||
padding: 5px 20px; | padding: 5px 20px; | ||
border-bottom: 1px solid rgba(0,0,0,0.02); | border-bottom: 1px solid rgba(0,0,0,0.02); | ||
Line 44: | Line 49: | ||
} | } | ||
. | .navplate__content-item { | ||
display: grid; | display: grid; | ||
border-bottom: 1px solid rgba(0,0,0,0.04); | border-bottom: 1px solid rgba(0,0,0,0.04); | ||
} | } | ||
. | .navplate__content-item-label { | ||
padding: 10px 20px; | padding: 10px 20px; | ||
display: flex; | display: flex; | ||
Line 55: | Line 60: | ||
} | } | ||
. | .navplate__content-item-label a:not(:hover):not(:focus):not(:active) { | ||
color: inherit; | |||
} | |||
.navplate__content-item-label-icon { | |||
margin-right: 8px; | margin-right: 8px; | ||
} | } | ||
. | .navplate__content-item-list { | ||
padding: 10px 14px; | padding: 10px 14px; | ||
} | } | ||
. | .navplate__content-item-list a { | ||
padding: 0px 6px; | padding: 0px 6px; | ||
display: inline-block; | display: inline-block; | ||
Line 99: | Line 108: | ||
} | } | ||
html.skin-citizen-dark .navplate__header-label, | |||
html.skin-citizen-dark .navplate__content-header, | |||
html.skin-citizen-dark .navplate__content-item-label { | |||
color: #a0a1a5; | |||
} | |||
html.skin-citizen-dark .navplate__content { | |||
background: #222629; | |||
border: 1px solid rgba(255,255,255,0.05); | |||
} | |||
html.skin-citizen-dark .navplate__content-header { | |||
border-color: rgba(255,255,255,0.02); | |||
background-color: rgba(255,255,255,0.04); | |||
} | |||
html.skin-citizen-dark .navplate__content-item { | |||
border-color: rgba(255,255,255,0.05); | |||
} | } | ||
html.skin-citizen-dark .navplate__content-item:last-child { | |||
border: none; | |||
} | |||
html.skin-citizen-dark .navplate__content-item-label { | |||
background-color: rgba(255,255,255,0.02); | |||
} | |||
html.skin-citizen-dark .navplate .mw-collapsible-text { | |||
border-color: rgba(255,255,255,0.04); | |||
color: #a0a1a5; | |||
background: rgba(255,255,255,0.04); | |||
} | |||
html.skin-citizen-dark .navplate .mw-collapsible-text:hover { | |||
background: rgba(255,255,255,0.05); | |||
} | |||
html.skin-citizen-dark .navplate .mw-collapsible-text:active { | |||
background: rgba(255,255,255,0.02); | |||
} | } | ||
@media only screen and (min-width: 720px) { | @media only screen and (min-width: 720px) { | ||
. | .navplate__content { | ||
margin-left: 0; | margin-left: 0; | ||
margin-right: 0; | margin-right: 0; | ||
} | } | ||
. | .navplate__content-item { | ||
grid-template-columns: 180px auto; | grid-template-columns: 180px auto; | ||
} | } | ||
. | .navplate__content-item-label { | ||
padding-right: 10px; | padding-right: 10px; | ||
} | } | ||
. | .navplate__content-item-list { | ||
padding-left: 6px; | padding-left: 6px; | ||
} | } | ||
} | } |
Latest revision as of 00:15, 7 May 2021
.navplate {
margin-top: 1.6rem;
clear: both;
position: relative;
}
.navplate p {
margin: 0;
}
.navplate__header {
line-height: 1.2;
}
.navplate__header-label,
.navplate__content-header,
.navplate__content-item-label {
color: #72777d;
/*letter-spacing: .75px;*/
}
.navplate__header-label {
font-size: 0.8125rem;
}
.navplate__header-title {
margin-top: 2px;
font-size: 1.2rem;
font-weight: bold;
}
.navplate__header-title a:not(:hover):not(:focus):not(:active) {
color: inherit;
}
.navplate__content {
margin: 10px -20px 0;
border-radius: 12px;
background: #f8f9fa;
font-size: 14px;
overflow: hidden;
}
.navplate__content-header {
padding: 5px 20px;
border-bottom: 1px solid rgba(0,0,0,0.02);
background-color: rgba(0,0,0,0.04);
}
.navplate__content-item {
display: grid;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.navplate__content-item-label {
padding: 10px 20px;
display: flex;
background-color: rgba(0,0,0,0.02);
}
.navplate__content-item-label a:not(:hover):not(:focus):not(:active) {
color: inherit;
}
.navplate__content-item-label-icon {
margin-right: 8px;
}
.navplate__content-item-list {
padding: 10px 14px;
}
.navplate__content-item-list a {
padding: 0px 6px;
display: inline-block;
}
.navplate .mw-collapsible-toggle {
position: absolute;
float: unset;
right: 0;
margin-top: -47px;
}
.navplate .mw-collapsible-toggle-default:before,
.navplate .mw-collapsible-toggle-default:after {
content: none;
}
.navplate .mw-collapsible-text {
position: relative;
right: 0;
padding: 4px 12px;
display: block;
border: 1px solid rgba(0,0,0,0.02);
border-radius: 12px;
color: #72777d;
background: rgba(0,0,0,0.02);
}
.navplate .mw-collapsible-text:hover {
background: rgba(0,0,0,0.03);
}
.navplate .mw-collapsible-text:active {
background: rgba(0,0,0,0.05);
}
html.skin-citizen-dark .navplate__header-label,
html.skin-citizen-dark .navplate__content-header,
html.skin-citizen-dark .navplate__content-item-label {
color: #a0a1a5;
}
html.skin-citizen-dark .navplate__content {
background: #222629;
border: 1px solid rgba(255,255,255,0.05);
}
html.skin-citizen-dark .navplate__content-header {
border-color: rgba(255,255,255,0.02);
background-color: rgba(255,255,255,0.04);
}
html.skin-citizen-dark .navplate__content-item {
border-color: rgba(255,255,255,0.05);
}
html.skin-citizen-dark .navplate__content-item:last-child {
border: none;
}
html.skin-citizen-dark .navplate__content-item-label {
background-color: rgba(255,255,255,0.02);
}
html.skin-citizen-dark .navplate .mw-collapsible-text {
border-color: rgba(255,255,255,0.04);
color: #a0a1a5;
background: rgba(255,255,255,0.04);
}
html.skin-citizen-dark .navplate .mw-collapsible-text:hover {
background: rgba(255,255,255,0.05);
}
html.skin-citizen-dark .navplate .mw-collapsible-text:active {
background: rgba(255,255,255,0.02);
}
@media only screen and (min-width: 720px) {
.navplate__content {
margin-left: 0;
margin-right: 0;
}
.navplate__content-item {
grid-template-columns: 180px auto;
}
.navplate__content-item-label {
padding-right: 10px;
}
.navplate__content-item-list {
padding-left: 6px;
}
}