/* PROУрок — постійні стилі й виправлення (підключається завжди, незалежно від Tailwind-білду) */ /* =========================================================================== ЗМІСТ (порядок — як у файлі, а не за номером) Номер секції — це ЯРЛИК, а не позиція: історично блоки дописувались у кінець файлу, зберігаючи свій номер. Шукайте по рядку «18c.» разом із крапкою — так знаходиться саме заголовок, а не згадка в коментарі. Правило нумерації: якщо новий блок дублює вже зайнятий номер — новий отримує наступний вільний, а старший за розташуванням лишає свій. Так посилання з PHP і README не протухають при кожному релізі. 0 Скидання для inline SVG 0a Підкреслення посилань 0b Рамка фокуса на посиланнях 0c a:visited і контентні посилання 0d Центрування в круглих кнопках 1 Іконкові кнопки хедера (скидання Storefront) 2 Внутрішні сторінки WooCommerce (кабінет, кошик, оформлення) 3 Футер на всю ширину 4 Форми та кнопки WooCommerce 5 Ціна у картці каталогу 6 Range-слайдер ціни 7 Пагінація каталогу 8 Анімація появи карток 9 Вхід / реєстрація — вкладки 10 Темна тема внутрішніх сторінок WooCommerce 11 Форма «Додати матеріал» — файлові інпути 12 Кабінет «Мій обліковий запис» 13 Сторінка товару: галерея, панель купівлі, вкладки, відгуки 14 HERO каталогу 38 Юридичні сторінки 38a Робочі мітки «що дописати» 15 Низ футера: реквізити ФОП, бейджі 16 Панель каталогу: лічильник, фільтри, сортування 17 Hero-банер кабінету, входу, реєстрації 18 Контентні сторінки (спільні pu-*) 18b «Стати автором» 18c «Довідка» 19 Класи і прозорість матеріалу 19a–19g 20 Прев'ю матеріалу + лайтбокс 20a–20h 39 Умови завантаження 21 Тип матеріалу — комбобокс 21a–21f 22 Головна навігація 22a–22d 23 Компоненти замість Tailwind-утиліт 23a–23c 24 Оформлення замовлення: цифрова доставка 25 Страхувальна сітка для поодиноких Tailwind-утиліт 26 Компактна шапка 26a Логотип на вузьких екранах 27 Блок акаунта в панелі меню 27a–27d 28 Сторінка «Контакти» 28a–28f 40 Джерела прев'ю (форма автора) 29 Джерела і прозорість — вкладка товару 30 Модерація матеріалів 30a–30s 31 Кабінет автора: відповідь модератора 31a Призупинення 31b Кнопка «Модерація» 32 Шапка: дії акаунта в один рядок 33 Редактор опису матеріалу 34 Гаманець автора 35 Модерація: фільтр авторів і призупинення 35a–35e 36 Коментар автора при повторній подачі 36a–36d 37 Штатні автори та матеріали Платформи 37a–37c 41 Кнопка «нагору» 42 Головна сторінка кабінету покупця 42a Адаптив 42b Темна тема 43 Стіл підтримки 43a–43h 44 Згоди при реєстрації та в кабінеті 45 Поле пароля: перемикач видимості 46 Код товару 47 Платежі та фіскалізація 48 Видача матеріалів: подяка й завантаження 48.1–48.6 49 Повернення коштів 49a 50 Оформлення: підсумок і спосіб оплати 51 Особисті дані (edit-account) 52 Кошик: картки матеріалів 52a–52h 53 Залишки Storefront: 404, подяка, пароль 53a–53g =========================================================================== */ /* --------------------------------------------------------------------------- * 0. Скидання для inline SVG (частина Tailwind preflight, який ми вимкнули * в tailwind.config.js через сумісність із Storefront/WooCommerce). * Без цього лишається display:inline і має "підвал" під базовою * лінією (як у ), через що іконки у круглих/квадратних кнопках * (серце, кошик, редагувати, видалити тощо) виглядають зміщеними від * центру, навіть якщо сама кнопка center-ована через flex/grid. * ------------------------------------------------------------------------- */ svg { display: block; vertical-align: middle; } /* --------------------------------------------------------------------------- * 0a. Скидання підкреслення посилань (частина Tailwind preflight, який ми * вимкнули в tailwind.config.js через сумісність із Storefront/WooCommerce). * Без цього посилання без явного text-decoration (напр. заголовок товару * в картці каталогу) успадковують підкреслення з user-agent стилів * браузера — а не з нашого CSS. Через різницю в тому, як Chrome і Firefox * малюють text-decoration на тексті, обрізаному через line-clamp * (-webkit-line-clamp), це підкреслення в Chrome виглядало "розірваним" * під частиною рядка, а в Firefox — суцільним під усім текстом. * Компоненти, яким підкреслення таки потрібне (посилання в тексті * кабінету, футер сторінок-довідок тощо), вмикають його явно власним * класом — той селектор специфічніший за цей і завжди переможе. */ a { text-decoration: none; } /* --------------------------------------------------------------------------- * 0b. Рамка фокуса/натискання на посиланнях. * У браузера є власний контур (outline), який з'являється на посиланні * після кліку мишею (стан :active чи :focus без клавіатури) — для * багаторядкового тексту (напр. назва товару в картці, обрізана через * line-clamp) він малюється не однією лінією під текстом, а прямокутником * навколо кожного рядка окремо, тому й виглядає як "рамка" довкола * останніх рядків заголовка. * Прибираємо його лише для кліку мишею — :focus-visible і надалі working: * навігація з клавіатури (Tab) все ще показує контур для доступності. */ a:focus:not(:focus-visible), a:active { outline: none; } /* Доповнено 1.50.17. Скидання вище лишається, але його виявилось замало: * на назві матеріалу в картці каталогу (два рядки, обрізані через * line-clamp) при затиснутій лівій кнопці досі промальовується рамка. * * Відтворити її з вихідних файлів теми не вдалося — жодне правило в * theme.css, main.css і style.css такого не задає. Тож ідемо не від * винуватця, а від симптому й закриваємо всі три механізми, якими браузер * малює таку рамку на посиланні: контур, тінь і підсвітку дотику. Останнє * стосується не лише мобільних: Chrome застосовує -webkit-tap-highlight * і при миші на пристроях із сенсорним екраном — а це майже всі сучасні * ноутбуки. * * ⚠️ :focus-visible свідомо не чіпаємо: навігація з клавіатури мусить * лишати видимий контур, інакше сторінка стає непрохідною без миші. */ a:active, a:focus:not(:focus-visible), .prourok-card a:active, .prourok-card a:focus:not(:focus-visible) { box-shadow: none; -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------------------------- * 0b-bis. Скруглення на клікабельних елементах не зникає на :active/:focus — * ЄДИНЕ правило на весь сайт, а не по одному класу (1.54.6). * * ⚠️ 1.54.7: ЦЕЙ РОЗДІЛ ЛІКУВАВ НЕ ТУ ПРИЧИНУ. Справжня — підсвітка дотику, * див. розділ 0b-ter одразу нижче. Правила тут лишаються: вони коректні * для клавіатурного фокуса й нічого не ламають. * * ІСТОРІЯ ПРОБЛЕМИ. Її повідомляли тричі поспіль про різні, нічим не * пов'язані місця: стрілку пагінації каталогу, тоді головне меню й * кнопку «Перейти до каталогу» в кабінеті. Кожен раз причина була своя: * — елемент узагалі не мав правила :focus-visible (пагінація); * — елемент МАВ правило, але воно саме малювало квадрат: * `outline: 2px solid …` не огинає border-radius, на відміну від * box-shadow, і більшість браузерів малює такий контур прямокутником * по краю рамки незалежно від скруглення (головне меню — розділ 22, * і ще сім місць по всій темі, усі виправлені на box-shadow); * — елемент користується Tailwind-класом rounded-* прямо в розмітці * (кнопки шапки, іконки дій у кабінеті автора, серце «в обране» на * картці товару) — і про такі border-radius theme.css узагалі не * знає, тож жоден точковий аудит по CSS-класах з border-radius * їх не знайде. * * Третій випадок і показав, що ганятися за конкретними класами — шлях * без кінця: рахунок точкових виправлень зростає з кожним новим звітом, * а спосіб пошуку (грep по border-radius у CSS) структурно не бачить * елементів, чиє скруглення прийшло з розмітки, а не з теми. Тому далі — * не список класів, а ОДНЕ правило на рівні тегів /