/* --- Variables --- */ :root { /* Light theme variables */ --bg-color: #f6f8fa; /* Page background */ --container-bg: #ffffff; /* Card background */ --text-color: #24292e; /* Primary text */ --heading-color: #0366d6; /* Primary headings, links */ --border-color: #e1e4e8; /* Borders */ --code-bg: #f6f8fa; /* Code block background */ --shadow-color: rgba(27, 31, 35, 0.08); /* Чуть более выраженная тень */ --note-bg: #fffbdd; --note-border: #e2b001; --note-text: #5c4b00; --success-color: #28a176; /* Green for success/highlights */ --warning-color: #feda00; /* Yellow for warnings */ /* New variables for menu styling */ --menu-item-hover-bg: #e6e9ed; /* Фон при наведении на меню */ --menu-item-hover-text: var(--text-color); /* Цвет текста при наведении */ --menu-item-active-bg: #0366d6; /* Фон активной ссылки */ --menu-item-active-text: #ffffff; /* Цвет текста активной ссылки */ --overlay-bg: rgba(0, 0, 0, 0.5); /* Фон для оверлея при открытом меню */ } /* --- Dark Theme Variables (Defined within the dark theme selector) --- */ [data-theme='dark'] { --bg-color: #22272e; /* Page background */ --container-bg: #2d333b; /* Card background */ --text-color: #adbac7; /* Primary text */ --heading-color: #539bf5; /* Primary headings, links */ --border-color: #444c56; /* Borders */ --code-bg: #22272e; /* Code block background */ --shadow-color: rgba(0, 0, 0, 0.4); /* Чуть более выраженная тень */ --note-bg: #3b300a; --note-border: #e2b001; --note-text: #e2b001; /* New variables for menu styling */ --menu-item-hover-bg: #3a3a3a; /* Фон при наведении на меню в темной теме */ --menu-item-hover-text: var(--text-color); --menu-item-active-bg: #539bf5; /* Активная ссылка в темной теме (оттенок heading-color-dark) */ --menu-item-active-text: #ffffff; --overlay-bg: rgba(0, 0, 0, 0.7); } /* --- Base Styles --- */ body { font-family: 'Inter', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: var(--bg-color); /* Используем общие переменные */ color: var(--text-color); /* Используем общие переменные */ display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s, color 0.3s; } /* --- Dark Theme Specific Styles (Now applies to elements based on the data-theme attribute on or ) --- */ /* Убраны дублирующиеся стили для контейнера, заголовков, ссылок и т.д., так как они теперь корректно наследуют из общих переменных, которые меняются в зависимости от [data-theme='dark'] */ [data-theme='dark'] .container { box-shadow: 0 4px 12px var(--shadow-color); border-color: var(--border-color); } [data-theme='dark'] h2 { border-color: var(--border-color); } [data-theme='dark'] a:hover { color: #79c0ff; /* Lighter blue for hover in dark theme */ } [data-theme='dark'] .gh-code-block { border-color: var(--border-color); } [data-theme='dark'] .copy-button { background-color: transparent; /* Убедимся, что фон прозрачный */ border: none; } [data-theme='dark'] .copy-button:hover { background-color: transparent; /* Убедимся, что фон прозрачный */ } [data-theme='dark'] details { border-color: var(--border-color); } [data-theme='dark'] details[open] summary { border-color: var(--border-color); } [data-theme='dark'] summary:hover { color: #79c0ff; } [data-theme='dark'] li::before { color: var(--success-color); /* Этот цвет, вероятно, должен быть постоянным */ } /* !!! ИСПРАВЛЕНИЕ ДЛЯ ПОЛЕЙ ЗНАЧЕНИЙ (ВКЛЮЧАЯ ПОРТЫ) !!! */ [data-theme='dark'] input[type="text"], [data-theme='dark'] input[type="number"], [data-theme='dark'] input[type="url"], [data-theme='dark'] textarea { border: 1px solid var(--border-color); /* Внимание: вложенность &:focus работает только с препроцессорами типа SASS/LESS. Для чистого CSS нужно развернуть: */ /* &:focus { outline: none; border-color: var(--heading-color); box-shadow: 0 0 0 2px rgba(83, 155, 245, 0.3); } */ } /* Развернутая версия для чистого CSS */ [data-theme='dark'] input[type="text"]:focus, [data-theme='dark'] input[type="number"]:focus, [data-theme='dark'] input[type="url"]:focus, [data-theme='dark'] textarea:focus { outline: none; border-color: var(--heading-color); box-shadow: 0 0 0 2px rgba(83, 155, 245, 0.3); } /* --- Header Styles --- */ .header { background-color: var(--container-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-bottom: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 6px var(--shadow-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ position: sticky; top: 0; z-index: 1000; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; } .header-left { display: flex; align-items: center; } .header-left img { max-height: 70px; margin-right: 15px; } .site-title { margin: 0; font-size: 1.5em; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: color 0.3s; } /* Desktop Menu (Visible by default, hidden on smaller screens) */ .menu { display: flex; list-style: none; padding: 0; margin: 0; } .menu a { color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ text-decoration: none; padding: 8px 12px; margin: 0 5px; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.3s ease; border-radius: 6px; } .menu a:hover { background-color: var(--menu-item-hover-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--menu-item-hover-text); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ text-decoration: none; } .menu a.active { background-color: var(--menu-item-active-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--menu-item-active-text); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } .theme-switcher { background: none; border: none; font-size: 1.2em; cursor: pointer; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: color 0.3s; outline: none; margin-left: 15px; } .theme-switcher:hover { color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } /* Mobile Menu Toggle Button (Hidden by default, visible on smaller screens) */ .menu-toggle { display: none; background: none; border: none; font-size: 1.8em; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ cursor: pointer; padding: 5px; margin-right: 15px; transition: color 0.3s ease; z-index: 1001; } .menu-toggle:hover { color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } /* Mobile Menu (Off-canvas sidebar) */ .mobile-menu { position: fixed; top: 0; left: -280px; width: 250px; height: 100%; background-color: var(--container-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); padding-top: 80px; transition: left 0.3s ease-in-out; z-index: 999; display: flex; flex-direction: column; } .mobile-menu.is-open { left: 0; } .mobile-menu a { display: block; padding: 15px 20px; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: background-color 0.3s ease, color 0.3s ease; } .mobile-menu a:hover { background-color: var(--menu-item-hover-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--menu-item-hover-text); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } .mobile-menu a.active { background-color: var(--menu-item-active-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--menu-item-active-text); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } /* Overlay when mobile menu is open */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ z-index: 998; } .overlay.is-open { display: block; } /* Prevent body scroll when mobile menu is open */ body.no-scroll { overflow: hidden; } /* --- Main Content Layout --- */ .main-content { flex-grow: 1; width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 20px; box-sizing: border-box; } .container { max-width: 960px; width: 100%; margin: 40px auto; background: var(--container-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding: 40px; border-radius: 10px; box-shadow: 0 4px 12px var(--shadow-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; } /* --- General Typography & Links --- */ h1, h2, h3 { color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: color 0.3s; } a { color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ text-decoration: none; transition: color 0.3s; } a:hover { text-decoration: underline; } /* --- Code Block Styling (gh-code-block) --- */ .gh-code-block { background-color: var(--code-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-radius: 6px; position: relative; padding: 15px 20px; padding-right: 45px; margin-bottom: 15px; transition: background-color 0.3s, border-color 0.3s; overflow: hidden; } .gh-code-block pre { margin: 0; padding: 0; font-size: 0.95em; white-space: pre-wrap; overflow-wrap: break-word; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } .gh-code-block code { color: inherit; font-family: 'Roboto Mono', monospace; word-break: break-all; } .gh-code-block .copy-button { position: absolute; top: 5px; right: 5px; background-color: transparent; border: none; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: color 0.2s, background-color 0.2s; z-index: 1; opacity: 0.7; } .gh-code-block .copy-button:hover { background-color: rgba(0, 0, 0, 0.05); color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ opacity: 1; } [data-theme='dark'] .gh-code-block .copy-button:hover { background-color: rgba(255, 255, 255, 0.05); } /* --- Details/Accordion Styling --- */ details { border: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ background-color: var(--container-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-radius: 8px; margin-bottom: 20px; overflow: hidden; transition: background 0.3s, border-color 0.3s; } details[open] summary { border-bottom: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } summary { color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding: 15px 20px; cursor: pointer; outline: none; display: block; position: relative; transition: color 0.3s; } summary::-webkit-details-marker { display: none; } summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease; } details[open] summary::after { transform: translateY(-50%) rotate(180deg); } .details-content { padding: 20px; border-top: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: border-color 0.3s; } /* --- List Styling --- */ li::before { content: "•"; color: var(--success-color); /* Этот цвет, вероятно, должен быть постоянным */ display: inline-block; width: 1em; margin-left: -1em; } li { list-style: none; padding-left: 1em; } /* --- Note Block Styling --- */ .note { background-color: var(--note-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-left: 6px solid var(--note-border); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--note-text); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding: 15px 20px; border-radius: 6px; margin-top: 20px; margin-bottom: 20px; font-size: 0.9em; transition: background-color 0.3s, border-color 0.3s, color 0.3s; } /* --- DNS Type Section Separator --- */ .dns-type-section { border-top: 1px dashed var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding-top: 30px; margin-top: 30px; transition: border-color 0.3s; } /* --- DNS Info Block Styling --- */ .dns-info-block { background-color: var(--container-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-radius: 10px; padding: 25px; margin-bottom: 25px; box-shadow: 0 4px 12px var(--shadow-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: all 0.3s ease; position: relative; overflow: hidden; } .dns-info-block h3 { color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-bottom: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding-bottom: 12px; margin-bottom: 20px; font-size: 1.3em; transition: color 0.3s, border-color 0.3s; } .dns-info-block p { margin: 10px 0; display: flex; align-items: flex-start; flex-wrap: wrap; min-width: 0; } .dns-info-block .label { font-weight: 600; margin-right: 10px; min-width: 120px; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding-top: 8px; overflow-wrap: break-word; } .dns-info-block .value-wrapper { flex-grow: 1; position: relative; max-width: calc(100% - 130px); min-width: 0; } .dns-info-block .value { display: block; background-color: var(--code-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border: 1px solid var(--border-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ border-radius: 6px; padding: 8px 12px; padding-right: 40px; font-family: 'Roboto Mono', monospace; font-size: 0.95em; overflow-wrap: break-word; word-break: break-all; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: background-color 0.3s, border-color 0.3s, color 0.3s; white-space: normal; width: 100%; box-sizing: border-box; } .dns-info-block .value-wrapper .copy-button { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background-color: transparent; border: none; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.85em; transition: color 0.2s, background-color 0.2s; z-index: 1; opacity: 0.7; } .dns-info-block .value-wrapper .copy-button:hover { background-color: rgba(0, 0, 0, 0.05); color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ opacity: 1; } [data-theme='dark'] .dns-info-block .value-wrapper .copy-button:hover { background-color: rgba(255, 255, 255, 0.05); } /* --- Highlight Success Paragraph --- */ .highlight-success { font-weight: 600; color: var(--success-color); } /* --- Responsive Adjustments --- */ @media (max-width: 768px) { .header { padding: 10px 15px; } .header-left img { max-height: 50px; margin-right: 10px; } .site-title { display: none; } .theme-switcher { font-size: 1em; margin-left: 0; } .menu { display: none; } .menu-toggle { display: block; order: -1; margin-left: 0; margin-right: 15px; } .header-left { justify-content: flex-start; flex-grow: 1; } .header-right { order: 1; margin-left: auto; } .main-content { padding: 10px; } .container { margin: 20px auto; padding: 25px; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } .gh-code-block { padding: 10px 15px; padding-right: 40px; font-size: 0.85em; overflow: hidden; } .gh-code-block pre { overflow-wrap: break-word; } .gh-code-block code { word-break: break-all; } .gh-code-block .copy-button { top: 5px; right: 5px; padding: 3px 6px; font-size: 0.7em; } summary { padding: 10px 15px; } .details-content { padding: 10px 15px; } .dns-info-block { padding: 15px; overflow: hidden; } .dns-info-block p { font-size: 1em; flex-direction: column; align-items: flex-start; } .dns-info-block .label { margin-right: 0; margin-bottom: 5px; min-width: unset; padding-top: 0; overflow-wrap: break-word; } .dns-info-block .value-wrapper { width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 10px; min-width: 0; } .dns-info-block .value { width: 100%; padding-right: 40px; overflow-wrap: break-word; word-break: break-all; box-sizing: border-box; } .dns-info-block .value-wrapper .copy-button { right: 5px; font-size: 0.75em; } /* Адаптивность для футера на мобильных */ .footer .container { padding: 15px; /* Уменьшаем паддинги на мобильных */ } } /* --- Styles for Contacts Page (moved from inline style) --- */ .contact-content { padding: 40px 0; text-align: center; } .contact-content h2 { margin-bottom: 30px; color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: color 0.3s; } .contact-content p { font-size: 1.1em; margin-bottom: 15px; color: var(--text-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ transition: color 0.3s; } .contact-content .contact-link { display: inline-block; margin: 10px 0; padding: 10px 20px; border-radius: 5px; background-color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--menu-item-active-text); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .contact-content .contact-link:hover { background-color: var(--menu-item-hover-bg); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ color: var(--heading-color); /* ИСПОЛЬЗУЕМ ОБЩУЮ ПЕРЕМЕННУЮ */ } .contact-content .contact-link i { margin-right: 8px; } --- /* --- Footer Styles --- */ .footer { /* Добавляем класс к футеру */ margin-top: auto; /* Прижимает футер к низу страницы, если контента мало */ background-color: var(--container-bg); /* Используем фоновый цвет контейнера */ border-top: 1px solid var(--border-color); /* Граница сверху */ padding: 20px 0; /* Отступы сверху/снизу, по бокам не нужны, так как есть контейнер */ text-align: center; color: var(--text-color); /* Цвет текста футера */ transition: background-color 0.3s, border-color 0.3s, color 0.3s; } .footer p { margin: 5px 0; /* Небольшие отступы между параграфами */ color: var(--text-color); /* Убедимся, что текст параграфа наследует цвет темы */ } .footer .container { max-width: 960px; /* Используем тот же max-width, что и для основного контейнера */ margin: 0 auto; /* Центрируем контейнер */ padding: 20px; /* Базовый паддинг для футера */ box-sizing: border-box; /* Важно для корректного расчёта ширины */ } /* Стили для иконки сердца */ .footer .fas.fa-heart { color: #e03232; /* Жестко заданный красный цвет, не меняется с темой */ }