fix: status-icon
Alessandro committed
Nov 26, 2024 at 20:17 UTC
c95a379bb590e695f5350bc9a964e4d599756a3a
2 files changed
+25
-52
webui/index.css
+11
-28
@@ -343,23 +343,6 @@ body,
343
font-size: var(--font-size-small);
344
opacity: 0.6;
345
}
346
-
347
-
348
- .status-icon {
349
- margin-top: var(--spacing-xs);
350
- width: 36px;
351
- height: 36px;
352
- }
353
-
354
-/* Update existing status icon styles */
355
-.status-icon svg {
356
- width: 100%;
357
- height: 100%;
358
-}
359
-
360
-.cloud, .connected-symbol, .connected-line, .disconnected-symbol {
361
- transition: all 0.3s ease;
362
-}
346
347
/* Typography */
348
h2 {
@@ -1504,26 +1487,26 @@ input:checked + .slider:before {
1487
display: block; /* or any style you want for visibility */
1488
}
1489
1507
-.status-container {
1490
+.status-icon {
1491
display: flex;
1492
+ justify-content: center;
1493
align-items: center;
1510
- gap: 10px;
1511
-}
1512
-
1513
-.status-icon {
1514
- width: 34px;
1515
- height: 34px;
1494
}
1517
-
1495
+
1496
.status-icon svg {
1519
- width: 100%;
1520
- height: 100%;
1497
+ width: 18px;
1498
+ height: 18px;
1499
}
1500
1523
-.cloud, .connected-symbol, .connected-line, .disconnected-symbol {
1501
+.connected-circle, .disconnected-circle {
1502
transition: all 0.3s ease;
1503
}
1504
1505
+.connected-circle {
1506
+ animation: pulse 0.8s infinite;
1507
+ transform-origin: center;
1508
+}
1509
+
1510
.connected {
1511
color: #00c340;
1512
}
webui/index.html
+14
-24
@@ -171,31 +171,21 @@
171
<div id="time-date"></div>
172
<div class="status-icon" x-data="{ connected: true }">
173
<svg viewBox="0 0 30 30">
174
- <!-- Cloud -->
175
- <path class="cloud"
176
- x-bind:fill="connected ? '#00c340' : '#e40138'"
177
- d="m23.12,19.85c3.8,0,6.88-3.09,6.88-6.88,0-3.39-2.53-6.31-5.88-6.81l-.68-.1-.27-.63c-1.4-3.29-4.61-5.42-8.17-5.42s-6.77,2.13-8.17,5.42l-.27.63-.68.1c-3.35.49-5.87,3.42-5.87,6.81,0,3.8,3.09,6.88,6.88,6.88.44,0,.8-.36.8-.8s-.36-.8-.8-.8c-2.91,0-5.28-2.37-5.28-5.28s2.37-5.28,5.28-5.28h.29c.37,0,.69-.25.78-.6.84-3.23,3.74-5.48,7.05-5.48s6.21,2.25,7.05,5.48c.09.35.41.6.78.6h.29c2.91,0,5.28,2.37,5.28,5.28s-2.37,5.28-5.28,5.28c-.44,0-.8.36-.8.8s.36.8.8.8Z"/>
178
-
179
- <!-- Connected Symbol -->
180
- <g class="symbol" transform="translate(9, 15)">
181
- <path class="connected-symbol"
182
- x-bind:fill="connected ? '#00c340' : '#e40138'"
183
- x-bind:opacity="connected ? 1 : 0"
184
- d="m.73,9.63c.23.02.48-.06.65-.21l3.63-3.28c.36-.32.58-.7.63-1.09.08-.56-.13-1.11-.57-1.5L1.61.42l-.24-.21C1.22.08,1.02,0,.8,0h-.1C.46.02.26.14.11.33-.08.6-.02.97.26,1.22l3.66,3.3c.08.08.13.18.13.29s-.05.22-.13.29L.31,8.36c-.3.27-.38.69-.18.95.15.19.35.3.6.32Z"/>
185
- <path class="connected-line"
186
- x-bind:fill="connected ? '#00c340' : '#e40138'"
187
- x-bind:opacity="connected ? 1 : 0"
188
- d="m11.16,7.94h-4.56c-.44,0-.8.36-.8.8s.36.8.8.8h4.56c.44,0,.8-.36.8-.8s-.36-.8-.8-.8Z"/>
189
-
190
- <!-- Disconnected Symbol -->
191
- <path class="disconnected-symbol"
192
- transform="translate(1, 0)"
193
- x-bind:fill="connected ? '#00c340' : '#e40138'"
194
- x-bind:opacity="connected ? 0 : 1"
195
- d="m5.64,4.88l3.34-3.59c.29-.31.27-.79-.04-1.08-.31-.29-.79-.27-1.08.04l-3.27,3.51L1.33.24C1.04-.07.55-.08.24.21-.07.49-.08.98.21,1.29l3.34,3.59L.21,8.46c-.29.31-.27.79.04,1.08.15.14.34.21.52.21.21,0,.41-.08.56-.24l3.27-3.51,3.27,3.51c.15.16.36.24.56.24.19,0,.37-.07.52-.21.31-.29.33-.77.04-1.08l-3.34-3.59Z"/>
196
- </g>
174
+ <!-- Connected State (filled circle) -->
175
+ <circle class="connected-circle"
176
+ cx="15" cy="15" r="12"
177
+ x-bind:fill="connected ? '#00c340' : 'none'"
178
+ x-bind:opacity="connected ? 1 : 0"/>
179
+
180
+ <!-- Disconnected State (outline circle) -->
181
+ <circle class="disconnected-circle"
182
+ cx="15" cy="15" r="12"
183
+ fill="none"
184
+ stroke="#e40138"
185
+ stroke-width="2"
186
+ x-bind:opacity="connected ? 0 : 1"/>
187
</svg>
198
- </div>
188
+ </div>
189
</div>
190
<div id="chat-history">
191
</div>