/*======================================== Image Picker =========================================*/ /* The overlay that replaced Google's Picker iframe. It borrows the Catalog panel's language rather than inventing one: #e5e9f0 hairlines, #eef0f3 neutral fills, 6px controls inside a 12px card, and colour reserved for meaning — destructive red, everything else grey. It is built by imagepicker.js and appended to , so it sits outside the Blazor component tree and none of the page's own layout rules reach it. That is why everything here is scoped to .ip-, and why the z-index has to clear the fixed toolbars (.top-btns-container* sit at the top of the page) and the sidebar. */ .ip-overlay { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(16, 24, 40, 0.45); } .ip-overlay.ip-open { display: flex; } /* The page behind must not scroll under the overlay. */ body.ip-noscroll { overflow: hidden; } .ip-dialog { display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(680px, 100%); background: #ffffff; border: 1px solid #e5e9f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18); overflow: hidden; } /*---------------------------------------- Header -----------------------------------------------*/ .ip-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e5e9f0; } .ip-title { font-size: 15px; font-weight: 600; color: #111827; } /* The search takes the slack so the two buttons stay pinned right at any dialog width. */ .ip-search { flex: 1; height: 34px; min-width: 0; padding: 0 12px; border: 1.5px solid #e5e9f0; border-radius: 6px; background: #ffffff; font-size: 13px; outline: none; } .ip-search:focus { border-color: #b9c3d1; } .ip-btn { height: 34px; padding: 0 15px; border: 1.5px solid #e5e9f0; border-radius: 6px; background: #eef0f3; font-size: 13px; font-weight: 500; color: #111827; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .ip-btn:hover { background: #f5f7fa; border-color: #d5dbe3; } .ip-close-btn { width: 34px; padding: 0; font-size: 14px; line-height: 1; } /*---------------------------------------- Grid -------------------------------------------------*/ .ip-body { flex: 1; overflow: auto; padding: 16px; } /* auto-fill, not auto-fit: a single image keeps its 150px tile instead of stretching across the whole dialog. */ .ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .ip-tile { position: relative; } .ip-pick { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px; border: 1.5px solid #e5e9f0; border-radius: 8px; background: #ffffff; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ip-pick:hover { border-color: #b9c3d1; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); } /* Fixed box with contain, so portrait and landscape images line up on one grid without cropping. */ .ip-pick img { width: 100%; height: 112px; object-fit: contain; background: #f7f8fa; border-radius: 4px; } /* One line, clipped: file names here are long and a wrapping name would break the row rhythm. */ .ip-name { overflow: hidden; font-size: 12px; color: #4b5563; text-align: center; text-overflow: ellipsis; white-space: nowrap; } /* Revealed on hover so the grid stays calm, but always present for touch, where there is no hover to reveal it with. */ .ip-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 1.5px solid #e5e9f0; border-radius: 50%; background: #ffffff; color: #c0392b; font-size: 11px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease; } .ip-tile:hover .ip-del, .ip-del:focus { opacity: 1; } .ip-del:hover { background: #fdecea; } @media (hover: none) { .ip-del { opacity: 1; } } .ip-empty { grid-column: 1 / -1; margin: 32px 0; color: #6b7280; font-size: 13px; text-align: center; } /*---------------------------------------- Footer -----------------------------------------------*/ .ip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid #e5e9f0; background: #fbfcfd; } .ip-status { font-size: 12px; color: #6b7280; } .ip-status.ip-error { color: #c0392b; } /* Sits above the footer rather than replacing it, so the count and Load more do not jump away while a delete is being confirmed. */ .ip-confirm { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-top: 1px solid #f3d6d2; background: #fdecea; } .ip-confirm-text { margin-right: auto; font-size: 13px; color: #7f1d1d; } .ip-confirm-yes { border-color: #e6b8b2; background: #c0392b; color: #ffffff; } .ip-confirm-yes:hover { background: #a93226; border-color: #a93226; } /*---------------------------------------- Small screens ----------------------------------------*/ @media (max-width: 640px) { .ip-overlay { padding: 0; } .ip-dialog { max-height: 100%; height: 100%; border-radius: 0; } /* The title is the first thing to go: the search field is what a phone user needs. */ .ip-title { display: none; } .ip-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }