User:Quiddity/Vector-2022-condensed.css

From mediawiki.org

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.
/* 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 ([[mw: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 and text on multilingual wikis */
.uls-trigger > span {
  font-size: 0.6em;
}
.mw-ui-icon-wikimedia-language {
  background-size: 12px;
  margin-right: 2px !important;
}

/* 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: 100px !important;
}

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

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

/* Add gap above the log-out button */
#pt-logout {
  margin-top: 20px
}

  /* ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------ */
/* 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;
}
/* Hide the default sticky header */
.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container,
.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container {
  display: none;
}

/* 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 */
#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;
}
  
/* Remove header whitespace */
.mw-header {
  margin: 0 !important;
  padding: 0 0 0 20px !important;
  height: 54px !important;
}

/* 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 0 0;
}
#vector-page-tools-dropdown-label {
  padding: 0 0 5px 0
}
.vector-page-toolbar {
  max-height: 24px;
}
.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;
}
@media screen and (min-width:1200px) {
  #left-navigation {
    margin-left: -12px;
  }
}
@media screen and (max-width: 1199px) and (min-width:999px) {
  #left-navigation {
    margin-left: -38px !important;
  }
}

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

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

/* Change "Beginning" or "(Top)" 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: 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;
}

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


/* 3.2 Move the boxes around */


/* Fix the jumping sticky-TOC when scrolling */
.vector-feature-zebra-design-disabled .vector-sticky-pinned-container,
.vector-sticky-pinned-container,
.vector-feature-zebra-design-disabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container, 
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container, 
.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, 
.vector-feature-zebra-design-enabled .vector-pinned-container,
.vector-pinned-container,
.vector-feature-zebra-design-enabled.client-js.vector-sticky-header-enabled .vector-sticky-pinned-container,
.client-js.vector-sticky-header-enabled .vector-sticky-pinned-container,
.vector-feature-zebra-design-enabled.vector-feature-toc-pinned-clientpref-1 .vector-column-start > .vector-toc-landmark,
.vector-feature-toc-pinned-clientpref-1 .vector-column-start > .vector-toc-landmark {
  top: 95px !important;
}
/* .vector-feature-page-tools-enabled #vector-toc-pinned-container .vector-toc {
  padding-top: 0 !important;
} */
.vector-column-start {
  margin-top: -50px !important;
}

/* ???
.vector-feature-zebra-design-enabled.client-js.vector-sticky-header-enabled .vector-pinned-container {
  max-height: none
}

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

/* Move the collapsed ToC down */
#vector-sticky-header-toc {
  top: 48px !important;
  left: 0 !important;
  margin-top: 0;
  margin-left: -131px !important;
  margin-right: 100px !important;
  background: white;
  border: #e4e4e4 1px solid;
}
#vector-sticky-header-toc-label,
#vector-page-titlebar-toc-label {
  padding: 8px 10px !important;
}
.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container,
.vector-feature-zebra-design-enabled .vector-sticky-header-container {
  transition: unset;
}
@media screen and (min-width: 999px) {
  #vector-page-titlebar-toc {
    position: fixed !important;
    top: 54px !important;
    left: 3px !important;
    border: 1px solid #eaecf0;
    background: white !important;
    z-index: 1;
  }
}
@media screen and (min-width: 1000px) {
  .vector-feature-zebra-design-enabled.client-js.vector-feature-toc-pinned-clientpref-0 body:not(.vector-sticky-header-visible).vector-below-page-title .vector-page-titlebar-toc {
    margin-left: -6px !important;
  }
}
@media screen and (min-width: 1199px) {
  #vector-page-titlebar-toc {
    left: 11px !important;
  }
}
#vector-page-titlebar-toc-label {
  background-color: white !important;
  opacity: 1;
}
.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-checkbox {
  left: 0;
}
.vector-dropdown > .vector-menu-content {
  padding: 0 !important;
}

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

@media screen and (max-width: 999px) {
  .vector-feature-zebra-design-disabled.client-js .vector-below-page-title .vector-page-titlebar-toc,
  .vector-feature-zebra-design-enabled.client-js .vector-below-page-title .vector-page-titlebar-toc {
  left: 0;
  }
  .client-js .vector-below-page-title .vector-page-titlebar-toc {
    top: 78px !important;
  }
/* Nudge title down if no TOC exists */
  .vector-toc-not-available .firstHeading {
    padding-top: 20px !important;
  }
}
#firstHeading {
padding-top: 10px;
}


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

/* 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
  }
}  
*/
  
/* Stop the current tab from changing color to black
  .vector-feature-zebra-design-disabled .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-active) > .vector-toc-link,
  .vector-feature-zebra-design-disabled .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
  .vector-feature-zebra-design-disabled .vector-toc .vector-toc-list-item-active > .vector-toc-link {
    color: #3366cc !important;
  } 
*/


  /* ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------ */
/* 4. 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,
.vector-feature-zebra-design-disabled .mw-page-container  {
  padding-left: 5px !important;
}
.mw-portlet .mw-portlet-navigation .vector-menu .vector-menu-portal .portal {
  margin-left: 5px;
}
.vector-sticky-header {
  padding: 0;
}

/* fix page-tools min-width */
#vector-page-tools-pinned-container,
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools,
.vector-feature-zebra-design-enabled #vector-page-tools-pinned-container .vector-page-tools {
  min-width: 190px;
}
  
  /* ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------ */
/* 5. General whitespace reductions */

/* Reduce gap around Page-title */
.vector-layout-grid .mw-page-container-inner, 
.mw-page-container-inner {
  row-gap: 2px;
}
.vector-feature-zebra-design-enabled #siteSub {
  margin-top: unset;
}

/* Reduce the grid gutter, and header height */
@media screen and ( min-width: 1200px ) {
  .vector-feature-zebra-design-disabled .mw-page-container-inner,
  .vector-feature-zebra-design-enabled .mw-page-container-inner {  
    grid-template: min-content 1fr min-content / 290px !important;
    grid-template-areas: 
      'siteNotice siteNotice'
      'columnStart pageContent'
      'footer footer' !important;
    column-gap: 10px !important;
  }
}
@media screen and ( max-width: 1199px ) and ( min-width: 1000px ) {
  .vector-feature-zebra-design-disabled .mw-page-container-inner,
  .vector-feature-zebra-design-enabled .mw-page-container-inner {  
    grid-template: min-content 1fr min-content / 250px !important;
    grid-template-areas: 
      'siteNotice siteNotice'
      'columnStart pageContent'
      'footer footer' !important;
    column-gap: 10px !important;
  }
}
@media screen and (min-width: 1000px) {
  .vector-feature-zebra-design-disabled .mw-body,
  .vector-feature-zebra-design-enabled .mw-body,
  .mw-body {
    display: grid;
    grid-template: min-content min-content min-content 1fr / minmax(0,60em) min-content;
    grid-template-areas:
      'titlebar-cx .    ' 
      'titlebar  columnEnd' 
      'toolbar   columnEnd' 
      'content   columnEnd';
  }
}
.vector-feature-page-tools-pinned-enabled .mw-body {
  column-gap: 20px !important;
}

/* Fix sitenotice margin
#siteNotice {
  top: 60px;
} */

/* Fix for banners in small windows - no longer needed?
@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;
  }
}

/* Main menu nudge */
.vector-main-menu-container {
  padding-top: 20px;
}
#vector-main-menu-dropdown-label {
  padding: 10px;
}
#vector-main-menu-dropdown > .vector-dropdown-content {
  top: 50px;
}
@media screen and (max-width: 999px) {
  #vector-main-menu-dropdown > .vector-dropdown-content {
    top: 72px;
  }
}  
/* 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;
    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;
    width: unset;
  }
}
  
/* Force search-bar to show in site-header at smaller sizes */
@media screen and (min-width: 400px) {
  .mw-header .vector-typeahead-search-container {
  display: block;
  }
}
@media screen and (min-width: 399px) {
  .search-toggle {
    display: none !important;
  }
}
.vector-search-box-collapses > div {
  display: block;
}
.vector-search-box > div {
  max-width: none;
}
.cdx-text-input__input {
  min-width: unset !important;
}
.mw-logo {
  min-width: 0;
  margin-right: 10px;
}
.cdx-menu {
  min-width: 270px !important;
}

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

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

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

/* 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;
} 
#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 {
  z-index:1 !important;
}
*/
  
/* Zebra fixes */
@media screen {
html.vector-feature-zebra-design-enabled {
  --padding-vertical-content: 58px;
  --padding-horizontal-content: 2px;
  }
}
.vector-feature-zebra-design-enabled .vector-header-container .mw-header,
.vector-header-container .mw-header {
  max-width: 100vw;
  min-width: unset;
  padding-right: 0;
  padding-left: 15px;
}
.vector-feature-zebra-design-enabled .vector-page-toolbar {
  top: 54px;
}
.vector-feature-zebra-design-enabled .vector-sticky-pinned-container {
  background-color: unset;
  top: 90px;
}
.vector-feature-zebra-design-enabled .vector-pinned-container {
  background-color: unset;
  padding-right: 0 !important;
}

/* Fixes for mobile-size */
@media screen and (max-width: 550px) {
  .vector-feature-zebra-design-disabled .mw-page-container {
    padding: 0 12px 0 2px;
  }
  .mw-header {
    max-width: 100vw;
  }
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* 6. Sticky the page-toolbar */

/* 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: 54px; 
  background-color: white; 
  z-index: 1 !important;
  right: 1px;
  margin-left: -2px
}
@media screen and (min-width: 1200px) {
  .vector-page-toolbar {
    width: calc(100% - 310px);
  }
  .vector-page-toolbar, 
  .vector-feature-zebra-design-disabled .mw-body .vector-page-toolbar {
    margin: 0 5px 0 0;
  }
}
@media screen and (max-width:1199px) and (min-width: 1000px) {
  .vector-page-toolbar {
    width: calc(100% - 280px);
  }
  .vector-page-toolbar, 
  .vector-feature-zebra-design-disabled .mw-body .vector-page-toolbar {
    margin: 0 5px 0 0;
  }
}
@media screen and (max-width: 999px) and (min-width: 300px) {
  .vector-page-toolbar {
    width: 95vw; 
    left: 10px;
  }
}
.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-content {
  padding: 0 !important;
}
.vector-page-toolbar-container .vector-dropdown {
  height: 25px;
}
input:focus:not(:active) + .cdx-button:not(.cdx-button--action-progressive) {
  box-shadow: unset;
}

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

/* Move scroll below the sticky-header */
html {
  scroll-padding-top: 120px !important;
}

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

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

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

/* 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 */
#vector-user-links-dropdown .vector-menu-content {
  top: 40px;
}
.mw-page-container {
  z-index: unset !important;
}

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

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

/* 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,
.vector-feature-zebra-design-disabled .vector-column-end .vector-page-tools-landmark,
.vector-feature-zebra-design-enabled.client-js.vector-sticky-header-enabled.vector-feature-page-tools-pinned-enabled .vector-page-tools-landmark,
.vector-feature-zebra-design-enabled .vector-column-end .vector-page-tools-landmark,
.vector-feature-zebra-design-disabled .vector-column-end,
.vector-feature-zebra-design-enabled .vector-column-end, 
.vector-column-end {
  top: 85px !important;
  margin-top: -10px;
}

.vector-feature-zebra-design-enabled.vector-feature-page-tools-pinned-enabled .vector-column-end {
  width: unset !important;
}
  
/* Grey Sticky Headers  */
.mw-header {
  background-color: #f8f9fa !important; /* or a bit darker: #eaecf0 */
  border-bottom: 1px solid #eaecf0 !important;
}
.vector-page-toolbar, 
.vector-feature-zebra-design-disabled .mw-body .vector-page-toolbar {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #a2a9b1 !important;
  border-left: 1px solid #a2a9b1 !important;
/*  border-right: 1px solid #a2a9b1 !important; */
}
#p-associated-pages {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #a2a9b1 !important;
  border-left: 1px solid #a2a9b1 !important;
  padding-bottom: 0;
  max-height: 24px;
}
@media screen and (max-width: 999px) {
  #p-associated-pages {
    border-left: unset !important;
  }
}
.vector-page-toolbar-container {
  box-shadow: unset;
}

/* Tweak Site-logo design */
.mw-logo-icon {
  display: block;
  background: white !important;
  padding: 2px 4px;
  border-left: 1px solid #eaecf0;
  border-right: 1px solid #eaecf0;
  border-top: unset;
  margin-left: -5px;
  max-width: 50px;
  max-height: 50px;
}

/* Replace toolbar text with icons at small widths */
@media screen and (max-width: 699px) {
  #ca-addsection {
    margin: 2px;
  }
  #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 {
    margin: 2px;
  }
  #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: 15px 10px 5px 10px; width: 10px; font-size: 1px; color: white; text-decoration: none;
  }
  #ca-ve-edit {
    margin: 2px;
  }
  #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: 15px 10px 5px 10px; width: 12px; font-size: 1px; color: white; text-decoration: none;
  }
  #ca-edit {
    margin: 2px;
  }
  #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: 15px 10px 5px 10px; font-size: 1px; color: white; text-decoration: none;
  }
  #ca-viewsource {
    margin: 2px;
  }
  #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: 15px 10px 5px 10px; width: 12px; font-size: 1px; color: white; text-decoration: none;
  }
  #ca-history {
    margin: 2px;
  }
  #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: 15px 1px 5px 10px; width: 12px; font-size: 1px; color: white; text-decoration: none;
  }
  #pt-userpage-2 {
    margin: 2px;
  }
  #pt-userpage-2 > a, #pt-createaccount-2 > a {
    -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-user&image=userAvatarOutline&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-user&image=userAvatarOutline&format=original) no-repeat 0 0/15px; background-color: black; padding: 10px 10px 10px 10px; width: 12px; font-size: 1px; color: white; text-decoration: none; margin: 0 0 0 15px;
  }
  #pt-login-2 {
    margin: 2px;
  }
  #pt-login-2 > a {
    -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-interactions&image=logIn&format=original) no-repeat 0 0/15px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-interactions&image=logIn&format=original) no-repeat 0 0/15px; background-color: black; padding: 15px 10px 5px 10px; width: 12px; font-size: 1px; color: white; text-decoration: none;
  }
  /* Search bar fixes for small screens */
  .cdx-search-input > .cdx-button {
    -webkit-mask: url(/w/load.php?modules=oojs-ui.styles.icons-interactions&image=search&format=original) no-repeat 3px 3px/2px; mask: url(/w/load.php?modules=oojs-ui.styles.icons-interactions&image=search&format=original) no-repeat 3px 3px/25px; background-color: black; width: 12px; font-size: 1px; color: white; text-decoration: none;
  }
  .cdx-text-input__start-icon, .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon {
    display:none;
    background-image: unset;
  }
  .cdx-typeahead-search .cdx-text-input--has-start-icon .cdx-text-input__input {
  padding-left: 5px;
  }
  .cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width.cdx-typeahead-search--expanded .cdx-text-input__input{
    padding-left:5px !important;
  }
  /* hide the language-selector at small sizes [FIXME] */
  .uls-trigger > span:not(.vector-icon) {
    display: 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: -8px !important;
  }
}

/* Fix mislaigned icons in wide windows */
  #ca-wikilove > a {
    margin-top: -4px !important;
    padding: 0 5px 0 0 !important;
  }
  #ca-watch,
  #ca-unwatch {
    margin-top: -8px !important;
  }
  .vector-icon.mw-ui-icon-wikimedia-heart, 
  .vector-icon.mw-ui-icon-wikimedia-star, 
  .vector-icon.mw-ui-icon-wikimedia-unStar {
    padding-right: 10px;
  }
/* Hide text for wikilove and watch */
  #ca-watch > a > span:not(.vector-icon) {
    display: none;
  }
  #ca-unwatch > a > span:not(.vector-icon) {
    display: none;
  }
  #ca-wikilove > a > span:not(.vector-icon) {
    display: none;
  }
/* Keep sticky icons visible at small sizes */
@media screen and (max-width: 719px) {
  .vector-user-links .mw-portlet-vector-user-menu-overflow .user-links-collapsible-item {
    display: unset;
  }
}

/* remove TOC bottom border gradient background */
.vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after,
.vector-feature-zebra-design-disabled .vector-sticky-pinned-container::after,
.vector-sticky-pinned-container::after{
background: unset
}

/* test toc fixes */
.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container,
.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container{
  display: block !important;
}

#p-twinkle-dropdown-label {
  padding-top: 5px;
}

.cdx-text-input {
  min-width: unset;
}

/* fix for long usernames */
@media screen {
  #pt-userpage-2 {
    max-width: 17em;
  }
}

/* fix sticky header icon size */
@media screen and (max-width: 999px) {
  .vector-header .cdx-button.cdx-button--icon-only {
    min-width: unset;
    min-height: unset;
  }
}

/* fullwidth infoboxes on phone-size widths */
@media screen and (max-width: 550px) {
  .infobox {
    width:100% !important;
    max-width: 100% !important;
  }
}
Retrieved from "https://www.mediawiki.org/w/index.php?title=User:Quiddity/Vector-2022-condensed.css&oldid=6321568"