Modul:Navpills/styles.css - Versionshistorie

Admin med 9. mar. 2026, 07:51

2026-03-09T07:51:31Z

← Ældre version		Versionen fra 9. mar. 2026, 09:51
Linje 62:		Linje 62:
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	color: #~~222~~;		color: #fff !important;
	text-decoration: none;		text-decoration: none;
	height: 100%;		height: 100%;

Admin med 9. mar. 2026, 07:47

2026-03-09T07:47:03Z

← Ældre version		Versionen fra 9. mar. 2026, 09:47
Linje 1:		Linje 1:

	.template-navpills {		.template-navpills {
	display: grid;		display: grid;
	gap: ~~var( --space-xs )~~;		gap: 0.25rem;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	grid-auto-rows: 3rem;		grid-auto-rows: 3rem;
	font-size: ~~var( --font-size-small )~~;		font-size: 0.875rem;
	}		}

	.template-navpill {		.template-navpill {
	position: relative;		position: relative;
	border: 1px solid ~~var( --border-color-base )~~;		border: 1px solid #ccc;
	border-radius: ~~var( --border-radius-medium )~~;		border-radius: 0.5rem;
	font-weight: ~~var( --font-weight-medium )~~;		font-weight: 500;
	line-height: ~~var( --line-height-xx-small )~~;		line-height: 1.1;
	overflow: hidden;		overflow: hidden;
	}		}

			/* Baggrundslag (billede + gradient) */
	.template-navpill-background {		.template-navpill-background {
	position: absolute;		position: absolute;
	~~inset~~: 0;		top: 0;
	~~pointer~~-~~events~~: ~~none~~;		right: 0;
			bottom: 0;
			left: 0;
			z-index: 1; /* ligger under linket */
	}		}

	.template-navpill-background:after {		.template-navpill-background:after {
	content: '';		content: '';
	position: absolute;		position: absolute;
	~~inset~~: 0;		top: 0;
			right: 0;
			bottom: 0;
			left: 0;
	background: linear-gradient(to right, #000, transparent);		background: linear-gradient(to right, #000, transparent);
	transition: transform 250ms ease;		transition: transform 250ms ease;
Linje 31:		Linje 39:

	.template-navpill-background img {		.template-navpill-background img {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	object-fit: cover;		object-fit: cover;
	transition: ~~var( --transition-hover )~~;		transition: 250ms ease;
	transition-property: transform;		transition-property: transform;
	}		}

			/* Hover-effekter */
	.template-navpill:hover .template-navpill-background::after {		.template-navpill:hover .template-navpill-background::after {
	transform: translateX( -100% );		transform: translateX(-100%);
	}		}

	.template-navpill:hover .template-navpill-background img {		.template-navpill:hover .template-navpill-background img {
	transform: scale( 1.1 );		transform: scale(1.1);
	}		}

			/* Linklag – altid øverst */
	.template-navpill > a {		.template-navpill > a {
	position: relative;		position: relative;
	padding: 0 ~~var( --space-md )~~;		z-index: 2; /* vigtig! */
			padding: 0 1rem;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	color: ~~var( --color-emphasized )~~;		color: #222;
	text-decoration: none;		text-decoration: none;
	height: 100%;		height: 100%;
	}		}

	.template-navpill > .template-navpill-background + a {		.template-navpill > .template-navpill-background + a {
	color: #fff;		color: #fff;
	text-shadow: -1px 0 .2em #000, 0 1px .2em #000, 1px 0 .2em #000, 0 -1px .2em #000;		text-shadow:
			-1px 0 0.2em #000,
			0 1px 0.2em #000,
			1px 0 0.2em #000,
			0 -1px 0.2em #000;
	}		}

	.template-navpill:hover {		.template-navpill:hover {
	background: ~~var( --background-color-button-quiet--hover )~~;		background: #f0f0f0;
	}		}

	.template-navpill:active {		.template-navpill:active {
	background: ~~var( --background-color-button-quiet--active )~~;		background: #e0e0e0;
	}		}

Admin: 1 version importeret

2026-03-07T17:11:22Z

1 version importeret

← Ældre version	Versionen fra 7. mar. 2026, 19:11
(Ingen forskel)

wiki>Alistar Bot: /* top */ clean up, replaced: --line-height-sm → --line-height-xx-small

2025-01-06T01:13:45Z

top: clean up, replaced: --line-height-sm → --line-height-xx-small

Ny side

.template-navpills {
display: grid;
gap: var( --space-xs );
grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
grid-auto-rows: 3rem;
font-size: var( --font-size-small );
}

.template-navpill {
position: relative;
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
font-weight: var( --font-weight-medium );
line-height: var( --line-height-xx-small );
overflow: hidden;
}

.template-navpill-background {
position: absolute;
inset: 0;
pointer-events: none;
}

.template-navpill-background:after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, #000, transparent);
transition: transform 250ms ease;
}

.template-navpill-background img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var( --transition-hover );
transition-property: transform;
}

.template-navpill:hover .template-navpill-background::after {
transform: translateX( -100% );
}

.template-navpill:hover .template-navpill-background img {
transform: scale( 1.1 );
}

.template-navpill > a {
position: relative;
padding: 0 var( --space-md );
display: flex;
align-items: center;
color: var( --color-emphasized );
text-decoration: none;
height: 100%;
}

.template-navpill > .template-navpill-background + a {
color: #fff;
text-shadow: -1px 0 .2em #000, 0 1px .2em #000, 1px 0 .2em #000, 0 -1px .2em #000;
}

.template-navpill:hover {
background: var( --background-color-button-quiet--hover );
}

.template-navpill:active {
background: var( --background-color-button-quiet--active );
}