iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: darker design

Browse Source
This commit is contained in:
0x1d
2025-08-24 21:39:49 +02:00
parent 70889b99b1
commit a0df8d1dc3
2 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/ui.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 175 KiB

39
public/styles.css
View File

@@ -6,10 +6,10 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #1a252f 100%);
min-height: 100vh; min-height: 100vh;
padding: 2rem; padding: 2rem;
color: white; color: #ecf0f1;
} }
.container { .container {
@@ -23,7 +23,7 @@ body {
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 1.5rem 0; padding: 1.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
h1 { h1 {
@@ -40,21 +40,22 @@ p {
} }
.status { .status {
background: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: 25px; border-radius: 25px;
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.cluster-section { .cluster-section {
background: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3);
border-radius: 20px; border-radius: 20px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -72,9 +73,9 @@ p {
} }
.refresh-btn { .refresh-btn {
background: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.2);
color: white; color: #ecf0f1;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
@@ -83,7 +84,8 @@ p {
} }
.refresh-btn:hover { .refresh-btn:hover {
background: rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px); transform: translateY(-2px);
} }
@@ -98,8 +100,8 @@ p {
} }
.member-card { .member-card {
background: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px; border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -114,7 +116,7 @@ p {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.08);
border-radius: 12px; border-radius: 12px;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@@ -131,9 +133,9 @@ p {
} }
.member-card.expanded { .member-card.expanded {
background: rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
transform: scale(1.02); transform: scale(1.02);
} }
@@ -207,12 +209,13 @@ p {
} }
.endpoint-item { .endpoint-item {
background: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3);
padding: 0.5rem; padding: 0.5rem;
border-radius: 6px; border-radius: 6px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
border: 1px solid rgba(255, 255, 255, 0.05);
} }
.loading-details { .loading-details {