diff options
Diffstat (limited to 'internal/web/static/dashboard.css')
| -rw-r--r-- | internal/web/static/dashboard.css | 17 |
1 files changed, 11 insertions, 6 deletions
diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css index 4aa0213..70df6fa 100644 --- a/internal/web/static/dashboard.css +++ b/internal/web/static/dashboard.css @@ -278,11 +278,16 @@ textarea.mono { font-size: 0.9em; } .picker-box { max-width: 860px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(16, 24, 40, 0.25); padding: 1em 1.2em; } .picker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-bottom: 0.8em; } .picker-head input { flex: 1 1 12em; width: auto; margin: 0; padding: 0.4em 0.6em; } -.picker .picks { display: flex; flex-wrap: wrap; gap: 0.7em; } -.picker .pick { width: 120px; margin: 0; padding: 0.4em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: center; font-size: 0.75em; font-weight: normal; cursor: pointer; } -.picker .pick:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); } -.picker .pick img { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); object-fit: contain; } -.picker .pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +/* .imagegrid is the wall of thumbnails: the picker's choices and the gallery page's Hide grid */ +.imagegrid, .picker .picks { display: flex; flex-wrap: wrap; gap: 0.7em; } +.imagegrid .pick, .picker .pick { display: block; width: 120px; margin: 0; padding: 0.4em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: center; font-size: 0.75em; font-weight: normal; cursor: pointer; } +.imagegrid .pick:hover, .picker .pick:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); } +.imagegrid .pick img, .picker .pick img { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); object-fit: contain; } +.imagegrid .pick .name, .picker .pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.hidegrid { margin: 0 0 1em; } +.hidegrid .hide { display: block; margin-top: 0.3em; } +.hidegrid .hide input { width: auto; margin: 0 0.2em 0 0; vertical-align: middle; } +.hidegrid .pick:has(:checked) img { opacity: 0.35; } /* a ticked card dims; the tick itself is the signal elsewhere */ .picker .pager { margin: 0.8em 0 0; } .picker .pager button[disabled] { opacity: 0.4; cursor: default; } .savebar { position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 0.8em 0; background: var(--bg); border-top: 1px solid var(--border-strong); display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center; } @@ -303,7 +308,7 @@ details.reset { margin-top: 1.6em; } .cols { grid-template-columns: 1fr; gap: 1.2em; } .row { gap: 0; } .row label { flex-basis: 100%; } - .picker .pick { width: 46%; } + .imagegrid .pick, .picker .pick { width: 46%; } .presets .preset { width: 46%; } .sidenav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 0 -1em 1em; padding: 0 1em; } .pickrow { flex-wrap: wrap; } |