554 lines
9.9 KiB
CSS
554 lines
9.9 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
|
|
|
|
:root {
|
|
--color-primary: #7380ec;
|
|
--color-danger: #ff7782;
|
|
--color-success: #41f1b6;
|
|
--color-warning: #ffbb55;
|
|
--color-white: #fff;
|
|
--color-info-dark: #7d8da1;
|
|
--color-info-light: #dce1eb;
|
|
--color-dark: #363949;
|
|
--color-light: rgba(132, 139, 200, 0.18);
|
|
--color-primary-variant: #111e88;
|
|
--color-dark-variant: #677483;
|
|
--color-background: #f6f6f9;
|
|
|
|
--color-insight-1: rgb(99, 209, 35);
|
|
--color-insight-2: rgb(233, 245, 59);
|
|
--color-insight-3: rgb(204, 52, 67);
|
|
--color-insight-4: rgb(56, 183, 238);
|
|
|
|
--card-border-radius: 2rem;
|
|
--border-radius-1: 0.4rem;
|
|
--border-radius-2: 0.8rem;
|
|
--border-radius-3: 1.2rem;
|
|
|
|
--card-padding: 1.8rem;
|
|
--padding-1: 1.2rem;
|
|
|
|
--box-shadow: 0 2rem 3rem var(--color-light);
|
|
|
|
/* Plotly Chart Color */
|
|
--chart-background: #fff;
|
|
--chart-font-color: #444;
|
|
--chart-axis-color: #444;
|
|
}
|
|
/* Dark Theme Variables */
|
|
.dark-theme-variables {
|
|
--color-background: #090d3e;
|
|
--color-white: #0b0f4a;
|
|
--color-primary: #fff;
|
|
--color-dark: #edeffd;
|
|
--color-dark-variant: #fff;
|
|
--color-light: rgba(0, 0, 0, 0.4);
|
|
--box-shadow: 0 2rem 3rem var(--color-light);
|
|
|
|
--chart-background: #0d1256;
|
|
--chart-font-color: #fff;
|
|
--chart-axis-color: #fff;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: 0;
|
|
appearance: none;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
font-family: poppins, san-serif;
|
|
font-size: 0.88rem;
|
|
background: var(--color-background);
|
|
user-select: none;
|
|
overflow-x: hidden;
|
|
color: var(--color-dark-variant);
|
|
}
|
|
.container {
|
|
display: grid;
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
gap: 1.8rem;
|
|
grid-template-columns: 14rem auto 30rem;
|
|
}
|
|
a {
|
|
color: var(--color-dark);
|
|
}
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
h1 {
|
|
font-weight: 800;
|
|
font-size: 1.8rem;
|
|
}
|
|
h2 {
|
|
font-size: 1.4rem;
|
|
}
|
|
h3 {
|
|
font-size: 0.87rem;
|
|
}
|
|
h4 {
|
|
font-size: 0.8rem;
|
|
}
|
|
h5 {
|
|
font-size: 0.77rem;
|
|
}
|
|
small {
|
|
font-size: 0.75rem;
|
|
}
|
|
.profile-photo {
|
|
width: 2.8rem;
|
|
height: 2.8rem;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
.text-muted {
|
|
color: var(--color-info-light);
|
|
}
|
|
p {
|
|
color: var(--color-dark-variant);
|
|
}
|
|
b {
|
|
color: var(--color-dark-variant);
|
|
}
|
|
.primary {
|
|
color: var(--color-primary);
|
|
}
|
|
.danger {
|
|
color: var(--color-danger);
|
|
}
|
|
.success {
|
|
color: var(--color-success);
|
|
}
|
|
.warning {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/***** Sidebar Image*****/
|
|
aside {
|
|
height: 100vh;
|
|
}
|
|
aside .top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 1.4rem;
|
|
}
|
|
aside .logo {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
}
|
|
aside .logo img {
|
|
width: 2rem;
|
|
height: 2re;
|
|
}
|
|
aside .close {
|
|
display: none;
|
|
}
|
|
/***** Sidebar Links*****/
|
|
aside .sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 86vh;
|
|
position: relative;
|
|
top: 3rem;
|
|
}
|
|
aside h3 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
aside .sidebar a {
|
|
display: flex;
|
|
color: var(--color-info-dark);
|
|
margin-left: 2rem;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 3.7rem;
|
|
transition: all 300ms ease;
|
|
}
|
|
|
|
aside .sidebar a span {
|
|
font-size: 1.6rem;
|
|
transition: all 300ms ease;
|
|
}
|
|
|
|
/* aside .sidebar a:last-child {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
width: 100%;
|
|
} */
|
|
|
|
aside .sidebar a.active {
|
|
background: var(--color-light);
|
|
color: var(--color-primary);
|
|
margin-left: 0;
|
|
}
|
|
aside .sidebar a.active:before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 100%;
|
|
background: var(--color-primary);
|
|
}
|
|
aside .sidebar a.active span {
|
|
color: var(--color-primary);
|
|
margin-left: calc(1rem - 6px);
|
|
}
|
|
aside .sidebar a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
aside .sidebar a:hover span {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
/************* main ******************/
|
|
main {
|
|
margin-top: 1.4rem;
|
|
}
|
|
|
|
main .insights {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.6rem;
|
|
}
|
|
main .insights > div {
|
|
background: var(--color-white);
|
|
padding: var(--card-padding);
|
|
border-radius: var(--card-border-radius);
|
|
margin-top: 1rem;
|
|
box-shadow: var(--box-shadow);
|
|
transition: all 300ms ease;
|
|
}
|
|
|
|
main .insights > div:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
main .insights > div span {
|
|
background: var(--color-primary);
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
color: var(--color-white);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
main .insights > div.temperature span {
|
|
background: var(--color-insight-1);
|
|
}
|
|
|
|
main .insights > div.humidity span {
|
|
background: var(--color-insight-2);
|
|
}
|
|
|
|
main .insights > div.pressure span {
|
|
background: var(--color-insight-3);
|
|
}
|
|
main .insights > div.altitude span {
|
|
background: var(--color-insight-4);
|
|
}
|
|
|
|
main .insights > div .middle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
main .insights h3 {
|
|
margin: 1rem 0 0.6rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/************* End of Insights ******************/
|
|
main .histories {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
main .history-charts {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2.5rem;
|
|
background: var(--color-white);
|
|
border-radius: var(--border-radius-1);
|
|
padding: var(--card-padding);
|
|
text-align: center;
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
main .history-charts:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
main .history-charts .history-divs {
|
|
text-align: center;
|
|
}
|
|
|
|
main .histories h2 {
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
/* ********RIGHT ********** */
|
|
.right {
|
|
margin-top: 1.4rem;
|
|
}
|
|
.right .top {
|
|
display: flex;
|
|
justify-content: end;
|
|
gap: 2rem;
|
|
}
|
|
.right .top button {
|
|
display: none;
|
|
}
|
|
|
|
.right .theme-toggler {
|
|
background: var(--color-light);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 1.6rem;
|
|
width: 4.2rem;
|
|
cursor: pointer;
|
|
border-radius: var(--border-radius-1);
|
|
}
|
|
|
|
.right .theme-toggler span {
|
|
font-size: 1.2rem;
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.right .theme-toggler span.active {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-radius: var(--border-radius-1);
|
|
}
|
|
|
|
/* GAUGE CHARTS */
|
|
.right .gauge-charts {
|
|
margin-top: 2rem;
|
|
}
|
|
.right .gauge-charts .item {
|
|
background: var(--color-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 0.7rem;
|
|
padding: 1.4rem var(--card-padding);
|
|
border-radius: var(--border-radius-3);
|
|
box-shadow: var(--box-shadow);
|
|
transition: all 300ms ease;
|
|
}
|
|
.right .gauge-charts .item:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.right .gauge-charts .item .right {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.right .gauge-charts .item .icon {
|
|
padding: 0.6rem;
|
|
color: var(--color-white);
|
|
border-radius: 50%;
|
|
background: var(--color-primary);
|
|
display: flex;
|
|
}
|
|
|
|
.right .gauge-charts .item.offline .icon {
|
|
background: var(--color-danger);
|
|
}
|
|
|
|
/* MEDIA QUERIES */
|
|
@media screen and (max-width: 1200px) {
|
|
.container {
|
|
width: 94%;
|
|
grid-template-columns: 7rem auto 23rem;
|
|
}
|
|
aside .logo h2 {
|
|
display: none;
|
|
}
|
|
|
|
aside .sidebar h3 {
|
|
display: none;
|
|
}
|
|
aside .sidebar a {
|
|
width: 5.6rem;
|
|
}
|
|
aside .sidebar a:last-child {
|
|
position: relative;
|
|
margin-top: 1.8rem;
|
|
}
|
|
main .insights {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
main .histories {
|
|
width: 94%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin: 2rem 0 0 8.8rem;
|
|
}
|
|
main .histories .history-charts {
|
|
grid-template-columns: 1fr;
|
|
width: 54vw;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 992px) {
|
|
.container {
|
|
width: 94%;
|
|
grid-template-columns: 12rem auto 23rem;
|
|
}
|
|
main .insights {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.6rem;
|
|
}
|
|
main .histories .history-charts {
|
|
grid-template-columns: 1fr;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.container {
|
|
width: 100%;
|
|
grid-template-columns: 1fr;
|
|
/* height: 100vh; */
|
|
}
|
|
aside {
|
|
position: fixed;
|
|
left: -100%;
|
|
background: var(--color-white);
|
|
width: 18rem;
|
|
z-index: 3;
|
|
box-shadow: 1rem 3rem 4rem var(--color-light);
|
|
height: 100vh;
|
|
padding-right: var(--card-padding);
|
|
display: none;
|
|
animation: showMenu 400ms ease forwards;
|
|
}
|
|
@keyframes showMenu {
|
|
to {
|
|
left: 0;
|
|
}
|
|
}
|
|
aside .logo {
|
|
margin-left: 1rem;
|
|
}
|
|
aside .logo h2 {
|
|
display: inline;
|
|
}
|
|
aside .sidebar h3 {
|
|
display: inline;
|
|
}
|
|
aside .sidebar a {
|
|
width: 100%;
|
|
height: 3.4rem;
|
|
}
|
|
/* aside .sidebar a:last-child {
|
|
position: absolute;
|
|
bottom: 5rem;
|
|
} */
|
|
aside .close {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
main {
|
|
margin: 8rem 2rem 2rem 2rem;
|
|
padding: 0 1rem;
|
|
}
|
|
main .histories {
|
|
position: relative;
|
|
margin: 3rem 0 0 0;
|
|
width: 100%;
|
|
}
|
|
main .histories .history-charts {
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.right {
|
|
width: 90%;
|
|
margin: 0 auto 0rem auto;
|
|
}
|
|
.right .top {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
align-items: center;
|
|
padding: 0 0.8rem;
|
|
height: 4.6rem;
|
|
background: var(--color-white);
|
|
width: 100%;
|
|
margin: 0;
|
|
z-index: 2;
|
|
box-shadow: 0 1rem 1 rem var(--color-light);
|
|
}
|
|
.right .top .theme-toggler {
|
|
width: 4.4rem;
|
|
position: absolute;
|
|
right: 2rem;
|
|
}
|
|
.right .profile .info {
|
|
display: none;
|
|
}
|
|
|
|
.right .top button {
|
|
display: inline-block;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--color-dark);
|
|
position: absolute;
|
|
left: 1rem;
|
|
}
|
|
.right .top button span {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.container {
|
|
width: 100%;
|
|
grid-template-columns: 1fr;
|
|
margin: 1rem 0 1rem 0;
|
|
}
|
|
main {
|
|
margin: 5rem 1rem 1rem 1rem;
|
|
padding: 0 1rem;
|
|
width: 90vw;
|
|
}
|
|
|
|
main .insights {
|
|
gap: 0.4rem;
|
|
}
|
|
main .insights > div {
|
|
padding: 0.4rem;
|
|
}
|
|
|
|
main .history-charts {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|