/********************************************************* * SKYDOM THEME (Bootstrap-safe) * Применяй к странице: * Если нужен фиксированный хедер:

..., затем

**********************************************************/ /* ===== THEME VARS ===== */ :root{ --sk-bg:#000; --sk-fg:#fff; --sk-soft:#bfc7cc; --sk-accent:#00ffe1; --sk-accent-2:#00eaff; --sk-accent-3:#00f0ff; --sk-border:rgba(0,255,225,0.22); --sk-border-soft:rgba(0,255,225,0.12); --sk-card:#0b0f12; --sk-glass:rgba(0,0,0,0.6); --sk-glow:0 0 22px rgba(0,255,225,.25); } /* ===== PAGE BACKGROUND / BASE ===== */ .skydom{ color:var(--sk-fg); background: url('/assets/images/background.png') no-repeat center center fixed; background-size: cover; background-color: var(--sk-bg); } /* Ничего в Bootstrap не переопределяем — только наш неймспейс */ .skydom *{ box-sizing:border-box; } /* ===== TYPOGRAPHY (scoped) ===== */ .skydom h1,.skydom h2,.skydom h3{ font-weight:700; letter-spacing:.5px; margin-bottom:1rem; text-shadow:0 0 6px var(--sk-accent); } .skydom h1{ color:var(--sk-accent); font-size:clamp(28px,3vw,44px); } .skydom h2{ color:var(--sk-accent-3); font-size:clamp(22px,2.4vw,36px); } .skydom h3{ color:var(--sk-accent-2); font-size:clamp(18px,1.8vw,28px); } .skydom p{ color:var(--sk-soft); line-height:1.6; } .skydom a{ color:var(--sk-accent); text-decoration:none; } .skydom a:hover{ color:#00ccbb; } /* ===== HEADER (fixed, не трогаем .navbar) ===== */ .sk-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--sk-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(0,0,0,.45); padding: 16px 28px; } #sk-header-spacer{ height: var(--sk-header-h, 88px); } /* ставим сразу после header */ /* Автовычисление высоты хедера — добавь один раз этот инлайн-скрипт на странице: */ /* ===== BUTTONS (свои классы, bootstrap-safe) ===== */ .sk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border:0; cursor:pointer; color:#001112; background:var(--sk-accent); padding:10px 20px; border-radius:999px; transition:transform .15s, box-shadow .25s, background .25s; } .sk-btn:hover{ background:#00d9c6; box-shadow:var(--sk-glow); } .sk-btn:active{ transform:scale(.98); } .sk-btn--outline{ background:transparent; color:var(--sk-accent); border:1px solid var(--sk-accent); } .sk-btn--danger{ background:linear-gradient(135deg,#8b0000,#b30000); color:#fff; } .sk-btn--sm{ padding:6px 12px; font-size:.925rem; } /* ===== CARDS (наши, не Bootstrap .card) ===== */ .sk-card{ background: linear-gradient(180deg, rgba(20,24,28,.92), rgba(10,12,14,.92)); border:1px solid var(--sk-border-soft); border-radius:16px; padding:20px; color:var(--sk-fg); box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .sk-card:hover{ transform: translateY(-6px); border-color:var(--sk-border); box-shadow: 0 0 22px rgba(0,255,225,.35); } .sk-card__title{ color:var(--sk-accent); font-weight:700; margin-bottom:.75rem; } /* Грид карточек — не трогаем .row/.col */ .sk-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ===== SPORT PAGE блоки ===== */ .sk-sport{ display:grid; gap:28px; margin-top:24px; grid-template-columns: 2fr 1fr; } @media (max-width:900px){ .sk-sport{ grid-template-columns:1fr; } } .sk-sport__side .sk-card{ box-shadow: 0 0 12px rgba(0,255,225,.18); } /* ===== FORMS (свои классы, не .form-control) ===== */ .sk-form{ background: rgba(18,22,26,.88); border:1px solid var(--sk-border); border-radius:12px; padding:20px; box-shadow: 0 0 18px rgba(0,255,225,.12); color:var(--sk-fg); } .sk-input, .sk-select, .sk-textarea{ width:100%; display:block; background:#0d1419; color:#e9ffff; border:1px solid var(--sk-border); border-radius:10px; padding:12px 14px; outline:none; transition: box-shadow .2s, border-color .2s, background .2s; } .sk-input:focus, .sk-select:focus, .sk-textarea:focus{ border-color: var(--sk-accent); box-shadow: 0 0 0 3px rgba(0,255,225,.18); } .sk-label{ display:block; font-weight:700; color:#9ff; margin-bottom:8px; text-shadow:0 0 4px rgba(0,255,225,.5); } .sk-hint{ color:#96a9af; font-size:.92rem; } .sk-form--inline{ display:flex; gap:12px; align-items:center; } .sk-form--inline .sk-label{ margin:0; min-width:40%; } /* Итоговые/расчётные поля */ .sk-result{ background:#001f25; color:#00ffff; font-weight:800; text-align:center; border:2px solid #00ffff; box-shadow: 0 0 14px rgba(0,255,255,.35); } .sk-calc{ pointer-events:none; user-select:none; caret-color:transparent; } /* ===== TABLES (не трогаем bootstrap table) ===== */ .sk-table{ width:100%; border-collapse:collapse; color:#eaffff; background: rgba(0,0,0,.55); border-radius:12px; overflow:hidden; } .sk-table th, .sk-table td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); } .sk-table th{ background: rgba(0,0,0,.8); color:#00eaff; font-weight:700; white-space:nowrap; } .sk-table tr:hover td{ background: rgba(255,255,255,.025); } /* ===== EXERCISE CARDS (exercises.php) ===== */ .sk-exercises .sk-card{ background: rgba(0,0,0,.78); border-color: rgba(0,255,255,.3); } .sk-exercise__title{ color:var(--sk-accent-2); font-weight:700; text-align:center; } .sk-exercise__text{ color:#cfd8dc; font-size:.95rem; } /* ===== PAPER TARGETS BUTTONS ===== */ #paperTargetsContainer .sk-target{ min-width:48px; font-weight:700; border:2px solid #00ffee; border-radius:24px; background:#0b1320; color:#a0b3b9; padding:8px 12px; transition: transform .15s, border-color .15s, color .15s, background .15s; } #paperTargetsContainer .sk-target:hover{ transform:scale(1.05); border-color:#00ffcc; color:#fff; } #paperTargetsContainer .sk-target[data-code="A"].active{ background:#00ff88; color:#000; border-color:#00ff88; } #paperTargetsContainer .sk-target[data-code="C"].active{ background:#00bfff; color:#000; border-color:#00bfff; } #paperTargetsContainer .sk-target[data-code="D"].active{ background:#ffcc00; color:#000; border-color:#ffcc00; } #paperTargetsContainer .sk-target[data-code="M"].active{ background:#ff4444; color:#fff; border-color:#ff4444; } #paperTargetsContainer .sk-target[data-code="NS"].active{ background:#ff00ff; color:#fff; border-color:#ff00ff; } /* ===== STREAM PAGE (свой контейнер, без .row/.col) ===== */ .sk-stream{ display:grid; gap:24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .sk-stream .sk-card{ text-align:center; } .sk-stream .sk-card:hover{ box-shadow: 0 0 24px rgba(0,255,255,.35); transform: translateY(-6px); } /* ===== CUSTOM MODAL (не Bootstrap .modal) ===== */ .sk-modal{ display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.82); align-items:center; justify-content:center; } .sk-modal__dialog{ width:min(92vw, 720px); background: rgba(10,18,24,.96); border:1px solid rgba(0,255,255,.3); border-radius:18px; padding:24px; box-shadow: 0 0 30px rgba(0,255,255,.28), inset 0 0 12px rgba(0,255,255,.08); animation: sk-fade-in .28s ease; position:relative; color:#eaffff; } .sk-modal__close{ position:absolute; right:16px; top:12px; font-size:24px; line-height:1; color:#9ff; cursor:pointer; } .sk-modal__close:hover{ color:#fff; } @keyframes sk-fade-in{ from{ opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } } /* ===== HR (мягкая линия) ===== */ .skydom hr{ border:0; height:1px; margin:24px 0; background: linear-gradient(90deg, transparent, rgba(0,255,225,.35), transparent); } /* ===== UTIL ===== */ .sk-center{ display:flex; align-items:center; justify-content:center; } .sk-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; } /* ===== HEADER LAYOUT FIX ===== */ .sk-header .container{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px; } /* блоки внутри хедера: левый / центр / правый */ .sk-header .brand{ display:flex; align-items:center; gap:10px; flex:1 1 0; /* занимает левую треть */ min-width:0; } .sk-header .sk-nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; flex:0 1 auto; /* центр, ширина по контенту */ justify-content:center; /* центрируем ссылки */ margin:0 auto; /* гарантированный центр */ } .sk-header .sk-actions{ display:flex; align-items:center; gap:10px; flex:1 1 0; /* правая треть */ justify-content:flex-end; /* уводим вправо */ } /* ссылки меню — чтобы читались на тёмном фоне */ .sk-header .sk-nav-link{ color:#eaffff; text-decoration:none; font-weight:600; padding:6px 8px; border-radius:8px; } .sk-header .sk-nav-link:hover{ color:#bff; } /* ==== Бургер ==== */ .sk-burger{ display:none; position:relative; width:40px; height:40px; border:1px solid var(--sk-border); border-radius:10px; background:rgba(0,0,0,.35); backdrop-filter: blur(6px); align-items:center; justify-content:center; gap:4px; cursor:pointer; } .sk-burger span{ display:block; width:22px; height:2px; background:#eaffff; border-radius:2px; transition:transform .2s, opacity .2s; } .sk-burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .sk-burger.is-open span:nth-child(2){ opacity:0; } .sk-burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* ==== Обёртка меню (desktop) ==== */ .sk-navwrap{ flex:0 1 auto; } .sk-nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; } .sk-nav-link{ color:#eaffff; text-decoration:none; font-weight:600; padding:6px 8px; border-radius:8px; } .sk-nav-link:hover{ color:#bff; } /* ==== Layout трёх зон ==== */ .sk-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .sk-header .brand{ display:flex; align-items:center; gap:10px; flex:1 1 0; min-width:0; } .sk-header .sk-actions{ display:flex; align-items:center; gap:10px; flex:1 1 0; justify-content:flex-end; } /* ==== Мобильная версия ==== */ @media (max-width: 768px){ .sk-burger{ display:flex; } /* центр/кнопки на одну линию с брендом */ .sk-header .sk-actions{ display:none; } /* прячем справа, при желании можно перенести внутрь меню */ /* выпадающее меню на всю ширину под шапкой */ .sk-navwrap{ position:fixed; left:0; right:0; top:calc(var(--sk-header-h, 88px)); /* под шапкой */ background: rgba(10,18,24,.96); border-top:1px solid var(--sk-border); box-shadow: 0 10px 30px rgba(0,0,0,.45); max-height:0; overflow:hidden; transition:max-height .25s ease; } .sk-navwrap.is-open{ max-height: 70vh; } /* раскрытие */ .sk-nav{ flex-direction:column; align-items:stretch; padding:12px; gap:8px; } .sk-nav-link{ padding:10px 14px; border:1px solid transparent; border-radius:12px; } .sk-nav-link:hover{ border-color: var(--sk-border); background:rgba(255,255,255,.03); } } .top-list { list-style: none; padding-left: 0; margin: 0; } .group-title { display: block; font-size: 1.1em; color: #0ff; margin-bottom: 6px; } .top-vertical { display: flex; flex-direction: column; gap: 6px; margin-left: 10px; } .place-row { display: flex; align-items: center; background: rgba(0,255,255,.05); border-radius: 8px; padding: 6px 10px; box-shadow: 0 0 6px #00ffff22; } .place-icon { font-size: 1.3em; margin-right: 8px; filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); } .place-text { color: #fff; font-size: 15px; } .place-text b { color: #0ff; margin-right: 4px; } .place-points { opacity: .8; font-size: 13px; } .sk-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; color: #eaffff; } /* Заголовок */ .admin-head h2 { margin: 0 0 6px; font-size: 28px; color: #0ff; text-shadow: 0 0 12px #00ffff66; } .admin-sub { margin: 0 0 18px; opacity: 0.8; } /* Сетка карточек */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } /* Карточки */ .admin-card { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: #eaffff; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(4, 42, 46, 0.85), rgba(3, 26, 29, 0.9)); border: 1px solid #00ffff33; box-shadow: 0 0 0 rgba(0, 255, 255, 0); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .admin-card:hover { transform: translateY(-3px); border-color: #00ffff77; box-shadow: 0 0 18px #00ffff33; } /* Красная карточка (выход) */ .admin-card.admin-danger { background: linear-gradient(180deg, rgba(46, 4, 9, 0.85), rgba(29, 3, 6, 0.9)); border-color: #ff557733; } .admin-card.admin-danger:hover { border-color: #ff5577aa; box-shadow: 0 0 18px #ff557733; } /* Иконки */ .admin-ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #0ff; background: rgba(0, 255, 255, 0.08); border: 1px solid #00ffff44; box-shadow: inset 0 0 12px #00ffff22; } .admin-card.admin-danger .admin-ico { color: #ff7c98; background: rgba(255, 77, 109, 0.08); border-color: #ff557744; box-shadow: inset 0 0 12px #ff557722; } .admin-ico svg { width: 26px; height: 26px; display: block; } /* Текст карточек */ .admin-body h3 { margin: 2px 0 6px; font-size: 18px; color: #eaffff; } .admin-body p { margin: 0; opacity: 0.8; font-size: 14px; } /* Адаптив */ @media (max-width: 520px) { .admin-ico { width: 42px; height: 42px; border-radius: 10px; } .admin-body h3 { font-size: 16px; } .admin-body p { font-size: 13px; } } .auth-card { max-width: 720px; margin: 40px auto; padding: 24px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 0 20px rgba(0,255,255,0.15); backdrop-filter: blur(6px); } .auth-tabs { display: flex; justify-content: center; gap: 16px; margin-bottom: 20px; } .auth-tabs a { padding: 10px 18px; border-radius: 24px; color: #bdfcff; text-decoration: none; transition: all 0.2s; } .auth-tabs a.active { background: #00e5d1; color: #00131a; } .auth-tabs a:hover { opacity: 0.8; } .error-card { background: #ffe6e6; color: #900; margin-bottom: 12px; padding: 10px 16px; border-radius: 8px; } .error-card ul { margin: 0; padding-left: 20px; } .full-width { width: 100%; } .switch-link { text-align: center; margin-top: 8px; } .hint { color: #86a3ad; font-size: 12px; margin-top: 4px; } .disabled-btn { opacity: .6; cursor: not-allowed; } /* ===== Auth (login/register) ===== */ .sk-auth{ display:flex; justify-content:center; align-items:flex-start; padding:32px 16px; min-height:calc(100vh - 200px); /* чуть растянуть область */ } .sk-auth__card{ width:100%; max-width:560px; /* <<< фиксируем адекватную ширину */ margin:0 auto; padding:24px 20px; border-radius:16px; box-sizing:border-box; /* чтобы padding не раздувал ширину */ } @media (max-width: 480px){ .sk-auth__card{ max-width: 94vw; padding:20px 16px; } } .sk-auth__title{ text-align:center; margin:0 0 16px; font-size:28px; /* компактнее заголовок */ } .sk-auth__tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:16px; } .sk-form .sk-field{ margin-bottom:12px; } .sk-input{ height:40px; padding:8px 12px; font-size:16px; } .sk-input-group .sk-input{ width:100%; } .sk-input-append{ height:40px; } .sk-btn--full{ width:100%; }