Finalizing hover/active UX.

css/events.scss

@@ -24,6 +24,10 @@ $eventItemW: 40px;
     text-align: center;
     vertical-align: baseline;
     width: $eventItemW + 2 * $eventItemP;
+
+    &.active .event-year {
+        display: none;
+    }
 }
 
 .event-year {
@@ -47,11 +51,7 @@ $eventItemW: 40px;
 }
 
 .event-item:hover  {
-    // filter: grayscale(0%);
-    // opacity: 0.8;
-
     .event-year {
-        // top: -$eventItemH;
         opacity: 0;
     }
 }

css/rounds.scss

@@ -20,14 +20,18 @@ $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2;
     line-height: $roundH;
     margin-top: 5px;
     opacity: 0.2;
-}
 
-.round-item.active {
-    opacity: 1;
-}
+    &:hover {
+        opacity: 0.6;
+    }
 
-.round-item:hover {
-    background: yellow;
+    &.active {
+        opacity: 1;
+
+        .round-icon {
+            visibility: visible;
+        }
+    }
 }
 
 .round-text {
@@ -47,9 +51,9 @@ $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2;
 }
 
 .round-icon {
-    display: inline-block;
     height: $iconW;
     margin: ($roundH - $iconW) / 2 $iconM;
     vertical-align: top;
+    visibility: hidden;
     width: $iconW;
 }

css/sort.scss

@@ -19,15 +19,20 @@ $iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2;
     font-size: 0;
     line-height: $sortH;
     margin-bottom: 5px;
+    opacity: 0.2;
     width: $sortW;
-}
 
-.sort-item:hover {
-    background: yellow;
-}
+    &:hover {
+        opacity: 0.6;
+    }
 
-.sort-item.active {
-    background: red;
+    &.active {
+        opacity: 1;
+
+        .sort-icon {
+            visibility: visible;
+        }
+    }
 }
 
 .sort-text {
@@ -50,9 +55,9 @@ $iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2;
 }
 
 .sort-icon {
-    display: inline-block;
     height: $iconW;
     margin: ($sortH - $iconW) / 2 $iconM;
     vertical-align: top;
+    visibility: hidden;
     width: $iconW;
 }

css/style.css

@@ -28,6 +28,8 @@ body {
   text-align: center;
   vertical-align: baseline;
   width: 48px; }
+  .event-item.active .event-year {
+    display: none; }
 
 .event-year {
   background: #fff;
@@ -102,13 +104,14 @@ body {
   font-size: 0;
   line-height: 40px;
   margin-bottom: 5px;
+  opacity: 0.2;
   width: 200px; }
-
-.sort-item:hover {
-  background: yellow; }
-
-.sort-item.active {
-  background: red; }
+  .sort-item:hover {
+    opacity: 0.6; }
+  .sort-item.active {
+    opacity: 1; }
+    .sort-item.active .sort-icon {
+      visibility: visible; }
 
 .sort-text {
   display: inline-block;
@@ -128,10 +131,10 @@ body {
   width: 50px; }
 
 .sort-icon {
-  display: inline-block;
   height: 18px;
   margin: 11px 5px;
   vertical-align: top;
+  visibility: hidden;
   width: 18px; }
 .schemes {
   font-size: 0;
@@ -180,12 +183,12 @@ body {
   line-height: 40px;
   margin-top: 5px;
   opacity: 0.2; }
-
-.round-item.active {
-  opacity: 1; }
-
-.round-item:hover {
-  background: yellow; }
+  .round-item:hover {
+    opacity: 0.6; }
+  .round-item.active {
+    opacity: 1; }
+    .round-item.active .round-icon {
+      visibility: visible; }
 
 .round-text {
   display: inline-block;
@@ -202,8 +205,8 @@ body {
   width: 50px; }
 
 .round-icon {
-  display: inline-block;
   height: 18px;
   margin: 11px 5px;
   vertical-align: top;
+  visibility: hidden;
   width: 18px; }

index.html

@@ -43,6 +43,7 @@
         1974 two germanies?
         update ribbon hover
         // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
+        No finals in 1954 or 1962
 
         change initState to `foo = foo || "default"`
         color scheme pane

js/bundle.js

@@ -719,6 +719,7 @@
 	        var ribbons = document.querySelectorAll('.ribbon');
 	        ribbons.forEach(function (ribbon) {
 	            var name = allRounds[ribbon.getAttribute("data-round-id")];
+	            console.warn(name);
 	            var type = UI.getRoundType(name);
 
 	            roundsToShow.indexOf(type) === -1 ? ribbon.style.display = 'none' : ribbon.style.display = 'inline';

js/ui.js

@@ -137,6 +137,7 @@ const UI = {
         const ribbons = document.querySelectorAll('.ribbon');
         ribbons.forEach(ribbon => {
             const name = allRounds[ribbon.getAttribute("data-round-id")];
+            console.warn(name)
             const type = UI.getRoundType(name);
 
             roundsToShow.indexOf(type) === -1