feat: contatore tempo allocato, pagina miei ticket, unione ticket (da db)
This commit is contained in:
+356
-43
@@ -5,59 +5,59 @@
|
||||
|
||||
/* ---- CSS Variables / Design Tokens ---- */
|
||||
:root {
|
||||
/* Base colors */
|
||||
--bg-primary: #0b0e14;
|
||||
--bg-secondary: #111827;
|
||||
--bg-tertiary: #1a2234;
|
||||
--bg-card: rgba(17, 24, 39, 0.7);
|
||||
--bg-card-hover: rgba(26, 34, 52, 0.85);
|
||||
--bg-glass: rgba(17, 24, 39, 0.55);
|
||||
/* Base colors - Light Theme Default */
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--bg-card: #ffffff;
|
||||
--bg-card-hover: #f8fafc;
|
||||
--bg-glass: rgba(255, 255, 255, 0.8);
|
||||
|
||||
/* Accent */
|
||||
--accent-primary: #6366f1;
|
||||
--accent-primary-hover: #818cf8;
|
||||
--accent-primary-glow: rgba(99, 102, 241, 0.3);
|
||||
--accent-secondary: #8b5cf6;
|
||||
--accent-primary: #4f46e5;
|
||||
--accent-primary-hover: #4338ca;
|
||||
--accent-primary-glow: rgba(79, 70, 229, 0.15);
|
||||
--accent-secondary: #7c3aed;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-tertiary: #64748b;
|
||||
--text-muted: #475569;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: rgba(148, 163, 184, 0.08);
|
||||
--border-light: rgba(148, 163, 184, 0.15);
|
||||
--border-accent: rgba(99, 102, 241, 0.3);
|
||||
--border-subtle: rgba(15, 23, 42, 0.05);
|
||||
--border-light: rgba(15, 23, 42, 0.1);
|
||||
--border-accent: rgba(79, 70, 229, 0.2);
|
||||
|
||||
/* Priority colors */
|
||||
--priority-1-bg: rgba(30, 58, 95, 0.5);
|
||||
--priority-1-text: #60a5fa;
|
||||
--priority-2-bg: rgba(30, 70, 50, 0.5);
|
||||
--priority-2-text: #4ade80;
|
||||
--priority-3-bg: rgba(80, 65, 20, 0.5);
|
||||
--priority-3-text: #facc15;
|
||||
--priority-4-bg: rgba(100, 50, 15, 0.5);
|
||||
--priority-4-text: #fb923c;
|
||||
--priority-5-bg: rgba(100, 20, 20, 0.5);
|
||||
--priority-5-text: #f87171;
|
||||
--priority-1-bg: #eff6ff;
|
||||
--priority-1-text: #1d4ed8;
|
||||
--priority-2-bg: #f0fdf4;
|
||||
--priority-2-text: #15803d;
|
||||
--priority-3-bg: #fef9c3;
|
||||
--priority-3-text: #854d0e;
|
||||
--priority-4-bg: #ffedd5;
|
||||
--priority-4-text: #c2410c;
|
||||
--priority-5-bg: #fef2f2;
|
||||
--priority-5-text: #b91c1c;
|
||||
|
||||
/* State colors */
|
||||
--state-new: #38bdf8;
|
||||
--state-open: #6366f1;
|
||||
--state-pending: #f59e0b;
|
||||
--state-closed: #64748b;
|
||||
--state-removed: #ef4444;
|
||||
--state-new: #0284c7;
|
||||
--state-open: #4f46e5;
|
||||
--state-pending: #d97706;
|
||||
--state-closed: #475569;
|
||||
--state-removed: #dc2626;
|
||||
|
||||
/* Semantic */
|
||||
--success: #22c55e;
|
||||
--success-bg: rgba(34, 197, 94, 0.12);
|
||||
--warning: #f59e0b;
|
||||
--warning-bg: rgba(245, 158, 11, 0.12);
|
||||
--error: #ef4444;
|
||||
--error-bg: rgba(239, 68, 68, 0.12);
|
||||
--info: #38bdf8;
|
||||
--info-bg: rgba(56, 189, 248, 0.12);
|
||||
--success: #16a34a;
|
||||
--success-bg: rgba(22, 163, 74, 0.1);
|
||||
--warning: #d97706;
|
||||
--warning-bg: rgba(217, 119, 6, 0.1);
|
||||
--error: #dc2626;
|
||||
--error-bg: rgba(220, 38, 38, 0.1);
|
||||
--info: #0284c7;
|
||||
--info-bg: rgba(2, 132, 199, 0.1);
|
||||
|
||||
/* Spacing */
|
||||
--space-xs: 4px;
|
||||
@@ -75,9 +75,9 @@
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
--shadow-glow: 0 0 20px var(--accent-primary-glow);
|
||||
|
||||
/* Layout */
|
||||
@@ -90,6 +90,186 @@
|
||||
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
Alternative Dark & Custom Themes
|
||||
========================================== */
|
||||
|
||||
/* Helpers for dark priority variables */
|
||||
.theme-dark,
|
||||
.theme-rosso,
|
||||
.theme-naturale,
|
||||
.theme-ice,
|
||||
.theme-autunno,
|
||||
.theme-fairytale {
|
||||
--priority-1-bg: rgba(30, 58, 95, 0.5);
|
||||
--priority-1-text: #60a5fa;
|
||||
--priority-2-bg: rgba(30, 70, 50, 0.5);
|
||||
--priority-2-text: #4ade80;
|
||||
--priority-3-bg: rgba(80, 65, 20, 0.5);
|
||||
--priority-3-text: #facc15;
|
||||
--priority-4-bg: rgba(100, 50, 15, 0.5);
|
||||
--priority-4-text: #fb923c;
|
||||
--priority-5-bg: rgba(100, 20, 20, 0.5);
|
||||
--priority-5-text: #f87171;
|
||||
|
||||
--state-new: #38bdf8;
|
||||
--state-open: #6366f1;
|
||||
--state-pending: #f59e0b;
|
||||
--state-closed: #64748b;
|
||||
--state-removed: #ef4444;
|
||||
|
||||
--success: #22c55e;
|
||||
--success-bg: rgba(34, 197, 94, 0.12);
|
||||
--warning: #f59e0b;
|
||||
--warning-bg: rgba(245, 158, 11, 0.12);
|
||||
--error: #ef4444;
|
||||
--error-bg: rgba(239, 68, 68, 0.12);
|
||||
--info: #38bdf8;
|
||||
--info-bg: rgba(56, 189, 248, 0.12);
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
--bg-primary: #0b0e14;
|
||||
--bg-secondary: #111827;
|
||||
--bg-tertiary: #1a2234;
|
||||
--bg-card: rgba(17, 24, 39, 0.7);
|
||||
--bg-card-hover: rgba(26, 34, 52, 0.85);
|
||||
--bg-glass: rgba(17, 24, 39, 0.55);
|
||||
|
||||
--accent-primary: #6366f1;
|
||||
--accent-primary-hover: #818cf8;
|
||||
--accent-primary-glow: rgba(99, 102, 241, 0.3);
|
||||
--accent-secondary: #8b5cf6;
|
||||
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-tertiary: #64748b;
|
||||
--text-muted: #475569;
|
||||
|
||||
--border-subtle: rgba(148, 163, 184, 0.08);
|
||||
--border-light: rgba(148, 163, 184, 0.15);
|
||||
--border-accent: rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
body.theme-rosso {
|
||||
--bg-primary: #1f0002;
|
||||
--bg-secondary: #3d0004;
|
||||
--bg-tertiary: #620007;
|
||||
--bg-card: rgba(61, 0, 4, 0.7);
|
||||
--bg-card-hover: rgba(98, 0, 7, 0.85);
|
||||
--bg-glass: rgba(31, 0, 2, 0.6);
|
||||
|
||||
--accent-primary: #fd5d41;
|
||||
--accent-primary-hover: #ff7e67;
|
||||
--accent-primary-glow: rgba(253, 93, 65, 0.3);
|
||||
--accent-secondary: #fec4a1;
|
||||
|
||||
--text-primary: #fed8b9;
|
||||
--text-secondary: #fec4a1;
|
||||
--text-tertiary: #c48375;
|
||||
--text-muted: #8d4f45;
|
||||
|
||||
--border-subtle: rgba(254, 196, 161, 0.08);
|
||||
--border-light: rgba(254, 196, 161, 0.15);
|
||||
--border-accent: rgba(253, 93, 65, 0.3);
|
||||
}
|
||||
|
||||
body.theme-naturale {
|
||||
--bg-primary: #181007;
|
||||
--bg-secondary: #271a0b;
|
||||
--bg-tertiary: #39271b;
|
||||
--bg-card: rgba(39, 26, 11, 0.7);
|
||||
--bg-card-hover: rgba(57, 39, 27, 0.85);
|
||||
--bg-glass: rgba(24, 16, 7, 0.6);
|
||||
|
||||
--accent-primary: #a8ae7b;
|
||||
--accent-primary-hover: #c4ca9a;
|
||||
--accent-primary-glow: rgba(168, 174, 123, 0.3);
|
||||
--accent-secondary: #4b57de;
|
||||
|
||||
--text-primary: #f3efe9;
|
||||
--text-secondary: #baa820;
|
||||
--text-tertiary: #a8ae7b;
|
||||
--text-muted: #736952;
|
||||
|
||||
--border-subtle: rgba(168, 174, 123, 0.08);
|
||||
--border-light: rgba(168, 174, 123, 0.15);
|
||||
--border-accent: rgba(168, 174, 123, 0.3);
|
||||
}
|
||||
|
||||
body.theme-ice {
|
||||
--bg-primary: #0b1822;
|
||||
--bg-secondary: #162c3d;
|
||||
--bg-tertiary: #235878;
|
||||
--bg-card: rgba(22, 44, 61, 0.7);
|
||||
--bg-card-hover: rgba(35, 88, 120, 0.85);
|
||||
--bg-glass: rgba(11, 24, 34, 0.6);
|
||||
|
||||
--accent-primary: #719ebd;
|
||||
--accent-primary-hover: #8fb6d2;
|
||||
--accent-primary-glow: rgba(113, 158, 189, 0.3);
|
||||
--accent-secondary: #497591;
|
||||
|
||||
--text-primary: #f0f6fa;
|
||||
--text-secondary: #a3c4dc;
|
||||
--text-tertiary: #80a9c7;
|
||||
--text-muted: #5e839f;
|
||||
|
||||
--border-subtle: rgba(163, 196, 220, 0.08);
|
||||
--border-light: rgba(163, 196, 220, 0.15);
|
||||
--border-accent: rgba(113, 158, 189, 0.3);
|
||||
}
|
||||
|
||||
body.theme-autunno {
|
||||
--bg-primary: #161216;
|
||||
--bg-secondary: #2d1d0f;
|
||||
--bg-tertiary: #472e18;
|
||||
--bg-card: rgba(45, 29, 15, 0.7);
|
||||
--bg-card-hover: rgba(71, 46, 24, 0.85);
|
||||
--bg-glass: rgba(22, 18, 22, 0.6);
|
||||
|
||||
--accent-primary: #a46a02;
|
||||
--accent-primary-hover: #c4840b;
|
||||
--accent-primary-glow: rgba(164, 106, 2, 0.3);
|
||||
--accent-secondary: #8d5203;
|
||||
|
||||
--text-primary: #faf6f0;
|
||||
--text-secondary: #eed4b3;
|
||||
--text-tertiary: #cda371;
|
||||
--text-muted: #a48259;
|
||||
|
||||
--border-subtle: rgba(164, 106, 2, 0.15);
|
||||
--border-light: rgba(164, 106, 2, 0.25);
|
||||
--border-accent: rgba(164, 106, 2, 0.4);
|
||||
}
|
||||
|
||||
body.theme-fairytale {
|
||||
--bg-primary: #2a1d28;
|
||||
--bg-secondary: #443241;
|
||||
--bg-tertiary: #4f3558;
|
||||
--bg-card: rgba(68, 50, 65, 0.88);
|
||||
--bg-card-hover: rgba(85, 62, 81, 0.95);
|
||||
--bg-glass: rgba(42, 29, 40, 0.75);
|
||||
|
||||
--accent-primary: #e67dcf;
|
||||
--accent-primary-hover: #fcaae7;
|
||||
--accent-primary-glow: rgba(230, 125, 207, 0.35);
|
||||
--accent-secondary: #c971ba;
|
||||
|
||||
--text-primary: #fdf4fa;
|
||||
--text-secondary: #f3bae2;
|
||||
--text-tertiary: #dfa0cf;
|
||||
--text-muted: #bd8eaf;
|
||||
|
||||
--border-subtle: rgba(243, 186, 226, 0.08);
|
||||
--border-light: rgba(243, 186, 226, 0.15);
|
||||
--border-accent: rgba(230, 125, 207, 0.3);
|
||||
}
|
||||
|
||||
/* ---- Reset & Base ---- */
|
||||
*,
|
||||
*::before,
|
||||
@@ -747,6 +927,11 @@ body {
|
||||
box-shadow: inset 3px 0 0 var(--accent-primary);
|
||||
}
|
||||
|
||||
.ticket-table tbody tr.first-selected {
|
||||
background: rgba(160, 65, 71, 0.32) !important;
|
||||
box-shadow: inset 6px 0 0 var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
.ticket-table .checkbox-cell {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
@@ -2038,4 +2223,132 @@ body {
|
||||
padding: 1px 4px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Quill Editor Custom Theme Integration
|
||||
============================================================ */
|
||||
.ql-toolbar.ql-snow {
|
||||
background: var(--bg-secondary) !important;
|
||||
border: 1px solid var(--border-light) !important;
|
||||
border-bottom: none !important;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
|
||||
}
|
||||
|
||||
.ql-container.ql-snow {
|
||||
background: var(--bg-tertiary) !important;
|
||||
border: 1px solid var(--border-light) !important;
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
|
||||
color: var(--text-primary) !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
min-height: 200px;
|
||||
font-family: inherit !important;
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
.ql-snow .ql-stroke {
|
||||
stroke: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.ql-snow .ql-fill {
|
||||
fill: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.ql-snow .ql-picker {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.ql-snow .ql-picker-options {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-color: var(--border-light) !important;
|
||||
}
|
||||
|
||||
.ql-snow .ql-picker-item {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow .ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus,
|
||||
.ql-snow .ql-toolbar button:focus,
|
||||
.ql-snow.ql-toolbar button.ql-active,
|
||||
.ql-snow .ql-toolbar button.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active {
|
||||
color: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
|
||||
stroke: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-fill,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-fill {
|
||||
fill: var(--accent-primary) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Daily Timer Tooltip & Progress Bar
|
||||
============================================================ */
|
||||
.sidebar-timer {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timer-tooltip {
|
||||
position: absolute;
|
||||
left: 105%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) translateX(-8px);
|
||||
width: 290px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all var(--transition-base);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.timer-tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translateY(-50%);
|
||||
border-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: transparent var(--bg-secondary) transparent transparent;
|
||||
}
|
||||
|
||||
.timer-tooltip-border {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translateY(-50%);
|
||||
border-width: 7px;
|
||||
border-style: solid;
|
||||
border-color: transparent var(--border-light) transparent transparent;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sidebar-timer:hover .timer-tooltip {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user