Template:Community tabs/styles.css
Jump to navigation
Jump to search
.community-tabs {
box-sizing: border-box;
width: 100%;
text-align: center;
font-size: 110%;
}
.community-tabs ul {
list-style: none;
margin: 0;
padding: 0;
}
.community-tabs li {
margin: 0;
}
.community-tabs > ul > li {
vertical-align: middle;
padding: 0.3em;
border: solid 1px #a2a9b1;
border-top: 0;
background-color: #069;
color: white;
}
.community-tabs > ul > li.active {
background-color: #d7e8f9;
border-bottom-width: 0;
color: black;
}
.community-tabs > ul > li > ul {
font-size: 80%;
}
.community-tabs > ul > li > ul > li {
display: inline;
}
.community-tabs > ul > li > ul > li::after {
content: " •";
}
.community-tabs > ul > li > ul > li:last-child::after {
content: none;
}
.community-tabs li a {
color: inherit;
white-space: nowrap;
}
.community-tabs > ul > li.active a[href] {
color: #069;
}
.community-page-wrapper {
border: solid 1px #a2a9b1;
padding: .5em 1em 1em 1em;
border-top: none;
background-color: transparent;
color: inherit;
}
/* dark mode fixes */
html.skin-theme-clientpref-night .community-tabs > ul > li.active {
background-color: #1c2940;
color: inherit;
}
html.skin-theme-clientpref-night .community-tabs > ul > li.active a[href] {
color: inherit;
}
html.skin-theme-clientpref-night .community-tabs > ul > li {
background-color: #0099E6;
}
@media screen and (prefers-color-scheme: dark) {
/* automatic mode */
html.skin-theme-clientpref-os .community-tabs > ul > li.active {
background-color: #1c2940;
color: inherit;
}
html.skin-theme-clientpref-os .community-tabs > ul > li.active a[href] {
color: inherit;
}
html.skin-theme-clientpref-os .community-tabs > ul > li {
background-color: #0099E6;
}
}
@media (min-width: 1000px) {
.community-tabs {
display: table;
border-collapse: collapse;
}
.community-tabs > ul {
display: table-row;
}
.community-tabs > ul > li {
display: table-cell;
width: 25%;
}
.community-tabs > ul > li.active {
border-bottom-width: 0;
}
}