Skip to content

Commit 472b652

Browse files
bernardenbernarden
committed
Fix css fallback of max function in chrome 76.
1 parent d3db9eb commit 472b652

File tree

8 files changed

+54
-47
lines changed

8 files changed

+54
-47
lines changed

‎src/components/alphaPicker/style.scss

+10-14
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../styles/mixins';
2+
13
.alphaPicker {
24
text-align: center;
35
display: flex;
@@ -11,8 +13,8 @@
1113

1214
.alphaPicker-fixed {
1315
position: fixed;
14-
bottom: 5.5em;
15-
bottom: max(env(safe-area-inset-bottom), 5.5em);
16+
17+
@include conditional-max(bottom, 5.5em, env(safe-area-inset-bottom));
1618
}
1719

1820
.alphaPickerRow {
@@ -45,8 +47,7 @@
4547

4648
@media all and (max-height: 50em) {
4749
.alphaPicker-fixed {
48-
bottom: 5em;
49-
bottom: max(env(safe-area-inset-bottom), 5em);
50+
@include conditional-max(bottom, 5em, env(safe-area-inset-bottom));
5051
}
5152

5253
.alphaPickerButton-vertical {
@@ -105,32 +106,27 @@
105106
}
106107

107108
.alphaPicker-fixed.alphaPicker-tv {
108-
bottom: 1%;
109-
bottom: max(env(safe-area-inset-bottom), 1%);
109+
@include conditional-max(bottom, 1%, env(safe-area-inset-bottom));
110110
}
111111

112112
.alphaPicker-fixed-right {
113113
[dir="ltr"] & {
114-
right: 0.4em;
115-
right: max(env(safe-area-inset-right), 0.4em);
114+
@include conditional-max(right, 0.4em, env(safe-area-inset-right));
116115
}
117116

118117
[dir="rtl"] & {
119-
left: 0.4em;
120-
left: max(env(safe-area-inset-left), 0.4em);
118+
@include conditional-max(left, 0.4em, env(safe-area-inset-left));
121119
}
122120
}
123121

124122
@media all and (min-width: 62.5em) {
125123
.alphaPicker-fixed-right {
126124
[dir="ltr"] & {
127-
right: 1em;
128-
right: max(env(safe-area-inset-right), 1em);
125+
@include conditional-max(right, 1em, env(safe-area-inset-right));
129126
}
130127

131128
[dir="rtl"] & {
132-
left: 1em;
133-
left: max(env(safe-area-inset-left), 1em);
129+
@include conditional-max(left, 1em, env(safe-area-inset-left));
134130
}
135131
}
136132
}

‎src/components/multiSelect/multiSelect.scss

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import '../../styles/mixins';
12

23
.itemSelectionPanel {
34
position: absolute;
@@ -14,16 +15,14 @@
1415
top: 0;
1516
left: 0;
1617
right: 0;
17-
padding-left: 0.5em;
18-
padding-left: max(env(safe-area-inset-left), 0.5em);
19-
padding-right: 0.5em;
20-
padding-right: max(env(safe-area-inset-right), 0.5em);
21-
padding-top: 1em;
22-
padding-top: max(env(safe-area-inset-top), 1em);
2318
padding-bottom: 1em;
2419
display: flex;
2520
align-items: center;
2621
z-index: 99999;
22+
23+
@include conditional-max(padding-left, 0.5em, env(safe-area-inset-left));
24+
@include conditional-max(padding-right, 0.5em, env(safe-area-inset-right));
25+
@include conditional-max(padding-top, 1em, env(safe-area-inset-top));
2726
}
2827

2928
.itemSelectionCount {

‎src/components/remotecontrol/remotecontrol.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../styles/mixins';
2+
13
.nowPlayingPage {
24
padding: 5em 0 0 0 !important;
35
}
@@ -184,11 +186,10 @@
184186
left: 0;
185187
height: 4.2em;
186188
right: 0;
187-
padding-left: 7.3%;
188-
padding-left: max(env(safe-area-inset-left), 7.3%);
189-
padding-right: 7.3%;
190-
padding-right: max(env(safe-area-inset-right), 7.3%);
191189
padding-bottom: env(safe-area-inset-bottom);
190+
191+
@include conditional-max(padding-left, 7.3%, env(safe-area-inset-left));
192+
@include conditional-max(padding-right, 7.3%, env(safe-area-inset-right));
192193
}
193194

194195
.layout-desktop .playlistSectionButton,

‎src/components/toast/toast.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1+
@import '../../styles/mixins';
2+
13
.toastContainer {
24
position: fixed;
35
bottom: 0;
46
pointer-events: none;
57
z-index: 9999999;
6-
padding-left: 1em;
7-
padding-left: max(env(safe-area-inset-left), 1em);
88
padding-right: 1em;
99
padding-top: 1em;
10-
padding-bottom: 1em;
11-
padding-bottom: max(env(safe-area-inset-bottom), 1em);
1210
display: flex;
1311
flex-direction: column;
1412

13+
@include conditional-max(padding-left, 1em, env(safe-area-inset-left));
14+
@include conditional-max(padding-bottom, 1em, env(safe-area-inset-bottom));
15+
1516
[dir="ltr"] & {
1617
left: 0;
1718
}

‎src/elements/emby-scroller/emby-scroller.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
@import '../../styles/mixins';
2+
13
.emby-scroller-container {
24
position: relative;
35
}
46

57
.emby-scroller {
6-
padding-left: 3.3%;
7-
padding-left: max(env(safe-area-inset-left), 3.3%);
8-
padding-right: 3.3%;
9-
padding-right: max(env(safe-area-inset-right), 3.3%);
8+
@include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
9+
@include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
1010
}
1111

1212
.servers > .card > .cardBox {

‎src/styles/_mixins.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// This mixin is used to provide a fallback for `max()` function in older browsers
2+
// (e.g. Chrome 76 that is found in devices like Samsung 2021 TVs). The mixin ensures
3+
// a default value is applied to a property while using `max()` only if supported.
4+
@mixin conditional-max($property, $default, $max-value) {
5+
& {
6+
#{$property}: $default;
7+
}
8+
9+
@supports (width: max(1px, 1px)) {
10+
#{$property}: max($max-value, $default);
11+
}
12+
}

‎src/styles/librarybrowser.scss

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'mixins';
2+
13
// The padding of the header content on mobile needs to be adjusted
24
// based on the size of the poster card (values from card.scss)
35
@mixin header-poster-padding() {
@@ -1353,25 +1355,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
13531355

13541356
.padded-left {
13551357
[dir="ltr"] & {
1356-
padding-left: 3.3%;
1357-
padding-left: max(env(safe-area-inset-left), 3.3%);
1358+
@include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
13581359
}
13591360

13601361
[dir="rtl"] & {
1361-
padding-right: 3.3%;
1362-
padding-right: max(env(safe-area-inset-right), 3.3%);
1362+
@include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
13631363
}
13641364
}
13651365

13661366
.padded-right {
13671367
[dir="ltr"] & {
1368-
padding-right: 3.3%;
1369-
padding-right: max(env(safe-area-inset-right), 3.3%);
1368+
@include conditional-max(padding-right, 3.3%, env(safe-area-inset-right));
13701369
}
13711370

13721371
[dir="rtl"] & {
1373-
padding-left: 3.3%;
1374-
padding-left: max(env(safe-area-inset-left), 3.3%);
1372+
@include conditional-max(padding-left, 3.3%, env(safe-area-inset-left));
13751373
}
13761374
}
13771375

@@ -1394,14 +1392,12 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
13941392
}
13951393

13961394
@media all and (min-height: 31.25em) {
1397-
[dir="ltr"] .padded-right-withalphapicker {
1398-
padding-right: 7.5%;
1399-
padding-right: max(env(safe-area-inset-right), 7.5%);
1395+
[dir="ltr"] .padded-right-withalphpicker {
1396+
@include conditional-max(padding-right, 7.5%, env(safe-area-inset-right));
14001397
}
14011398

14021399
[dir="rtl"] .padded-right-withalphapicker {
1403-
padding-left: 7.5%;
1404-
padding-left: max(env(safe-area-inset-left), 7.5%);
1400+
@include conditional-max(padding-left, 7.5%, env(safe-area-inset-left));
14051401
}
14061402
}
14071403

‎src/styles/videoosd.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'mixins';
2+
13
.chapterThumbTextContainer,
24
.videoOsdBottom {
35
user-select: none;
@@ -12,8 +14,6 @@
1214
padding-left: env(safe-area-inset-left);
1315
padding-right: env(safe-area-inset-right);
1416
padding-top: 7.5em;
15-
padding-bottom: 1.75em;
16-
padding-bottom: max(env(safe-area-inset-bottom), 1.75em);
1717
display: flex;
1818
flex-direction: row;
1919
justify-content: center;
@@ -23,6 +23,8 @@
2323
user-select: none;
2424
-webkit-touch-callout: none;
2525
pointer-events: none;
26+
27+
@include conditional-max(padding-bottom, 1.75em, env(safe-area-inset-bottom));
2628
}
2729

2830
.skinHeader-withBackground.osdHeader {

0 commit comments

Comments
 (0)