/* ============================================================ ЕДИНОЕ ОФОРМЛЕНИЕ СЛУЖЕБНЫХ СТРАНИЦ Образец — CRM: она на Bootstrap 4, системный шрифт, синий #007bff, светло-серый фон, карточки с белым телом и цветной шапкой. Раньше админка, подписка, вход и сотрудники были собраны каждая по-своему: другой синий, другие скругления, другой шрифт. Подключается одной строкой в служебных страниц. ============================================================ */ :root { --xp-blue: #007bff; /* тот же, что в CRM */ --xp-blue-dark: #0069d9; --xp-blue-light: #cfe2ff; --xp-text: #212529; --xp-muted: #6c757d; --xp-bg: #f5f6fa; --xp-line: #dee2e6; --xp-green: #28a745; --xp-red: #dc3545; --xp-amber: #ffc107; --xp-radius: 8px; } html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--xp-text); background: var(--xp-bg); margin: 0; padding: 0; } .xp-wrap { max-width: 1120px; margin: 0 auto; padding: 20px 16px 40px; } /* ---------- заголовки ---------- */ h1 { font-size: 24px; margin: 0 0 6px; font-weight: 600; } h2 { font-size: 18px; margin: 0 0 14px; font-weight: 600; } h3 { font-size: 16px; margin: 0 0 10px; font-weight: 600; } .m, .text-muted { color: var(--xp-muted); font-size: 14px; } /* ---------- карточки как в CRM ---------- */ .card { background: #fff; border: 1px solid var(--xp-line); border-radius: var(--xp-radius); margin-bottom: 18px; } .card-header { background: var(--xp-blue); color: #fff; padding: 11px 16px; border-radius: var(--xp-radius) var(--xp-radius) 0 0; font-weight: 600; } .card-body { padding: 16px; } /* ---------- верхняя панель разделов: как nav-tabs в CRM ---------- */ .xpnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--xp-line); padding: 6px 16px 0; margin: -20px -16px 20px; } .xpnav a { display: inline-block; padding: 8px 14px; color: #495057; text-decoration: none; border: 1px solid transparent; border-radius: 6px 6px 0 0; white-space: nowrap; } .xpnav a:hover { background: #f8f9fa; border-color: #e9ecef #e9ecef var(--xp-line); } .xpnav a.on { background: #fff; border-color: var(--xp-line) var(--xp-line) #fff; font-weight: 600; margin-bottom: -1px; } .xpnav-sp { flex: 1 } /* ---------- внутренние вкладки ---------- */ nav.xp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; } nav.xp-tabs a { padding: 8px 15px; border-radius: var(--xp-radius); background: #fff; color: #495057; text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid var(--xp-line); } nav.xp-tabs a:hover { background: #f8f9fa; } nav.xp-tabs a.on { background: var(--xp-blue); color: #fff; border-color: var(--xp-blue); } /* ---------- формы ---------- */ label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; } input, select, textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; font-family: inherit; color: var(--xp-text); background: #fff; } input:focus, select:focus, textarea:focus { outline: 0; border-color: #80bdff; box-shadow: 0 0 0 3px rgba(0, 123, 255, .2); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .row, .row3 { grid-template-columns: 1fr; } } .chk { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-weight: 400; } .chk input { width: auto; } /* ---------- кнопки как в CRM (btn-primary Bootstrap) ---------- */ button, .btn { display: inline-block; background: var(--xp-blue); color: #fff; border: 1px solid var(--xp-blue); border-radius: 6px; padding: 9px 18px; font-weight: 400; font-size: 15px; cursor: pointer; margin-top: 14px; text-decoration: none; font-family: inherit; } button:hover, .btn:hover { background: var(--xp-blue-dark); border-color: var(--xp-blue-dark); color: #fff; } button:disabled { opacity: .55; cursor: default; } button.s, .btn.s { padding: 4px 10px; font-size: 13px; margin: 0 3px 0 0; background: #fff; color: #495057; border-color: #ced4da; } button.s:hover { background: #f8f9fa; color: var(--xp-text); } button.ghost, .btn.ghost { background: #fff; color: #495057; border-color: #ced4da; } button.danger, .btn.danger { background: #fff; color: var(--xp-red); border-color: #f5c6cb; } button.danger:hover { background: var(--xp-red); color: #fff; } button.dark, .btn.dark { background: #343a40; border-color: #343a40; } /* ---------- таблицы ---------- */ table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { padding: 9px 10px; border-bottom: 1px solid #eceef1; text-align: left; vertical-align: middle; } th { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--xp-muted); font-weight: 600; } tbody tr:hover { background: #f8f9fa; } tr.off { opacity: .45; } /* ---------- сообщения ---------- */ .box { border-radius: var(--xp-radius); padding: 12px 15px; margin: 14px 0; font-size: 14px; white-space: pre-wrap; } .box.good, .good { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; } .box.bad, .bad { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } .box.warn, .warn { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; } .pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; } .pill.ok { background: #d4edda; color: #155724; } .pill.no { background: #f8d7da; color: #721c24; } code { background: #f1f3f5; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; color: #c7254e; } /* ---------- сводка цифрами ---------- */ .sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .sum > div { background: #f8f9fa; border: 1px solid var(--xp-line); border-radius: var(--xp-radius); padding: 12px 15px; } .sum b { display: block; font-size: 22px; margin-top: 3px; font-weight: 600; } /* ---------- страница входа ---------- */ body.xp-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #343a40; padding: 20px; } body.xp-center .card { width: 100%; max-width: 400px; margin: 0; border: 0; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); } body.xp-center .card-body { padding: 28px 30px; } /* ссылки-переключатели на странице входа */ .m a { color: var(--xp-blue); font-weight: 600; cursor: pointer; text-decoration: none; } .m a:hover { text-decoration: underline; } /* ---------- витрина тарифов в кабинете клиента ---------- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .plan { border: 2px solid var(--xp-line); border-radius: var(--xp-radius); padding: 16px; display: flex; flex-direction: column; background: #fff; } .plan.cur { border-color: var(--xp-green); background: #f6fff8; } .plan h3 { margin: 0 0 4px; font-size: 17px; } .plan .price { font-size: 25px; font-weight: 600; margin: 6px 0; } .plan .price span { font-size: 13px; font-weight: 400; color: var(--xp-muted); } .plan .lim { font-size: 13px; color: #495057; margin: 10px 0 14px; flex: 1; padding-left: 18px; } .plan .lim li { margin: 3px 0; } .plan s { color: var(--xp-muted); } /* ---------- сводка состояния подписки ---------- */ .state { display: flex; gap: 22px; flex-wrap: wrap; } .state > div b { display: block; font-size: 18px; margin-top: 2px; } .ok { color: #155724; } .bad { color: #721c24; }