TKK_E32211801/ds/public/style.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;
}
}