From d7776f6d982dabf9d29be9f51198d573dd9196a6 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sat, 21 Dec 2024 21:44:00 +0200
Subject: [PATCH] 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;