Template:Main Page/Button/styles.css: Difference between revisions

Latest revision as of 19:22, 22 March 2026

.main-cdx-button-link > a {
	background-color: var(--background-color-interactive-subtle, #f8f9fa);
	border: 1px solid var(--border-color-base, #a2a9b1);
	border-radius: 2px;
	padding: 0 0.85em;
	transition-property: background-color,color,border-color,box-shadow;
	transition-duration: .1s;
	
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	max-width: 28em;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: none;
	
	text-decoration: none;
	color: var(--color-progressive, #0645ad);
}

body.skin-vector-2022 .main-cdx-button-link > a,
body.skin-minerva .main-cdx-button-link > a,
body.skin-timeless .main-cdx-button-link > a {
	color: var(--color-progressive, #36c);
}

body.skin-monobook .main-cdx-button-link > a {
	color: var(--color-progressive, #002bb8);
}

.main-cdx-button-link > a:focus {
	outline: 1px solid transparent;
}

.main-cdx-button-link > a:focus:not(:active) {
	border: 1px solid var(--border-color-progressive, #36c);
	box-shadow: inset 0 0 0 1px var(--border-color-progressive, #36c);
}

.main-cdx-button-link > a:hover {
	border: 1px solid var(--border-color-progressive--hover, #447ff5);
	background-color: var(--background-color-base, #fff);
}

body.skin-vector-2022 .main-cdx-button-link > a:hover,
body.skin-minerva .main-cdx-button-link > a:hover,
body.skin-timeless .main-cdx-button-link > a:hover {
	color: var(--color-progressive--hover, #447ff5);
}

.main-cdx-button-link > a:active {
	background-color: var(--background-color-progressive-subtle, #eaf3ff);
	border: 1px solid var(--border-color-progressive--active, #2a4b8d);
}

.main-cdx-button-link.is-quiet > a {
	background-color: rgba(255, 255, 255, 0);
	border-color: transparent;
}

.main-cdx-button-link.is-quiet > a:hover {
	background-color: var(--background-color-progressive-subtle, #eaf3ff);
}

body.skin-vector-2022 .main-cdx-button-link.is-quiet > a:hover,
body.skin-minerva .main-cdx-button-link.is-quiet > a:hover,
body.skin-timeless .main-cdx-button-link > a:hover {
	color: var(--color-progressive--hover, #447ff5);
}

.main-cdx-button-link.is-quiet > a:active {
	background-color: var(--background-color-progressive--active, #2a4b8d);
	border: 1px solid var(--border-color-progressive--active, #2a4b8d);
	color: var(--color-inverted, #fff);
}