/** * dxCAR design system ("dc") — back-office theme layer. * * Loaded AFTER master.css (so it overrides the legacy chrome) and scoped to * so it only affects opted-in back-office pages. The whole * system is CSS-variable driven: * --dc-accent accent colour (set inline on from a site setting) * [data-dc-theme] "light" | "dark" on switches the surface palette * See master/view/header.php (emits the vars) and footer.php (toggles them). * * Sidebar rules are written with `body.dc #sidebar ...` (id specificity) and a * few !important flags, because the legacy master.css sidebar rules also use * the #sidebar id (and one `ul ul a { ... !important }`). */ /* ---------- accent (seeded inline on ; default here as a fallback) ---------- */ :root { --dc-accent: #d43d51; --dc-accent-strong: color-mix(in srgb, var(--dc-accent) 82%, #000); --dc-accent-ink: #fff; --dc-accent-soft: color-mix(in srgb, var(--dc-accent) 14%, transparent); /* красный для удаления — не зависит от акцента */ --dc-red: #d43d51; --dc-sb: #26282c; --dc-sbtx: #b9bcc2; --dc-radius: 9px; --dc-radius-sm: 7px; --dc-font: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---------- light palette (default) ---------- */ :root, :root[data-dc-theme="light"] { --dc-bg: #eef0f3; --dc-surface: #ffffff; --dc-surface-2: #f6f7f9; --dc-text: #1f2329; --dc-muted: #6b7280; --dc-border: #e3e6eb; --dc-input-bg: #ffffff; --dc-topbar: #ffffff; --dc-shadow: 0 1px 3px rgba(20, 22, 28, .07), 0 6px 20px -12px rgba(20, 22, 28, .18); --dc-tint-client: #fff6ef; --dc-tint-car: #fdf1e8; --dc-tint-order: #eef7ee; --dc-head-client: var(--dc-accent); --dc-head-car: #2563d6; --dc-head-order: #2e9e57; } /* ---------- dark palette ---------- */ :root[data-dc-theme="dark"] { --dc-bg: #17181b; --dc-surface: #1f2126; --dc-surface-2: #24272d; --dc-text: #e7e9ec; --dc-muted: #9aa0a8; --dc-border: #33363d; --dc-input-bg: #24272d; --dc-topbar: #1c1e22; --dc-sb: #1a1b1e; --dc-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .6); --dc-tint-client: #241f1c; --dc-tint-car: #221d1a; --dc-tint-order: #1b241d; --dc-head-client: var(--dc-accent); --dc-head-car: #3b7be6; --dc-head-order: #35b163; } /* ================================================================== SHELL ================================================================== */ body.dc { width: auto !important; min-width: 0 !important; margin: 0; background: var(--dc-bg); color: var(--dc-text); font-family: var(--dc-font); } body.dc .wrapper { display: flex; align-items: stretch; min-height: 100vh; width: 100%; } /* ---------- sidebar ---------- */ body.dc #sidebar.dc-sidebar { width: 228px; min-width: 228px; max-width: 228px; background: var(--dc-sb); color: var(--dc-sbtx); position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; box-sizing: border-box; border: none; transition: width .2s, min-width .2s, max-width .2s; } body.dc #sidebar.dc-sidebar::-webkit-scrollbar { width: 8px; } body.dc #sidebar.dc-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; } body.dc #sidebar.dc-collapsed { width: 64px; min-width: 64px; max-width: 64px; padding: 14px 8px; } /* brand */ body.dc #sidebar .dc-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; cursor: pointer; background: none; border: none; } body.dc #sidebar .dc-brand-badge { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--dc-accent); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; } body.dc #sidebar .dc-brand-name { font-weight: 800; font-size: 14px; color: #fff; white-space: nowrap; } body.dc #sidebar.dc-collapsed .dc-brand { justify-content: center; padding: 2px 0 12px; } body.dc #sidebar.dc-collapsed .dc-brand-name { display: none; } /* nav items (beat legacy `#sidebar ul li a`) */ body.dc #sidebar .dc-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; } body.dc #sidebar .dc-nav li { list-style: none; } body.dc #sidebar .dc-nav a, body.dc #sidebar .dc-nav .dc-nav-item { display: flex !important; align-items: center; gap: 10px; padding: 6px 10px !important; border-radius: 7px; font-size: 12.5px !important; font-weight: 600; color: var(--dc-sbtx); text-decoration: none; white-space: nowrap; cursor: pointer; line-height: 1.1; background: none; transition: background .12s, color .12s; } body.dc #sidebar .dc-nav a:hover, body.dc #sidebar .dc-nav .dc-nav-item:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; } body.dc #sidebar .dc-ico { flex: none; width: 17px; height: 17px; opacity: .95; margin: 0; } body.dc #sidebar .dc-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } body.dc #sidebar .dc-nav a.dc-active { background: var(--dc-accent) !important; color: var(--dc-accent-ink) !important; } body.dc #sidebar .dc-nav a.dc-active:hover { background: var(--dc-accent-strong) !important; } /* groups + submenus (custom toggle, no bootstrap collapse) */ body.dc #sidebar .dc-caret { flex: none; font-size: 10px; transition: transform .15s; } body.dc #sidebar .dc-caret::before { content: "\25BE"; } body.dc #sidebar .dc-group.dc-open > .dc-group-head .dc-caret { transform: rotate(180deg); } body.dc #sidebar .dc-sub { list-style: none; margin: 1px 0 2px 18px; padding: 0 0 0 14px; border-left: 1px solid rgba(255,255,255,.12); display: none; flex-direction: column; gap: 1px; } body.dc #sidebar .dc-group.dc-open > .dc-sub { display: flex; } body.dc #sidebar .dc-sub a { font-size: 12px !important; padding: 5px 10px !important; background: none !important; } body.dc #sidebar .dc-sub .dc-ico { width: 14px; height: 14px; } /* logout pinned to the bottom */ body.dc #sidebar .dc-nav .dc-logout { margin-top: auto; } body.dc #sidebar .dc-nav .dc-logout a { color: #8e929a; } /* collapsed: hide labels/carets/submenus, centre icons */ body.dc #sidebar.dc-collapsed .dc-nav a, body.dc #sidebar.dc-collapsed .dc-nav .dc-nav-item { justify-content: center; gap: 0; } body.dc #sidebar.dc-collapsed .dc-label, body.dc #sidebar.dc-collapsed .dc-caret { display: none; } body.dc #sidebar.dc-collapsed .dc-sub { display: none !important; } /* tooltips shown next to the collapsed icons (built in footer.php; Bootstrap renders them on , so they are not clipped by the scrolling sidebar) */ .tooltip.dc-menu-tip { font-family: 'Manrope', system-ui, -apple-system, sans-serif; } .tooltip.dc-menu-tip .tooltip-inner { background: #26282c; color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 6px; max-width: 240px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); } .tooltip.dc-menu-tip .tooltip-arrow::before { border-right-color: #26282c; } /* выпадающее подменю свёрнутой группы (строится в footer.php, рендерится на , потому что сайдбар режет всё по горизонтали: overflow-x: hidden) */ .dc-flyout { position: fixed; z-index: 1080; min-width: 190px; padding: 6px; background: #26282c; border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; box-shadow: 0 10px 26px rgba(0, 0, 0, .32); display: flex; flex-direction: column; gap: 1px; font-family: 'Manrope', system-ui, -apple-system, sans-serif; } .dc-flyout-title { padding: 3px 9px 5px; font-size: 10.5px; font-weight: 800; color: #8e929a; text-transform: uppercase; letter-spacing: .05em; } .dc-flyout a { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 7px; color: #d9dbdf; text-decoration: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.1; } .dc-flyout a:hover { background: rgba(255, 255, 255, .08); color: #fff; } .dc-flyout a.dc-active { background: var(--dc-accent); color: var(--dc-accent-ink); } .dc-flyout .dc-ico { flex: none; width: 16px; height: 16px; opacity: .95; } .dc-flyout .dc-label { flex: 1; } /* ================================================================== MAIN CONTENT + TOPBAR ================================================================== */ body.dc #content { flex: 1; min-width: 0; background: var(--dc-bg); padding: 0; display: flex; flex-direction: column; color: var(--dc-text); } body.dc .dc-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 9px 18px; background: var(--dc-topbar); border-bottom: 1px solid var(--dc-border); } body.dc .dc-topbar .dc-collapse-btn { width: 32px; height: 32px; flex: none; border: none; border-radius: 8px; background: var(--dc-surface-2); color: var(--dc-text); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } body.dc .dc-topbar .dc-collapse-btn:hover { background: var(--dc-border); } body.dc .dc-topbar .dc-title { font-weight: 700; font-size: 14px; letter-spacing: -.01em; } body.dc .dc-topbar .dc-spacer { flex: 1; } /* theme controls */ body.dc .dc-swatches { display: flex; gap: 6px; align-items: center; } body.dc .dc-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } body.dc .dc-swatch.dc-on { border-color: var(--dc-text); } body.dc .dc-theme-toggle { width: 34px; height: 32px; flex: none; border: 1px solid var(--dc-border); border-radius: 8px; background: var(--dc-surface-2); color: var(--dc-text); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } body.dc .dc-theme-toggle:hover { border-color: var(--dc-muted); } /* sun/moon swap (used by the topbar toggle and the new-order header toggle) */ .dc-sun { display: none; } .dc-moon { display: inline-flex; } html[data-dc-theme="dark"] .dc-sun { display: inline-flex; } html[data-dc-theme="dark"] .dc-moon { display: none; } body.dc .dc-page { padding: 16px 18px; } /* ================================================================== FORM CONTROLS (scoped within .dc-page) ================================================================== */ body.dc .dc-page .form-control, body.dc .dc-page select.form-control, body.dc .dc-page textarea.form-control { background: var(--dc-input-bg); border: 1.5px solid var(--dc-border); border-radius: var(--dc-radius-sm); color: var(--dc-text); font-size: 13px; padding: 8px 11px; box-shadow: none; transition: border-color .12s, box-shadow .12s; } body.dc .dc-page .form-control:focus { border-color: var(--dc-accent); box-shadow: 0 0 0 3px var(--dc-accent-soft); outline: none; } body.dc .dc-page textarea.form-control { min-height: 46px; resize: vertical; } body.dc .dc-page .form-control::placeholder { color: var(--dc-muted); opacity: .8; } /* buttons */ body.dc .dc-page .btn { border-radius: var(--dc-radius-sm); font-weight: 600; font-size: 12.5px; border: none; } body.dc .dc-page .btn-success { background: var(--dc-head-order); } body.dc .dc-page .btn-success:hover { background: color-mix(in srgb, var(--dc-head-order) 85%, #000); } body.dc .dc-page .btn-primary { background: var(--dc-head-car); } body.dc .dc-page .btn-primary:hover { background: color-mix(in srgb, var(--dc-head-car) 85%, #000); } body.dc .dc-page .btn-danger { background: var(--dc-accent); color: var(--dc-bg); } body.dc .dc-page .btn-danger:hover { background: var(--dc-accent-strong); } /* удаление — всегда красная, независимо от выбранного акцента */ body.dc .dc-page .btn.btn-delete { background: var(--dc-red); color: #fff; } body.dc .dc-page .btn.btn-delete:hover { background: color-mix(in srgb, var(--dc-red) 85%, #000); } /* ================================================================== PANELS (generic card + colour-coded section headers) ================================================================== */ body.dc .dc-panel { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); box-shadow: var(--dc-shadow); overflow: hidden; display: flex; flex-direction: column; } body.dc .dc-panel > .dc-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 13px; color: #fff; background: var(--dc-accent); } body.dc .dc-panel.dc-client > .dc-panel-head { background: var(--dc-head-client); } body.dc .dc-panel.dc-car > .dc-panel-head { background: var(--dc-head-car); } body.dc .dc-panel.dc-order > .dc-panel-head { background: var(--dc-head-order); } body.dc .dc-panel > .dc-panel-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; } /* ================================================================== NEW ORDER — restyle the existing 3-column layout ================================================================== */ body.dc .dc-neworder .row { --bs-gutter-x: 14px; } body.dc .dc-neworder .ds_user, body.dc .dc-neworder .ds_car, body.dc .dc-neworder .ds_orderinfo { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); box-shadow: var(--dc-shadow); padding: 14px; } body.dc .dc-neworder .ds_car { background: var(--dc-tint-car); } body.dc .dc-neworder .ds_orderinfo { background: var(--dc-tint-order); } body.dc .dc-neworder .ds_user { background: var(--dc-tint-client); } body.dc .dc-neworder #usercarname, body.dc .dc-neworder .orderinfo:first-of-type { font-weight: 700; font-size: 13px; color: var(--dc-text); margin-bottom: 8px; } body.dc .dc-neworder .orderinfo { font-weight: 700; font-size: 12.5px; margin: 10px 0 6px; color: var(--dc-text); } body.dc .dc-neworder .form-control { margin-bottom: 8px; } body.dc .dc-neworder .ds_table > div { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } body.dc .dc-neworder .ds_table > div > div:first-child { flex: 0 0 92px; font-size: 12px; color: var(--dc-muted); } body.dc .dc-neworder .ds_table > div > div:last-child { flex: 1; } body.dc .dc-neworder .ds_table .form-control { margin-bottom: 0; } body.dc .dc-neworder label { font-size: 12.5px; } body.dc .dc-neworder .input-group-text { background: var(--dc-surface-2); border: 1.5px solid var(--dc-border); color: var(--dc-text); font-size: 12.5px; } /* radios / checkboxes accent */ body.dc input[type="radio"], body.dc input[type="checkbox"] { accent-color: var(--dc-accent); } @media (max-width: 900px) { body.dc .dc-neworder [class^="col"], body.dc .dc-neworder [class*=" col"] { flex: 0 0 100%; max-width: 100%; } } /* ---------- small-screen guard (back-office is desktop-only) ---------- Показывается из header.php по разрешению экрана < 1024×768. Оверлей перекрывает всё приложение; тема (светлая/тёмная) наследуется от dc-переменных. */ .dc-smallscreen { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 28px; background: var(--dc-bg, #eef0f3); color: var(--dc-text, #1f2329); font-family: var(--dc-font, system-ui, -apple-system, "Segoe UI", sans-serif); -webkit-tap-highlight-color: transparent; } .dc-smallscreen.is-small, .dc-smallscreen.is-rotate { display: flex; } html.dc-smallscreen-lock, html.dc-smallscreen-lock body { overflow: hidden; } .dc-smallscreen-card { max-width: 360px; text-align: center; } /* два варианта содержимого: «мал экран» (монитор) и «поверни» (поворот) */ .dc-smallscreen .dc-smallscreen-ico, .dc-smallscreen .dc-msg { display: none; } .dc-smallscreen.is-small .dc-ico-small, .dc-smallscreen.is-rotate .dc-ico-rotate { display: inline-block; } .dc-smallscreen.is-small .dc-msg-small, .dc-smallscreen.is-rotate .dc-msg-rotate { display: block; } .dc-smallscreen-ico { width: 54px; height: 54px; color: var(--dc-accent, #d43d51); margin-bottom: 18px; } .dc-smallscreen-brand { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted, #6b7280); margin-bottom: 12px; } .dc-smallscreen h1 { font-size: 20px; font-weight: 700; line-height: 1.32; margin: 0 0 12px; color: var(--dc-text, #1f2329); } .dc-smallscreen p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--dc-muted, #6b7280); } .dc-smallscreen p b { color: var(--dc-text, #1f2329); font-weight: 600; }