browser: static usage styling
authorMischa POSLAWSKY <perl@shiar.org>
Fri, 12 Nov 2010 03:00:34 +0000 (04:00 +0100)
committerMischa POSLAWSKY <perl@shiar.org>
Fri, 12 Nov 2010 04:15:55 +0000 (05:15 +0100)
base.css
browser.plp
circus.css
dark.css
mono.css

index afa1d35..b053b1c 100644 (file)
--- 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 }
index 8c24298..3f7b6f8 100644 (file)
@@ -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">
index 822bf9d..329f331 100644 (file)
@@ -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,
index 068f6ec..60f96e3 100644 (file)
--- 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,
index cd7fee4..f4a6fc4 100644 (file)
--- 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 */