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

fix(webui): centre the per-tile Back up button on the tile's right edge

Browse Source 
It was pinned to the tile's top-right corner, level with the app name, leaving
the status line beneath it visually unbalanced. The tile is two lines, so the
right edge's midpoint is the natural anchor.

The centring has to share `transform` with the existing reveal — the button is
opacity:0 until the tile is hovered and slides in 2px — so the hidden state is
translateY(calc(-50% - 2px)) and the revealed one translateY(-50%), rather than
the previous -2px/0 pair.

Verified under a real pointer, since the button does not exist visually without
one: hovering a tile gives opacity 1 with the tile's and the button's vertical
centres both at 571px.
This commit is contained in:
librelad 2026-08-20 22:56:39 +01:00
parent 2964688fc7
commit dbe3153af9
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
containers/libreportal/frontend/components/backup/core/css/backup.css
View File

@ -1494,7 +1494,10 @@
}
.backup-app-tile-action {
position: absolute;
top: 10px;
/* Centred on the tile's right edge rather than pinned to its top corner.
The tile is two lines (name over status), so a top-anchored button sat
against the name and left the status line visually unbalanced. */
top: 50%;
right: 10px;
padding: 4px 10px;
font-size: 0.72rem;
@ -1505,13 +1508,15 @@
border-radius: 999px;
cursor: pointer;
opacity: 0;
transform: translateY(-2px);
/* -50% does the centring, the extra -2px is the same slide-in the reveal
always had — both live on transform, so they have to travel together. */
transform: translateY(calc(-50% - 2px));
transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.backup-app-tile:hover .backup-app-tile-action,
.backup-app-tile:focus-within .backup-app-tile-action {
opacity: 1;
transform: translateY(0);
transform: translateY(-50%);
}
.backup-app-tile-action:hover {
background: rgba(var(--accent-rgb), 0.28);