mediawiki-skins-Citizen/resources/mixins.less

/*
 * Citizen - Mixins
 * https://starcitizen.tools
*/

// To hide objects, but keep them accessible for screen-readers
.hidden() {
	position: absolute;
	top: -9999px;
}

// Set content to be at the center
.content-center() {
	max-width: @page-width;
	margin-left: auto;
	margin-right: auto;
}

// Prepare for RL icons
.resource-loader-icon-link() {
	width: @icon-box-size;
	height: @icon-box-size;
	display: block;
}

.resource-loader-icon-link-small() {
	width: @icon-size;
	height: @icon-size;
	display: block;
}

.resource-loader-icon() {
	content: "";
	position: absolute;
	width: inherit;
	height: inherit;
	background-repeat: no-repeat;
	background-position: center;
}

.resource-loader-menu-icon() {
	content: "";
	position: absolute;
	width: @icon-box-size;
	height: @icon-box-size;
	background-repeat: no-repeat;
	background-position: center;
}

.resource-loader-list-icon() {
	content: "";
	position: relative;
	flex-shrink: 0;
	align-self: center;
	width: @icon-size;
	height: @icon-size;
	background-repeat: no-repeat;
	background-position: center;
}

// Material-like menu
.menu-container() {
	padding: 8px 0;
	background-color: @menu-background;
	display: block;
}

.menu-item-link() {
	display: flex;
	color: @color-item-text!important;
	transition: @transition-background-quick, @transition-color-quick;
}

.menu-item-link-hover() {
	color: @color-item-text-hover!important;
	background-color: @menu-item-link-hover;
}

.menu-item-link-active() {
	color: @color-item-text-hover!important;
	background-color:  @menu-item-link-active;
}

.menu-item-link-focus() {
	color: @color-item-text-hover!important;
	background-color: @menu-item-link-hover;
}

// Button Styles
.button-blue() {
	background-color: @accent-50;
	color: @base-80!important;
	transition: @transition-background-quick, @transition-color-quick;
}

.button-blue-active() {
	background-color: @accent-10;
	color: @base-100!important;
}

.button-red() {
	background-color: @red-50;
	color: @base-80!important;
	transition: @transition-background-quick, @transition-color-quick;
}

.button-red-active() {
	background-color: @red-30;
	color: @base-100!important;
}

// Link styles
.link-content-text(@color) {
	background-image: linear-gradient(to right, @color 0, @color 100%);
	background-repeat: no-repeat;
	background-size: 0 100%;
	transition: @transition-background-quick, @transition-color-quick;

	&:hover, &:active, &:focus {
		outline: none;
		color: white!important;
		background-size: 100% 100%!important;
	}
}

// Gradient overflow
.gradient-overflow(@position) {
	content: "";
	position: fixed;
	z-index: 3;
	width: 100%;
	height: @margin-side * 2;
	background: @position;
}