MediaWiki:Metrolook.css

/* CSS placed here will affect users of the Metrolook skin */

/************************************************* /*	Left navigation background */ /*div#mw-panel{ background: url("/images/0/02/Common_Background.png") repeat; }*/
 * LEFT NAVIGATION PANEL
 * LEFT NAVIGATION PANEL

body{ background-position: 0 2em, 0 0; background-attachment: fixed; }

/*	Navigation links */ div#mw-panel div.portal div.body ul li a, div#mw-panel div.portal div.body ul li a:visited { color: #D1DEFE; padding: 10px; display:block; transition:0.1s ease-in-out; }

div#mw-panel div.portal div.body ul li a:hover { color: #F4C544; background: #1853BC; text-decoration:none; border: #06305B 1px solid; box-shadow: 0px 0px 16px 4px rgba(0,0,0,.3); position:relative; z-index:0; }

/*	Link items */ div#mw-panel div.portal div.body ul li, .collapsible-nav#mw-panel .portal .body ul li{ padding:0; }

div#mw-panel #p-logo + div.portal div.body{ margin-right: 0; margin-left: 0; }

/* Increase left navigation width */ div#mw-panel { width: 13em; }

width: 12em; }
 * 1) p-logo a, #p-logo a:hover {

@media (min-width: 768px){ .mw-body { margin-left:13.5em; margin-right:13.5em; z-index: 1; box-shadow: 0 0 13px 7px #00000099; } }

/*	Navigation headers */ color: #EFEFEF; }
 * 1) mw-panel.collapsible-nav .portal.collapsed h5 a, #mw-panel.collapsible-nav .portal h5 a {

.collapsible-nav#mw-panel .portal h5 { margin-left: 0.5em; }

margin: 0; }
 * 1) mw-panel.collapsible-nav .portal .body{

/*	Navigation Panel */ @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { .collapsible-nav#mw-panel .portal{ background-color:rgba(24, 83, 188,0.6) !important; -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); } }

.collapsible-nav#mw-panel .portal{ background:#1853BC; margin-left:0; }

/************************************************* /*	Top navigation background */ background-color: #1853BC; box-shadow:0 0 13px 0 #000000; }
 * TOP NAVIGATION
 * TOP NAVIGATION
 * 1) mw-page-base {

div.vectorMenu h5 span, div.vectorMenu:hover h5 span{ background-color:transparent; }

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { #mw-page-base { background-color: rgba(24, 83, 188, 0.8); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); } }

/*	Top navigation background (width < 768px) */ @media (max-width: 768px){ #left-navigation { background-color: #2e3d39; } }

/*	Tab links */ div.vectorTabs a, div.onhoverbg, img.downarrow, div.vectorMenu{ transition:0.2s ease-in-out; }

/*	Hover color for tabs */ div.vectorTabs a:hover, div.onhoverbg:hover, img.downarrow:hover, div.vectorMenu:hover { background-color: #1853BC; z-index:99; }

@media (max-width: 768px){ img.editbutton:hover, #hamburgerIcon:hover { background-color: #1853BC; } }

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { div.vectorTabs a:hover, div.onhoverbg:hover, img.downarrow:hover, div.vectorMenu:hover { background-color: rgba(0, 102, 255, 0.6); } }

/*	Tab link dropdown menu */ div.vectorMenu ul{ background-color:rgba(29, 29, 29); box-shadow: 0px 0px 16px 4px rgba(0,0,0,.3) }

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { div.vectorMenu ul{ background-color:rgba(29, 29, 29, 0.6) !important; -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); } }

/*************************************************
 * PERSONAL LINK MENU
 * PERSONAL LINK MENU

color:#cde0f4; }
 * 1) p-personal li a, div.vectorMenu ul a{

color:#4171A0; }
 * 1) p-personal li a:hover, div.vectorMenu ul a:hover{

/*************************************************	margin-right:1em; }
 * SEARCH
 * 1) p-search{
 * 1) p-search{
 * 1) p-search{
 * 1) p-search{

margin-top: 0; }
 * 1) p-search form {

div#simpleSearch { border: none; background: rgba(0,0,0,0.8); height: 2.485em; width:13em; margin-top: 0; }

div#simpleSearch #searchInput { font-family: Roboto Slab; padding: 1em; font-size:12px; transition: 0.2s ease-in-out; }

div#simpleSearch #searchInput:focus{ background:#FFFFFF; }

div#simpleSearch #searchButton { width: 2.5em; }

/*************************************************
 * FORMATTING AND HEADERS
 * FORMATTING AND HEADERS

.mw-body .firstHeading { text-align: center; }

text-align:center; }
 * 1) contentSub, #contentSub2{

/************************************************* .ns-6 div#footer ul li { color: #FFFFFF; }
 * NAMESPACE 6
 * FILE THEME
 * FILE THEME

.byline { text-align: center; }

/*************************************************
 * NAMESPACE 110
 * FORUM THEME
 * FORUM THEME

body.ns-110 #content { background: #ccddeb; }

/************************************************* body.ns-3000 #content { background: #f2f8ff; }
 * NAMESPACE 3000
 * NEWS THEME
 * NEWS THEME

/************************************************* /*	Tile Menu */ .tilebar { background-color: rgba(29, 29, 29); box-shadow: 0px 0px 16px 4px rgba(0,0,0,.3); }
 * TILE MENU
 * TILE MENU

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { .tilebar { background-color: rgba(29, 29, 29, 0.8); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); } }

.tile:hover{ box-shadow: 0px 0px 16px 4px rgba(0,0,0,.3); }

/*************************************************
 * VISUAL EDITOR FIX
 * VISUAL EDITOR FIX

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar { top: 50px; }

/************************************************* span.uploadbutton{ top:0.8em; }
 * METROLOOK TAB ICONS
 * METROLOOK TAB ICONS

img.uploadbutton{ display:none; }

content: "\E898 \00a0"; font-family: FabricMDL2Icons; font-size: 1.5em; vertical-align: middle; }
 * 1) left-navigation #uploadbutton .uploadbutton:before {

opacity:1; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read{

position: relative; display: inline-block; width: 100%; height: auto; margin: 0; top: 0; cursor: pointer; text-decoration: none; line-height:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge{

position:relative; top:0; left:0; margin:0; height:auto; width:auto; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge:before, #pt-notifications-notice .mw-echo-notifications-badge:before{

background-image:none; font-family: FabricMDL2Icons; font-size: 1.25em; content:'\F41C \00a0'; vertical-align:middle; }
 * 1) pt-notifications-notice .mw-echo-notifications-badge:before{

left:0; right:0; top:0; padding-right:0; }
 * 1) pt-notifications-notice .mw-echo-notifications-badge{

background-image:none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\EA8F \00a0'; vertical-align:middle; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge:before{

width: 1em; color:transparent; background-image:none; padding:1em 0.8em 0; margin-top:0; height:2em; }
 * 1) ca-unwatch.icon a, #ca-watch.icon a, #ca-unwatch.icon a:hover, #ca-watch.icon a:hover, #ca-watch.icon a:focus, #ca-unwatch.icon a:focus{

content: "\E734"; font-family: FabricMDL2Icons; font-size: 1em; color: #FFFFFF; visibility: visible; position: absolute; }
 * 1) ca-watch.icon a:before {

content: "\E735"; font-family: FabricMDL2Icons; font-size: 1em; color: #FFFFFF; visibility: visible; position: absolute; }
 * 1) ca-unwatch.icon a:before {

a.uls-trigger{ background-image:none; }

padding: 0.5em; padding-left: 1em; padding-right: 2.5em; line-height:unset; }
 * 1) pt-uls a.uls-trigger{

a.uls-trigger:before { background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\F2B7 \00a0'; vertical-align: middle; }

background-image: none; font-family: FabricMDL2Icons; font-size: 1em; content: '\E918 \00a0'; vertical-align: middle; font-weight: 100; }
 * 1) utcdate a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\E77B \00a0'; vertical-align: middle; }
 * 1) pt-userpage a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\ECFE \00a0'; vertical-align: middle; }
 * 1) pt-mytalk a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\EF58 \00a0'; vertical-align: middle; }
 * 1) pt-preferences a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\F3A8 \00a0'; vertical-align: middle; }
 * 1) pt-betafeatures a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\E735 \00a0'; vertical-align: middle; }
 * 1) pt-watchlist a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\EEBE \00a0'; vertical-align: middle; }
 * 1) pt-mycontris a:before {

background-image: none; font-family: FabricMDL2Icons; font-size: 1.25em; content: '\E7E8 \00a0'; vertical-align: middle; }
 * 1) pt-logout a:before {