Spaces:
Running
Running
| :root { | |
| /* Atlassian design tokens */ | |
| --ds-blue: #0052cc; | |
| --ds-blue-hover: #0065ff; | |
| --ds-blue-dark: #0747a6; | |
| --ds-nav-bg: #ffffff; | |
| --ds-sidebar-bg: #f4f5f7; | |
| --ds-page-bg: #ffffff; | |
| --ds-border: #dfe1e6; | |
| --ds-border-strong: #c1c7d0; | |
| --ds-text: #172b4d; | |
| --ds-subtle: #6b778c; | |
| --ds-subtlest: #97a0af; | |
| --ds-hover: #ebecf0; | |
| --ds-selected: #e6effc; | |
| --ds-danger: #de350b; | |
| --ds-danger-hover: #bf2600; | |
| --ds-green: #00875a; | |
| --ds-radius: 3px; | |
| --topnav-h: 56px; | |
| --sidebar-w: 240px; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| color: var(--ds-text); | |
| background: var(--ds-page-bg); | |
| font-size: 14px; | |
| } | |
| /* ============ Top nav ============ */ | |
| .topnav { | |
| height: var(--topnav-h); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| background: var(--ds-nav-bg); | |
| border-bottom: 1px solid var(--ds-border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .topnav-left { display: flex; align-items: center; gap: 8px; } | |
| .app-switcher { | |
| display: flex; flex-direction: column; gap: 3px; | |
| background: transparent; border: none; cursor: pointer; | |
| padding: 8px; border-radius: var(--ds-radius); | |
| } | |
| .app-switcher:hover { background: var(--ds-hover); } | |
| .app-switcher span { width: 4px; height: 4px; border-radius: 50%; background: var(--ds-subtle); } | |
| .brand { display: flex; align-items: center; gap: 8px; } | |
| .brand-logo { | |
| width: 28px; height: 28px; border-radius: 6px; | |
| background: var(--ds-blue); color: #fff; | |
| display: grid; place-items: center; font-weight: 700; | |
| } | |
| .brand-name { font-weight: 700; font-size: 16px; } | |
| .topnav-center { flex: 1; display: flex; justify-content: center; } | |
| .global-search { | |
| width: 100%; max-width: 420px; | |
| padding: 6px 12px; | |
| border: 1px solid var(--ds-border-strong); | |
| border-radius: var(--ds-radius); | |
| background: #fafbfc; | |
| font-size: 14px; | |
| } | |
| .global-search:focus { outline: none; border-color: var(--ds-blue); background: #fff; } | |
| .avatar { | |
| width: 32px; height: 32px; border-radius: 50%; | |
| background: var(--ds-blue-dark); color: #fff; | |
| display: grid; place-items: center; font-weight: 600; cursor: pointer; | |
| } | |
| /* ============ Layout ============ */ | |
| .layout { display: flex; height: calc(100vh - var(--topnav-h)); } | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| background: var(--ds-sidebar-bg); | |
| border-right: 1px solid var(--ds-border); | |
| padding: 12px 8px; | |
| flex-shrink: 0; | |
| } | |
| .side-menu { display: flex; flex-direction: column; gap: 2px; } | |
| .side-item { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 8px 12px; border-radius: var(--ds-radius); | |
| color: var(--ds-text); text-decoration: none; font-weight: 500; | |
| } | |
| .side-item:hover { background: var(--ds-hover); } | |
| .side-item.active { background: var(--ds-selected); color: var(--ds-blue); } | |
| .side-icon { width: 18px; text-align: center; color: var(--ds-subtle); } | |
| .side-item.active .side-icon { color: var(--ds-blue); } | |
| .content { flex: 1; overflow-y: auto; padding: 24px 32px; } | |
| /* ============ Page header ============ */ | |
| .page-head { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .page-title { font-size: 24px; font-weight: 600; margin: 0; } | |
| .page-sub { color: var(--ds-subtle); font-size: 13px; margin-top: 2px; } | |
| /* ============ Buttons ============ */ | |
| .btn { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 6px 12px; border-radius: var(--ds-radius); | |
| border: none; cursor: pointer; font-size: 14px; font-weight: 500; | |
| font-family: inherit; | |
| } | |
| .btn-primary { background: var(--ds-blue); color: #fff; } | |
| .btn-primary:hover { background: var(--ds-blue-hover); } | |
| .btn-subtle { background: transparent; color: var(--ds-text); } | |
| .btn-subtle:hover { background: var(--ds-hover); } | |
| .btn-default { background: #f4f5f7; color: var(--ds-text); } | |
| .btn-default:hover { background: var(--ds-hover); } | |
| .btn-danger { background: transparent; color: var(--ds-danger); } | |
| .btn-danger:hover { background: #ffebe6; } | |
| .btn-sm { padding: 3px 8px; font-size: 13px; } | |
| /* ============ Project tabs ============ */ | |
| .project-tabs { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| gap: 2px; | |
| overflow-x: auto; | |
| margin-bottom: 0; | |
| } | |
| .project-tab { | |
| flex: 0 0 auto; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 11px 20px; | |
| border: none; | |
| background: #ffffff; | |
| color: #c7ccd6; | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .04em; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| border-radius: 6px 6px 0 0; | |
| } | |
| .project-tab:hover { background: #454b59; color: #fff; } | |
| .project-tab.active { | |
| background: #d6d6d6; | |
| color: var(--ds-text); | |
| } | |
| .tab-count { | |
| display: inline-grid; | |
| place-items: center; | |
| min-width: 18px; | |
| height: 18px; | |
| padding: 0 5px; | |
| border-radius: 9px; | |
| background: rgba(255, 255, 255, .18); | |
| color: inherit; | |
| font-size: 11px; | |
| font-weight: 700; | |
| } | |
| .project-tab.active .tab-count { background: var(--ds-hover); color: var(--ds-subtle); } | |
| /* Panel that holds the active project's ticket list. */ | |
| #project-panel { | |
| border: 1px solid var(--ds-border); | |
| border-radius: 0 6px 6px 6px; | |
| background: #fff; | |
| padding: 8px; | |
| } | |
| #project-panel .table-wrap { border: none; } | |
| #project-panel .empty-state { margin: 0; } | |
| /* ============ Table ============ */ | |
| .table-wrap { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; } | |
| table.data { width: 100%; border-collapse: collapse; background: #fff; } | |
| table.data th { | |
| text-align: left; font-size: 12px; text-transform: uppercase; | |
| letter-spacing: .04em; color: var(--ds-subtle); font-weight: 600; | |
| padding: 10px 14px; border-bottom: 2px solid var(--ds-border); background: #fafbfc; | |
| } | |
| table.data td { padding: 10px 14px; border-bottom: 1px solid var(--ds-border); vertical-align: middle; } | |
| table.data tr:last-child td { border-bottom: none; } | |
| table.data tbody tr:hover { background: #fafbfc; } | |
| .row-actions { display: flex; gap: 4px; justify-content: flex-end; } | |
| .muted { color: var(--ds-subtle); } | |
| .mono { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; } | |
| /* ============ Badges ============ */ | |
| .badge { | |
| display: inline-flex; align-items: center; | |
| padding: 2px 8px; border-radius: 3px; | |
| font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; | |
| } | |
| /* status */ | |
| .st-open { background: #dfe1e6; color: #42526e; } | |
| .st-queued { background: #deebff; color: #0747a6; } | |
| .st-processing { background: #fffae6; color: #974f0c; } | |
| .st-done { background: #e3fcef; color: #006644; } | |
| .st-failed { background: #ffebe6; color: #bf2600; } | |
| .st-close { background: #eae6ff; color: #403294; } | |
| /* type */ | |
| .ty-backend { background: #eae6ff; color: #403294; } | |
| .ty-api { background: #e6fcff; color: #206a83; } | |
| .ty-frontend { background: #e3fcef; color: #006644; } | |
| .ty-ui { background: #fff0f6; color: #943d73; } | |
| /* ============ Modal ============ */ | |
| .modal-overlay { | |
| position: fixed; inset: 0; background: rgba(9,30,66,.54); | |
| display: grid; place-items: start center; z-index: 200; padding: 48px 16px; overflow-y: auto; | |
| } | |
| .modal { | |
| background: #fff; border-radius: 6px; width: 100%; max-width: 640px; | |
| box-shadow: 0 8px 24px rgba(9,30,66,.25); padding: 24px; | |
| } | |
| .modal.wide { max-width: 900px; } | |
| .modal-title { font-size: 20px; font-weight: 600; margin: 0 0 16px; } | |
| .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } | |
| /* ============ Forms ============ */ | |
| .field { margin-bottom: 14px; } | |
| .field label { display: block; font-size: 12px; font-weight: 600; color: var(--ds-subtle); margin-bottom: 4px; } | |
| .field input[type=text], | |
| .field input[type=number], | |
| .field select, | |
| .field textarea { | |
| width: 100%; padding: 8px 10px; | |
| border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius); | |
| font-size: 14px; font-family: inherit; background: #fafbfc; color: var(--ds-text); | |
| } | |
| .field input:focus, .field select:focus, .field textarea:focus { | |
| outline: none; border-color: var(--ds-blue); background: #fff; | |
| } | |
| .field textarea { resize: vertical; min-height: 80px; } | |
| .field-row { display: flex; gap: 12px; } | |
| .field-row .field { flex: 1; } | |
| /* ============ Ticket tree ============ */ | |
| .ticket-row td.title-cell { display: flex; align-items: center; gap: 6px; } | |
| .tree-toggle { | |
| width: 18px; height: 18px; display: inline-grid; place-items: center; | |
| cursor: pointer; border-radius: 3px; color: var(--ds-subtle); user-select: none; | |
| } | |
| .tree-toggle:hover { background: var(--ds-hover); } | |
| .tree-toggle.empty { visibility: hidden; } | |
| .child-indent { display: inline-block; width: 24px; } | |
| .ticket-key { color: var(--ds-subtle); font-size: 12px; margin-right: 6px; } | |
| /* ============ Detail panel ============ */ | |
| .detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; } | |
| .detail-main {} | |
| .detail-side { border-left: 1px solid var(--ds-border); padding-left: 20px; } | |
| .detail-side .field label { text-transform: uppercase; letter-spacing: .04em; } | |
| .log-box { | |
| background: #172b4d; color: #c7d1e0; font-family: 'SFMono-Regular', Consolas, monospace; | |
| font-size: 12px; padding: 12px; border-radius: var(--ds-radius); | |
| white-space: pre-wrap; max-height: 220px; overflow-y: auto; | |
| } | |
| .msg-box { | |
| background: #f4f5f7; border-left: 3px solid var(--ds-blue); | |
| padding: 10px 12px; border-radius: var(--ds-radius); font-size: 13px; white-space: pre-wrap; | |
| } | |
| /* ============ Screenshots ============ */ | |
| .shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } | |
| .shot { | |
| position: relative; width: 120px; height: 90px; border-radius: var(--ds-radius); | |
| overflow: hidden; border: 1px solid var(--ds-border); background: #fafbfc; | |
| } | |
| .shot img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } | |
| .shot .shot-del { | |
| position: absolute; top: 2px; right: 2px; | |
| background: rgba(9,30,66,.7); color: #fff; border: none; | |
| width: 20px; height: 20px; border-radius: 3px; cursor: pointer; font-size: 12px; line-height: 1; | |
| } | |
| .upload-drop { | |
| border: 2px dashed var(--ds-border-strong); border-radius: var(--ds-radius); | |
| padding: 16px; text-align: center; color: var(--ds-subtle); cursor: pointer; margin-top: 8px; | |
| } | |
| .upload-drop:hover { border-color: var(--ds-blue); color: var(--ds-blue); } | |
| /* ============ Misc ============ */ | |
| .empty-state { text-align: center; padding: 60px 20px; color: var(--ds-subtle); } | |
| .empty-state h3 { color: var(--ds-text); } | |
| .toast { | |
| position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); | |
| background: #172b4d; color: #fff; padding: 10px 18px; border-radius: var(--ds-radius); | |
| z-index: 300; box-shadow: 0 4px 12px rgba(9,30,66,.3); font-size: 14px; | |
| } | |
| .toast.error { background: var(--ds-danger); } | |
| .lightbox { | |
| position: fixed; inset: 0; background: rgba(9,30,66,.8); | |
| display: grid; place-items: center; z-index: 400; cursor: zoom-out; | |
| } | |
| .lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 4px; } | |
| .spinner { padding: 40px; text-align: center; color: var(--ds-subtle); } | |
| .link { color: var(--ds-blue); cursor: pointer; text-decoration: none; } | |
| .link:hover { text-decoration: underline; } | |
| [hidden] { display: none ; } | |