$color-primary: #0066ff; $color-quaternary: #404040; @import "milligram"; $bodyBackgroundColor: black; $textColor: white; $containerBackgroundColor: #202020; $containerShadow: 0 0 50px #fcf6cf; $panelBorderColor: #404040; $panelHeaderBackgroundColor: #302f28; $panelHeaderColor: #808080; $panelHeaderLinkColor: white; $buttonBorderColor: #404040; $sliderBarColor: #404040; $sliderBarSize: .5rem; $sliderThumbColor: #fcf6cf; $sliderThumbSize: 2rem; $sliderValueColor: #808080; $warningColor: #302f28; $warningBorderColor: #000000; $smallScreen: "screen and (max-width: 767px)"; $mediumScreen: "screen and (min-width: 768px)"; [v-cloak] { display: none; } body { background-color: $bodyBackgroundColor; color: $textColor; font-family: 'Verdana', 'Arial', sans-serif; font-size: 10pt; padding-bottom: 3rem; @media #{$mediumScreen} { padding-top: 3rem; } } input, textarea { color: $textColor; } #container { background-color: $containerBackgroundColor; margin-top: 2rem; padding: 1rem; box-shadow: $containerShadow; border: solid 1px black; @media #{$mediumScreen} { width: 768px; margin-left: auto; margin-right: auto; } } .header { position: relative; img { float: left; margin-right: 1rem; } .wifistatus { @media #{$smallScreen} { clear: both; margin-top: 3rem; } @media #{$mediumScreen} { position: absolute; right: 0; top: 0; } .indicator { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; margin-right: 0.5rem; &[data-status=connected] { background-color: #339966; } &[data-status=disconnected] { border: solid 1px #808080; } &[data-status=connecting] { background-color: #ff9933; } &[data-status=error] { background-color: #cc0000; } } } } h1 { font-size: 16pt; margin: 0; } h2 { color: #c0c0c0; font-size: 10pt; margin: 0; } h3 { color: #808080; background-color: #282828; font-size: 14pt; border-bottom: solid 1px #808080; } .version { color: #808080; font-size: 8pt; text-align: center; margin-top: 2rem; } .tabs { clear: both; margin-top: 3rem; .button { background-color: $buttonBorderColor; color: $textColor !important; border-color: #808080; &.button-outline { background-color: transparent; } @media #{$smallScreen} { width: 100%; } } } input[disabled] { cursor: not-allowed; color: #808080; background-color: #262626; } .label-inline { margin-right: 2rem; } .hint { display: block; font-size: 8pt; color: #808080; margin-bottom: 1.5rem; } .loading { margin-top: 3rem; text-align: center; } .suboptions { margin-left: 5rem; } .buttons { text-align: center; } .sliders { margin-top: 2rem; } .step { margin-left: 3rem; margin-right: 3rem; position: relative; .slidercontainer { margin-right: 4em; } .value { position: absolute; right: 0; top: .1rem; color: $sliderValueColor; } } .slider { -webkit-appearance: none; width: 100%; height: $sliderBarSize; border-radius: $sliderBarSize / 2; background: $sliderBarColor; outline: none; &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: $sliderThumbSize; height: $sliderThumbSize; border-radius: 50%; background: $sliderThumbColor; cursor: pointer; } &::-moz-range-thumb { width: $sliderThumbSize; height: $sliderThumbSize; border-radius: 50%; background: $sliderThumbColor; cursor: pointer; } } .warning { background: $warningColor; border: solid 1px $warningBorderColor; padding: .5em; margin-bottom: 2rem; } .nodata { color: #808080; text-align: center; } .clear { clear: both; } .panel { border: solid 1px $panelBorderColor; margin-bottom: 2rem; padding: 0; & .panel-header { & input[type=checkbox] { margin-left: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em; } & label { font-size: 1em; } background-color: $panelHeaderBackgroundColor; color: $panelHeaderColor; & .actions { @media #{$mediumScreen} { float: right; } } & a, & label { color: $panelHeaderLinkColor; } } & .panel-body { padding: 2rem; } } select { background: $containerBackgroundColor; color: white; &:focus { background-image: none; } } .inline { display: inline-block; width: auto; } .checkbox { white-space: nowrap; } .weekday label { width: 5em; }