141 lines
2.0 KiB
SCSS
141 lines
2.0 KiB
SCSS
@import '../../styles/variables.scss';
|
|
|
|
.index-page {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.greeting-bar {
|
|
background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
|
|
padding: 40px 32px 60px;
|
|
color: white;
|
|
}
|
|
|
|
.greeting-text {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.greeting-hello {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.greeting-name {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.greeting-date {
|
|
font-size: 24px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.health-card {
|
|
background: $card;
|
|
border-radius: $r;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
margin: -30px 24px 24px;
|
|
padding: 28px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
color: $tx;
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
}
|
|
|
|
.health-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.health-item {
|
|
background: $bg;
|
|
border-radius: $r-sm;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-left: 4px solid transparent;
|
|
|
|
&.health-item-ok { border-left-color: $acc; }
|
|
&.health-item-warn { border-left-color: $dan; }
|
|
}
|
|
|
|
.health-item-bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.health-status {
|
|
font-size: 20px;
|
|
|
|
&.normal { color: $acc; }
|
|
&.high, &.low { color: $dan; font-weight: bold; }
|
|
}
|
|
|
|
.health-label {
|
|
font-size: 24px;
|
|
color: $tx2;
|
|
display: block;
|
|
}
|
|
|
|
.health-value {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
color: $pri;
|
|
display: block;
|
|
margin: 8px 0 4px;
|
|
}
|
|
|
|
.health-unit {
|
|
font-size: 22px;
|
|
color: $tx3;
|
|
}
|
|
|
|
.quick-services {
|
|
margin: 0 24px 24px;
|
|
}
|
|
|
|
.service-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.service-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.service-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.service-label {
|
|
font-size: 24px;
|
|
color: $tx2;
|
|
}
|
|
|
|
.upcoming {
|
|
margin: 0 24px;
|
|
}
|
|
|
|
.empty-hint {
|
|
background: $card;
|
|
border-radius: $r;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 26px;
|
|
color: $tx3;
|
|
}
|