361 lines
6.2 KiB
CSS
361 lines
6.2 KiB
CSS
@import url(https://fonts.googleapis.com/css?family=Oswald);
|
|
|
|
html {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
body {
|
|
background-image: url("./resources/static/light.png");
|
|
overflow-x: hidden;
|
|
font-family: Oswald;
|
|
font-size: 100%;
|
|
margin: 0;
|
|
cursor: default;
|
|
|
|
-webkit-transition: background-image ease-in 0.5s;
|
|
-moz-transition: background-image ease-in 0.5s;
|
|
-ms-transition: background-image ease-in 0.5s;
|
|
transition: background-image ease-in 0.5s;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
td {
|
|
width:50px;
|
|
height: 65px;
|
|
padding:0;
|
|
margin:0;
|
|
text-align: center;
|
|
-webkit-transition: box-shadow 0.3s ease;
|
|
-moz-transition: box-shadow 0.3s ease;
|
|
-ms-transition: box-shadow 0.3s ease;
|
|
transition: box-shadow 0.3s ease;
|
|
|
|
}
|
|
|
|
.atom:hover {
|
|
box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.oxid {
|
|
margin: 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.oxidStat {
|
|
margin-top: 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.oxid:first-letter {
|
|
font-size: 175% !important;
|
|
}
|
|
|
|
.common {
|
|
-webkit-filter: drop-shadow(4px 4px 3px #010);
|
|
filter: drop-shadow(4px 4px 3px #010);
|
|
}
|
|
|
|
img {
|
|
-webkit-filter: drop-shadow(4px 4px 3px #444);
|
|
filter: drop-shadow(4px 4px 3px #444);
|
|
}
|
|
|
|
.desc {
|
|
font-size:110%;
|
|
display: inline-block;
|
|
margin-right: 3%;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.setting {
|
|
display: flex;
|
|
position: relative;
|
|
height:100%;
|
|
width:100%;
|
|
margin: 5%;
|
|
}
|
|
|
|
.option {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 130%;
|
|
}
|
|
|
|
.selection {
|
|
margin-top: -5%;
|
|
padding: 4px;
|
|
box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
|
|
margin-top: 0;
|
|
|
|
-webkit-transition: box-shadow 0.3s ease, color 0.7s ease;
|
|
-moz-transition: box-shadow 0.3s ease, color 0.7s ease;
|
|
-ms-transition: box-shadow 0.3s ease, color 0.7s ease;
|
|
transition: box-shadow 0.3s ease, color 0.7s ease;
|
|
}
|
|
|
|
.selection:hover {
|
|
cursor: pointer;
|
|
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.dropdown {
|
|
display: none;
|
|
opacity: 0;
|
|
position: absolute;
|
|
box-shadow: 4px 4px 3px #444;
|
|
z-index: 50;
|
|
|
|
-webkit-transition: opacity 0.3s ease;
|
|
-moz-transition: opacity 0.3s ease;
|
|
-ms-transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.dropdown p {
|
|
color: black;
|
|
margin:0;
|
|
background-color:#fff;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
|
|
-webkit-transition: background-color 0.3s ease, opacity 0.3s ease;
|
|
-moz-transition: background-color 0.3s ease, opacity 0.3s ease;
|
|
-ms-transition: background-color 0.3s ease, opacity 0.3s ease;
|
|
transition: background-color 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.dropdown p:hover {
|
|
background-color:#CECDCD;
|
|
}
|
|
|
|
.tDesc {
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-size: 150%;
|
|
}
|
|
|
|
.pulltab {
|
|
position: fixed;
|
|
margin-left: -6%;
|
|
padding: 0.5%;
|
|
width: 6.2%;
|
|
height: 4%;
|
|
background-color: #b3daff;
|
|
color: rgba(0,0,0,0);
|
|
box-shadow: 2px 2px 5px 3px #333;
|
|
cursor: pointer;
|
|
|
|
-webkit-transition: transform 0.2s ease, margin 0.3s ease, color 0.4s ease;
|
|
-moz-transition: transform 0.2s ease, margin 0.3s ease, color 0.4s ease;
|
|
-ms-transition: transform 0.2s ease, margin 0.3s ease ,color 0.4s ease;
|
|
transition: transform 0.2s ease, margin 0.3s ease, color 0.4s ease;
|
|
}
|
|
|
|
.pulltab:hover {
|
|
margin-left: 0%;
|
|
color: rgba(0,0,0,1)
|
|
}
|
|
|
|
.first {
|
|
margin-top:5%;
|
|
|
|
}
|
|
.second {
|
|
margin-top: 12%;
|
|
}
|
|
|
|
.sidebar {
|
|
position: absolute;
|
|
background-color: #e6f5ff;
|
|
min-height: 100%;
|
|
padding: 15px 20px 15px 15px;
|
|
box-shadow: 2px 2px 5px 3px #333;
|
|
z-index:5;
|
|
|
|
-webkit-transition: margin 0.5s ease, background-color 0.5s ease;
|
|
-moz-transition: margin 0.5s ease, background-color 0.5s ease;
|
|
-ms-transition: margin 0.5s ease, background-color 0.5s ease;
|
|
transition: margin 0.5s ease, background-color 0.5s ease;
|
|
}
|
|
|
|
.elements {
|
|
margin-left: -150%;
|
|
}
|
|
.settings {
|
|
margin-left: -40%;
|
|
width: 20%;
|
|
|
|
}
|
|
|
|
.fa {
|
|
float: right;
|
|
font-size: 250% !important;
|
|
color: #585858;
|
|
margin: 0 1% 3% 1%;
|
|
cursor: pointer;
|
|
|
|
-webkit-transition: color 0.5s ease;
|
|
-moz-transition: color 0.5s ease;
|
|
-ms-transition: color 0.5s ease;
|
|
transition: color 0.5s ease;
|
|
}
|
|
|
|
.fa:hover {
|
|
color: #FF746B;
|
|
}
|
|
|
|
.legendholder {
|
|
margin-bottom: -17%;
|
|
margin-top: 17%;
|
|
margin-left: 31%;
|
|
}
|
|
|
|
.legend {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.legendcell {
|
|
width: 2px;
|
|
|
|
height: 25px !important;
|
|
}
|
|
|
|
.legendrangeval {
|
|
display: flex;
|
|
}
|
|
|
|
.maxlegend {
|
|
margin-top: -4.5%;
|
|
margin-left: 26.5%;
|
|
}
|
|
|
|
.minlegend {
|
|
margin-left: -2%;
|
|
margin-top: 1%;
|
|
}
|
|
|
|
|
|
.normal {
|
|
border: 1px hidden;
|
|
margin: 3%;
|
|
}
|
|
.extension {
|
|
border: 1px hidden;
|
|
margin-top:3%;
|
|
margin-left: 10%;
|
|
}
|
|
|
|
.infoBox {
|
|
display: flex;
|
|
}
|
|
|
|
.preview {
|
|
margin: 3%;
|
|
}
|
|
|
|
.info1, .info2 {
|
|
margin: 3%;
|
|
}
|
|
.info1 {
|
|
width: 25%;
|
|
}
|
|
|
|
.info2 {
|
|
width: 33%;
|
|
}
|
|
|
|
.sh {
|
|
margin-top: 32%;
|
|
text-align:center;
|
|
font-size:300%;
|
|
color:#fff;
|
|
text-shadow: 4px 4px 5px #444;
|
|
}
|
|
|
|
.help {
|
|
padding: 1px 1px 5px 2px;
|
|
margin-right: 3%;
|
|
text-align:center;
|
|
width: 20px;
|
|
height: 20px;
|
|
box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
|
|
|
|
-webkit-transition: box-shadow 0.3s ease;
|
|
-moz-transition: box-shadow 0.3s ease;
|
|
-ms-transition: box-shadow 0.3s ease;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.help:hover {
|
|
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.helptab {
|
|
position:absolute;
|
|
display: none;
|
|
opacity: 0;
|
|
margin-top: 65%;
|
|
margin-left: -9%;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 17px solid #fefefe;
|
|
|
|
-webkit-filter: drop-shadow(4px 0px 3px #444);
|
|
filter: drop-shadow(4px 0px 3px #444);
|
|
|
|
-webkit-transition: opacity 0.3s ease;
|
|
-moz-transition: opacity 0.3s ease;
|
|
-ms-transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.helptext {
|
|
position:absolute;
|
|
display: none;
|
|
opacity: 0;
|
|
border-radius: 7px;
|
|
margin-top: 95%;
|
|
margin-left: -13%;
|
|
padding: 5px;
|
|
font-size: 90%;
|
|
background-color: #fefefe;
|
|
box-shadow: 4px 4px 3px #444;
|
|
z-index:60;
|
|
|
|
-webkit-transition: opacity 0.3s ease;
|
|
-moz-transition: opacity 0.3s ease;
|
|
-ms-transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.about {
|
|
position: absolute;
|
|
bottom: 3%;
|
|
max-width: 70%;
|
|
margin-left: 3.5%;
|
|
font-size: 110%;
|
|
}
|
|
|
|
.github {
|
|
font-size: 120%;
|
|
color: #23527C;
|
|
text-decoration: none;
|
|
|
|
-webkit-transition: color 0.3s ease;
|
|
-moz-transition: color 0.3s ease;
|
|
-ms-transition: color 0.3s ease;
|
|
transition: color 0.3s ease;
|
|
|
|
}
|
|
.github:hover {
|
|
text-decoration: none;
|
|
color: #69CBE4;
|
|
} |