/* --- Фирменные цвета и Логотип --- */ .logo-red { color: #dc3545; /* Стандартный красный цвет Bootstrap, очень хорошо смотрится */ } .logo-sec { color: var(--accent-color); /* Ваш фирменный зеленый */ } /* --- Общие стили и типографика --- */ body { /* Мы "перенесли" стили с на главный контейнер сайта. Теперь они не будут влиять на админку. */ font-family: 'Roboto', "Droid Sans", Arial, sans-serif; color: var(--custom-text-color); background-color: var(--custom-bg-color); } /* Делаем все заголовки жирными по умолчанию */ h1, h2, h3, h4, h5, h6 { font-weight: 700; } /* --- Глобальные стили для ссылок --- */ a { color: var(--accent-color); text-decoration: none; /* Убираем подчеркивание по умолчанию */ transition: color 0.2s ease-in-out; } a:hover { /* При наведении делаем цвет чуть темнее для обратной связи */ color: var(--accent-color-hover); } /* --- Навигация (Хедер) --- */ .navbar-brand { font-weight: 700; /* Делаем логотип жирным */ } /* --- Карточки статей на главной странице --- */ .card { /* Добавляем плавный переход для всех изменений. Это нужно для анимации */ color: var(--custom-text-color); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .card:hover { /* При наведении курсора карточка слегка приподнимается */ transform: translateY(-5px); /* И ее тень становится более выраженной */ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .card-title a { /* Убираем стандартное подчеркивание у ссылок в заголовках / text-decoration: none; / Наследуем цвет текста, чтобы ссылка не была синей */ color: inherit; transition: color 0.2s ease-in-out; } .card-title a:hover { color: var(--accent-color); /* Теперь при наведении заголовок становится зеленым */ } .card-img-top { /* Чтобы картинка не вылезала за скругленные углы карточки */ border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0; /* Делаем так, чтобы картинка всегда заполняла пространство, не искажаясь */ object-fit: cover; height: 200px; /* Задаем фиксированную высоту для единообразия */ } /* --- Страница отдельной статьи --- */ .article-content { /* Устанавливаем точный размер шрифта, как вы просили (18px) */ font-size: 1.125rem; /* И точную высоту строки */ line-height: 1.6; } .article-content p { /* И точный отступ между параграфами */ margin-bottom: 1.25rem; } .article-content h2, .article-content h3 { margin-top: 2.5rem; /* Большой отступ перед подзаголовками */ margin-bottom: 1rem; } .article-content img { max-width: 100%; height: auto; border-radius: 8px; } /* Делаем главный заголовок крупнее */ .display-5 { font-size: 1.5rem; } @media (min-width: 55.375rem) { .display-5 { font-size: 3.5rem; line-height: 1.1; } .post-navigation-title { font-size: 3.5rem; } } @media (min-width: 40.6875rem) { .display-5 { font-size: 2.5rem; } .post-navigation-title { font-size: 2.5rem; } } /* --- Сайдбар и виджеты --- */ .card-header { font-weight: 700; background-color: var(--custom-bg-color); /* Светлый фон для заголовка виджета */ } .related-post-img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .related-post-title { font-weight: 700; text-decoration: none; color: var(--custom-text-color); /* Оставим черным по умолчанию для контраста */ line-height: 1.3; display: block; transition: color 0.2s ease-in-out; } .related-post-title:hover { color: var(--accent-color); /* А при наведении делаем зеленым */ } /* Простой стиль для баннера-заглушки */ .sidebar-banner { background: linear-gradient(135deg, #f8d7da, #fce399); color: rgba(0, 0, 0, .8); } .sidebar-banner .btn-primary { background-color: var(--accent-color); } figure.table.ck-widget.ck-widget_with-selection-handle { color: #fff; } .article-content table, .django-ckeditor-widget table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: 0.95rem; color: var(--custom-text-color); /* Темный текст */ background-color: #fff; /* Белый фон */ } .article-content th, .article-content td, .django-ckeditor-widget th, .django-ckeditor-widget td { padding: 0.75rem; text-align: left; border: 1px solid var(--custom-border-color); } /* Общие стили для заголовка таблицы */ .article-content thead th, .django-ckeditor-widget thead th { font-weight: 700; vertical-align: bottom; border-bottom-width: 2px; } .article-content th, .article-content td { border: none; border-bottom: 1px solid var(--custom-border-color); } .article-content thead th { border-bottom-width: 2px; } .article-content tbody tr:nth-of-type(odd) { background-color: var(--custom-bg-color); } .article-content thead { background-color: var(--custom-bg-color); color: #fff; } .sidebar-sticky { position: -webkit-sticky; position: sticky; top: 20px; } .card-img-container { position: relative; } .category-badge { position: absolute; top: 1rem; left: 1rem; z-index: 10; display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; background-color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый */ border-radius: 50px; /* Сильно скругленные углы */ box-shadow: 0 2px 10px rgba(0,0,0,0.1); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .no-style-link:hover .category-badge { background-color: rgba(255, 255, 255, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .category-icon { width: 16px; height: 16px; margin-right: 0.5rem; } .category-title { font-size: 0.85rem; font-weight: 700; color: rgba(0, 0, 0, .8); } .author-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: 0.75rem; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } a:hover .author-avatar { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .article-content ul, .article-content ol { padding-left: 1.5rem; /* Стандартный отступ для списков */ margin-bottom: 1.25rem; } .article-content li { margin-bottom: 0.5rem; line-height: 1.4; } .article-content ul li::marker, .article-content ol li::marker { color: var(--accent-color); font-weight: 700; } .no-style-link, .no-style-link:hover { text-decoration: none; color: inherit; /* Наследует цвет родителя */ } .btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); } .btn-primary:hover { background-color: var(--accent-color-hover); /* Более темный оттенок для hover */ border-color: var(--accent-color-hover); } /* --- Стили для заголовка страницы фильтрации --- */ .page-header-container { padding-bottom: 1.5rem; border-bottom: 1px solid var(--custom-border-color); /* Тонкая линия-разделитель */ } .page-header-title { font-size: 3rem; /* Крупный размер для заголовка */ font-weight: 700; margin-bottom: 0.5rem; } .page-header-count { font-size: 1rem; color: #6c757d; /* Серый цвет для счетчика */ margin-bottom: 0; } /* --- Стили для пагинации --- */ .pagination { --bs-pagination-focus-box-shadow: none; font-weight: 700; } .page-link { border: none; color: #6c757d; background-color: transparent; padding: 0.5rem 1rem; } .page-item:not(.disabled) .page-link:hover { color: var(--custom-text-color); /* Черный при наведении */ background-color: transparent; } .page-item.disabled .page-link { color: #ced4da; /* Светло-серый, если кнопка неактивна */ } .page-num { display: inline-block; padding: 0.5rem 1rem; margin: 0 0.25rem; color: var(--custom-text-color); text-decoration: none; border-radius: 50%; transition: background-color 0.2s, color 0.2s; } a.page-num:hover { color: var(--custom-text-color); } .page-item.active .page-num { background-color: var(--custom-bg-color); color: #fff; } /* --- Стили для блока навигации по постам --- */ .post-navigation-wrapper { background-color: var(--custom-bg-color); /* Слегка серый фон для выделения блока */ padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid var(--custom-border-color); } .post-navigation-label { font-size: 0.9rem; font-weight: 700; color: var(--accent-color); /* Наш фирменный зеленый */ margin-bottom: 1rem; text-transform: uppercase; display: flex; align-items: center; } .post-navigation-label svg { margin-right: 0.5rem; } .post-navigation-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .post-navigation-title a { color: var(--custom-text-color); text-decoration: none; } .post-navigation-title a:hover { color: var(--accent-color); } .post-navigation-desc { font-size: 1.1rem; color: #6c757d; } .post-navigation-img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } .django-ckeditor-widget .ck-editor__editable_inline { min-height: 300px; /* Задаем минимальную высоту в 300px */ } .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; border-bottom: 2px solid var(--accent-color); padding-bottom: 0.5rem; display: inline-block; } .section-title a { color: inherit; /* Наследует черный цвет */ } .reactions-wrapper { border-top: 1px solid var(--custom-border-color); border-bottom: 1px solid var(--custom-border-color); padding: 2rem 0; text-align: center; } .reactions-title { font-weight: 700; margin-bottom: 1.5rem; } .reactions-container { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .reaction-btn { background: none; border: 1px solid transparent; border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s, border-color 0.2s; gap: 0.25rem; } .reaction-emoji { font-size: 2rem; } .reaction-btn:hover { transform: translateY(-5px); } .reaction-btn.active { border-color: #dc3545; } .reaction-emoji { font-size: 2.5rem; } .reaction-count { font-size: 1.2rem; font-weight: 700; color: var(--custom-text-color); } .reaction-name { font-size: 0.8rem; color: #6c757d; } /* --- Стили для страниц входа и регистрации --- */ .form-wrapper { background-color: var(--custom-bg-color); padding: 2.5rem; border-radius: 12px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); } .form-wrapper h2 { text-align: center; margin-bottom: 2rem; font-weight: 700; } /* Стилизуем поля формы, которые генерирует Django */ .form-wrapper p { margin-bottom: 1.5rem; } .form-wrapper label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .form-wrapper input[type="text"], .form-wrapper input[type="password"], .form-wrapper input[type="email"] { display: block; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 8px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .form-wrapper input:focus { border-color: var(--accent-color); outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 168, 142, 0.25); } .form-wrapper .btn-primary { width: 100%; padding: 0.75rem; font-size: 1rem; font-weight: 700; } /* --- Стили для шапки (Navbar) --- */ /* Скрываем мобильные элементы на десктопе */ .mobile-menu-header, .mobile-menu-categories { display: none; } .ms-auto > .navbar-nav { flex-direction: row; } @media (max-width: 991.98px) { .mobile-menu-header, .mobile-menu-categories { display: block; } .navbar-nav.ms-auto { flex-direction: column; /* Выстраиваем в столбик */ align-items: flex-start !important; } /* Основной контейнер меню: делаем его фиксированным и на весь экран */ .navbar-collapse.show, .navbar-collapse.collapsing { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: var(--custom-bg-color); padding: 0; overflow-y: auto; } /* Шапка мобильного меню */ .mobile-menu-header { display: flex; align-items: center; padding: 0.75rem 20px; border-bottom: 1px solid var(--custom-border-color); position: sticky; top: 0; background-color: var(--custom-bg-color); z-index: 10; } .mobile-menu-header .navbar-brand { padding: 0; } .mobile-menu-header .btn-close { position: absolute; right: 20px; padding: 0; } /* Тело мобильного меню */ .mobile-menu-body { padding: 1rem 20px; } /* ... остальные стили для мобильного меню (заголовки, иконки и т.д.) ... */ .mobile-menu-section-title { font-size: 0.8rem; font-weight: 700; color: #6c757d; text-transform: uppercase; padding: 0 0 0.5rem; } .mobile-menu-category-icon { width: 20px; height: 20px; margin-right: 1rem; } /* Скрываем кнопку-бургер, когда меню открыто */ .navbar-toggler[aria-expanded="true"] { opacity: 0; pointer-events: none; } } @media (max-width: 767.98px) { main .container, footer .container, nav .container { width: 100%; max-width: none; /* Отменяем ограничение по ширине */ } .article-detail article figure, .article-content img { width: calc(100% + 40px); /* Ширина (100% + 2 * отступ) */ max-width: none; margin-left: -20px; margin-right: -20px; border-radius: 0; } } .article-cover-img { width: 100%; height: 450px; object-fit: cover; } /* На мобильных устройствах сделаем высоту поменьше */ @media (max-width: 767.98px) { .article-cover-img { height: 250px; } } /* --- Стили для тегов --- */ .tags-wrapper { display: flex; flex-wrap: wrap; gap: 0.75rem; } .tag-badge { display: inline-block; padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 500; color: #6c757d; background-color: var(--custom-bg-color); border: 1px solid var(--custom-border-color); border-radius: 50px; text-decoration: none; transition: all 0.2s ease-in-out; } .tag-badge:hover { color: #fff; background-color: var(--accent-color); border-color: var(--accent-color); } /* --- Стили для поиска --- */ /* Уменьшаем высоту поля поиска в шапке на десктопе */ .navbar .form-control { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; } /* Меняем цвет кнопки "Найти" в мобильном меню на фирменный */ .navbar-collapse .btn-outline-success { border-color: var(--accent-color); color: var(--accent-color); } .navbar-collapse .btn-outline-success:hover { background-color: var(--accent-color); color: #fff; } /* --- Стили для ссылки "Узнать больше" --- */ .more-link { font-weight: 700; text-decoration: none; color: var(--custom-text-color); /* Темный цвет текста */ transition: color 0.2s ease-in-out; } .more-link:hover { color: var(--accent-color); /* Наш фирменный зеленый при наведении */ } /* Стрелочка (→) по умолчанию может быть не выровнена, этот небольшой хак исправляет это. */ .more-link span { display: inline-block; transition: transform 0.2s ease-in-out; } .more-link:hover span { transform: translateX(5px); /* Сдвигаем стрелочку вправо при наведении */ } /* --- Меню категорий в футере --- */ /* 1. По умолчанию скрываем меню (подход Mobile First) */ .footer-category-menu { display: none; } @media (max-width: 992px) { .slider { margin-top: 10px; } } @media (min-width: 992px) { .footer-category-menu { display: block; } .footer-category-menu h3 { /* Стили для заголовка, например: */ color: var(--custom-text-color); font-size: .875em; font-weight: 700; margin-bottom: 30px; position: relative; } .footer-category-menu ul { /* Убираем стандартные маркеры и отступы списка */ list-style-type: none; padding: 0; margin-top: 18px; } .footer-category-menu ul li { margin-bottom: 10px; line-height: 1.3; } .footer-category-menu ul li a { /* Стили для ссылок */ color: var(--accent-color); /* Цвет ссылок, подберите под ваш дизайн */ text-decoration: none; transition: color 0.2s ease; font-size: .8125em; font-weight: 400; } .footer-category-menu ul li a:hover { color: var(--accent-color); /* Цвет ссылки при наведении */ text-decoration: underline; } } .__ymDebuggerOpener { display: none; } pre { background-color: var(--code-bg-color); color: var(--code-text-color); border: 1px solid var(--code-border-color); border-radius: 6px; padding: 16px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } code { font-family: 'JetBrains Mono', monospace; /* Набор шрифтов */ } /* Стили для строчных элементов кода */ :not(pre) > code { font-family: 'JetBrains Mono', monospace; background-color: rgba(175, 184, 193, 0.2); color: var(--code-text-color); padding: .2em .4em; margin: 0; font-size: 85%; border-radius: 6px; } .bg-light { background-color: var(--custom-bg-secondary) !important; border-color: var(--custom-border-color) !important; /* На всякий случай для рамок */ } /* 2. Bootstrap использует класс .navbar-light для стилизации текста и ссылок в меню. Нам нужно переопределить и его, чтобы текст не оставался черным в темной теме. */ /* Цвет ссылок, названия сайта и кнопки-бургера */ .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-brand, .navbar-light .navbar-toggler-icon { color: var(--custom-text-color); transition: color 0.2s ease-in-out; /* Добавим плавность */ } /* Цвет ссылок и бренда при наведении */ .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-brand:hover { color: var(--accent-color-hover); } /* Активная ссылка в меню */ .navbar-light .navbar-nav .nav-link.active { color: var(--accent-color-hover) !important; font-weight: 700; } footer.bg-light, footer.bg-light p, footer.bg-light .text-muted { color: var(--custom-text-color) !important; } footer.bg-light a { color: var(--accent-color); } footer.bg-light a:hover { color: var(--accent-color); } * --- Стили для красивого переключателя темы --- */ /* 1. Контейнер-обертка */ .theme-switch { display: inline-block; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; /* Убираем синюю подсветку при клике на мобильных */ } /* 2. Скрываем настоящий чекбокс */ .theme-switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } /* 3. "Дорожка" переключателя (трек) */ .slider { display: block; width: 60px; /* Ширина */ height: 30px; /* Высота */ border-radius: 15px; /* Полное скругление */ background-color: #e9ecef; /* Цвет для светлой темы */ transition: background-color 0.3s ease-in-out; } /* 4. "Ползунок" переключателя (кружок) */ .thumb { position: relative; top: 3px; left: 3px; width: 24px; /* Размер кружка */ height: 24px; border-radius: 50%; background-color: #dc3545; /* Ваш фирменный красный цвет */ display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-in-out; } /* 5. Стили для иконок внутри ползунка */ .thumb i { font-size: 14px; color: #fff; /* Белый цвет иконок */ transition: opacity 0.3s ease-in-out; } .icon-moon { opacity: 0; /* По умолчанию луна скрыта */ position: absolute; } .icon-sun { opacity: 1; /* По умолчанию солнце видно */ position: absolute; } /* 6. Меняем фон дорожки на темный */ .theme-switch input:checked + .slider { background-color: #343a40; /* Темно-серый цвет */ } /* 7. Двигаем ползунок вправо */ .theme-switch input:checked + .slider .thumb { transform: translateX(30px); /* Сдвиг = (ширина дорожки - ширина ползунка) */ } /* 8. Прячем солнце и показываем луну */ .theme-switch input:checked + .slider .thumb .icon-sun { opacity: 0; } .theme-switch input:checked + .slider .thumb .icon-moon { opacity: 1; } label.theme-switch { display: block; } /* --- Стили для кнопки "Наверх" --- */ .scroll-to-top { /* 1. Позиционирование */ position: fixed; bottom: 25px; right: 25px; z-index: 1030; /* Должна быть выше большинства элементов */ /* 2. Внешний вид (создаем шестиугольник) */ width: 50px; height: 55px; /* Гексагон чуть выше, чем шире */ background-color: #212529; /* Темный фон, как у терминала */ /* Магия CSS для создания формы гексагона */ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* 3. Центрирование иконки внутри */ display: flex; align-items: center; justify-content: center; text-decoration: none; /* 4. Начальное состояние (скрыта) */ opacity: 0; visibility: hidden; transform: translateY(20px); /* Начинает "из-под" экрана */ /* 5. Анимации */ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } /* Стили для иконки-стрелки */ .scroll-to-top i { font-size: 2rem; /* Размер стрелки */ font-weight: bold; color: var(--accent-color); /* Используем вашу фирменную переменную цвета! */ transition: color 0.3s ease-in-out; } /* --- Эффекты при наведении --- */ .scroll-to-top:hover { transform: translateY(-5px); /* Кнопка "приподнимается" */ /* Неоновое свечение фирменным цветом */ box-shadow: 0 0 20px var(--accent-color); } .scroll-to-top:hover i { color: #fff; /* Иконка становится белой для контраста */ } /* --- Класс для отображения кнопки --- */ /* Этот класс будет добавляться через JavaScript */ .scroll-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); /* Возвращается на место */ } .scroll-to-top:active { transform: translateY(-2px) scale(0.95); /* Кнопка слегка "прожимается" */ box-shadow: 0 0 10px var(--accent-color); /* Свечение чуть меньше */ transition: transform 0.1s ease-in-out; /* Резкая анимация нажатия */ } .table-responsive-wrapper { width: 100%; overflow-x: auto; /* Добавляем горизонтальный скролл, если нужно */ -webkit-overflow-scrolling: touch; } /* Стили для самой таблицы внутри обертки. */ .table-responsive-wrapper table { margin-bottom: 0; /* Убираем нижний отступ, т.к. он теперь у обертки */ }