From e03aba766afd4678d85a6a66eee75629e2ab574e Mon Sep 17 00:00:00 2001 From: IEduStu <125146135+IEduStu@users.noreply.github.com> Date: Wed, 17 Apr 2024 00:25:21 +0000 Subject: [PATCH 01/35] feat: improve mobile design --- src/App/styles.less | 10 ++++-- src/common/Button/styles.less | 2 ++ src/common/MainNavBars/styles.less | 33 +++++++++++++++++-- .../NavBar/HorizontalNavBar/styles.less | 4 ++- src/common/StreamingServerWarning/styles.less | 13 ++++++-- src/index.html | 2 +- src/routes/Addons/styles.less | 31 +++++++++++++++-- src/routes/Board/styles.less | 13 ++------ src/routes/Discover/styles.less | 30 +++++++++++++++-- src/routes/Library/styles.less | 30 +++++++++++++++-- src/routes/MetaDetails/styles.less | 5 +++ src/routes/Settings/styles.less | 2 -- 12 files changed, 144 insertions(+), 31 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index edff6e66d..ba6ce5a4b 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -85,13 +85,19 @@ svg { } html { - width: 100%; - height: 100%; + width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; + height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; min-width: 640px; min-height: 480px; font-family: 'PlusJakartaSans', 'sans-serif'; overflow: auto; overscroll-behavior: none; + user-select: none; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + + // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp + --calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; body { width: 100%; diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index 6baf8b7aa..e911d4a63 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -8,6 +8,8 @@ outline-offset: calc(-1 * var(--focus-outline-size)); -webkit-tap-highlight-color: transparent; cursor: pointer; + -webkit-touch-callout: none; + touch-callout: none; &:focus { outline-style: solid; diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index e76192fbb..cc13854f4 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -5,6 +5,11 @@ .main-nav-bars-container { position: relative; z-index: 0; + overflow: clip; + margin-left: env(safe-area-inset-left, 0px); + margin-right: env(safe-area-inset-right, 0px); + width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); + height: 100%; .horizontal-nav-bar { position: absolute; @@ -17,18 +22,32 @@ .vertical-nav-bar { position: absolute; top: var(--horizontal-nav-bar-size); - bottom: 0; + bottom: var(--calculated-bottom-safe-inset); left: 0; z-index: 1; } .nav-content-container { position: absolute; - top: var(--horizontal-nav-bar-size); + padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); + top: 0; right: 0; bottom: 0; left: var(--vertical-nav-bar-size); z-index: 0; + overflow: scroll; + + --top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); + --bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); } } @@ -36,7 +55,15 @@ .main-nav-bars-container { .nav-content-container { left: 0; - bottom: var(--vertical-nav-bar-size); + padding-bottom: var(--vertical-nav-bar-size); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), + transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) + ); } .vertical-nav-bar { diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 2be5ccf35..36658b341 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -12,6 +12,8 @@ padding-right: 1rem; background-color: transparent; overflow: visible; + padding-top: env(safe-area-inset-top,0px); + box-sizing: content-box; .logo-container { flex: none; @@ -32,7 +34,7 @@ } .back-button-container { - margin-left: 1rem; + margin-left: max(0px, calc(1rem - env(safe-area-inset-left, 0px))); } .title { diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index 42ab6bb4b..e8b2a8a17 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -6,8 +6,11 @@ display: flex; flex-direction: row; align-items: center; - padding: 1rem; background-color: @color-accent5-dark3; + padding: 1rem; + border-radius: 8px; + margin: 0px 8px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48), 0px 8px 48px rgba(0, 0, 0, 0.64); .warning-statement { flex: 1; @@ -19,8 +22,12 @@ .warning-button { flex: none; - margin-left: 1rem; + margin-left: 1.5rem; color: @color-surface-light5-90; + background-color: rgba(0, 0, 0, 0.24); + padding: 8px 12px; + border-radius: 8px; + line-height: 18px; &:first-child { margin-left: 0; @@ -50,7 +57,7 @@ height: auto !important; text-align: center; .warning-statement { - margin-bottom: 0.5rem; + margin-bottom: 1rem; margin-right: 0; } .warning-button { diff --git a/src/index.html b/src/index.html index 6b9e62fe4..ba8a9e795 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - + diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 8060e23b8..095e0e7c5 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -22,17 +22,39 @@ } .addons-container { - width: 100%; height: 100%; background-color: transparent; .addons-content { + --selectable-inputs-assumed-height: 84px; + --top-overlay-size: var(--selectable-inputs-assumed-height); + --bottom-vertical-nav-bar-size: 0px; + --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + width: 100%; - height: 100%; + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; align-self: stretch; + .addons-list-container { + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + padding: 0 1.5rem; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size, 0px); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); + z-index: 1; + } + .selectable-inputs-container { flex: none; align-self: stretch; @@ -41,6 +63,7 @@ justify-content: space-between; padding: 1.5rem; overflow: visible; + z-index: 2; .add-button-container { flex: none; @@ -53,6 +76,7 @@ padding: 0 1.5rem; border-radius: 3rem; background-color: var(--secondary-accent-color); + z-index: 3; &:hover { outline: var(--focus-outline-size) solid var(--secondary-accent-color); @@ -133,7 +157,6 @@ .addons-list-container { flex: 1; align-self: stretch; - padding: 0 1.5rem; overflow-y: auto; .addon { @@ -278,6 +301,8 @@ @media only screen and (max-width: @minimum) { .addons-container { .addons-content { + --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); + .selectable-inputs-container { .add-button-container { z-index: 1; diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index b949d8689..1c09e09c9 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -24,7 +24,6 @@ .board-content { width: 100%; - height: 100%; padding: 0 1rem; overflow-y: auto; @@ -38,6 +37,7 @@ .board-warning-container { flex: none; align-self: stretch; + margin-bottom: var(--calculated-bottom-safe-inset, 0px); } } @@ -191,15 +191,7 @@ z-index: 0; .board-content-container { - &:only-child { - .board-content { - height: 100%; - } - } - .board-content { - height: calc(100% - 4rem); - .board-row { margin-bottom: 1.5rem; } @@ -226,8 +218,9 @@ position: absolute; left: 0; right: 0; - bottom: var(--vertical-nav-bar-size); + bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); height: 4rem; + margin-bottom: 0px; } } } \ No newline at end of file diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 9f7969702..dad457d2e 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -17,13 +17,20 @@ } .discover-container { - width: 100%; height: 100%; background-color: transparent; .discover-content { + --selectable-inputs-assumed-height: 84px; + --top-overlay-size: var(--selectable-inputs-assumed-height); + --bottom-vertical-nav-bar-size: 0px; + --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + width: 100%; - height: 100%; + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: row; @@ -33,6 +40,21 @@ display: flex; flex-direction: column; + .meta-items-container { + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + padding: 0 1.5rem; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size, 0px); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); + z-index: 1; + } + .selectable-inputs-container { flex: none; align-self: stretch; @@ -40,6 +62,7 @@ flex-direction: row; padding: 1.5rem; overflow: visible; + z-index: 2; .select-input { flex: 0 1 15rem; @@ -162,7 +185,6 @@ align-items: center; grid-gap: 0.5rem; margin-right: 1.5rem; - padding: 0 1.5rem; overflow-y: auto; .meta-item-placeholder { @@ -348,6 +370,8 @@ @media only screen and (max-width: @minimum) { .discover-container { .discover-content { + --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); + .catalog-container { .selectable-inputs-container { justify-content: space-between; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 9bdd49d4a..290a51208 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -13,16 +13,38 @@ } .library-container { - width: 100%; height: 100%; background-color: transparent; .library-content { + --selectable-inputs-assumed-height: 80px; + --top-overlay-size: var(--selectable-inputs-assumed-height); + --bottom-vertical-nav-bar-size: 0px; + --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + width: 100%; - height: 100%; + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; + .meta-items-container { + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + padding: 0 1.5rem; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size, 0px); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); + z-index: 1; + } + .selectable-inputs-container { flex: none; align-self: stretch; @@ -30,6 +52,7 @@ flex-direction: row; padding: 1.5rem; overflow: visible; + z-index: 2; .select-input-container { flex-grow: 0; @@ -119,7 +142,6 @@ grid-auto-rows: max-content; align-items: center; grid-gap: 0.5rem; - padding: 0 1.5rem; overflow-y: auto; } } @@ -216,6 +238,8 @@ @media only screen and (max-width: @minimum) { .library-container { .library-content { + --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); + .selectable-inputs-container { justify-content: space-between; } diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 54352fe7e..3923c7927 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -17,6 +17,9 @@ flex-direction: column; width: 100%; height: 100%; + padding-left: env(safe-area-inset-left, 0px); + padding-right: env(safe-area-inset-right, 0px); + box-sizing: border-box; .nav-bar { z-index: 1; @@ -91,6 +94,8 @@ flex: 0 1 auto; align-self: stretch; padding: 0 4rem 2rem 4rem; + + padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0px))); } .spacing { diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 37103540f..82ffdcbd2 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -13,13 +13,11 @@ } .settings-container { - width: 100%; height: 100%; background-color: transparent; .settings-content { width: 100%; - height: 100%; display: flex; flex-direction: row; From ec570b91f1b619e3d08d58665311e2ac196ab598 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 15:30:07 +0200 Subject: [PATCH 02/35] refactor(styles): app styles.less --- src/App/styles.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index ba6ce5a4b..8290b7cfc 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -13,6 +13,11 @@ @import (once, less) '~stremio-router/styles.css'; } +// iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp +@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px)))"; +@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; +@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; + :root { --landscape-shape-ratio: 0.5625; --poster-shape-ratio: 1.464; @@ -85,8 +90,8 @@ svg { } html { - width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; - height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; + width: @html-width; + height: @html-height; min-width: 640px; min-height: 480px; font-family: 'PlusJakartaSans', 'sans-serif'; @@ -96,9 +101,6 @@ html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; - // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp - --calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; - body { width: 100%; height: 100%; From 45ed5254ea828e6ad0f2f930889b0510fcf34312 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 15:40:35 +0200 Subject: [PATCH 03/35] add: calculated-bottom-safe-inset this will allow us to reuse in the app without importing globals file --- src/App/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 8290b7cfc..884f6b451 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -12,9 +12,7 @@ @import (once, less) '~stremio/common/animations.less'; @import (once, less) '~stremio-router/styles.css'; } - -// iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp -@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px)))"; +@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; @@ -45,6 +43,8 @@ --modal-background-color: rgba(15, 13, 32, 1); --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; + // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp + --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; } * { From 055ac1d87388e534c4f10c6bfa38872d2fde5a41 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 15:41:27 +0200 Subject: [PATCH 04/35] remove: webkit properties on button touch-callout is not supported well and might cause problems, clearly written not to use in production; highlight color not needed since we use it on global html --- src/common/Button/styles.less | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index e911d4a63..6a26b3b7f 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -6,10 +6,7 @@ outline-width: var(--focus-outline-size); outline-color: @color-surface-light5; outline-offset: calc(-1 * var(--focus-outline-size)); - -webkit-tap-highlight-color: transparent; cursor: pointer; - -webkit-touch-callout: none; - touch-callout: none; &:focus { outline-style: solid; From 4f4b46c9f192897b4ea42ac9fe237c487e1996d8 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 20:53:36 +0200 Subject: [PATCH 05/35] refactor(MainNavbars): use less variables this ensures we utilize built in less style variables at the top of the file to avoid inline variable declarations --- src/common/MainNavBars/styles.less | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index cc13854f4..9119b451d 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -2,6 +2,11 @@ @import (reference) '~stremio/common/screen-sizes.less'; +@top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); +@bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); +@overlap-size: 3rem; +@transparency-grandient-pad: 6rem; + .main-nav-bars-container { position: relative; z-index: 0; @@ -37,15 +42,10 @@ z-index: 0; overflow: scroll; - --top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); - --bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - mask: linear-gradient( to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + transparent calc(@top-overlay-size - @overlap-size), + black calc(@top-overlay-size + @transparency-grandient-pad), black 100% ); } @@ -59,10 +59,10 @@ mask: linear-gradient( to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), - transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) + transparent calc(@top-overlay-size - @overlap-size), + black calc(@top-overlay-size + @transparency-grandient-pad), + black calc(100% - @bottom-overlay-size - @transparency-grandient-pad), + transparent calc(100% - @bottom-overlay-size + @overlap-size) ); } From 77657929e8ead8b7fdf8fdb2a2f69cef1a65a017 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 20:55:37 +0200 Subject: [PATCH 06/35] refactor(HorizontalNavbar): add missing space --- src/common/NavBar/HorizontalNavBar/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 36658b341..0d22b286a 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -12,7 +12,7 @@ padding-right: 1rem; background-color: transparent; overflow: visible; - padding-top: env(safe-area-inset-top,0px); + padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; .logo-container { From 39cb89b0b04017df930cd44c2a139b2d98774ec9 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 20:56:25 +0200 Subject: [PATCH 07/35] refactor: update the copyrights (1) --- src/App/styles.less | 5 +++-- src/common/MainNavBars/styles.less | 2 +- src/common/NavBar/HorizontalNavBar/styles.less | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 884f6b451..df48aa83a 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~stremio/common/screen-sizes.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @@ -12,6 +12,8 @@ @import (once, less) '~stremio/common/animations.less'; @import (once, less) '~stremio-router/styles.css'; } + +// iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp @calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; @@ -43,7 +45,6 @@ --modal-background-color: rgba(15, 13, 32, 1); --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; - // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; } diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 9119b451d..33558dc48 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 0d22b286a..f1dc8f813 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; From dd8791d5895ed05e1efb3016e2aed8c09319c582 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:24:39 +0200 Subject: [PATCH 08/35] refactor(StreamingServerWarning): styles - removed the use of px values since these might be problematic on some devices - sticking to rem as the best way of defining sizes - reusing the global variable approach according screen sizes - added spacing - improved border-radius handling --- src/common/StreamingServerWarning/styles.less | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index e8b2a8a17..ea8f9c267 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -1,6 +1,7 @@ // Copyright (C) 2017-2023 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; +@import (reference) '~stremio/common/screen-sizes.less'; .warning-container { display: flex; @@ -8,9 +9,9 @@ align-items: center; background-color: @color-accent5-dark3; padding: 1rem; - border-radius: 8px; - margin: 0px 8px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48), 0px 8px 48px rgba(0, 0, 0, 0.64); + border-radius: 0.5rem 0.5rem 0 0; + margin: 0rem 0.5rem; + box-shadow: var(--outer-glow); .warning-statement { flex: 1; @@ -22,12 +23,12 @@ .warning-button { flex: none; - margin-left: 1.5rem; color: @color-surface-light5-90; background-color: rgba(0, 0, 0, 0.24); - padding: 8px 12px; - border-radius: 8px; - line-height: 18px; + padding: 0.5rem 1rem; + margin-left: 1.5rem; + border-radius: 0.5rem; + line-height: 1.2rem; &:first-child { margin-left: 0; @@ -43,6 +44,7 @@ font-size: 1.2rem; max-height: 1.2em; color: @color-surface-light5-90; + overflow: visible; } } @@ -51,15 +53,18 @@ } } -@media only screen and (max-width: 500px) { +@media only screen and (max-width: @minimum) { .warning-container { display: block; height: auto !important; text-align: center; + border-radius: 0.5rem; + .warning-statement { margin-bottom: 1rem; margin-right: 0; } + .warning-button { display: inline-block; } From d7776f6d982dabf9d29be9f51198d573dd9196a6 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:44:00 +0200 Subject: [PATCH 09/35] refactor(Addons): styles - removed use of px - creates less native variables -removed unnecessary vars --- src/routes/Addons/styles.less | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 095e0e7c5..0d4339e5a 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -21,35 +21,34 @@ filters-modal-content: modal-dialog-content; } +@selectable-inputs-assumed-height: 5.25rem; +@top-overlay-size: @selectable-inputs-assumed-height; +@bottom-overlay-size: calc(1.5rem + env(safe-area-inset-bottom, 0rem)); +@overlap-size: 3rem; +@transparency-grandient-pad: 6rem; + .addons-container { height: 100%; background-color: transparent; .addons-content { - --selectable-inputs-assumed-height: 84px; - --top-overlay-size: var(--selectable-inputs-assumed-height); - --bottom-vertical-nav-bar-size: 0px; - --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - width: 100%; - height: calc(100% + var(--bottom-overlay-size)); - margin-bottom: calc(var(--bottom-overlay-size) * -1); + height: calc(100% + @bottom-overlay-size); + margin-bottom: calc(@bottom-overlay-size * -1); display: flex; flex-direction: column; align-self: stretch; .addons-list-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(@selectable-inputs-assumed-height * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); - padding-bottom: var(--bottom-overlay-size, 0px); + padding-top: @selectable-inputs-assumed-height; + padding-bottom: @bottom-overlay-size; mask: linear-gradient( to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + transparent calc(@top-overlay-size - @overlap-size), + black calc(@top-overlay-size + @transparency-grandient-pad), black 100% ); z-index: 1; @@ -301,8 +300,6 @@ @media only screen and (max-width: @minimum) { .addons-container { .addons-content { - --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); - .selectable-inputs-container { .add-button-container { z-index: 1; From 896950cff0a2e4ea5a9329065ea1d5f59734e08b Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:46:45 +0200 Subject: [PATCH 10/35] refactor(Board): styles - removed use of px --- src/routes/Board/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 1c09e09c9..1d973be18 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -37,7 +37,7 @@ .board-warning-container { flex: none; align-self: stretch; - margin-bottom: var(--calculated-bottom-safe-inset, 0px); + margin-bottom: var(--calculated-bottom-safe-inset, 0rem); } } @@ -218,9 +218,9 @@ position: absolute; left: 0; right: 0; - bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); + bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); height: 4rem; - margin-bottom: 0px; + margin-bottom: 0rem; } } } \ No newline at end of file From 3a67df5791d5651a5878ed54fac89f893dcdf56d Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:55:11 +0200 Subject: [PATCH 11/35] refactor(app): add vars used across the app --- src/App/styles.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/App/styles.less b/src/App/styles.less index df48aa83a..139f2e946 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -18,6 +18,12 @@ @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; +@selectable-inputs-assumed-height: 5.25rem; +@top-overlay-size: @selectable-inputs-assumed-height; +@bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); +@overlap-size: 3rem; +@transparency-grandient-pad: 6rem; + :root { --landscape-shape-ratio: 0.5625; --poster-shape-ratio: 1.464; @@ -46,6 +52,11 @@ --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; + --selectable-inputs-assumed-height: 5.25rem; + --top-overlay-size: @selectable-inputs-assumed-height; + --bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; } * { From d7a4deadaa561694e1524aca86ebeeab8d0943bc Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:55:26 +0200 Subject: [PATCH 12/35] refactor(Addons): use global vars --- src/routes/Addons/styles.less | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 0d4339e5a..028fa5ed5 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -21,34 +21,28 @@ filters-modal-content: modal-dialog-content; } -@selectable-inputs-assumed-height: 5.25rem; -@top-overlay-size: @selectable-inputs-assumed-height; -@bottom-overlay-size: calc(1.5rem + env(safe-area-inset-bottom, 0rem)); -@overlap-size: 3rem; -@transparency-grandient-pad: 6rem; - .addons-container { height: 100%; background-color: transparent; .addons-content { width: 100%; - height: calc(100% + @bottom-overlay-size); - margin-bottom: calc(@bottom-overlay-size * -1); + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; align-self: stretch; .addons-list-container { - margin-top: calc(@selectable-inputs-assumed-height * -1); + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); padding: 0 1.5rem; - padding-top: @selectable-inputs-assumed-height; - padding-bottom: @bottom-overlay-size; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( to bottom, - transparent calc(@top-overlay-size - @overlap-size), - black calc(@top-overlay-size + @transparency-grandient-pad), + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), black 100% ); z-index: 1; From d29375c31b069a53f04a757becbda21a79906568 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:55:40 +0200 Subject: [PATCH 13/35] refactor(Discover): use global vars --- src/routes/Discover/styles.less | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index dad457d2e..c70c9d8eb 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -21,13 +21,6 @@ background-color: transparent; .discover-content { - --selectable-inputs-assumed-height: 84px; - --top-overlay-size: var(--selectable-inputs-assumed-height); - --bottom-vertical-nav-bar-size: 0px; - --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - width: 100%; height: calc(100% + var(--bottom-overlay-size)); margin-bottom: calc(var(--bottom-overlay-size) * -1); @@ -44,7 +37,7 @@ margin-top: calc(var(--selectable-inputs-assumed-height) * -1); padding: 0 1.5rem; padding-top: var(--selectable-inputs-assumed-height); - padding-bottom: var(--bottom-overlay-size, 0px); + padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( to bottom, From ef153fab4b74dd594acedf95bb6f9bcfa4ca1e27 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:56:01 +0200 Subject: [PATCH 14/35] refactor(Discover): remove inline var --- src/routes/Discover/styles.less | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index c70c9d8eb..f6dc5e58b 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -363,8 +363,6 @@ @media only screen and (max-width: @minimum) { .discover-container { .discover-content { - --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); - .catalog-container { .selectable-inputs-container { justify-content: space-between; From fb1a043e1d6f02f39156d366dd4d023219165f59 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:57:47 +0200 Subject: [PATCH 15/35] refactor(MetaDetails): use rem instead - remove unused nav-bar-size declaration --- src/routes/MetaDetails/styles.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 3923c7927..d1d3d287b 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -17,8 +17,8 @@ flex-direction: column; width: 100%; height: 100%; - padding-left: env(safe-area-inset-left, 0px); - padding-right: env(safe-area-inset-right, 0px); + padding-left: env(safe-area-inset-left, 0rem); + padding-right: env(safe-area-inset-right, 0rem); box-sizing: border-box; .nav-bar { @@ -36,7 +36,6 @@ flex-direction: row; .vertical-nav-bar { - --vertical-nav-bar-size: 6rem; flex: none; } @@ -95,7 +94,7 @@ align-self: stretch; padding: 0 4rem 2rem 4rem; - padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0px))); + padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0rem))); } .spacing { From 96ceafa458d9db1bece58397887422bf5e24369e Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:11:13 +0200 Subject: [PATCH 16/35] remove(app styles): variable which was repeated - var(--selectable-inputs-assumed-height) removed in favor of reusing var(--top-overlay-size) - fixed the bottom overlay size --- src/App/styles.less | 14 ++++++-------- src/routes/Addons/styles.less | 4 ++-- src/routes/Discover/styles.less | 4 ++-- src/routes/Library/styles.less | 6 +++--- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 139f2e946..b8ae28a6d 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -18,9 +18,8 @@ @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; -@selectable-inputs-assumed-height: 5.25rem; -@top-overlay-size: @selectable-inputs-assumed-height; -@bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); +@top-overlay-size: 5.25rem; +@bottom-overlay-size: calc(3rem + env(safe-area-inset-bottom, 0rem)); @overlap-size: 3rem; @transparency-grandient-pad: 6rem; @@ -52,11 +51,10 @@ --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; - --selectable-inputs-assumed-height: 5.25rem; - --top-overlay-size: @selectable-inputs-assumed-height; - --bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; + --top-overlay-size: @top-overlay-size; + --bottom-overlay-size: @bottom-overlay-size; + --overlap-size: @overlap-size; + --transparency-grandient-pad: @transparency-grandient-pad; } * { diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 028fa5ed5..ce8b7c69d 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -34,9 +34,9 @@ align-self: stretch; .addons-list-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); + padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index f6dc5e58b..48fb111f4 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -34,9 +34,9 @@ flex-direction: column; .meta-items-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); + padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 290a51208..80c519d45 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -18,7 +18,7 @@ .library-content { --selectable-inputs-assumed-height: 80px; - --top-overlay-size: var(--selectable-inputs-assumed-height); + --top-overlay-size: var(--top-overlay-size); --bottom-vertical-nav-bar-size: 0px; --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); --overlap-size: 3rem; @@ -31,9 +31,9 @@ flex-direction: column; .meta-items-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); + padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size, 0px); mask: linear-gradient( From 9ca41aa8c00583a65ad00d041a084195c94958a1 Mon Sep 17 00:00:00 2001 From: IEduStu <125146135+IEduStu@users.noreply.github.com> Date: Wed, 17 Apr 2024 01:13:30 +0000 Subject: [PATCH 17/35] feat: improve mobile design --- .../VerticalNavBar/NavTabButton/styles.less | 10 ++-- src/routes/MetaDetails/MetaDetails.js | 29 +++++----- src/routes/MetaDetails/styles.less | 56 ++++++++++++------- src/routes/Search/styles.less | 1 - 4 files changed, 57 insertions(+), 39 deletions(-) diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less index 01fd993e3..408752c38 100644 --- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less +++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less @@ -11,11 +11,13 @@ background-color: transparent; border-radius: 0.75rem; - &:hover { - background-color: var(--overlay-color); + @media (pointer: fine) { + &:hover { + background-color: var(--overlay-color); - .label { - opacity: 0.6; + .label { + opacity: 0.6; + } } } diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index acbe03517..ef7700d09 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,8 +76,23 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); + + const canRenderBackground = metaPath !== null && metaDetails.metaItem !== null && metaDetails.metaItem.content.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' && + typeof metaDetails.metaItem.content.content.background === 'string' && metaDetails.metaItem.content.content.background.length > 0; + return (
+ { + canRenderBackground && +
+ {' +
+ } { : - { - typeof metaDetails.metaItem.content.content.background === 'string' && - metaDetails.metaItem.content.content.background.length > 0 ? -
- {' -
- : - null - } Date: Sat, 21 Dec 2024 22:26:33 +0200 Subject: [PATCH 18/35] refactor(MetaDetails): styles + performance - use useMemo for the bg render check --- src/routes/MetaDetails/MetaDetails.js | 31 ++++++++++++++++----------- src/routes/MetaDetails/styles.less | 11 ++-------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ef7700d09..ee0a6907a 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,22 +76,29 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); - - const canRenderBackground = metaPath !== null && metaDetails.metaItem !== null && metaDetails.metaItem.content.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' && - typeof metaDetails.metaItem.content.content.background === 'string' && metaDetails.metaItem.content.content.background.length > 0; + const renderBackground = React.useMemo(() => !!( + metaPath && + metaDetails?.metaItem && + metaDetails.metaItem.content?.type !== 'Err' && + metaDetails.metaItem.content.type !== 'Loading' && + typeof metaDetails.metaItem.content.content?.background === 'string' && + metaDetails.metaItem.content.content.background.length > 0 + ), [metaPath, metaDetails]); return (
{ - canRenderBackground && -
- {' -
+ renderBackground ? +
+ {' +
+ : + null } Date: Sat, 21 Dec 2024 22:35:42 +0200 Subject: [PATCH 19/35] fix(app): styles for the bottom-overlay-size - use rem instead of px - make the bottom-overlay-size adjustments --- src/App/styles.less | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index b8ae28a6d..a48dcf248 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -14,12 +14,12 @@ } // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp -@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; -@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; -@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; +@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; +@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0rem) + env(safe-area-inset-bottom, 0rem)))"; +@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0rem) + env(safe-area-inset-left, 0rem)))"; @top-overlay-size: 5.25rem; -@bottom-overlay-size: calc(3rem + env(safe-area-inset-bottom, 0rem)); +@bottom-overlay-size: 0rem; @overlap-size: 3rem; @transparency-grandient-pad: 6rem; @@ -211,4 +211,10 @@ html { } } } +} + +@media only screen and (max-width: @minimum) { + :root { + --bottom-overlay-size: 6rem; + } } \ No newline at end of file From 9c2b9da9bf764f4cdcde4e0063a225218d874886 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:39:07 +0200 Subject: [PATCH 20/35] refactor(app toasts): styles --- src/App/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index a48dcf248..9a8afc809 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -124,9 +124,9 @@ html { .toasts-container { position: absolute; - top: calc(1.2 * var(--horizontal-nav-bar-size)); - right: 0; - bottom: calc(1.2 * var(--horizontal-nav-bar-size)); + top: calc(1.2 * var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0rem)); + right: env(safe-area-inset-right, 0rem); + bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); left: auto; z-index: 1; padding: 0 calc(0.5 * var(--horizontal-nav-bar-size)); From 561896b6114a6aad0addf66fca5ddbfdf5ba46de Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:39:37 +0200 Subject: [PATCH 21/35] remove(SearchBar): remove fixed width - .search-container --- src/routes/Search/styles.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less index 5bbeb7076..ff8f7d1b9 100644 --- a/src/routes/Search/styles.less +++ b/src/routes/Search/styles.less @@ -12,7 +12,6 @@ } .search-container { - width: 100%; height: 100%; background-color: transparent; From dab4205988742d1706af3579c422ad140e37fef4 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:57:55 +0200 Subject: [PATCH 22/35] refactor(app styles): env vars changes --- src/App/styles.less | 16 ++++++++++++---- src/common/MainNavBars/styles.less | 17 ++++++----------- src/routes/Library/styles.less | 9 --------- src/routes/MetaDetails/styles.less | 6 +++--- 4 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 9a8afc809..1a1f50dcc 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -15,8 +15,12 @@ // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp @calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; -@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0rem) + env(safe-area-inset-bottom, 0rem)))"; -@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0rem) + env(safe-area-inset-left, 0rem)))"; +@html-width: ~"calc(max(100svw, 100dvw))"; +@html-height: ~"calc(max(100svh, 100dvh))"; +@safe-area-inset-top: env(safe-area-inset-top, 0rem); +@safe-area-inset-right: env(safe-area-inset-right, 0rem); +@safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem); +@safe-area-inset-left: env(safe-area-inset-left, 0rem); @top-overlay-size: 5.25rem; @bottom-overlay-size: 0rem; @@ -55,6 +59,10 @@ --bottom-overlay-size: @bottom-overlay-size; --overlap-size: @overlap-size; --transparency-grandient-pad: @transparency-grandient-pad; + --safe-area-inset-top: @safe-area-inset-top; + --safe-area-inset-right: @safe-area-inset-right; + --safe-area-inset-bottom: @safe-area-inset-bottom; + --safe-area-inset-left: @safe-area-inset-left; } * { @@ -124,8 +132,8 @@ html { .toasts-container { position: absolute; - top: calc(1.2 * var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0rem)); - right: env(safe-area-inset-right, 0rem); + top: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-top)); + right: var(--safe-area-inset-right); bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); left: auto; z-index: 1; diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 33558dc48..7495b90a2 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -2,11 +2,6 @@ @import (reference) '~stremio/common/screen-sizes.less'; -@top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); -@bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); -@overlap-size: 3rem; -@transparency-grandient-pad: 6rem; - .main-nav-bars-container { position: relative; z-index: 0; @@ -44,8 +39,8 @@ mask: linear-gradient( to bottom, - transparent calc(@top-overlay-size - @overlap-size), - black calc(@top-overlay-size + @transparency-grandient-pad), + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), black 100% ); } @@ -59,10 +54,10 @@ mask: linear-gradient( to bottom, - transparent calc(@top-overlay-size - @overlap-size), - black calc(@top-overlay-size + @transparency-grandient-pad), - black calc(100% - @bottom-overlay-size - @transparency-grandient-pad), - transparent calc(100% - @bottom-overlay-size + @overlap-size) + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), + transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) ); } diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 80c519d45..23df0b026 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -17,13 +17,6 @@ background-color: transparent; .library-content { - --selectable-inputs-assumed-height: 80px; - --top-overlay-size: var(--top-overlay-size); - --bottom-vertical-nav-bar-size: 0px; - --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - width: 100%; height: calc(100% + var(--bottom-overlay-size)); margin-bottom: calc(var(--bottom-overlay-size) * -1); @@ -238,8 +231,6 @@ @media only screen and (max-width: @minimum) { .library-container { .library-content { - --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); - .selectable-inputs-container { justify-content: space-between; } diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 092e113c3..906b7fb70 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -17,8 +17,8 @@ flex-direction: column; width: 100%; height: 100%; - padding-left: env(safe-area-inset-left, 0rem); - padding-right: env(safe-area-inset-right, 0rem); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); box-sizing: border-box; .background-image-layer { @@ -103,7 +103,7 @@ align-self: stretch; padding: 0 4rem 2rem 4rem; - padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0rem))); + padding-left: max(1rem, calc(4rem - var(--safe-area-inset-left))); } .spacing { From 3d29fefa7c8a07345b4980ce5dc0575ddf13b1de Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:10:16 +0200 Subject: [PATCH 23/35] refactor(copyright): update copyright info --- src/common/BottomSheet/BottomSheet.less | 1 - src/common/Button/styles.less | 2 +- src/common/Chips/Chip/Chip.less | 1 - src/common/MetaItem/styles.less | 3 +-- src/common/NavBar/VerticalNavBar/NavTabButton/styles.less | 2 +- src/common/RadioButton/RadioButton.less | 1 - src/common/StreamingServerWarning/styles.less | 2 +- src/routes/Addons/styles.less | 2 +- src/routes/Board/styles.less | 2 +- src/routes/Calendar/Details/Details.less | 1 - src/routes/Calendar/Selector/Selector.less | 1 - src/routes/Calendar/Table/Cell/Cell.less | 1 - src/routes/Discover/styles.less | 2 +- src/routes/Library/styles.less | 2 +- src/routes/MetaDetails/styles.less | 2 +- src/routes/Search/styles.less | 4 +++- src/routes/Settings/styles.less | 4 +++- 17 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/common/BottomSheet/BottomSheet.less b/src/common/BottomSheet/BottomSheet.less index 4ac68ead6..6428e5081 100644 --- a/src/common/BottomSheet/BottomSheet.less +++ b/src/common/BottomSheet/BottomSheet.less @@ -23,7 +23,6 @@ opacity: 0.8; transition: opacity 0.1s ease-out; cursor: pointer; - -webkit-tap-highlight-color: transparent; } .container { diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index 6a26b3b7f..f6a7bcb4b 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; diff --git a/src/common/Chips/Chip/Chip.less b/src/common/Chips/Chip/Chip.less index b71a7b6b6..4261f35e9 100644 --- a/src/common/Chips/Chip/Chip.less +++ b/src/common/Chips/Chip/Chip.less @@ -16,7 +16,6 @@ text-transform: capitalize; padding: 0 1.75rem; border-radius: @height; - -webkit-tap-highlight-color: transparent; background-color: transparent; user-select: none; overflow: hidden; diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less index c2d094ac9..455552bce 100644 --- a/src/common/MetaItem/styles.less +++ b/src/common/MetaItem/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -23,7 +23,6 @@ .meta-item-container { padding: 1rem; overflow: visible; - -webkit-tap-highlight-color: transparent; &:hover, &:focus, &:global(.active), &:global(.selected) { outline-style: none; diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less index 408752c38..99592189d 100644 --- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less +++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less index 4f3380147..7e414a521 100644 --- a/src/common/RadioButton/RadioButton.less +++ b/src/common/RadioButton/RadioButton.less @@ -24,7 +24,6 @@ outline-width: var(--focus-outline-size); outline-color: @color-surface-light5; outline-offset: calc(-1 * var(--focus-outline-size)); - -webkit-tap-highlight-color: transparent; input[type='radio'] { opacity: 0; diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index ea8f9c267..873a27a1a 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index ce8b7c69d..e2030c7ac 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 1d973be18..1348529aa 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Calendar/Details/Details.less b/src/routes/Calendar/Details/Details.less index 2e78ca703..db11acc78 100644 --- a/src/routes/Calendar/Details/Details.less +++ b/src/routes/Calendar/Details/Details.less @@ -16,7 +16,6 @@ font-size: 1rem; font-weight: 500; color: var(--primary-foreground-color); - -webkit-tap-highlight-color: transparent; .name { flex: auto; diff --git a/src/routes/Calendar/Selector/Selector.less b/src/routes/Calendar/Selector/Selector.less index 6683697be..d71e10c70 100644 --- a/src/routes/Calendar/Selector/Selector.less +++ b/src/routes/Calendar/Selector/Selector.less @@ -22,7 +22,6 @@ gap: 0.5rem; border-radius: 0.5rem; transition: background-color 0.1s ease-out; - -webkit-tap-highlight-color: transparent; .label, .icon { color: var(--primary-foreground-color); diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less index 1a0f16d7e..a5c79e178 100644 --- a/src/routes/Calendar/Table/Cell/Cell.less +++ b/src/routes/Calendar/Table/Cell/Cell.less @@ -13,7 +13,6 @@ overflow: hidden; cursor: pointer; transition: border-color 0.1s ease-out; - -webkit-tap-highlight-color: transparent; &:first-child { border-radius: var(--border-radius) 0 0 0; diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 48fb111f4..48e4e9e80 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 23df0b026..7fc7b0c46 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 906b7fb70..7c6ad8392 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less index ff8f7d1b9..03aa5c383 100644 --- a/src/routes/Search/styles.less +++ b/src/routes/Search/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -13,9 +13,11 @@ .search-container { height: 100%; + width: 100%; background-color: transparent; .search-content { + height: 100%; width: 100%; overflow-y: auto; diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 82ffdcbd2..f8587d5a5 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -14,9 +14,11 @@ .settings-container { height: 100%; + width: 100%; background-color: transparent; .settings-content { + height: 100%; width: 100%; display: flex; flex-direction: row; From c49ae8d5954a87a72251c7c7a632fafee9b92525 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:14:12 +0200 Subject: [PATCH 24/35] refactor(MetaDetails): use rem instead of px --- src/routes/MetaDetails/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 7c6ad8392..40601f9eb 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -56,7 +56,7 @@ flex-direction: row; margin-top: calc(var(--top-overlay-size) * -1); padding-top: var(--top-overlay-size); - padding-bottom: var(--calculated-bottom-safe-inset, 0px); + padding-bottom: var(--calculated-bottom-safe-inset, 0rem); mask: linear-gradient( to bottom, transparent calc(var(--top-overlay-size) - var(--overlap-size)), From 7c23ab5585298acc0a1edb4ff044e4fab190d85b Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:14:37 +0200 Subject: [PATCH 25/35] refactor(HorizontalNavbar): use rem & use vars --- src/common/NavBar/HorizontalNavBar/styles.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index f1dc8f813..512788855 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -12,7 +12,7 @@ padding-right: 1rem; background-color: transparent; overflow: visible; - padding-top: env(safe-area-inset-top, 0px); + padding-top: var(--safe-area-inset-top); box-sizing: content-box; .logo-container { @@ -34,7 +34,7 @@ } .back-button-container { - margin-left: max(0px, calc(1rem - env(safe-area-inset-left, 0px))); + margin-left: max(0rem, calc(1rem - var(--safe-area-inset-left))); } .title { From fbebd9bbd4f7f7de22ce330ee3e85547a975b816 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:14:49 +0200 Subject: [PATCH 26/35] refactor(Library): use rem instead of px --- src/routes/Library/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 7fc7b0c46..864977e40 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -27,7 +27,7 @@ margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size, 0px); + padding-bottom: var(--bottom-overlay-size, 0rem); mask: linear-gradient( to bottom, From ec720dcd24679988075f74374b97ef8592fcab73 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Mon, 23 Dec 2024 20:59:22 +0200 Subject: [PATCH 27/35] fix(Discover): mask was flickering --- src/routes/Discover/styles.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 48e4e9e80..5490de005 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -32,6 +32,7 @@ align-self: stretch; display: flex; flex-direction: column; + contain: strict; .meta-items-container { margin-top: calc(var(--top-overlay-size) * -1); From b15b7bbb12e6efe53ce8471eaff0ef5dfdd6999c Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Mon, 23 Dec 2024 21:28:46 +0200 Subject: [PATCH 28/35] remove: masks in the routes --- src/common/MainNavBars/styles.less | 15 --------------- src/routes/Addons/styles.less | 7 ------- src/routes/Discover/styles.less | 7 ------- src/routes/Library/styles.less | 7 ------- src/routes/MetaDetails/styles.less | 7 ------- 5 files changed, 43 deletions(-) diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 7495b90a2..2ee57b505 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -36,13 +36,6 @@ left: var(--vertical-nav-bar-size); z-index: 0; overflow: scroll; - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); } } @@ -51,14 +44,6 @@ .nav-content-container { left: 0; padding-bottom: var(--vertical-nav-bar-size); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), - transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) - ); } .vertical-nav-bar { diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index e2030c7ac..c3f0e57a1 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -38,13 +38,6 @@ padding: 0 1.5rem; padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); z-index: 1; } diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 5490de005..eb4f56548 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -39,13 +39,6 @@ padding: 0 1.5rem; padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); z-index: 1; } diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 864977e40..9387e1371 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -28,13 +28,6 @@ padding: 0 1.5rem; padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size, 0rem); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); z-index: 1; } diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 40601f9eb..dec898288 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -57,13 +57,6 @@ margin-top: calc(var(--top-overlay-size) * -1); padding-top: var(--top-overlay-size); padding-bottom: var(--calculated-bottom-safe-inset, 0rem); - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); - .vertical-nav-bar { flex: none; } From ed56e8387b932be63517ebf733fdb2037f83415f Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Tue, 24 Dec 2024 16:06:41 +0200 Subject: [PATCH 29/35] refactor(masks): remove masks paddings --- src/routes/Addons/styles.less | 3 --- src/routes/Board/styles.less | 1 + src/routes/Discover/styles.less | 3 --- src/routes/Library/styles.less | 3 --- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index c3f0e57a1..be333cf2f 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -34,10 +34,7 @@ align-self: stretch; .addons-list-container { - margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size); z-index: 1; } diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 1348529aa..13ca002ee 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -23,6 +23,7 @@ background: transparent; .board-content { + height: 100%; width: 100%; padding: 0 1rem; overflow-y: auto; diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index eb4f56548..9c6d5b5e0 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -35,10 +35,7 @@ contain: strict; .meta-items-container { - margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size); z-index: 1; } diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 9387e1371..6175f74ae 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -24,10 +24,7 @@ flex-direction: column; .meta-items-container { - margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size, 0rem); z-index: 1; } From 97ed4b519aa761ed52ee4e05b9eff3e058ec41a8 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 26 Dec 2024 16:19:22 +0200 Subject: [PATCH 30/35] fix(content): Content height was too big --- src/routes/Addons/styles.less | 2 +- src/routes/Discover/styles.less | 2 +- src/routes/Library/styles.less | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index be333cf2f..647b9fe26 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -27,7 +27,7 @@ .addons-content { width: 100%; - height: calc(100% + var(--bottom-overlay-size)); + height: 100%; margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 9c6d5b5e0..b48a5e59b 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -22,7 +22,7 @@ .discover-content { width: 100%; - height: calc(100% + var(--bottom-overlay-size)); + height: 100%; margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: row; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 6175f74ae..e2b4da2fc 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -18,7 +18,7 @@ .library-content { width: 100%; - height: calc(100% + var(--bottom-overlay-size)); + height: 100%; margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; From dc00a9fadc18a220a952081b62b943fc97ef4cc1 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 26 Dec 2024 16:31:25 +0200 Subject: [PATCH 31/35] revert(MetaDetails): renderbg logic --- src/routes/MetaDetails/MetaDetails.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ee0a6907a..ec5377509 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,19 +76,12 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); - const renderBackground = React.useMemo(() => !!( - metaPath && - metaDetails?.metaItem && - metaDetails.metaItem.content?.type !== 'Err' && - metaDetails.metaItem.content.type !== 'Loading' && - typeof metaDetails.metaItem.content.content?.background === 'string' && - metaDetails.metaItem.content.content.background.length > 0 - ), [metaPath, metaDetails]); return (
{ - renderBackground ? + typeof metaDetails.metaItem.content.content.background === 'string' + && metaDetails.metaItem.content.content.background.length > 0 ?
Date: Thu, 26 Dec 2024 16:38:16 +0200 Subject: [PATCH 32/35] Revert "revert(MetaDetails): renderbg logic" This reverts commit dc00a9fadc18a220a952081b62b943fc97ef4cc1. --- src/routes/MetaDetails/MetaDetails.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ec5377509..ee0a6907a 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,12 +76,19 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); + const renderBackground = React.useMemo(() => !!( + metaPath && + metaDetails?.metaItem && + metaDetails.metaItem.content?.type !== 'Err' && + metaDetails.metaItem.content.type !== 'Loading' && + typeof metaDetails.metaItem.content.content?.background === 'string' && + metaDetails.metaItem.content.content.background.length > 0 + ), [metaPath, metaDetails]); return (
{ - typeof metaDetails.metaItem.content.content.background === 'string' - && metaDetails.metaItem.content.content.background.length > 0 ? + renderBackground ?
Date: Thu, 26 Dec 2024 16:38:55 +0200 Subject: [PATCH 33/35] refactor: remove err state to make fallback render --- src/routes/MetaDetails/MetaDetails.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ee0a6907a..5e79479b3 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -79,7 +79,6 @@ const MetaDetails = ({ urlParams, queryParams }) => { const renderBackground = React.useMemo(() => !!( metaPath && metaDetails?.metaItem && - metaDetails.metaItem.content?.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' && typeof metaDetails.metaItem.content.content?.background === 'string' && metaDetails.metaItem.content.content.background.length > 0 From 871e8cb57b53d3907ad766cd53f98abeed97ddf2 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 18:06:17 +0200 Subject: [PATCH 34/35] remove(StreamingServerWarning): changes --- src/common/StreamingServerWarning/styles.less | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index 873a27a1a..d4fad4b9f 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -9,9 +9,6 @@ align-items: center; background-color: @color-accent5-dark3; padding: 1rem; - border-radius: 0.5rem 0.5rem 0 0; - margin: 0rem 0.5rem; - box-shadow: var(--outer-glow); .warning-statement { flex: 1; @@ -24,11 +21,7 @@ .warning-button { flex: none; color: @color-surface-light5-90; - background-color: rgba(0, 0, 0, 0.24); - padding: 0.5rem 1rem; - margin-left: 1.5rem; - border-radius: 0.5rem; - line-height: 1.2rem; + margin-left: 1rem; &:first-child { margin-left: 0; @@ -44,7 +37,6 @@ font-size: 1.2rem; max-height: 1.2em; color: @color-surface-light5-90; - overflow: visible; } } @@ -53,18 +45,15 @@ } } -@media only screen and (max-width: @minimum) { +@media only screen and (max-width: 500px) { .warning-container { display: block; height: auto !important; text-align: center; - border-radius: 0.5rem; - .warning-statement { - margin-bottom: 1rem; + margin-bottom: 0.5rem; margin-right: 0; } - .warning-button { display: inline-block; } From 5c531fb3e3debde94870f505f58cc9da6230128d Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 18:07:20 +0200 Subject: [PATCH 35/35] remove: Style changes on streamingserverwarning(2) --- src/common/StreamingServerWarning/styles.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index d4fad4b9f..42ab6bb4b 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -1,14 +1,13 @@ -// Copyright (C) 2017-2024 Smart code 203358507 +// Copyright (C) 2017-2023 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; -@import (reference) '~stremio/common/screen-sizes.less'; .warning-container { display: flex; flex-direction: row; align-items: center; - background-color: @color-accent5-dark3; padding: 1rem; + background-color: @color-accent5-dark3; .warning-statement { flex: 1; @@ -20,8 +19,8 @@ .warning-button { flex: none; - color: @color-surface-light5-90; margin-left: 1rem; + color: @color-surface-light5-90; &:first-child { margin-left: 0;