/* sidebar.css — ширина списка диалогов на десктопе: тянется, сворачивается, помнится. Задумка владельца по донору: список можно сузить, а сузив до упора — свернуть совсем, оставив один рейл папок; нажал — вернулся. У донора то же самое: чем уже колонка, тем меньше в ней деталей, а в свёрнутом виде остаются только значки. Отдельным листом, как и tgsize.css: механику ширины некуда дописать в layout.css так, чтобы потом откатить одной строкой. Порог — указатель, а не ширина окна (правило проекта): на пальце список и так на весь экран, тянуть его нечем и незачем. Ширину везёт переменная на , а не инлайн на #sidebar: её ставит js один раз, и её же читают правила степеней сжатия ниже — иначе пришлось бы дублировать число в трёх местах. */ :root{--side-w:340px} @media not all and (pointer:coarse){ #sidebar{width:var(--side-w);transition:width .18s ease} html.side-drag #sidebar{transition:none} /* пока тянут — без задержки, иначе ручка «плывёт» */ /* Ручка. Своей полосы не рисуем: она живёт на границе списка и переписки, шириной в палец курсора, и проявляется только под ним. position:absolute внутри #sidebar — поэтому у него появляется position:relative (ниже), а z-index выше содержимого списка. */ #side-grip{position:absolute;top:0;right:-3px;bottom:0;width:7px;z-index:9;cursor:col-resize; background:transparent;border:0;padding:0} #side-grip::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:3px;border-radius:2px; background:var(--accent);opacity:0;transition:opacity .15s ease} #side-grip:hover::after,html.side-drag #side-grip::after{opacity:.55} #sidebar{position:relative} /* Степень 1 — узкий список (меньше 260px): подпись под именем и время уходят, остаётся кружок с именем. Донор так же: чем уже, тем меньше подробностей. */ html.side-narrow .conv-row .row-sub, html.side-narrow .conv-row .row-time, html.side-narrow .channel-row .row-sub, html.side-narrow .channel-row .row-time{display:none} html.side-narrow .side-search .wrap{display:none} html.side-narrow .side-search{justify-content:center} /* Степень 2 — свёрнут совсем: список не занимает места, остаётся рейл папок. display:none, а не нулевая ширина: скрытый список не должен ни считаться, ни рисоваться. */ html.side-off #sidebar{display:none} /* Кнопка «вернуть список». Живёт в рейле — единственном, что остаётся на экране в свёрнутом виде. Пока список открыт, она смотрит стрелкой влево («свернуть»), свёрнут — вправо. */ #side-toggle{display:flex;align-items:center;justify-content:center;width:48px;height:44px; margin:0 0 6px;border:none;border-radius:12px;background:transparent;color:var(--rail-fg); cursor:pointer;flex-shrink:0} #side-toggle:hover{background:var(--rail-active)} #side-toggle svg{transition:transform .18s ease} html.side-off #side-toggle svg{transform:scaleX(-1)} } /* На пальце ничего этого нет: список там — отдельный экран, а не колонка. */ @media (pointer:coarse){ #side-grip,#side-toggle{display:none} }