/* ========================================================================= Redactor Service — design system Tokens + Bootstrap overrides. Keeps all BS class names (JS binds to them). ========================================================================= */ :root { --nav-h: 58px; --c-bg: #f6f7fa; --c-surface: #ffffff; --c-surface-muted: #f1f3f7; --c-border: #e5e7eb; --c-border-strong: #d0d5dd; --c-text: #0f172a; --c-text-muted: #475569; --c-text-subtle: #94a3b8; --c-accent: #4f46e5; --c-accent-hover: #4338ca; --c-accent-soft: #eef2ff; --c-success: #059669; --c-success-soft: #ecfdf5; --c-danger: #dc2626; --c-danger-soft: #fef2f2; --c-warning: #d97706; --c-warning-soft: #fffbeb; --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --sh-xs: 0 1px 2px rgba(15, 23, 42, .05); --sh-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --sh-md: 0 4px 8px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04); --sh-lg: 0 16px 40px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .04); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace; } /* Dark theme — same token names, different values. Trigger via [data-bs-theme="dark"] on (Bootstrap стандарт). */ [data-bs-theme="dark"] { --c-bg: #0b0e12; --c-surface: #12161c; --c-surface-muted: #1a1f27; --c-border: #242933; --c-border-strong: #323847; --c-text: #e5e7eb; --c-text-muted: #9aa3b2; --c-text-subtle: #6b7380; --c-accent: #6366f1; --c-accent-hover: #818cf8; --c-accent-soft: rgba(99, 102, 241, .18); --c-success: #34d399; --c-success-soft: rgba(16, 185, 129, .16); --c-danger: #f87171; --c-danger-soft: rgba(239, 68, 68, .16); --c-warning: #fbbf24; --c-warning-soft: rgba(217, 119, 6, .18); --sh-xs: 0 1px 2px rgba(0, 0, 0, .35); --sh-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --sh-md: 0 4px 10px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3); --sh-lg: 0 20px 48px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .35); color-scheme: dark; } @media (max-width: 575.98px) { :root { --nav-h: 72px; } } /* ---------- base ---------- */ html, body { height: 100%; } body { overflow: hidden; font-family: var(--font-sans); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; } .pt-nav { padding-top: var(--nav-h); } /* ---------- navbar ---------- */ .navbar.bg-body-tertiary { background: rgba(255, 255, 255, .86) !important; backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--c-border) !important; box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important; padding: .5rem 1rem; min-height: var(--nav-h); } [data-bs-theme="dark"] .navbar.bg-body-tertiary { background: rgba(18, 22, 28, .82) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .3) !important; } .navbar .collapse.navbar-collapse { gap: .75rem; } .navbar-brand { font-weight: 600; font-size: .98rem; letter-spacing: -0.015em; color: var(--c-text) !important; display: inline-flex; align-items: center; gap: .55rem; margin-right: .75rem; } .navbar-brand::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); } .navbar label.form-label, .navbar label.form-label.small { font-size: .78rem; font-weight: 500; color: var(--c-text-muted); margin-bottom: 0; letter-spacing: 0; } .navbar .input-group-sm > .form-control, .navbar .input-group-sm > .input-group-text { padding-top: .25rem; padding-bottom: .25rem; } /* ---------- buttons ---------- */ .btn { font-weight: 500; border-radius: var(--r-sm); transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; letter-spacing: -0.005em; } .btn-sm { padding: .32rem .72rem; font-size: .82rem; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-accent-soft); } .btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--c-accent-hover) !important; border-color: var(--c-accent-hover) !important; color: #fff; } .btn-outline-primary { color: var(--c-accent); background: var(--c-surface); border-color: var(--c-border-strong); } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); } .btn-outline-secondary { color: var(--c-text-muted); background: var(--c-surface); border-color: var(--c-border-strong); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--c-surface-muted); border-color: var(--c-border-strong); color: var(--c-text); } .btn-outline-success { color: var(--c-success); background: var(--c-surface); border-color: var(--c-border-strong); } .btn-outline-success:hover, .btn-outline-success:focus { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success); } .btn-outline-danger { color: var(--c-danger); background: var(--c-surface); border-color: var(--c-border-strong); } .btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); } .btn-outline-dark { color: var(--c-text); background: var(--c-surface); border-color: var(--c-border-strong); } .btn-outline-dark:hover, .btn-outline-dark:focus { background: var(--c-surface-muted); color: var(--c-text); } .btn-success { background: var(--c-success); border-color: var(--c-success); color: #fff; } .btn-success:hover, .btn-success:focus { background: #047857; border-color: #047857; color: #fff; } .btn-warning { background: var(--c-warning); border-color: var(--c-warning); color: #fff; } .btn-warning:hover, .btn-warning:focus { background: #b45309; border-color: #b45309; color: #fff; } .btn-secondary, .btn-light { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); } .btn-secondary:hover, .btn-light:hover { background: var(--c-surface-muted); border-color: var(--c-border-strong); color: var(--c-text); } .btn-group-sm > .btn { border-color: var(--c-border-strong); } /* Tool buttons — active state shows ring, not fill */ .tool-btn.is-active, .tool-btn.is-active:hover, .tool-btn.is-active:focus { background-color: transparent !important; box-shadow: 0 0 0 2.5px currentColor; z-index: 2; } /* ---------- inputs ---------- */ .form-control, .form-select { border-color: var(--c-border-strong); border-radius: var(--r-sm); font-size: .88rem; color: var(--c-text); background: var(--c-surface); transition: border-color .12s ease, box-shadow .12s ease; } .form-control::placeholder { color: var(--c-text-subtle); } .form-control:focus, .form-select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } .form-label { font-weight: 500; font-size: .83rem; color: var(--c-text); margin-bottom: .3rem; } .form-text { font-size: .77rem; color: var(--c-text-subtle); } .input-group-text { background: var(--c-surface-muted); border-color: var(--c-border-strong); color: var(--c-text-muted); font-size: .82rem; } .form-range { accent-color: var(--c-accent); } .form-range-narrow { max-width: 140px; } .form-range-medium { max-width: 160px; } .form-check-input { border-color: var(--c-border-strong); } .form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); } .form-switch .form-check-input { background-color: var(--c-border-strong); border-color: var(--c-border-strong); } .form-switch .form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); } .form-check-label { font-size: .87rem; color: var(--c-text); } /* ---------- canvas area ---------- */ #canvasWrap { background: #1a1d23 !important; } #canvas { background: #0f1115; cursor: crosshair; } [data-bs-theme="dark"] #canvasWrap { background: #05070b !important; } [data-bs-theme="dark"] #canvas { background: #05070b; } /* ---------- modal ---------- */ .modal-content { border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); background: var(--c-surface); } .modal-header { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--c-border); } .modal-title { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; } .modal-body { padding: 1.25rem 1.5rem; } .modal-footer { padding: .85rem 1.5rem; border-top: 1px solid var(--c-border); gap: .5rem; } .btn-close { opacity: .55; } .btn-close:hover { opacity: .85; } /* ---------- offcanvas ---------- */ .offcanvas { border-left: 1px solid var(--c-border); box-shadow: var(--sh-lg); } .offcanvas-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-border); } .offcanvas-title { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; } .offcanvas-body { padding: 1rem 1.25rem; } /* ---------- list group ---------- */ .list-group { border-radius: var(--r-md); } .list-group-item { border-color: var(--c-border); font-size: .88rem; color: var(--c-text); padding: .6rem .85rem; } .list-group-item + .list-group-item { border-top-color: var(--c-border); } .layers-scrollable { max-height: 50vh; overflow: auto; } /* ---------- badge ---------- */ .badge { font-weight: 500; font-size: .72rem; letter-spacing: .02em; border-radius: var(--r-xs); padding: .32em .55em; } .badge.text-bg-danger { background: var(--c-danger) !important; } /* ---------- toast ---------- */ #toast.toast, .toast { border-radius: var(--r-md); box-shadow: var(--sh-lg); border: 1px solid rgba(255, 255, 255, .08); } .toast.text-bg-dark { background: #1a1d23 !important; } [data-bs-theme="dark"] .toast.text-bg-dark { background: #242933 !important; color: var(--c-text) !important; } .toast-body { font-size: .85rem; padding: .7rem .85rem; } /* ---------- alert ---------- */ .alert { border-radius: var(--r-md); border-width: 1px; padding: .7rem .9rem; font-size: .88rem; } .alert-danger { background: var(--c-danger-soft); border-color: #fecaca; color: #991b1b; } .alert-success { background: var(--c-success-soft); border-color: #a7f3d0; color: #065f46; } .alert-info { background: var(--c-accent-soft); border-color: #c7d2fe; color: #3730a3; } .alert-warning { background: var(--c-warning-soft); border-color: #fde68a; color: #92400e; } /* ---------- kbd ---------- */ kbd { font-family: var(--font-mono); font-size: .76rem; background: var(--c-surface-muted); color: var(--c-text); border: 1px solid var(--c-border-strong); border-radius: var(--r-xs); padding: 1px 6px; box-shadow: inset 0 -1px 0 var(--c-border); } /* ---------- table ---------- */ .table { color: var(--c-text); border-color: var(--c-border); } .table > :not(caption) > * > * { border-bottom-color: var(--c-border); background: transparent; } .table-sm > :not(caption) > * > * { padding: .5rem .75rem; font-size: .83rem; } .table thead th { font-weight: 600; color: var(--c-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--c-border); } /* ---------- progress ---------- */ .progress { background: var(--c-surface-muted); border-radius: var(--r-sm); height: 8px; } .progress-bar { background: var(--c-accent); } /* ---------- divider ---------- */ hr { border-color: var(--c-border); opacity: 1; } /* ---------- utility classes referenced from HTML ---------- */ .z-above { z-index: 1080 !important; } .z-overlay { z-index: 2000 !important; } .min-w-280 { min-width: 280px; } .text-subtle { color: var(--c-text-subtle) !important; } .text-dim { color: var(--c-text-muted) !important; } /* Offcanvas hint line */ .ghost-note { color: var(--c-text-muted); font-size: .82rem; line-height: 1.45; } /* Section label inside offcanvas/modal */ .section-label { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-subtle); margin: .25rem 0 .4rem; } /* Dense toggle row */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } /* ROI overlay card */ .floating-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: .9rem 1rem; } /* Theme toggle button (sun/moon) */ .theme-toggle { width: 36px; height: 36px; padding: 0; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; background: transparent; border: 1px solid var(--c-border-strong); color: var(--c-text-muted); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover, .theme-toggle:focus { background: var(--c-surface-muted); color: var(--c-text); border-color: var(--c-border-strong); } .theme-toggle .ico-sun, .theme-toggle .ico-moon { display: none; } [data-bs-theme="light"] .theme-toggle .ico-moon, html:not([data-bs-theme="dark"]) .theme-toggle .ico-moon { display: inline; } [data-bs-theme="dark"] .theme-toggle .ico-sun { display: inline; } /* Bootstrap form-control in dark: clean darker input */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--c-surface-muted); border-color: var(--c-border-strong); color: var(--c-text); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--c-text-subtle); } [data-bs-theme="dark"] .input-group-text { background: var(--c-surface); color: var(--c-text-muted); border-color: var(--c-border-strong); } /* Dark-theme buttons tuned */ [data-bs-theme="dark"] .btn-outline-secondary { background: var(--c-surface-muted); color: var(--c-text-muted); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background: var(--c-surface); color: var(--c-text); } [data-bs-theme="dark"] .btn-outline-primary { background: var(--c-surface-muted); color: var(--c-accent-hover); } [data-bs-theme="dark"] .btn-outline-success { background: var(--c-surface-muted); color: var(--c-success); } [data-bs-theme="dark"] .btn-outline-danger { background: var(--c-surface-muted); color: var(--c-danger); } [data-bs-theme="dark"] .btn-outline-dark { background: var(--c-surface-muted); color: var(--c-text); } [data-bs-theme="dark"] .btn-secondary, [data-bs-theme="dark"] .btn-light { background: var(--c-surface-muted); border-color: var(--c-border-strong); color: var(--c-text); } [data-bs-theme="dark"] .btn-primary { color: #fff; } [data-bs-theme="dark"] .btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); } /* Dark modal/offcanvas surfaces */ [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .offcanvas { background: var(--c-surface); color: var(--c-text); } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.6); } /* Dark alerts */ [data-bs-theme="dark"] .alert-danger { background: var(--c-danger-soft); border-color: rgba(248, 113, 113, .35); color: #fecaca; } [data-bs-theme="dark"] .alert-success { background: var(--c-success-soft); border-color: rgba(52, 211, 153, .35); color: #a7f3d0; } [data-bs-theme="dark"] .alert-info { background: var(--c-accent-soft); border-color: rgba(99, 102, 241, .35); color: #c7d2fe; } [data-bs-theme="dark"] .alert-warning { background: var(--c-warning-soft); border-color: rgba(251, 191, 36, .35); color: #fde68a; } /* Dark kbd */ [data-bs-theme="dark"] kbd { background: var(--c-surface-muted); color: var(--c-text); border-color: var(--c-border-strong); box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); }