/* Панель власниці на сторінці сайту. Ті самі екрани, що в адмінці, але тема сайту не має на них впливати. */ /* Вихід із вузької колонки теми: клас `alignfull` на зовнішній обгортці знімає обмеження ширини — блокові теми розуміють саме його. */ .bof-panel-full{width:100%; max-width:none} /* Але «на всю ширину» тема розуміє буквально: `alignfull` дістає ще й негативні поля, які виносять блок за бічний відступ сторінки. Тоді панель стоїть лівіше за шапку сайту. Подвійний клас — щоб перебити те правило (у теми специфічність вища за одинарний клас), і блок лишається в межах сторінки, врівень з усім іншим. */ .bof-panel-full.bof-panel-full{margin-inline:auto} /* Бічні відступи задаємо самі. Спершу їх не було: їх давав контейнер теми. Але робочий шаблон для цієї сторінки — `Elementor Canvas`, а він контейнера не створює взагалі, і панель упиралась у краї екрана. Відступ помірний, тож там, де контейнер усе-таки є, він читається як звичайний внутрішній відступ, а не як перекіс. Обмеження 1920px лишається: далі рядок закупівлі задовгий для ока. */ .bof-panel{ max-width:1920px; margin:var(--bof-space-top,0) auto var(--bof-space-bottom,0); padding:0 clamp(16px,2vw,32px) 48px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; line-height:1.5; color:var(--ink); text-align:left; } /* Заголовок сторінки від теми тут зайвий: у кожного екрана свій власний заголовок із датою, а два поспіль читаються як помилка. Клас на ставить BOF_Panel, тож решти сайту це не стосується. */ body.bof-panel-page .wp-block-post-title, body.bof-panel-page .entry-title, body.bof-panel-page .page-title{display:none} .bof-panel *{box-sizing:border-box} .bof-panel h1{font-size:23px; font-weight:600; margin:0 0 4px; line-height:1.25; letter-spacing:0} .bof-panel h2{font-size:15px; font-weight:600; letter-spacing:0} .bof-panel a{color:var(--loden)} .bof-panel table{border-collapse:collapse; width:100%; margin:0} /* Скид для списків теми: вона любить додати їм маркери й лівий відступ. Але скид б'є по всіх `ul` у панелі, зокрема по нашому списку позицій у картці, а той має власні відступи — без них він притискався до рамки. */ .bof-panel ul{list-style:none; margin:0; padding:0} .bof-panel .bof-card ul{padding:9px 14px} .bof-panel input[type=checkbox]{width:auto; margin:0} .bof-panel input[type=date]{font:inherit; padding:6px 9px; border:1px solid var(--line); background:#fff} /* Подвійний клас і власне наведення — див. розділ броні в кінці файла. */ .bof-panel.bof-panel .button{ display:inline-block; padding:6px 13px; border:1px solid var(--line); background:#fff; border-radius:3px; font:inherit; font-size:13.5px; color:var(--ink2); cursor:pointer; text-decoration:none; text-transform:none; letter-spacing:normal; box-shadow:none; } .bof-panel.bof-panel .button:hover, .bof-panel.bof-panel .button:focus{border-color:var(--loden); color:var(--loden); background:#fff} /* Стрілки «попередній / наступний день» — теж кнопки, лише посиланнями. */ .bof-panel.bof-panel .bof-seg a{ display:inline-block; padding:6px 13px; border:1px solid var(--line); background:#fff; border-radius:3px; text-decoration:none; color:var(--ink2); font-size:13.5px; } .bof-panel.bof-panel .bof-seg a:hover, .bof-panel.bof-panel .bof-seg a:focus{border-color:var(--loden); color:var(--loden); background:#fff} .bof-panel.bof-panel .bof-seg a.active{background:var(--loden); border-color:var(--loden); color:#fff} /* Вкладки */ .bof-tabs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1.5px solid var(--ink); margin:0 0 18px; padding-top:8px; } .bof-tabs nav{display:flex; gap:2px; flex:1} .bof-tabs nav a{ padding:10px 20px; text-decoration:none; color:var(--ink2); font-size:15px; border:1px solid transparent; border-bottom:0; margin-bottom:-1.5px; } .bof-tabs nav a.on{ background:var(--ink); color:#fff; font-weight:600; } .bof-tabs nav a:not(.on):hover{background:var(--loden-bg); color:var(--ink)} .bof-tabs .bof-out{font-size:13px; color:var(--ink3); text-decoration:none; padding:0 4px} .bof-tabs .bof-out:hover{color:var(--warn)} /* Вхід */ .bof-login{max-width:360px; margin:40px auto; background:#fff; border:1px solid var(--line); padding:26px 24px} .bof-login h2{margin:0 0 6px; font-size:19px} .bof-login p{margin:0 0 16px; color:var(--ink2); font-size:14px} .bof-login label{display:block; margin-bottom:12px; font-size:13px; color:var(--ink2)} .bof-login input[type=text],.bof-login input[type=password]{ display:block; width:100%; margin-top:4px; padding:9px 11px; border:1px solid var(--line); border-radius:3px; font:inherit; font-size:16px; background:#fff; } .bof-login .login-remember{font-size:13px} .bof-login input[type=submit]{ width:100%; padding:11px; border:0; background:var(--loden); color:#fff; font:inherit; font-size:15px; font-weight:600; border-radius:3px; cursor:pointer; margin-top:6px; } .bof-login input[type=submit]:hover{background:var(--ink)} /* Обидва — теги

усередині картки, тому мусять важити більше за загальне `.bof-login p`, інакше воно перебиває їхні відступи. */ /* Логін фіксований і підставлений — поле для нього лише займало б крок. Ховаємо, а не прибираємо: значення все одно йде на сервер, а форму збирає сам WordPress зі своїми гачками. Повертається посиланням `?login=user`. */ .bof-login--fixed .login-username{display:none} .bof-login p.bof-login-lost{margin:14px 0 0; font-size:13px; text-align:center} /* Вихід для гостя, що зайшов сюди помилково. Відділений рискою: це не дія входу, а шлях геть із нього. */ .bof-login p.bof-login-back{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line2); font-size:13px; text-align:center; } .bof-login p.bof-login-back a{color:var(--ink2); text-decoration:none} .bof-login p.bof-login-back a:hover, .bof-login p.bof-login-back a:focus{color:var(--loden); text-decoration:underline} .bof-login p.bof-login-err{ margin:0 0 14px; padding:9px 11px; font-size:13.5px; color:var(--ink); background:var(--warn-bg); border-left:2px solid var(--warn); border-radius:0 3px 3px 0; } @media (max-width:640px){ .bof-panel{padding:0 12px 30px} .bof-tabs nav a{padding:9px 12px; font-size:14px} .bof-panel h1{font-size:19px} } @media print{ .bof-tabs{display:none!important} /* Місце під шапку сайту на папері не потрібне: шапки там немає, а відступ поїхав би порожнечею у верх аркуша. */ .bof-panel{max-width:none; padding:0; margin:0!important} } @media (max-width:900px){ .bof-panel{margin-top:calc(var(--bof-space-top,0) * .75); margin-bottom:calc(var(--bof-space-bottom,0) * .75)} } /* ── Броня від стилів теми ─────────────────────────────────────────────── Те саме, що в guest.css, але для панелі. Тема й Elementor задають полям `width:100%`, і поле дати розтягнулось на всю ширину, виштовхнувши стрілки й «Drucken» на окремі рядки. В адмінці WordPress цього не видно — там теми немає, тому й вилізло аж на бойовому сайті. Подвійний клас піднімає нашу вагу вище за тему, без !important. */ .bof-panel.bof-panel button, .bof-panel.bof-panel input, .bof-panel.bof-panel select, .bof-panel.bof-panel textarea{ font-family:inherit; letter-spacing:normal; text-transform:none; } .bof-panel.bof-panel .bof-seg{display:flex; align-items:center; gap:8px; flex-wrap:wrap} /* Поле дати має бути завширшки з дату, а не з екран. */ .bof-panel.bof-panel .bof-seg input[type=date]{ width:auto; flex:0 0 auto; min-width:150px; padding:5px 8px; } /* Кнопок на картках (`Erledigt`, `Drucken`, `Löschen`) тут немає навмисно: їх полагоджено в admin.css префіксом `.bof-wrap`. Той клас стоїть на обгортці і в адмінці, і тут, тож одне правило працює в обох місцях — так само, як уже зроблено для смуги вибору шале. */ /* ── Броня для таблиць ─────────────────────────────────────────────────── Тема малює таблицям власні межі й смугасті рядки. У списку закупівлі це виглядало як поломка: вертикальні лінії розрізали «1 × Stück» навпіл, бо число й одиниця в нас навмисно в різних клітинках — інакше довге слово («Packungen») зсувало б цифру, і колонка чисел перестала б читатись згори вниз. Задаємо ТІЛЬКИ межі й тло. Ширини, відступи й вирівнювання колонок лишаються в admin.css: якби ми повторили їх тут із більшою вагою, вирівнювання правої колонки поїхало б услід за темою. */ .bof-panel.bof-panel table.bof-list{background:#fff; border:0} .bof-panel.bof-panel table.bof-list tr{background:transparent} .bof-panel.bof-panel table.bof-list td{ border:0; border-bottom:1px solid var(--line2); background:transparent; } /* ── Броня для вікна входу ─────────────────────────────────────────────── Розмітку тут дає сам WordPress (`wp_login_form`), а не ми, тому вона складається зі звичайних `input` без наших класів — і тема перефарбовує їх нарівні з будь-якою іншою формою на сайті. На бойовому «Anmelden» вийшла коричневим текстом із засічками без фону: вага правил теми зрівнялась з нашою, а її файл підключається пізніше. Тому тут вага на клас вища, ніж у решті броні: `.bof-login` додається до подвійного `.bof-panel`. !important не потрібен і тут. Поля перелічені через `:not()`, а не поіменно: плагін безпеки на бойовому вставляє у форму власне поле капчі («4 × drei =»), і воно теж має виглядати як наше. Поіменний перелік його б не накрив. */ .bof-panel.bof-panel .bof-login input:not([type=checkbox]):not([type=submit]){ display:block; width:100%; margin-top:4px; padding:9px 11px; border:1px solid var(--line); border-radius:3px; font:inherit; font-size:16px; line-height:1.4; background:#fff; color:var(--ink); box-shadow:none; } .bof-panel.bof-panel .bof-login input[type=submit]{ display:block; width:100%; margin-top:6px; padding:11px; border:0; border-radius:3px; background:var(--loden); color:#fff; font:inherit; font-size:15px; font-weight:600; text-transform:none; letter-spacing:normal; text-decoration:none; box-shadow:none; text-shadow:none; cursor:pointer; } .bof-panel.bof-panel .bof-login input[type=submit]:hover{background:var(--ink); color:#fff} /* Тема знімає підкреслення з посилань — тут воно єдина ознака, що це посилання. */ .bof-panel.bof-panel .bof-login a{color:var(--loden); text-decoration:underline}