jared
79c2d2b513
Full application redesign using Terminal Design System v1.2 (lt-* class system). Introduces shared layout_header/footer partials, upgrades base.css/base.js to TDS v1.2, and rewrites all views (Dashboard, Ticket, CreateTicket, and all 7 admin views) with lt-frame, lt-table, lt-modal, lt-stats-grid, lt-kv-grid, and data-action event delegation patterns. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
267 lines
8.0 KiB
CSS
267 lines
8.0 KiB
CSS
/* ================================================================
|
|
ticket.css — Tinker Tickets TDS v1.2
|
|
App-specific ticket view styles. base.css handles base components.
|
|
================================================================ */
|
|
|
|
/* ── Ticket frame ────────────────────────────────────────────── */
|
|
.lt-frame-ticket {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Priority left-border accent on ticket frame */
|
|
.lt-frame-ticket[data-priority="1"] { border-left: 3px solid var(--lt-danger, #ff4d4d); }
|
|
.lt-frame-ticket[data-priority="2"] { border-left: 3px solid var(--lt-amber, #ffb000); }
|
|
.lt-frame-ticket[data-priority="3"] { border-left: 3px solid var(--lt-cyan, #00ffff); }
|
|
.lt-frame-ticket[data-priority="4"] { border-left: 3px solid var(--lt-text-primary, #00ff41); }
|
|
.lt-frame-ticket[data-priority="5"] { border-left: 3px solid rgba(0,255,65,0.3); }
|
|
|
|
/* ── Ticket title row ────────────────────────────────────────── */
|
|
.ticket-title-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.ticket-title-heading {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.3;
|
|
flex: 1;
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
}
|
|
.ticket-id-badge {
|
|
white-space: nowrap;
|
|
padding-top: 0.15rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Edit mode — show editable fields as inputs ──────────────── */
|
|
body.edit-mode .editable[contenteditable="true"] {
|
|
border: 1px solid var(--lt-text-primary, #00ff41);
|
|
padding: 0.2rem 0.4rem;
|
|
outline: none;
|
|
background: rgba(0,255,65,0.03);
|
|
}
|
|
body.edit-mode .editable-metadata {
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* ── Status select styling ───────────────────────────────────── */
|
|
.lt-status-select {
|
|
font-family: inherit;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.lt-status-select.lt-status-open { color: var(--lt-success, #00ff41); border-color: var(--lt-success, #00ff41); }
|
|
.lt-status-select.lt-status-pending { color: var(--lt-amber, #ffb000); border-color: var(--lt-amber, #ffb000); }
|
|
.lt-status-select.lt-status-in-progress { color: var(--lt-cyan, #00ffff); border-color: var(--lt-cyan, #00ffff); }
|
|
.lt-status-select.lt-status-closed { color: var(--lt-danger, #ff4d4d); border-color: var(--lt-danger, #ff4d4d); }
|
|
|
|
/* ── Ticket meta KV grid ─────────────────────────────────────── */
|
|
.ticket-meta-grid {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* ── Description textarea ────────────────────────────────────── */
|
|
#ticketDescription {
|
|
width: 100%;
|
|
resize: vertical;
|
|
min-height: 16rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* ── Comments ────────────────────────────────────────────────── */
|
|
.comments-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.comment {
|
|
position: relative;
|
|
padding: 0.75rem;
|
|
border: 1px solid rgba(0, 255, 65, 0.2);
|
|
}
|
|
.comment-reply {
|
|
margin-left: 1.5rem;
|
|
border-color: rgba(0, 255, 65, 0.12);
|
|
}
|
|
.thread-depth-2 { margin-left: 3rem; }
|
|
.thread-depth-3 { margin-left: 4.5rem; }
|
|
|
|
.thread-line {
|
|
position: absolute;
|
|
left: -1rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: rgba(0, 255, 65, 0.15);
|
|
}
|
|
|
|
.comment-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.comment-user { font-size: 0.75rem; font-weight: 600; }
|
|
.comment-date { font-size: 0.7rem; opacity: 0.6; }
|
|
.comment-actions { margin-left: auto; }
|
|
|
|
.comment-text {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.comment-text[data-markdown] { white-space: normal; }
|
|
|
|
.comment-edited { font-size: 0.65rem; opacity: 0.5; }
|
|
|
|
/* Reply/edit inline textarea */
|
|
.comment-edit-raw {
|
|
width: 100%;
|
|
margin-top: 0.4rem;
|
|
resize: vertical;
|
|
min-height: 4rem;
|
|
}
|
|
|
|
/* Comment controls bar */
|
|
.comment-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.markdown-toggles {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Markdown preview */
|
|
.markdown-preview {
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem;
|
|
border: 1px dashed rgba(0,255,65,0.3);
|
|
font-size: 0.8rem;
|
|
min-height: 2rem;
|
|
}
|
|
|
|
/* ── Upload zone ─────────────────────────────────────────────── */
|
|
.upload-zone {
|
|
border: 2px dashed rgba(0,255,65,0.4);
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
.upload-zone:hover,
|
|
.upload-zone:focus-visible,
|
|
.upload-zone.drag-over {
|
|
border-color: var(--lt-text-primary, #00ff41);
|
|
background: rgba(0,255,65,0.04);
|
|
outline: none;
|
|
}
|
|
.upload-zone-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
.upload-zone-content { pointer-events: none; }
|
|
|
|
/* Progress bar */
|
|
.progress-bar {
|
|
height: 4px;
|
|
background: rgba(0,255,65,0.15);
|
|
margin-top: 0.5rem;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: var(--lt-text-primary, #00ff41);
|
|
transition: width 0.3s ease;
|
|
}
|
|
.upload-status-text { margin-top: 0.25rem; }
|
|
|
|
/* Attachments list */
|
|
.attachments-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* ── Dependencies list ───────────────────────────────────────── */
|
|
.dependencies-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* ── Visibility groups toggle ────────────────────────────────── */
|
|
.ticket-visibility-groups.is-hidden,
|
|
.is-hidden { display: none !important; }
|
|
|
|
/* ── Page header utility ─────────────────────────────────────── */
|
|
.lt-page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0 0.75rem;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── lt-select-sm ────────────────────────────────────────────── */
|
|
.lt-select-sm {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.4rem;
|
|
}
|
|
|
|
/* ── lt-flex utilities ───────────────────────────────────────── */
|
|
.lt-flex-align-center { align-items: center; }
|
|
.lt-flex-gap-sm { gap: 0.5rem; }
|
|
.lt-flex-wrap { flex-wrap: wrap; }
|
|
|
|
/* ── Ticket tabs margin ──────────────────────────────────────── */
|
|
.lt-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
.lt-tab-panel {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* ── Settings section (also used in ticket settings modal) ───── */
|
|
.settings-section {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.settings-section:last-child { margin-bottom: 0; }
|
|
|
|
.shortcut-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.2rem 0;
|
|
}
|
|
kbd {
|
|
font-family: inherit;
|
|
font-size: 0.7rem;
|
|
padding: 0.1rem 0.35rem;
|
|
border: 1px solid rgba(0,255,65,0.4);
|
|
}
|
|
|
|
/* ── lt-mb-md ────────────────────────────────────────────────── */
|
|
.lt-mb-md { margin-bottom: 1rem; }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.ticket-title-row {
|
|
flex-direction: column;
|
|
}
|
|
.ticket-meta-grid .lt-kv-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.comment-reply { margin-left: 0.75rem; }
|
|
.thread-depth-2 { margin-left: 1.5rem; }
|
|
.thread-depth-3 { margin-left: 2.25rem; }
|
|
}
|