wikipedia: fixed top and sidebars by eccenux

wikipedia: fixed top and sidebars screenshot
Homepage Install Get Stylus Write a review

Details

Authoreccenux

LicenseCC-BY

Created

Updated

Categorywikipedia, wikimedia

Statistics

Learn how we calculate statistics in the FAQ.

Total views130

Total installs37

Weekly installs3

Description

Tweaks and fixes for new vector layout (Vector 2022). See also my lang on top script. You can find some screenshots there.

Notes

Things changed:

  • Top bar always accessible (fixed header). So if you have any modifications like extra links – they will always be available to you (no matter how far down you scroll).
  • Sidebar on the left and also fixed (always accessible).
  • Table of contents on the right. Which was just a wasted space before.
  • Gray background which I find to work better for my eyes.

For some Toc tweaks (numbers), see also:
https://userstyles.world/style/5790/wikipedia-toc-tweaks

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name         wikipedia: fixed top and sidebars
@version      20220910.13.27
@namespace    userstyles.world/user/eccenux
@description  Tweaks and fixes for new vector layout (Vector 2022). See also my [lang on top script](https://github.com/Eccenux/wiki-lang-on-top#readme). You can find some screenshots there.
@author       eccenux
@license      CC-BY
==/UserStyle== */

@-moz-document url-prefix("https://www.mediawiki.org"), regexp(".*//[a-z]+\\.wikipedia\\.org.*"), regexp(".*//[a-z]{1,5}\\.(wikimedia|wiktionary)\\.org.*"), regexp(".*//commons.wikimedia.org.*") {
/**
    Fixed top bar and sidebars.

    Tweaks and fixes for new vector layout.

    Wiki copy:
    https://pl.wikipedia.org/wiki/Wikipedysta:Nux/Fixed_top_bar.css
*/
/**
Testing various layouts.

View page for code (no toc):
    https://pl.wikipedia.org/wiki/Wikipedysta:Nux/Fixed_top_bar.css
View page, short (no toc):
    https://pl.wikipedia.org/wiki/U_(ujednoznacznienie)
View page with toc and wide table:
    https://pl.wikipedia.org/w/index.php?title=Boomerang_(stacja_telewizyjna)

Edit with ToC (column for toc):
    https://pl.wikipedia.org/w/index.php?title=Boomerang_(stacja_telewizyjna)&action=edit

Special page & history (1 column, wide):
    https://pl.wikipedia.org/wiki/Specjalna:Obserwowane
    https://pl.wikipedia.org/w/index.php?title=Polska&action=history

Compare with large table:
    https://pl.wikipedia.org/w/index.php?title=Ronnie_O%E2%80%99Sullivan&diff=prev&oldid=67564083&diffmode=source

*/

/*
    Main grid layout.
*/
@media screen and (min-width: 1000px) {
    /* view with toc */
    .mw-page-container-inner {
		grid-template-areas:
			'sitenotice sitenotice sitenotice'
			'sitebanner sitebanner sitebanner'
			'. content toc'
			'. content .'
			'footer footer footer'
		;
        grid-template-columns: 284px 1fr 284px;
        grid-template-rows: min-content;
    }
    /* fix for single column collapsed sidebar */
    .mw-page-container-inner:not(.vector-toc-visible)
	.mw-content-container {
		grid-column: 2 !important;
    }
    /* large layout with toc */
    .skin-vector-disable-max-width
     .mw-page-container-inner.vector-toc-visible {
        grid-template-areas:
			'sitenotice sitenotice sitenotice'
			'sitebanner sitebanner sitebanner'
            'content content toc'
            'content content .'
            'footer footer .';
    }
    /* large layout: special pages, history etc */
    .skin-vector-disable-max-width
     .mw-page-container-inner:not(.vector-toc-visible){
        display: flex;
        flex-flow: column;
        row-gap: 0;
    }
	/* missing ToC class (T315610)  */
    .skin-vector-disable-max-width
     .mw-page-container-inner:not(.vector-toc-visible)
	  .mw-table-of-contents-container {
        display: none;
	}
	/**/
}
/* adjust main padding for fixed sidebar */
@media screen and (1000px <= width < 2000px) {
    /* large layout: special pages, history etc */
    .skin-vector-disable-max-width
     .mw-page-container.vector-layout-grid.vector-toc-visible {
        max-width: 100%;
        margin-left: 200px;
    }
    .skin-vector-disable-max-width .mw-page-container,
    .skin-vector-disable-max-width .vector-layout-grid {
        max-width: calc(100vw - 400px);
    }
    /* some special pages?; e.g. Specjalna:Wkład/93.175.77.148 *
    .skin-vector-disable-max-width .mw-content-container {
        margin-left: 0px !important;
        max-width: 100%  !important;
    }
    /**/
}

/**
    Adjust tabs bar.
*/
#content {
  display: grid;
  padding-top: .5em;
}
.vector-article-toolbar {
  grid-row: 1;
}
.mw-body-header {
  margin-top: 1em;
}
.vector-menu-tabs .selected.mw-list-item {
  border-bottom: 2px solid;
}
/* oversized body article contain large tables */
.ns-0.skin-vector-disable-max-width .mw-parser-output,
:not(.skin-vector-disable-max-width).action-view :is(.vector-body, .mw-body) {
    max-width: 912px;
}
/* center preview */
.ns-0.skin-vector-disable-max-width .mw-parser-output {
	margin: auto;
}

/**
    Base settings
*/
:root {
    --top-bar-height: 63px;
    --bg-color-start: #fff;
    --bg-color-final: hsl(0, 0%, 96%);
}

/* ukrycie linka/sekcji powrótu do starego widoku */
@media screen {
  .mw-sidebar-action {
    display: none;
  }
}

/**
    Override default, sticky, top bar (reduce to article actionbar).

    Reduces original sticky header to ariticle links (talk, history, etc).

	Put on bottom so that it doesn't overlap toc nor user menu.
*/
#vector-sticky-header {
    max-width: max-content;
	top: auto;
	bottom: 0;
    left: auto;
    padding: 1em;
}
body:not(.vector-sticky-header-visible) #vector-sticky-header {
	top: auto;
	bottom: -200px;
}
#p-lang-btn-sticky-header,
#p-personal-sticky-header,
#vector-sticky-header .vector-sticky-header-start {
    display:none;
}
.mw-header {
    z-index: 400;
}

/**
    Fixed top bar.
*/
/* fixed head */
body:not(.skin-contenttranslation) .mw-header {
    margin: 0;
    padding: 0 .8em;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--bg-color-start);
    height: var(--top-bar-height);
}
/* content correction */
body:not(.skin-contenttranslation) {
    padding-top: calc(var(--top-bar-height) + 1em);
}
/* fixed sidebar too */
/*
@media screen and (min-width: 1000px) {
*/
@media screen and (width >= 1000px) {
    body:not(.skin-contenttranslation) #mw-panel {
        position: fixed !important;
        left: 0 !important;
        top: var(--top-bar-height) !important;

        scrollbar-width: thin;
        overflow-y: auto;
        width: 12em;
        max-height: calc(100vh - var(--top-bar-height));

        padding: .5em !important;
        margin: 0 !important;
    }
}
@media screen and (width < 1000px) {
    body:not(.skin-contenttranslation) #mw-panel {
        display: flex;
    }
}

/* VE edit toolbar */
body:not(.skin-contenttranslation) .ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
    top: var(--top-bar-height);
}
/* For anchor navi */
html {
    scroll-padding-top: var(--top-bar-height) !important;
}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
    top: var(--top-bar-height);
}

/* collapse some sidebar sections */
@media screen and (min-width: 1000px) {
    #p-zmiany,#p-interaction {
        display:none;
    }
    #p-coll-print_export .vector-menu-content,
    #p-edytorzy .vector-menu-content {
        display:none;
    }
    #p-coll-print_export:hover .vector-menu-content,
    #p-edytorzy:hover .vector-menu-content {
        display:block;
    }
}

/*
	Vector 2021 sidebar (collapsible)
*/
/* collapse icon */
@media screen {
    #mw-sidebar-button::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E");
    }
}
/* sidebar alignment and colors on wide screen */
@media screen {
    body:not(.skin-contenttranslation) .mw-workspace-container {
        max-width: none;
    }
    body:not(.skin-contenttranslation) {
        background-color: var(--bg-color-final);
    }
    body:not(.skin-contenttranslation) :is(#mw-panel,.mw-page-container) {
        background-color: transparent;
    }
    body:not(.skin-contenttranslation) .mw-content-container {
        background: white;
    }
    body:not(.skin-contenttranslation) .mw-body {
        padding: 1.25em 1.5em 1.5em;
    }
    body:not(.skin-contenttranslation) .mw-sidebar {
        border-right-style: none;
    }
}
@media screen and (min-width: 106.875em) {
    body:not(.skin-contenttranslation) .mw-page-container {
        padding-left: 0;
        padding-right: 0;
        border-left-style: none;
        border-right-style: none;
    }
}

/* toc as a sidebar, but on the right */
/*
@media screen and (min-width: 1580px) {
*/
@media screen and (min-width: 980px) {
    .sidebar-toc {
        background-color: white;
    }
    .sidebar-toc:after {
        background: transparent;
    }
    .vector-toc-enabled .sidebar-toc {
        margin-top: 3.5em !important;
        padding-left: 1.5em !important;
    }
    .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
        margin-right: 0 !important;
    }
    .sidebar-toc .sidebar-toc-contents {
        padding-bottom: 0 !important;
    }
	body .vector-sticky-toc-container {
		position: fixed;
		top: calc(var(--top-bar-height) + 1em);
	}
}
/*
*/
@media screen and (max-width: 1580px) {
    .mw-page-container {
        padding-left: 0;
        padding-right: 0;
    }    
    .skin-vector-disable-max-width .vector-toc-enabled .vector-layout-legacy .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container, body:not(.skin-vector-toc-experiment-control):not(.skin-vector-toc-experiment-unsampled) .vector-layout-legacy .vector-toc-visible .mw-workspace-container .mw-content-container, body:not(.skin-vector-toc-experiment-control):not(.skin-vector-toc-experiment-unsampled) .vector-layout-legacy .vector-toc-visible #mw-navigation .mw-article-toolbar-container, .vector-toc-enabled .vector-layout-legacy .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container, .vector-toc-enabled .vector-layout-legacy .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container #mw-navigation .mw-article-toolbar-container {
        margin-left: 0em;
    }
}

/*
        margin-left: 12em !important;
	Vector 2021 - special pages top nav.
*/
@media screen {
    .skin-vector-disable-max-width .mw-article-toolbar-container {
        max-width: none;
    }
    /**
    .skin-vector-disable-max-width .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
        margin-left: 11.5em;
    }
    /**/
}
/*
    Article's more-menu bug.
*/
@media screen {
    body:not(.skin-vector-legacy) #mw-head .vector-menu-dropdown h3 {
        background-image: none;
    }
}

/* 
    Vector 2021 footer and e.g. main page clear
*/
.mw-content-container::after {
    content: "";
    display: table;
    clear: both;
}

/* 
    Fix for content translation
*/
body.skin-contenttranslation .mw-page-container {
    max-width: none;
}

}

Reviews

vannessqn reviewed and gave 5/5 ⭐
I dont even know the vector 2022 skin exist, change to it and then use your script, very nice