BratskihTech/universal-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

переключение адаптива для разных устройств по поинтеру,а не по ширине

Browse Source
This commit is contained in:
Илья Братских 2026-06-28 15:15:06 +03:00 committed by KBAHTNET
parent 15c6215eef
commit f540181c84
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
styles.css
View File

@ -1360,11 +1360,14 @@ html[data-theme="light"] .accent-swatch-custom {
/* ========================================================================== /* ==========================================================================
13. Responsive Layout 13. Responsive Layout
-------------------------------------------------------------------------- --------------------------------------------------------------------------
На планшетах sidebar перестает быть отдельной колонкой, а на телефонах Основной режим выбирается по типу ввода, а не по ширине экрана:
уменьшаются панели, кнопки и размеры карточек. - touch / coarse pointer -> компактный "мобильный" layout;
- hover + fine pointer -> десктопный layout даже на широком touch-мониторе.
Узкое окно с мышью дополнительно поджимает сетку через max-width fallback.
========================================================================== */ ========================================================================== */
@media (max-width: 1120px) { /* Узкое окно на устройствах с мышью: sidebar и сетка карточек чуть компактнее. */
@media (hover: hover) and (pointer: fine) and (max-width: 1120px) {
.app-layout { .app-layout {
grid-template-columns: minmax(240px, min(var(--sidebar-width), 320px)) 8px minmax(0, 1fr); grid-template-columns: minmax(240px, min(var(--sidebar-width), 320px)) 8px minmax(0, 1fr);
} }
@ -1378,7 +1381,8 @@ html[data-theme="light"] .accent-swatch-custom {
} }
} }
@media (max-width: 720px) { /* Touch-устройства: stacked layout, без resizer, крупнее touch-targets. */
@media (hover: none), (pointer: coarse) {
.shell { .shell {
width: min(var(--shell-max-width), calc(100% - 22px)); width: min(var(--shell-max-width), calc(100% - 22px));
padding: 14px 0; padding: 14px 0;