You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
2.9 KiB
221 lines
2.9 KiB
/* ALLGEMEINE STYLES */
|
|
|
|
body{
|
|
background-color:#333;
|
|
}
|
|
input{
|
|
padding:0;
|
|
border-radius:5px;
|
|
}
|
|
canvas{
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* STARTZUSTÄNDE */
|
|
|
|
|
|
#Calculator {
|
|
background-color:#999;
|
|
width:400px;
|
|
height:500px;
|
|
padding:50px;
|
|
display:block;
|
|
position:absolute;
|
|
margin:auto;
|
|
top:0;
|
|
right:0;
|
|
bottom:0;
|
|
left:0;
|
|
border-radius:20px;
|
|
box-shadow:20px 20px 40px #000;
|
|
}
|
|
|
|
|
|
#Numbers_MainOperators{
|
|
width:400px;
|
|
height:300px;
|
|
position:relative;
|
|
|
|
}
|
|
#equals{
|
|
background-color:#99FF99;
|
|
width:100%;
|
|
height:100%;
|
|
font-size:250%;
|
|
|
|
}
|
|
#clear,#delete{
|
|
background-color:#FF9900;
|
|
}
|
|
.notEquals{
|
|
position:relative;
|
|
width:75px;
|
|
height:100%;
|
|
padding:0px;
|
|
border-top:0px;
|
|
font-size:250%;
|
|
}
|
|
|
|
#SpecialOperators{
|
|
width:400px;
|
|
height:200px;
|
|
}
|
|
#SpecialOperators input{
|
|
background-color:#000;
|
|
color:#FFF;
|
|
width:93px;
|
|
height:60px;
|
|
border-top:0px;
|
|
font-size:150%;
|
|
}
|
|
#shift{
|
|
background-color:#5555FF !important;
|
|
}
|
|
|
|
|
|
|
|
/* HOCHZAHL AUSWAHl */
|
|
|
|
#inputForPowX{
|
|
background-color:#AAA;
|
|
width:210px;
|
|
height:120px;
|
|
padding:10px;
|
|
position:absolute;
|
|
top:25%;
|
|
right:20%;
|
|
border-radius:10px;
|
|
box-shadow:5px 5px 20px #000;
|
|
}
|
|
|
|
#inputForPowX table{
|
|
width:210px;
|
|
height:100px;
|
|
position:absolute;
|
|
margin:auto;
|
|
right:0;
|
|
bottom:10px;
|
|
left:0;
|
|
}
|
|
|
|
#inputForPowX input{
|
|
background-color:#000;
|
|
color:#FFF;
|
|
width:100%;
|
|
height:100%;
|
|
font-size:28px;
|
|
box-shadow:2px 2px 5px #000;
|
|
}
|
|
|
|
#hidePowX{
|
|
position:absolute;
|
|
margin:auto;
|
|
right:0;
|
|
left:0;
|
|
border-radius:3px;
|
|
}
|
|
|
|
|
|
/* INPUT UND OUTPUT FLÄCHEN */
|
|
|
|
#input,#output{
|
|
background-color:#FFF;
|
|
width:80%;
|
|
height:100px;
|
|
position:absolute;
|
|
margin:auto;
|
|
right:0;
|
|
left:0;
|
|
text-align:center;
|
|
font-size:80px;
|
|
overflow:hidden;
|
|
border-radius:50px;
|
|
box-shadow:10px 10px 20px #000;
|
|
}
|
|
|
|
#input{
|
|
top:50px;
|
|
}
|
|
#output{
|
|
bottom:50px;
|
|
}
|
|
|
|
|
|
|
|
/* INFO FLÄCHE RECHTS */
|
|
|
|
#rollInOut{
|
|
background-color:#FFF;
|
|
height:480px;
|
|
position:absolute;
|
|
margin:auto;
|
|
top:0;
|
|
bottom:0;
|
|
right:0;
|
|
border-radius:15px 0 0 15px;
|
|
box-shadow:10px 10px 20px #000;
|
|
}
|
|
|
|
#verticalP{
|
|
position:absolute;
|
|
bottom:170px;
|
|
left:-140px;
|
|
margin:0;
|
|
font-size:40px;
|
|
-webkit-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
#infoList li{
|
|
margin:15px 5px 15px 5px;
|
|
font-size:20px;
|
|
}
|
|
|
|
#setCommas{
|
|
position:absolute;
|
|
top:40px;
|
|
right:80px;
|
|
font-size:20px;
|
|
}
|
|
|
|
|
|
|
|
/* ANIMATIONEN */
|
|
|
|
@keyframes rollOut{
|
|
from {width:50px;}
|
|
to {width:500px;padding-right:30px;}
|
|
}
|
|
|
|
@keyframes rollIn{
|
|
from {width:500px;}
|
|
to {width:50px;padding-right:0px;}
|
|
}
|
|
|
|
@keyframes hide{
|
|
from {opacity:1.0;}
|
|
to {opacity:0.0;}
|
|
}
|
|
|
|
@keyframes show{
|
|
from {opacity:0.0;}
|
|
to {opacity:1.0;}
|
|
}
|
|
|
|
@keyframes FlashingInput{
|
|
to {background-color:#FF0000;}
|
|
}
|
|
|
|
@keyframes FlashingOutput{
|
|
to {background-color:#00FF00;}
|
|
}
|
|
|
|
@keyframes showPowDiv{
|
|
from {opacity:0.0;transform:translate(-300px,-50px) scale(0.1);}
|
|
to {opacity:1.0;transform:scale(1.0);}
|
|
}
|
|
|
|
@keyframes hidePowDiv{
|
|
to {opacity:0.0;transform:translate(-300px,-50px) scale(0.1);}
|
|
} |