Template:Amaranth TV/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
Tesinormed (talk | contribs) No edit summary Tag: Reverted |
Tesinormed (talk | contribs) Replaced content with ".amaranth-tv { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-md); text-align: center; font-weight: bold; }" Tags: Replaced Manual revert |
||
| (One intermediate revision by the same user not shown) | |||
| Line 7: | Line 7: | ||
text-align: center; |
text-align: center; |
||
font-weight: bold; |
font-weight: bold; |
||
} |
|||
.amaranth-tv-entry { |
|||
width: 160px; |
|||
height: 200px; |
|||
background: var(--color-surface-2); |
|||
border-style: solid; |
|||
border-width: 4px; |
|||
} |
|||
.amaranth-tv-entry figure, |
|||
.amaranth-tv-entry figure > a:first-child:not(.mw-file-description) { |
|||
border: none; |
|||
border-radius: 0; |
|||
} |
|||
.amaranth-tv-entry figure { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-wrap: nowrap; |
|||
justify-content: center; |
|||
align-content: space-between; |
|||
gap: var(--space-xs); |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0; |
|||
} |
|||
.amaranth-tv-entry figure > a:first-child:not(.mw-file-description) { |
|||
display: block; |
|||
flex: 0; |
|||
flex-basis: 150px; |
|||
} |
|||
.amaranth-tv-entry figure img { |
|||
width: 100% !important; |
|||
height: unset; |
|||
padding: var(--space-xs) var(--space-md) 0; |
|||
} |
|||
.amaranth-tv-entry figure > figcaption { |
|||
flex: 1; |
|||
display: inline-block; |
|||
text-align: center; |
|||
color: var(--color-base); |
|||
font-size: var(--font-size-base); |
|||
font-weight: bold; |
|||
line-height: var(--line-height-xx-small); |
|||
padding: 0 var(--space-xs) var(--space-xs); |
|||
} |
|||
html.skin-theme-clientpref-day .amaranth-tv-entry { |
|||
border-color: var(--template-arg-color-light, var(--template-arg-color-dark)); |
|||
border-image: var(--template-arg-border-image, unset); |
|||
box-shadow: var(--template-arg-color-light, var(--template-arg-color-dark)) 0 0 10px; |
|||
} |
|||
@media (prefers-color-scheme: light) { |
|||
html.skin-theme-clientpref-os .amaranth-tv-entry { |
|||
border-color: solid var(--template-arg-color-light, var(--template-arg-color-dark)); |
|||
border-image: var(--template-arg-border-image, unset); |
|||
box-shadow: var(--template-arg-color-light, var(--template-arg-color-dark)) 0 0 10px; |
|||
} |
|||
} |
|||
html.skin-theme-clientpref-night .amaranth-tv-entry { |
|||
border-color: var(--template-arg-color-dark); |
|||
border-image: var(--template-arg-border-image, unset); |
|||
box-shadow: var(--template-arg-color-dark) 0 0 10px; |
|||
} |
|||
@media (prefers-color-scheme: dark) { |
|||
html.skin-theme-clientpref-os .amaranth-tv-entry { |
|||
border-color: var(--template-arg-color-dark); |
|||
border-image: var(--template-arg-border-image, unset); |
|||
box-shadow: var(--template-arg-color-dark) 0 0 10px; |
|||
} |
|||
} |
} |
||