diff --git a/src/components/Error.vue b/src/components/Error.vue index 4ff8e0a..3f4788c 100644 --- 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 index 4d97a1c..d762097 100644 --- 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 index bbc94b2..09c053c 100644 --- 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 index 65d038d..95bbf80 100644 --- 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 index 27c520a..60b1c0d 100644 --- 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 index f0be5b2..7d42e28 100644 --- 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 index 902a9a6..627241f 100644 --- 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 index 86cecc6..9028cf6 100644 --- 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;