MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

:root {
  --shadow-color: 246deg 73% 41%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

body {
  background-image: linear-gradient(245deg, rgba(89,149,255,1) 0%, rgba(104,88,255,1) 100%);
  background-color: rgb(104,88,255);
}

html, body {
  height: auto;
  min-height: 100%;
}

.vectorTabs, #mw-head .vectorMenu h3 {
  background-image: none;
}

#mw-page-base {
  background: transparent;
}

.mw-body, .parsoid-body {
  background-color: white;
}
.mw-body {
  border-color: rgb(104,88,255);
  border-radius: 0 0 0 14px;
  box-shadow: var(--shadow-elevation-low);
}

.vector-menu-tabs-legacy {
	padding-left: 0;
	margin-left: 1px;
	
	border-radius: 14px 0 0 0;
    overflow: hidden;
}

.vectorTabs ul li {
  background: #293590;
}

.vectorTabs span {
  background-image: none;
  border-left: none;
  border-right: none;
}

pre, .mw-code {
  background-color: #F0F0F2;
}
.vectorTabs li.selected span {
  border: none;
}

.vectorTabs li.selected {
  background-image: none;
  background-color: white;
}

.vectorTabs li a {
  color: white;
}

.vectorTabs li a:visited {
  color: #F0F0F2;
}

.vectorTabs li.new a, .vectorTabs li.new a:visited {
  color: #5E7EFF;
}

#p-logo {
  padding-top: 0.5em;
}

#p-logo a {
	background-size: contain;
    width: 8em;
    margin: auto;
}

#mw-panel .portal .body li a {
  color: white;
}

#mw-panel .portal .body li a:visited {
  color: #E0E1E4;
}

a.new, #p-personal a.new {
  color: #F05C6C;
}

a {
  color: white;
}

a:visited {
  color: #F0F0F2;
}

.mw-parser-output a.external {
  color: #D15E54;
}

#content a {
  color: #5E7EFF;
  text-decoration: underline;
}

#content a:visited {
  color: #192369;
}

#content a.new {
  color: #D15E54;
}

#footer ul li,
#mw-panel .portal h3,
.vectorMenu h3 span {
  color: #F0F0F2;
}

.vector-menu.vector-menu-portal a[href]:link, .vector-menu.vector-menu-portal a[href]:visited {
	color: white;
	transition: color 150ms ease, opacity 150ms ease;
}

.vector-menu.vector-menu-portal a[href]:hover {
	opacity: 0.7;
}

.vector-menu.vector-menu-portal a[href]:active {
	opacity: 0.9;
}

@media screen and (max-width: 999px) {
	
	body.skin--responsive {
		#mw-head, #mw-panel {
			display: none;
		}
		
		#footer, #content {
			margin-left: 0;
		}
	}

	#p-personal,
	.vector-user-menu-legacy {
 		position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
	}
	
	.vector-user-menu-legacy .vector-menu-content {
  		display: block;
		width: 100%;
    	padding: 8px 12px;
    	overflow: auto;
	    box-sizing: border-box;
	}
   
    #p-personal ul,
	.vector-user-menu-legacy .vector-menu-content-list {
  		white-space: nowrap;
  		display: block;
  		padding-left: 0;
	}

	.vector-user-menu-legacy .mw-list-item {
		float: none;    	
		display: inline-block;
	}
}