|
Tags: Manual revert Blanking |
| (17 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /*Foundation Wiki – Vector Skin CSS
| |
|
| |
|
| 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 {
| |
| --maintext: #2a160f;
| |
| --headertext: #3c3f44;
| |
| --whitetextandbg: #fffff3;
| |
| --bordercolour: #5f3529;
| |
| --smallborders: #9c8668;
| |
| --orange: 223, 156, 52;
| |
| --mainfont: Verdana, Tahoma, sans-serif;
| |
| --headerfont: Georgia, serif;
| |
| --tableheaders: #eacf98;
| |
| --tablecolour2: #f2e5c0;
| |
| --tablecolour3: #ffeabd;
| |
| --background-image: File:Keyart02 Clean noLogo HD.jpg;
| |
| }
| |
|
| |
| /*overarching fonts*/
| |
| #content {
| |
| 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 */
| |
| body {
| |
| 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 */
| |
| #mw-head, #mw-page-base { background: transparent; border: none; }
| |
|
| |
| #p-personal {
| |
| background-color: transparent;
| |
| border-bottom: none;
| |
| box-shadow: none;
| |
| border-radius: 0;
| |
| }
| |
|
| |
| #p-personal ul { margin: 0; padding: 0; }
| |
|
| |
| #p-personal li a {
| |
| color: var(--whitetextandbg);
| |
| padding: 0.2em 0.5em;
| |
| text-decoration: none;
| |
| transition: color 0.3s, background 0.3s;
| |
| }
| |
|
| |
| #p-personal li a:hover {
| |
| color: var(--orange);
| |
| background-color: rgba(255,255,255,0.1);
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| #mw-head .vector-menu-content {
| |
| background-color:rgba(42, 22, 15, 0.5);
| |
| border-color:var(--smallborders);
| |
| 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)}
| |
|
| |
| .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 {
| |
| background:transparent;
| |
| 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(--tablecolour3);
| |
| 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(--tablecolour3);
| |
| 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 {
| |
| background-color:var(--tableheaders);
| |
| box-shadow: inset -0.05vw -0.05vw 0.1vw 0.1vw #d4b57e;
| |
| border-color:var(--bordercolour);
| |
| border-radius:4px;
| |
| }
| |
|
| |
| /*main body*/
| |
| #content.mw-body {
| |
| background-color:rgba(255, 234, 189, 0.97);
| |
| box-shadow: inset 0 0 10vw 1.5vw #d4b57e;
| |
| border-color:var(--bordercolour);
| |
| border-radius:4px;
| |
| border-style:solid;
| |
| border-width:0.15em;
| |
| margin-right:1%;
| |
| }
| |
|
| |
| /*thumbnails*/
| |
| .toc, li.gallerybox div.thumb, div.thumbinner {
| |
| background-color:rgba(42, 22, 15, 0.1);
| |
| 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;}
| |
|
| |
| /*category links*/
| |
| #catlinks, #catlinks a, #footer-places-privacy, #footer-places-about, #footer-places-disclaimer, #footer-places-mobileview, #footer {
| |
| background-color:rgba(var(--orange), 0.85);
| |
| border-color:rgba(132, 79, 61, 0.85);
| |
| border-radius: 0;
| |
| color:var(--whitetextandbg);
| |
| padding: 0.5em;
| |
| }
| |
|
| |
| #catlinks li, {
| |
| border-color:var(--whitetextandbg);background:transparent;
| |
| }
| |
|
| |
| /*Tables*/
| |
| .wikitable {
| |
| background-color:var(--whitetextandbg);
| |
| border: 2px solid;
| |
| border-color:var(--smallborders);
| |
| overflow:clip;
| |
| max-width:80%;
| |
| width:fit-content;
| |
| }
| |
|
| |
| .wikitable tr > th {
| |
| background-color:var(--tableheaders);
| |
| font-weight:bold;
| |
| padding:5px;
| |
| text-align:center;
| |
| }
| |
|
| |
| .wikitable tr:nth-child(odd) > td {
| |
| background:var(--tablecolour2);
| |
| color:var(--maintext);
| |
| }
| |
|
| |
| /* Right-align Price each columns in all wikitable tables */
| |
| .wikitable td:nth-child(2),
| |
| .wikitable th:nth-child(2),
| |
| .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
| |
| !.wikitable tr:hover, .wikitable tr:nth-child(odd):hover td {
| |
| background:rgba(250,220,160, 0.5);
| |
| }
| |
| */
| |
|
| |
| .wikitable tr {
| |
| border-bottom:1px solid;
| |
| border-color:var(--smallborders);
| |
| }
| |
|
| |
| .wikitable tr > td, .wikitable tr > td[rowspan] {
| |
| border-right:1px dotted;
| |
| border-color:var(--smallborders);
| |
| }
| |
|
| |
| .wikitable tr td {padding:5px;padding-left:10px;padding-right:10px;}
| |
|
| |
| /*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)}
| |
| .infobox-title, .infobox-header, .infobox-label {color:var(--headertext);}
| |
|
| |
| .infobox-title {
| |
| background-color:var(--tablecolour3);
| |
| 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(--tablecolour2);
| |
| }
| |
|
| |
| .infobox-title, .infobox-header {
| |
| border-top:1px solid var(--smallborders);
| |
| border-bottom:1px solid var(--smallborders);
| |
| }
| |
|
| |
| .infobox-image {
| |
| justify-content: center;
| |
| display:flex;
| |
| outline:1px solid var(--whitetextandbg);
| |
| outline-offset:-3px;
| |
| }
| |
|
| |
| .infobox-row, .infobox-label {
| |
| text-align:center;}
| |
|
| |
| .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*/
| |
| #footer-places-about a, #footer-places-disclaimer a, #footer-places-mobileview a, #footer a, #footer li, #footer {
| |
| background-color:rgba(var(--orange), 0.85);
| |
| 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-rcfilters-ui-filterWrapperWidget {
| |
| padding:10px;
| |
| padding-left:20px;
| |
| padding-right:20px;
| |
| max-width:97.5%;
| |
| }
| |
|
| |
| .mw-changeslist.mw-rcfilters-ui-changesListWrapperWidget {
| |
| padding:10px;
| |
| 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);}
| |
|
| |
| /*This allows you to spoiler tag stuff with a blur*/
| |
| .spoilercell {
| |
| filter: blur(6px);
| |
| -webkit-filter: blur(6px);
| |
| overflow:hidden;
| |
| }
| |
|
| |
| .spoilercell:active {
| |
| filter: blur(0px);
| |
| -webkit-filter: blur(0px);
| |
| }
| |
|
| |
| /*resizes the visual editor window*/
| |
| .oo-ui-textInputWidget-autosized {
| |
| 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 {
| |
| min-height:300px;
| |
| overflow:scroll;
| |
| }
| |
|
| |
| .oo-ui-popupWidget-popup {
| |
| min-height:300px;
| |
| height:300px;
| |
| }
| |
|
| |
| /*fin*/
| |