User:Quiddity/Vector-2022-condensed.css

/* To use this: See "Usage" section on talkpage */

/* Originally developed at https://github.com/quiddity-wp/wikimedia-style-tweaks/blob/master/new-vector-whitespace.user.css https://github.com/quiddity-wp/wikimedia-style-tweaks/blob/master/quiddity.user.css

/* NOTE: this assumes you are using NEW VECTOR (Desktop Improvements) */

/* 1. Misc Tweaks */ /* Shorten the inline links for "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; }

/* Reduce gap in sidebar lists */ .vector-pinnable-element .mw-list-item a{ padding: 3px 5px !important; }

/* Remove empty space at page-bottom */ .mw-footer-container { padding-bottom: 0 !important; padding-top: 0 !important; }

/* Shorten the inter-languages buttons to just show the number of languages, not the word "languages" -- HACKISH! */ /* Sticky-header button */ max-width: 30px; overflow: hidden; margin-right: 25px; max-height: 20px; } display: none; } /* Page-top button */ max-width: 35px !important; overflow: hidden; height: 25px; } /* Fix min-width */ .vector-feature-zebra-design-disabled .mw-page-container { min-width: unset; } /* Fix watchstar which got misaligned */ margin-top: -5px !important; }
 * 1) p-lang-btn-sticky-header > span:not(.mw-ui-icon){
 * 1) p-lang-btn-sticky-header::after {
 * 1) p-lang-btn .vector-menu-heading-label{
 * 1) ca-unwatch, #ca-watch {

/* Remove whitespace beside Search box */ .mw-logo { min-width: unset !important; } /* Nudge the personal bar inwards */ margin-right: 1em; }
 * 1) vector-user-links-dropdown {

/* Gap above the log-out button */ margin-top: 20px }
 * 1) pt-logout {

/* -- */ /* -- */ /* 2. Custom Sticky Header and Page Tools */ /* Reduces original sticky header to article links (talk, history, watch, edit). Force mw-header to be sticky, plus show the page-tool-sticky-buttons below */ /* Much of this is copied then adapted from https://userstyles.world/style/5789/wikipedia-fixed-top-and-sidebars */ .mw-header { position: fixed !important; background: white; width: 98%; top: 0; left: 0; padding: 0; z-index: 10 !important; padding-left: 16px; } /* Nudge content down to account for no-default gap */ @media screen and (max-width: 999px) { .mw-content-container { padding-top: 55px; } } /* Fix for VE edit toolbar */ body:not(.skin-contenttranslation) .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { top: 50px; } /* Fix for anchor navigation -- BROKEN ? */ html { scroll-padding-top: 90px !important; } .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active { top: 100px; } /* 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; }

/* Fix font-size oddities with User-tools's "translations" and "Uploaded media" */ .mw-ui-icon { font-size: unset; }

/* Personal-tools, indent the sub-items */ content: "↳ "; color: black; } /* Remove header whitespace */ .mw-header { margin: 0 !important; padding-top: 0; height: 54px !important; }
 * 1) pt-betafeatures span:not(.mw-ui-icon-labFlask):before,
 * 2) pt-darkmode span:not(.mw-ui-icon-vector-gadget-pt-darkmode):before,
 * 3) cx-language span:not(.mw-ui-icon-vector-gadget-cx-language):before,
 * 4) cx-imageGallery span:not(.mw-ui-icon-vector-gadget-cx-imageGallery):before {

/* 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: 27px; } .mw-article-toolbar-container { border-bottom: none; box-shadow: none } .skin-vector-2022 #coordinates { top: 0.8em; right: 5em; } .vector-menu-tabs .mw-list-item .mw-ui-icon { margin: 0; }

/* -- */ /* -- */ /* 3. ToC tweaks */

/* Smaller "Contents" and "hide" */ .vector-pinnable-header-label { font-size: 11px !important; } .vector-pinnable-header-toggle-button { font-size: 9px !important; }

/* Change "Beginning" to an Up-arrow */ visibility: hidden; } visibility: visible; content: "🠕"; display: block; position: absolute; top: 6px; } /* Auto-expand sections, and hide the H2-arrows */ .client-js .vector-toc .vector-toc-level-1 .vector-toc-list-item { display: block !important; } .vector-toc-toggle { visibility: hidden; }
 * 1) toc-mw-content-text div {
 * 1) toc-mw-content-text div::after {

/* ?! .vector-toc { padding-left: 15px !important; }

/* Don't bold the H2/3/4 or change the widths */ .vector-toc-level-2, .vector-toc-level-3, .vector-toc-level-4 { font-weight: normal !important; } /* Bold the H1s */ .vector-toc-level-1, .vector-toc-list-item .vector-toc-level-1 .vector-toc-list-item-expanded .vector-toc-level-1-active > .vector-toc-link, .vector-toc-list-item .vector-toc-level-1 .vector-toc-list-item-expanded .vector-toc-level-1-active .vector-toc-list-item-active { font-weight: 600 !important; }

/* Fix the bouncing from bold */ .vector-toc .vector-toc-list-item-active > .vector-toc-link { font-weight: unset !important; width: unset; } .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link .vector-toc-text { width: unset; } .vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text, .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link .vector-toc-text, .vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link .vector-toc-text { width: unset; } .vector-feature-zebra-design-disabled .vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text { width: unset; }

/* Add border --- TEST REMOVAL @media screen and (min-width: 1000px) { .vector-toc { border-right: 1px lightgray solid; border-bottom: 1px lightgray solid; border-top: 1px lightgray solid; } } .vector-toc:after { display: none; } */

/* 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 !important; border: lightgray 1px solid; } /* Hide the word "Contents" in that case */ @media screen and (max-width: 999px) { .vector-toc .vector-toc-pinnable-header { display: none; } } /* Test ToC Button in full-width -- Currently broken .vector-feature-zebra-design-disabled.vector-feature-toc-pinned-disabled body:not(.vector-sticky-header-visible) .vector-page-titlebar .vector-toc-landmark { position: fixed !important; top: 55px; } background: white !important; border: lightgray 1px solid; left: 5px !important; } */
 * 1) vector-sticky-header-toc {

/* Fix the jumping TOC upon first appearance when scrolling */ .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container, .client-js.vector-sticky-header-enabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container, .vector-feature-toc-pinned-enabled #vector-toc-pinned-container { top: 55px !important; } .vector-feature-page-tools-enabled #vector-toc-pinned-container .vector-toc { padding-top: 0 !important; } .vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container, .vector-feature-toc-pinned-enabled #vector-toc-pinned-container, .vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container { margin-top: 0 !important; } margin-top: -13px }
 * 1) mw-panel-toc {

/* ToC other?? */ .vector-toc { padding: 0 5px !important; } .vector-toc-enabled .mw-sidebar, .vector-toc-enabled .sidebar-toc { width: 14em !important; } /* .vector-toc-contents { width: 12.5em; }

.vector-feature-limited-width-disabled .mw-table-of-contents-container, .vector-toc-pinned-container { margin-left: -2.5em !important; }*/ .vector-feature-page-tools-disabled .vector-main-menu { padding: 10px !important; } .vector-feature-page-tools-disabled .vector-main-menu-group { margin: 0; } /* Oversize ToC experiment */ .vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc, .vector-feature-limited-width-disabled .mw-table-of-contents-container { min-width: 242px !important; }

/* Remove the gradient fade */ .vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc::after { background: none; }

/* 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 shrink */ padding: 0.4em }
 * 1) vector-page-titlebar-toc-label {

@media screen and (max-width: 999px) { .vector-feature-zebra-design-disabled.client-js .vector-below-page-title .vector-page-titlebar-toc { left: 1px; } }

/* Reduce ToC height for logged-out view */ height: 89vh !important; max-height: 89vh !important; }
 * 1) vector-toc {

/* TOC-button nudge @media screen and (max-width: 999px) { #vector-page-titlebar-toc { left: 150px !important; } } /* ToC nudge -- OLD @media screen and (max-width: 999px) and (min-width:550px) { #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container, #mw-panel-toc { left: 150px; } } /* Force ToC at smaller width -- BROKEN @media screen and (min-width: 500px) { .vector-toc { display: block !important; position: absolute } }

/* -- */ /* -- */ /* 4. Sidebar tweaks */ 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: 20px; padding-right: 25px; } .mw-portlet .mw-portlet-navigation .vector-menu .vector-menu-portal .portal { margin-left: 5px; } .vector-sticky-header { padding: 0; }
 * 1) mw-panel {

.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled.vector-feature-page-tools-pinned-enabled .vector-page-tools-landmark { top: 70px !important; margin-top: 0; }

width: 170px; } .vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools { width: 170px; } /* -- */  /* -- */ /* 5. General whitespace reductions */
 * 1) vector-page-tools-pinned-container {

/* 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 ) { .vector-feature-zebra-design-disabled .mw-page-container-inner { grid-template: 55px min-content min-content 1fr min-content / 220px minmax(0, 1fr) !important; grid-template-areas: 'header header' 'mainMenu siteNotice' 'mainMenu pageContent' 'toc pageContent' 'footer footer' !important; column-gap: 10px !important; } }

margin: 5px }
 * 1) siteNotice {

/* Fix for banners in small windows */ @media screen and (max-width: 999px) { #siteNotice { top: 60px; } }

/* Remove gap in larger windows, when sidebar and ToC are collapsed -- NO LONGER WORKS @media screen and (min-width:1000px) { .vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container { margin-left: -200px !important; } } @media screen and (min-width:1200px) { .vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container { margin-left: -200px !important; } } */ /* 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 .vector-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: 0; position: fixed; z-index: 4; border-right: 1px lightgray solid; overflow: auto !important; overflow-x: hidden !important; } }

/* Use logo instead of wordmark at small sizes */ .mw-logo-container { display: none; } @media (min-width: 999px) { .mw-logo-container { display: block; } } @media (min-width: 300px) { .mw-logo-icon { display: block; } } /* 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; }

/* Reduce gap beside searchbox */ margin-left: -5px; } /* Old attempt */ /* .cdx-typeahead-search .cdx-typeahead-search--show-thumbnail .cdx-typeahead-search--auto-expand-width { padding-left: 20px; margin-left: 20px; }
 * 1) p-search {

/* Fix search-results flyout at small widths */ min-width: 250px; }
 * 1) cdx-typeahead-search-menu-0 {

/* Add a touch of whitespace next to body for darkmode */ padding-left: 5px; }
 * 1) bodyContent {

/* Replace section-edit links with icons .mw-editsection-visualeditor { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg) no-repeat; background-size: 12px; display: inline-block; padding: 4px 0 0 0; width: 12px; font-size: 1px; text-decoration: none; } .mw-editsection > a:not(.mw-editsection-visualeditor) { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/OOjs_UI_icon_wikiText-progressive.svg) no-repeat; background-size: 15px; display: inline-block; padding: 4px; width: 12px; font-size: 1px; text-decoration: none; } .mw-editsection-bracket { font-size: 10px; display: none; } .mw-editsection-divider { font-size: 10px; padding-right: 2px; } /* Try to fix layering of User-tools popup menu with sticky page-tools -- BROKEN ????? .vector-menu-content, .vector-menu-content-list, .vector-user-links, .vector-user-menu, .mw-list-item { z-index:6 !important; } .vector-menu-content, .vector-menu-content-list, .vector-user-links, .vector-user-menu, .mw-list-item, a.mw-list-item { z-index:6 !important; }  z-index:1 !important; }
 * 1) vector-sticky-header, .vector-sticky-header, .vector-sticky-header-start, .vector-sticky-header-end, .vector-sticky-header-icons, .mw-ui-button .mw-ui-quiet .mw-ui-icon .mw-ui-icon-element .mw-ui-icon-wikimedia-speechBubbles .sticky-header-icon, .sticky-header-icon:before {

/* -- */ /* -- */ /* 6. Sticky the page-toolbar */ /* Hide the custom page-toolbar from my Whitespace CSS */ .vector-sticky-header-end { display: none !important; }

/* Sticky the page-toolbar, and adjust its width (TODO: Fix imperfect width...) */ .vector-page-toolbar, .vector-feature-zebra-design-disabled .mw-body .vector-page-toolbar { position: fixed !important; top: 55px; background-color: white; z-index: 1 !important; padding-right: 300px; margin-left: -2px } @media screen and (min-width: 1000px) { .vector-page-toolbar { width: 72vw; } } @media screen and (max-width: 999px) and (min-width: 300px) { .vector-page-toolbar { width: 95vw; left: 10px; } }

/* Still show it in thinner windows */ @media screen and (min-width: 300px) { .vector-page-toolbar .mw-portlet-views:not(.emptyPortlet) { display: block; } }

/* Move button for ToC-collapsed down below the sticky-header */ .client-js .vector-below-page-title .vector-page-titlebar-toc { top: 81px !important; } html { scroll-padding-top: 120px !important; }

/* Nudge content down to account for no-default gap */ .vector-feature-zebra-design-disabled .mw-content-container, .mw-content-container { padding-top: 25px !important; } @media screen and (max-width: 999px) { .vector-feature-zebra-design-disabled .mw-page-container { padding-top: 55px; } #pt-talk-alert { margin-top: 10px !important; } }

/* Fix for VE toolbar */ body:not(.skin-contenttranslation) .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { top: 76px; }

/* Fix for overlapping hidden div, otherwise interferes w/ VE */ max-height: 20px; }
 * 1) p-views,
 * 2) p-views .vector-menu-content {

/* Fix for sticky table-header gadgets */ .jquery-tablesorter > thead, .mw-sticky-header > thead { position: -webkit-sticky; position: sticky; top: 80px !important; }

/* Fix overlap of personal-tools */ top: 40px; } .mw-page-container { z-index: unset !important; }
 * 1) vector-user-links-dropdown .vector-menu-content {

/* Nudge "new talk" down */ top: 65px !important; }
 * 1) pt-talk-alert {

/* Remove bottom-border */ .vector-feature-zebra-design-disabled .vector-sticky-header-container { border-bottom: unset; }

/* Fix sitenotice margin */ top: 25px; }
 * 1) siteNotice {

/* Fix sticky table-headers */ .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .mw-sticky-header-element { top: 80px !important; }

/* Stop the pinned page-tools menu from jumping on scroll */ .vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools { padding-top: unset; } .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled.vector-feature-page-tools-pinned-enabled .vector-page-tools-landmark { top: 85px !important; margin-top: -10px; }

/* Color borders */ .mw-header { border-bottom: 1px solid #a2a9b1 !important; } .vector-page-toolbar, .vector-feature-zebra-design-disabled .mw-body .vector-page-toolbar { border-bottom: 1px solid #a2a9b1 !important; } .vector-page-toolbar-container { box-shadow: unset; }

/* Replace toolbar text with icons at small widths */ @media screen and (max-width: 699px) { #ca-addsection { -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=speechBubbleAdd&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=speechBubbleAdd&format=original) no-repeat 0 0/15px; background-color: black; padding: 10px; width: 10px; font-size: 1px; color: white; text-decoration: none; } #ca-view { display: none; } #ca-view-foreign > a { -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-wikimedia&image=logoMetaWiki&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-wikimedia&image=logoMetaWiki&format=original) no-repeat 0 0/15px; background-color: #26ae45; padding: 10px; width: 10px; font-size: 1px; color: white; text-decoration: none; } #ca-ve-edit > a { -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-editing-core&image=edit&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-editing-core&image=edit&format=original) no-repeat 0 0/15px; background-color: black; padding: 10px; width: 12px; font-size: 1px; color: white; text-decoration: none; } #ca-edit > a { -webkit-mask: url(g/w/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=wikiText&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=wikiText&format=original) no-repeat 0 0/15px; background-color: black; padding: 10px 10px; font-size: 1px; color: white; text-decoration: none; } #ca-viewsource > a { -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-editing-core&image=editLock&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-editing-core&image=editLock&format=original) no-repeat 0 0/15px; background-color: black; padding: 10px; width: 12px; font-size: 1px; color: white; text-decoration: none; } #ca-history > a { -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-content&image=history&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-content&image=history&format=original) no-repeat 0 0/15px; background-color: black; padding: 10px; width: 12px; font-size: 1px; color: white; text-decoration: none; } #ca-wikilove { padding: 0 5px 0 0; } /* Fix mislaigned icons */ #ca-wikilove > .mw-ui-button { margin-top: 1px !important; } #ca-view-foreign, #ca-ve-edit, #ca-edit, #ca-viewsource, #ca-history { margin-top: 5px !important; } #ca-addsection { margin-top: 8px; } #ca-watch, #ca-unwatch { margin-top: -3px !important; } }