176 lines
2.6 KiB
Plaintext
176 lines
2.6 KiB
Plaintext
@import 'fonts';
|
|
|
|
|
|
html, body {
|
|
margin: 0;
|
|
font-size: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
*::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
visibility: none;
|
|
}
|
|
|
|
div#container {
|
|
position: absolute;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.separator {
|
|
display: block;
|
|
height: 4.8rem;
|
|
width: 0.1rem;
|
|
&.long {
|
|
background: url('imgs/div_line_lg_black.png');
|
|
}
|
|
&.small {
|
|
background: url('imgs/div_line_sm_black.png');
|
|
}
|
|
&.left {
|
|
float: left;
|
|
}
|
|
&.right {
|
|
float: right;
|
|
}
|
|
&.menu {
|
|
position: relative;
|
|
left: -3rem;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
z-index: 9999;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 5.3rem;;
|
|
}
|
|
|
|
button {
|
|
-moz-appearance: none;
|
|
z-index: 1;
|
|
position: relative;
|
|
border: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
width: 100%;
|
|
height: 5.3rem;
|
|
background: url('imgs/header_bg_black.png');
|
|
|
|
button {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.menu {
|
|
background: url('imgs/menu.png') -12px center no-repeat;
|
|
float: left;
|
|
&:active {
|
|
background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat;
|
|
}
|
|
}
|
|
|
|
.save {
|
|
background: url('imgs/download.png') center center no-repeat;
|
|
float: right;
|
|
&:active {
|
|
background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
|
|
}
|
|
}
|
|
|
|
#title {
|
|
color: white;
|
|
font-size: 11pt;
|
|
font-family: 'MozTT-Regular';
|
|
float: left;
|
|
margin: 1.5rem 0;
|
|
position: relative;
|
|
left: -2rem;
|
|
}
|
|
}
|
|
|
|
|
|
#menu {
|
|
height: 100%;
|
|
width: 15rem;
|
|
background: #262626;
|
|
display: block;
|
|
position: absolute;
|
|
left: -15rem;
|
|
top: 5rem;
|
|
color: white;
|
|
font-family: 'MozTT-Light';
|
|
font-size: 8pt;
|
|
|
|
&.pulled {
|
|
left: 0;
|
|
}
|
|
|
|
button[id^='set'], p {
|
|
background: none;
|
|
display: block;
|
|
width: 75%;
|
|
color: white;
|
|
text-align: left;
|
|
margin: 1rem 2.5rem;
|
|
font-family: 'MozTT-Light';
|
|
font-size: 8pt;
|
|
padding: 0 0.6rem;
|
|
}
|
|
span {
|
|
float: right;
|
|
font-size: 7pt;
|
|
}
|
|
div[role='slider'] {
|
|
width: 60%;
|
|
float: right;
|
|
margin: 0 2rem 0 0;
|
|
|
|
div {
|
|
overflow: visible;
|
|
button {
|
|
margin-top: -3.4rem;
|
|
left: 0%;
|
|
}
|
|
}
|
|
}
|
|
.icon-settings {
|
|
display: block;
|
|
margin: 1rem 0.5rem;
|
|
|
|
&:before {
|
|
content: '';
|
|
background: url('imgs/settings.png') center center no-repeat;
|
|
background-size: 2rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: block;
|
|
float: left;
|
|
margin: -0.3rem 0.5rem 0 0;
|
|
}
|
|
}
|
|
|
|
.options {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
|