AnthonyDuan/taiko-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First upload

Browse Source
This commit is contained in:
Clement Gournay
2015-07-17 17:22:46 +09:00
parent 74af4ade8b
commit 397fe88caa
60 changed files with 27040 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/css/game.css Normal file
View File

@@ -0,0 +1,42 @@
#game{
width:100%;
height:100%;
overflow: hidden;
}
#canvas{
width:100%;
height:100%;
}
#pause-menu{
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:rgba(0,0,0,0.75);
}
#pause-menu button{
width: 90%;
height: 25%;
display: block;
margin: auto auto 30px;
cursor: pointer;
border:5px solid #ae7a26;
background: rgb(255, 255, 255);
color: black;
font-family: TnT;
font-size: 5vmin;
border-radius: 10px;
}
#pause-menu button:hover{
border-color:#fa5d3a;
color:white;
background:#0c6577;
}

28
src/css/loader.css Normal file
View File

@@ -0,0 +1,28 @@
#loader{
width:90%;
height:10%;
border:1px solid black;
position: fixed;
top:50%;
left:5%;
background: rgba(0,0,0,0.65);
}
#loader .progress{
width:0%;
height: 100%;
background: #b52a2a;
opacity: 0.90;
}
#loader .percentage{
margin:auto;
width:100%;
text-align: center;
font-size: 5vmin;
color: white;
position:fixed;
top:53%;
margin-left:-30px;
}

31
src/css/loadsong.css Normal file
View File

@@ -0,0 +1,31 @@
#load-song{
width: 100%;
height: 100%;
margin:0;
padding: 0%;
}
#loading-song{
width:20%;
height:30%;
position: absolute;
top:35%;
left:40%;
background: rgba(0,0,0,0.75);
border-radius: 5px;
border:3px solid white;
}
#loading-don{
position: relative;
width:50%;
height:65%;
top: 12%;
left: 30%;
}
#loading-song p{
position: absolute;
left:28%;
font-size: 3vmin;
}

46
src/css/main.css Normal file
View File

@@ -0,0 +1,46 @@
@font-face {
font-family: 'TnT';
src: url('../../assets/fonts/TnT.ttf') format('truetype');
}
@font-face {
font-family: 'Kozuka';
src: url('../../assets/fonts/KozGoPro-Bold.otf') format('truetype');
}
html, body{
padding: 0;
margin: 0;
width:100%;
height: 100%;
background: black;
color:white;
}
#screen{
width:100%;
height:100%;
margin:0;
padding:0;
background: url('/assets/img/bg-pattern-1.png');
}
#assets{
display:none;
}
.window{
font-size: 14pt;
width: 30%;
height: 30%;
padding: 30px;
color: black;
background: rgba(255, 220, 47, 0.95);
border: 7px outset #f4ae00;
position:relative;
box-shadow: 2px 2px 10px black;
top: 35%;
left: 35%;
}

172
src/css/scoresheet.css Normal file
View File

@@ -0,0 +1,172 @@
#scoresheet{
width:100%;
height:100%;
background: #e84019;
color:black;
font-family: TnT;
background: url('/assets/img/bg-pattern-2.png');
}
#scoresheet h2{
position:absolute;
top:1%;
left:1%;
font-size: 7vmin;
margin:0;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#result-window{
width:70%;
margin:auto;
}
#scoresheet button{
height: 15%;
width:20%;
position: absolute;
display: inline-block;
cursor: pointer;
border:5px solid #ae7a26;
background: rgb(255, 255, 255);
color: black;
font-family: TnT;
font-size: 5vmin;
border-radius: 10px;
outline: none;
top:10%;
}
#replay{
left:1%;
}
#song-select{
left:23%;
}
#scoresheet button:hover{
border-color:#fa5d3a;
color:white;
background:#0c6577;
}
#result-bar{
width: 100%;
height:40%;
position:absolute;
top:10%;
left:0;
border-bottom:10px inset #b6361d;
border-top:5px solid #b23111;
min-height: 200px;
}
#score-cont{
position:absolute;
right:1%;
width:60%;
height:80%;
background:rgba(255,255,255,0.7);
border-radius:15px;
}
#score-hp-bar-bg{
position: absolute;
margin-top:2%;
margin-left:5%;
background: url("/assets/img/hp-bar-bg.png");
background-size: contain;
background-repeat: no-repeat;
}
#score-hp-bar-colour{
position:absolute;
padding: 0;
}
#score-hp-bar-colour img{
position:absolute;
height: 100%;
width: 100%;
margin:0;
padding:0;
}
#score-points{
width:30%;
height:18%;
background:black;
border:5px solid #ae7a26;
border-radius: 10px;
position:absolute;
bottom:5%;
left:5%;
color: white;
font-size: 5vmin;
text-align: right;
padding-right:2%;
}
#score-details{
position: absolute;
right:5%;
width:50%;
height:50%;
color:white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
#score-details td{
font-size: 3vmin;
text-align: right;
}
.floatLeft{
text-align: left !important;
}
.value{
width:25%;
}
#bottom-part{
width:100%;
position: absolute;
-webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46;
-moz-box-shadow: inset 0px 10px 20px -5px #ee6d46;
box-shadow: inset 0px 10px 20px -5px #ee6d46;
}
#score-mark{
position: absolute;
}
.gradient-overlay{
position:absolute;
width:100%;
height:100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(62%,rgba(255,165,100,0.64)), color-stop(63%,rgba(255,165,100,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6ffa564',GradientType=0 ); /* IE6-9 */
}
#top-part{
width:100%;
height:10%;
background:#e84019;
}

112
src/css/songselect.css Normal file
View File

@@ -0,0 +1,112 @@
@-webkit-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:-200px 0;}
}
@keyframes bgscroll {
from {background-position:0 0;}
to {background-position:-200px 0;}
}
#song-select{
width: 100%;
height:100%;
background: url('/assets/img/bg-pattern-1.png');
animation: bgscroll 3s infinite linear;
-webkit-animation: bgscroll 3s infinite linear;
}
#song-container{
width:98%;
height:90%;
padding:1%;
}
ul li{
list-style:none;
}
.difficulties{
float:left;
display:inline-block;
width:70%;
height: 100%;
}
.song-title{
float:right;
display:inline-block;
width:20px;
height: 100%;
padding:10px;
word-wrap: break-word;
font-size: 28pt;
color:white;
margin-right:10px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
.song{
font-size: 14pt;
width: 60px;
margin-right:20px;
height:100%;
color: black;
display: inline-block;
background: rgba(255, 220, 47, 0.90);
border: 7px outset #f4ae00;
box-shadow: 2px 2px 10px black;
overflow: hidden;
cursor: pointer;
}
.opened{
width:375px;
}
.difficulty{
display:none;
cursor:pointer;
width: 35px;
height: 70%;
border-radius: 5px;
display: inline-block;
margin: 5px;
float: left;
background:white;
border:10px solid #ae7a26;
position:relative;
}
.difficulty .diffname{
word-wrap: break-word;
width: 20px;
display: block;
margin: auto;
margin-top:10px;
font-size: 20pt;
}
.difficulty .stars{
position:absolute;
color: #f12b69;
text-align: center;
width:100%;
bottom:10px;
}
.difficulty:hover{
border-color:#fa5d3a;
color:white;
background:#0c6577;
}
.difficulty:hover .diffname{
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.difficulty:hover .stars{
color:white;
}

52
src/css/titlescreen.css Normal file
View File

@@ -0,0 +1,52 @@
@keyframes toggleFade {
0%{
opacity:1;
}
50% {
opacity: 0;
}
}
#title-screen{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display: none;
margin:0px;
cursor: pointer;
background: url('/assets/img/title-screen.png');
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardis<69>e */
}
#logo-big-cont{
position:absolute;
max-width: 654px;
max-height: 300px;
}
#logo-big-cont img{
width:100%;
height:100%;
}
.click-to-continue{
display:block;
font-size: 10vmin;
color:white;
text-align: center;
position:absolute;
bottom:2%;
width:100%;
animation: toggleFade 1s infinite ease-out;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}