Blank page

/* ===== ОСНОВНЫЕ СТИЛИ ДОКА ===== */ .macos-dock-container { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; padding: 10px 20px; box-sizing: border-box; } /* Фон с эффектом размытия как в macOS */ .dock-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1); z-index: -1; } /* Основной контейнер меню */ .macos-dock { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 10px 0; position: relative; } /* ===== БРЕНД/ЛОГОТИП ===== */ .dock-brand { flex: 0 0 auto; } .brand-link { display: flex; align-items: center; text-decoration: none; color: #333; font-weight: 600; font-size: 18px; transition: all 0.3s ease; padding: 8px 12px; border-radius: 12px; } .brand-link:hover { background: rgba(0, 0, 0, 0.05); transform: translateY(-1px); } .brand-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 10px; color: white; } .brand-name { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; letter-spacing: -0.5px; } /* ===== ОСНОВНЫЕ ЭЛЕМЕНТЫ МЕНЮ ===== */ .dock-items { display: flex; align-items: center; justify-content: center; flex: 1; gap: 2px; } .dock-item { position: relative; margin: 0 4px; } .dock-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; padding: 8px 12px; border-radius: 12px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; } /* Иконки */ .dock-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border-radius: 12px; margin-bottom: 4px; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8); color: #555; } /* Подписи */ .dock-label { font-size: 12px; font-weight: 500; opacity: 0.8; transition: all 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; letter-spacing: -0.2px; } /* ===== ЭФФЕКТЫ ПРИ НАВЕДЕНИИ ===== */ .dock-link:hover { transform: translateY(-2px); } .dock-link:hover .dock-icon { transform: scale(1.15) translateY(-5px); background: rgba(255, 255, 255, 1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 2px 0 rgba(255, 255, 255, 0.8); color: #007AFF; } .dock-link:hover .dock-label { opacity: 1; color: #007AFF; transform: translateY(1px); } /* Эффект активного элемента */ .dock-link.active .dock-icon { background: rgba(0, 122, 255, 0.1); color: #007AFF; border-color: rgba(0, 122, 255, 0.2); } .dock-link.active .dock-label { color: #007AFF; opacity: 1; font-weight: 600; } /* ===== ПРАВАЯ ЧАСТЬ (ДЕЙСТВИЯ) ===== */ .dock-actions { flex: 0 0 auto; } .action-button { display: flex; align-items: center; background: linear-gradient(135deg, #007AFF, #5856D6); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3); } .action-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4); } .action-icon { margin-right: 6px; font-size: 16px; } /* ===== ТЕМНАЯ ТЕМА ===== */ @media (prefers-color-scheme: dark) { .dock-background { background: rgba(40, 40, 40, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .brand-link, .dock-link, .dock-label { color: #f5f5f7; } .dock-icon { background: rgba(60, 60, 60, 0.9); border-color: rgba(255, 255, 255, 0.1); color: #f5f5f7; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .brand-link:hover, .dock-link:hover { background: rgba(255, 255, 255, 0.1); } .dock-link:hover .dock-icon { background: rgba(70, 70, 70, 1); } } /* ===== АДАПТИВНОСТЬ ===== */ /* Планшеты */ @media (max-width: 1024px) { .macos-dock-container { padding: 8px 15px; } .dock-icon { width: 40px; height: 40px; } .dock-label { font-size: 11px; } .brand-name { font-size: 16px; } } /* Мобильные устройства */ @media (max-width: 768px) { .macos-dock { padding: 5px 0; } .brand-name { display: none; } .dock-items { gap: 1px; } .dock-item { margin: 0 2px; } .dock-icon { width: 36px; height: 36px; } .dock-link { padding: 6px 8px; } .dock-label { font-size: 10px; } .action-button span { display: none; } .action-button { padding: 10px; border-radius: 10px; } .content-spacer { height: 70px !important; } } /* Очень маленькие экраны */ @media (max-width: 480px) { .macos-dock-container { padding: 5px 10px; } .dock-items { gap: 0; } .dock-item { margin: 0 1px; } .dock-icon { width: 32px; height: 32px; } .dock-link { padding: 4px 6px; } .content-spacer { height: 60px !important; } } /* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ ===== */ @keyframes dockSlideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } .macos-dock-container { animation: dockSlideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* ===== ЭФФЕКТ ПРИ ПРОКРУТКЕ ===== */ .macos-dock-container.scrolled { padding: 5px 20px; } .macos-dock-container.scrolled .dock-background { backdrop-filter: blur(30px) saturate(200%); background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 40px rgba(0, 0, 0, 0.1); } .macos-dock-container.scrolled .dock-icon { width: 40px; height: 40px; } /* ===== ПРОБЕЛ ДЛЯ КОНТЕНТА ===== */ .content-spacer { width: 100%; pointer-events: none; }

smotrin.ru - @ViewData["Title"]

@RenderBody()

@await RenderSectionAsync("Scripts", required: false)