|
|
| 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*/
| |