fantasy/style.css

112 lines
2.3 KiB
CSS

body {
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
button {
z-index: 2;
overflow: hidden;
background-color: #00b6ff;
border: none;
border-radius: 50%;
background-size: 66%;
background-position: center;
background-repeat: no-repeat;
padding: 0;
outline: none;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-ms-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
button:hover {
background-color: #2eceff;
}
.panel {
z-index: 1;
overflow: hidden;
background-color: white;
transform: none;
-webkit-transition: transform 0.2s ease-in-out;
-moz-transition: transform 0.2s ease-in-out;
-ms-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.panel.hidden {
transform: translate(-500px);
}
.shadow {
box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 4px 0px;
}
.switchBox {
position: relative;
overflow: hidden;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background-color: #b8b8b8;
cursor: pointer
}
.switchBox > .mover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
-webkit-transition: right 0.2s ease-in-out;
-moz-transition: right 0.2s ease-in-out;
-ms-transition: right 0.2s ease-in-out;
-o-transition: right 0.2s ease-in-out;
transition: right 0.2s ease-in-out;
}
.switchBox .circle {
background-color: #ffffff;
position: absolute;
border-radius: 50%;
}
.numericBox {
border: none;
height: 100%;
width: 100%;
}
.form {
overflow-x: hidden;
overflow-y: auto
}
.form > div {
-webkit-transition: height 0.2s ease-in-out;
-moz-transition: height 0.2s ease-in-out;
-ms-transition: height 0.2s ease-in-out;
-o-transition: height 0.2s ease-in-out;
transition: height 0.2s ease-in-out;
}
.form > div > div {
float: left;
}
.form > div > div:nth-child(0) {
width: 50%
}
.form > div > div:nth-child(1) {
width: 50%
}