User:CheChe/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:CheChe/vector-2022.js. |
/* Mostly from Quiddity's Vector-2022-condensed:
https://www.mediawiki.org/w/index.php?title=User:Quiddity/Vector-2022-condensed.css
*/
/* Replace section-edit links with icons
.mw-editsection-visualeditor {
background: url(/media/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(/media/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: 'edit';
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: "Top";
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;
}
.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;
}
/* 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;
} */
/* 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-toc-pinned #vector-toc-pinned-container {
top: 60px !important;
}
.vector-feature-page-tools-disabled.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 */
/* 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;
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;
}
}
/* END CONTENT COPIED FROM QUIDDITY.USER.CSS */
/* BEGIN COPY FROM MAX-WIDTH.USER.CSS */
/* Width fixes, and sidebar fixed at small width
#mw-panel {
padding-left: 25px;
max-width: 184px;
margin-top: -5px;
padding-right: 0;
}
.mw-sidebar {
width: 184px;
} */
/* Fix sidebar into an overlay, at small widths
@media screen and (max-width: 999px) {
.mw-workspace-container {
position: absolute;
z-index: 4;
}
}
@media screen and (max-width: 999px) and (min-width:550px) {
#mw-sidebar-checkbox:checked ~ .mw-content-container {
padding-left: 184px;
}
} */
/* 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;
}
*/