browser: static usage styling

diff --git a/base.css b/base.css
index afa1d356489d96ae5a30f15235b6411e6dcef3ad..b053b1c3794ebe654a093b990ad58d6fc0852ab3 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 }

diff --git a/browser.plp b/browser.plp
index 8c24298b66c1579ddafde4f3b848af16956e6cf2..3f7b6f865e6c462960bc5c1a21386100d462cd02 100644 (file)
--- 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 822bf9de03280f7673e0abf5fc950172e1249ec9..329f331e0fa467ddb696404ec5a3307d84072479 100644 (file)
--- 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 068f6ec3ea6924f167bee1d9f6e6e0efc6191ced..60f96e39e5f14f11755a152e877f0483dd74192e 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,

diff --git a/mono.css b/mono.css
index cd7fee46a555657f005abeff2f5ee0ed30c45ce7..f4a6fc4de992078590682791a54912cc29553d03 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 */