giers10/Heimgeist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve workflow list and sidebar styling

Browse Source 
Updates include restructuring the main workflows container, enhancing the visual appearance of individual workflow items in the sidebar (adding borders, background colors, and spacing), and adjusting responsive layout rules.
This commit is contained in:
Victor Giers
2026-06-15 16:54:41 +02:00
parent 35b0c633c3
commit 7fbfe215af
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles.css
View File

@@ -2312,18 +2312,21 @@ input:checked + .slider:before {
}
.workflows-area {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
display: block;
height: 100%;
min-height: 0;
}
.workflow-list {
height: 100%;
overflow: auto;
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--panel) 92%, black);
}
.sidebar .workflow-list {
background: transparent;
}
.workflow-list-heading,
.workflow-list-item,
.workflow-editor-toolbar,
@@ -2344,6 +2347,10 @@ input:checked + .slider:before {
background: var(--panel);
}
.sidebar .workflow-list-heading {
background: color-mix(in srgb, var(--panel) 96%, black);
}
.workflow-list-item {
justify-content: space-between;
padding: 12px 14px;
@@ -2351,10 +2358,22 @@ input:checked + .slider:before {
cursor: pointer;
}
.sidebar .workflow-list-item {
margin: 8px 8px 0;
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--panel) 82%, black);
}
.workflow-list-item.active {
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.sidebar .workflow-list-item.active {
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}
.workflow-list-item small {
display: block;
margin-top: 4px;
@@ -2363,6 +2382,7 @@ input:checked + .slider:before {
.workflow-list-actions {
display: flex;
gap: 8px;
}
.workflows-main,
@@ -2564,10 +2584,6 @@ input:checked + .slider:before {
}
@media (max-width: 1050px) {
.workflows-area {
grid-template-columns: 210px minmax(0, 1fr);
}
.workflow-editor-grid {
grid-template-columns: 90px minmax(420px, 1fr) 260px;
}