.gallery-comments { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem 1.25rem; background: #fff; border: 1px solid #f2f2f2; border-radius: 8px; text-align: center; box-shadow: 2px 1px 8px -8px rgba(0, 0, 0, 0.3); } .gallery-comments__login { margin: 0 0 1rem; font-size: 0.9rem; color: #767676; } .gallery-comments__notice { width: 100%; margin: 0; padding: 0.75rem; background: #f2f2f2; border-radius: 5px; text-align: center; font-weight: 500; font-size: 0.875rem; color: #000; } .gallery-composer { display: none; width: 100%; flex-direction: column; align-items: center; gap: 0.75rem; } html[data-auth="user"] .gallery-composer { display: flex; } .gallery-comment__reply-open, [data-cc-reply-open] { display: none !important; } html[data-auth="user"] .gallery-comment__reply-open, html[data-auth="user"] [data-cc-reply-open] { display: inline-flex !important; } .gallery-composer--inline { align-items: stretch; } .gallery-comments__me { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .gallery-comments__field { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; } .gallery-comments__send { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 6px; background: #e22128; color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.15s ease; } .gallery-comments__send:hover { background: #c8102e; } .gallery-comments__read-all { width: 100%; padding: 0.5rem; border: none; border-radius: 8px; background: #e22128; color: #fff; font-weight: 500; font-size: 1rem; cursor: pointer; transition: background 0.15s ease; } .gallery-comments__read-all:hover { background: #c8102e; } .gallery-comments__form { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; } .gallery-comments__input { width: 100%; resize: none; height: 45px; padding: 10px 92px 10px 14px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; font: inherit; font-size: 0.875rem; line-height: 1.3; } .gallery-comments__input:focus { outline: none; border-color: #e22128; box-shadow: 0 0 0 2px rgba(226, 33, 40, 0.15); } .gallery-comments__attach { position: absolute; top: 50%; right: 46px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; color: #313131; font-size: 1rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .gallery-comments__attach:hover { border-color: #e22128; color: #e22128; } .gallery-comments__photo-preview { position: relative; width: fit-content; margin-top: 0.5rem; } .gallery-comments__photo-preview[hidden] { display: none; } .gallery-comments__photo-thumb { display: block; width: 72px; height: 72px; border-radius: 8px; border: 1px solid #e5e5e5; object-fit: cover; } .gallery-comments__photo-remove { position: absolute; top: -8px; left: -8px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 9999px; background: #e22128; color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .gallery-comments__photo-remove:hover { background: #c8102e; } .gallery-comments__form .gallery-comments__input { padding: 0.75rem; height: auto; min-height: 45px; } .gallery-comments__submit { align-self: flex-start; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: #c00; color: #fff; font-weight: 600; cursor: pointer; } .gallery-comments__submit:disabled { opacity: 0.6; cursor: not-allowed; } .gallery-comments__error { margin: 0; font-size: 0.85rem; color: #c00; } .gallery-comments { scroll-margin-top: 6rem; align-items: stretch; } .gallery-comments__count { width: 100%; margin: 0; font-size: 1.125rem; font-weight: 600; text-align: left; color: #313131; } .gallery-comments__list { width: 100%; display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; text-align: left; } .gallery-comment { position: relative; margin: 0; } .gallery-comment__row { gap: 0.5rem; align-items: center; } .gallery-comment__avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; } .gallery-comment__avatar-ring { display: block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #c8102e; overflow: hidden; flex-shrink: 0; } .gallery-comment__avatar { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery-comment__verified { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #1877f2; font-size: 16px; line-height: 1; } .gallery-comment__head { margin: 0; gap: 6px; flex-wrap: wrap; } .gallery-comment__user { font-weight: 600; font-size: 1rem; color: #3c3c3c; } .gallery-comment__time { font-size: 0.75rem; color: #6a7282; } .gallery-comment__text { margin: 0 0 0.5rem; font-size: 1rem; color: #313131; line-height: 1.4; } .gallery-comment__photo-wrap { position: relative; display: inline-block; max-width: 220px; margin: 0 0 0.75rem; } .gallery-comment__photo { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto; margin: 0; border-radius: 8px; object-fit: cover; } .gallery-comment__zoom { position: absolute; z-index: 1; right: 0.4rem; bottom: 0.4rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.95rem; cursor: pointer; opacity: 0.92; transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease; } .gallery-comment__zoom:hover, .gallery-comment__zoom:focus-visible { opacity: 1; transform: scale(1.06); background: rgba(0, 0, 0, 0.75); outline: none; } .gallery-comment__thread { margin-left: 19px; padding: 0.5rem 0 0 0.75rem; border-left: 1px solid #e22128; } .gallery-comment__actions { gap: 0.75rem; } .gallery-comment__actions-left { gap: 0.75rem; } .gallery-comment__actions button { gap: 4px; background: none; border: none; padding: 0; font-weight: 500; font-size: 0.75rem; cursor: pointer; } .gallery-comment__actions button i { font-size: 0.9rem; } .gallery-comment__reply-btn { color: #e22128; } .gallery-comment__reply-btn:hover { text-decoration: underline; } .gallery-comment__reply-composer { margin-top: 0.75rem; } .gallery-comment__reply-composer[hidden] { display: none; } .gallery-comment__replies { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .gallery-comment__replies[hidden] { display: none; } .gallery-comment__reply .gallery-comment__text { margin-bottom: 0; } .gallery-comment__reply .gallery-comment__photo-wrap { margin-top: 0.5rem; margin-bottom: 0; } .gallery-comment--own { position: relative; } .gallery-comment__delete { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: var(--radius-full, 9999px); color: #9ca3af; cursor: pointer; transition: color 150ms ease-out, background-color 150ms ease-out; } .gallery-comment__delete:hover { color: var(--color-canon-red-alt, #df1f26); background: var(--color-canon-red-soft, rgba(200, 16, 46, 0.1)); } .gallery-comment__delete i { font-size: 0.95rem; } .gallery-comment__meta { margin: 0 0 0.25rem; font-size: 0.85rem; } .gallery-offcanvas { width: min(480px, 100vw); } .gallery-offcanvas__header { border-bottom: 1px solid #e5e5e5; } .gallery-offcanvas__title { margin: 0; font-weight: 600; font-size: 1.125rem; color: #313131; } .gallery-offcanvas__body { display: flex; flex-direction: column; gap: 1.25rem; } .gallery-offcanvas__body .gallery-comments__list { flex: 1; }