MediaWiki:Vector.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
:root {
--accent-color:#8f1f16;
--logo-width:25em;
--logo-height:calc(var(--logo-width) * 0.166);
--search-width:35em;
--search-height:3em;
--head-border-height:10px;
--head-text-color--rgb:255, 255, 255;
--head-text-color--opacity:0.9;
--head-personal-height:3em;
--head-background-image:url("https://wiki.geministation.com/images/0/0f/Wiki_background.jpg"); /* [[File:Wiki_background.jpg]] */
--head-height:calc(5.5em + var(--head-personal-height) + var(--search-height) + var(--logo-height));
--footer-background-color:#212f3e;
--footer-text-color:#fff;
--footer-link-color:#dfdcdc;
--sidebar-background-color:#f6f6f6;
--sidebar-width:11em;
--left-extra-sidebar-width: 5em;
}
div#mw-panel div.portal h3 {
font-weight: bold;
}
div#mw-panel div.portal div.body {
background: none;
margin-right: 0.5em;
}
#ca-view {
display: none;
}
#pt-notifications-alert .mw-echo-notifications-badge:before {
background-size: 75%;
background-position: center 80%;
}
#pt-notifications-notice .mw-echo-notifications-badge:before {
background-size: 80%;
background-position: center 90%;
}
#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 { filter: contrast(0); }
#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge{ filter: contrast(0.5); }
#p-cactions-label {
padding-right: 0.5em;
}
#ca-unwatch.icon a,
#ca-watch.icon a {
padding-top: 2.95em;
}
div#simpleSearch #searchInput {
font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
}
div#simpleSearch #searchButton {
width: 2.5em;
}
#siteNotice {
text-align: center;
margin: 0.75em 0 1em;
}
.sitedir-ltr .mw-dismissable-notice-body {
margin: 0;
}
form#editform {
margin-top: 1.25em;
}
.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;
}
#t-recentchangeslinked,
#t-print,
#t-permalink {
display: none;
}
#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 + 5.5px * 2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: 0.2s ease;
}
#n-Discord a::before {
content: 'Chat on ';
font-weight: normal;
opacity: 0.85;
}
#n-Discord a::after {
content: '';
background: url('https://wiki.geministation.com/images/1/18/Discord_icon.png') no-repeat;
background-size: 17px 13px;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
position: absolute;
top: 4px;
left: 7px;
width: 17px;
height: 13px;
}
#n-Discord a:hover {
text-decoration: none;
background-color: #6980d1;
}
/************
* Wiki logo *
*************/
#p-logo {
position:absolute;
left:calc(50vw - var(--logo-width)/2);
top:calc((var(--head-height) + var(--head-border-height)) * -1);
/* separation from #p-personal */
margin-top:var(--head-personal-height);
}
#p-logo,
#p-logo a {
width:var(--logo-width);
height:var(--logo-height);
}
@media screen and (max-width: 982px) {
#p-logo {
top:calc((var(--head-height) + var(--head-border-height) + 2.5em) * -1);
}
}
.mw-wiki-logo {
background-image:url(https://wiki.geministation.com/images/f/f4/Wiki_logo_1.png); /* [[File:Wiki_logo_1.png]] */
background-size:contain;
filter:invert(1);
}
/****************
* End wiki logo *
*****************/
/*********
* Header *
**********/
#content {
border:none;
margin-top:0;
}
.mw-body {
margin-top:0;
}
#mw-page-base {
position:relative;
background:none;
height:var(--head-height);
margin-bottom:var(--head-border-height);
}
/* doing this as an ::after instead of a simple border ensures that the sidebar and content area always appear to line up vertically.
normally rounding errors can sometimes misalign them a tiny bit, but by having this hover over them, this misalignment is hidden */
#mw-page-base::after {
position:absolute;
width:100%;
height:var(--head-border-height);
background:var(--accent-color);
bottom:calc(var(--head-border-height) * -1);
content:'';
z-index:1;
pointer-events:none;
}
#p-personal {
height:var(--head-personal-height);
}
#p-personal a {
color:rgba(var(--head-text-color--rgb), var(--head-text-color--opacity));
}
#p-personal .oo-ui-icon-bell,
#p-personal .oo-ui-icon-tray {
filter:invert(1);
opacity:var(--head-text-color--opacity);
}
#left-navigation,
#right-navigation {
margin-top:var(--head-height);
}
#left-navigation {
margin-left:0;
}
#right-navigation {
margin-right:1px;
}
@media (min-width:600px){
#mw-head{
display:flex;
justify-content:flex-end;
column-gap:1px;
}
#right-navigation .vector-menu-tabs {
background:none;
}
}
#right-navigation #p-views .vector-menu-content-list > li:first-of-type {
position:relative;
}
/* this gives the appearance of the left and right navigation being one object, but without interfering with the collapsing script they use */
#right-navigation #p-views .vector-menu-content-list > li:first-of-type::after {
position:absolute;
width:50px;
height:100%;
top:0;
left:-2px;
background:#fff;
content:'';
z-index:-1;
}
#p-cactions.vector-menu-dropdown h3 {
background:#fff;
}
#p-cactions .menu {
left:unset;
right:-1px;
}
/**********************************************
* End main header section, search bar follows *
***********************************************/
/*************
* Search bar *
**************/
/* the :not(.sticky-hidden) reverts the search bar to its normal spot when the user scrolls and triggers the sticky header */
#mw-head:not(.sticky-hidden) #p-search {
position:absolute;
top:calc(var(--head-personal-height) + var(--logo-height) + 1em);
left:calc(50vw - var(--search-width)/2);
}
#mw-head:not(.sticky-hidden) #searchInput {
height:var(--search-height);
border-radius:var(--search-height);
border:3px solid #FAFAFA;
background:#212F3E;
box-shadow:none;
color:#fff;
padding-left:1.2em;
}
#mw-head:not(.sticky-hidden) #searchInput::placeholder {
color:rgba(255,255,255,0.7)
}
#mw-head:not(.sticky-hidden) #searchButton {
filter:invert(1);
}
#mw-head:not(.sticky-hidden) #simpleSearch {
width:var(--search-width);
max-width:100%;
}
/*****************
* End search bar *
******************/
/**********
* Sidebar *
***********/
#mw-panel {
top:calc(var(--head-height) + var(--head-border-height) - 1px);
width:var(--sidebar-width);
}
@media screen and (max-width: 982px) {
#mw-panel {
top:calc(var(--head-height) + var(--head-border-height) + 2.5em - 1px)
}
}
/* this little hack gives the sidebar the appearance of stretching all the way down the page */
#content {
position:relative;
}
#content::after {
position:absolute;
width:calc(var(--sidebar-width));
height:100%;
background:var(--sidebar-background-color);
content:'';
top:0;
margin-left: calc(var(--sidebar-width) * -1 - 1em);
}
@media screen and (min-width:982px) {
#content::after {
margin-left: calc(var(--sidebar-width) * -1 - 1.5em);
}
}
/**/
/**************
* End sidebar *
***************/
/*********
* Footer *
**********/
.mw-footer {
margin-left:0;
background-color:var(--footer-background-color);
}
.mw-footer,
.mw-footer li {
color:var(--footer-text-color);
}
.mw-footer a {
color:var(--footer-link-color);
}
#footer__content {
display: grid;
grid-column-gap: 20px;
grid-template-columns: repeat(3, 1fr);
margin:auto;
padding-top:40px;
max-width:64em;
}
#footer__logo {
display:block;
margin-bottom:1em;
}
#footer__logo img {
width:15em;
}
#footer h2 {
font-size:1em;
color: var(--footer-text-color);
border:0;
margin-bottom:20px;
}
/*************
* End footer *
**************/
/*********************
* Left extra sidebar *
**********************/
body {
background-image:var(--head-background-image);
background-size:cover;
background-attachment: fixed;
}
#mw-panel {
background-color:var(--sidebar-background-color);
}
.mw-body,
#mw-head-base,
#mw-data-after-content {
margin-left:calc(var(--sidebar-width) + var(--left-extra-sidebar-width));
}
.mw-footer {
margin-left: var(--left-extra-sidebar-width);
}
#mw-panel,
#mw-page-base,
#mw-head {
margin-left:var(--left-extra-sidebar-width);
}
#mw-panel {
width:calc(var(--sidebar-width) - 0.5em);
}
#mw-head {
width:calc(100% - var(--left-extra-sidebar-width));
}
#sidebar {
position:fixed;
top:0;
left:0;
width:var(--left-extra-sidebar-width);
--link-size: 3em;
}
#sidebar ul {
margin:0;
text-align:center;
list-style: none;
}
#sidebar a {
display:flex;
flex-flow:column-reverse;
align-items:center;
margin-top:1.5em;
color:#DFDCDC;
text-transform: uppercase;
font-family: Roboto, sans-serif;
font-size:0.8125em;
}
#sidebar a:hover {
text-decoration: none;
color: #fff;
}
#sidebar a:first-child {
margin-top:calc(2.5em + 10px);;
margin-bottom:4em;
}
#sidebar img {
width: var(--link-size);
height: var(--link-size);
border-radius:100%;
background:gray;
margin-bottom:5px;
}
/*************************
* End left extra sidebar *
**************************/