/* ============================================================ PILL-INPUT — скруглённый текстовый инпут в фирменном стиле (тот же язык, что у select-pill: белый фон, серая рамка 1px, radius:999px, синее свечение в фокусе). Используется в: update_app.html (композер комментария, класс .x-comment-input добавляет только specifics поверх этого), create_app.html (адрес, телефон, описание). ============================================================ */ /* Специфичность важна: у Pure.css есть собственное правило `.pure-form input[type=text]` весом (0,2,1) — обычный одиночный класс `.pill-input` (0,1,0) им перебивается независимо от порядка подключения файлов (это и произошло на create_app.html — адрес и телефон рендерились обычными прямоугольными полями). Композер комментария на update_app.html, наоборот, лежит вне `.pure-form` (форма там без этого класса), так что для него достаточно и простого `.pill-input`. Поэтому объявляем оба варианта селектора на одних и тех же правилах — тот же приём, что и в select-pill.css (`.pure-form select.select-pill`). */ .pill-input, .pure-form input.pill-input, .pure-form textarea.pill-input, /* Внешние (публичные) страницы сайта — общий у всех standalone-шаблонов (crm/dispatch/registration/login/public_company_form и т.д., см. buttons.css). Поля там рендерятся Django-формой без своего класса pill-input в разметке — таргетимся по типу инпута, чтобы не лезть в каждый шаблон/forms.py. range НАРОЧНО не входит: слайдер калькулятора (dispatch.html, #areaRange, pages/calculator.css) — нативный трек+бегунок с отдельным дизайном, эта геометрия (рамка/паддинг/radius под текстовое поле) его сломает. */ body.blog .pure-form input[type=text], body.blog .pure-form input[type=tel], body.blog .pure-form input[type=password], body.blog .pure-form input[type=email], body.blog .pure-form input[type=search], body.blog .pure-form textarea{ /* input/textarea по умолчанию inline-block — их нижний край сидит на базовой линии текста и оставляет несколько "лишних" px под собой внутри родителя (классический CSS-баг с descender-space у replaced элементов). display:block убирает эту фантомную полоску целиком. */ display: block; /* .pure-form-stacked (класс формы create_app.html) даёт инпутам/textarea margin:.25em 0 по умолчанию — свой вертикальный ритм между полями мы уже задаём через .ca-field{padding-top:1em}, так что этот margin — чистый лишний зазор поверх него, обнуляем. */ margin: 0; box-sizing: border-box; width: 100%; font-size: 1em; /* line-height:1 — контент-бокс инпута ровно 1em, без "плавающего" между шрифтами/браузерами line-height:normal (см. feedback_design_precision: соседние элементы той же высоты считаются по той же формуле паддинг+border) */ line-height: 1; font-family: inherit; color: var(--c-text); background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--field-radius); padding: var(--field-pad-y) var(--field-pad-x); box-shadow: var(--shadow-control-inset); transition: border-color .15s ease, box-shadow .15s ease; } .pill-input::placeholder, body.blog .pure-form input::placeholder{ color: var(--c-placeholder); } .pill-input:hover, .pure-form input.pill-input:hover, .pure-form textarea.pill-input:hover, body.blog .pure-form input[type=text]:hover, body.blog .pure-form input[type=tel]:hover, body.blog .pure-form input[type=password]:hover, body.blog .pure-form input[type=email]:hover, body.blog .pure-form input[type=search]:hover, body.blog .pure-form textarea:hover{ border-color: var(--c-border-hover); } .pill-input:focus, .pure-form input.pill-input:focus, .pure-form textarea.pill-input:focus, body.blog .pure-form input[type=text]:focus, body.blog .pure-form input[type=tel]:focus, body.blog .pure-form input[type=password]:focus, body.blog .pure-form input[type=email]:focus, body.blog .pure-form input[type=search]:focus, body.blog .pure-form textarea:focus{ outline: 0; border-color: var(--c-accent); box-shadow: var(--shadow-focus); } .pill-input:read-only, .pure-form input.pill-input:read-only, body.blog .pure-form input[type=text]:read-only{ background-color: var(--c-surface); cursor: text; } /* Поле, которое ЗАПРЕЩЕНО менять (а не просто readonly по механике формы): номер квартиры и объект в карточке собственника — они держат историю обращений, и правка через форму сломала бы связь. Серым, чтобы это было видно до попытки ввода; те же цвета, что у запертых полей в строке приборов учёта. Объявлено ПОСЛЕ :read-only выше — специфичность у них одинаковая, и решает порядок. */ .pill-input.is-locked, .pure-form input.pill-input.is-locked{ background-color: var(--c-locked-bg); color: var(--c-muted); cursor: default; } /* textarea — та же пилюля, но со скруглением поменьше (полный radius:999px на многострочном поле выглядел бы неестественно) и обычным переносом строк */ textarea.pill-input, .pure-form textarea.pill-input, body.blog .pure-form textarea{ border-radius: var(--radius-lg); line-height: 1.4; resize: vertical; }