erjemin/2026-etpgrf-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: своя цветовая палитра для темной и светлой темы

Browse Source
This commit is contained in:
Sergei Erjemin
2026-01-12 18:33:46 +03:00
parent e93144321e
commit f3b9936dc3
1 changed files with 105 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
etpgrf_site/typograph/templates/typograph/base.html
View File

@@ -31,104 +31,153 @@
</script>
<style>
/* === ЦВЕТОВАЯ СХЕМА === */
:root {
/* Светлая тема: Темно-серый с легкой желтизной (Warm Charcoal) */
--bs-body-bg: #f8f8f2;
--bs-body-color: #1f1f19;
--bs-primary: #4a4a44;
--bs-primary-rgb: 74, 74, 68;
--bs-link-color: #4a4a44;
--bs-link-hover-color: #2e2e2a;
--bs-focus-ring-color: rgba(74, 74, 68, 0.25);
/* Фон навбара в светлой теме */
--bs-navbar-bg: #b8b8d055; /* Тот же, что и body, или чуть темнее */
--bs-navbar-color: #1f1f19;
}
[data-bs-theme="dark"] {
/* Темная тема: Глубокий черный фон и Стальной акцент */
--bs-body-bg: #151111;
--bs-body-color: #eceff1;
/* Акцент: Светлый серо-голубой */
--bs-primary: #b0bec5;
--bs-primary-rgb: 176, 190, 197;
--bs-link-color: #90caf9;
--bs-link-hover-color: #bbdefb;
--bs-border-color: #37474f;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
/* Цвет фокуса для полей ввода */
--bs-focus-ring-color: rgba(176, 190, 197, 0.25);
/* Фон navbar в темной теме */
--bs-navbar-bg: #55558555;
--bs-navbar-color: #b0bec5;
}
/* Небольшие стили для красоты */
body { background-color: var(--bs-body-bg); }
/* Navbar: используем переменную для фона */
.navbar {
background-color: var(--bs-navbar-bg) !important;
border-bottom: 1px solid var(--bs-border-color);
}
.navbar-brand {
color: var(--bs-navbar-color) !important;
font-weight: bold;
}
/* === ПЕРЕОПРЕДЕЛЕНИЕ КОМПОНЕНТОВ BOOTSTRAP === */
/* Кнопки Primary */
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-link-hover-color);
--bs-btn-hover-border-color: var(--bs-link-hover-color);
--bs-btn-active-bg: var(--bs-link-hover-color);
--bs-btn-active-border-color: var(--bs-link-hover-color);
}
/* В темной теме текст на кнопке должен быть темным */
[data-bs-theme="dark"] .btn-primary {
--bs-btn-color: #151111;
--bs-btn-hover-color: #151111;
--bs-btn-active-color: #151111;
}
/* Чекбоксы и Радио */
.form-check-input:checked {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
/* В темной теме галочка должна быть темной */
[data-bs-theme="dark"] .form-check-input:checked {
/* SVG галочки черного цвета (закодирован в base64) */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23151111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
/* Фокус на полях ввода */
.form-control:focus, .form-select:focus, .form-check-input:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}
.result-box {
/* Используем переменные Bootstrap для адаптации к теме */
background: var(--bs-body-bg);
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
padding: 1rem;
min-height: 300px;
/* Для корректного отображения висячей пунктуации нужен отступ слева/справа */
padding-left: 1.5rem;
padding-right: 1.5rem;
white-space: pre-wrap; /* Чтобы pre переносил строки */
font-family: inherit; /* Наследуем шрифт, если это pre */
white-space: pre-wrap;
font-family: inherit;
}
/* Стили для CodeMirror, чтобы он вписался в Bootstrap */
.cm-editor {
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
height: 300px; /* Фиксированная высота */
height: 300px;
}
/* --- Висячая пунктуация (Hanging Punctuation) --- */
/* Слева */
.result-box .etp-laquo { margin-left: -0.44em; }
.result-box .etp-ldquo { margin-left: -0.44em; }
.result-box .etp-lpar { margin-left: -0.3em; }
.result-box .etp-lsqb { margin-left: -0.3em; }
.result-box .etp-lcub { margin-left: -0.3em; }
/* Справа */
.result-box .etp-raquo { margin-right: -0.44em; }
.result-box .etp-rdquo { margin-right: -0.44em; }
.result-box .etp-rpar { margin-right: -0.3em; }
.result-box .etp-rsqb { margin-right: -0.3em; }
.result-box .etp-rcub { margin-right: -0.3em; }
/* Точки и запятые висят меньше */
.result-box .etp-r-dot { margin-right: -0.2em; }
.result-box .etp-r-comma { margin-right: -0.2em; }
.result-box .etp-r-colon { margin-right: -0.2em; }
/* --- Стили для Cookie Banner --- */
#cookie-banner {
backdrop-filter: blur(10px); /* Эффект размытия фона */
backdrop-filter: blur(10px);
border-top: 1px solid var(--bs-border-color);
z-index: 1050; /* Поверх всего */
z-index: 1050;
background-color: var(--bs-navbar-bg);
color: var(--bs-navbar-color); /* Используем цвет навбара для текста */
}
/* Светлая тема: темная плашка */
[data-bs-theme="light"] #cookie-banner {
background-color: rgba(33, 37, 41, 0.85); /* bg-dark с прозрачностью */
color: #fff;
}
[data-bs-theme="light"] #cookie-banner a {
color: #fff;
#cookie-banner a {
color: var(--bs-primary);
text-decoration: none;
border-bottom: 1px dotted #fff;
border-bottom: 1px dotted var(--bs-primary);
}
[data-bs-theme="light"] #cookie-banner a:hover {
#cookie-banner a:hover {
border-bottom-style: solid;
}
[data-bs-theme="light"] #cookie-accept {
color: #fff;
border: 1px dashed #fff;
#cookie-accept {
color: var(--bs-primary);
border: 1px dashed var(--bs-primary);
background: transparent;
}
[data-bs-theme="light"] #cookie-accept:hover {
background: rgba(255,255,255, 0.2);
}
/* Темная тема: светлая плашка */
[data-bs-theme="dark"] #cookie-banner {
background-color: rgba(248, 249, 250, 0.85); /* bg-light с прозрачностью */
color: #000;
}
[data-bs-theme="dark"] #cookie-banner a {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}
[data-bs-theme="dark"] #cookie-banner a:hover {
border-bottom-style: solid;
}
[data-bs-theme="dark"] #cookie-accept {
color: #000;
border: 1px dashed #000;
background: transparent;
}
[data-bs-theme="dark"] #cookie-accept:hover {
background: rgba(0,0,0, 0.1);
#cookie-accept:hover {
background: rgba(var(--bs-primary-rgb), 0.1);
}
</style>
</head>
<body>
{# ШАПКА и главное меню #}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
{# Убрал bg-dark и navbar-dark, теперь цвета управляются через CSS #}
<nav class="navbar navbar-expand-lg mb-4">
<div class="container">
<a class="navbar-brand" href="/">ETPGRF — единая типографика для веба</a>
</div>
@@ -142,16 +191,18 @@
<div id="cookie-banner" class="fixed-bottom p-4 fs-5" style="display: none;">
<div class="container d-flex justify-content-between align-items-center">
<p class="mb-0 pe-5">
В&nbsp;соответствии с&nbsp;GDPR и&nbsp;152-ФЗ, уведомляем вас, что настоящий сайт использует файлы cookie
для&nbsp;сбора данных о&nbsp;поведении пользо&shy;вателей, с&nbsp;целью аналитики и&nbsp;улучшения работы
сайта. Оставаясь на&nbsp;сайте, вы&nbsp;соглашаетесь с&nbsp;нашей
В&nbsp;соответствии с&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr>
и&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>, уведомляем вас, что настоящий сайт использует файлы cookie
для&nbsp;сбора данных о&nbsp;поведении пользо&shy;вателей, с&nbsp;целью аналитики и&nbsp;улучшения своей работы.
Оставаясь на&nbsp;сайте, вы&nbsp;соглашаетесь с&nbsp;нашей
<a href="/privacy-policy">политикой конфи&shy;денциаль&shy;ности</a>.
</p>
<button id="cookie-accept" class="btn btn-lg ms-3">Принять</button>
</div>
</div>
{# Bootstrap JS #}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{# Bootstrap JS #}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{# Логика куки-баннера и счетчиков #}
<script>