58 lines
942 B
CSS
58 lines
942 B
CSS
|
|
||
|
|
$keyboardHeight : 100px;
|
||
|
|
$bottomHeight : 30px;
|
||
|
|
|
||
|
|
body, #container{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
margin: 0px;
|
||
|
|
background-color: black;
|
||
|
|
|
||
|
|
#keyboard {
|
||
|
|
position: absolute;
|
||
|
|
bottom: $bottomHeight;
|
||
|
|
left: 0px;
|
||
|
|
height: $keyboardHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
#roll {
|
||
|
|
width : 100%;
|
||
|
|
height: calc(100% - #{$keyboardHeight + $bottomHeight});
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#glow {
|
||
|
|
width : 100%;
|
||
|
|
height: calc(100% - #{$keyboardHeight + $bottomHeight});
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#bottom {
|
||
|
|
width: 100%;
|
||
|
|
height: $bottomHeight;
|
||
|
|
bottom: 0px;
|
||
|
|
left: 0px;
|
||
|
|
position: absolute;
|
||
|
|
background-color: rgb(34, 34, 34);
|
||
|
|
box-shadow: inset 0px 12px 30px -5px rgba(0,0,0,0.75);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
opacity: 0.4;
|
||
|
|
filter: blur(4px);
|
||
|
|
$transitionTime : 0.2s;
|
||
|
|
transition: filter $transitionTime, opacity $transitionTime;
|
||
|
|
|
||
|
|
&.focus {
|
||
|
|
filter: blur(0px);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|