diff --git a/HISTORY.md b/HISTORY.md index c2e3806..3098144 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,20 @@ # История изменений ERP WaterSurf +## 2025-02-25 20:45 UTC – Логотип убран; дизайн строго по брендбуку + +**Проблема**: Логотип в шапке был вставлен некорректно; визуально тема не отличалась от дефолтной — цвета и шрифты не применялись. + +**Решение**: +- Логотип из шапки убран, в навбаре снова текст «WaterSurf ERP». +- Файл логотипа удалён из `static/images/`. +- Фон страницы и поверхностей задан только основными цветами бренда: Black #0A121D; границы — Gray 04 #617E92; текст — Gray 01 #F5F9FD, Gray 03 #B1C7D7, Gray 04 #617E92. +- Ключевой акцент взят только из дополнительных цветов: Blue (02) #34AFE3, при наведении Blue (03) #00868F. +- Добавлены переопределения Bootstrap с !important для body, main, кнопок, полей ввода, таблиц и типографики, чтобы гарантированно применялись Geologica и палитра брендбука. + +**Изменения**: base.html (удалён img логотипа), theme.css (палитра только из брендбука, акцент из дополнительных, переопределения Bootstrap), удалён app/static/images/watersurf-logo.png. + +--- + ## 2025-02-25 20:15 UTC – Стили по корпоративному брендбуку и логотип **Проблема**: Нужно привести интерфейс в соответствие с корпоративным брендбуком WaterSurf и использовать логотип компании. diff --git a/app/static/css/theme.css b/app/static/css/theme.css index 989b87a..3a262a4 100644 --- a/app/static/css/theme.css +++ b/app/static/css/theme.css @@ -1,29 +1,27 @@ -/* ERP WaterSurf — стили по корпоративному брендбуку */ +/* ERP WaterSurf — только цвета и шрифты из брендбука */ -/* Базовые цвета брендбука */ +/* Основные цвета бренда (базовые): White, Gray 01–04, Black */ :root { --ws-white: #FFFFFF; --ws-gray-01: #F5F9FD; --ws-gray-02: #DCE7EF; --ws-gray-03: #B1C7D7; --ws-gray-04: #617E92; - /* Базовый цвет — глубина, стабильность (тёмная тема) */ --ws-black: #0A121D; - /* Ключевой цвет бренда — динамика, энергия */ - --ws-accent: #0DADBB; - --ws-accent-hover: #34AFE3; - --ws-accent-light: #E3F7FF; - /* Дополнительные: опасность, успех */ - --ws-danger: #FF3A20; - --ws-danger-dark: #AA1400; - --ws-success: #13AD53; - /* Поверхности тёмной темы на базе --ws-black */ + /* Дополнительные цвета бренда — только для акцента и состояний */ + --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-bg-page: #0A121D; - --ws-bg-surface: #0f1823; - --ws-bg-elevated: #151d2b; - --ws-bg-hover: #1a2435; - --ws-border: #2a3647; - --ws-border-focus: #0DADBB; + --ws-bg-surface: #0A121D; + --ws-bg-elevated: #0A121D; + --ws-bg-hover: #0f1823; + --ws-border: #617E92; + --ws-border-focus: #34AFE3; --ws-text: #F5F9FD; --ws-text-muted: #B1C7D7; --ws-text-secondary: #617E92; @@ -35,28 +33,31 @@ --ws-font: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } -* { - box-sizing: border-box; -} - +/* Жёсткое переопределение Bootstrap: фон и шрифт по брендбуку */ html { scroll-behavior: smooth; + background: var(--ws-bg-page) !important; } body { - 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; + 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; min-height: 100vh; -webkit-font-smoothing: antialiased; } -/* Типографика по масштабу брендбука: p3 16/24 -2% для основного текста */ +* { + box-sizing: border-box; +} + +/* Типографика: Geologica, веса по брендбуку */ .ws-page-title { + font-family: var(--ws-font) !important; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; @@ -66,6 +67,7 @@ body { } .ws-form-section-title { + font-family: var(--ws-font) !important; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; @@ -74,76 +76,71 @@ body { color: var(--ws-text); } -/* Навбар */ +/* Навбар — без лого, только текст */ .navbar-ws { background: var(--ws-bg-surface) !important; - border-bottom: 1px solid var(--ws-border); + border-bottom: 1px solid var(--ws-border) !important; padding: 0.5rem 0; } .navbar-ws .navbar-brand { - display: flex; - align-items: center; - gap: 0.75rem; color: var(--ws-text) !important; - font-weight: 700; - font-size: 1.1rem; - letter-spacing: -0.02em; -} - -.navbar-ws .navbar-brand img { - height: 36px; - width: auto; - object-fit: contain; + font-family: var(--ws-font) !important; + font-weight: 700 !important; + font-size: 1.1rem !important; + letter-spacing: -0.02em !important; } .navbar-ws .navbar-brand:hover { color: var(--ws-accent) !important; } -.navbar-ws .navbar-brand:hover img { - opacity: 0.95; -} - .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: 400; + font-weight: 300; } .navbar-ws .nav-link:hover { color: var(--ws-text) !important; - background: var(--ws-bg-hover); + background: var(--ws-bg-hover) !important; } .navbar-ws .dropdown-menu { - background: var(--ws-bg-elevated); - border: 1px solid var(--ws-border); + background: var(--ws-bg-surface) !important; + border: 1px solid var(--ws-border) !important; border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); padding: 0.25rem; } .navbar-ws .dropdown-item { - color: var(--ws-text); + color: var(--ws-text) !important; + font-family: var(--ws-font) !important; border-radius: var(--ws-radius-sm); } .navbar-ws .dropdown-item:hover { - background: var(--ws-bg-hover); - color: var(--ws-text); + background: var(--ws-bg-hover) !important; + color: var(--ws-text) !important; } .navbar-ws .navbar-text { - color: var(--ws-text-muted); + color: var(--ws-text-muted) !important; + font-family: var(--ws-font) !important; font-size: 14px; letter-spacing: -0.01em; } .navbar-ws .navbar-toggler { - border-color: var(--ws-border); - color: var(--ws-text); + border-color: var(--ws-border) !important; + color: var(--ws-text) !important; +} + +.navbar-ws .navbar-toggler-icon { + filter: invert(1); } /* Контент */ @@ -151,12 +148,13 @@ body { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; + background: var(--ws-bg-page) !important; } -/* Карточки */ +/* Карточки — поверхности из основных цветов, граница Gray 04 */ .ws-card { - background: var(--ws-bg-surface); - border: 1px solid var(--ws-border); + background: var(--ws-bg-surface) !important; + border: 1px solid var(--ws-border) !important; border-radius: var(--ws-radius); padding: 1.25rem; margin-bottom: 1rem; @@ -176,31 +174,33 @@ body { overflow-x: auto; border-radius: var(--ws-radius); border: 1px solid var(--ws-border); + background: var(--ws-bg-surface) !important; } .ws-table { width: 100%; border-collapse: collapse; - color: var(--ws-text); + color: var(--ws-text) !important; + font-family: var(--ws-font) !important; } .ws-table th, .ws-table td { padding: 0.75rem 1rem; text-align: left; - border-bottom: 1px solid var(--ws-border); + border-bottom: 1px solid var(--ws-border) !important; } .ws-table th { - background: var(--ws-bg-elevated); - font-weight: 500; + background: var(--ws-bg-elevated) !important; + font-weight: 500 !important; font-size: 14px; letter-spacing: -0.01em; - color: var(--ws-text-secondary); + color: var(--ws-text-secondary) !important; } .ws-table tbody tr:hover { - background: var(--ws-bg-hover); + background: var(--ws-bg-hover) !important; } .ws-table tbody tr:last-child td { @@ -212,68 +212,71 @@ body { } .ws-table .ws-link { - color: var(--ws-accent); + color: var(--ws-accent) !important; text-decoration: none; font-size: 14px; } .ws-table .ws-link:hover { - color: var(--ws-accent-hover); + color: var(--ws-accent-hover) !important; text-decoration: underline; } .ws-table .ws-link-danger { - color: var(--ws-danger); + color: var(--ws-danger) !important; } .ws-table .ws-link-danger:hover { - color: var(--ws-danger-dark); + color: var(--ws-danger-dark) !important; } -/* Кнопки — ключевой цвет бренда */ +/* Кнопки — акцент только из дополнительных (Blue 02) */ .btn-ws-primary { - background: var(--ws-accent); - color: var(--ws-black); - border: none; + background: var(--ws-accent) !important; + color: var(--ws-black) !important; + border: none !important; border-radius: var(--ws-radius-sm); padding: 0.5rem 1rem; - font-weight: 500; + font-family: var(--ws-font) !important; + font-weight: 500 !important; font-size: 14px; letter-spacing: -0.01em; } .btn-ws-primary:hover { - background: var(--ws-accent-hover); - color: var(--ws-black); + background: var(--ws-accent-hover) !important; + color: var(--ws-white) !important; } .btn-ws-secondary { - background: transparent; - color: var(--ws-text-muted); - border: 1px solid var(--ws-border); + 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; font-size: 14px; } .btn-ws-secondary:hover { - background: var(--ws-bg-hover); - color: var(--ws-text); - border-color: var(--ws-gray-04); + background: var(--ws-bg-hover) !important; + color: var(--ws-text) !important; + border-color: var(--ws-gray-04) !important; } .btn-ws-danger { - background: var(--ws-danger-bg); - color: var(--ws-danger); - border: 1px solid var(--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; font-size: 14px; } .btn-ws-danger:hover { - background: var(--ws-danger); - color: var(--ws-white); + background: var(--ws-danger) !important; + color: var(--ws-white) !important; } .ws-btn-group { @@ -283,13 +286,14 @@ body { align-items: center; } -/* Формы */ +/* Формы — шрифт Geologica, границы из основных */ .ws-form-group { margin-bottom: 1rem; } .ws-form-group label { display: block; + font-family: var(--ws-font) !important; font-weight: 500; font-size: 14px; letter-spacing: -0.01em; @@ -303,20 +307,20 @@ body { width: 100%; max-width: 400px; padding: 0.5rem 0.75rem; - background: var(--ws-bg-page); - border: 1px solid var(--ws-border); + background: var(--ws-black) !important; + border: 1px solid var(--ws-border) !important; border-radius: var(--ws-radius-sm); - color: var(--ws-text); + color: var(--ws-text) !important; + font-family: var(--ws-font) !important; font-size: 15px; - font-family: var(--ws-font); } .ws-form-group input:focus, .ws-form-group select:focus, .ws-form-group textarea:focus { - outline: none; - border-color: var(--ws-border-focus); - box-shadow: 0 0 0 2px rgba(13, 173, 187, 0.25); + outline: none !important; + border-color: var(--ws-border-focus) !important; + box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.25) !important; } .ws-form-group input::placeholder, @@ -331,18 +335,18 @@ body { width: 100%; max-width: 100%; padding: 0.5rem 0.75rem; - background: var(--ws-bg-page); - border: 1px solid var(--ws-border); + background: var(--ws-black) !important; + border: 1px solid var(--ws-border) !important; border-radius: var(--ws-radius-sm); - color: var(--ws-text); + color: var(--ws-text) !important; + font-family: var(--ws-font) !important; font-size: 15px; - font-family: var(--ws-font); } .ws-form-login input:focus { - outline: none; - border-color: var(--ws-border-focus); - box-shadow: 0 0 0 2px rgba(13, 173, 187, 0.25); + outline: none !important; + border-color: var(--ws-border-focus) !important; + box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.25) !important; } .ws-text-danger { @@ -364,25 +368,26 @@ body { border-radius: var(--ws-radius-sm); margin-bottom: 1rem; border: 1px solid transparent; + font-family: var(--ws-font) !important; } .ws-alert-success { - background: var(--ws-success-bg); - color: var(--ws-success); - border-color: rgba(19, 173, 83, 0.3); + background: var(--ws-success-bg) !important; + color: var(--ws-success) !important; + border-color: rgba(19, 173, 83, 0.3) !important; } .ws-alert-error, .ws-alert-danger { - background: var(--ws-danger-bg); - color: var(--ws-danger); - border-color: rgba(255, 58, 32, 0.3); + background: var(--ws-danger-bg) !important; + color: var(--ws-danger) !important; + border-color: rgba(255, 58, 32, 0.3) !important; } .ws-alert-warning { - background: rgba(255, 136, 0, 0.12); - color: #FF8800; - border-color: rgba(255, 136, 0, 0.3); + background: rgba(255, 136, 0, 0.12) !important; + color: #FF8800 !important; + border-color: rgba(255, 136, 0, 0.3) !important; } .ws-alert .btn-close { @@ -390,15 +395,14 @@ body { opacity: 0.7; } -/* Пустое состояние */ .ws-empty { text-align: center; padding: 2rem 1rem; color: var(--ws-text-secondary); + font-family: var(--ws-font) !important; font-size: 15px; } -/* Логин */ .ws-login-card { max-width: 380px; margin: 2rem auto; @@ -406,52 +410,55 @@ body { } .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; text-align: center; + color: var(--ws-text); } -/* Главная */ .ws-hero { padding: 2rem 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; + color: var(--ws-text); } .ws-hero p { color: var(--ws-text-muted); + font-family: var(--ws-font) !important; font-size: 16px; line-height: 1.5; } -/* Подсказка удаления */ .ws-confirm-text { color: var(--ws-text-muted); margin-bottom: 1.25rem; } -/* Таблица в форме заказа — инпуты */ +/* Таблица в форме заказа */ .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-bg-page); - border: 1px solid var(--ws-border); - color: var(--ws-text); + 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; font-size: 14px; - font-family: var(--ws-font); } .ws-form-card .ws-form-group input, @@ -468,12 +475,52 @@ body { .ws-table input:focus, .ws-table select:focus { - border-color: var(--ws-border-focus); - box-shadow: 0 0 0 2px rgba(13, 173, 187, 0.2); + border-color: var(--ws-border-focus) !important; + box-shadow: 0 0 0 2px rgba(52, 175, 227, 0.2) !important; } -/* Списки документов — выравнивание чисел */ .ws-table .ws-num { text-align: right; font-variant-numeric: tabular-nums; } + +/* Переопределение Bootstrap: кнопки и инпуты в контенте */ +.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; +} + +.ws-main .btn-primary:hover { + background: var(--ws-accent-hover) !important; + border-color: var(--ws-accent-hover) !important; + color: var(--ws-white) !important; +} + +.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; +} + +.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; +} + +.ws-main .form-control::placeholder { + color: var(--ws-text-secondary); +} + +.ws-main h1, .ws-main h2, .ws-main h3, .ws-main h4 { + font-family: var(--ws-font) !important; + color: var(--ws-text) !important; +} + +.ws-main p, .ws-main label, .ws-main td, .ws-main th, .ws-main li { + font-family: var(--ws-font) !important; +} diff --git a/app/static/images/watersurf-logo.png b/app/static/images/watersurf-logo.png deleted file mode 100644 index c7acdbc..0000000 Binary files a/app/static/images/watersurf-logo.png and /dev/null differ diff --git a/app/templates/base.html b/app/templates/base.html index ce4f0f0..17b088c 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -15,7 +15,7 @@