/* ============================================================ Центр оповещений (js/ui/notifyCenter.js) Кнопка живёт в боковом меню рядом с темой, а окно — общее на весь портал: его наполняет открытая страница. Оформление окна взято у диалога выбора дизайна (.designDialog), чтобы всплывающие окна оболочки выглядели одинаково. ============================================================ */ /* ---------- колокольчик в боковом меню ---------- */ .navBell { display: block; } /* Страница без оповещений: кнопка на месте, но гаснет и не нажимается — исчезающая кнопка сбивала бы привычку, где её искать. */ #notifyToggle:disabled { opacity: .38; cursor: default; } #notifyToggle:disabled:hover { background: transparent; } #notifyToggle.is-open { color: var(--primary); } /* Звука не будет ни от одного события — перечёркиваем колокол. Линия рисуется здесь, а не вторым значком: так нечего рассинхронизировать. */ #notifyToggle.is-muted .navBell { opacity: .75; } #notifyToggle.is-muted .nav__icon { position: relative; } #notifyToggle.is-muted .nav__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%) rotate(-45deg); } /* Пока звонит повтор тревоги — колокол качается. Панель может быть закрыта, а знать о непрочитанном событии нужно. */ #notifyToggle.is-ringing .navBell { color: var(--primary); transform-origin: 50% 15%; animation: notifyBell-shake 1.4s ease-in-out infinite; } @keyframes notifyBell-shake { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } 97% { transform: rotate(-5deg); } } /* ---------- окно ---------- */ .notifyDialog { max-width: min(480px, calc(100vw - 32px)); } .notifyDialog__body { /* Токены раздела Bybit объявлены на .bybit-page, а окно живёт в — без этой строки панель микшера теряет фоны и границы. Та же ловушка, на которой уже обжигались окно шаблонов и меню режимов. */ --by-panel: color-mix(in srgb, var(--text) 4%, transparent); --by-panel2: color-mix(in srgb, var(--text) 7%, transparent); --by-panel3: color-mix(in srgb, var(--text) 11%, transparent); --by-mut: var(--muted); --by-mut2: color-mix(in srgb, var(--text) 45%, transparent); max-height: min(68vh, 620px); overflow-y: auto; padding: 12px; } /* Панель микшера рисовалась выпадашкой у колокольчика в шапке раздела. В окне она — обычный блок: карточку, тень и границу даёт само окно. */ .notifyDialog__body .nmx { position: static; width: 100%; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; animation: none; } /* ---------- заглушка раздела без оповещений ---------- */ .notifyStub { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 18px 30px; text-align: center; } .notifyStub__ico { font-size: 30px; line-height: 1; opacity: .5; filter: grayscale(1); } .notifyStub__title { font-size: 13px; font-weight: 700; } /* Ожидание ответа сервера: то же место, тот же строй, только короче — панель не должна прыгать по высоте, когда цифры приедут. */ .notifyStub--wait { padding: 34px 18px; } .notifyStub--wait .notifyStub__ico { animation: notifyWait-pulse 1.4s ease-in-out infinite; } @keyframes notifyWait-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } } .notifyStub__text { max-width: 320px; font-size: 12px; line-height: 1.5; color: var(--muted); }