jared
cfdc9e0f37
- Sync base.css + base.js from web_template (adds lt-scanlines, lt-cursor, lt-radar, lt-display-field, --font-crt/VT323 token) - Add VT323 to Google Fonts link in layout_header.php - Add lt-scanlines to <body> — CRT scanline overlay, light-mode suppressed - Replace custom .editable-metadata:disabled CSS override in ticket.css with the canonical .lt-display-field class from base.css - Switch Priority/Category/Type/Visibility selects and visibility-group checkboxes in TicketView.php from disabled attribute to lt-display-field - Update toggleEditMode() in ticket.js to add/remove lt-display-field instead of toggling the disabled attribute Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
294 lines
9.2 KiB
CSS
294 lines
9.2 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 {
|
|
/* depth-1 default; .thread-depth-N overrides for deeper nesting */
|
|
margin-left: 1.5rem;
|
|
border-color: rgba(0, 255, 65, 0.12);
|
|
}
|
|
/* Explicit depth overrides using combined selectors — higher specificity prevents
|
|
cascade order from determining winner when both classes are present */
|
|
.comment.thread-depth-2,
|
|
.comment-reply.thread-depth-2 { margin-left: 3rem; }
|
|
.comment.thread-depth-3,
|
|
.comment-reply.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; }
|
|
}
|
|
|
|
/* ── Description read view ───────────────────────────────────── */
|
|
/* Shown in read mode instead of a disabled (faded) textarea. */
|
|
/* Uses lt-markdown typography for full contrast on dark/OLED. */
|
|
.ticket-description-view {
|
|
min-height: 8rem;
|
|
padding: 0.5rem 0.25rem;
|
|
line-height: 1.75;
|
|
color: var(--text-primary);
|
|
/* pre-wrap preserves newlines and multiple spaces so ASCII art aligns correctly.
|
|
font-mono is inherited from body, so box-drawing characters line up. */
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.ticket-description-view p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
.ticket-description-view p:last-child { margin-bottom: 0; }
|
|
|
|
/* Metadata selects use .lt-display-field (base.css) in read mode
|
|
instead of disabled — full opacity, non-interactive, no fading. */
|