MediaWiki:Vector.css

/* CSS placed here will affect users of the Vector skin */

/* css vars can't be passed into embedded svgs, so list bullets must be defined on the backend rather than here */

/* links */ .vector-menu-portal .vector-menu-content li a, .vector-menu-portal .vector-menu-content li a:link, .vector-menu-tabs-legacy a, .vector-menu-tabs-legacy a:link, .vector-menu-dropdown .mw-list-item a, .vector-menu-dropdown .mw-list-item a:link { color:var(--rgb-link-nml-unv); } .vector-menu-portal .vector-menu-content li a:hover, .vector-menu-tabs-legacy a:hover, .vector-menu-dropdown .mw-list-item a:hover { color:var(--rgb-link-nml-hov); } .vector-menu-portal .vector-menu-content li a:visited, .vector-menu-tabs-legacy a:visited, .vector-menu-dropdown .mw-list-item a:visited { color:var(--rgb-link-nml-vst); } .vector-menu-portal .vector-menu-content li a:active, .vector-menu-tabs-legacy a:active, .vector-menu-dropdown .mw-list-item a:active { color:var(--rgb-link-nml-act); } .vector-menu-portal .vector-menu-content .new li a, .vector-menu-portal .vector-menu-content .new li a:link, .vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:link, .vector-menu-dropdown .mw-list-item .new a, .vector-menu-dropdown .mw-list-item .new a:link { color:var(--rgb-link-new-unv); } .vector-menu-portal .vector-menu-content .new li a:hover, .vector-menu-tabs-legacy .new a:hover, .vector-menu-dropdown .mw-list-item .new a:hover { color:var(--rgb-link-new-hov); } .vector-menu-portal .vector-menu-content .new li a:visited, .vector-menu-tabs-legacy .new a:visited, .vector-menu-dropdown .mw-list-item .new a:visited { color:var(--rgb-link-new-vst); } .vector-menu-portal .vector-menu-content .new li a:active, .vector-menu-tabs-legacy .new a:active, .vector-menu-dropdown .mw-list-item .new a:active { color:var(--rgb-link-new-act); }

/* the gradient at the top of the page (the original isn't transparent) */ background:linear-gradient(to bottom, rgba(var(--raw-vector-pagetop),1.0) 0%, rgba(var(--raw-vector-pagetop),1.0) 50%, rgba(var(--raw-vector-pagetop),0.0) 100%); }
 * 1) mw-page-base {

/* tabs */ /* Vector uses images with fake borders: remove them */ .vector-menu-tabs-legacy, .vector-menu-tabs-legacy li, .vector-menu-tabs-legacy span { background:none; } /* unselected/default tabs */ /* background can't go all the way down because it'll cover the page border */ .vector-menu-tabs-legacy ul li { background:linear-gradient(to bottom, rgba(var(--raw-root-bg),0.0) 0%, rgba(var(--raw-root-bg),1.0) 50%, rgba(var(--raw-root-bg),1.0) 75%, rgba(var(--raw-root-bg),0.0) 100%); border-left:1px solid transparent; border-right:1px solid transparent; border-image:linear-gradient(to bottom, rgba(var(--raw-page-border),0.0) 0%, rgba(var(--raw-page-border),1.0) 50%, rgba(var(--raw-page-border),1.0) 100%); border-image-slice:1.0; margin-left:-1px; } /* selected/hovered tabs */ .vector-menu-tabs-legacy .selected, .vector-menu-tabs-legacy ul li:hover { background:linear-gradient(to bottom, rgba(var(--raw-page-bg),0.0) 0%, rgba(var(--raw-page-bg),1.0) 50%, rgba(var(--raw-page-bg),1.0) 100%); } .vector-menu-tabs-legacy .selected a:link, .vector-menu-tabs-legacy .selected a:visited { color:var(--rgb-text); } /* for some reason there's an uncovered pixel column that reveals this */ .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background:none; } /* "More" menu */ .vector-menu-dropdown { background:linear-gradient(to bottom, rgba(var(--raw-root-bg),0.0) 0%, rgba(var(--raw-root-bg),1.0) 50%, rgba(var(--raw-root-bg),1.0) 75%, rgba(var(--raw-root-bg),0.0) 100%); border-left:1px solid transparent; border-right:1px solid transparent; border-image:linear-gradient(to bottom, rgba(var(--raw-page-border),0.0) 0%, rgba(var(--raw-page-border),1.0) 50%, rgba(var(--raw-page-border),1.0) 100%); border-image-slice:1.0; margin-left:-1px; } .vector-menu-dropdown .vector-menu-heading .vector-menu-heading-label { color:var(--rgb-text); } .vector-menu-dropdown .vector-menu-content { background:rgb(var(--raw-page-bg)); border:1px solid rgb(var(--raw-page-border)); margin-top:-1px; }

/* search */ background:var(--rgb-input-bg); border:1px solid var(--rgb-page-border); color:var(--rgb-text); } .suggestions-toggle-button { position:absolute;right:24px;top:4px; }
 * 1) searchInput {

/* sidebar */ color:rgb(var(--raw-page-border)); border-bottom:1px solid transparent; border-image:linear-gradient(to right, rgba(var(--raw-page-border),0.0) 0%, rgba(var(--raw-page-border),1.0) 33%, rgba(var(--raw-page-border),1.0) 67%, rgba(var(--raw-page-border),0.0) 100%); border-image-slice:1.0; } /* hide the default fake-fade underline image */ background:none; }
 * 1) mw-panel .portal h3 {
 * 1) mw-panel .portal .body {