Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Structorica Vector Theme */
:root {
/* Width control */
--fixed-width: 1200px; /* Dynamicly changed by Hook */
--vector-tabs: none;
--vector-tabs-first: none;
--content-background-color: #E6EFF4;
--content-border-top-color: #678002;
}
/* Main page elements */
body {
background-color: var(--background-color-base);
color: var(--color-base);
}
#mw-page-base {
background: none;
height: 85px;
}
/* Remove excess spacing between the sidebar and the logo */
div#mw-panel {
padding-top: 0;
padding-bottom: 10px;
}
#p-logo,
#p-logo a {
margin: auto;
height: 8.75em; /* 140px */
}
#p-logo {
margin-bottom: 0;
}
#mw-panel h3 {
text-decoration: none !important;
cursor: pointer;
}
/* Set the tab link colours to black and bold */
#p-namespaces a,
#p-views a,
#p-cactions-label span,
div#mw-head div.vectorMenu h4,
div#p-variants.vectorMenu #mw-vector-current-variant {
font-weight: bold;
text-decoration: none;
}
/* Use black links */
#p-namespaces a,
#p-views a,
#p-sharing span,
#p-cactions-label span,
div#mw-head div.vectorMenu h4 {
color: #fff;
}
#p-namespaces .new a,
#p-views .new a {
color: #ddd;
}
#right-navigation,
#content {
margin-right: 0px;
}
#footer {
margin-right: 0px;
}
/* Position the tabs */
#left-navigation,
#right-navigation {
margin-top: 60px;
height: 30px;
}
#mw-head-base {
height: 80px;
margin-top: -80px;
}
.mw-body {
margin-top: 5px;
}
/* Tabs styling */
nav.vector-menu-tabs,
nav.vector-menu-dropdown {
background: none;
padding: 0;
height: 30px;
}
nav.vector-menu-tabs li a {
box-sizing: unset;
}
nav.vector-menu-tabs,
nav.vector-menu-tabs a,
.vector-menu-portal .vector-menu-heading,
nav.vector-menu-tabs ul,
nav.vector-menu-tabs ul li.selected,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background: none;
}
nav.vector-menu-tabs ul li,
nav.vector-menu-tabs ul li.selected,
nav.vector-menu-tabs ul li:hover,
nav.vector-menu-tabs ul li:focus,
nav.vector-menu-dropdown,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
--ca-background-image: var(--vector-tabs);
--ca-background-color: var(--content-border-top-color);
background: var(--ca-background-image) no-repeat right 0px top,
linear-gradient(to right, var(--ca-background-color) calc(100% - 0px), transparent 0) no-repeat left 0px top 0px;
position: relative;
}
nav.vector-menu-tabs ul li.selected,
nav.vector-menu-tabs ul li:hover,
nav.vector-menu-tabs ul li:focus,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
--ca-background-color: var(--content-background-color);
background-position-y: bottom, 0px;
}
nav.vector-menu-tabs ul li:before,
nav.vector-menu-dropdown:before {
content: "";
position: absolute;
left: 0;
background: var(--ca-background-image) var(--content-border-top-color) no-repeat left top;
width: 0px;
height: 100%;
pointer-events: none;
}
#left-navigation nav.vector-menu-tabs li:first-child:before {
background: var(--vector-tabs-first) no-repeat left top;
height: 93px
}
nav.vector-menu-tabs li a {
padding: 9px 13px 0px 13px;
height: 21px;
line-height: 1.2em;
}
nav.vector-menu-dropdown label {
padding: 9px 13px 0px 13px !important;
}
.vector-menu-tabs .mw-watchlink.icon {
/* Force font-size when using the icon */
font-size: 16px !important;
}
.vector-menu-tabs .mw-watchlink.icon a {
width: 45px;
margin-right: 3px;
margin-bottom: -10px;
}
.vector-menu-tabs .mw-watchlink.icon a:before {
left: 1.17em;
top: 0.60em;
}
nav.vector-menu-dropdown .vector-menu-content {
transition: none;
min-width: calc(100% - 14px); /* Subtract 14px from the minimum width so that it doesn't cross the grass border */
}
nav.vector-menu {
margin: 0 8px 0 6px;
}
#p-views,
#p-cactions {
margin: 0;
}
#p-cactions {
padding-right: 8px;
height: 30px;
}
#left-navigation nav.vector-menu {
margin-left: 0;
}
nav.vector-menu h3 span {
padding-left: 14px;
font-weight: bold;
}
nav.vector-menu h3 a {
height: 30px;
margin-right: 0px;
}
nav.vector-menu div.vector-menu-content {
top: 30px;
}
/* Set the outer content link colours to light gray and white */
#mw-panel *:not(h3) > a:not(:hover):not(:focus),
#footer a:not(:hover):not(:focus),
.mw-notification a:not(:hover):not(:focus) {
color: var( --color-base) !important;
}
#mw-panel h3,
#mw-panel a,
#footer li,
#footer a,
.mw-notification a {
color: var(--color-emphasized) !important;
}
.mw-body, .parsoid-body,
div#content {
background-color: var(--content-background-color);
border-top: 0px solid var(--content-background-color);
border-bottom: 0px solid var(--content-background-color);
border-left: 0px solid var(--content-background-color);
border-right: 0px solid var(--content-background-color);
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: var(--content-background-color);
}
#preferences .mw-htmlform-submit-buttons {
background-color: var(--content-background-color);
}
/* Style the personal links */
#p-personal {
right: 10px;
top: 5px;
margin-right: 0;
margin-left: 10px;
}
#p-personal a {
color: white;
}
.mw-echo-alert {
background-color: #8e721c;
border: 1px solid #fff;
border-radius: 4px;
font-weight: bold;
}
#p-personal .vector-menu-content-list {
padding: 1px 0.5em 1px 0;
}
.vector-user-menu-legacy li {
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.oo-ui-icon-bell, .mw-ui-icon-bell::before,
.oo-ui-icon-tray, .mw-ui-icon-tray::before {
filter: invert(1);
}
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-tmpuserpage,
.vector-user-menu-legacy #pt-userpage a {
filter: invert(1);
padding-top: 0;
background-size: 14px;
background-position: unset;
}
.vector-user-menu-legacy #pt-anonuserpage span,
.vector-user-menu-legacy #pt-tmpuserpage span,
.vector-user-menu-legacy #pt-userpage a span {
color: white;
filter: invert(1);
}
.skin-vector-legacy #p-personal #pt-notifications-notice,
.skin-vector-legacy #p-personal #pt-notifications-alert {
margin-right: 0;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge {
top: 0;
width: 14px;
height: 14px;
background-size: 14px 14px;
margin-right: 8px;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
margin-right: 2px;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge:after,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge:after {
top: 4px;
filter: invert(1);
border-color: var(--color-inverted-fixed);
color: var(--color-inverted-fixed);
}
/* ------------------------------------------- */
/* Theme and Width toggle buttons styling */
.theme-toggle-button,
.width-toggle-button {
display: block;
padding: 8px 12px;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
margin: 4px 0;
}
body.stw-theme-dark .theme-toggle-button:hover,
body.stw-theme-dark .width-toggle-button:hover,
#p-personal .theme-toggle-button,
#p-personal .width-toggle-button {
display: inline-block;
margin: 0 0 0 10px;
padding: 0.5em;
font-size: 0.875em;
line-height: 1;
}
/* Width control */
@media screen and (min-width: 1200px) {
body {
max-width: var(--fixed-width); /* Dynamicly changed by Hook */
margin: auto;
}
}