diff --git a/shine-UI/js/pages/channels-list.js b/shine-UI/js/pages/channels-list.js index b2d3723f..e0d2d947 100644 --- a/shine-UI/js/pages/channels-list.js +++ b/shine-UI/js/pages/channels-list.js @@ -13,7 +13,6 @@ import { } from '../services/channels-ux.js'; import { makeShineChannelRoute } from '../services/shine-routes.js'; import { renderAvatar } from '../components/avatar-image.js'; -import { createOverflowDots } from '../components/overflow-dots.js'; import { parseDmTechBlocks } from '../services/dm-tech-blocks.js'; export const pageMeta = { id: 'channels-list', title: 'Каналы' }; @@ -1217,7 +1216,6 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed const main = renderChannelMain(channel); - const isGuest = !state.session.isAuthorized; const controls = document.createElement('div'); controls.className = 'channel-row-controls'; @@ -1231,34 +1229,6 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed count.textContent = unreadCount > 0 ? String(unreadCount) : ''; count.classList.toggle('is-empty', unreadCount <= 0); - if (!isGuest) { - const menuButton = document.createElement('button'); - menuButton.type = 'button'; - menuButton.className = 'channel-menu-trigger'; - menuButton.append(createOverflowDots()); - menuButton.addEventListener('click', (event) => { - event.stopPropagation(); - animatePress(menuButton); - listState.revealedCounters.add(channel.id); - - if (listState.openMenuId === channel.id) { - closeChannelMenu(listState); - rerenderList(); - return; - } - - listState.openMenuId = channel.id; - openChannelMenu({ - listState, - channel, - anchorEl: menuButton, - refreshFeed: async () => loadFeedAndRender({ screen, listState, contentEl: container, navigate }), - rerenderList, - }); - rerenderList(); - }); - controls.append(menuButton); - } controls.append(time, count); row.append(avatar, main, controls); diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css index 76c9383c..b1179a18 100644 --- a/shine-UI/styles/components.css +++ b/shine-UI/styles/components.css @@ -4197,8 +4197,15 @@ textarea.input { .channel-row-count { min-width: 28px; justify-content: center; - background: linear-gradient(140deg, rgba(223, 186, 98, 0.95), rgba(199, 155, 75, 0.95)); - color: #17203a; + background: linear-gradient(180deg, #57b6ff 0%, #2a86ff 100%); + color: #ffffff; + box-shadow: + 0 0 0 1px rgba(255, 255, 255, 0.08) inset, + 0 0 10px rgba(52, 146, 255, 0.68), + 0 0 18px rgba(52, 146, 255, 0.32); + font-size: 12px; + font-weight: 700; + line-height: 1; } .channels-bottom-action { @@ -5227,6 +5234,8 @@ textarea.input { justify-items: end; align-content: start; gap: 6px; + position: relative; + min-width: 44px; } .channel-menu-trigger { @@ -9172,32 +9181,6 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn { margin-left: 48px; } -/* Троеточие внутри строки канала использует тот же чистый overflow-стиль: - * без рамки/подложки, белые точки с мягким голубым свечением. */ -.channels-screen--list .channel-menu-trigger { - width: 34px; - height: 34px; - min-width: 34px; - min-height: 34px; - padding: 0; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 0; - background: transparent; - box-shadow: none; - color: var(--app-topbar-gold); - text-shadow: none; -} - -.channels-screen--list .channel-menu-trigger .app-overflow-dots i { - background: var(--app-topbar-gold); - box-shadow: - 0 0 5px var(--app-topbar-blue-glow), - 0 0 10px var(--app-topbar-blue-glow-soft); -} - /* Название канала и техническая строка (login / channel) — одна типографическая * система с основным интерфейсом: белый текст + голубое свечение. */ .channels-screen--list .channel-row-title, @@ -9213,76 +9196,32 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn { font-weight: 700; } -/* ===== Channels: final overflow + unread polish (2026-08-22 13:34) ===== */ -/* Внутреннее троеточие карточки канала должно выглядеть ровно как остальные - * overflow-кнопки интерфейса. Более высокая специфичность намеренно перекрывает - * старые локальные стили .channel-menu-trigger. */ -.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger { - width: 40px !important; - height: 40px !important; - min-width: 40px !important; - min-height: 40px !important; - margin: 0 !important; - padding: 0 !important; - border: 0 !important; - border-radius: 0 !important; - outline: 0 !important; - background: transparent !important; - box-shadow: none !important; - color: #F7FBFF !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - font: inherit !important; - line-height: 1 !important; - appearance: none !important; - -webkit-appearance: none !important; -} - -.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:hover, -.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:focus, -.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:focus-visible, -.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:active { - border: 0 !important; - outline: 0 !important; - background: transparent !important; - box-shadow: none !important; -} - -.channels-screen--list .channel-row .channel-menu-trigger > .app-overflow-dots { - width: 8px !important; - height: 24px !important; - margin: 0 !important; - color: #F7FBFF !important; - filter: - drop-shadow(0 0 3px rgba(92, 190, 255, 0.72)) - drop-shadow(0 0 7px rgba(72, 145, 255, 0.34)); -} - -.channels-screen--list .channel-row .channel-menu-trigger > .app-overflow-dots > i { - width: 4px !important; - height: 4px !important; - flex-basis: 4px !important; - border: 0 !important; - background: #F7FBFF !important; - box-shadow: none !important; -} - /* Счётчик непрочитанных: без видимой границы. Сам овал — светящийся синий объём, * цифра остаётся обычной белой. */ .channels-screen--list .channel-row-count, .channels-screen--list .unread.channel-row-count { border: 0 !important; outline: 0 !important; - background: rgba(74, 169, 255, 0.36) !important; + background: linear-gradient(180deg, #57b6ff 0%, #2a86ff 100%) !important; color: #FFFFFF !important; box-shadow: - 0 0 8px rgba(92, 190, 255, 0.82), - 0 0 18px rgba(72, 145, 255, 0.54), - 0 0 30px rgba(72, 145, 255, 0.24) !important; + 0 0 0 1px rgba(255, 255, 255, 0.08) inset, + 0 0 10px rgba(52, 146, 255, 0.68), + 0 0 18px rgba(52, 146, 255, 0.32) !important; text-shadow: none !important; } +.channels-screen--list .channel-row .channel-row-controls > .channel-row-count { + top: 0 !important; + right: 0 !important; + position: absolute !important; + z-index: 2; +} + +.channels-screen--list .channel-row .channel-row-controls > .channel-menu-trigger { + display: none !important; +} + /* ===== Transparent topbar + scroll fade (2026-08-22 13:40) ===== * Верхняя шапка не рисует отдельную плашку. Контент прокручивается под ней и