Template:Infobox buttons/styles.css: Difference between revisions

Revision as of 18:34, 24 February 2025

/* Infobox button */
.infobox-button {
	position: relative;
}

.infobox-extlink-button {
	display: block;
	padding: 10px 20px;
	background: var( --color-progressive );
	border-radius: 0 0 12px 12px;
	color: #fff;
}

.infobox-extlink-button-icon {
	margin-right: 8px;
	filter: invert( 1 );
}

/* Popup card */
.infobox-extlink-list {
	position: absolute;
	z-index: -1;
	overflow: hidden;
	width: 100%;
	padding-top: var( --space-md );
	padding-bottom: var( --space-xs );
	background: var( --color-surface-1 );
	border-radius: var( --border-radius-medium );
	box-shadow: var( --box-shadow-drop-xx-large );
	opacity: 0;
	text-align: left;
	transition: transform 250ms ease, opacity 250ms ease;
	visibility: hidden;
	transform: translateY( -20px );
}

.infobox-extlink-list p {
	margin-bottom: 0;
}

.infobox-button:hover .infobox-extlink-list {
	z-index: 10;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.infobox-extlink-title {
	display: block;
	padding: 0 15px;
	margin: 5px 0;
	color: var( --color-subtle );
    font-size: 0.8125rem;
    font-weight: normal;
    letter-spacing: 0.75px;
}

.infobox-extlink-list ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0 5px;
	margin: 0 0 10px 0;
	list-style: none;
}

.infobox-extlink a.external {
	display: block;
	/* Override external link and file icons */
	padding: 5px 10px;
	background-image: none;
	border-radius: 4px;
	transition: background 0.2s ease, color 0.2s ease;
}

.infobox-extlink a:hover {
	background-color: var( --background-color-button-quiet--hover );
}

.infobox-extlink a:active {
	background-color: var( --background-color-button-quiet--active );
}

.infobox-extlink-title:before {
	position: absolute;
	z-index: -1;
	right: 20px;
	display: block;
	width: 120px;
	height: 120px;
	margin-top: 5px;
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.1;
}

/* Dark mode */
html.skin-citizen-dark .infobox-extlink-title:before {
	filter: invert( 1 );
}