181 lines
3.2 KiB
CSS
181 lines
3.2 KiB
CSS
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
|
|
|
|
html, body, #page {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
html, body { padding: 0; }
|
|
|
|
body {
|
|
background-color: #2a2c41;
|
|
font-family: 'cwTeXHei', sans-serif;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------- */
|
|
|
|
#main-area {
|
|
margin: 0 auto;
|
|
/* display: table;*/
|
|
margin-top: 20px;
|
|
width: 92%;
|
|
min-height: 83%;
|
|
background-color: #c3e1fc;
|
|
background: url('images/LEVINESSA_%E8%A3%81%E5%88%87%E5%BE%8C.png');
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: 100%;
|
|
background-position: 0 10px;
|
|
position: relative;
|
|
}
|
|
|
|
#main-area .inner {
|
|
position: absolute;
|
|
bottom: 0rem;
|
|
width: 100%;
|
|
/* overflow: hidden;*/
|
|
}
|
|
|
|
#levinessa-logo img{
|
|
color: white;
|
|
margin-bottom: -1rem;
|
|
/* float: left;*/
|
|
}
|
|
|
|
@keyframes combo-ani {
|
|
from {
|
|
font-size: 6rem;
|
|
opacity: 0;
|
|
}
|
|
|
|
25% {
|
|
font-size: 6rem;
|
|
opacity: 1;
|
|
margin-top: inherit;
|
|
}
|
|
|
|
to {
|
|
font-size: 18rem;
|
|
opacity: 0;
|
|
margin-top: -4rem;
|
|
}
|
|
}
|
|
|
|
#score-combo-area {
|
|
position: fixed;
|
|
color: rgba(236, 246, 255, 0.75);
|
|
top: 28%;
|
|
width: 200%;
|
|
left: -50%;
|
|
/* overflow: hidden;*/
|
|
text-align: center;
|
|
font-size: 6rem;
|
|
text-shadow: 0 0 30px black;
|
|
transition: all 0.3s ease;
|
|
}
|
|
#score-combo-area.show {
|
|
animation-duration: 3s;
|
|
animation-name: combo-ani;
|
|
}
|
|
#score-combo-area.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
#score-area {
|
|
text-align: center;
|
|
color: white;
|
|
text-shadow: 2px 2px 5px black;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#boss-hp-area, #overkill-bonus-area {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 0.2rem;
|
|
padding-bottom: 0.2rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.25em;
|
|
padding-top: 0.25em;
|
|
transition: all 3s ease;
|
|
}
|
|
|
|
#overkill-bonus-area.hide {
|
|
height: 0px;
|
|
overflow: hidden;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 0;
|
|
transition: all 3s ease;
|
|
}
|
|
|
|
#boss-hp-area {
|
|
background: rgba(195, 21, 21, 0.35);
|
|
}
|
|
#boss-hp-num {
|
|
position: relative;
|
|
}
|
|
#boss-hp-area .progressbar, #overkill-bonus-area .progressbar {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0em;
|
|
max-width: 100%;
|
|
}
|
|
#boss-hp-area .progressbar {
|
|
background: rgba(195, 21, 21, 1);
|
|
line-height: 2.5em;
|
|
}
|
|
|
|
|
|
#overkill-bonus-area {
|
|
background: rgba(95, 227, 22, 0.35);
|
|
}
|
|
#overkill-bonus-num {
|
|
position: relative;
|
|
}
|
|
#overkill-bonus-area .progress-harf {
|
|
border-right: 3px solid rgba(95, 227, 22, 1);
|
|
position: absolute;
|
|
line-height: 2.2em;
|
|
left: 0;
|
|
top: -0.225em;
|
|
}
|
|
#overkill-bonus-area .progressbar {
|
|
background: rgba(95, 227, 22, 1);
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------- */
|
|
|
|
footer {
|
|
margin: 0 auto;
|
|
width: 92%;
|
|
color: white;
|
|
text-shadow: 2px 2px 8px rgb(218, 220, 255);
|
|
padding-top: 0.6em;
|
|
}
|
|
|
|
#schedule-area {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 92%;
|
|
}
|
|
|
|
#schedule-text {
|
|
font-size: 2.3rem;
|
|
}
|
|
#mode-text {
|
|
margin-top: 0.3em;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
#cxd-logo-area {
|
|
float: right;
|
|
margin-top: -0.5rem;
|
|
}
|
|
#cxd-logo {
|
|
border: 1px soild white;
|
|
font-size: 2em;
|
|
}
|
|
#cxd-logo img{
|
|
max-height: 2.3em;
|
|
} |