/* ============================================================
ТЁМНАЯ ТЕМА Diamond Gemini — «Графит + Золото»
(премиальная стилистика в духе https://toporkoff.su/)
Включается атрибутом (файл подключается
в App.razor, когда в «Основных настройках» выбрана тёмная тема).
Палитра: глубокий графит + классическое золото #D4AF37.
Типографика: Playfair Display (заголовки) + Inter (текст).
Всё это применяется ТОЛЬКО в тёмной теме — светлая не меняется.
============================================================ */
/* Шрифты подключены через в App.razor. */
/* ---------- 1. Палитра (переопределение переменных) ---------- */
html[data-theme="dark"] {
/* Фон и поверхности — глубокий чёрный с лёгким холодным подтоном (как на BingX) */
--pure-white: #060608; /* базовый фон страницы — почти чёрный */
--cloud-white: #0C0C10; /* фон панелей/карточек */
--mist-white: #111116; /* шапки таблиц, hover */
--pearl-white: #16161C; /* приподнятые поверхности */
/* Текст: белый/платина (глянцевый контраст) */
--text-rich: #F4F4F6; /* основной текст/заголовки — почти белый */
--text-soft: #CCCCD4; /* вторичный текст */
--text-light: #9D9DA6; /* приглушённый текст, подписи */
/* Брендовые акценты — классическое золото */
--gold: #D4AF37;
--gold-deep: #B8962E;
--gold-soft: #E6C75E;
--beige: #1F1C14;
/* Служебные цвета тёмной темы */
--dg-bg: #050507;
--dg-bg-raised: #101015; /* карточки */
--dg-bg-input: #0A0A0E; /* поля ввода */
--dg-border: #1F1F28; /* границы */
--dg-border-soft: #16161E;
--dg-hover: #1A1A22;
--dg-accent: #D4AF37; /* золотой акцент */
--dg-accent-strong: #D4AF37;
--dg-accent-soft: #E6C75E;
/* Семантические цвета в тёмной версии */
--dg-green: #8FD69E;
--dg-green-bg: #0E1810;
--dg-green-border: #22382A;
--dg-red: #E89990;
--dg-red-bg: #200E0F;
--dg-red-border: #3C1E1F;
--dg-amber: #D4AF37;
--dg-amber-bg: #1E1910;
--dg-amber-border: #38301E;
color-scheme: dark;
}
/* ---------- 2. База ---------- */
html[data-theme="dark"] {
background-color: var(--dg-bg);
}
/* Глубокий чёрный фон с глянцевым золотистым сиянием сверху (в стиле BingX) */
html[data-theme="dark"] body {
background:
radial-gradient(1400px 700px at 50% -160px, rgba(212, 175, 55, 0.09), transparent 60%),
linear-gradient(180deg, #0B0B10 0%, #060609 45%, #040405 100%);
color: var(--text-rich);
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
html[data-theme="dark"] ::selection {
background: rgba(212, 175, 55, 0.45);
color: #131313;
}
/* Тёмные скроллбары (WebKit/Blink) */
html[data-theme="dark"] ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--dg-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #2A2A32;
border-radius: 6px;
border: 2px solid var(--dg-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #383842;
}
/* ---------- 2а. Типографика (только в тёмной теме) ----------
Текст — Inter, заголовки — Playfair Display. */
html[data-theme="dark"] * {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-title-small,
html[data-theme="dark"] .featured-title,
html[data-theme="dark"] .monocle-main-title,
html[data-theme="dark"] .monocle-small-title,
html[data-theme="dark"] .news-title,
html[data-theme="dark"] .gallery-title,
html[data-theme="dark"] .dog-title,
html[data-theme="dark"] .litter-title,
html[data-theme="dark"] .litter-puppies-title,
html[data-theme="dark"] .litter-puppy-name,
html[data-theme="dark"] .puppies-title,
html[data-theme="dark"] .dogs-title,
html[data-theme="dark"] .knowledge-title,
html[data-theme="dark"] .knowledge-card-title,
html[data-theme="dark"] .knowledge-start-title,
html[data-theme="dark"] .about-quote-text,
html[data-theme="dark"] .founder-name,
html[data-theme="dark"] .achievement-title,
html[data-theme="dark"] .stat-number,
html[data-theme="dark"] .contact-value,
html[data-theme="dark"] .contacts-title,
html[data-theme="dark"] .hero-mini-title,
html[data-theme="dark"] .login-title,
html[data-theme="dark"] .adminset-title,
html[data-theme="dark"] .admdog-title,
html[data-theme="dark"] .admlitter-title,
html[data-theme="dark"] .admnews-title,
html[data-theme="dark"] .admlog-title,
html[data-theme="dark"] .contract-modal-title,
html[data-theme="dark"] .puppy-modal-caption-name,
html[data-theme="dark"] .logo-text {
font-family: 'Playfair Display', Georgia, serif !important;
}
/* Аккуратная высота строк для Playfair в заголовках */
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-title-small,
html[data-theme="dark"] .featured-title,
html[data-theme="dark"] .monocle-main-title,
html[data-theme="dark"] .news-title,
html[data-theme="dark"] .knowledge-title,
html[data-theme="dark"] .dog-title,
html[data-theme="dark"] .litter-title,
html[data-theme="dark"] .hero-mini-title,
html[data-theme="dark"] .login-title {
font-weight: 500;
letter-spacing: 0.02em;
}
/* ---------- 3. site.css: каркас, меню, линии, карточки ----------
Структурные линии — сдержанное золото, как на toporkoff.su. */
html[data-theme="dark"] .monocle-line {
background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.35) 50%, transparent 100%);
}
html[data-theme="dark"] .monocle-news-left {
border-right-color: var(--dg-border);
}
html[data-theme="dark"] .monocle-main-news {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .monocle-news-right {
column-rule-color: var(--dg-border);
}
html[data-theme="dark"] .monocle-small-news {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .top-nav {
border-bottom-color: rgba(212, 175, 55, 0.22);
}
html[data-theme="dark"] .site-footer {
border-top-color: rgba(212, 175, 55, 0.22);
}
html[data-theme="dark"] .stats-grid {
border-top-color: rgba(212, 175, 55, 0.18);
border-bottom-color: rgba(212, 175, 55, 0.18);
}
html[data-theme="dark"] .top-nav.sticky,
html[data-theme="dark"] .monocle-menu.sticky {
background: #0B0B10;
border-bottom-color: rgba(212, 175, 55, 0.22);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .mobile-menu {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .mobile-menu-item {
color: var(--text-soft);
}
html[data-theme="dark"] .mobile-menu-item:hover {
color: var(--gold-soft);
}
@media (max-width: 900px) {
html[data-theme="dark"] .mobile-menu {
border-top-color: var(--dg-border);
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .mobile-menu-item {
border-bottom-color: var(--dg-border-soft);
}
}
/* Логотип и меню */
html[data-theme="dark"] .logo-text {
color: var(--gold);
letter-spacing: 0.32em;
}
html[data-theme="dark"] .menu-item {
color: var(--text-soft);
}
html[data-theme="dark"] .menu-item:hover {
color: var(--gold-soft);
}
html[data-theme="dark"] .top-nav-link,
html[data-theme="dark"] .top-nav-btn,
html[data-theme="dark"] .menu-button,
html[data-theme="dark"] .search-link {
color: var(--text-soft);
}
html[data-theme="dark"] .top-nav-link:hover,
html[data-theme="dark"] .top-nav-btn:hover,
html[data-theme="dark"] .menu-button:hover,
html[data-theme="dark"] .search-link:hover {
color: var(--gold-soft);
}
/* Мелкие надписи-ярлыки — золотые акценты в текстах */
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .featured-label,
html[data-theme="dark"] .contacts-label,
html[data-theme="dark"] .contact-label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .hero-mini-subtitle,
html[data-theme="dark"] .hero-left-text,
html[data-theme="dark"] .hero-right-text,
html[data-theme="dark"] .monocle-news-category,
html[data-theme="dark"] .monocle-small-category,
html[data-theme="dark"] .news-type,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .about-quote-author,
html[data-theme="dark"] .founder-role,
html[data-theme="dark"] .knowledge-start-list-title,
html[data-theme="dark"] .litter-puppies-subtitle,
html[data-theme="dark"] .adminset-section-title,
html[data-theme="dark"] .adminset-subtitle,
html[data-theme="dark"] .admdog-subtitle,
html[data-theme="dark"] .admlitter-subtitle,
html[data-theme="dark"] .admnews-subtitle,
html[data-theme="dark"] .admlog-subtitle,
html[data-theme="dark"] .login-subtitle {
color: var(--gold) !important;
}
/* Крупные цифры-показатели — золото */
html[data-theme="dark"] .stat-number {
color: var(--gold) !important;
}
/* «Стеклянные» карточки публичной части — глубокий чёрный с глянцем */
html[data-theme="dark"] .featured-card,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .privacy-card,
html[data-theme="dark"] .achievement-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 38%),
linear-gradient(180deg, #14141A 0%, #0E0E12 100%);
border-color: rgba(255, 255, 255, 0.09);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 20px 40px -30px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .featured-card:hover,
html[data-theme="dark"] .contacts-card:hover,
html[data-theme="dark"] .privacy-card:hover,
html[data-theme="dark"] .achievement-card:hover {
border-color: rgba(212, 175, 55, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 30px 50px -30px rgba(0, 0, 0, 0.8);
}
/* Акцентные ссылки/кнопки-ссылки — золото */
html[data-theme="dark"] .featured-link,
html[data-theme="dark"] .action-button,
html[data-theme="dark"] .knowledge-card-link,
html[data-theme="dark"] .knowledge-start-link {
color: var(--gold-soft);
}
html[data-theme="dark"] .featured-link::after,
html[data-theme="dark"] .action-button::after {
background: var(--gold);
}
html[data-theme="dark"] .featured-link:hover,
html[data-theme="dark"] .action-button:hover,
html[data-theme="dark"] .knowledge-card-link:hover,
html[data-theme="dark"] .knowledge-start-link:hover {
color: var(--gold-soft);
opacity: 1;
}
/* ---------- 4. about.css ---------- */
html[data-theme="dark"] .founder-image {
border-color: var(--dg-border-soft);
}
html[data-theme="dark"] .section-title-small {
border-bottom-color: rgba(212, 175, 55, 0.35);
box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .stat-item:hover .stat-number {
animation: darkGoldGlow 1.5s infinite alternate;
}
@keyframes darkGoldGlow {
from {
text-shadow: 0 0 5px rgba(212, 175, 55, 0.15);
}
to {
text-shadow: 0 0 15px rgba(212, 175, 55, 0.35), 0 0 30px rgba(212, 175, 55, 0.18);
}
}
/* ---------- 5. contacts.css ---------- */
html[data-theme="dark"] .contacts-form-card .form-control {
border-bottom-color: var(--dg-border);
background: transparent;
}
html[data-theme="dark"] .contacts-form-card .form-control:focus {
border-bottom-color: var(--gold);
}
html[data-theme="dark"] .contacts-form-card .form-control::placeholder {
color: var(--text-light);
}
html[data-theme="dark"] .form-submit-btn {
color: var(--text-soft);
border-color: var(--dg-border);
}
html[data-theme="dark"] .form-submit-btn:hover:not(:disabled) {
background: var(--gold);
border-color: var(--gold);
color: #131313;
}
/* ---------- 6. knowledge.css ---------- */
html[data-theme="dark"] .knowledge-card {
border-top-color: var(--dg-border);
}
html[data-theme="dark"] .knowledge-start {
background: var(--dg-bg-raised);
}
/* ---------- 7. news-page.css ---------- */
html[data-theme="dark"] .news-meta {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .news-gallery {
border-top-color: var(--dg-border);
}
html[data-theme="dark"] .news-main-image {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* ---------- 8. privacy.css ---------- */
html[data-theme="dark"] .privacy-section h3 {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* ---------- 9. puppies.css ---------- */
html[data-theme="dark"] .puppy-card-image {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
/* ---------- 10. dogs.css ---------- */
html[data-theme="dark"] .vertical-divider {
background-color: var(--dg-border);
}
html[data-theme="dark"] .column-title {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .dog-card-image,
html[data-theme="dark"] .graduate-card-image {
background: var(--dg-bg-raised);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .no-image {
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .graduates-section {
border-top-color: var(--dg-border);
}
/* ---------- 11. dog.css ---------- */
html[data-theme="dark"] .parents-line {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .column-title {
border-bottom-color: rgba(212, 175, 55, 0.2);
}
html[data-theme="dark"] .litters-toggle,
html[data-theme="dark"] .litter-item {
border-color: var(--dg-border);
color: var(--text-soft);
}
html[data-theme="dark"] .litters-toggle:hover,
html[data-theme="dark"] .litter-item:hover {
background: var(--dg-hover);
border-color: rgba(212, 175, 55, 0.35);
color: var(--gold-soft);
}
html[data-theme="dark"] .no-image-small,
html[data-theme="dark"] .no-photo,
html[data-theme="dark"] .pedigree-no-image {
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .litters-bottom-line {
background-color: var(--dg-border);
}
html[data-theme="dark"] .info-item {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .dog-gallery {
border-top-color: var(--dg-border);
}
html[data-theme="dark"] .dog-photo,
html[data-theme="dark"] .litter-photo {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Родословная (6 колонок) на странице собаки */
html[data-theme="dark"] .pedigree-grid,
html[data-theme="dark"] .pedigree-column {
background: var(--dg-border);
border-color: var(--dg-border);
}
html[data-theme="dark"] .pedigree-cell {
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .pedigree-image {
border-color: var(--dg-border-soft);
}
/* Кнопки формы договора — золото */
html[data-theme="dark"] .btn-primary {
background: var(--gold);
color: #131313;
font-weight: 600;
}
html[data-theme="dark"] .btn-primary:hover {
background: var(--gold-soft);
color: #131313;
}
html[data-theme="dark"] .btn-secondary {
background: var(--dg-bg-raised);
color: var(--text-soft);
border: 1px solid var(--dg-border);
}
html[data-theme="dark"] .btn-secondary:hover {
background: var(--dg-hover);
border-color: rgba(212, 175, 55, 0.35);
color: var(--gold-soft);
}
html[data-theme="dark"] .contract-form .form-control,
html[data-theme="dark"] .contract-form select {
border-color: var(--dg-border);
background-color: var(--dg-bg-input);
color: var(--text-rich);
}
html[data-theme="dark"] .contract-form .form-control:focus {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}
html[data-theme="dark"] .contract-form .form-group.has-error input {
border-color: #e06060;
background-color: var(--dg-red-bg);
}
html[data-theme="dark"] .loader-spinner {
border-color: var(--dg-border-soft);
border-top-color: var(--gold);
}
html[data-theme="dark"] .contract-modal-content {
background: var(--dg-bg-raised);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .contract-modal-close:hover {
color: var(--gold-soft);
}
/* ---------- 12. litter.css ---------- */
html[data-theme="dark"] .parents-line {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .info-item {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .litter-gallery,
html[data-theme="dark"] .litter-puppies {
border-top-color: var(--dg-border);
}
/* Карточка щенка: глубокий чёрный с глянцем + золотые акценты */
html[data-theme="dark"] .litter-puppy-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 32%),
linear-gradient(180deg, #131318 0%, #0E0E12 100%);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.35),
0 0.5rem 1.25rem rgba(0, 0, 0, 0.4),
0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .litter-puppy-card::before {
background: linear-gradient(90deg, #A98A5C 0%, #D4AF37 45%, #E6C75E 55%, #A98A5C 100%);
}
html[data-theme="dark"] .litter-puppy-card:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 0.25rem 0.5rem rgba(0, 0, 0, 0.4),
0 1.25rem 2rem rgba(0, 0, 0, 0.5),
0 2.5rem 5rem rgba(0, 0, 0, 0.6);
border-color: rgba(212, 175, 55, 0.5);
}
html[data-theme="dark"] .litter-puppy-photo {
background: #0C0C11;
}
html[data-theme="dark"] .litter-puppy-body {
background: linear-gradient(180deg, #16161E 0%, #101015 100%);
}
html[data-theme="dark"] .litter-puppy-rule {
background: linear-gradient(90deg, #B8962E, #D4AF37);
}
html[data-theme="dark"] .litter-puppy-dot {
color: var(--gold);
}
html[data-theme="dark"] .litter-puppy-order,
html[data-theme="dark"] .litter-puppy-zoom {
background: rgba(212, 175, 55, 0.9);
color: #131313;
}
html[data-theme="dark"] .litter-puppy-photo-count {
background: rgba(0, 0, 0, 0.55);
}
/* Бейджи статуса щенка */
html[data-theme="dark"] .puppy-status-free {
color: var(--dg-green);
border-color: var(--dg-green-border);
background: var(--dg-green-bg);
}
/* ---------- 13. pedigree.css ---------- */
html[data-theme="dark"] .pedigree-container {
border-color: var(--dg-border);
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .generation-headers {
background: var(--dg-bg-raised);
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .gen-header {
border-right-color: var(--dg-border);
}
html[data-theme="dark"] .pedigrid {
border-color: var(--dg-border);
background: var(--dg-border);
}
html[data-theme="dark"] .gen-col {
background: var(--dg-border);
}
html[data-theme="dark"] .pedigrid-cell {
background: var(--dg-bg-raised);
border-bottom-color: var(--dg-border);
border-right-color: var(--dg-border);
}
html[data-theme="dark"] .cell-image {
border-color: var(--dg-border-soft);
}
html[data-theme="dark"] .no-image {
background: var(--dg-bg-raised);
}
/* ---------- 14. login.css (страница входа) ---------- */
html[data-theme="dark"] .login-page {
background: var(--dg-bg);
}
html[data-theme="dark"] .login-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 38%),
linear-gradient(180deg, #14141A 0%, #0E0E12 100%);
border-color: var(--dg-border);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 10px 40px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .login-input {
border-color: var(--dg-border);
background: var(--dg-bg-input);
color: var(--text-rich);
}
html[data-theme="dark"] .login-input:focus {
border-color: var(--gold);
}
/* ---------- 16. Админ-панель: общие поверхности (все разделы) ---------- */
/* Панели и карточки */
html[data-theme="dark"] .adminset-panel,
html[data-theme="dark"] .admdog-form-panel,
html[data-theme="dark"] .admlitter-form-panel,
html[data-theme="dark"] .admnews-form-panel,
html[data-theme="dark"] .admlog-panel,
html[data-theme="dark"] .admlog-card,
html[data-theme="dark"] .admlitter-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 34%),
linear-gradient(180deg, #121218 0%, #0E0E12 100%);
border-color: var(--dg-border);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 4px 20px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .adminset-section {
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .adminset-section-title {
color: var(--gold-deep, #D4AF37);
border-bottom-color: rgba(212, 175, 55, 0.2);
}
html[data-theme="dark"] .adminset-import-panel,
html[data-theme="dark"] .admdog-import-panel {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
/* Поля ввода и поиск */
html[data-theme="dark"] .adminset-input,
html[data-theme="dark"] .adminset-search,
html[data-theme="dark"] .adminset-inline-input,
html[data-theme="dark"] .admdog-input,
html[data-theme="dark"] .admdog-search,
html[data-theme="dark"] .admdog-textarea,
html[data-theme="dark"] .admlitter-input,
html[data-theme="dark"] .admlitter-input-select,
html[data-theme="dark"] .admlitter-search,
html[data-theme="dark"] .admnews-input,
html[data-theme="dark"] .admnews-input-select,
html[data-theme="dark"] .admnews-search,
html[data-theme="dark"] .admlog-search,
html[data-theme="dark"] .admlog-select {
background-color: var(--dg-bg-input);
border-color: var(--dg-border);
color: var(--text-rich);
}
html[data-theme="dark"] .adminset-input:focus,
html[data-theme="dark"] .adminset-search:focus,
html[data-theme="dark"] .admdog-input:focus,
html[data-theme="dark"] .admdog-search:focus,
html[data-theme="dark"] .admdog-textarea:focus,
html[data-theme="dark"] .admlitter-input:focus,
html[data-theme="dark"] .admlitter-input-select:focus,
html[data-theme="dark"] .admlitter-search:focus,
html[data-theme="dark"] .admnews-input:focus,
html[data-theme="dark"] .admnews-input-select:focus,
html[data-theme="dark"] .admnews-search:focus,
html[data-theme="dark"] .admlog-search:focus,
html[data-theme="dark"] .admlog-select:focus {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}
html[data-theme="dark"] .adminset-checkbox input[type="checkbox"],
html[data-theme="dark"] .admdog-checkbox input[type="checkbox"],
html[data-theme="dark"] .admlitter-checkbox input[type="checkbox"],
html[data-theme="dark"] .admnews-check input[type="checkbox"] {
accent-color: var(--gold-deep, #B8962E);
}
/* Кнопки — золото (как на toporkoff.su: золотой фон + тёмный текст) */
html[data-theme="dark"] .adminset-btn-primary,
html[data-theme="dark"] .admdog-btn-primary,
html[data-theme="dark"] .admlitter-btn-primary,
html[data-theme="dark"] .admlitter-btn-gold,
html[data-theme="dark"] .admnews-btn-primary,
html[data-theme="dark"] .admlog-btn-primary {
color: #131313;
font-weight: 600;
background: linear-gradient(135deg, var(--gold-soft, #E6C75E), var(--gold, #D4AF37) 55%, var(--gold-deep, #B8962E));
border-color: var(--gold-deep, #B8962E);
box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
}
html[data-theme="dark"] .adminset-btn-primary:hover:not(:disabled),
html[data-theme="dark"] .admdog-btn-primary:hover:not(:disabled),
html[data-theme="dark"] .admlitter-btn-primary:hover:not(:disabled),
html[data-theme="dark"] .admlitter-btn-gold:hover:not(:disabled),
html[data-theme="dark"] .admnews-btn-primary:hover:not(:disabled),
html[data-theme="dark"] .admlog-btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #F0D778, #D4AF37 55%, #C09C32);
border-color: #C09C32;
box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4);
transform: translateY(-1px);
}
html[data-theme="dark"] .adminset-btn-ghost,
html[data-theme="dark"] .admdog-btn-ghost,
html[data-theme="dark"] .admlitter-btn-ghost,
html[data-theme="dark"] .admnews-btn-ghost,
html[data-theme="dark"] .admlog-btn-reset {
color: var(--text-soft);
border-color: var(--dg-border);
background: transparent;
}
html[data-theme="dark"] .adminset-btn-ghost:hover,
html[data-theme="dark"] .admdog-btn-ghost:hover,
html[data-theme="dark"] .admlitter-btn-ghost:hover,
html[data-theme="dark"] .admnews-btn-ghost:hover,
html[data-theme="dark"] .admlog-btn-reset:hover {
color: var(--text-rich);
border-color: var(--dg-accent);
background: var(--dg-hover);
}
html[data-theme="dark"] .admlitter-doc-btn {
color: var(--text-soft);
border-color: var(--dg-border);
}
/* Сообщения об успехе/ошибке */
html[data-theme="dark"] .adminset-msg-success,
html[data-theme="dark"] .admdog-msg-success,
html[data-theme="dark"] .admlitter-msg-success,
html[data-theme="dark"] .admnews-msg-success {
background: var(--dg-green-bg);
border-color: var(--dg-green-border);
color: var(--dg-green);
}
html[data-theme="dark"] .adminset-msg-error,
html[data-theme="dark"] .admdog-msg-error,
html[data-theme="dark"] .admlitter-msg-error,
html[data-theme="dark"] .admnews-msg-error,
html[data-theme="dark"] .admlog-msg-error {
background: var(--dg-red-bg);
border-color: var(--dg-red-border);
color: var(--dg-red);
}
html[data-theme="dark"] .login-input::placeholder {
color: #5a6472;
}
html[data-theme="dark"] .login-error {
background: var(--dg-red-bg);
border-color: var(--dg-red-border);
color: var(--dg-red);
}
html[data-theme="dark"] .login-btn {
color: var(--text-soft);
border-color: var(--dg-border);
}
html[data-theme="dark"] .login-btn:hover:not(:disabled) {
background: var(--gold);
border-color: var(--gold);
color: #131313;
font-weight: 600;
}
/* ---------- 15. AdminMenu ---------- */
html[data-theme="dark"] .admin-menu {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
html[data-theme="dark"] .admin-menu-link {
color: var(--text-soft);
}
html[data-theme="dark"] .admin-menu-link:hover {
color: var(--gold-soft);
background: rgba(212, 175, 55, 0.12);
}
html[data-theme="dark"] .admin-menu-link.active {
color: #131313;
font-weight: 600;
background: linear-gradient(135deg, var(--gold-soft, #E6C75E), var(--gold, #D4AF37) 55%, var(--gold-deep, #B8962E));
border-color: var(--gold-deep, #B8962E);
box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}
html[data-theme="dark"] .puppy-status-reserved {
color: var(--dg-amber);
border-color: var(--dg-amber-border);
background: var(--dg-amber-bg);
}
html[data-theme="dark"] .puppy-status-sold {
color: var(--text-light);
border-color: var(--dg-border);
background: var(--dg-bg-raised);
}
/* Модальное окно щенка */
html[data-theme="dark"] .puppy-modal-content {
background: #101015;
box-shadow:
0 0.5rem 1rem rgba(0, 0, 0, 0.5),
0 2rem 5rem rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .puppy-modal-caption {
background: linear-gradient(180deg, #16161E 0%, #101015 100%);
border-top-color: var(--dg-border);
}
html[data-theme="dark"] .puppy-modal-close:hover,
html[data-theme="dark"] .puppy-modal-nav:hover {
background: rgba(212, 175, 55, 0.85);
color: #131313;
}
/* Таблицы админки */
html[data-theme="dark"] .adminset-list-wrap,
html[data-theme="dark"] .admdog-table-container,
html[data-theme="dark"] .admlitter-table-wrap,
html[data-theme="dark"] .admnews-table-wrap,
html[data-theme="dark"] .admlog-table-wrap {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
html[data-theme="dark"] .adminset-table th,
html[data-theme="dark"] .adminset-table td,
html[data-theme="dark"] .admdog-table th,
html[data-theme="dark"] .admdog-table td,
html[data-theme="dark"] .admlitter-table th,
html[data-theme="dark"] .admlitter-table td,
html[data-theme="dark"] .admnews-table th,
html[data-theme="dark"] .admnews-table td,
html[data-theme="dark"] .admlog-table th,
html[data-theme="dark"] .admlog-table td {
border-bottom-color: var(--dg-border);
color: var(--text-rich);
}
html[data-theme="dark"] .adminset-table tbody tr:hover,
html[data-theme="dark"] .admdog-table tbody tr:hover,
html[data-theme="dark"] .admlitter-table tbody tr:hover,
html[data-theme="dark"] .admnews-table tbody tr:hover,
html[data-theme="dark"] .admlog-table tbody tr:hover {
background: rgba(212, 175, 55, 0.08);
}
html[data-theme="dark"] .adminset-table th,
html[data-theme="dark"] .admdog-table th,
html[data-theme="dark"] .admlitter-table th,
html[data-theme="dark"] .admnews-table th,
html[data-theme="dark"] .admlog-table th {
background: var(--dg-bg-raised);
border-bottom-color: var(--dg-border);
color: var(--text-light);
}
/* Бейджи */
html[data-theme="dark"] .admdog-badge,
html[data-theme="dark"] .admlitter-badge,
html[data-theme="dark"] .admnews-badge,
html[data-theme="dark"] .admlog-badge {
border-color: var(--dg-border);
color: var(--text-soft);
}
html[data-theme="dark"] .admlitter-badge-free,
html[data-theme="dark"] .adminset-badge-free {
color: var(--dg-green);
border-color: var(--dg-green-border);
background: var(--dg-green-bg);
}
html[data-theme="dark"] .admlitter-badge-reserved {
color: var(--dg-amber);
border-color: var(--dg-amber-border);
background: var(--dg-amber-bg);
}
html[data-theme="dark"] .admlitter-badge-sold,
html[data-theme="dark"] .adminset-badge-used {
color: var(--text-light);
border-color: var(--dg-border);
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .admnews-badge-featured,
html[data-theme="dark"] .admnews-badge-left,
html[data-theme="dark"] .admnews-badge-right,
html[data-theme="dark"] .admnews-badge-tab {
color: var(--dg-accent-soft);
border-color: var(--dg-border);
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .admlog-badge-view {
color: var(--gold-soft);
background: rgba(212, 175, 55, 0.14);
}
html[data-theme="dark"] .admlog-badge-login {
color: var(--dg-green);
background: var(--dg-green-bg);
}
html[data-theme="dark"] .admlog-badge-error {
color: var(--dg-red);
background: var(--dg-red-bg);
}
/* Модальные окна админки */
html[data-theme="dark"] .admdog-modal-box,
html[data-theme="dark"] .admlitter-modal-box,
html[data-theme="dark"] .admnews-modal-box {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .admdog-modal-backdrop,
html[data-theme="dark"] .admlitter-modal-backdrop,
html[data-theme="dark"] .admnews-modal-backdrop {
background: rgba(5, 8, 12, 0.7);
}
/* Автодополнение в помётах */
html[data-theme="dark"] .admlitter-autocomplete-list {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
html[data-theme="dark"] .admlitter-autocomplete-item:hover {
background: var(--dg-hover);
}
/* ---------- 17. MultiUpload ---------- */
html[data-theme="dark"] .multiupload {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
html[data-theme="dark"] .multiupload-dropzone {
border-color: rgba(212, 175, 55, 0.3);
background: var(--dg-bg-input);
}
html[data-theme="dark"] .multiupload-dropzone:hover {
border-color: var(--gold);
background: var(--dg-hover);
}
html[data-theme="dark"] .multiupload-plus {
color: var(--gold);
}
html[data-theme="dark"] .multiupload-item {
border-color: var(--dg-border);
background: var(--dg-bg-input);
}
html[data-theme="dark"] .multiupload-error {
color: var(--dg-red);
}
/* ---------- 18. TinyMCE (WYSIWYG-редактор) ---------- */
html[data-theme="dark"] .tox-tinymce {
border-color: var(--dg-border) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__overflow,
html[data-theme="dark"] .tox .tox-toolbar__primary,
html[data-theme="dark"] .tox .tox-statusbar {
background: #0C0C11 !important;
border-color: var(--dg-border) !important;
color: var(--text-light) !important;
}
html[data-theme="dark"] .tox .tox-tbtn {
color: var(--text-soft) !important;
}
html[data-theme="dark"] .tox .tox-tbtn:hover,
html[data-theme="dark"] .tox .tox-tbtn--enabled {
background: var(--dg-hover) !important;
color: var(--text-rich) !important;
}
html[data-theme="dark"] .tox .tox-editor-container,
html[data-theme="dark"] .tox .tox-edit-area {
background: var(--dg-bg-input) !important;
}
html[data-theme="dark"] .tox .tox-edit-area iframe {
background: var(--dg-bg-input) !important;
color: var(--text-rich) !important;
}
html[data-theme="dark"] .richtext-editor-target {
color: var(--text-soft);
border-color: var(--dg-border);
}
/* ---------- 19. ReconnectModal и системные элементы ---------- */
html[data-theme="dark"] #components-reconnect-modal {
background-color: var(--dg-bg-raised);
border: 1px solid rgba(212, 175, 55, 0.35);
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] #components-reconnect-modal p {
color: var(--text-rich);
}
html[data-theme="dark"] #components-reconnect-modal button {
background-color: var(--gold);
color: #131313;
font-weight: 600;
}
html[data-theme="dark"] #components-reconnect-modal button:hover {
background-color: var(--gold-soft);
}
html[data-theme="dark"] #blazor-error-ui {
background: #0B0B10;
color: var(--text-rich);
border-bottom: 1px solid #D4AF37;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Кнопка «Reload» в системной ошибке Blazor */
html[data-theme="dark"] #blazor-error-ui .reload {
color: var(--gold-soft);
}
/* ---------- 20. Медиа-модалки (подложки уже тёмные) ---------- */
html[data-theme="dark"] .video-placeholder {
background: #0C0C11;
}
/* Служебные select в админке: тёмный список опций */
html[data-theme="dark"] select.admdog-input,
html[data-theme="dark"] select.admlitter-input-select,
html[data-theme="dark"] select.admnews-input-select,
html[data-theme="dark"] select.admlog-select,
html[data-theme="dark"] select.adminset-input {
color: var(--text-rich);
background-color: var(--dg-bg-input);
}
html[data-theme="dark"] select.admdog-input option,
html[data-theme="dark"] select.admlitter-input-select option,
html[data-theme="dark"] select.admnews-input-select option,
html[data-theme="dark"] select.admlog-select option,
html[data-theme="dark"] select.adminset-input option {
background-color: var(--dg-bg-raised);
color: var(--text-rich);
}
html[data-theme="dark"] .admlog-badge-download {
color: var(--dg-amber);
background: var(--dg-amber-bg);
}
/* ---------- 21. Админка: доработки по конкретным разделам ---------- */
/* Помёты: шапка таблицы (был тёмный градиент поверх белого) */
html[data-theme="dark"] .admlitter-table thead th {
background: linear-gradient(135deg, #16161E, #1E1E26);
color: var(--gold-soft);
border-bottom-color: rgba(212, 175, 55, 0.35);
}
/* Помёты: зебра-строки и редактируемые строки */
html[data-theme="dark"] .admlitter-table tbody td,
html[data-theme="dark"] .admlitter-puppy-table tbody td {
background: var(--dg-bg-raised);
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .admlitter-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .admlitter-puppy-table tbody tr:nth-child(even) td {
background: #0F0F14;
}
html[data-theme="dark"] .admlitter-table tbody tr.admlitter-row-editing td,
html[data-theme="dark"] .admlitter-table tbody tr.admlitter-row-editing:hover td,
html[data-theme="dark"] .admlitter-puppy-table tbody tr.admlitter-puppy-editing td,
html[data-theme="dark"] .admlitter-puppy-table tbody tr.admlitter-puppy-editing:hover td {
background: #191921;
}
/* Помёты: блок владельца, автодополнение, бейджи */
html[data-theme="dark"] .admlitter-owner-block {
border-color: var(--dg-border);
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .admlitter-autocomplete-item.active,
html[data-theme="dark"] .admlitter-autocomplete-item:hover {
background: var(--dg-hover);
color: var(--gold-soft);
}
html[data-theme="dark"] .admlitter-badge {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
color: var(--text-soft);
}
html[data-theme="dark"] .admlitter-badge-gold {
color: var(--gold);
border-color: rgba(212, 175, 55, 0.4);
background: rgba(212, 175, 55, 0.1);
}
html[data-theme="dark"] .admlitter-puppies {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
html[data-theme="dark"] .admlitter-doc-btn {
border-color: var(--dg-border);
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .admlitter-doc-btn:hover {
border-color: rgba(212, 175, 55, 0.4);
color: var(--gold-soft);
}
html[data-theme="dark"] .admlitter-kniga {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
/* Новости: бейджи, зебра-строки, редактируемые строки */
html[data-theme="dark"] .admnews-table tbody td {
background: var(--dg-bg-raised);
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .admnews-table tbody tr:nth-child(even) td {
background: #0F0F14;
}
html[data-theme="dark"] .admnews-table tbody tr.admnews-row-editing td,
html[data-theme="dark"] .admnews-table tbody tr.admnews-row-editing:hover td {
background: #191921 !important;
}
html[data-theme="dark"] .admnews-badge-featured {
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .admnews-badge-left {
background: rgba(212, 175, 55, 0.14);
}
/* Питомцы: бейджи статуса */
html[data-theme="dark"] .admdog-badge-adult {
background: rgba(212, 175, 55, 0.14);
}
html[data-theme="dark"] .admdog-badge-graduate {
background: var(--dg-bg-raised);
}
html[data-theme="dark"] .admdog-badge-puppy {
background: var(--dg-amber-bg);
color: var(--gold);
}
/* ---------- 22. Журнал (AdminLog) ---------- */
html[data-theme="dark"] .admlog-kpi {
background: linear-gradient(145deg, #16161E, #101015);
border-color: var(--dg-border);
}
html[data-theme="dark"] .admlog-kpi-value {
color: var(--gold-soft);
}
html[data-theme="dark"] .admlog-filters {
background: var(--dg-bg-raised);
border-color: var(--dg-border);
}
html[data-theme="dark"] .admlog-table thead th {
background: var(--dg-bg-raised);
color: var(--text-soft);
}
html[data-theme="dark"] .admlog-table tbody td {
background: var(--dg-bg-raised);
border-bottom-color: var(--dg-border);
}
html[data-theme="dark"] .admlog-table tbody tr:nth-child(even) td {
background: #0F0F14;
}
html[data-theme="dark"] .admlog-hbar-track {
background: #17171F;
}
html[data-theme="dark"] .admlog-donut-bg {
stroke: #17171F;
}
html[data-theme="dark"] .admlog-donut-item:hover {
background: var(--dg-hover);
}
html[data-theme="dark"] .admlog-donut-item.active {
background: #191921;
}
html[data-theme="dark"] .admlog-device-robot {
background: var(--dg-bg-raised);
color: var(--gold-soft);
}
/* Графики журнала: золотые заливки */
html[data-theme="dark"] .admlog-hbar-fill,
html[data-theme="dark"] .admlog-bar-fill,
html[data-theme="dark"] .admlog-hour-fill,
html[data-theme="dark"] .admlog-heatmap-cell[style*="#B5926B"] {
background-image: linear-gradient(180deg, #D4AF37, #B8962E) !important;
}
html[data-theme="dark"] .admlog-donut-seg {
stroke: #D4AF37;
}
/* ---------- 23. Тонкая золотая рамка вокруг всех фотографий ----------
Все ![]()
в тёмной теме получают тонкую золотую полоску #D4AF37.
box-sizing: border-box задан глобально в site.css, поэтому рамка
не сдвигает вёрстку.
У фотографий со скруглёнными углами рамку вешаем на контейнер,
который задаёт border-radius + overflow:hidden, а у ![]()
внутри
рамку убираем — тогда золотая окантовка точно повторяет скругление
и не обрезается по углам. */
html[data-theme="dark"] img {
border: 1px solid rgba(212, 175, 55, 0.5);
}
/* Логотипы и декоративные иконки — без рамки */
html[data-theme="dark"] .logo-image,
html[data-theme="dark"] .login-logo,
html[data-theme="dark"] .hero-icon {
border: none;
}
/* Фотографии со скруглёнными углами: рамка на контейнере (повторяет радиус) */
html[data-theme="dark"] .cell-image,
html[data-theme="dark"] .founder-image,
html[data-theme="dark"] .pedigree-image,
html[data-theme="dark"] .dog-photo,
html[data-theme="dark"] .litter-photo,
html[data-theme="dark"] .dog-card-image,
html[data-theme="dark"] .graduate-card-image,
html[data-theme="dark"] .puppy-card-image,
html[data-theme="dark"] .media-item,
html[data-theme="dark"] .featured-gallery .media-item,
html[data-theme="dark"] .gallery-item,
html[data-theme="dark"] .litter-image {
border: 1px solid rgba(212, 175, 55, 0.5);
}
html[data-theme="dark"] .cell-image img,
html[data-theme="dark"] .founder-image img,
html[data-theme="dark"] .dog-photo img,
html[data-theme="dark"] .litter-photo img,
html[data-theme="dark"] .dog-card-image img,
html[data-theme="dark"] .graduate-card-image img,
html[data-theme="dark"] .puppy-card-image img,
html[data-theme="dark"] .media-item img,
html[data-theme="dark"] .featured-gallery .media-item img,
html[data-theme="dark"] .gallery-item img,
html[data-theme="dark"] .litter-image img {
border: none;
}
/* Заглушки «нет фото» — тонкий золотой пунктир, чтобы пустые ячейки
не выбивались из общего ряда с золотыми рамками. */
html[data-theme="dark"] .no-image,
html[data-theme="dark"] .no-image-small,
html[data-theme="dark"] .no-photo,
html[data-theme="dark"] .pedigree-no-image {
border: 1px dashed rgba(212, 175, 55, 0.35);
}
/* При наведении на интерактивное фото рамка становится ярче */
html[data-theme="dark"] .gallery-item:hover,
html[data-theme="dark"] .media-item:hover,
html[data-theme="dark"] .featured-gallery .media-item:hover,
html[data-theme="dark"] .dog-card:hover .dog-card-image,
html[data-theme="dark"] .graduate-card:hover .graduate-card-image,
html[data-theme="dark"] .puppy-card:hover .puppy-card-image,
html[data-theme="dark"] .litter-puppy-photo.is-clickable:hover img {
border-color: rgba(212, 175, 55, 0.9);
}
/* ---------- 24. Политика конфиденциальности: белый текст ----------
Весь текст на странице /privacy в тёмной теме — чистый белый
(заголовки, абзацы, списки, дата, ссылки). */
html[data-theme="dark"] .privacy-date,
html[data-theme="dark"] .privacy-section h3,
html[data-theme="dark"] .privacy-section p,
html[data-theme="dark"] .privacy-section li,
html[data-theme="dark"] .privacy-section strong {
color: #FFFFFF;
}
html[data-theme="dark"] .privacy-section a {
color: #FFFFFF;
border-bottom-color: rgba(212, 175, 55, 0.55);
}
html[data-theme="dark"] .privacy-section a:hover {
color: var(--gold-soft);
opacity: 1;
}
/* ---------- 25. Админка: Помёты (AdminLitters) и Новости (AdminNews) ----------
Страницы несут собственные inline-