Module:Hatnote/styles.css: Difference between revisions
From Amaranth Legacy, available at amaranth-legacy.community
More actions
Content deleted Content added
move @print none to templatestyles from MediaWiki:Print.css to support MediaWiki talk:Common.css/to do#Turn mobile.css/js totally off |
Tesinormed (talk | contribs) m Protected "Module:Hatnote/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) [cascading] |
||
| (40 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
html.skin-theme-clientpref-day .hatnote-wrapper { |
|||
/* {{pp|small=y}} */ |
|||
--color-link: var(--template-arg-color-link--light, inherit); |
|||
.hatnote { |
|||
--color-link--hover: var(--template-arg-color-link--light, inherit); |
|||
font-style: italic; |
|||
--color-link--active: var(--template-arg-color-link--light, inherit); |
|||
--color-visited: var(--template-arg-color-link--light, inherit); |
|||
--color-visited--hover: var(--template-arg-color-link--light, inherit); |
|||
--color-visited--active: var(--template-arg-color-link--light, inherit); |
|||
--color-amaranth-legacy-scope: var(--template-arg-color--light, inherit); |
|||
} |
} |
||
@media (prefers-color-scheme: light) { |
|||
/* Limit structure CSS to divs because of [[Module:Hatnote inline]] */ |
|||
html.skin-theme-clientpref-os .hatnote-wrapper { |
|||
--color-link: var(--template-arg-color-link--light, inherit); |
|||
/* @noflip */ |
|||
--color-link--hover: var(--template-arg-color-link--light, inherit); |
|||
padding-left: 1.6em; |
|||
--color-link--active: var(--template-arg-color-link--light, inherit); |
|||
margin-bottom: 0.5em; |
|||
--color-visited: var(--template-arg-color-link--light, inherit); |
|||
--color-visited--hover: var(--template-arg-color-link--light, inherit); |
|||
--color-visited--active: var(--template-arg-color-link--light, inherit); |
|||
--color-amaranth-legacy-scope: var(--template-arg-color--light, inherit); |
|||
} |
|||
} |
} |
||
html.skin-theme-clientpref-night .hatnote-wrapper { |
|||
.hatnote i { |
|||
--color-link: var(--template-arg-color-link--dark, inherit); |
|||
font-style: normal; |
|||
--color-link--hover: var(--template-arg-color-link--dark, inherit); |
|||
--color-link--active: var(--template-arg-color-link--dark, inherit); |
|||
--color-visited: var(--template-arg-color-link--dark, inherit); |
|||
--color-visited--hover: var(--template-arg-color-link--dark, inherit); |
|||
--color-visited--active: var(--template-arg-color-link--dark, inherit); |
|||
--color-amaranth-legacy-scope: var(--template-arg-color--dark, inherit); |
|||
} |
} |
||
@media (prefers-color-scheme: dark) { |
|||
/* The templatestyles element inserts a link element before hatnotes. |
|||
html.skin-theme-clientpref-os .hatnote-wrapper { |
|||
* TODO: Remove link if/when WMF resolves T200206 */ |
|||
--color-link: var(--template-arg-color-link--dark, inherit); |
|||
.hatnote + link + .hatnote { |
|||
--color-link--hover: var(--template-arg-color-link--dark, inherit); |
|||
margin-top: -0.5em; |
|||
--color-link--active: var(--template-arg-color-link--dark, inherit); |
|||
--color-visited: var(--template-arg-color-link--dark, inherit); |
|||
--color-visited--hover: var(--template-arg-color-link--dark, inherit); |
|||
--color-visited--active: var(--template-arg-color-link--dark, inherit); |
|||
--color-amaranth-legacy-scope: var(--template-arg-color--dark, inherit); |
|||
} |
|||
} |
} |
||
/* no images */ |
|||
@media print { |
|||
.hatnote0 .hatnote-text { |
|||
text-align: center; |
|||
display: none !important; |
|||
} |
|||
/* one image */ |
|||
.hatnote1 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
text-align: left; |
|||
} |
|||
.hatnote1 .hatnote-image1 { |
|||
flex: 0 1 auto; |
|||
margin: 0 var(--space-sm); |
|||
} |
|||
.hatnote1 .hatnote-image1 img { |
|||
max-width: 100%; |
|||
height: 100%; |
|||
} |
|||
.hatnote1 .hatnote-text { |
|||
flex: 0 1 fit-content; |
|||
} |
|||
/* two images */ |
|||
.hatnote2 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
.hatnote2 > :first-child, |
|||
.hatnote2 > :last-child { |
|||
flex: 0 1 auto; |
|||
margin: 0 var(--space-sm); |
|||
} |
|||
.hatnote2 img { |
|||
max-width: 100%; |
|||
height: 100%; |
|||
} |
|||
.hatnote2 > :nth-child(2) { |
|||
flex: 1 1 fit-content; |
|||
} |
|||
.hatnote-primary { |
|||
color: var(--color-amaranth-legacy-scope); |
|||
font-family: var(--font-family-header-custom, var(--font-family-serif)); |
|||
font-size: var(--font-size-xx-large); |
|||
} |
|||
.hatnote-text ul { |
|||
margin-block: 0; |
|||
} |
} |
||
Latest revision as of 10:43, September 11, 2025
html.skin-theme-clientpref-day .hatnote-wrapper {
--color-link: var(--template-arg-color-link--light, inherit);
--color-link--hover: var(--template-arg-color-link--light, inherit);
--color-link--active: var(--template-arg-color-link--light, inherit);
--color-visited: var(--template-arg-color-link--light, inherit);
--color-visited--hover: var(--template-arg-color-link--light, inherit);
--color-visited--active: var(--template-arg-color-link--light, inherit);
--color-amaranth-legacy-scope: var(--template-arg-color--light, inherit);
}
@media (prefers-color-scheme: light) {
html.skin-theme-clientpref-os .hatnote-wrapper {
--color-link: var(--template-arg-color-link--light, inherit);
--color-link--hover: var(--template-arg-color-link--light, inherit);
--color-link--active: var(--template-arg-color-link--light, inherit);
--color-visited: var(--template-arg-color-link--light, inherit);
--color-visited--hover: var(--template-arg-color-link--light, inherit);
--color-visited--active: var(--template-arg-color-link--light, inherit);
--color-amaranth-legacy-scope: var(--template-arg-color--light, inherit);
}
}
html.skin-theme-clientpref-night .hatnote-wrapper {
--color-link: var(--template-arg-color-link--dark, inherit);
--color-link--hover: var(--template-arg-color-link--dark, inherit);
--color-link--active: var(--template-arg-color-link--dark, inherit);
--color-visited: var(--template-arg-color-link--dark, inherit);
--color-visited--hover: var(--template-arg-color-link--dark, inherit);
--color-visited--active: var(--template-arg-color-link--dark, inherit);
--color-amaranth-legacy-scope: var(--template-arg-color--dark, inherit);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .hatnote-wrapper {
--color-link: var(--template-arg-color-link--dark, inherit);
--color-link--hover: var(--template-arg-color-link--dark, inherit);
--color-link--active: var(--template-arg-color-link--dark, inherit);
--color-visited: var(--template-arg-color-link--dark, inherit);
--color-visited--hover: var(--template-arg-color-link--dark, inherit);
--color-visited--active: var(--template-arg-color-link--dark, inherit);
--color-amaranth-legacy-scope: var(--template-arg-color--dark, inherit);
}
}
/* no images */
.hatnote0 .hatnote-text {
text-align: center;
}
/* one image */
.hatnote1 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
text-align: left;
}
.hatnote1 .hatnote-image1 {
flex: 0 1 auto;
margin: 0 var(--space-sm);
}
.hatnote1 .hatnote-image1 img {
max-width: 100%;
height: 100%;
}
.hatnote1 .hatnote-text {
flex: 0 1 fit-content;
}
/* two images */
.hatnote2 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
text-align: center;
}
.hatnote2 > :first-child,
.hatnote2 > :last-child {
flex: 0 1 auto;
margin: 0 var(--space-sm);
}
.hatnote2 img {
max-width: 100%;
height: 100%;
}
.hatnote2 > :nth-child(2) {
flex: 1 1 fit-content;
}
.hatnote-primary {
color: var(--color-amaranth-legacy-scope);
font-family: var(--font-family-header-custom, var(--font-family-serif));
font-size: var(--font-size-xx-large);
}
.hatnote-text ul {
margin-block: 0;
}