Wikipedia:WikiProject Song Contests/styles.css
Appearance
.tab-content.wpsc-tab-on,
.tab-content.wpsc-tab-off,
.wpsc-frame {
border-radius: 7px;
}
.tab-content.wpsc-tab-on,
.tab-content.wpsc-tab-off {
border: 2px #30C69E solid;
color: #FFFFFF;
font-size: 100%;
line-height: 1.2em;
height: calc(2.6em + 4px);
white-space: nowrap;
}
.tab-content.wpsc-tab-on {
background-color: #30C69E;
}
.tab-content.wpsc-tab-off {
background-color: #D62612;
}
.tab-content.wpsc-tab-on a {
color: #000000 !important;
}
.tab-content.wpsc-tab-off a {
color: #FFFFFF !important;
}
.wpsc-box {
border: 1px solid #AAAAAA;
padding: 0 0.5em 0.5em;
margin-top: 4px;
position: relative;
text-align: left;
}
#wpsc-upper {
display: flex;
flex-direction: row;
width: 100%;
max-width: 100%;
gap: 4px;
}
#wpsc-upper > #wpsc-left {
flex: 1 1 50%;
}
#wpsc-upper > #wpsc-right {
flex: 1 1 50%;
}
html.vector-feature-limited-width-clientpref-1 #wpsc-upper > #wpsc-left {
flex: 1 1 51%;
}
html.vector-feature-limited-width-clientpref-1 #wpsc-upper > #wpsc-right {
flex: 1 1 49%;
}
html.vector-feature-limited-width-clientpref-1.vector-feature-custom-font-size-clientpref-2 #wpsc-upper {
flex-direction: column;
gap: 0;
}
.wpsc-font {
font-family: "Georgia";
}
.wpsc-center {
text-align: center;
}
.wpsc-bigger {
font-size: 112%;
}
#wpsc-banner {
padding-top: 0.5em;
font-size: 90%;
}
#wpsc-countdowns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
body.skin-timeless #wpsc-countdowns > .content-table-wrapper > .content-table > table {
margin: 0 auto;
}
body.skin-timeless #wpsc-countdowns > .content-table-wrapper > .content-table,
body.skin-timeless #wpsc-countdowns > .content-table-wrapper > .content-table > table {
height: 100%;
}
#wpsc-countdowns > table,
body.skin-timeless #wpsc-countdowns > .content-table-wrapper {
width: 33.33333333%;
min-width: 33.33333333%;
max-width: 33.33333333%;
height: stretch;
border-spacing: 0;
border-collapse: collapse;
}
#wpsc-countdowns[data-cols="1"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="1"] > .content-table-wrapper {
width: 100%;
min-width: 100%;
max-width: 100%;
}
#wpsc-countdowns[data-cols="2"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="2"] > .content-table-wrapper {
width: 50%;
min-width: 50%;
max-width: 50%;
}
#wpsc-countdowns[data-cols="4"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="4"] > .content-table-wrapper {
width: 25%;
min-width: 25%;
max-width: 25%;
}
#wpsc-countdowns[data-cols="5"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="5"] > .content-table-wrapper {
width: 20%;
min-width: 20%;
max-width: 20%;
}
#wpsc-countdowns table tr:first-child {
height: 48px;
}
#wpsc-countdowns table tr:nth-child(2) {
height: 100%;
}
#wpsc-countdowns table th,
#wpsc-countdowns table td {
padding: 0;
margin: 0;
}
h2.wpsc-h2, body.skin-timeless h2.wpsc-h2 {
border: 1px solid #AAAAAA;
margin: 0.5em 0;
padding: 0.2em 0.4em;
font-size: 120%;
font-weight: bold;
font-family: inherit;
}
.wpsc-linktable {
margin: -0.5em auto 0;
}
.wpsc-linktable > caption {
font-weight: bold;
}
.wpsc-linktable td {
text-align: left;
vertical-align: top;
}
.wpsc-linktable td:first-child {
text-align: right;
white-space: nowrap;
}
.wpsc-linktable td:only-child {
text-align: center;
white-space: inherit;
}
.wpsc-viewedit {
position: absolute;
bottom: 0.5em;
right: 0.5em;
text-align: right;
white-space: nowrap;
}
.wpsc-box.pcs-widen-image-ancestor,
.wpsc-box .pcs-widen-image-ancestor {
width: unset !important;
}
.wpsc-box figure[typeof~='mw:File'].mw-halign-left,
.wpsc-box figure[typeof~='mw:File/Frameless'].mw-halign-left {
float: left !important;
}
/* show event countdowns in a single column and simplify template lists if the width is too small */
@media (max-width: 639px) {
#wpsc-countdowns > table,
#wpsc-countdowns[data-cols] > table,
body.skin-timeless #wpsc-countdowns > .content-table-wrapper,
body.skin-timeless #wpsc-countdowns[data-cols] > .content-table-wrapper {
display: table;
overflow: visible;
width: 100%;
min-width: 100%;
max-width: 100%;
}
.wpsc-linktable {
display: flex;
flex-direction: column;
width: 100%;
margin: -0.5em 0 0;
}
.wpsc-linktable > tbody {
display: contents;
}
.wpsc-linktable tr {
display: grid;
width: 100%;
justify-content: left;
}
.wpsc-linktable.wpsc-linktable-short tr {
display: block;
text-align: left;
}
.wpsc-linktable tr.wpsc-span {
justify-content: center;
}
.wpsc-linktable.wpsc-linktable-short tr.wpsc-span {
text-align: center;
}
.wpsc-linktable td {
display: block;
text-align: left;
grid-row: 2;
margin-left: 1em;
}
.wpsc-linktable td:first-child {
text-align: left;
white-space: inherit;
grid-column: 1 / span 2;
grid-row: 1;
margin-left: 0;
}
.wpsc-linktable td:last-child {
text-align: left;
white-space: inherit;
grid-row: 2;
margin-left: 0.5em;
}
.wpsc-linktable td:only-child,
.wpsc-linktable.wpsc-linktable-short td:only-child {
text-align: center;
white-space: inherit;
margin-left: 0;
}
.wpsc-linktable.wpsc-linktable-short td {
display: inline;
margin-left: 0;
}
}
/* one or two columns */
@media (max-width: 875px) {
#wpsc-upper {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 1271px) {
html.vector-feature-main-menu-pinned-enabled.vector-feature-custom-font-size-clientpref-0 #wpsc-upper {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 1369px) {
html.vector-feature-main-menu-pinned-enabled.vector-feature-custom-font-size-clientpref-1 #wpsc-upper {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 1565px) {
html.vector-feature-limited-width-clientpref-0.vector-feature-custom-font-size-clientpref-2 #wpsc-upper {
flex-direction: column;
gap: 0;
}
}
@media (min-width: 1346px) {
html.vector-feature-main-menu-pinned-disabled.vector-feature-limited-width-clientpref-0.vector-feature-custom-font-size-clientpref-2 #wpsc-upper {
flex-direction: row;
gap: 4px;
}
}
/* themes */
@media screen {
/* light mode */
.wpsc-box {
background-color: #FFFFFF;
border-color: #D62612;
}
.wpsc-frame {
border: 2px #30C69E solid;
}
.wpsc-box h2.wpsc-h2 {
background-color: #50E6CE;
border-color: #D62612;
}
/* dark mode */
html.skin-theme-clientpref-night .wpsc-box {
background-color: transparent;
border-color: #D62612;
}
html.skin-theme-clientpref-night .wpsc-frame {
border: 2px #30C69E solid;
}
html.skin-theme-clientpref-night .wpsc-box h2.wpsc-h2 {
background-color: #192F27;
border-color: #2E5748;
}
}
/* OS dark mode */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .wpsc-box {
background-color: transparent;
border-color: #D62612;
}
html.skin-theme-clientpref-os .wpsc-frame {
border: 2px #30C69E solid;
}
html.skin-theme-clientpref-os .wpsc-box h2.wpsc-h2 {
background-color: #192F27;
border-color: #2E5748;
}
}