From 36dff6b67393c416f15bfa41d28e7ab97ca45caa Mon Sep 17 00:00:00 2001 From: cursor-agent Date: Thu, 26 Feb 2026 15:06:23 +0000 Subject: [PATCH] =?UTF-8?q?Refactor:=20=D1=84=D1=80=D0=BE=D0=BD=D1=82?= =?UTF-8?q?=D0=B5=D0=BD=D0=B4=20=D0=B2=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=20?= =?UTF-8?q?Material=20Design=203=20(MUI-=D0=BF=D0=BE=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=BD=D1=8B=D0=B9),=20=D1=82=D1=91=D0=BC=D0=BD=D0=B0=D1=8F=20?= =?UTF-8?q?=D1=82=D0=B5=D0=BC=D0=B0=20=D0=B8=20Geologica?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made-with: Cursor --- HISTORY.md | 10 + app/static/css/theme-compact.css | 50 ++-- app/static/css/theme.css | 480 ++++++++++++++++--------------- app/templates/base.html | 4 +- 4 files changed, 296 insertions(+), 248 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index cf9e425..eab924f 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,15 @@ # История изменений ERP WaterSurf +## 2025-02-26 00:35 UTC – Фронтенд в стиле Material Design 3 (MUI-подобный) + +**Задача**: Использовать визуальный язык Material Design 3 (как в MUI 7), без платных модулей. MUI 7 — React-библиотека; проект на Django с серверными шаблонами, поэтому реализовано через CSS в духе MD3. + +**Решение**: Переработаны theme.css и theme-compact.css под Material Design 3 (тёмная тема): токены поверхностей (elevation, границы), скругления 12px/8px/20px (карточки, кнопки, поля), кнопки Filled/Outlined в стиле MD3, таблицы с заголовками в uppercase и разделителями, поля ввода Outlined с фокусом. Сохранены шрифт Geologica, цвета брендбука WaterSurf и компактные формы/таблицы по прежним пожеланиям. Классы в шаблонах не менялись. + +**Изменения**: theme.css (MD3-токены, карточки, навбар, кнопки, формы, таблицы, алерты), theme-compact.css (компактные формы и таблицы товаров в стиле MD3), base.html (версия CSS v5/v2 для сброса кэша). + +--- + ## 2025-02-26 00:25 UTC – Единое отображение чисел с разделителями разрядов **Задача**: Везде, где выводятся числовые значения, показывать их с разделителем разрядов и запятой как десятичным разделителем. diff --git a/app/static/css/theme-compact.css b/app/static/css/theme-compact.css index ec84bb9..49562fa 100644 --- a/app/static/css/theme-compact.css +++ b/app/static/css/theme-compact.css @@ -1,10 +1,11 @@ -/* Компактная раскладка форм документов */ +/* Компактные формы и таблицы документов — в стиле Material Design 3 */ + /* Подпись слева от поля, в одну строку */ .ws-form-compact .ws-form-group { display: flex; flex-direction: row; align-items: center; - gap: 0.5rem 1rem; + gap: 8px 16px; flex-wrap: wrap; } @@ -12,12 +13,16 @@ margin-bottom: 0; flex-shrink: 0; min-width: 6.5rem; + font-size: 12px; + color: var(--ws-text-secondary); } .ws-form-compact .ws-form-group input, .ws-form-compact .ws-form-group select { flex: 1; min-width: 0; + padding: 10px 14px; + border-radius: 8px; } .ws-form-compact .ws-form-group .ws-text-danger { @@ -27,8 +32,8 @@ .ws-form-compact .ws-form-row { display: grid; - gap: 1rem; - margin-bottom: 1rem; + gap: 16px; + margin-bottom: 16px; align-items: center; } @@ -42,14 +47,14 @@ flex: 0 0 auto; } -/* Кнопка календаря у поля даты — акцентный цвет, хорошо видна на тёмном фоне */ +/* Поле даты — кнопка календаря в стиле MD3 */ .ws-form-compact input[type="date"]::-webkit-calendar-picker-indicator { background-color: var(--ws-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; - padding: 4px; - border-radius: var(--ws-radius-sm); + padding: 6px; + border-radius: 8px; cursor: pointer; opacity: 1; } @@ -58,7 +63,6 @@ background-color: var(--ws-accent-hover); } -/* Firefox: кнопка календаря */ .ws-form-compact input[type="date"]::-moz-focus-inner { border: none; } @@ -84,10 +88,11 @@ max-width: 100%; } -/* Таблица товаров: без горизонтального скролла, компактные колонки */ +/* Таблица товаров — компактные колонки, без горизонтального скролла */ .ws-table-wrap { overflow-x: hidden; max-width: 100%; + border-radius: 12px; } .ws-table-items { @@ -102,19 +107,17 @@ overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; + padding: 10px 12px; } -/* Товар: ограниченная ширина, длинное название обрезается */ .ws-table-items .ws-col-product { width: 45%; } -/* Цена: поле под 8 знаков, значение справа */ .ws-table-items .ws-col-price { width: 14%; } -/* Валюта */ .ws-table-items .ws-col-currency { width: 12%; } @@ -123,7 +126,6 @@ width: 10%; } -/* Стоимость: справа, разделитель в JS */ .ws-table-items .ws-col-cost { width: 14%; } @@ -132,31 +134,34 @@ width: 5%; } +/* Кнопка удаления строки (MD3 icon button) */ .ws-table-items .ws-btn-remove-row { display: inline-flex; align-items: center; justify-content: center; - width: 24px; - height: 24px; + width: 32px; + height: 32px; padding: 0; border: none; - border-radius: 4px; + border-radius: 50%; background: transparent; - color: #c62828; - font-size: 18px; + color: #ef5350; + font-size: 20px; line-height: 1; cursor: pointer; + transition: background 0.2s; } .ws-table-items .ws-btn-remove-row:hover { - background: rgba(198, 40, 40, 0.12); - color: #b71c1c; + background: rgba(239, 83, 80, 0.12); + color: #e53935; } .ws-table-items .ws-col-product select { max-width: 100%; overflow: hidden; text-overflow: ellipsis; + border-radius: 8px; } .ws-table-items .ws-col-price input { @@ -165,11 +170,13 @@ text-align: right; font-variant-numeric: tabular-nums; box-sizing: border-box; + padding: 8px 12px; + border-radius: 8px; } -/* Убрать стрелки вверх/вниз у поля Количество (Цена — text, без стрелок) */ .ws-table-items .ws-col-qty input[type="number"] { -moz-appearance: textfield; + border-radius: 8px; } .ws-table-items .ws-col-qty input[type="number"]::-webkit-outer-spin-button, @@ -180,6 +187,7 @@ .ws-table-items .ws-col-currency select { max-width: 100%; + border-radius: 8px; } .ws-table-items td.ws-col-qty input, diff --git a/app/static/css/theme.css b/app/static/css/theme.css index 6867e87..65e599a 100644 --- a/app/static/css/theme.css +++ b/app/static/css/theme.css @@ -1,58 +1,65 @@ -/* ERP WaterSurf — тема v4 (только цвета и шрифты из брендбука) */ +/* ERP WaterSurf — Material Design 3 (тёмная тема), брендбук WaterSurf, шрифт Geologica */ -/* Основные цвета бренда (базовые): White, Gray 01–04, Black */ +/* === MD3-совместимые токены (тёмная тема) === */ :root { + /* Бренд WaterSurf */ --ws-white: #FFFFFF; --ws-gray-01: #F5F9FD; --ws-gray-02: #DCE7EF; --ws-gray-03: #B1C7D7; --ws-gray-04: #617E92; --ws-black: #0A121D; - /* Дополнительные цвета бренда — только для акцента и состояний */ - --ws-accent: #34AFE3; /* Blue (02) — дополнительный */ - --ws-accent-hover: #00868F; /* Blue (03) — дополнительный */ - --ws-accent-light: #E3F7FF; /* Blue (01) */ - --ws-danger: #FF3A20; /* Red (02) */ - --ws-danger-dark: #AA1400; /* Red (03) */ - --ws-success: #13AD53; /* Green (02) */ - /* Фон страницы и поверхностей — только из основных */ + --ws-accent: #34AFE3; + --ws-accent-hover: #00868F; + --ws-accent-light: #E3F7FF; + --ws-danger: #FF3A20; + --ws-danger-dark: #AA1400; + --ws-success: #13AD53; + + /* MD3-подобные поверхности (тёмная тема) */ --ws-bg-page: #0A121D; - --ws-bg-surface: #0A121D; - --ws-bg-elevated: #0A121D; - --ws-bg-hover: #0f1823; - --ws-border: #617E92; - --ws-border-focus: #34AFE3; + --ws-bg-surface: #111d2b; + --ws-bg-elevated: #162536; + --ws-bg-hover: rgba(255, 255, 255, 0.06); + --ws-border: rgba(255, 255, 255, 0.12); + --ws-border-focus: var(--ws-accent); --ws-text: #F5F9FD; --ws-text-muted: #B1C7D7; --ws-text-secondary: #617E92; - --ws-danger-bg: rgba(255, 58, 32, 0.12); - --ws-success-bg: rgba(19, 173, 83, 0.12); - --ws-radius: 8px; - --ws-radius-sm: 6px; - --ws-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + --ws-danger-bg: rgba(255, 58, 32, 0.16); + --ws-success-bg: rgba(19, 173, 83, 0.16); + + /* MD3 shape */ + --ws-radius: 12px; + --ws-radius-sm: 8px; + --ws-radius-full: 9999px; + + /* MD3 elevation (тень для карточек) */ + --ws-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); + --ws-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2); + --ws-shadow: var(--ws-elevation-1); --ws-font: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } -/* Жёсткое переопределение Bootstrap: фон и шрифт по брендбуку */ +/* === База === */ html { scroll-behavior: smooth; - background: var(--ws-bg-page) !important; - font-family: var(--ws-font) !important; + background: var(--ws-bg-page); + font-family: var(--ws-font); } -body, -body * { +body, body * { font-family: inherit; } body { - background: var(--ws-bg-page) !important; - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; - font-weight: 300 !important; - font-size: 16px !important; - line-height: 1.5 !important; - letter-spacing: -0.02em !important; + background: var(--ws-bg-page); + color: var(--ws-text); + font-family: var(--ws-font); + font-weight: 300; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.02em; min-height: 100vh; -webkit-font-smoothing: antialiased; } @@ -61,109 +68,120 @@ body { box-sizing: border-box; } -/* Типографика: Geologica, веса по брендбуку */ +/* === Типографика (MD3-подобные уровни) === */ .ws-page-title { - font-family: var(--ws-font) !important; - font-size: 24px; - line-height: 1.25; - letter-spacing: -0.02em; - font-weight: 700; + font-family: var(--ws-font); + font-size: 22px; + line-height: 1.3; + letter-spacing: 0; + font-weight: 500; margin-bottom: 1rem; color: var(--ws-text); } .ws-form-section-title { - font-family: var(--ws-font) !important; - font-size: 20px; - line-height: 1.3; - letter-spacing: -0.02em; + font-family: var(--ws-font); + font-size: 16px; + line-height: 1.4; font-weight: 500; margin-bottom: 0.75rem; color: var(--ws-text); } -/* Навбар — без лого, только текст */ +/* === Top app bar (навбар в стиле MD3) === */ .navbar-ws { - background: var(--ws-bg-surface) !important; - border-bottom: 1px solid var(--ws-border) !important; - padding: 0.5rem 0; + background: var(--ws-bg-surface); + border-bottom: 1px solid var(--ws-border); + padding: 0 16px; + min-height: 64px; + box-shadow: var(--ws-elevation-1); +} + +.navbar-ws .container-fluid { + max-width: 1200px; + margin: 0 auto; } .navbar-ws .navbar-brand { - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; - font-weight: 700 !important; - font-size: 1.1rem !important; - letter-spacing: -0.02em !important; + color: var(--ws-text); + font-family: var(--ws-font); + font-weight: 500; + font-size: 1.25rem; + letter-spacing: 0; + padding: 0.5rem 0; } .navbar-ws .navbar-brand:hover { - color: var(--ws-accent) !important; + color: var(--ws-accent); } .navbar-ws .nav-link { - color: var(--ws-text-muted) !important; - font-family: var(--ws-font) !important; - border-radius: var(--ws-radius-sm); - padding: 0.4rem 0.75rem !important; - font-weight: 300; + color: var(--ws-text-muted); + font-family: var(--ws-font); + font-weight: 400; + font-size: 14px; + border-radius: 20px; + padding: 8px 12px; } .navbar-ws .nav-link:hover { - color: var(--ws-text) !important; - background: var(--ws-bg-hover) !important; + color: var(--ws-text); + background: var(--ws-bg-hover); } .navbar-ws .dropdown-menu { - background: var(--ws-bg-surface) !important; - border: 1px solid var(--ws-border) !important; + background: var(--ws-bg-elevated); + border: 1px solid var(--ws-border); border-radius: var(--ws-radius); - box-shadow: var(--ws-shadow); - padding: 0.25rem; + box-shadow: var(--ws-elevation-2); + padding: 6px 0; + min-width: 200px; } .navbar-ws .dropdown-item { - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; - border-radius: var(--ws-radius-sm); + color: var(--ws-text); + font-family: var(--ws-font); + font-size: 14px; + padding: 10px 16px; + border-radius: 0; } .navbar-ws .dropdown-item:hover { - background: var(--ws-bg-hover) !important; - color: var(--ws-text) !important; + background: var(--ws-bg-hover); + color: var(--ws-text); } .navbar-ws .navbar-text { - color: var(--ws-text-muted) !important; - font-family: var(--ws-font) !important; + color: var(--ws-text-muted); font-size: 14px; - letter-spacing: -0.01em; } .navbar-ws .navbar-toggler { - border-color: var(--ws-border) !important; - color: var(--ws-text) !important; + border-color: var(--ws-border); + color: var(--ws-text); + border-radius: var(--ws-radius-sm); } .navbar-ws .navbar-toggler-icon { filter: invert(1); } -/* Контент */ +/* === Main content === */ .ws-main { max-width: 1200px; margin: 0 auto; - padding: 1.5rem 1rem 3rem; - background: var(--ws-bg-page) !important; + padding: 24px 16px 48px; + background: var(--ws-bg-page); } -/* Карточки — поверхности из основных цветов, граница Gray 04 */ +/* === Карточки (MD3 surface с elevation) === */ .ws-card { - background: var(--ws-bg-surface) !important; - border: 1px solid var(--ws-border) !important; + background: var(--ws-bg-surface); + border: 1px solid var(--ws-border); border-radius: var(--ws-radius); - padding: 1.25rem; - margin-bottom: 1rem; + padding: 24px; + margin-bottom: 16px; + box-shadow: var(--ws-elevation-1); } .ws-card-header { @@ -171,42 +189,44 @@ body { align-items: center; justify-content: space-between; flex-wrap: wrap; - gap: 0.75rem; - margin-bottom: 1rem; + gap: 12px; + margin-bottom: 16px; } -/* Таблицы */ +/* === Таблицы (MD3 data table) === */ .ws-table-wrap { overflow-x: auto; border-radius: var(--ws-radius); border: 1px solid var(--ws-border); - background: var(--ws-bg-surface) !important; + background: var(--ws-bg-surface); } .ws-table { width: 100%; border-collapse: collapse; - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; + color: var(--ws-text); + font-family: var(--ws-font); + font-size: 14px; } .ws-table th, .ws-table td { - padding: 0.75rem 1rem; + padding: 12px 16px; text-align: left; - border-bottom: 1px solid var(--ws-border) !important; + border-bottom: 1px solid var(--ws-border); } .ws-table th { - background: var(--ws-bg-elevated) !important; - font-weight: 500 !important; - font-size: 14px; - letter-spacing: -0.01em; - color: var(--ws-text-secondary) !important; + background: var(--ws-bg-elevated); + font-weight: 500; + font-size: 12px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--ws-text-secondary); } .ws-table tbody tr:hover { - background: var(--ws-bg-hover) !important; + background: var(--ws-bg-hover); } .ws-table tbody tr:last-child td { @@ -218,97 +238,106 @@ body { } .ws-table .ws-link { - color: var(--ws-accent) !important; + color: var(--ws-accent); text-decoration: none; font-size: 14px; } .ws-table .ws-link:hover { - color: var(--ws-accent-hover) !important; + color: var(--ws-accent-hover); text-decoration: underline; } .ws-table .ws-link-danger { - color: var(--ws-danger) !important; + color: var(--ws-danger); } .ws-table .ws-link-danger:hover { - color: var(--ws-danger-dark) !important; + color: var(--ws-danger-dark); } -/* Кнопки — акцент только из дополнительных (Blue 02), высокая специфичность */ +.ws-table .ws-num { + text-align: right; + font-variant-numeric: tabular-nums; +} + +/* === Кнопки (MD3 Filled / Outlined / Tonal) === */ .btn-ws-primary, body .btn.btn-ws-primary, a.btn.btn-ws-primary { - background: #34AFE3 !important; - color: #0A121D !important; - border: none !important; - border-radius: var(--ws-radius-sm); - padding: 0.5rem 1rem; - font-family: var(--ws-font) !important; - font-weight: 500 !important; + background: var(--ws-accent); + color: var(--ws-black); + border: none; + border-radius: 20px; + padding: 10px 24px; + font-family: var(--ws-font); + font-weight: 500; font-size: 14px; - letter-spacing: -0.01em; + letter-spacing: 0; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .btn-ws-primary:hover, body .btn.btn-ws-primary:hover, a.btn.btn-ws-primary:hover { - background: #00868F !important; - color: var(--ws-white) !important; + background: var(--ws-accent-hover); + color: var(--ws-white); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .btn-ws-secondary { - background: transparent !important; - color: var(--ws-text-muted) !important; - border: 1px solid var(--ws-border) !important; - border-radius: var(--ws-radius-sm); - padding: 0.5rem 1rem; - font-family: var(--ws-font) !important; + background: transparent; + color: var(--ws-accent); + border: 1px solid var(--ws-border); + border-radius: 20px; + padding: 10px 24px; + font-family: var(--ws-font); font-size: 14px; + font-weight: 500; } .btn-ws-secondary:hover { - background: var(--ws-bg-hover) !important; - color: var(--ws-text) !important; - border-color: var(--ws-gray-04) !important; + background: var(--ws-bg-hover); + color: var(--ws-text); + border-color: var(--ws-text-secondary); } .btn-ws-danger { - background: var(--ws-danger-bg) !important; - color: var(--ws-danger) !important; - border: 1px solid var(--ws-danger) !important; - border-radius: var(--ws-radius-sm); - padding: 0.5rem 1rem; - font-family: var(--ws-font) !important; + background: var(--ws-danger-bg); + color: var(--ws-danger); + border: none; + border-radius: 20px; + padding: 10px 24px; + font-family: var(--ws-font); font-size: 14px; + font-weight: 500; } .btn-ws-danger:hover { - background: var(--ws-danger) !important; - color: var(--ws-white) !important; + background: var(--ws-danger); + color: var(--ws-white); } .ws-btn-group { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: 8px; align-items: center; } -/* Формы — шрифт Geologica, границы из основных */ +/* === Формы (MD3 Outlined text field) === */ .ws-form-group { - margin-bottom: 1rem; + margin-bottom: 16px; } .ws-form-group label { display: block; - font-family: var(--ws-font) !important; + font-family: var(--ws-font); font-weight: 500; - font-size: 14px; - letter-spacing: -0.01em; - color: var(--ws-text-muted); - margin-bottom: 0.35rem; + font-size: 12px; + letter-spacing: 0.05em; + color: var(--ws-text-secondary); + margin-bottom: 4px; } .ws-form-group input, @@ -316,27 +345,27 @@ a.btn.btn-ws-primary:hover { .ws-form-group textarea { width: 100%; max-width: 400px; - padding: 0.5rem 0.75rem; - background: var(--ws-black) !important; - border: 1px solid var(--ws-border) !important; + padding: 12px 16px; + background: transparent; + border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; - font-size: 15px; + color: var(--ws-text); + font-family: var(--ws-font); + font-size: 16px; + transition: border-color 0.2s, box-shadow 0.2s; } .ws-form-group input:focus, .ws-form-group select:focus, .ws-form-group textarea:focus { - outline: none !important; - border-color: var(--ws-border-focus) !important; - box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.25) !important; + outline: none; + border-color: var(--ws-border-focus); + box-shadow: 0 0 0 1px var(--ws-border-focus); } .ws-form-group input::placeholder, .ws-form-group textarea::placeholder { color: var(--ws-text-secondary); - opacity: 0.9; } .ws-form-login input, @@ -344,131 +373,134 @@ a.btn.btn-ws-primary:hover { .ws-form-login input[type="password"] { width: 100%; max-width: 100%; - padding: 0.5rem 0.75rem; - background: var(--ws-black) !important; - border: 1px solid var(--ws-border) !important; + padding: 12px 16px; + background: transparent; + border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; - font-size: 15px; + color: var(--ws-text); + font-family: var(--ws-font); + font-size: 16px; } .ws-form-login input:focus { - outline: none !important; - border-color: var(--ws-border-focus) !important; - box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.25) !important; + outline: none; + border-color: var(--ws-border-focus); + box-shadow: 0 0 0 1px var(--ws-border-focus); } .ws-text-danger { color: var(--ws-danger); - font-size: 14px; - display: block; - margin-top: 0.25rem; + font-size: 12px; + margin-top: 4px; } .ws-form-section { - margin-top: 1.5rem; - padding-top: 1.25rem; + margin-top: 24px; + padding-top: 20px; border-top: 1px solid var(--ws-border); } -/* Сообщения (alerts) */ +/* === Snackbar / Alerts (MD3) === */ .ws-alert { - padding: 0.75rem 1rem; + padding: 14px 16px; border-radius: var(--ws-radius-sm); - margin-bottom: 1rem; + margin-bottom: 16px; border: 1px solid transparent; - font-family: var(--ws-font) !important; + font-family: var(--ws-font); + font-size: 14px; } .ws-alert-success { - background: var(--ws-success-bg) !important; - color: var(--ws-success) !important; - border-color: rgba(19, 173, 83, 0.3) !important; + background: var(--ws-success-bg); + color: var(--ws-success); + border-color: rgba(19, 173, 83, 0.3); } .ws-alert-error, .ws-alert-danger { - background: var(--ws-danger-bg) !important; - color: var(--ws-danger) !important; - border-color: rgba(255, 58, 32, 0.3) !important; + background: var(--ws-danger-bg); + color: var(--ws-danger); + border-color: rgba(255, 58, 32, 0.3); } .ws-alert-warning { - background: rgba(255, 136, 0, 0.12) !important; - color: #FF8800 !important; - border-color: rgba(255, 136, 0, 0.3) !important; + background: rgba(255, 136, 0, 0.16); + color: #FF8800; + border-color: rgba(255, 136, 0, 0.3); } .ws-alert .btn-close { filter: invert(1); - opacity: 0.7; + opacity: 0.8; } .ws-empty { text-align: center; - padding: 2rem 1rem; + padding: 32px 16px; color: var(--ws-text-secondary); - font-family: var(--ws-font) !important; - font-size: 15px; + font-family: var(--ws-font); + font-size: 14px; } +/* === Login / Hero === */ .ws-login-card { - max-width: 380px; + max-width: 400px; margin: 2rem auto; - padding: 2rem; + padding: 32px; + border-radius: var(--ws-radius); + background: var(--ws-bg-surface); + border: 1px solid var(--ws-border); + box-shadow: var(--ws-elevation-2); } .ws-login-title { - font-family: var(--ws-font) !important; - font-size: 24px; - line-height: 1.25; - letter-spacing: -0.02em; - font-weight: 700; - margin-bottom: 1.5rem; + font-family: var(--ws-font); + font-size: 22px; + font-weight: 500; + margin-bottom: 24px; text-align: center; color: var(--ws-text); } .ws-hero { - padding: 2rem 0; + padding: 32px 0; text-align: center; } .ws-hero h1 { - font-family: var(--ws-font) !important; - font-size: 32px; - line-height: 1.25; - letter-spacing: -0.02em; - font-weight: 700; - margin-bottom: 0.5rem; + font-family: var(--ws-font); + font-size: 28px; + font-weight: 500; + margin-bottom: 8px; color: var(--ws-text); } .ws-hero p { color: var(--ws-text-muted); - font-family: var(--ws-font) !important; + font-family: var(--ws-font); font-size: 16px; line-height: 1.5; } .ws-confirm-text { color: var(--ws-text-muted); - margin-bottom: 1.25rem; + margin-bottom: 20px; + font-size: 14px; } -/* Таблица в форме заказа */ +/* === Таблицы в формах (инпуты внутри) === */ .ws-table input.form-control, .ws-table select.form-select, .ws-table input[type="text"], .ws-table input[type="number"], .ws-table select { - background: var(--ws-black) !important; - border: 1px solid var(--ws-border) !important; - color: var(--ws-text) !important; - padding: 0.4rem 0.5rem; - font-family: var(--ws-font) !important; + background: transparent; + border: 1px solid var(--ws-border); + color: var(--ws-text); + padding: 8px 12px; + font-family: var(--ws-font); font-size: 14px; + border-radius: var(--ws-radius-sm); } .ws-form-card .ws-form-group input, @@ -478,48 +510,46 @@ a.btn.btn-ws-primary:hover { } .ws-table input[type="checkbox"] { - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; accent-color: var(--ws-accent); } .ws-table input:focus, .ws-table select:focus { - border-color: var(--ws-border-focus) !important; - box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.2) !important; + border-color: var(--ws-border-focus); + box-shadow: 0 0 0 1px var(--ws-border-focus); } -.ws-table .ws-num { - text-align: right; - font-variant-numeric: tabular-nums; -} - -/* Переопределение Bootstrap: кнопки и инпуты в контенте */ +/* === Переопределение Bootstrap в main === */ .ws-main .btn-primary { - background: var(--ws-accent) !important; - border-color: var(--ws-accent) !important; - color: var(--ws-black) !important; - font-family: var(--ws-font) !important; + background: var(--ws-accent); + border-color: var(--ws-accent); + color: var(--ws-black); + font-family: var(--ws-font); + font-weight: 500; + border-radius: 20px; } .ws-main .btn-primary:hover { - background: var(--ws-accent-hover) !important; - border-color: var(--ws-accent-hover) !important; - color: var(--ws-white) !important; + background: var(--ws-accent-hover); + border-color: var(--ws-accent-hover); + color: var(--ws-white); } .ws-main .form-control, .ws-main .form-select { - background: var(--ws-black) !important; - border-color: var(--ws-border) !important; - color: var(--ws-text) !important; - font-family: var(--ws-font) !important; + background: transparent; + border-color: var(--ws-border); + color: var(--ws-text); + font-family: var(--ws-font); + border-radius: var(--ws-radius-sm); } .ws-main .form-control:focus, .ws-main .form-select:focus { - border-color: var(--ws-border-focus) !important; - box-shadow: 0 0 0 0.25rem rgba(52, 175, 227, 0.25) !important; + border-color: var(--ws-border-focus); + box-shadow: 0 0 0 1px var(--ws-border-focus); } .ws-main .form-control::placeholder { @@ -527,10 +557,10 @@ a.btn.btn-ws-primary:hover { } .ws-main h1, .ws-main h2, .ws-main h3, .ws-main h4 { - font-family: var(--ws-font) !important; - color: var(--ws-text) !important; + font-family: var(--ws-font); + color: var(--ws-text); } .ws-main p, .ws-main label, .ws-main td, .ws-main th, .ws-main li { - font-family: var(--ws-font) !important; + font-family: var(--ws-font); } diff --git a/app/templates/base.html b/app/templates/base.html index 0d9e594..fe2b6b3 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -9,8 +9,8 @@ - - + + {% block extra_css %}{% endblock %}