2015-03-29 23:57:55 +02:00

130 lines
2.8 KiB
Plaintext

#sidebar {
display: none;
overflow: auto;
flex: 0 0 auto;
order: 0;
background: #fafafa;
border-right: 1px solid rgba(0,0,0,0.08);
}
#settings {
padding: 16px;
.block {
display: block;
margin: 0 0 24px 0;
width: 168px;
h1 {
font-size: 1em;
margin: 2px 0 6px 0;
}
}
.button {
display: inline-block;
margin: 4px;
border-radius: 2px;
color: @col;
cursor: pointer;
.transition(all 0.2s ease-in-out);
&:hover {
background: rgba(0,0,0,0.03);
}
&.active {
background: rgba(0,0,0,0.03);
box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
}
img {
width: 24px;
height: 24px;
padding: 12px;
}
}
.select {
background: transparent;
overflow: hidden;
border-radius: 2px;
outline: 0;
width: 160px;
margin: 4px;
line-height: 48px;
}
input, select {
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
font-family: @font-family;
font-size: @font-size;
font-weight: @font-weight;
color: @col;
background: transparent;
width: 100%;
border: 0 solid #000;
cursor: pointer;
outline: 0;
&:hover {
background: rgba(0,0,0,0.03);
}
}
select {
width: 182px;
padding: 0 8px;
height: 48px;
line-height: 48px;
}
input[type='range'] {
border-radius: 2px;
width: 144px;
margin: 4px;
padding: 8px;
vertical-align: middle;
height: 32px;
line-height: 32px;
}
.range-track() {
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
border-width: 0;
border-radius: 20px;
background: @col-range-back;
height: 6px;
}
.range-thumb() {
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
border-width: 0;
border-radius: 20px;
background: @col-range-thumb;
width: 16px;
height: 16px;
}
input[type='range']::-webkit-slider-runnable-track { .range-track; }
input[type='range']::-moz-range-track { .range-track; }
input[type='range']::-ms-track { .range-track; }
input[type='range']::-ms-fill-lower { .range-track; }
input[type='range']::-ms-fill-upper { .range-track; }
input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
input[type='range']::-moz-range-thumb { .range-thumb; }
input[type='range']::-ms-thumb { .range-thumb; }
#view-size {
display: block;
}
}