DarkArch [WIP] by riedler

DarkArch [WIP] screenshot
Homepage Install Get Stylus Write a review

Details

Authorriedler

LicenseCC BY-SA 4.0

Created atApril 09, 2021 09:06

Updated atApril 25, 2021 10:07

Applies toarchlinux.org

Statistics

Learn how we calculate statistics in the FAQ.

Total views142

Total installs229

Weekly installs13

Weekly updates14

Description

Dark style for archlinux.org minus the Arch wiki

Notes

Version: 0.1.1
Changelog:
- Still work-in-progress

History

Daily snapshots of style statistics.

2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.001.402.804.205.506.908.309.7011.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.0029.0058.0087.00115.00144.00173.00202.00230.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Dark Arch
@namespace      https://github.com/RiedleroD/userstyles-riedler/
@version        0.1.1
@description    Dark mode for archlinux.org (except for 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"		#068
@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"				#06A
@var	color	hlnk	"Hovered Link"		#58C
@var	color	vlnk	"Visited Link"		#86A
@var	color	slc		"Selections"		#000
@var	color	rd		"Red"				#922
==/UserStyle== */

@-moz-document regexp("https?:\\/\\/(?:(?!wiki)[^\\/])*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]]*/;}
	/*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:/*[[rd]]*/}
	.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;}
	#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;}
	#brdmenu a,
	#brdmenu a:link,
	#brdmenu a:visited{
		background:none;
		border-color:#0000;}
	/*text related stuff*/
	a:link,
	.pun a,
	.pun a:link,
	.pun a:visited{
		color:/*[[lnk]]*/;}
	a:link:hover{
		color:/*[[hlnk]]*/;}
	.pun a:hover,
	#brdmain a:hover{
		color:/*[[hlnk]]*/ !important;}
	a:visited,
	#brdmain a:visited{
		color:/*[[vlnk]]*/;}
	pre{
		background-color:/*[[bg0]]*/;
		color:/*[[htxt]]*/;
		border-color:/*[[brd]]*/;
		border-radius:/*[[brdr]]*/;}
	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]]*/;}
	code{
		background-color:/*[[bg0]]*/;
		color:/*[[txt]]*/;
		outline:solid 1px #000;}
	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;
		cursor:pointer;}
	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]]*/;}
	/*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 regexp("https?:\\/\\/(www|aur)\\.archlinux\\.org\\/?(\\?.*)?"){
	/*home*/
	dl dt{
		color:/*[[dtxt]]*/;}
	#news h3 a{
		background-color:/*[[cl1]]*/;}
	h3 span.arrow{
		border-top-color:/*[[cl1]]*/;}
}
@-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]]*/;}
}

Reviews

No reviews yet.