Initial work in porting the rustdoc light theme to scss

light.scss

$block-bg: #f5f5f5;
$color-stab-internal-bg: #ffb9b3;
$nav-separater-border: #000;
$stab-unstable-bg: #fff5d6;
$stab-deprecated-bg: #f3dfff;
$stab-portability-bg: #c4ecff;
$theme-picker-bg: #fff;
$kdb-box-shadow: #c6cbd1;
$pre-ignore-border-left: rgba(255, 142, 0, .4);
$pre-ignore-border-left-hover: #ff9200;
$information-hover-pre-ignore-border-left: #ff9200;
$pre-compile-fail-border-left: rgba(255, 0, 0, .4);
$pre-compile-fail-border-left-hover: #f00;
$information-hover-pre-compile-fail-border-left: #f00;
$target-code: #fdffd3;
$target-in-band: #fdffd3;
$help-bg: #e9e9e9;
$color-1: #000;
$color-2: #333;
$color-3: #c67e2d;
$color-4: #4e4c4c;
$color-5: #000;
$color-6: #508157;
$color-7: #ad448e;
$color-8: #ba5d00;
$color-9: #cd00e2;
$color-10: #068000;
$color-11: #767b27;
$color-12: #546e8a;
$color-13: #2c8093;
$color-14: #4d76ae;
$color-15: #7c5af3;
$color-16: #6841f1;
$color-17: #9a6e31;
$color-18: #de5249;
$color-19: #8e908c;
$color-20: #4d4d4c;
$color-21: #3873ad;
$color-22: #304ffe;
$color-23: #f5f5f5;
$color-24: #999;
$color-25: #555;
$color-26: #808080;
$color-27: #8959a8;
$color-28: #4271ae;
$color-29: #718c00;
$color-30: #c82829;
$color-31: #3e999f;
$color-32: #b76514;
$color-33: #ff9011;
$color-34: rgba(255, 0, 0, .3);
$color-35: #f00;
$color-36: rgba(255, 142, 0, .3);
$color-37: rgba(255, 142, 0, 1);
$color-38: #0089ff;
$color-39: #fff;
$color-40: #888;
$color-41: #fff;
$background-color-1: #fff;
$background-color-2: #f5f5f5;
$background-color-3: #f1f1f1;
$background-color-4: #fff;
$background-color-5: #f6fdb0;
$background-color-6: #ccc;
$background-color-7: #c7b6ff;
$background-color-8: #afc6e4;
$background-color-9: #b4d1b9;
$background-color-10: #e7b1a0;
$background-color-11: #b7bd49;
$background-color-12: #c6afb3;
$background-color-13: #ffc891;
$background-color-14: #f5c4ff;
$background-color-15: #8ce488;
$background-color-16: #c3e0ff;
$background-color-17: #9aecff;
$background-color-18: #f99650;
$background-color-19: transparent;
$background-color-20: rgba(78, 139, 202, .2);
$background-color-21: #4e8bca;
$background-color-22: #000;
$background-color-23: #e6e6e6;
$background-color-24: rgba(0, 0, 0, .3);
$background-color-25: #eee;
$background-color-26: #ff1f1f;
$background-color-27: #fafbfc;
$background-color-28: #f9f9f9;
$background-color-29: #e0e0e0;
$border-color-1: #000;
$border-color-2: #ddd;
$border-color-3: #e0e0e0;
$border-color-4: #66afe9;
$border-color-5: #ffc600;
$border-color-6: #b71c1c;
$border-color-7: #7f0087;
$border-color-8: #7ba5db;
$border-color-9: #bfbfbf;
$border-color-10: #c7c7c7;
$border-color-11: transparent #000 transparent transparent;
$border-color-12: #000;
$border-color-13: #999;
$border-color-14: #d1d5da;
$border-color-15: #717171;
$border-color-16: #ccc;
$border-top-color-1: #777;
$border-top-color-2: #000;
$border-top-color-3: #e6e6e6;
$border-top-color-4: #0089ff;
$border-top-color-5: #e0e0e0;
$border-right-color-1: #e0e0e0;
$border-right-color-2: #000;
$border-bottom-color-1: #d5d5d5;
$border-bottom-color-2: #ddd;
$border-bottom-color-3: #ddd;
$border-bottom-color-4: #777;
$border-bottom-color-5: #ddd;
$border-bottom-color-6: #e0e0e0;
$border-bottom-color-7: #000;
$border-bottom-color-8: #c6cbd1;
$border-bottom-color-9: #ccc;

//  General structure and fonts
//  Code highlighting
body
{
	background-color: $background-color-1;
	           color: $color-1;
}

h1
{
	color: $color-1;

	&.fqn { border-bottom-color: $border-bottom-color-1; }
}

h2
{
	border-bottom-color: $border-bottom-color-2;
	              color: $color-1;
}

h3:not(.impl):not(.method):not(.type):not(.tymethod)
{
	border-bottom-color: $border-bottom-color-2;
	              color: $color-1;
}

h4:not(.method):not(.type):not(.tymethod)
{
	border-bottom-color: $border-bottom-color-2;
	              color: $color-1;
}

.in-band { background-color: $background-color-1; }

.invisible { background: transparent; }

.docblock
{
	code {    background-color: $background-color-2;    }
	h1   { border-bottom-color: $border-bottom-color-5; }
	h2   { border-bottom-color: $border-bottom-color-5; }
	h3   { border-bottom-color: $border-bottom-color-5; }
	h4   { border-bottom-color: $border-bottom-color-5; }
	h5   { border-bottom-color: $border-bottom-color-5; }

	table
	{
		     border-color: $border-color-2;
		td { border-color: $border-color-2; }
		th { border-color: $border-color-2; }
	}

	&:not(.type-decl) a:not(.srclink):not(.test-arrow) { color: $color-21; }
}

.docblock-short
{
	code { background-color: $background-color-2; }

	a:not(.srclink):not(.test-arrow) { color: $color-21; }
}

pre
{
	background-color: $background-color-2;

	&.rust
	{
		.comment           { color: $color-19; }
		.doccomment        { color: $color-20; }
		.kw                { color: $color-27; }
		.kw-2              { color: $color-28; }
		.prelude-ty        { color: $color-28; }
		.number            { color: $color-29; }
		.string            { color: $color-29; }
		.self              { color: $color-30; }
		.bool-val          { color: $color-30; }
		.prelude-val       { color: $color-30; }
		.macro             { color: $color-31; }
		.macro-nonterminal { color: $color-31; }
		.lifetime          { color: $color-32; }
		.question-mark     { color: $color-33; }

		.attribute
		{
			         color: $color-30;
			.ident { color: $color-30;	}
		}
	}

	&.ignore
	{
		border-left: 2px solid $pre-ignore-border-left;

		&:hover { border-left: 2px solid $pre-ignore-border-left-hover; }

		.information:hover & { border-left: 2px solid $information-hover-pre-ignore-border-left; }
	}

	&.compile_fail
	{
		border-left: 2px solid $pre-compile-fail-border-left;

		&:hover { border-left: 2px solid $pre-compile-fail-border-left-hover; }

		.information:hover & { border-left: 2px solid $information-hover-pre-compile-fail-border-left; }
	}
}

.information
{
	> .compile_fail:hover { color: $color-35; }
	>       .ignore:hover { color: $color-37; }
}

.sidebar
{
	background-color: $background-color-3;

	.current { background-color: $background-color-4; }

	.location
	{
		background-color: $background-color-4;
		    border-color: $border-color-1;
		           color: $color-2;
	}

	.version { border-bottom-color: $border-bottom-color-3; }
}

.source .sidebar { background-color: $background-color-4; }

.sidebar-title
{
	border-bottom-color: $border-bottom-color-4;
	   border-top-color: $border-top-color-1;
}

.block a
{
	&:hover { background: $block-bg; }

	&.current
	{
		&.enum        { color: $color-6;  }
		&.struct      { color: $color-7;  }
		&.type        { color: $color-8;  }
		&.foreigntype { color: $color-9;  }
		&.attr        { color: $color-10; }
		&.derive      { color: $color-10; }
		&.macro       { color: $color-10; }
		&.union       { color: $color-11; }
		&.constant    { color: $color-12; }
		&.static      { color: $color-12; }
		&.primitive   { color: $color-13; }
		&.mod         { color: $color-14; }
		&.trait       { color: $color-15; }
		&.traitalias  { color: $color-16; }
		&.fn          { color: $color-17; }
		&.method      { color: $color-17; }
		&.tymethod    { color: $color-17; }
		&.keyword     { color: $color-18; }
	}
}





.line-numbers
{
	span { color: $color-3; }

	.line-highlighted { background-color: $background-color-5 !important; }

	&:target { background-color: $background-color-19; }
}

.content
{
	.method .where { color: $color-4; }
	.fn     .where { color: $color-4; }

	.where.fmt-newline { color: $color-4; }

	.highlighted
	{
		background-color: $background-color-6;
		color           : $color-5 !important;

		a    { color: $color-5 !important; }
		span { color: $color-5 !important; }

		&.trait       { background-color: $background-color-7;  }
		&.traitalias  { background-color: $background-color-7;  }
		&.mod         { background-color: $background-color-8;  }
		&.externcrate { background-color: $background-color-8;  }
		&.enum        { background-color: $background-color-9;  }
		&.struct      { background-color: $background-color-10; }
		&.union       { background-color: $background-color-11; }
		&.fn          { background-color: $background-color-12; }
		&.method      { background-color: $background-color-12; }
		&.tymethod    { background-color: $background-color-12; }
		&.type        { background-color: $background-color-13; }
		&.foreigntype { background-color: $background-color-14; }
		&.attr        { background-color: $background-color-15; }
		&.derive      { background-color: $background-color-15; }
		&.macro       { background-color: $background-color-15; }
		&.constant    { background-color: $background-color-16; }
		&.static      { background-color: $background-color-16; }
		&.primitive   { background-color: $background-color-17; }
		&.keyword     { background-color: $background-color-18; }
	}


	    .fnname      { color: $color-17; }
	span.enum        { color: $color-6;  }
	   a.enum        { color: $color-6;  }
	span.struct      { color: $color-7;  }
	   a.struct      { color: $color-7;  }
	span.type        { color: $color-8;  }
	   a.type        { color: $color-8;  }
	span.foreigntype { color: $color-9;  }
	   a.foreigntype { color: $color-9;  }
	span.attr        { color: $color-10; }
	   a.attr        { color: $color-10; }
	span.derive      { color: $color-10; }
	   a.derive      { color: $color-10; }
	span.macro       { color: $color-10; }
	   a.macro       { color: $color-10; }
	span.union       { color: $color-11; }
	   a.union       { color: $color-11; }
	span.constant    { color: $color-12; }
	   a.constant    { color: $color-12; }
	span.static      { color: $color-12; }
	   a.static      { color: $color-12; }
	span.primitive   { color: $color-13; }
	   a.primitive   { color: $color-13; }
	span.externcrate { color: $color-14; }
	span.mod         { color: $color-14; }
	   a.mod         { color: $color-14; }
	span.trait       { color: $color-15; }
	   a.trait       { color: $color-15; }
	span.traitalias  { color: $color-16; }
	   a.traitalias  { color: $color-16; }
	span.fn          { color: $color-17; }
	   a.fn          { color: $color-17; }
	span.method      { color: $color-17; }
	   a.method      { color: $color-17; }
	span.tymethod    { color: $color-17; }
	   a.tymethod    { color: $color-17; }
	span.keyword     { color: $color-18; }
	   a.keyword     { color: $color-18; }
}


nav
{
	border-bottom-color: $border-bottom-color-6;

	&.main
	{
		.current
		{
			border-bottom-color: $border-bottom-color-7;
			   border-top-color: $border-top-color-2;
		}

		.separator { border: 1px solid $nav-separater-border; }
	}
}


a
{
	color: $color-5;

	&.test-arrow
	{
		background-color: $background-color-20;
		           color: $color-23;

		&:hover { background-color: $background-color-21; }
	}
}

.stability a { color: $color-21; }

.stab.internal
{
	background  : $color-stab-internal-bg;
	border-color: $border-color-6;

	a { color: $color-22; }
}

.collapse-toggle { color: $color-24; }

#crate-search
{
	background-color: $background-color-1;
	border-color: $border-color-3;
	box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
	color: $color-25;

	+ .search-input { box-shadow: 1px 0 0 1px #e0e0e0, 0 0 0 2px transparent; }
}

.search-input
{
	background-color: $background-color-1;
	box-shadow      : 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
	color           : $color-25;

	&:focus { border-color: $border-color-4; }
}

.module-item .stab { color: $color-5; }

.stab.unstable
{
	background  : $stab-unstable-bg;
	border-color: $border-color-5;
}

.stab.deprecated
{
	background  : $stab-deprecated-bg;
	border-color: $border-color-7;
}

.stab.portability
{
	background  : $stab-portability-bg;
	border-color: $border-color-8;
}

#help >div
{
	background: $help-bg;
	border-color: $border-color-9;
}

.since { color: $color-26; }

tr.result
{
	span.primitive::after { color: $color-1; }
	span.keyword::after   { color: $color-1; }
}

.example-wrap > pre.line-number { border-color: $border-color-10; }

.toggle-label { color: $color-24; }

:target
{
	> code     { background: $target-code   ; }
	> .in-band { background: $target-in-band; }
}

.tooltip.compile_fail { color: $color-34; }
.tooltip.ignore       { color: $color-36; }
.search-failed a      { color: $color-38; }

.tooltip .tooltiptext
{
	background-color: $background-color-22;
	           color: $color-39;

	&::after { border-color: $border-color-11; }
}

.important-traits .tooltip .tooltiptext
{
	background-color: $background-color-1;
	    border-color: $border-color-12;
	           color: $color-1;
}

#titles
{
	> div
	{
		&:not(.selected)
		{
			background-color: $background-color-23;
			border-top-color: $border-top-color-3;
		}

		&:hover { border-top-color: $border-top-color-4; }

		> div.count { color: $color-40; }

		&.selected { border-top-color: $border-top-color-4; }
	}
}

.modal {	background-color: $background-color-24; }

.modal-content
{
	background-color: $background-color-25;
	    border-color: $border-color-13;

	> .close
	{
		background-color: $background-color-25;
		    border-color: $border-color-13;

		&:hover
		{
			background-color: $background-color-26;
			           color: $color-41;

			+ .whiter { background-color: $background-color-26; }
		}
	}

	> .whiter { background-color: $background-color-25; }
}

kbd
{
	background-color   : $background-color-27;
	border-bottom-color: $border-bottom-color-8;
	border-color       : $border-color-14;
	box-shadow         : $kdb-box-shadow;
	color              : $color-5;
}

#theme-picker
{
	background-color: $background-color-4;
	border-color    : $border-color-3;

	&:hover { border-color: $border-color-15;	}
	&:focus { border-color: $border-color-15;	}

}

#settings-menu
{
	background-color: $background-color-4;
	border-color    : $border-color-3;

	&:hover { border-color: $border-color-15; }
	&:focus { border-color: $border-color-15;	}
}

#theme-choices
{
	background-color: $background-color-4;
	border-color    : $border-color-16;

	> button
	{
		&:not(:first-child) { border-top-color: $border-top-color-5;  }
		&:hover             { background-color: $background-color-25; }
		&:focus             { background-color: $background-color-25; }
	}
}

#all-types
{
	background-color: $background-color-4;

	&:hover { background-color: $background-color-28; }
}

.search-results
{
	td {
		span.alias { color: $color-5; }

		span.grey { color: $color-24; }
	}
}

#sidebar-toggle
{
	background-color: $background-color-3;

	&:hover { background-color: $background-color-29; }

}

#source-sidebar
{
	background-color: $background-color-3;

	>.title { border-bottom-color: $border-bottom-color-9; }
}

div.files
{
	> a
	{
		&:hover { background-color: $background-color-29; }
	}

	> .selected { background-color: $background-color-4; }
}

div.name
{
	&:hover { background-color: $background-color-29; }
}

@media (max-width: 700px)
{
	.sidebar-menu
	{
		background-color   : $background-color-3   ;
		border-bottom-color: $border-bottom-color-6;
		border-right-color : $border-right-color-1 ;
	}

	.sidebar-elems
	{
		background-color  : $background-color-3  ;
		border-right-color: $border-right-color-2;
	}

	#sidebar-filler
	{
		background-color   : $background-color-3   ;
		border-bottom-color: $border-bottom-color-6;
	}

	#theme-picker { background: $theme-picker-bg; }

}