subtle aesthetic updates
This commit is contained in:
@@ -34,16 +34,18 @@
|
||||
/* Terminal Font Stack */
|
||||
--font-mono: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
|
||||
|
||||
/* Glow Effects */
|
||||
--glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41;
|
||||
--glow-red: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d;
|
||||
--glow-blue: 0 0 5px #42a5f5, 0 0 10px #42a5f5;
|
||||
--glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000;
|
||||
--glow-priority-1: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d;
|
||||
--glow-priority-2: 0 0 5px #ffa726, 0 0 10px #ffa726;
|
||||
--glow-priority-3: 0 0 5px #42a5f5, 0 0 10px #42a5f5;
|
||||
--glow-priority-4: 0 0 5px #66bb6a, 0 0 10px #66bb6a;
|
||||
--glow-priority-5: 0 0 5px #9e9e9e, 0 0 10px #9e9e9e;
|
||||
/* Glow Effects - Enhanced for stronger phosphor effect */
|
||||
--glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
|
||||
--glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41, 0 0 32px rgba(0, 255, 65, 0.5);
|
||||
--glow-red: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #ff4d4d;
|
||||
--glow-blue: 0 0 5px #42a5f5, 0 0 10px #42a5f5, 0 0 15px #42a5f5;
|
||||
--glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000;
|
||||
--glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000;
|
||||
--glow-priority-1: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #ff4d4d;
|
||||
--glow-priority-2: 0 0 5px #ffa726, 0 0 10px #ffa726, 0 0 15px #ffa726;
|
||||
--glow-priority-3: 0 0 5px #42a5f5, 0 0 10px #42a5f5, 0 0 15px #42a5f5;
|
||||
--glow-priority-4: 0 0 5px #66bb6a, 0 0 10px #66bb6a, 0 0 15px #66bb6a;
|
||||
--glow-priority-5: 0 0 5px #9e9e9e, 0 0 10px #9e9e9e, 0 0 15px #9e9e9e;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.5rem;
|
||||
@@ -75,6 +77,86 @@ body {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: var(--transition-default);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT Scanline Effect - Subtle retro terminal look */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
animation: scanline 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Screen Flicker Effect */
|
||||
@keyframes flicker {
|
||||
0% { opacity: 1; }
|
||||
10% { opacity: 0.95; }
|
||||
20% { opacity: 1; }
|
||||
30% { opacity: 0.97; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% { transform: translate(0); }
|
||||
20% { transform: translate(-2px, 2px); }
|
||||
40% { transform: translate(-2px, -2px); }
|
||||
60% { transform: translate(2px, 2px); }
|
||||
80% { transform: translate(2px, -2px); }
|
||||
100% { transform: translate(0); }
|
||||
}
|
||||
|
||||
.ascii-frame-outer:hover {
|
||||
animation: flicker 0.15s ease-in-out 1;
|
||||
}
|
||||
|
||||
/* Random screen glitch every 30 seconds */
|
||||
body {
|
||||
animation: flicker 0.2s ease-in-out 30s infinite;
|
||||
}
|
||||
|
||||
/* Subtle data stream effect in corner */
|
||||
body::after {
|
||||
content: '10101010';
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6rem;
|
||||
color: var(--terminal-green);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
letter-spacing: 2px;
|
||||
animation: data-stream 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes data-stream {
|
||||
0% { content: '10101010'; opacity: 0.1; }
|
||||
25% { content: '01010101'; opacity: 0.15; }
|
||||
50% { content: '11001100'; opacity: 0.1; }
|
||||
75% { content: '00110011'; opacity: 0.15; }
|
||||
100% { content: '10101010'; opacity: 0.1; }
|
||||
}
|
||||
|
||||
body.menu-open {
|
||||
@@ -95,8 +177,25 @@ h1 {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--terminal-green);
|
||||
box-shadow: 0 2px 20px rgba(0, 255, 65, 0.2);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-mono);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
var(--terminal-green) 20%,
|
||||
var(--terminal-green) 80%,
|
||||
transparent 100%);
|
||||
box-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.user-header-left,
|
||||
@@ -112,8 +211,15 @@ h1 {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
color: var(--terminal-amber);
|
||||
text-shadow: var(--glow-amber);
|
||||
text-shadow: var(--glow-amber-intense);
|
||||
white-space: nowrap;
|
||||
animation: subtle-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-title::before {
|
||||
content: '>> ';
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
@@ -251,15 +357,22 @@ h1 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Bottom corners as separate elements */
|
||||
/* Bottom corners as separate elements with enhanced glow */
|
||||
.bottom-left-corner,
|
||||
.bottom-right-corner {
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
font-size: 1.5rem;
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
line-height: 1;
|
||||
z-index: 10;
|
||||
animation: corner-pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes corner-pulse {
|
||||
0%, 100% { text-shadow: var(--glow-green); }
|
||||
50% { text-shadow: var(--glow-green-intense); }
|
||||
}
|
||||
|
||||
.bottom-left-corner {
|
||||
@@ -308,9 +421,15 @@ h1 {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
color: var(--terminal-amber);
|
||||
text-shadow: var(--glow-amber);
|
||||
text-shadow: var(--glow-amber-intense);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
animation: subtle-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes subtle-pulse {
|
||||
0%, 100% { text-shadow: var(--glow-amber); }
|
||||
50% { text-shadow: var(--glow-amber-intense); }
|
||||
}
|
||||
|
||||
.ascii-section-header::before {
|
||||
@@ -363,21 +482,25 @@ h1 {
|
||||
}
|
||||
|
||||
.ascii-divider::before {
|
||||
content: '╞';
|
||||
content: '╞═══';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -11px;
|
||||
color: var(--terminal-green);
|
||||
font-size: 1.2rem;
|
||||
text-shadow: var(--glow-green);
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.ascii-divider::after {
|
||||
content: '╡';
|
||||
content: '═══╡';
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: -11px;
|
||||
color: var(--terminal-green);
|
||||
font-size: 1.2rem;
|
||||
text-shadow: var(--glow-green);
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
/* Content wrapper inside frames */
|
||||
@@ -714,18 +837,37 @@ button::after {
|
||||
.btn:hover,
|
||||
.btn-base:hover,
|
||||
button:hover {
|
||||
background: rgba(0, 255, 65, 0.1);
|
||||
background: rgba(0, 255, 65, 0.15);
|
||||
color: var(--terminal-amber);
|
||||
border-color: var(--terminal-amber);
|
||||
text-shadow: var(--glow-amber);
|
||||
text-shadow: var(--glow-amber-intense);
|
||||
box-shadow: var(--glow-amber-intense);
|
||||
transform: translateY(-2px);
|
||||
animation: pulse-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.btn-base:active,
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
|
||||
box-shadow: var(--glow-green-intense);
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
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; }
|
||||
}
|
||||
|
||||
/* Terminal prompt for primary action buttons */
|
||||
.btn.create-ticket::before,
|
||||
.btn.primary::before {
|
||||
content: '> ';
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn.create-ticket::after,
|
||||
.btn.primary::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
@@ -775,7 +917,7 @@ table {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ASCII corner decorations */
|
||||
/* ASCII corner decorations with glow */
|
||||
table::before {
|
||||
content: '┌';
|
||||
position: absolute;
|
||||
@@ -783,6 +925,7 @@ table::before {
|
||||
left: -2px;
|
||||
font-size: 1.2rem;
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
line-height: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -794,6 +937,7 @@ table::after {
|
||||
right: -2px;
|
||||
font-size: 1.2rem;
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
line-height: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -816,6 +960,12 @@ th {
|
||||
cursor: pointer;
|
||||
color: var(--terminal-amber);
|
||||
text-shadow: var(--glow-amber);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
th:hover {
|
||||
text-shadow: var(--glow-amber-intense);
|
||||
background-color: rgba(255, 176, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Add terminal prompt to headers */
|
||||
@@ -826,7 +976,8 @@ th::before {
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: rgba(0, 255, 65, 0.05);
|
||||
background-color: rgba(0, 255, 65, 0.08);
|
||||
box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
|
||||
}
|
||||
|
||||
tbody tr td:first-child {
|
||||
@@ -870,24 +1021,55 @@ td:nth-child(2) span::after {
|
||||
.priority-1 td:nth-child(2) {
|
||||
color: var(--priority-1);
|
||||
text-shadow: var(--glow-priority-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.priority-1 td:nth-child(2)::after {
|
||||
content: ' ▲▲';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.priority-2 td:nth-child(2) {
|
||||
color: var(--priority-2);
|
||||
text-shadow: var(--glow-priority-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.priority-2 td:nth-child(2)::after {
|
||||
content: ' ▲';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.priority-3 td:nth-child(2) {
|
||||
color: var(--priority-3);
|
||||
text-shadow: var(--glow-priority-3);
|
||||
}
|
||||
|
||||
.priority-3 td:nth-child(2)::after {
|
||||
content: ' ●';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.priority-4 td:nth-child(2) {
|
||||
color: var(--priority-4);
|
||||
text-shadow: var(--glow-priority-4);
|
||||
}
|
||||
|
||||
.priority-4 td:nth-child(2)::after {
|
||||
content: ' ▼';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.priority-5 td:nth-child(2) {
|
||||
color: var(--priority-5);
|
||||
text-shadow: var(--glow-priority-5);
|
||||
}
|
||||
|
||||
.priority-5 td:nth-child(2)::after {
|
||||
content: ' ▼▼';
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/* ===== STATUS STYLES - TERMINAL EDITION ===== */
|
||||
.status-Open {
|
||||
background-color: transparent !important;
|
||||
@@ -902,7 +1084,7 @@ td:nth-child(2) span::after {
|
||||
}
|
||||
|
||||
.status-Open::before {
|
||||
content: '[';
|
||||
content: '[●';
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@@ -927,8 +1109,17 @@ td:nth-child(2) span::after {
|
||||
}
|
||||
|
||||
.status-In-Progress::before {
|
||||
content: '[';
|
||||
content: '[◐';
|
||||
margin-right: 4px;
|
||||
animation: spin-status 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin-status {
|
||||
0% { content: '[◐'; }
|
||||
25% { content: '[◓'; }
|
||||
50% { content: '[◑'; }
|
||||
75% { content: '[◒'; }
|
||||
100% { content: '[◐'; }
|
||||
}
|
||||
|
||||
.status-In-Progress::after {
|
||||
@@ -949,7 +1140,7 @@ td:nth-child(2) span::after {
|
||||
}
|
||||
|
||||
.status-Closed::before {
|
||||
content: '[';
|
||||
content: '[✓';
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@@ -971,7 +1162,7 @@ td:nth-child(2) span::after {
|
||||
}
|
||||
|
||||
.status-Resolved::before {
|
||||
content: '[';
|
||||
content: '[✓';
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@@ -993,6 +1184,18 @@ select {
|
||||
border-radius: 0;
|
||||
padding: 8px 12px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.search-box:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="search"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--terminal-amber);
|
||||
box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
@@ -1367,17 +1570,45 @@ input[type="checkbox"]:checked {
|
||||
padding: 1rem;
|
||||
border: 2px solid var(--terminal-green);
|
||||
box-shadow: var(--glow-green);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-sidebar .ascii-frame-inner::before {
|
||||
content: '│';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
color: var(--terminal-green);
|
||||
opacity: 0.3;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dashboard-sidebar .ascii-subsection-header {
|
||||
color: var(--terminal-amber);
|
||||
text-shadow: var(--glow-amber);
|
||||
text-shadow: var(--glow-amber-intense);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--terminal-green);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-sidebar .ascii-subsection-header::before {
|
||||
content: '╔═══ ';
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.dashboard-sidebar .ascii-subsection-header::after {
|
||||
content: ' ═══╗';
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
@@ -1413,6 +1644,18 @@ input[type="checkbox"]:checked {
|
||||
margin-right: 0.5rem;
|
||||
cursor: pointer;
|
||||
accent-color: var(--terminal-green);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--terminal-green);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.filter-group input[type="checkbox"]:checked {
|
||||
box-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.filter-group input[type="checkbox"]:hover {
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
|
||||
.dashboard-sidebar .btn {
|
||||
@@ -1465,6 +1708,78 @@ input[type="checkbox"]:checked {
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== BOOT SEQUENCE ===== */
|
||||
.boot-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-primary);
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
#boot-text {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
white-space: pre;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* ===== ASCII LOADING SPINNER ===== */
|
||||
.loading-spinner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10000;
|
||||
background: var(--bg-primary);
|
||||
border: 3px solid var(--terminal-green);
|
||||
padding: 2rem;
|
||||
box-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--terminal-green);
|
||||
font-size: 1.5rem;
|
||||
text-shadow: var(--glow-green);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-spinner.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spinner-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner-frames {
|
||||
animation: spin-frames 0.8s steps(8) infinite;
|
||||
}
|
||||
|
||||
@keyframes spin-frames {
|
||||
0% { content: '|'; }
|
||||
12.5% { content: '/'; }
|
||||
25% { content: '—'; }
|
||||
37.5% { content: '\\'; }
|
||||
50% { content: '|'; }
|
||||
62.5% { content: '/'; }
|
||||
75% { content: '—'; }
|
||||
87.5% { content: '\\'; }
|
||||
}
|
||||
|
||||
.spinner-frames::before {
|
||||
content: '|';
|
||||
display: inline-block;
|
||||
animation: spin-frames 0.8s steps(8) infinite;
|
||||
}
|
||||
|
||||
/* ===== UTILITY STYLES ===== */
|
||||
.ticket-link {
|
||||
font-family: 'Courier New', monospace;
|
||||
@@ -1475,10 +1790,22 @@ input[type="checkbox"]:checked {
|
||||
padding: 4px 8px;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.ticket-link::before {
|
||||
content: '#';
|
||||
color: var(--terminal-amber);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.ticket-link:hover {
|
||||
background: var(--border-color);
|
||||
background: rgba(0, 255, 65, 0.2);
|
||||
border-color: var(--terminal-green);
|
||||
text-shadow: var(--glow-green-intense);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* ===== PAGINATION STYLES ===== */
|
||||
@@ -1490,22 +1817,28 @@ input[type="checkbox"]:checked {
|
||||
|
||||
.pagination button {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 2px solid var(--terminal-green);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 0.375rem;
|
||||
color: var(--terminal-green);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
font-family: var(--font-mono);
|
||||
text-shadow: var(--glow-green);
|
||||
}
|
||||
|
||||
.pagination button:hover {
|
||||
background: var(--hover-bg);
|
||||
background: rgba(0, 255, 65, 0.15);
|
||||
box-shadow: var(--glow-green);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.pagination button.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
background: var(--terminal-green);
|
||||
color: var(--bg-primary);
|
||||
border-color: var(--terminal-green);
|
||||
box-shadow: var(--glow-green-intense);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ===== SORTING STYLES ===== */
|
||||
|
||||
@@ -273,6 +273,35 @@
|
||||
box-shadow: 0 0 10px var(--terminal-amber);
|
||||
}
|
||||
|
||||
.metadata-select:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.metadata-select:disabled:hover {
|
||||
border-color: var(--border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Blinking cursor effect for active inputs */
|
||||
.title-input:not(:disabled)::after,
|
||||
textarea[data-field="description"]:not(:disabled)::after {
|
||||
content: '█';
|
||||
color: var(--terminal-green);
|
||||
animation: blink-cursor 1s step-end infinite;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0%, 50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: Stack metadata fields */
|
||||
@media (max-width: 768px) {
|
||||
.ticket-metadata-fields {
|
||||
|
||||
@@ -64,6 +64,7 @@ function saveTicket() {
|
||||
function toggleEditMode() {
|
||||
const editButton = document.getElementById('editButton');
|
||||
const editables = document.querySelectorAll('.title-input, textarea[data-field="description"]');
|
||||
const metadataFields = document.querySelectorAll('.editable-metadata');
|
||||
const isEditing = editButton.classList.contains('active');
|
||||
|
||||
if (!isEditing) {
|
||||
@@ -75,6 +76,10 @@ function toggleEditMode() {
|
||||
field.focus();
|
||||
}
|
||||
});
|
||||
// Enable metadata fields (priority, category, type)
|
||||
metadataFields.forEach(field => {
|
||||
field.disabled = false;
|
||||
});
|
||||
} else {
|
||||
saveTicket();
|
||||
editButton.textContent = 'Edit Ticket';
|
||||
@@ -82,6 +87,10 @@ function toggleEditMode() {
|
||||
editables.forEach(field => {
|
||||
field.disabled = true;
|
||||
});
|
||||
// Disable metadata fields
|
||||
metadataFields.forEach(field => {
|
||||
field.disabled = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,54 @@
|
||||
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
|
||||
</head>
|
||||
<body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>
|
||||
|
||||
<!-- Terminal Boot Sequence -->
|
||||
<div id="boot-sequence" class="boot-overlay">
|
||||
<pre id="boot-text"></pre>
|
||||
</div>
|
||||
<script>
|
||||
function showBootSequence() {
|
||||
const bootText = document.getElementById('boot-text');
|
||||
const bootOverlay = document.getElementById('boot-sequence');
|
||||
const messages = [
|
||||
'╔═══════════════════════════════════════╗',
|
||||
'║ TINKER TICKETS TERMINAL v1.0 ║',
|
||||
'║ BOOTING SYSTEM... ║',
|
||||
'╚═══════════════════════════════════════╝',
|
||||
'',
|
||||
'[ OK ] Loading kernel modules...',
|
||||
'[ OK ] Initializing ticket database...',
|
||||
'[ OK ] Mounting user session...',
|
||||
'[ OK ] Starting dashboard services...',
|
||||
'[ OK ] Rendering ASCII frames...',
|
||||
'',
|
||||
'> SYSTEM READY ✓',
|
||||
''
|
||||
];
|
||||
|
||||
let i = 0;
|
||||
const interval = setInterval(() => {
|
||||
if (i < messages.length) {
|
||||
bootText.textContent += messages[i] + '\n';
|
||||
i++;
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
bootOverlay.style.opacity = '0';
|
||||
setTimeout(() => bootOverlay.remove(), 500);
|
||||
}, 500);
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 80);
|
||||
}
|
||||
|
||||
// Run on first visit only (per session)
|
||||
if (!sessionStorage.getItem('booted')) {
|
||||
showBootSequence();
|
||||
sessionStorage.setItem('booted', 'true');
|
||||
} else {
|
||||
document.getElementById('boot-sequence').remove();
|
||||
}
|
||||
</script>
|
||||
<div class="user-header">
|
||||
<div class="user-header-left">
|
||||
<span class="app-title">🎫 Tinker Tickets</span>
|
||||
|
||||
@@ -123,7 +123,7 @@ function formatDetails($details, $actionType) {
|
||||
<div class="ticket-metadata-fields" style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
|
||||
<div class="metadata-field">
|
||||
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Priority:</label>
|
||||
<select id="prioritySelect" class="metadata-select" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
||||
<select id="prioritySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
||||
<option value="1" <?php echo $ticket['priority'] == 1 ? 'selected' : ''; ?>>P1 - Critical</option>
|
||||
<option value="2" <?php echo $ticket['priority'] == 2 ? 'selected' : ''; ?>>P2 - High</option>
|
||||
<option value="3" <?php echo $ticket['priority'] == 3 ? 'selected' : ''; ?>>P3 - Medium</option>
|
||||
@@ -134,7 +134,7 @@ function formatDetails($details, $actionType) {
|
||||
|
||||
<div class="metadata-field">
|
||||
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Category:</label>
|
||||
<select id="categorySelect" class="metadata-select" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
||||
<select id="categorySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
||||
<option value="Hardware" <?php echo $ticket['category'] == 'Hardware' ? 'selected' : ''; ?>>Hardware</option>
|
||||
<option value="Software" <?php echo $ticket['category'] == 'Software' ? 'selected' : ''; ?>>Software</option>
|
||||
<option value="Network" <?php echo $ticket['category'] == 'Network' ? 'selected' : ''; ?>>Network</option>
|
||||
@@ -145,7 +145,7 @@ function formatDetails($details, $actionType) {
|
||||
|
||||
<div class="metadata-field">
|
||||
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Type:</label>
|
||||
<select id="typeSelect" class="metadata-select" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
||||
<select id="typeSelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
||||
<option value="Maintenance" <?php echo $ticket['type'] == 'Maintenance' ? 'selected' : ''; ?>>Maintenance</option>
|
||||
<option value="Install" <?php echo $ticket['type'] == 'Install' ? 'selected' : ''; ?>>Install</option>
|
||||
<option value="Task" <?php echo $ticket['type'] == 'Task' ? 'selected' : ''; ?>>Task</option>
|
||||
|
||||
Reference in New Issue
Block a user