fix(UI): Change to use legacy css format to support old TVs (#7658)

Related to #7419

See: Space-separated rgb() parameters -->
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility

Author: avelad

.csslintrc

@@ -19,6 +19,7 @@
       "selector-list-comma-newline-after": "always-multi-line",
       "selector-no-vendor-prefix": null,
       "selector-pseudo-element-colon-notation": "single",
-      "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh"]
+      "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh"],
+      "color-function-notation": "legacy"
     }
 }

demo/demo.less

@@ -17,7 +17,7 @@
 @drawer-width: 550px;
 
 @mdl-footer-link-color: #9e9e9e;  /* copied from MDL stylesheet */
-@mdl-button-color: rgb(63 81 181);  /* copied from MDL stylesheet */
+@mdl-button-color: rgb(63, 81, 181);  /* copied from MDL stylesheet */
 
 @progress-circle-size: 45px;
 @progress-circle-thickness: 5px;
@@ -74,7 +74,7 @@ main.mdl-layout__content {
   /* Give the button a round background, meant to look like the play button. */
   border-radius: 50%;
   color: #000;
-  background: rgba(255 255 255 / 85%);
+  background: rgba(255, 255, 255, 85%);
 }
 
 html, body {

ui/less/ad_controls.less

@@ -95,18 +95,18 @@
 
 .shaka-skip-ad-button {
   padding: 5px 15px;
-  background: rgba(0 0 0 / 70%);
+  background: rgba(0, 0, 0, 70%);
   border: none;
 
   &:disabled {
-    background: rgba(0 0 0 / 30%);
+    background: rgba(0, 0, 0, 30%);
   }
 
   cursor: pointer;
 }
 
 .shaka-skip-ad-counter {
   padding: 5px;
-  background: rgba(0 0 0 / 70%);
+  background: rgba(0, 0, 0, 70%);
   margin: 0;
 }

ui/less/buttons.less

@@ -38,7 +38,7 @@
   border-radius: 50%;
 
   /* A small drop shadow below the button. */
-  box-shadow: rgba(0 0 0 / 10%) 0 0 20px 0;
+  box-shadow: rgba(0, 0, 0, 10%) 0 0 20px 0;
 
   /* No border. */
   border: none;
@@ -51,7 +51,7 @@
   background-position: center center;
 
   /* A background color behind the play arrow. */
-  background-color: rgba(255 255 255 / 90%);
+  background-color: rgba(255, 255, 255, 90%);
 
   .show-when-controls-shown();
 
@@ -127,10 +127,10 @@
   border: none;
 
   /* Setting text color to white */
-  color: rgb(255 255 255);
+  color: rgb(255, 255, 255);
 
   /* Setting background color to black so white text can be seen clearly */
-  background-color: rgb(0 0 0 / 50%);
+  background-color: rgb(0, 0, 0, 50%);
 
   cursor: default;
   font-size: 20px;

ui/less/containers.less

@@ -222,7 +222,7 @@
   min-width: 300px;
 
   color: white;
-  background-color: rgba(35 35 35 / 90%);
+  background-color: rgba(35, 35, 35, 90%);
 
   font-size: 14px;
 
@@ -243,7 +243,7 @@
   }
 
   span {
-    color: rgb(150 150 150);
+    color: rgb(150, 150, 150);
   }
 }
 
@@ -254,7 +254,7 @@
   min-width: 150px;
 
   color: white;
-  background-color: rgba(35 35 35 / 90%);
+  background-color: rgba(35, 35, 35, 90%);
 
   font-size: 14px;
 
@@ -275,12 +275,12 @@
   }
 
   span {
-    color: rgb(150 150 150);
+    color: rgb(150, 150, 150);
   }
 }
 
 .shaka-context-menu {
-  background-color: rgba(35 35 35 / 90%);
+  background-color: rgba(35, 35, 35, 90%);
 
   border-radius: 2px;
 
@@ -300,7 +300,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: rgba(50 50 50 / 90%);
+      background-color: rgba(50, 50, 50, 90%);
     }
   }
 
@@ -406,7 +406,7 @@
 
   /* Add a bit of a white shadow to keep our black spinner visible
   on a black background. */
-  filter: drop-shadow(0 0 2px rgba(255 255 255 / 50%));
+  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 50%));
 }
 
 .shaka-hidden-fast-forward-container,

ui/less/overflow_menu.less

@@ -18,7 +18,7 @@
 
   /* Styles for the menu itself. */
   background: white;
-  box-shadow: 0 1px 9px 0 rgba(0 0 0 / 40%);
+  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 40%);
   border-radius: 2px;
   max-height: 250px;
   min-width: 180px;
@@ -53,7 +53,7 @@
 
     /* When hovered, the button's background is highlighted. */
     &:hover {
-      background: rgb(224 224 224);
+      background: rgb(224, 224, 224);
     }
 
     /* The button is clickable, showing cursor pointer */
@@ -65,7 +65,7 @@
     }
 
     .shaka-keyboard-navigation &:focus {
-      background: rgb(224 224 224);
+      background: rgb(224, 224, 224);
     }
   }
 
@@ -110,7 +110,7 @@
  * language, the currently-selected resolution, etc. */
 .shaka-current-selection-span {
   /* This is dimmer than the other span, which is the name of the submenu. */
-  color: rgba(0 0 0 / 54%);
+  color: rgba(0, 0, 0, 54%);
 }
 
 /* The submenus have somewhat different margins inside them. */

ui/less/thumbnails.less

@@ -1,7 +1,7 @@
 #shaka-player-ui-thumbnail-container {
   background-color: black;
   border: 1px solid black;
-  box-shadow: 0 8px 8px 0 rgb(0 0 0 / 50%);
+  box-shadow: 0 8px 8px 0 rgb(0, 0, 0, 50%);
   min-width: 150px;
   overflow: hidden;
   position: absolute;
@@ -14,7 +14,7 @@
   }
 
   #shaka-player-ui-thumbnail-time {
-    background-color: rgb(0 0 0 / 50%);
+    background-color: rgb(0, 0, 0, 50%);
     bottom: 0;
     color: white;
     font-size: 16px;
@@ -29,7 +29,7 @@
   background-color: white;
   border: 1px solid black;
   border-radius: 10px;
-  box-shadow: 0 8px 8px 0 rgb(0 0 0 / 50%);
+  box-shadow: 0 8px 8px 0 rgb(0, 0, 0, 50%);
   color: black;
   overflow: hidden;
   padding: 1px 7px;

ui/less/tooltip.less

@@ -53,7 +53,7 @@
       font-size: 13px;
 
       /* Styling */
-      background: rgba(35 35 35 / 90%);
+      background: rgba(35, 35, 35, 90%);
       color: white;
       border-radius: 3px;
       padding: 5px 10px;