From 2ba3d40b3b45e6e25b2eda442f6d00687471ca0c Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Sat, 31 Jan 2026 00:02:17 -0500 Subject: [PATCH] CSS improvements and fixes - Add missing CSS variables (--terminal-green-dim, --terminal-red) - Add global box-sizing: border-box for consistent layouts - Fix duplicate keyframe animations (blink-cursor, pulse-glow) - Replace hardcoded hex colors with CSS variables - Fix textarea width calculations (remove calc workarounds) - Add responsive thread depth for mobile - Add accessibility improvements: - Visible focus outlines for keyboard navigation - prefers-reduced-motion support - Fix duplicate transition property in .tab-btn - Update slider checked color to use terminal-green Co-Authored-By: Claude Opus 4.5 --- assets/css/dashboard.css | 35 +++++++++++++++++++++++++-- assets/css/ticket.css | 52 ++++++++++++++++++++++++---------------- 2 files changed, 64 insertions(+), 23 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 2c92a38..ff80eef 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -7,8 +7,10 @@ /* Terminal Colors */ --terminal-green: #00ff41; + --terminal-green-dim: #00aa2a; --terminal-amber: #ffb000; --terminal-cyan: #00ffff; + --terminal-red: #ff4444; --text-primary: #00ff41; --text-secondary: #00cc33; --text-muted: #008822; @@ -71,6 +73,12 @@ } /* ===== BASE ELEMENTS - TERMINAL STYLE ===== */ + +/* Global box-sizing for consistent layouts */ +*, *::before, *::after { + box-sizing: border-box; +} + body { font-family: var(--font-mono); margin: 0; @@ -177,6 +185,8 @@ textarea:focus::placeholder { input:focus, textarea:focus, select:focus { + outline: 2px solid var(--terminal-amber); + outline-offset: 2px; animation: focus-pulse 2s ease-in-out infinite; } @@ -185,6 +195,27 @@ select:focus { 50% { box-shadow: var(--glow-amber-intense), inset 0 0 10px rgba(0, 0, 0, 0.5); } } +/* Focus visible for keyboard navigation */ +:focus-visible { + outline: 2px solid var(--terminal-amber); + outline-offset: 2px; +} + +/* Reduced motion for accessibility */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + body::before { + animation: none; + } +} + /* Boot-up fade in effect */ @keyframes boot-up { 0% { @@ -1195,7 +1226,7 @@ button:hover { text-shadow: var(--glow-amber-intense); box-shadow: var(--glow-amber-intense); transform: translateY(-2px); - animation: pulse-glow 1.5s ease-in-out infinite; + animation: pulse-glow-box 1.5s ease-in-out infinite; } .btn:active, @@ -1205,7 +1236,7 @@ button:active { box-shadow: var(--glow-green-intense); } -@keyframes pulse-glow { +@keyframes pulse-glow-box { 0%, 100% { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; } 50% { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 32px currentColor; } } diff --git a/assets/css/ticket.css b/assets/css/ticket.css index 8353b8b..c8992b2 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -295,14 +295,7 @@ textarea[data-field="description"]:not(:disabled)::after { margin-left: 2px; } -@keyframes blink-cursor { - 0%, 50% { - opacity: 1; - } - 51%, 100% { - opacity: 0; - } -} +/* blink-cursor keyframes defined in dashboard.css */ /* Mobile: Stack metadata fields */ @media (max-width: 768px) { @@ -458,7 +451,7 @@ textarea[data-field="description"]:not(:disabled)::after { } .title-input[contenteditable="true"]:hover { - border-color: #3b82f6; + border-color: var(--terminal-amber); } .title-input[contenteditable="false"] { @@ -518,17 +511,15 @@ textarea[data-field="description"]:not(:disabled)::after { } input.editable { - width: calc(100% - 20px); - box-sizing: border-box; + width: 100%; } textarea.editable { - width: calc(100% - 20px); + width: 100%; min-height: 800px !important; height: auto !important; - box-sizing: border-box; white-space: pre; - font-family: monospace; + font-family: var(--font-mono); line-height: 1.2; } @@ -557,13 +548,15 @@ textarea.editable { } .btn.primary { - background: #3b82f6; - color: white; + background: var(--terminal-amber); + color: var(--bg-primary); + border-color: var(--terminal-amber); } .btn.active { - background: #3b82f6; - color: white; + background: var(--terminal-green); + color: var(--bg-primary); + border-color: var(--terminal-green); } .btn:hover { @@ -608,7 +601,7 @@ textarea.editable { } .comment-form textarea { - width: calc(100% - 20px); + width: 100%; min-height: 100px; margin-bottom: 10px; padding: 10px; @@ -617,6 +610,7 @@ textarea.editable { background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono); + box-sizing: border-box; } .comment-form textarea::placeholder { @@ -807,6 +801,7 @@ textarea.editable { font-family: var(--font-mono); font-size: 0.9rem; resize: vertical; + box-sizing: border-box; } .comment-edit-textarea:focus { @@ -864,6 +859,21 @@ textarea.editable { margin-left: 6rem; } +/* Reduce thread indentation on mobile */ +@media (max-width: 768px) { + .comment.thread-depth-1 { + margin-left: 1rem; + } + + .comment.thread-depth-2 { + margin-left: 1.5rem; + } + + .comment.thread-depth-3 { + margin-left: 2rem; + } +} + /* Reply styling */ .comment.comment-reply { position: relative; @@ -967,6 +977,7 @@ textarea.editable { font-size: 0.9rem; resize: vertical; margin-bottom: 0.75rem; + box-sizing: border-box; } .reply-form-container textarea:focus { @@ -1047,7 +1058,6 @@ textarea.editable { transition: all 0.3s ease; position: relative; margin-right: -2px; - transition: all 0.3s ease; } .tab-btn::before { @@ -1168,7 +1178,7 @@ textarea.editable { } input:checked + .slider { - background-color: #3b82f6; + background-color: var(--terminal-green); } input:checked + .slider:before {