Template:Main page/navigation/styles.css: Difference between revisions

Revision as of 02:48, 28 December 2024

#home-nav {
	margin-top: 1rem;
}

#home-nav .home-card__foreground {
    font-weight: var( --font-weight-medium );
}



html.skin-citizen-light .mw-parser-output .template-navpill-background:after {
    background: linear-gradient(to right, #f2f4f8, transparent);
}

html.skin-citizen-dark .mw-parser-output .template-navpill-background:after {
    background: linear-gradient(to right, #0c0e12, transparent);
}

html.skin-citizen-dark.citizen-feature-pure-black-clientpref-1 .mw-parser-output .template-navpill-background:after {
    background: linear-gradient(to right, #000, transparent);
}

.home-event {
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-medium );
	background: var( --color-surface-1 );
}

.home-gameinfo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --space-xs ) var( --space-md );
	white-space: nowrap;
	line-height: 1;
	overflow-x: auto;
	font-size: var( --font-size-small );
	gap: var( --space-xl );
}

.home-gameinfo-label {
	color: var( --color-subtle );
	font-size: var( --font-size-x-small );
	letter-spacing: 0.05em;
}

.home-gameinfo-list {
	display: flex;
}

.home-gameinfo-list-item {
	display: flex;
	align-items: center;
	gap: var( --space-xs );
	font-weight: var( --font-weight-medium );
}

.home-gameinfo-list-item + .home-gameinfo-list-item {
	margin-left: var( --space-sm );
	border-left: 1px solid var( --border-color-base );
	padding-left: var( --space-sm );
}

.home-event .home-card {
	height: 5rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.home-event .home-card__background:after {
	/*
	 * Theme gradient color
	 * FIXME: Find a way to make customize it through wikitext 
	 */
	background: linear-gradient(to right,#101e3c 1%,transparent 33.3%);
}


.home-header {
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-medium );
	background: var( --color-surface-1 );
}

.home-header .home-card {
	height: 2rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.home-header .home-card__background:after {
	/*
	 * Theme gradient color
	 * FIXME: Find a way to make customize it through wikitext 
	 */
	background: linear-gradient(to right,#101e3c 1%,transparent 33.3%);
}