MediaWiki:Vector.css

From IdleOn MMO Wiki

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.
/* ------ VECTOR ------ */

.skin-vector #footer-info li {
    color: var(--contrast-1);
}

.vector-menu-portal .vector-menu-heading {
    color: var(--contrast-1);
    border-color: var(--contrast-3);
}

#mw-panel .vector-menu-heading {
    font: normal .975rem 'Idleon';
}

.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited { 
    color: var(--link);
}

.vector-menu-portal .vector-menu-content li a:hover,
.vector-menu-portal .vector-menu-content li a:visited:hover,
.vector-menu-portal .vector-menu-content li a:active,
.vector-menu-portal .vector-menu-content li a:visited:active { 
    color: var(--link-hover);
}

.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs .mw-list-item:visited {
    color: var(--link);
}

.vector-menu-tabs .mw-list-item a:focus, 
.vector-menu-tabs .mw-list-item a:hover,
.vector-menu-tabs .mw-list-item a:active {
    color: var(--link-hover);
}

.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
    color: var(--contrast-1);
}

.skin-vector h1,
.skin-vector h2 {
    border-color: var(--contrast-3);
}

.catlinks {
   background: var(--base-1);
    border-color: var(--contrast-3);
    border-radius: 2px;
}

ul {
    list-style-image: unset;
}

/* --- VECTOR LEGACY --- */

html {
    color: var(--contrast-1);
    background: var(--page-background);
}

.skin-vector-legacy {
    color: var(--contrast-1);
    background: transparent; 
}

.skin-vector-legacy #mw-page-base{
    color: var(--contrast-1);
    background: transparent;
}

.skin-vector-legacy #content.mw-body, 
.skin-vector-legacy .parsoid-body {
    color: var(--contrast-1);
    background: var(--base-1);
    border-color: var(--contrast-3);
}

.skin-vector-legacy #mw-panel {
    background-color: var(--sidebar-base);
    border: 1px solid var(--contrast-3);
    border-width: 0 1px 1px 0;
}

.skin-vector-legacy .vector-menu-portal .vector-menu-heading {
    background-image: linear-gradient(to right, var(--accent-1) 66%, transparent 100%);
}

/* VECTOR LEGACY NAV */

.vector-menu-tabs-legacy, 
.vector-menu-tabs-legacy a, 
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom,transparent 0,var(--contrast-3) 100%);
}

.vector-menu-tabs-legacy li,
.skin-vector-legacy .vector-menu-dropdown {
    background-image: linear-gradient(to top,var(--contrast-3) 0,var(--base-0) 1px,var(--base-1) 100%);
}

.vector-menu-tabs-legacy .selected{
    background: var(--base-1);
}

#mw-head .vector-menu-dropdown .vector-menu-heading {
    color: var(--contrast-1);
}
#mw-head .vector-menu-dropdown .vector-menu-heading:after {
    filter: var(--filter);
}

.mw-wiki-logo {
    background-size: cover;
}

.vector-menu-dropdown .vector-menu-heading:after, .mw-interlanguage-selector:after{
    filter: var(--filter);
}

/* --- VECTOR 2022 --- */

.skin-vector-2022 {
	height: unset;
}

.skin-vector-2022, .skin-vector-2022 .mw-page-container { 
    background: var(--base-1); 
    color: var(--contrast-1);
}

.skin-vector-2022 .mw-sidebar { 
    background: var(--base-1);
    color: var(--contrast-1);
}

.skin-vector-2022 .mw-article-toolbar-container {
    border-color: var(--contrast-3);
    color: var(--contrast-1);
}

.skin-vector-2022 #content.mw-body {
    border-color: transparent;
}

.skin-vector-2022 .mw-footer{
    border-color: var(--contrast-3);
}

.skin-vector-2022 .mw-ui-icon:before,
.skin-vector-2022 .mw-ui-icon:after {
    filter: var(--filter);
}

.vector-menu-dropdown .vector-menu-content{
    background: var(--base-1);
    border-color: var(--contrast-3);
}

.vector-sticky-header {
    background: var(--base-1);
    border-color: var(--contrast-3);
}

.vector-sticky-header-context-bar {
    border-color: var(--contrast-3);
}

.vector-sticky-header-context-bar-primary {
    font-family: 'Idleon';
}

@media screen and (min-width: 1000px) {
    .client-js.vector-sticky-header-enabled .stickyHeader.jquery-tablesorter th.headerSort, 
    .client-js.vector-sticky-header-enabled .stickyHeader th{
        top: 3.125rem;
    }
}

#pt-userpage-2 a,
.vector-user-menu-logout a, .vector-user-menu-create-account a, .vector-user-menu-login a, .vector-menu-dropdown .mw-list-item a,
#pt-userpage-2 a:visited,
.vector-user-menu-logout a:visited, .vector-user-menu-create-account a:visited, .vector-user-menu-login a:visited, .vector-menu-dropdown .mw-list-item a:visited{
    color: var(--link);
}

#pt-userpage-2 a:hover,
#pt-userpage-2 a:active{
    color: var(--link-hover);
}

.vector-user-menu-logout {
    border-color: var(--contrast-3);
}

.skin-vector-2022 #siteNotice #localNotice {
    margin: 0;
}

/* VECTOR 2022 SEARCH */

.skin-vector-2022 #simpleSearch #searchButton, 
.skin-vector-2022 #simpleSearch #mw-searchButton {
    background-color: transparent;
    border: none;
    height:32px;
}

.cdx-search-input--has-end-button,
.cdx-text-input__input,
.cdx-button,
.cdx-button:enabled,
.cdx-button--framed,
.cdx-text-input__input:enabled, 
.cdx-button--framed:enabled {
    background: var(--base-2); 
    border-color: var(--contrast-3);
    color: var(--contrast-1);
}

.cdx-text-input__input:enabled:hover{
    border-color: var(--contrast-2);
}

.cdx-text-input__input:enabled~.cdx-text-input__icon,
.cdx-text-input__input:enabled:focus~.cdx-text-input__icon,
.cdx-text-input__input:enabled.cdx-text-input__input--has-value~.cdx-text-input__icon{
    color: var(--contrast-1);
}

.cdx-button--framed:enabled:hover {
    background: var(--base-2);
    border-color: var(--contrast-2);
    color: var(--contrast-1);
}

.cdx-menu {
    background: var(--base-2); 
    border-color: var(--contrast-3);
    color: var(--contrast-1);
}

.cdx-menu-item--enabled, 
.cdx-menu-item--enabled .cdx-menu-item__content {
    color: var(--contrast-1);
}

.cdx-menu-item--enabled:hover, 
.cdx-menu-item--enabled.cdx-menu-item--highlighted {
    background: var(--highlight-progressive);
}

.cdx-menu-item--enabled.cdx-menu-item--active, 
.cdx-menu-item--enabled.cdx-menu-item--active:hover {
	background: var(--base-1);
}

.cdx-thumbnail__placeholder, 
.cdx-thumbnail__image {
    border-color: var(--contrast-2);
    background-color: var(--base-1);
}

.cdx-typeahead-search__search-footer{
    border-color: var(--contrast-3);
}

.cdx-typeahead-search__menu-message, 
.cdx-typeahead-search__search-footer {
    color: var(--contrast-1);
}

.cdx-typeahead-search__search-footer__icon{
    color: var(--contrast-1);
}

.cdx-menu-item--enabled:hover .cdx-typeahead-search__search-footer__icon, 
.cdx-menu-item--enabled.cdx-menu-item--highlighted .cdx-typeahead-search__search-footer__icon {
    color: var(--link-hover);
}

/* VECTOR 2022 TOC */

.sidebar-toc {
    background: var(--base-1);
    color: var(--contrast-1);
}
.sidebar-toc .sidebar-toc-title {
    color: var(--contrast-1);
}
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link,
.vector-toc-collapse-button, 
.vector-toc-uncollapse-button {
    color: var(--link);
}
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link:hover,
.vector-toc-collapse-button:hover, 
.vector-toc-uncollapse-button:hover {
    color: var(--link-hover);
}
.vector-toc-collapse-button:before, 
.vector-toc-uncollapse-button:before,
.vector-toc-collapse-button:after, 
.vector-toc-uncollapse-button:after {
    color: var(--contrast-2);
}
.sidebar-toc .sidebar-toc-link {
    color: var(--link);
}
.sidebar-toc .sidebar-toc-link:hover {
    color: var(--link-hover);
}

#vector-toc-collapsed-button {
    background: var(--base-1);
}
#vector-toc-collapsed-button:hover, 
#vector-toc-collapsed-button:active {
    background: var(--base-2);
}

@media screen and (min-width: 1000px) {
    .vector-toc-not-collapsed .sidebar-toc:after {
        background: linear-gradient(transparent,var(--base-1));
    }
    @supports (display:grid) {
        .client-js .vector-toc-collapsed .mw-table-of-contents-container .sidebar-toc {
            border-color: var(--contrast-3);
        }
    }
}
@media screen and (max-width: 999px) {
    .mw-table-of-contents-container .sidebar-toc {
        border-color: var(--contrast-3);
    }
}