Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(tools): recessed dark container around tool rows, matching services + tasks

Browse Source 
Apply the same .services-rows / .tasks-container pocket pattern to the
Tools tab so the three app-page tabs (Services, Tools, Tasks/Backups)
share one visual language: rows live inside a sunken dark panel that
reads as a contained area inside the tab-pane's glass surface.

  .tools-rows gains
    background:   rgba(var(--bg-rgb), 0.2)
    border-radius: 8px
    margin:        16px
    padding:       16px   (was 1rem 1.25rem 2rem)

For the multi-category tabs case the pocket sits flush below the tab
bar — drop the top margin via the .tools-tab-bar ~ .tools-cat-pane
sibling selector so the tabs and pocket read as one element.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 01:14:46 +01:00
parent 3c8963daf8
commit 8ee201978f
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
containers/libreportal/frontend/css/tools.css
View File

@ -28,15 +28,25 @@
.tools-list { display: flex; flex-direction: column; } .tools-list { display: flex; flex-direction: column; }
/* Recessed dark pocket wrapping the tool rows — same idiom as
.services-rows on the Services tab and .tasks-container on the Tasks
tab so the three app-page tabs share one visual language. */
.tools-rows { .tools-rows {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6rem; gap: 0.6rem;
padding: 1rem 1.25rem 2rem; padding: 16px;
margin: 16px;
background: rgba(var(--bg-rgb), 0.2);
border-radius: 8px;
} }
.tools-cat-pane { display: none; } .tools-cat-pane { display: none; }
.tools-cat-pane.active { display: flex; } .tools-cat-pane.active { display: flex; }
/* When the multi-category tab bar is present, the pane recedes directly
below it — drop the top margin so the pocket sits flush with the tabs. */
.tools-tab-bar + .tools-cat-pane,
.tools-tab-bar ~ .tools-cat-pane { margin-top: 0; }
.tools-tab-bar { .tools-tab-bar {
display: flex; display: flex;