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 https://github.com/quiddity-wp/wikimedia-style-tweaks/blob/master/new-vector-max-width.user.css -- using this ^ one allows it to be toggled on/off

/* 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; } */

/* 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; }

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

/* ToC tweaks */ /* Change "Beginning" to an Up-arrow */ visibility: hidden; } visibility: visible; content: "🠕"; display: block; position: absolute; top: 2px; } /* Auto-expand sections, and hide the H2-arrows */ .client-js .vector-toc .vector-toc-level-1 .vector-toc-list-item { display: block; } .vector-toc-toggle { visibility: hidden; } .vector-toc { padding-left: 15px !important; } /* Bold the H1s */ .vector-toc-level-1 { font-weight: 600; } /* Don't bold the H2/3/4 or change the widths */ .vector-toc-level-2 { font-weight: normal; } /* Fix the bouncing from bold */ .vector-toc .vector-toc-list-item-active > .vector-toc-link { font-weight: unset; 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; } /* Smaller "Contents" */ .vector-pinnable-header-label { font-size: 12px !important; } .vector-pinnable-header-toggle-button { font-size: 11px !important; } /* 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; } */
 * 1) toc-mw-content-text div {
 * 1) toc-mw-content-text div::after {

/* 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) { .vector-toc .vector-toc-pinnable-header { display: none; } }

/* Fix the jumping TOC upon first appearance when scrolling */ .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: 60px !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; }

/* CUSTOM 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: 12px; padding: 0; z-index: 400 !important; } /* 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-end { position: fixed; max-width: min-content; top: 50px !important; right: 5px; padding: 0 10px 0 0 !important; height: 40px; transition: none; transform: translateY(0); background: white; z-index: 1; } } .client-js.vector-sticky-header-enabled .vector-sticky-header-container { display: contents; } /* reduce padding for the icons*/ .sticky-header-icon { padding: 8px; border: none; } /* remove extraneous buttons */ 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; } /* Nudge the personal bar inwards */ margin-right: 1em; }
 * 1) p-lang-btn-sticky-header,
 * 2) p-personal-sticky-header,
 * 3) vector-sticky-header .vector-sticky-header-start,
 * 4) vector-user-links-dropdown-sticky-header {
 * 1) vector-user-links-dropdown {

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

/* 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; }
 * 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 {

/* Fix for banners in small windows */ @media screen and (max-width: 999px) { #siteNotice { top: 60px; } } /* Force ToC at smaller width  -- BROKEN @media screen and (min-width: 500px) { .vector-toc { display: block !important; position: absolute } } /* Remove header whitespace */ .mw-header { margin: 0 !important; padding-top: 0; height: 55px !important; } /* Nudge sidebar-button up into corner */ margin-left: -1px; margin-top: -13px; border: none; }
 * 1) mw-sidebar-button {

/* ToC tweaks*/ .vector-toc { padding-left: 15px !important; margin: 0 !important; } .vector-toc-enabled .mw-sidebar, .vector-toc-enabled .sidebar-toc { width: 14em !important; } .vector-toc .vector-toc-text { padding-right: 0; } /* .vector-toc-contents { width: 12.5em; } .vector-feature-limited-width-disabled .mw-table-of-contents-container, .vector-toc-pinned-container { width: 250px !important; margin-left: 0.75em; } .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 { min-width: 250px !important; }

/* 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 {

/* 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 / 228px minmax(0, 1fr); grid-template-areas: 'header header' 'siteNotice siteNotice' 'mainMenu pageContent' 'toc pageContent' 'footer footer'; } }

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; }
 * 1) siteNotice {

/* 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 } } /* STILL BROKEN, IDK WHY ?!?! Is it a hierarchy issue?? */ /* ToC-button nudge */ @media screen and (max-width: 999px) { .client-js .vector-below-page-title .vector-page-titlebar-toc { 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; } }

/* 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; } } /* 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 */ min-width: 250px; }
 * 1) cdx-typeahead-search-menu-0 {

/* Shorten the inter-languages buttons to just show the number of languages, not the word "languages" -- HACKISH! */ /* 1. Sticky-header button */ max-width: 30px; overflow: hidden; margin-right: 25px; max-height: 20px; } display: none; } /* 2. Page-top button */ max-width: 35px !important; overflow: hidden; height: 25px; }
 * 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{

/* Remove empty space at page-bottom */ .mw-footer-container { padding-bottom: 0 !important; padding-top: 0 !important; } /* 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 {