nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Improve action button styling and structure across pages

Browse Source 
Introduced a new design and layout for action buttons on AlertsPage, DashboardPage, and TargetsPage with consistent styles and added SVG icons. Updated styles.css to support these changes with reusable button classes for better maintainability and UI consistency.
This commit is contained in:
Sascha Nesterovic
2026-02-12 14:05:51 +01:00
parent d4f176c731
commit 55f5652572
4 changed files with 128 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/styles.css
View File

@@ -825,6 +825,78 @@ details[open] .collapse-chevron {
font-weight: 600;
}
.row-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.table-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 10px;
padding: 6px 10px;
min-height: 32px;
font-weight: 650;
font-size: 13px;
border: 1px solid transparent;
color: #eaf4ff;
background: #132d54;
text-decoration: none;
}
.table-action-btn.details {
border-color: #47c4f6;
background: linear-gradient(180deg, #155c8f, #124a76);
}
.table-action-btn.details:hover {
border-color: #8ce8ff;
filter: brightness(1.06);
}
.table-action-btn.edit {
border-color: #4f8ed4;
background: linear-gradient(180deg, #184b7f, #143f69);
}
.table-action-btn.edit:hover {
border-color: #7ec3ff;
filter: brightness(1.06);
}
.table-action-btn.delete {
border-color: #d36a85;
background: linear-gradient(180deg, #5c1e32, #451626);
}
.table-action-btn.delete:hover {
border-color: #ff93ad;
filter: brightness(1.06);
}
.table-action-btn.toggle.enabled {
border-color: #d38f3a;
background: linear-gradient(180deg, #5a3513, #3f240f);
}
.table-action-btn.toggle.enabled:hover {
border-color: #f4be6a;
filter: brightness(1.06);
}
.table-action-btn.toggle.disabled {
border-color: #3f6ea9;
background: linear-gradient(180deg, #153963, #112d4d);
}
.table-action-btn.toggle.disabled:hover {
border-color: #77b1eb;
filter: brightness(1.06);
}
.danger-btn {
margin-left: 8px;
border-color: #7a2e43;