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
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
.amaranth-tv-entry {
.amaranth-tv-entry {
width: 160px;
position: relative;
width: 150px;
height: 200px;
height: 200px;
padding: var(--space-sm);
background: var(--color-surface-2);
background: var(--color-surface-2);
border-style: solid;
border-style: solid;
Line 11: Line 9:
.amaranth-tv-entry figure,
.amaranth-tv-entry figure,
.amaranth-tv-entry figure > a:first-child:not(.mw-file-description) {
.amaranth-tv-entry figure > a:first-child:not(.mw-file-description) {
border: none;
border-radius: 0;
border-radius: 0;
}
}


.amaranth-tv-entry figure {
.amaranth-tv-entry figure {
position: absolute;
position: relative;
left: 0;
display: flex;
flex-direction: column;
top: 0;
flex-wrap: nowrap;
gap: var(--space-xs);
width: 100%;
width: 100%;
height: 100%;
height: 100%;
Line 24: Line 25:


.amaranth-tv-entry figure > a:first-child:not(.mw-file-description) {
.amaranth-tv-entry figure > a:first-child:not(.mw-file-description) {
width: 100%;
display: block;
height: auto;
flex: 0;
flex-basis: 150px;
}
}


.amaranth-tv-entry figcaption {
.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;
text-align: center;
color: var(--color-base);
color: var(--color-base);
font-size: var(--font-size-large);
font-size: var(--font-size-base);
font-weight: bold;
font-weight: bold;
line-height: var(--line-height-xx-small);
padding: 0 var(--space-xs) var(--space-xs);
}
}



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;
	}
}