111
This commit is contained in:
fuenmao
+376
-18
@@ -182,35 +182,393 @@ button { cursor: pointer; }
|
||||
.status-dot { color: #a27639 !important; text-align: right; }
|
||||
.status-dot.online { color: #1c806a !important; }
|
||||
.device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
|
||||
.device-pill { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #e4ebe7; border-radius: 13px; background: #fbfcfa; }
|
||||
.device-pill > span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #2c9a7d; box-shadow: 0 0 0 4px rgba(44,154,125,.12); }
|
||||
.device-pill.offline > span { background: #b5bdb9; box-shadow: none; }
|
||||
.device-pill strong, .device-pill small { display: block; }
|
||||
.device-pill strong { font-size: 13px; }
|
||||
.device-pill small { margin-top: 3px; color: #87928e; font-size: 11px; }
|
||||
.scene-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border-radius: 14px; background: #f6f7f3; }
|
||||
.scene-actions { display: flex; gap: 8px; }
|
||||
/* Health Space Enhancement */
|
||||
.ha-summary-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: #fbfbf9;
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
}
|
||||
.summary-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.summary-item:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 1px;
|
||||
background: rgba(18, 63, 55, 0.08);
|
||||
}
|
||||
.summary-item span { display: block; font-size: 11px; color: #82908c; }
|
||||
.summary-item strong { display: block; font-size: 16px; color: var(--green); margin-top: 2px; }
|
||||
.summary-item em { font-size: 12px; font-style: normal; color: #82908c; font-weight: normal; }
|
||||
|
||||
.smart-subcard {
|
||||
background: #fafaf8;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.smart-subcard:last-child { margin-bottom: 0; }
|
||||
.subcard-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.subcard-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.subcard-icon { font-size: 15px; flex-shrink: 0; }
|
||||
.subcard-title strong { font-size: 14px; font-weight: 600; color: var(--deep); flex-shrink: 0; }
|
||||
.subcard-model {
|
||||
font-size: 11px;
|
||||
color: #82908c;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
.scene-status-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--green);
|
||||
background: #edf7f3;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.device-mini-status {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.device-mini-status.green { background: #edf7f3; color: var(--green); }
|
||||
.device-mini-status.yellow { background: #fef7ec; color: #b8860b; }
|
||||
.device-mini-status.gray { background: #f1f3f2; color: #82908c; }
|
||||
|
||||
.scene-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
box-shadow: 0 1px 2px rgba(18, 63, 55, 0.02);
|
||||
}
|
||||
.scene-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.scene-info strong {
|
||||
font-size: 14px;
|
||||
color: var(--deep);
|
||||
}
|
||||
.scene-info p {
|
||||
margin: 3px 0 0;
|
||||
color: #75847f;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.scene-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.scene-row button {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
padding: 7px 16px;
|
||||
padding: 7px 15px;
|
||||
border: 1px solid rgba(12, 80, 69, 0.2);
|
||||
border-radius: 16px;
|
||||
color: var(--green);
|
||||
background: #eaf3f0;
|
||||
background: #edf7f3;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
}
|
||||
.scene-row button:active { background: var(--green); color: #fff; }
|
||||
.scene-row button.secondary { color: #7d684b; border-color: rgba(125,104,75,.2); background: #f4eee4; }
|
||||
.scene-row button:disabled { cursor: not-allowed; opacity: .5; }
|
||||
.environment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
|
||||
.environment-grid div { padding: 10px; border-radius: 12px; background: #f8f8f4; text-align: center; }
|
||||
.environment-grid small, .environment-grid strong { display: block; }
|
||||
.environment-grid small { color: #89938f; font-size: 10px; }
|
||||
.environment-grid strong { margin-top: 4px; color: var(--deep); font-size: 14px; }
|
||||
.scene-row button.secondary { color: #6e604f; border-color: rgba(110,96,79,.2); background: #f6f3ee; }
|
||||
.scene-row button:disabled { cursor: not-allowed; opacity: .45; }
|
||||
|
||||
.scene-device-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.scene-device-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 10px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border-radius: 10px;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 2px rgba(18, 63, 55, 0.02);
|
||||
}
|
||||
.scene-device-chip .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.scene-device-chip.green .dot { background: #10b981; }
|
||||
.scene-device-chip.yellow .dot { background: #f59e0b; }
|
||||
.scene-device-chip.gray .dot { background: #9ca3af; }
|
||||
.scene-device-chip .name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--deep);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.scene-device-chip .desc {
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
color: #82908c;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.scene-device-chip.green .desc { color: var(--green); font-weight: 500; }
|
||||
.scene-device-chip.yellow .desc { color: #b8860b; font-weight: 500; }
|
||||
.scene-device-chip.gray .desc { color: #9aa4a1; }
|
||||
|
||||
/* Environment Health */
|
||||
.env-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
.env-primary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.env-hero-card {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 9px 12px;
|
||||
box-shadow: 0 1px 2px rgba(18, 63, 55, 0.02);
|
||||
min-width: 0;
|
||||
}
|
||||
.env-hero-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.env-label {
|
||||
font-size: 11px;
|
||||
color: #82908c;
|
||||
font-weight: 500;
|
||||
}
|
||||
.env-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(12, 80, 69, 0.06);
|
||||
color: var(--green);
|
||||
font-weight: 500;
|
||||
}
|
||||
.env-hero-value {
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
}
|
||||
.env-hero-value strong {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--deep);
|
||||
line-height: 1.1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.env-hero-value em {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: #82908c;
|
||||
}
|
||||
|
||||
.env-secondary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 5px;
|
||||
}
|
||||
.env-metric-item {
|
||||
padding: 7px 3px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
box-shadow: 0 1px 2px rgba(18, 63, 55, 0.02);
|
||||
}
|
||||
.env-metric-item small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: #82908c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.env-metric-item strong {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--deep);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.env-metric-item em {
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
color: #9aa4a1;
|
||||
margin-top: 1px;
|
||||
transform: scale(0.88);
|
||||
transform-origin: center top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-feature-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.feature-item {
|
||||
padding: 9px 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border-radius: 12px;
|
||||
min-width: 0;
|
||||
box-shadow: 0 1px 2px rgba(18, 63, 55, 0.02);
|
||||
}
|
||||
.feature-item small { display: block; font-size: 11px; color: #82908c; }
|
||||
.feature-item strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--deep);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.feature-item em { font-size: 11px; font-style: normal; color: #82908c; margin-left: 2px; }
|
||||
|
||||
.all-device-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.device-card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 9px 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(18, 63, 55, 0.06);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 2px rgba(18, 63, 55, 0.02);
|
||||
}
|
||||
.device-card-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.device-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.device-status-dot.green { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
|
||||
.device-status-dot.yellow { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
|
||||
.device-status-dot.gray { background: #9ca3af; }
|
||||
.device-card-info { flex: 1; min-width: 0; }
|
||||
.device-card-top { display: flex; align-items: center; gap: 6px; }
|
||||
.device-card-top strong {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--deep);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.category-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(12, 80, 69, 0.08);
|
||||
color: var(--green);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.device-card-meta {
|
||||
margin: 2px 0 0;
|
||||
font-size: 11px;
|
||||
color: #82908c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.device-card-extra {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.status-pill {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-pill.green { background: #edf7f3; color: var(--green); }
|
||||
.status-pill.yellow { background: #fef7ec; color: #b8860b; }
|
||||
.status-pill.gray { background: #f1f3f2; color: #82908c; }
|
||||
.entity-count { font-size: 10px; color: #9aa4a1; }
|
||||
.medical-note { max-width: 760px; margin: 24px auto; color: #969e9b; font-size: 11px; text-align: center; }
|
||||
.loading-card { color: #73817d; text-align: center; }
|
||||
|
||||
@@ -221,6 +579,6 @@ button { cursor: pointer; }
|
||||
.plan-heading span { display: block; margin-top: 5px; text-align: left; }
|
||||
.device-grid { grid-template-columns: 1fr; }
|
||||
.scene-row { align-items: flex-start; flex-direction: column; }
|
||||
.scene-actions { width: 100%; }
|
||||
.scene-actions { width: 100%; margin-top: 6px; }
|
||||
.scene-actions button { flex: 1; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user