MediaWiki:Vector.css: Difference between revisions

Revision as of 09:31, 28 January 2026

/* All CSS here will be loaded for users of the Vector skin */

/*:root {
  --background-top: url("/resources/assets/background_top.png");
  --background-bottom: url("/resources/assets/background_bottom.png");
  --background-top-size: 1856;
  --background-bottom-size: 1856;
  --content-border-top-color: #FFFFFF;
  --content-border-left-color: #FFFFFF;
  --content-background-color: #FFFFFF;
}

body {
  background-image: var(--background-top), var(--background-bottom);
  background-repeat: repeat-x, repeat;
  background-position: top center, top center;
  background-size: 100% auto, 100% auto;
  background-position: 0 0 !important;
  image-rendering: pixelated;

}
*/
:root {
	--navbox-background-color: #FFF;
	--navbox-border-color: #CCC;
	--navbox-header-color: #CCC;
	--navbox-secondary-header-color: #DDD;
	--navbox-tertiary-header-color: #EEE;
	--navbox-section-color: #EEE;
	
	--wiki-background-top: url('/resources/assets/background_top.png');
	--wiki-background-bottom: url('/resources/assets/background_bottom.png');
	--top-background-size: 1536px;
	--bottom-background-size: 1536px;
	--content-border-top-color: #B4BEC3;
	--content-border-left-color: #171717;
	--content-background-color: #E6EFF4;
	--content-text-color: #000000;
	--navigation-overlay: url('https://static.miraheze.org/btawiki/1/17/Navigation_overlay_%28default%29.png');
	--navigation-overlay-size: 462px;
	--navbar-background: url('https://static.miraheze.org/btawiki/c/cf/Wiki_navbar_bg.png');
	--navbar-border: url('https://static.miraheze.org/btawiki/8/89/Wiki_navbar_border.png');
	--navbar-button-border: url('https://static.wikitide.net/btawiki/8/83/Wiki_navbar_button_border.png');
	--navbar-background-size: 32px;
	
	--table-header-background: #eaecf0;
	--table-border: #a2a9b1;
	--table-background-color: #f8f9fa;
	--code-background-color: #f8f9fa;
	--code-border: #eaecf0;
	--default-text-color: #000000;
	--infobox-out-background: #c6c6c6;
}

@font-face {
	font-family: 'Minecraft';
	src: url('https://static.miraheze.org/btawiki/1/1a/Minecraft.woff') format('woff');

	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Minecraft';
	src: url('https://static.miraheze.org/btawiki/7/7f/Minecraft-Bold.woff') format('woff');

	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

.vector-menu-portal .vector-menu-content li a:visited {
	color: #69bad9;
}

.vector-menu-portal .vector-menu-content li a {
	color: #aa69cf;
}

/* Sidebar */
#mw-panel.collapsible-nav .portal .vector-menu-heading {
	padding: 0.75em 0.75em 0.8125em 0.75em;
}

#mw-panel.collapsible-nav .portal .vector-menu-content {
	margin-left: 0.5em;
}

#mw-panel.collapsible-nav .portal .vector-menu-heading a, #mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading a {
	color: #ffffff;
	text-decoration: none;
}

#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading:hover {
	text-decoration: none;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
	color: #aaaaaa;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
	color: #ffffff;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
	color: #ffffff;
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
	background-image: none;
}

.skin-vector-legacy #mw-page-base {
	background: none;
	height: 131px;
}

.skin-vector-legacy #left-navigation, .skin-vector-legacy #right-navigation {
	margin-top: 96px;
	position: relative;
}

.skin-vector-legacy #left-navigation li {
	margin-right: 12px;
}

.skin-vector-legacy #right-navigation li, .skin-vector-legacy #p-cactions {
	margin-left: 12px;
}

.skin-vector-legacy #right-navigation .vector-menu-dropdown li {
	margin-left: 0;
}

.skin-vector-legacy #p-cactions {
	margin-right: 12px;
}

body {
	background-image: var(--wiki-background-top), var(--wiki-background-bottom);
	background-repeat: repeat-x, repeat;
	background-size: var(--top-background-size), var(--bottom-background-size) !important;
	background-position: 0 0 !important;
	image-rendering: pixelated;
}

.skin-vector-legacy .mw-body {
    position: relative;
    background-color: var(--content-background-color);
    border: none;
    border-top: 6px solid var(--content-border-top-color);
    border-left: 6px solid var(--content-border-left-color);
}

.vector-menu-tabs-legacy li, .skin-vector-legacy #p-cactions-label {
	background-image: var(--navigation-overlay),linear-gradient(var(--content-border-top-color), var(--content-border-top-color)) !important;
	background-position: top right, left 6px top 6px !important;
	background-repeat: repeat-x !important;
	background-size: var(--navigation-overlay-size) !important;
}

.vector-menu-tabs-legacy .selected {
	background: none;
	background-image: var(--navigation-overlay),linear-gradient(var(--content-background-color), var(--content-background-color)) !important;
}

.vector-menu-tabs-legacy li, .vector-menu-tabs-legacy .selected, #p-cactions-label {
	background-repeat: repeat-x;
	background-position: top;
	image-rendering: pixelated;
	position: relative;
	font-weight: bold;
}

.vector-menu-tabs-legacy li, .vector-menu-tabs-legacy .selected, .vector-menu-tabs-legacy, .skin-vector-legacy #p-cactions-label {
	background-size: 32px;
	position: relative;
}

.vector-menu-tabs-legacy li::before, .skin-vector-legacy #p-cactions-label::before {
	content: '';
    position: absolute;
    display: block;
    width: 6px;
    height: 40px;
    left: -6px;
    top: 0;
    background-image: var(--navigation-overlay);
}

.skin-vector-legacy #left-navigation nav.vector-menu-tabs li:first-child::before {
	background-position: 0 -41px;
    height: 92px;
    background-repeat: no-repeat;
}

.vector-menu-tabs-legacy {
	background: none;
	background-size: 32px;
    image-rendering: pixelated;
}

.vector-menu-tabs-legacy {
	padding-left: 6px;
}

.vector-menu-tabs-legacy a, .skin-vector-legacy .vector-menu-heading {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", sans-serif;
}

.vector-menu-tabs-legacy li a {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading {
	background: none;
}

.skin-vector-legacy .vector-menu-portal .vector-menu-content, .skin-vector-legacy #p-personal .vector-menu-content-list, #mw-panel.collapsible-nav .portal .vector-menu-content, #mw-panel.collapsible-nav .portal .vector-menu-heading {
	background-image: var(--navbar-background) !important;
	background-repeat: repeat;
	background-size: var(--navbar-background-size);
	border-image-slice: 3 3 3 3;
    border-image-width: 6px 6px 6px 6px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
	border-image-source: var(--navbar-border);
    border-style: solid;
}

#mw-panel.collapsible-nav .portal .vector-menu-heading {
	border-image-slice: 5 3 5 3;
    border-image-width: 10px 6px 10px 6px;
    padding-bottom: 1.25em;
	border-image-source: var(--navbar-button-border);
}

#mw-panel.collapsible-nav .portal .vector-menu-heading:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--navbar-background) !important;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content-list {
    padding: 0.5em 0.625em 0.375em 0.5em !important;
}

#mw-panel.collapsible-nav .portal .vector-menu-content ul li {
	padding: 0.35em 0;
}

.skin-vector-legacy #p-personal .vector-menu-content-list {
	padding: 1px 0.5em 6px 0;
}

.skin-vector-legacy #mw-panel *:not(h3) > a, .skin-vector-legacy #footer a, .skin-vector-legacy .mw-notification a, .skin-vector-legacy #p-personal a {
    color: #FFFFFF;
}

.skin-vector-legacy #mw-panel *:not(h3) > a:not(:hover):not(:focus), .skin-vector-legacy #footer a:not(:hover):not(:focus), .skin-vector-legacy .mw-notification a:not(:hover):not(:focus) {
	color: #D7D7D7;
}

.vector-user-menu-legacy #pt-userpage a, .vector-user-menu-legacy #pt-userpage a span, .oo-ui-icon-bell, .mw-ui-icon-bell::before, .oo-ui-icon-tray, .mw-ui-icon-tray::before {
	filter: invert(1);
}

.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge, .skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge {
	width: 14px;
	height: 14px;
	background-size: 14px;
	top: 0;
}

.mw-message-box, .mw-body, h1, h2, h3, h4, h5, h6, .mw-ui-input, .search-types .current a {
	color: var(--content-text-color);
}