You are not logged in.

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

seth
Member
Registered: 2012-09-03
Posts: 28,792

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

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


/*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 (2022-04-06 20:39:40)

Offline

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

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

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: 10,065

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.
Did you use the guided installer ? If yes, I can't help you.

(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: 28,792

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: 28,792

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: 10,065

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.
Did you use the guided installer ? If yes, I can't help you.

(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: 45

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: 28,792

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: 10,065

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.
Did you use the guided installer ? If yes, I can't help you.

(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: 28,792

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: 10,065

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.
Did you use the guided installer ? If yes, I can't help you.

(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: 28,792

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: 26,692
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: 28,792

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

Board footer

Powered by FluxBB