MediaWiki:Cosmos.css

/* All CSS here will be loaded for users of the Cosmos skin */

/*Override sticky banner and toolbar*/
#cosmos-banner, #cosmos-toolbar {
	position: static !important;
}

/* banner, header, and footer background color */
#cosmos-banner, .cosmos-header, #cosmos-footer {
	background-color: var(--cosmos-banner, #c0c0c0);
}

/*Banner*/
#cosmos-banner-content {
	width: 89%;
	margin: 0 auto;
}

@media only screen and (min-width: 1596px) {
	#cosmos-banner-content {
		width: 1650px;
		max-width: 95%;
	}
}

/*Search placeholder text*/
#searchInput::placeholder,
.wvui-input__input::placeholder {
	color: #000000a0;
}

/* Mobile menu button */
@media screen and (max-width: 850px) {
	.wds-tabs {
		z-index: 998;
		top: 55px;
		width: 80%;
	}
}

/* article counter, username, and mobile menu button color */
.cosmos-header .cosmos-header__counter,
.cosmos-userButton-label,
.cosmos-userOptions-personalTools:hover .cosmos-userButton-label,
.cosmos-button-primary.cosmos-button.cosmos-mobile-menu-button {
	color:var(--header-link-text,#000000)
}

#cosmos-userButton-avatar, #cosmos-userButton-icon {
	stroke: var(--header-link-text, #000000);
}

#cosmos-userButton-icon {
	fill: var(--header-link-text, #000000);
}

/* header link color */
@media screen {
	.cosmos-header .cosmos-header__sitename a {
		color: var(--header-link-text, #000000);
	}
}

/* header tabber text colors */
.cosmos-header .wds-tabs .wds-tabs__tab-label,
.cosmos-header .wds-tabs .wds-tabs__tab-label a,
.cosmos-header .wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label a {
	color: var(--header-link-text, #000000);
}

.cosmos-header .wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label a {
	opacity: 0.8;
}

/*Tab colors*/
.cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li:hover > a:not(.wds-button),
.cosmos-dropdown-list > ul > a:only-child:hover,
.cosmos-dropdown-list > ul > li > a:only-child:hover,
.cosmos-dropdown-list > li > a:only-child:hover,
#cosmos-actionsList-list a:not(.new):hover,
.wds-dropdown__content .wds-list.wds-is-linked > li:hover > a:not(.wds-button) {
	background-color: rgb(from var(--link-text-hover, rgb(0 108 176)) r g b / calc(alpha - 0.9));
	color:var(--link-text-hover, #0645ad)
}

.cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li > a:not(.wds-button),
.cosmos-dropdown-list > ul > a:only-child,
.cosmos-dropdown-list > ul > li > a:only-child,
.cosmos-dropdown-list > li > a:only-child,
.wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button) {
	color:var(--link-text, #3a3a3a)
}

.wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label,
.wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label > a {
	opacity: 1.0;
}

.wds-tabs__tab-label {
	border-bottom-color: var(--box-border, var(--box-background, rgba(160, 160, 160, 0.2)))
}

.cosmos-header .wds-dropdown__content,
.cosmos-dropdown-list,
#cosmos-actionsList-list {
	background-color: var(--box-background, var(--content-background, #fff));
	border-color: var(--box-border, #00000030);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/*Mobile menu colors*/
@media screen and (max-width: 850px) {
	.wds-tabs__tab-label span {
		color:var(--link-text, #3a3a3a)
	}
	.wds-tabs {
		background-color:var(--box-background,var(--content-background,#fff));
		border-color:var(--box-border,#00000030);
		box-shadow:0 8px 16px 0 rgba(0,0,0,0.2)
	}
}

/*bold dropdown*/
.wds-list.wds-is-linked a {
	font-weight: bold
}

/* remove gradient from header */
.cosmos-header:before {
	background: none;
}

/*Secondary buttons style*/
.cosmos-header .wds-button.wds-is-secondary,
.cosmos-header .wds-button-group > .wds-dropdown:not(:first-child) .wds-button {
	border-color: var(--header-link-text, #fff);
	color: var(--header-link-text, #fff)
}

.cosmos-header .wds-button.wds-is-secondary:hover,
.cosmos-header .wds-button-group > .wds-dropdown:not(:first-child) .wds-button:hover {
	border-color: rgb(from var(--header-link-text, #fff) r g b / calc(alpha - 0.2));
}

/*Footer*/
	/* footer text colors */
.cosmos-footerLinks-list {
	color: var(--footer-text, var(--header-link-text, #666666));
}

	/* footer link color */
#cosmos-footer a {
	color: var(--header-link-text, #000000);
}

/*Toolbar*/
#cosmos-toolbar {
	box-shadow: none;
	max-width: 100%;
	margin: auto;
	float: none;
}

/*Primary button (Edit button)*/
.cosmos-button-primary {
	color: var(--button-text, #000000);
	stroke: var(--button-text, #000000);
	background-color: var(--button-color, var(--box-background, #c0c0c0))
}

.cosmos-dropdown-icon svg {
	fill: var(--button-text, #000000);
}

/*Red discussion button if new*/
.cosmos-button.new {
	color:#dd3333;
	stroke:#dd3333;
}

/*Discussion button border*/
.cosmos-button.cosmos-button-secondary:hover {
	border-color: var(--box-border, #000000);
}

/*Inputbox button*/
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button,
.mw-inputbox-createbox:required ~ .mw-ui-button,
.mw-inputbox-createbox:required ~ .mw-ui-button:hover {
	background-color:var(--button-color, #000000);
	border-color:var(--button-color, #000000);
	cursor:default;
	color:#000000
}
.mw-inputbox-createbox:required ~ .mw-ui-button:hover {
	filter: brightness(110%)
}

/*General content*/
body #mw-content-container {
	padding-top: 0;
}

#mw-content-wrapper {
	width: 90%;
	padding: 0 20px;
}

#mw-indicator-smw-entity-examiner {
	display: none;
}

element.style {
	width: 141px;
}

li.gallerybox div.thumb {
	background: none !important;
}

/* article background color */
#mw-content {
	background-color: var(--content-background, #ffffff);
}

/* link color */
#mw-content a:not(.new) {
	color: var(--link-text, #0645ad);
}

/* link hover color */
#mw-content a:not(.new):hover {
	color: var(--link-text-hover, #04307a);
}

/*Table of contents customization*/
@media screen {
	.skin-cosmos .toc {
		background-color: var(--box-background, #cccccc20);
		border: 1px solid var(--box-border, #00000030);
	}
}

.toc .tocnumber {
	font-weight: bold;
}

/*No border between toc caption and list*/
#mw-content .toc > ul {
	border-top: solid 0px;
}

/*Section header*/
#mw-content h2 {
	font-weight: 500;
	padding: 3px 0;
	/*h2 underline, manual ns-specific styles will still override*/
	border-bottom-color: var(--box-border, var(--box-background, rgb(0 0 0 / 0.2)));
}

/*Locationbox*/
.infobox {
	background-color: var(--box-background, #f4f4f4);
	border: 1px solid var(--box-border, #888888);
}

/*wikitable*/
body .wikitable:not([style*="background-color"]) > * > tr > td,
body .wikitable:not([style*="background-color"]) > * > tr > th {
	border-color: var(--box-border, #a2a9b1);
	background-color: var(--box-background, #ffffff);
}
body .wikitable:not([style*="background-color"]) > * > tr > th {
	color: var(--link-text);
}

/*Category ribbon from bottom of page*/
#catlinks {
	background-color: var(--box-background, #ffffff);
	border: 1px solid var(--box-border, #cccccc);
}

/* [START] NS0-1: YNFG Wiki */
.ns-0, .ns-1 {
/*	--cosmos-banner: #252448;*/
	--link-text: #6A2FB3;
/*	--link-text-hover: #C97D8A;
	--header-link-text: #ffffff;
	--button-color: #b06d7e;
	--footer-text: #b393a3;*/
	--content-background: #EBEBEB;
	--box-background: #BCBCD6;
	--box-border: #60609D;
/*	background-color: #33191f;*/
}

/*Red links brighter*/
.ns-0 a.new, .ns-1 a.new {
	color: #FF2D32;
}

/*Do not style infobox*/
.infobox {
	background-color: #f4f4f4
}
/* [END] NS0-1: YNFG Wiki */