/* ============================================================ Ettizan image uploader (FrontEnd/Shared/ImageUploader.razor + wwwroot/js/image-uploader.js) ============================================================ */ .image-uploader { display: block; } .image-uploader .iu-hidden { display: none !important; } /* ---- drop zone ------------------------------------------------ */ .image-uploader .iu-drop { border: 2px dashed #c4d3e0; border-radius: 10px; background: var(--light-background, #f1f7fc); padding: 1.25rem 1rem; text-align: center; cursor: pointer; color: var(--heading-color, #2c4964); transition: border-color .15s, background .15s; outline: none; } .image-uploader .iu-drop:hover, .image-uploader .iu-drop:focus-visible, .image-uploader .iu-drop.iu-drag { border-color: var(--accent-color, #1977cc); background: #e8f2fb; } .image-uploader .iu-drop i.iu-drop-icon { font-size: 1.6rem; color: var(--accent-color, #1977cc); display: block; margin-bottom: .25rem; } .image-uploader .iu-drop .iu-drop-text { font-size: .9rem; } .image-uploader .iu-drop .iu-drop-sub { font-size: .75rem; color: #7b8ea1; display: block; margin-top: .15rem; } .image-uploader.iu-disabled .iu-drop { opacity: .55; pointer-events: none; } /* ---- current image preview ------------------------------------ */ .image-uploader .iu-current { position: relative; max-width: 260px; border-radius: 8px; overflow: hidden; border: 1px solid #dde6ee; background: #fff; } .image-uploader .iu-current img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-uploader .iu-current[data-ratio] { aspect-ratio: var(--iu-ratio); } .image-uploader .iu-current.iu-circle { border-radius: 50%; width: 140px; height: 140px; max-width: 140px; } .image-uploader .iu-current.iu-contain { background: #fff; padding: 8px; } .image-uploader .iu-current.iu-contain img { object-fit: contain; } .image-uploader .iu-actions { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; } .image-uploader .iu-error { color: #dc3545; font-size: .8rem; margin-top: .35rem; } /* ---- editor overlay (appended to by JS) ----------------- */ body.iu-no-scroll { overflow: hidden; } .iu-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(20, 33, 46, .72); padding: 1rem; } .iu-overlay.iu-open { display: flex; } .iu-overlay .iu-card { background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); max-width: 700px; width: 100%; max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem 1.25rem 1.25rem; } .iu-overlay .iu-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; } .iu-overlay .iu-title { margin: 0; font-size: 1.05rem; color: var(--heading-color, #2c4964); flex: 1; } .iu-overlay .iu-queue { background: var(--accent-color, #1977cc); } .iu-overlay .iu-close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: #7b8ea1; cursor: pointer; padding: 0 .25rem; } .iu-overlay .iu-help { font-size: .8rem; color: #7b8ea1; margin: 0 0 .75rem; } .iu-overlay .iu-stage-wrap { display: flex; justify-content: center; } .iu-overlay .iu-stage { position: relative; overflow: hidden; background: #1d2935; border-radius: 8px; touch-action: none; cursor: grab; direction: ltr; /* transforms are coordinate-based; keep stage LTR-stable */ } .iu-overlay .iu-stage:active { cursor: grabbing; } .iu-overlay .iu-img { position: absolute; top: 50%; left: 50%; transform-origin: center center; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; } /* circle mask for profile pictures */ .iu-overlay .iu-mask { position: absolute; inset: 0; pointer-events: none; display: none; } .iu-overlay .iu-mask.iu-mask-circle { display: block; background: radial-gradient(circle closest-side, transparent 99%, rgba(20, 33, 46, .55) 100%); } /* rule-of-thirds guides */ .iu-overlay .iu-grid { position: absolute; inset: 0; pointer-events: none; opacity: .35; } .iu-overlay .iu-grid i { position: absolute; background: rgba(255, 255, 255, .7); } .iu-overlay .iu-grid i:nth-child(1) { left: 33.33%; top: 0; bottom: 0; width: 1px; } .iu-overlay .iu-grid i:nth-child(2) { left: 66.66%; top: 0; bottom: 0; width: 1px; } .iu-overlay .iu-grid i:nth-child(3) { top: 33.33%; left: 0; right: 0; height: 1px; } .iu-overlay .iu-grid i:nth-child(4) { top: 66.66%; left: 0; right: 0; height: 1px; } .iu-overlay .iu-controls { display: flex; align-items: center; gap: .5rem; margin: .85rem 0 0; } .iu-overlay .iu-controls .iu-zoom { flex: 1; } .iu-overlay .iu-ctl-icon { color: #7b8ea1; } .iu-overlay .iu-ctl-btn { border: 1px solid #dde6ee; background: #fff; border-radius: 6px; padding: .25rem .55rem; color: var(--heading-color, #2c4964); cursor: pointer; font-size: .85rem; white-space: nowrap; } .iu-overlay .iu-ctl-btn:hover { border-color: var(--accent-color, #1977cc); color: var(--accent-color, #1977cc); } .iu-overlay .iu-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; } /* ============================================================ Standardized visitor-facing image frames. Apply per display context so saved crops render consistently. ============================================================ */ .img-frame { display: block; width: 100%; overflow: hidden; } .img-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; } .img-frame--square { aspect-ratio: 1 / 1; } .img-frame--card { aspect-ratio: 4 / 3; border-radius: 8px; } .img-frame--wide { aspect-ratio: 16 / 9; border-radius: 8px; } .img-frame--banner { aspect-ratio: 21 / 9; } .img-frame--avatar { aspect-ratio: 1 / 1; border-radius: 50%; } .img-frame--logo { aspect-ratio: 3 / 2; } .img-frame--logo > img { object-fit: contain; background: #fff; }