mirror of
https://github.com/beestat/app.git
synced 2025-05-23 18:04:14 -04:00
576 lines
17 KiB
CSS
576 lines
17 KiB
CSS
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
/* Highcharts */
|
|
.highcharts-container, .highcharts-container svg { width: 100% !important; }
|
|
.crisp_edges {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
body {
|
|
background: #111;
|
|
font-family: Montserrat;
|
|
font-weight: 300;
|
|
font-size: 13px;
|
|
color: #ecf0f1;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* lightblue.light */
|
|
::selection { background: #45aaf2; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Fonts */
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:100;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_100.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_100.woff") format("woff"),url("../font/montserrat/montserrat_100.ttf") format("truetype"),url("../font/montserrat/montserrat_100.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:200;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_200.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_200.woff") format("woff"),url("../font/montserrat/montserrat_200.ttf") format("truetype"),url("../font/montserrat/montserrat_200.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:300;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_300.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_300.woff") format("woff"),url("../font/montserrat/montserrat_300.ttf") format("truetype"),url("../font/montserrat/montserrat_300.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:400;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_400.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_400.woff") format("woff"),url("../font/montserrat/montserrat_400.ttf") format("truetype"),url("../font/montserrat/montserrat_400.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:500;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_500.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_500.woff") format("woff"),url("../font/montserrat/montserrat_500.ttf") format("truetype"),url("../font/montserrat/montserrat_500.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:600;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_600.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_600.woff") format("woff"),url("../font/montserrat/montserrat_600.ttf") format("truetype"),url("../font/montserrat/montserrat_600.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:700;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_700.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_700.woff") format("woff"),url("../font/montserrat/montserrat_700.ttf") format("truetype"),url("../font/montserrat/montserrat_700.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:800;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_800.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_800.woff") format("woff"),url("../font/montserrat/montserrat_800.ttf") format("truetype"),url("../font/montserrat/montserrat_800.svg#Montserrat") format("svg")
|
|
}
|
|
@font-face{
|
|
font-family:"Montserrat";
|
|
font-weight:900;
|
|
font-style:normal;
|
|
src:url("../font/montserrat/montserrat_900.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_900.woff") format("woff"),url("../font/montserrat/montserrat_900.ttf") format("truetype"),url("../font/montserrat/montserrat_900.svg#Montserrat") format("svg")
|
|
}
|
|
|
|
/* Link styles */
|
|
a {
|
|
cursor: pointer;
|
|
transition: color 200ms ease;
|
|
}
|
|
|
|
a:link {
|
|
color: #ecf0f1;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
a:focus {
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
a:hover {
|
|
color: #bdc3c7;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:active {
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
a.inverted:link {
|
|
color: #2d98da;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.inverted:visited {
|
|
color: #2d98da;
|
|
}
|
|
|
|
a.inverted:focus {
|
|
color: #2d98da;
|
|
}
|
|
|
|
a.inverted:hover {
|
|
color: #45aaf2;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.inverted:active {
|
|
color: #2d98da;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loading_wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 30px;
|
|
}
|
|
|
|
.loading_1, .loading_2 {
|
|
position: absolute;
|
|
border: 3px solid #f7b731;
|
|
border-radius: 50%;
|
|
width: 48px;
|
|
height: 48px;
|
|
opacity: 0;
|
|
display: inline-block;
|
|
|
|
animation: loading 1200ms cubic-bezier(0, 0.2, 0.8, 1);
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.loading_2 {
|
|
border: 2px solid #f7b731;
|
|
animation-delay: 400ms;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
transform: scale(.1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Inputs
|
|
*/
|
|
input[type=checkbox] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.checkbox {
|
|
position: relative;
|
|
user-select: none;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.checkbox label {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 4px;
|
|
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
|
|
background: #37474f; /* bluegray light */
|
|
}
|
|
|
|
.checkbox label::after {
|
|
opacity: 0;
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 8px;
|
|
background: transparent;
|
|
top: 5px;
|
|
left: 4px;
|
|
border: 3px solid #2d98da; /* lightblue.base */
|
|
border-top: none;
|
|
border-right: none;
|
|
transform: rotate(-45deg);
|
|
transition: opacity 200ms ease;
|
|
|
|
}
|
|
|
|
.checkbox input[type=checkbox]:checked + label:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.checkbox input[type=checkbox]:disabled + label:after {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
input[type=radio] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.radio {
|
|
position: relative;
|
|
user-select: none;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.radio label {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 4px;
|
|
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
|
|
background: #37474f; /* bluegray light */
|
|
}
|
|
|
|
.radio label::after {
|
|
opacity: 0;
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #2d98da; /* lightblue.base */
|
|
top: 4px;
|
|
left: 4px;
|
|
transition: opacity 200ms ease;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.radio input[type=radio]:checked + label:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.radio input[type=radio]:disabled + label:after {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/* Range input */
|
|
input[type=range]{
|
|
-webkit-appearance: none;
|
|
background:transparent;
|
|
margin-top: 5px;
|
|
--background: #37474f;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
background: var(--background);
|
|
height: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type=range]::-moz-range-track {
|
|
background: var(--background);
|
|
height: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 14px;
|
|
width: 14px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background-color: #ffffff;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
input[type=range]::-moz-range-thumb {
|
|
-webkit-appearance: none;
|
|
height: 14px;
|
|
width: 14px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/**
|
|
* This is a stripped down version of https://flexgridlite.elliotdahl.com/
|
|
* For futher reading: https://davidwalsh.name/flexbox-layouts;
|
|
*/
|
|
.row {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
margin: 0 -8px 16px -8px;
|
|
}
|
|
.column {
|
|
/*flex: 0 0 auto;*/
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
flex-basis: 0;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
padding: 0 8px 0 8px;
|
|
}
|
|
.column_1 {
|
|
flex-basis: 8.33333%;
|
|
max-width: 8.33333%;
|
|
}
|
|
.column_2 {
|
|
flex-basis: 16.66667%;
|
|
max-width: 16.66667%;
|
|
}
|
|
.column_3 {
|
|
flex-basis: 25%;
|
|
max-width: 25%;
|
|
}
|
|
.column_4 {
|
|
flex-basis: 33.33333%;
|
|
max-width: 33.33333%;
|
|
}
|
|
.column_5 {
|
|
flex-basis: 41.66667%;
|
|
max-width: 41.66667%;
|
|
}
|
|
.column_6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%;
|
|
}
|
|
.column_7 {
|
|
flex-basis: 58.33333%;
|
|
max-width: 58.33333%;
|
|
}
|
|
.column_8 {
|
|
flex-basis: 66.66667%;
|
|
max-width: 66.66667%;
|
|
}
|
|
.column_9 {
|
|
flex-basis: 75%;
|
|
max-width: 75%;
|
|
}
|
|
.column_10 {
|
|
flex-basis: 83.33333%;
|
|
max-width: 83.33333%;
|
|
}
|
|
.column_11 {
|
|
flex-basis: 91.66667%;
|
|
max-width: 91.66667%;
|
|
}
|
|
.column_12 {
|
|
flex-basis: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.row {
|
|
display: block;
|
|
}
|
|
.column {
|
|
max-width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Icons (materialdesignicons.com) */
|
|
@font-face {
|
|
font-family: "Material Design Icons";
|
|
src: url("../font/material_icon/material_icon.eot?v=3.4.94");
|
|
src: url("../font/material_icon/material_icon.eot?#iefix&v=3.4.94") format("embedded-opentype"), url("../font/material_icon/material_icon.woff2?v=3.4.94") format("woff2"), url("../font/material_icon/material_icon.woff?v=3.4.94") format("woff"), url("../font/material_icon/material_icon.ttf?v=3.4.94") format("truetype"), url("../font/material_icon/material_icon.svg?v=3.4.94#materialdesigniconsregular") format("svg");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.icon:before {
|
|
display: inline-block;
|
|
font: normal normal normal 24px/1 "Material Design Icons";
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
line-height: inherit;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.icon.air_filter:before { content: "\F0D43"; }
|
|
.icon.air_purifier:before { content: "\F0D44"; }
|
|
.icon.alarm_snooze:before { content: "\F068E"; }
|
|
.icon.alert:before { content: "\F0026"; }
|
|
.icon.alpha_b:before { content: "\F0AEF"; }
|
|
.icon.alpha_b_box:before { content: "\F0B09"; }
|
|
.icon.apple:before { content: "\F0035"; }
|
|
.icon.arrow_down:before { content: "\F0045"; }
|
|
.icon.arrow_expand_horizontal:before { content: "\F084E"; }
|
|
.icon.arrow_expand_vertical:before { content: "\F084F"; }
|
|
.icon.arrow_horizontal_lock:before { content: "\F115B"; }
|
|
.icon.arrow_left:before { content: "\F004D"; }
|
|
.icon.basket_fill:before { content: "\F0077"; }
|
|
.icon.basket_unfill:before { content: "\F0078"; }
|
|
.icon.battery_10:before { content: "\F007A"; }
|
|
.icon.bell:before { content: "\F009A"; }
|
|
.icon.bell_off:before { content: "\F009B"; }
|
|
.icon.border_none_variant:before { content: "\F08A4"; }
|
|
.icon.bullhorn:before { content: "\F00E6"; }
|
|
.icon.calendar:before { content: "\F00ED"; }
|
|
.icon.calendar_alert:before { content: "\F0A31"; }
|
|
.icon.calendar_edit:before { content: "\F08A7"; }
|
|
.icon.calendar_month:before { content: "\F0E17"; }
|
|
.icon.calendar_week:before { content: "\F0A33"; }
|
|
.icon.cancel:before { content: "\F073A"; }
|
|
.icon.card_plus_outline:before { content: "\F1200"; }
|
|
.icon.card_remove_outline:before { content: "\F1605"; }
|
|
.icon.cash:before { content: "\F0114"; }
|
|
.icon.chart_bar_stacked:before { content: "\F076A"; }
|
|
.icon.chart_line:before { content: "\F012A"; }
|
|
.icon.check:before { content: "\F012C"; }
|
|
.icon.chevron_down:before { content: "\F0140"; }
|
|
.icon.chevron_up:before { content: "\F0143"; }
|
|
.icon.clock_outline:before { content: "\F0150"; }
|
|
.icon.close:before { content: "\F0156"; }
|
|
.icon.close_network:before { content: "\F015B"; }
|
|
.icon.cloud_question:before { content: "\F0A39"; }
|
|
.icon.code_tags:before { content: "\F0174"; }
|
|
.icon.cog:before { content: "\F0493"; }
|
|
.icon.credit_card_lock:before { content: "\F18E7"; }
|
|
.icon.credit_card_settings:before { content: "\F0FF5"; }
|
|
.icon.currency_usd:before { content: "\F01C1"; }
|
|
.icon.delete:before { content: "\F01B4"; }
|
|
.icon.dots_vertical:before { content: "\F01D9"; }
|
|
.icon.download:before { content: "\F01DA"; }
|
|
.icon.earth:before { content: "\F01E7"; }
|
|
.icon.email:before { content: "\F01EE"; }
|
|
.icon.exit_to_app:before { content: "\F0206"; }
|
|
.icon.eye:before { content: "\F0208"; }
|
|
.icon.eye_circle:before { content: "\F0B94"; }
|
|
.icon.eye_off:before { content: "\F0209"; }
|
|
.icon.fan:before { content: "\F0210"; }
|
|
.icon.fast_forward:before { content: "\F0211"; }
|
|
.icon.fire:before { content: "\F0238"; }
|
|
.icon.floor_plan:before { content: "\F0821"; }
|
|
.icon.forum:before { content: "\F028C"; }
|
|
.icon.gift:before { content: "\F0E44"; }
|
|
.icon.google_play:before { content: "\F02BC"; }
|
|
.icon.grid:before { content: "\F02C1"; }
|
|
.icon.grid_off:before { content: "\F02C2"; }
|
|
.icon.heart:before { content: "\F02D1"; }
|
|
.icon.help_circle:before { content: "\F02D7"; }
|
|
.icon.home:before { content: "\F02DC"; }
|
|
.icon.home_floor_a:before { content: "\F0D83"; }
|
|
.icon.home_search:before { content: "\F13B0"; }
|
|
.icon.home_switch:before { content: "\F1794"; }
|
|
.icon.information:before { content: "\F02FC"; }
|
|
.icon.key:before { content: "\F0306"; }
|
|
.icon.label:before { content: "\F0315"; }
|
|
.icon.label:before { content: "\F0315"; }
|
|
.icon.label_off:before { content: "\F0ACB"; }
|
|
.icon.layers:before { content: "\F0328"; }
|
|
.icon.layers_plus:before { content: "\F0E4D"; }
|
|
.icon.link_off:before { content: "\F0338"; }
|
|
.icon.magnify_close:before { content: "\F0980"; }
|
|
.icon.magnify_minus_outline:before { content: "\F06EC"; }
|
|
.icon.magnify_plus_outline:before { content: "\F06ED"; }
|
|
.icon.map_marker:before { content: "\F05F8"; }
|
|
.icon.menu_down:before { content: "\F035D"; }
|
|
.icon.menu_up:before { content: "\F0360"; }
|
|
.icon.message:before { content: "\F0361"; }
|
|
.icon.moon_waning_crescent:before { content: "\F0F65"; }
|
|
.icon.network_strength_4:before { content: "\F08FA"; }
|
|
.icon.network_strength_off:before { content: "\F08FC"; }
|
|
.icon.numeric_0:before { content: "\F0B39"; }
|
|
.icon.numeric_0_box:before { content: "\F03A1"; }
|
|
.icon.numeric_10:before { content: "\F0FE9"; }
|
|
.icon.numeric_10_box:before { content: "\F0F7D"; }
|
|
.icon.numeric_1:before { content: "\F0B3A"; }
|
|
.icon.numeric_1_box:before { content: "\F03A4"; }
|
|
.icon.numeric_2:before { content: "\F0B3B"; }
|
|
.icon.numeric_2_box:before { content: "\F03A7"; }
|
|
.icon.numeric_3:before { content: "\F0B3C"; }
|
|
.icon.numeric_3_box:before { content: "\F03AA"; }
|
|
.icon.numeric_4:before { content: "\F0B3D"; }
|
|
.icon.numeric_4_box:before { content: "\F03AD"; }
|
|
.icon.numeric_5:before { content: "\F0B3E"; }
|
|
.icon.numeric_5_box:before { content: "\F03B1"; }
|
|
.icon.numeric_6:before { content: "\F0B3F"; }
|
|
.icon.numeric_6_box:before { content: "\F03B3"; }
|
|
.icon.numeric_7:before { content: "\F0B40"; }
|
|
.icon.numeric_7_box:before { content: "\F03B6"; }
|
|
.icon.numeric_8:before { content: "\F0B41"; }
|
|
.icon.numeric_8_box:before { content: "\F03B9"; }
|
|
.icon.numeric_9:before { content: "\F0B42"; }
|
|
.icon.numeric_9_box:before { content: "\F03BC"; }
|
|
.icon.octagram:before { content: "\F06F9"; }
|
|
.icon.open_in_new:before { content: "\F03CC"; }
|
|
.icon.open_in_app:before { content: "\F03CB"; }
|
|
.icon.patreon:before { content: "\F0882"; }
|
|
.icon.pause:before { content: "\F03E4"; }
|
|
.icon.pencil:before { content: "\F03EB"; }
|
|
.icon.play:before { content: "\F040A"; }
|
|
.icon.plus:before { content: "\F0415"; }
|
|
.icon.pound:before { content: "\F0423"; }
|
|
.icon.redo:before { content: "\F044E"; }
|
|
.icon.refresh:before { content: "\F0450"; }
|
|
.icon.resistor:before { content: "\F0B44"; }
|
|
.icon.restart:before { content: "\F0709"; }
|
|
.icon.restart_off:before { content: "\F0D95"; }
|
|
.icon.snowflake:before { content: "\F0717"; }
|
|
.icon.sticker_emoji:before { content: "\F0785"; }
|
|
.icon.swap_horizontal:before { content: "\F04E1"; }
|
|
.icon.thermometer:before { content: "\F050F"; }
|
|
.icon.thermostat:before { content: "\F0393"; }
|
|
.icon.thumb_up:before { content: "\F0513"; }
|
|
.icon.tune:before { content: "\F062E"; }
|
|
.icon.twitter:before { content: "\F0544"; }
|
|
.icon.undo:before { content: "\F054C"; }
|
|
.icon.update:before { content: "\F06B0"; }
|
|
.icon.vector_square_plus:before { content: "\F18DB"; }
|
|
.icon.vector_square_remove:before { content: "\F18DC"; }
|
|
.icon.view_quilt:before { content: "\F0574"; }
|
|
.icon.water_off:before { content: "\F058D"; }
|
|
.icon.water_percent:before { content: "\F058E"; }
|
|
.icon.weather_cloudy:before { content: "\F0590"; }
|
|
.icon.weather_fog:before { content: "\F0591"; }
|
|
.icon.weather_hail:before { content: "\F0592"; }
|
|
.icon.weather_hazy:before { content: "\F0F30"; }
|
|
.icon.weather_lightning_rainy:before { content: "\F067E"; }
|
|
.icon.weather_partly_cloudy:before { content: "\F0595"; }
|
|
.icon.weather_pouring:before { content: "\F0596"; }
|
|
.icon.weather_snowy:before { content: "\F0598"; }
|
|
.icon.weather_snowy_heavy:before { content: "\F0F36"; }
|
|
.icon.weather_sunny:before { content: "\F0599"; }
|
|
.icon.weather_tornado:before { content: "\F0F38"; }
|
|
.icon.weather_windy:before { content: "\F059D"; }
|
|
.icon.white_balance_sunny:before { content: "\F05A8"; }
|
|
.icon.wifi_strength_1_alert:before { content: "\F0920"; }
|
|
.icon.wifi_strength_4:before { content: "\F0928"; }
|
|
.icon.zigbee:before { content: "\F0D41"; }
|
|
|
|
.icon.f16:before { font-size: 16px; }
|
|
.icon.f24:before { font-size: 24px; }
|
|
.icon.f32:before { font-size: 32px; }
|
|
.icon.f48:before { font-size: 48px; }
|
|
.icon.f64:before { font-size: 64px; }
|