1
0
mirror of https://github.com/beestat/app.git synced 2025-05-23 18:04:14 -04:00
beestat/css/dashboard.css
2022-08-04 21:32:10 -04:00

599 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")
}
/* Beestat logo */
.beestat {
font-weight: 200;
font-size: 40px;
font-family: Montserrat;
}
.beestat > .bee {
color: #f7b731;
}
.beestat > .stat {
color: #20bf6b;
}
/* 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;
}
/**
* 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.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_range:before { content: "\F0679"; }
.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.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.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.fire:before { content: "\F0238"; }
.icon.floor_plan:before { content: "\F0821"; }
.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.information:before { content: "\F02FC"; }
.icon.key:before { content: "\F0306"; }
.icon.layers:before { content: "\F0328"; }
.icon.layers_plus:before { content: "\F0E4D"; }
.icon.magnify_close:before { content: "\F0980"; }
.icon.magnify_plus_outline:before { content: "\F06ED"; }
.icon.magnify_minus_outline:before { content: "\F06EC"; }
.icon.map_marker:before { content: "\F05F8"; }
.icon.menu_down:before { content: "\F035D"; }
.icon.menu_up:before { content: "\F0360"; }
.icon.message:before { content: "\F0361"; }
.icon.network_strength_4:before { content: "\F08FA"; }
.icon.network_strength_off:before { content: "\F08FC"; }
/*.icon.numeric_1_box:before { content: "\F03A4"; }
.icon.numeric_3_box:before { content: "\F03AA"; }
.icon.numeric_4_box:before { content: "\F03AD"; }
.icon.numeric_7_box:before { content: "\F03B6"; }*/
.icon.open_in_new:before { content: "\F03CC"; }
.icon.patreon:before { content: "\F0882"; }
.icon.pound:before { content: "\F0423"; }
.icon.refresh:before { content: "\F0450"; }
.icon.resistor:before { content: "\F0B44"; }
.icon.snowflake:before { content: "\F0717"; }
.icon.swap_horizontal:before { content: "\F04E1"; }
.icon.thermostat:before { content: "\F0393"; }
.icon.thumb_up:before { content: "\F0513"; }
.icon.tune:before { content: "\F062E"; }
.icon.twitter:before { content: "\F0544"; }
.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.wifi_strength_1_alert:before { content: "\F0920"; }
.icon.wifi_strength_4:before { content: "\F0928"; }
.icon.zigbee:before { content: "\F0D41"; }
.icon.home_plus:before { content: "\F0975"; }
.icon.home_switch:before { content: "\F1794"; }
.icon.home_remove:before { content: "\F1247"; }
.icon.arrow_expand_vertical:before { content: "\F084F"; }
.icon.label:before { content: "\F0315"; }
.icon.numeric_0:before { content: "\F0B39"; }
.icon.numeric_0_box:before { content: "\F03A1"; }
.icon.numeric_1:before { content: "\F0B3A"; }
.icon.numeric_1_box:before { content: "\F03A4"; }
.icon.numeric_10:before { content: "\F0FE9"; }
.icon.numeric_10_box:before { content: "\F0F7D"; }
.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.alpha_a:before { content: "\F0AEE"; }
.icon.alpha_a_box:before { content: "\F0B08"; }
.icon.alpha_b:before { content: "\F0AEF"; }
.icon.alpha_b_box:before { content: "\F0B09"; }
.icon.alpha_c:before { content: "\F0AF0"; }
.icon.alpha_c_box:before { content: "\F0B0A"; }
.icon.alpha_d:before { content: "\F0AF1"; }
.icon.alpha_d_box:before { content: "\F0B0B"; }
.icon.alpha_e:before { content: "\F0AF2"; }
.icon.alpha_e_box:before { content: "\F0B0C"; }
.icon.alpha_f:before { content: "\F0AF3"; }
.icon.alpha_f_box:before { content: "\F0B0D"; }
.icon.alpha_g:before { content: "\F0AF4"; }
.icon.alpha_g_box:before { content: "\F0B0E"; }
.icon.alpha_h:before { content: "\F0AF5"; }
.icon.alpha_h_box:before { content: "\F0B0F"; }
.icon.alpha_i:before { content: "\F0AF6"; }
.icon.alpha_i_box:before { content: "\F0B10"; }
.icon.alpha_j:before { content: "\F0AF7"; }
.icon.alpha_j_box:before { content: "\F0B11"; }
.icon.alpha_k:before { content: "\F0AF8"; }
.icon.alpha_k_box:before { content: "\F0B12"; }
.icon.alpha_l:before { content: "\F0AF9"; }
.icon.alpha_l_box:before { content: "\F0B13"; }
.icon.alpha_m:before { content: "\F0AFA"; }
.icon.alpha_m_box:before { content: "\F0B14"; }
.icon.alpha_n:before { content: "\F0AFB"; }
.icon.alpha_n_box:before { content: "\F0B15"; }
.icon.alpha_o:before { content: "\F0AFC"; }
.icon.alpha_o_box:before { content: "\F0B16"; }
.icon.alpha_p:before { content: "\F0AFD"; }
.icon.alpha_p_box:before { content: "\F0B17"; }
.icon.alpha_q:before { content: "\F0AFE"; }
.icon.alpha_q_box:before { content: "\F0B18"; }
.icon.alpha_r:before { content: "\F0AFF"; }
.icon.alpha_r_box:before { content: "\F0B19"; }
.icon.alpha_s:before { content: "\F0B00"; }
.icon.alpha_s_box:before { content: "\F0B1A"; }
.icon.alpha_t:before { content: "\F0B01"; }
.icon.alpha_t_box:before { content: "\F0B1B"; }
.icon.alpha_u:before { content: "\F0B02"; }
.icon.alpha_u_box:before { content: "\F0B1C"; }
.icon.alpha_v:before { content: "\F0B03"; }
.icon.alpha_v_box:before { content: "\F0B1D"; }
.icon.alpha_w:before { content: "\F0B04"; }
.icon.alpha_w_box:before { content: "\F0B1E"; }
.icon.alpha_x:before { content: "\F0B05"; }
.icon.alpha_x_box:before { content: "\F0B1F"; }
.icon.alpha_y:before { content: "\F0B06"; }
.icon.alpha_y_box:before { content: "\F0B20"; }
.icon.alpha_z:before { content: "\F0B07"; }
.icon.alpha_z_box:before { content: "\F0B21"; }
.icon.f16:before { font-size: 16px; }
.icon.f24:before { font-size: 24px; }
.icon.f36:before { font-size: 36px; }
.icon.f48:before { font-size: 48px; }
.icon.f64:before { font-size: 64px; }