darkarch.user.css

/* ==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]]*/;
	}
}