/* * twins-custom.css — наш шар стилів. * * Підключається окремим add_action з пріоритетом 100, тобто після всіх * стилів теми (knot_scripts працює на 99). Через це !important тут не * потрібен: якщо правило раптом не перебиває тему, значить зламався * порядок підключення — це треба з'ясувати, а не обходити. * * Файли теми не чіпаємо, усі власні правки збираємо сюди. */ /* Футер: контакти ------------------------------------------------------------------ Пошта — довгий нерозривний рядок, а li тут елемент grid-сітки .__grid-twoo (1fr 1fr). Без дозволу на перенос мінімальна ширина елемента дорівнює довжині адреси, і колонка розпирає сітку. overflow-wrap: anywhere, на відміну від break-word, враховується при обчисленні min-content, тому сам знімає розпирання. Але Safari розуміє anywhere лише з 15.4, тому перед ним ставимо break-word: старі браузери проігнорують невідоме значення і лишать його. break-word на min-content не впливає, і для нього потрібен min-width: 0 на li — без нього елемент сітки не стискається. Селектор не спирається на href^="mailto:": Cloudflare обфускує пошту і в HTML віддає /cdn-cgi/l/email-protection, а справжній mailto з'являється лише після виконання свого скрипта. */ .footer_contact li { min-width: 0; } .footer_contact a { overflow-wrap: break-word; overflow-wrap: anywhere; } /* Кабінет: колонка «Дії» в таблиці замовлень — десктоп ------------------------------------------------------------------ Ядро виводить посилання підряд без пробілу (), тому вони злипались в «ОплатитиПереглядСкасувати». Розводимо їх і робимо різними за вагою: оплата — головна дія, скасування — приглушене, щоб його не тиснули навмання. */ .woocommerce-orders-table__cell-order-actions a { /* один розмір і одна висота рядка на всі три дії: інакше вони читаються як різні за важливістю через кегль, а не через колір */ font-size: var(--small); line-height: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; /* margin-right, а не margin-left на a + a: на вузькому десктопі колонка не вміщає три дії, і при переносі лівий відступ зсував перенесений елемент від краю. Знизу нуль: інакше кнопки стоять у рядку несиметрично — зверху впритул, знизу з полем. */ margin: 0 clamp(10px, 1.2vw, 20px) 0 0; /* верх на 0.05em більший за низ: у капітелі немає нижніх виносних, тому при рівних відступах текст оптично сидить високо */ padding: 0.75em 1.1em 0.7em; border: 1px solid transparent; /* .43s — тривалість, на якій у темі побудовані всі переходи */ transition: color .43s, background-color .43s, border-color .43s; } .woocommerce-orders-table__cell-order-actions a:last-child { margin-right: 0; } .woocommerce-orders-table__cell-order-actions a.pay { --color: var(--white); text-transform: uppercase; background-color: var(--black); border-color: var(--black); } .woocommerce-orders-table__cell-order-actions a.view { padding-left: 0; padding-right: 0; border-bottom-color: currentColor; } /* --gray, а не --silver: silver на тлі --bg дає контраст близько 2.5:1, для тексту це замало. */ .woocommerce-orders-table__cell-order-actions a.cancel { --color: var(--gray); padding-left: 0; padding-right: 0; } /* Кабінет: таблиця замовлень на мобільному — картки ------------------------------------------------------------------ style.css до 767px тиснув таблицю в екран: ховав заголовки, різав номер через clip-path, гасив підпис суми і перетворював КОЖНУ дію на однакову іконку ока — три нерозрізнювані квадратики, один з яких скасовує замовлення. Таблиця все одно вилазила за екран. Замість цього рядок стає карткою, а підписи беремо з data-title, який ядро проставляє на кожній комірці. Горизонтальний скрол зникає разом із табличною сіткою. Специфічність через .woocommerce-MyAccount-content: правила в style.css мають вигляд .woocommerce-MyAccount-content table tbody td, і без цього префікса наші не перебивають їх. */ @media only screen and (max-width: 767px) { .woocommerce-MyAccount-content .woocommerce-orders-table, .woocommerce-MyAccount-content .woocommerce-orders-table tbody, .woocommerce-MyAccount-content .woocommerce-orders-table tr { display: block; width: 100%; } .woocommerce-MyAccount-content .woocommerce-orders-table thead { display: none; } .woocommerce-MyAccount-content .woocommerce-orders-table tr { padding: clamp(14px, 4vw, 20px); border: 1px solid var(--black); } .woocommerce-MyAccount-content .woocommerce-orders-table tr + tr { margin-top: clamp(14px, 4vw, 20px); } /* Підпис абсолютом, а не колонкою сітки. У grid кожен вузол комірки стає окремим елементом: у сумі це 199 грн плюс текстовий вузол «за 1 позицію», і текст падав у наступний рядок під підпис. При звичайному потоці вміст лишається цілим. */ .woocommerce-MyAccount-content .woocommerce-orders-table tbody th, .woocommerce-MyAccount-content .woocommerce-orders-table tbody td { --label: clamp(80px, 26vw, 112px); display: block; position: relative; /* підпис абсолютний, тому порожня комірка (накладна до відправлення) мала б нульову висоту, і її підпис налазив би на наступний рядок — резервуємо один рядок */ min-height: calc(1.25em + 10px); padding: 5px 0 5px calc(var(--label) + 12px); border-top: 0; } .woocommerce-MyAccount-content .woocommerce-orders-table tbody th::before, .woocommerce-MyAccount-content .woocommerce-orders-table tbody td::before { --color: var(--gray); content: attr(data-title); position: absolute; top: 5px; left: 0; width: var(--label); font-size: var(--small); font-weight: 300; line-height: inherit; text-transform: uppercase; } /* знімаємо хаки зі style.css, розраховані на вузьку таблицю */ .woocommerce-orders-table__cell-order-number a { clip-path: none; margin-left: 0; } /* єдиний !important у файлі: у style.css тут font-size: 0 !important, а його порядок підключення не перебиває */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total { font-size: var(--medium) !important; } /* дії: текстові кнопки на всю ширину, одна під одною */ .woocommerce-MyAccount-content .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions { padding: 14px 0 0; } .woocommerce-MyAccount-content .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before { position: static; display: block; width: auto; margin-bottom: 10px; } /* висота однакова для всіх трьох: розмір, висота рядка й відступи задані на самому a, а не на .pay окремо */ .woocommerce-orders-table__cell-order-actions a { --size: auto; width: 100%; height: auto; margin: 0 0 10px; background-image: none; } .woocommerce-orders-table__cell-order-actions a:last-child { margin-bottom: 0; } .woocommerce-orders-table__cell-order-actions a.view, .woocommerce-orders-table__cell-order-actions a.cancel { border: 1px solid currentColor; } } /* Кабінет: стани дій під курсором і з клавіатури ------------------------------------------------------------------ Що було до цієї правки (заміряно на staging, а не припущено): «Оплатити» вже інвертувалась, «Скасувати» сіріла в чорне, а «Перегляд» не реагував ніяк. Робить це чуже правило теми .woocommerce-MyAccount-content .button:hover — воно ловить наші посилання за класом button, який навішує ядро WooCommerce. Ми переписуємо ці стани явно, а не покладаємось на те правило: воно загальне на весь кабінет, і будь-яка майбутня правка в темі мовчки змінить поведінку тут. Через це селектори мають бути не слабшими за нього — звідси префікс .woocommerce-MyAccount-content. Усе під @media (hover: hover): на сенсорному екрані :hover «залипає» після дотику, і кнопка лишається в наведеному стані. */ @media (hover: hover) { /* Заливка спадає, лишається контур. Так у темі поводяться всі .__btn і кнопки кабінету — не вигадуємо окремої мови. */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.pay:hover { --color: var(--black); background-color: transparent; } /* Та сама думка, що й у «Оплатити»: під курсором декор сходить. Разом три дії читаються як одна родина. */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.view:hover { border-bottom-color: transparent; } /* --red — той самий сигнал, що в .basket_clear і .catalog_clear. У спокої приглушено, щоб не тиснули навмання; під курсором червоне, бо дія незворотна. Рамку на мобільному фарбувати не треба: вона задана через currentColor і піде за --color. */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.cancel:hover { --color: var(--red); } /* На мобільному «Перегляд» — контурна кнопка, і знімати їй одну нижню грань не можна. Контурні кнопки в темі під курсором навпаки заливаються (.__btn._line), тому робимо так само. */ @media only screen and (max-width: 767px) { .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.view:hover { --color: var(--white); background-color: var(--black); border-color: var(--black); } } } /* Клавіатурний фокус. Окремим правилом, а не в списку через кому: браузер, який не знає :focus-visible, викидає весь селектор разом із рештою — так ми втратили б і ховери. Поза @media (hover), бо фокус існує і там, де курсора немає. Відступ виносить рамку за межі чорної заливки «Оплатити», інакше її не було б видно. */ .woocommerce-orders-table__cell-order-actions a:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; } /* Сторінка оплати замовлення (/checkout/order-pay/) ------------------------------------------------------------------ Сюди веде кнопка «Оплатити» зі списку замовлень. Сторінка була зовсім неоформлена: заголовки таблиці по центру (типова поведінка th), без лінійок, кнопка оплати — простий текст. Причина: woocommerce/checkout/form-pay.php у темі — дослівна копія файлу WooCommerce, без жодного класу теми. Справжнє оформлення виглядає інакше, бо там тема перевизначила review-order.php своєю розміткою й оформила .checkout_form; на цю сторінку жоден із тих селекторів не потрапляє. Прив'язка form#order_review, а не просто #order_review: на справжньому оформленні цей ідентифікатор теж є, але там це
, а тут
. Тобто селектор влучає лише в цю сторінку. Класи .shop_table беремо всередині нього, бо .shop_table сам по собі зустрічається і в деталях замовлення. Оформлення повторює кабінет (див. .woocommerce-MyAccount-content table у style.css): сірий підпис колонки капітеллю, лінійка зверху кожного рядка, той самий кегль. */ form#order_review { margin-top: clamp(30px, 5vw, 50px); } form#order_review .shop_table { width: 100%; border-spacing: 0; border-collapse: collapse; } form#order_review .shop_table thead th { --color: var(--gray); font-size: var(--small); font-weight: 300; text-align: left; text-transform: uppercase; padding-bottom: 2em; } form#order_review .shop_table tbody th, form#order_review .shop_table tbody td, form#order_review .shop_table tfoot th, form#order_review .shop_table tfoot td { font-size: var(--medium); font-weight: 400; text-align: left; padding: 0.85em 0; border-top: 1px solid var(--color); } form#order_review .shop_table th:not(:last-child), form#order_review .shop_table td:not(:last-child) { padding-right: 12px; } /* «Всього» — підсумковий рядок, він має читатися як підсумок */ form#order_review .shop_table tfoot tr:last-child th, form#order_review .shop_table tfoot tr:last-child td { font-weight: 500; } /* Спосіб оплати. Сам список уже отримує сітку з проміжком від правила теми .checkout .wc_payment_methods, а гурток замість нативного радіо — від input[type=radio]+label. Тому чіпаємо лише те, чого там немає: відступ блоку, розмір логотипа й опис під ним. */ form#order_review #payment { margin-top: clamp(30px, 4vw, 50px); } /* Логотип платіжки — 140x48 в оригіналі. Обмежуємо висотою, а не шириною, щоб не залежати від того, який файл підставить плагін. flex-shrink: 0 і дозвіл на перенос: підпис — flex-контейнер від теми, і на вузькому екрані логотип інакше стиснувся б у смужку. */ form#order_review .wc_payment_methods label { flex-wrap: wrap; } form#order_review .wc_payment_methods label img { max-height: 28px; width: auto; flex-shrink: 0; } form#order_review .payment_box { --color: var(--gray); margin-top: 10px; font-size: var(--body); font-weight: 300; } /* Кнопка оплати. Значення беремо зі змінних --btn_*, якими описані всі кнопки теми, а не переписуємо кольори числами: якщо тему колись перефарбують, ця кнопка поїде разом з усіма. --btn_w тема не оголошує, тому ширину задаємо самі. */ form#order_review #place_order { --color: var(--btn_color); display: inline-flex; align-items: center; justify-content: center; min-width: min(280px, 100%); height: var(--btn_height); margin-top: clamp(24px, 3vw, 36px); padding: 0 var(--btn_inner); font-size: var(--btn_font); text-align: center; text-transform: uppercase; background-color: var(--btn_bg); border: var(--btn_bd_size) solid var(--btn_bd_color); cursor: pointer; transition: color .43s, background-color .43s; } @media (hover: hover) { form#order_review #place_order:hover { --color: var(--btn_bg); background-color: transparent; } } form#order_review #place_order:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; } /* На мобільному кнопка на всю ширину — так само, як дії в картці замовлення. Інакше вона ні за вмістом, ні за колонкою. */ @media only screen and (max-width: 767px) { form#order_review #place_order { width: 100%; } } /* Кабінет: кнопка оплати на сторінці перегляду замовлення ------------------------------------------------------------------ Оформлення «Оплатити» зі списку замовлень сюди НЕ дістає: воно прив'язане до .woocommerce-orders-table__cell-order-actions a.pay, тобто до комірки таблиці. Базові кнопкові правила теми теж мимо — вони ловлять .woocommerce-order-details .button, а наш блок стоїть вище, ще до woocommerce_view_order. Тому вигляд задаємо тут наново, повторюючи мову кнопки зі списку: капітель, чорна заливка, той самий перехід .43s. Одна кнопка, два місця — має читатись як одна дія. Селектор веде через .view-order-pay — обгортку, якої немає більше ніде. Правила для .pay у таблиці замовлень лишаються недоторканими: спільного селектора в нас із ними немає. */ .woocommerce-MyAccount-content .view-order-pay { /* Відступ від .thank_top: у списку зверху вже стоїть margin 50px, тому тут вистачає меншого — інакше кнопка відпливає від блоку, під яким вона й має читатись. */ margin-top: clamp(18px, 2vw, 28px); } .woocommerce-MyAccount-content .view-order-pay a.pay { --color: var(--white); font-size: var(--small); line-height: 1; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; /* верх на 0.05em більший за низ — те саме, що в таблиці: у капітелі немає нижніх виносних, і при рівних відступах текст сидить високо */ padding: 0.75em 1.1em 0.7em; background-color: var(--black); border: 1px solid var(--black); transition: color .43s, background-color .43s, border-color .43s; } /* Заливка спадає, лишається контур — так поводяться «Оплатити» у списку й усі .__btn у темі. Під @media (hover: hover), бо на сенсорному екрані :hover залипає після дотику й кнопка лишається наведеною. */ @media (hover: hover) { .woocommerce-MyAccount-content .view-order-pay a.pay:hover { --color: var(--black); background-color: transparent; } } /* Окремим правилом і поза @media (hover) — з тих самих міркувань, що й для дій у списку замовлень. */ .woocommerce-MyAccount-content .view-order-pay a.pay:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; } /* На мобільному — на всю ширину, як дії в картці замовлення й кнопка на сторінці оплати. Інакше вона висить вузьким прямокутником зліва. */ @media only screen and (max-width: 767px) { .woocommerce-MyAccount-content .view-order-pay a.pay { width: 100%; } } /* Оформлення: чекбокс згоди на розсилку Klaviyo ------------------------------------------------------------------ Розмітку дає плагін через woocommerce_form_field() з type => checkbox, тому стоїть УСЕРЕДИНІ