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

/* integrate search bar with header */
#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, fall 2023 ============================================ */
/* unfold the toc */
li.vector-toc-list-item {display:block!important;}
button.vector-toc-toggle {display:none!important;} /**/

/*layout*/
div.vector-toc { padding:1em!important; width:100%!important; }
#mw-panel-toc {margin:0px!important;}
div.mw-page-container-inner{grid-template-columns: 25% minmax(0px, 1fr)!important;}
div#vector-toc-pinned-container {margin:0px!important;}
#content{padding-right:2em!important;}
#siteNotice{margin:0pt!important;}

/* main menu: help, main page & other useless stuff */
#vector-main-menu{margin:0px!important; background-color:#333!important; color:#aaa!important;}
#vector-main-menu .vector-menu-heading {color:#aaa!important; border-color:#555!important;}
#mw-panel #vector-main-menu  a{color:#1793d0!important;}
#mw-panel #vector-main-menu a:hover{color:#1cb4ff!important; text-decoration:none!important;}
/* ============================================ */

/* HEADERS:
Fun fact: I really don't like the taste of Bananas… */
/* segment numbers */
* > .mw-headline::before { content: none !important; margin-right:0 !important; }
/* look */
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;}

/* Visited links */
#content a:not(.new):not([role=button]):visited, #mw-panel li:not(.new) a:not(.new):not([role=button]):visited, #p-navigation li:not(.new) a:not(.new):not([role=button]):visited, #p-tb li:not(.new) a:not(.new):not([role=button]):visited {
    color: #d01792 !important;
}

Last edited by seth (2023-11-05 14:47:04)

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!

Lone_Wolf · 2023-10-02 10:03:00

It looks like something has changed again very recently in the wiki, as the contents table only shows chapter names.

No numbers before them, also no clickable 'buttons' to expand/collapse them.

Edit : numbers are still missing, but clicking on a chapter title now expands what is under it.
Definitely looks like wiki admins are experimenting.
end of edit

My style hasn't changed in a log time, I've posted it again for reference.

#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(18% + 32pt + 3em) !important;}
#toc ul {margin-left:0.5em !important;}
#toc ~ * {margin-left:calc(18% + 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;}

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

Last edited by Lone_Wolf (2023-10-02 11:37:22)

seth · 2023-10-02 12:40:22

I noticed it yesterday. Was going to wait whether there's more action today, then gonna update the style.
Right now (yesterday) it was basically unusable.

seth · 2023-10-02 15:00:32

Look, Daddy! I fixed the wiki.

Lone_Wolf · 2023-12-30 10:30:44

It seems the archlinux man pages suffer from similar issues as the wiki, see https://lists.archlinux.org/hyperkitty/ … EEVXPHUWC/

Maybe the solution is also similar ?

blero · 2023-12-30 15:12:17

You do not have to code/use a whole userstyle to change the wiki's skin.
All you have to do is go to ArchWiki preferences → Appearance and select "Vector legacy (2010)".
If you don't have an account, install some sort of extension that can automatically append ?useskin=vector to most pages and &useskin=vector to pages under index.php .

I also still don't understand those who claim a fixed width (which you can disable with the bottom-right button) and icons in place of text are mobile-centric... IMO it just reads better and looks less cluttered, not to mention the discord between the notification buttons and text, plus the organization of floating tools on the right reduces the need to scroll down on the left and such. Also, the numbers on the TOC have been restored.

Last edited by blero (2023-12-30 15:15:04)

seth · 2023-12-30 16:14:32

@Lone_Wolf

body {color:#272727!important; background:#fafafa!important;min-width:auto!important;}
#content-left {max-width:none!important;}
.man-page-content pre {white-space:pre!important; border:1px solid #46640b; background:#dfe6d1!important; padding:1em!important;}
p.Pp i {font-weight:bold!important;}
table,tr, td {border-color:#999!important;}
.man-page-content table.tbl th, .man-page-content table.tbl tr:first-child td:not(:only-child) {background:#1793d0!important;color:white!important;}

@blero, no but you can - and not be subject to the latest mediawiki brainfarts.
Also maybe look at the date of the OP and then search the forum for related debates (mostly in the dustbin, maybe also check for bananas…)
If you ever wondered why the EvilWikiAdmin has that tag, that's why.

As a matter of fact, the default wiki style has actually much developed into the direction of the first userstyle I ever posted here. To the point where today it's mostly about colors.

And just ftr, the reason why it's not helpful to hardcode a width is that there're actually people who look at this on a real monitor and I pointed out in one of those (probably dustbinned threads) why the (back then) limitation to 60 chars was likely a misappliance of recommendation for novels on technical documents. And borderline unsuable. The default mediawiki style looked much different than today.

blero · 2023-12-30 16:17:34

Ah, that makes sense.

I don't get why technical documents should be absolutely long though- I get why maybe the code blocks should be unlimited, but everything else is just standard text which still reads better in limited width.

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

#19 2023-10-02 10:03:00

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

#20 2023-10-02 12:40:22

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

#21 2023-10-02 15:00:32

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

#22 2023-12-30 10:30:44

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

#23 2023-12-30 15:12:17

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

#24 2023-12-30 16:14:32

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

#25 2023-12-30 16:17:34

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

Board footer