Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:Amaranth TV/entry/styles.css: Difference between revisions

Template page
Content deleted Content added
No edit summary
No edit summary
 
(59 intermediate revisions by the same user not shown)
Line 1: Line 1:
.amaranth-tv-entry {
.amaranth-tv-entry {
width: 150px;
width: 160px;
height: 200px;
padding: var(--space-sm);
background: var(--color-surface-2);
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 {
position: relative;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
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 {
width: 100%;
position: absolute;
bottom: 0;
display: 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 {
html.skin-theme-clientpref-day .amaranth-tv-entry {
border: 4px solid var(--template-arg-color-light, var(--template-arg-color-dark));
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;
box-shadow: var(--template-arg-color-light, var(--template-arg-color-dark)) 0 0 10px;
}
}
Line 12: Line 57:
@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: light) {
html.skin-theme-clientpref-os .amaranth-tv-entry {
html.skin-theme-clientpref-os .amaranth-tv-entry {
border: 4px solid var(--template-arg-color-light, var(--template-arg-color-dark));
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;
box-shadow: var(--template-arg-color-light, var(--template-arg-color-dark)) 0 0 10px;
}
}
Line 18: Line 64:


html.skin-theme-clientpref-night .amaranth-tv-entry {
html.skin-theme-clientpref-night .amaranth-tv-entry {
border: 4px solid var(--template-arg-color-dark);
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;
box-shadow: var(--template-arg-color-dark) 0 0 10px;
}
}
Line 24: Line 71:
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .amaranth-tv-entry {
html.skin-theme-clientpref-os .amaranth-tv-entry {
border: 4px solid var(--template-arg-color-dark);
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;
box-shadow: var(--template-arg-color-dark) 0 0 10px;
}
}

Latest revision as of 08:27, December 17, 2025

.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 {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	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 {
	width: 100%;
	position: absolute;
	bottom: 0;
	display: 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;
	}
}