MediaWiki:Vector.less
Jump to navigation
Jump to search
/* ********************************************************
This file is used to update [[MediaWiki:Vector.css]].
These styles will be applied only to the Vector skin (desktop).
******************************************************** */
@common: 'MediaWiki:Common.less';
@dir: 'MediaWiki:Vector.less';
@import '@{common}/colors.less';
@import '@{common}/variables.less';
@import '@{dir}/transcripts.less';
@import '@{dir}/navbox.less';
@import '@{dir}/infobox.less';
@vector-background: darken( @alabaster, 1% );
/* ----------------
less
---------------- */
/* logo */
#p-logo {
height: 100px;
margin-bottom: 2.5em;
a {
height: 100px;
}
}
/* background image */
body {
background: url('filepath://RuneScape_Wiki_background.png?width=1000') #153e13 top left no-repeat;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('filepath://RuneScape_Wiki_background.png');
background-size: 1000px 250px;
}
}
#mw-page-base {
background: none;
}
/* sidebar */
div#mw-panel {
padding-top: 2.5em;
nav.portal .vector-menu-heading {
background: none;
span {
font-weight: bold;
color: white;
}
}
nav.portal {
background: none;
margin-right: 0.5em;
}
}
// separate from other links because they are light on dark
#mw-panel .portal .vector-menu-content li a,
#footer a {
color: #b2dac1;
&:visited {
color: #b2dac1;
}
}
#p-personal a.new {
color: #fc6f6f;
&:visited {
color: #fc6f6f;
}
}
/* article area */
.mw-body {
border-color: transparent;
box-shadow: 0 .25em .6em -0.15em rgba(0,0,0,0.15);
margin-top: 0;
}
/* border around tabs */
nav.vector-menu-tabs,
nav.vector-menu-tabs ul {
padding: 0;
}
div#mw-head div.vector-menu .vector-menu-heading {
background: @vector-background;
}
/* selected tab */
nav.vector-menu-tabs li.selected {
background: @content-bg;
}
/* hide "read" tab */
#ca-view {
display: none;
}
/* notifications bell */
#pt-notifications-alert .mw-echo-notifications-badge {
background-size: 75%;
background-position: center 80%;
background-repeat: no-repeat;
}
/* notifications mailbox */
#pt-notifications-notice .mw-echo-notifications-badge {
background-size: 80%;
background-position: center 90%;
background-repeat: no-repeat;
}
/* Hack so that personal urls are at final vertical position when added to by JS. */
li#pt-anontalk {
padding-top: 0.6em;
}
/* tabs at the top */
nav.vector-menu-tabs {
/* background */
ul li {
background: @vector-background;
&:hover a {
text-decoration: none;
}
}
/* padding */
li a {
padding: 1em;
color: #327ba7;
}
/* move tab text up */
a {
background: none;
padding-top: 1em;
}
}
/* tab hover */
nav.vector-menu-tabs ul li:not(.selected):hover,
div#mw-head div.vector-menu .vector-menu-heading:hover,
/* for the "More" dropdown */
#p-cactions:hover #p-cactions-label {
background: lighten( @vector-background, 1.5% );
}
/* inner shadow for tabs */
nav.vector-menu-tabs ul li:not(.selected),
div#mw-head div.vector-menu .vector-menu-heading {
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,.15);
}
/* remove remaining blue border in VisualEditor */
.ve-activated .vector-menu-tabs .selected {
box-shadow: none;
}
/* "More" dropdown */
nav.vector-menu-dropdown {
line-height: initial;
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
background: #f6f6f6;
color: #327ba7;
.vector-menu-heading {
padding-top: 1em;
&:after {
margin-bottom: 0.4em;
}
}
/* dropdown */
.vector-menu-heading a {
height: 2.2em;
}
div.vector-menu-content {
border: 1px solid #ddd;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
li a {
color: #327ba7;
}
}
}
#p-cactions-label {
padding-right: .5em;
}
/* search bar */
#p-search {
margin: 0;
form {
margin-top: 0;
}
}
div#simpleSearch {
border: none;
background: @white;
height: 2.485em;
margin-top: 0;
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,.15);
/* search text */
#searchInput {
font-family: @sans-serif-stack;
height: 100%;
border: none;
background: none;
padding-left: 1em;
}
/* magnifying glass */
#searchButton {
width: 2.5em;
background: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E %3Cg fill=%22none%22 stroke=%22%2354595d%22 stroke-width=%222%22%3E %3Cpath d=%22M11.29 11.71l-4-4%22/%3E %3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E %3C/g%3E %3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
}
#searchInput:focus, #simpleSearch:hover #searchInput:focus {
border: none;
box-shadow: none;
}
/* sitenotice */
#siteNotice {
text-align: center;
margin: .75em 0 1em;
}
.sitedir-ltr .mw-dismissable-notice-body {
margin: 0;
}
/* space between edit box and mediawiki warnings */
form#editform {
margin-top: 1.25em;
}
/* buttons */
.button {
background: #438ab5;
border: 1px solid #2a83bb;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 12px;
height: 19px;
line-height: 20px;
padding: 0 10px;
}
/* hide certain links in sidebar tools */
#t-specialpages,
#t-recentchangeslinked,
#t-print,
#t-permalink {
display: none;
}
// top personal links
#p-personal {
background: fade( @content-bg, 80% );
border-radius: 0 0 0 .3em;
top: 0;
right: 0;
height: 30px;
ul {
padding: 0 1em 0 0.4em;
}
}
// footer
#footer ul li {
color: white;
}
/* [[Forum:Add a better Discord link to the sidebar]] */
#n-Discord a {
color: white !important;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
border: 1px solid #5e76c6;
background-color: #7289da;
display: block;
position: relative;
padding: 4px 0 5px calc(17px + 6.5px * 2); // width of icon + padding on either side
box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
transition: .2s ease;
&::before {
content: 'Chat on ';
font-weight: normal;
opacity: .85;
}
&::after {
content: '';
background: url('filepath://Discord_icon.png') no-repeat;
background-size: 17px 13px;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .1));
position: absolute;
top: 5px;
left: 7px;
width: 17px;
height: 13px;
}
&:hover {
text-decoration: none;
background-color: #6980d1;
}
}
.wgl-darkmode #n-Discord a {
background-color: #586ebb;
&:hover {
background-color: #5166b0;
}
}
#n-Donate.wgl-dono-notext {
a::before {
margin-left: 2.25em;
}
}
#n-Donate a {
color: white !important;
font-size: 12px;
border-radius: 5px;
border: 1px solid #d04b4b;
background-color: #f25858;
display: block;
position: relative;
padding: 5px 0px 5px calc(14px + 5.5px * 2); // width of icon + padding on either side
box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
transition: .2s ease;
&::before {
content: 'Donate ';
font-weight: bold;
opacity: .85;
}
&::after {
content: '';
background: url('filepath://Heart.svg') no-repeat;
background-size: 15px 13px;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
position: absolute;
top: 5px;
left: 7px;
width: 17px;
height: 13px;
}
&:hover {
text-decoration: none;
background-color: #e05252;
}
}