535 lines
8.7 KiB
CSS
535 lines
8.7 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#gameGroup {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
background-color: #000;
|
|
}
|
|
|
|
#mainTips {
|
|
color: #fff;
|
|
font-size: 0.8em;
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 370;
|
|
}
|
|
|
|
#musicBtn {
|
|
position: fixed;
|
|
bottom: 3px;
|
|
right: 3px;
|
|
cursor: pointer;
|
|
z-index: 400;
|
|
display: none;
|
|
}
|
|
|
|
#startPanel {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
z-index: 300;
|
|
}
|
|
|
|
#startTop {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #000;
|
|
z-index: 350;
|
|
}
|
|
|
|
#startTopProgressBar {
|
|
width: 90%;
|
|
height: 5%;
|
|
margin: 0 5%;
|
|
position: absolute;
|
|
top: 5%;
|
|
background-color: #fff;
|
|
z-index: 15;
|
|
}
|
|
|
|
#startTopProgress {
|
|
width: 0%;
|
|
height: 100%;
|
|
background-color: #666;
|
|
}
|
|
|
|
#startTopLoadTips {
|
|
color: #fff;
|
|
font-size: 0.6em;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 5%;
|
|
z-index: 15;
|
|
}
|
|
|
|
#startTopHint {
|
|
color: #66CCFF;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 5%;
|
|
z-index: 15;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
#startBackground {
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
height: 100%;
|
|
width: auto;
|
|
transform:translate(-50%,-50%);
|
|
z-index: 260;
|
|
}
|
|
|
|
#startLogo {
|
|
user-select: none;
|
|
position: absolute;
|
|
z-index: 290;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 8%;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
font: bold 4em STXingkai;
|
|
}
|
|
|
|
#startTitle {
|
|
user-select: none;
|
|
position: absolute;
|
|
z-index: 280;
|
|
}
|
|
|
|
#startButtonGroup {
|
|
width: auto;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 1.44em;
|
|
display: none;
|
|
z-index: 310;
|
|
bottom: 0;
|
|
margin-bottom: 9%;
|
|
left: 80%;
|
|
transform: translateX(-50%);
|
|
padding: 15px 25px;
|
|
min-width: 20%;
|
|
/* default value */
|
|
background-color: #32369F;
|
|
opacity: 0.85;
|
|
color: #FFFFFF;
|
|
border: #FFFFFF 2px solid;
|
|
caret-color: #FFD700;
|
|
border-radius: 10px;
|
|
font-family: normalTitle;
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
#startButtons {
|
|
display: block;
|
|
color: #616161;
|
|
}
|
|
#playGame[selected='true'] { color: #bababa; }
|
|
#loadGame[selected='true'] { color: #bababa; }
|
|
#replayGame[selected='true'] { color: #bababa; }
|
|
|
|
#playGame:hover {
|
|
color: #ffffff;
|
|
|
|
}
|
|
#loadGame:hover {
|
|
color: #ffffff;
|
|
|
|
}
|
|
#replayGame:hover {
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
|
|
#levelChooseButtons {
|
|
display: none;display: block;
|
|
color: #616161;
|
|
}
|
|
|
|
|
|
.startButton {
|
|
width: 100%;
|
|
margin: 0;
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 9px 0;
|
|
border-color: transparent;
|
|
border-width: 0px 0px 0px 0px;
|
|
border-style: solid;
|
|
border-radius: 0px;
|
|
|
|
}
|
|
|
|
|
|
.onChoiceAnimate {
|
|
animation: onChoice 2s ease-in-out 0s infinite normal none running;
|
|
}
|
|
|
|
#floorMsgGroup {
|
|
top: 0px;
|
|
right: 0px;
|
|
position: absolute;
|
|
text-align: center;
|
|
display: none;
|
|
color: #fff;
|
|
background-color: #000;
|
|
z-index: 230;
|
|
}
|
|
|
|
#logoLabel {
|
|
margin-top: 8%;
|
|
font: bold 3em STXingkai;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#versionLabel {
|
|
margin-top: -3%;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#floorNameLabel {
|
|
margin-top: 30px;
|
|
font-size: 1.6em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#statusBar {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
background: url(project/materials/ground.png) repeat;
|
|
/*z-index: 185;*/
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 3px;
|
|
}
|
|
#statusBar .status{
|
|
user-select: none;
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.status img{
|
|
vertical-align: middle;
|
|
width: auto;
|
|
height: 100%;
|
|
max-height: 1.6em;
|
|
}
|
|
#statusBar span{
|
|
user-select: none;
|
|
font: bold italic 1.1em Verdana;
|
|
display: inline;
|
|
}
|
|
#statusBar p {
|
|
user-select: none;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 60%;
|
|
margin: 0;
|
|
color: white;
|
|
font: bold italic 1.1em Verdana;
|
|
white-space: nowrap;
|
|
}
|
|
#toolBar {
|
|
position: absolute;
|
|
background: url(project/materials/ground.png) repeat;
|
|
z-index: 210;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
display: none;
|
|
padding: 3px;
|
|
}
|
|
#toolBar .tools{
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
p#hard {
|
|
user-select: none;
|
|
width: 6em;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
color: red;
|
|
font: bold normal 1.1em "Arial Black";
|
|
text-align: center;
|
|
margin: 0 6px 6px 0;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
|
|
user-select: none;
|
|
font-style: normal;
|
|
font-size: 1em;
|
|
}
|
|
|
|
p#name {
|
|
font-style: normal;
|
|
}
|
|
|
|
.gameCanvas {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
#gif {
|
|
z-index: 20;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#gif2 {
|
|
z-index: 90;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#gameDraw {
|
|
position: absolute;
|
|
background: #000000;
|
|
overflow: hidden;
|
|
/*z-index: 185;*/
|
|
}
|
|
|
|
#bg {
|
|
z-index: 10;
|
|
}
|
|
|
|
#event {
|
|
z-index: 30;
|
|
}
|
|
|
|
#hero {
|
|
z-index: 40;
|
|
}
|
|
|
|
#event2 {
|
|
z-index: 50;
|
|
}
|
|
|
|
#fg {
|
|
z-index: 60;
|
|
}
|
|
|
|
#caidan {
|
|
z-index: 62;
|
|
}
|
|
|
|
#damage {
|
|
z-index: 65;
|
|
}
|
|
|
|
#animate {
|
|
z-index: 70;
|
|
}
|
|
|
|
#curtain {
|
|
z-index: 125;
|
|
}
|
|
|
|
#ui {
|
|
z-index: 140;
|
|
}
|
|
|
|
#data {
|
|
z-index: 170;
|
|
}
|
|
|
|
#inputDiv {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(127,127,127,0.6);
|
|
z-index: 2000
|
|
}
|
|
|
|
#inputDialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -55%);
|
|
background: white;
|
|
width: 250px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
#inputMessage {
|
|
word-wrap: break-word;
|
|
text-align: left;
|
|
margin-left: 8%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
#inputBox {
|
|
margin-left: 8%;
|
|
width: 80%;
|
|
margin-bottom: 10px;
|
|
padding: 5px 3px;
|
|
border: 1px solid;
|
|
background: #F0F0F0;
|
|
}
|
|
|
|
#inputYes {
|
|
margin-bottom: 15px;
|
|
margin-left: 8%;
|
|
}
|
|
|
|
#inputNo {
|
|
float:right;
|
|
margin-right: 10%;
|
|
}
|
|
|
|
#_selector, ._uievent_selector {
|
|
animation: selector 2s ease-in-out 0s infinite normal none running;
|
|
}
|
|
|
|
@-webkit-keyframes selector {
|
|
0% { opacity: 0.95; }
|
|
50% { opacity: 0.55; }
|
|
100% { opacity: 0.95; }
|
|
}
|
|
|
|
@keyframes selector {
|
|
0% { opacity: 0.95; }
|
|
50% { opacity: 0.55; }
|
|
100% { opacity: 0.95; }
|
|
}
|
|
|
|
#next {
|
|
width: 5px;
|
|
height: 5px;
|
|
display: none;
|
|
position: absolute;
|
|
transform: rotate(45deg);
|
|
border-bottom-width: 4px;
|
|
border-bottom-style: solid;
|
|
border-right-width: 4px;
|
|
border-right-style: solid;
|
|
-webkit-animation: next .5s ease-in-out alternate infinite;
|
|
animation: next .5s ease-in-out alternate infinite;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0.7;
|
|
z-index: 169;
|
|
}
|
|
|
|
@-webkit-keyframes next {
|
|
100% {
|
|
transform: rotate(45deg) translate(-3px, -3px);
|
|
}
|
|
}
|
|
@keyframes next {
|
|
100% {
|
|
transform: rotate(45deg) translate(-3px, -3px);
|
|
}
|
|
}
|
|
|
|
#startImageBackgroundDiv {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
z-index: 10000;
|
|
}
|
|
|
|
#startImageDiv {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
background: black;
|
|
opacity: 1;
|
|
}
|
|
|
|
#startImageLogo {
|
|
opacity: 0;
|
|
max-width: 60%;
|
|
max-height: 60%;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.startImageAnimation {
|
|
-webkit-animation: startImage 4s ease-in-out 1s alternate 1;
|
|
animation: startImage 4s ease-in-out 1s alternate 1;
|
|
}
|
|
|
|
@-webkit-keyframes startImage {
|
|
0% { opacity: 0; }
|
|
60% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes startImage {
|
|
0% { opacity: 0; }
|
|
60% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.startImageDivAnimation {
|
|
-webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
|
|
animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
|
|
}
|
|
|
|
@-webkit-keyframes startImageDivDisappear {
|
|
0% { opacity: 1 }
|
|
100% { opacity: 0 }
|
|
}
|
|
|
|
@keyframes startImageDivDisappear {
|
|
0% { opacity: 1 }
|
|
100% { opacity: 0 }
|
|
}
|
|
|
|
#ui-editor {
|
|
z-index: 9999;
|
|
position: absolute;
|
|
overflow: visible;
|
|
height: 100%;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Fira Code;
|
|
src: url(../src/fonts/FiraCode-Regular.ttf);
|
|
}
|
|
|
|
/* 注释下面这三行以开启抗锯齿 */
|
|
.anti-aliasing {
|
|
image-rendering: pixelated;
|
|
} |