LESS
// LAYOUT
// ---------
.page{
position:relative;
position:absolute;
left:50%;
top:50%;
margin:-270px 0 0 -480px;
.size(960px, 540px);
overflow:hidden;
}
// WALL
// ---------
.wall-bg{
position:absolute;
left:0;
top:0;
.sq(100%);
ul{
.sq(100%);
.c;
}
li{
float:left;
.size(32px, 100%);
background:#120a20;
}
li:nth-child(odd){
background:#160d24;
}
}
// WALL - POSTER
.wall-poster{
position:absolute;
left:620px;
top:-70px;
.size(200px, 252px);
background:#190e28;
background:#211138;
overflow:hidden;
h1{
position:absolute;
left:14px;
top:84px;
.font-size(24, 1);
color:#291c3b;
color:#4d2d79;
text-transform:uppercase;
text-align:left;
span{
position:relative;
bottom:10px;
display:block;
.font-size(40);
text-align:left;
}
}
span{
position:absolute;
right:0;
bottom:10px;
.size(75px, 40px);
.font-size(30, 40px);
color:#291c3b;
color:#4d2d79;
text-align:center;
letter-spacing:-1.4px;
}
}
.mr-akabei{
position:absolute;
right:12px;
bottom:80px;
.size(77px, 74px);
.border-radius(38px 38px 0 0);
background:#241637;
background:#4d2d79;
i{
position:absolute;
top:80%;
right:100%;
margin-top:-5px;
.sq(10px);
.border-radius(6px);
background:#241637;
background:#43226f;
}
.point-first{
margin-right:10px;
}
.point-second{
margin-right:30px;
}
.point-third{
margin-right:50px;
}
.point-four{
margin-right:70px;
}
.point-last{
margin-right:90px;
}
}
.mr-akabei-content{
.mr-akabei-eye-first,
.mr-akabei-eye-second{
position:absolute;
top:26px;
.sq(20px);
.border-radius(10px);
background:#2f2143;
background:#8454c7;
&:before{
content:'';
position:absolute;
left:3px;
top:3px;
.sq(9px);
.border-radius(6px);
background:#1c112b;
}
}
.mr-akabei-eye-first{
left:12px;
}
.mr-akabei-eye-second{
right:12px;
}
.mr-akabei-bottom-1{
position:absolute;
left:0;
top:68px;
.size(11px, 20px);
.border-radius(0 0 6px 6px);
background:#241637;
background:#4d2d79;
}
.mr-akabei-bottom-2{
position:absolute;
left:11px;
top:62px;
.size(11px, 20px);
.border-radius(6px);
background:#190e28;
}
.mr-akabei-bottom-3{
position:absolute;
left:22px;
top:68px;
.size(11px, 24px);
.border-radius(0 0 6px 6px);
background:#241637;
background:#4d2d79;
}
.mr-akabei-bottom-4{
position:absolute;
left:33px;
top:62px;
.size(11px, 20px);
.border-radius(6px);
background:#190e28;
}
.mr-akabei-bottom-5{
position:absolute;
left:44px;
top:68px;
.size(11px, 20px);
.border-radius(0 0 6px 6px);
background:#241637;
background:#4d2d79;
}
.mr-akabei-bottom-6{
position:absolute;
left:55px;
top:66px;
.size(11px, 24px);
.border-radius(6px);
background:#190e28;
}
.mr-akabei-bottom-7{
position:absolute;
left:66px;
top:68px;
.size(11px, 24px);
.border-radius(0 0 6px 6px);
background:#241637;
background:#4d2d79;
}
}
.mr-pacman{
position:absolute;
right:70px;
bottom:10px;
.sq(40px);
.border-radius(20px);
background:#241637;
background:#4d2d79;
&:after{
content:'';
position:absolute;
left:0;
top:50%;
margin-top:-8px;
.sq(0);
border-style: solid;
border-width: 8px 0 8px 20px;
border-color: transparent transparent transparent #1c112b;
border-color: transparent transparent transparent #211138;
}
i{
position:absolute;
top:50%;
right:100%;
margin-top:-5px;
.sq(10px);
.border-radius(6px);
background:#241637;
background:#43226f;
}
.point-first{
margin-right:10px;
}
.point-second{
margin-right:30px;
}
.point-third{
margin-right:50px;
}
.point-four{
margin-right:70px;
}
}
// WALL - DESK
.wall-desk{
position:absolute;
left:30px;
top:90px;
.size(200px, 32px);
}
.wall-desk-bottom{
position:absolute;
left:0;
top:5px;
.size(146px, 10px);
background-color: #160c25;
background-image: -webkit-linear-gradient(#3e2b56 0%, #180f28 100%);
background-image: -o-linear-gradient(#3e2b56 0%, #180f28 100%);
background-image: linear-gradient(#3e2b56 0%, #180f28 100%);
.skew(80deg);
.transform-origin(left top);
}
.wall-desk-shadow{
position:absolute;
left:16px;
top:-1px;
.size(146px, 10px);
background-color:#0c0915;
.skew(74deg);
.transform-origin(left top);
}
.wall-desk-front{
position:absolute;
left:0;
top:0;
.size(140px, 5px);
background:#26173a;
}
.wall-desk-right{
position:absolute;
top:0;
left:140px;
.size(56px, 5px);
background:#201233;
.skew(0deg, 10deg);
.transform-origin(left top);
}
// WALL - DESK - TIMER
.timer{
position:absolute;
left:30px;
bottom:100%;
margin-bottom:3px;
.size(105px, 34px);
&:before{
content:'';
position:absolute;
left:50%;
top:-2px;
.size(36px, 2px);
margin-left:-18px;
.border-radius(2px 2px 0 0);
background:#57328d;
}
.timer-content{
position:relative;
padding:5px;
.sq(100%);
.border-radius(18px);
background-color: #38274e;
z-index:2;
}
.timer-right{
position:absolute;
left:100%;
top:0;
margin-left:-20px;
.size(40px, 34px);
.border-radius(0 18px 20px 0);
border-top-right-radius:60px 30px;
background-color: #2b1843;
}
.timer-hr{
position:relative;
.sq(100%);
.border-radius(18px);
background:#160d24;
.box-shadow(inset 2px 0 0 0 #0c0915);
&:before{
content:'';
position:absolute;
left:10px;
top:50%;
.sq(10px);
margin-top:-5px;
.border-radius(6px);
background:#57328d;
.box-shadow(2px 0 0 #341760);
}
}
.timer-hr-first,
.timer-hr-second,
.timer-hr-third,
.timer-hr-last{
position:absolute;
top:100%;
left:18px;
.size(8px, 4px);
.border-radius(0 0 4px 4px);
background:#241736;
}
.timer-hr-second{
left:80px;
}
.timer-hr-third,
.timer-hr-last{
left:36px;
background:#180e26;
}
.timer-hr-last{
left:102px;
}
}
.timer-digits{
padding:4px 8px 0 24px;
.sq(100%);
#font > #family > .orbitron();
.font-size(16, 20px);
font-weight:500;
color:#ee8b3c;
text-align:center;
.opacity(60);
animation:timeblink 1s infinite;
}
@-webkit-keyframes timeblink {
0% {.opacity(30);}
49% {.opacity(30);}
50% {.opacity(60);}
}
@-moz-keyframes timeblink {
0% {.opacity(30);}
49% {.opacity(30);}
50% {.opacity(60);}
}
@-o-keyframes timeblink {
0% {.opacity(30);}
49% {.opacity(30);}
50% {.opacity(60);}
}
@keyframes timeblink {
0% {.opacity(30);}
49% {.opacity(30);}
50% {.opacity(60);}
}
.timer-shadow{
position:absolute;
left:40px;
top:10px;
.size(105px, 26px);
.border-radius(20px);
background:#0c0915;
}
.timer-hr-right{
position:absolute;
left:100%;
top:50%;
.size(10px, 1px);
.rotate(14deg);
background:#160d24;
&:before,
&:after{
content:'';
position:absolute;
left:0;
.size(6px, 1px);
background:#160d24;
}
&:before{
top:-3px;
}
&:after{
left:2px;
top:3px;
}
}
// FLOOR
// ---------
.floor-bg{
position:absolute;
left:0;
bottom:0;
.size(100%, 145px);
background-color: #110c1e;
background-image: -webkit-linear-gradient(#06040b 0%, #110c1e 100%);
background-image: -o-linear-gradient(#06040b 0%, #110c1e 100%);
background-image: linear-gradient(#06040b 0%, #110c1e 100%);
}
// FLOOR - HR
.floor-hr{
position:absolute;
left:0;
top:-38px;
.size(100%, 38px);
background:#221532;
&:after,
&:before{
content:'';
position:absolute;
left:0;
top:0;
.size(100%, 2px);
background:#160d24;
}
&:after{
top:5px;
}
i{
position:absolute;
left:0;
top:-7px;
.size(100%, 7px);
background:#191028;
}
}
// TV!
// ---------
.tv-content{
position:absolute;
left:190px;
bottom:110px;
.size(534px, 318px);
}
.tv{
position:absolute;
left:60px;
top:0;
.size(340px, 274px);
}
.tv-shadow{
position:absolute;
left:80px;
top:50px;
.size(320px, 260px);
.border-radius(20px);
background:#0c0915;
transform: perspective( 700px ) rotateX( 150deg );
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
.tv-right{
position:absolute;
left:100%;
top:22px;
margin-left:-30px;
.size(97px, 232px);
.border-radius(10px);
background-color: #36274a;
background-image: -webkit-linear-gradient(#2b1d3d 0%, #1a0e29 100%);
background-image: -o-linear-gradient(#2b1d3d 0%, #1a0e29 100%);
background-image: linear-gradient(#2b1d3d 0%, #1a0e29 100%);
-webkit-transform: perspective( 200px ) rotateY( 45deg );
-moz-transform: perspective( 200px ) rotateY( 45deg );
-ms-transform: perspective( 200px ) rotateY( 45deg );
-o-transform: perspective( 200px ) rotateY( 45deg );
transform: perspective( 200px ) rotateY( 45deg );
z-index:3;
}
.tv-bottom{
position:absolute;
left:28px;
bottom:-20px;
.size(282px, 24px);
.border-radius(0 0 9px 9px);
background-color: #620e32;
background-image: -webkit-linear-gradient(bottom, #211333 0%, #110222 100%);
background-image: -o-linear-gradient(bottom, #211333 0%, #110222 100%);
background-image: linear-gradient(to top, #211333 0%, #110222 100%);
z-index:2;
ul{
position:absolute;
left:0;
top:8px;
padding-left:30px;
.size(100%, 11px);
.c;
li{
float:left;
margin:0 4px 0 0;
.size(3px, 100%);
.border-radius(2px);
background:#12081f;
}
}
i{
position:absolute;
left:100%;
bottom:0;
.size(40px, 22px);
background:#130622;
.skew(0deg, -28deg);
.transform-origin(left bottom);
}
}
// TV - SCREEN
.tv-screen{
position:absolute;
left:0;
top:0;
.sq(100%);
.border-radius(24px);
background-color: #7f1b46;
background-image: -webkit-linear-gradient(top right, #4a3863 0%, #34214c 100%);
background-image: -o-linear-gradient(top right, #4a3863 0%, #34214c 100%);
background-image: linear-gradient(to bottom left, #4a3863 0%, #34214c 100%);
z-index:4;
// SAFARI FIX
transform: translateZ(1000px);
transform-style: preserve-3d;
}
.pw-btn{
position:absolute;
left:36px;
bottom:4px;
.size(10px, 3px);
background:#ee8b3c;
}
.tv-hr{
position:absolute;
left:12px;
top:9px;
.size(316px, 254px);
.border-radius(18px);
background:#57328d;
}
.tv-hr-2{
position:absolute;
left:3px;
top:3px;
.size(310px, 248px);
.border-radius(18px);
background:#1c1330;
}
.tv-hr-3{
position:absolute;
left:4px;
top:4px;
.size(302px, 240px);
.border-radius(18px);
background:#110a20;
}
.tv-glass{
position:absolute;
left:6px;
top:5px;
.size(290px, 230px);
.border-radius(12px);
background:black;
overflow:hidden;
-webkit-transform:translate3d(0,0,0);
canvas{
position:absolute;
left:0;
top:0;
.scale(0.42);
.opacity(50);
.transform-origin(left top);
.transition(all .2s ease-in-out);
.show-player &{
.opacity(100);
}
}
}
iframe{
position:absolute;
left:0;
top:0;
.sq(100%);
border:0;
.border-radius(9px);
overflow:hidden;
overflow-x:hidden;
overflow-y:hidden;
}
.ytframe{
left:-20%;
.size(140%, 100%);
}
.tv-loading{
display:block;
padding:10px 0 0 18px;
.font-size(24);
color:@white;
.opacity(80);
}
// TV - VINTAGE
.tv-glass-vintage{
position:absolute;
left:0;
top:0;
.sq(100%);
pointer-events:none;
ul{
position:absolute;
left:0;
top:0;
.sq(100%);
li{
position:relative;
.size(100%, 4%);
&:after{
content:'';
position:absolute;
left:0;
top:50%;
.size(100%, 2px);
background:@white;
.opacity(07);
}
}
}
}
.tv-noise,
.tv-noise-second{
position:absolute;
left:0;
top:0;
.sq(100%);
background-image:url(data:image/png;base64,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);
animation: blink .3s infinite linear;
}
.tv-noise-second{
background-image:url(data:image/png;base64,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);
.opacity(0);
-moz-animation-direction: reverse;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
@-webkit-keyframes blink {
0% {.opacity(0);}
50% {.opacity(15);}
100% {.opacity(30);}
}
@-moz-keyframes blink {
0% {.opacity(0);}
50% {.opacity(15);}
100% {.opacity(30);}
}
@-o-keyframes blink {
0% {.opacity(0);}
50% {.opacity(15);}
100% {.opacity(30);}
}
@keyframes blink {
0% {.opacity(0);}
50% {.opacity(15);}
100% {.opacity(30);}
}
.tv-glow{
position:absolute;
top:10px;
right:10px;
.border-radius(18px 0 0 18px);
.sq(120px);
background-image:radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 59px, #fff 60px);
background-size: 50% 50%;
background-repeat: no-repeat;
.opacity(20);
filter: blur(3px);
.rotate(90deg);
}
.tv-flashing{
position:absolute;
left:0;
top:0;
.sq(100%);
pointer-events:none;
-webkit-transform:translate3d(0,0,0);
i{
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
.opacity(0);
animation: blink2 3s infinite linear;
}
.tv-flashing-left{
position:absolute;
right:100%;
top:-4px;
margin-right:-73px;
.size(200px, 254px);
transform: perspective( 400px ) rotateY( 64.4deg );
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.tv-flashing-bottom{
position:absolute;
left:-27px;
top:100%;
margin-top:-40px;
.size(300px, 100px);
transform: perspective( 600px ) rotateX( 60deg ) skew(-28deg);
background: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.tv-flashing-bottom-placeholder{
position:absolute;
left:0;
top:100%;
margin:-28px 0 0 8px;
.sq(30px);
background-image:radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #fff 15px);
background-size: 50% 50%;
background-repeat: no-repeat;
}
}
@-webkit-keyframes blink2 {
0% {
.opacity(0)
}
5% {
.opacity(10);
}
7% {
.opacity(0);
}
14% {
.opacity(0);
}
22% {
.opacity(10);
}
26% {
.opacity(0);
}
66% {
.opacity(0);
}
78% {
.opacity(08);
}
82% {
.opacity(0);
}
88% {
.opacity(08);
}
92%{
.opacity(0);
}
100% {
.opacity(0);
}
}
@-moz-keyframes blink2 {
0% {
.opacity(0)
}
5% {
.opacity(10);
}
7% {
.opacity(0);
}
14% {
.opacity(0);
}
22% {
.opacity(10);
}
26% {
.opacity(0);
}
66% {
.opacity(0);
}
78% {
.opacity(08);
}
82% {
.opacity(0);
}
88% {
.opacity(08);
}
92%{
.opacity(0);
}
100% {
.opacity(0);
}
}
@-o-keyframes blink2 {
0% {
.opacity(0)
}
5% {
.opacity(10);
}
7% {
.opacity(0);
}
14% {
.opacity(0);
}
22% {
.opacity(10);
}
26% {
.opacity(0);
}
66% {
.opacity(0);
}
78% {
.opacity(08);
}
82% {
.opacity(0);
}
88% {
.opacity(08);
}
92%{
.opacity(0);
}
100% {
.opacity(0);
}
}
@keyframes blink2 {
0% {
.opacity(0)
}
5% {
.opacity(10);
}
7% {
.opacity(0);
}
14% {
.opacity(0);
}
22% {
.opacity(10);
}
26% {
.opacity(0);
}
66% {
.opacity(0);
}
78% {
.opacity(08);
}
82% {
.opacity(0);
}
88% {
.opacity(08);
}
92%{
.opacity(0);
}
100% {
.opacity(0);
}
}
// TV - TOP
.tv-top{
position:absolute;
left:0;
bottom:100%;
margin-bottom:-4px;
.size(100%, 100px);
i{
position:absolute;
left:50%;
bottom:0;
.size(4px, 80px);
background:#36274a;
.transform-origin(left bottom);
&:after{
content:'';
position:absolute;
left:-2px;
top:-2px;
.sq(8px);
.border-radius(4px);
background:#36274a;
}
}
.item-left{
.rotate(-35deg);
}
.item-right{
margin-left:-6px;
height:140px;
.rotate(45deg);
}
}
// TV - DESK
.tv-desk{
position:absolute;
left:0;
bottom:0;
.size(100%, 60px);
}
.tv-desk-top,
.tv-desk-shadow{
position:absolute;
left:0;
bottom:8px;
.size(420px, 51px);
background-color: #372757;
background-image: -webkit-linear-gradient(bottom, #130a21 0%, #07000e 100%);
background-image: -o-linear-gradient(bottom, #130a21 0%, #07000e 100%);
background-image: linear-gradient(to top, #130a21 0%, #07000e 100%);
.skew(-60deg);
.transform-origin(left bottom);
}
.tv-desk-shadow{
bottom:-30px;
background:#050409;
}
.tv-desk-front{
position:absolute;
left:0;
bottom:0;
.size(412px, 10px);
background:#1f1131;
}
.tv-desk-right{
position:absolute;
bottom:0;
left:412px;
.size(92px, 10px);
background:#28183d;
.skew(0deg, -28deg);
.transform-origin(left bottom);
}
.tv-desk-item-left,
.tv-desk-item-right,
.tv-desk-item-rear{
position:absolute;
left:40px;
top:100%;
margin-top:-16px;
.size(14px, 58px);
background:#28183d;
transform: perspective( 100px ) rotateX( 120deg );
}
.tv-desk-item-left-shadow,
.tv-desk-item-right-shadow,
.tv-desk-item-rear-shadow{
position:absolute;
left:52px;
top:100%;
margin-top:25px;
.size(8px, 46px);
background:#170c26;
transform: skew(0deg, -28deg) perspective( 100px ) rotateX( 120deg );
.transform-origin(left top);
}
.tv-desk-item-right{
left:370px;
}
.tv-desk-item-right-shadow{
left:382px;
}
.tv-desk-item-rear{
margin-top:-52px;
left:450px;
background:#170c26;
}
.tv-desk-item-rear-shadow{
margin-top:-12px;
left:462px;
background:#12091f;
}
// CONSOLE
.console{
position:absolute;
left:60px;
bottom:6px;
.size(132px, 40px);
}
.console-shadow{
position:absolute;
right:0;
bottom:0;
margin-right:10px;
.size(100px, 100px);
background:black;
.skew(-69deg);
.transform-origin(left bottom);
}
.console-top{
position:absolute;
left:0;
bottom:40px;
.size(132px, 46px);
background-color: #342448;
background-image: -webkit-linear-gradient(#180f28 0%, #342448 60%);
background-image: -o-linear-gradient(#180f28 0%, #342448 60%);
background-image: linear-gradient(#180f28 0%, #342448 60%);
.skew(-60deg);
.transform-origin(left bottom);
}
.console-top-panel{
position:absolute;
left:85px;
bottom:0;
.size(30px, 46px);
background:#1b1127;
i{
display:block;
.size(100%, 6px);
border-bottom:1px solid #160e20;
}
.console-top-panel-item-1{
height:4px;
}
.console-top-panel-item-4,
.console-top-panel-item-5,
.console-top-panel-item-6{
border-color:#291d3a;
background:#2d1e3f;
}
}
.console-game-top{
position:absolute;
left:10px;
bottom:0;
.size(60px, 16px);
border:1px solid #2b1d3e;
border-bottom:0;
}
.console-right-top{
position:absolute;
bottom:16px;
left:131px;
.size(80px, 24px);
background:#28183d;
.skew(0deg, -30deg);
.transform-origin(left bottom);
&:after{
content:'';
position:absolute;
top:0;
left:100%;
.sq(0);
border-style: solid;
border-width: 24px 0 0 5px;
border-color: transparent transparent transparent #28183d;
}
}
.console-right-bottom{
position:absolute;
bottom:0;
left:131px;
.size(80px, 16px);
background:#1b1127;
.skew(0deg, -30deg);
.transform-origin(left bottom);
&:after{
content:'';
position:absolute;
top:0;
left:100%;
.sq(0);
border-style: solid;
border-width: 16px 6px 0 0;
border-color: #1b1127 transparent transparent transparent;
}
}
.console-front-panel{
position:relative;
.sq(100%);
}
// CONSOLE - FRONT PANEL - TOP
.front-panel-top{
position:absolute;
left:0;
top:0;
.size(100%, 50%);
background:#392652;
&:before,
&:after{
content:'';
position:absolute;
top:0;
.sq(0);
border-style: solid;
}
&:before{
right:100%;
border-width: 0 0 20px 4px;
border-color: transparent transparent #392652 transparent;
}
&:after{
left:100%;
border-width: 20px 0 0 4px;
border-color: transparent transparent transparent #392652;
}
}
.console-game{
position:absolute;
left:8px;
bottom:6px;
.size(60px, 14px);
border:1px solid #2b1d3e;
border-top:0;
.skew(-10deg, 0deg);
.transform-origin(left bottom);
}
.console-power-dark{
position:absolute;
left:82px;
bottom:0;
.size(30px, 20px);
background:#231831;
.skew(-10deg, 0deg);
.transform-origin(left bottom);
}
// CONSOLE - FRONT PANEL - BOTTOM
.front-panel-bottom{
position:absolute;
left:0;
bottom:0;
.size(100%, 50%);
background:#28193b;
&:before,
&:after{
content:'';
position:absolute;
top:0;
.sq(0);
border-style: solid;
}
&:before{
right:100%;
border-width: 0 4px 20px 0;
border-color: transparent #28193b transparent transparent;
}
&:after{
left:100%;
border-width: 20px 4px 0 0;
border-color: #28193b transparent transparent transparent;
}
}
.console-power-indicator{
position:absolute;
left:9px;
top:9px;
.sq(4px);
.border-radius(2px);
background:#ee8b3c;
}
.console-btn-first,
.console-btn-second{
position:absolute;
left:24px;
top:7px;
.size(16px, 8px);
.border-radius(3px);
border:1px solid #0e0a19;
background:#392652;
}
.console-btn-second{
left:44px;
}
// CONSOLE - FRONT - POWER
.console-power{
position:absolute;
right:20px;
top:0;
.size(30px, 100%);
background:#1b1127;
}
.console-power-plug{
position:absolute;
left:5px;
top:4px;
.size(20px, 12px);
.border-radius(2px);
background:#020204;
i{
position:absolute;
left:1px;
top:2px;
.size(16px, 10px);
.border-radius(2px);
background:#140c1d;
}
}
.console-power-cable{
position:absolute;
right:14px;
top:8px;
.size(40px, 6px);
.border-radius(10px);
background:black;
.skew(0deg, -30deg);
.transform-origin(right top);
}
// PLAYER
.player-1{
position:absolute;
right:40px;
bottom:-10px;
.size(310px, 140px);
.transition(all .5s cubic-bezier(.32,0,.56,1.4));
bottom:-180px;
transform:perspective( 600px ) rotateY(20deg) rotateX( 80deg ) scale(1.15);
.show-player &{
bottom:-10px;
bottom:0px;
transform:perspective( 600px ) rotateY(0deg) rotateX(0deg) scale(1.15);
}
.press-spacebar &{
transform:rotate(2deg) scale(1.1);
}
.press-w &,
.press-a &,
.press-s &,
.press-d &{
transform:rotate(-2deg) scale(1.1);
}
}
.player-hand-left{
position:absolute;
left:0;
bottom:0;
.size(110px, 100px);
.hand-content{
position:absolute;
left:0;
bottom:-20px;
.size(100px, 160px);
.hand-inner{
position:absolute;
right:4px;
top:34px;
.sq(36px);
.border-radius(30px);
background:#231733;
z-index:5;
}
.hand-left{
position:absolute;
left:0;
bottom:0;
.size(60px, 140px);
border-top-left-radius:100px 200px;
border-bottom-left-radius:50px 50px;
background:#2f2140;
.rotate(10deg);
.transform-origin(left bottom);
}
}
.finger-content{
position:absolute;
left:40px;
bottom:30px;
.sq(52px);
.finger-placeholder{
position:absolute;
left:0;
bottom:0;
.sq(100%);
.border-radius(30px);
background:#2f2140;
.transition(all .2s ease-in-out);
.press-w &{
left:0px;
bottom:4px;
}
.press-a &{
left:-2px;
}
.press-s &{
left:4px;
}
.press-d &{
left:2px;
}
}
.finger-touch{
position:absolute;
left:50%;
top:50%;
margin-top:-5px;
.size(32px, 24px);
background:#2f2140;
.rotate(-44deg);
z-index:10;
.transform-origin(left top);
.transition(all .2s ease-in-out);
.press-w &{
width:50px;
.rotate(-50deg);
}
.press-a &{
width:30px;
.rotate(-54deg);
}
.press-s &{
width:38px;
.rotate(-30deg);
}
.press-d &{
width:50px;
.rotate(-36deg);
}
&:before{
content:'';
position:absolute;
top:0;
right:-12px;
.sq(24px);
.border-radius(12px);
background:#2f2140;
}
&:after{
content:'';
position:absolute;
right:-10px;
top:4px;
.size(14px, 16px);
.border-radius(0 8px 8px 0);
background:#423256;
}
}
}
.hair-item-1,
.hair-item-2,
.hair-item-3,
.hair-item-4,
.hair-item-5,
.hair-item-6,
.hair-item-7,
.hair-item-8,
.hair-item-9,
.hair-item-10,
.hair-item-11,
.hair-item-12,
.hair-item-13,
.hair-item-14,
.hair-item-15,
.hair-item-16{
position:absolute;
left:48px;
top:54px;
.size(1px, 10px);
background:#1d112c;
.rotate(50deg);
z-index:15;
}
.hair-item-2{
margin-left:6px;
margin-top:8px;
}
.hair-item-3{
margin-left:-10px;
margin-top:6px;
}
.hair-item-4{
margin-left:-10px;
margin-top:20px;
}
.hair-item-5{
margin-left:6px;
margin-top:20px;
.rotate(38deg);
}
.hair-item-6{
margin-left:8px;
margin-top:36px;
.rotate(38deg);
}
.hair-item-7{
margin-left:-10px;
margin-top:36px;
.rotate(38deg);
}
.hair-item-8{
margin-left:0px;
margin-top:32px;
.rotate(38deg);
}
.hair-item-9{
margin-left:-20px;
margin-top:22px;
.rotate(38deg);
}
.hair-item-10{
margin-left:-24px;
margin-top:34px;
.rotate(22deg);
}
.hair-item-11{
margin-left:-10px;
margin-top:56px;
.rotate(22deg);
}
.hair-item-12{
margin-left:-26px;
margin-top:52px;
.rotate(22deg);
}
.hair-item-13{
margin-left:0px;
margin-top:60px;
.rotate(22deg);
}
.hair-item-14{
margin-left:-12px;
margin-top:80px;
.rotate(22deg);
}
.hair-item-15{
margin-left:-22px;
margin-top:70px;
.rotate(22deg);
}
.hair-item-16{
margin-left:-34px;
margin-top:76px;
.rotate(22deg);
}
}
.player-hand-right{
position:absolute;
right:0;
bottom:0;
.size(110px, 120px);
.hand-content{
position:absolute;
right:0;
bottom:-20px;
.size(100px, 180px);
.hand-inner{
position:absolute;
left:4px;
top:34px;
.sq(38px);
.border-radius(30px);
background:#231733;
z-index:5;
}
.hand-left{
position:absolute;
right:0;
bottom:0;
.size(60px, 160px);
border-top-right-radius:100px 200px;
background:#2f2140;
.rotate(-10deg);
.transform-origin(right bottom);
}
}
.finger-content{
position:absolute;
right:40px;
bottom:50px;
.sq(52px);
.finger-placeholder{
position:absolute;
right:0;
bottom:0;
.sq(100%);
.border-radius(30px);
background:#2f2140;
.transition(all .2s ease-in-out);
.press-spacebar &{
right:5px;
}
}
.finger-touch{
position:absolute;
right:50%;
top:50%;
margin-top:-16px;
.size(36px, 24px);
background:#2f2140;
.rotate(36deg);
z-index:10;
.transition(all .2s ease-in-out);
.press-spacebar &{
width:52px;
.rotate(30deg);
}
&:before{
content:'';
position:absolute;
top:0;
left:-12px;
.sq(24px);
.border-radius(12px);
background:#2f2140;
}
&:after{
content:'';
position:absolute;
left:-10px;
top:4px;
.size(14px, 16px);
.border-radius(8px 0 0 8px);
background:#423256;
}
}
}
.hair-item-1,
.hair-item-2,
.hair-item-3,
.hair-item-4,
.hair-item-5,
.hair-item-6,
.hair-item-7,
.hair-item-8,
.hair-item-9,
.hair-item-10,
.hair-item-11,
.hair-item-12,
.hair-item-13,
.hair-item-14,
.hair-item-15,
.hair-item-16{
position:absolute;
left:62px;
top:68px;
.size(1px, 10px);
background:#1d112c;
.rotate(-50deg);
z-index:15;
}
.hair-item-2{
margin-left:6px;
margin-top:8px;
}
.hair-item-3{
margin-left:20px;
margin-top:70px;
.rotate(-22deg);
}
.hair-item-4{
margin-left:-10px;
margin-top:20px;
}
.hair-item-5{
margin-left:6px;
margin-top:20px;
.rotate(-38deg);
}
.hair-item-6{
margin-left:8px;
margin-top:36px;
.rotate(-38deg);
}
.hair-item-7{
margin-left:-10px;
margin-top:36px;
.rotate(-38deg);
}
.hair-item-8{
margin-left:20px;
margin-top:50px;
.rotate(-22deg);
}
.hair-item-9{
margin-left:-20px;
margin-top:22px;
.rotate(-38deg);
}
.hair-item-10{
margin-left:-24px;
margin-top:34px;
.rotate(-22deg);
}
.hair-item-11{
margin-left:-10px;
margin-top:56px;
.rotate(-22deg);
}
.hair-item-12{
margin-left:-26px;
margin-top:52px;
.rotate(-22deg);
}
.hair-item-13{
margin-left:0px;
margin-top:70px;
.rotate(-22deg);
}
.hair-item-14{
margin-left:-12px;
margin-top:80px;
.rotate(-22deg);
}
.hair-item-15{
margin-left:-22px;
margin-top:70px;
.rotate(-22deg);
}
.hair-item-16{
margin-left:-34px;
margin-top:76px;
.rotate(-22deg);
}
}
// CONTROLLER NES
.controller-nes{
position:absolute;
top:20px;
left:68px;
padding:16px 8px 8px 8px;
.size(160px, 70px);
.border-radius(4px);
background:#493762;
background-image: -webkit-linear-gradient(bottom left, #34214c 0%, #4a3863 100%);
background-image: -o-linear-gradient(bottom left, #34214c 0%, #4a3863 100%);
background-image: linear-gradient(to top right, #34214c 0%, #4a3863 100%);
.rotate(-10deg);
.transform-origin(left top);
z-index:8;
}
.in-controller-nes{
position:relative;
.sq(100%);
background:#201330;
}
.controller-nes-pad{
position:absolute;
left:8px;
bottom:8px;
.sq(30px);
&:before,
&:after{
content:'';
position:absolute;
.border-radius(4px);
background:#06040b;
}
&:before{
top:0;
left:50%;
margin-left:-6px;
.size(12px, 100%);
}
&:after{
top:50%;
left:0;
margin-top:-6px;
.size(100%, 12px);
}
}
.controller-nes-option{
position:absolute;
left:50px;
top:0;
.size(34px, 100%);
overflow:hidden;
i{
position:absolute;
left:0;
display:block;
.size(100%, 8px);
.border-radius(4px);
background:#43305b;
}
.hr-first{
top:-2px;
}
.hr-second{
top:7px;
}
.hr-third{
top:16px;
}
.hr-last{
bottom:-2px;
}
.controller-nes-option-btn{
position:absolute;
left:0;
top:25px;
.size(100%, 14px);
.border-radius(4px);
background:#57328d;
&:before,
&:after{
content:'';
position:absolute;
top:5px;
.size(10px, 4px);
.border-radius(2px);
background:#6c41aa;
}
&:before{
left:4px;
}
&:after{
right:4px;
}
}
}
.controller-nes-btn{
position:absolute;
right:14px;
bottom:8px;
.size(36px, 14px);
i{
position:relative;
float:left;
margin:0 0 0 4px;
.sq(14px);
.border-radius(2px);
background:#34214c;
&:after{
content:'';
position:absolute;
left:50%;
top:50%;
margin:-4px 0 0 -4px;
.sq(8px);
.border-radius(4px);
background:#730505;
}
}
}
// MIXINS
// ---------
// Clearfix
// --------
.c {
&:after {
content:"";
display:table;
clear:both;
}
}
// Sizing shortcuts
// -------------------------
.size(@width: 5px, @height: 5px) {
width: @width;
height: @height;
}
.square(@size: 5px) {
.size(@size, @size);
}
.sq(@size: 5px) {
.size(@size, @size);
}
// FONTS
// --------------------------------------------------
#font {
#family {
.sans-serif() {
font-family: 'VT323', Georgia, "Times New Roman", Times, serif;
}
.orbitron() {
font-family: 'Orbitron', 'Arial CE', Arial, sans-serif;
}
}
.size(@font-size: 16, @line: 1) {
@rem: (@font-size / 10);
font-size: @font-size * 1px;
font-size: ~"@{rem}rem";
line-height: @line;
}
}
.font-size(@font-size: 16, @line: 1) {
@rem: (@font-size / 10);
font-size: @font-size * 1px;
font-size: ~"@{rem}rem";
line-height: @line;
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.skew(@x: 0, @y: 0) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skew(@x, @y);
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-o-transform-origin: @origin;
transform-origin: @origin;
}
// Opacity
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: e(%("alpha(opacity=%d)", @opacity));
}
// HTML
// ---------
html{
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after{
box-sizing: inherit;
}
html, body{
.sq(100%);
}
// BODY
// ---------
body{
position:relative;
min-width:960px;
min-height:540px;
margin: 0;
line-height: 1;
.font-size(12, 18px);
#font > #family > .sans-serif();
color:@basecolor;
background:#110c1e;
-webkit-font-smoothing: antialiased;
}
// VARIABLES
// ---------
@basecolor: #000;
// Colors
@white: #fff;
@black: #000;
// RESET
// ---------
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; line-height: 1; font-family: inherit;
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
1 Response