Dwinzo_dev/app/src/styles/components/visualization/floating/energyConsumed.scss

101 lines
1.7 KiB
SCSS

@use "../../../abstracts/variables" as *;
@use "../../../abstracts/mixins" as *;
.floatingWidgets-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
padding-top: 12px;
.floating {
min-height: 170px;
background: var(--background-color);
border: 1.23px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
border-radius: $border-radius-medium;
padding: 18px;
}
.working-state {
display: flex;
flex-direction: column;
gap: 6px;
.state-working-top {
display: flex;
}
}
}
.floating.working-state {
width: 100%;
height: 283px;
background: #f5f5f5;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
}
.state-working-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.state {
font-size: var(--font-size-xxlarge);
font-weight: bold;
}
.working-status {
display: flex;
align-items: center;
gap: 8px;
}
.working {
font-size: var(--font-size-xxlarge);
color: #4CAF50;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background: #4CAF50;
border-radius: 50%;
}
.img img {
width: 150px;
height: 100px;
border-radius: 4px;
object-fit: cover;
}
.state-working-data {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.data-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-large);
padding: 4px 0;
}
.data-key {
color: #666;
}
.data-value {
font-weight: bold;
color: #333;
}