diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 1786e2d..23e8a1b 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -287,8 +287,9 @@ button { filter: drop-shadow(0 40px 100px #0009); } .phone-stage--landscape .phone-resolution-wrapper--primary .phone-device { - width: 844px; - height: 390px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(90deg); } .phone-device__frame { position: absolute; @@ -299,16 +300,6 @@ button { object-fit: fill; pointer-events: none; } -.phone-stage--landscape - .phone-resolution-wrapper--primary - .phone-device__frame { - inset: auto; - top: 50%; - left: 50%; - width: 390px; - height: 844px; - transform: translate(-50%, -50%) rotate(90deg); -} .phone-screen { position: relative; container-type: size; @@ -320,11 +311,6 @@ button { background: #08080a; border-radius: 40px; } -.phone-stage--landscape .phone-resolution-wrapper--primary .phone-screen { - width: 98%; - height: 94.5%; - margin: auto; -} .phone-app { position: absolute !important; inset: 0 !important; diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue index c0efa3d..705c243 100644 --- a/frontend/src/views/apps/CameraApp.vue +++ b/frontend/src/views/apps/CameraApp.vue @@ -538,12 +538,12 @@ onBeforeUnmount(() => { transform: translateY(-50%); } .camera-page--landscape .camera-viewport { - top: 0; + top: 50%; left: 50%; - width: auto; - height: 100%; + width: calc(100% * 16 / 9); + height: auto; aspect-ratio: 16 / 9; - transform: translateX(-50%); + transform: translate(-50%, -50%) rotate(-90deg); } .camera-game-view, .camera-dev-view,