Merge remote-tracking branch 'upstream/development' into pr

Stremio · Dec 19, 2024 · aae371b · aae371b
2 parents f56f84f + 8fefc66
commit aae371b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/src/App/styles.less b/src/App/styles.less
@@ -38,7 +38,7 @@
     --quaternary-accent-color: rgba(18, 69, 166, 1);
     --overlay-color: rgba(255, 255, 255, 0.05);
     --modal-background-color: rgba(15, 13, 32, 1);
-    --outer-glow: 0px 0px 30px rgba(123, 91, 245, 0.37);
+    --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
 }
 
@@ -112,7 +112,7 @@ html {
                 left: auto;
                 z-index: 1;
                 padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));
-                overflow-y: auto;
+                overflow: visible;
                 scrollbar-width: none;
                 pointer-events: none;
 

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
@@ -19,26 +19,30 @@
             flex-direction: column;
             align-items: center;
             overflow: visible;
+            position: relative;
 
-            .modal-dialog-content {
+            .body-container {
                 overflow-y: visible;
             }
-    
+
             .image {
-                width: 100%;
-                height: 100%;
-                margin-top: -10rem;
+                position: absolute;
+                top: -10rem;
+                left: 50%;
+                transform: translateX(-50%);
+                object-fit: cover;
+                width: 30rem;
+                height: 30rem;
             }
-        
+
             .info-container {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 gap: 2.5rem;
-                padding: 1rem 4rem;
-                margin-top: -7rem;
-
+                padding: 10rem 4rem 0;
+
                 .title-container {
                     display: flex;
                     flex-direction: column;
@@ -50,15 +54,15 @@
                         text-align: center;
                         padding: 0 6rem;
                     }
-        
+
                     .label {
                         color: var(--primary-foreground-color);
                         font-size: 1rem;
                         text-align: center;
                         opacity: 0.5;
                     }
                 }
-        
+
                 .addon-container {
                     display: flex;
                     align-items: center;
@@ -76,35 +80,54 @@
                         color: var(--primary-foreground-color);
                     }
                 }
-        
+
                 .action-button {
                     background-color: var(--primary-foreground-color);
                     border: 2px solid var(--primary-foreground-color);
                     padding: 0.8rem 2rem;
                     border-radius: 2rem;
-        
+
                     .button-label {
                         color: var(--primary-accent-color);
                         font-size: 1rem;
                         font-weight: 700;
                     }
-        
+
                     &:hover {
                         background-color: transparent;
                     }
                 }
             }
         }
     }
+}
 
-    @media only screen and (max-width: @minimum) {
+@media (orientation: landscape) and (max-height: @xsmall) {
+    .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {
+                overflow-y: auto;
+
+                .body-container {
+                    overflow-y: auto;
+                }
+
                 .image {
-                    height: 125%;
-                    width: 125%;
+                    display: none;
                 }
 
+                .info-container {
+                    padding: 1rem 4rem 0;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .event-modal {
+        .modal-dialog-container {
+            .modal-dialog-content {
                 .info-container {
                     .title-container {
                         .title {
@@ -120,4 +143,4 @@
             }
         }
     }
-}
+}