Difference between revisions of "User:Polymorph-Ash/vector.css"

Jump to navigation Jump to search
no edit summary
Tag: Reverted
Line 1: Line 1:
/*Foundation Wiki – Vector Skin CSS
/* All CSS here will be loaded for users of the Vector skin */
 
Based on an original vector CSS edit by: Olessan
Modified and maintained by: Polymorph-Ash
Purpose: Main Vector skin styling for the Foundation Wiki
*/


:root {
:root {
  --maintext: #2a160f;
--header: #dddddd;
  --headertext: #3c3f44;
--content-header: #fca349;
  --whitetextandbg: #fffff3;
--secondary-header: #fca349;
  --bordercolour: #5f3529;
--label-color: #ffd28f;
  --smallborders: #9c8668;
--line-color: #777777;
  --orange: 223, 156, 52;
--dark-mode-background: #3e3e3e;
  --mainfont: Verdana, Tahoma, sans-serif;
--dark-mode-secondary-background: darkgrey;
  --headerfont: Georgia, serif;
--dark-mode-alt-link: #2d456c;
  --infoboxcolour2: #f2e5c0;
--dark-mode-alt-link-new: #9d0303;
  --vectormenucolour3: #ffeabd;
--dark-mode-text: white;
  --tableheaders: #eacf98;
  --tablecolour2: #edd8a0;  /* muted warm beige */
  --tablecolour3: #f9ebc4; /* soft cream, only slightly lighter */
  --background-image: url(https://wiki.polymorph.games/found/images/6/6c/Keyart02_Clean_noLogo_HD.jpg);
}
}


/*overarching fonts*/
.wikitable > * > tr > th {
#content {
     background: var(--header);
  color:var(--maintext);
  font-family:var(--mainfont);
 
}
  #content h1,
  #content h2,
  #content h3,
  #content h4,
  #content h5,
  #content h6 {
  color:var(--headertext);
  font-weight:normal;
  font-family:var(--headerfont);
     border-color:var(--smallborders);
  }
 
/*adds a layer for background transparency and blur*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}
}


/* background layer */
.infobox-title {
body {
background: var(--header);
  background-image:var(--background-image);
  background-repeat:no-repeat;
  background-clip:border-box;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
}
}


/* Top menu & user tools */
.infobox-header {
#mw-head, #mw-page-base { background: transparent; border: none; }
background: var(--secondary-header);
 
#p-personal {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
  border-radius: 0;
}
}


#p-personal ul { margin: 0; padding: 0; }
.header-box {
 
background: var(--header);
#p-personal li a {
box-shadow: 2px 2px var(--line-color);
  color: var(--whitetextandbg);
  padding: 0.2em 0.5em;
  text-decoration: none;
  transition: color 0.3s, background 0.3s;
}
}


#p-personal li a:hover {
.mainpage-buttons ul li {
  color: var(--orange);
background: #dddddd;
  background-color: rgba(255,255,255,0.1);
box-shadow: 2px 2px var(--line-color);
  border-radius: 4px;
}
}


#mw-head .vector-menu-content {
.infobox {
  background-color:rgba(42, 22, 15, 0.5);
box-shadow: 2px 2px var(--line-color);
  border-color:var(--smallborders);
border: 1px solid var(--line-color);
  margin:0.2em;
  border-radius:4px;
}
}


#mw-head .vector-menu-content, #mw-head .vector-menu-content a, #mw-head .vector-menu-content ul, #mw-head .vector-menu-content li {color:var(--whitetextandbg)}
.infobox-label {
 
background: var(--label-color);
.vector-menu,
#left-navigation a, #right-navigation a, #left-navigation, #right-navigation, #left-navigation li, #right-navigation li {
  background-color:rgba(var(--orange),0.85);
  border-color:var(--bordercolour);
  border-radius:4px 4px 0px 0px;
  color:var(--whitetextandbg);
}
 
.vector-menu-tabs {  
  background-image: linear-gradient(rgba(182,110,35,0) 25%,rgba(182,110,35,0.8) 10%);
  background-color:transparent;
  border-color:var(--bordercolour);
  border-radius:4px 4px 0px 0px;
  color:var(--whitetextandbg);
  background-repeat: repeat;
}
}


#left-navigation a, #right-navigation a, #left-navigation, #right-navigation, #left-navigation li, #right-navigation li {
.wikitable {
  background:transparent;
border:none;
  border-color:var(--bordercolour);
}
 
.vector-menu-dropdown, .vector-menu-dropdown a, .vector-menu-dropdown li {
  background-color: rgba(var(--orange), 0.85); /* same as your tabs */
  border-color: var(--bordercolour);
  border-radius: 5px;
  color: var(--whitetextandbg);
}
 
.vector-user-menu-legacy  {
  background:transparent;
  border:none;
}
 
#searchInput, #searchInput a {
  color:var(--maintext);
  background-color:rgba(255, 255, 243, 0.9);
  border-radius:4px;
}
 
.vector-menu-portal  {
  background-color:var(--vectormenucolour3);
  box-shadow: inset 0 0 1.5vw 0.2vw #d4b57e;
  border-color:var(--bordercolour);
  border-style:solid;
  border-width:0.15em;
  border-radius:4px;
}
.vector-menu-heading {
  box-shadow:none!important;
  background-color:var(--vectormenucolour3);
  border-radius:4px 4px 0px 0px;
  border-color:var(--bordercolour);
  border-style:solid;
  border-width:0.15em;
}
 
/*Page that's selected on the side menu*/
#p-tb-label.vector-menu-heading {
  border-radius:4px;
  padding:4px;
  border-left:4px solid rgba(var(--orange), 0.85);
  background:transparent;
  background-image:linear-gradient(to right,rgba(var(--orange), 0.85),rgba(var(--orange), 0.85),transparent);
  color:var(--whitetextandbg);
  font-weight:bold;
}
 
#left-navigation {margin-left:12em;}
#right-navigation {margin-right:0.45%;}
 
/* header */
.header-box {
  background-image: var(--background-image);
  background-position: center 75%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--whitetextandbg);
  font-size: 150%;
  font-weight: bold;
  font-family: var(--headerfont);
  text-shadow:
    -2px 2px 0 #000,
    4px 4px 8px rgba(0,0,0,0.7);
  border-radius: 4px;
  border: 3px groove var(--bordercolour);
  outline: 1px solid var(--whitetextandbg);
  outline-offset: -6px;
}
}


.mainpage-buttons ul li {
.wikitable > tr, .wikitable > * > tr {
  background-color:var(--tableheaders);
border: none;
  box-shadow: inset -0.05vw -0.05vw 0.1vw 0.1vw #d4b57e;
    border-bottom: 1px solid var(--line-color);
  border-color:var(--bordercolour);
  border-radius:4px;
}
}


/*main body*/
.wikitable > tr > th,
#content.mw-body {
.wikitable > tr > td,
  background-color:rgba(255, 234, 189, 0.97);
.wikitable > * > tr > th,
  box-shadow: inset 0 0 10vw 1.5vw #d4b57e;
.wikitable > * > tr > td {
  border-color:var(--bordercolour);
border: none;
  border-radius:4px;
  border-style:solid;
  border-width:0.15em;
  margin-right:1%;
}
}


/*thumbnails*/
.wikitable > tr > td,
.toc, li.gallerybox div.thumb, div.thumbinner {
.wikitable > * > tr:nth-child(odd) > td {
  background-color:rgba(42, 22, 15, 0.1);
background: var(--label-color);
  border-color:var(--smallborders);
  margin:0.2em;
  border-radius:4px;
}
}


.toc {margin-top:1em;margin-bottom:1em;margin-left:0.1em;margin-right:0.1em;}
/* ################################## */
/* Dark Mode                          */
/* ################################## */


/*category links*/
.mw-dark-mode, .mw-dark-mode .mw-page-base, .mw-dark-mode .mw-body,  
#catlinks, #catlinks a, #footer-places-privacy, #footer-places-about, #footer-places-disclaimer, #footer-places-mobileview, #footer {
.mw-dark-mode #mw-panel, .mw-dark-mode #mw-head
  background-color:rgba(var(--orange), 0.85);
{
  border-color:rgba(132, 79, 61, 0.85);
    background: var(--dark-mode-background);
  border-radius: 0;
  color:var(--whitetextandbg);
  padding: 0.5em;
}
}


#catlinks li, {
.mw-dark-mode #catlinks, .mw-dark-mode .vector-menu-portal {
border-color:var(--whitetextandbg);background:transparent;
    background: var(--dark-mode-secondary-background);
}
}


/*Tables*/
.mw-dark-mode #catlinks a:link, .mw-dark-mode #catlinks a:hover,
.wikitable {
.mw-dark-mode #catlinks a:visited {
  background-color:var(--whitetextandbg);
    color: var(--dark-mode-alt-link);
  border: 2px solid;
  border-color:var(--smallborders);
  overflow:clip;
  max-width:80%;
  width:fit-content;
}
}


.wikitable tr > th {
.mw-dark-mode #catlinks a.new:link, .mw-dark-mode #catlinks a.new:hover,
  background-color:var(--tableheaders);
.mw-dark-mode #catlinks a.new:visited {
  font-weight:bold;
    color: var(--dark-mode-alt-link-new);
  padding:5px;
  text-align:center;
  }
 
.wikitable tr:nth-child(odd) > td {
background:var(--tablecolour2);
  color:var(--maintext);
}
}


.wikitable tr:nth-child(even) > td {
.mw-dark-mode #content, .mw-dark-mode #footer, .mw-dark-mode .vector-menu-heading,
background-color: var(--tablecolour3);
.mw-dark-mode .mw-headline {
  color: var(--maintext);
    color: var(--dark-mode-text);
}
}


/* Right-align Price each columns in all wikitable tables (switched off for now)
.mw-dark-mode #mw-content-text, .mw-dark-mode #mw-content-text h2,
.wikitable td:nth-child(2),
.mw-dark-mode #firstHeading, .mw-dark-mode #footer-info-lastmod {
.wikitable th:nth-child(2),
     color: inherit;
.wikitable td:nth-child(4),
.wikitable th:nth-child(4) {
     text-align: right;
    padding-right: 10px; /* optional: gives a little spacing from the border */
}
}
*/


/*this is a hover highlight but it's turned off because it looked a bit odd
.mw-dark-mode .mw-body ul {
!.wikitable tr:hover, .wikitable tr:nth-child(odd):hover td {
    list-style: none;
  background:rgba(250,220,160, 0.5);
}
}
*/


.wikitable tr {
.mw-dark-mode .mw-body #catlinks ul li::before,
  border-bottom:1px solid;
.mw-dark-mode .mw-body #toc ul li::before,
  border-color:var(--smallborders);
.mw-dark-mode .mw-body .redirectMsg ul li::before,
.mw-dark-mode .mw-body .mainpage-buttons ul li::before,
.mw-dark-mode .mw-body .mw-body-content .gallery li::before {
    display: none;
}
}


.wikitable tr > td, .wikitable tr > td[rowspan] {
.mw-dark-mode .mw-body ul li::before {
  border-right:1px dotted;
    content: "\2022";
  border-color:var(--smallborders);
    color: white;
    display: inline-block;
    width: 0.75em;
    font-size: 1.5em;
    line-height: 1em;
    margin-left: -1em;
}
}


.wikitable tr td {padding:5px;padding-left:10px;padding-right:10px;}
.mw-dark-mode .mw-changeslist-legend, .mw-dark-mode .mw-body #catlinks {
 
    color: black;
/*Infoboxes*/
 
.infobox {
  background-color:var(--whitetextandbg);
  border: 2px solid;
  border-color:var(--smallborders);
  overflow:clip;
  box-shadow:none;
  border-bottom:5px solid var(--smallborders);
  border-right:5px solid var(--smallborders);
  width:260px;
  max-width:50%;
  line-height:1.8;
  font-size:0.95rem;
  float:right;
  margin-left:50px;
}
}


.infobox {color:var(--maintext)}
.mw-dark-mode a {
.infobox-title, .infobox-header, .infobox-label {color:var(--headertext);}
    color: #3782ff;
 
.infobox-title {
  background-color:var(--vectormenucolour3);
  font-weight:bold;
  padding:3px;
  text-align:center;
  font-family:var(--headerfont);
  }
 
.infobox-header {
  background-color:var(--tableheaders);
  font-weight:bold;
  padding:3px;
  text-align:center;
  font-size:0.98rem;
  }
 
.infobox-label {
  background:var(--infoboxcolour2);
}
}


.infobox-title, .infobox-header {
.mw-dark-mode a.new {
  border-top:1px solid var(--smallborders);
    color: red;
  border-bottom:1px solid var(--smallborders);
}
}


.infobox-image {
.mw-dark-mode .mainpage-buttons a:link, .mw-dark-mode .mainpage-buttons a:hover,
  justify-content: center;
.mw-dark-mode .mainpage-buttons a:visited {
  display:flex;
color: var(--dark-mode-alt-link);
  outline:1px solid var(--whitetextandbg);
  outline-offset:-3px;
}
}


.infobox-row, .infobox-label {
.mw-dark-mode .mainpage-buttons a.new:link, .mw-dark-mode .mainpage-buttons a.new:hover,
  text-align:center;}
.mw-dark-mode .mainpage-buttons a.new:visited {
 
color: var(--dark-mode-alt-link-new);
.infobox-data, .infobox-data-section, .infobox-row {font-weight:normal;}
.infobox-label, .infobox-header, .infobox-title {font-weight:bold;}
 
/*Editor stuff*/
.oo-ui-toolbar-bar, .oo-ui-toolbar-popups, .oo-ui-tool-link, .oo-ui-widget-enabled, .oo-ui-window-content {
  background-color:var(--whitetextandbg);
  color:var(--maintext);
}
.oo-ui-widget-disabled {
  background-color:#eaeaea;
  color:#e3e3e3;
}
}


/*footer*/
/* Recent Changes */
#footer-places-about a, #footer-places-disclaimer a, #footer-places-mobileview a, #footer a, #footer li, #footer {
.mw-dark-mode .mw-changeslist h4 {
  background-color:rgba(var(--orange), 0.85);
    color: var(--dark-mode-text);
  border-color:rgba(132, 79, 61, 0.85);
  border-radius:none;
  color:var(--whitetextandbg);
  padding:0.15em;
  margin-bottom:3px;
}
}
#footer-places-about a, #footer-places-disclaimer a, #footer-places-mobileview a, #footer a, #footer {border-color:var(--whitetextandbg);background:transparent;}
#footer {margin-right:1%;;}
#footer-poweredbyico, #footer-poweredbyico a, #footer-poweredbyico li, #footer-poweredbyico ul, #footer-poweredbyico img {background:none!important;margin-bottom:0.75em;}


/*these just add some space to the Recent changes page interface and adjust the reading area colour, the buttons are left unstyled intentionally*/
.mw-dark-mode ins.diffchange {
.mw-rcfilters-ui-filterWrapperWidget {
background: #51a2ef;
  padding:10px;
  padding-left:20px;
  padding-right:20px;
  max-width:97.5%;
}
}


.mw-changeslist.mw-rcfilters-ui-changesListWrapperWidget {
.mw-dark-mode del.diffchange {
  padding:10px;
background: #a58843;
  padding-left:20px;
  padding-right:20px;
  max-width:97.5%;
}
}


.mw-changeslist.mw-rcfilters-ui-changesListWrapperWidget, .mw-rcfilters-ui-filterWrapperWidget {background-color:rgba(255, 255, 243,0.5)!important;color:var(--maintext);}
.mw-dark-mode .mw-plusminus-pos {
 
color: #18ab18;
/*This allows you to spoiler tag stuff with a blur*/
.spoilercell  {
  filter: blur(6px);
  -webkit-filter: blur(6px);
  overflow:hidden;
}
}


.spoilercell:active  {
.mw-dark-mode .mw-plusminus-neg {
  filter: blur(0px);
color: #ff0101;
  -webkit-filter: blur(0px);
}
}


/*resizes the visual editor window*/
.mw-datatable, .ext-replacetext-searchoptions, .ext-replacetext-searchoptions {
.oo-ui-textInputWidget-autosized {
color: black;
resize: both !important;
}
.oo-ui-window-frame {
width: 45% !important;
height:50%!important;
min-width:480px;
}
/*fixes a problem with the popup widget*/
.oo-ui-popupWidget-anchored-top {
  min-height: 300px;
}
}


.oo-ui-popupWidget-anchored-top > .oo-ui-popupWidget-content {
.mw-dark-mode .oo-ui-labelWidget.oo-ui-inline-help {
  min-height:300px;
color: var(--dark-mode-text);
  overflow:scroll;
}
}


.oo-ui-popupWidget-popup {
.mw-dark-mode .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body >
  min-height:300px;
.oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
  height:300px;
color: var(--dark-mode-text);
}
}
/*fin*/

Navigation menu