diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 471e47e..8f1de8d 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -126,6 +126,235 @@ h1 { .ascii-box[data-priority="4"] { border-color: var(--priority-4); } .ascii-box[data-priority="5"] { border-color: var(--priority-5); } +/* ===== NESTED ASCII FRAME SYSTEM ===== */ + +/* Main outer container - Heavy double border */ +.ascii-frame-outer { + position: relative; + border: 3px double var(--terminal-green); + padding: 0; + background: var(--bg-primary); + margin-bottom: 2rem; +} + +.ascii-frame-outer::before { + content: '╔'; + position: absolute; + top: -3px; + left: -3px; + font-size: 1.5rem; + color: var(--terminal-green); + line-height: 1; + z-index: 10; +} + +.ascii-frame-outer::after { + content: '╗'; + position: absolute; + top: -3px; + right: -3px; + font-size: 1.5rem; + color: var(--terminal-green); + line-height: 1; + z-index: 10; +} + +/* Bottom corners as separate elements */ +.bottom-left-corner, +.bottom-right-corner { + position: absolute; + bottom: -3px; + font-size: 1.5rem; + color: var(--terminal-green); + line-height: 1; + z-index: 10; +} + +.bottom-left-corner { + left: -3px; +} + +.bottom-right-corner { + right: -3px; +} + +/* Inner section frame - Single border */ +.ascii-frame-inner { + position: relative; + border: 2px solid var(--terminal-green); + padding: 1rem; + background: var(--bg-secondary); + margin: 1rem; +} + +.ascii-frame-inner::before { + content: '┌'; + position: absolute; + top: -2px; + left: -2px; + font-size: 1.2rem; + color: var(--terminal-green); + line-height: 1; +} + +.ascii-frame-inner::after { + content: '┐'; + position: absolute; + top: -2px; + right: -2px; + font-size: 1.2rem; + color: var(--terminal-green); + line-height: 1; +} + +/* Section headers with ASCII decoration */ +.ascii-section-header { + position: relative; + padding: 0.75rem 1.5rem; + background: var(--bg-primary); + border-bottom: 2px solid var(--terminal-green); + font-family: var(--font-mono); + font-weight: bold; + color: var(--terminal-amber); + text-shadow: var(--glow-amber); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.ascii-section-header::before { + content: '╠═══ '; + color: var(--terminal-green); + margin-right: 0.5rem; +} + +.ascii-section-header::after { + content: ' ═══╣'; + color: var(--terminal-green); + margin-left: 0.5rem; +} + +/* Subsection headers for nested areas */ +.ascii-subsection-header { + position: relative; + padding: 0.5rem 1rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--terminal-green); + font-family: var(--font-mono); + font-weight: bold; + color: var(--terminal-green); + text-transform: uppercase; + font-size: 0.9em; +} + +.ascii-subsection-header::before { + content: '├─── '; + color: var(--terminal-green); +} + +.ascii-subsection-header::after { + content: ' ───┤'; + color: var(--terminal-green); +} + +/* Section dividers */ +.ascii-divider { + height: 2px; + background: linear-gradient(90deg, + var(--terminal-green) 0%, + var(--terminal-green) 48%, + transparent 48%, + transparent 52%, + var(--terminal-green) 52%, + var(--terminal-green) 100%); + margin: 1.5rem 0; + position: relative; +} + +.ascii-divider::before { + content: '╞'; + position: absolute; + left: -2px; + top: -11px; + color: var(--terminal-green); + font-size: 1.2rem; +} + +.ascii-divider::after { + content: '╡'; + position: absolute; + right: -2px; + top: -11px; + color: var(--terminal-green); + font-size: 1.2rem; +} + +/* Content wrapper inside frames */ +.ascii-content { + padding: 1rem; + background: var(--bg-secondary); +} + +/* Priority-based color variants for outer frames */ +.ascii-frame-outer[data-priority="1"], +.ascii-frame-outer[data-priority="1"]::before, +.ascii-frame-outer[data-priority="1"]::after { + border-color: var(--priority-1); + color: var(--priority-1); +} + +.ascii-frame-outer[data-priority="1"] .bottom-left-corner, +.ascii-frame-outer[data-priority="1"] .bottom-right-corner { + color: var(--priority-1); +} + +.ascii-frame-outer[data-priority="2"], +.ascii-frame-outer[data-priority="2"]::before, +.ascii-frame-outer[data-priority="2"]::after { + border-color: var(--priority-2); + color: var(--priority-2); +} + +.ascii-frame-outer[data-priority="2"] .bottom-left-corner, +.ascii-frame-outer[data-priority="2"] .bottom-right-corner { + color: var(--priority-2); +} + +.ascii-frame-outer[data-priority="3"], +.ascii-frame-outer[data-priority="3"]::before, +.ascii-frame-outer[data-priority="3"]::after { + border-color: var(--priority-3); + color: var(--priority-3); +} + +.ascii-frame-outer[data-priority="3"] .bottom-left-corner, +.ascii-frame-outer[data-priority="3"] .bottom-right-corner { + color: var(--priority-3); +} + +.ascii-frame-outer[data-priority="4"], +.ascii-frame-outer[data-priority="4"]::before, +.ascii-frame-outer[data-priority="4"]::after { + border-color: var(--priority-4); + color: var(--priority-4); +} + +.ascii-frame-outer[data-priority="4"] .bottom-left-corner, +.ascii-frame-outer[data-priority="4"] .bottom-right-corner { + color: var(--priority-4); +} + +.ascii-frame-outer[data-priority="5"], +.ascii-frame-outer[data-priority="5"]::before, +.ascii-frame-outer[data-priority="5"]::after { + border-color: var(--priority-5); + color: var(--priority-5); +} + +.ascii-frame-outer[data-priority="5"] .bottom-left-corner, +.ascii-frame-outer[data-priority="5"] .bottom-right-corner { + color: var(--priority-5); +} + /* ===== TERMINAL PROMPT STYLES ===== */ .terminal-prompt::before { content: '> '; diff --git a/assets/css/ticket.css b/assets/css/ticket.css index 2ba1e99..83817bb 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -127,27 +127,16 @@ font-family: var(--font-mono); } -/* ASCII corner decorations */ -.ticket-container::before { - content: '╔'; - position: absolute; - top: -3px; - left: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - line-height: 1; - z-index: 10; +/* Compatibility with ascii-frame-outer - remove duplicate corners */ +.ticket-container.ascii-frame-outer { + padding: 0; } -.ticket-container::after { - content: '╗'; - position: absolute; - top: -3px; - right: -3px; - font-size: 1.5rem; - color: var(--terminal-green); - line-height: 1; - z-index: 10; +/* Remove old corner styles when using ascii-frame-outer (new frame system handles this) */ +.ticket-container.ascii-frame-outer::before, +.ticket-container.ascii-frame-outer::after { + content: '╔' !important; + content: '╗' !important; } /* Priority-based border colors */ @@ -403,6 +392,13 @@ textarea.editable { border-radius: 0; } +/* Nested frame compatibility - remove border since ascii-frame-inner handles it */ +.ascii-frame-inner .comments-section { + border: none; + padding: 0; + margin-top: 0; +} + .comments-section h2 { font-family: var(--font-mono); color: var(--terminal-amber); @@ -442,13 +438,34 @@ textarea.editable { .comment { background: var(--bg-primary); padding: 15px; - border: 2px solid var(--terminal-green); + border: 1px solid var(--terminal-green); border-radius: 0; - margin-bottom: 15px; + margin-bottom: 1rem; position: relative; box-shadow: none; } +/* Add corner decorations to individual comments */ +.comment::before { + content: '┌─'; + position: absolute; + top: -1px; + left: -1px; + color: var(--terminal-green); + font-size: 1rem; + line-height: 1; +} + +.comment::after { + content: '┐'; + position: absolute; + top: -1px; + right: -1px; + color: var(--terminal-green); + font-size: 1rem; + line-height: 1; +} + .comment-header { display: flex; justify-content: space-between; diff --git a/views/DashboardView.php b/views/DashboardView.php index 79a47e4..6fb5482 100644 --- a/views/DashboardView.php +++ b/views/DashboardView.php @@ -101,104 +101,150 @@ }); -