You are not logged in.
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
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
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
#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
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
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
There's an option to disable the new layout but to access it you have to be logged in.
Offline
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
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
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
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
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;}
Offline
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
True.
Offline
Beautiful.
Offline
Seth, can you please get rid of those bananas, they stick out and distract my attention. I want the wiki be text only...
Offline
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
God bless you!
Offline
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
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
Look, Daddy! I fixed the wiki.
Offline