/* ==UserStyle== @name Dark Arch @namespace https://github.com/RiedleroD/userstyles-riedler/ @version 0.1.4 @description Dark mode for archlinux.org (except for gitlab and the wiki) @author Riedler @preprocessor uso @var color bg0 "Background 0" #111 @var color bg1 "Background 1" #151515 @var color bg2 "Background 2" #222 @var color bg3 "Background 3" #282828 @var color bg4 "Background 4" #333 @var color cl1 "Main Color" #418BA4 @var color brd "Border" #888 @var color hbrd "Light Border" #AAA @var text brdr "Border Radius" 0.25em @var color dtxt "Dark Text" #888 @var color txt "Text" #AAA @var color htxt "Bright Text" #CCC @var color hhtxt "White Text" #FFF @var color lnk "Link" #418BA4 @var color hlnk "Hovered Link" #6AC @var color vlnk "Visited Link" #86A @var color slc "Selections" #000 @var color fals "False/Red" #922 @var color hfals "Light False/Red" #E55 @var color idk "Maybe/Yellow" #A50 @var color hidk "Light Maybe/Yellow"#FA0 @var color tru "True/Green" #262 @var color htru "Light True/Green" #6C6 ==/UserStyle== */ @-moz-document regexp("https?:\\/\\/(?:(?!wiki)(?!gitlab)[^\\/])*archlinux.org(/.*)?"){ /*scrollbars (yes you can style those)*/ ::-webkit-scrollbar,::-webkit-scrollbar-track-piece{ background-color:/*[[bg1]]*/ !important;} ::-webkit-scrollbar-corner,::-webkit-scrollbar-thumb{ background-color:/*[[bg3]]*/ !important; border-radius:/*[[brdr]]*/;} :root{/*for firefox*/ scrollbar-width:thin; scrollbar-color:/*[[cl1]]*/ /*[[bg0]]*/; color-scheme:dark; } /*text selctions (yes you can style those too)*/ ::selection{ background-color:/*[[slc]]*/; color:/*[[hhtxt]]*/;} /*various blocks*/ :root,body, #content,#punindex{ background-color:/*[[bg0]]*/; color:/*[[txt]]*/;} div.box{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/;} #pkgdetails #detailslinks > div{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/;} #pkgdetails #metadata h3{ background-color:/*[[bg4]]*/; color:/*[[htxt]]*/;} div#menu, div#pm-menu, div#search, fieldset, div#search fieldset, div#tasklist, div#taskinfo, div#fineprint, table.userlist, #punviewforum, .pun, .pun .blockpost, .pun .blockpost .postbody, .pun .blockpost .postfoot{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/; color:/*[[txt]]*/;} div#taskdetails, div#related, div#comments, div#history, .pun .punwrap, .pun .blocktable .box{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/; color:/*[[txt]]*/;} div#taskclosed{ background-color:/*[[bg2]]*/; border-color:/*[[fals]]*/} .pun .blockpost h2, .pun .quotebox{ background-color:/*[[bg4]]*/; border-color:/*[[brd]]*/; color:/*[[htxt]]*/;} div.attachments{ background-color:/*[[bg3]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/; background-blend-mode:exclusion;} /*navbars & menus*/ #archnavbar{ border-bottom-color:/*[[cl1]]*/ !important;} #archnavbarlogo{ filter:hue-rotate(354deg) saturate(50%) brightness(115%); } #submenu a{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/ /*[[brdr]]*/ 0 0;} #submenu a:hover{ background-color:/*[[bg3]]*/; color:/*[[htxt]]*/;} #submenu a.active{ background-color:/*[[bg3]]*/; color:/*[[txt]]*/; border-color:/*[[hbrd]]*/;} #brdmenu{ background:none;} /*text related stuff*/ a:link, .pun a, .pun a:link, .pun a:visited{ color:/*[[lnk]]*/;} #brdmenu a, #brdmenu a:link, #brdmenu a:visited{ background:none; border-color:#0000; color:/*[[lnk]]*/; } a:link:hover{ color:/*[[hlnk]]*/;} .pun a:hover, #brdmain a:hover{ color:/*[[hlnk]]*/ !important;} a:visited, #brdmain a:visited{ color:/*[[vlnk]]*/;} .pun a:active, #brdmain a:active{ color:/*[[hlnk]]*/ !important; } span#searchstate a, .pun .postmsg, #punhelp code, #punhelp samp{ color:/*[[txt]]*/;} span#searchstate a:hover, fieldset legend, .pun .quotebox cite{ color:/*[[htxt]]*/;} .pun label, .pun legend, #adminconsole fieldset th, .pun .postsignature, .pun .postmsg .postedit{ color:/*[[dtxt]]*/;} /*codeblocks*/ /* testing URLs: https://bbs.archlinux.org/viewtopic.php?id=274693 https://archlinux.org/news/libxml22912-6-update-may-require-manual-intervention/ https://aur.archlinux.org/cgit/aur.git/tree/PKGBUILD?h=nosefart */ .pun .codebox{ background-color:/*[[bg0]]*/; color:/*[[htxt]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/; } pre{ border:none; border-radius:/*[[brdr]]*/; background-color:/*[[bg0]]*/; color:/*[[txt]]*/; outline:solid 1px /*[[brd]]*/; } code{ background-color:/*[[bg0]]*/; color:/*[[txt]]*/; outline:solid 1px #000; } .pun .codebox pre, .pun .codebox code{ outline:none; } pre code{ outline:none; } /*various input elements*/ select{ background-color:/*[[bg3]]*/; color:/*[[txt]]*/; border:solid 1px /*[[brd]]*/; border-radius:/*[[brdr]]*/;} select:not([multiple]){ appearance:none; background-image:url("https://riedler.wien/sfto/darklearning/double_triangles_top_bottom_AAA.svg"); background-repeat:no-repeat; background-size:0.75em; background-position:center right 0.125em; cursor:pointer; padding-right:1em;} select:not([multiple]):hover{ background-color:/*[[bg4]]*/; color:/*[[htxt]]*/;} option:hover{ background-color:/*[[bg4]]*/; color:/*[[htxt]]*/; cursor:pointer;} option{ box-shadow:none !important;} button, a.button{ background-color:/*[[bg3]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/; color:/*[[txt]]*/;} button:hover, a.button:hover{ background-color:/*[[bg4]]*/; color:/*[[htxt]]*/;} input[type="text"], input[type="password"]{ background-color:/*[[bg3]]*/; color:/*[[txt]]*/; border:solid 1px /*[[brd]]*/; border-radius:/*[[brdr]]*/;} input[type="submit"]{ appearance:none; background-color:/*[[bg3]]*/; color:/*[[txt]]*/; border:solid 1px /*[[brd]]*/; border-radius:/*[[brdr]]*/; cursor:pointer;} input[type="submit"]:hover{ background-color:/*[[bg4]]*/; color:/*[[htxt]]*/;} input[type="checkbox"]{ appearance:none;} input[type="checkbox"]:after{ width:1em; height:1em; background-color:/*[[bg3]]*/; display:inline-block; content:""; text-align:center; vertical-align:middle; border-radius:/*[[brdr]]*/; padding:0.05em; line-height:1em; cursor:pointer; border:solid 1px /*[[brd]]*/;} input[type="checkbox"]:checked:after{ content:"\02713";} input[type="checkbox"]:hover:after{ background-color:/*[[bg4]]*/; color:/*[[htxt]]*/;} input[type="radio"]{ appearance:none; width:1em; height:1em; background-color:/*[[bg3]]*/; border:solid 1px /*[[brd]]*/; border-radius:100%;} input[type="radio"]:checked{ box-shadow:inset 0 0 0 0.2em /*[[bg3]]*/; background-color:/*[[txt]]*/;} textarea{ background-color:/*[[bg0]]*/; border:solid 1px /*[[brd]]*/; color:/*[[txt]]*/; border-radius:/*[[brdr]]*/; } /*various tables*/ table.styled-table tr td{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/;} table.styled-table{ border-color:/*[[brd]]*/; /*TODO: fix border radius not being applied. It has something to do with the border collapse but I'm too lazy to fix it now without fucking up the table borders. Example: https://security.archlinux.org/package/sl*/ border-radius:/*[[brdr]]*/; background-color:/*[[bg2]]*/;} .results{ border-color:/*[[brd]]*/;} .results tr:nth-child(2n+1), #article-list tr:nth-child(2n+1){ background-color:/*[[bg2]]*/;} .results tr:nth-child(2n), #article-list tr:nth-child(2n){ background-color:/*[[bg3]]*/;} #article-list tr:hover, #clocks-table tr:hover, #dev-dashboard tr:hover, #dev-todo-lists tr:hover, #dev-todo-pkglist tr:hover, #pkglist-results tr:hover, #stats-area tr:hover{ background-color:/*[[bg4]]*/;} .results th{ background-color:/*[[bg4]]*/; border-color:/*[[brd]]*/;} div#tasklist table td{ border-bottom:1px solid /*[[brd]]*/;} td.task_summary a:hover{ color:/*[[hlnk]]*/ !important;} td.task_summary a:visited{ color:/*[[vlnk]]*/ !important;} td#taskfieldscell{ border-right-color:/*[[brd]]*/;} .pun .blocktable td{ border-color:/*[[brd]]*/;} .pun .blocktable th{ background-color:/*[[bg3]]*/; border-color:/*[[brd]]*/; color:/*[[htxt]]*/;} #punindex .blocktable h2, .pun #vf h2{ color:/*[[htxt]]*/;} /*bug severity*/ .severity1{ background-color:#432 !important; color:/*[[txt]]*/;} .severity1:hover{ background-color:#543 !important; color:/*[[htxt]]*/;} .severity2{ background-color:#631 !important; color:/*[[txt]]*/;} .severity2:hover{ background-color:#742 !important; color:/*[[htxt]]*/;} .severity3{ background-color:#822 !important; color:/*[[txt]]*/;} .severity3:hover{ background-color:#933 !important; color:/*[[htxt]]*/;} .severity4{ background-color:#911 !important; color:/*[[txt]]*/;} .severity4:hover{ background-color:#A22 !important; color:/*[[htxt]]*/;} .severity5{ background-color:#000 !important; background-image:repeating-linear-gradient(10deg, #000 0%, #440 1%,#000 2%) !important; color:/*[[htxt]]*/;} .severity5:hover{ background-color:#000 !important; background-image:repeating-linear-gradient(10deg, #000 0%, #550 1%,#000 2%) !important; color:/*[[hhtxt]]*/;} /*misc*/ h2.summary{ border-radius:/*[[brdr]]*/;} #pkgsearch{ background-color:/*[[bg2]]*/; border-color:/*[[cl1]]*/; border-radius:/*[[brdr]]*/;} #pkgsearch input{ background-color:/*[[bg2]]*/; border-color:/*[[cl1]]*/; color:/*[[txt]]*/;} .pkgsearch-typeahead{ background-color:/*[[bg3]]*/; border-color:/*[[cl1]]*/; border-radius:/*[[brdr]]*/;} .pkgsearch-typeahead li a{ color:/*[[txt]]*/;} .pkgsearch-typeahead li:hover{ background-color:/*[[bg4]]*/; cursor:pointer;} .pkgsearch-typeahead li:hover a{ text-decoration:underline;} .pun .icon{/*not sure what these are exactly*/ border-color:/*[[bg4]]*/;} /*image replacement or filters*/ img[src~="/static/icons8_logo.91378e9a3b77.png"]{ filter:invert(0.8) hue-rotate(180deg);} img[src^="https://bugs.archlinux.org/themes/ArchLinux/percent-"]{ filter:brightness(2) saturate(0.5);} .datelink>img{ filter:brightness(0.85);} .attachments>a>img[src$="text.png"]{ filter:brightness(0.6) contrast(3);} } @-moz-document domain("www.archlinux.org"), domain("aur.archlinux.org"){ /*home*/ dl dt{ color:/*[[dtxt]]*/;} #news h3 a{ background-color:/*[[cl1]]*/;} h3 span.arrow{ border-top-color:/*[[cl1]]*/;} } @-moz-document domain("aur.archlinux.org"){ div#cgit table.tabs, div#cgit div.content{ border-bottom-color:/*[[bg3]]*/; } div#cgit table.tabs td a.active{ background-color:/*[[bg3]]*/; color:/*[[txt]]*/; } div#cgit div.path{ background-color:/*[[bg3]]*/; color:/*[[txt]]*/; } div#cgit a, div#cgit table.diffstat td.upd a{ color:/*[[lnk]]*/; } div#cgit a:hover, div#cgit table.diffstat td.upd a:hover{ color:/*[[hlnk]]*/; } div#cgit table.blob td.linenumbers{ border:solid 1px /*[[brd]]*/; border-right:none; border-radius:0.25em 0 0 0.25em; padding:calc(0.25em + 1px) 0.5em; } div#cgit table.blob td.linenumbers pre{ outline:none; } div#cgit table.blob td.lines{ border:solid 1px /*[[brd]]*/; padding:0.25em 0.5em; border-radius:0 /*[[brdr]]*/ /*[[brdr]]*/ 0; } div#cgit table.blob td.lines pre{ outline:none; } div#cgit table{ /*fixes problem with border-radius*/ border-collapse:separate; border-spacing:0; } /*table lists*/ div#cgit table.list tr, div#cgit table.list tr.nohover:hover{ background-color:/*[[bg0]]*/; } div#cgit table.list tr.logheader, div#cgit table.list tr:hover{ background-color:/*[[bg2]]*/; } div#cgit table.list td a{ color:/*[[txt]]*/; } div#cgit table.list td a:hover{ color:/*[[hlnk]]*/; } /*diff codeblock - unified mode*/ div#cgit table.diff td div.head{ color:/*[[txt]]*/; } div#cgit table.diff td div.hunk{ color:/*[[cl1]]*/; } div#cgit table.diff td div.del{ color:/*[[fals]]*/; } div#cgit table.diff td div.add{ color:/*[[tru]]*/; } /*diff codeblock - ssdiff mode*/ div#cgit table.ssdiff td.head div.head{ color:/*[[txt]]*/; } div#cgit table.ssdiff td.hunk{ background-color:/*[[bg3]]*/; color:/*[[htxt]]*/; border-top:none; } div#cgit table.ssdiff td.lineno{ color:/*[[txt]]*/; background-color:/*[[bg1]]*/; border-right:none; } div#cgit table.ssdiff td.lineno ~ td.lineno{ border-left:none; } div#cgit table.ssdiff td.changed{ color:/*[[hidk]]*/; background-color:/*[[idk]]*/; } div#cgit table.ssdiff td.del, div#cgit table.ssdiff span.del{ background-color:/*[[fals]]*/; color:/*[[hfals]]*/; } div#cgit table.ssdiff td.add, div#cgit table.ssdiff span.add{ color:/*[[htru]]*/; background-color:/*[[tru]]*/; } div#cgit table.ssdiff td.changed_dark, div#cgit table.ssdiff td.add_dark, div#cgit table.ssdiff td.del_dark{ background-color:#0000; } /*diff statistics table*/ div#cgit table.diffstat{ background-color:/*[[bg3]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/; border-collapse:separate; } div#cgit table.diffstat td.graph td.add{ background-color:/*[[tru]]*/; } div#cgit table.diffstat td.graph td.rem{ background-color:/*[[fals]]*/; } /*diff options sideblock*/ div#cgit div.cgit-panel table{ background-color:/*[[bg3]]*/; border-radius:/*[[brdr]]*/; border-collapse:separate; } /*package stats*/ div#cgit table.stats td{ border-color:/*[[brd]]*/; } div#cgit table.stats th{ background-color:/*[[bg3]]*/; border-color:/*[[brd]]*/; color:/*[[htxt]]*/; } div#cgit table.stats td.total{ background-color:/*[[bg3]]*/; color:/*[[htxt]]*/; } div#cgit table.stats td.sum{ background-color:/*[[bg1]]*/; color:/*[[txt]]*/; } div#cgit table.stats td.sum:last-child{ background-color:/*[[bg2]]*/; color:/*[[htxt]]*/; } } @-moz-document domain("security.archlinux.org"){ table th{ background-color:/*[[bg4]]*/; border-color:/*[[brd]]*/;} .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary{ background-color:/*[[cl1]]*/; color:/*[[txt]]*/; border-color:#0000;} .button.button-primary:hover, .button.button-primary:focus, button.button-primary:hover, button.button-primary:focus, input[type="submit"].button-primary:hover, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:hover, input[type="reset"].button-primary:focus, input[type="button"].button-primary:hover, input[type="button"].button-primary:focus{ background-color:/*[[cl1]]*/; color:/*[[htxt]]*/; border-color:#0000; filter:brightness(1.2);} } @-moz-document domain("lists.archlinux.org"){ [bgcolor="#99CCFF"]{ background-color:/*[[cl1]]*/;} [bgcolor="#FFF0D0"]{ background-color:/*[[bg4]]*/;} [bgcolor="#dddddd"]{ background-color:/*[[bg3]]*/;} font[color="#000000"]{ color:/*[[htxt]]*/;} } @-moz-document domain("bbs.archlinux.org"){ /*new message*/ .pun .blockform .box, #adstats, #adintro, #postpreview, #posterror{ border-color:/*[[brd]]*/; background-color:/*[[bg3]]*/; } .pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2, #pundelete .blockform h2{ background-color:/*[[bg3]]*/; color:/*[[txt]]*/; border-top-left-radius:/*[[brdr]]*/; } .pun .infldset, #adintro .inbox, #adstats .inbox{ background-color:/*[[bg3]]*/; border:none; } .pun .inform > fieldset{ background-color:/*[[bg3]]*/; } /*menu*/ .pun .blockmenu ul, .pun .blockmenu li{ border-color:/*[[brd]]*/; } .pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited, .pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus{ background-color:/*[[bg4]]*/; } /*rulebox*/ #punmisc #rules .box, #punhelp .box{ border-color:/*[[brd]]*/; background-color:/*[[bg3]]*/; } /*userlist table*/ .pun #users1 h2{ background-color:#0000; } /*a checklist*/ .pun .checklist{ background-color:/*[[bg2]]*/; border-color:/*[[brd]]*/; border-radius:/*[[brdr]]*/; } /*topics*/ .pun .inew .icon{ border-color:/*[[lnk]]*/; } /*hr before signatures*/ .pun .postmsg hr{ background-color:/*[[brd]]*/; } }