dbviewer 0.3.16 → 0.4.2
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.
- checksums.yaml +4 -4
- data/README.md +2 -0
- data/app/controllers/concerns/dbviewer/database_operations.rb +11 -29
- data/app/controllers/concerns/dbviewer/pagination_concern.rb +0 -17
- data/app/controllers/dbviewer/home_controller.rb +3 -0
- data/app/controllers/dbviewer/tables_controller.rb +45 -83
- data/app/helpers/dbviewer/application_helper.rb +313 -17
- data/app/views/dbviewer/entity_relationship_diagrams/index.html.erb +0 -4
- data/app/views/dbviewer/home/index.html.erb +34 -95
- data/app/views/dbviewer/logs/index.html.erb +0 -4
- data/app/views/dbviewer/tables/index.html.erb +0 -4
- data/app/views/dbviewer/tables/query.html.erb +0 -4
- data/app/views/dbviewer/tables/show.html.erb +516 -309
- data/app/views/layouts/dbviewer/application.html.erb +742 -84
- data/lib/dbviewer/table_metadata_manager.rb +33 -1
- data/lib/dbviewer/version.rb +1 -1
- metadata +3 -3
- /data/app/views/{dbviewer → layouts/dbviewer}/shared/_sidebar.html.erb +0 -0
|
@@ -23,15 +23,31 @@
|
|
|
23
23
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
24
24
|
<!-- Bootstrap Icons -->
|
|
25
25
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
|
26
|
+
<!-- Google Fonts -->
|
|
27
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
26
28
|
<!-- Chart.js for Data Visualization -->
|
|
27
29
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
|
28
30
|
|
|
29
31
|
<style>
|
|
32
|
+
/* Base styles and typography */
|
|
33
|
+
body {
|
|
34
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
35
|
+
font-size: 0.95rem;
|
|
36
|
+
line-height: 1.5;
|
|
37
|
+
letter-spacing: -0.01em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
letter-spacing: -0.02em;
|
|
43
|
+
line-height: 1.25;
|
|
44
|
+
}
|
|
45
|
+
|
|
30
46
|
/* Core layout styles */
|
|
31
47
|
.dbviewer-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
|
|
32
|
-
.dbviewer-navbar { height:
|
|
33
|
-
.dbviewer-navbar-spacer { height:
|
|
34
|
-
.dbviewer-content { display: flex; flex: 1; min-height: calc(100vh -
|
|
48
|
+
.dbviewer-navbar { height: 60px; }
|
|
49
|
+
.dbviewer-navbar-spacer { height: 60px; } /* Creates space for the fixed navbar */
|
|
50
|
+
.dbviewer-content { display: flex; flex: 1; min-height: calc(100vh - 60px); padding-top: 0; }
|
|
35
51
|
|
|
36
52
|
/* Smooth theme transitions */
|
|
37
53
|
html {
|
|
@@ -51,47 +67,49 @@
|
|
|
51
67
|
transition: color 0.2s ease, background-color 0.2s ease;
|
|
52
68
|
}
|
|
53
69
|
|
|
54
|
-
/* Sidebar styles */
|
|
70
|
+
/* Sidebar styles - enhanced for elegance */
|
|
55
71
|
.dbviewer-sidebar {
|
|
56
72
|
width: 260px;
|
|
57
|
-
height: calc(100vh -
|
|
73
|
+
height: calc(100vh - 60px);
|
|
58
74
|
position: fixed;
|
|
59
|
-
top:
|
|
75
|
+
top: 60px; /* Positioned right below the fixed navbar */
|
|
60
76
|
left: 0;
|
|
61
77
|
z-index: 1000;
|
|
62
78
|
display: flex;
|
|
63
79
|
flex-direction: column;
|
|
64
|
-
transition: transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
80
|
+
transition: transform 0.3s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
|
|
65
81
|
overflow: hidden; /* Changed from overflow-y: auto */
|
|
82
|
+
box-shadow: 3px 0 20px rgba(0, 0, 0, 0.05);
|
|
66
83
|
}
|
|
67
84
|
|
|
68
85
|
/* Dark mode overrides */
|
|
69
86
|
[data-bs-theme="light"] .dbviewer-sidebar {
|
|
70
|
-
background: #
|
|
71
|
-
border-right: 1px solid
|
|
87
|
+
background: #ffffff;
|
|
88
|
+
border-right: 1px solid rgba(222, 226, 230, 0.6);
|
|
72
89
|
}
|
|
73
90
|
|
|
74
91
|
[data-bs-theme="dark"] .dbviewer-sidebar {
|
|
75
|
-
background: #
|
|
76
|
-
border-right: 1px solid
|
|
92
|
+
background: #1a1d20;
|
|
93
|
+
border-right: 1px solid rgba(73, 80, 87, 0.3);
|
|
77
94
|
}
|
|
78
95
|
|
|
79
96
|
.dbviewer-sidebar-header {
|
|
80
|
-
padding:
|
|
81
|
-
font-weight:
|
|
97
|
+
padding: 1.2rem 1.25rem;
|
|
98
|
+
font-weight: 600;
|
|
82
99
|
align-items: center;
|
|
83
100
|
justify-content: space-between;
|
|
84
101
|
flex-shrink: 0;
|
|
102
|
+
display: flex;
|
|
85
103
|
}
|
|
86
104
|
|
|
87
105
|
[data-bs-theme="light"] .dbviewer-sidebar-header {
|
|
88
|
-
border-bottom: 1px solid
|
|
89
|
-
background: #f1f3f5;
|
|
106
|
+
border-bottom: 1px solid rgba(222, 226, 230, 0.6);
|
|
107
|
+
background: linear-gradient(to right, #f8f9fa, #f1f3f5);
|
|
90
108
|
}
|
|
91
109
|
|
|
92
110
|
[data-bs-theme="dark"] .dbviewer-sidebar-header {
|
|
93
|
-
border-bottom: 1px solid
|
|
94
|
-
background: #343a40;
|
|
111
|
+
border-bottom: 1px solid rgba(73, 80, 87, 0.3);
|
|
112
|
+
background: linear-gradient(to right, #343a40, #2c3034);
|
|
95
113
|
}
|
|
96
114
|
|
|
97
115
|
.dbviewer-sidebar-header h5 {
|
|
@@ -132,15 +150,35 @@
|
|
|
132
150
|
}
|
|
133
151
|
|
|
134
152
|
[data-bs-theme="dark"] .dbviewer-sidebar-top {
|
|
135
|
-
background: #
|
|
136
|
-
border-bottom: 1px solid
|
|
153
|
+
background: #1a1d20;
|
|
154
|
+
border-bottom: 1px solid rgba(73, 80, 87, 0.3);
|
|
137
155
|
}
|
|
138
156
|
|
|
139
157
|
.dbviewer-sidebar-content {
|
|
140
158
|
flex: 1;
|
|
141
159
|
overflow-y: auto;
|
|
142
|
-
padding: 0;
|
|
160
|
+
padding: 0.5rem 0;
|
|
143
161
|
height: 100%;
|
|
162
|
+
/* Improved scrollbar */
|
|
163
|
+
scrollbar-width: thin;
|
|
164
|
+
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.dbviewer-sidebar-content::-webkit-scrollbar {
|
|
168
|
+
width: 4px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.dbviewer-sidebar-content::-webkit-scrollbar-track {
|
|
172
|
+
background: transparent;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.dbviewer-sidebar-content::-webkit-scrollbar-thumb {
|
|
176
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
177
|
+
border-radius: 6px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
[data-bs-theme="dark"] .dbviewer-sidebar-content::-webkit-scrollbar-thumb {
|
|
181
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
144
182
|
}
|
|
145
183
|
|
|
146
184
|
.dbviewer-main {
|
|
@@ -149,34 +187,55 @@
|
|
|
149
187
|
padding: 2rem 2.5rem;
|
|
150
188
|
padding-top: 1.5rem; /* Adjusted for fixed header */
|
|
151
189
|
min-width: 0;
|
|
190
|
+
animation: fadeIn 0.5s ease-in-out;
|
|
191
|
+
transition: all 0.3s ease;
|
|
192
|
+
background: var(--bs-body-bg);
|
|
152
193
|
}
|
|
153
194
|
|
|
154
|
-
|
|
195
|
+
@keyframes fadeIn {
|
|
196
|
+
from { opacity: 0.6; }
|
|
197
|
+
to { opacity: 1; }
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Enhanced mobile responsiveness with smooth animations */
|
|
155
201
|
@media (max-width: 991.98px) {
|
|
156
|
-
.dbviewer-sidebar {
|
|
157
|
-
|
|
158
|
-
|
|
202
|
+
.dbviewer-sidebar {
|
|
203
|
+
transform: translateX(-100%);
|
|
204
|
+
box-shadow: none;
|
|
205
|
+
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.dbviewer-sidebar.active {
|
|
209
|
+
transform: translateX(0);
|
|
210
|
+
box-shadow: 5px 0 20px rgba(0, 0, 0, 0.15);
|
|
211
|
+
}
|
|
159
212
|
|
|
160
|
-
|
|
213
|
+
.dbviewer-main {
|
|
214
|
+
margin-left: 0;
|
|
215
|
+
padding: 1.25rem;
|
|
216
|
+
transition: padding 0.3s ease;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Improved overlay for mobile sidebar */
|
|
161
220
|
.dbviewer-sidebar-overlay {
|
|
162
221
|
position: fixed;
|
|
163
|
-
top:
|
|
222
|
+
top: 60px; /* Start below the fixed navbar */
|
|
164
223
|
left: 0;
|
|
165
224
|
right: 0;
|
|
166
225
|
bottom: 0;
|
|
167
|
-
|
|
226
|
+
backdrop-filter: blur(2px);
|
|
168
227
|
z-index: 999;
|
|
169
228
|
opacity: 0;
|
|
170
229
|
visibility: hidden;
|
|
171
|
-
transition:
|
|
230
|
+
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
172
231
|
}
|
|
173
232
|
|
|
174
233
|
[data-bs-theme="light"] .dbviewer-sidebar-overlay {
|
|
175
|
-
background: rgba(0,0,0,0.
|
|
234
|
+
background: rgba(0,0,0,0.3);
|
|
176
235
|
}
|
|
177
236
|
|
|
178
237
|
[data-bs-theme="dark"] .dbviewer-sidebar-overlay {
|
|
179
|
-
background: rgba(0,0,0,0.
|
|
238
|
+
background: rgba(0,0,0,0.5);
|
|
180
239
|
}
|
|
181
240
|
|
|
182
241
|
.dbviewer-sidebar-overlay.active {
|
|
@@ -184,54 +243,241 @@
|
|
|
184
243
|
visibility: visible;
|
|
185
244
|
}
|
|
186
245
|
|
|
246
|
+
/* Toggle button styling */
|
|
247
|
+
.dbviewer-sidebar-toggle {
|
|
248
|
+
border-radius: 8px;
|
|
249
|
+
padding: 0.4rem 0.8rem;
|
|
250
|
+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
251
|
+
border: none;
|
|
252
|
+
background: var(--bs-primary);
|
|
253
|
+
color: white;
|
|
254
|
+
font-weight: 500;
|
|
255
|
+
transition: all 0.2s ease;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.dbviewer-sidebar-toggle:hover {
|
|
259
|
+
transform: translateY(-1px);
|
|
260
|
+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
261
|
+
}
|
|
262
|
+
|
|
187
263
|
body.dbviewer-sidebar-open {
|
|
188
264
|
overflow: hidden;
|
|
189
265
|
}
|
|
190
266
|
}
|
|
191
267
|
|
|
192
268
|
@media (max-width: 767.98px) {
|
|
193
|
-
.dbviewer-sidebar { width:
|
|
194
|
-
.dbviewer-main { padding:
|
|
269
|
+
.dbviewer-sidebar { width: 230px; }
|
|
270
|
+
.dbviewer-main { padding: 1rem; }
|
|
195
271
|
.dbviewer-sidebar-header h5 { max-width: 70%; font-size: 1rem; }
|
|
272
|
+
|
|
273
|
+
/* Make tables more responsive */
|
|
274
|
+
.table-responsive {
|
|
275
|
+
overflow-x: auto;
|
|
276
|
+
-webkit-overflow-scrolling: touch;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.stat-card-bg {
|
|
280
|
+
margin-bottom: 1rem;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* Extra small screens */
|
|
285
|
+
@media (max-width: 575.98px) {
|
|
286
|
+
.dbviewer-main { padding: 0.75rem; }
|
|
287
|
+
h1, .h1 { font-size: 1.6rem; }
|
|
288
|
+
h2, .h2 { font-size: 1.4rem; }
|
|
289
|
+
h3, .h3 { font-size: 1.2rem; }
|
|
290
|
+
|
|
291
|
+
.btn-sm {
|
|
292
|
+
font-size: 0.8rem;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.card-body {
|
|
296
|
+
padding: 1rem;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Table filter input - enhanced */
|
|
301
|
+
.dbviewer-table-filter-container {
|
|
302
|
+
position: relative;
|
|
303
|
+
padding: 0.75rem 1rem;
|
|
304
|
+
margin-bottom: 0.5rem;
|
|
305
|
+
transition: background-color 0.2s ease;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.dbviewer-table-filter-icon {
|
|
309
|
+
position: absolute;
|
|
310
|
+
left: 1.5rem;
|
|
311
|
+
top: 50%;
|
|
312
|
+
transform: translateY(-50%);
|
|
313
|
+
color: #6c757d;
|
|
314
|
+
font-size: 0.85rem;
|
|
315
|
+
padding: 0.25rem;
|
|
316
|
+
width: 1.5rem;
|
|
317
|
+
text-align: center;
|
|
318
|
+
z-index: 2;
|
|
319
|
+
transition: color 0.2s ease;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.dbviewer-table-filter {
|
|
323
|
+
border-radius: 8px;
|
|
324
|
+
padding: 0.65rem 0.85rem 0.65rem 2.5rem;
|
|
325
|
+
margin-bottom: 1rem;
|
|
326
|
+
transition: all 0.2s ease;
|
|
327
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
328
|
+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
329
|
+
font-size: 0.9rem;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.dbviewer-table-filter:focus {
|
|
333
|
+
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
|
|
334
|
+
border-color: #86b7fe;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
[data-bs-theme="dark"] .dbviewer-table-filter {
|
|
338
|
+
background: rgba(255, 255, 255, 0.05);
|
|
339
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
196
340
|
}
|
|
197
341
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
.dbviewer-table-filter { border-radius: 20px; padding-left: 2.5rem; margin-bottom: 1rem; }
|
|
342
|
+
[data-bs-theme="dark"] .dbviewer-table-filter:focus {
|
|
343
|
+
border-color: rgba(134, 183, 254, 0.7);
|
|
344
|
+
}
|
|
202
345
|
|
|
203
346
|
/* Table structure and visualization components */
|
|
204
|
-
.dbviewer-card {
|
|
347
|
+
.dbviewer-card {
|
|
348
|
+
border-radius: 0.5rem;
|
|
349
|
+
transition: all 0.2s ease;
|
|
350
|
+
overflow: hidden;
|
|
351
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
352
|
+
height: 100%;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.dbviewer-card:hover {
|
|
356
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.1);
|
|
357
|
+
transform: translateY(-2px);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Improved card headers */
|
|
361
|
+
.dbviewer-card .card-header {
|
|
362
|
+
font-weight: 600;
|
|
363
|
+
padding: 1rem 1.25rem;
|
|
364
|
+
border-bottom-width: 1px;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/* Card body padding */
|
|
368
|
+
.dbviewer-card .card-body {
|
|
369
|
+
padding: 1.25rem;
|
|
370
|
+
}
|
|
205
371
|
|
|
206
372
|
[data-bs-theme="light"] .dbviewer-card {
|
|
207
|
-
border:
|
|
373
|
+
border: none;
|
|
374
|
+
background: #ffffff;
|
|
208
375
|
}
|
|
209
376
|
|
|
210
377
|
[data-bs-theme="dark"] .dbviewer-card {
|
|
211
|
-
border:
|
|
378
|
+
border: none;
|
|
379
|
+
background: #212529;
|
|
212
380
|
}
|
|
213
381
|
|
|
214
|
-
.dbviewer-scrollable {
|
|
215
|
-
|
|
382
|
+
.dbviewer-scrollable {
|
|
383
|
+
max-height: 700px;
|
|
384
|
+
overflow-y: auto;
|
|
385
|
+
scrollbar-width: thin;
|
|
386
|
+
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.dbviewer-scrollable::-webkit-scrollbar {
|
|
390
|
+
width: 5px;
|
|
391
|
+
height: 8px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.dbviewer-scrollable::-webkit-scrollbar-track {
|
|
395
|
+
background: transparent;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.dbviewer-scrollable::-webkit-scrollbar-thumb {
|
|
399
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
400
|
+
border-radius: 10px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
[data-bs-theme="dark"] .dbviewer-scrollable::-webkit-scrollbar-thumb {
|
|
404
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.dbviewer-scrollable thead {
|
|
408
|
+
position: sticky;
|
|
409
|
+
top: 0;
|
|
410
|
+
z-index: 1;
|
|
411
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
412
|
+
width: 100%;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* Ensure the scrollable table headers have solid backgrounds */
|
|
416
|
+
[data-bs-theme="light"] .dbviewer-scrollable thead {
|
|
417
|
+
background-color: #f1f3f5;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
[data-bs-theme="dark"] .dbviewer-scrollable thead {
|
|
421
|
+
background-color: #343a40;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/* Ensure individual th cells also have proper background */
|
|
425
|
+
.dbviewer-scrollable thead th {
|
|
426
|
+
background-color: transparent;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
/* Specific fix for sticky table headers to ensure solid backgrounds */
|
|
430
|
+
.table-responsive .table thead,
|
|
431
|
+
.dbviewer-scrollable .table thead {
|
|
432
|
+
position: sticky;
|
|
433
|
+
top: 0;
|
|
434
|
+
z-index: 40;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
/* Additional specificity for table headers in dark mode */
|
|
438
|
+
[data-bs-theme="light"] .table-responsive .table thead th,
|
|
439
|
+
[data-bs-theme="light"] .dbviewer-scrollable .table thead th {
|
|
440
|
+
background-color: #f1f3f5;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
[data-bs-theme="dark"] .table-responsive .table thead th,
|
|
444
|
+
[data-bs-theme="dark"] .dbviewer-scrollable .table thead th {
|
|
445
|
+
background-color: #343a40;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* Ensure borders appear properly with sticky headers */
|
|
449
|
+
.table thead th {
|
|
450
|
+
box-shadow: inset 0 1px 0 var(--bs-border-color),
|
|
451
|
+
inset 0 -1px 0 var(--bs-border-color);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
/* Enhanced badge styling */
|
|
455
|
+
.badge {
|
|
456
|
+
font-weight: 500;
|
|
457
|
+
padding: 0.4em 0.6em;
|
|
458
|
+
border-radius: 6px;
|
|
459
|
+
letter-spacing: 0.01em;
|
|
460
|
+
font-size: 0.75em;
|
|
461
|
+
text-transform: none;
|
|
462
|
+
}
|
|
216
463
|
|
|
217
|
-
/* Badge styling for dark mode */
|
|
218
464
|
[data-bs-theme="dark"] .bg-secondary-subtle {
|
|
219
465
|
background-color: rgba(255, 255, 255, 0.15) !important;
|
|
220
|
-
color: #
|
|
466
|
+
color: #f8f9fa !important;
|
|
221
467
|
}
|
|
222
468
|
|
|
223
469
|
[data-bs-theme="light"] .bg-secondary-subtle {
|
|
224
470
|
background-color: #e9ecef !important;
|
|
225
|
-
color: #
|
|
471
|
+
color: #495057 !important;
|
|
226
472
|
}
|
|
227
473
|
|
|
228
474
|
/* Table header styling */
|
|
229
475
|
.dbviewer-table-header {
|
|
230
|
-
background-color:
|
|
476
|
+
background-color: #f1f3f5;
|
|
231
477
|
}
|
|
232
478
|
|
|
233
479
|
[data-bs-theme="dark"] .dbviewer-table-header {
|
|
234
|
-
background-color:
|
|
480
|
+
background-color: #343a40;
|
|
235
481
|
}
|
|
236
482
|
|
|
237
483
|
/* List group styling for dark mode */
|
|
@@ -244,7 +490,7 @@
|
|
|
244
490
|
[data-bs-theme="dark"] .dbviewer-table-header {
|
|
245
491
|
position: sticky;
|
|
246
492
|
top: 0;
|
|
247
|
-
background: #
|
|
493
|
+
background: #343a40;
|
|
248
494
|
z-index: 1;
|
|
249
495
|
}
|
|
250
496
|
|
|
@@ -269,26 +515,32 @@
|
|
|
269
515
|
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
270
516
|
}
|
|
271
517
|
|
|
272
|
-
/*
|
|
518
|
+
/* Enhanced dark mode toggle */
|
|
273
519
|
.theme-toggle {
|
|
274
520
|
background: transparent;
|
|
275
521
|
border: none;
|
|
276
|
-
padding: 0.
|
|
522
|
+
padding: 0.4rem 0.6rem;
|
|
523
|
+
margin-right: 0.25rem;
|
|
277
524
|
cursor: pointer;
|
|
278
525
|
display: flex;
|
|
279
526
|
align-items: center;
|
|
527
|
+
justify-content: center;
|
|
280
528
|
color: white;
|
|
281
|
-
opacity: 0.
|
|
282
|
-
transition:
|
|
529
|
+
opacity: 0.85;
|
|
530
|
+
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
531
|
+
border-radius: 50%;
|
|
532
|
+
width: 36px;
|
|
533
|
+
height: 36px;
|
|
283
534
|
}
|
|
284
535
|
|
|
285
536
|
.theme-toggle:hover {
|
|
286
537
|
opacity: 1;
|
|
287
|
-
transform: rotate(
|
|
538
|
+
transform: rotate(15deg) scale(1.1);
|
|
539
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
288
540
|
}
|
|
289
541
|
|
|
290
542
|
.theme-toggle:active {
|
|
291
|
-
transform: rotate(
|
|
543
|
+
transform: rotate(30deg) scale(0.9);
|
|
292
544
|
}
|
|
293
545
|
|
|
294
546
|
.theme-toggle .bi-sun,
|
|
@@ -308,35 +560,103 @@
|
|
|
308
560
|
font-size: 1.2rem;
|
|
309
561
|
}
|
|
310
562
|
|
|
311
|
-
/* Header styles for
|
|
563
|
+
/* Header styles for a more professional look */
|
|
312
564
|
.navbar {
|
|
313
|
-
transition:
|
|
565
|
+
transition: all 0.3s ease;
|
|
566
|
+
padding: 0.5rem 1rem;
|
|
567
|
+
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.navbar-brand {
|
|
571
|
+
font-weight: 600;
|
|
572
|
+
letter-spacing: -0.01em;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.nav-link {
|
|
576
|
+
font-weight: 500;
|
|
577
|
+
padding: 0.5rem 0.8rem !important;
|
|
578
|
+
border-radius: 4px;
|
|
579
|
+
transition: all 0.2s ease;
|
|
580
|
+
margin: 0 2px;
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
.nav-link.active {
|
|
584
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.nav-link:hover:not(.active) {
|
|
588
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
314
589
|
}
|
|
315
590
|
|
|
316
591
|
[data-bs-theme="light"] .navbar.bg-primary {
|
|
317
|
-
background
|
|
592
|
+
background: linear-gradient(to right, #0d6efd, #0b5ed7) !important;
|
|
318
593
|
}
|
|
319
594
|
|
|
320
595
|
[data-bs-theme="dark"] .navbar.bg-primary {
|
|
321
|
-
background
|
|
322
|
-
border-bottom: 1px solid
|
|
596
|
+
background: linear-gradient(to right, #212529, #1a1e21) !important;
|
|
597
|
+
border-bottom: 1px solid rgba(73, 80, 87, 0.5);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
/* Enhanced list group styling */
|
|
601
|
+
.list-group-item {
|
|
602
|
+
border-radius: 0;
|
|
603
|
+
border-left: 0;
|
|
604
|
+
border-right: 0;
|
|
605
|
+
padding: 0.75rem 1.25rem;
|
|
606
|
+
transition: all 0.15s ease-in-out;
|
|
607
|
+
position: relative;
|
|
608
|
+
font-weight: 500;
|
|
609
|
+
font-size: 0.9rem;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
.list-group-item:first-child {
|
|
613
|
+
border-top: 0;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.list-group-item-action {
|
|
617
|
+
border-left: 3px solid transparent;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.list-group-item-action:hover {
|
|
621
|
+
border-left-color: rgba(13, 110, 253, 0.3);
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.list-group-item.active {
|
|
625
|
+
border-left-color: #0d6efd;
|
|
626
|
+
font-weight: 600;
|
|
627
|
+
position: relative;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
[data-bs-theme="light"] .list-group-item {
|
|
631
|
+
background-color: transparent;
|
|
632
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
[data-bs-theme="light"] .list-group-item.active {
|
|
636
|
+
background-color: rgba(13, 110, 253, 0.08);
|
|
637
|
+
color: #0d6efd;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
[data-bs-theme="light"] .list-group-item-action:hover,
|
|
641
|
+
[data-bs-theme="light"] .list-group-item-action:focus {
|
|
642
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
323
643
|
}
|
|
324
644
|
|
|
325
|
-
/* Sidebar list group styling for dark mode */
|
|
326
645
|
[data-bs-theme="dark"] .list-group-item {
|
|
327
|
-
background-color:
|
|
328
|
-
border-color:
|
|
646
|
+
background-color: transparent;
|
|
647
|
+
border-color: rgba(73, 80, 87, 0.3);
|
|
329
648
|
color: #e9ecef;
|
|
330
649
|
}
|
|
331
650
|
|
|
332
651
|
[data-bs-theme="dark"] .list-group-item.active {
|
|
333
|
-
background-color:
|
|
334
|
-
border-color:
|
|
652
|
+
background-color: rgba(13, 110, 253, 0.15);
|
|
653
|
+
border-color: rgba(73, 80, 87, 0.3);
|
|
654
|
+
color: #6ea8fe;
|
|
335
655
|
}
|
|
336
656
|
|
|
337
657
|
[data-bs-theme="dark"] .list-group-item-action:hover,
|
|
338
658
|
[data-bs-theme="dark"] .list-group-item-action:focus {
|
|
339
|
-
background-color:
|
|
659
|
+
background-color: rgba(255, 255, 255, 0.03);
|
|
340
660
|
color: #f8f9fa;
|
|
341
661
|
}
|
|
342
662
|
|
|
@@ -359,6 +679,59 @@
|
|
|
359
679
|
color: #adb5bd;
|
|
360
680
|
}
|
|
361
681
|
|
|
682
|
+
/* Enhanced button styling */
|
|
683
|
+
.btn {
|
|
684
|
+
font-weight: 500;
|
|
685
|
+
padding: 0.5rem 1rem;
|
|
686
|
+
border-radius: 0.375rem;
|
|
687
|
+
transition: all 0.2s ease;
|
|
688
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.btn-sm {
|
|
692
|
+
padding: 0.35rem 0.75rem;
|
|
693
|
+
font-size: 0.85rem;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.btn-lg {
|
|
697
|
+
padding: 0.65rem 1.2rem;
|
|
698
|
+
font-size: 1.05rem;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
.btn:active {
|
|
702
|
+
transform: translateY(1px);
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.btn-primary {
|
|
706
|
+
border: none;
|
|
707
|
+
background: linear-gradient(135deg, #0d6efd, #0b5ed7);
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.btn-primary:hover {
|
|
711
|
+
background: linear-gradient(135deg, #0b5ed7, #0a58ca);
|
|
712
|
+
transform: translateY(-1px);
|
|
713
|
+
box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25);
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.btn-outline-primary {
|
|
717
|
+
border-width: 1px;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.btn-outline-primary:hover {
|
|
721
|
+
transform: translateY(-1px);
|
|
722
|
+
box-shadow: 0 4px 8px rgba(13, 110, 253, 0.15);
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
[data-bs-theme="dark"] .btn-outline-primary {
|
|
726
|
+
border-color: rgba(13, 110, 253, 0.7);
|
|
727
|
+
color: #6ea8fe;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
[data-bs-theme="dark"] .btn-outline-primary:hover {
|
|
731
|
+
background-color: rgba(13, 110, 253, 0.2);
|
|
732
|
+
color: #6ea8fe;
|
|
733
|
+
}
|
|
734
|
+
|
|
362
735
|
/* Query timestamp */
|
|
363
736
|
[data-bs-theme="light"] .query-timestamp {
|
|
364
737
|
color: #6c757d;
|
|
@@ -387,6 +760,25 @@
|
|
|
387
760
|
text-decoration: underline;
|
|
388
761
|
}
|
|
389
762
|
|
|
763
|
+
/* Enhanced code blocks and SQL query styling */
|
|
764
|
+
pre, code {
|
|
765
|
+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
766
|
+
border-radius: 4px;
|
|
767
|
+
transition: all 0.2s ease;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
pre {
|
|
771
|
+
padding: 1rem;
|
|
772
|
+
margin-bottom: 1rem;
|
|
773
|
+
border-radius: 0.5rem;
|
|
774
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
code {
|
|
778
|
+
font-size: 0.875em;
|
|
779
|
+
padding: 0.2em 0.4em;
|
|
780
|
+
}
|
|
781
|
+
|
|
390
782
|
/* SQL query code in tables */
|
|
391
783
|
code.sql-query-code {
|
|
392
784
|
display: inline-block;
|
|
@@ -394,16 +786,38 @@
|
|
|
394
786
|
max-width: 100%;
|
|
395
787
|
overflow: hidden;
|
|
396
788
|
text-overflow: ellipsis;
|
|
397
|
-
padding:
|
|
398
|
-
border-radius:
|
|
789
|
+
padding: 3px 6px;
|
|
790
|
+
border-radius: 4px;
|
|
791
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
[data-bs-theme="light"] pre {
|
|
795
|
+
background-color: #f8f9fa;
|
|
796
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
[data-bs-theme="light"] code {
|
|
800
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
801
|
+
color: #d63384;
|
|
399
802
|
}
|
|
400
803
|
|
|
401
804
|
[data-bs-theme="light"] code.sql-query-code {
|
|
402
805
|
background-color: rgba(0, 0, 0, 0.05);
|
|
806
|
+
color: #0550a0;
|
|
403
807
|
}
|
|
404
808
|
|
|
405
|
-
[data-bs-theme="dark"]
|
|
809
|
+
[data-bs-theme="dark"] pre {
|
|
810
|
+
background-color: #2c3034;
|
|
811
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
[data-bs-theme="dark"] code {
|
|
406
815
|
background-color: rgba(255, 255, 255, 0.1);
|
|
816
|
+
color: #ff8bd0;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
[data-bs-theme="dark"] code.sql-query-code {
|
|
820
|
+
background-color: rgba(0, 123, 255, 0.1);
|
|
407
821
|
color: #65cdff;
|
|
408
822
|
}
|
|
409
823
|
|
|
@@ -427,29 +841,103 @@
|
|
|
427
841
|
font-size: 0.875rem;
|
|
428
842
|
}
|
|
429
843
|
|
|
430
|
-
/*
|
|
844
|
+
/* Enhanced database name badge */
|
|
431
845
|
.database-name-badge {
|
|
432
|
-
font-size: 0.
|
|
433
|
-
font-weight:
|
|
846
|
+
font-size: 0.9rem;
|
|
847
|
+
font-weight: 600;
|
|
434
848
|
text-transform: lowercase;
|
|
435
849
|
letter-spacing: 0.02em;
|
|
850
|
+
padding: 0.35em 0.65em;
|
|
851
|
+
border-radius: 6px;
|
|
852
|
+
box-shadow: 0 1px 5px rgba(13, 110, 253, 0.3);
|
|
853
|
+
transition: all 0.2s ease;
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.database-name-badge:hover {
|
|
857
|
+
transform: translateY(-1px);
|
|
858
|
+
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
|
|
436
859
|
}
|
|
437
860
|
|
|
438
861
|
[data-bs-theme="light"] .database-name-badge {
|
|
439
|
-
background
|
|
862
|
+
background: linear-gradient(135deg, #0d6efd, #0b5ed7);
|
|
440
863
|
color: #ffffff;
|
|
441
864
|
}
|
|
442
865
|
|
|
443
866
|
[data-bs-theme="dark"] .database-name-badge {
|
|
444
|
-
background
|
|
867
|
+
background: linear-gradient(135deg, #0d6efd, #0a58ca);
|
|
445
868
|
color: #ffffff;
|
|
446
869
|
}
|
|
447
870
|
|
|
448
|
-
/*
|
|
871
|
+
/* Enhanced table styling */
|
|
872
|
+
.table {
|
|
873
|
+
margin-bottom: 0;
|
|
874
|
+
width: 100%;
|
|
875
|
+
border-collapse: separate;
|
|
876
|
+
border-spacing: 0;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.table thead {
|
|
880
|
+
background-color: #f1f3f5;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
.table thead th {
|
|
884
|
+
padding: 1rem;
|
|
885
|
+
font-weight: 600;
|
|
886
|
+
border-top: 0;
|
|
887
|
+
vertical-align: middle;
|
|
888
|
+
letter-spacing: 0.01em;
|
|
889
|
+
font-size: 0.88rem;
|
|
890
|
+
text-transform: uppercase;
|
|
891
|
+
position: sticky;
|
|
892
|
+
top: 0;
|
|
893
|
+
z-index: 5;
|
|
894
|
+
background-color: inherit; /* Ensure it inherits from parent thead */
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
.table tbody td {
|
|
898
|
+
padding: 0.85rem 1rem;
|
|
899
|
+
vertical-align: middle;
|
|
900
|
+
border-color: var(--bs-border-color);
|
|
901
|
+
font-size: 0.92rem;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.table tbody tr:hover {
|
|
905
|
+
background-color: rgba(0, 0, 0, 0.02);
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
[data-bs-theme="light"] .table thead {
|
|
909
|
+
background-color: #f1f3f5;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
[data-bs-theme="light"] .table thead th {
|
|
913
|
+
color: #495057;
|
|
914
|
+
border-color: #dee2e6;
|
|
915
|
+
border-bottom: 2px solid #dee2e6;
|
|
916
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
[data-bs-theme="dark"] .table thead {
|
|
920
|
+
background-color: #343a40;
|
|
921
|
+
}
|
|
922
|
+
|
|
449
923
|
[data-bs-theme="dark"] .table thead th {
|
|
450
924
|
color: #e9ecef;
|
|
451
925
|
border-color: #495057;
|
|
452
926
|
border-bottom: 2px solid #495057;
|
|
927
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
[data-bs-theme="dark"] .table tbody tr:hover {
|
|
931
|
+
background-color: rgba(255, 255, 255, 0.03);
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
/* Zebra striping */
|
|
935
|
+
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
|
936
|
+
background-color: rgba(0, 0, 0, 0.015);
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
|
|
940
|
+
background-color: rgba(255, 255, 255, 0.02);
|
|
453
941
|
}
|
|
454
942
|
|
|
455
943
|
/* Card title colors */
|
|
@@ -472,13 +960,64 @@
|
|
|
472
960
|
color: #000 !important;
|
|
473
961
|
}
|
|
474
962
|
|
|
475
|
-
/*
|
|
963
|
+
/* Enhanced alert styling */
|
|
964
|
+
.alert {
|
|
965
|
+
border-radius: 0.5rem;
|
|
966
|
+
border-width: 0;
|
|
967
|
+
padding: 1rem 1.25rem;
|
|
968
|
+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
|
|
969
|
+
position: relative;
|
|
970
|
+
border-left: 4px solid transparent;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
.alert-info {
|
|
974
|
+
background-color: rgba(13, 202, 240, 0.1);
|
|
975
|
+
border-left-color: #0dcaf0;
|
|
976
|
+
color: #087990;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
.alert-danger {
|
|
980
|
+
background-color: rgba(220, 53, 69, 0.1);
|
|
981
|
+
border-left-color: #dc3545;
|
|
982
|
+
color: #b02a37;
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.alert-success {
|
|
986
|
+
background-color: rgba(25, 135, 84, 0.1);
|
|
987
|
+
border-left-color: #198754;
|
|
988
|
+
color: #146c43;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.alert-warning {
|
|
992
|
+
background-color: rgba(255, 193, 7, 0.1);
|
|
993
|
+
border-left-color: #ffc107;
|
|
994
|
+
color: #997404;
|
|
995
|
+
}
|
|
996
|
+
|
|
476
997
|
[data-bs-theme="dark"] .alert-info {
|
|
477
|
-
background-color: rgba(13, 202, 240, 0.
|
|
478
|
-
border-color:
|
|
998
|
+
background-color: rgba(13, 202, 240, 0.15);
|
|
999
|
+
border-left-color: #0dcaf0;
|
|
479
1000
|
color: #9eeaf9;
|
|
480
1001
|
}
|
|
481
1002
|
|
|
1003
|
+
[data-bs-theme="dark"] .alert-danger {
|
|
1004
|
+
background-color: rgba(220, 53, 69, 0.15);
|
|
1005
|
+
border-left-color: #dc3545;
|
|
1006
|
+
color: #ea868f;
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
[data-bs-theme="dark"] .alert-success {
|
|
1010
|
+
background-color: rgba(25, 135, 84, 0.15);
|
|
1011
|
+
border-left-color: #198754;
|
|
1012
|
+
color: #75b798;
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
[data-bs-theme="dark"] .alert-warning {
|
|
1016
|
+
background-color: rgba(255, 193, 7, 0.15);
|
|
1017
|
+
border-left-color: #ffc107;
|
|
1018
|
+
color: #ffda6a;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
482
1021
|
/* Background colors for card headers in dark mode */
|
|
483
1022
|
[data-bs-theme="dark"] .bg-danger-subtle {
|
|
484
1023
|
background-color: rgba(220, 53, 69, 0.2) !important;
|
|
@@ -552,23 +1091,142 @@
|
|
|
552
1091
|
background-color: var(--bs-light);
|
|
553
1092
|
}
|
|
554
1093
|
|
|
555
|
-
/*
|
|
1094
|
+
/* Enhanced stat cards and metric icons */
|
|
1095
|
+
.stat-card-bg {
|
|
1096
|
+
background: #ffffff;
|
|
1097
|
+
border-radius: 0.75rem;
|
|
1098
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
1099
|
+
transition: all 0.3s ease;
|
|
1100
|
+
border: none;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
.stat-card-bg:hover {
|
|
1104
|
+
transform: translateY(-3px);
|
|
1105
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
[data-bs-theme="dark"] .stat-card-bg {
|
|
1109
|
+
background-color: #212529;
|
|
1110
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
/* Enhanced metric icon styling */
|
|
556
1114
|
.metric-icon {
|
|
557
1115
|
display: flex;
|
|
558
1116
|
align-items: center;
|
|
559
1117
|
justify-content: center;
|
|
560
|
-
border-radius:
|
|
561
|
-
width:
|
|
562
|
-
height:
|
|
563
|
-
min-width:
|
|
1118
|
+
border-radius: 14px;
|
|
1119
|
+
width: 65px;
|
|
1120
|
+
height: 65px;
|
|
1121
|
+
min-width: 65px;
|
|
564
1122
|
text-align: center;
|
|
565
|
-
background
|
|
1123
|
+
background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.2) 0%, rgba(var(--bs-primary-rgb), 0.1) 100%);
|
|
566
1124
|
color: var(--bs-primary);
|
|
1125
|
+
font-size: 1.6rem;
|
|
1126
|
+
transition: all 0.3s ease;
|
|
1127
|
+
box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.1);
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
.stat-card-bg:hover .metric-icon {
|
|
1131
|
+
transform: scale(1.05);
|
|
567
1132
|
}
|
|
568
1133
|
|
|
569
1134
|
[data-bs-theme="dark"] .metric-icon {
|
|
570
|
-
background
|
|
1135
|
+
background: linear-gradient(135deg, rgba(13, 110, 253, 0.3) 0%, rgba(13, 110, 253, 0.15) 100%);
|
|
571
1136
|
color: #6ea8fe;
|
|
1137
|
+
box-shadow: 0 3px 10px rgba(13, 110, 253, 0.15);
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
/* Enhanced navbar toggler */
|
|
1141
|
+
.navbar-toggler {
|
|
1142
|
+
border: none;
|
|
1143
|
+
padding: 0.25rem 0.5rem;
|
|
1144
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
1145
|
+
border-radius: 6px;
|
|
1146
|
+
transition: all 0.2s ease;
|
|
1147
|
+
margin-right: 0.5rem;
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
.navbar-toggler:focus {
|
|
1151
|
+
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
|
|
1152
|
+
}
|
|
1153
|
+
|
|
1154
|
+
.navbar-toggler:hover {
|
|
1155
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.navbar-toggler-icon {
|
|
1159
|
+
width: 1.2em;
|
|
1160
|
+
height: 1.2em;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
/* Page transitions and animations */
|
|
1164
|
+
.dbviewer-main-content {
|
|
1165
|
+
animation: fadeInContent 0.4s ease-out;
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
@keyframes fadeInContent {
|
|
1169
|
+
from {
|
|
1170
|
+
opacity: 0;
|
|
1171
|
+
transform: translateY(10px);
|
|
1172
|
+
}
|
|
1173
|
+
to {
|
|
1174
|
+
opacity: 1;
|
|
1175
|
+
transform: translateY(0);
|
|
1176
|
+
}
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
/* Subtle hover animations */
|
|
1180
|
+
.nav-link, .list-group-item, .btn, .card, a {
|
|
1181
|
+
transition: all 0.2s ease;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
/* Improved table hover effect */
|
|
1185
|
+
.table-hover > tbody > tr:hover {
|
|
1186
|
+
transition: all 0.15s ease;
|
|
1187
|
+
}
|
|
1188
|
+
|
|
1189
|
+
[data-bs-theme="light"] .table-hover > tbody > tr:hover {
|
|
1190
|
+
background-color: rgba(13, 110, 253, 0.04);
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
|
|
1194
|
+
background-color: rgba(13, 110, 253, 0.07);
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
/* Button press effect */
|
|
1198
|
+
.btn:active, .nav-link:active, .list-group-item:active {
|
|
1199
|
+
transform: scale(0.97);
|
|
1200
|
+
}
|
|
1201
|
+
|
|
1202
|
+
/* Focus styles for accessibility */
|
|
1203
|
+
:focus-visible {
|
|
1204
|
+
outline: 3px solid rgba(13, 110, 253, 0.25);
|
|
1205
|
+
outline-offset: 2px;
|
|
1206
|
+
border-radius: 4px;
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1209
|
+
/* Improved scrollbar for the entire app */
|
|
1210
|
+
html {
|
|
1211
|
+
scrollbar-width: thin;
|
|
1212
|
+
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
html::-webkit-scrollbar {
|
|
1216
|
+
width: 8px;
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
html::-webkit-scrollbar-track {
|
|
1220
|
+
background: transparent;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
html::-webkit-scrollbar-thumb {
|
|
1224
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
1225
|
+
border-radius: 10px;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
[data-bs-theme="dark"] html::-webkit-scrollbar-thumb {
|
|
1229
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
572
1230
|
}
|
|
573
1231
|
</style>
|
|
574
1232
|
</head>
|
|
@@ -618,7 +1276,7 @@
|
|
|
618
1276
|
<div class="dbviewer-content">
|
|
619
1277
|
<!-- Sidebar (always present) -->
|
|
620
1278
|
<div class="dbviewer-sidebar">
|
|
621
|
-
<%=
|
|
1279
|
+
<%= render 'layouts/dbviewer/shared/sidebar' %>
|
|
622
1280
|
</div>
|
|
623
1281
|
|
|
624
1282
|
<!-- Main Content Area -->
|