micro-sidebar 1.2.2__py3-none-any.whl → 2.1.0__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- {micro_sidebar-1.2.2.dist-info → micro_sidebar-2.1.0.dist-info}/METADATA +116 -1
- micro_sidebar-2.1.0.dist-info/RECORD +29 -0
- sidebar/apps.py +10 -0
- sidebar/context_processors.py +127 -0
- sidebar/discovery.py +151 -0
- sidebar/static/sidebar/css/theme_picker.css +165 -0
- sidebar/static/sidebar/js/theme_picker.js +58 -0
- sidebar/static/sidebar/sidebar.css +32 -8
- sidebar/static/sidebar/sidebar.js +15 -40
- sidebar/static/themes/blue.css +51 -0
- sidebar/static/themes/dark.css +501 -0
- sidebar/static/themes/gold.css +51 -0
- sidebar/static/themes/green.css +63 -0
- sidebar/static/themes/light.css +51 -0
- sidebar/static/themes/main.css +6 -0
- sidebar/static/themes/main.js +41 -0
- sidebar/static/themes/red.css +51 -0
- sidebar/templates/sidebar/auto.html +13 -0
- sidebar/templates/sidebar/extra_groups.html +34 -0
- sidebar/templates/sidebar/main.html +24 -1
- sidebar/templatetags/__init__.py +1 -0
- sidebar/templatetags/sidebar_tags.py +74 -0
- micro_sidebar-1.2.2.dist-info/RECORD +0 -13
- {micro_sidebar-1.2.2.dist-info → micro_sidebar-2.1.0.dist-info}/LICENSE +0 -0
- {micro_sidebar-1.2.2.dist-info → micro_sidebar-2.1.0.dist-info}/WHEEL +0 -0
- {micro_sidebar-1.2.2.dist-info → micro_sidebar-2.1.0.dist-info}/top_level.txt +0 -0
|
@@ -47,20 +47,31 @@
|
|
|
47
47
|
white-space: nowrap;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.sidebar.collapsed .accordion-button::after {
|
|
50
|
+
/* .sidebar.collapsed .accordion-button::after {
|
|
51
51
|
display: none !important;
|
|
52
|
+
} */
|
|
53
|
+
|
|
54
|
+
/* Hide accordion body content when sidebar is collapsed */
|
|
55
|
+
/* .sidebar.collapsed .accordion-collapse {
|
|
56
|
+
display: none !important;
|
|
57
|
+
} */
|
|
58
|
+
|
|
59
|
+
/* Also hide any expanded accordion body items text */
|
|
60
|
+
.sidebar.collapsed .accordion-body .list-group-item span {
|
|
61
|
+
opacity: 0;
|
|
62
|
+
visibility: hidden;
|
|
63
|
+
width: 0;
|
|
52
64
|
}
|
|
53
65
|
|
|
54
|
-
.sidebar-ghost {
|
|
66
|
+
/* .sidebar-ghost {
|
|
55
67
|
display: none;
|
|
56
|
-
width: 52px;
|
|
57
68
|
flex-shrink: 0;
|
|
58
|
-
}
|
|
69
|
+
} */
|
|
59
70
|
|
|
60
71
|
@media (max-width: 1100px) {
|
|
61
|
-
.sidebar-ghost {
|
|
62
|
-
display:
|
|
63
|
-
}
|
|
72
|
+
/* .sidebar-ghost {
|
|
73
|
+
display: none !important;
|
|
74
|
+
} */
|
|
64
75
|
|
|
65
76
|
.sidebar {
|
|
66
77
|
position: fixed;
|
|
@@ -74,7 +85,9 @@
|
|
|
74
85
|
}
|
|
75
86
|
|
|
76
87
|
.sidebar.collapsed {
|
|
77
|
-
width:
|
|
88
|
+
width: 0 !important; /* Completely hide when collapsed on mobile */
|
|
89
|
+
border: none !important;
|
|
90
|
+
overflow: hidden !important;
|
|
78
91
|
right: 0;
|
|
79
92
|
position: fixed;
|
|
80
93
|
}
|
|
@@ -108,6 +121,7 @@
|
|
|
108
121
|
color: var(--primal) !important;
|
|
109
122
|
font-weight: 700 !important;
|
|
110
123
|
box-shadow: 0 4px 12px rgba(35, 99, 195, 0.08) !important;
|
|
124
|
+
transform: translateX(-4px);
|
|
111
125
|
}
|
|
112
126
|
|
|
113
127
|
.sidebar .list-group-item i,
|
|
@@ -203,4 +217,14 @@
|
|
|
203
217
|
color: white;
|
|
204
218
|
padding: 8px 12px;
|
|
205
219
|
border-radius: 5px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.sidebar-toolbar {
|
|
223
|
+
padding: 10px;
|
|
224
|
+
position: absolute;
|
|
225
|
+
bottom: 0;
|
|
226
|
+
left: 0;
|
|
227
|
+
width: 100%;
|
|
228
|
+
background: transparent;
|
|
229
|
+
pointer-events: none; /* Let clicks pass through to content if needed, but we override for items */
|
|
206
230
|
}
|
|
@@ -66,40 +66,24 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
66
66
|
deinitializeTooltips();
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
//
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}).catch(error => console.error("Error updating sidebar state:", error));
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
setTimeout(triggerAutoscale, 250);
|
|
69
|
+
// Update session
|
|
70
|
+
fetch(toggleUrl, {
|
|
71
|
+
method: "POST",
|
|
72
|
+
headers: {
|
|
73
|
+
"X-CSRFToken": csrfToken,
|
|
74
|
+
"Content-Type": "application/x-www-form-urlencoded",
|
|
75
|
+
},
|
|
76
|
+
body: `collapsed=${isCollapsed}`
|
|
77
|
+
}).then(response => response.json())
|
|
78
|
+
.then(data => {
|
|
79
|
+
if (data.status === "success") {
|
|
80
|
+
isSessionCollapsed = isCollapsed; // Update local state
|
|
81
|
+
}
|
|
82
|
+
}).catch(error => console.error("Error updating sidebar state:", error));
|
|
87
83
|
});
|
|
88
84
|
}
|
|
89
85
|
|
|
90
|
-
|
|
91
|
-
// This fixes the "sticking to top of screen" glitch during transitions
|
|
92
|
-
sidebar.addEventListener("click", function (event) {
|
|
93
|
-
// Find all tooltips in the sidebar and dispose them immediately
|
|
94
|
-
// This ensures they are completely removed from the DOM before any transition
|
|
95
|
-
const sidebarItems = sidebar.querySelectorAll(".list-group-item, .accordion-button");
|
|
96
|
-
sidebarItems.forEach(item => {
|
|
97
|
-
if (item._tooltip) {
|
|
98
|
-
item._tooltip.dispose();
|
|
99
|
-
delete item._tooltip;
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
});
|
|
86
|
+
|
|
103
87
|
});
|
|
104
88
|
|
|
105
89
|
// Close sidebar when clicking outside (only for small screens)
|
|
@@ -154,12 +138,3 @@ function deinitializeTooltips() {
|
|
|
154
138
|
}
|
|
155
139
|
});
|
|
156
140
|
}
|
|
157
|
-
|
|
158
|
-
function triggerAutoscale() {
|
|
159
|
-
if (window.innerWidth > 1100) {
|
|
160
|
-
const autoscaleButton = document.querySelector('.modebar-btn[data-title="Reset axes"]');
|
|
161
|
-
if (autoscaleButton) {
|
|
162
|
-
autoscaleButton.click();
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/* --- Blue Theme (Aqua - Formerly Light) --- */
|
|
2
|
+
:root.theme-blue {
|
|
3
|
+
--title: #1e4f99;
|
|
4
|
+
--body: #f6f7f98b;
|
|
5
|
+
--htitle: #256cb2;
|
|
6
|
+
--hbody: #dee8ffdb;
|
|
7
|
+
--table-row: #e7f1fb;
|
|
8
|
+
--table-row-hover: #dfeaf5;
|
|
9
|
+
--primal: #2363c3;
|
|
10
|
+
--primal_dark: #1e4f99;
|
|
11
|
+
--primal-rgb: 35, 99, 195;
|
|
12
|
+
--btn-primary-shadow: rgba(35, 99, 195, 0.4);
|
|
13
|
+
|
|
14
|
+
/* Login Theme Variables */
|
|
15
|
+
--bg-gradient: linear-gradient(135deg, #f6f7f9 0%, #dee8ff 100%);
|
|
16
|
+
--right-bg: var(--title);
|
|
17
|
+
--primary-color: var(--primal);
|
|
18
|
+
|
|
19
|
+
/* Bootstrap Overrides */
|
|
20
|
+
--bs-primary: var(--primal);
|
|
21
|
+
--bs-primary-rgb: var(--primal-rgb);
|
|
22
|
+
--bs-btn-bg: var(--primal);
|
|
23
|
+
--bs-btn-border-color: var(--primal);
|
|
24
|
+
--bs-btn-hover-bg: var(--primal_dark);
|
|
25
|
+
--bs-btn-hover-border-color: var(--primal_dark);
|
|
26
|
+
--bs-link-color: var(--primal);
|
|
27
|
+
--bs-link-hover-color: var(--primal_dark);
|
|
28
|
+
}
|
|
29
|
+
:root.theme-blue .titlebar {
|
|
30
|
+
background: linear-gradient(90deg, #ffffff 10%, #e7f1fb 90%) !important;
|
|
31
|
+
}
|
|
32
|
+
:root.theme-blue #sidebar {
|
|
33
|
+
background: linear-gradient(180deg, #ffffff 10%, #e7f1fb 100%) !important;
|
|
34
|
+
border-left: 1px solid #dfeaf5 !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:root.theme-blue .page .right {
|
|
38
|
+
background: var(--htitle) !important; /* Darker logo container */
|
|
39
|
+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
|
|
40
|
+
color: #e2e8f0 !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Dropdown & Button Overrides for Blue */
|
|
44
|
+
:root.theme-blue .dropdown-item:hover {
|
|
45
|
+
background-color: rgba(35, 99, 195, 0.08) !important;
|
|
46
|
+
color: #1e4f99 !important;
|
|
47
|
+
}
|
|
48
|
+
:root.theme-blue .titlebar .btn-light:hover {
|
|
49
|
+
background-color: rgba(35, 99, 195, 0.08) !important;
|
|
50
|
+
color: #1e4f99 !important;
|
|
51
|
+
}
|
|
@@ -0,0 +1,501 @@
|
|
|
1
|
+
/* --- Dark Theme (Modern) --- */
|
|
2
|
+
:root.theme-dark {
|
|
3
|
+
--title: #e2e8f0;
|
|
4
|
+
--body: #0f172a;
|
|
5
|
+
--htitle: #f8fafc;
|
|
6
|
+
--hbody: #1e293b;
|
|
7
|
+
--table-row: #1e293b;
|
|
8
|
+
--table-row-hover: #334155;
|
|
9
|
+
--primal: #3b82f6;
|
|
10
|
+
--primal_dark: #2563eb;
|
|
11
|
+
--primal-rgb: 59, 130, 246;
|
|
12
|
+
--btn-primary-shadow: rgba(59, 130, 246, 0.4);
|
|
13
|
+
color-scheme: dark; /* Forces browser native controls (scrollbars, form-control icons) to dark mode */
|
|
14
|
+
|
|
15
|
+
/* Bootstrap Overrides */
|
|
16
|
+
--bs-primary: var(--primal);
|
|
17
|
+
--bs-primary-rgb: var(--primal-rgb);
|
|
18
|
+
--bs-btn-bg: var(--primal);
|
|
19
|
+
--bs-btn-border-color: var(--primal);
|
|
20
|
+
--bs-btn-hover-bg: var(--primal_dark);
|
|
21
|
+
--bs-btn-hover-border-color: var(--primal_dark);
|
|
22
|
+
--bs-link-color: var(--primal);
|
|
23
|
+
--bs-link-hover-color: var(--primal_dark);
|
|
24
|
+
/* Dark Mode Specific Bootstrap Vars */
|
|
25
|
+
--bs-body-bg: var(--body);
|
|
26
|
+
--bs-body-color: var(--title);
|
|
27
|
+
|
|
28
|
+
/* Login Theme Variables */
|
|
29
|
+
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
30
|
+
--right-bg: var(--title);
|
|
31
|
+
--primary-color: var(--primal);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Force options to inherit dark theme colors */
|
|
35
|
+
:root.theme-dark select option {
|
|
36
|
+
background-color: #1e293b;
|
|
37
|
+
color: #e2e8f0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* --- Comprehensive Dark Theme Overrides --- */
|
|
41
|
+
|
|
42
|
+
/* 1. Global, Cards & Modals */
|
|
43
|
+
:root.theme-dark .card,
|
|
44
|
+
:root.theme-dark .card-body,
|
|
45
|
+
:root.theme-dark .dashboard-card,
|
|
46
|
+
:root.theme-dark .option-section,
|
|
47
|
+
:root.theme-dark .list-group-item,
|
|
48
|
+
:root.theme-dark .modal-content {
|
|
49
|
+
background-color: #1e293b !important;
|
|
50
|
+
color: #e2e8f0 !important;
|
|
51
|
+
border-color: #334155 !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:root.theme-dark #sidebar {
|
|
55
|
+
background: #1e293b !important;
|
|
56
|
+
border-left: 1px solid #334155 !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:root.theme-dark .text-muted {
|
|
60
|
+
color: #94a3b8 !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:root.theme-dark .bg-light {
|
|
64
|
+
background-color: #0f172a !important;
|
|
65
|
+
border-color: #334155 !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Fix "Gray Fog" - Map white utilities to dark theme colors */
|
|
69
|
+
:root.theme-dark .bg-white {
|
|
70
|
+
background-color: #1e293b !important;
|
|
71
|
+
color: #e2e8f0 !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:root.theme-dark .border-white {
|
|
75
|
+
border-color: #334155 !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* 2. Titlebar */
|
|
79
|
+
:root.theme-dark .titlebar {
|
|
80
|
+
background: linear-gradient(90deg, #0f172a 10%, #1e293b 90%) !important;
|
|
81
|
+
border-bottom: 1px solid #334155 !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:root.theme-dark .titlebar p,
|
|
85
|
+
:root.theme-dark .titlebar .btn-light {
|
|
86
|
+
color: #e2e8f0 !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:root.theme-dark .titlebar .btn-light:hover {
|
|
90
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
91
|
+
color: #fff !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* 3. Forms & Inputs */
|
|
95
|
+
:root.theme-dark .form-control,
|
|
96
|
+
:root.theme-dark .form-select,
|
|
97
|
+
:root.theme-dark .input-group-text {
|
|
98
|
+
background-color: #0f172a !important;
|
|
99
|
+
border-color: #334155 !important;
|
|
100
|
+
color: #e2e8f0 !important;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:root.theme-dark .form-control:focus,
|
|
104
|
+
:root.theme-dark .form-select:focus {
|
|
105
|
+
background-color: #0f172a !important; /* Kept same as resting state */
|
|
106
|
+
border-color: #334155 !important;
|
|
107
|
+
color: #fff !important;
|
|
108
|
+
box-shadow: none !important;
|
|
109
|
+
outline: none !important;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:root.theme-dark label,
|
|
113
|
+
:root.theme-dark .form-label,
|
|
114
|
+
:root.theme-dark .col-form-label {
|
|
115
|
+
color: #e2e8f0 !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:root.theme-dark ::placeholder {
|
|
119
|
+
color: #64748b !important;
|
|
120
|
+
opacity: 1;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* 4. Tables */
|
|
124
|
+
:root.theme-dark .table {
|
|
125
|
+
color: #e2e8f0 !important;
|
|
126
|
+
--bs-table-color: #e2e8f0 !important;
|
|
127
|
+
--bs-table-striped-color: #e2e8f0 !important;
|
|
128
|
+
--bs-table-active-color: #e2e8f0 !important;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
:root.theme-dark .table thead th {
|
|
132
|
+
background-color: #1e293b !important;
|
|
133
|
+
color: #fff !important;
|
|
134
|
+
border-color: #334155 !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:root.theme-dark .table>tbody>tr>td,
|
|
138
|
+
:root.theme-dark .table>tbody>tr>th {
|
|
139
|
+
border-color: #334155 !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
:root.theme-dark .table>tbody>tr:nth-child(odd)>td,
|
|
143
|
+
:root.theme-dark .table>tbody>tr:nth-child(odd)>th {
|
|
144
|
+
--bs-table-bg-type: #0f172a !important;
|
|
145
|
+
background-color: #0f172a !important;
|
|
146
|
+
color: var(--htitle) !important;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
:root.theme-dark .table>tbody>tr:nth-child(even)>td,
|
|
150
|
+
:root.theme-dark .table>tbody>tr:nth-child(even)>th {
|
|
151
|
+
--bs-table-bg-type: #1e293b !important;
|
|
152
|
+
background-color: #1e293b !important;
|
|
153
|
+
color: var(--htitle) !important;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* 5. Dropdowns */
|
|
157
|
+
:root.theme-dark .dropdown-menu {
|
|
158
|
+
background-color: #1e293b !important;
|
|
159
|
+
border-color: #334155 !important;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:root.theme-dark .dropdown-item {
|
|
163
|
+
color: var(--htitle) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
:root.theme-dark .dropdown-item:hover {
|
|
167
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
168
|
+
color: #fff !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* 6. Sidebar Active State & Scrollbar */
|
|
172
|
+
:root.theme-dark .list-group-item.active {
|
|
173
|
+
background-color: var(--primal) !important;
|
|
174
|
+
border-color: var(--primal) !important;
|
|
175
|
+
color: #fff !important;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
:root.theme-dark ::-webkit-scrollbar-track {
|
|
179
|
+
background: #0f172a;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:root.theme-dark ::-webkit-scrollbar-thumb {
|
|
183
|
+
background: #334155;
|
|
184
|
+
border: 3px solid #0f172a;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* 7. Plotly/Charts (SVG Hacks) */
|
|
188
|
+
:root.theme-dark .js-plotly-plot .main-svg {
|
|
189
|
+
background: transparent !important;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:root.theme-dark .js-plotly-plot text {
|
|
193
|
+
fill: #cbd5e1 !important; /* Slate-300 for text */
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
:root.theme-dark .js-plotly-plot .xgrid,
|
|
197
|
+
:root.theme-dark .js-plotly-plot .ygrid,
|
|
198
|
+
:root.theme-dark .js-plotly-plot .zerolinelayer path {
|
|
199
|
+
stroke: #334155 !important; /* Darker grid lines */
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
:root.theme-dark .js-plotly-plot .bg {
|
|
203
|
+
fill: rgba(0,0,0,0) !important; /* Transparent background for chart area */
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* 8. Text Elements & Headers */
|
|
207
|
+
:root.theme-dark h1,
|
|
208
|
+
:root.theme-dark h2,
|
|
209
|
+
:root.theme-dark h3,
|
|
210
|
+
:root.theme-dark h4,
|
|
211
|
+
:root.theme-dark h5,
|
|
212
|
+
:root.theme-dark h6,
|
|
213
|
+
:root.theme-dark .header-title,
|
|
214
|
+
:root.theme-dark .stat-value,
|
|
215
|
+
:root.theme-dark .form-text {
|
|
216
|
+
color: #e2e8f0 !important;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* 9. Sidebar & Button Specifics Clean-up */
|
|
220
|
+
:root.theme-dark .sidebar .list-group-item,
|
|
221
|
+
:root.theme-dark .sidebar .accordion-button {
|
|
222
|
+
border-color: transparent !important;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
:root.theme-dark .titlebar .login-title-btn {
|
|
226
|
+
border-color: transparent !important;
|
|
227
|
+
background-color: transparent !important;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* Ensure Soft Buttons (Secondary, Success, Info, Warning, Danger) Retain their identity in Dark Mode */
|
|
231
|
+
/* Force Black Text & Icons for these soft colored buttons */
|
|
232
|
+
:root.theme-dark .btn-secondary,
|
|
233
|
+
:root.theme-dark .btn-success,
|
|
234
|
+
:root.theme-dark .btn-info,
|
|
235
|
+
:root.theme-dark .btn-warning,
|
|
236
|
+
:root.theme-dark .btn-danger {
|
|
237
|
+
color: #000 !important; /* Force black text */
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
:root.theme-dark .btn-secondary .bi,
|
|
241
|
+
:root.theme-dark .btn-success .bi,
|
|
242
|
+
:root.theme-dark .btn-info .bi,
|
|
243
|
+
:root.theme-dark .btn-warning .bi,
|
|
244
|
+
:root.theme-dark .btn-danger .bi {
|
|
245
|
+
color: #000 !important; /* Force black icons */
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Slightly "Stale" / Desaturated Light Backgrounds for Dark Mode to stand out but not blinding */
|
|
249
|
+
:root.theme-dark .btn-secondary { background-color: #cbd5e1 !important; color: #1e293b !important; } /* Stale Slate-300 */
|
|
250
|
+
:root.theme-dark .btn-success { background-color: #a7f3d0 !important; color: #064e3b !important; } /* Stale Emerald-200 */
|
|
251
|
+
:root.theme-dark .btn-info { background-color: #bae6fd !important; color: #0c4a6e !important; } /* Stale Sky-200 */
|
|
252
|
+
:root.theme-dark .btn-warning { background-color: #fde68a !important; color: #78350f !important; } /* Stale Amber-200 */
|
|
253
|
+
:root.theme-dark .btn-danger { background-color: #fecaca !important; color: #7f1d1d !important; } /* Stale Red-200 */
|
|
254
|
+
|
|
255
|
+
/* Hover States for Dark Mode Soft Buttons */
|
|
256
|
+
:root.theme-dark .btn-secondary:hover { background-color: #94a3b8 !important; }
|
|
257
|
+
:root.theme-dark .btn-success:hover { background-color: #6ee7b7 !important; }
|
|
258
|
+
:root.theme-dark .btn-info:hover { background-color: #7dd3fc !important; }
|
|
259
|
+
:root.theme-dark .btn-warning:hover { background-color: #fcd34d !important; }
|
|
260
|
+
:root.theme-dark .btn-danger:hover { background-color: #fca5a5 !important; }
|
|
261
|
+
|
|
262
|
+
/* Ensure icons inside these specific buttons inherit the specific dark text color defined above */
|
|
263
|
+
:root.theme-dark .btn-secondary .bi,
|
|
264
|
+
:root.theme-dark .btn-success .bi,
|
|
265
|
+
:root.theme-dark .btn-info .bi,
|
|
266
|
+
:root.theme-dark .btn-warning .bi,
|
|
267
|
+
:root.theme-dark .btn-danger .bi {
|
|
268
|
+
color: inherit !important;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
:root.theme-dark .theme-preview {
|
|
272
|
+
border: none !important;
|
|
273
|
+
box-shadow: none !important;
|
|
274
|
+
outline: 2px solid #334155;
|
|
275
|
+
outline-offset: 2px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* 10. Users App Glass Components & Cards */
|
|
279
|
+
:root.theme-dark .glass-profile,
|
|
280
|
+
:root.theme-dark .glass-card,
|
|
281
|
+
:root.theme-dark .glass-detail {
|
|
282
|
+
background: rgba(30, 41, 59, 0.95) !important; /* Dark slate background */
|
|
283
|
+
border: 1px solid #334155 !important;
|
|
284
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
:root.theme-dark .info-label,
|
|
288
|
+
:root.theme-dark .info-label-sm,
|
|
289
|
+
:root.theme-dark .form-label-custom {
|
|
290
|
+
color: #94a3b8 !important; /* Muted text */
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
:root.theme-dark .info-value,
|
|
294
|
+
:root.theme-dark .info-value-lg,
|
|
295
|
+
:root.theme-dark .section-header,
|
|
296
|
+
:root.theme-dark .page-title {
|
|
297
|
+
color: #f1f5f9 !important; /* Bright text */
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
:root.theme-dark .form-control-glass {
|
|
301
|
+
background: rgba(15, 23, 42, 0.5) !important;
|
|
302
|
+
border-color: #334155 !important;
|
|
303
|
+
color: #e2e8f0 !important;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
:root.theme-dark .form-control-glass:focus {
|
|
307
|
+
background: rgba(15, 23, 42, 0.8) !important;
|
|
308
|
+
border-color: var(--primal) !important;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/* 11. Nav Tabs Visibility */
|
|
312
|
+
:root.theme-dark .nav-link {
|
|
313
|
+
color: #cbd5e1 !important; /* Inactive tabs: light gray */
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
:root.theme-dark .nav-link:hover {
|
|
317
|
+
color: #f8fafc !important;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Darken active tab slightly to distinguish */
|
|
321
|
+
:root.theme-dark .nav-link.active {
|
|
322
|
+
color: #60a5fa !important; /* Active tab: Light Blue 400 */
|
|
323
|
+
background-color: #162032 !important; /* Slightly darker than card (1e293b) */
|
|
324
|
+
border-color: #334155 !important;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
/* Ensure outline buttons have a visible thin outline */
|
|
328
|
+
:root.theme-dark .btn[class*="btn-outline-"] {
|
|
329
|
+
border-color: rgba(255, 255, 255, 0.25) !important;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
:root.theme-dark #decreeTabs .nav-link.active {
|
|
333
|
+
border-bottom-color: transparent !important;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/* 12. Reports & Gen Report Overrides */
|
|
337
|
+
:root.theme-dark .glass-container,
|
|
338
|
+
:root.theme-dark .report-stat-card {
|
|
339
|
+
background: rgba(30, 41, 59, 0.95) !important;
|
|
340
|
+
border: 1px solid #334155 !important;
|
|
341
|
+
box-shadow: none !important;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
:root.theme-dark .filter-label,
|
|
345
|
+
:root.theme-dark .stat-title {
|
|
346
|
+
color: #94a3b8 !important;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
:root.theme-dark .glass-input {
|
|
350
|
+
background-color: rgba(15, 23, 42, 0.5) !important;
|
|
351
|
+
border-color: #334155 !important;
|
|
352
|
+
color: #e2e8f0 !important;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* 13. Utilities & Icons Fix */
|
|
356
|
+
:root.theme-dark .text-dark,
|
|
357
|
+
:root.theme-dark .bi-three-dots,
|
|
358
|
+
:root.theme-dark .bi-three-dots-vertical,
|
|
359
|
+
:root.theme-dark .bi {
|
|
360
|
+
color: #e2e8f0 !important;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* 14. Sidebar Toggle */
|
|
364
|
+
:root.theme-dark .sidebar-toggle {
|
|
365
|
+
color: #e2e8f0 !important;
|
|
366
|
+
background-color: transparent !important; /* Ensure it doesn't have a white bg */
|
|
367
|
+
}
|
|
368
|
+
:root.theme-dark .sidebar-toggle:hover {
|
|
369
|
+
background-color: rgba(255,255,255,0.1) !important;
|
|
370
|
+
color: #fff !important;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* 15. Login Screen Overrides ({% static 'users/css/login.css' %}) */
|
|
374
|
+
:root.theme-dark .page .left {
|
|
375
|
+
background: rgba(30, 41, 59, 0.95) !important; /* Dark slate form container */
|
|
376
|
+
border: 1px solid #334155 !important;
|
|
377
|
+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
:root.theme-dark .page .right {
|
|
381
|
+
background: #0f172a !important; /* Darker logo container */
|
|
382
|
+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
|
|
383
|
+
color: #e2e8f0 !important;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
:root.theme-dark .page label {
|
|
387
|
+
color: #cbd5e1 !important;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
:root.theme-dark .page input {
|
|
391
|
+
background: rgba(15, 23, 42, 0.5) !important;
|
|
392
|
+
border-color: #334155 !important;
|
|
393
|
+
color: #e2e8f0 !important;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
:root.theme-dark .page input:focus {
|
|
397
|
+
background: rgba(15, 23, 42, 0.8) !important;
|
|
398
|
+
border-color: var(--primal) !important;
|
|
399
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
/* 16. Pagination Dark Theme */
|
|
403
|
+
:root.theme-dark .pagination .page-link {
|
|
404
|
+
background-color: #1e293b !important;
|
|
405
|
+
border-color: #334155 !important;
|
|
406
|
+
color: #cbd5e1 !important;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
:root.theme-dark .pagination .page-link:hover {
|
|
410
|
+
background-color: #334155 !important;
|
|
411
|
+
border-color: #475569 !important;
|
|
412
|
+
color: #f8fafc !important;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
:root.theme-dark .pagination .page-item.active .page-link {
|
|
416
|
+
background-color: var(--primal) !important;
|
|
417
|
+
border-color: var(--primal) !important;
|
|
418
|
+
color: #fff !important;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
:root.theme-dark .pagination .page-item.disabled .page-link {
|
|
422
|
+
background-color: #0f172a !important;
|
|
423
|
+
border-color: #1e293b !important;
|
|
424
|
+
color: #475569 !important;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* 17. File Input Dark Mode Fix */
|
|
428
|
+
:root.theme-dark input[type="file"].form-control {
|
|
429
|
+
background-color: #1e293b !important;
|
|
430
|
+
color: #e2e8f0 !important;
|
|
431
|
+
border-color: #334155 !important;
|
|
432
|
+
}
|
|
433
|
+
:root.theme-dark input[type="file"]::file-selector-button {
|
|
434
|
+
background-color: #334155 !important;
|
|
435
|
+
color: #e2e8f0 !important;
|
|
436
|
+
border: none !important;
|
|
437
|
+
border-right: 1px solid #475569 !important;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
/* 19. Sidebar Tooltip Dark Mode Fix */
|
|
441
|
+
:root.theme-dark .tooltip-custom .tooltip-inner {
|
|
442
|
+
background-color: #334155 !important; /* Slate-700 (Dark but visible against Slate-900 body) */
|
|
443
|
+
color: #f8fafc !important; /* Slate-50 - Bright white/gray text */
|
|
444
|
+
border: 1px solid #475569 !important; /* Subtle border for definition */
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
/* 18. Permissions Card Header Fix (Users App) */
|
|
448
|
+
:root.theme-dark .permissions-card-header {
|
|
449
|
+
background-color: #0f172a !important; /* Dark background */
|
|
450
|
+
color: #e2e8f0 !important; /* Light text */
|
|
451
|
+
border-bottom: 1px solid #334155 !important;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
/* 18b. Form Toggle/Checkbox Dark Mode Fix */
|
|
455
|
+
:root.theme-dark .form-check-input {
|
|
456
|
+
background-color: #334155 !important; /* Visible track/box when unchecked */
|
|
457
|
+
border-color: #475569 !important;
|
|
458
|
+
}
|
|
459
|
+
:root.theme-dark .form-check-input:checked {
|
|
460
|
+
background-color: var(--primal) !important;
|
|
461
|
+
border-color: var(--primal) !important;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
:root.theme-dark .permissions-card-header h5.app-title {
|
|
465
|
+
color: #e2e8f0 !important;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
:root.theme-dark .permissions-card-body {
|
|
469
|
+
background-color: #1e293b !important;
|
|
470
|
+
color: #e2e8f0 !important;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
:root.theme-dark .model-group {
|
|
474
|
+
background-color: #0f172a !important;
|
|
475
|
+
border: 1px solid #334155 !important;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
:root.theme-dark .model-header {
|
|
479
|
+
background-color: #1e293b !important;
|
|
480
|
+
border-bottom: 1px solid #334155 !important;
|
|
481
|
+
color: #e2e8f0 !important;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
:root.theme-dark .model-title {
|
|
485
|
+
color: #e2e8f0 !important;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
:root.theme-dark .model-permissions {
|
|
489
|
+
background-color: #0f172a !important;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
:root.theme-dark .permission-item:hover {
|
|
493
|
+
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
:root.theme-dark .permissions-card-footer {
|
|
497
|
+
background-color: #0f172a !important;
|
|
498
|
+
border-top: 1px solid #334155 !important;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
|