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

UI: Improve cluster view error styling

Browse Source 
Add scoped styles for #cluster-members-container .error: better contrast, spacing, icon; override global centering for left-aligned layout.
This commit is contained in:
0x1d
2025-09-02 13:25:08 +02:00
parent d49a586eb0
commit 9986b4acac
1 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
public/styles/main.css
View File

@@ -3426,4 +3426,38 @@ html {
#firmware-view .deploy-btn:hover:not(:disabled)::before {
left: -100% !important;
}
}
/* Cluster view specific error styling */
#cluster-members-container .error {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.1rem;
margin-top: 0.75rem;
border-radius: 12px;
background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
border: 1px solid rgba(244, 67, 54, 0.35);
color: #ffcdd2;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
height: auto; /* override global 100% height */
justify-content: flex-start; /* override global centering */
text-align: left; /* ensure left alignment */
}
#cluster-members-container .error::before {
content: '⚠️';
font-size: 1.2rem;
line-height: 1;
flex-shrink: 0;
}
#cluster-members-container .error strong {
color: #ffebee;
font-weight: 700;
margin-right: 0.25rem;
}
#cluster-members-container .error br {
display: none; /* tighten layout by avoiding forced line-breaks */
}