From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 12 Nov 2010 03:00:34 +0000 (+0100)
Subject: browser: static usage styling
X-Git-Tag: v1.4~90
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/2ae4ccbb6ac3ce310890beef55fda11f670772bb?ds=sidebyside

browser: static usage styling
---

diff --git a/base.css b/base.css
index afa1d35..b053b1c 100644
--- a/base.css
+++ b/base.css
@@ -335,6 +335,25 @@ table.dimap {
 .ex {background: #EEE} /* experimental, disfavoured */
 .u-invalid {background: #BBB} /* invalid, impossible */
 
+.p0         {opacity: .5}
+.p0.p       {opacity: 1}
+.p::after   {content: '!'; color: #F00}
+.p4::after  {color: #C00}
+.p3::after  {color: #A00}
+.p2::after  {color: #800}
+.p1::after,
+.p0::after  {color: #000}
+.p09::after {opacity: .9}
+.p08::after {opacity: .8}
+.p07::after {opacity: .7}
+.p06::after {opacity: .6}
+.p05::after {opacity: .5}
+.p04::after {opacity: .4}
+.p03::after {opacity: .3}
+.p02::after {opacity: .2}
+.p01::after {opacity: .1}
+.p00::after {display: none}
+
 /* code syntax */
 .sy-comment    { color: #888 }
 .sy-constant   { color: #008 }
diff --git a/browser.plp b/browser.plp
index 8c24298..3f7b6f8 100644
--- a/browser.plp
+++ b/browser.plp
@@ -9,7 +9,7 @@ Html({
 	description =>
 		"caniuse.",
 	keywords => [qw'html css browser feature'],
-	stylesheet => [qw'circus dark mono red'],
+	stylesheet => [qw'circus dark mono red light'],
 	data => ['browser-support.inc.pl'],
 });
 
@@ -187,18 +187,6 @@ sub showversions {
 }
 
 :>
-<script>
-var classmatch = / p(\d{2})/;
-Array.forEach(document.getElementsByTagName('TD'), function(val) {
-	var opacity;
-	if (opacity = classmatch.exec(val.className)) {
-		var c = document.defaultView.getComputedStyle(val, null).getPropertyValue('background-color');
-		var o = opacity[1] / 100;
-		val.style.backgroundColor = c.replace(/rgb\((.*)\)/, 'rgba($1, '+o+')');
-		val.style.textShadow = c+' 1px 1px 2px, ' + c+' -1px -1px 2px';
-	}
-});
-</script>
 <hr>
 
 <div class="legend">
diff --git a/circus.css b/circus.css
index 822bf9d..329f331 100644
--- a/circus.css
+++ b/circus.css
@@ -13,6 +13,8 @@
 .l6:hover {     color: #8F8; background: #000}
 .ex       {     color: #D00}
 
+.p:hover::after {color: #F00}
+
 .Co {background: #DBB} /* private */
 .c-sa,
 .ci,
diff --git a/dark.css b/dark.css
index 068f6ec..60f96e3 100644
--- a/dark.css
+++ b/dark.css
@@ -64,6 +64,12 @@ th, td {
 .ex {background: #222} /* disfavoured */
 .u-invalid {background: #333} /* impossible */
 
+.p4::after {color: #F44}
+.p3::after {color: #E66}
+.p2::after {color: #C88}
+.p1::after,
+.p0::after {color: #CCC}
+
 /* general colorization */
 
 .c-sa,
diff --git a/mono.css b/mono.css
index cd7fee4..f4a6fc4 100644
--- a/mono.css
+++ b/mono.css
@@ -17,6 +17,16 @@ td,
 .ex a, .ex a:visited,
 .ex                   {color: #888}
 
+.p0:not(.p)           {color: #888; opacity: 1}
+.p0:not(.p).l9        {color: #DDD}
+   .p::after {color: #444}
+.l9.p::after,
+.l2.p::after,
+.l0.p::after {color: #CCC}
+   .p::after {content: '‼'}
+.p1.p::after,
+.p0.p::after {content: '!'}
+
 .pm, .g1 {background: #FFF}   /* motion */
 .po, .g2 {background: #DDD}   /* window */
 .co, .g3 {background: #AAA}   /* command */