mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #6425 from bernarden/bugfix/6422-unsupported-max-css-function-in-chrome-76

Browse source
This commit is contained in:
Bill Thornton 2025-01-09 20:29:14 -05:00 • committed by GitHub
commit d4b55ec67a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 53 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/alphaPicker/style.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/mixins';
.alphaPicker {
text-align: center;
display: flex;
@ -11,8 +13,8 @@
.alphaPicker-fixed {
position: fixed;
bottom: 5.5em;
bottom: max(env(safe-area-inset-bottom), 5.5em);
@include conditional-max(bottom, 5.5em, env(safe-area-inset-bottom));
}
.alphaPickerRow {
@ -45,8 +47,7 @@
@media all and (max-height: 50em) {
.alphaPicker-fixed {
bottom: 5em;
bottom: max(env(safe-area-inset-bottom), 5em);
@include conditional-max(bottom, 5em, env(safe-area-inset-bottom));
}
.alphaPickerButton-vertical {
@ -105,32 +106,27 @@
}
.alphaPicker-fixed.alphaPicker-tv {
bottom: 1%;
bottom: max(env(safe-area-inset-bottom), 1%);
@include conditional-max(bottom, 1%, env(safe-area-inset-bottom));
}
.alphaPicker-fixed-right {
[dir="ltr"] & {
right: 0.4em;
right: max(env(safe-area-inset-right), 0.4em);
@include conditional-max(right, 0.4em, env(safe-area-inset-right));
}
[dir="rtl"] & {
left: 0.4em;
left: max(env(safe-area-inset-left), 0.4em);
@include conditional-max(left, 0.4em, env(safe-area-inset-left));
}
}
@media all and (min-width: 62.5em) {
.alphaPicker-fixed-right {
[dir="ltr"] & {
right: 1em;
right: max(env(safe-area-inset-right), 1em);
@include conditional-max(right, 1em, env(safe-area-inset-right));
}
[dir="rtl"] & {
left: 1em;
left: max(env(safe-area-inset-left), 1em);
@include conditional-max(left, 1em, env(safe-area-inset-left));
}
}
}

11
src/components/multiSelect/multiSelect.scss
View file

@ -1,3 +1,4 @@
@import '../../styles/mixins';
.itemSelectionPanel {
position: absolute;
@ -14,16 +15,14 @@
top: 0;
left: 0;
right: 0;
padding-left: 0.5em;
padding-left: max(env(safe-area-inset-left), 0.5em);
padding-right: 0.5em;
padding-right: max(env(safe-area-inset-right), 0.5em);
padding-top: 1em;
padding-top: max(env(safe-area-inset-top), 1em);
padding-bottom: 1em;
display: flex;
align-items: center;
z-index: 99999;
@include conditional-max(padding-left, 0.5em, env(safe-area-inset-left));
@include conditional-max(padding-right, 0.5em, env(safe-area-inset-right));
@include conditional-max(padding-top, 1em, env(safe-area-inset-top));
}
.itemSelectionCount {

9
src/components/remotecontrol/remotecontrol.scss
View file

@ -1,3 +1,5 @@
@import '../../styles/mixins';
.nowPlayingPage {
padding: 5em 0 0 0 !important;
}
@ -184,11 +186,10 @@
left: 0;
height: 4.2em;
right: 0;
padding-left: 7.3%;
padding-left: max(env(safe-area-inset-left), 7.3%);
padding-right: 7.3%;
padding-right: max(env(safe-area-inset-right), 7.3%);
padding-bottom: env(safe-area-inset-bottom);
@include conditional-max(padding-left, 7.3%, env(safe-area-inset-left));
@include conditional-max(padding-right, 7.3%, env(safe-area-inset-right));
}
.layout-desktop .playlistSectionButton,

9
src/components/toast/toast.scss
View file

@ -1,17 +1,18 @@
@import '../../styles/mixins';
.toastContainer {
position: fixed;
bottom: 0;
pointer-events: none;
z-index: 9999999;
padding-left: 1em;
padding-left: max(env(safe-area-inset-left), 1em);
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-bottom: max(env(safe-area-inset-bottom), 1em);
display: flex;
flex-direction: column;
@include conditional-max(padding-left, 1em, env(safe-area-inset-left));
@include conditional-max(padding-bottom, 1em, env(safe-area-inset-bottom));
[dir="ltr"] & {
left: 0;
}

8
src/elements/emby-scroller/emby-scroller.scss
View file

@ -1,12 +1,12 @@
@import '../../styles/mixins';
.emby-scroller-container {
position: relative;
}
.emby-scroller {
padding-left: 3.3%;
padding-left: max(env(safe-area-inset-left), 3.3%);
padding-right: 3.3%;
padding-right: max(env(safe-area-inset-right), 3.3%);
@include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
@include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
}
.servers > .card > .cardBox {

12
src/styles/_mixins.scss Normal file
View file

@ -0,0 +1,12 @@
// This mixin is used to provide a fallback for `max()` function in older browsers
// (e.g. Chrome 76 that is found in devices like Samsung 2021 TVs). The mixin ensures
// a default value is applied to a property while using `max()` only if supported.
@mixin conditional-max($property, $default, $max-value) {
& {
#{$property}: $default;
}
@supports (width: max(1px, 1px)) {
#{$property}: max($max-value, $default);
}
}

20
src/styles/librarybrowser.scss
View file

@ -1,3 +1,5 @@
@import 'mixins';
// The padding of the header content on mobile needs to be adjusted
// based on the size of the poster card (values from card.scss)
@mixin header-poster-padding() {
@ -1353,25 +1355,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
.padded-left {
[dir="ltr"] & {
padding-left: 3.3%;
padding-left: max(env(safe-area-inset-left), 3.3%);
@include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
}
[dir="rtl"] & {
padding-right: 3.3%;
padding-right: max(env(safe-area-inset-right), 3.3%);
@include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
}
}
.padded-right {
[dir="ltr"] & {
padding-right: 3.3%;
padding-right: max(env(safe-area-inset-right), 3.3%);
@include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
}
[dir="rtl"] & {
padding-left: 3.3%;
padding-left: max(env(safe-area-inset-left), 3.3%);
@include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
}
}
@ -1395,13 +1393,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
@media all and (min-height: 31.25em) {
[dir="ltr"] .padded-right-withalphapicker {
padding-right: 7.5%;
padding-right: max(env(safe-area-inset-right), 7.5%);
@include conditional-max(padding-right, 7.5%, env(safe-area-inset-right));
}
[dir="rtl"] .padded-right-withalphapicker {
padding-left: 7.5%;
padding-left: max(env(safe-area-inset-left), 7.5%);
@include conditional-max(padding-left, 7.5%, env(safe-area-inset-left));
}
}

6
src/styles/videoosd.scss
View file

@ -1,3 +1,5 @@
@import 'mixins';
.chapterThumbTextContainer,
.videoOsdBottom {
user-select: none;
@ -12,8 +14,6 @@
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: 7.5em;
padding-bottom: 1.75em;
padding-bottom: max(env(safe-area-inset-bottom), 1.75em);
display: flex;
flex-direction: row;
justify-content: center;
@ -23,6 +23,8 @@
user-select: none;
-webkit-touch-callout: none;
pointer-events: none;
@include conditional-max(padding-bottom, 1.75em, env(safe-area-inset-bottom));
}
.skinHeader-withBackground.osdHeader {