413 lines
10 KiB
CSS
413 lines
10 KiB
CSS
/* === ЦВЕТОВАЯ СХЕМА === */
|
|
: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-linkcolor: #14abda;
|
|
--bs-linkclolor-hover: #90caf9;
|
|
|
|
--bs-border-color: #37474f;
|
|
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
|
|
|
/* Цвет фокуса для полей ввода */
|
|
--bs-focus-ring-color: rgba(176, 190, 197, 0.25);
|
|
|
|
/* Фон навбара в темной теме */
|
|
--bs-navbar-bg: #55558555;
|
|
--bs-navbar-color: #b0bec5;
|
|
}
|
|
|
|
/* Небольшие стили для красоты */
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%; /* Используем min-height вместо height */
|
|
background-color: var(--bs-body-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#main-navbar {
|
|
z-index: 1000;
|
|
background-color: var(--bs-navbar-bg) !important;
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
padding: 0;
|
|
position: sticky;
|
|
top: 0;
|
|
backdrop-filter: blur(8px); /* Эффект размытия */
|
|
box-shadow: 0 -25px 30px 15px var(--bs-border-color);
|
|
/* transition: height 0.3s ease, background-color 0.3s ease; /* Анимация высоты */
|
|
}
|
|
|
|
#main-navbar > .container {
|
|
background: no-repeat left;
|
|
background-size: contain;
|
|
position: relative; /* Для абсолютного позиционирования бургера */
|
|
}
|
|
|
|
#main-navbar > .container.logo-big {
|
|
background-image: var(--bg-image-text);
|
|
transition: .4s ease;
|
|
}
|
|
|
|
#main-navbar > .container:not(.logo-big) {
|
|
background-image: none;
|
|
transition: .4s ease;
|
|
}
|
|
|
|
#main-navbar > #logo > .navbar-brand {
|
|
padding: 0; /* Убираем отступы у бренда */
|
|
display: block; /* Блок, чтобы работали размеры */
|
|
background: no-repeat left;
|
|
background-size: contain;
|
|
margin-left: -1.5%;
|
|
}
|
|
|
|
#main-navbar > #logo.logo-big > .navbar-brand {
|
|
height: 105px;
|
|
width: 500px;
|
|
opacity: 1;
|
|
transition: .4s ease;
|
|
}
|
|
|
|
#main-navbar > #logo:not(.logo-big) > .navbar-brand {
|
|
height: 60px;
|
|
width: 285px;
|
|
transition: .4s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* --- Бургер меню --- */
|
|
#main-navbar > #logo > .navbar-toggler {
|
|
position: absolute;
|
|
right: 0.75rem; /* Отступ справа как у контейнера */
|
|
transition: top 0.4s ease; /* Анимация позиции */
|
|
z-index: 1001;
|
|
}
|
|
|
|
#main-navbar > #logo.logo-big > .navbar-toggler {
|
|
top: 32px; /* Центрируем для высоты 105px */
|
|
}
|
|
|
|
/* При скролле меняем позицию бургера */
|
|
#main-navbar > #logo:not(.logo-big) > .navbar-toggler {
|
|
top: 10px; /* Центрируем для высоты 60px */
|
|
}
|
|
|
|
/* --- Стили для ссылок в меню --- */
|
|
.nav-item {
|
|
color: var(--bs-body-bg);
|
|
padding: 10px 15px;
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
|
|
/* Фикс для мобильной версии: ширина по контенту и прижатие вправо */
|
|
@media (max-width: 991.98px) {
|
|
.nav-item {
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.navbar-collapse {
|
|
margin-top: -10px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
#main-navbar > #logo > .navbar-brand {
|
|
background: none !important;
|
|
}
|
|
}
|
|
@media (max-width: 456.98px) {
|
|
#main-navbar > .container {
|
|
background: no-repeat left;
|
|
background-size: 105px 500px !important;
|
|
}
|
|
}
|
|
|
|
|
|
.nav-item:hover {
|
|
background-color: var(--bs-navbar-bg);
|
|
transition: background-color 0.8s;
|
|
}
|
|
.nav-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: var(--bs-linkcolor);
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s;
|
|
}
|
|
.nav-item:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/* Контент растягивается, чтобы прижать футер */
|
|
#content-container {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
/* Футер */
|
|
footer.footer {
|
|
flex-shrink: 0;
|
|
padding: 1rem 0;
|
|
margin-top: 2rem;
|
|
border-top: 1px solid var(--bs-border-color);
|
|
background-color: var(--bs-navbar-bg);
|
|
color: var(--bs-navbar-color);
|
|
font-size: 0.9rem;
|
|
}
|
|
footer.footer a {
|
|
color: var(--bs-primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px dotted var(--bs-primary);
|
|
}
|
|
footer.footer a:hover {
|
|
border-bottom-style: solid;
|
|
color: var(--bs-link-hover-color);
|
|
}
|
|
|
|
/* === ПЕРЕОПРЕДЕЛЕНИЕ КОМПОНЕНТОВ 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);
|
|
transition: background-color 0.8s;
|
|
}
|
|
|
|
.btn-secondary {
|
|
--bs-btn-bg: var(--bs-border-color);
|
|
--bs-btn-border-color: var(--bs-navbar-bg);
|
|
--bs-btn-hover-bg: var(--bs-border-color);
|
|
--bs-btn-hover-border-color: var(--bs-border-color);
|
|
--bs-btn-active-bg: var(--bs-border-color);
|
|
--bs-btn-active-border-color: var(--bs-border-color);
|
|
transition: background-color 0.8s;
|
|
}
|
|
|
|
/* В темной теме текст на кнопке должен быть темным */
|
|
[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 {
|
|
background: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.375rem;
|
|
min-height: 300px;
|
|
padding: 1rem 1.5rem;
|
|
white-space: pre-wrap;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.cm-editor {
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.375rem;
|
|
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);
|
|
border-top: 1px solid var(--bs-border-color);
|
|
z-index: 1050;
|
|
background-color: var(--bs-navbar-bg);
|
|
color: var(--bs-navbar-color); /* Используем цвет навбара для текста */
|
|
}
|
|
|
|
#cookie-banner a {
|
|
color: var(--bs-primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px dotted var(--bs-primary);
|
|
}
|
|
|
|
#cookie-banner a:hover {
|
|
border-bottom-style: solid;
|
|
color: var(--bs-link-hover-color);
|
|
}
|
|
|
|
#cookie-accept {
|
|
color: var(--bs-primary);
|
|
border: 1px dashed var(--bs-primary);
|
|
background: transparent;
|
|
}
|
|
|
|
#cookie-accept:hover {
|
|
background: rgba(var(--bs-primary-rgb), 0.1);
|
|
}
|
|
|
|
/* --- Стили для контента блога (Typography) --- */
|
|
.post-page-content {
|
|
padding-bottom: 2rem;
|
|
margin-bottom: 6rem;
|
|
}
|
|
|
|
.post-page-content h1, .post-page-content h2, .post-page-content h3,
|
|
.post-page-content h4, .post-page-content h5, .post-page-content h6 {
|
|
color: var(--bs-body-color);
|
|
opacity: 90%;
|
|
font-weight: 300;
|
|
padding-top: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.post-page-content p, .post-page-content li {
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.6;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.post-page-content > div.lead {
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
opacity: 95%;
|
|
border: 1px dashed var(--bs-border-color);
|
|
}
|
|
|
|
.post-page-content > div.lead > p {
|
|
margin-bottom: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.post-content ul, .page-content ul,
|
|
.post-content ol, .page-content ol {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.post-content blockquote, .page-content blockquote {
|
|
border-left: 4px solid var(--bs-primary);
|
|
padding-left: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-style: italic;
|
|
/*color: var(--bs-secondary-color);*/
|
|
}
|
|
|
|
/* Общий класс для ссылок в контенте и списках */
|
|
.link-dashed, .post-page-content a {
|
|
color: var(--bs-linkcolor);
|
|
text-decoration: none;
|
|
border-bottom: 1px dotted var(--bs-linkcolor);
|
|
}
|
|
|
|
.link-dashed:hover, .post-page-content a:hover {
|
|
color: var(--bs-linkclolor-hover);
|
|
border-bottom: 1px solid var(--bs-linkclolor-hover);
|
|
}
|
|
|
|
/* Утилита для бордера только на больших экранах */
|
|
@media (min-width: 992px) {
|
|
.border-lg-start {
|
|
border-left: 1px solid var(--bs-border-color) !important;
|
|
}
|
|
.border-lg-end {
|
|
border-right: 1px solid var(--bs-border-color) !important;
|
|
}
|
|
}
|