X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/20883523f524360de2c7758b02d15be980ed08c3..ee5b8a7f10f8dfebfed4948b33f45c4d9cbfe068:/style/sc.scss

diff --git a/style/sc.scss b/style/sc.scss
index 0c0a829..50925e8 100644
--- a/style/sc.scss
+++ b/style/sc.scss
@@ -1,39 +1,50 @@
-.units {
-	border-collapse: separate;
-	border-spacing: 0;
-	margin: 0 auto;
-	white-space: nowrap;
-}
-.units th, .units td {
-	border: 0;
-	padding: 0 0.2em;
-	background: transparent;
-	text-align: left;
-}
-tr.alt td {
-	font-size: 70%;
-	padding-left: 0.5em;
-}
-.units tr th:first-child {
-	padding-left: 0;
-}
-
 table h2 {
 	padding: 1ex 0;
 	margin: 0;
 	text-align: center;
 }
-.units thead th, .units tfoot th {
+tr.alt td {
 	font-size: 70%;
-	font-weight: normal;
+	padding-left: 0.5em;
 }
 
-.units td.unit {
-	padding-right: 0;
-}
-.units td.unit + td.unit {
-	padding-left: 0;
+.units {
+	border-collapse: separate;
+	border-spacing: 0;
+	margin: 0 auto;
+	white-space: nowrap;
+
+	th, td {
+		border: 0;
+		padding: 0 0.2em;
+		background: transparent;
+		text-align: left;
+	}
+
+	tr th:first-child {
+		padding-left: 0;
+	}
+
+	thead th, tfoot th {
+		font-size: 70%;
+		font-weight: normal;
+	}
+
+	td.unit {
+		& {
+			padding-right: 0;
+		}
+		& + td.unit {
+			padding-left: 0;
+		}
+	}
+
+	.val {
+		white-space: nowrap;
+		text-align: right;
+	}
 }
+
 .unit-composed {
 	font-size: 70%;
 }
@@ -75,109 +86,280 @@ td.hurtrel {
 	font-variant: small-caps;
 }
 
-.units .val {
-	white-space: nowrap;
-	text-align: right;
-}
-
-.legend dt {
-	float: none;
-	text-align: left;
-	margin-top: 1ex;
-	font-weight: bold;
-}
-.legend dd:before {
-	content: '• ';
-}
-.legend dd {
-	text-indent: -1em;
-	margin-left: 1em;
-}
-
 .legend {
-	display: table-cell;
-	min-width: 20em;
-	text-align: left;
+	dt {
+		float: none;
+		text-align: left;
+		margin-top: 1ex;
+		font-weight: bold;
+	}
+	dd:before {
+		content: '• ';
+	}
+	dd {
+		text-indent: -1em;
+		margin-left: 1em;
+	}
+
+	& {
+		display: table-cell;
+		min-width: 20em;
+		text-align: left;
+	}
 }
 .units {
 	float: left;
 	padding-bottom: 1em;
 	margin-right: 2em;
-}
 
-@media (max-width: 52em) {
-	.units thead th:first-child,
-	.units tbody .cat {
-		position: absolute;
-		visibility: hidden;
+	@media (max-width: 52em) {
+		thead th:first-child,
+		tbody .cat {
+			position: absolute;
+			visibility: hidden;
+		}
 	}
 }
 @media (max-width: 48em) {
 	.units {
-		width: auto;
+		& {
+			width: auto;
+		}
+		th, td {
+			vertical-align: top;
+		}
+		td {
+			height: 2em;
+		}
+
+		td:nth-child(2) {
+			white-space: normal;
+			padding: 0;
+		}
+
+		tr.sub td:nth-child(2),
+		.cat,
+		.unit-speed,
+		.hurtrel,
+		.unit-pop, .unit-type,
+		.unit-shield,
+		.unit-gas {
+			padding: 0;
+			position: absolute;
+			margin-top: 3.2ex;
+			margin-top: 1rem;
+			min-width: 4em;
+			text-align: right;
+			margin-left: -4.3em;
+			font-size: 70%;
+		}
+		th.unit-attr {
+			position: absolute;
+		}
+		.unit-type {
+			text-align: left;
+			margin-left: 0;
+		}
+		.unit-speed {
+			margin-left: -6em;
+		}
+		.alt {
+			thead th:first-child,
+			.cat,
+			.unit-speed,
+			.hurtrel,
+			.unit-pop, .unit-type,
+			.unit-shield,
+			.gas {
+				margin-top: 2ex;
+			}
+		}
+		.cat {
+			margin-top: -2ex;
+			margin-left: 0;
+			text-align: left;
+		}
+
+		thead th:first-child {
+			margin-left: 0.5em;
+		}
+		thead th:first-child,
+		th.unit-speed,
+		th.hurtrel,
+		th.unit-shield,
+		th.gas {
+			margin-top: 2.2ex;
+		}
 	}
-	.units th, .units td {
-		vertical-align: top;
+}
+
+.units tbody tr:hover:not(.race) {
+	background: #EEE;
+}
+.unit-gas {
+	color: #040;
+}
+.unit-min, .unit-min a:not(:hover) {
+	color: #004;
+}
+.unit-supply {
+	color: #080;
+}
+.unit-o {color: #C08} /* organic */
+.unit-u {color: #44C} /* mechanic */
+.unit-p {color: #0A8} /* psionic */
+.unit-composed {
+	color: #C88;
+}
+.unit-air {
+	color: #08C;
+}
+.unit-x {color: #888}
+.unit-s {color: #890}
+.unit-m {color: #C70}
+.unit-l {color: #D22}
+.unit-h {color: #804}
+.magic-opt:before,
+.magic-opt:after {
+	color: #000;
+}
+.hurtrel, .units .hurtrel {
+	color: #778;
+}
+tbody .unit-shield {
+	color: #64A;
+}
+.unit-pdd {
+	color: #A8C;
+}
+.unit-splash {
+	color: #4A0;
+}
+.hurt-a {
+	color: #036;
+}
+.hurt-g {
+	color: #063;
+}
+.unit-massive {
+	color: #D88;
+}
+.unit-detect::before {
+	color: #0A8;
+}
+.unit-jump {
+	color: #8A4;
+}
+body .magic-perma {
+	        text-decoration-color: #8C0;
+	   -moz-text-decoration-color: #8C0;
+	-webkit-text-decoration-color: #8C0;
+}
+
+.s-dark {
+	.units tbody tr:hover:not(.race) {
+		background: #222;
 	}
-	.units td {
-		height: 2em;
+	.unit-gas {
+		color: #AC9;
 	}
-
-	.units td:nth-child(2) {
-		white-space: normal;
-		padding: 0;
+	.unit-min, .unit-min a:not(:hover) {
+		color: #ABC;
 	}
-
-	.units tr.sub td:nth-child(2),
-	.units .cat,
-	.units .unit-speed,
-	.units .hurtrel,
-	.units .unit-pop, .units .unit-type,
-	.units .unit-shield,
-	.units .unit-gas {
-		padding: 0;
-		position: absolute;
-		margin-top: 3.2ex;
-		margin-top: 1rem;
-		min-width: 4em;
-		text-align: right;
-		margin-left: -4.3em;
-		font-size: 70%;
+	.unit-supply {
+		color: #8C6;
 	}
-	.units th.unit-attr {
-		position: absolute;
+	.unit-o {color: #C5A} /* organic */
+	.unit-u {color: #66B} /* mechanic */
+	.unit-p {color: #0A8} /* psionic */
+	.unit-composed {
+		color: #A44;
 	}
-	.units .unit-type {
-		text-align: left;
-		margin-left: 0;
-	}
-	.units .unit-speed {
-		margin-left: -6em;
-	}
-	.units .alt thead th:first-child,
-	.units .alt .cat,
-	.units .alt .unit-speed,
-	.units .alt .hurtrel,
-	.units .alt .unit-pop, .units .alt .unit-type,
-	.units .alt .unit-shield,
-	.units .alt .gas {
-		margin-top: 2ex;
-	}
-	.units .cat {
-		margin-top: -2ex;
-		margin-left: 0;
-		text-align: left;
+	.unit-air {
+		color: #4AC;
 	}
-
-	.units thead th:first-child {
-		margin-left: 0.5em;
+	.unit-x {color: #666}
+	.unit-s {color: #AC6}
+	.unit-m {color: #C70}
+	.unit-l {color: #C44}
+	.unit-h {color: #C06}
+	.magic-opt:before,
+	.magic-opt:after {
+		color: #CCC;
+	}
+	.hurtrel, .units .hurtrel {
+		color: #887;
+	}
+	tbody .unit-shield {
+		color: #88A;
+	}
+	.unit-pdd {
+		color: #A8C;
+	}
+	.unit-splash {
+		color: #4A0;
+	}
+	.hurt-a {
+		color: #8AC;
+	}
+	.hurt-g {
+		color: #8CA;
+	}
+	.unit-massive {
+		color: #844;
+	}
+	.unit-detect::before {
+		color: #0A8;
 	}
-	.units thead th:first-child,
-	.units th.unit-speed,
-	.units th.hurtrel,
-	.units th.unit-shield,
-	.units th.gas {
-		margin-top: 2.2ex;
+	.unit-jump {
+		color: #780;
+	}
+	body .magic-perma {
+				text-decoration-color: #460;
+		   -moz-text-decoration-color: #460;
+		-webkit-text-decoration-color: #460;
 	}
 }
 
+.s-mono {
+	.unit-min {color: #000}
+	.unit-gas {color: #888}
+
+	.unit-o {color: #888}
+	.unit-u {color: #444}
+	.unit-p {color: #666}
+	.unit-supply {color: #888}
+
+	// distinctions significant in bonus damage
+	.unit-air {color: #AAA}
+	.unit-x {color: #000; text-shadow: #888 0 0 .1em}
+	.unit-s {color: #888}
+	.unit-m {color: #444}
+	.unit-l {color: #222}
+	.unit-h {color: #000}
+
+	tbody .unit-shield {
+		color: #888;
+	}
+	.unit-pdd {
+		color: #666;
+	}
+	.unit-splash {
+		color: #444;
+	}
+	.hurt-a {
+		color: #000;
+	}
+	.hurt-g {
+		color: #000;
+	}
+	.unit-massive {
+		color: #444;
+	}
+	.unit-detect::before {
+		color: #888;
+	}
+	.unit-jump {
+		color: #222;
+	}
+}