diff --git a/base.css b/base.css index da751ee..3db245d 100644 --- a/base.css +++ b/base.css @@ -217,6 +217,8 @@ body { min-height: 100vh; overflow-x: hidden; position: relative; + display: flex; + flex-direction: column; } a { @@ -350,6 +352,16 @@ hr { .lt-main { padding-top: calc(var(--header-height) + var(--space-lg)); + flex: 1; + width: 100%; + min-width: 0; +} +/* When both lt-main and lt-container are on the same element, the lt-container + shorthand `padding` overrides the lt-main `padding-top` in responsive breakpoints + (same cascade specificity, later rule wins). The combined selector has higher + specificity (0,2,0 vs 0,1,0) and always wins regardless of source order. */ +.lt-main.lt-container { + padding-top: calc(var(--header-height) + var(--space-lg)); } .lt-layout { @@ -1215,6 +1227,7 @@ select option:checked { .lt-badge-green { color: var(--accent-green); } .lt-badge-amber { color: var(--accent-amber); } .lt-badge-red { color: var(--accent-red); } +.lt-badge-sm { font-size: 0.5rem; padding: 0.05rem 0.3rem; } /* Status + priority badge variants (dark-mode base) */ .lt-badge-open { color: var(--accent-green); background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.35); text-shadow: var(--glow-green); } @@ -1318,6 +1331,20 @@ select option:checked { .lt-modal-close:active { color: var(--accent-red); opacity: 0.7; } .lt-modal-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 2px; } +/* Modal size modifiers */ +.lt-modal-xs { width: min(280px, 92vw); } +.lt-modal-sm { width: min(360px, 92vw); } + +/* Modal header danger variant */ +.lt-modal-header--danger { + background: rgba(255, 77, 77, 0.08); + border-bottom-color: var(--accent-red); +} +.lt-modal-header--danger .lt-modal-title { + color: var(--accent-red); + text-shadow: var(--glow-red); +} + .lt-modal-body { padding: var(--space-lg); overflow-y: auto; @@ -2054,7 +2081,7 @@ select option:checked { /* ── SM — phones 480–767px ── */ @media (max-width: 767px) { :root { --header-height: 50px; } - .lt-main { padding-top: calc(50px + var(--space-md)); } + .lt-main, .lt-main.lt-container { padding-top: calc(50px + var(--space-md)); } .lt-container { padding: var(--space-md); } .lt-header { padding: 0 var(--space-md); } @@ -2154,7 +2181,7 @@ select option:checked { /* ── XS — tiny phones ≤ 479px ── */ @media (max-width: 479px) { :root { --header-height: 46px; } - .lt-main { padding-top: calc(46px + var(--space-sm)); } + .lt-main, .lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); } .lt-container { padding: var(--space-sm); } .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); } @@ -3191,6 +3218,30 @@ input[type="range"].lt-range::-moz-range-thumb { .lt-kv-val--green { color: var(--accent-green); } .lt-kv-val--red { color: var(--accent-red); } +/* lt-kv-row / lt-kv-label / lt-kv-value — alternate KV row pattern using + CSS `display: contents` so children become direct grid items of lt-kv-grid */ +.lt-kv-row { + display: contents; +} +.lt-kv-label { + padding: var(--space-xs) var(--space-md) var(--space-xs) 0; + color: var(--text-dim); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + white-space: nowrap; + border-bottom: 1px solid var(--border-dim); + align-self: center; +} +.lt-kv-value { + padding: var(--space-xs) 0 var(--space-xs) var(--space-md); + color: var(--text-primary); + border-bottom: 1px solid var(--border-dim); + min-width: 0; + overflow-wrap: break-word; + align-self: center; +} + /* ---------------------------------------------------------------- 43. HERO / BANNER SECTION @@ -4568,8 +4619,19 @@ html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06); border-c overflow: hidden; flex-shrink: 0; user-select: none; + position: relative; /* needed so img can overlay initials absolutely */ } -.lt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } +/* Image overlays initials — hidden by JS (.lt-avatar-img-err) when broken */ +.lt-avatar img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +/* When the image fails, JS adds .lt-avatar-img-err to hide it, revealing initials */ +.lt-avatar img.lt-avatar-img-err { display: none; } /* Sizes */ .lt-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; } .lt-avatar--sm { width: 2rem; height: 2rem; font-size: 0.65rem; } @@ -5183,7 +5245,23 @@ html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06); border-c .lt-markdown a:hover { text-decoration: underline; } .lt-markdown a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } .lt-markdown strong { color: var(--text-primary); } -.lt-markdown img { max-width: 100%; border: 1px solid var(--border-dim); } +.lt-markdown img, .md-image { max-width: 100%; height: auto; border: 1px solid var(--border-dim); border-radius: 2px; display: block; margin: 0.5rem 0; } +.lt-markdown ul { list-style: disc; } +.lt-markdown ol { list-style: decimal; } +.lt-markdown ul li::marker { color: var(--accent-cyan); } +.lt-markdown ol li::marker { color: var(--accent-orange); } +.lt-markdown mark { background: var(--accent-yellow-dim, #2a2500); color: var(--accent-yellow, #e6c619); padding: 0 3px; border-radius: 2px; } +.lt-markdown del { color: var(--text-muted); text-decoration: line-through; } +.lt-markdown sub, .lt-markdown sup { font-size: 0.7em; line-height: 0; } +.lt-markdown .task-item { list-style: none; margin-left: -1.2em; } +.lt-markdown .task-cb { margin-right: 0.35em; font-size: 1em; } +.lt-markdown .task-done { color: var(--text-muted); text-decoration: line-through; } +.lt-markdown .task-todo { color: var(--text-secondary); } +.lt-markdown .fn-ref a { color: var(--accent-cyan); font-size: 0.7em; text-decoration: none; } +.lt-markdown .fn-hr { margin: 1rem 0 0.5rem; } +.lt-markdown .fn-list { font-size: 0.75rem; color: var(--text-muted); list-style: decimal; padding-left: 1.25rem; margin: 0; } +.lt-markdown .fn-item { margin-bottom: 0.2rem; } +.lt-markdown .fn-back { color: var(--accent-cyan); text-decoration: none; font-size: 0.85em; } .lt-markdown table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin: 0.75rem 0; } .lt-markdown th { background: var(--bg-secondary); color: var(--accent-cyan); padding: 0.4rem 0.6rem; border: 1px solid var(--border-dim); text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } .lt-markdown td { padding: 0.35rem 0.6rem; border: 1px solid var(--border-dim); color: var(--text-secondary); } @@ -5606,6 +5684,33 @@ html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06); border-c .lt-footer { flex-direction: column; align-items: flex-start; gap: 0.25rem; } } +/* Footer keyboard hint strip — a row of clickable key+label hints */ +.lt-footer-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; } + +.lt-footer-hint { + all: unset; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 0.25rem; + color: var(--text-muted); + font-size: 0.7rem; + font-family: var(--font-mono); + white-space: nowrap; +} +.lt-footer-hint:hover { color: var(--accent-cyan); } +.lt-footer-hint:focus-visible { outline: 1px dashed var(--accent-cyan); outline-offset: 2px; } + +.lt-footer-key { + color: var(--accent-cyan); + opacity: 0.8; +} + +.lt-footer-sep { + color: var(--border-dim); + user-select: none; +} + /* ================================================================ BLINKING CURSOR

SYSTEM STATUS