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

Clean up classes before exiting them

Browse Source
This commit is contained in:
LoveEevee
2018-09-18 01:37:59 +03:00
parent f19fbf5371
commit e8809285e0
25 changed files with 1183 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/src/css/animations.css
View File

@@ -1,58 +0,0 @@
@keyframes don-normal {
0%{background-position-y:0px}
6.35%{background-position-y:-184px}
7.94%{background-position-y:-368px}
9.52%{background-position-y:-552px}
11.11%{background-position-y:-736px}
12.7%{background-position-y:-920px}
14.29%{background-position-y:-1104px}
15.87%{background-position-y:-1104px}
17.46%{background-position-y:-920px}
19.05%{background-position-y:-736px}
20.63%{background-position-y:-552px}
22.22%{background-position-y:-368px}
23.81%{background-position-y:-184px}
25.4%{background-position-y:0px}
31.75%{background-position-y:-184px}
33.33%{background-position-y:-368px}
34.92%{background-position-y:-552px}
36.51%{background-position-y:-736px}
38.1%{background-position-y:-920px}
39.68%{background-position-y:-1104px}
41.27%{background-position-y:-1104px}
42.86%{background-position-y:-920px}
44.44%{background-position-y:-736px}
46.03%{background-position-y:-552px}
47.62%{background-position-y:-368px}
49.21%{background-position-y:-184px}
50.79%{background-position-y:0px}
57.14%{background-position-y:-184px}
58.73%{background-position-y:-368px}
60.32%{background-position-y:-552px}
61.9%{background-position-y:-736px}
63.49%{background-position-y:-920px}
65.08%{background-position-y:-1104px}
66.67%{background-position-y:-1104px}
68.25%{background-position-y:-920px}
69.84%{background-position-y:-1288px}
71.43%{background-position-y:-1472px}
73.02%{background-position-y:-1656px}
74.6%{background-position-y:-1840px}
76.19%{background-position-y:-2024px}
77.78%{background-position-y:-2024px}
79.37%{background-position-y:-2024px}
80.95%{background-position-y:-2024px}
82.54%{background-position-y:-1840px}
84.13%{background-position-y:-1656px}
85.71%{background-position-y:-1472px}
87.3%{background-position-y:-1288px}
88.89%{background-position-y:-2392px}
90.48%{background-position-y:-2208px}
92.06%{background-position-y:-2208px}
93.65%{background-position-y:-2392px}
95.24%{background-position-y:-2576px}
96.83%{background-position-y:-2760px}
98.41%{background-position-y:-2944px}
100%{background-position-y:-3128px}
}

42
public/src/css/loadsong.css
View File

@@ -1,31 +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);
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 20vw;
height: 15vw;
background: rgba(0, 0, 0, 0.75);
border-radius: 5px;
border:3px solid white;
border: 3px solid white;
color: #fff;
}
#loading-don{
position: relative;
width:50%;
height:65%;
top: 12%;
left: 30%;
width: 50%;
}
.loading-text{
position: relative;
font-size: 1.5vw;
text-align: center;
z-index: 1;
}
#loading-song p{
position: absolute;
left:28%;
font-size: 3vmin;
}

357
public/src/css/main.css
View File

@@ -1,229 +1,190 @@
@font-face {
font-family: 'TnT';
src: url('../../assets/fonts/TnT.ttf') format('truetype');
@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');
@font-face{
font-family: Kozuka;
src: url("/assets/fonts/KozGoPro-Bold.otf") format("truetype");
}
html, body{
padding: 0;
html,
body{
margin: 0;
width:100%;
width: 100%;
height: 100%;
background: black;
color:white;
user-select: none;
background: #fe7839;
user-select: none;
}
#screen{
width:100%;
height:100%;
margin:0;
padding:0;
background: url('/assets/img/bg-pattern-1.png') top center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #fe7839 url("/assets/img/bg-pattern-1.png") top center;
font-family: TnT;
}
#assets{
display:none;
display: none;
}
.window{
width: 60vmin;
height: 23vmin;
padding: 3vmin;
color: black;
background: rgba(255, 220, 47, 0.95);
border: .5vmin outset #f4ae00;
box-shadow: 2px 2px 10px black;
margin: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 60vmin;
height: 23vmin;
padding: 3vmin;
color: black;
background: rgba(255, 220, 47, 0.95);
border: .5vmin outset #f4ae00;
box-shadow: 2px 2px 10px black;
margin: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stroke-main {
font-weight: 300;
.stroke-main{
font-weight: 300;
}
.result-title {
margin-top: 9px !important;
margin-left: 5px !important;
z-index: 1;
.result-title{
margin-top: 9px !important;
margin-left: 5px !important;
z-index: 1;
}
.result-song, .game-song {
position: absolute;
right: 0;
font-size: 5vmin;
margin: 3vmin 3vmin 0px 0px;
color: white;
float: right;
z-index: 1;
font-weight: 300;
.result-song,
.game-song{
position: absolute;
right: 0;
font-size: 5vmin;
margin: 3vmin 3vmin 0px 0px;
color: white;
float: right;
z-index: 1;
font-weight: 300;
}
.stroke-main:before {
content: attr(alt);
left: 0;
z-index: -1;
position: absolute;
-webkit-text-stroke: 0.3em #fb3c0c;
.stroke-main::before{
content: attr(alt);
left: 0;
z-index: -1;
position: absolute;
-webkit-text-stroke: 0.3em #fb3c0c;
}
.stroke-main:after {
content: attr(alt);
left: 0;
z-index: -2;
position: absolute;
-webkit-text-stroke: 0.5em #000;
.stroke-main::after{
content: attr(alt);
left: 0;
z-index: -2;
position: absolute;
-webkit-text-stroke: 0.5em #000;
}
.stroke-sub:before {
content: attr(alt);
position: absolute;
-webkit-text-stroke: 0.25em #000;
left: 0;
z-index: -1;
.stroke-sub::before{
content: attr(alt);
position: absolute;
-webkit-text-stroke: 0.25em #000;
left: 0;
z-index: -1;
}
.songsel-title {
position: absolute;
z-index: 1;
font-size: 7vmin;
margin: 20px;
.don{
background-position-y: 0;
position: absolute;
top: 0px;
}
.click-to-continue:before {
width: 100%;
.alpha-title .song-title-char{
transform: scale(1.3, 1);
font-size: 80%;
line-height: 22px;
}
.don {
background-position-y: 0;
position: absolute;
top: 0px;
.song-title-apos{
padding-left: 4px;
}
.alpha-title .song-title-char {
transform: scale(1.3, 1);
font-size: 80%;
line-height: 22px;
.song-title-char[alt="ぁ"],
.song-title-char[alt="ぃ"],
.song-title-char[alt="ぅ"],
.song-title-char[alt="ぇ"],
.song-title-char[alt="ぉ"],
.song-title-char[alt="ゃ"],
.song-title-char[alt="ゅ"],
.song-title-char[alt="ょ"],
.song-title-char[alt="っ"],
.song-title-char[alt="ァ"],
.song-title-char[alt="ィ"],
.song-title-char[alt="ゥ"],
.song-title-char[alt="ェ"],
.song-title-char[alt="ォ"],
.song-title-char[alt="ャ"],
.song-title-char[alt="ュ"],
.song-title-char[alt="ョ"],
.song-title-char[alt="ッ"]{
margin-top: -6px;
}
.song-title-apos {
padding-left: 4px;
.song-title-char[alt="ー"],
.song-title-char[alt="-"]{
transform: rotate(95deg);
font-size: 90%;
}
.song-title-char[alt="ぁ"],.song-title-char[alt="ぃ"],.song-title-char[alt="ぅ"],.song-title-char[alt="ぇ"],.song-title-char[alt="ぉ"],
.song-title-char[alt="ゃ"],.song-title-char[alt="ゅ"],.song-title-char[alt="ょ"],.song-title-char[alt="っ"],
.song-title-char[alt="ァ"],.song-title-char[alt="ィ"],.song-title-char[alt="ゥ"],.song-title-char[alt="ェ"],.song-title-char[alt="ォ"],
.song-title-char[alt="ャ"],.song-title-char[alt="ュ"],.song-title-char[alt="ョ"],.song-title-char[alt="ッ"]
{
margin-top: -6px;
#tutorial-outer{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.song-title-char[alt="ー"], .song-title-char[alt="-"] {
transform: rotate(95deg);
font-size: 90%;
#tutorial{
background: rgb(246, 234, 212);
color: black;
border: 5px black solid;
border-radius: 10px;
height: 65%;
width: 50%;
padding: 20px;
font-size: 16pt;
position: relative;
}
#tutorial-outer {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
#tutorial-title{
z-index: 1;
position: absolute;
color: white;
top: -25px;
font-size: 26pt;
}
#tutorial {
background: rgb(246, 234, 212);
color: black;
border: 5px black solid;
border-radius: 10px;
height: 65%;
width: 50%;
padding: 20px;
font-size: 16pt;
position: relative;
#tutorial-content{
padding: 15px 30px;
}
#tutorial-title {
z-index: 1;
position: absolute;
color: white;
top: -25px;
font-size: 26pt;
kbd{
font-family: inherit;
padding: 0.1em 0.6em;
border: 1px solid #ccc;
font-size: 13px;
background-color: #f7f7f7;
color: #333;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
border-radius: 3px;
display: inline-block;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap;
}
#tutorial-content {
padding: 15px 30px;
.taibtn{
bottom: 15px;
margin: 0 auto;
position: absolute;
right: 15px;
padding: 10px 40px;
border-radius: 15px;
border: 3px rgba(218, 205, 178, 1) solid;
cursor: pointer;
}
kbd {
font-family: inherit;
padding: 0.1em 0.6em;
border: 1px solid #ccc;
font-size: 13px;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap;
.taibtn:hover{
z-index: 1;
color: white;
background: rgb(255, 181, 71);
border-color: white;
}
.taibtn {
bottom: 15px;
margin: 0 auto;
position: absolute;
right: 15px;
padding: 10px 40px;
border-radius: 15px;
border: 3px rgba(218, 205, 178, 1) solid;
cursor: pointer;
.taibtn::before{
padding: 0 40px;
}
.taibtn:hover {
z-index: 1;
color: white;
background: rgb(255, 181, 71);
border-color: white;
#tutorial-end-button{
font-size: 22pt;
}
.taibtn:before {
padding: 0 40px;
}
#tutorial-end-button {
font-size: 22pt;
}
#songsel-help {
float: right;
background: rgba(255, 255, 255, 0.5);
color: black;
padding: 15px;
margin: 10px;
font-size: 18px;
border: 3px black solid;
border-radius: 50px;
cursor: pointer;
}

235
public/src/css/songselect.css
View File

@@ -1,139 +1,174 @@
@-webkit-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:-200px 0;}
@-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;}
@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');
height: 100%;
background: url("/assets/img/bg-pattern-1.png");
animation: bgscroll 3s infinite linear;
-webkit-animation: bgscroll 3s infinite linear;
white-space: nowrap;
}
#song-container{
width:98%;
height:80%;
width: 98%;
height: 80%;
padding: 5% 1% 1% 1%;
text-align: center;
text-align: center;
}
ul li{
list-style:none;
list-style: none;
}
.difficulties{
float:left;
display:inline-block;
width:70%;
height: 100%;
position: absolute;
left: 0;
display: block;
width: 303px;
height: 100%;
opacity: 0;
transition: opacity 0.1s;
}
.song-title-char {
text-align: center;
width: 45px;
display: block;
.song.opened .difficulties{
opacity: 1;
transition: opacity 0.1s 0.2s;
}
.song-title-char:before {
content: attr(alt);
position: absolute;
-webkit-text-stroke: 0.25em #000;
z-index: -1;
.song-title-char{
text-align: center;
width: 45px;
display: block;
}
.song-title-char::before{
content: attr(alt);
position: absolute;
-webkit-text-stroke: 0.25em #000;
z-index: -1;
}
.song-title{
float: right;
width: 45px;
padding: 10px 2px;
word-wrap: break-word;
font-size: 22pt;
color: white;
position: relative;
z-index: 1;
line-height: 28px;
float: right;
width: 45px;
height: 100%;
padding: 10px 2px;
word-wrap: break-word;
font-size: 22pt;
color: white;
position: relative;
z-index: 1;
line-height: 28px;
}
.song-title-space {
line-height: 25px;
.song-title-space{
line-height: 25px;
}
.song{
font-size: 14pt;
width: 50px;
margin-right:15px;
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;
font-size: 14pt;
width: 50px;
margin-right: 15px;
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;
position: relative;
transition: width 0.3s;
}
.song:not(.opened):hover{
background: rgba(255, 233, 125, 0.90);
}
.opened{
width:375px;
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;
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;
margin-left: 6px;
word-wrap: break-word;
width: 20px;
display: block;
margin: auto;
margin-top: 10px;
font-size: 20pt;
margin-left: 6px;
white-space: normal;
}
.difficulty .stars{
position:absolute;
color: #f12b69;
margin-left: -17px;
width:100%;
bottom:10px;
position: absolute;
color: #f12b69;
margin-left: -17px;
width: 100%;
bottom: 10px;
}
.difficulty:hover{
border-color:#fa5d3a;
color:white;
background:#0c6577;
border-color: #fa5d3a;
color: white;
background: #0c6577;
}
.difficulty:hover .diffname{
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.difficulty:hover .stars{
color:white;
color: white;
}
.song.p2:not(.opened)::after,
.difficulty.p2::after{
content:"P2";
display:block;
position:absolute;
bottom:0;
width:100%;
content: "P2";
display: block;
position: absolute;
bottom: 0;
width: 100%;
}
#songsel-help{
float: right;
background: rgba(255, 255, 255, 0.5);
color: black;
padding: 15px;
margin: 10px;
font-size: 18px;
border: 3px black solid;
border-radius: 50px;
cursor: pointer;
}
.songsel-title-song,
.songsel-title-difficulty{
position: absolute;
left: -300px;
opacity: 0;
margin: 20px;
color: #fff;
font-size: 7vmin;
z-index: 1;
transition: left 0s 0.2s, opacity 0.2s;
}
#song-select.difficulty-select .songsel-title-difficulty{
left: 0;
opacity: 1;
transition: left 0.4s 0.2s, opacity 0.4s 0.2s;
}
#song-select:not(.difficulty-select) .songsel-title-song{
left: 0;
opacity: 1;
transition: left 0.4s 0.2s, opacity 0.4s 0.2s;
}

80
public/src/css/titlescreen.css
View File

@@ -1,51 +1,39 @@
@keyframes toggleFade {
0%{
opacity:1;
}
50% {
opacity: 0;
}
@keyframes toggleFade{
40%{
opacity: 1;
}
70%{
opacity: 0.2;
}
}
#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 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: #1389f0 url("/assets/img/title-screen.png") no-repeat center;
background-size: cover;
cursor: pointer;
}
#logo-big-cont{
position:absolute;
max-width: 654px;
max-height: 300px;
.logo-big{
width: 90vmin;
height: auto;
}
#logo-big-cont img{
width:100%;
height:100%;
}
.click-to-continue{
display:block;
font-size: 8vmin;
color:white;
text-align: center;
position:absolute;
bottom:2%;
width:100%;
animation: toggleFade 1s infinite ease-out;
z-index: 1;
}
position:absolute;
bottom: 10%;
color: #fff;
font-size: 8vmin;
text-align: center;
z-index: 1;
animation: toggleFade 2s infinite ease-in-out;
}
.click-to-continue::before{
-webkit-text-stroke: 0.25em #f00;
filter: blur(0.3vmin);
left: auto;
}