jared
a5b0655623
Lint / PHP (phpcs PSR-12) (push) Successful in 23s
Lint / JS (eslint) (push) Successful in 11s
Lint / PHP requirements (version + extensions) (push) Successful in 22s
Lint / Notify on failure (push) Skipped
Security / PHP Security (semgrep) (push) Successful in 1m11s
Lint / Deploy (push) Successful in 2s
Two separate causes, both light-mode-only: 1. base.css `.lt-select` sets `color-scheme: dark` on the element itself, which outranks the `color-scheme: light` the light theme sets on <html>, so the native dropdown popup kept dark chrome. The option list is also hardcoded #0d1117/#c9d1d9 with no light override. Fixed with light overrides for both (synced from web_template, where the same fix landed as 378a8cd). 2. ticket.css coloured the status select with var(--lt-success), --lt-amber, --lt-cyan and --lt-danger — none of which are defined anywhere in the project, so all four always fell through to hardcoded neon fallbacks. Now uses the --accent-* tokens, which carry the same hues and are redefined for light mode. The selectors also lead with .lt-select: at two classes they lost to base.css's `html[data-theme="light"] .lt-select` (0,2,1) and every status was repainted near-black in light mode. Verified with computed styles in headless chromium — all four statuses in both themes (8/8), plus the popup colour-scheme and option colours.
380 lines
12 KiB
CSS
380 lines
12 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-success / --lt-amber / --lt-cyan / --lt-danger are not defined anywhere,
|
|
so these always fell through to the hardcoded neon fallbacks — unreadable on
|
|
the light theme's white input background. The --accent-* tokens carry the same
|
|
hues and are redefined for light mode in base.css.
|
|
|
|
The leading .lt-select is needed for specificity: base.css's
|
|
`html[data-theme="light"] .lt-select` (0,2,1) would otherwise outrank a plain
|
|
two-class selector and repaint every status the same near-black. */
|
|
.lt-select.lt-status-select.lt-status-open { color: var(--accent-green); border-color: var(--accent-green); }
|
|
.lt-select.lt-status-select.lt-status-pending { color: var(--accent-amber); border-color: var(--accent-amber); }
|
|
.lt-select.lt-status-select.lt-status-in-progress { color: var(--accent-cyan); border-color: var(--accent-cyan); }
|
|
.lt-select.lt-status-select.lt-status-closed { color: var(--accent-red); border-color: var(--accent-red); }
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
/* Image thumbnail in attachment list */
|
|
.attachment-thumb {
|
|
display: block;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
border: 1px solid var(--border-color);
|
|
cursor: zoom-in;
|
|
flex-shrink: 0;
|
|
}
|
|
.lt-lightbox-trigger { display: block; line-height: 0; }
|
|
|
|
/* ── Dependencies list ───────────────────────────────────────── */
|
|
.dependencies-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* ── Visibility groups toggle ────────────────────────────────── */
|
|
.ticket-visibility-groups.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; }
|
|
|
|
/* ── lt-toggle small variant (comment area) ──────────────────── */
|
|
.lt-toggle--sm { font-size: 0.72rem; gap: 0.35rem; }
|
|
.lt-toggle--sm .lt-toggle-track { width: 28px; height: 14px; }
|
|
.lt-toggle--sm .lt-toggle-thumb { width: 9px; height: 9px; top: 1.5px; left: 1.5px; }
|
|
.lt-toggle--sm input:checked ~ .lt-toggle-track .lt-toggle-thumb { transform: translateX(14px); }
|
|
|
|
/* ── 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; }
|
|
}
|
|
|
|
/* ── @mention autocomplete dropdown ─────────────────────────── */
|
|
.mention-autocomplete {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 200;
|
|
background: var(--bg-overlay, #060c14);
|
|
border: 1px solid var(--accent-cyan-border, rgba(0,212,255,0.3));
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
}
|
|
.mention-autocomplete.active { display: block; }
|
|
.mention-option {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.75rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border-dim, rgba(0,255,65,0.1));
|
|
transition: background 0.1s;
|
|
}
|
|
.mention-option:last-child { border-bottom: none; }
|
|
.mention-option.selected,
|
|
.mention-option:hover {
|
|
background: rgba(0,212,255,0.08);
|
|
}
|
|
.mention-username {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: var(--accent-cyan, #00d4ff);
|
|
}
|
|
.mention-displayname {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Watcher avatar group in toolbar ────────────────────────── */
|
|
.lt-avatar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.lt-avatar-group .lt-avatar {
|
|
margin-left: -0.4rem;
|
|
border: 1px solid var(--bg-primary, #030508);
|
|
flex-shrink: 0;
|
|
}
|
|
.lt-avatar-group .lt-avatar:first-child { margin-left: 0; }
|
|
.lt-avatar--overflow {
|
|
background: var(--bg-tertiary, #1a1f2e);
|
|
border: 1px solid var(--border-dim, rgba(0,255,65,0.2)) !important;
|
|
font-size: 0.55rem;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
cursor: default;
|
|
}
|
|
|
|
/* ── 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. */
|
|
|
|
|
|
/* Skeleton placeholder for comment lazy-load */
|
|
.comment-skeleton { margin-bottom: 0.75rem; }
|