/* DorumaCRM — маскот: цвета, масштабы, движение. Источник: desigen_system/demo.html (нет отдельного генератора — если мокап там поменяют, этот файл нужно пересинхронизировать руками). Требует tokens.css. Спрайт (`_daruma_sprite.html`) вставляется инлайном в начало — см. base.html. ВАЖНО ПРО УСТРОЙСТВО. создаёт теневое дерево, и селекторы отсюда внутрь символа НЕ проходят — символ остался бы чёрным. Поэтому правила рисования лежат внутри каждого в _daruma_sprite.html, а этот файл управляет ими ЧЕРЕЗ ПЕРЕМЕННЫЕ: они теневую границу пересекают. Следствие: нельзя писать `.daruma .d-cheek { display: none }` — не сработает. Только `.daruma--icon { --d-v-cheek: none }`. */ .daruma { --d-body: var(--daruma-400, #e4526a); --d-face: var(--paper-card, #fffefc); --d-outline: var(--ink-base, #23272b); --d-eye-stroke: var(--ink-base, #23272b); --d-iris: var(--mascot-iris, #96c5b3); --d-iris-stroke: var(--ink-base, #23272b); --d-cheek: var(--mascot-cheek, #ffc2d1); --d-hat: var(--mascot-hat, #ffd666); --d-band: var(--mascot-hatband, #e4526a); --d-stroke: 2.6; display: inline-block; flex-shrink: 0; overflow: visible; transform-origin: 50% 90%; } .ume { --u-petal: var(--daruma-400, #e4526a); --u-core: var(--service-400, #ffd666); display: inline-block; flex-shrink: 0; } .ume--empty { --u-petal: none; --u-stroke: var(--ink-base, #23272b); --u-opacity: 0.35; --u-v-core: none; } /* --- пороги упрощения ---------------------------------------------------- Обводка РАСТЁТ при уменьшении: иначе контур исчезает и дарума становится кляксой. Детали снимаются снизу вверх. ------------------------------------------------------------------------ */ .daruma--hero { width: 88px; height: 106px; --d-stroke: 2.2; --d-body-stroke: var(--d-outline); --d-face-stroke: var(--d-outline); --d-face-sw: 1.6; } .daruma--avatar { width: 40px; height: 48px; --d-stroke: 2.6; --d-v-ume: none; /* 40px: цветок уходит */ --d-v-glass: none; /* 40px: очки отпускной дарумы уходят */ } /* Строка заказа в списке (страница "Заказы") — между --avatar (40px) и --icon (24px). В отличие от --icon, НЕ трогает --d-eye-fill/--d-v-brow/ анимацию — состояния (wish/work/done/sad/sleep/joy) должны различаться по лицу и на этом размере, как в макете. Упрощает только то, что и на --avatar: цветок умэ (проверено скриншотом на 28px — сливается с телом, не читается лепестками) и очки отпускной дарумы. */ .daruma--row { width: 28px; height: 34px; --d-stroke: 3.4; --d-v-ume: none; --d-v-glass: none; } .daruma--icon { width: 24px; height: 29px; --d-stroke: 3.6; --d-v-ume: none; --d-v-cheek: none; /* 24px: щёки, блики, брови-усы уходят */ --d-v-glint: none; --d-v-brow: none; --d-v-pupil: none; --d-iris: var(--d-outline); /* радужка схлопывается в точку */ --d-iris-stroke: none; --d-iris-r: 5.4; --d-eye-fill: var(--d-outline); --d-eye-stroke: none; --d-eye-r: 5.4; --d-v-glass: none; --d-v-arc: none; /* дуги-глаза схлопываются в точки */ --d-v-dot: inline; } .daruma--fav { width: 16px; height: 19px; --d-stroke: 4.5; --d-v-ume: none; --d-v-cheek: none; --d-v-glint: none; --d-v-brow: none; --d-v-pupil: none; --d-v-mouth: none; /* 16px: остаётся силуэт и две точки */ --d-v-bubble: none; --d-iris: var(--d-outline); --d-iris-stroke: none; --d-iris-r: 6; --d-eye-fill: var(--d-outline); --d-eye-stroke: none; --d-eye-r: 6; --d-face-stroke: none; --d-v-glass: none; --d-v-arc: none; --d-v-dot: inline; } /* Шляпа держится до 24px: она меняет силуэт. Очки — деталь внутри лица, поэтому умирают уже на 40px. Силуэт читается всегда, детали — нет. */ /* Обводка тела нужна только парадной: на мелких маскот без неё легче и чище. */ .daruma--avatar, .daruma--row, .daruma--icon, .daruma--fav { --d-body-stroke: none; } /* --- движение ------------------------------------------------------------ У каждого состояния своя физика. Покачивание для грустной дарумы — издевательство: она кренится и не выпрямляется. ------------------------------------------------------------------------ */ @keyframes d-wobble { 0%, 72%, 100% { transform: rotate(0); } 78% { transform: rotate(-7deg); } 85% { transform: rotate(5deg); } 92% { transform: rotate(-2deg); } } @keyframes d-sad { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-6deg) translateY(1px); } } @keyframes d-sleep { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } } @keyframes d-joy { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } } /* Отпуск: вдвое медленнее обычного покачивания. Ликующая прыгает — радость активная. Отпуск — радость лежачая. */ @keyframes d-laze { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg) translateY(-2px); } } .daruma--wish { animation: d-wobble 3400ms ease-in-out 0ms infinite; } .daruma--work { animation: d-wobble 3400ms ease-in-out 500ms infinite; } .daruma--done { animation: d-wobble 3400ms ease-in-out 1000ms infinite; } .daruma--sad { animation: d-sad 5000ms ease-in-out infinite; } .daruma--sleep { animation: d-sleep 3600ms ease-in-out infinite; transform-origin: 50% 100%; } .daruma--joy { animation: d-joy 1400ms cubic-bezier(0.3, 1.4, 0.5, 1) infinite; } .daruma--vac { animation: d-laze 5200ms ease-in-out infinite; transform-origin: 50% 92%; } /* Мелкая дарума не двигается: на 24px тряска читается как артефакт рендера. */ .daruma--icon, .daruma--fav { animation: none !important; } /* Список: больше пяти дарум — движется только та, на которую навели. Класс .daruma-crowd вешается на контейнер списка. */ .daruma-crowd .daruma { animation: none; } .daruma-crowd .daruma:hover, .daruma-crowd li:hover .daruma, .daruma-crowd tr:hover .daruma, .daruma-crowd .item:hover .daruma { animation: d-wobble 3400ms ease-in-out; } /* Закрашивание глаза при оплате — мазок кистью, не проявление. Вешать .daruma--filling на 600ms, затем подменить символ на #daruma-done. */ .daruma--filling { --d-eye-fill: var(--d-outline); animation: d-wobble 3400ms ease-in-out; } @media (prefers-reduced-motion: reduce) { .daruma, .daruma-crowd .daruma:hover, .daruma-crowd .item:hover .daruma { animation: none !important; } }