Template:License/styles.css: Difference between revisions
Appearance
Fix darkmode |
No edit summary |
||
| Line 1: | Line 1: | ||
.mw-license-box { | .mw-license-box { | ||
display: inline-table; | display: inline-table; | ||
border: 1px solid # | border: 1px solid var(--border-color-base, #a2a9b1); | ||
font-size: 88%; | font-size: 88%; | ||
margin: 0.2em 0; | margin: 0.2em 0; | ||
| Line 16: | Line 16: | ||
text-align: center; | text-align: center; | ||
min-width: 52px; | min-width: 52px; | ||
border-right: 1px solid # | border-right: 1px solid var(--border-color-base, #a2a9b1); | ||
white-space: nowrap; | white-space: nowrap; | ||
color: #202122; | |||
} | } | ||
.mw-license-desc { | .mw-license-desc { | ||
max-width: 220px; | max-width: 220px; | ||
color: var(--color-base, #202122); | |||
} | |||
.mw-license-desc a { | |||
font-weight: bold; | |||
} | } | ||
/* Light mode badge | /* Light mode badge backgrounds */ | ||
.mw-license-cc-by | .mw-license-cc-by .mw-license-badge { | ||
.mw-license-cc-by-sa | background: #b3e0b3; | ||
.mw-license-cc-by-nc | } | ||
.mw-license-cc-by-nc-sa .mw-license-badge { background: #fcd34d; } | .mw-license-cc-by-sa .mw-license-badge { | ||
.mw-license-cc-by-nd | background: #99d699; | ||
.mw-license-cc-by-nc-nd .mw-license-badge { background: #f3a5d8; } | } | ||
.mw-license-cc0 | .mw-license-cc-by-nc .mw-license-badge { | ||
background: #fde68a; | |||
} | |||
.mw-license-cc-by-nc-sa .mw-license-badge { | |||
background: #fcd34d; | |||
} | |||
.mw-license-cc-by-nd .mw-license-badge { | |||
background: #a5d8f3; | |||
} | |||
.mw-license-cc-by-nc-nd .mw-license-badge { | |||
background: #f3a5d8; | |||
} | |||
.mw-license-cc0 .mw-license-badge { | |||
background: #c4b5fd; | |||
} | } | ||
. | .mw-license-arr .mw-license-badge { | ||
background: var(--background-color-neutral, #eaecf0); | |||
color: var(--color-base, #202122); | |||
} | } | ||
/* Dark badge backgrounds + text — manual Night toggle */ | |||
.skin-theme-clientpref- | @media screen { | ||
.skin-theme-clientpref-night .mw-license-cc-by-sa | html.skin-theme-clientpref-night .mw-license-cc-by .mw-license-badge { | ||
background: #1a4d1a; | |||
.skin-theme-clientpref-night .mw-license-cc-by-nc | color: #c8f0c8; | ||
} | |||
.skin-theme-clientpref-night .mw-license-cc-by-nc-sa .mw-license-badge | html.skin-theme-clientpref-night .mw-license-cc-by-sa .mw-license-badge { | ||
background: #144014; | |||
.skin-theme-clientpref-night .mw-license-cc-by-nd | color: #a8e0a8; | ||
} | |||
.skin-theme-clientpref-night .mw-license-cc-by-nc-nd .mw-license-badge | html.skin-theme-clientpref-night .mw-license-cc-by-nc .mw-license-badge { | ||
background: #4d3d00; | |||
.skin-theme-clientpref-night .mw-license-cc0 | color: #ffe99a; | ||
} | |||
html.skin-theme-clientpref-night .mw-license-cc-by-nc-sa .mw-license-badge { | |||
background: #4d3200; | |||
color: #ffd97a; | |||
} | |||
html.skin-theme-clientpref-night .mw-license-cc-by-nd .mw-license-badge { | |||
background: #0d3a52; | |||
color: #a8d8f0; | |||
} | |||
html.skin-theme-clientpref-night .mw-license-cc-by-nc-nd .mw-license-badge { | |||
background: #52112e; | |||
color: #f0a8cc; | |||
} | |||
html.skin-theme-clientpref-night .mw-license-cc0 .mw-license-badge { | |||
background: #2d1a5e; | |||
color: #d4bbff; | |||
} | |||
} | |||
/* OS preference | /* Dark badge backgrounds + text — OS dark preference */ | ||
@media (prefers-color-scheme: | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .mw-license-cc-by .mw-license-badge { | |||
background: #1a4d1a; | |||
color: #c8f0c8; | |||
.skin-theme-clientpref-os .mw-license-cc-by-sa | } | ||
.skin-theme-clientpref-os .mw-license-cc-by-nc | html.skin-theme-clientpref-os .mw-license-cc-by-sa .mw-license-badge { | ||
.skin-theme-clientpref-os .mw-license-cc-by-nc-sa .mw-license-badge { background: # | background: #144014; | ||
.skin-theme-clientpref-os .mw-license-cc-by-nd | color: #a8e0a8; | ||
.skin-theme-clientpref-os .mw-license-cc-by-nc-nd .mw-license-badge { background: # | } | ||
.skin-theme-clientpref-os .mw-license-cc0 | html.skin-theme-clientpref-os .mw-license-cc-by-nc .mw-license-badge { | ||
background: #4d3d00; | |||
color: #ffe99a; | |||
} | |||
html.skin-theme-clientpref-os .mw-license-cc-by-nc-sa .mw-license-badge { | |||
background: #4d3200; | |||
color: #ffd97a; | |||
} | |||
html.skin-theme-clientpref-os .mw-license-cc-by-nd .mw-license-badge { | |||
background: #0d3a52; | |||
color: #a8d8f0; | |||
} | |||
html.skin-theme-clientpref-os .mw-license-cc-by-nc-nd .mw-license-badge { | |||
background: #52112e; | |||
color: #f0a8cc; | |||
} | |||
html.skin-theme-clientpref-os .mw-license-cc0 .mw-license-badge { | |||
background: #2d1a5e; | |||
color: #d4bbff; | |||
} | |||
} | } | ||
Latest revision as of 13:05, 18 April 2026
.mw-license-box {
display: inline-table;
border: 1px solid var(--border-color-base, #a2a9b1);
font-size: 88%;
margin: 0.2em 0;
clear: right;
float: right;
}
.mw-license-box td {
vertical-align: middle;
padding: 3px 6px;
}
.mw-license-badge {
font-weight: bold;
font-size: 115%;
text-align: center;
min-width: 52px;
border-right: 1px solid var(--border-color-base, #a2a9b1);
white-space: nowrap;
color: #202122;
}
.mw-license-desc {
max-width: 220px;
color: var(--color-base, #202122);
}
.mw-license-desc a {
font-weight: bold;
}
/* Light mode badge backgrounds */
.mw-license-cc-by .mw-license-badge {
background: #b3e0b3;
}
.mw-license-cc-by-sa .mw-license-badge {
background: #99d699;
}
.mw-license-cc-by-nc .mw-license-badge {
background: #fde68a;
}
.mw-license-cc-by-nc-sa .mw-license-badge {
background: #fcd34d;
}
.mw-license-cc-by-nd .mw-license-badge {
background: #a5d8f3;
}
.mw-license-cc-by-nc-nd .mw-license-badge {
background: #f3a5d8;
}
.mw-license-cc0 .mw-license-badge {
background: #c4b5fd;
}
.mw-license-arr .mw-license-badge {
background: var(--background-color-neutral, #eaecf0);
color: var(--color-base, #202122);
}
/* Dark badge backgrounds + text — manual Night toggle */
@media screen {
html.skin-theme-clientpref-night .mw-license-cc-by .mw-license-badge {
background: #1a4d1a;
color: #c8f0c8;
}
html.skin-theme-clientpref-night .mw-license-cc-by-sa .mw-license-badge {
background: #144014;
color: #a8e0a8;
}
html.skin-theme-clientpref-night .mw-license-cc-by-nc .mw-license-badge {
background: #4d3d00;
color: #ffe99a;
}
html.skin-theme-clientpref-night .mw-license-cc-by-nc-sa .mw-license-badge {
background: #4d3200;
color: #ffd97a;
}
html.skin-theme-clientpref-night .mw-license-cc-by-nd .mw-license-badge {
background: #0d3a52;
color: #a8d8f0;
}
html.skin-theme-clientpref-night .mw-license-cc-by-nc-nd .mw-license-badge {
background: #52112e;
color: #f0a8cc;
}
html.skin-theme-clientpref-night .mw-license-cc0 .mw-license-badge {
background: #2d1a5e;
color: #d4bbff;
}
}
/* Dark badge backgrounds + text — OS dark preference */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .mw-license-cc-by .mw-license-badge {
background: #1a4d1a;
color: #c8f0c8;
}
html.skin-theme-clientpref-os .mw-license-cc-by-sa .mw-license-badge {
background: #144014;
color: #a8e0a8;
}
html.skin-theme-clientpref-os .mw-license-cc-by-nc .mw-license-badge {
background: #4d3d00;
color: #ffe99a;
}
html.skin-theme-clientpref-os .mw-license-cc-by-nc-sa .mw-license-badge {
background: #4d3200;
color: #ffd97a;
}
html.skin-theme-clientpref-os .mw-license-cc-by-nd .mw-license-badge {
background: #0d3a52;
color: #a8d8f0;
}
html.skin-theme-clientpref-os .mw-license-cc-by-nc-nd .mw-license-badge {
background: #52112e;
color: #f0a8cc;
}
html.skin-theme-clientpref-os .mw-license-cc0 .mw-license-badge {
background: #2d1a5e;
color: #d4bbff;
}
}