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 {
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;
padding: 2rem;
color: white;
color: #ecf0f1;
}
.container {
@@ -23,7 +23,7 @@ body {
align-items: center;
margin-bottom: 2rem;
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 {
@@ -40,21 +40,22 @@ p {
}
.status {
background: rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.4);
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 500;
display: inline-block;
margin: 0;
font-size: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cluster-section {
background: rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
margin-bottom: 2rem;
}
@@ -72,9 +73,9 @@ p {
}
.refresh-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ecf0f1;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
@@ -83,7 +84,8 @@ p {
}
.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);
}
@@ -98,8 +100,8 @@ p {
}
.member-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
@@ -114,7 +116,7 @@ p {
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
opacity: 0;
transition: opacity 0.3s ease;
@@ -131,9 +133,9 @@ p {
}
.member-card.expanded {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
transform: scale(1.02);
}
@@ -207,12 +209,13 @@ p {
}
.endpoint-item {
background: rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.3);
padding: 0.5rem;
border-radius: 6px;
margin-bottom: 0.5rem;
font-size: 0.8rem;
font-family: 'Courier New', monospace;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.loading-details {