You are not logged in.

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

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)

Offline

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

fabertawe
Member
From: Lloegr
Registered: 2009-11-24
Posts: 279

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

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)


Ryzen 9 5950X, X570S Aorus Pro AX, RX 6600, Arch x86_64

Offline

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

Lone_Wolf
Member
From: Netherlands, Europe
Registered: 2005-10-04
Posts: 11,580

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

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 ?


Disliking systemd intensely, but not satisfied with alternatives so focusing on taming systemd.


(A works at time B)  && (time C > time B ) ≠  (A works at time C)

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

#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.

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

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?

Offline

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

Lone_Wolf
Member
From: Netherlands, Europe
Registered: 2005-10-04
Posts: 11,580

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

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.


Disliking systemd intensely, but not satisfied with alternatives so focusing on taming systemd.


(A works at time B)  && (time C > time B ) ≠  (A works at time C)

Offline

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

ubone
Member
Registered: 2014-08-31
Posts: 47

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

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

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

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.

Offline

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

Lone_Wolf
Member
From: Netherlands, Europe
Registered: 2005-10-04
Posts: 11,580

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

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

Disliking systemd intensely, but not satisfied with alternatives so focusing on taming systemd.


(A works at time B)  && (time C > time B ) ≠  (A works at time C)

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

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

Offline

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

Lone_Wolf
Member
From: Netherlands, Europe
Registered: 2005-10-04
Posts: 11,580

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

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.


Disliking systemd intensely, but not satisfied with alternatives so focusing on taming systemd.


(A works at time B)  && (time C > time B ) ≠  (A works at time C)

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

Thanks for kicking my derrier smile
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 tongue

Actually better approach

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

Offline

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

Trilby
Inspector Parrot
Registered: 2011-11-29
Posts: 29,095
Website

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

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)


"UNIX is simple and coherent..." - Dennis Ritchie, "GNU's Not UNIX" -  Richard Stallman

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

True.

Offline

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

thoffmeyer
Member
From: Chi
Registered: 2006-07-27
Posts: 91

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

Beautiful.

Offline

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

hoffer
Banned
From: Latvia
Registered: 2022-02-07
Posts: 13
Website

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

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


https://ugjka.net

I'm ugjka, I lost my account

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

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

Offline

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

hoffer
Banned
From: Latvia
Registered: 2022-02-07
Posts: 13
Website

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

God bless you!


https://ugjka.net

I'm ugjka, I lost my account

Offline

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

Lone_Wolf
Member
From: Netherlands, Europe
Registered: 2005-10-04
Posts: 11,580

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

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)


Disliking systemd intensely, but not satisfied with alternatives so focusing on taming systemd.


(A works at time B)  && (time C > time B ) ≠  (A works at time C)

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

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.

Offline

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

seth
Member
Registered: 2012-09-03
Posts: 44,981

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

Look, Daddy! I fixed the wiki.

Offline

Board footer

Powered by FluxBB