User:CheChe/vector-2022.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* Mostly from Quiddity's Vector-2022-condensed:
https://www.mediawiki.org/w/index.php?title=User:Quiddity/Vector-2022-condensed.css
*/

/* ToC tweaks */

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

/* END COPY FROM MAX-WIDTH.USER.CSS */
/* BEGIN COPY FROM WHITESPACE.USER.CSS */

/* 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*/
.vector-toc {
  padding-left: 15px !important;
  margin: 0 !important;
  max-height: 95vh;
}
.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;
}
.mw-vector, 
.vector-toc, 
.vector-toc::after {
  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 */
#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: 20px;
  padding-right: 25px;
}
.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
  }
}
  
/* 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: 0px;
    position: fixed;
    z-index: 4;
    border-right: 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;
}

/* Shorten the inter-languages buttons to just show the number of languages, not the word "languages" -- HACKISH! */
/* 1. 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;
}
/* 2. Page-top button */
#p-lang-btn .vector-menu-heading-label{
  max-width: 35px !important;
  overflow: hidden;
  height: 25px;
}

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