/* 💎 PREMIUM SIDEBAR - ARMANI EMPORIO STYLE 20+ ЛЕТ ОПЫТА */ /* Основной контейнер sidebar - Премиум темно-синий */ /* ПОВЫШЕННАЯ СПЕЦИФИЧНОСТЬ для перебития темной темы */ [data-theme="dark"] #sidebar, #sidebar { /* Премиум стилизация поверх базового layout */ background: linear-gradient(180deg, #0b1220, #0e1628) !important; border-right: 1px solid rgba(59, 130, 246, 0.25) !important; /* НЕ ДУБЛИРУЕМ position! fixed уже задан выше */ padding: 8px; border-radius: 0 16px 16px 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 8px 0 24px rgba(0, 0, 0, 0.4); } /* ВРЕМЕННО ОТКЛЮЧЕН: Большой элегантный бортик как у Armani */ /* #sidebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0 16px 16px 0; padding: 3px; background: linear-gradient(135deg, #1e3a8a, #3b82f6 60%, #22d3ee); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; -webkit-mask-composite: xor; pointer-events: none; opacity: 0.6; width: 100%; height: 100%; } */ /* Внутренняя часть с премиум фоном - ПОВЫШЕННАЯ СПЕЦИФИЧНОСТЬ */ [data-theme="dark"] #sidebar .nav-menu, #sidebar .nav-menu { position: relative !important; background: linear-gradient(180deg, #0b1220, #0e1628) !important; border-radius: 0 12px 12px 0 !important; padding: 20px 0 !important; margin: 0 !important; list-style: none !important; min-height: calc(100vh - 100px) !important; } /* Навигационные ссылки - Элегантные кнопки Armani - ПОВЫШЕННАЯ СПЕЦИФИЧНОСТЬ */ [data-theme="dark"] #sidebar .nav-menu .nav-link, #sidebar .nav-menu .nav-link, .nav-menu .nav-link { display: flex !important; align-items: center !important; padding: 16px 24px !important; margin: 6px 16px !important; color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; border-radius: 12px !important; border: 1px solid transparent !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; /* Тонкий внутренний бордер */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)) !important; backdrop-filter: blur(4px) !important; } /* Премиум тень для кнопок */ .nav-menu .nav-link:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.03)); opacity: 0; transition: opacity 0.3s ease; border-radius: 11px; } /* Hover эффект - Элегантное свечение - ПОВЫШЕННАЯ СПЕЦИФИЧНОСТЬ */ [data-theme="dark"] #sidebar .nav-menu .nav-link:hover, #sidebar .nav-menu .nav-link:hover, .nav-menu .nav-link:hover { color: #ffffff !important; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.08)) !important; border-color: rgba(59, 130, 246, 0.3) !important; transform: translateX(4px) !important; box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .nav-menu .nav-link:hover:before { opacity: 1; } /* Активная ссылка - Премиум синий Armani - ПОВЫШЕННАЯ СПЕЦИФИЧНОСТЬ */ [data-theme="dark"] #sidebar .nav-menu .nav-link.active, #sidebar .nav-menu .nav-link.active, .nav-menu .nav-link.active { color: #ffffff !important; background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important; border-color: rgba(59, 130, 246, 0.4) !important; font-weight: 600 !important; transform: translateX(6px) !important; box-shadow: 0 12px 24px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } .nav-menu .nav-link.active:before { opacity: 1; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); } /* Иконки в меню */ .nav-menu .nav-link { gap: 12px; /* Расстояние между иконкой и текстом */ } /* Премиум sidebar - ПРИНУДИТЕЛЬНОЕ ПРИМЕНЕНИЕ СТИЛЕЙ - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */ html[data-theme="dark"] body #sidebar, [data-theme="dark"] #sidebar, body #sidebar, #sidebar { display: block !important; visibility: visible !important; opacity: 1 !important; /* ПРИНУДИТЕЛЬНО применяем премиум стили */ background: linear-gradient(180deg, #0b1220, #0e1628) !important; border-right: 1px solid rgba(59, 130, 246, 0.25) !important; padding: 8px !important; border-radius: 0 16px 16px 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 8px 0 24px rgba(0, 0, 0, 0.4) !important; } /* Скроллбар стилизация для премиум вида */ #sidebar::-webkit-scrollbar { width: 6px; } #sidebar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 3px; } #sidebar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(99, 102, 241, 0.4)); border-radius: 3px; } #sidebar::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(59, 130, 246, 0.8), rgba(99, 102, 241, 0.6)); } /* Мобильная кнопка меню (если нужна) */ .mobile-menu-toggle { display: none; position: fixed; top: calc(var(--layout-header-height) + 10px); left: 20px; z-index: var(--z-dropdown); background: linear-gradient(135deg, #1e3a8a, #3b82f6); color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transition: all 0.3s ease; } .mobile-menu-toggle:hover { background: linear-gradient(135deg, #3b82f6, #1e3a8a); transform: scale(1.05); } @media (max-width: 1024px) { .mobile-menu-toggle { display: block; } } /* Премиум анимации загрузки */ .nav-menu { animation: slideInFromLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }