/* =========================================================================== sui.css · Syphnosys UI — the single authored stylesheet --------------------------------------------------------------------------- Replaces app.css + custom.css. Third-party code is NOT merged in: Bootstrap, Bootstrap Icons and Tom Select stay untouched in css/vendor/ and fonts/. Load order on every page: 1. css/vendor/bootstrap.min.css 2. fonts/icons/bootstrap-icons.min.css 3. css/vendor/tom-select.bootstrap5.min.css 4. css/sui.css <- this file, last STRUCTURE — two halves, in their original cascade order: PART A · base layer (was app.css) sections 0-18 PART B · skin + shell (was custom.css) sections 0-15 + unnumbered blocks Part B still overrides Part A for ~40 selectors. That is deliberate: this merge preserves the exact cascade the two files produced, so it renders byte-identically to what it replaces. Collapsing those 40 pairs into single rules is a follow-up pass, done one component at a time with a screenshot diff after each. Already removed as dead (verified: no `class="top-nav"` in any view, in any panel): the .top-nav blocks from both files, their responsive and dark-mode variants, and the .sui-notif-count rule that targeted the old navbar bell. Conventions kept from custom.css: · every new class is prefixed .sui-* · every new variable is prefixed --sui-* · component rules are scoped under `.sui-app` on =========================================================================== */ /* =========================================================================== PART A · base layer (was app.css) =========================================================================== */ /* ============================================================= AdminKit · catchy + minimal Loaded after bootstrap.min.css on every page. ============================================================= */ /* ------------------------------------------------------------- */ /* 0. Fonts · Inter (18pt optical-size — designed for UI text) */ /* 8 TTF files in public/fonts/inter/ wired below — Regular */ /* / Medium / SemiBold / Bold with matching italics. */ /* ------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/Inter_18pt-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/inter/Inter_18pt-Italic.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/Inter_18pt-Medium.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/inter/Inter_18pt-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/Inter_18pt-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/inter/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/Inter_18pt-Bold.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/inter/Inter_18pt-BoldItalic.ttf') format('truetype'); } /* ------------------------------------------------------------- */ /* 1. Tokens */ /* ------------------------------------------------------------- */ :root { --brand: #4f46e5; --brand-2: #7c3aed; --brand-soft: rgba(79, 70, 229, .12); --brand-ring: rgba(79, 70, 229, .18); --brand-press: #4338ca; --bg: #f6f7fb; --surface: #ffffff; --surface-alt: #fafbfc; --text: #0f172a; --muted: #64748b; --muted-soft: #94a3b8; --border: #e2e8f0; --border-soft: #f1f5f9; --hover-row: #f8fafc; --sidebar-bg: #0f172a; --sidebar-fg: #cbd5e1; --code-bg: #0f172a; --code-fg: #e2e8f0; --radius: .55rem; --radius-lg: .9rem; --ease: cubic-bezier(.4, 0, .2, 1); --t-fast: .12s; --t-base: .18s; --ring: 0 0 0 3px var(--brand-ring); --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 4px 14px rgba(15, 23, 42, .06); --shadow-lg: 0 20px 50px rgba(15, 23, 42, .12); --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bs-body-font-family: var(--bs-font-sans-serif); } /* ------------------------------------------------------------- */ /* 2. Base */ /* ------------------------------------------------------------- */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; font-feature-settings: 'ss01', 'ss02', 'ss03', 'kern'; text-rendering: optimizeLegibility; letter-spacing: -.005em; } body { background: var(--bg); color: var(--text); } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-press); } code { color: inherit; background: transparent; padding: 0; font-size: .9em; } ::selection { background: var(--brand-soft); color: var(--text); } /* Focus ring (uniform) */ *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible { outline: 0; box-shadow: var(--ring); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--brand); color: #fff; padding: .5rem 1rem; border-radius: var(--radius); z-index: 9999; font-weight: 600; } .skip-link:focus { left: 8px; outline: 2px solid #fff; outline-offset: 2px; color: #fff; } /* ------------------------------------------------------------- */ /* 3. Layout utilities · content shell */ /* ------------------------------------------------------------- */ /* Brand logo size tokens — replace inline style="max-height:Npx" in views. */ .brand-logo { max-height: 28px; width: auto; } .brand-logo-md { max-height: 36px; width: auto; } /* Table cell width utilities — used for "label : value" tables on detail pages. */ .col-label { width: 140px; min-width: 140px; } .col-label-sm { width: 5rem; min-width: 5rem; } /* Code/log preview pane — fixed-height scroll box for tail output. */ .log-tail { max-height: 340px; overflow: auto; } /* Audit/activity "When" column — fixed width to keep timestamps tidy. */ .col-when { width: 7rem; min-width: 7rem; } .content { padding: 1.5rem; min-height: calc(100vh - 56px - 60px); } /* ------------------------------------------------------------- */ /* 4. Cards */ /* ------------------------------------------------------------- */ .card { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: none; transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .card-header { background: transparent; border-bottom: 1px solid var(--border-soft); padding: .9rem 1.1rem; font-weight: 600; } .card-footer { background: transparent; border-top: 1px solid var(--border-soft); padding: .9rem 1.1rem; } /* Dashboard KPI card — coloured-soft background that matches its icon hue. */ /* Hover gives a noticeable lift + colour-matched glow + icon pop. */ .stat-card { display: block; height: 100%; padding: 1.1rem 1.15rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } /* Decorative diagonal sheen on the card — invisible at rest, slides across */ /* on hover. Pure CSS, no JS. */ .stat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-100%); transition: transform .6s var(--ease); pointer-events: none; } a.stat-card { color: inherit; text-decoration: none; } a.stat-card:hover, a.stat-card:focus-visible { transform: translateY(-1px); color: inherit; } /* Sheen sweep disabled for the minor-hover treatment — too flashy for the */ /* light-gray look. */ /* All stat-card variants share a soft light-gray background — calm, */ /* neutral, so the data does the talking. */ .stat-card-primary, .stat-card-warning, .stat-card-danger, .stat-card-success, .stat-card-info { background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%); border-color: var(--border-soft); color: var(--text); } /* Stat icon on the light surface — keep the existing solid colour set on */ /* the via bg-primary / bg-warning utilities; just ensure the glyph */ /* stays readable. */ /* Hover: minor — barely-there bg shift + small neutral shadow. */ a.stat-card-primary:hover, a.stat-card-warning:hover, a.stat-card-danger:hover, a.stat-card-success:hover, a.stat-card-info:hover { background: linear-gradient(135deg, #cbd5e1 0%, #e2e8f0 100%); border-color: var(--border); box-shadow: var(--shadow-sm); color: var(--text); } a.stat-card:active { transform: translateY(0); transition-duration: .08s; } /* Dark mode — keep the same brand gradient (already reads well on dark). */ body.dark-mode .stat-card::after { background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); } .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease); position: relative; z-index: 1; } a.stat-card:hover .stat-icon { transform: scale(1.03); } .stat-icon-md { width: 40px; height: 40px; } .stat-icon-sm { width: 36px; height: 36px; font-size: .9rem; } /* Make sure the number/label text stay above the sliding sheen pseudo-el. */ .stat-card > * { position: relative; z-index: 1; } /* Status / severity pills on bug rows — slightly smaller than .badge default. */ .badge-status { font-size: .72rem; padding: .3em .6em; } /* AI-assist side panel — distinguishes itself from regular cards with a */ /* dashed border and soft surface so users notice it is AI-generated UI. */ .ai-panel { background: var(--surface-alt); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 1rem; } .ai-btn { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border: 0; color: #fff; font-weight: 500; } .ai-btn:hover, .ai-btn:focus { color: #fff; opacity: .95; box-shadow: 0 4px 12px rgba(124, 58, 237, .25); } .ai-btn:active { color: #fff; opacity: 1; } /* Attachment thumbnail square — used on bug view + apps form icon preview. */ .attachment-thumb { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-alt); } /* Gujarati script textareas — distinct font so the user can tell the EN */ /* and GU summary fields apart visually. */ textarea.gujarati { font-family: 'Noto Sans Gujarati', 'Inter', sans-serif; } .gujarati { font-family: 'Noto Sans Gujarati', 'Inter', sans-serif; } /* Preserve newlines + wrap — used by bug raw description / steps / summary */ /* fields when rendering free-text the user typed in a textarea. */ .text-prewrap { white-space: pre-wrap; word-wrap: break-word; } /* Bug attachment thumbnail grid cell — fixed-width caption under the thumb */ .attachment-cell { width: 120px; } .attachment-cell .attachment-name { font-size: .8rem; max-width: 120px; } .attachment-cell .attachment-size { font-size: .7rem; color: var(--muted); } /* App icon thumbnail — fixed 36×36 square used in the apps list rows. */ .app-icon-sm { width: 36px; height: 36px; object-fit: cover; } /* Thin progress bar — used inline in tables and on the SLA sidebar card. */ .progress-thin { height: .45rem; } /* Bug-view timeline — single item is a left-border line + content gutter. */ .timeline-item { border-left: 2px solid var(--border-soft); padding-left: 1rem; margin-bottom: 1rem; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item .timeline-meta { font-size: .8rem; color: var(--muted); } /* ------------------------------------------------------------- */ /* 5. Buttons */ /* ------------------------------------------------------------- */ .btn { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: .9rem; --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--radius); /* Bootstrap 5.0.2 does NOT consume --bs-btn-* vars (those are 5.3+ only), so apply them explicitly here. Every variant (.btn-sm, .btn-icon, …) then only overrides the vars and this base rule makes them take effect. */ padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); font-size: var(--bs-btn-font-size); font-weight: var(--bs-btn-font-weight); border-radius: var(--bs-btn-border-radius); letter-spacing: -.005em; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform .06s var(--ease); } .btn:active { transform: translateY(0.5px); } .btn i { line-height: 1; } /* Smaller variant — overrides the vars; the base .btn rule applies them. */ .btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: .4rem; } .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-press); --bs-btn-hover-border-color: var(--brand-press); --bs-btn-active-bg: var(--brand-press); --bs-btn-active-border-color: var(--brand-press); --bs-btn-disabled-bg: #c7d2fe; --bs-btn-disabled-border-color: #c7d2fe; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(79, 70, 229, .25); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(79, 70, 229, .3); } .btn-light { --bs-btn-bg: #f1f5f9; --bs-btn-border-color: #f1f5f9; --bs-btn-color: var(--text); --bs-btn-hover-bg: #e2e8f0; --bs-btn-hover-border-color: #e2e8f0; --bs-btn-hover-color: var(--text); --bs-btn-active-bg: #cbd5e1; } /* The outline variants were retired — every button in the suite is now solid. Their rules were `--bs-btn-*` declarations, which this Bootstrap (5.0.2) does not read anyway, so nothing is lost by dropping them. The one exception was the outline-secondary focus treatment below, which carried real properties; it now applies to `.btn-secondary`, the class those buttons were renamed to, so all 211 secondary buttons share one focus style. */ .btn-secondary:focus-visible, .btn-secondary.focus { border-color: var(--brand); box-shadow: var(--ring); color: var(--brand-press); } /* Solid tone-colored buttons: brand-consistent palette + inset highlight + colored ambient shadow that intensifies on hover. Matches the .btn-primary treatment so all tones feel like one family. */ .btn-danger { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-active-bg: #b91c1c; --bs-btn-disabled-bg: #fca5a5; --bs-btn-disabled-border-color: #fca5a5; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(220, 38, 38, .25); } .btn-danger:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(220, 38, 38, .3); } .btn-warning { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-color: #fff; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #d97706; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #fde68a; --bs-btn-disabled-border-color: #fde68a; --bs-btn-disabled-color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(245, 158, 11, .25); } .btn-warning:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(245, 158, 11, .3); } .btn-success { --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a; --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; --bs-btn-active-bg: #15803d; --bs-btn-disabled-bg: #86efac; --bs-btn-disabled-border-color: #86efac; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(22, 163, 74, .25); } .btn-success:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(22, 163, 74, .3); } .btn-info { --bs-btn-bg: #0284c7; --bs-btn-border-color: #0284c7; --bs-btn-color: #fff; --bs-btn-hover-bg: #0369a1; --bs-btn-hover-border-color: #0369a1; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0369a1; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #7dd3fc; --bs-btn-disabled-border-color: #7dd3fc; --bs-btn-disabled-color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(2, 132, 199, .25); } .btn-info:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(2, 132, 199, .3); } /* Square icon-only button — no text label, clean centered glyph. */ .btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-icon.btn-sm { width: 2rem; height: 2rem; font-size: .85rem; } .btn-icon i.bi { line-height: 1; } .btn-group .btn { border-radius: 0; } .btn-group > .btn:first-child { border-top-left-radius: var(--bs-btn-border-radius); border-bottom-left-radius: var(--bs-btn-border-radius); } .btn-group > .btn:last-child { border-top-right-radius: var(--bs-btn-border-radius); border-bottom-right-radius: var(--bs-btn-border-radius); } /* Equal-width group — every button in the group takes the same width */ .btn-group-equal { display: inline-flex; } .btn-group-equal > .btn { flex: 1 1 0; min-width: 100px; } /* Icon-only buttons */ .btn > i.bi:only-child { display: inline-flex; align-items: center; justify-content: center; } /* ------------------------------------------------------------- */ /* 6. Forms */ /* ------------------------------------------------------------- */ .form-label { font-size: .82rem; font-weight: 500; color: var(--text); margin-bottom: .35rem; } .form-text { font-size: .78rem; color: var(--muted); margin-top: .35rem; } .form-control, .form-select { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .85rem; font-size: .9rem; line-height: 1.5; color: var(--text); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); box-shadow: none; } .form-control::placeholder { color: var(--muted-soft); } .form-control:hover, .form-select:hover { border-color: #cbd5e1; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-alt); color: var(--muted); cursor: not-allowed; border-color: var(--border-soft); } .form-control-sm, .form-select-sm { padding: .45rem .75rem; font-size: .85rem; border-radius: .4rem; } textarea.form-control { padding: .65rem .85rem; resize: vertical; min-height: 6rem; } .form-control.is-invalid, .form-select.is-invalid { border-color: #dc2626; background-image: none; padding-right: .85rem; } .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); } .invalid-feedback { font-size: .78rem; color: #dc2626; } .form-control.is-valid, .form-select.is-valid { border-color: #16a34a; background-image: none; padding-right: .85rem; } .form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); } .valid-feedback { font-size: .78rem; color: #16a34a; } /* Selects — custom caret + native option tint */ .form-select { /* default chevron */ background-image: 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='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-position: right .85rem center; background-size: 12px; padding-right: 2.5rem; /* tints the OS-native option highlight in Chrome / Edge / Safari */ accent-color: var(--brand); cursor: pointer; appearance: none; -webkit-appearance: none; } .form-select:hover { background-image: 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='none' stroke='%234f46e5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); } .form-select:focus { background-image: 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='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); } .form-select[multiple], .form-select[size]:not([size="1"]) { background-image: none; padding-right: .85rem; cursor: default; } /* Native