553 lines
12 KiB
SCSS
553 lines
12 KiB
SCSS
:root {
|
|
--joycon-left: #00BAE1;
|
|
--joycon-right: #F22E38;
|
|
--btn: #262525;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
margin: 15% auto;
|
|
width: 902px;
|
|
height: 384px;
|
|
}
|
|
|
|
.switch-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.joy-con-left {
|
|
position: absolute;
|
|
width: 15%;
|
|
height: 100%;
|
|
background: var(--joycon-left);
|
|
border-top-left-radius: 90px;
|
|
border-bottom-left-radius: 90px;
|
|
box-shadow: inset 5px 5px 10px var(--joycon-left), inset 7px 15px 5px -5px rgba(255, 255, 255, 0.6), inset 10px -35px 8px -25px rgba(0, 0, 0, 0.4), inset 12px 0px 10px -5px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.bumper-left {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 50%;
|
|
top: -3px;
|
|
left: -3px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
border-top-left-radius: 90px;
|
|
z-index: -1;
|
|
-webkit-clip-path: polygon(0 0, 80% 0, 80% 40%, 0 30%);
|
|
clip-path: polygon(0 0, 80% 0, 80% 40%, 0 30%);
|
|
}
|
|
|
|
.joy-con-right {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 15%;
|
|
height: 100%;
|
|
background: var(--joycon-right);
|
|
border-top-right-radius: 90px;
|
|
border-bottom-right-radius: 90px;
|
|
box-shadow: inset -5px 5px 10px var(--joycon-right), inset -7px 15px 5px -5px rgba(255, 255, 255, 0.4), inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3), inset -14px 0px 10px -5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.bumper-right {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 50%;
|
|
top: -3px;
|
|
right: -3px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
border-top-right-radius: 90px;
|
|
z-index: -1;
|
|
-webkit-clip-path: polygon(100% 0, 100% 30%, 20% 40%, 20% 0);
|
|
clip-path: polygon(100% 0, 100% 30%, 20% 40%, 20% 0);
|
|
}
|
|
|
|
.screen-outer {
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 100%;
|
|
left: 15%;
|
|
border-left: 1px solid black;
|
|
border-right: 1px solid black;
|
|
background: linear-gradient(to bottom, #2E3235, #414344);
|
|
box-shadow: inset 0 15px 20px -10px rgba(255, 255, 255, 0.6), inset 0 -21px 20px -10px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.screen-inner {
|
|
position: absolute;
|
|
width: 93%;
|
|
height: 94%;
|
|
background: black;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 15px;
|
|
box-shadow: inset 0 2px 0 -1px rgba(255, 255, 255, 0.6), inset 0 -1px 0 -1px white;
|
|
}
|
|
|
|
.lcd {
|
|
position: absolute;
|
|
width: 75%;
|
|
height: 75%;
|
|
background: #E60012;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.reflector {
|
|
position: absolute;
|
|
width: 93%;
|
|
height: 94%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 15px;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
&::after {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
width: 400px;
|
|
height: 800px;
|
|
background-image: linear-gradient(190deg, rgba(255, 255, 255, 0.4), transparent 60%);
|
|
transform: translate(70%, -5%) rotate(30deg);
|
|
}
|
|
}
|
|
|
|
.minus-btn {
|
|
position: absolute;
|
|
top: 10%;
|
|
right: 8%;
|
|
width: 17%;
|
|
height: 1.8%;
|
|
background: #3a3a3a;
|
|
border-radius: 2px;
|
|
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), 0 0 0 1px #2b2b2b, 1px 2px 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.analog-left {
|
|
position: absolute;
|
|
top: 19%;
|
|
left: 29%;
|
|
width: 45%;
|
|
height: 16%;
|
|
background: linear-gradient(to bottom, #5e6367 0%, #141516 100%);
|
|
border-radius: 50%;
|
|
box-shadow: 0 -0.5px 1px 2px rgba(20, 21, 22, 0.9), 0 -2px 2px 2px var(--joycon-left), 0 1px 1px 1px #141516, 0 8px 35px 1px rgba(0, 0, 0, 0.5);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
background: linear-gradient(to top, #525659 40%, #424040 100%);
|
|
width: 85%;
|
|
height: 85%;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -51%);
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: radial-gradient(circle at top, #788084 0%, #212427 100%);
|
|
width: 76%;
|
|
height: 76%;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -51%);
|
|
}
|
|
}
|
|
|
|
.dpad-container-left {
|
|
position: absolute;
|
|
top: 42%;
|
|
left: 17%;
|
|
width: 70%;
|
|
height: 25%;
|
|
}
|
|
|
|
.dpad-up {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
&::after {
|
|
font-family: "FontAwesome";
|
|
content: '\f0d8';
|
|
font-size: 22px;
|
|
color: var(--btn);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.dpad-right {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
&::after {
|
|
font-family: "FontAwesome";
|
|
content: '\00a0\f0da';
|
|
font-size: 22px;
|
|
color: var(--btn);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
line-height: 1.1;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.dpad-down {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
&::after {
|
|
font-family: "FontAwesome";
|
|
content: '\f0d7';
|
|
font-size: 22px;
|
|
color: var(--btn);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.dpad-left {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
&::after {
|
|
font-family: "FontAwesome";
|
|
content: '\00a0\f0d9';
|
|
font-size: 22px;
|
|
color: var(--btn);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
line-height: 1.1;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.square-btn {
|
|
position: absolute;
|
|
bottom: 22%;
|
|
right: 25%;
|
|
width: 17%;
|
|
height: 6%;
|
|
background: #3a3a3a;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 0 2px #262525, 1px 2px 8px rgba(0, 0, 0, 0.5);
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -45%);
|
|
width: 65%;
|
|
height: 65%;
|
|
background: #282828;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3), inset 0 1px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.plus-btn {
|
|
position: absolute;
|
|
top: 7%;
|
|
left: 8%;
|
|
width: 17%;
|
|
height: 6%;
|
|
background: #3a3a3a;
|
|
-webkit-clip-path: polygon(0 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
|
|
clip-path: polygon(0 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
|
|
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.4), 0 0 0 1px #2b2b2b, 1px 2px 10px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.dpad-container-right {
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 15%;
|
|
width: 70%;
|
|
height: 25%;
|
|
}
|
|
|
|
.dpad-x {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
&::after {
|
|
font-family: "Arial";
|
|
content: 'X';
|
|
font-size: 17px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.dpad-a {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
&::after {
|
|
font-family: "Arial";
|
|
content: 'A';
|
|
font-size: 17px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.dpad-b {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
&::after {
|
|
font-family: "Arial";
|
|
content: 'B';
|
|
font-size: 17px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.dpad-y {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: var(--btn);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
&::after {
|
|
font-family: "Arial";
|
|
content: 'Y';
|
|
font-size: 17px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
position: absolute;
|
|
width: 87%;
|
|
height: 84%;
|
|
background: linear-gradient(to top, #424040, #5b5959);
|
|
border-radius: 50%;
|
|
top: 6.5%;
|
|
left: 6%;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
.analog-right {
|
|
position: absolute;
|
|
top: 48%;
|
|
left: 26%;
|
|
width: 45%;
|
|
height: 16%;
|
|
background: linear-gradient(to bottom, #5e6367 0%, #141516 100%);
|
|
border-radius: 50%;
|
|
box-shadow: 0 -0.5px 1px 2px rgba(20, 21, 22, 0.9), 0 -2px 2px 2px var(--joycon-right), 0 1px 1px 1px #141516, 0 8px 35px 1px rgba(0, 0, 0, 0.5);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
background: linear-gradient(to top, #525659 40%, #424040 100%);
|
|
width: 85%;
|
|
height: 85%;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -51%);
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: radial-gradient(circle at top, #788084 0%, #212427 100%);
|
|
width: 76%;
|
|
height: 76%;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -51%);
|
|
}
|
|
}
|
|
|
|
.home-btn {
|
|
position: absolute;
|
|
bottom: 22%;
|
|
left: 20%;
|
|
width: 21%;
|
|
height: 7.5%;
|
|
background: gray;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 0 2px #262525, 1px 2px 8px rgba(0, 0, 0, 0.5);
|
|
&::before {
|
|
font-family: "FontAwesome";
|
|
content: '\f015';
|
|
display: inline-block;
|
|
font-size: 17px;
|
|
color: rgba(10, 10, 10, 0.7);
|
|
position: absolute;
|
|
width: 75%;
|
|
height: 73%;
|
|
background: #373C3F;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.logo-left {
|
|
position: absolute;
|
|
top: 28%;
|
|
left: 36%;
|
|
box-sizing: border-box;
|
|
width: 12%;
|
|
height: 40%;
|
|
border: 9px solid white;
|
|
border-top-left-radius: 30px;
|
|
border-bottom-left-radius: 30px;
|
|
animation: bounce .4s .6s;
|
|
}
|
|
|
|
.logo-right {
|
|
position: absolute;
|
|
top: 28%;
|
|
left: 51%;
|
|
width: 11%;
|
|
height: 40%;
|
|
background: white;
|
|
border-top-right-radius: 30px;
|
|
border-bottom-right-radius: 30px;
|
|
animation: slide 0.9s cubic-bezier(1, -0.1, 0.45, 1.05);
|
|
}
|
|
|
|
.dot-left {
|
|
position: absolute;
|
|
left: 23%;
|
|
top: 15%;
|
|
width: 59%;
|
|
height: 24%;
|
|
background: white;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dot-right {
|
|
position: absolute;
|
|
left: 24%;
|
|
top: 44%;
|
|
width: 48%;
|
|
height: 22%;
|
|
background: #E60012;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@keyframes slide {
|
|
from {
|
|
top: 8%;
|
|
}
|
|
|
|
50% {
|
|
top: 6%;
|
|
}
|
|
|
|
70% {
|
|
top: 32%;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes bounce {
|
|
35% {
|
|
top: 32%;
|
|
}
|
|
}
|