Stairs/web/site.scss
Mark van Renswoude ec99be4b7c Fixed #23: Restart reason message cannot be hidden
Fixed #25: Setting for the initialisation sequence
Fixed #26: Setting for motion triggers only during an active time trigger
2018-04-22 10:32:46 +02:00

715 lines
8.8 KiB
SCSS

@import "variables.scss";
html
{
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after
{
box-sizing: inherit;
}
body
{
background-color: black;
color: white;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 1.3em;
font-weight: 300;
letter-spacing: .01em;
line-height: 1.3;
padding-bottom: 3rem;
@media #{$mediumScreen}
{
padding-top: 3rem;
}
}
a
{
text-decoration: none;
}
/*
Hide VueJS container until the template has been processed
*/
[v-cloak]
{
display: none;
}
#container
{
background: $containerBackground;
margin-top: 2rem;
padding: 1rem;
box-shadow: 0 0 50px $containerShadowColor;
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; }
}
}
}
%outset
{
border: 1px solid #111111;
border-radius: 3px;
box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.15);
}
%inset
{
border: 1px solid #111111;
border-color: black #111111 #111111;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08);
}
button, input
{
font-family: 'Verdana', 'Arial', sans-serif;
}
input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button, .button, input[type=submit]
{
@extend %outset;
display: inline-block;
padding: 0 12px;
color: $buttonTextColor;
background: $buttonBackground;
cursor: pointer;
line-height: 3rem;
&:hover, &:focus, &.focus
{
color: $buttonHoverTextColor;
background: $buttonHoverBackground;
outline: none
}
&:active, &.active
{
@extend %inset;
color: $buttonActiveTextColor;
background: $buttonActiveBackground;
}
}
input[type=submit], .button-primary
{
background: $buttonPrimaryBackground;
&:hover, &:focus, &.focus
{
background: $buttonPrimaryHoverBackground;
}
}
a.button
{
text-decoration: none
}
.navigation
{
clear: both;
margin-top: 3rem;
}
.tabs
{
&>.button
{
margin-left: -1px;
border-radius: 0;
&:first-child
{
margin-left: 0;
border-radius: 3px 0 0 3px
}
&:last-child
{
border-radius: 0 3px 3px 0
}
&:focus
{
position: relative;
z-index: 1
}
}
}
.version
{
color: $versionTextColor;
font-size: 8pt;
text-align: center;
margin-top: 2rem;
}
.notificationContainer
{
position: fixed;
top: 2rem;
z-index: 666;
@media #{$mediumScreen}
{
width: 512px;
left: 50%;
}
}
.notification
{
@extend %outset;
background: $notificationBackground;
/* border: solid 1px $notificationBorderColor;*/
box-shadow: 0 0 10px black;
color: white;
cursor: pointer;
padding: .5em;
margin-bottom: 2rem;
position: relative;
@media #{$mediumScreen}
{
left: -50%;
}
.message
{
white-space: pre;
}
&.error
{
background: $notificationErrorBackground;
}
}
.check, .radio
{
display: inline-block;
cursor: pointer;
user-select: none;
white-space: nowrap;
margin-top: .5em;
margin-bottom: .5em;
.control
{
@extend %outset;
background: $checkRadioBackground;
display: inline-block;
width: 16px;
height: 16px;
position: relative;
}
.label
{
display: inline-block;
margin-left: .5em;
vertical-align: top;
}
&.checked
{
.control
{
background: $checkRadioSelectedBackground;
.inner
{
}
}
}
&.disabled
{
cursor: not-allowed;
}
}
.radio
{
.control, .control .inner
{
border-radius: 50%;
}
.control .inner
{
color: black;
position: absolute;
top: 4px;
left: 4px;
width: 6px;
height: 6px;
}
&.checked .control .inner
{
background: #cccccc;
box-shadow: 0 1px rgba(0,0,0,0.5);
}
}
.check
{
.control .inner
{
position: absolute;
top: 5px;
left: 4px;
width: 6px;
height: 3px;
}
&.checked .control .inner
{
border: solid rgba(255,255,255,0.8);
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
box-shadow: -1px 0 rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5)
}
}
.form-control
{
margin-top: 1em;
}
input[type=text], input[type=number], input[type=password], textarea
{
@extend %inset;
background: $inputBackground;
color: $inputTextColor;
padding: .5em;
width: 100%;
}
select
{
@extend %outset;
background: $selectBackground;
color: $inputTextColor;
font-family: 'Verdana', 'Arial', sans-serif;
padding: .5em;
}
input[type=range]
{
margin-top: 1rem;
margin-bottom: 1rem;
}
h1
{
font-size: 2rem;
margin: 0;
}
h2
{
color: #c0c0c0;
font-size: 1.2rem;
margin: 0;
}
h3
{
@extend %outset;
color: $sectionHeaderTextColor;
background: $sectionHeaderBackground;
font-size: 1.2rem;
padding: .5rem;
}
h4
{
font-size: 1.4rem;
}
input[disabled]
{
cursor: not-allowed;
color: $inputDisabledTextColor;
background: $inputDisabledBackground;
}
label
{
display: block;
margin-top: .5em;
margin-bottom: .5em;
}
.label-inline
{
margin-right: 2rem;
}
@media #{$mediumScreen}
{
.horizontal
{
clear: both;
label
{
display: inline-block;
}
input[type=text], input[type=number], input[type=password], textarea
{
display: inline-block;
float: right;
width: 50%;
}
&:after
{
clear: both;
}
}
}
.hint
{
display: block;
font-size: 8pt;
color: #808080;
margin-bottom: 1.5rem;
}
.loading
{
margin-top: 3rem;
text-align: center;
}
.suboptions
{
margin-left: 5rem;
}
.buttons
{
clear: both;
text-align: center;
margin-top: 1rem;
}
.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;
}
}
.slidercontainer
{
margin-top: 1rem;
}
.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
{
@extend %outset;
background: #973a38;
padding: .5em;
margin-bottom: 2rem;
margin-top: 1rem;
}
.nodata
{
color: #808080;
text-align: center;
}
.clear
{
clear: both;
}
.panel
{
margin-bottom: 2rem;
padding: 0;
.panel-header
{
@extend %outset;
border-radius: 3px 3px 0 0;
border-bottom-width: 0;
padding: .5em;
label {
font-size: 1em;
}
background: $panelHeaderBackground;
color: $panelHeaderTextColor;
.actions
{
float: right;
}
a, .label
{
color: $panelHeaderLinkColor;
}
}
.panel-body
{
@extend %outset;
border-radius: 0 0 3px 3px;
background: $panelBodyBackground;
padding: 2rem;
}
&.active
{
.panel-header
{
background: $panelActiveHeaderBackground;
color: $panelActiveHeaderTextColor;
}
}
}
.inline
{
display: inline-block;
width: auto;
}
.weekdays
{
margin-top: 1rem;
.label
{
width: 8em;
}
}
.fade-enter-active, .fade-leave-active
{
transition: opacity .5s;
}
.fade-enter, .fade-leave-to
{
opacity: 0;
}
.range
{
clear: both;
.start
{
position: relative;
display: inline-block;
width: 49%;
.slidercontainer
{
margin-right: 4em;
}
.value
{
position: absolute;
right: 0;
top: 1.5rem;
color: $sliderValueColor;
}
}
.end
{
position: relative;
display: inline-block;
float: right;
width: 50%;
.slidercontainer
{
margin-left: 4em;
}
.value
{
position: absolute;
left: 0;
top: 1.5rem;
color: $sliderValueColor;
}
}
&:after
{
clear: both;
}
}
.resetReason
{
margin-left: 2em;
}