MediaWiki:Vector.css
Jump to navigation
Jump to search
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */
html {
--head-height:80px;
--vector-tab-height: 30px;
--vector-tab-border-width: 1px;
--vector-tab-top-spacing: 50px;
--sidebar-width: 10em;
--sidebar-spacing: 1em;
--content-right-margin: 0px;
--content-padding: 1.5em;
--logo-height: 160px;
--logo-top-spacing: 1em;
--wiki-gg-header-height:35px;
}
/************************************
* Body, head, and general framework *
*************************************/
/* Head */
#mw-head-base {
display:none;
}
#mw-head {
height:var(--head-height);
width:calc(100% - var(--sidebar-width) - var(--sidebar-spacing) - var(--content-right-margin));
}
#mw-head {
margin-top:var(--wiki-gg-header-height);
}
/* let ul default to text that respects color */
ul {
list-style-image: none;
}
/* override default wiki.gg table overflowing in favor of media queries (see bottom of sheet) */
table {
display: table;
white-space: initial;
}
/************************
* End general framework *
*************************/
/*******
* Logo - from https://animalcrossingpocketcamp.wiki.gg/wiki/MediaWiki:Vector.css *
********/
/* [[File:Site-logo.png]] */
#p-logo {
margin-top:var(--logo-top-spacing);
}
.mw-wiki-logo {
background-size: contain;
}
#mw-panel {
z-index: 1;
}
/***********
* End logo *
************/
/**************
* Vector tabs - from https://animalcrossingpocketcamp.wiki.gg/wiki/MediaWiki:Vector.css*
***************/
#left-navigation,
#right-navigation {
margin-top: var(--vector-tab-top-spacing);
}
#left-navigation,
#right-navigation,
.vector-menu-tabs {
height: var(--vector-tab-height);
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
}
#left-navigation {
margin-left: 0;
}
#right-navigation {
margin-right: calc(var(--content-right-margin) + (var(--content-padding) / 2));
}
.vector-menu-tabs li {
background: none;
}
.vector-menu-tabs li:not(:first-child),
#p-cactions {
padding-left: 5px;
}
.vector-menu-tabs,
.vector-menu-tabs .selected,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-menu-tabs-legacy li {
background: none;
}
.vector-menu-tabs li a,
.vector-menu-tabs li.new a,
.vector-menu-tabs li.new a:visited,
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background: transparent;
color: var(--wiki-navigation-text-color);
border: none;
padding:6px 8px;
height:var(--vector-tab-height);
display: flex;
align-items: center;
box-sizing: border-box;
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
background: var(--wiki-navigation-selected-background-color);
color: var(--wiki-navigation-selected-text-color);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 1px solid var(--wiki-navigation-border-color);
border-bottom: none;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
padding-right: 0.5em;
}
#p-cactions .vector-menu-content span {
padding: 0;
}
.vector-menu-tabs .mw-watchlink.icon a {
padding: calc(var(--vector-tab-height) - (var(--vector-tab-border-width) * 2)) 0 0 0;
color: transparent;
}
div#mw-head #ca-watch.icon a,
div#mw-head #ca-watch.icon a:hover,
div#mw-head #ca-watch.icon a:focus {
background:transparent var(--wiki-watch-icon) no-repeat center center;
}
div#mw-head #ca-unwatch.icon a,
div#mw-head #ca-unwatch.icon a:hover,
div#mw-head #ca-unwatch.icon a:focus {
background:transparent var(--wiki-unwatch-icon) no-repeat center center;
}
.vector-menu-tabs #ca-watch.icon a::before,
.vector-menu-tabs #ca-unwatch.icon a::before {
display:none;
}
#p-cactions {
width:21px;
}
div#mw-head div#p-cactions .vector-menu-heading {
display: none;
}
div.vectorMenu {
background: transparent var(--wiki-more-icon) no-repeat left center;
height: var(--vector-tab-height);
line-height: 27px;
margin: 0;
padding: 0 3px;
}
.vector-menu-dropdown .vector-menu-content {
border: none;
top: calc(var(--vector-tab-height) - 1px);
left: auto;
right: 0;
padding: 1em;
}
div.vectorMenu .mw-list-item a,
.vector-menu-dropdown .mw-list-item.selected a,
.vector-menu-dropdown .mw-list-item.selected a:visited {
color: var(--wiki-navigation-text-color);
}
.vector-menu-dropdown .vector-menu-heading::after {
filter: invert(100);
}
/******************
* End vector tabs *
*******************/
/***************
* Left Sidebar - from https://animalcrossingpocketcamp.wiki.gg/wiki/MediaWiki:Vector.css *
****************/
#mw-panel .vector-menu-portal {
font-family: 'Roboto', sans-serif;
margin: 0 0.2em 10px 0.2em;
padding: 0;
text-align: center;
font-size: 1.875em /*The default text size in browsers is 16px.*/
border-radius: 20px;
border-bottom: 4px solid var(--wiki-content-border-color);
}
#mw-panel .vector-menu-content {
margin: 0;
padding: 0 5px;
}
#mw-panel .portal .mw-list-item {
padding:2px 0;
}
.vector-menu-portal .vector-menu-content .mw-list-item a,
.vector-menu-portal .vector-menu-content .mw-list-item a:visited {
color: var(--wiki-sidebar-link-color);
}
.vector-menu-portal .vector-menu-heading {
margin: 0;
font-size: 1em;
border-top-left-radius: 19px;
border-top-right-radius: 19px;
cursor: pointer;
user-select: none;
}
#mw-panel.collapsible-nav .portal .vector-menu-content,
#mw-panel.collapsible-nav .portal.persistent .vector-menu-content {
margin: 0;
padding-bottom: .3em;
}
#mw-panel.collapsible-nav .portal .vector-menu-heading {
background-position: right center;
padding: .25em 0;
}
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading {
background-position: right center;
border-radius: 20px;
}
#mw-panel.collapsible-nav .portal .vector-menu-heading a,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading a,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading:hover {
color: var(--wiki-sidebar-header-color);
text-decoration: none;
}
/*******************
* End left sidebar *
********************/
/********************
* Table of contents - from https://animalcrossingpocketcamp.wiki.gg/wiki/MediaWiki:Vector.css *
*********************/
#toc,
.toc,
.toccolours,
.mw-warning {
background: transparent;
border: 2px solid var(--wiki-content-border-color);
border-bottom-width:6px;
border-radius:20px;
}
.toctogglelabel {
color: var(--wiki-content-link-color);
}
.tocnumber {
color: var(--wiki-content-text-color);
}
/************************
* End table of contents *
*************************/
/****************
* Tabber styles - from https://animalcrossingpocketcamp.wiki.gg/wiki/MediaWiki:Vector.css *
*****************/
.tabber__tab,
.tabber__tab:visited {
color: var(--wiki-content-link-color);
}
.tabber__tab:hover,
.tabber__tab:hover:visited,
.tabber__tab[aria-selected="true"],
.tabber__tab[aria-selected="true"]:visited {
color: var(--wiki-content-link-color--hover);
}
.tabber__indicator {
background: var(--wiki-content-link-color);
}
.tabber__header__prev::after,
.tabber__header__next::after {
filter: var(--wiki-icon-general-filter);
}
/********************
* End Tabber styles *
*********************/
/******************
* Infobox styling *
******************/
/* pi-background, pi-secondary-background, in light-theme and dark-theme styling above. - wingu.gamez*/
.portable-infobox {
font-size: 0.88em;
border: 3px solid var(--wiki-content-border-color);
border-radius: 10px;
outline: 5px solid #4f391e;
}
.portable-infobox, .portable-infobox h1, .portable-infobox h2, .portable-infobox h3, .portable-infobox h4, .portable-infobox h5, .portable-infobox h6 {
font-family: Open Sans, sans-serif;
color: #694D5D;
}
.portable-infobox .pi-title,
.portable-infobox .pi-data-label {
font-weight: 600;
}
/**********************
* End Infobox styling *
**********************/
/*JS filter button styling*/
.filter-toggle-not-selected{
color: #333;
background-color: #fff;
border-color: #ccc;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.filter-toggle-selected{
color: #333;
background-color: var(--wiki-navigation-background-color);
border-color: #ccc;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
/*end JS filter button styling*/
.copy-text-button {
border: 2px solid black;
border-radius: 5px;
background-color: var(--wiki-navigation-background-color);
color: black;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
div#mw-page-base.noprint {
background-color: transparent;
background-image: transparent;
}