From 888b22f076afabcd9f45712f4b6495b548270c11 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:04:34 -0700 Subject: [PATCH 1/8] add wrong root level css selector --- src/scss/skin-modern/_skin.scss | 2 +- src/scss/skin-super-modern/_skin.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/skin-modern/_skin.scss b/src/scss/skin-modern/_skin.scss index b335105d7..93431eb7f 100644 --- a/src/scss/skin-modern/_skin.scss +++ b/src/scss/skin-modern/_skin.scss @@ -51,7 +51,7 @@ @import 'skin-smallscreen'; @import 'skin-tv'; - .#{$prefix}-ui-uicontainer { + &.#{$prefix}-ui-uicontainer { color: $color-primary; font-family: $font-family; font-size: $font-size; diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss index 32a33dc77..8c6b9a539 100644 --- a/src/scss/skin-super-modern/_skin.scss +++ b/src/scss/skin-super-modern/_skin.scss @@ -56,7 +56,7 @@ @import 'skin-tv'; // sass-lint:disable nesting-depth - .#{$prefix}-ui-uicontainer { + &.#{$prefix}-ui-uicontainer { color: $color-primary; font-family: $font-family; font-size: $font-size; From e5aada09eaab7019193a76f2ec93a0b74540920c Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:06:20 -0700 Subject: [PATCH 2/8] remove smaller font size for small screen variant --- .../_skin-modern-smallscreen.scss | 22 ++----------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss index f8f9d6d6a..d5adb13e1 100644 --- a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss +++ b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss @@ -63,30 +63,12 @@ // Adjustments for screen width x <= 400 &.#{$prefix}-layout-max-width-400 { - .#{$prefix}-ui-settings-panel, - .#{$prefix}-ui-hugeplaybacktogglebutton, - .#{$prefix}-ui-smallcenteredplaybacktogglebutton, - .#{$prefix}-ui-hugereplaybutton, - .#{$prefix}-ui-errormessage-overlay, - .#{$prefix}-ui-buffering-overlay, - .#{$prefix}-ui-subtitle-overlay, - .#{$prefix}-ui-cast-status-overlay { - font-size: .6em; - } + } // Adjustments for screen width 400 < x <= 600 &.#{$prefix}-layout-max-width-600 { - .#{$prefix}-ui-settings-panel, - .#{$prefix}-ui-hugeplaybacktogglebutton, - .#{$prefix}-ui-smallcenteredplaybacktogglebutton, - .#{$prefix}-ui-hugereplaybutton, - .#{$prefix}-ui-errormessage-overlay, - .#{$prefix}-ui-buffering-overlay, - .#{$prefix}-ui-subtitle-overlay, - .#{$prefix}-ui-cast-status-overlay { - font-size: .8em; - } + } // Adjustments for screen width x <= 600 From a2b58da2f83f9ae928e56b167d7aa003368fbabc Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:41:50 -0700 Subject: [PATCH 3/8] remove webkit tap highlight color --- src/scss/skin-super-modern/components/_button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/skin-super-modern/components/_button.scss b/src/scss/skin-super-modern/components/_button.scss index d56865c8a..a00b3f805 100644 --- a/src/scss/skin-super-modern/components/_button.scss +++ b/src/scss/skin-super-modern/components/_button.scss @@ -16,6 +16,7 @@ min-width: 1.5em; padding: .25em; transition: transform .15s ease; + -webkit-tap-highlight-color: transparent; .#{$prefix}-label { color: $color-primary; From cbc7989700467f2754792557d4a6a908ed4116e0 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:42:05 -0700 Subject: [PATCH 4/8] blur background for settings panel --- src/scss/skin-super-modern/components/_settingspanel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss index b59a2be1c..dbb05c0a6 100644 --- a/src/scss/skin-super-modern/components/_settingspanel.scss +++ b/src/scss/skin-super-modern/components/_settingspanel.scss @@ -13,6 +13,7 @@ $background-color: transparentize($color-background-menu, .15); + backdrop-filter: blur(10px); background-color: $background-color; border-radius: 4px; bottom: 3.5em; From d1a10bb526f5dabe9b9df8d3114215d48422651c Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:42:13 -0700 Subject: [PATCH 5/8] add shadow for settings panel --- src/scss/skin-super-modern/components/_settingspanel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss index dbb05c0a6..2d23c440c 100644 --- a/src/scss/skin-super-modern/components/_settingspanel.scss +++ b/src/scss/skin-super-modern/components/_settingspanel.scss @@ -17,6 +17,7 @@ background-color: $background-color; border-radius: 4px; bottom: 3.5em; + box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75); height: fit-content; max-height: 60%; min-width: fit-content; From 9a8e4732f7f2871315511aaf8714a51d797dd096 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:42:31 -0700 Subject: [PATCH 6/8] remove unneeded vendor prefixes --- .../skin-super-modern/components/_touch-control-overlay.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/scss/skin-super-modern/components/_touch-control-overlay.scss b/src/scss/skin-super-modern/components/_touch-control-overlay.scss index 7e30a6d39..293a5a669 100644 --- a/src/scss/skin-super-modern/components/_touch-control-overlay.scss +++ b/src/scss/skin-super-modern/components/_touch-control-overlay.scss @@ -1,12 +1,7 @@ @import '../variables'; @import '../mixins'; -// sass-lint:disable no-vendor-prefixes %opacity-transition { - -moz-transition: opacity .25s ease; - -ms-transition: opacity .25s ease; - -o-transition: opacity .25s ease; - -webkit-transition: opacity .25s ease; transition: opacity .25s ease-out; } From cdef5a4a5ea786252f9170121264a8e984632856 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 14:42:54 -0700 Subject: [PATCH 7/8] change size of settings label to full width on small screens --- .../_skin-modern-smallscreen.scss | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss index d5adb13e1..03294ffbe 100644 --- a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss +++ b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss @@ -63,18 +63,12 @@ // Adjustments for screen width x <= 400 &.#{$prefix}-layout-max-width-400 { - - } - - // Adjustments for screen width 400 < x <= 600 - &.#{$prefix}-layout-max-width-600 { - - } - - // Adjustments for screen width x <= 600 - // sass-lint:disable no-empty-rulesets - &.#{$prefix}-layout-max-width-400, - &.#{$prefix}-layout-max-width-600 { - // none yet + .#{$prefix}-ui-settings-panel { + left: 1em; + right: 1em; + margin-top: 3.5em; + max-height: calc(100% - 3.5em - 3.5em); + width: unset; + } } } From fea5db4b71410a91cd3c2cee875f02fd499b192a Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Wed, 11 Dec 2024 16:33:44 -0700 Subject: [PATCH 8/8] disable tap highlight color in webkit browsers --- src/scss/skin-super-modern/components/_label.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/skin-super-modern/components/_label.scss b/src/scss/skin-super-modern/components/_label.scss index 9200bd328..9de508a1c 100644 --- a/src/scss/skin-super-modern/components/_label.scss +++ b/src/scss/skin-super-modern/components/_label.scss @@ -7,6 +7,7 @@ cursor: default; white-space: nowrap; + -webkit-tap-highlight-color: transparent; } .#{$prefix}-ui-label {