Skip to content

Commit 5b42dbf

Browse files
jokob-skjokob-sk
committed
FE: skeleton uplift
1 parent 155081d commit 5b42dbf

11 files changed

Lines changed: 133 additions & 60 deletions

‎front/css/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--color-red: #dd4b39;
2121
--color-gray: #8c8c8c;
2222
--color-darkgray: #3f3e3e;
23+
--color-lightgray: #bec5cb;
2324
--color-black: #000;
2425
}
2526

‎front/css/dark-patch.css‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,20 @@
1414
--color-aqua: #00c0ef;
1515
--color-lightblue: #3c8dbc;
1616
--color-blue: #0060df;
17+
--color-black: #000;
1718
--color-white: #fff;
1819
--color-green: #00a65a;
1920
--color-yellow: #f39c12;
2021
--color-red: #dd4b39;
2122
--color-gray: #8c8c8c;
23+
--color-lightgray: #bec5cb;
24+
--color-white: #fff;
25+
--skel-base: #353c42;
26+
--skel-shine: #272c30;
27+
--skel-section: #272c30;
28+
--skel-panel-bg: #272c30;
29+
--skel-border: #2a323e;
30+
--skel-bg: #353c42;
2231
}
2332

2433
:root {
@@ -35,13 +44,13 @@ html {
3544
body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
3645

3746
background-color: #353c42 !important;
38-
color: #bec5cb !important;
47+
color: var(--color-lightgray) !important;
3948
}
4049
h4 {
4150
color: #44def1;
4251
}
4352
.content-header > .breadcrumb > li > a {
44-
color: #bec5cb;
53+
color: var(--color-lightgray);
4554
}
4655

4756
.table > thead > tr.odd,
@@ -69,7 +78,7 @@ h4 {
6978
.dataTables_wrapper input[type="search"] {
7079
background-color: #353c42;
7180
border: 0;
72-
color: #bec5cb;
81+
color: var(--color-lightgray);
7382
}
7483
.dataTables_paginate .pagination li > a {
7584
background-color: #353c42;
@@ -82,7 +91,7 @@ h4 {
8291
.pagination > .disabled > span:focus,
8392
.pagination > .disabled > span:hover {
8493
cursor: not-allowed;
85-
color: #bec5cb;
94+
color: var(--color-lightgray);
8695
background-color: #353c42;
8796
border-color: #353c42;
8897
}
@@ -91,7 +100,7 @@ h4 {
91100
.pagination > li > span:focus,
92101
.pagination > li > span:hover {
93102
z-index: 2;
94-
color: #bec5cb;
103+
color: var(--color-lightgray);
95104
background-color: #54606b;
96105
border-color: #54606b;
97106
}
@@ -122,7 +131,7 @@ h4 {
122131
background-color: #32393e;
123132
}
124133
.sidebar a {
125-
color: #bec5cb;
134+
color: var(--color-lightgray);
126135
}
127136
.sidebar a:hover {
128137
text-decoration: none;
@@ -172,7 +181,7 @@ h4 {
172181
.box-comment,
173182
.comment-text,
174183
.comment-text .username {
175-
color: #bec5cb;
184+
color: var(--color-lightgray);
176185
background-color: #272c30;
177186
}
178187
.box-comments .box-comment {
@@ -190,19 +199,19 @@ h4 {
190199
}
191200
.box-solid > .box-header,
192201
.box > .box-header {
193-
color: #bec5cb;
202+
color: var(--color-lightgray);
194203
}
195204
.box-solid > .box-header .btn,
196205
.box > .box-header .btn {
197-
color: #bec5cb;
206+
color: var(--color-lightgray);
198207
}
199208

200209
.main-header .navbar {
201210
background-color: #272c30;
202211
}
203212
.main-header .navbar .nav > li > a,
204213
.main-header .navbar .nav > li > .navbar-text {
205-
color: #bec5cb;
214+
color: var(--color-lightgray);
206215
}
207216
.main-header .navbar .nav > li > a:hover,
208217
.main-header .navbar .nav > li > a:active,
@@ -215,22 +224,22 @@ h4 {
215224
color: #f6f6f6;
216225
}
217226
.main-header .navbar .sidebar-toggle {
218-
color: #bec5cb;
227+
color: var(--color-lightgray);
219228
}
220229
.main-header .navbar .sidebar-toggle:hover {
221230
color: #f6f6f6;
222231
background-color: rgba(0, 0, 0, 0.1);
223232
}
224233
.timeline li .timeline-item {
225-
color: #bec5cb;
234+
color: var(--color-lightgray);
226235
background-color: #272c30;
227236
border-color: #353c42;
228237
}
229238
.timeline li .timeline-header {
230239
border-bottom-color: #353c42;
231240
}
232241
.nav-stacked > li > a {
233-
color: #bec5cb;
242+
color: var(--color-lightgray);
234243
}
235244
.nav-stacked > li > a:hover {
236245
color: white;
@@ -244,7 +253,7 @@ h4 {
244253
.nav-tabs-custom {
245254
background-color: #272c30;
246255
border-top-color: #353c42;
247-
color: #bec5cb;
256+
color: var(--color-lightgray);
248257
}
249258
.main-footer .nav-tabs,
250259
.nav-tabs-custom .nav-tabs {
@@ -259,14 +268,14 @@ h4 {
259268
background: rgba(64, 72, 80, 0.666);
260269
}
261270
.nav-tabs-custom > .nav-tabs > li {
262-
color: #bec5cb;
271+
color: var(--color-lightgray);
263272
}
264273
.nav-tabs-custom > .nav-tabs > li.active > a,
265274
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
266275
border-left-color: #30383f;
267276
border-right-color: #30383f;
268277
background-color: #30383f;
269-
color: #bec5cb;
278+
color: var(--color-lightgray);
270279
}
271280
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
272281
border-top-color: #d2d6de;
@@ -281,11 +290,11 @@ h4 {
281290
.nav-tabs-custom > .nav-tabs > li:hover > a,
282291
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
283292
background-color: #353c42;
284-
color: #bec5cb;
293+
color: var(--color-lightgray);
285294
}
286295

287296
.list-group {
288-
color: #bec5cb;
297+
color: var(--color-lightgray);
289298
background-color: #272c30;
290299
}
291300
.list-group .list-group-item {
@@ -297,23 +306,23 @@ h4 {
297306
}
298307
.select2 .select2-selection {
299308
background-color: #353c42;
300-
color: #bec5cb;
309+
color: var(--color-lightgray);
301310
border: 1px solid #353c42;
302311
}
303312
.select2 .select2-selection .select2-container--default,
304313
.select2 .select2-selection .select2-selection--single,
305314
.select2 .select2-selection .select2-selection--multiple,
306315
.select2 .select2-selection .select2-selection__rendered {
307-
color: #bec5cb;
316+
color: var(--color-lightgray);
308317
}
309318
.select2-dropdown {
310319
background-color: #353c42;
311-
color: #bec5cb;
320+
color: var(--color-lightgray);
312321
border: 1px solid #353c42;
313322
}
314323
.select2-dropdown .select2-search__field {
315324
background-color: #272c30;
316-
color: #bec5cb;
325+
color: var(--color-lightgray);
317326
border: 1px solid #353c42;
318327
}
319328
.select2-container--default.select2-container--open {
@@ -367,7 +376,7 @@ h4 {
367376

368377
code,
369378
pre {
370-
color: #bec5cb;
379+
color: var(--color-lightgray);
371380
background-color: #353c42;
372381
}
373382

@@ -393,7 +402,7 @@ td.highlight {
393402
.btn-default {
394403
box-shadow: none;
395404
background-color: #3e464c;
396-
color: #bec5cb;
405+
color: var(--color-lightgray);
397406
border: 1px solid #353c42;
398407
}
399408

@@ -406,7 +415,7 @@ td.highlight {
406415
.btn-outline:hover
407416
{
408417
border: 1px solid var(--color-black);
409-
background-color: var(--color-black);;
418+
background-color: var(--color-black);
410419
color: var(--color-white);
411420
}
412421

@@ -472,7 +481,7 @@ td.highlight {
472481
}
473482
.daterangepicker td.in-range {
474483
background-color: #1e2226;
475-
color: #bec5cb;
484+
color: var(--color-lightgray);
476485
}
477486
input,
478487
select,
@@ -490,7 +499,7 @@ select.form-control,
490499
.form-control,
491500
div.dataTables_wrapper div.dataTables_length select {
492501
background-color: #353c42;
493-
color: #bec5cb;
502+
color: var(--color-lightgray);
494503
border: 1px solid #3d444b;
495504
}
496505
.form-control[disabled],
@@ -510,7 +519,7 @@ textarea[readonly],
510519

511520
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
512521
background-color: #4c5761;
513-
color: #bec5cb;
522+
color: var(--color-lightgray);
514523
border: 1px solid #171c20;
515524
}
516525
.table-striped > tbody > tr:nth-of-type(2n + 1) {
@@ -522,14 +531,14 @@ textarea[readonly],
522531
background-color: #3e464c;
523532

524533
border: 1px solid #353c42;
525-
color: #bec5cb;
534+
color: var(--color-lightgray);
526535
}
527536
#settingsPage .panel-heading:hover {
528537
background-color: #272c30;
529538
}
530539
.box.box-solid.box-info,
531540
.box.box-solid.box-info > .box-header {
532-
color: #bec5cb;
541+
color: var(--color-lightgray);
533542
background-color: #367fa9 !important;
534543
border: 1px solid #367fa9;
535544
}
@@ -564,7 +573,7 @@ input[type="password"]::-webkit-caps-lock-indicator {
564573
.box .overlay > .fa,
565574
.overlay-wrapper .overlay > .fa,
566575
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
567-
color: #bec5cb !important;
576+
color: var(--color-lightgray) !important;
568577
}
569578

570579
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
@@ -643,6 +652,9 @@ input[type="password"]::-webkit-caps-lock-indicator {
643652
background-color: #353c42;
644653
border-color: #888888;
645654
}
655+
#txtRecord:hover {
656+
color: var(--color-lightgray);
657+
}
646658
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
647659
background-color: var(--datatable-bgcolor);
648660
color: var(--fbc-white);
@@ -663,14 +675,14 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
663675

664676
.nav-tabs-custom > .nav-tabs > li:hover > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
665677
background-color: #272c30;
666-
color: #bec5cb;
678+
color: var(--color-lightgray);
667679
}
668680

669681
.nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
670682
border-left-color: #30383f;
671683
border-right-color: #30383f;
672684
background-color: #272c30;
673-
color: #bec5cb;
685+
color: var(--color-lightgray);
674686
}
675687
.nav-tabs-custom > .nav-tabs {
676688
background-color: #353c42;
@@ -700,7 +712,7 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
700712
}
701713

702714
.login-box-body {
703-
color: #bec5cb;
715+
color: var(--color-lightgray);
704716
background-color: #272c30;
705717
}
706718

@@ -716,12 +728,12 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
716728

717729
/* Chevron color */
718730
.select2-container .select2-selection__arrow::after {
719-
color: #bec5cb;
731+
color: var(--color-lightgray);
720732
}
721733

722734
/* Chevron color */
723735
.select2-selection .select2-selection--single {
724-
color: #bec5cb;
736+
color: var(--color-lightgray);
725737
}
726738

727739
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
@@ -730,12 +742,12 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
730742

731743
.select2-container--default .select2-selection--multiple {
732744
background-color: #353c42 !important;
733-
color: #bec5cb;
745+
color: var(--color-lightgray);
734746
}
735747

736748
.select2-container--default .select2-selection--single .select2-selection__rendered .custom-chip
737749
{
738-
color: #bec5cb;
750+
color: var(--color-lightgray);
739751
}
740752

741753
#hover-box
@@ -766,13 +778,3 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
766778
font-size: .85em;
767779
cursor: pointer;
768780
}
769-
770-
/* Settings skeleton - dark theme */
771-
:root {
772-
--skel-base: #353c42;
773-
--skel-shine: #272c30;
774-
--skel-section: #272c30;
775-
--skel-panel-bg: #272c30;
776-
--skel-border: #2a323e;
777-
--skel-bg: #353c42;
778-
}

‎front/css/system-dark-patch.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
--color-red: #dd4b39;
2222
--color-gray: #8c8c8c;
2323
--color-darkgray: #3f3e3e;
24+
--color-lightgray: #bec5cb;
2425
--color-white: #fff;
2526
--skel-base: #353c42;
2627
--skel-shine: #272c30;
@@ -634,6 +635,9 @@
634635
background-color: #353c42;
635636
border-color: #888888;
636637
}
638+
#txtRecord:hover {
639+
color: var(--color-lightgray);
640+
}
637641
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
638642
background-color: var(--datatable-bgcolor);
639643
color: var(--fbc-white);

‎front/deviceDetails.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ function recordSwitch(direction) {
269269
'<?= lang('Gen_Cancel');?>', '<?= lang('Gen_Okay');?>', performSwitch, direction);
270270
} else
271271
{
272+
showSpinner();
272273
performSwitch(direction)
273274
}
274275
}

0 commit comments

Comments
 (0)