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-modern-smallscreen.scss b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss index f8f9d6d6a..03294ffbe 100644 --- a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss +++ b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss @@ -63,36 +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; + .#{$prefix}-ui-settings-panel { + left: 1em; + right: 1em; + margin-top: 3.5em; + max-height: calc(100% - 3.5em - 3.5em); + width: unset; } } - - // 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 - // sass-lint:disable no-empty-rulesets - &.#{$prefix}-layout-max-width-400, - &.#{$prefix}-layout-max-width-600 { - // none yet - } } diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss index 8fdae8fcb..847e42b40 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; 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; 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 { diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss index b59a2be1c..2d23c440c 100644 --- a/src/scss/skin-super-modern/components/_settingspanel.scss +++ b/src/scss/skin-super-modern/components/_settingspanel.scss @@ -13,9 +13,11 @@ $background-color: transparentize($color-background-menu, .15); + backdrop-filter: blur(10px); 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;