forked from platypush/platypush
Removed old templates/ and static/ web directories
This commit is contained in:
parent
94c35e210e
commit
7922ae4801
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.widget .calendar{padding:1rem}.widget .calendar .event{font-size:.95em}.widget .calendar .upcoming-event{text-align:center;margin-bottom:1.5rem;font-size:1.2em}.widget .calendar .upcoming-event .summary{text-transform:uppercase;font-size:1.3em}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.widget .date-time-weather{height:100%;display:flex;flex-direction:column;align-items:center;padding-top:1rem}.widget .date-time-weather .date{font-size:1.3em;height:10%}.widget .date-time-weather .time{font-size:2em;height:14%}.widget .date-time-weather .weather{height:35%;display:flex;align-items:center}.widget .date-time-weather .weather .temperature{font-size:2em;margin-left:1rem}.widget .date-time-weather .summary{height:28%}.widget .date-time-weather .sensors{width:100%;height:13%}.widget .date-time-weather .sensors .sensor{padding:0 1rem}.widget .date-time-weather .sensors .humidity{text-align:right}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.widget .image-carousel{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent}.widget .image-carousel .background{position:absolute;top:0;width:100%;height:100vh;background-color:transparent;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(13px);-webkit-filter:blur(13px)}.widget .image-carousel img{position:absolute;max-height:100%;z-index:2}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.widget .music{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.widget .music .track{text-align:center}.widget .music .track .unknown,.widget .music .track .no-track{font-size:2em}.widget .music .track .artist{font-size:1.9em;font-weight:bold;margin-bottom:.25em}.widget .music .track .title{font-size:1.8em}.widget .music .time{width:100%;margin-top:1em;font-size:1.2em}.widget .music .time .row{padding:0 .5em}.widget .music .time .time-total{text-align:right}.widget .music .time .progress-bar{width:100%;height:1em;position:relative;margin-bottom:.75em}.widget .music .time .progress-bar .total{position:absolute;width:100%;height:100%;top:0;background:#ddd;border-radius:5rem}.widget .music .time .progress-bar .elapsed{position:absolute;width:100%;height:100%;top:0;background:#c8ffd0;border-radius:5rem;z-index:1}.widget .music .playback-status{position:absolute;bottom:0;border-top:1px solid #ddd;color:#757f70;width:100%;height:2em}.widget .music .playback-status .status-property{display:flex;align-items:center;justify-content:center;height:100%}.widget .music .playback-status .active{color:#35b870}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.widget .rss-news{height:100%;display:flex;align-items:center}.widget .rss-news .article{width:90%;padding:0 2em}.widget .rss-news .article .source{font-size:1.7em;font-weight:bold;margin-bottom:.5em}.widget .rss-news .article .title{font-size:1.7em;margin-bottom:.5em}.widget .rss-news .article .published{text-align:right;font-size:1em}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
#assistant-google-modal .modal{width:50vw;height:50vh}#assistant-google-modal .modal .body{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}#assistant-google-modal .modal .body .icon{font-size:3em;color:#7e8;box-shadow:2px 2px 2px #ccc;border:1px solid #ccc;border-radius:3em;padding:.7em 1em .5em 1em}#assistant-google-modal .modal .body .text{margin-top:2.5em}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{min-width:640px;min-height:480px;position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}.camera .url{width:640px;display:flex;margin:1em}.camera .url .row{width:100%;display:flex;align-items:center}.camera .url .name{width:140px}.camera .url input{width:500px;font-weight:normal}.camera .params{margin-top:1em;padding:1em;width:640px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:1em}.camera .params label{font-weight:normal}.camera .params .head{display:flex;justify-content:center}.camera .params .head label{width:100%;display:flex;justify-content:right}.camera .params .head label .name{margin-right:1em}.camera .params .body{display:flex;flex-direction:column;margin:0 0 0 -1em}.camera .params .body .row{width:100%;display:flex;align-items:center;padding:.5em}.camera .params .body .row .name{width:30%}.camera .params .body .row input{width:70%}.camera .params .body .row:nth-child(even){background:#e4e4e4}.camera .params .body .row:hover{background:#def6ea}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}.camera .url{width:640px;display:flex;margin:1em}.camera .url .row{width:100%;display:flex;align-items:center}.camera .url .name{width:140px}.camera .url input{width:500px;font-weight:normal}.camera .params{margin-top:1em;padding:1em;width:640px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:1em}.camera .params label{font-weight:normal}.camera .params .head{display:flex;justify-content:center}.camera .params .head label{width:100%;display:flex;justify-content:right}.camera .params .head label .name{margin-right:1em}.camera .params .body{display:flex;flex-direction:column;margin:0 0 0 -1em}.camera .params .body .row{width:100%;display:flex;align-items:center;padding:.5em}.camera .params .body .row .name{width:30%}.camera .params .body .row input{width:70%}.camera .params .body .row:nth-child(even){background:#e4e4e4}.camera .params .body .row:hover{background:#def6ea}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}.camera .url{width:640px;display:flex;margin:1em}.camera .url .row{width:100%;display:flex;align-items:center}.camera .url .name{width:140px}.camera .url input{width:500px;font-weight:normal}.camera .params{margin-top:1em;padding:1em;width:640px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:1em}.camera .params label{font-weight:normal}.camera .params .head{display:flex;justify-content:center}.camera .params .head label{width:100%;display:flex;justify-content:right}.camera .params .head label .name{margin-right:1em}.camera .params .body{display:flex;flex-direction:column;margin:0 0 0 -1em}.camera .params .body .row{width:100%;display:flex;align-items:center;padding:.5em}.camera .params .body .row .name{width:30%}.camera .params .body .row input{width:70%}.camera .params .body .row:nth-child(even){background:#e4e4e4}.camera .params .body .row:hover{background:#def6ea}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.gpio-container{display:flex;flex-direction:column;height:100%;overflow:auto}.gpio-container .refresh{border-bottom:1px solid #ddd;background:#f8f8f8}.gpio-container .refresh button{border:0}.gpio-container .refresh button:hover{color:#35b870}.gpio-container .pins .pin{padding:1em;border-bottom:1px solid #ddd;display:flex;flex-direction:row;align-items:center}.gpio-container .pins .pin:nth-child(even){background:#f0f0f0}.gpio-container .pins .pin:hover{background:#def6ea}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.sensors .head{text-align:right}.sensors .head button{border:0}.sensors .head button:hover{background:#def6ea}.sensors .body{display:flex;flex-direction:column;margin:2rem auto;width:80%}.sensors .body .metric{margin-bottom:.75rem;padding:2rem;border:1px solid #ccc;border-radius:2rem}.sensors .body .metric:nth-child(odd){background:rgba(255,255,255,0)}.sensors .body .metric:nth-child(even){background:#f1f3f2}.sensors .body .metric:hover{background:#def6ea}.sensors .body .metric .value{text-align:right;font-weight:bold}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.sound{height:90%;margin-top:7%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.sound .sound-container{margin-bottom:1em}
|
||||
|
|
@ -1 +0,0 @@
|
|||
#assistant-google-modal .modal{width:50vw;height:50vh}#assistant-google-modal .modal .body{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}#assistant-google-modal .modal .body .icon{font-size:3em;color:#7e8;box-shadow:2px 2px 2px #ccc;border:1px solid #ccc;border-radius:3em;padding:.7em 1em .5em 1em}#assistant-google-modal .modal .body .text{margin-top:2.5em}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.switches-root .switch-root .head{padding:1rem .5rem;background:#e8e8e8;border-top:1px solid #ddd;border-bottom:1px solid #ddd;text-transform:uppercase}.switches-root .switch-root .switches{display:flex;flex-direction:column;padding:1rem}.switches-root .switch-root .device{display:flex;align-items:center}.switches-root .switch-root .device .toggle{text-align:right}.switches-root .switch-root .device:hover{background:#def6ea}.switches-root .switch-root .device:not(:last-child){border-bottom:1px solid #ddd}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.tts-container{max-width:80rem;min-height:10rem;margin:3rem auto;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:3rem}.tts-container form{margin:0;width:90%}.tts-container form input[type=text]{width:100%}.tts-container form button{border-radius:5rem}.tts-container form input:hover,.tts-container form button:hover{border-color:#35b870}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.tts-container{max-width:80rem;min-height:10rem;margin:3rem auto;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:3rem}.tts-container form{margin:0;width:90%}.tts-container form input[type=text]{width:100%}.tts-container form button{border-radius:5rem}.tts-container form input:hover,.tts-container form button:hover{border-color:#35b870}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.tv-samsung-ws-container{height:100%;display:flex;justify-content:center}.tv-samsung-ws-container .controls{max-width:500px;height:calc(100% - .15em);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 1em;border:1px solid #ddd;border-radius:2em;box-shadow:0 2px 9px 2px #bbb}.tv-samsung-ws-container .controls .power{color:red}.tv-samsung-ws-container .controls button{margin:.5em 0}.tv-samsung-ws-container .rows{flex-direction:column}.tv-samsung-ws-container .rows * button{width:100%}.tv-samsung-ws-container .section{width:100%;display:flex;margin:0 0 1.5em 0;padding:0 0 1.5em 0;border-bottom:1px solid #ddd}.tv-samsung-ws-container .directions{flex-direction:column}.tv-samsung-ws-container .directions * button{width:5em;height:4em}.tv-samsung-ws-container .volume,.tv-samsung-ws-container .channel{text-align:center}.tv-samsung-ws-container .colors{text-align:center}.tv-samsung-ws-container .colors .color{width:3em;height:3em;padding:0;border-radius:2em}.tv-samsung-ws-container .colors .color.red{background:red}.tv-samsung-ws-container .colors .color.green{background:green}.tv-samsung-ws-container .colors .color.yellow{background:#ff0}.tv-samsung-ws-container .colors .color.blue{background:blue}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.fa.fa-zigbee:before{content:' ';background:url('/static/img/icons/zigbee-logo.svg');background-size:1em 1em;width:1em;height:1em;display:inline-block}.zigbee-container{height:100%;padding:0 .5em;background:#f1f1f1;display:flex;flex-direction:column;align-items:center;overflow:auto}.zigbee-container .no-items{padding:2em;font-size:1.5em;color:#555;display:flex;align-items:center;justify-content:center}.zigbee-container .view-options{display:flex;width:100%;justify-content:space-between;padding:1em 0}.zigbee-container .view-options .view-selector{display:inline-flex}.zigbee-container .view-options .buttons{display:inline-flex}.zigbee-container .view-options select{width:100%;border-radius:1em}.zigbee-container .btn-default{border:0;padding:0 1em}.zigbee-container .btn-default:hover{border:1px solid #ddd;border-radius:1em}.zigbee-container .buttons{text-align:right}.zigbee-container .view{min-width:400pt;max-width:750pt;background:#fff;border:1px solid #d8d8d8;border-radius:1.5em;box-shadow:1px 2px 2px #ccc}.zigbee-container .item.selected{box-shadow:0 2px 4px 0 #bbb}.zigbee-container .item .name{padding:1em;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}.zigbee-container .item .name.selected{border-radius:1.5em}.zigbee-container .item:hover{background:#def6ea}.zigbee-container .item:not(:last-child){border-bottom:1px solid #ddd}.zigbee-container .item:first-child{border-radius:1.5em 1.5em 0 0}.zigbee-container .item:last-child{border-radius:0 0 1.5em 1.5em}.zigbee-container .params{background:#fff;padding-bottom:1em}.zigbee-container .params .section{display:flex;flex-direction:column;padding:0 1em}.zigbee-container .params .section:not(:first-child){padding-top:1em}.zigbee-container .params .section .header{display:flex;align-items:center;font-weight:bold;border-bottom:1px solid #e8e8e8}.zigbee-container .params .row{display:flex;align-items:center;border-radius:1em;padding:.3em}.zigbee-container .params .row:nth-child(even){background:#ededed}.zigbee-container .params .row:nth-child(odd){background:#fff}.zigbee-container .params .row:hover{background:#def6ea}.zigbee-container .params .param-name{display:inline-flex;width:40%;margin-left:1%;vertical-align:top;letter-spacing:.04em}.zigbee-container .params .param-value{display:inline-block;width:58%;text-align:right}.zigbee-container .params .param-value .value-edit{display:flex;align-items:center}.zigbee-container .params .param-value .value-data{display:inline-block;font-weight:bold}.zigbee-container .params .param-value .slider-container{display:flex;align-items:center}.zigbee-container .params .param-value .unit{font-size:.8em;margin-left:1em;display:inline}.zigbee-container .params .param-value select{width:100%;border-radius:2em}.zigbee-container .params .param-value .numeric input.slider{text-align:left}.zigbee-container .params .param-value .numeric input[type=text]{text-align:right;width:100%}.zigbee-container .params .param-value .numeric .row{background:none}.zigbee-container .params .param-value .numeric .row:hover{background:none}.zigbee-container .params .param-value .numeric .value-min,.zigbee-container .params .param-value .numeric .value-max{width:50%;font-size:.85em;opacity:.75}.zigbee-container .params .param-value .numeric .value-min{text-align:left}.zigbee-container .params .param-value .numeric .value-max{text-align:right}.zigbee-container .btn-value-name-edit{padding:0}.zigbee-container .modal .section .header{background:none;padding:.5em 0}.zigbee-container .modal .section .body{padding:0}.zigbee-container .modal .network-info{min-width:600pt}.zigbee-container .error{color:#a00}.zigbee-container .device .actions .row,.zigbee-container .group .actions .row{cursor:pointer}.zigbee-container .device form,.zigbee-container .group form{margin-bottom:0}.zigbee-container .device .param-value input[type=text],.zigbee-container .group .param-value input[type=text]{text-align:right}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.fa.fa-zwave:before{content:' ';background:url('/static/img/icons/z-wave-logo.png');background-size:1em 1em;width:1em;height:1em;display:inline-block}.zwave-container{height:100%;padding:0 .5em;background:#f1f1f1;display:flex;flex-direction:column;align-items:center;overflow:auto}.zwave-container .no-items{padding:2em;font-size:1.5em;color:#555;display:flex;align-items:center;justify-content:center}.zwave-container .view-options{display:flex;width:100%;justify-content:space-between;padding:1em 0}.zwave-container .view-options .view-selector{display:inline-flex}.zwave-container .view-options .buttons{display:inline-flex}.zwave-container .view-options select{width:100%;border-radius:1em}.zwave-container .btn-default{border:0;padding:0 1em}.zwave-container .btn-default:hover{border:1px solid #ddd;border-radius:1em}.zwave-container .buttons{text-align:right}.zwave-container .view{min-width:400pt;max-width:750pt;background:#fff;border:1px solid #d8d8d8;border-radius:1.5em;box-shadow:1px 2px 2px #ccc}.zwave-container .item.selected{box-shadow:0 2px 4px 0 #bbb}.zwave-container .item .name{padding:1em;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}.zwave-container .item .name.selected{border-radius:1.5em}.zwave-container .item:hover{background:#def6ea}.zwave-container .item:not(:last-child){border-bottom:1px solid #ddd}.zwave-container .item:first-child{border-radius:1.5em 1.5em 0 0}.zwave-container .item:last-child{border-radius:0 0 1.5em 1.5em}.zwave-container .params{background:#fff;padding-bottom:1em}.zwave-container .params .section{display:flex;flex-direction:column;padding:0 1em}.zwave-container .params .section:not(:first-child){padding-top:1em}.zwave-container .params .section .header{display:flex;align-items:center;font-weight:bold;border-bottom:1px solid #e8e8e8}.zwave-container .params .row{display:flex;align-items:center;border-radius:1em;padding:.3em}.zwave-container .params .row:nth-child(even){background:#ededed}.zwave-container .params .row:nth-child(odd){background:#fff}.zwave-container .params .row:hover{background:#def6ea}.zwave-container .params .param-name{display:inline-flex;width:40%;margin-left:1%;vertical-align:top;letter-spacing:.04em}.zwave-container .params .param-value{display:inline-block;width:58%;text-align:right}.zwave-container .params .param-value .value-edit{display:flex;align-items:center}.zwave-container .params .param-value .value-data{display:inline-block;font-weight:bold}.zwave-container .params .param-value .slider-container{display:flex;align-items:center}.zwave-container .params .param-value .unit{font-size:.8em;margin-left:1em;display:inline}.zwave-container .params .param-value select{width:100%;border-radius:2em}.zwave-container .params .param-value .numeric input.slider{text-align:left}.zwave-container .params .param-value .numeric input[type=text]{text-align:right;width:100%}.zwave-container .params .param-value .numeric .row{background:none}.zwave-container .params .param-value .numeric .row:hover{background:none}.zwave-container .params .param-value .numeric .value-min,.zwave-container .params .param-value .numeric .value-max{width:50%;font-size:.85em;opacity:.75}.zwave-container .params .param-value .numeric .value-min{text-align:left}.zwave-container .params .param-value .numeric .value-max{text-align:right}.zwave-container .btn-value-name-edit{padding:0}.zwave-container .modal .section .header{background:none;padding:.5em 0}.zwave-container .modal .section .body{padding:0}.zwave-container .modal .network-info{min-width:600pt}.zwave-container .error{color:#a00}.zwave-container .node .actions .row,.zwave-container .scene .actions .row{cursor:pointer}.zwave-container .node form,.zwave-container .scene form{margin-bottom:0}
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,418 +0,0 @@
|
|||
/*
|
||||
* Skeleton V2.0.4
|
||||
* Copyright 2014, Dave Gamache
|
||||
* www.getskeleton.com
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 12/29/2014
|
||||
*/
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Grid
|
||||
- Base Styles
|
||||
- Typography
|
||||
- Links
|
||||
- Buttons
|
||||
- Forms
|
||||
- Lists
|
||||
- Code
|
||||
- Tables
|
||||
- Spacing
|
||||
- Utilities
|
||||
- Clearing
|
||||
- Media Queries
|
||||
*/
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.one.column,
|
||||
.one.columns { width: 4.66666666667%; }
|
||||
.two.columns { width: 13.3333333333%; }
|
||||
.three.columns { width: 22%; }
|
||||
.four.columns { width: 30.6666666667%; }
|
||||
.five.columns { width: 39.3333333333%; }
|
||||
.six.columns { width: 48%; }
|
||||
.seven.columns { width: 56.6666666667%; }
|
||||
.eight.columns { width: 65.3333333333%; }
|
||||
.nine.columns { width: 74.0%; }
|
||||
.ten.columns { width: 82.6666666667%; }
|
||||
.eleven.columns { width: 91.3333333333%; }
|
||||
.twelve.columns { width: 100%; margin-left: 0; }
|
||||
|
||||
.one-third.column { width: 30.6666666667%; }
|
||||
.two-thirds.column { width: 65.3333333333%; }
|
||||
|
||||
.one-half.column { width: 48%; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { margin-left: 26%; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { margin-left: 52%; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { margin-left: 52%; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
body {
|
||||
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
h1 { font-size: 5.0rem; }
|
||||
h2 { font-size: 4.2rem; }
|
||||
h3 { font-size: 3.6rem; }
|
||||
h4 { font-size: 3.0rem; }
|
||||
h5 { font-size: 2.4rem; }
|
||||
h6 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
|
||||
/* Lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
ul {
|
||||
list-style: circle inside; }
|
||||
ol {
|
||||
list-style: decimal inside; }
|
||||
ol, ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0; }
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
font-size: 90%; }
|
||||
li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #E1E1E1; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #E1E1E1; }
|
||||
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
/* Media Queries
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
Note: The best way to structure the use of media queries is to create the queries
|
||||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||
on small devices, paste the mobile query code up in the buttons section and style it
|
||||
there.
|
||||
*/
|
||||
|
||||
|
||||
/* Larger than mobile */
|
||||
@media (min-width: 400px) {}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
@media (min-width: 550px) {}
|
||||
|
||||
/* Larger than tablet */
|
||||
@media (min-width: 750px) {}
|
||||
|
||||
/* Larger than desktop */
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
.fade-in {
|
||||
--duration: $fade-in-transition-duration;
|
||||
animation-name: fadeIn;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: var(--duration);
|
||||
animation-fill-mode:both;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.roll-in {
|
||||
--duration: $roll-in-transition-duration;
|
||||
animation-name: rollIn;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: var(--duration);
|
||||
animation-fill-mode:both;
|
||||
}
|
||||
|
||||
@keyframes rollIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform:translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform:translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.active-glow {
|
||||
@include animation(active-glow 5s infinite);
|
||||
}
|
||||
|
||||
@keyframes active-glow {
|
||||
0% { background: $active-glow-bg-1; }
|
||||
50% { background: $active-glow-bg-2; }
|
||||
100% { background: $active-glow-bg-1; }
|
||||
}
|
||||
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
//// General purpose classes and rules /////
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: $selected-bg;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-moz-focus-outer,
|
||||
::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
|
||||
//// UI elements definitions /////
|
||||
|
||||
@import 'common/elements/button';
|
||||
@import 'common/elements/switch';
|
||||
@import 'common/elements/range-slider';
|
||||
@import 'common/elements/slider';
|
||||
@import 'common/elements/text';
|
||||
@import 'common/elements/dropdown';
|
||||
@import 'common/elements/autocomplete';
|
||||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.autocomplete {
|
||||
/*the container must be positioned relative:*/
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
border: $default-border-2;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
border-bottom: $default-border-2;
|
||||
background-color: $autocomplete-bg;
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
background-color: $hover-bg;
|
||||
}
|
||||
|
||||
.autocomplete-active {
|
||||
background-color: $selected-bg !important;
|
||||
}
|
||||
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
button[disabled],
|
||||
.button[disabled] {
|
||||
color: #bbb;
|
||||
background: rgba(240,240,240,1);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #d8ffe0 !important;
|
||||
border: 1px solid #c2f0cf !important;
|
||||
}
|
||||
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
background: $default-bg-3;
|
||||
border-radius: .75rem;
|
||||
border: $default-border-3;
|
||||
box-shadow: $dropdown-shadow;
|
||||
min-width: 15rem;
|
||||
|
||||
.item {
|
||||
margin: 0 !important;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
color: $dropdown-disabled-color;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@supports (--css: variables) {
|
||||
.input-range-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="range"].multirange {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
opacity: 1 !important;
|
||||
|
||||
&.original {
|
||||
position: absolute;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1); /* FF doesn't apply position it seems */
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
border-color: transparent; /* needed to switch FF to "styleable" control */
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
position: relative;
|
||||
background: var(--track-background);
|
||||
--track-background: linear-gradient(to right,
|
||||
transparent var(--low), var(--range-color) 0,
|
||||
var(--range-color) var(--high), transparent 0
|
||||
) no-repeat 0 45% / 100% 40%;
|
||||
--range-color: $slider-progress-bg;
|
||||
|
||||
&::-webkit-slider-runnable-track,
|
||||
&::-moz-range-track {
|
||||
background: var(--track-background);
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]::-webkit-slider-thumb,
|
||||
&[disabled]::-moz-range-thumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value,
|
||||
&::-moz-range-progress {
|
||||
@include appearance(none);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@import 'common/mixins';
|
||||
|
||||
.slider {
|
||||
@include appearance(none);
|
||||
@include transition(opacity .2s);
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
border-radius: 5px;
|
||||
background: $slider-bg;
|
||||
outline: none;
|
||||
|
||||
// Cursed be thy name Chrome for forcing designers to this hysterical redundancy
|
||||
&::-webkit-slider-thumb {
|
||||
@include appearance(none);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
background: $slider-thumb-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include appearance(none);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
background: $slider-thumb-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[disabled]::-webkit-slider-thumb {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&[disabled]::-moz-range-thumb {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&.disabled { opacity: 0.3; }
|
||||
|
||||
&::-moz-range-track {
|
||||
@include appearance(none);
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
background: $slider-progress-bg;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&[disabled]::-webkit-progress-value {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&[disabled]::-moz-range-progress {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Francois+One);
|
||||
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Audiowide';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
padding: .5rem 0;
|
||||
|
||||
input[type=checkbox] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
label, label:before, label:after,
|
||||
input[type=checkbox], input[type=checkbox]:before, input[type=checkbox]:after,
|
||||
.feature, .feature:before, .feature:after {
|
||||
transition: all 250ms ease-in;
|
||||
}
|
||||
|
||||
label:before, label:after,
|
||||
input[type=checkbox]:before, input[type=checkbox]:after,
|
||||
.feature:before, .feature:after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: $switch-bg-1;
|
||||
border-radius: 50%;
|
||||
box-shadow: $switch-shadow-1;
|
||||
display: block;
|
||||
margin: .5rem auto 0 auto;
|
||||
font-size: 1.4em;
|
||||
transition: all 350ms ease-in;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 22.7272727273px;
|
||||
height: 22.7272727273px;
|
||||
border-radius: 50%;
|
||||
background-color: $switch-bg-2;
|
||||
box-shadow: $switch-shadow-2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
background-color: $switch-bg-3;
|
||||
box-shadow: $switch-shadow-3;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before { box-shadow: $switch-shadow-hover; }
|
||||
&:after { background-color: $switch-bg-hover; }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label {
|
||||
box-shadow: $switch-shadow-checked-1;
|
||||
&:before { box-shadow: $switch-shadow-checked-2; }
|
||||
&:after { background-color: $switch-bg-checked; }
|
||||
}
|
||||
|
||||
&.glow {
|
||||
label {
|
||||
background-color: $switch-bg-glow-2;
|
||||
box-shadow: $switch-shadow-glow-1;
|
||||
|
||||
&:before { box-shadow: $switch-shadow-glow-2; }
|
||||
&:after {
|
||||
background-color: $switch-bg-glow-3;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
&:before { box-shadow: $switch-shadow-glow-hover; }
|
||||
&:after { background-color: $switch-bg-glow-hover; }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label {
|
||||
box-shadow: $switch-shadow-glow-checked-1;
|
||||
&:before { box-shadow: $switch-shadow-glow-checked-2; }
|
||||
&:after { background-color: $switch-bg-glow-checked; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
min-width: 3rem;
|
||||
padding: 1rem;
|
||||
color: $text-icon-color;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
border-radius: 5rem;
|
||||
|
||||
&:hover {
|
||||
border: $border-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $border-focus;
|
||||
}
|
||||
|
||||
&.with-icon {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
$widths: (
|
||||
s: '(max-width: 720px)',
|
||||
m: '(max-width: 1024px) and (min-width: 720px)',
|
||||
l: '(min-width: 1024px)',
|
||||
);
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$i} {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
@if $i < 12 {
|
||||
width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
|
||||
margin-left: 4%;
|
||||
} @else {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col-no-margin-#{$i} {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: ((100%/12)*$i);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@if $i < 12 {
|
||||
.col-offset-#{$i}:first-child {
|
||||
margin-left: (8.66666666667%*$i) !important;
|
||||
}
|
||||
.col-offset-#{$i}:not(first-child) {
|
||||
margin-left: 4% + (8.66666666667%*$i) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $size, $width in $widths {
|
||||
@media #{$width} {
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$size}-#{$i} {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
@if $i < 12 {
|
||||
width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
|
||||
margin-left: 4%;
|
||||
} @else {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $i < 12 {
|
||||
.col-offset-#{$size}-#{$i} {
|
||||
margin-left: (8.66666666667%*$i);
|
||||
}
|
||||
}
|
||||
|
||||
.col-no-margin-#{$size}-#{$i} {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: ((100%/12)*$i);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$size}-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.#{$size}-visible {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) and (orientation:portrait) {
|
||||
body {
|
||||
font-size: $default-font-size-vertial;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@mixin appearance($value) {
|
||||
-webkit-appearance: $value;
|
||||
-ms-appearance: $value;
|
||||
-o-appearance: $value;
|
||||
-ms-appearance: $value;
|
||||
appearance: $value;
|
||||
}
|
||||
|
||||
@mixin transition($value) {
|
||||
-webkit-transition: $value;
|
||||
-ms-transition: $value;
|
||||
-o-transition: $value;
|
||||
-ms-transition: $value;
|
||||
transition: $value;
|
||||
}
|
||||
|
||||
@mixin animation($value) {
|
||||
-webkit-animation: $value;
|
||||
-ms-animation: $value;
|
||||
-o-animation: $value;
|
||||
-ms-animation: $value;
|
||||
animation: $value;
|
||||
}
|
||||
|
||||
@mixin box-shadow($value) {
|
||||
-webkit-box-shadow: $value;
|
||||
-o-box-shadow: $value;
|
||||
-ms-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
}
|
||||
|
||||
@mixin calc($property, $expression) {
|
||||
#{$property}: -webkit-calc( #{$expression} );
|
||||
#{$property}: -moz-calc( #{$expression} );
|
||||
#{$property}: calc( #{$expression} );
|
||||
}
|
||||
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.modal-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: var(--z-index);
|
||||
background: rgba(10,10,10,0.9);
|
||||
|
||||
.modal {
|
||||
--width: auto;
|
||||
--height: auto;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
|
||||
.header {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.body:first-child {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.body:not(first-child) {
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: $modal-header-border;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
background: $modal-header-bg;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1rem;
|
||||
line-height: 3.8rem;
|
||||
}
|
||||
|
||||
.body {
|
||||
max-height: 75vh;
|
||||
overflow: auto;
|
||||
padding: 2.5rem 2rem 1.5rem 2rem;
|
||||
background: $modal-body-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
#notifications {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 25em;
|
||||
z-index: 1000;
|
||||
|
||||
.notification {
|
||||
background: $notification-bg;
|
||||
border: $notification-border;
|
||||
border-radius: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $notification-hover-bg;
|
||||
&.warning { background: $notification-warning-hover-bg; }
|
||||
&.error { background: $notification-error-hover-bg; }
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: $notification-warning-bg;
|
||||
border: $notification-warning-border;
|
||||
.image { --color: $notification-warning-icon-color; }
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: $notification-error-bg;
|
||||
border: $notification-error-border;
|
||||
.image { --color: $notification-error-icon-color; }
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: .4rem;
|
||||
line-height: 3rem;
|
||||
letter-spacing: .1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.body {
|
||||
@extend .vertical-center;
|
||||
height: 6em;
|
||||
overflow: hidden;
|
||||
padding-bottom: 1rem;
|
||||
letter-spacing: .05rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
--color: $notification-icon-color;
|
||||
|
||||
.row {
|
||||
@extend .vertical-center;
|
||||
@extend .horizontal-center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.fa {
|
||||
font-size: 2.5rem;
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
//// Common defaults
|
||||
$default-bg: white !default;
|
||||
$default-bg-2: #f4f5f6 !default;
|
||||
$default-bg-3: #f1f3f2 !default;
|
||||
$default-bg-4: #edf0ee !default;
|
||||
$default-bg-5: #f8f8f8 !default;
|
||||
$default-bg-6: #e4e4e4 !default;
|
||||
$default-fg: black !default;
|
||||
$default-fg-2: #333333 !default;
|
||||
$default-fg-3: #888888 !default;
|
||||
$default-font-size: 15px !default;
|
||||
$default-font-size-vertial: 25px !default;
|
||||
$default-shadow: 2px 2px 2px #ccc !default;
|
||||
$default-hover-fg: #35b870 !default;
|
||||
$default-hover-fg-2: #38cf80 !default;
|
||||
|
||||
$default-font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$default-border: 1px solid #e1e4e8 !default;
|
||||
$default-border-2: 1px solid #dddddd !default;
|
||||
$default-border-3: 1px solid #cccccc !default;
|
||||
$default-bottom: $default-border !default;
|
||||
$default-link-fg: #5f7869 !default;
|
||||
|
||||
$font-size: $default-font-size !default;
|
||||
$selected-bg: #c8ffd0 !default;
|
||||
$hover-bg: #def6ea !default;
|
||||
$header-bg: $default_bg !default;
|
||||
|
||||
$nav-height: 4.5rem !default;
|
||||
$nav-bg: #e8e8e8 !default;
|
||||
$nav-fg: $default-link-fg;
|
||||
$nav-margin: .2rem;
|
||||
$nav-date-time-shadow: .2rem .2rem .2rem #ccc !default;
|
||||
|
||||
//// Animations defaults
|
||||
$transition-duration: .5s !default;
|
||||
$fade-transition-duration: $transition-duration !default;
|
||||
$roll-transition-duration: $transition-duration !default;
|
||||
$fade-in-transition-duration: $fade-transition-duration !default;
|
||||
$fade-out-transition-duration: $fade-transition-duration !default;
|
||||
$roll-in-transition-duration: $roll-transition-duration !default;
|
||||
$roll-out-transition-duration: $roll-transition-duration !default;
|
||||
$active-glow-bg-1: #d4ffe3 !default;
|
||||
$active-glow-bg-2: #9cdfb0 !default;
|
||||
|
||||
//// Notifications
|
||||
$notification-bg: rgba(185, 255, 193, 0.9) !default;
|
||||
$notification-hover-bg: rgba(160,245,178,0.95) !default;
|
||||
$notification-warning-bg: rgba(228, 255, 78, 0.9) !default;
|
||||
$notification-warning-hover-bg: rgba(218, 245, 68, 0.95) !default;
|
||||
$notification-error-bg: rgba(255, 100, 100, 0.9) !default;
|
||||
$notification-error-hover-bg: rgba(245, 90, 90, 0.95) !default;
|
||||
$notification-border: 1px solid rgba(109, 205, 134, 0.62) !default;
|
||||
$notification-warning-border: 1px solid rgba(205, 205, 109, 0.62) !default;
|
||||
$notification-error-border: 1px solid rgba(205, 109, 109, 0.62) !default;
|
||||
$notification-title-border: 1px solid rgba(83, 158, 102, 0.43) !default;
|
||||
$notification-icon-color: black !default;
|
||||
$notification-warning-icon-color: #662 !default;
|
||||
$notification-error-icon-color: #8b0000 !default;
|
||||
|
||||
//// Switch element
|
||||
$switch-bg-1: #f9f8f6 !default;
|
||||
$switch-bg-2: #38ffa0 !default;
|
||||
$switch-bg-3: #cccccc !default;
|
||||
$switch-bg-hover: #b3b3b3 !default;
|
||||
$switch-bg-checked: #38ffa0 !default;
|
||||
$switch-bg-glow-1: #111111 !default;
|
||||
$switch-bg-glow-2: #ffffff !default;
|
||||
$switch-bg-glow-3: #aaaaaa !default;
|
||||
$switch-bg-glow-hover: #ffffff !default;
|
||||
$switch-bg-glow-checked: #00e094 !default;
|
||||
|
||||
$switch-shadow-1: 0 5px 10px 0px #333, 0 15px 20px 0px #cccccc !default;
|
||||
$switch-shadow-2: inset 0 0 0 5px #ccc, inset 0 0 0 14px #f9f8f6 !default;
|
||||
$switch-shadow-3: 0 0 0 2.5px #f9f8f6 !default;
|
||||
$switch-shadow-hover: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #f9f8f6 !default;
|
||||
$switch-shadow-checked-1: 0 2px 5px 0px gray, 0 15px 20px 0px transparent !default;
|
||||
$switch-shadow-checked-2: inset 0 0 0 5px #38ffa0, inset 0 0 0 14px #f9f8f6 !default;
|
||||
$switch-shadow-glow-1: 0 5px 10px 0 #aaa, 0 0 0 3px #bbb, 0 0 8px 2px transparent, 0 0 0 6px #eee !default;
|
||||
$switch-shadow-glow-2: inset 0 0 0 5px #aaa, inset 0 0 0 14px #fff !default;
|
||||
$switch-shadow-glow-hover: inset 0 0 0 5px #fff, inset 0 0 0 14px #fff !default;
|
||||
$switch-shadow-glow-checked-1: 0 0px 8px 0 #00ad72, 0 0 0 3px #00e094, 0 0 30px 0 #00e094, 0 0 0 6px #fff !default;
|
||||
$switch-shadow-glow-checked-2: inset 0 0 0 5px #00e094, inset 0 0 0 14px #fff !default;
|
||||
|
||||
//// Slider element
|
||||
$slider-bg: #e4e4e4 !default;
|
||||
$slider-thumb-bg: rgba(0,215,80,1.0) !default;
|
||||
$slider-thumb-disabled-bg: rgba(0,215,80,0.3) !default;
|
||||
$slider-hover-on-hover-bg: #d2d2d2 !default;
|
||||
$slider-progress-bg: rgba(0,215,80,0.2) !default;
|
||||
|
||||
//// Input element
|
||||
$text-icon-color: #888;
|
||||
$border-focus: 1px solid rgba(127, 216, 95, 0.83);
|
||||
$border-hover: 1px solid rgba(159, 180, 152, 0.83);
|
||||
$text-shadow: 2px 2px 2px #d4d4d4;
|
||||
|
||||
//// Header style
|
||||
$header-bottom: $default-bottom;
|
||||
|
||||
//// Dropdown element
|
||||
$dropdown-bg: rgba(241,243,242,0.9) !default;
|
||||
$dropdown-disabled-color: #999 !default;
|
||||
$dropdown-shadow: 1px 1px 1px #bbb !default;
|
||||
|
||||
//// Modal element
|
||||
$modal-header-bg: #f0f0f0 !default;
|
||||
$modal-header-border: 1px solid #ccc !default;
|
||||
$modal-body-bg: white !default;
|
||||
|
||||
//// Autocomplete element
|
||||
$autocomplete-bg: white !default;
|
||||
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
@import 'common/elements';
|
||||
@import 'common/animations';
|
||||
@import 'common/modal';
|
||||
@import 'common/notifications';
|
||||
|
||||
$background-image: url('/img/dashboard-background.jpg') !default;
|
||||
$background-color: white !default;
|
||||
$font-family: Lato !default;
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
--background-image: $background-image;
|
||||
--background-color: $background-color;
|
||||
|
||||
background-image: var(--background-image) !important;
|
||||
background-color: var(--background-color);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
||||
.widgets-row {
|
||||
height: calc(50% - 3em);
|
||||
margin: 2em 1em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.widget {
|
||||
background: $background-color;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
|
||||
}
|
||||
}
|
||||
|
||||
#widgets-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.row-#{$i} {
|
||||
height: $i * 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.widget .calendar {
|
||||
padding: 1rem;
|
||||
|
||||
.event {
|
||||
font-size: .95em;
|
||||
}
|
||||
|
||||
.upcoming-event {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.2em;
|
||||
|
||||
.summary {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.widget .date-time-weather {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 1rem;
|
||||
|
||||
.date {
|
||||
font-size: 1.3em;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 2em;
|
||||
height: 14%;
|
||||
}
|
||||
|
||||
.weather {
|
||||
height: 35%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.temperature {
|
||||
font-size: 2em;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
height: 28%;
|
||||
}
|
||||
|
||||
.sensors {
|
||||
width: 100%;
|
||||
height: 13%;
|
||||
|
||||
.sensor {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.humidity {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.widget .image-carousel {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0,0,0,0);
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0,0,0,0);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(13px);
|
||||
-webkit-filter: blur(13px);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
max-height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
$progress-bar-bg: #ddd;
|
||||
$playback-status-color: #757f70;
|
||||
|
||||
.widget .music {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.track {
|
||||
text-align: center;
|
||||
|
||||
.unknown,
|
||||
.no-track {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: 1.9em;
|
||||
font-weight: bold;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
font-size: 1.2em;
|
||||
|
||||
.row {
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
.time-total {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
margin-bottom: .75em;
|
||||
|
||||
.total {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: $progress-bar-bg;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
.elapsed {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: $selected-bg;
|
||||
border-radius: 5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playback-status {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-top: $default-border-2;
|
||||
color: $playback-status-color;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
|
||||
.status-property {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.widget .rss-news {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.article {
|
||||
width: 90%;
|
||||
padding: 0 2em;
|
||||
|
||||
.source {
|
||||
font-size: 1.7em;
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.7em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.published {
|
||||
text-align: right;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
@import 'common/elements';
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
font-family: $default-font-family;
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
|
||||
form {
|
||||
border: $default-border-3;
|
||||
border-radius: 3em;
|
||||
padding: 4em;
|
||||
|
||||
.row {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $default-link-fg;
|
||||
}
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
login
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
@import 'common/elements';
|
||||
@import 'common/animations';
|
||||
@import 'common/modal';
|
||||
@import 'common/notifications';
|
||||
|
||||
@import 'settings/users';
|
||||
@import 'settings/token';
|
||||
|
||||
$nav-background: #f0f0f0;
|
||||
$section-header-background: #eee;
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
font-family: $default-font-family;
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
nav {
|
||||
background: $nav-background;
|
||||
color: $default-link-fg;
|
||||
border-right: $default-border-3;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: $default-border-3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
height: inherit;
|
||||
|
||||
.section {
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: $default-border-2;
|
||||
background: $section-header-background;
|
||||
|
||||
h1 {
|
||||
margin: .45em .2em;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $default-link-fg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
#token {
|
||||
.warning {
|
||||
background: $notification-error-bg;
|
||||
border: $notification-error-border;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.token-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 2em;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
#users {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 1em .5em;
|
||||
border-bottom: $default-border-3;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20em;
|
||||
|
||||
input {
|
||||
margin: 1em .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
@import 'common/elements';
|
||||
@import 'common/animations';
|
||||
@import 'common/modal';
|
||||
@import 'common/notifications';
|
||||
|
||||
@import 'nav';
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
font-family: $default-font-family;
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
|
||||
main {
|
||||
background: $default-bg;
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
// nav height hardcoded, calc won't support either CSS4 nor SASS vars
|
||||
@include calc(height, '100vh - 4.8rem');
|
||||
|
||||
.plugins-container {
|
||||
height: inherit;
|
||||
|
||||
.plugin-container {
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
|
||||
.plugin {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $default-link-fg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
:root {
|
||||
--nav-height: $nav-height;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: var(--nav-height);
|
||||
background: $nav-bg;
|
||||
margin-bottom: $nav-margin;
|
||||
border-bottom: $default-bottom;
|
||||
box-shadow: 0 2.5px 4px 0 #bbb;
|
||||
flex: 0 1 auto;
|
||||
z-index: 2;
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
padding: 1rem 1.5rem;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1rem;
|
||||
border-radius: 2rem;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
letter-spacing: .4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: $nav-fg;
|
||||
|
||||
&:hover {
|
||||
color: $nav-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.decorator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.selected {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-time {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
display: inline-block;
|
||||
right: 0;
|
||||
margin-right: .7rem;
|
||||
font-size: 14pt;
|
||||
text-shadow: $nav-date-time-shadow;
|
||||
|
||||
.time {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
display: inline-block;
|
||||
padding: .75rem 1rem;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
$icon-color: #7e8;
|
||||
$icon-border: 1px solid #ccc;
|
||||
$icon-shadow: 2px 2px 2px #ccc;
|
||||
|
||||
#assistant-google-modal {
|
||||
.modal {
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
|
||||
.body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
font-size: 3em;
|
||||
color: $icon-color;
|
||||
box-shadow: $icon-shadow;
|
||||
border: $icon-border;
|
||||
border-radius: 3em;
|
||||
padding: .7em 1em .5em 1em;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.camera {
|
||||
min-height: 90%;
|
||||
margin-top: 4%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.camera-container {
|
||||
min-width: 640px;
|
||||
min-height: 480px;
|
||||
position: relative;
|
||||
background: black;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.frame, .no-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.no-frame {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
camera
|
||||
|
|
@ -1 +0,0 @@
|
|||
camera
|
||||
|
|
@ -1 +0,0 @@
|
|||
camera
|
||||
|
|
@ -1 +0,0 @@
|
|||
camera
|
||||
|
|
@ -1 +0,0 @@
|
|||
camera
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.camera {
|
||||
min-height: 90%;
|
||||
margin-top: 4%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.camera-container {
|
||||
position: relative;
|
||||
background: black;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.frame, .no-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.no-frame {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 640px;
|
||||
display: flex;
|
||||
margin: 1em;
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 500px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.params {
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: $default-border-3;
|
||||
border-radius: 1em;
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
|
||||
.name {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 0 -1em;
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
|
||||
.name {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $default-bg-6;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
@import 'common/vars';
|
||||
@import 'common/layout';
|
||||
@import 'webpanel/plugins/execute/vars';
|
||||
|
||||
.execute-container {
|
||||
height: 99%;
|
||||
color: $default-fg-2;
|
||||
font-weight: 400;
|
||||
//line-height: 3.8rem;
|
||||
//letter-spacing: .1rem;
|
||||
border-bottom: $default-border-2;
|
||||
border-radius: 0 0 1em 1em;
|
||||
|
||||
.title {
|
||||
background: $title-bg;
|
||||
padding: .2em;
|
||||
border: $title-border;
|
||||
box-shadow: $title-shadow;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.request-type-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
margin: 1em 0 0 1em;
|
||||
|
||||
label {
|
||||
margin: 0 1em 0 .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.request {
|
||||
margin: 0 .5em;
|
||||
|
||||
form {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
width: 80%;
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
box-shadow: $action-name-shadow;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[type=submit] {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
margin-top: .5em;
|
||||
margin-bottom: 1.5em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
.params {
|
||||
margin-right: 1.5em;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
|
||||
.param {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.action-param-value {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-param {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
background: $extra-params-btn-bg;
|
||||
border: $title-border;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-param {
|
||||
display: flex;
|
||||
margin-bottom: .5em;
|
||||
|
||||
.action-extra-param-del {
|
||||
border: 0;
|
||||
text-align: right;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.output-container {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
|
||||
.response,
|
||||
.error,
|
||||
.doc {
|
||||
padding: .5em .5em 0 .5em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.response {
|
||||
background: $response-bg;
|
||||
border: $response-border;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: $error-bg;
|
||||
border: $error-border;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: $doc-bg;
|
||||
border: $doc-border;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 80%;
|
||||
max-width: 60em;
|
||||
height: 10em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.raw-request {
|
||||
.first-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.procedures-container {
|
||||
.procedure {
|
||||
border-bottom: $default-border-2;
|
||||
padding: 1.5em .5em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $selected-bg;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
margin-bottom: 0 !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $procedure-submit-btn-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
$title-bg: #eee;
|
||||
$title-border: 1px solid #ddd;
|
||||
$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
|
||||
$action-name-shadow: 1px 1px 1px 1px #ddd;
|
||||
$extra-params-btn-bg: #eee;
|
||||
$response-bg: #edfff2;
|
||||
$response-border: 1px dashed #98ff98;
|
||||
$error-bg: #ffbcbc;
|
||||
$error-border: 1px dashed #ff5353;
|
||||
$doc-bg: #e8feff;
|
||||
$doc-border: 1px dashed #84f9ff;
|
||||
$procedure-submit-btn-bg: #ebffeb;
|
||||
|
||||
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.gpio-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.refresh {
|
||||
border-bottom: $default-border-2;
|
||||
background: $default-bg-5;
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pins {
|
||||
.pin {
|
||||
padding: 1em;
|
||||
border-bottom: $default-border-2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $modal-header-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
@import 'common/vars';
|
||||
@import 'common/layout';
|
||||
@import 'webpanel/plugins/light.hue/vars';
|
||||
|
||||
.light-hue-container {
|
||||
display: flex;
|
||||
color: $default-fg-2;
|
||||
font-weight: 400;
|
||||
line-height: 3.8rem;
|
||||
letter-spacing: .1rem;
|
||||
border-bottom: $default-border-2;
|
||||
border-radius: 0 0 1em 1em;
|
||||
|
||||
%panel {
|
||||
margin: 1.5rem auto;
|
||||
padding: 1.5rem;
|
||||
font-weight: 100;
|
||||
border: $default-border-2;
|
||||
border-radius: 1.5rem;
|
||||
background: $light-hue-properties-bg;
|
||||
box-shadow: $light-hue-properties-shadow;
|
||||
}
|
||||
|
||||
.groups,
|
||||
.scenes,
|
||||
.units {
|
||||
&:not(:last-child) {
|
||||
border-right: $default-border-2;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: .75rem;
|
||||
background: $default-bg-2;
|
||||
border-bottom: $default-border-2;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.group,
|
||||
.scene,
|
||||
.unit,
|
||||
.animations,
|
||||
.group-controller {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: $default-border-2;
|
||||
}
|
||||
|
||||
&:not(.hidden) {
|
||||
.row {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
* > .properties {
|
||||
@extend %panel;
|
||||
|
||||
.slider-container {
|
||||
@extend .vertical-center;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
* > .fa {
|
||||
font-size: 2.5rem;
|
||||
color: $light-hue-icon-color;
|
||||
}
|
||||
|
||||
* > .color-logo {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
* > .color-logo-red { background-color: red; }
|
||||
* > .color-logo-green { background-color: green; }
|
||||
* > .color-logo-blue { background-color: blue; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
* > .properties {
|
||||
background: $light-hue-properties-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.group-controller {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.animations {
|
||||
.row {
|
||||
.caption {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.animation-container {
|
||||
@extend %panel;
|
||||
cursor: auto;
|
||||
|
||||
.animation {
|
||||
.row {
|
||||
padding: 1rem .3333rem;
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
border-radius: 1.5rem;
|
||||
|
||||
* > input[type=range] {
|
||||
background: $slider-hover-on-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select[name=animation-type] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
* > .input-range-container {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
* > input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.row {
|
||||
.animation-container {
|
||||
background: $light-hue-properties-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groups {
|
||||
.title {
|
||||
border-radius: 1rem 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.units {
|
||||
.title {
|
||||
border-radius: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$light-hue-properties-bg: rgba(239,239,240,0.5);
|
||||
$light-hue-properties-hover-bg: white;
|
||||
$light-hue-properties-shadow: 0 0 4px 2px rgba(187,187,187,0.75);
|
||||
$light-hue-icon-color: #555;
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
media
|
||||
|
|
@ -1 +0,0 @@
|
|||
media
|
||||
|
|
@ -1 +0,0 @@
|
|||
media
|
||||
|
|
@ -1 +0,0 @@
|
|||
media
|
||||
|
|
@ -1 +0,0 @@
|
|||
media
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
.media-plugin {
|
||||
.controls {
|
||||
@extend .vertical-center;
|
||||
width: 100%;
|
||||
border-top: $default-border-2;
|
||||
box-shadow: $control-panel-shadow;
|
||||
flex: 0 0 $control-panel-height;
|
||||
|
||||
.item-container {
|
||||
@extend .vertical-center;
|
||||
padding-left: 1rem;
|
||||
line-height: 2.6rem;
|
||||
|
||||
.item-info {
|
||||
font-size: 1.15em;
|
||||
letter-spacing: .02em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&:hover {
|
||||
.fa {
|
||||
color: $button-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playback-controls {
|
||||
.row {
|
||||
@extend .vertical-center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.position {
|
||||
margin-top: .75em;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 1.5rem;
|
||||
|
||||
.fa-play, .fa-pause {
|
||||
color: $button-hover-color;
|
||||
font-size: $font-size * 2;
|
||||
margin-top: .3rem;
|
||||
|
||||
&:hover {
|
||||
color: $play-button-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
button {
|
||||
&:not(last-child) {
|
||||
padding: 0 .7rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.volume-container {
|
||||
button {
|
||||
padding: 0 .3rem 0 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seek-slider {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
width: 75%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.elapsed-time,
|
||||
.total-time {
|
||||
font-size: .7em;
|
||||
color: .7em;
|
||||
}
|
||||
|
||||
.elapsed-time {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.total-time {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.media-plugin {
|
||||
.devices {
|
||||
display: inline-block;
|
||||
|
||||
button {
|
||||
padding: .5rem;
|
||||
margin-right: .5rem;
|
||||
|
||||
&.selected {
|
||||
background: initial;
|
||||
color: $default-hover-fg;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
white-space: nowrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
text-align: left;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-bottom: $default-border-3;
|
||||
color: $devices-dropdown-refresh-fg;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@import 'common/vars';
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
@import 'common/animations';
|
||||
|
||||
@import 'webpanel/plugins/media/vars';
|
||||
@import 'webpanel/plugins/media/search';
|
||||
@import 'webpanel/plugins/media/devices';
|
||||
@import 'webpanel/plugins/media/results';
|
||||
@import 'webpanel/plugins/media/controls';
|
||||
@import 'webpanel/plugins/media/info';
|
||||
@import 'webpanel/plugins/media/subs';
|
||||
@import 'webpanel/plugins/media/torrents';
|
||||
|
||||
.media-plugin {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: inherit;
|
||||
letter-spacing: .03rem;
|
||||
|
||||
.dropdown {
|
||||
z-index: $devices-dropdown-z-index;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $result-item-icon;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.top-buttons {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.media-plugin {
|
||||
#media-info {
|
||||
.modal {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .75em .5em;
|
||||
border-bottom: $default-border-2;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255,255,255,0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.attr {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@import 'common/animations';
|
||||
|
||||
.media-plugin {
|
||||
.results {
|
||||
position: relative; // For the dropdown menu
|
||||
overflow: auto;
|
||||
@include calc(height, '100%');
|
||||
|
||||
&.resize {
|
||||
@include calc(height, '100% - 16rem');
|
||||
}
|
||||
|
||||
.active {
|
||||
@extend .active-glow;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
letter-spacing: .1rem;
|
||||
color: $empty-results-color;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
padding: .5rem;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
&:hover { background: $hover-bg; }
|
||||
&.selected { background: $selected-bg; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
.media-plugin {
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: $default-bg-3;
|
||||
border-bottom: $default-border-3;
|
||||
|
||||
input[type=text] {
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
[type=submit] {
|
||||
color: $default-hover-fg;
|
||||
font-size: 1.2em;
|
||||
|
||||
&:hover {
|
||||
border: $default-border-2;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
.type {
|
||||
display: inline-block;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 2rem;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.media-plugin {
|
||||
#media-subs {
|
||||
.body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.subs-container {
|
||||
.loading, .no-results {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 3rem;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.subs {
|
||||
.list {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .75em .5em;
|
||||
border-bottom: $default-border-2;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
&.selected { background: $selected-bg; }
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: relative;
|
||||
padding: 1.5rem 0;
|
||||
height: $subs-control-height;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 1rem;
|
||||
border: $default-border-2;
|
||||
box-shadow: $btn-default-shadow;
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
box-shadow: $btn-hover-default-shadow;
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
.media-plugin {
|
||||
#media-torrents {
|
||||
.modal {
|
||||
width: 90%;
|
||||
|
||||
.body {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
.search {
|
||||
input[type=text] {
|
||||
width: 88%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
width: 8%;
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
font-weight: bold;
|
||||
padding: .5rem 0 2.5rem 0;
|
||||
background: $torrents-head-bg;
|
||||
border-bottom: $default-border-3;
|
||||
}
|
||||
|
||||
.transfers-container {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.transfer {
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255,255,255,0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
&.selected { background: $selected-bg; }
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
$button-enabled-color: #59df3e;
|
||||
$button-hover-color: $button-enabled-color;
|
||||
$play-button-hover-color: #64ef4a;
|
||||
|
||||
$control-panel-bg: rgba(245,245,245,0.95);
|
||||
$control-panel-height: 10rem !default;
|
||||
$control-panel-shadow: 0 -2.5px 4px 0 #c0c0c0;
|
||||
$control-time-color: #666;
|
||||
|
||||
$empty-results-color: #506050;
|
||||
$result-item-icon: #444;
|
||||
|
||||
$devices-dropdown-z-index: 2;
|
||||
$devices-dropdown-refresh-fg: #666;
|
||||
|
||||
$subs-control-height: 4rem;
|
||||
$btn-default-shadow: 2px 2px 2px #ddd;
|
||||
$btn-hover-default-shadow: 3px 3px 3px #ddd;
|
||||
|
||||
$torrents-head-bg: #e8e8e8;
|
||||
|
||||
|
|
@ -1,453 +0,0 @@
|
|||
@import 'common/vars';
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
@import 'common/animations';
|
||||
|
||||
@import 'webpanel/plugins/music.mpd/vars';
|
||||
|
||||
.music-mpd-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 3rem;
|
||||
letter-spacing: .03rem;
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
padding: .5rem;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
&:hover { background: $hover-bg !important; }
|
||||
&.selected { background: $selected-bg !important; }
|
||||
|
||||
.artist {
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: $duration-color;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
|
||||
&:disabled {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
color: $button-enabled-color !important;
|
||||
.fa { color: $button-enabled-color !important; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.panels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 0 1 auto;
|
||||
order: 0;
|
||||
@include calc(height, '100% - 10.1rem');
|
||||
|
||||
.panel {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.browser {
|
||||
width: 40%;
|
||||
min-width: 20rem;
|
||||
max-width: 35rem;
|
||||
background: $browser-panel-bg;
|
||||
font-size: .9em;
|
||||
|
||||
.item {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
%ctrl-button {
|
||||
border: 0;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
&:disabled {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
color: $button-enabled-color;
|
||||
}
|
||||
|
||||
.fa-search {
|
||||
color: $button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
%move {
|
||||
background: $move-mode-track-bg !important;
|
||||
border-top: $move-mode-track-border;
|
||||
border-bottom: $move-mode-track-border;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.browser,
|
||||
.search,
|
||||
.playlist {
|
||||
.results {
|
||||
position: relative; // For the dropdown menu
|
||||
@include calc(height, '100% - 5.1rem');
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.browser-controls,
|
||||
.results-controls,
|
||||
.playlist-controls {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: $playlist-controls-bg;
|
||||
border-bottom: $playlist-controls-border;
|
||||
padding: .5rem 0;
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %ctrl-button;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 5rem;
|
||||
color: $empty-playlist-color;
|
||||
text-shadow: $empty-playlist-shadow;
|
||||
}
|
||||
|
||||
.item {
|
||||
.empty {
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 4rem;
|
||||
@extend .active-glow;
|
||||
}
|
||||
|
||||
&.move:hover {
|
||||
@extend %move;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist {
|
||||
width: 100%;
|
||||
}
|
||||
.playlist-add,
|
||||
.editor {
|
||||
.editor-controls,
|
||||
.playlist-add-controls {
|
||||
background: $playlist-controls-bg;
|
||||
border-bottom: $playlist-controls-border;
|
||||
border-radius: 0;
|
||||
box-shadow: $filter-bar-shadow;
|
||||
margin: -2.5rem -2rem 0 -2rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %ctrl-button;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
.editor-container,
|
||||
.playlists-container {
|
||||
overflow: auto;
|
||||
margin: 0 -2rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.playlists-container {
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
max-height: 65vh;
|
||||
|
||||
.item {
|
||||
&.move:hover {
|
||||
@extend %move;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
@extend .vertical-center;
|
||||
width: 100%;
|
||||
border-top: $default-border-2;
|
||||
background: $control-panel-bg;
|
||||
box-shadow: $control-panel-shadow;
|
||||
z-index: 2;
|
||||
order: 1;
|
||||
flex: 0 0 $control-panel-height;
|
||||
|
||||
.track-container {
|
||||
@extend .vertical-center;
|
||||
padding-left: 1rem;
|
||||
line-height: 2.6rem;
|
||||
|
||||
a {
|
||||
color: initial;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $track-info-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.track-info {
|
||||
.artist {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&:hover {
|
||||
.fa {
|
||||
color: $button-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playback-controls {
|
||||
.row {
|
||||
@extend .vertical-center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 1.5rem;
|
||||
|
||||
.fa-play, .fa-pause {
|
||||
color: $button-hover-color;
|
||||
font-size: $font-size * 2;
|
||||
margin-top: .3rem;
|
||||
|
||||
&:hover {
|
||||
color: $play-button-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
padding-right: 2.5rem;
|
||||
button {
|
||||
&:not(last-child) {
|
||||
padding: 0 .7rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.volume-container {
|
||||
button {
|
||||
padding: 0 .3rem 0 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seek-slider {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
width: 75%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.elapsed-time,
|
||||
.total-time {
|
||||
font-size: .7em;
|
||||
color: .7em;
|
||||
}
|
||||
|
||||
.elapsed-time {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.total-time {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
--width: 90vw;
|
||||
padding: 0;
|
||||
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
padding: 2.7rem;
|
||||
|
||||
.row {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 1.5rem;
|
||||
margin: 2.5rem 0;
|
||||
border-top: $search-modal-footer-border;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
button, input[type=submit] {
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.results-controls {
|
||||
padding: 0;
|
||||
border-bottom: $default-border-2;
|
||||
width: var(--width);
|
||||
height: 4.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 502;
|
||||
}
|
||||
|
||||
form, .results {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.results {
|
||||
@include calc(height, '100% - 4.7rem');
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
#music-mpd-info {
|
||||
.modal {
|
||||
.body {
|
||||
.row {
|
||||
margin: .5rem;
|
||||
padding: .5rem;
|
||||
border-bottom: $info-modal-row-border;
|
||||
|
||||
&:hover {
|
||||
border-radius: 1rem;
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
.attr {
|
||||
color: $info-modal-attr-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#music-mpd-search-modal,
|
||||
#music-mpd-playlist-edit {
|
||||
.dropdown {
|
||||
z-index: 503;
|
||||
}
|
||||
}
|
||||
|
||||
#music-mpd-search-modal {
|
||||
.header {
|
||||
height: 3.8rem;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#music-mpd-playlist-add {
|
||||
.modal {
|
||||
min-width: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
#music-mpd-playlist-edit {
|
||||
.modal {
|
||||
min-width: 80rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($widths, 's')} {
|
||||
#music-mpd-info {
|
||||
.modal {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($widths, 'm')} {
|
||||
#music-mpd-info {
|
||||
.modal {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($widths, 'l')} {
|
||||
#music-mpd-info {
|
||||
.modal {
|
||||
width: 45vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
$button-enabled-color: #59df3e;
|
||||
$button-hover-color: $button-enabled-color;
|
||||
$play-button-hover-color: #64ef4a;
|
||||
|
||||
$duration-color: #666;
|
||||
|
||||
$control-panel-height: 10rem !default;
|
||||
$control-panel-bg: rgba(245,245,245,0.95);
|
||||
$control-panel-shadow: 0 -2.5px 4px 0 #c0c0c0;
|
||||
$control-time-color: #666;
|
||||
|
||||
$browser-panel-bg: rgba(248,250,250,0.95);
|
||||
|
||||
$empty-playlist-color: rgba(200,200,200,0.7);
|
||||
$empty-playlist-shadow: 2px 1px rgb(235,235,235);
|
||||
$playlist-controls-bg: rgba(247,247,247,0.95);
|
||||
$playlist-controls-border: $default-border-2;
|
||||
|
||||
$move-mode-track-border: 3px dotted rgb(216,156,136);
|
||||
$move-mode-track-bg: rgba(216,156,136,0.3);
|
||||
|
||||
$search-modal-footer-border: 1px solid #ccc;
|
||||
|
||||
$info-modal-row-border: 1px solid #ddd;
|
||||
$info-modal-attr-color: #777;
|
||||
$track-info-hover-color: rgb(46,190,110);
|
||||
$filter-bar-shadow: 0 2.5px 4px 0 #bbb;
|
||||
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
@import 'common/vars';
|
||||
@import 'common/mixins';
|
||||
@import 'common/layout';
|
||||
|
||||
$host-border: $default-border-2;
|
||||
$host-shadow: $default-shadow;
|
||||
|
||||
.music-snapcast-container {
|
||||
.host {
|
||||
width: 95%;
|
||||
margin: 2rem auto;
|
||||
border: $host-border;
|
||||
border-radius: 1rem;
|
||||
box-shadow: $host-shadow;
|
||||
|
||||
.head {
|
||||
padding: 1rem .5rem;
|
||||
background: $default-bg-4;
|
||||
border-bottom: $host-border;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
padding-left: .5rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
&:hover { color: $default-hover-fg; }
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
.head {
|
||||
background: $default-bg-5;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.head,
|
||||
.client {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.client {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.offline { color: $default-fg-3; }
|
||||
&:hover { background: $hover-bg; }
|
||||
|
||||
.name {
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon { margin-right: 1rem; }
|
||||
}
|
||||
|
||||
.modal {
|
||||
.info {
|
||||
padding: 2rem;
|
||||
|
||||
.section {
|
||||
border: $default-border-2;
|
||||
border-radius: 1rem;
|
||||
&:not(last-child) { margin-bottom: 2rem; }
|
||||
|
||||
.title {
|
||||
border-bottom: $default-border-2;
|
||||
padding: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.clients .row {
|
||||
padding: .5rem;
|
||||
|
||||
label {
|
||||
margin: 0 0 0 .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: .33rem .5rem;
|
||||
border-radius: .75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
&:hover { background: $hover-bg; }
|
||||
|
||||
.label { font-weight: bold; }
|
||||
.value { text-align: right; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#music-snapcast-client-info {
|
||||
.info {
|
||||
.buttons {
|
||||
background: initial;
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: $default-border-2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
color: #900;
|
||||
border-color: #900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($widths, 's')} {
|
||||
.music-snapcast-container {
|
||||
.modal {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($widths, 'm')} {
|
||||
.music-snapcast-container {
|
||||
.modal {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($widths, 'l')} {
|
||||
.music-snapcast-container {
|
||||
.modal {
|
||||
width: 45vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.sensors {
|
||||
.head {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
&:hover { background: $hover-bg; }
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 2rem auto;
|
||||
width: 80%;
|
||||
|
||||
.metric {
|
||||
margin-bottom: .75rem;
|
||||
padding: 2rem;
|
||||
border: $default-border-3;
|
||||
border-radius: 2rem;
|
||||
|
||||
&:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
|
||||
&:nth-child(even) { background: $default-bg-3; }
|
||||
&:hover { background: $hover-bg; }
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.sound {
|
||||
height: 90%;
|
||||
margin-top: 7%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.sound-container {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
$head-bg: #e8e8e8;
|
||||
|
||||
.switches-root {
|
||||
.switch-root {
|
||||
.head {
|
||||
padding: 1rem .5rem;
|
||||
background: $head-bg;
|
||||
border-top: $default-border-2;
|
||||
border-bottom: $default-border-2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.switches {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.device {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.toggle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover { background: $hover-bg; }
|
||||
&:not(:last-child) { border-bottom: $default-border-2; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
../tts/index.scss
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.tts-container {
|
||||
max-width: 80rem;
|
||||
min-height: 10rem;
|
||||
margin: 3rem auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: $default-border-2;
|
||||
border-radius: 3rem;
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
width: 90%;
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
input, button {
|
||||
&:hover {
|
||||
border-color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
@import 'common/vars';
|
||||
|
||||
.tv-samsung-ws-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.controls {
|
||||
max-width: 500px;
|
||||
height: calc(100% - .15em);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 0 1em;
|
||||
border: $default-border-2;
|
||||
border-radius: 2em;
|
||||
box-shadow: 0 2px 9px 2px #bbb;
|
||||
|
||||
.power { color: red; }
|
||||
button { margin: .5em 0; }
|
||||
}
|
||||
|
||||
.rows {
|
||||
flex-direction: column;
|
||||
|
||||
* {
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 0 0 1.5em 0;
|
||||
padding: 0 0 1.5em 0;
|
||||
border-bottom: $default-border-2;
|
||||
}
|
||||
|
||||
.directions {
|
||||
flex-direction: column;
|
||||
|
||||
* {
|
||||
button {
|
||||
width: 5em;
|
||||
height: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.volume, .channel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colors {
|
||||
text-align: center;
|
||||
|
||||
.color {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
padding: 0;
|
||||
border-radius: 2em;
|
||||
|
||||
&.red { background: red; }
|
||||
&.green { background: green; }
|
||||
&.yellow { background: yellow; }
|
||||
&.blue { background: blue; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
@import 'common/vars';
|
||||
@import 'webpanel/plugins/zigbee.mqtt/vars';
|
||||
|
||||
.fa.fa-zigbee:before {
|
||||
content: ' ';
|
||||
background: url('/static/img/icons/zigbee-logo.svg');
|
||||
background-size: 1em 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.zigbee-container {
|
||||
height: 100%;
|
||||
padding: 0 .5em;
|
||||
background: $container-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
||||
.no-items {
|
||||
padding: 2em;
|
||||
font-size: 1.5em;
|
||||
color: $no-items-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-options {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 1em 0;
|
||||
|
||||
.view-selector {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border: 0;
|
||||
padding: 0 1em;
|
||||
|
||||
&:hover {
|
||||
border: $default-border-2;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.view {
|
||||
min-width: 400pt;
|
||||
max-width: 750pt;
|
||||
background: $view-bg;
|
||||
border: $view-border;
|
||||
border-radius: 1.5em;
|
||||
box-shadow: $view-box-shadow;
|
||||
}
|
||||
|
||||
.item {
|
||||
&.selected {
|
||||
box-shadow: $selected-item-box-shadow;
|
||||
}
|
||||
|
||||
.name {
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
|
||||
&.selected {
|
||||
border-radius: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: $item-border;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 1.5em 1.5em 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 1.5em 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.params {
|
||||
background: $params-bg;
|
||||
padding-bottom: 1em;
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1em;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
border-bottom: $param-section-header-border;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 1em;
|
||||
padding: .3em;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $param-even-row-bg;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background: $param-odd-row-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.param-name {
|
||||
display: inline-flex;
|
||||
width: 40%;
|
||||
margin-left: 1%;
|
||||
vertical-align: top;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
display: inline-block;
|
||||
width: 58%;
|
||||
text-align: right;
|
||||
|
||||
.value-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.value-data {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: .8em;
|
||||
margin-left: 1em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
.numeric {
|
||||
input.slider {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
background: none;
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value-min, .value-max {
|
||||
width: 50%;
|
||||
font-size: .85em;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.value-min {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.value-max {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-value-name-edit {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.section {
|
||||
.header {
|
||||
background: none;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.network-info {
|
||||
min-width: 600pt;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $error-color;
|
||||
}
|
||||
|
||||
.device, .group {
|
||||
.actions {
|
||||
.row {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
input[type=text] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue