JavaDarks by riedler

Imported and mirrored from https://github.com/RiedleroD/userstyles-riedler/raw/master/javadarks.user.css

JavaDarks screenshot
Install Get Stylus Write a review

Details

Authorriedler

LicenseCC-BY-SA-4.0

Created

Updated

Categoryjava

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Description

Dark mode for the online javadocs - currently only supports java 7,8 and 13!

Notes

Version: 2.0.0

  • complete rewrite of the old shitty style
  • added support for java 7,8 and 13

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name			JavaDarks
@namespace		https://github.com/RiedleroD/userstyles-riedler/
@version		2.0.0
@license		CC-BY-SA-4.0
@description	Dark mode for the online javadocs - currently only supports java 7,8 and 13!
@author			Riedler
@preprocessor	less
@var	color	bg0		"Background 0"	"#000"
@var	color	bg1		"Background 1"	"#151515"
@var	color	bg2		"Background 2"	"#222"
@var	color	bg3		"Background 3"	"#333"
@var	color	brd		"Border"		"#888"
@var	color	txt		"Text"			"#CCC"
@var	color	htxt	"Bright Text"	"#EEE"
@var	color	dtxt	"Dark Text"		"#AAA"
@var	color	lnk		"Links"			"#418BA4"
@var	color	hlnk	"Hovered links"	"#6AC"
@var	color	fals	"False/Error"	"#922"
@var	color	idk		"Unknown/Warning"	"#A60"
==/UserStyle== */

@didk: darken(@idk,20%);
@midk: darken(@idk,10%);
@hidk: lighten(@idk,10%);
@hhidk: lighten(@idk,20%);

@dfals: darken(@fals,20%);
@hfals: lighten(@fals,20%);

@-moz-document regexp("^https?://docs\\.oracle\\.com/javase/7/docs/api/.*"){
	//Java 7
	//WARNING: EXTREMELY FINICKY! Always test everything after touching anything here
	body{
		background-color:@bg0;
		color:@txt;
	}
	.topNav{
		background:linear-gradient(to bottom,@bg2,@bg1);
		padding-top:0.75rem;
		color:@dtxt;
	}
	.bottomNav{
		background:linear-gradient(to bottom,@bg2,@bg1);
		border-top:solid 1px @brd;
		color:@dtxt;
		&+.subNav{
			border-bottom:none;
		}
	}
	.legalCopy{
		float:left;
		width:calc(100% - 1em);
		margin:0;
		padding:0.5em;
		background:linear-gradient(to bottom,@bg1,@bg0);
	}
	ul.navList li.navBarCell1Rev{
		background-image:none;
		background-color:@didk;
		outline:solid 1px @idk;
		border:none;
		color:@hidk;
		border-radius:0 0 0.25em 0.25em;
		margin:-0.75rem 0 0 0;
		padding-top:calc(0.75rem + 3px);
	}
	.subNav{
		background-color:@bg1;
		border-color:@brd;
	}
	.header{
		margin:0 1em 1em 1em;
		padding:0.2em 1em;
		border:solid 1px @brd;
		border-top:none;
		background-color:@bg1;
		//why not margin? ask clearfix
		transform: translateY(-1px);
		&+&{
			margin-top:-1em;
		}
	}
	.title{
		color:@txt;
	}
	.contentContainer,
	.sourceContainer,
	.classUseContainer,
	.serializedFormContainer,
	.constantValuesContainer{
		margin:1em;
		padding:0;
	}
	.description,
	.details{
		.contentContainer & dl dt{
			&:extend(.serializedFormContainer dl dt);
		}
	}
	.serializedFormContainer dl dt{
		color:@txt;
	}
	hr{
		margin: 0 -1em;
	}
	ul.blockList{
		& & li.blockList,
		& &Last li.blockList{
			border:solid 1px @brd;
			background-color:@bg1;
			border-left:none;
			border-right:none;
			ul.blockList &{
				border:solid 1px @brd;
				background-color:@bg2;
				border-radius:0.25em 0.25em 0 0;
				div.details & h4{
					background-color:@bg3;
					border-color:@brd;
					border-top:none;
					border-radius:0.25em 0.25em 0 0;
				}
			}
		}
		& & li.blockList{
			ul.blockList & h3{
				background-color:@bg3;
				border-color:@brd;
				border-top:none;
				border-radius:0.25em 0.25em 0 0;
			}
			& table{
				margin:0.75em;
				width:calc(100% - 1.5em);
			}
		}
		.classUseContainer & &{
			margin:0 -1em;
		}
	}
	.overviewSummary,
	.packageSummary,
	.contentContainer ul.blockList li.blockList,
	.summary,
	.classUseContainer,
	.constantValuesContainer{
		& caption{
			margin-bottom:-1px;
			& span{
				padding:0.5em 1em;
				background-image:none;
				color:@hidk;
				background-color:@didk;
				border:solid 1px @idk;
				border-bottom:none;
				border-radius:0.25em 0.25em 0 0;
			}
		}
	}
	.summary,
	.details{
		margin:0 -1em;
	}
	caption a{
		&:link,
		&:hover,
		&:active,
		&:visited{
			color:@hidk;
			border-bottom:solid 1px @hidk;
		}
	}
	.tabEnd{
		display:none !important;
	}
	.contentContainer,
	.classUseContainer,
	.constantValuesContainer{
		& table{
			border-bottom-color:@brd;
		}
	}
	td,th{
		&.colFirst,
		&.colLast,
		&.colOne,
		.constantValuesContainer &{
			background-color:@bg1;
			border-color:@brd;
		}
	}
	tr.altColor td{
		background-color:@bg2;
	}
	table[border]:not([border="0"]){
		border:none;
		border-collapse:collapse;
	}
}
@-moz-document regexp("^https?://docs\\.oracle\\.com/javase/8/docs/api/.*"){
	//Java 8
	//WARNING: EXTREMELY FINICKY! Always test everything after touching anything here
	body{
		background-color:@bg0;
		color:@txt;
	}
	.topNav{
		background:linear-gradient(to bottom,@bg2,@bg1);
		padding-top:0.75rem;
		color:@dtxt;
	}
	.bottomNav{
		background:linear-gradient(to bottom,@bg2,@bg1);
		border-top:solid 1px @brd;
		color:@dtxt;
		&+.subNav{
			border-bottom:none;
		}
	}
	.subNav{
		background-color:@bg1;
		border-bottom:solid 1px @brd;
	}
	.legalCopy{
		float:left;
		width:calc(100% - 1em);
		margin:0;
		padding:0.5em;
		background:linear-gradient(to bottom,@bg1,@bg0);
	}
	ul.navList li.navBarCell1Rev{
		background-image:none;
		background-color:@didk;
		outline:solid 1px @idk;
		border:none;
		color:@hidk;
		border-radius:0 0 0.25em 0.25em;
		margin:-0.75rem 0 0 0;
		padding-top:calc(0.75rem + 3px);
	}
	.header{
		margin:0 1em 1em 1em;
		padding:0.2em 1em;
		border:solid 1px @brd;
		border-top:none;
		background-color:@bg1;
		position:relative;
		&+&{
			margin-top:-1em;
		}
	}
	.block,
	.title{
		color:@txt;
	}
	.overview,
	.member,
	.type,
	.use,
	.constants,
	.deprecated{
		&Summary{
			border:solid 1px @brd;
			& caption{
				margin-bottom:-1px;
				& span{
					background-color:@didk;
					color:@hidk;
					outline:solid 1px @idk;
					border-radius:0.25em 0.25em 0 0;
					&.activeTableTab,
					&.tableTab{
						outline:none;
						margin:0;
						& span{
							margin-right:0.5em;
						}
					}
					&.activeTableTab span{
						background-color:@midk;
						outline-color:@idk;
						color:@hhidk;
					}
					&.tableTab span{
						background-color:@didk;
					}
				}
				& a{
					&:link,
					&:hover,
					&:active,
					&:visited{
						color:@hidk;
						//not underlining those javascript tabs
						&:not([href*="javascript:show"]){
							border-bottom:solid 1px @hidk;
						}
					}
				}
			}
		}
	}
	th.colFirst,
	th.colLast,
	th.colOne,
	.constantsSummary th{
		background-color:@bg1;
		border-bottom:solid 1px @brd;
	}
	.altColor{
		background-color:@bg2;
	}
	.rowColor{
		background-color:@bg1;
	}
	ul.blockList{
		//compensating for lack of indent
		&>li.blockList>table[class*="Summary"]{
			margin:0 1em;
		}
		& & li.blockList,
		& &Last li.blockList{
			background-color:#0000;
			border:none;
			padding:0 1em;
			ul.blockList &{
				border-radius:0.25em 0.25em 0 0;
				background-color:@bg1;
				border:solid 1px @brd;
				div.details & h4,
				& h3{
					border-radius:0.25em 0.25em 0 0;
					background-color:@bg2;
					border:none;
					border-bottom:solid 1px @brd;
				}
			}
			& h3{
				border-radius:0.25em 0.25em 0 0;
				border-bottom:solid 1px @brd;
				margin:0 -1em;
				padding:0 1em 0.5em 1em;
			}
			& table{
				margin:0;
			}
		}
	}
	hr{
		margin:0 -0.5em;
	}
	.contentContainer .description dl dt,
	.contentContainer .details dl dt,
	.serializedFormContainer dl dt{
		color:@txt;
	}
	#footer-banner{
		background-color:@bg0 !important;
		border-top-color:@brd;
		&,& a{
			color:@lnk;
			&:hover,
			&:focus{
				color:@hlnk;
			}
		}
	}
	.bar{
		background-color:@didk;
		color:@hidk;
		border-bottom:solid 1px @idk;
	}
}

@-moz-document regexp("^https?://docs\\.oracle\\.com/\\w+/java/javase/13/docs/api/.*"){
	//Java 13
	//WARNING: EXTREMELY FINICKY! Always test everything after touching anything here
	body{
		background-color:@bg0;
		color:@txt;
	}
	.fixedNav{
		height:0;
		background-color:@bg1;
		position:unset;
		&::after{
			content:"";
			border-bottom:solid 1px @brd;
			display:block;
			position:fixed;
			top:calc(2.8em + 0.75rem + 2.5em);
			width:100%;
			z-index:1;
			font-size:12px;//don't ask…
		}
	}
	.topNav{
		background:linear-gradient(to bottom,@bg2,@bg1);
		padding-top:0.75rem;
		color:@dtxt;
		position:fixed;
		z-index:999;
	}
	.bottomNav{
		background:linear-gradient(to bottom,@bg2,@bg1);
		border-top:solid 1px @brd;
		color:@dtxt;
	}
	.subNav{
		background-color:@bg1;
		position:fixed;
		top:calc(2.8em + 0.75rem);
		z-index:999;
		height:2.5em;
		box-sizing:border-box;
	}
	.legalCopy{
		float:left;
		width:calc(100% - 1em);
		margin:0;
		padding:0.5em;
		background:linear-gradient(to bottom,@bg1,@bg0);
	}
	ul.navList li.navBarCell1Rev{
		background-image:none;
		background-color:@didk;
		outline:solid 1px @idk;
		border:none;
		color:@hidk;
		border-radius:0 0 0.25em 0.25em;
		margin:-0.75rem 0 0 0;
		padding-top:calc(0.75rem + 3px);
	}
	.navPadding{
		font-size:12px;
		padding-top:calc(2.8em + 0.75rem + 2.5em) !important;
		height:0;
	}
	.header{
		padding:0.2em 1em;
		border:solid 1px @brd;
		border-top:none;
		background-color:@bg1;
		position:relative;
		z-index:2;
	}
	#search{
		filter:invert(1);
		border:solid 1px @brd;
		border-radius:0.25em;
	}
	#reset{
		background-color:#0000;
	}
	.ui-widget-content{
		background-color:@bg1;
		color:@txt;
		.ui-widget&{
			border-color:@brd;
		}
	}
	.ui-autocomplete{
		overflow-x:auto;
		&-category{
			background-color:@didk;
			color:@hidk;
			border-bottom:solid 1px @idk;
			border-top:solid 1px @idk;
			border-right:solid 1px @brd;
			position:relative;
			z-index:1;
			&:first-of-type{
				border-top:none;
			}
		}
		ul& li{
			box-sizing:border-box;
		}
	}
	.ui-menu{
		.ui-menu-item{
			list-style-image:none;
			border-right:solid 1px @brd;
		}
		.ui-state-focus,
		.ui-state-active{
			margin:0;
		}
	}
	.ui-state-active,
	:is(.ui-widget-content,.ui-widget-header) .ui-state-active,
	:is(a,*).ui-button:is(:active,.ui-state-active:hover){
		border:none;//why do you have to make it so difficult?
		outline:solid 1px @brd;
		background-image:none;
		background-color:@bg1;
		color:@txt;
	}
	.title,
	.block{
		color:@txt;
	}
	.overviewSummary,
	.memberSummary,
	.typeSummary,
	.packagesSummary{
		[role="tablist"] .tableTab{
			background-color:@didk;
			color:@hidk;
			border:solid 1px @idk;
		}
		[role="tablist"] .activeTableTab{
			background-color:@midk;
			color:@hhidk;
			border:solid 1px @idk;
		}
		[role="tablist"] :is(.tableTab,.activeTableTab){
			border-bottom:none;
			border-radius:0.25em 0.25em 0 0;
			margin-bottom:-1px;
		}
	}
	.overview,
	.member,
	.type,
	.use,
	.constants,
	.deprecated,
	.requires,
	.packages,
	.provides,
	.uses{
		&Summary caption{
			margin:0 0 -1px 0;
			padding-left:0;
			span{
				background-color:@didk;
				color:@hidk;
				border:solid 1px @idk;
				border-bottom:none;
				border-radius:0.25em 0.25em 0 0;
			}
		}
		&Summary table{
			border:solid 1px @brd;
		}
	}
	th.colFirst,
	th.colSecond,
	th.colLast,
	th.colConstructorName,
	th.colDeprecatedItemName,
	.constantsSummary th,
	.packagesSummary th{
		background-color:@bg2;
	}
	.altColor,
	.altColor th{
		background-color:@bg1;
	}
	.rowColor,
	.rowColor th{
		background-color:@bg2;
	}
	.moduleGraph{
		filter:invert(1) hue-rotate(180deg);
	}
	.summary section[class$="Summary"],
	.details section[class$="Details"],
	.classUses .detail,
	.serializedClassDetails{
		background-color:#0000;
		border:none;
	}
	.inheritedList,
	section[class$="Details"] .detail{
		background-color:@bg1;
		border:solid 1px @brd;
		border-radius:0.25em 0.25em 0 0;
		overflow:hidden;
	}
	body.class-declaration :is(.summary,.details) :is(h3,.inheritedList h2){
		background-color:@bg2;
		border:none;
		border-bottom:solid 1px @brd;
	}
	.contentContainer :is(.description,.details) dl dt,
	.serializedFormContainer dl dt{
		color:@txt;
	}
	.overview,
	.member,
	.type,
	.use,
	.constants,
	.deprecated,
	.requires,
	.packages,
	.provides,
	.uses{
		&Summary caption a:is(:link,:visited,:hover,:active){
			color:@hidk;
			border-bottom:solid 1px @hidk;
		}
	}
	.deprecationBlock{
		border:solid 1px @idk;
		background-color:@didk;
		color:@hidk;
	}
}
@-moz-document regexp("^https?://docs\\.oracle\\.com/(\\w+/java/)?javase/(7|8|13)/docs/api/.*"){
	//Java 7, 8, 13
	//WARNING: EXTREMELY FINICKY *SQUARED*! Always test everything after touching anything here
	a:link,
	a:active,
	a:visited{
		color:@lnk;
		.topNav &,
		.bottomNav &{
			color:@txt;
		}
	}
	a,
	a[href]{
		&:hover,
		&:focus{
			color:@hlnk;
			.topNav &,
			.bottomNav &{
				color:@idk;
			}
		}
	}
	a[name]{
		&,
		&:hover,
		&:active,
		&:focus,
		&:visited{
			color:@txt;
		}
	}
	blockquote{
		pre,
		code{
			background-color: #000;
			border-radius: 0.25em;
			padding:0.5em;
			outline: solid 1px #333;
			pre,
			code{
				outline:none;
				padding:0;
			}
		}
	}
	hr{
		border: none;
		border-top: solid 1px @brd;
	}
	::-webkit-scrollbar,::-webkit-scrollbar-track-piece{
		background-color:@bg0 !important;
	}
	::-webkit-scrollbar-corner,::-webkit-scrollbar-thumb{
		background-color:@bg3 !important;
		border-radius:0.4em;
	}
	:root{
		scrollbar-width:thin;
		scrollbar-color:@bg3 @bg0;
	}
}

Reviews

No reviews yet.