diff --git a/modules/rsocials/mod.ts b/modules/rsocials/mod.ts index 0063ae8..41497d3 100644 --- a/modules/rsocials/mod.ts +++ b/modules/rsocials/mod.ts @@ -930,16 +930,34 @@ const THREAD_CSS = ` } .thread-export-menu button:hover { background: rgba(99,102,241,0.15); } .thread-export-menu button + button { border-top: 1px solid var(--rs-bg-hover); } -.tweet-card__image-bar { display: flex; gap: 0.4rem; margin-top: 0.5rem; } -.tweet-card__image-btn { - padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; - cursor: pointer; transition: all 0.15s; background: transparent; - color: var(--rs-text-muted); border: 1px solid var(--rs-input-border); - display: inline-flex; align-items: center; gap: 0.25rem; +.tweet-card__photo-btn { + position: absolute; top: 8px; right: 8px; z-index: 5; + width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rs-input-border); + background: var(--rs-bg-surface); color: var(--rs-text-muted); cursor: pointer; + display: flex; align-items: center; justify-content: center; + opacity: 0; transition: opacity 0.15s, border-color 0.15s, color 0.15s; } -.tweet-card__image-btn:hover { border-color: #6366f1; color: #c4b5fd; } -.tweet-card__image-btn:disabled { opacity: 0.5; cursor: not-allowed; } -.tweet-card__image-btn svg { width: 12px; height: 12px; } +.tweet-card:hover .tweet-card__photo-btn { opacity: 1; } +.tweet-card__photo-btn:hover { border-color: #6366f1; color: #c4b5fd; } +.tweet-card__photo-btn svg { width: 14px; height: 14px; } +.tweet-card__photo-btn .photo-btn-plus { + position: absolute; bottom: -1px; right: -3px; font-size: 10px; font-weight: 700; + color: #6366f1; line-height: 1; +} +.tweet-card__photo-menu { + position: absolute; top: 38px; right: 8px; z-index: 10; + background: var(--rs-bg-surface); border: 1px solid var(--rs-input-border); border-radius: 8px; + min-width: 160px; overflow: hidden; box-shadow: 0 8px 24px var(--rs-shadow-lg); +} +.tweet-card__photo-menu[hidden] { display: none; } +.tweet-card__photo-menu button { + display: flex; align-items: center; gap: 0.4rem; width: 100%; + padding: 0.5rem 0.7rem; border: none; background: transparent; + color: var(--rs-text-primary); font-size: 0.8rem; cursor: pointer; transition: background 0.1s; +} +.tweet-card__photo-menu button:hover { background: rgba(99,102,241,0.15); } +.tweet-card__photo-menu button + button { border-top: 1px solid var(--rs-bg-hover); } +.tweet-card__photo-menu button svg { width: 14px; height: 14px; } .tweet-card__attached-image { position: relative; margin-top: 0.5rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--rs-input-border); } .tweet-card__attached-image img { display: block; width: 100%; height: auto; } .tweet-card__image-remove { @@ -1065,12 +1083,17 @@ function renderThreadBuilderPage(space: string, threadData?: ThreadData | null): '' + '' : ''; - const imageBar = '
'; + const svgCamera = ''; + const photoBtn = !imgUrl + ? '' + + '' + : ''; return '' + esc(text) + '
' + imgHtml + - imageBar + '