User:Scottyoak2/vector-2022.css
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
![]() | The accompanying .js page for this skin can be added at User:Scottyoak2/vector-2022.js. |
/* Shorten the "edit source" to just "source" */
.mw-editsection > a:not(.mw-editsection-visualeditor) {
font-size: 0px;
}
.mw-editsection > a:not(.mw-editsection-visualeditor)::after {
content: 'source';
font-size: 0.8rem;
visibility: visible;
color: #3366cc;
width: 10px !important;
}
/* Smaller margin for RecentChanges pages */
.client-js .mw-changeslist table.mw-enhanced-rc {
margin-left: 15px
}
/* Hide the edit-icon for Wikidata sidebar link */
.wb-langlinks-link .wbc-editpage:before {
display: none
}
/* smaller ULS icon on multilingual wikis */
.uls-trigger.mw-ui-button.mw-ui-quiet > span {
font-size: 0.6em;
}
/* Hide the Vector-2022 "switch back" link in sidebar */
.vector-main-menu-action-opt-out {
display: none;
}
/* Hide Vector-2022 "languages list moved" message in sidebar */
.vector-language-sidebar-alert {
display: none;
}
/* ToC tweaks */
/* Change "Beginning" to an Up-arrow */
#toc-mw-content-text div {
visibility: hidden;
}
#toc-mw-content-text div::after {
visibility: visible;
content: "🠕";
display: block;
position: absolute;
top: 2px;
}
/* Auto-expand sections, and hide the H2-arrows */
.client-js .sidebar-toc .sidebar-toc-level-1 .sidebar-toc-list-item {
display: block;
}
.sidebar-toc-toggle {
visibility: hidden;
}
.sidebar-toc {
padding-left: 5px !important;
}
/* Bold the H1s */
.sidebar-toc-level-1 {
font-weight: 600;
}
/* Don't bold the H2/3/4 or change the widths */
.sidebar-toc-level-2 {
font-weight: normal;
}
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
font-weight: unset;
width: unset;
}
.sidebar-toc .sidebar-toc-level-1-active:not(.sidebar-toc-list-item-expanded) > .sidebar-toc-link .sidebar-toc-text {
width: unset;
}
/* Smaller "Contents" */
.sidebar-toc-title {
font-size: 12px !important;
}
/* Move button for ToC-collapsed down below the sticky-header, and add border */
.client-js .vector-below-page-title .vector-page-titlebar-toc {
top: 55px;
border: lightgray 1px solid;
}
/* Hide the word "Contents" in that case */
@media screen and (max-width: 999px) {
.sidebar-toc .vector-toc-pinnable-header {
display: none;
}
}
/* Fix the jumping TOC upon first appearance when scrolling */
.client-js.vector-sticky-header-enabled .vector-toc-pinned #vector-toc-pinned-container {
top: 70px !important;
}
.vector-toc-pinned #mw-sidebar-checkbox:not(:checked) ~ .mw-table-of-contents-container #vector-toc-pinned-container {
margin-top: 0;
}
.vector-toc-pinned #vector-toc-pinned-container {
padding-top: 0;
}
/* CUSTOM PAGE TOOLS */
.mw-header {
position: fixed;
background: white;
width: 100%;
top: 0;
left: 0;
padding: 0;
}
/* Nudge content down to account for no-default gap */
@media screen and (max-width: 999px) {
.mw-content-container {
padding-top: 55px;
}
}
/* move the new page-tool-sticky-header down, and limit size */
@media (min-width: 300px) {
#vector-sticky-header {
max-width: min-content;
top: 50px !important;
left: auto;
padding: 0 10px 0 0 !important;
height: 40px;
transition: none;
transform: translateY(0);
z-index: 1;
}
}
/* reduce padding for the icons*/
.sticky-header-icon {
padding: 8px;
border: none;
}
/* remove extraneous buttons */
#p-lang-btn-sticky-header,
#p-personal-sticky-header,
#vector-sticky-header .vector-sticky-header-start {
display: none;
}
/* Fix for VE edit toolbar */
body:not(.skin-contenttranslation) .ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
top: 50px;
}
/* Fix for anchor navi */
html {
scroll-padding-top: 65px !important;
}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
top: 100px;
}
/* Still show it in smaller windows */
@media screen and (min-width: 450px) {
.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header {
opacity:1;
top:50px;
height: 55px;
display: flex;
}
}
/* Properly hide the sub-menu at page-top, to prevent misclicks */
.vector-sticky-header:not(.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header) {
display: none !important;
}
/* Gap above the log-out button */
#pt-logout {
margin-top: 20px
}
/* Fix font-size oddities with User-tools's "translations" and "Uploaded media" */
.mw-ui-icon {
font-size: unset;
}
/* Personal-tools, indent the sub-items */
#pt-betafeatures span:not(.mw-ui-icon-labFlask):before,
#pt-darkmode span:not(.mw-ui-icon-vector-gadget-pt-darkmode):before,
#cx-language span:not(.mw-ui-icon-vector-gadget-cx-language):before,
#cx-imageGallery span:not(.mw-ui-icon-vector-gadget-cx-imageGallery):before {
content: "↳ ";
color: black;
}
/* Fix for banners in small windows */
@media screen and (max-width: 999px) {
#siteNotice {
top: 60px;
}
}
/* Remove header whitespace */
.mw-header {
margin: 0 !important;
padding-top: 0;
height: 55px !important;
}
/* Nudge sidebar-button up into corner */
#mw-sidebar-button {
margin-left: -1px;
margin-top: -13px;
border: none;
}
/* ToC tweaks*/
.sidebar-toc {
padding-left: 17px;
margin: 0 !important;
max-height: 85vh;
}
.vector-toc-enabled .mw-sidebar,
.vector-toc-enabled .sidebar-toc {
width: 14em !important;
}
.sidebar-toc .sidebar-toc-text {
padding-right: 0;
}
.sidebar-toc-contents {
width: 12.5em;
}
.mw-sidebar,
.sidebar-toc,
.sidebar-toc::after {
width: 220px !important;
margin-left: 0.75em;
}
/* Sidebar tweaks */
#mw-panel {
padding: 0;
width: 189px !important;
margin: 0;
}
@media screen and (max-width: 999px) {
#mw-panel {
width: 150px !important;
}
}
@media screen and (max-width: 999px) {
#mw-sidebar-checkbox:checked ~ .mw-page-container-inner {
border: 1px lightgray solid
}
}
.vector-menu-portal,
.vector-menu-portal .vector-menu-content {
margin-left: 2px
}
/* Remove whitespace at edges */
.mw-page-container {
padding-left: 15px;
padding-right: 15px;
}
.mw-portlet .mw-portlet-navigation .vector-menu .vector-menu-portal .portal {
margin-left: 5px;
}
.vector-sticky-header {
padding: 0;
}
/* Reduce gap above Page-title */
.vector-layout-grid .mw-page-container-inner,
.mw-page-container-inner {
row-gap: 0;
}
/* Reduce the grid gutter, and header height */
@media screen and ( min-width: 1000px ) {
.mw-page-container-inner {
grid-template: 55px min-content min-content 1fr min-content / 220px minmax(0, 1fr);
grid-template-areas: 'header header'
'siteNotice siteNotice'
'mainMenu pageContent'
'toc pageContent'
'footer footer';
}
}
#siteNotice {
margin: 5px
}
/* Reduce page-toolbar height */
.vector-menu-tabs .mw-list-item.vector-tab-noicon > a,
.mw-article-toolbar-container .vector-menu-dropdown.vector-tab-noicon > a,
.vector-menu-tabs .mw-list-item > a:not(.mw-ui-icon),
.mw-article-toolbar-container .vector-menu-dropdown > a:not(.mw-ui-icon),
.vector-menu-tabs .mw-list-item .vector-menu-heading,
.mw-article-toolbar-container .vector-menu-dropdown .vector-menu-heading,
.vector-page-toolbar-container .vector-menu-dropdown > .vector-menu-heading {
padding: 5px 0 5px 0;
}
.vector-page-toolbar {
max-height: 30px;
}
.mw-article-toolbar-container {
border-bottom: none;
box-shadow: none
}
.skin-vector-2022 #coordinates {
top: -0.9em;
}
.vector-menu-tabs .mw-list-item .mw-ui-icon {
margin: 0;
}
/* Nudge the Content and ToC inwards, if site-sidebar is uncollapsed */
/* Content nudge */
@media screen and (max-width: 999px) and (min-width:550px) {
#mw-sidebar-checkbox:checked ~ .mw-content-container {
padding-left: 155px
}
}
/* ToC-button nudge */
@media screen and (max-width: 999px) {
.vector-below-page-title #vector-toc-collapsed-button {
left: 150px !important;
}
}
/* ToC nudge */
@media screen and (max-width: 999px) and (min-width:550px) {
#mw-sidebar-checkbox:not(:checked) ~ .mw-content-container,
#mw-panel-toc {
left: 150px;
}
}
/* fix toc in >1000px when collapsed*/
.vector-below-page-title #vector-toc-collapsed-button {
position: fixed
}
@media screen and (min-width: 1000px) {
#vector-toc-collapsed-checkbox:checked ~ .mw-table-of-contents-container .sidebar-toc {
left: 4em;
top:55px !important;
position: fixed;
}
}
/* Force Main Menu to show when scrolled, if TOC is only at pop-out widths */
@media screen and (max-width: 999px) {
#mw-sidebar-checkbox:checked ~ .vector-sidebar-container, .vector-main-menu-container {
top: 54px;
left: 1px;
position: fixed;
z-index: 4;
border: 1px lightgray solid;
max-height: 90%;
overflow: auto !important;
overflow-x: hidden !important;
}
}
/* Force search-bar to show in site-header at smaller sizes */
.vector-search-box-collapses > div {
display: block;
}
.vector-search-box > div {
max-width: none;
}
.search-toggle {
display: none;
}
.mw-logo {
min-width: 0;
margin-right: 10px;
}
.cdx-typeahead-search .cdx-typeahead-search--show-thumbnail .cdx-typeahead-search--auto-expand-width {
padding-left: 20px;
margin-left: 20px;
}
/* Use logo instead of wordmark at small sizes */
@media (min-width: 300px) {
.mw-logo-icon {
display: block;
}
}
.mw-logo-container {
display: none;
}
@media (min-width: 999px) {
.mw-logo-container {
display: block;
}
}
/* Fix search-results flyout at small widths */
#cdx-typeahead-search-menu-0 {
min-width: 250px;
}
/* left sidebar content width (was something like 224px) */
#vector-toc-pinned-container .sidebar-toc:after, #vector-toc-pinned-container .sidebar-toc, #vector-toc-pinned-container .vector-toc:after, #vector-toc-pinned-container .vector-toc, .vector-feature-page-tools-disabled .vector-main-menu, .vector-main-menu-container .vector-main-menu {
width: 200px;
}
/* reduce left and right white space */
/* 200px (was 284) moves the left edge of the content nearer to the right edge of left panel */
@media screen and (min-width: 1200px) {
.mw-page-container { padding-left: 1em; padding-right: 1em; }
.mw-page-container-inner { grid-template-columns: 200px minmax(0,1fr); }
}
@media screen and (min-width: 1000px) {
.mw-page-container { padding-left: 1em; padding-right: 1em; }
.mw-page-container-inner { grid-template-columns: 200px minmax(0,1fr); }
}
/* maximum width of content (was 60em) */
.vector-feature-page-tools-disabled .mw-content-container, .vector-feature-page-tools-disabled .mw-table-of-contents-container {
max-width: 80em;
}
/* Fix dropdown width of Page Menu, More Menu, and Twinkle Menu /*
/* 19 Jan 2023 by Scottyoak2 /*
@media screen
.vector-menu-dropdown .mw-list-item {
min-width: max-content;
}
/* Fix spacing in message boxes of deleted pages /*
/* 30 June 2024 by Scottyoak2 /*
@media screen
div.mw-content-ltr ul.mw-logevent-loglines li.mw-logline-delete {
font-size: 100%; !important;
margin-bottom: 1em; !important;
}