Stairs/web/site.scss
Mark van Renswoude f87a8b6eb7 Changed from UDP to HTTP
Implemented access point, station mode and basic web configuration page
Actual lighting control is completely broken
2018-01-01 19:56:07 +01:00

222 lines
2.9 KiB
SCSS

$color-primary: #0066ff;
$color-quaternary: #404040;
@import "milligram";
$bodyBackgroundColor: black;
$textColor: white;
$containerBackgroundColor: #202020;
$containerShadow: 0 0 50px #fcf6cf;
$buttonBorderColor: #404040;
$sliderBarColor: #404040;
$sliderBarSize: .5rem;
$sliderThumbColor: #fcf6cf;
$sliderThumbSize: 2rem;
$smallScreen: "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 #{$smallScreen}
{
padding-top: 3rem;
}
}
input, textarea
{
color: $textColor;
}
#container
{
background-color: $containerBackgroundColor;
margin-top: 2rem;
padding: 1rem;
box-shadow: $containerShadow;
border: solid 1px black;
@media #{$smallScreen}
{
width: 768px;
margin-left: auto;
margin-right: auto;
}
}
.header
{
position: relative;
img
{
float: left;
margin-right: 1rem;
}
.wifistatus
{
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;
}
}
}
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;
}
.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;
}
}