[N8]

MediaWiki:Vector.css: Difference between revisions

← Older edit
mNo edit summary
Mr Pie 5 (talk | contribs)
79 edits
Search bar adjustments to better match figma.
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* <pre> */
: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 {
#p-logo {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
  position:absolute;
    margin: -1.5em 0 1.5em;
  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);
}
}


body {
#p-logo,
     background: url('filepath://Top header.png?width=1000') #f6f6f6 top left no-repeat;
#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);
}
}


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/****************
    body {
* End wiki logo *
          background-image: url('filepath://Top header.png');
*****************/
          background-size: 1000px 250px;
    }


/*********
* Header *
**********/
#content {
  border:none;
  margin-top:0;
}
.mw-body {
  margin-top:0;
}
}


#mw-page-base {
#mw-page-base {
     background: none;
  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;
  }
}
}


div#mw-panel {
#right-navigation #p-views .vector-menu-content-list > li:first-of-type {
    padding-top: 2.5em;
  position:relative;
}
}


div#mw-panel div.portal h3 {
/* this gives the appearance of the left and right navigation being one object, but without interfering with the collapsing script they use */
    font-weight: bold;
#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;
}
}


div#mw-panel div.portal div.body {
#p-cactions.vector-menu-dropdown h3 {
    background: none;
  background:#fff;
    margin-right: 0.5em;
}
}


.mw-body {
#p-cactions .menu {
    border-color: transparent;
  left:unset;
    box-shadow: 0 0.25em 0.6em -0.15em rgba(0, 0, 0, 0.15);
  right:-1px;
    margin-top: 0;
}
}


div.vectorTabs,
/**********************************************
div.vectorTabs ul,
* End main header section, search bar follows *
div#mw-head div.vectorMenu h3 {
***********************************************/
    background: #f6f6f6;
 
/*************
* 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);
}
}


div.vectorTabs li.selected {
#mw-head:not(.sticky-hidden) #searchInput {
    background: #fbfbfb;
  height:var(--search-height);
  border-radius:var(--search-height);
  border:3px solid #FAFAFA;
  background:#212F3E;
  box-shadow:none;
  color:#fff;
  padding-left:1.2em;
}
}


#ca-view {
#mw-head:not(.sticky-hidden) #searchInput::placeholder {
    display: none;
  color:rgba(255,255,255,0.7)
}
}


#pt-notifications-alert .mw-echo-notifications-badge:before {
#mw-head:not(.sticky-hidden) #searchButton {
    background-size: 75%;
  filter:invert(1);
    background-position: center 80%;
}
}


#pt-notifications-notice .mw-echo-notifications-badge:before {
#mw-head:not(.sticky-hidden) #simpleSearch {
    background-size: 80%;
  width:var(--search-width);
    background-position: center 90%;
  max-width:100%;
}
}
/*****************
* End search bar *
******************/


div.vectorTabs {
/**********
* Sidebar *
***********/
#mw-panel {
  top:calc(var(--head-height) + var(--head-border-height) - 1px);
  width:var(--sidebar-width);
}
}


div.vectorTabs ul li {
@media screen and (max-width: 982px) {
     background: #f6f6f6;
  #mw-panel {
     top:calc(var(--head-height) + var(--head-border-height) + 2.5em - 1px)
  }
}
}


div.vectorTabs ul li:hover a {
/* this little hack gives the sidebar the appearance of stretching all the way down the page */
    text-decoration: none;
#content {
  position:relative;
}
}


div.vectorTabs li a {
#content::after {
    padding: 0 0.75em;
  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);
}
}


div.vectorTabs span {
@media screen and (min-width:982px) {
     background: none;
  #content::after {
     margin-left: calc(var(--sidebar-width) * -1 - 1.5em);
  }
}
}
/**/


div.vectorTabs span a {
/**************
    padding-top: 1em;
* End sidebar *
    height: 2.25em;
***************/
 
/*********
* Footer *
**********/
.mw-footer {
  margin-left:0;
  background-color:var(--footer-background-color);
}
}


div.vectorTabs ul li:not(.selected):hover,
.mw-footer,
div#mw-head div.vectorMenu h3:hover,
.mw-footer li {
#p-cactions:hover #p-cactions-label {
  color:var(--footer-text-color);
    background: #fafafa;
}
}


div.vectorTabs ul li:not(.selected),
.mw-footer a {
div#mw-head div.vectorMenu h3 {
  color:var(--footer-link-color);
    box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
}
}


.ve-activated .vectorTabs .selected {
#footer__content {
    box-shadow: none;
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin:auto;
  padding-top:40px;
  max-width:64em;
}
}


div.vectorMenu {
#footer__logo {
    line-height: initial;
  display:block;
  margin-bottom:1em;
}
}


div.vectorMenu h3 span {
#footer__logo img {
    padding-top: 1.1em;
  width:15em;
}
}


div.vectorMenu h3 a {
#footer h2 {
    height: 2.2em;
  font-size:1em;
  color: var(--footer-text-color);
  border:0;
  margin-bottom:20px;
}
}


div.vectorMenu div.menu {
/*************
    border: 1px solid #ddd;
* End footer *
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
**************/
 
 
/*********************
* Left extra sidebar *
**********************/
body {
  background-image:var(--head-background-image);
  background-size:cover;
  background-attachment: fixed;
}
}


#p-cactions-label {
#mw-panel {
    padding-right: 0.5em;
  background-color:var(--sidebar-background-color);
}
}


#ca-unwatch.icon a,
.mw-body,
#ca-watch.icon a {
#mw-head-base,
    padding-top: 2.95em;
#mw-data-after-content {
  margin-left:calc(var(--sidebar-width) + var(--left-extra-sidebar-width));
}
}


#p-search {
.mw-footer {
    margin: 0;
  margin-left: var(--left-extra-sidebar-width);
}
}


#p-search form {
#mw-panel,
    margin-top: 0;
#mw-page-base,
#mw-head {
  margin-left:var(--left-extra-sidebar-width);
}
}


div#simpleSearch {
#mw-panel {
    border: none;
  width:calc(var(--sidebar-width) - 0.5em);
    background: #ffffff;
    height: 2.485em;
    margin-top: 0;
    box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
}
}


div#simpleSearch #searchInput {
#mw-head {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
  width:calc(100% - var(--left-extra-sidebar-width));
    padding: 1em 0 0 0.75em;
}
}


div#simpleSearch #searchButton {
#sidebar {
    width: 2.5em;
  position:fixed;
  top:0;
  left:0;
  width:var(--left-extra-sidebar-width);
 
  --link-size: 3em;
}
}


#siteNotice {
#sidebar ul {
    text-align: center;
  margin:0;
    margin: 0.75em 0 1em;
  text-align:center;
  list-style: none;
}
}


.sitedir-ltr .mw-dismissable-notice-body {
#sidebar a {
    margin: 0;
  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;
}
}


form#editform {
#sidebar a:hover {
    margin-top: 1.25em;
  text-decoration: none;
  color: #fff;
}
}


.button {
#sidebar a:first-child {
    background: #438ab5;
  margin-top:calc(2.5em + 10px);;
    border: 1px solid #2a83bb;
  margin-bottom:4em;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    height: 19px;
    line-height: 20px;
    padding: 0 10px;
}
}


#t-recentchangeslinked,
#sidebar img {
#t-print,
  width: var(--link-size);
#t-permalink {
  height: var(--link-size);
    display: none;
  border-radius:100%;
  background:gray;
  margin-bottom:5px;
}
}
/*************************
* End left extra sidebar *
**************************/
Retrieved from "https://wiki.geministation.com/MediaWiki:Vector.css"