Improve Photos connection guidance and audit responsive UI spacing

This commit is contained in:
Pigway
2026-10-10 08:36:23 +08:00
parent 4fdb7a4407
commit cc4126d23c
6 changed files with 123 additions and 4 deletions
+25
View File
@@ -75,3 +75,28 @@ dialog.image-viewer h2.image-viewer-name{font-size:16px;min-width:0;flex:1}
@media(max-width:600px){.image-viewer-footer{flex-wrap:wrap;gap:8px}.image-viewer-name{flex-basis:100%!important}.image-viewer-actions{width:100%;justify-content:flex-end;gap:6px}.image-viewer-actions button{padding:8px 10px}}
.studio-assets{max-height:240px;overflow:auto;margin:18px 0}.studio-canvas{position:relative;width:100%;background:white;margin-bottom:20px}.studio-canvas img{position:absolute;object-fit:cover;cursor:move;touch-action:none;border:2px solid var(--accent)}.region-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.region-fields input{width:100%}#client-secret,#hook-secret{overflow-wrap:anywhere}
/* Shared control rhythm for static forms and dynamically inserted panels. */
[hidden]{display:none!important}
form:not(#login-form){display:flex;flex-direction:column;gap:18px}
form>.field,form>.check-row,form>.hint,form>.notice{margin:0}
.field{display:flex;flex-direction:column;gap:10px}
.field>label,.field>.hint{margin:0}
.field>:is(input,select,textarea)+:is(input,select,textarea){margin-top:0}
.field>.check-row{margin:0}
.form-grid>.field{margin-bottom:0}
.actions,.row-actions,.image-viewer-actions{gap:12px}
#source-people-panel:not(:empty){margin:18px 0;display:flex;flex-direction:column;gap:16px}
#source-people-panel>.field,#source-people-panel>.hint{margin:0}
#source-people-panel>button{align-self:flex-start}
.photos-connection{margin:24px 0;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--soft)}
.photos-connection .section-heading{margin-bottom:16px}
.photos-connection .notice{margin:0 0 18px}
#source-local-quality{margin-bottom:20px}
@media(max-width:720px){.photos-connection{padding:18px}.actions,.row-actions,.image-viewer-actions{gap:10px}}
.card>.form-grid+button{margin-top:18px}
:not(form)>.field+.form-grid{margin-top:18px}
.photos-connection .badge.warning{color:var(--bad);background:transparent;border:1px solid var(--bad)}
form>.modal-actions{margin-top:8px}
@media(max-width:720px){button,input:not([type=checkbox]):not([type=radio]),select{min-height:44px}.image-card button,.row-actions button,.history-actions button{font-size:14px;padding:9px 12px}.check-row{min-height:44px;align-items:center}}