From a8eed1d83a3e444bd3d2d968c5d4e255e622f538 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= Date: Mon, 25 Nov 2024 12:12:59 +0100 Subject: [PATCH] fix(UI): Change to use legacy css format to support old TVs (#7658) Related to https://github.com/shaka-project/shaka-player/issues/7419 See: Space-separated rgb() parameters --> https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility --- .csslintrc | 3 ++- demo/demo.less | 4 ++-- ui/less/ad_controls.less | 6 +++--- ui/less/buttons.less | 8 ++++---- ui/less/containers.less | 14 +++++++------- ui/less/overflow_menu.less | 8 ++++---- ui/less/thumbnails.less | 6 +++--- ui/less/tooltip.less | 2 +- 8 files changed, 26 insertions(+), 25 deletions(-) diff --git a/.csslintrc b/.csslintrc index 4e8a26b933..7f38e49193 100644 --- a/.csslintrc +++ b/.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" } } diff --git a/demo/demo.less b/demo/demo.less index d65b8683b1..38bfefc8d3 100644 --- a/demo/demo.less +++ b/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 { diff --git a/ui/less/ad_controls.less b/ui/less/ad_controls.less index 2062ed036d..656cc126b7 100644 --- a/ui/less/ad_controls.less +++ b/ui/less/ad_controls.less @@ -95,11 +95,11 @@ .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; @@ -107,6 +107,6 @@ .shaka-skip-ad-counter { padding: 5px; - background: rgba(0 0 0 / 70%); + background: rgba(0, 0, 0, 70%); margin: 0; } diff --git a/ui/less/buttons.less b/ui/less/buttons.less index a415db9a2d..553a0d9cdd 100644 --- a/ui/less/buttons.less +++ b/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; diff --git a/ui/less/containers.less b/ui/less/containers.less index cc129408c5..77b0fc07ca 100644 --- a/ui/less/containers.less +++ b/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, diff --git a/ui/less/overflow_menu.less b/ui/less/overflow_menu.less index 47a5e28adf..68ee46623f 100644 --- a/ui/less/overflow_menu.less +++ b/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. */ diff --git a/ui/less/thumbnails.less b/ui/less/thumbnails.less index 181ba03763..fa82620a24 100644 --- a/ui/less/thumbnails.less +++ b/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; diff --git a/ui/less/tooltip.less b/ui/less/tooltip.less index b5024b6b77..c50447253e 100644 --- a/ui/less/tooltip.less +++ b/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;