535 lines
16 KiB
CSS
535 lines
16 KiB
CSS
/* ── Reset & Base ──────────────────────────────────────── */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
/* Arcline brand palette — dark theme */
|
|
--clr-bg: #0a0a10;
|
|
--clr-surface: #0f0f19;
|
|
--clr-surface-raised: #161626;
|
|
--clr-text: #e2e8f0;
|
|
--clr-heading: #f1f5f9;
|
|
--clr-muted: #7c8ba0;
|
|
--clr-border: #1c2030;
|
|
--clr-accent: #2dd4bf;
|
|
--clr-accent-hover: #14b8a6;
|
|
--clr-accent-dim: rgba(45, 212, 191, 0.10);
|
|
--clr-accent-glow: rgba(45, 212, 191, 0.18);
|
|
--clr-danger: #ef4444;
|
|
--clr-danger-hover: #dc2626;
|
|
--clr-danger-bg: rgba(239, 68, 68, 0.10);
|
|
--clr-open: #2dd4bf;
|
|
--clr-in-progress: #f59e0b;
|
|
--clr-resolved: #22c55e;
|
|
--clr-closed: #64748b;
|
|
--clr-low: #22c55e;
|
|
--clr-medium: #f59e0b;
|
|
--clr-high: #f97316;
|
|
--clr-critical: #ef4444;
|
|
--radius: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,.45);
|
|
--shadow: 0 4px 24px rgba(0,0,0,.5);
|
|
--shadow-lg: 0 8px 40px rgba(0,0,0,.6);
|
|
--max-width: 960px;
|
|
}
|
|
|
|
body {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: var(--clr-bg);
|
|
background-image:
|
|
radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.03) 0%, transparent 50%),
|
|
linear-gradient(rgba(45, 212, 191, 0.015) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(45, 212, 191, 0.015) 1px, transparent 1px);
|
|
background-size: 100% 100%, 60px 60px, 60px 60px;
|
|
color: var(--clr-text);
|
|
line-height: 1.65;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a { color: var(--clr-accent); text-decoration: none; transition: color 0.18s, opacity 0.18s; }
|
|
a:hover { color: var(--clr-accent-hover); text-decoration: none; }
|
|
|
|
/* ── Layout ────────────────────────────────────────────── */
|
|
|
|
.container {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
main.container {
|
|
flex: 1;
|
|
padding-top: 2.5rem;
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
/* ── Header ────────────────────────────────────────────── */
|
|
|
|
.site-header {
|
|
background: var(--clr-surface);
|
|
border-bottom: 1px solid var(--clr-border);
|
|
padding: 0.9rem 0;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.site-header .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.logo {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--clr-heading);
|
|
letter-spacing: -0.4px;
|
|
}
|
|
.logo .accent { color: var(--clr-accent); }
|
|
.logo:hover { color: var(--clr-heading); text-decoration: none; }
|
|
.logo:hover .accent { color: var(--clr-accent-hover); }
|
|
.site-header nav { display: flex; align-items: center; gap: 1rem; }
|
|
.site-header nav a {
|
|
color: var(--clr-muted);
|
|
font-size: 0.88rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
.site-header nav a:hover { color: var(--clr-text); }
|
|
|
|
/* ── Footer ────────────────────────────────────────────── */
|
|
|
|
.site-footer {
|
|
background: var(--clr-surface);
|
|
border-top: 1px solid var(--clr-border);
|
|
padding: 1.5rem 0;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: var(--clr-muted);
|
|
margin-top: auto;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
|
|
/* ── Buttons ───────────────────────────────────────────── */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.55rem 1.1rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius);
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
|
|
font-family: inherit;
|
|
letter-spacing: -0.15px;
|
|
}
|
|
.btn:hover { text-decoration: none; }
|
|
.btn:active { transform: scale(0.985); }
|
|
|
|
.btn-primary {
|
|
background: var(--clr-accent);
|
|
color: #0a0a10;
|
|
border-color: var(--clr-accent);
|
|
font-weight: 600;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--clr-accent-hover);
|
|
border-color: var(--clr-accent-hover);
|
|
color: #0a0a10;
|
|
box-shadow: 0 0 28px rgba(45, 212, 191, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--clr-surface-raised);
|
|
border-color: var(--clr-border);
|
|
color: var(--clr-text);
|
|
}
|
|
.btn-secondary:hover {
|
|
background: var(--clr-border);
|
|
border-color: rgba(45, 212, 191, 0.25);
|
|
box-shadow: 0 0 16px rgba(45, 212, 191, 0.06);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--clr-danger);
|
|
color: #fff;
|
|
border-color: var(--clr-danger);
|
|
}
|
|
.btn-danger:hover {
|
|
background: var(--clr-danger-hover);
|
|
border-color: var(--clr-danger-hover);
|
|
box-shadow: 0 0 28px rgba(239, 68, 68, 0.25);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--clr-muted);
|
|
border-color: transparent;
|
|
}
|
|
.btn-ghost:hover {
|
|
color: var(--clr-text);
|
|
background: var(--clr-surface-raised);
|
|
border-color: var(--clr-border);
|
|
}
|
|
|
|
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
|
|
|
|
/* ── Inputs ────────────────────────────────────────────── */
|
|
|
|
.input {
|
|
width: 100%;
|
|
padding: 0.6rem 0.85rem;
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius);
|
|
font-size: 0.9rem;
|
|
font-family: inherit;
|
|
background: var(--clr-surface);
|
|
color: var(--clr-text);
|
|
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
.input::placeholder { color: var(--clr-muted); opacity: 0.55; }
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: var(--clr-accent);
|
|
box-shadow: 0 0 0 3px var(--clr-accent-dim), 0 0 20px rgba(45, 212, 191, 0.08);
|
|
background: var(--clr-surface-raised);
|
|
}
|
|
.search-input { max-width: 320px; }
|
|
.filter-select { max-width: 180px; }
|
|
textarea.input { resize: vertical; }
|
|
select.input {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
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='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
padding-right: 2.25rem;
|
|
}
|
|
select.input option {
|
|
background: var(--clr-surface-raised);
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
/* ── Forms ─────────────────────────────────────────────── */
|
|
|
|
.form-container {
|
|
background: var(--clr-surface);
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 2.25rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.form-group { margin-bottom: 1.35rem; }
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 0.84rem;
|
|
margin-bottom: 0.4rem;
|
|
color: var(--clr-muted);
|
|
letter-spacing: -0.1px;
|
|
}
|
|
.required { color: var(--clr-danger); }
|
|
.form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
margin-top: 1.75rem;
|
|
padding-top: 1.35rem;
|
|
border-top: 1px solid var(--clr-border);
|
|
}
|
|
|
|
/* ── Alerts ────────────────────────────────────────────── */
|
|
|
|
.alert {
|
|
padding: 0.85rem 1.1rem;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.85rem;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
.alert-error {
|
|
background: rgba(245, 158, 11, 0.10);
|
|
border: 1px solid rgba(245, 158, 11, 0.25);
|
|
color: #fbbf24;
|
|
}
|
|
|
|
/* ── Page Header ───────────────────────────────────────── */
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 2rem;
|
|
gap: 1rem;
|
|
}
|
|
.page-header h1 {
|
|
font-size: 1.6rem;
|
|
color: var(--clr-heading);
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.action-buttons { display: flex; gap: 0.5rem; align-items: center; }
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
font-size: 0.82rem;
|
|
color: var(--clr-muted);
|
|
margin-bottom: 0.35rem;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
.back-link:hover { color: var(--clr-accent); }
|
|
|
|
/* ── Stats Bar ─────────────────────────────────────────── */
|
|
|
|
.stats-bar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.7rem 1.35rem;
|
|
background: var(--clr-surface);
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius);
|
|
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
|
|
min-width: 82px;
|
|
}
|
|
.stat:hover {
|
|
text-decoration: none;
|
|
border-color: rgba(45, 212, 191, 0.35);
|
|
background: var(--clr-surface-raised);
|
|
box-shadow: 0 0 20px rgba(45, 212, 191, 0.06);
|
|
}
|
|
.stat.active {
|
|
border-color: var(--clr-accent);
|
|
background: var(--clr-accent-dim);
|
|
box-shadow: 0 0 24px rgba(45, 212, 191, 0.10);
|
|
}
|
|
.stat-num {
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
color: var(--clr-heading);
|
|
letter-spacing: -0.8px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.stat.active .stat-num { color: var(--clr-accent); }
|
|
.stat-label {
|
|
font-size: 0.7rem;
|
|
color: var(--clr-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Filters ───────────────────────────────────────────── */
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ── Ticket List ───────────────────────────────────────── */
|
|
|
|
.ticket-list { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
|
|
.ticket-card {
|
|
display: block;
|
|
background: var(--clr-surface);
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.35rem;
|
|
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
|
|
color: var(--clr-text);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.ticket-card:hover {
|
|
text-decoration: none;
|
|
border-color: rgba(45, 212, 191, 0.4);
|
|
box-shadow: 0 0 36px rgba(45, 212, 191, 0.12), var(--shadow);
|
|
background: var(--clr-surface-raised);
|
|
transform: translateY(-1px);
|
|
}
|
|
.ticket-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.55rem;
|
|
}
|
|
.ticket-id {
|
|
font-size: 0.76rem;
|
|
color: var(--clr-accent);
|
|
font-weight: 600;
|
|
font-family: "SF Mono", "Fira Code", "JetBrains Mono", "Cascadia Code", monospace;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.ticket-card-title {
|
|
font-size: 1.12rem;
|
|
margin-bottom: 0.4rem;
|
|
color: var(--clr-heading);
|
|
font-weight: 700;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
.ticket-card-desc {
|
|
font-size: 0.88rem;
|
|
color: var(--clr-muted);
|
|
margin-bottom: 0.85rem;
|
|
line-height: 1.6;
|
|
}
|
|
.ticket-card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
font-size: 0.78rem;
|
|
}
|
|
.assignee { color: var(--clr-muted); }
|
|
.date { color: var(--clr-muted); }
|
|
|
|
/* ── Badges ────────────────────────────────────────────── */
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.22rem 0.65rem;
|
|
border-radius: 999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: capitalize;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
|
|
/* status badges */
|
|
.badge-open { background: rgba(45, 212, 191, 0.14); color: var(--clr-open); }
|
|
.badge-in_progress { background: rgba(245, 158, 11, 0.14); color: var(--clr-in-progress); }
|
|
.badge-resolved { background: rgba(34, 197, 94, 0.14); color: var(--clr-resolved); }
|
|
.badge-closed { background: rgba(100, 116, 139, 0.14); color: var(--clr-closed); }
|
|
|
|
/* priority badges */
|
|
.badge-priority { text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.66rem; }
|
|
.badge-p-low { background: rgba(34, 197, 94, 0.14); color: var(--clr-low); }
|
|
.badge-p-medium { background: rgba(245, 158, 11, 0.14); color: var(--clr-medium); }
|
|
.badge-p-high { background: rgba(249, 115, 22, 0.14); color: var(--clr-high); }
|
|
.badge-p-critical { background: rgba(239, 68, 68, 0.14); color: var(--clr-critical); }
|
|
|
|
/* project badge */
|
|
.badge-project { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; }
|
|
|
|
/* ── Ticket Detail ─────────────────────────────────────── */
|
|
|
|
.ticket-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.ticket-main {
|
|
background: var(--clr-surface);
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.ticket-section { padding: 1.65rem; }
|
|
.ticket-section + .ticket-section {
|
|
border-top: 1px solid var(--clr-border);
|
|
}
|
|
.ticket-section h3 {
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.7px;
|
|
color: var(--clr-muted);
|
|
margin-bottom: 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ticket-description {
|
|
line-height: 1.85;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
color: var(--clr-text);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* ── Sidebar ───────────────────────────────────────────── */
|
|
|
|
.ticket-sidebar {
|
|
position: sticky;
|
|
top: 1.5rem;
|
|
}
|
|
|
|
.ticket-meta-card {
|
|
background: var(--clr-surface);
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 1.35rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.6rem 0;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.meta-label {
|
|
font-weight: 600;
|
|
color: var(--clr-muted);
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--clr-border);
|
|
margin: 0.55rem 0;
|
|
}
|
|
|
|
/* ── Empty State ───────────────────────────────────────── */
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 5rem 1rem;
|
|
color: var(--clr-muted);
|
|
}
|
|
.empty-state p {
|
|
margin-bottom: 1.25rem;
|
|
font-size: 1.05rem;
|
|
color: var(--clr-muted);
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
/* ── Utility ───────────────────────────────────────────── */
|
|
|
|
.muted { color: var(--clr-muted); }
|
|
|
|
/* ── Responsive ────────────────────────────────────────── */
|
|
|
|
@media (max-width: 768px) {
|
|
.ticket-detail-grid { grid-template-columns: 1fr; }
|
|
.form-row { grid-template-columns: 1fr; }
|
|
.page-header { flex-direction: column; }
|
|
.stats-bar { justify-content: center; }
|
|
}
|
|
|