Initial commit: Haussteuerung V2/V3 Web-Interface
This commit is contained in:
Thebille
+762
@@ -0,0 +1,762 @@
|
||||
:root {
|
||||
--v3-bg: #070A10;
|
||||
--v3-surface: rgba(255,255,255,0.06);
|
||||
--v3-surface-2: rgba(255,255,255,0.10);
|
||||
--v3-border: rgba(255,255,255,0.14);
|
||||
--v3-border-hover: rgba(255,255,255,0.22);
|
||||
--v3-text: #EAF0FF;
|
||||
--v3-text-secondary: rgba(234,240,255,0.70);
|
||||
--v3-accent: #63D4FF;
|
||||
--v3-accent-2: #7CFFB2;
|
||||
--v3-danger: #FF5C7A;
|
||||
--v3-warn: #FFD963;
|
||||
--v3-shadow: 0 10px 30px rgba(0,0,0,0.45);
|
||||
--v3-radius: 14px;
|
||||
--v3-radius-sm: 10px;
|
||||
--v3-gap: 12px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
|
||||
background: var(--v3-bg);
|
||||
color: var(--v3-text);
|
||||
line-height: 1.4;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.v3-page {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ---- CARD ---- */
|
||||
.v3-card {
|
||||
background: var(--v3-surface);
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: var(--v3-radius);
|
||||
box-shadow: var(--v3-shadow);
|
||||
padding: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: border-color 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.v3-card:hover {
|
||||
border-color: var(--v3-border-hover);
|
||||
}
|
||||
|
||||
.v3-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: var(--v3-text);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.v3-card-title span:first-child {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.v3-section-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--v3-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ---- BUTTONS ---- */
|
||||
.v3-btn {
|
||||
appearance: none;
|
||||
border: 1px solid var(--v3-border);
|
||||
background: var(--v3-surface-2);
|
||||
color: var(--v3-text);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
padding: 10px 16px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.2px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.v3-btn:hover {
|
||||
background: rgba(255,255,255,0.14);
|
||||
border-color: var(--v3-border-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.v3-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.v3-btn--sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.v3-btn--primary {
|
||||
border-color: rgba(99,212,255,0.35);
|
||||
background: rgba(99,212,255,0.12);
|
||||
color: var(--v3-accent);
|
||||
}
|
||||
|
||||
.v3-btn--primary:hover {
|
||||
background: rgba(99,212,255,0.22);
|
||||
border-color: rgba(99,212,255,0.55);
|
||||
}
|
||||
|
||||
.v3-btn--on {
|
||||
border-color: rgba(124,255,178,0.35);
|
||||
background: rgba(124,255,178,0.12);
|
||||
color: var(--v3-accent-2);
|
||||
}
|
||||
|
||||
.v3-btn--on:hover {
|
||||
background: rgba(124,255,178,0.22);
|
||||
border-color: rgba(124,255,178,0.55);
|
||||
}
|
||||
|
||||
.v3-btn--off {
|
||||
border-color: rgba(255,92,122,0.35);
|
||||
background: rgba(255,92,122,0.10);
|
||||
color: var(--v3-danger);
|
||||
}
|
||||
|
||||
.v3-btn--off:hover {
|
||||
background: rgba(255,92,122,0.20);
|
||||
border-color: rgba(255,92,122,0.55);
|
||||
}
|
||||
|
||||
/* ---- STATUS DOT ---- */
|
||||
.v3-status-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
transition: background 0.3s ease, box-shadow 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.v3-status-dot--on {
|
||||
background: var(--v3-accent-2);
|
||||
box-shadow: 0 0 8px rgba(124,255,178,0.6);
|
||||
}
|
||||
|
||||
.v3-status-dot--off {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.v3-status-dot--active {
|
||||
background: var(--v3-warn);
|
||||
box-shadow: 0 0 8px rgba(255,217,99,0.6);
|
||||
}
|
||||
|
||||
.v3-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--v3-text-secondary);
|
||||
}
|
||||
|
||||
.v3-title-values {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.v3-title-value {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--v3-text);
|
||||
background: var(--v3-surface-2);
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#hdr_wtemp,
|
||||
#hdr_wstand,
|
||||
#hdr_wseit,
|
||||
#hdr_sbezug,
|
||||
#hdr_seinsp {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* ---- ROOM ROW (Licht) ---- */
|
||||
.v3-room-row {
|
||||
background: var(--v3-surface);
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
|
||||
}
|
||||
|
||||
.v3-room-row:hover {
|
||||
border-color: var(--v3-border-hover);
|
||||
}
|
||||
|
||||
.v3-room-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.v3-room-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ---- INFO ITEMS ---- */
|
||||
.v3-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v3-info-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--v3-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.v3-info-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--v3-text);
|
||||
}
|
||||
|
||||
/* ---- TEMP ---- */
|
||||
.v3-temp {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v3-temp--normal {
|
||||
color: var(--v3-text);
|
||||
}
|
||||
|
||||
.v3-temp--hot {
|
||||
color: var(--v3-danger);
|
||||
}
|
||||
|
||||
.v3-temp--warm {
|
||||
color: var(--v3-warn);
|
||||
}
|
||||
|
||||
/* ---- INPUTS ---- */
|
||||
.v3-input {
|
||||
background: rgba(0,0,0,0.25);
|
||||
color: var(--v3-text);
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.9rem;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.v3-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--v3-accent);
|
||||
}
|
||||
|
||||
/* ---- SLIDER ---- */
|
||||
.v3-slider {
|
||||
width: 180px;
|
||||
accent-color: var(--v3-accent);
|
||||
}
|
||||
|
||||
/* ---- COLOR ---- */
|
||||
.v3-color {
|
||||
width: 48px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---- WLED ---- */
|
||||
.v3-wled {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.v3-wled-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.v3-wled-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--v3-text-secondary);
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.v3-wled-val {
|
||||
font-size: 0.85rem;
|
||||
color: var(--v3-text);
|
||||
font-weight: 600;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
/* ---- GAUGE ---- */
|
||||
.v3-gauge-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#v3_gauge {
|
||||
border-radius: var(--v3-radius);
|
||||
}
|
||||
|
||||
/* ---- CHART ---- */
|
||||
.v3-chart-container {
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#v3_power_chart {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---- CLOCK ---- */
|
||||
.v3-clock {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.v3-clock-time {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--v3-accent);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.v3-clock-date {
|
||||
font-size: 0.9rem;
|
||||
color: var(--v3-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.v3-sun-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.v3-sun-row img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.v3-sun-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--v3-text-secondary);
|
||||
}
|
||||
|
||||
/* ---- IFRAME ---- */
|
||||
iframe {
|
||||
border: 0;
|
||||
display: block;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.v3-page {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v3-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.v3-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.v3-wled-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- ANIMATIONS ---- */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 6px rgba(124,255,178,0.4); }
|
||||
50% { box-shadow: 0 0 14px rgba(124,255,178,0.7); }
|
||||
}
|
||||
|
||||
.v3-status-dot--on {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ---- SCROLLBAR ---- */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--v3-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--v3-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--v3-border-hover);
|
||||
}
|
||||
|
||||
/* ====================================================================
|
||||
indexV3 – Grid-Layout & Modul-Bausteine
|
||||
==================================================================== */
|
||||
|
||||
.v3-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.v3-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.v3-header .v3-sub {
|
||||
font-size: 0.85rem;
|
||||
color: var(--v3-text-secondary);
|
||||
}
|
||||
|
||||
/* Karten strikt untereinander (eine Spalte). Reihenfolge per order unten. */
|
||||
.v3-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Gewuenschte Reihenfolge von oben nach unten:
|
||||
Stromzaehler, Licht, Rolladen, Steckdosen, Heizung, Haus, Uhr.
|
||||
Quell-Reihenfolge im HTML ist:
|
||||
1 Stromzaehler, 2 Licht, 3 Heizung, 4 Rolladen, 5 Steckdosen, 6 Haus, 7 Uhr. */
|
||||
.v3-grid > section:nth-child(1) { order: 1; } /* Stromzaehler */
|
||||
.v3-grid > section:nth-child(2) { order: 2; } /* Licht */
|
||||
.v3-grid > section:nth-child(3) { order: 5; } /* Heizung -> nach unten */
|
||||
.v3-grid > section:nth-child(4) { order: 3; } /* Rolladen */
|
||||
.v3-grid > section:nth-child(5) { order: 4; } /* Steckdosen */
|
||||
.v3-grid > section:nth-child(6) { order: 6; } /* Haus */
|
||||
.v3-grid > section:nth-child(7) { order: 7; } /* Uhr */
|
||||
|
||||
/* Karten, die mehr Platz brauchen (Heizung, Stromzähler) */
|
||||
.v3-card--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.v3-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.v3-muted {
|
||||
color: var(--v3-text-secondary);
|
||||
font-size: 0.8rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Verstecktes Schreib-Iframe (AWP-POST-Ziel) */
|
||||
.v3-sink {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Knopf-Paare (auf/ab, an/aus) */
|
||||
.v3-btn-group {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.v3-btn-group form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---- Heizungs-Zeile ---- */
|
||||
.v3-heat-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.9fr auto 0.9fr auto auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
background: var(--v3-surface);
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
padding: 10px 12px;
|
||||
margin: 0;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.v3-heat-row:hover {
|
||||
border-color: var(--v3-border-hover);
|
||||
}
|
||||
|
||||
.v3-heat-head {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.9fr auto 0.9fr auto auto;
|
||||
gap: 10px;
|
||||
padding: 0 12px 4px;
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
color: var(--v3-text-secondary);
|
||||
}
|
||||
|
||||
/* Getrennte Schreib-Form je SOLL-Wert (min bzw. max) */
|
||||
.v3-heat-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.v3-heat-set .v3-input {
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
/* ---- Zähler (Strom + Wasser) ---- */
|
||||
.v3-strom-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 16px;
|
||||
justify-items: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.v3-strom-layout > .v3-gauge-container {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.v3-strom-values {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.v3-strom-layout > .v3-chart-container:nth-child(3) {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.v3-strom-layout > .v3-chart-container:nth-child(4) {
|
||||
grid-column: 3;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.v3-strom-values .v3-info-value {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Wasserzähler */
|
||||
.v3-water-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 16px;
|
||||
justify-items: start;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.v3-water-layout > .v3-chart-container {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.v3-strom-layout,
|
||||
.v3-water-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.v3-strom-layout > .v3-gauge-container,
|
||||
.v3-strom-layout > .v3-strom-values,
|
||||
.v3-strom-layout > .v3-chart-container:nth-child(3),
|
||||
.v3-strom-layout > .v3-chart-container:nth-child(4),
|
||||
.v3-water-layout > .v3-chart-container {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
#v3_gauge,
|
||||
#v3_power_chart,
|
||||
#v3_daily_chart,
|
||||
#v3_water_chart {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: var(--v3-radius-sm);
|
||||
border: 1px solid var(--v3-border);
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
height: auto;
|
||||
aspect-ratio: 2 / 1;
|
||||
}
|
||||
|
||||
#v3_gauge {
|
||||
border-radius: var(--v3-radius);
|
||||
max-width: 360px;
|
||||
aspect-ratio: 3 / 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.v3-heat-row,
|
||||
.v3-heat-head {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
.v3-heat-head { display: none; }
|
||||
}
|
||||
|
||||
/* Sanfte Uebergaenge + Schalt-Feedback (V3) */
|
||||
.v3-temp { transition: color 0.3s ease; }
|
||||
|
||||
@keyframes v3-flash-ok-anim {
|
||||
from { box-shadow: 0 0 0 2px rgba(124, 255, 178, 0.85); }
|
||||
to { box-shadow: 0 0 0 2px rgba(124, 255, 178, 0); }
|
||||
}
|
||||
@keyframes v3-flash-err-anim {
|
||||
from { box-shadow: 0 0 0 2px rgba(255, 92, 122, 0.9); }
|
||||
to { box-shadow: 0 0 0 2px rgba(255, 92, 122, 0); }
|
||||
}
|
||||
.v3-flash-ok { animation: v3-flash-ok-anim 0.6s ease-out; }
|
||||
.v3-flash-err { animation: v3-flash-err-anim 0.6s ease-out; }
|
||||
|
||||
/* ---- Poolpumpe Fortschrittsbalken (IST vs. SOLL Laufzeit) ---- */
|
||||
.v3-pool-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.v3-pool-bar {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 18px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border: 1px solid var(--v3-border);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v3-pool-bar-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, rgba(99,212,255,0.55), rgba(99,212,255,0.95));
|
||||
border-radius: 999px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.v3-pool-bar-fill--done {
|
||||
background: linear-gradient(90deg, rgba(124,255,178,0.55), rgba(124,255,178,0.95));
|
||||
box-shadow: 0 0 10px rgba(124,255,178,0.5);
|
||||
}
|
||||
|
||||
.v3-pool-bar-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--v3-text);
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.v3-pool-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.v3-pool-set-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--v3-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v3-pool-set .v3-input {
|
||||
width: 80px;
|
||||
}
|
||||
Reference in New Issue
Block a user