Difference between revisions of "MediaWiki:Vector.css"
Jump to navigation
Jump to search
(Made the background more opaque.) |
|||
(19 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
==================================================*/ | ==================================================*/ | ||
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; } | body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; } | ||
+ | |||
+ | html, body { | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: "Quicksand"; | ||
+ | } | ||
body { | body { | ||
background-color: green; | background-color: green; | ||
− | background-image: url(" | + | background-image: url("/w/assets/pikibackground1.jpg"); |
background-position: left top; | background-position: left top; | ||
background-size:cover; | background-size:cover; | ||
Line 16: | Line 23: | ||
#p-personal { | #p-personal { | ||
height: 25px; | height: 25px; | ||
− | box-shadow: 0px 0px | + | box-shadow: 0px 0px 5px #000000; |
background-color: rgba(255,255,255,0.85); | background-color: rgba(255,255,255,0.85); | ||
top: 0em; | top: 0em; | ||
− | + | right: 2em; | |
− | padding: 0px 12px 0px | + | padding: 0px 12px 0px 0px; |
border-radius: 0px 0px 5px 5px; | border-radius: 0px 0px 5px 5px; | ||
border-style: solid; | border-style: solid; | ||
border-color: #197819; | border-color: #197819; | ||
− | border-width: 0px | + | border-width: 0px 10px 0px 10px; |
} | } | ||
div#p-personal ul { | div#p-personal ul { | ||
− | padding-left: | + | padding-left: inherit; |
} | } | ||
Line 65: | Line 72: | ||
div#simpleSearch #searchButton { | div#simpleSearch #searchButton { | ||
− | background-color: # | + | background-color: #ffffff00; |
} | } | ||
Line 85: | Line 92: | ||
div#simpleSearch { | div#simpleSearch { | ||
− | right: | + | right: 2em; |
display: block; | display: block; | ||
width: 267px; | width: 267px; | ||
Line 93: | Line 100: | ||
height: 1.4em; | height: 1.4em; | ||
margin-top: -38px; | margin-top: -38px; | ||
− | |||
position: absolute; | position: absolute; | ||
min-height: 1px; | min-height: 1px; | ||
− | border-width: | + | border-width: 0px 0px 0px 10px; |
border-radius: 5px 5px 5px 5px; | border-radius: 5px 5px 5px 5px; | ||
border-color: #197819; | border-color: #197819; | ||
background-color: rgba(255,255,255,0.8); | background-color: rgba(255,255,255,0.8); | ||
+ | box-shadow: 0px 0px 5px #000000; | ||
background-image: none; | background-image: none; | ||
} | } | ||
Line 109: | Line 116: | ||
background-color: rgba(190,230,120,0.85); | background-color: rgba(190,230,120,0.85); | ||
background-position: center; | background-position: center; | ||
− | border-radius: | + | border-radius: 5px 5px 0px 0px; |
− | height: | + | height: 25px; |
line-height: 0px; | line-height: 0px; | ||
margin-right: 3px; | margin-right: 3px; | ||
Line 116: | Line 123: | ||
border-style: solid; | border-style: solid; | ||
border-color: #197819; | border-color: #197819; | ||
− | border-width: | + | border-width: 0px 0px 0px 10px; |
min-width: 30px; | min-width: 30px; | ||
overflow: visible; | overflow: visible; | ||
Line 138: | Line 145: | ||
left: 0px; | left: 0px; | ||
background-color: rgba(190,230,120,0.85); | background-color: rgba(190,230,120,0.85); | ||
− | border-width: 0px | + | border-width: 0px 0px 0px 9px; |
border-color: #197819; | border-color: #197819; | ||
border-radius: 0px 0px 10px 10px; | border-radius: 0px 0px 10px 10px; | ||
Line 149: | Line 156: | ||
top: 0.2em; | top: 0.2em; | ||
right: 0.4em; | right: 0.4em; | ||
+ | } | ||
+ | |||
+ | div#mw-panel { | ||
+ | font-size: inherit; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 9em; | ||
+ | left: 0; | ||
} | } | ||
Line 168: | Line 183: | ||
} | } | ||
− | + | div.vectorTabs ul { | |
background-image: none; | background-image: none; | ||
− | margin-left: | + | margin-left: 4em; |
− | + | } | |
− | + | div.vectorTabs span { | |
background-image: none; | background-image: none; | ||
background-position: center; | background-position: center; | ||
} | } | ||
− | + | div.vectorTabs ul li { | |
background-image: none; | background-image: none; | ||
− | background-color: rgba(190, 230, 120, 0.85); | + | background-color: rgba(190,230,120,0.85); |
+ | box-shadow: 0px 0px 5px #000000; | ||
background-position: center; | background-position: center; | ||
− | border-radius: | + | border-radius: 5px 5px 0px 0px; |
− | height: | + | height: 26px; |
line-height: 0px; | line-height: 0px; | ||
margin-right: 3px; | margin-right: 3px; | ||
Line 189: | Line 205: | ||
border-style: solid; | border-style: solid; | ||
border-color: #197819; | border-color: #197819; | ||
− | border-width: | + | border-width: 0px 0px 0px 10px; |
min-width: 30px; | min-width: 30px; | ||
overflow: visible; | overflow: visible; | ||
Line 195: | Line 211: | ||
} | } | ||
− | + | div.vectorTabs ul li.selected { | |
background-image: none; | background-image: none; | ||
− | background-color: rgba(130, 190, 30, 0.8); | + | background-color: rgba(130,190,30,0.8); |
+ | box-shadow: 0px 0px 5px #000000; | ||
background-position: center; | background-position: center; | ||
− | border-radius: | + | border-radius: 5px 5px 0px 0px; |
− | height: | + | height: 26px; |
line-height: 0px; | line-height: 0px; | ||
margin-right: 3px; | margin-right: 3px; | ||
Line 206: | Line 223: | ||
border-style: solid; | border-style: solid; | ||
border-color: #197819; | border-color: #197819; | ||
− | border-width: | + | border-width: 0px 0px 0px 10px; |
min-width: 30px; | min-width: 30px; | ||
overflow: visible; | overflow: visible; | ||
Line 212: | Line 229: | ||
} | } | ||
− | + | div.vectorTabs li a { | |
padding-top: 13px; | padding-top: 13px; | ||
} | } | ||
− | + | div.vectorTabs li.selected a { | |
padding-top: 13px; | padding-top: 13px; | ||
} | } | ||
Line 222: | Line 239: | ||
#left-navigation { | #left-navigation { | ||
margin-left: 11.6em; | margin-left: 11.6em; | ||
− | margin-top: | + | margin-top: 4.5em; |
overflow: visible; | overflow: visible; | ||
display: inline; | display: inline; | ||
Line 229: | Line 246: | ||
#right-navigation { | #right-navigation { | ||
margin-right: 1em; | margin-right: 1em; | ||
− | margin-top: | + | margin-top: 4.5em; |
overflow: visible; | overflow: visible; | ||
display: inline; | display: inline; | ||
Line 239: | Line 256: | ||
#p-logo a { | #p-logo a { | ||
− | + | display: block; | |
− | + | width: 10em; | |
− | + | height: 160px; | |
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | text-decoration: none; | ||
+ | position: absolute; | ||
+ | top: -9.5em; | ||
+ | left: -0.5em; | ||
} | } | ||
− | |||
a.mw-wiki-logo { | a.mw-wiki-logo { | ||
height 100px; | height 100px; | ||
Line 255: | Line 277: | ||
#mw-panel { | #mw-panel { | ||
− | box-shadow: 0px 0px | + | box-shadow: 0px 0px 5px #000000; |
background-color: rgba(255,255,255,0.85); | background-color: rgba(255,255,255,0.85); | ||
− | max-width: | + | max-width: 12em; |
− | margin-left: | + | margin-left: 24px; |
− | margin-top: | + | margin-top: 10em; |
padding: 8px 8px 8px 0em; | padding: 8px 8px 8px 0em; | ||
border-style: solid; | border-style: solid; | ||
border-color: #197819; | border-color: #197819; | ||
− | border-width: | + | border-width: 0px 8px 0px 15px; |
− | border-radius: | + | border-radius: 10px 10px 10px 10px; |
} | } | ||
.mw-body { | .mw-body { | ||
margin-top: 25px; | margin-top: 25px; | ||
− | box-shadow: 0px 0px | + | box-shadow: 0px 0px 5px #000000; |
− | background-color: rgba(255,255,255,0. | + | background-color: rgba(255,255,255,0.95); |
border-style: solid; | border-style: solid; | ||
border-color: #197819; | border-color: #197819; | ||
− | border-width: | + | border-width: 0px 0px 0px 20px; |
border-radius: 10px 0px 0px 10px; | border-radius: 10px 0px 0px 10px; | ||
− | margin-left: | + | margin-left: 14em; |
+ | position: relative; | ||
+ | z-index: 1; | ||
} | } | ||
Line 486: | Line 510: | ||
table.wikitable > caption { | table.wikitable > caption { | ||
font-weight: bold; | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /* Table of Contents Colors */ | ||
+ | #toc, .toc { | ||
+ | border-radius: 5px; | ||
+ | border-style: solid; | ||
+ | border-width: 0px 0px 0px 10px; | ||
+ | border-color: #197819; | ||
+ | background-color: #f6f6f6; | ||
+ | box-shadow: 0px 0px 5px #000000; | ||
+ | font-size: 95%; | ||
} | } |
Latest revision as of 16:36, 17 April 2020
/* CSS placed here will affect users of the Vector skin */
/*==================================================
ALL PAGES
==================================================*/
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Quicksand";
}
body {
background-color: green;
background-image: url("/w/assets/pikibackground1.jpg");
background-position: left top;
background-size:cover;
background-attachment: fixed;
}
/* Styles the account information box in the top right corner*/
#p-personal {
height: 25px;
box-shadow: 0px 0px 5px #000000;
background-color: rgba(255,255,255,0.85);
top: 0em;
right: 2em;
padding: 0px 12px 0px 0px;
border-radius: 0px 0px 5px 5px;
border-style: solid;
border-color: #197819;
border-width: 0px 10px 0px 10px;
}
div#p-personal ul {
padding-left: inherit;
}
/* standard link colors */
.mw-body-content a:link { color: #318631; } /* normal unvisited links */
.mw-body-content a:link:visited { color: #820082; } /* visited links */
.mw-body-content a:link:active { color: #318631; } /* active links */
.mw-body-content a:link.new { color: #dc6e00; } /* new links */
.mw-body-content a:link.interwiki { color: #318631; } /* interwiki links */
.mw-body-content a:link.external { color: #318631; } /* external links */
.mw-body-content a:link.stub { color: #820082; } /* hovered links */
.mw-body-content a:link {color: #318631}
.mw-body-content a:visited {color: #820082}
.mw-body-content a:hover {color: #820082}
.mw-body-content a:active {color: #02d600}
div#mw-panel div.portal div.body ul li a {
color: #26a026;
}
div#mw-panel div.portal div.body ul li a:visited {
color: #26a026;
}
.client-js #preftoc a, .client-js #preftoc a:active {
color: #26a026;
}
div#simpleSearch #searchInput {
width: 100%;
padding: 0.2em 0 0.2em 0.2em;
font-size: 14px;
direction: ltr;
}
div#simpleSearch #searchButton {
background-color: #ffffff00;
}
/* Affects the star icon in the watch tab */
#ca-unwatch.icon a, #ca-watch.icon a {
background-position: 91% 29%;
width: 65px;
overflow: visible;
padding: 13px;
text-align: center;
padding-right: 17px;
padding-left: 0px;
}
#p-search {
margin-right: 0em;
margin-left: 0em;
}
div#simpleSearch {
right: 2em;
display: block;
width: 267px;
min-width: 5em;
max-width: 20em;
padding-right: 1.4em;
height: 1.4em;
margin-top: -38px;
position: absolute;
min-height: 1px;
border-width: 0px 0px 0px 10px;
border-radius: 5px 5px 5px 5px;
border-color: #197819;
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 5px #000000;
background-image: none;
}
/* More Dropdown Tab */
div#mw-head div.vectorMenu h3 {
padding-top: 13px;
background-image: none;
background-color: rgba(190,230,120,0.85);
background-position: center;
border-radius: 5px 5px 0px 0px;
height: 25px;
line-height: 0px;
margin-right: 3px;
margin-top: 7px;
border-style: solid;
border-color: #197819;
border-width: 0px 0px 0px 10px;
min-width: 30px;
overflow: visible;
padding: 0;
}
div.vectorMenu h3 span {
background-position: 100% 29%;
width: 40px;
overflow: visible;
padding: 13px;
text-align: center;
padding-right: 17px;
padding-left: 0px;
}
div.vectorMenu div.menu {
min-width: 81%;
position: absolute;
top: 33px;
left: 0px;
background-color: rgba(190,230,120,0.85);
border-width: 0px 0px 0px 9px;
border-color: #197819;
border-radius: 0px 0px 10px 10px;
clear: both;
display: none;
z-index: 2;
}
div.vectorMenu h3 a {
top: 0.2em;
right: 0.4em;
}
div#mw-panel {
font-size: inherit;
position: absolute;
top: 0;
width: 9em;
left: 0;
}
div#mw-panel div.portal {
margin-top: 0em;
margin: 0px 0.6em 0px 18px;
}
div#mw-panel #p-logo + div.portal {
margin-top: 0em;
}
/* Tab stuff */
div.vectorTabs {
background-image: none;
background-position: bottom left;
background-repeat: no-repeat;
padding-left: 0;
}
div.vectorTabs ul {
background-image: none;
margin-left: 4em;
}
div.vectorTabs span {
background-image: none;
background-position: center;
}
div.vectorTabs ul li {
background-image: none;
background-color: rgba(190,230,120,0.85);
box-shadow: 0px 0px 5px #000000;
background-position: center;
border-radius: 5px 5px 0px 0px;
height: 26px;
line-height: 0px;
margin-right: 3px;
margin-top: 7px;
border-style: solid;
border-color: #197819;
border-width: 0px 0px 0px 10px;
min-width: 30px;
overflow: visible;
padding: 0;
}
div.vectorTabs ul li.selected {
background-image: none;
background-color: rgba(130,190,30,0.8);
box-shadow: 0px 0px 5px #000000;
background-position: center;
border-radius: 5px 5px 0px 0px;
height: 26px;
line-height: 0px;
margin-right: 3px;
margin-top: 6px;
border-style: solid;
border-color: #197819;
border-width: 0px 0px 0px 10px;
min-width: 30px;
overflow: visible;
padding: 0;
}
div.vectorTabs li a {
padding-top: 13px;
}
div.vectorTabs li.selected a {
padding-top: 13px;
}
#left-navigation {
margin-left: 11.6em;
margin-top: 4.5em;
overflow: visible;
display: inline;
}
#right-navigation {
margin-right: 1em;
margin-top: 4.5em;
overflow: visible;
display: inline;
}
#p-logo {
height: 0;
}
#p-logo a {
display: block;
width: 10em;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
text-decoration: none;
position: absolute;
top: -9.5em;
left: -0.5em;
}
a.mw-wiki-logo {
height 100px;
}
div#mw-page-base {
background-image: none;
background-color: rgba(255,255,255,0);
opacity: 0;
}
#mw-panel {
box-shadow: 0px 0px 5px #000000;
background-color: rgba(255,255,255,0.85);
max-width: 12em;
margin-left: 24px;
margin-top: 10em;
padding: 8px 8px 8px 0em;
border-style: solid;
border-color: #197819;
border-width: 0px 8px 0px 15px;
border-radius: 10px 10px 10px 10px;
}
.mw-body {
margin-top: 25px;
box-shadow: 0px 0px 5px #000000;
background-color: rgba(255,255,255,0.95);
border-style: solid;
border-color: #197819;
border-width: 0px 0px 0px 20px;
border-radius: 10px 0px 0px 10px;
margin-left: 14em;
position: relative;
z-index: 1;
}
.mw-body h1, .mw-body h2, .mw-body #firstHeading {
font-family: sans-serif;
background-image: url("")
background-position: 95% -1.75%;
background-repeat: no-repeat;
}
/* Fixes an issue where File:Drip-heading.png shows behind the word "Contents" in the table of contents */
div.toctitle > h2 {
background-image: none
}
div#footer {
padding-bottom: 10px;
padding-top: 10px;
margin-top: 100px;
margin-left: 0px;
margin-right: 0px;
right: 0px;
left: 0px;
top: 992px;
position: sticky;
background-color: rgba(255, 255, 255,0.7);
}
h1, h2{
color: #000;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: 0.5em;
padding-bottom: 0.17em;
border-bottom: 1px solid #197819;
}
h3, h4, h5, h6 {
color: #000;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: 0.5em;
padding-bottom: 0.17em;
border-bottom: none;
}
.oo-ui-panelLayout-framed {
border: 1px solid #197819;
border-radius: 2px;
}
fieldset {
border: 1px solid#197819;
margin: 1em 0 1em 0;
padding: 0 1em 1em;
}
div.mw-warning-with-logexcerpt {
padding: 3px;
margin-bottom: 3px;
border: 2px solid #197819;
clear: both;
}
pre, .mw-code {
color: #000;
background-color: #f8f9fa;
border: 1px dashed#a2a9b1;
padding: 1em;
white-space: pre-wrap;
}
pre, code, tt, kbd, samp, .mw-code {
font-family: Consolas, monospace;
}
.wikiEditor-ui-toolbar .sections .section {
float: left;
width: 100%;
border-top: 1px solid #c0c0c0;
background-color: #ffffff;
}
.wikiEditor-ui-toolbar {
position: relative;
display: block;
background-color: #ffffff;
background-image: none;
background-position: left top;
background-repeat: repeat-x;
}
.editOptions {
background-color: #00000000;
border: 0px;
border-top: 0;
padding: 1em 1em 1.5em 1em;
margin-bottom: 2em;
}
.warningbox {
color: #000000;
border-color: #a11;
border-style: ridge;
background-color: #ff6f6f;
border-width: 10px;
}
/* Social Profile Customization */
#profile-image img {
background-color: #197819;
border: 1px solid #318631;
padding: 3px;
}
#profile-top {
border-bottom: 1px solid #197819;
padding: 10px 0;
margin: 0 0 10px 0;
position: relative;
}
.user-section-heading {
border-bottom: 1px solid #197819;
width: 100%;
line-height: 22px;
margin: 0 0 8px 0;
}
#profile-toggle-button {
padding-top: 5px;
padding-bottom: 5px;
background-color: #197819;
border-radius: 6px;
top: 5px;
right: 0;
padding: 2px 10px;
position: absolute;
}
.action-right {
float: right;
font-size: 12px;
padding: 3px 5px 0 0;
}
.profile-tab-on {
background-color: #197819;
float: left;
height: 22px;
color: #fff;
font-size: 14px;
min-width: 72px;
font-weight: 700;
padding: 5px 5px 5px 5px;
margin: 0 5px 0 0;
text-align: center;
border-radius: 5px;
}
.profile-tab {
background-color: #68bd46;
text-align: center;
height: 22px;
min-width: 72px;
float: left;
padding: 5px 5px 5px 5px;
margin: 0 5px 0 0;
border-radius: 5px;
}
.profile-on {
background-color: #a5cce4;
border-radius: 3px;
font-weight: 700;
padding: 5px 5px 5px 5px;
}
/*==================================================
TABLES
==================================================*/
/* wikitable class for skinning tables. default colors are intended for mediawiki-generated tables, like the file history table. other color schemes are available for
use in mainspace; see the sitecolor classes below. */
table.wikitable {
background-color: #fff;
color: #222;
margin: 1em 0;
border-style: solid;
border-width: 5px 2px;
border-color: #197819; /* green */
border-collapse: collapse;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
}
table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > th,
table.wikitable > tbody > tr > td {
border-style: solid;
border-width: 1px;
border-color: #197819;
padding: 0.2em 0.4em;
}
table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > th {
color: #fff;
background-color: #378b00; /* green, the same shade used for links */
}
table.wikitable > caption {
font-weight: bold;
}
/* Table of Contents Colors */
#toc, .toc {
border-radius: 5px;
border-style: solid;
border-width: 0px 0px 0px 10px;
border-color: #197819;
background-color: #f6f6f6;
box-shadow: 0px 0px 5px #000000;
font-size: 95%;
}