fix: layout issues

tymmesyde · Feb 3, 2024 · 814a19b · 814a19b
1 parent 8031a4f
commit 814a19b
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 21 deletions.
diff --git a/src/components/Error.vue b/src/components/Error.vue
@@ -29,8 +29,8 @@ export default {
     position: absolute;
     bottom: 0;
     left: 50%;
-    width: 90vw;
-    margin-left: -45vw;
+    width: 90%;
+    margin-left: -45%;
     padding: 1em;
     border-radius: 15px 15px 0 0;
     color: $text-color;
@@ -53,8 +53,8 @@ export default {
     .error {
         top: 0;
         bottom: inherit;
-        width: 40vh;
-        margin-left: -20vh;
+        width: 32rem;
+        margin-left: -16rem;
         border-radius: 0 0 15px 15px;
         animation: slide-down 0.1s ease-in-out;
     }

diff --git a/src/components/Loading.vue b/src/components/Loading.vue
@@ -45,7 +45,7 @@ export default {
         gap: 10px;
 
         .icon {
-            font-size: 15vh;
+            font-size: 5rem;
             --ionicon-stroke-width: 20px;
         }
 

diff --git a/src/components/player/LockScreen.vue b/src/components/player/LockScreen.vue
@@ -78,8 +78,10 @@ export default {
 
         img {
             width: 300px;
-            font-size: 9vh;
+            line-height: 10rem;
+            font-size: 5rem;
             font-weight: 500;
+            color: $text-color;
         }
 
         button {

diff --git a/src/components/player/Player.vue b/src/components/player/Player.vue
@@ -175,7 +175,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.5);
         background-color: $overlay-background-color;
 
         ion-icon {
-            font-size: 7vh;
+            font-size: 5rem;
         }
     }
 

diff --git a/src/components/player/controls/Subtitles.vue b/src/components/player/controls/Subtitles.vue
@@ -179,7 +179,7 @@ export default {
 
         .bar {
             flex: none;
-            height:  65px;
+            height: 4rem;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -206,9 +206,9 @@ export default {
         }
 
         .loading {
-            top: 0;
+            top: 4rem;
             position: absolute;
-            height: 100%;
+            height: calc(100% - 4rem);
             width: 100%;
             display: grid;
             place-items: center;

diff --git a/src/components/ui/Title.vue b/src/components/ui/Title.vue
@@ -27,15 +27,10 @@ const props = defineProps({
 
     &.primary {
         font-family: 'Montserrat-Bold';
-        font-size: 8vh;
+        font-size: 4rem;
         font-weight: normal;
         letter-spacing: -0.15rem;
         line-height: 100%;
-
-        ion-icon {
-            font-size: 7vh;
-            vertical-align: -0.75vh;
-        }
     }
 
     &.secondary {
@@ -48,7 +43,7 @@ const props = defineProps({
 
     &.tertiary {
         font-family: 'Montserrat-Medium';
-        font-size: 2.75vh;
+        font-size: 2rem;
         font-weight: normal;
         opacity: 0.75;
     }

diff --git a/src/views/Room/Room.vue b/src/views/Room/Room.vue
@@ -135,8 +135,8 @@ onBeforeRouteLeave(() => {
     .controls {
         z-index: 97;
         position: absolute;
-        top: 10px;
-        right: 10px;
+        top: 0.75rem;
+        right: 1rem;
     }
 }
 

diff --git a/src/views/Room/UsersList/UsersList.vue b/src/views/Room/UsersList/UsersList.vue
@@ -50,8 +50,8 @@ const updateOwnership = (userId) => {
 .users-list {
     z-index: 96;
     position: absolute;
-    top: 0.5em;
-    left: 1em;
+    top: 0.75rem;
+    left: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1em;