MediaWiki Arch Timeless Test

MediaWikiArchTimelessTest.userscript.js

// ==UserScript==
// @name     MediaWiki Arch Timeless Test
// @version  1
// @grant    unsafeWindow
// @match		 https://www.mediawiki.org/*
// ==/UserScript==

// choose Timeless skin
const key = 'useskin';
const params = new URLSearchParams(window.location.search);
const version = params.get(key);
if (!version) {
  // replace makes redirect not reflected in the browser back history
  params.set(key, 'Timeless');
  window.location.replace(`${window.location.href}?${params}`);
}


// add arch style + modifications
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `

/* container for the entire bar */
#archnavbar { height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; }

#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; }
html > body #archnavbarlogo { background: url('https://bbs.archlinux.org/style/ArchLinux/archlogo.svg') no-repeat !important; background-size: 190px 40px !important;}

/* move the heading/paragraph text offscreen */
#archnavbarlogo p { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; }
#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; }

/* make the link the same size as the logo */
#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; }

/* display the list inline, float it to the right and style it */
#archnavbar ul { display: inline !important; float: right !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
#archnavbar ul li { float: left !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 45px !important; padding-right: 15px !important; padding-left: 15px !important; }

/* style the links */
#archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; }
#archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; }


#archnavbarlogo p {
 margin:0 !important;
 padding:0 !important;
 text-indent:-9999px !important
}
#archnavbarlogo h1 {
 margin:0 !important;
 padding:0 !important;
 text-indent:-9999px !important
}
#archnavbarlogo a {
 display:block !important;
 height:40px !important;
 width:190px !important
}
#archnavbar ul {
 display:inline !important;
 float:right !important;
 list-style:none !important;
 margin:0 !important;
 padding:0 !important
}
#archnavbar ul li {
 float:left !important;
 font-size:14px !important;
 font-family:sans-serif !important;
 line-height:45px !important;
 padding-right:15px !important;
 padding-left:15px !important
}
#archnavbar ul#archnavbarlist li a {
 color:#999;
 font-weight:bold !important;
 text-decoration:none !important
}
#archnavbar ul li a:hover {
 color:white !important;
 text-decoration:underline !important
}
#archnavbar ul li.anb-selected a {
 color:white !important
}

@media (max-width: 680px) {
    #anb-forum,
    #anb-forums {
        display: none;
    }

    html > body #archnavbarlogo {
        width: 40px !important;
        margin-right: 5px !important;
        background: url('https://bbs.archlinux.org/style/ArchLinux/archicon.svg') no-repeat !important;
        background-size: 40px 40px !important;
    }

    #archnavbar ul {
        display: flex !important;
        justify-content: space-between;
        flex-wrap: nowrap;
        overflow: hidden;
        float: none !important;
    }

    #archnavbar ul li {
        padding: 0 !important;
        float: none !important;
    }
}

@media (max-width: 830px) {
    #anb-home,
    #anb-start {
        display: none;
    }

    html > body #archnavbarlogo {
        padding-right: 15px !important;
    }

    #archnavbar {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #archnavbar ul li {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}


/* arch general styles */


body {
	background: #f6f9fc
}

#content {
	background: #ffffff;
	border: 1px solid #cccccc
}

#content table,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content pre,
#content code,
#content tt {
	color: #222222
}

#content ul {
	list-style-image: none
}

#content table {
	border-collapse: collapse;
	padding: 2px
}

#content td {
	padding: 2px
}

#content pre:not([class*="CodeMirror"]) {
	border: 1px solid #bbccdd;
	overflow: auto;
	word-break: break-all;
	white-space: pre-wrap !important
}

#content pre:not([class*="CodeMirror"]),
#content code,
#content tt {
	background-color: #ebf1f5;
	font-family: monospace
}

#content code,
#content tt {
	display: inline-block;
	padding: 0 0.3em;
	border-width: 0;
	border-radius: 0
}

#footer-icons {
	display: none
}

#footer {
	color: #333333
}

#toc,
.toc,
.mw-warning,
.toccolours {
	background-color: #f9faff;
	border: 1px solid #d7dfe3
}

#bodyContent>div.mw-content-ltr a,
#bodyContent>div.mw-content-rtl a,
#wikiPreview>div.mw-content-ltr a,
#wikiPreview>div.mw-content-rtl a {
	font-weight: bold
}

#bodyContent #toc a,
#bodyContent .special li>a,
#bodyContent .special li span a,
#bodyContent #pagehistory a {
	font-weight: normal
}

#content a:not(.new),
header.mw-header li:not(.new) a:not(.new),
#mw-navigation li:not(.new) a:not(.new),
#mw-panel li:not(.new) a:not(.new),
#column-one li:not(.new) a:not(.new),
#footer a:not(.new) {
	text-decoration: none;
	color: #0077bb !important
}

#content a:not(.new):hover,
header.mw-header li:not(.new) a:not(.new):hover,
#mw-navigation li:not(.new) a:not(.new):hover,
#mw-panel li:not(.new) a:not(.new):hover,
#column-one li:not(.new) a:not(.new):hover,
#footer a:not(.new):hover {
	text-decoration: underline;
	background-color: transparent;
	color: #999999 !important
}

#content a:active,
header.mw-header li:not(.new) a:active,
#mw-navigation li:not(.new) a:active,
#mw-panel li:not(.new) a:active,
#column-one li:not(.new) a:active,
#footer a:active,
#content a:focus,
header.mw-header li:not(.new) a:focus,
#mw-navigation li:not(.new) a:focus,
#mw-panel li:not(.new) a:focus,
#column-one li:not(.new) a:focus,
#footer a:focus,
#content a:active:hover,
header.mw-header li:not(.new) a:active:hover,
#mw-navigation li:not(.new) a:active:hover,
#mw-panel li:not(.new) a:active:hover,
#column-one li:not(.new) a:active:hover,
#footer a:active:hover,
#content a:focus:hover,
header.mw-header li:not(.new) a:focus:hover,
#mw-navigation li:not(.new) a:focus:hover,
#mw-panel li:not(.new) a:focus:hover,
#column-one li:not(.new) a:focus:hover,
#footer a:focus:hover {
	color: #ee9900 !important
}

#content a:not(.new):visited,
#mw-panel li:not(.new) a:not(.new):visited,
#p-navigation li:not(.new) a:not(.new):visited,
#p-tb li:not(.new) a:not(.new):visited {
	color: #666666 !important
}

a.new,
a.new:visited,
#mw-navigation li.new a,
#mw-navigation li.new a:visited {
	color: #bb0000 !important
}

.mw-body-content a.external,
.mw-body-content a.extiw {
	background: url(/resources/src/mediawiki.skinning/images/external-ltr.svg?59558) center right no-repeat;
	padding-right: 13px
}


/* arch general styles END */


body, #mw-content-container {
    margin-top: 0;
    background: #f6f9fc;
}
/* arch defs: 
@body-background-color: #f6f9fc 
@content-border-width: 1px;
@content-border-style: @content-border-width solid #ccc;
*/

/* disable default mediawiki logo  */
#p-logo {
    display: none !important;
}

/* make room for archnavbar and disable fixed searchbar */
body, #mw-content-container {
    margin-top: 0;
    background-color: #f6f9fc;
}
#mw-content-container {
    border-bottom: none;
    padding-top: .5em;
}
#mw-header-hack, #mw-header-nav-hack {
    display: none !important;
}
#mw-header-container {
    position: initial;
}
#mw-content {
    border: 1px solid #ccc;
}
#content {
    border: none;
    background: transparent;
}

/* z-order fix */
#personal-inner {
    z-index: 200;
}

/* integrate footer into page background */
#mw-footer {
    padding-left: 16em;
    padding-right: 18em;
}
#mw-footer > * {
    font-size: .8em;
}
.mw-footer-container {
    border-top: none;
    line-height: 1;
    color: inherit;
    box-shadow: none;
}
.mw-footer-container a {
    color:#3366cc;
}
.mw-footer-container a:hover {
    color:#2952a3;
}
.mw-footer-container a:visited {
    color:#2a4b8d;
}
.mw-footer-container a:visited:hover {
    color:#1e3666;
}


/* fixes for specific widths */
@media screen and (max-width:1339px) {
    #mw-footer {
        padding-right: 1em;
    }
}
@media screen and (min-width:851px) and (max-width:1099px) {
    #mw-footer {
        padding-left: 1em;
    }
    #mw-content {
        margin-top: 1.75em;
    }
}
@media screen and (max-width:850px) {
    #mw-footer {
        padding-left: 1em;
    }
    #p-logo-text, #site-navigation h2, #site-tools h2, #user-tools h2 {
        top: 75px;
    }
    .sidebar-inner, .dropdown {
        top: 7.75em;
    }
    #menus-cover {
        top: 65px;
    }
}

/* prefer scrollbars instead of wrapping for code blocks */
pre {
    white-space: pre;
}

`;
document.head.appendChild(style);

// add arch nav bar
var nav = document.createElement("div");
nav.innerHTML = `<div id="archnavbar" class="noprint">
    <div id="archnavbarlogo">
        <p><a id="logo" href="https://www.archlinux.org/"></a></p>
    </div>
    <div id="archnavbarmenu">
        <ul id="archnavbarlist">
                        <li id="anb-home"><a href="https://www.archlinux.org/">Home</a></li>            <li id="anb-packages"><a href="https://www.archlinux.org/packages/">Packages</a></li>            <li id="anb-forums"><a href="https://bbs.archlinux.org/">Forums</a></li>            <li id="anb-wiki" class="anb-selected"><a href="https://wiki.archlinux.org/">Wiki</a></li>            <li id="anb-bugs"><a href="https://bugs.archlinux.org/">Bugs</a></li>            <li id="anb-security"><a href="https://security.archlinux.org/">Security</a></li>            <li id="anb-aur"><a href="https://aur.archlinux.org/">AUR</a></li>            <li id="anb-download"><a href="https://www.archlinux.org/download/">Download</a></li>        </ul>
    </div>
</div>
`
document.body.insertBefore(nav.firstChild, document.body.firstChild);