/* rxmenu.css — задумка #132: счётчик на кнопке плашки реакций и отметка своей реакции. Отдельным файлом по той же причине, что и js-надстройка: components.css — 107 КБ, а патч несёт файл целиком. Подключается списком $addonCss в index.php, в самый конец — при равной силе селектора выигрывает тот, кто ниже, поэтому база не переписывается ни на строку. Кнопка плашки (.ctx-react) в базе — flex 38×38 без position; счётчику нужна точка отсчёта, поэтому здесь она становится relative. Размер кнопки от этого не меняется: сам счётчик выведен из потока. */ .ctx-react { position: relative; } /* Цифра в правом нижнем углу кнопки. Мелкая и плотная: плашка узкая, а цифра тут — уточнение, а не заголовок. Обводка цветом панели отделяет её от эмодзи, на который она наезжает. */ .ctx-react .rx-cnt { position: absolute; right: 1px; bottom: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--panel2); pointer-events: none; } /* Своя реакция: мягкая подложка под кнопкой — видно, что повторный тап её снимет. Не рамка: рамка на круглой кнопке 38px рядом с соседями читалась бы как выделение фокуса. */ .ctx-react.rx-on { background: var(--accent-soft); } .ctx-react.rx-on:hover { background: var(--accent-soft); }