Merge pull request #477 from GunGonGamLee/474-refactor-로그인-css-변경

refactor : 로그인 css 변경
GunGonGamLee · Mar 12, 2024 · 89abb99 · 89abb99
2 parents a1542ab + 23055b2
commit 89abb99
Showing 1 changed file with 44 additions and 47 deletions.
diff --git a/frontend/assets/css/login.css b/frontend/assets/css/login.css
@@ -15,17 +15,21 @@
 }
 
 .arcade-machine {
+  position: relative;
+  display: flex;
+  justify-content: center;
   height: 88vh;
   width: 55vw;
-  position: relative;
   perspective: 35em;
 }
 
 .arcade-machine .top {
-  height: 13.8vh;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 13.5vh;
   width: 38.5vw;
-  position: absolute;
-  left: 15%;
   background: #024959;
   border: 0.5vw solid #4c4c4c;
   z-index: 3;
@@ -35,17 +39,16 @@
   font-family: "Vibur", sans-serif;
   font-size: 3.5vw;
   color: #fff;
-  text-align: center;
   margin-top: 2vh;
   text-shadow:
-  0 0 7px #DA0C81,
-  0 0 10px #DA0C81,
-  0 0 21px #DA0C81,
-  0 0 42px #DA0C81,
-  0 0 82px #DA0C81,
-  0 0 92px #DA0C81,
-  0 0 102px #DA0C81,
-  0 0 151px #DA0C81;
+          0 0 7px #DA0C81,
+          0 0 10px #DA0C81,
+          0 0 92px #DA0C81,
+          0 0 21px #DA0C81,
+          0 0 42px #DA0C81,
+          0 0 82px #DA0C81,
+          0 0 102px #DA0C81,
+          0 0 151px #DA0C81;
 }
 
 .arcade-machine .top:before, .arcade-machine .top:after {
@@ -66,23 +69,11 @@
   right: -6%;
 }
 
-/* .arcade-machine > .shadow {
-  height: 50vh;
-  width: 49.9vh;
-  position: absolute;
-  top: 9vh;
-  left: 9vw;
-  background: #4b5b61;
-  box-shadow: 0 0 60px #4b5b61;
-  z-index: -1;
-} */
-
 .arcade-machine .screen-container {
-  height: 50%;
-  width: 62%;
   position: absolute;
+  height: 50%;
+  width: 34vw;
   top: 15%;
-  left: 19%;
   background: #4b5b61;
   border: 5px solid #4c4c4c;
 }
@@ -114,17 +105,19 @@
 }
 
 .arcade-machine .screen-container .screen {
-  height: 84%;
-  width: 80%;
-  position: absolute;
-  top: 9%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: 35vh;
+  width: 27vw;
+  top: 10%;
   left: 10%;
   background: #313332;
   border: 0.3vw solid #4c4c4c;
   border-radius: 90px 93px 93px 93px/15px 15px 15px 15px;
   overflow: hidden;
-  text-align: center;
 }
+
 .arcade-machine .screen-container .screen-display {
   position: absolute;
   width: 100%;
@@ -134,22 +127,21 @@
 }
 
 .arcade-machine .screen-container .screen h2 {
-  position: absolute;
+  position: fixed;
   font-size: 2.7vw;
   color: #e0e0e0;
   font-family: "Orbitron", sans-serif, sans-serif;
+  cursor: pointer;
 }
 
 .arcade-machine .screen-container .screen h2#google {
-  left: 5.3vw;
-  top: 20vh;
-  cursor: pointer;
+  height: 3vh;
+  top: 38vh;
 }
 
 .arcade-machine .screen-container .screen h2#forty-two {
-  left: 8.1vw;
-  top: 26vh;
-  cursor: pointer;
+  height: 3vh;
+  top: 44vh;
 }
 
 .arcade-machine .screen-container .joystick {
@@ -182,6 +174,7 @@
   background: #4c4c4c;
   content: "";
 }
+
 .arcade-machine .screen-container .joystick .stick:before {
   height: 100%;
   width: 150%;
@@ -192,15 +185,16 @@
   background: #4c4c4c;
   content: "";
 }
+
 .arcade-machine .board {
-  height: 20vh;
-  width: 37vw;
   position: absolute;
-  top: 52.2vh;
-  left: 9vw;
+  height: 16.9vh;
+  width: 37.5vw;
+  top: 52vh;
   background: #4b5b61;
-  transform: rotateX(70deg);
+  transform: rotateX(45deg);
 }
+
 .arcade-machine .board:before, .arcade-machine .board:after {
   height: 96%;
   width: 2.8vw;
@@ -209,12 +203,15 @@
   content: " ";
   border: 0.5vw solid #4c4c4c;
 }
+
 .arcade-machine .board:before {
   left: -6.5%;
 }
+
 .arcade-machine .board:after {
   right: -6.5%;
 }
+
 .arcade-machine .board .button {
   height: 20%;
   width: 6%;
@@ -237,20 +234,20 @@
   left: 70%;
 }
 .arcade-machine .bottom {
+  position: absolute;
   height: 10vh;
   width: 43vw;
-  position: absolute;
   top: 68vh;
-  left: 6vw;
   background: #024959;
   border: 0.5vw solid #4c4c4c;
 }
+
 .arcade-machine .bottom:before, .arcade-machine .bottom:after {
   height: 9.8vh;
   width: 2.8vw;
   position: absolute;
   top: -0.7vh;
-  background: DA0C81;
+  background: #DA0C81;
   content: " ";
   border: 0.5vw solid #4c4c4c;
 }