MediaWiki:Vector.css

/* All CSS here will be loaded for users of the Vector skin */ /**setting variables**/
 * root {

--gold-accent: #b39f73; }

/**************header css***************/ background: unset; }
 * 1) mw-page-base {

margin-top: calc(2.5em - 1px); }
 * 1) left-navigation,
 * 2) right-navigation {

margin-right:0; }
 * 1) ca-unwatch.icon, #ca-watch.icon {

border-bottom:2px solid #f8f3eb; }
 * 1) mw-head .vector-menu-dropdown {

.theme-dark #mw-head .vector-menu-dropdown { border-bottom:2px solid black; }

border-width:2px 2px 0 2px; border-style:solid; margin-left:-2px; margin-right:-2px; border-color:var(--gold-accent, #b39f73); background:#f8f3eb; }
 * 1) mw-head .vector-menu-dropdown h3 {

.theme-dark #mw-head .vector-menu-dropdown h3 { background:black; color:white; }

.vector-menu-dropdown .vector-menu-content-list, .vector-menu-tabs ul { background:#f8f3eb; }

.theme-dark .vector-menu-dropdown .vector-menu-content-list, .theme-dark .vector-menu-tabs ul { background:black; }

/*************search thing css*************/ background: unset; border:none; }
 * 1) simpleSearch {

border-width:2px; border-radius:unset; border-color:var(--gold-accent, #b39f73); background:#f8f3eb; }
 * 1) simpleSearch input#searchInput {

.theme-dark #simpleSearch input#searchInput { background:black; color:white; }

.theme-dark #simpleSearch input#searchInput::placeholder { color:white; }

border-color:#337700; box-shadow: inset 0 0 0 1px #337700; }
 * 1) searchInput:focus,
 * 2) simpleSearch:hover #searchInput:focus {

.theme-dark #simpleSearch:hover #searchInput { border-color:white; }

/**************topnav tabs css************/ .vector-menu-tabs { padding:0; }

.vector-menu-tabs, .vector-menu-tabs li a, .vector-menu-tabs .selected, div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited, .vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { background:unset; }

.vector-menu-tabs li { margin-left:-2px; border-width:2px 2px 0 2px; border-style:solid; background-image:linear-gradient(to top,var(--gold-accent,#b39f73) 2px, transparent 2px); border-color:var(--gold-accent, #b39f73); }

.theme-dark div.vectorTabs li.selected a, .theme-dark div.vectorTabs li.selected a:visited, .theme-dark .vector-menu-tabs .selected a, .theme-dark .vector-menu-tabs .selected a:visited { color:white; }

div.vectorTabs li a, div.vectorTabs li a span, .vector-menu-tabs li a, .vector-menu-tabs li a span { color:var(--gold-accent,#b39f73); }

.vector-menu-tabs li:first-child { margin-left:0; }

.vector-menu-dropdown .vector-menu-content { border-width:0 2px 2px 2px; min-width:calc(100% - 1px); border-color:var(--gold-accent, #b39f73); }

/*****************side bar css*********************/ border-style:solid; border-width:0 2px 2px 0; border-color:var(--gold-accent, #b39f73); background:#f8f3eb; }
 * 1) mw-panel {

.theme-dark #mw-panel { background:black; }

.theme-dark .mw-wiki-logo { background-image:url(https://static.miraheze.org/twistedwonderlandwiki/f/f6/Twst_Logo_Dark_Theme.png); }

color: var(--gold-accent, #b39f73); }
 * 1) mw-panel a {

border-bottom: none; }
 * 1) mw-panel.collapsible-nav .portal {

padding: .4em .5em; text-align:center; font-variant:small-caps; }
 * 1) mw-panel.collapsible-nav .portal .vector-menu-heading {

color:#202122; }
 * 1) mw-panel.collapsible-nav .portal h3,
 * 2) mw-panel.collapsible-nav .portal.collapsed h3,
 * 3) mw-panel.collapsible-nav .portal h3 a,
 * 4) mw-panel.collapsible-nav .portal.collapsed h3 a,
 * 5) mw-panel.collapsible-nav .portal h3 a span,
 * 6) mw-panel.collapsible-nav .portal.collapsed h3 a span {

.theme-dark #mw-panel.collapsible-nav .portal h3, .theme-dark #mw-panel.collapsible-nav .portal.collapsed h3, .theme-dark #mw-panel.collapsible-nav .portal h3 a, .theme-dark #mw-panel.collapsible-nav .portal.collapsed h3 a, .theme-dark #mw-panel.collapsible-nav .portal h3 a span, .theme-dark #mw-panel.collapsible-nav .portal.collapsed h3 a span { color:white; }

margin-left:.25em; }
 * 1) mw-panel.collapsible-nav .portal .vector-menu-content,
 * 2) mw-panel.collapsible-nav .portal.persistent .vector-menu-content {

background: #f8f3eb; border-radius:50%; font-size:.9em; margin:0.25em; border:2px dotted var(--gold-accent,#b39f73); box-shadow:0px 0 0 2px #f8f3eb, 0px 0 0 4px var(--gold-accent,#b39f73); }
 * 1) mw-panel.collapsible-nav .portal h3,
 * 2) mw-panel.collapsible-nav .portal.collapsed h3 {

.theme-dark #mw-panel.collapsible-nav .portal h3, .theme-dark #mw-panel.collapsible-nav .portal.collapsed h3 { background: black; box-shadow:0px 0 0 2px black, 0px 0 0 4px var(--gold-accent,#b39f73); }

/**************footer & personal nav css************/

.theme-dark #footer, .theme-dark #footer ul li, .theme-dark #p-personal { color:black; }

.theme-dark #footer a, .theme-dark #p-personal a { color:#316b08; }

.theme-dark #footer a:visited, .theme-dark #p-personal a:visited { color:#4ba110; }

.theme-dark #p-personal a.new { color:#ba0000; }

/*********************page base css******************/ body { background:url("https://static.miraheze.org/twistedwonderlandwiki/e/eb/YellowStripes.jpg"); background-size:51.5px; } body.theme-dark { color: white; }

.mw-page-container { background-color: transparent; }

.vector-sticky-header, .mw-header { background-color: #b39f73; }

.mw-body { border-width:2px 0 2px 2px; border-color:var(--gold-accent, #b39f73); background:#f8f3eb; }

.theme-dark .mw-body { background: black; }

h1, h2, h3, h4, h5, h6 { border-color:var(--gold-accent, #b39f73); }

font-family: 'Libre Baskerville', serif; }
 * 1) content h1,
 * 2) content h2,
 * 3) content h3,
 * 4) content h4,
 * 5) content h5,
 * 6) mw-panel,
 * 7) left-navigation,
 * 8) right-navigation {

font-family: 'Open Sans', sans-serif; }
 * 1) content {

hr { color: unset; background-color:var(--gold-accent, #b39f73); }

a { color: #719707; }

.theme-dark a { color: #c4d167; }

.mw-parser-output a.external, color: #abb94b; }
 * 1) content a.extiw,
 * 2) content a.extiw:active {

.theme-dark a.external, .theme-dark #content a.extiw, .theme-dark #content a.extiw:active { color:#f4f26b; }

.theme-dark #contentSub, .theme-dark #contentSub2 { color:white; }

div.thumbinner, li.gallerybox div.thumb { border-color:var(--gold-accent, #b39f73); } .theme-dark div.thumbinner, .theme-dark li.gallerybox div.thumb { background:black; }

html .thumbimage { background:unset; border-color:transparent; }

table.mw_metadata { border:1px var(--gold-accent, #b39f73) solid; }

table.mw_metadata td, table.mw_metadata th { border-color:var(--gold-accent, #b39f73); border-width:1px 0; }

.oo-ui-panelLayout-framed { border-color:var(--gold-accent, #b39f73); }

table.mw_metadata th { background:#1C3323; }

.theme-dark code { background:#1C3323; color:white; }

ol.references li:target, sup.reference:target { background:#ccefc9; } .theme-dark ol.references li:target, .theme-dark sup.reference:target { background:#233f21; }

/**********boring ui stuff**************/ .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span, .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus { border-color:#337700; box-shadow:box-shadow:inset 0 0 0 1px #337700; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button{ background-color:#337700; border-color:#337700; }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span { background-color:#337700; border-color:#337700; box-shadow:inset 0 0 0 1px #337700,inset 0 0 0 2px white; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color:#337700; box-shadow:inset 0 0 0 1px #337700,inset 0 0 0 2px white; }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span { background-color:#2c6303; border-color:#2c6303; box-shadow:inset 0 0 0 1px #2c6303; }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color:#2c6303; border-color:#2c6303; } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color:#58ab19; border-color:#58ab19; }

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span { border-color:#58ab19; }

.theme-dark #bodyContent ul#pagehistory li { border-color: #23430b; }

.theme-dark #bodyContent ul#pagehistory li.selected { background: #337700; border-color: #58ab19; } .theme-dark td.diff-deletedline, .theme-dark td.diff-addedline { background: #02380a; } .theme-dark td.diff-deletedline { border-color:#DC2121; } .theme-dark td.diff-addedline { border-color: #12C712; } .theme-dark td.diff-deletedline .diffchange { background: #F82020; } .theme-dark td.diff-addedline .diffchange { background: #1BEF1B; }

/**theme icons**/ input#searchButton { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/7/70/Search_icon.svg"); opacity:1.0; }

background-image:url("https://static.miraheze.org/twistedwonderlandwiki/f/f2/User_avatar_icon.svg"); }
 * 1) pt-anonuserpage, #pt-userpage a {

background-image:url("https://static.miraheze.org/twistedwonderlandwiki/c/cb/Bell_icon.svg"); }
 * 1) pt-notifications-alert .mw-echo-notifications-badge::before,
 * 2) pt-notifications-alert .oo-ui-icon-bell,
 * 3) pt-notifications-alert .mw-ui-icon-bell::before {

background-image:url("https://static.miraheze.org/twistedwonderlandwiki/a/ab/Tray_icon.svg"); }
 * 1) pt-notifications-notice .mw-echo-notifications-badge::before,
 * 2) pt-notifications-notice .oo-ui-icon-tray,
 * 3) pt-notifications-notice .mw-ui-icon-tray::before {

opacity:.75; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
 * 2) pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {

ul { list-style-image:url("https://static.miraheze.org/twistedwonderlandwiki/d/d9/Bullet_icon.svg"); } .vector-menu-tabs #ca-unwatch.icon a::before { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/4/4d/Unwatch_icon.svg"); }

.vector-menu-tabs #ca-unwatch.icon a:hover::before, .vector-menu-tabs #ca-unwatch.icon a:focus::before { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/5/5b/Unwatch_icon_hover.svg"); }

.vector-menu-tabs #ca-watch.icon a::before { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/f/fd/Watch_icon.svg"); }

.vector-menu-tabs #ca-watch.icon a:hover::before, .vector-menu-tabs #ca-watch.icon a:focus::before { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/7/70/Watch_icon_hover.svg"); }

.theme-dark .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .theme-dark .jquery-tablesorter th.headerSort { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/7/73/Sort_both.svg"); }

.theme-dark .jquery-tablesorter th.headerSortUp { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/a/a2/Sort_up.svg"); }

.theme-dark .jquery-tablesorter th.headerSortDown { background-image:url("https://static.miraheze.org/twistedwonderlandwiki/f/ff/Sort_down.svg"); }