//scss0 base
$green: #0F0;
$yellow: #FF0;
$red: #f00;
$line: .5vmin;
$radar: 1vmin;
$none: rgba(255,255,255,0);
$shadow: rgba(#555,.25);
$body: #1d1d1d;
%abs {
position: absolute;
left: 0;
top: 0;
}
%centre {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
body {
margin: 0;
background: #000;
font-family: 'Press Start 2P', cursive;
}
#monitor {
margin: auto;
width: 97vmin;
height: 95vmin;
padding: 1vmin;
&, & *, & *:after, & *:before {
display: block;
box-sizing: border-box;
font-style: normal;
content: '';
}
}
#close:checked ~ #instructions, #close:checked + #extend:checked ~ #instructions {
transform: translate3d(0,100%,0);
}
#extend:checked ~ #instructions {
transform: translate3d(0,-60%,0);
}
#instructions {
text-align: center;
position: fixed;
top: 100%;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 110vmin;
color: $body;
font-size: 2vmin;
box-sizing: border-box;
text-shadow: .15em .15em 0 $shadow;
line-height: 1.5em;
transition: transform 1s ease-in-out;
& > div {
transform: translate3d(0,0,0);
background: rgba( #fff,.98);
padding: 1vmin 1vmin 2vmin;
box-sizing: border-box;
border-radius: 4vmin 4vmin 0 0;
animation: close 1s forwards linear 5s;
}
@-webkit-keyframes close {
100% {
transform: translate3d(0,-40%,0);
}
}
h1, h2, h3, p {
padding-bottom: 1.5vmin;
}
p {
padding-top: 1.5vmin;
}
table {
text-align: left;
width: 100%;
max-width: 100vmin;
margin: auto;
padding-top: 4vmin;
td {
padding: 1vmin 2vmin;
}
}
div div {
text-align: right;
}
label {
cursor: pointer;
}
#closelabel {
padding: 1vmin;
box-shadow: 0 0 0 2vmin $none, .25vmin .25vmin 0 $shadow;
margin-right: 2vmin;
font-size: 2vmin;
position: absolute;
top: 2vmin;
right: 1vmin;
display: flex;
background: rgba(#000,.1);
transition: all .1s ease-in-out;
b {
font-size: 3vmin;
padding-left: 1vmin;
line-height: .6;
}
&:hover {
box-shadow: 0 0 0 0 rgba(#000,.5), .25vmin .25vmin 0 $shadow;
background: rgba(#000,.9);
color: #fff;
}
}
#extendlabel {
position: relative;
&:before {
width: 3vmin;
height: 3vmin;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 80%;
transform: translate3d(0,0,0) rotate(45deg);
border: $line solid $body;
border-top-width: 0;
border-left-width: 0;
content: '';
box-shadow: .25vmin .25vmin 0 $shadow;
}
&:hover:before {
animation: extend .5s ease-in-out alternate infinite;
}
@-webkit-keyframes extend {
50% {
transform: translate3d(0,10%,0) rotate(45deg);
}
100% {
transform: translate3d(0,-10%,0) rotate(45deg);
}
}
}
}
.no-wrap {
white-space: nowrap;
}
#basic {
width: 100%;
height: 100%;
position: relative;
color: #fff;
perspective: 200vmin;
}
input {
display: none !important;
}
#keys {
padding-top: 5vmin;
display: flex;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
justify-content: center;
& div {
margin: .5vmin;
}
& div > div {
display: flex;
justify-content: center;
}
label {
margin: .5vmin;
width: 8vmin;
height: 9vmin;
line-height: 10vmin;
font-size: 3vmin;
}
}
label, .key {
background: rgba(#fff,.2);
border-radius: 1vmin;
text-align: center;
padding: 1vmin;
}
@function stars ($a, $b, $c) {
$value: '#{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;
@for $i from 2 through $a {
$value: '#{$value} , #{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;
}
@return unquote($value);
}
@function stars2 ($a, $b, $c) {
$value: '#{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;
@for $i from 2 through $a {
$value: '#{$value} , #{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;
}
@return unquote($value);
}
@function explode ($a, $b, $c) {
$value: '#{random(50) - 25}vmin #{random(50) - 25}vmin '+ $b + ' ' + $c;
@for $i from 2 through $a {
$value: '#{$value} , #{random(50) - 25}vmin #{random(50) - 25}vmin '+ $b + ' ' + $c;
}
@return unquote($value);
}
$stars1: stars(5, 0, #fff);
$stars2: stars2(7, 0, #fff);
$stars3: stars(10, 0, #fff);
$explode: explode(20, 0, #fff);
@-webkit-keyframes stars {
50% {
opacity: 1;
}
100% {
transform: translate3d(0vmin,0vmin,5000vmin) scale(5);
opacity: 0;
}
}
//sass imports go here
/*@import "1start";
@import "2krait";
@import "3profile";
@import "4launch";
@import "5hyperspace";
@import "6movement";
@import "7gameover";*/
//_1start.scss
//welcome screen
#start ~ #basic > i {
&:nth-of-type(1) {
width: 100%;
height: 100%;
border: $line solid #fff;
overflow: hidden;
//screen bg
& > i:nth-of-type(1) {
/*display: none;*/
width: 100%;
height: 72vmin;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
perspective: 200vmin;
perspective-origin: 50% 50%;
transition: all 2s ease-in-out;
border: $line solid $none;
//stars
& > i:nth-of-type(1) {
transform-style: preserve-3d;
width: 95vmin;
height: 95vmin;
@extend %abs;
top: -12vmin;
transform: rotate(0);
transition: all 2s ease-in-out;
//stars
& > i:nth-of-type(1) {
& > i {
width: .35vmin;
height: .35vmin;
position: absolute;
top: -10vmin;
left: 0;
bottom:0;
right:0;
margin:auto;
box-shadow: $stars1;
animation: stars 10s infinite linear;
transform: translate3d(0vmin,0vmin,-4000vmin);
opacity: 0;
}
& > i:nth-of-type(2) {
animation: stars 9s infinite linear 1s;
box-shadow: $stars2;
}
& > i:nth-of-type(3) {
animation: stars 8s infinite linear 2s;
box-shadow: $stars3;
}
& > i:nth-of-type(4) {
animation: stars 7s infinite linear 3s;
box-shadow: $stars1;
}
& > i:nth-of-type(5) {
animation: stars 6s infinite linear 4s;
box-shadow: $stars2;
}
& > i:nth-of-type(6) {
animation: stars 5s infinite linear 5s;
box-shadow: $stars3;
}
& > i:nth-of-type(7) {
animation: stars 4s infinite linear 6s;
box-shadow: $stars1;
}
& > i:nth-of-type(8) {
animation: stars 3s infinite linear 7s;
box-shadow: $stars3;
}
& > i:nth-of-type(9) {
animation: stars 2s infinite linear 8s;
box-shadow: $stars2;
}
& > i:nth-of-type(10) {
animation: stars 1s infinite linear 9s;
box-shadow: $stars1;
}
}
//planet and sun
& > i:nth-of-type(2), & > i:nth-of-type(3) {
transform-style: preserve-3d;
transform: scale(0);
@extend %centre;
transition: all 1s ease-in-out;
}
}
& > i:nth-of-type(2) {
opacity: 1;
}
}
//dashboard
& > i:nth-of-type(4) {
width: 100%;
height: 21vmin;
box-shadow: inset 0 0 0 $line $yellow;
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
font-size: 2.1vmin;
letter-spacing: .15em;
font-weight: bold;
line-height: 1.5em;
transform-style: preserve-3d;
perspective: 0vmin;
//left
& > i:nth-of-type(1) {
@extend %abs;
& > i {
height: 3vmin;
margin-left: 5.5vmin;
border-bottom: $line solid $green;
width: 12vmin;
position: relative;
& > i {
@extend %abs;
}
}
& > i:before {
color: $red;
transform: translate3d(-4.75vmin,.25vmin,0);
}
& > i:nth-of-type(1):before {
content: 'FS';
}
& > i:nth-of-type(2):before {
content: 'AS';
}
& > i:nth-of-type(3):before {
content: 'FV';
}
& > i:nth-of-type(4):before {
content: 'CT';
}
& > i:nth-of-type(5):before {
content: 'LT';
}
& > i:nth-of-type(6):before {
content: 'AL';
}
//animate
& > i:nth-of-type(1) > i:nth-of-type(1), & > i:nth-of-type(2) > * {
background: $yellow;
width: 0;
height: 1.25vmin;
transform: translate3d(0,.75vmin,0);
animation: start 2s forwards ease-in-out;
@extend %abs;
}
& > i:nth-of-type(1) > i:nth-of-type(2) {
opacity: 0;
background: $yellow;
width: 11vmin;
height: 1.25vmin;
transform: translate3d(0,.75vmin,0);
@extend %abs;
animation: none;
}
@-webkit-keyframes start {
100% {
width: 11vmin;
}
}
& > i:nth-of-type(7) {
border-bottom: none;
}
& > i:nth-of-type(7):before {
background: $yellow;
width: .55vmin;
height: .5vmin;
transform: translate3d(-4.75vmin,.5vmin,0);
box-shadow: 0 .5vmin 0 0 $yellow, 0 1vmin 0 0 $red, .5vmin .5vmin 0 0 $red, 1vmin .5vmin 0 0 $red, 1.5vmin .5vmin 0 0 $red, 2vmin .5vmin 0 0 $red, 2.5vmin .5vmin 0 0 $red, 3vmin .5vmin 0 0 $red, 1.5vmin 1vmin 0 0 $red, 2vmin 1vmin 0 0 $red, 2.5vmin 1vmin 0 0 $red, 3vmin 1vmin 0 0 $red, 1.5vmin 0 0 0 $yellow, 2vmin 0 0 0 $yellow, 2.5vmin 0 0 0 $yellow, 3vmin 0 0 0 $yellow, 3.5vmin .5vmin 0 0 $yellow, 4vmin .5vmin 0 0 $yellow;
}
//fv
& > i:nth-of-type(3):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(0,-1vmin,0);
box-shadow: 2.25vmin 0 0 $green,4.5vmin 0 0 $green,6.75vmin 0 0 $green,9vmin 0 0 $green,11.25vmin 0 0 $green;
}
//ct
& > i:nth-of-type(4):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(0,-1vmin,0);
box-shadow: 3vmin 0 0 $green, 6vmin 0 0 $green, 9vmin 0 0 $green;
}
//lt
& > i:nth-of-type(5):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(0,-1vmin,0);
box-shadow: 2.25vmin 0 0 $green,4.5vmin 0 0 $green,6.75vmin 0 0 $green,9vmin 0 0 $green;
}
//al
& > i:nth-of-type(6):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(0,-1vmin,0);
box-shadow: 2.25vmin 0 0 $green,5vmin 0 0 $green,8vmin 0 0 $green;
}
}
//centre
& > i:nth-of-type(2) {
width: 63%;
overflow: hidden;
position: relative;
perspective: 60vmin;
&:before {
@extend %abs;
width: 100%;
height: 100%;
box-shadow: 0 0 0 10vmin $red, inset 0 0 0 $line $yellow;
border-radius: 4vmin;
}
&:after {
@extend %abs;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 $line $yellow;
}
//proximity
& > i:nth-of-type(1) {
width: 8.5vmin;
height: 8.5vmin;
position: absolute;
right: 0;
top: 0;
overflow: hidden;
border-radius: 0 0 0 4vmin;
&:before {
@extend %abs;
width: 100%;
height: 100%;
box-shadow: 0 0 0 10vmin $red, inset 0 0 0 $line $yellow;
border-radius: 4vmin;
}
&:after {
@extend %abs;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 $line $yellow;
border-radius: 0 0 0 4vmin;
}
& > i:nth-of-type(1) {
width: 1.5vmin;
height: $line;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 1vmin;
background: $red;
box-shadow: 0 1vmin 0 0 $red, 0 2vmin 0 0 $red,0 4vmin 0 0 $red,0 5vmin 0 0 $red,0 6vmin 0 0 $red;
&:before {
width: .75vmin;
height: $line;
position: absolute;
left: -.75vmin;
margin: auto;
top: 3vmin;
background: $red;
box-shadow: -1.5vmin 0 0 0 $red,2.25vmin 0 0 0 $red,3.75vmin 0 0 0 $red;
}
}
}
//radar
& > i:nth-of-type(2) {
width: 50vmin;
height: 50vmin;
position: absolute;
left: 0;
right: 2vmin;
top: 1vmin;
bottom: 0;
margin: auto;
border: $radar dashed $red;
border-top-width: $radar*1.5;
border-bottom-width: $radar/1.5;
border-radius: 50%;
overflow: hidden;
transform: translate3d(0,-.5vmin,-5vmin) rotateX(75deg);
transform-origin: 50% 45%;
&:after {
position: absolute;
top: 28vmin;
left: 23.25vmin;
width: 0;
height: 0;
border: 1.5vmin solid $none;
border-bottom: 4vmin solid $yellow;
border-top-width: 0;
}
& > i:nth-of-type(1) {
position: absolute;
left: 0;
width: 100%;
height: 0;
top: 31vmin;
border-top: $radar dotted $red;
&:before {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-top: $radar dotted $red;
top: 10vmin;
}
&:after {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-top: $radar dotted $red;
top: -13vmin;
}
}
& > i:nth-of-type(2) {
left: 24.25vmin;
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: $radar dotted $red;
&:before {
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: $radar dotted $red;
left: 13vmin;
}
&:after {
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: $radar dotted $red;
left: -14vmin;
}
}
& > i:nth-of-type(3) {
left: 24.25vmin;
position: absolute;
top: 0;
width: 0;
height: 66%;
&:before {
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: ($radar*1.25) dotted $green;
left: 0;
transform: skewX(25deg);
transform-origin: 0 100%;
}
&:after {
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: ($radar*1.25) dotted $green;
left: 0;
transform: skewX(-25deg);
transform-origin: 0 100%;
}
}
& > i:nth-of-type(4) {
position: absolute;
top: 0;
left: 0;
width: 2vmin;
height: 2vmin;
border-bottom: 2vmin solid $green;
transform: translate3d(24vmin,-2vmin,0) rotateY(-45deg);
animation: radar1 50s infinite alternate linear;
}
@-webkit-keyframes radar1 {
15% {
transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
}
100% {
transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
}
}
}
& > i:nth-of-type(3):after {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
content: 'ELITE';
color: $green;
text-align: center;
transform: scaleX(1.2);
transform-origin: 50% 0;
}
}
//right
& > i:nth-of-type(3) {
position: absolute;
right: 0;
top: 0;
& > i {
height: 3vmin;
border-bottom: $line solid $green;
width: 12vmin;
margin-right: 5.55vmin;
position: relative;
}
& > i:before {
color: $red;
transform: translate3d(12.5vmin,.25vmin,0);
}
& > i:nth-of-type(1) > i {
background: $yellow;
width: .75vmin;
height: 1.15vmin;
transform: translate3d(0,.75vmin,0);
@extend %abs;
}
& > i:nth-of-type(2) > i, & > i:nth-of-type(3) > i {
width: .65vmin;
height: 2.5vmin;
transform: translate3d(6vmin,0,0);
@extend %abs;
border-top: .5vmin solid $green;
&:before {
background: $yellow;
width: .65vmin;
height: 2.5vmin;
transform: translate3d(0,0,0);
position: absolute;
top: -($line);
left: 0;
transition: all 2s ease-in-out;
}
}
& > i:nth-of-type(2) > i:before {
transition: all 2s ease-in-out;
}
& > i:nth-of-type(1):before {
content: 'SP';
}
& > i:nth-of-type(2):before {
content: 'RL';
}
& > i:nth-of-type(3):before {
content: 'DC';
}
& > i:nth-of-type(4):before {
content: ' 1';
}
& > i:nth-of-type(5):before {
content: ' 2';
}
& > i:nth-of-type(6):before {
content: ' 3';
}
& > i:nth-of-type(7) {
border-bottom: none;
}
& > i:nth-of-type(7):before {
content: ' 4';
}
& > i:nth-of-type(4):before, & > i:nth-of-type(5):before, & > i:nth-of-type(6):before, & > i:nth-of-type(7):before {
transform: translate3d(13.5vmin,0,0);
}
//animate
& > i:nth-of-type(4) > i:nth-of-type(1),
& > i:nth-of-type(4) > i:nth-of-type(2),
& > i:nth-of-type(4) > i:nth-of-type(3),
& > i:nth-of-type(5) > i:nth-of-type(1),
& > i:nth-of-type(5) > i:nth-of-type(2),
& > i:nth-of-type(6) > i:nth-of-type(1),
& > i:nth-of-type(6) > i:nth-of-type(2),
& > i:nth-of-type(7) > i:nth-of-type(1),
& > i:nth-of-type(7) > i:nth-of-type(2) {
background: $yellow;
width: 0;
height: 1.25vmin;
transform: translate3d(0,.65vmin,0);
position: absolute;
left: 0;
top: 0;
}
& > i:nth-of-type(4) > i:nth-of-type(3) {
box-shadow: 2vmin 0 0 #000
}
& > i:nth-of-type(7) > i:nth-of-type(1) {
animation: sheilds .5s forwards ease-in-out;
}
& > i:nth-of-type(6) > i:nth-of-type(1) {
animation: sheilds .5s forwards ease-in-out .5s;
}
& > i:nth-of-type(5) > i:nth-of-type(1) {
animation: sheilds .5s forwards ease-in-out 1s;
}
& > i:nth-of-type(4) > i:nth-of-type(1) {
animation: start .5s forwards ease-in-out 1.5s;
}
@-webkit-keyframes sheilds {
100% {
width: 12vmin;
}
}
//sp
& > i:nth-of-type(1):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(.75vmin,-1vmin,0);
box-shadow: 1.45vmin 0 0 $green, 2.85vmin 0 0 $green, 4.35vmin 0 0 $green, 5.85vmin 0 0 $green, 7.35vmin 0 0 $green, 8.85vmin 0 0 $green, 10.35vmin 0 0 $green;
}
//rl
& > i:nth-of-type(2):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(1.5vmin,-1vmin,0);
box-shadow: 1.45vmin 0 0 $green, 2.85vmin 0 0 $green, 4.35vmin 0 0 $green, 5.85vmin 0 0 $green, 7.35vmin 0 0 $green, 8.85vmin 0 0 $green;
}
//dc
& > i:nth-of-type(3):after {
background: $green;
width: .75vmin;
height: .5vmin;
transform: translate3d(1.45vmin,-1vmin,0);
box-shadow: 2.25vmin 0 0 $green, 4.35vmin 0 0 $green, 6.75vmin 0 0 $green, 9vmin 0 0 $green;
}
}
}
}
}
#start:checked ~ #basic > i {
//cobra mk III
&:nth-of-type(2) {
width: 100%;
height: 72vmin;
overflow: hidden;
&, & > i {
position: absolute;
top: 0;
left: 0;
}
& > i:nth-of-type(1) {
width: 100%;
height: 100%;
&:before {
content: '---- E L I T E ----';
width: 100%;
font-size: 3vmin;
text-align: center;
padding: 3vmin;
}
&:after {
white-space: pre;
content: 'Load New Commander (Y/N)? \A (C) Acornsoft 1984';
width: 100%;
font-size: 3vmin;
text-align: center;
padding: 3vmin;
transform: translate3d(0,47vmin,0);
line-height: 6vmin;
}
}
& > i:nth-of-type(2) {
width: 0;
height: 0;
position: absolute;
left: 0;
top: 45%;
right: 0;
margin: auto;
perspective: 100vmin;
& i, & i:before, & i:after {
@extend %abs;
transform-style: preserve-3d;
}
//Centre
& > i:nth-of-type(1) {
width: 20vmin;
height: 40vmin;
transform: translate3d(-10vmin,0,-4000vmin) rotateX(0deg) rotateY(0deg) scale(0);
animation: cobrarotate 50s infinite alternate linear;
@-webkit-keyframes cobrarotate {
10% {
transform: translate3d(-10vmin,-20vmin,-20vmin) rotateX(1000deg) rotateY(500deg) scale(1);
}
100% {
transform: translate3d(-10vmin,-20vmin,-20vmin) rotateX(-2000deg) rotateY(-1000deg) scale(1);
}
}
& > i, & > i:before, & > i:after {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
//bottom
& > i:nth-of-type(13) {
/*border: $line solid #fff;*/
width: 20vmin;
height: 40vmin;
transform: translate3d(0,0,0) rotateY(180deg);
box-shadow: inset 0 0 0 $line;
&:before {
background: #fff;
width: 100%;
height: $line;
transform: translate3d(0,0,0) rotateX(170deg);
}
&:after {
background: #fff;
width: 100%;
height: $line;
transform: translate3d(0,39.55vmin,-.3vmin) rotateX(-90deg);
}
}
//bottomleft
& > i:nth-of-type(1) {
border-bottom: $line solid #fff;
border-left: $line solid #fff;
width: 30vmin;
height: 10vmin;
transform: translate3d(-28.5vmin, 29.9vmin, 2.5vmin) rotateY(190deg) skewX(10deg) scaleX(-1);
&:before {
border-left: $line solid #fff;
width: 37.5vmin;
height: 37.5vmin;
transform: translate3d(7vmin,-22.5vmin,0) rotate(37deg);
}
&:after {
border-bottom: $line solid #fff;
width: 100%;
height: 1vmin;
transform: translate3d(-.25vmin, 9.5vmin, 0) rotateX(-90deg);
}
}
//bottomright
& > i:nth-of-type(2) {
border-bottom: $line solid #fff;
border-right: $line solid #fff;
width: 30vmin;
height: 10vmin;
transform: translate3d(18.75vmin, 29.9vmin, 2.5vmin) rotateY(170deg) skewX(-10deg) scaleX(-1);
&:before {
border-right: $line solid #fff;
width: 37.5vmin;
height: 37.5vmin;
transform: translate3d(-15vmin,-22.5vmin,0) rotate(-37deg);
}
&:after {
border-bottom: $line solid #fff;
width: 100%;
height: 1vmin;
transform: translate3d(0, 9.5vmin, 0) rotateX(-90deg);
}
}
//back
//bigthrust1
& > i:nth-of-type(3) {
border-top: $line solid #fff;
border-left: $line solid #fff;
width: 9vmin;
height: 5vmin;
transform: translate3d(-3vmin,37vmin,6vmin) rotateX(-90deg) skewY(-5deg);
&:before {
border-bottom: $line solid #fff;
border-right: $line solid #fff;
width: 9vmin;
height: 7vmin;
transform: translate3d(-0.5vmin, -1vmin, 0) skewY(10deg);
}
}
//bigthrust2
& > i:nth-of-type(4) {
border-top: $line solid #fff;
border-left: $line solid #fff;
width: 9vmin;
height: 7vmin;
transform: translate3d(13.5vmin,36vmin,5vmin) rotateX(-90deg) skewY(5deg);
&:before {
border-bottom: $line solid #fff;
border-right: $line solid #fff;
width: 9vmin;
height: 5vmin;
transform: translate3d(-.5vmin, 1vmin, 0) skewY(-10deg);
}
}
//smthrust1
& > i:nth-of-type(5) {
border-top: $line solid #fff;
border-right: $line solid #fff;
width: 4vmin;
height: 2vmin;
transform: translate3d(-18vmin, 39vmin, 5.5vmin) rotateX(-90deg) skewY(-10deg);
&:before {
border-bottom: $line solid #fff;
width: 4vmin;
height: 2vmin;
transform: translate3d(0,-.75vmin,0) skewY(20deg);
}
}
//smthrust2
& > i:nth-of-type(6) {
border-bottom: $line solid #fff;
border-left: $line solid #fff;
width: 4vmin;
height: 2vmin;
transform: translate3d(33vmin,39vmin,6vmin) rotateX(-90deg) skewY(-10deg);
&:before {
border-top: $line solid #fff;
width: 4vmin;
height: 2vmin;
transform: translate3d(-.5vmin,.5vmin,0) skewY(20deg);
}
}
//top
//left left
& > i:nth-of-type(7) {
border-bottom: $line solid #fff;
border-left: $line solid #fff;
width: 12vmin;
height: 10.25vmin;
transform: translate3d(-28.5vmin, 29.75vmin, 7vmin) skewX(-10deg) rotateX(0deg) rotateY(-18deg);
&:before {
border-top: $line solid #fff;
width: 15vmin;
height: 15vmin;
transform: translate3d(-6.5vmin,3vmin,0) rotate(40deg);
}
&:after {
width: 100%;
height: $line;
transform: translate3d(-($line), 10vmin, 0) rotateX(-90deg);
background: #fff;
}
}
//left fixers
& > i:nth-of-type(15) {
border-bottom: $line solid #fff;
width: 14vmin;
height: 0;
transform: translate3d(-29.5vmin, 34.5vmin, 7vmin) rotateX(20deg) rotate(48deg);
&:before {
border-bottom: $line solid #fff;
width: 22vmin;
height: 0;
transform: translate3d(-4vmin, -37vmin, 5.5vmin) rotateY(-2.5deg) rotate(15deg) rotateX(-10deg);
}
}
//left middle back
& > i:nth-of-type(8) {
border-bottom: $line solid #fff;
border-right: $line solid #fff;
width: 28.5vmin;
height: 22vmin;
transform: translate3d(-18vmin, 18.15vmin, 8.25vmin) rotateY(-5deg) rotateX(10deg);
&:before {
border-top: $line solid #fff;
width: 36vmin;
height: 36vmin;
transform: translate3d(7vmin,7vmin,0) rotate(-38deg);
}
&:after {
width: 28.5vmin;
height: $line;
transform: translate3d(-.25vmin, 21.75vmin, -.25vmin) rotateX(-90deg);
background: #fff;
}
}
//right middle back
& > i:nth-of-type(9) {
border-bottom: $line solid #fff;
border-left: $line solid #fff;
width: 28.5vmin;
height: 22vmin;
transform: translate3d(10vmin, 18.15vmin, 8.25vmin) rotateY(5deg) rotateX(10deg);
&:before {
border-top: $line solid #fff;
width: 35vmin;
height: 35vmin;
transform: translate3d(-14.5vmin, 7vmin, 0) rotate(38deg);
}
&:after {
width: 28.5vmin;
height: $line;
transform: translate3d(-.5vmin, 21.75vmin, -.25vmin) rotateX(-90deg);
background: #fff;
}
}
//right right
& > i:nth-of-type(10) {
border-bottom: $line solid #fff;
border-right: $line solid #fff;
width: 12vmin;
height: 10.25vmin;
transform: translate3d(36.75vmin, 29.75vmin, 7vmin) skewX(10deg) rotateX(0deg) rotateY(18deg);
&:before {
border-top: $line solid #fff;
width: 15vmin;
height: 15vmin;
transform: translate3d(3vmin,3vmin,0) rotate(-40deg);
}
&:after {
width: 100%;
height: $line;
transform: translate3d(0, 10vmin,-.05vmin) rotateX(-90deg);
background: #fff;
}
}
//right fixers
& > i:nth-of-type(16) {
border-bottom: $line solid #fff;
width: 14vmin;
height: 0;
transform: translate3d(35.75vmin, 34.5vmin, 7vmin) rotateX(20deg) rotate(-48deg);
&:before {
border-bottom: $line solid #fff;
width: 22vmin;
height: 0;
transform: translate3d(-4vmin, -37vmin, 5.5vmin) rotateY(2.5deg) rotate(-15deg) rotateX(10deg);
}
}
//front
& > i:nth-of-type(11) {
border-bottom: $line solid #fff;
width: 22.5vmin;
height: 22.5vmin;
transform: translate3d(4vmin, -6vmin, 2vmin) rotateX(23deg) rotate(63deg);
overflow: hidden;
&:before {
border-right: $line solid #fff;
width: 22vmin;
height: 22vmin;
transform: translate3d(-4vmin, 9.5vmin, 0) rotate(-37deg);
}
}
//long left
& > i:nth-of-type(12) {
border-left: $line solid #fff;
height: 44.5vmin;
transform: translate3d(-9vmin, -2.5vmin, 4.5vmin) rotateX(13deg) rotate(24deg);
&:before {
border-right: $line solid #fff;
height: 44.5vmin;
transform: translate3d(34vmin, -15vmin,0) rotate(-48deg);
}
}
//top sides
& > i:nth-of-type(14) {
background: #fff;
height: $line;
width: 41vmin;
transform: translate3d(-34.1vmin, 15vmin, 2.5vmin) rotateX(10deg) rotate(-48deg);
&:before {
background: #fff;
height: $line;
width: 41vmin;
transform: translate3d(31.5vmin, 35vmin, 0) rotate(95deg);
}
}
}
}
}
}
//the end
#start ~ #basic > i:nth-of-type(3) {
opacity: 0;
}
//_2krait.scss
//welcome screen 2
$ship1: radial-gradient( #0a0a0a, #000);
$ship2: radial-gradient( #171717, #000);
$ship3: radial-gradient( #1e1e1e, #000);
$engine: rgba(#555,.1);
#n:checked ~ #basic > i {
//krait
&:nth-of-type(2) {
width: 100%;
height: 72vmin;
overflow: hidden;
&, & > i {
position: absolute;
top: 0;
left: 0;
}
& > i:nth-of-type(1) {
width: 100%;
height: 100%;
&:before {
content: '---- E L I T E ----';
width: 100%;
font-size: 3vmin;
text-align: center;
padding: 3vmin;
}
&:after {
white-space: pre;
content: " Welcome Commander \A Press '1' to Play, '2' to Exit";
width: 100%;
font-size: 3vmin;
text-align: center;
padding: 3vmin;
transform: translate3d(0,47vmin,0);
line-height: 6vmin;
}
}
& > i:nth-of-type(2) {
width: 0;
height: 0;
position: absolute;
left: 0;
top: 45%;
right: 0;
margin: auto;
perspective: 100vmin;
& i, & i:before, & i:after {
@extend %abs;
transform-style: preserve-3d;
}
//Centre
& > i:nth-of-type(1) {
width: 44vmin;
height: 40vmin;
transform: translate3d(-20vmin,0vmin,-4000vmin) rotateX(0deg) rotateY(0deg) scale(0);
/*transform: translate3d(-20vmin,-10vmin,-20vmin) rotateX(1000deg) rotateY(500deg) scale(1);*/
//
//
//
animation: kraitrotate 50s infinite alternate linear;
@-webkit-keyframes kraitrotate {
10% {
transform: translate3d(-20vmin,-20vmin,-30vmin) rotateX(1000deg) rotateY(500deg) scale(1);
}
100% {
transform: translate3d(-20vmin,-20vmin,-30vmin) rotateX(-2000deg) rotateY(-1000deg) scale(1);
}
/*100% {
transform: translate3d(-20vmin,-10vmin,0vmin) rotateX(-180deg) scale(1);
}*/
}
& > i, & > i:after, & > i:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
//bottomleft
& > i:nth-of-type(1) {
width: 22vmin;
height: 40vmin;
overflow: hidden;
transform: translate3d(.25vmin, 0, 1.75vmin) rotateY(-10deg) rotateX(-10deg) rotate(1.75deg);
&:before {
width: 38vmin;
height: 38vmin;
border: $line solid #fff;
transform: translate3d(9.5vmin, -1.25vmin, 0) rotate(-27deg) skew(10deg);
background: #000;
background: $ship3;
}
&:after {
height: 100%;
width: 1vmin;
background: #fff;
transform: translate3d(21.75vmin,0, 0);
}
}
//bottomright
& > i:nth-of-type(2) {
width: 22vmin;
height: 40vmin;
overflow: hidden;
transform: translate3d(21.75vmin,0, 1.75vmin) rotateY(10deg) rotateX(-10deg) rotate(-1.75deg);
&:before {
width: 38vmin;
height: 38vmin;
border: $line solid #fff;
transform: translate3d(-25.45vmin, -1.25vmin, 0) rotate(27deg) skew(-10deg);
background: #000;
background: $ship2;
}
&:after {
height: 100%;
width: .25vmin;
background: #fff;
}
}
//topleft
& > i:nth-of-type(3) {
width: 22vmin;
height: 40vmin;
overflow: hidden;
transform: translate3d(.25vmin, 0, -1.75vmin) rotateY(10deg) rotateX(-170deg) rotate(-1.75deg);
&:before {
width: 38vmin;
height: 38vmin;
border: 0.5vmin solid #fff;
transform: translate3d(9.5vmin, 3vmin, 0) rotate(27deg) skew(-10deg);
background: #000;
background: $ship3;
}
&:after {
height: 100%;
width: 1vmin;
background: #fff;
transform: translate3d(21.75vmin,0, 0);
}
}
//topright
& > i:nth-of-type(4) {
width: 22vmin;
height: 40vmin;
overflow: hidden;
transform: translate3d(21.75vmin,0, -1.75vmin) rotateY(-10deg) rotateX(-170deg) rotate(1.75deg);
&:before {
width: 38vmin;
height: 38vmin;
border: $line solid #fff;
transform: translate3d(-25.45vmin, 3vmin, 0) rotate(-27deg) skew(10deg);
background: #000;
background: $ship2;
}
&:after {
height: 100%;
width: .25vmin;
background: #fff;
}
}
//leftprong
& > i:nth-of-type(5) {
width: 3vmin;
height: 29vmin;
overflow: hidden;
transform: translate3d(-1vmin,11vmin,.75vmin) rotateY(90deg) skewX(-3deg);
border-right: $line solid #fff;
border-top: $line solid #fff;
-webkit-backface-visibility: visible;
backface-visibility: visible;
&:before {
width: 4vmin;
height: 29vmin;
border-left: $line solid #fff;
transform: translate3d(1.5vmin, 0, 0) rotate(0deg) skewX(6deg);
background: #000;
background: $ship2;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
}
//right prong
& > i:nth-of-type(6) {
width: 3vmin;
height: 29vmin;
overflow: hidden;
transform: translate3d(42.25vmin,11vmin,.75vmin) rotateY(90deg) skewX(-3deg);
border-right: $line solid #fff;
border-top: $line solid #fff;
-webkit-backface-visibility: visible;
backface-visibility: visible;
&:before {
width: 4vmin;
height: 29vmin;
border-left: $line solid #fff;
transform: translate3d(1.5vmin, 0, 0) rotate(0deg) skewX(6deg);
background: #000;
background: $ship1;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
}
//back left
& > i:nth-of-type(7) {
width: 24vmin;
height: 14vmin;
overflow: hidden;
transform: translate3d(-.5vmin,-1vmin,2.5vmin) rotateX(90deg) rotateY(-26deg) skewY(-14deg) scaleZ(1);
border-top: $line solid #fff;
&:before {
width: 24vmin;
height: 14vmin;
border-bottom: $line solid #fff;
border-right: $line solid #fff;
transform: translate3d(0, -5.5vmin, 0) rotate(0deg) skewY(26deg);
background: #000;
background: $ship1;
}
&:after {
width: 14vmin;
height: 14vmin;
border: $line solid #fff;
transform: translate3d(20.5vmin, .5vmin, 0) rotate(-14deg) skewX(45deg);
background: $engine;
}
}
//back right
& > i:nth-of-type(8) {
width: 24vmin;
height: 14vmin;
overflow: hidden;
transform: translate3d(21vmin,-1vmin,2.5vmin) rotateX(90deg) rotateY(26deg) skewY(14deg) scaleZ(1);
border-top: $line solid #fff;
&:before {
width: 24vmin;
height: 14vmin;
border-bottom: $line solid #fff;
border-right: $line solid #fff;
transform: translate3d(0, -5.5vmin, 0) rotate(0deg) skewY(-26deg);
background: #000;
}
&:after {
width: 14vmin;
height: 14vmin;
border: $line solid #fff;
transform: translate3d(-11vmin, 1vmin, 0) rotate(12.25deg) skewX(-45deg);
background: $engine;
}
}
//window
& > i:nth-of-type(9) {
width: 10vmin;
height: 10vmin;
overflow: hidden;
transform: translate3d(12vmin,10vmin,-4vmin) rotateY(10deg) rotateX(190deg) rotate(-.75deg) scaleY(-1);
&:before {
width: 20vmin;
height: $line;
transform: translate3d(-3vmin, 5vmin, 0) rotate(50deg);
background: #fff;
}
&:after {
width: 20vmin;
height: $line;
transform: translate3d(0vmin, 2.35vmin, 0) rotate(20deg);
background: #fff;
}
}
& > i:nth-of-type(10) {
width: 10vmin;
height: 10vmin;
overflow: hidden;
transform: translate3d(22vmin,10vmin,-4vmin) rotateY(-10deg) rotateX(190deg) rotate(.75deg) scaleY(-1);
&:before {
width: 20vmin;
height: $line;
transform: translate3d(-5vmin, 3vmin, 0) rotate(-50deg);
background: #fff;
}
&:after {
width: 20vmin;
height: $line;
transform: translate3d(-5vmin, .5vmin, 0) rotate(-20deg);
background: #fff;
}
}
//left side panel
& > i:nth-of-type(11) {
width: 3vmin;
height: 35vmin;
overflow: hidden;
transform: translate3d(10vmin, 7.5vmin, .5vmin) rotateY(90deg) rotateX(37deg) scaleZ(-1) skewX(-1.75deg);
border-right: $line solid #fff;
border-top: $line solid #fff;
&:before {
width: 4vmin;
height: 35vmin;
border-left: $line solid #fff;
transform: translate3d(1vmin, 0, 0) rotate(0deg) skewX(4deg);
background: #000;
background: $ship3;
}
}
//right side panel
& > i:nth-of-type(12) {
width: 3vmin;
height: 35vmin;
overflow: hidden;
transform: translate3d(31vmin, 7.5vmin, .5vmin) rotateY(90deg) rotateX(-37deg) skewX(-1.75deg);
border-right: $line solid #fff;
border-top: $line solid #fff;
&:before {
width: 4vmin;
height: 35vmin;
border-left: $line solid #fff;
transform: translate3d(1vmin, 0, 0) rotate(0deg) skewX(4deg);
background: #000;
}
}
}
}
}
}
//_3profile.scss
//menu screen
#y:checked ~ #basic > i, #n1:checked ~ #basic > i {
&:nth-of-type(1) {
//screen bg
& > i:nth-of-type(1) {
display: none;
& > i:nth-of-type(1) > i:nth-of-type(2) {
transform: scale(0);
}
}
//commander
& > i:nth-of-type(2) {
font-size: 3vmin;
&:before {
content: 'COMMANDER JAMESON';
width: 100%;
line-height: 12vmin;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
& > i:nth-of-type(1) {
width: 100%;
height: $line;
background: #fff;
top: 10vmin;
left: 0;
position: absolute;
&:before {
content: 'Present System: Lave \A Hyperspace System: Zaonce \A Condition: Docked \A Fuel: 7.0 Light Years \A Cash: 100.0 Cr \A Legal Status: Clean \A Rating: Harmless \A \A EQUIPMENT: ';
white-space: pre;
padding: 4vmin 3vmin 0;
line-height: 4vmin;
}
&:after {
content: "Front Pulse Laser \A \A \A \A Press 'L' to Launch";
white-space: pre;
padding: 0 3vmin;
line-height: 4vmin;
text-align: center;
}
}
& > i:nth-of-type(2) {
}
}
//dashboard
& > i:nth-of-type(4) {
//left
& > i:nth-of-type(1) {
//animate
& > i:nth-of-type(3) > *, & > i:nth-of-type(6) > * {
background: $yellow;
width: 0;
height: 1.25vmin;
transform: translate3d(0,.5vmin,0);
}
& > i:nth-of-type(3) > * {
animation: pfuel 1s forwards linear;
}
& > i:nth-of-type(6) > * {
animation: pal 1s forwards linear;
}
@-webkit-keyframes pfuel {
100% {
width: 12vmin;
}
}
@-webkit-keyframes pal {
100% {
width: 5vmin;
}
}
& > i:nth-of-type(7):after {
width: 2vmin;
height: 1.85vmin;
transform: translate3d(3vmin,-.15vmin,0);
animation: missiles .5s forwards linear .5s;
}
@-webkit-keyframes missiles {
0% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
}
49% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
}
50% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
99% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
100% {
box-shadow: inset 0 0 0 2vmin $green, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
}
}
//centre
& > i:nth-of-type(2) {
//radar
& > i:nth-of-type(2) {
& > i:nth-of-type(4) {
animation: radar2 1s forwards linear;
transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
}
@-webkit-keyframes radar2 {
100% {
transform: translate3d(24vmin,-2vmin,0) rotateY(-45deg);
}
}
}
}
}
}
//cobra mk III
&:nth-of-type(2) {
display: none;
}
}
//_4launch.scss
// launch
$pline: .75vmin solid #fff;
$pbg: #000;
$end: 60;
@supports (-webkit-overflow-scrolling: touch) {
$pbg: $none;
}
@-webkit-keyframes planetcloser {
1% {
transform: scale(1) translate3d(0,0,-200vmin);
}
100% {
transform: scale(1) translate3d(0,0,100vmin);
}
}
@-webkit-keyframes planettimer {
99% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
#l:checked ~ #basic > i, #h:checked ~ #basic > i {
/*#start:checked ~ #basic > i {*/
&:nth-of-type(1) {
//screen bg
& > i:nth-of-type(1) {
display: block;
transform-style: preserve-3d;
& > i:nth-of-type(1) {
//planet
transform-style: preserve-3d;
animation: planettimer ($end + s) forwards linear;
& > i:nth-of-type(2) {
display: block;
opacity: 1;
transform: scale(0) translate3d(0,0,-200vmin);
//end-timer
animation: planetcloser ($end + s) forwards linear;
transform-style: preserve-3d;
& > i:nth-of-type(1) {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
transform: translate3d(0,0,0) rotate(20deg) rotateY(0) rotateX(0deg);
animation: planet 60s forwards linear infinite;
transform-style: preserve-3d;
background: $pbg;
box-shadow: inset .75vmin 0 0 #fff, inset -.75vmin 0 0 #fff;
@-webkit-keyframes planet {
100% {
transform: translate3d(0,0,0) rotate(20deg) rotateY(360deg) rotateX(0deg);
}
}
&, i, i:before, i:after {
transform-style: preserve-3d;
}
&:before {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
transform: rotateY(60deg);
background: $pbg;
box-shadow: inset .75vmin 0 0 #fff, inset -.75vmin 0 0 #fff;
}
&:after {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
background: $pbg;
box-shadow: inset .75vmin 0 0 #fff, inset -.75vmin 0 0 #fff;
transform: rotateY(120deg);
}
& > i, & > i:before, & > i:after {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
background: $pbg;
border-left: .25vmin dashed rgba( #fff,.5);
border-right: .25vmin dashed rgba( #fff,.5);
}
& > i:nth-of-type(1) {
transform: translate3d(0,0,0) rotateY(15deg) scale(.99);
transform-style: preserve-3d;
&:before {
transform: rotateY(60deg) scale(.99);
}
&:after {
transform: rotateY(120deg) scale(.99);
}
}
& > i:nth-of-type(2) {
transform: translate3d(0,0,0) rotateY(30deg) scale(.99);
transform-style: preserve-3d;
&:before {
transform: rotateY(60deg) scale(.99);
}
&:after {
transform: rotateY(120deg) scale(.99);
}
}
& > i:nth-of-type(3) {
transform: translate3d(0,0,0) rotateY(45deg) scale(.99);
transform-style: preserve-3d;
&:before {
transform: rotateY(60deg) scale(.99);
}
&:after {
transform: rotateY(120deg) scale(.99);
}
}
}
& > i:nth-of-type(2) {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
transform: translate3d(0,0,0) rotate(20deg) rotateY(0) scale(1.02);
box-shadow: 0 0 10vmin rgba(#fff,.25);
transform-style: preserve-3d;
}
}
//sun
& > i:nth-of-type(3) {
opacity: 0;
}
}
}
//commander
& > i:nth-of-type(2) {
display: none;
}
//launch
& > i:nth-of-type(3) {
width: 100%;
height: 72vmin;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
//launch
& > i:nth-of-type(1) {
transform: scale(0);
animation: launch .5s forwards linear;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 1;
@-webkit-keyframes launch {
100% {
transform: scale(5);
opacity: 0;
}
}
& > i {
width: 50vmin;
height: 26vmin;
border-left: $line solid #fff;
border-right: $line solid #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
&:before, &:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-left: $line solid #fff;
border-right: $line solid #fff;
}
&:before {
transform: rotate(60deg);
}
&:after {
transform: rotate(-60deg);
}
}
& > i:nth-of-type(2) {
transform: scale(.8);
}
& > i:nth-of-type(3) {
transform: scale(.7);
}
& > i:nth-of-type(4) {
transform: scale(.6);
}
& > i:nth-of-type(5) {
transform: scale(.5);
}
& > i:nth-of-type(6) {
transform: scale(.4);
}
& > i:nth-of-type(7) {
transform: scale(1.1);
}
& > i:nth-of-type(8) {
transform: scale(1.2);
}
& > i:nth-of-type(9) {
transform: scale(1.3);
}
& > i:nth-of-type(10) {
transform: scale(1.4);
}
}
& > i:nth-of-type(2) {
/*animation: crosshairs 0s forwards linear ($end + s);*/
opacity: 1;
& > i {
width: 8vmin;
height: .25vmin;
box-shadow: 4vmin 0 0 #ccc, -4vmin 0 0 #ccc;
@extend %centre;
&:after {
height: 8vmin;
width: .25vmin;
box-shadow: 0 4vmin 0 0 #ccc, 0 -4vmin 0 0 #ccc;
@extend %centre;
}
}
}
}
//dashboard
& > i:nth-of-type(4) {
//left
& > i:nth-of-type(1) {
//animate
& > i:nth-of-type(1) {
& > i:nth-of-type(1) {
display: none;
}
& > i:nth-of-type(2) {
animation: fowardshield ($end - 4s) forwards linear;
opacity: 1;
}
@-webkit-keyframes fowardshield {
99% {
width: 11vmin;
background: $yellow;
}
100% {
width: 0vmin;
background: $red;
}
}
}
& > i:nth-of-type(3) > *, & > i:nth-of-type(4) > *, & > i:nth-of-type(5) > *, & > i:nth-of-type(6) > * {
background: $yellow;
width: 0;
height: 1.25vmin;
transform: translate3d(0,.5vmin,0);
animation: start 2s forwards linear;
}
//fv
& > i:nth-of-type(3) > * {
animation: fuel 3s forwards linear;
}
//al
& > i:nth-of-type(6) > * {
animation: al ($end - 4s) forwards linear;
}
//ct
& > i:nth-of-type(4) > * {
animation: ct ($end - 4s) forwards linear;
}
//lt
& > i:nth-of-type(5) > * {
animation: none;
}
@-webkit-keyframes fuel {
100% {
width: 12vmin;
}
}
@-webkit-keyframes al {
1% {
width: 3vmin;
}
100% {
width: 0vmin;
}
}
@-webkit-keyframes ct {
100% {
width: 4vmin;
}
}
& > i:nth-of-type(7):after {
width: 2vmin;
height: 1.85vmin;
transform: translate3d(3vmin,-.15vmin,0);
animation: missiles .5s forwards linear .5s;
animation-iteration-count: 1;
}
@-webkit-keyframes missiles {
0% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
}
49% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
}
50% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
99% {
box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
100% {
box-shadow: inset 0 0 0 2vmin $green, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
}
}
//centre
& > i:nth-of-type(2) {
//radar
//proximity
& > i:nth-of-type(1) {
width: 8.5vmin;
height: 8.5vmin;
position: absolute;
right: 0;
top: 0;
overflow: hidden;
border-radius: 0 0 0 4vmin;
&:before {
@extend %abs;
width: 100%;
height: 100%;
box-shadow: 0 0 0 10vmin $red, inset 0 0 0 $line $yellow;
border-radius: 4vmin;
}
&:after {
@extend %abs;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 $line $yellow;
border-radius: 0 0 0 4vmin;
}
& > i:nth-of-type(1) {
width: 1.5vmin;
height: $line;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 1vmin;
background: $red;
box-shadow: 0 1vmin 0 0 $red, 0 2vmin 0 0 $red,0 4vmin 0 0 $red,0 5vmin 0 0 $red,0 6vmin 0 0 $red;
&:before {
width: .75vmin;
height: $line;
position: absolute;
left: -.75vmin;
margin: auto;
top: 3vmin;
background: $red;
box-shadow: -1.5vmin 0 0 0 $red,2.25vmin 0 0 0 $red,3.75vmin 0 0 0 $red;
}
}
& > i:nth-of-type(2) {
background: $green;
width: 2vmin;
height: $line;
@extend %centre;
transition: all 2s ease-in-out;
}
& > i:nth-of-type(3) {
transition: all 2s ease-in-out;
width: 8vmin;
height: 8vmin;
@extend %centre;
transform: translate3d(0,0,0);
&:before {
background: $yellow;
width: 2vmin;
height: $line;
transition: all 2s ease-in-out;
transform: translate3d(2vmin,1.5vmin,0) rotate(0deg);
opacity: 0;
}
}
}
//radar
& > i:nth-of-type(2) {
& > i:nth-of-type(4) {
animation: radar2 1s forwards linear;
transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
}
@-webkit-keyframes radar2 {
100% {
transform: translate3d(24vmin,-2vmin,0) rotateY(-45deg);
}
}
& > i:nth-of-type(5) {
position: absolute;
top: 0;
left: 0;
width: 2vmin;
height: 4vmin;
border-bottom: 2vmin solid $green;
border-left: $line solid $green;
transform: translate3d(50vmin,20vmin,0) rotateY(-45deg);
animation: gradarblob1 20s forwards linear 20s;
}
@-webkit-keyframes gradarblob1 {
100% {
transform: translate3d(-10vmin,70vmin,0) rotateY(-45deg);
height: 0vmin;
}
}
}
//spacestationzone
& > i:nth-of-type(4) {
position: absolute;
right: 3vmin;
bottom: 3vmin;
border: 1vmin solid $yellow;
border-left: none;
height: 2.25vmin;
width: 3vmin;
&:before {
@extend %abs;
border: 1vmin solid $yellow;
border-right: none;
border-bottom: none;
height: 2.25vmin;
width: 3vmin;
transform: translate3d(0,-2.25vmin,0);
}
}
}
//right
& > i:nth-of-type(3) {
//sp
& > i:nth-of-type(1) > i {
animation: none;
width: 5vmin;
transition: all 2s ease-in-out;
}
//energy bank
& > i:nth-of-type(4) > i:nth-of-type(1), & > i:nth-of-type(5) > i:nth-of-type(1), & > i:nth-of-type(6) > i:nth-of-type(1), & > i:nth-of-type(7) > i:nth-of-type(1) {
opacity: 0;
}
& > i:nth-of-type(4) > i:nth-of-type(2) {
opacity: 1;
width: 11vmin;
//end-timer
animation: depletebank1 ($end - 3s) forwards linear;
}
& > i:nth-of-type(5) > i:nth-of-type(2),
& > i:nth-of-type(6) > i:nth-of-type(2),
& > i:nth-of-type(7) > i:nth-of-type(2) {
opacity: 1;
width: 12vmin;
}
& > i:nth-of-type(5) > i:nth-of-type(2) {
//end-timer
animation: depletebank2 ($end - 2s) forwards linear;
}
& > i:nth-of-type(6) > i:nth-of-type(2) {
//end-timer
animation: depletebank2 ($end - 1s) forwards linear;
}
& > i:nth-of-type(7) > i:nth-of-type(2) {
//end-timer
animation: depletebank2 ($end + s) forwards linear;
}
@-webkit-keyframes depletebank1 {
98% {
background: $yellow;
width: 11vmin;
}
99% {
background: $red;
width: 11vmin;
}
100% {
background: $red;
width: 0;
}
}
@-webkit-keyframes depletebank2 {
98% {
background: $yellow;
width: 12vmin;
}
99% {
background: $red;
width: 12vmin;
}
100% {
background: $red;
width: 0;
}
}
}
}
}
//cobra mk III
&:nth-of-type(2) {
display: none;
}
}
//_5hyperspace.scss
// hyperspace
$hend: 40;
#h:checked ~ #basic > i {
/*#start:checked ~ #basic > i {*/
&:nth-of-type(1) {
//screen bg
& > i:nth-of-type(1) {
& > i:nth-of-type(1) {
//planet
/*planet*/
animation: hplanettimer ($hend + s) forwards linear;
@-webkit-keyframes hplanettimer {
99% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
& > i:nth-of-type(2) {
transition: all 0s linear 10s;
opacity: 0;
}
& > i:nth-of-type(3) {
//hyperspacedelay
transition: all 2s linear 11s;
display: block;
opacity: 1;
transform: scale(0) translate3d(0,0,-200vmin);
//end-timer
animation: suncloser ($hend + s) forwards linear 10s;
/*perspective: 100vmin;*/
transform-style: preserve-3d;
@-webkit-keyframes suncloser {
3% {
transform: scale(0) translate3d(0,0,-200vmin);
opacity: 1;
}
4% {
transform: scale(1) translate3d(0,0,-200vmin);
}
100% {
transform: scale(1) translate3d(0,0,100vmin);
}
}
& > i:nth-of-type(1) {
position: absolute;
left: -10vmin;
right: -10vmin;
top: 0;
bottom: 0;
margin: auto;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
transform: translate3d(0,0,0);
transform-style: preserve-3d;
background: #fff;
background: repeating-linear-gradient( #fff, #fff .5vmin, $none .5vmin, $none 1.5vmin );
&:before {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
transform: translate3d(-2vmin,0,0);
background: repeating-linear-gradient( $none, $none 1vmin, #fff 1vmin, #fff 1.5vmin );
animation: sun 1s alternate linear infinite;
}
&:after {
@extend %centre;
width: 100vmin;
height: 100vmin;
border-radius: 50%;
transform: translate3d(-2vmin,0,0);
background: repeating-linear-gradient($none, $none .5vmin, #fff .5vmin, #fff 1vmin, $none 1vmin, $none 1.5vmin );
animation: sun 1s alternate-reverse linear infinite;
}
}
@-webkit-keyframes sun {
100% {
transform: translate3d(2vmin,0,0);
}
}
}
}
}
//launch
& > i:nth-of-type(3) {
width: 100%;
height: 72vmin;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
//launch
& > i:nth-of-type(1) {
transform: scale(0);
//hyperspacedelay
animation: hyperspace 3s forwards linear 10s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
@-webkit-keyframes hyperspace {
0% {
transform: scale(.75);
opacity: 1;
}
100% {
transform: scale(5);
opacity: 0;
}
}
& > i {
width: 50vmin;
height: 26vmin;
border-left: $line solid #fff;
border-right: $line solid #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
&:before, &:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-left: $line solid #fff;
border-right: $line solid #fff;
}
&:before {
transform: rotate(60deg);
}
&:after {
transform: rotate(-60deg);
}
}
& > i:nth-of-type(2) {
transform: scale(.8);
}
& > i:nth-of-type(3) {
transform: scale(.7);
}
& > i:nth-of-type(4) {
transform: scale(.6);
}
& > i:nth-of-type(5) {
transform: scale(.5);
}
& > i:nth-of-type(6) {
transform: scale(.4);
}
& > i:nth-of-type(7) {
transform: scale(1.1);
}
& > i:nth-of-type(8) {
transform: scale(1.2);
}
& > i:nth-of-type(9) {
transform: scale(1.3);
}
& > i:nth-of-type(10) {
transform: scale(1.4);
}
}
& > i:nth-of-type(4) {
font-size: 3vmin;
& > i:nth-of-type(1) {
& > i:before, & > i:after {
padding: 3vmin;
@extend %abs;
opacity: 0;
}
& > i:nth-of-type(1):before {
content: '10';
animation: countdown 1s forwards linear;
}
& > i:nth-of-type(1):after {
content: '9';
animation: countdown 1s forwards linear 1s;
}
& > i:nth-of-type(2):before {
content: '8';
animation: countdown 1s forwards linear 2s;
}
& > i:nth-of-type(2):after {
content: '7';
animation: countdown 1s forwards linear 3s;
}
& > i:nth-of-type(3):before {
content: '6';
animation: countdown 1s forwards linear 4s;
}
& > i:nth-of-type(3):after {
content: '5';
animation: countdown 1s forwards linear 5s;
}
& > i:nth-of-type(4):before {
content: '4';
animation: countdown 1s forwards linear 6s;
}
& > i:nth-of-type(4):after {
content: '3';
animation: countdown 1s forwards linear 7s;
}
& > i:nth-of-type(5):before {
content: '2';
animation: countdown 1s forwards linear 8s;
}
& > i:nth-of-type(5):after {
content: '1';
animation: countdown 1s forwards linear 9s;
}
}
& > i:nth-of-type(2):before {
content: 'HYPERSPACE - ZAONCE';
transform: translate3d(0,66vmin,0);
width: 100%;
text-align: center;
animation: finaldestination 10s forwards linear;
}
@-webkit-keyframes countdown {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes finaldestination {
89% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
}
//dashboard
& > i:nth-of-type(4) {
//left
& > i:nth-of-type(1) {
> i:nth-of-type(1) > i:nth-of-type(2) {
animation: hfowardshield ($hend - 4s) forwards linear 10s;
}
@-webkit-keyframes hfowardshield {
99% {
width: 11vmin;
background: $yellow;
}
100% {
width: 0vmin;
background: $red;
}
}
& > i:nth-of-type(3) > *, & > i:nth-of-type(6) > *, & > i:nth-of-type(4) > * {
transition: all 0s linear 10s !important;
}
& > i:nth-of-type(3) > i:nth-of-type(1), & > i:nth-of-type(6) > i:nth-of-type(1), & > i:nth-of-type(4) > i:nth-of-type(1) {
opacity: 0;
}
& > i:nth-of-type(3) > i:nth-of-type(2), & > i:nth-of-type(6) > i:nth-of-type(2), & > i:nth-of-type(4) > i:nth-of-type(2) {
opacity: 1;
}
//fv
//fv
//fv
& > i:nth-of-type(3) > i:nth-of-type(2) {
animation: hfuel 3s forwards linear 10s;
width: 12vmin;
}
//al
//al
//al
& > i:nth-of-type(6) > i:nth-of-type(2) {
animation: hal ($hend - 5s) forwards linear 10s;
width: 0vmin;
}
//ct
//ct
//ct
& > i:nth-of-type(4) > i:nth-of-type(2) {
animation: hct ($hend - 5s) forwards linear 10s;
width: 0vmin;
}
& > i:nth-of-type(4) > i:nth-of-type(2):after {
width: 100%;
height: 100%;
background: $red;
opacity: 0;
animation: hct2 ($hend - 5s) forwards linear 10s;
}
//lt
//lt
//lt
& > i:nth-of-type(5) > * {
animation: none;
}
@-webkit-keyframes hfuel {
100% {
width: 1vmin;
}
}
@-webkit-keyframes hal {
1% {
width: 3vmin;
}
100% {
width: 0vmin;
}
}
@-webkit-keyframes hct {
100% {
width: 12vmin;
background: $red !important;
}
}
@-webkit-keyframes hct2 {
85% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
//centre
& > i:nth-of-type(2) {
//proximity
& > i:nth-of-type(1) {
& > i:nth-of-type(2) {
animation: hpdelayp 0s forwards linear 10s;
}
@-webkit-keyframes hpdelayp {
100% {
opacity: 0;
}
}
& > i:nth-of-type(3):before {
animation: hpdelays 0s forwards linear 10s;
}
@-webkit-keyframes hpdelays {
100% {
opacity: 1;
}
}
}
//radar
& > i:nth-of-type(2) {
& > i:nth-of-type(5) {
position: absolute;
top: 0;
left: 0;
width: 2vmin;
height: 2vmin;
border-bottom: 2vmin solid $green;
transform: translate3d(-10vmin,20vmin,0) rotateY(-45deg);
animation: gradarblob2 20s forwards linear 20s;
}
@-webkit-keyframes gradarblob2 {
100% {
transform: translate3d(100vmin,70vmin,0) rotateY(-45deg);
}
}
}
//spacestationzone
& > i:nth-of-type(4) {
transition: all 0s linear 10s;
opacity: 0;
}
}
//right
& > i:nth-of-type(3) {
& > i:nth-of-type(4) > i:nth-of-type(2) {
//end-timer
animation: hdepletebank1 ($hend - 3s) forwards linear 10s;
}
& > i:nth-of-type(5) > i:nth-of-type(2) {
//end-timer
animation: hdepletebank2 ($hend - 2s) forwards linear 10s;
}
& > i:nth-of-type(6) > i:nth-of-type(2) {
//end-timer
animation: hdepletebank2 ($hend - 1s) forwards linear 10s;
}
& > i:nth-of-type(7) > i:nth-of-type(2) {
//end-timer
animation: hdepletebank2 ($hend + s) forwards linear 10s;
}
}
}
}
}
@-webkit-keyframes hdepletebank1 {
98% {
background: $yellow;
width: 11vmin;
}
99% {
background: $red;
width: 11vmin;
}
100% {
background: $red;
width: 0;
}
}
@-webkit-keyframes hdepletebank2 {
98% {
background: $yellow;
width: 12vmin;
}
99% {
background: $red;
width: 12vmin;
}
100% {
background: $red;
width: 0;
}
}
//_6movement.scss
// movement
#l:checked ~, #h:checked ~ {
// up
// up
// up
#s:checked ~ #basic > i {
&:nth-of-type(1) {
& > i:nth-of-type(1) {
/*animation: starsup 5s forwards ease-in-out;
animation-iteration-count: 1;*/
perspective-origin: 50% 0;
}
@-webkit-keyframes starsup {
10% {
perspective-origin: 50% 0;
}
}
& > i:nth-of-type(2) {
transform: translate3d(0,-30vmin,0);
}
//dashboard
& > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(3) > i:before {
transform: translate3d(-5vmin, 0, 0);
}
& > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
//planet
& > i:nth-of-type(2) {
transform: translate3d(0,-1vmin,0);
}
//sun
& > i:nth-of-type(3) {
transform: translate3d(0,2.5vmin,0);
}
}
}
}
// down
// down
// down
#x:checked ~ #basic > i {
&:nth-of-type(1) {
& > i:nth-of-type(1) {
/*animation: starsdown 5s forwards ease-in-out;
animation-iteration-count: 1;*/
perspective-origin: 50% 100%;
}
@-webkit-keyframes starsdown {
10% {
perspective-origin: 50% 100%;
}
}
& > i:nth-of-type(2) {
transform: translate3d(0,30vmin,0);
}
//dashboard
& > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(3) > i:before {
transform: translate3d(5vmin, 0, 0);
}
& > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
//planet
& > i:nth-of-type(2) {
transform: translate3d(0,1vmin,0);
}
//sun
& > i:nth-of-type(3) {
transform: translate3d(0,.5vmin,0);
}
}
}
}
// left
#left:checked ~ #basic > i {
&:nth-of-type(1) {
& > i:nth-of-type(1) {
& > i:nth-of-type(1) {
transform: rotate(45deg);
}
}
//dashboard
& > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(2) > i:before {
transform: translate3d(-5vmin, 0, 0);
}
& > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
//sun
& > i:nth-of-type(3) {
transform: rotate(45deg);
&:before {
transform: translate3d(2vmin,1.5vmin,0) rotate(-45deg);
}
}
}
}
}
// right
#right:checked ~ #basic > i {
&:nth-of-type(1) {
& > i:nth-of-type(1) {
& > i:nth-of-type(1) {
transform: rotate(-45deg);
}
}
//dashboard
& > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(2) > i:before {
transform: translate3d(5vmin, 0, 0);
}
& > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
//sun
& > i:nth-of-type(3) {
transform: rotate(-45deg);
&:before {
transform: translate3d(2vmin,1.5vmin,0) rotate(45deg);
}
}
}
}
}
// missile
#t:checked ~ #basic > i:nth-of-type(1) > i:nth-of-type(4) > i:nth-of-type(1) > i:nth-of-type(7):after {
animation: target 60s forwards linear;
}
@-webkit-keyframes target {
0% {
box-shadow: inset 0 0 0 2vmin $yellow, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
99% {
box-shadow: inset 0 0 0 2vmin $yellow, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
100% {
box-shadow: inset 0 0 0 2vmin $green, 3vmin 0 0 $green, 6vmin 0 0 $green;
}
}
// speed up
#speedup:checked ~ #basic > i {
&:nth-of-type(1) {
& > i:nth-of-type(1) {
//stars
& > i:nth-of-type(1) {
//stars
& > i:nth-of-type(1) {
& > i {
animation: stars 5s infinite linear;
}
& > i:nth-of-type(2) {
animation: stars 4.5s infinite linear .5s;
}
& > i:nth-of-type(3) {
animation: stars 4s infinite linear 1s;
}
& > i:nth-of-type(4) {
animation: stars 3.5s infinite linear 1.5s;
}
& > i:nth-of-type(5) {
animation: stars 3s infinite linear 2s;
}
& > i:nth-of-type(6) {
animation: stars 2.5s infinite linear 2.5s;
}
& > i:nth-of-type(7) {
animation: stars 2s infinite linear 3s;
}
& > i:nth-of-type(8) {
animation: stars 1.5s infinite linear 3.5s;
}
& > i:nth-of-type(9) {
animation: stars 1s infinite linear 4s;
}
& > i:nth-of-type(10) {
animation: stars .5s infinite linear 4.5s;
}
}
}
}
//dashboard
& > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(1) > i {
animation: none;
width: 11vmin;
background: $red;
}
}
}
#speeddown:checked ~ #basic > i {
&:nth-of-type(1) {
& > i:nth-of-type(1) {
//stars
& > i:nth-of-type(1) {
//stars
& > i:nth-of-type(1) {
& > i {
animation: stars 20s infinite linear;
}
& > i:nth-of-type(2) {
animation: stars 18s infinite linear 2s;
}
& > i:nth-of-type(3) {
animation: stars 16s infinite linear 4s;
}
& > i:nth-of-type(4) {
animation: stars 14s infinite linear 6s;
}
& > i:nth-of-type(5) {
animation: stars 12s infinite linear 8s;
}
& > i:nth-of-type(6) {
animation: stars 10s infinite linear 10s;
}
& > i:nth-of-type(7) {
animation: stars 8s infinite linear 12s;
}
& > i:nth-of-type(8) {
animation: stars 6s infinite linear 14s;
}
& > i:nth-of-type(9) {
animation: stars 4s infinite linear 16s;
}
& > i:nth-of-type(10) {
animation: stars 2s infinite linear 18s;
}
}
}
}
//dashboard
& > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(1) > i {
animation: none;
width: 1vmin;
}
}
}
//fire
#a:checked ~ #basic > i {
//lasers
&:nth-of-type(1) {
& > i:nth-of-type(3) > i:nth-of-type(3) {
perspective: 10vmin;
perspective-origin: 50% 50%;
& > i {
width: 100vmin;
height: 4000vmin;
position: absolute;
top: -1920vmin;
left: -100vmin;
right: -100vmin;
margin: auto;
transform: translate3d(0, 0, 0) rotateX(164deg);
transform-origin: 50% 50%;
transform-style: preserve-3d;
&:before, &:after {
width: 100vmin;
height: 4000vmin;
@extend %centre;
border-left: 1vmin solid #ccc;
border-right: 1vmin solid #ccc;
}
&:before {
transform: translate3d(0, 3000vmin, -5vmin);
animation: lasers 1s linear;
}
&:after {
transform: translate3d(0, 3000vmin, 0vmin);
animation: lasers2 1s linear;
}
@-webkit-keyframes lasers {
100% {
transform: translate3d(0, -3000vmin, -5vmin);
}
}
@-webkit-keyframes lasers2 {
100% {
transform: translate3d(0, -3000vmin, 0vmin);
}
}
}
}
//dashboard
& > i:nth-of-type(4) {
& > i:nth-of-type(1) > i:nth-of-type(5) > * {
animation: fire 2s ease-in-out;
}
& > i:nth-of-type(3) > i:nth-of-type(4) > i:nth-of-type(3) {
animation: fire2 2s ease-in-out;
}
}
}
}
@-webkit-keyframes fire {
0% {
width: 0vmin;
}
10% {
width: 2vmin;
}
100% {
width: 0vmin;
}
}
@-webkit-keyframes fire2 {
0% {
width: 11vmin;
background: $yellow;
opacity: 1;
}
10% {
width: 10vmin;
background: $red;
}
99% {
width: 11vmin;
background: $yellow;
opacity: 1;
}
100% {
width: 11vmin;
opacity: 0;
}
}
}
//_7gameover.scss
//game over
$hendadd: 10;
#l:checked ~ #basic > i, #h:checked ~ #basic > i {
//cargo
&:nth-of-type(3) {
width: 100%;
height: 72vmin;
overflow: hidden;
opacity: 0;
background: #fff;
border: $line solid #fff;
border-bottom: none;
//end-timer
/*transition: all 0s linear 120s;*/
&, & > i {
position: absolute;
top: 0;
left: 0;
}
& > i:nth-of-type(1) {
width: 100%;
height: 100%;
&:before {
@extend %centre;
content: 'GAME OVER';
width: 100%;
font-size: 3vmin;
text-align: center;
padding: 3vmin;
height: 0;
}
&:after {
content: 'Load New Commander (Y/N)?';
width: 100%;
font-size: 3vmin;
text-align: center;
padding: 3vmin;
transform: translate3d(0,60vmin,0);
line-height: 6vmin;
/*animation: restart 1s forwards linear 123s;*/
opacity: 0;
}
}
& > i:nth-of-type(2) {
width: 0;
height: 0;
position: absolute;
left: 0;
top: 45%;
right: 0;
margin: auto;
perspective: 100vmin;
perspective-origin: 50% 50%;
/*animation: fadecargo 50s forwards linear 120s;*/
opacity: 1;
& i, & i:before, & i:after {
@extend %abs;
transform-style: preserve-3d;
}
& > i > i, & > i > i:before, & > i > i:after {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
//cargo right
& > i:nth-of-type(1) {
width: 20vmin;
height: 40vmin;
transform: translate3d(50vmin,-20vmin,50vmin) rotateX(400deg) rotateY(400deg) rotate(90deg);
opacity: 1;
//box
& > i:nth-of-type(1) {
width: 15vmin;
height: 40vmin;
transform: translate3d(0,0,0) scaleZ(-1);
box-shadow: inset 0 0 0 $line;
background: #000;
&:before {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
transform-origin: 100% 100%;
background: #000;
}
&:after {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(108deg)scaleZ(-1);
transform-origin: 0 0;
background: #000;
}
}
//box
& > i:nth-of-type(2) {
width: 15vmin;
height: 40vmin;
transform: translate3d(6vmin,0,18.5vmin) rotateY(216deg) scaleZ(-1);
box-shadow: inset 0 0 0 $line;
background: #000;
&:before {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
transform-origin: 100% 100%;
background: #000;
}
}
//end
& > i:nth-of-type(3) {
width: 15vmin;
height: 14vmin;
transform: translate3d(0,0,0) rotateX(90deg) skewX(18deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset -.5vmin $line 0 #fff;
&:before {
width: 12.5vmin;
height: 17vmin;
transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset $line -.5vmin 0 #fff;
}
&:after {
width: 14vmin;
height: 15vmin;
transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
background: #000;
transform-origin: 50% 50%;
box-shadow: inset -.5vmin $line 0 #fff;
}
}
//end2
& > i:nth-of-type(4) {
width: 15vmin;
height: 14vmin;
transform: translate3d(0,40vmin,0) rotateX(90deg) skewX(18deg) scaleZ(-1);
background: #000;
transform-origin: 0 0;
box-shadow: inset -.5vmin $line 0 #fff;
&:before {
width: 12.5vmin;
height: 17vmin;
transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset $line -.5vmin 0 #fff;
}
&:after {
width: 14vmin;
height: 15vmin;
transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
background: #000;
transform-origin: 50% 50%;
box-shadow: inset -.5vmin $line 0 #fff;
}
}
}
//cargo2 middle
& > i:nth-of-type(2) {
width: 20vmin;
height: 40vmin;
transform: translate3d(0vmin,0vmin,200vmin) rotateX(2000deg) rotateY(500deg) rotate(60deg);
opacity: 1;
//box
& > i:nth-of-type(1) {
width: 15vmin;
height: 40vmin;
transform: translate3d(0,0,0) scaleZ(-1);
box-shadow: inset 0 0 0 $line;
background: #000;
&:before {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
transform-origin: 100% 100%;
background: #000;
}
&:after {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(108deg)scaleZ(-1);
transform-origin: 0 0;
background: #000;
}
}
//box
& > i:nth-of-type(2) {
width: 15vmin;
height: 40vmin;
transform: translate3d(6vmin,0,18.5vmin) rotateY(216deg) scaleZ(-1);
box-shadow: inset 0 0 0 $line;
background: #000;
&:before {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
transform-origin: 100% 100%;
background: #000;
}
}
//end
& > i:nth-of-type(3) {
width: 15vmin;
height: 14vmin;
transform: translate3d(0,0,0) rotateX(90deg) skewX(18deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset -.5vmin $line 0 #fff;
&:before {
width: 12.5vmin;
height: 17vmin;
transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset $line -.5vmin 0 #fff;
}
&:after {
width: 14vmin;
height: 15vmin;
transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
background: #000;
transform-origin: 50% 50%;
box-shadow: inset -.5vmin $line 0 #fff;
}
}
//end2
& > i:nth-of-type(4) {
width: 15vmin;
height: 14vmin;
transform: translate3d(0,40vmin,0) rotateX(90deg) skewX(18deg) scaleZ(-1);
background: #000;
transform-origin: 0 0;
box-shadow: inset -.5vmin $line 0 #fff;
&:before {
width: 12.5vmin;
height: 17vmin;
transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset $line -.5vmin 0 #fff;
}
&:after {
width: 14vmin;
height: 15vmin;
transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
background: #000;
transform-origin: 50% 50%;
box-shadow: inset -.5vmin $line 0 #fff;
}
}
}
//cargo3 left
& > i:nth-of-type(3) {
width: 20vmin;
height: 40vmin;
transform: translate3d(-100vmin,-20vmin,50vmin) rotateX(1000deg) rotateY(500deg);
opacity: 1;
//box
& > i:nth-of-type(1) {
width: 15vmin;
height: 40vmin;
transform: translate3d(0,0,0) scaleZ(-1);
box-shadow: inset 0 0 0 $line;
background: #000;
&:before {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
transform-origin: 100% 100%;
background: #000;
}
&:after {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(108deg)scaleZ(-1);
transform-origin: 0 0;
background: #000;
}
}
//box
& > i:nth-of-type(2) {
width: 15vmin;
height: 40vmin;
transform: translate3d(6vmin,0,18.5vmin) rotateY(216deg) scaleZ(-1);
box-shadow: inset 0 0 0 $line;
background: #000;
&:before {
box-shadow: inset 0 0 0 $line;
width: 100%;
height: 100%;
transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
transform-origin: 100% 100%;
background: #000;
}
}
//end
& > i:nth-of-type(3) {
width: 15vmin;
height: 14vmin;
transform: translate3d(0,0,0) rotateX(90deg) skewX(18deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset -.5vmin $line 0 #fff;
&:before {
width: 12.5vmin;
height: 17vmin;
transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset $line -.5vmin 0 #fff;
}
&:after {
width: 14vmin;
height: 15vmin;
transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
background: #000;
transform-origin: 50% 50%;
box-shadow: inset -.5vmin $line 0 #fff;
}
}
//end2
& > i:nth-of-type(4) {
width: 15vmin;
height: 14vmin;
transform: translate3d(0,40vmin,0) rotateX(90deg) skewX(18deg) scaleZ(-1);
background: #000;
transform-origin: 0 0;
box-shadow: inset -.5vmin $line 0 #fff;
&:before {
width: 12.5vmin;
height: 17vmin;
transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
background: #000;
transform-origin: 0 0;
box-shadow: inset $line -.5vmin 0 #fff;
}
&:after {
width: 14vmin;
height: 15vmin;
transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
background: #000;
transform-origin: 50% 50%;
box-shadow: inset -.5vmin $line 0 #fff;
}
}
}
//explosion
& > i:nth-of-type(4) {
width: .5vmin;
height: .5vmin;
transform: translate3d(0vmin,0vmin,0) scale(0);
background: #fff;
box-shadow: $explode;
//end-timer
/*animation: explode1 9s forwards ease-out 120s;*/
}
& > i:nth-of-type(5) {
width: .5vmin;
height: .5vmin;
transform: translate3d(0vmin,0vmin,20vmin) rotate(30deg) scale(0);
background: #fff;
box-shadow: $explode;
//end-timer
/*animation: explode2 10s forwards ease-out 120s;*/
}
& > i:nth-of-type(6) {
width: .5vmin;
height: .5vmin;
transform: translate3d(0vmin,0vmin,-30vmin) rotate(60deg) scale(0);
background: #fff;
box-shadow: $explode;
//end-timer
/*animation: explode3 11s forwards ease-out 120s;*/
}
}
}
}
#l:checked ~ #basic > i {
//game over
&:nth-of-type(3) {
/*transition: all 0s linear 120s;*/
animation: restart 1s forwards linear ($end + s);
//restart text
& > i:nth-of-type(1):after {
animation: restart 1s forwards linear ($end + 3s);
}
//cargo
& > i:nth-of-type(2) {
animation: fadecargo 50s forwards linear ($end + s);
//cargo right
& > i:nth-of-type(1) {
animation: cargorotate1 50s forwards linear ($end + s);
}
//cargo middle
& > i:nth-of-type(2) {
animation: cargorotate2 50s forwards linear ($end + s);
}
//cargo left
& > i:nth-of-type(3) {
animation: cargorotate3 50s forwards linear ($end + s);
}
//explode
& > i:nth-of-type(4) {
animation: explode1 9s forwards ease-out ($end + s);
}
//explode
& > i:nth-of-type(5) {
animation: explode2 10s forwards ease-out ($end + s);
}
//explode
& > i:nth-of-type(6) {
animation: explode3 11s forwards ease-out ($end + s);
}
}
}
}
@-webkit-keyframes restart {
100% {
background: #000;
opacity: 1;
}
}
@-webkit-keyframes fadecargo {
100% {
opacity: 0;
}
}
@-webkit-keyframes cargorotate1 {
100% {
transform: translate3d(-10vmin,-20vmin,-6000vmin) rotateX(-2500deg) rotateY(-1500deg);
}
}
@-webkit-keyframes cargorotate2 {
100% {
transform: translate3d(-10vmin,20vmin,-4100vmin) rotateX(-2000deg) rotateY(-1000deg);
}
}
@-webkit-keyframes cargorotate3 {
100% {
transform: translate3d(100vmin,-20vmin,-4000vmin) rotateX(-2000deg) rotateY(-1000deg);
}
}
@-webkit-keyframes explode1 {
20% {
transform: translate3d(0,0,0) scale(1);
opacity: 1;
}
100% {
transform: translate3d(0,0,0) scale(1.75);
opacity: 0;
}
}
@-webkit-keyframes explode2 {
20% {
transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1);
opacity: 1;
}
100% {
transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1.75);
opacity: 0;
}
}
@-webkit-keyframes explode3 {
20% {
transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1);
opacity: 1;
}
100% {
transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1.75);
opacity: 0;
}
}
#h:checked ~ #basic > i {
//game over
&:nth-of-type(3) {
//restart text
animation: hrestart 1s forwards linear ($hend + $hendadd + s);
& > i:nth-of-type(1):after {
animation: hrestart 1s forwards linear ($hend + $hendadd + 3s);
}
//cargo
& > i:nth-of-type(2) {
animation: hfadecargo 50s forwards linear ($hend + $hendadd + s);
//cargo right
& > i:nth-of-type(1) {
animation: hcargorotate1 50s forwards linear ($hend + $hendadd + s);
}
//cargo middle
& > i:nth-of-type(2) {
animation: hcargorotate2 50s forwards linear ($hend + $hendadd + s);
}
//cargo left
& > i:nth-of-type(3) {
animation: hcargorotate3 50s forwards linear ($hend + $hendadd + s);
}
//explode
& > i:nth-of-type(4) {
animation: hexplode1 9s forwards ease-out ($hend + $hendadd + s);
}
//explode
& > i:nth-of-type(5) {
animation: hexplode2 10s forwards ease-out ($hend + $hendadd + s);
}
//explode
& > i:nth-of-type(6) {
animation: hexplode3 11s forwards ease-out ($hend + $hendadd + s);
}
}
}
}
@-webkit-keyframes hrestart {
100% {
background: #000;
opacity: 1;
}
}
@-webkit-keyframes hfadecargo {
100% {
opacity: 0;
}
}
@-webkit-keyframes hcargorotate1 {
100% {
transform: translate3d(-10vmin,-20vmin,-6000vmin) rotateX(-2500deg) rotateY(-1500deg);
/*transform: translate3d(-10vmin,-20vmin,-20vmin) rotateX(180deg) rotateY(-180deg) rotate(90deg);*/
}
}
@-webkit-keyframes hcargorotate2 {
100% {
transform: translate3d(-10vmin,20vmin,-4100vmin) rotateX(-2000deg) rotateY(-1000deg);
}
}
@-webkit-keyframes hcargorotate3 {
100% {
transform: translate3d(100vmin,-20vmin,-4000vmin) rotateX(-2000deg) rotateY(-1000deg);
}
}
@-webkit-keyframes hexplode1 {
20% {
transform: translate3d(0,0,0) scale(1);
opacity: 1;
}
100% {
transform: translate3d(0,0,0) scale(1.75);
opacity: 0;
}
}
@-webkit-keyframes hexplode2 {
20% {
transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1);
opacity: 1;
}
100% {
transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1.75);
opacity: 0;
}
}
@-webkit-keyframes hexplode3 {
20% {
transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1);
opacity: 1;
}
100% {
transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1.75);
opacity: 0;
}
}
!
