/* ================================================================ DevSense Design System — theme.css GitHub-style SaaS with dark/light theme support. Apply via (default) or "light". ================================================================ */ /* --- Palette --------------------------------------------------- */ :root, [data-theme="dark"] { --ds-bg-primary: #0d1117; --ds-bg-secondary: #161b22; --ds-bg-tertiary: #21262d; --ds-bg-canvas: #010409; --ds-border: #30363d; --ds-border-muted: #21262d; --ds-text-primary: #e6edf3; --ds-text-secondary: #8b949e; --ds-text-muted: #656d76; --ds-text-on-accent: #ffffff; --ds-accent-blue: #2563eb; --ds-accent-purple: #8b5cf6; --ds-accent-blue-subtle: rgba(37, 99, 235, 0.15); --ds-accent-purple-subtle: rgba(139, 92, 246, 0.15); --ds-success: #3fb950; --ds-success-subtle: rgba(63, 185, 80, 0.15); --ds-warning: #d29922; --ds-warning-subtle: rgba(210, 153, 34, 0.15); --ds-danger: #f85149; --ds-danger-subtle: rgba(248, 81, 73, 0.15); --ds-info: #58a6ff; --ds-info-subtle: rgba(88, 166, 255, 0.15); --ds-shadow: 0 1px 3px rgba(0,0,0,0.3); --ds-shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --ds-radius: 6px; --ds-radius-lg: 8px; --ds-action-gap: 10px; --ds-sidebar-width: 260px; --ds-sidebar-collapsed: 64px; --ds-header-height: 56px; --ds-font-mono: 'SF Mono','Cascadia Code','Consolas',monospace; /* Chart.js helpers — read by JS via getComputedStyle */ --ds-chart-grid: rgba(139,148,158,0.15); --ds-chart-line-1: #2563eb; --ds-chart-line-2: #8b5cf6; --ds-chart-fill-1: rgba(37,99,235,0.15); --ds-chart-fill-2: rgba(139,92,246,0.15); } [data-theme="light"] { --ds-bg-primary: #ffffff; --ds-bg-secondary: #f6f8fa; --ds-bg-tertiary: #eaeef2; --ds-bg-canvas: #f0f3f6; --ds-border: #d0d7de; --ds-border-muted: #d8dee4; --ds-text-primary: #1f2328; --ds-text-secondary: #656d76; --ds-text-muted: #8b949e; --ds-shadow: 0 1px 3px rgba(31,35,40,0.08); --ds-shadow-lg: 0 8px 24px rgba(31,35,40,0.12); --ds-chart-grid: rgba(31,35,40,0.08); --ds-chart-fill-1: rgba(37,99,235,0.1); --ds-chart-fill-2: rgba(139,92,246,0.1); } /* --- Base ------------------------------------------------------ */ *,*::before,*::after { box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; background: var(--ds-bg-primary); color: var(--ds-text-primary); margin: 0; transition: background-color .2s ease, color .2s ease; } a { color: var(--ds-accent-blue); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: rgba(37, 99, 235, 0.3); color: var(--ds-text-primary); } /* --- Layout ---------------------------------------------------- */ .ds-app { display: flex; min-height: 100vh; } .ds-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ds-sidebar-width); background: var(--ds-bg-primary); border-right: 1px solid var(--ds-border); display: flex; flex-direction: column; z-index: 40; transition: transform .25s ease, width .25s ease; } .ds-sidebar.collapsed { width: var(--ds-sidebar-collapsed); } .ds-sidebar.collapsed .ds-nav-label, .ds-sidebar.collapsed .ds-sidebar-brand-text, .ds-sidebar.collapsed .ds-nav-section-title, .ds-sidebar.collapsed .ds-sidebar-footer span { display: none; } .ds-sidebar.collapsed .ds-sidebar-brand { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 0 10px; border-bottom: 1px solid var(--ds-border); } /* In compact mode the brand and the collapse control are separate vertical targets. Keeping them in one row overflows the 64px rail and looks like a broken header. */ .ds-sidebar.collapsed #sidebarCollapseBtn { display: inline-flex; align-items: center; margin-left: 0 !important; width: 36px; height: 32px; padding: 0; justify-content: center; color: var(--ds-text-muted); line-height: 1; border-radius: var(--ds-radius); } .ds-sidebar.collapsed #sidebarCollapseBtn:hover { color: var(--ds-text-primary); background: var(--ds-bg-tertiary); } .ds-sidebar.collapsed #sidebarCollapseBtn i { display: block; line-height: 1; margin: 0; } .ds-sidebar.collapsed .ds-sidebar-brand-icon { width: 36px; height: 36px; margin: 0; border-radius: 12px; } .ds-sidebar.collapsed .ds-nav-link { justify-content: center; padding: 8px 6px; margin: 2px 4px; border-radius: var(--ds-radius); } .ds-sidebar.collapsed .ds-nav-link i { margin-right: 0; } /* Override the left-edge stripe + 90deg gradient that look broken in a narrow column. Use a solid centered highlight (background + icon color) instead. */ .ds-sidebar.collapsed .ds-nav-link.active { background: var(--ds-accent-blue-subtle); } .ds-sidebar.collapsed .ds-nav-link.active::before { display: none; } /* Replace hidden CONFIGURATION/ NAVEGACIÓN titles with subtle horizontal divider so the user still perceives section grouping. */ .ds-sidebar.collapsed .ds-nav-section-title { display: block; height: 1px; margin: 8px 12px; padding: 0; background: var(--ds-border); overflow: hidden; text-indent: -9999px; } @media (min-width: 1024px) { html.ds-sidebar-compact-preload .ds-sidebar { width: var(--ds-sidebar-collapsed); } html.ds-sidebar-compact-preload .ds-main { margin-left: var(--ds-sidebar-collapsed); } html.ds-sidebar-compact-preload .ds-sidebar .ds-nav-label, html.ds-sidebar-compact-preload .ds-sidebar .ds-sidebar-brand-text, html.ds-sidebar-compact-preload .ds-sidebar .ds-sidebar-footer span { display: none; } html.ds-sidebar-compact-preload .ds-sidebar .ds-sidebar-brand { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 0 10px; border-bottom: 1px solid var(--ds-border); } html.ds-sidebar-compact-preload .ds-sidebar #sidebarCollapseBtn { display: inline-flex; align-items: center; margin-left: 0 !important; width: 36px; height: 32px; padding: 0; justify-content: center; line-height: 1; border-radius: var(--ds-radius); } html.ds-sidebar-compact-preload .ds-sidebar #sidebarCollapseBtn i { display: block; line-height: 1; margin: 0; } html.ds-sidebar-compact-preload .ds-sidebar .ds-sidebar-brand-icon { width: 36px; height: 36px; margin: 0; border-radius: 12px; } html.ds-sidebar-compact-preload .ds-sidebar .ds-nav-link { justify-content: center; padding: 8px 6px; margin: 2px 4px; } html.ds-sidebar-compact-preload .ds-sidebar .ds-nav-link i { margin-right: 0; } html.ds-sidebar-compact-preload .ds-sidebar .ds-nav-section-title { display: block; height: 1px; margin: 8px 12px; padding: 0; background: var(--ds-border); overflow: hidden; text-indent: -9999px; } } @media (max-width: 1023px) { .ds-sidebar { transform: translateX(-100%); } .ds-sidebar.open { transform: translateX(0); } } .ds-main { margin-left: var(--ds-sidebar-width); flex: 1; min-width: 0; width: calc(100vw - var(--ds-sidebar-width)); max-width: calc(100vw - var(--ds-sidebar-width)); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .25s ease; } .ds-sidebar.collapsed ~ .ds-main { margin-left: var(--ds-sidebar-collapsed); width: calc(100vw - var(--ds-sidebar-collapsed)); max-width: calc(100vw - var(--ds-sidebar-collapsed)); } @media (max-width: 1023px) { .ds-main { margin-left: 0; width: 100vw; max-width: 100vw; } } .ds-header { position: sticky; top: 0; height: var(--ds-header-height); background: color-mix(in srgb, var(--ds-bg-primary) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 30; } .ds-content { flex: 1; padding: 24px; } @media (max-width: 767px) { .ds-content { padding: 16px; } } .ds-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 35; display: none; } .ds-backdrop.visible { display: block; } /* --- Sidebar internals ----------------------------------------- */ .ds-sidebar-brand { display: flex; align-items: center; padding: 16px 14px; gap: 10px; } .ds-sidebar-brand-icon { width: 36px; height: 36px; background: var(--ds-accent-blue); border-radius: var(--ds-radius); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; } .ds-sidebar-brand-text h1 { font-size: 18px; font-weight: 700; margin: 0; color: var(--ds-text-primary); } .ds-sidebar-brand-text p { font-size: 11px; color: var(--ds-text-muted); margin: 0; } .ds-nav-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ds-text-muted); padding: 20px 14px 8px; } .ds-nav-link { display: flex; align-items: center; padding: 8px 14px; border-radius: var(--ds-radius); color: var(--ds-text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; position: relative; } .ds-nav-link i { width: 20px; text-align: center; margin-right: 10px; font-size: 14px; } .ds-nav-link:hover { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); text-decoration: none; } .ds-nav-link.active { background: var(--ds-accent-blue-subtle); color: var(--ds-accent-blue); font-weight: 600; } .ds-nav-link.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 0 4px 4px 0; background: var(--ds-accent-blue); } .ds-sidebar-footer { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--ds-border); display: flex; flex-direction: column; gap: 4px; } .ds-sidebar-footer .ds-nav-link:hover { background: var(--ds-danger-subtle); color: var(--ds-danger); } /* --- Header ---------------------------------------------------- */ .ds-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ds-text-secondary); } .ds-breadcrumb a { color: var(--ds-text-secondary); } .ds-breadcrumb a:hover { color: var(--ds-text-primary); } .ds-breadcrumb .separator { color: var(--ds-text-muted); } .ds-breadcrumb .current { color: var(--ds-text-primary); font-weight: 600; } .ds-header-actions { display: flex; align-items: center; gap: var(--ds-action-gap); } /* --- Cards ----------------------------------------------------- */ .ds-card { background: var(--ds-bg-secondary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 20px; box-shadow: none; transition: border-color .2s, background .2s; /* Audit fix: pin card to its container width so a long inner select/details doesn't shrinkwrap the card and cause horizontal reflow on open/close. */ display: block; width: 100%; box-sizing: border-box; } .ds-card:hover { border-color: var(--ds-text-muted); box-shadow: none; transform: none; } .ds-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px 24px; border: 1px dashed color-mix(in srgb, var(--ds-border) 84%, transparent); border-radius: 16px; background: linear-gradient( 180deg, color-mix(in srgb, var(--ds-bg-secondary) 92%, transparent), color-mix(in srgb, var(--ds-bg-tertiary) 78%, transparent) ); } .ds-empty-state--compact { gap: 12px; padding: 28px 20px; border-radius: 14px; } .ds-empty-state__icon { width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ds-accent-blue) 14%, var(--ds-bg-primary)); color: var(--ds-accent-blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-accent-blue) 18%, transparent); font-size: 24px; } .ds-empty-state--compact .ds-empty-state__icon { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; } .ds-empty-state__title { font-size: 18px; font-weight: 700; color: var(--ds-text-primary); line-height: 1.25; } .ds-empty-state--compact .ds-empty-state__title { font-size: 16px; } .ds-empty-state__text { max-width: 48ch; margin: 0; color: var(--ds-text-secondary); font-size: 13px; line-height: 1.6; } .ds-empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ds-empty-state__meta { font-size: 12px; color: var(--ds-text-muted); } @media (max-width: 767px) { .ds-empty-state { padding: 32px 18px; } .ds-empty-state__actions { width: 100%; } .ds-empty-state__actions .ds-btn { width: 100%; justify-content: center; } } .ds-card-compact { padding: 16px; } /* --- Tables ---------------------------------------------------- */ .ds-table { width: 100%; border-collapse: collapse; } .ds-table th { background: var(--ds-bg-tertiary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ds-text-muted); padding: 10px 16px; text-align: left; border-bottom: 2px solid var(--ds-border); } .ds-table td { padding: 12px 16px; border-bottom: 1px solid var(--ds-border-muted); font-size: 13px; color: var(--ds-text-primary); } .ds-table tr:hover td { background: var(--ds-bg-tertiary); } .ds-table .mono { font-family: var(--ds-font-mono); font-size: 12px; } /* --- Status dots ----------------------------------------------- */ .ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; } .ds-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ds-dot-success { background: var(--ds-success); } .ds-dot-warning { background: var(--ds-warning); } .ds-dot-danger { background: var(--ds-danger); } .ds-dot-muted { background: var(--ds-text-muted); } .ds-dot-running { background: var(--ds-success); animation: ds-pulse 2s infinite; } @keyframes ds-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } /* --- Badges ---------------------------------------------------- */ .ds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .2px; border: 1px solid transparent; } .ds-badge-blue { background: var(--ds-accent-blue-subtle); color: var(--ds-accent-blue); border-color: rgba(37,99,235,0.25); } .ds-badge-purple { background: var(--ds-accent-purple-subtle); color: var(--ds-accent-purple); border-color: rgba(139,92,246,0.25); } .ds-badge-green { background: var(--ds-success-subtle); color: var(--ds-success); border-color: rgba(63,185,80,0.25); } .ds-badge-amber { background: var(--ds-warning-subtle); color: var(--ds-warning); border-color: rgba(210,153,34,0.25); } .ds-badge-red { background: var(--ds-danger-subtle); color: var(--ds-danger); border-color: rgba(248,81,73,0.25); } .ds-badge-gray { background: var(--ds-bg-tertiary); color: var(--ds-text-secondary); border-color: var(--ds-border); } .ds-badge-slate { background: var(--ds-bg-tertiary); color: var(--ds-text-secondary); border-color: var(--ds-border); } .ds-badge i { color: currentColor; } /* --- Buttons --------------------------------------------------- */ .ds-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; font-family: inherit; border-radius: var(--ds-radius); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; line-height: 1.5; } .ds-btn-primary { background: var(--ds-accent-blue); color: var(--ds-text-on-accent); border-color: transparent; box-shadow: none; } .ds-btn-primary:hover { background: #1d4ed8; box-shadow: none; } .ds-btn-secondary { background: transparent; color: var(--ds-text-primary); border-color: var(--ds-border); } .ds-btn-secondary:hover { background: var(--ds-bg-tertiary); } .ds-toggle-active { background: var(--ds-accent-blue); color: var(--ds-text-on-accent); border-color: var(--ds-accent-blue); } .ds-toggle-inactive { background: var(--ds-bg-tertiary); color: var(--ds-text-secondary); border-color: var(--ds-border); } .ds-toggle-inactive:hover { background: var(--ds-bg-secondary); } .ds-btn-danger { background: var(--ds-danger); color: var(--ds-text-on-accent); border-color: var(--ds-danger); } .ds-btn-danger:hover { background: #da3633; } .ds-btn-success { background: var(--ds-success); color: var(--ds-text-on-accent); border-color: transparent; box-shadow: none; } .ds-btn-success:hover { background: #2ea043; box-shadow: none; } .ds-btn-purple { background: var(--ds-accent-purple); color: var(--ds-text-on-accent); border-color: transparent; box-shadow: none; } .ds-btn-purple:hover { background: #7c3aed; box-shadow: none; } .ds-btn-ghost { background: transparent; color: var(--ds-text-secondary); border: none; } .ds-btn-ghost:hover { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); } .ds-btn-sm { padding: 4px 10px; font-size: 12px; } .ds-btn-lg { padding: 8px 18px; font-size: 14px; } .ds-btn-icon { width: 34px; min-width: 34px; height: 34px; justify-content: center; padding: 0; gap: 0; } .ds-btn-icon.ds-btn-sm { width: 30px; min-width: 30px; height: 30px; padding: 0; } .ds-btn-icon i { margin: 0; } .ds-btn.ds-btn-icon, .ds-btn.ds-btn-icon.ds-btn-primary, .ds-btn.ds-btn-icon.ds-btn-success, .ds-btn.ds-btn-icon.ds-btn-danger, .ds-btn.ds-btn-icon.ds-btn-purple { background: transparent; color: var(--ds-text-secondary); border: none; box-shadow: none; } .ds-btn.ds-btn-icon:hover, .ds-btn.ds-btn-icon:focus-visible, .ds-btn.ds-btn-icon.ds-btn-primary:hover, .ds-btn.ds-btn-icon.ds-btn-success:hover, .ds-btn.ds-btn-icon.ds-btn-danger:hover, .ds-btn.ds-btn-icon.ds-btn-purple:hover { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); border: none; box-shadow: none; } .ds-btn.ds-btn-icon i, .ds-btn.ds-btn-icon.ds-btn-primary i, .ds-btn.ds-btn-icon.ds-btn-success i, .ds-btn.ds-btn-icon.ds-btn-danger i, .ds-btn.ds-btn-icon.ds-btn-purple i { color: currentColor; } .sandbox-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-action-gap); min-width: 72px; white-space: nowrap; flex-wrap: nowrap; } :where( .pipeline-row-actions, .pipeline-card-actions, .issue-row-actions, .process-row-actions, .repo-row-actions, .issue-flat-actions, .issue-log-actions, .qa-topline-actions, .qa-row-actions, .gitops-topline-actions, .sandbox-row-actions, .sandbox-secondary-actions, .console-header, .byok-actions, .byok-editor-actions, .ms-issue-actions, .ms-exec-actions ) { gap: var(--ds-action-gap) !important; } button:disabled, .ds-btn:disabled, .ds-toggle-active:disabled, .ds-toggle-inactive:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; box-shadow: none; } /* --- Operational action menu ---------------------------------- */ .ds-op-menu-wrap { position: relative; display: inline-flex; align-items: center; gap: var(--ds-action-gap); } .ds-op-menu-trigger { min-width: 34px; width: 34px; height: 34px; justify-content: center; padding-inline: 0; border: none !important; box-shadow: none !important; } .ds-op-menu-trigger:hover, .ds-op-menu-trigger:focus-visible { border: none !important; } .ds-op-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1300; display: none; width: min(320px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 150px)); overflow: auto; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-bg-secondary); box-shadow: var(--ds-shadow-lg); padding: 6px 0; } .ds-op-menu.open { display: block; } .ds-op-menu .hidden { display: none !important; } .ds-op-menu-section { padding: 4px 8px; border-top: 1px solid var(--ds-border-muted); } .ds-op-menu-section:first-child { border-top: none; padding-top: 2px; } .ds-op-menu-title { padding: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--ds-text-secondary); } .ds-op-menu .ds-btn, .ds-op-menu .ds-op-menu-item { appearance: none; width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0; padding: 6px 8px; border: 0 !important; border-radius: 6px; background: transparent !important; box-shadow: none !important; color: var(--ds-text-primary) !important; font-size: 13px; font-weight: 400; line-height: 1.35; text-align: left; text-decoration: none; } .ds-op-menu .ds-btn i, .ds-op-menu .ds-op-menu-item i { width: 18px; min-width: 18px; text-align: center; color: var(--ds-text-secondary); font-size: 14px; } .ds-op-menu .ds-btn:hover, .ds-op-menu .ds-btn:focus-visible, .ds-op-menu .ds-op-menu-item:hover, .ds-op-menu .ds-op-menu-item:focus-visible { background: var(--ds-bg-tertiary) !important; color: var(--ds-text-primary) !important; text-decoration: none; outline: none; } .ds-op-menu .ds-btn:hover i, .ds-op-menu .ds-btn:focus-visible i, .ds-op-menu .ds-op-menu-item:hover i, .ds-op-menu .ds-op-menu-item:focus-visible i { color: var(--ds-text-primary); } .ds-op-menu .ds-btn.danger, .ds-op-menu .ds-op-menu-item.danger { color: var(--ds-danger) !important; } .ds-op-menu .ds-btn.danger i, .ds-op-menu .ds-op-menu-item.danger i { color: var(--ds-danger) !important; } .ds-op-menu .ds-btn:disabled, .ds-op-menu .ds-btn[aria-disabled="true"], .ds-op-menu .ds-op-menu-item[aria-disabled="true"] { opacity: .48; cursor: not-allowed; background: transparent !important; color: var(--ds-text-muted) !important; pointer-events: none; } .ds-op-icon-btn { min-width: 34px; width: 34px; height: 34px; justify-content: center; padding-inline: 0; border-color: transparent; background: transparent; box-shadow: none; color: var(--ds-text-secondary); } .ds-op-icon-btn:hover, .ds-op-icon-btn:focus-visible { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); border-color: transparent; } .ds-op-icon-btn.is-active, .ds-op-icon-btn[aria-pressed="true"] { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); } /* --- Icon discipline ------------------------------------------ */ .ds-nav-link > i, .ds-theme-toggle > i, .ds-tab > i, .ds-kpi-main > i, .ds-status-chip > i, .ds-status-meta-item > i, .ds-toolbar .ds-btn:not(.ds-btn-primary):not(.ds-btn-danger):not(.ds-btn-success) > i { color: var(--ds-text-secondary); } .ds-nav-link:hover > i, .ds-nav-link.active > i, .ds-theme-toggle:hover > i, .ds-tab:hover > i, .ds-tab.active > i { color: var(--ds-text-primary); } .ds-kpi-main > i { width: 20px; min-width: 20px; text-align: center; font-size: 17px; } .ds-btn:not(.ds-btn-primary):not(.ds-btn-danger):not(.ds-btn-success):not(.ds-btn-purple) > i { color: currentColor; } .ds-btn-primary > i, .ds-btn-danger > i, .ds-btn-success > i, .ds-btn-purple > i { color: currentColor; } /* --- Toolbar -------------------------------------------------- */ .ds-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; flex-wrap: wrap; } .ds-toolbar-group { display: flex; align-items: center; gap: 4px; } .ds-toolbar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ds-text-muted); margin-right: 2px; } .ds-toolbar-divider { width: 1px; height: 24px; background: var(--ds-border); margin: 0 6px; flex-shrink: 0; } /* --- Status bar ------------------------------------------------ */ .ds-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; gap: 12px; } .ds-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ds-status-dot.pulse { animation: ds-pulse 2s infinite; } .ds-status-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 14px; } .ds-status-chip, .ds-status-meta-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--ds-bg-tertiary); border: 1px solid var(--ds-border); color: var(--ds-text-secondary); max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-status-chip .chip-label, .ds-status-meta-item .status-meta-label { font-weight: 400; color: var(--ds-text-muted); } /* --- Config popover -------------------------------------------- */ .ds-config-popover { display: none; padding: 12px 14px; border-top: 1px dashed var(--ds-border-muted); background: var(--ds-bg-tertiary); flex-wrap: wrap; gap: 10px; align-items: end; } .ds-config-popover.open { display: flex; } /* --- Toggle switch (two-state) --------------------------------- */ .ds-toggle-switch { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: 99px; background: var(--ds-bg-primary); border: 1px solid var(--ds-border); cursor: pointer; } .ds-toggle-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 99px; background: var(--ds-accent-blue); box-shadow: 0 1px 4px rgba(37,99,235,0.35); transition: transform .22s cubic-bezier(.4,0,.2,1); z-index: 0; } .ds-toggle-switch.right::before { transform: translateX(100%); } .ds-toggle-option { appearance: none; border: none; background: transparent; color: var(--ds-text-muted); border-radius: 99px; padding: 4px 14px; font-size: 11px; font-weight: 700; font-family: inherit; line-height: 1.2; cursor: pointer; position: relative; z-index: 1; transition: color .22s ease; text-transform: uppercase; letter-spacing: .3px; } .ds-toggle-option.active { color: var(--ds-text-on-accent); } .ds-toggle-option:disabled { opacity: 0.45; cursor: not-allowed; } /* --- Sidebar link list ----------------------------------------- */ .ds-sidebar-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ds-text-muted); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--ds-border-muted); } .ds-sidebar-section-title.danger { color: var(--ds-danger); border-color: color-mix(in srgb, var(--ds-danger) 20%, transparent); } .ds-sidebar-danger-zone { border: 1px solid color-mix(in srgb, var(--ds-danger) 25%, transparent); border-radius: var(--ds-radius); padding: 10px 12px; background: var(--ds-danger-subtle); } .ds-sidebar-links { display: grid; gap: 2px; } .ds-sidebar-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--ds-accent-blue); border-radius: var(--ds-radius); text-decoration: none; cursor: pointer; transition: background 0.15s; } .ds-sidebar-link:hover { background: var(--ds-bg-tertiary); text-decoration: none; } .ds-sidebar-link i { width: 16px; text-align: center; color: var(--ds-text-muted); font-size: 12px; } .ds-sidebar-link.danger { color: var(--ds-danger); } .ds-sidebar-link.danger i { color: var(--ds-danger); } .ds-sidebar-link.muted { color: var(--ds-text-secondary); } /* --- Form inputs ----------------------------------------------- */ .ds-input { background: var(--ds-bg-tertiary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--ds-text-primary); width: 100%; transition: border-color .15s, box-shadow .15s; outline: none; } .ds-input::placeholder { color: var(--ds-text-muted); } .ds-input:focus { border-color: var(--ds-accent-blue); box-shadow: 0 0 0 3px var(--ds-accent-blue-subtle); outline: none; } .ds-input:disabled, .ds-select:disabled, textarea:disabled, select:disabled, input:disabled { opacity: 0.75; cursor: not-allowed; } .ds-select { appearance: none; background: var(--ds-bg-tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right: 32px; } /* --- Code blocks ----------------------------------------------- */ .ds-code { background: #0d1117; border: 1px solid #30363d; border-radius: var(--ds-radius); padding: 16px; font-family: var(--ds-font-mono); font-size: 12px; color: #e6edf3; overflow-x: auto; line-height: 1.5; } /* --- KPI metric cards ------------------------------------------ */ .ds-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .ds-kpi-card { background: var(--ds-bg-secondary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 14px 16px; box-shadow: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ds-kpi-card:hover { border-color: var(--ds-border); box-shadow: none; transform: none; } .ds-kpi-label { color: var(--ds-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; } .ds-kpi-main { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ds-text-primary); } .ds-kpi-main i { color: var(--ds-text-secondary); flex: 0 0 auto; width: 20px; min-width: 20px; text-align: center; font-size: 17px; opacity: 1; } .ds-kpi-value { color: var(--ds-text-primary); font-size: 24px; font-weight: 700; line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-kpi-hint { color: var(--ds-text-secondary); font-size: 11px; line-height: 1.35; min-height: 15px; } .ds-kpi { display: flex; align-items: center; gap: 14px; } .ds-kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; position: relative; } /* --- Tabs ------------------------------------------------------ */ .ds-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ds-border); margin-bottom: 20px; } .ds-tab { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--ds-text-secondary); border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; background: none; border-top: none; border-left: none; border-right: none; } .ds-tab:hover { color: var(--ds-text-primary); } .ds-tab.active { color: var(--ds-text-primary); border-bottom-color: var(--ds-accent-blue); font-weight: 600; } /* --- Progress bar ---------------------------------------------- */ .ds-progress { height: 8px; background: var(--ds-bg-tertiary); border-radius: 9999px; overflow: hidden; } .ds-progress-bar { height: 100%; border-radius: 9999px; background: var(--ds-accent-blue); transition: width .5s ease; } /* --- Theme toggle ---------------------------------------------- */ .ds-theme-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--ds-radius); color: var(--ds-text-secondary); font-size: 13px; cursor: pointer; transition: background .15s; border: none; background: none; width: 100%; font-family: inherit; } .ds-theme-toggle:hover { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); } /* --- Toast ----------------------------------------------------- */ .ds-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .ds-toast { background: var(--ds-bg-secondary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 14px 18px; font-size: 13px; color: var(--ds-text-primary); box-shadow: var(--ds-shadow-lg); display: flex; align-items: center; gap: 12px; min-width: 320px; animation: ds-toast-in .3s ease; } .ds-toast-success { border-left: 3px solid var(--ds-success); } .ds-toast-error { border-left: 3px solid var(--ds-danger); } .ds-toast-warning { border-left: 3px solid var(--ds-warning); } .ds-toast-info { border-left: 3px solid var(--ds-info); } @keyframes ds-toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* --- Utility --------------------------------------------------- */ .ds-text-secondary { color: var(--ds-text-secondary); } .ds-text-muted { color: var(--ds-text-muted); } .ds-text-success { color: var(--ds-success); } .ds-text-warning { color: var(--ds-warning); } .ds-text-danger { color: var(--ds-danger); } .ds-bg-tertiary { background: var(--ds-bg-tertiary); } .ds-border-b { border-bottom: 1px solid var(--ds-border); } .ds-mono { font-family: var(--ds-font-mono); } .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Modal overlay --------------------------------------------- */ .ds-modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; } .ds-modal-overlay.hidden { display: none; } /* --- SweetAlert2: corporate theme (dark/light aware) ---------- */ .swal2-popup { background: var(--ds-bg-secondary) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; box-shadow: var(--ds-shadow-lg) !important; font-size: 13px !important; padding: 20px !important; width: auto !important; max-width: 520px !important; } .swal2-popup .swal2-title, .swal2-popup h2.swal2-title { color: var(--ds-text-primary) !important; font-size: 16px !important; font-weight: 600 !important; padding: 0 0 12px 0 !important; margin: 0 !important; line-height: 1.3 !important; } .swal2-html-container { color: var(--ds-text-secondary) !important; font-size: 13px !important; line-height: 1.5 !important; margin: 8px 0 16px 0 !important; padding: 0 !important; } .swal2-actions { gap: 8px !important; margin: 12px 0 0 0 !important; } .swal2-styled { border-radius: var(--ds-radius) !important; font-weight: 600 !important; font-size: 13px !important; padding: 6px 14px !important; box-shadow: none !important; } .swal2-icon { font-size: 14px !important; width: 48px !important; height: 48px !important; margin: 0 auto 12px !important; } .swal2-icon .swal2-icon-content { font-size: 24px !important; } .swal2-validation-message { font-size: 12px !important; padding: 6px 10px !important; } .swal2-styled:focus { box-shadow: 0 0 0 2px var(--ds-ring) !important; } .swal2-cancel { background: var(--ds-bg-tertiary) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-border) !important; } .swal2-loader { border-color: var(--ds-accent-blue) transparent var(--ds-accent-blue) transparent !important; } /* Inputs inside Swal (including custom HTML content) */ .swal2-popup .swal2-input, .swal2-popup .swal2-textarea, .swal2-popup .swal2-select, .swal2-popup input:not([type="checkbox"]):not([type="radio"]), .swal2-popup textarea, .swal2-popup select { background: var(--ds-bg-tertiary) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-border) !important; font-size: 13px !important; padding: 6px 10px !important; height: auto !important; min-height: 32px !important; margin: 4px 0 !important; width: 100% !important; box-sizing: border-box !important; } .swal2-popup .swal2-textarea { min-height: 80px !important; } .swal2-popup .swal2-input::placeholder, .swal2-popup .swal2-textarea::placeholder, .swal2-popup input::placeholder, .swal2-popup textarea::placeholder { font-size: 13px !important; } .swal2-popup label { font-size: 13px !important; } .swal2-popup .swal2-input::placeholder, .swal2-popup .swal2-textarea::placeholder, .swal2-popup input::placeholder, .swal2-popup textarea::placeholder { color: var(--ds-text-muted) !important; } .swal2-popup .swal2-input:focus, .swal2-popup .swal2-textarea:focus, .swal2-popup .swal2-select:focus, .swal2-popup input:focus, .swal2-popup textarea:focus, .swal2-popup select:focus { border-color: var(--ds-accent-blue) !important; box-shadow: 0 0 0 2px var(--ds-ring) !important; } /* Tailwind utility overrides used inside Swal custom HTML */ .swal2-popup .text-slate-500, .swal2-popup .text-slate-600, .swal2-popup .text-slate-700 { color: var(--ds-text-secondary) !important; } .swal2-popup .border-slate-200, .swal2-popup .border-slate-300 { border-color: var(--ds-border) !important; } .swal2-popup .bg-slate-50, .swal2-popup .bg-white { background: var(--ds-bg-tertiary) !important; } .swal2-popup code { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); border: 1px solid var(--ds-border); border-radius: 6px; padding: 1px 5px; } /* --- SweetAlert2: ds-swal-* custom classes (for buttonsStyling:false) --- */ .ds-swal-popup { background: var(--ds-bg-secondary) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; box-shadow: var(--ds-shadow-lg) !important; } .ds-swal-title { color: var(--ds-text-primary) !important; font-size: 1.15rem !important; font-weight: 700 !important; } .ds-swal-content { color: var(--ds-text-secondary) !important; font-size: 0.88rem !important; } .ds-swal-confirm { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: var(--ds-radius); font-weight: 600; font-size: 0.85rem; cursor: pointer; border: none; background: var(--ds-accent-blue) !important; color: #fff !important; transition: opacity 0.15s; } .ds-swal-confirm:hover { opacity: 0.9; } .ds-swal-confirm:focus { box-shadow: 0 0 0 2px var(--ds-ring) !important; outline: none; } .ds-swal-cancel { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: var(--ds-radius); font-weight: 600; font-size: 0.85rem; cursor: pointer; background: var(--ds-bg-tertiary) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-border) !important; transition: background 0.15s; } .ds-swal-cancel:hover { background: var(--ds-bg-secondary) !important; } .ds-swal-cancel:focus { box-shadow: 0 0 0 2px var(--ds-ring) !important; outline: none; } /* --- Togglable form sections ----------------------------------- */ .ds-form-section { display: flex; flex-direction: column; gap: 16px; } .ds-form-section.hidden { display: none; } /* --- Operational UI normalization ------------------------------- Legacy pages still define local cards, heroes, gradients and metric variants. Keep the visual contract centralized while those pages are migrated structurally. Scope to the authenticated app shell so auth screens can keep their standalone brand treatment. */ .ds-main [style*="linear-gradient"], .ds-main [style*="radial-gradient"] { background: var(--ds-bg-secondary) !important; color: var(--ds-text-primary) !important; border-color: var(--ds-border) !important; box-shadow: none !important; } .ds-main [class*="hero"], .ds-main .glass-card, .ds-main .home-card, .ds-main .home-empty, .ds-main .home-alert-item, .ds-main .home-list-item, .ds-main .id-card, .ds-main .id-panel, .ds-main .im-sub-card, .ds-main .section-card, .ds-main .trace-card, .ds-main .sandbox-card, .ds-main .console-card, .ds-main .qa-card, .ds-main .repo-source-card, .ds-main .repo-inline-card, .ds-main .repo-advanced-card, .ds-main .repo-review-panel, .ds-main .repo-review-kpi, .ds-main .byok-hero, .ds-main .byok-hero-panel, .ds-main .byok-feedback-card, .ds-main .metric-card, .ds-main .stat-card, .ds-main .qa-metric, .ds-main .qa-metric-box, .ds-main .loading-card { background: var(--ds-bg-secondary) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; box-shadow: none !important; } .ds-main .ds-empty-state { background: var(--ds-bg-secondary) !important; border-color: var(--ds-border) !important; box-shadow: none !important; } .ds-main .glass-card, .ds-main .repo-review-kpi, .ds-main .qa-metric, .ds-main .qa-metric-box, .ds-main .metric-card, .ds-main .stat-card { padding: 14px 16px !important; } .ds-main .ds-kpi-icon, .ds-main .kpi-indicator, .ds-main [class*="metric-icon"], .ds-main [class*="stat-icon"] { background: transparent !important; color: var(--ds-text-secondary) !important; border-color: var(--ds-border) !important; box-shadow: none !important; } .ds-main .ds-kpi-icon i, .ds-main .kpi-indicator i, .ds-main [class*="metric-icon"] i, .ds-main [class*="stat-icon"] i, .ds-main .ds-btn-secondary i, .ds-main .ds-btn-ghost i, .ds-main .ds-op-menu i, .ds-main .ds-tab i, .ds-main .ms-tab i { color: var(--ds-text-secondary) !important; } .ds-main .ds-btn-ghost { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); } .ds-main .ds-btn-ghost.ds-btn-icon, .ds-main .ds-btn-ghost.ds-op-menu-trigger, .ds-main .ds-btn.ds-btn-icon { border: none !important; } .ds-main .ds-header-actions .ds-btn-success { background: var(--ds-accent-blue); color: var(--ds-text-on-accent); border-color: transparent; box-shadow: none; } .ds-main .ds-header-actions .ds-btn-success:hover { background: #1d4ed8; box-shadow: none; } .ds-main .ds-header-actions .ds-btn-danger { background: transparent; color: var(--ds-text-primary); border-color: var(--ds-border); box-shadow: none; } .ds-main .ds-header-actions .ds-btn-danger:hover { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); } /* --- Custom scrollbar ------------------------------------------ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ds-bg-primary); } ::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ds-text-muted); } /* --- Stat number formatting ------------------------------------- */ .ds-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* --- Page enter animation -------------------------------------- */ .ds-content { animation: ds-page-enter .4s ease-out; } @keyframes ds-page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }