Userstyle to improve the default, mobile-centric, Archlinux wiki

seth · 2021-12-31 17:39:53

WIP.

- no artifical width limitation
- sticky content table on the left
- merged media wiki navbar and arch navbar
- some recoloring (optional)
- there's an optional "dark mode" section if you prefer.
- edit: permanent sidebar option
- edit: header layout

Use eg. https://add0n.com/stylus.html

#content {border:none;}
nav.vector-menu-tabs ul li, nav.vector-menu-tabs li.selected {border:none;}
.mw-workspace-container, div.mw-content-container, div.mw-article-toolbar-container, div.mw-page-container {max-width:none !important;}
div.mw-page-container {background-color:white !important;}
#toc {position:sticky; width:25% !important; float:left; top:2em; margin-left:0 !important; margin-right:2em; max-height:95vh !important; overflow:scroll; display:block !important;}
#content > ul {margin-left:calc(25% + 32pt + 3em) !important;}
#toc ul {margin-left:0.5em !important;}
#toc ~ * {margin-left:calc(25% + 32pt) !important;}
div.archwiki-template-meta-related-articles-start {margin-left:2em !important; width:inherit !important; border:1px solid #333;}
div.archwiki-template-meta-related-articles-start ul {padding-left:3em; padding-right:3em;}
span.toctogglespan {display:none;}

/* dynamic sidebar shadow */
#mw-panel{box-shadow: 0 4px 6px #333 !important;} /**/

/* permanent sidebar */
/*
div.mw-content-container, div.mw-article-toolbar-container {margin-left: 11.5em !important;}
#mw-panel{transform:translateX(0) !important; visibility:visible !important; opacity:1 !important;}
#mw-sidebar-button{visibility:hidden ! important;}
#mw-head li.selected, #mw-head li.selected a:not(.new) { background:none !important; color: #fafafa !important; font-weight:bold;}
#mw-head-base { border-bottom: 5px solid #1793d0 !important;} /* old skin */

#archnavbar { border-bottom: none !important; }
header.mw-header { border-bottom: 5px solid #1793d0 !important; padding: 0 20pt 0 !important; background-color:#333 !important; color: #fafafa !important;}
body {background-color:#333 !important;}
div.mw-page-container {padding:0 !important;}
div.mw-workspace-container {padding: 0 20pt 0 !important;}
#mw-panel {left:1em !important;}
.mw-ui-icon-wikimedia-ellipsis:before {filter: invert(100%) !important;}
#mw-sidebar-button:before  {filter: invert(100%) !important;}
#p-personal-checkbox, #mw-sidebar-button{box-shadow:none !important; border:none !important;}

/* search */
#searchform { display:inline !important;}
#simpleSearch, div.wvui-typeahead-search { height:100% !important; width:25em !important; display:block !important; margin-left:auto !important;}
#searchform .wvui-icon, #searchform .wvui-typeahead-search__submit { display:none !important; }
#searchform #simpleSearch, #searchform .wvui-input__input {box-shadow:none !important; border:1px solid white !important; padding: 0 1em 0; font-size:0.8125em; width:100%; right:0!important;}
#searchform * {border:none; background:none!important; color:#fafafa!important;}
#searchform ul.cdx-menu {background:#333!important;}

#searchform .wvui-typeahead-search__wrapper * {background-color:#333!important;}
/* light search popup */
/*#searchform .wvui-typeahead-search__wrapper * {background-color:#fafafa!important; color:#333!important;}
#searchform .wvui-typeahead-search__wrapper input {background-color:#333!important;}*/
/* ------------ */

#searchform .wvui-input__input:focus {border:1px solid #1793d0 !important;}
.wvui-typeahead-search--show-thumbnail .wvui-input__input {width: 100% !important; left: 0 !important;}
#p-search h3 {display:none!important;}

/*color stuff ========================================== */

/* dark mode*/
/*div.mw-page-container, .mw-page-container * { background-color:#333 !important; color: #fafafa !important; }
div.mw-page-container code { background:none !important; color:#9adb18 !important; } /**/

/* general */
div.archwiki-template-box * { background-color:inherit !important; color:inherit !important;}
code { background:none !important; color:#46640b !important; }
div.archwiki-template-box code { background:none !important; color:#46640b !important; }
#content pre:not([class*="CodeMirror"]) {border:1px solid #46640b; background:#fafafa;}
div.archwiki-template-box-tip {background:#e4ffaf !important; color:black !important; border:none !important;}
div.archwiki-template-box-note { background:#dff5ff !important; color:black !important; border:none; }
div.archwiki-template-box-warning { background:#ffb31c !important; color:black !important; border:none; }
#toc {background:#fafafa; border:none; padding:0;}
div.toctitle {background:#333; border-bottom:4px solid #1793d0;}
div.toctitle * {color:white !important;}
table.wikitable {background:white;}
table.wikitable th {background:#fafafa;}

/* NEW TOC STUFF, xmas 2022 ============================================ */
/* unfold the toc */
li.sidebar-toc-list-item {display:block!important;}
button.sidebar-toc-toggle {display:none!important;} /**/
div.mw-page-container-inner{grid-template-columns: 25% 1em minmax(0px, 1fr)!important;}
@media screen and (min-width: 1000px) { #mw-panel-toc {width:100%!important; max-height:95vh !important;padding-top:0!important;} nav#mw-panel-toc.sidebar-toc:after{width:100%!important;} }
div.vector-sticky-toc-container{padding:0!important;margin:0!important;}
div#sidebar-toc-label p {background:#333!important; color:#fafafa!important;text-align:center!important;padding:0.33em!important;}
#content{padding-right:2em!important;}
/* ============================================ */

/* Fun fact: I really don't like the taste of Bananas… */
* > .mw-headline::before { content: none !important; margin-right:0 !important; }
h2 {margin-top:1.5em !important; padding-bottom:0.5em !important; font-size:160% !important;}
h3 { font-size:135% !important; margin-top:1em!important; letter-spacing:0.3pt !important; }
h4, h5 { color:#404040 !important; margin:0!important;}
h5, h6 { color:#555 !important; }
h3 + p, h4 + p {margin-top:0.2em!important;}
h5 + p, h6 + p {margin-top:-0.2em!important;}
/*h1 { color:#222 !important; font-size:200% !important;}
h2 { color:#222 !important; font-size:195% !important; margin-top:1.618em !important; border:1px solid rgb(162, 169, 177) !important; border-left:none!important; border-bottom:none!important;}
h3 { color:#222 !important; font-size:160% !important; margin-top:0.5em !important; }
h5 { color:#444 !important; font-size:110% !important;}
h5 + p {margin-top:0.1em!important;}
h6 { color:#555 !important; font-size:110% !important; padding-bottom:0 !important; margin-bottom:0 !important;}
h6 + p {margin-top:0.1em!important;}
/*h6 { font-weight:normal !important; text-decoration-line:underline !important; text-decoration-color: rgb(162, 169, 177) !important; }*/

/*-------------------------*/

/*div.archwiki-template-box-note code { background:none !important; color:#46640b !important; border:none; }*/
/*#content div.archwiki-template-box-note a { color: #ffb31c !important; }
#content div.archwiki-template-box-note a:hover, a:visited { color: white !important; }*/
/*div.mw-parser-output { display:block !important; }*/
/*div.mw-parser-output {column-count:2 !important; column-gap:4em !important; text-align:justify !important;}*/

/*
div.mw-content-container, div.mw-article-toolbar-container {margin-left: 11.5em !important;}
#mw-panel{transform:translateX(0) !important; visibility:visible !important; opacity:1 !important;}
#mw-sidebar-button{visibility:hidden ! important;}
*/

Last edited by seth (2023-03-19 09:20:54)

fabertawe · 2022-01-03 13:31:34

Excellent! Thank you for this, the "new" Wiki was unbearable to use.

I've installed this with Stylem for Pale Moon.

EDIT: I had to wrap everything with

@-moz-document domain("wiki.archlinux.org")
{
}

otherwise it was affecting other sites, such as duckduckgo having weird colouring.

Last edited by fabertawe (2022-01-03 15:00:53)

Lone_Wolf · 2022-02-11 15:08:12

Works fine using stylus in firefox, but I'd like to make some changes.

Which lines correspond to the 'sticky content table on the left' ?

The search bar lists options in white on black, can those colors be reversed without changing the rest of the top bar ?

seth · 2022-02-11 23:28:07

#toc {position:sticky; width:25% !important; float:left; top:2em; margin-left:0 !important; margin-right:2em; max-height:95vh !important; overflow:scroll; display:block !important;}
#content > ul {margin-left:calc(25% + 32pt + 3em) !important;}
#toc ul {margin-left:0.5em !important;}
#toc ~ * {margin-left:calc(25% + 32pt) !important;}

I'll have a look at the searchbar next week (currently using MS edge...) but I guess the trigger is

#searchform .wvui-typeahead-search__wrapper * {background-color:#333!important;}

and subcontrolling #searchform-suggestions should allow you to control the colors of the popup.

seth · 2022-02-15 16:50:01

See edited OP, what do you want to do w/ the sticky content? Jus tget rid of it and have the content menu on top?

Lone_Wolf · 2022-02-17 11:28:55

search bar & suggestions now match the rest of the screen, thanks.

My first reflex was to get rid of the sticky toc, yes.
However I soon realised having the toc sticky was an improvement, but it just used to much horizontal screen estate.

I have reduced the toc width from 25% to 15% and that works much better for me.

ubone · 2022-03-05 06:56:01

There's an option to disable the new layout but to access it you have to be logged in.

seth · 2022-03-05 07:01:13

Yes, we know…
You likely missed https://bbs.archlinux.org/viewtopic.php?id=272456 - happy reading.
I took that as opportunity to play w/ te wiki layout a bit.

Lone_Wolf · 2022-04-05 08:59:47

Found one issue I hadn't noticed until trying to login to wiki :

"more options' is present and works, but not visible .
It's icon is 3 dots just right of 'create account'

This is what I currently have in stylus for archwiki

#content {border:none;}
nav.vector-menu-tabs ul li, nav.vector-menu-tabs li.selected {border:none;}
.mw-workspace-container, div.mw-content-container, div.mw-article-toolbar-container, div.mw-page-container {max-width:none !important;}
div.mw-page-container {background-color:white !important;}
#toc {position:sticky; width:15% !important; float:left; top:2em; margin-left:0 !important; margin-right:2em; max-height:95vh !important; overflow:scroll; display:block !important;}
#content > ul {margin-left:calc(15% + 32pt + 3em) !important;}
#toc ul {margin-left:0.5em !important;}
#toc ~ * {margin-left:calc(15% + 32pt) !important;}
div.archwiki-template-meta-related-articles-start {margin-left:2em !important; width:inherit !important; border:1px solid #333;}
div.archwiki-template-meta-related-articles-start ul {padding-left:3em; padding-right:3em;}
span.toctogglespan {display:none;}

/* dynamic sidebar shadow */
#mw-panel{box-shadow: 0 4px 6px #333 !important;} /**/

/* permanent sidebar */
/*
div.mw-content-container, div.mw-article-toolbar-container {margin-left: 11.5em !important;}
#mw-panel{transform:translateX(0) !important; visibility:visible !important; opacity:1 !important;}
#mw-sidebar-button{visibility:hidden ! important;}
#mw-head li.selected, #mw-head li.selected a:not(.new) { background:none !important; color: #fafafa !important; font-weight:bold;}
#mw-head-base { border-bottom: 5px solid #1793d0 !important;} /* old skin */

#archnavbar { border-bottom: none !important; }
header.mw-header { border-bottom: 5px solid #1793d0 !important; padding: 0 20pt 0 !important; background-color:#333 !important; color: #fafafa !important;}
body {background-color:#333 !important;}
div.mw-page-container {padding:0 !important;}
div.mw-workspace-container {padding: 0 20pt 0 !important;}
#mw-panel {left:1em !important;}
#p-personal-checkbox, #mw-sidebar-button{box-shadow:none !important; border:none !important;}

/* search */
#searchform { display:inline !important;}
#simpleSearch, div.wvui-typeahead-search { height:100% !important; width:25em !important; display:block !important; margin-left:auto !important;}
#searchform .wvui-icon, #searchform .wvui-typeahead-search__submit { display:none !important; }
#searchform #simpleSearch, #searchform .wvui-input__input {box-shadow:none !important; border:1px solid white !important; padding: 0 1em 0; font-size:0.8125em; width:100%; right:0!important;}
#searchform * {border:none; background:none!important; color:#fafafa!important;}

#searchform .wvui-typeahead-search__wrapper * {background-color:#333!important;}
/* light search popup */
/*#searchform .wvui-typeahead-search__wrapper * {background-color:#fafafa!important; color:#333!important;}
#searchform .wvui-typeahead-search__wrapper input {background-color:#333!important;}*/
/* ------------ */

/* light search popup */
#searchform .wvui-typeahead-search__wrapper * {background-color:#fafafa!important; color:#333!important;}
/* #searchform .wvui-typeahead-search__wrapper input {background-color:#333!important;} */
/* ------------ */

#searchform .wvui-input__input:focus {border:1px solid #1793d0 !important;}
.wvui-typeahead-search--show-thumbnail .wvui-input__input {width: 100% !important; left: 0 !important;}
#p-search h3 {display:none!important;}

seth · 2022-04-05 12:23:44

s/not/barely

.mw-ui-icon-wikimedia-ellipsis:before {background-image:none !important; vertical-align: text-bottom !important; content:"…" !important; color:white !important;}
#mw-sidebar-button:before {background-image:none !important; white-space: pre-wrap !important; content:"☰" !important; color:white !important;}

Lone_Wolf · 2022-04-06 18:44:43

looking very carefully close to the screen the 3 dots were indeed a bit darker then their surroundings.

The white makes them very visible, thanks.

seth · 2022-04-06 20:14:37

Thanks for kicking my derrier
I was aware of this but those are svgs w/ hardcoded colors, my montitor is well enough calibrated to not have every dark gray drown into blackness and I didn't care

Actually better approach

.mw-ui-icon-wikimedia-ellipsis:before {filter: invert(100%) !important;}
#mw-sidebar-button:before  {filter: invert(100%) !important;}

Trilby · 2022-04-06 20:31:47

It'd be helpful to update the title of this thread. When it started, the context was clear as it was what everyone seemed to be talking / yelling about. But most of those threads are either binned or just burried in the history, but this one is still useful. So it should get a useful title.

EDIT: thanks.

Last edited by Trilby (2022-04-06 20:47:55)

seth · 2022-04-06 20:40:37

True.

thoffmeyer · 2022-04-19 04:55:06

Beautiful.

hoffer · 2022-09-10 18:24:22

Seth, can you please get rid of those bananas, they stick out and distract my attention. I want the wiki be text only...

seth · 2022-09-10 20:28:38

For context and future readers: https://bbs.archlinux.org/viewtopic.php?id=279609

I'll leave it here for the moment because idk. what's gonna happen with this going forward, simply add

/* Fun fact: I really don't like the taste of Bananas…  APPLES FTW! */
* > .mw-headline::before {
  color: #666 !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size:0.8em !important;
  padding-right:0.5em !important;
}

h2 > .mw-headline::before { content: counter(h2-section) " " !important; }
h3 > .mw-headline::before { content: counter(h2-section) "." counter(h3-section) " " !important; }
h4 > .mw-headline::before { content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) " " !important; }
h5 > .mw-headline::before { content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) "." counter(h5-section) " " !important; }
h6 > .mw-headline::before { content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) "." counter(h5-section) "." counter(h6-section) " " !important; }

hoffer · 2022-09-10 20:51:06

God bless you!

Arch Linux

#1 2021-12-31 17:39:53

Userstyle to improve the default, mobile-centric, Archlinux wiki

#2 2022-01-03 13:31:34

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#3 2022-02-11 15:08:12

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#4 2022-02-11 23:28:07

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#5 2022-02-15 16:50:01

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#6 2022-02-17 11:28:55

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#7 2022-03-05 06:56:01

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#8 2022-03-05 07:01:13

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#9 2022-04-05 08:59:47

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#10 2022-04-05 12:23:44

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#11 2022-04-06 18:44:43

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#12 2022-04-06 20:14:37

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#13 2022-04-06 20:31:47

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#14 2022-04-06 20:40:37

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#15 2022-04-19 04:55:06

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#16 2022-09-10 18:24:22

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#17 2022-09-10 20:28:38

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

#18 2022-09-10 20:51:06

Re: Userstyle to improve the default, mobile-centric, Archlinux wiki

Board footer