/* Theme Name: zero Description: Minimal Zero theme, Bootstrap 5.3 ready, header, menu, search, footer with settings. Dark/light theme support. Author: nadokon Version: 1.37 */ /* 1. Цветовые переменные по умолчанию (light) */ :root { --zero-header-bg: #212121; --zero-footer-bg: #181818; --zero-header-height: 54px; --zero-link-hover: var(--bs-link-hover-color, #90caf9); --zero-bg: #fafafa; --zero-text: #222; --zero-card-bg: #fff; } /* 2. Тёмная тема через prefers-color-scheme */ @media (prefers-color-scheme: dark) { :root { --zero-header-bg: #181818; --zero-footer-bg: #181818; --zero-bg: #181818; --zero-text: #f6f6f6; --zero-card-bg: #232323; --zero-link-hover: #90caf9; } } /* 3. Переключение темы пользователем (data-theme на ) */ html[data-theme="light"] { --zero-header-bg: #212121 !important; --zero-footer-bg: #181818 !important; --zero-bg: #fafafa !important; --zero-text: #222 !important; --zero-card-bg: #fff !important; --zero-link-hover: var(--bs-link-hover-color, #90caf9) !important; } html[data-theme="dark"] { --zero-header-bg: #181818 !important; --zero-footer-bg: #181818 !important; --zero-bg: #181818 !important; --zero-text: #f6f6f6 !important; --zero-card-bg: #232323 !important; --zero-link-hover: #90caf9 !important; /* Bootstrap core palette */ --bs-body-bg: #181818 !important; --bs-body-color: #f6f6f6 !important; --bs-primary: #90caf9; --bs-primary-rgb: 144,202,249; --bs-secondary: #d1c4e9; --bs-success: #8ae68c; --bs-info: #81d4fa; --bs-warning: #ffecb3; --bs-danger: #ef9a9a; --bs-light: #232323; --bs-dark: #ffffff; --bs-border-color: #444c56; --bs-border-radius: 5px; /* Карточки, формы, алерты, поля */ --bs-card-bg: #232323; --bs-card-color: #f6f6f6; --bs-card-border-color: #333b44; --bs-form-control-bg: #212121; --bs-form-control-color: #f6f6f6; --bs-form-control-border-color: #444c56; --bs-form-select-bg: #212121; --bs-form-select-color: #f6f6f6; --bs-form-select-border-color: #444c56; --bs-form-switch-bg: #333b44; --bs-btn-bg: #424242; --bs-btn-color: #f6f6f6; --bs-btn-border-color: #424242; --bs-btn-hover-bg: #616161; --bs-btn-hover-border-color: #616161; --bs-btn-active-bg: #757575; --bs-btn-active-border-color: #757575; --bs-btn-disabled-bg: #333b44; --bs-btn-disabled-color: #888888; --bs-btn-disabled-border-color: #333b44; --bs-alert-bg: #232323; --bs-alert-color: #fde4e4; --bs-alert-border-color: #bb5050; --bs-link-color: #90caf9; --bs-link-hover-color: #b3e5fc; --bs-placeholder-color: #aaa !important; --bs-list-group-action-color: white!important; --bs-secondary-color: #aaa!important; } html[data-theme="dark"] body{ background: #373b3f!important; } /* 4. Применение переменных цветов */ body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; background: var(--zero-bg); color: var(--zero-text); font-family: var(--bs-body-font-family, sans-serif); } .wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px; background: var(--zero-card-bg); flex: 1 0 auto; box-sizing: border-box; width: 100%; } header, footer { color: #fff; } footer.bg-dark { background: var(--zero-footer-bg)!important; } .site-header { background: var(--zero-header-bg); } .site-header-wrap { max-width: 1200px; margin: 0 auto; min-height: var(--zero-header-height); display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 0; position: relative; } /* Брендинг */ .site-branding { display: flex; align-items: center; } .site-branding a { color: #fff; font-size: 1.25em; text-decoration: none; font-weight: bold; padding-right: 38px; white-space: nowrap; line-height: 1; } /* Контролы шапки */ .header-controls { flex: 1 1 0; display: flex; align-items: center; min-width: 0; justify-content: space-between; width: 100%; gap: 32px; } /* Меню (десктоп) */ .header-controls nav ul, .header-controls ul.menu, .header-controls #main-menu { display: flex !important; gap: 12px; align-items: center; list-style: none; margin: 0; padding: 0; } .header-controls nav li { margin: 0; padding: 0; } .header-controls nav a, .header-controls ul.menu a { color: #fff; text-decoration: none; font-size: 1em; padding: 10px 0; display: block; border-radius: var(--bs-border-radius, .375rem); transition: color .13s; } .header-controls nav a:hover, .header-controls ul.menu a:hover { color: var(--zero-link-hover); text-decoration: underline; } /* Поиск — max/min width только своё */ .site-search-form { flex: 1 1 0; display: flex; align-items: center; min-width: 140px; max-width: 310px; margin: 0; margin-left: auto!important; gap: 10px; } .menu-btn, .search-btn, .theme-btn { display: none; background: none !important; border: 2px solid transparent!important; font-size: 1.8em; color: #fff!important; border-radius: var(--bs-border-radius, .375rem); width: 34px; height: 34px; justify-content: center; align-items: center; margin-left: 10px; transition: border-color .13s, background .13s; cursor: pointer; padding: 0; } .menu-btn.active, .search-btn.active, .theme-btn.active { border-color: white!important; } /* Мобильное меню */ #mobile-menu, #mobile-search { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 101; background: #222; box-shadow: 0 4px 12px #0002; animation: fade-in .16s; border-top: 1px solid #181818; } #mobile-menu.open, #mobile-search.open { display: block; } #mobile-menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } #mobile-menu li { border-bottom: 1px solid #181818; } #mobile-menu a { color: #fff; padding: 16px 18px; display: block; font-size: 1.1em; } #mobile-menu a:hover { background: #181818; color: var(--zero-link-hover); } #mobile-search form { margin: 0; padding: 18px 16px; background: #222; display: flex; gap: 10px; } .footer-copyright { text-align: center; padding: 22px 0 16px; font-size: 1em; letter-spacing: 0.03em; flex-shrink: 0; color: #fff; } .main-article { margin-bottom: 32px; } .main-title { margin-bottom: 12px; margin-top: 0; } .main-title-link { color: var(--bs-primary, #4285f4); text-decoration: none; } .main-title-link:hover { text-decoration: underline; } .main-meta { color: #888; font-size: .9em; margin-bottom: 10px; } .pagination { text-align: center; } ul.menu, .menu, .menu-main-menu-container { list-style: none; margin: 0; padding: 0; } .search-btn img.emoji,.theme-icon img.emoji{ width: 22px !important; } @media (max-width: 1199px), (max-width:940px), (max-width:580px) { .wrap, .site-header-wrap { padding: 0 16px; } } @media (max-width: 800px) { .site-header-wrap { min-height: 48px; height: 48px; padding: 0 16px; } .site-branding a { font-size: 1em; padding-right: 9px; } .header-controls { gap: 7px; justify-content: flex-end; } .header-controls nav ul, .header-controls ul.menu, .header-controls #main-menu, .site-search-form { display: none !important; } .menu-btn, .search-btn { display: flex; } } @keyframes fade-in { from { opacity: .7; } to { opacity: 1; } } html[data-theme="dark"] ::placeholder { color: var(--bs-placeholder-color) !important; opacity: 1 !important; } html[data-theme="dark"] :-ms-input-placeholder { /* Edge 12-18 */ color: var(--bs-placeholder-color) !important; } html[data-theme="dark"] ::-ms-input-placeholder { /* IE 10+ */ color: var(--bs-placeholder-color) !important; }