1 /*
2 Lumino Admin Bootstrap Template
3 Version 1.0
4 */
5
6
7 /*Global Styles*/
8
9 body {
10 background: #f1f4f7;
11 padding-top: 50px;
12 color: #5f6468;
13 }
14
15 p {
16 color: #777;
17 }
18
19 a, a:hover, a:focus {
20 color: #30a5ff;
21 }
22
23 h1, h2, h3, h4, h5, h6 {
24 color: #5f6468;
25 }
26
27 h1 {
28 font-weight: 300;
29 font-size: 40px;
30 }
31
32 h2 {
33 font-weight: 300;
34 margin-bottom: 20px;
35 }
36
37 h3, h4 {
38 font-weight: 300;
39 }
40
41 .large {
42 font-size: 2em;
43 }
44
45 .text-muted {
46 color: #9fadbb;
47 }
48
49 .color-gray { color: #5f6468; }
50 .color-blue { color: #30a5ff; }
51 .color-teal { color: #1ebfae; }
52 .color-orange { color: #ffb53e; }
53 .color-red { color: #f9243f; }
54
55 .bg-primary .glyphicon-remove { color: #5f6468;}
56 .bg-primary .glyphicon-remove:hover { color: #ef4040;}
57
58 .no-padding {
59 padding: 0; margin: 0;
60 }
61
62 .glyphicon-xl {
63 font-size: 6em;
64 }
65
66 .glyphicon-l {
67 font-size: 3em;
68 }
69
70 .glyphicon-m {
71 font-size: 1.5em;
72 }
73
74 .glyphicon-s {
75 font-size: 0.75em;
76 }
77
78 .form-control {
79 border: 1px solid #eee;
80 box-shadow: none;
81 }
82
83 .form-control:focus {
84 border: 1px solid #30a5ff;
85 outline: 0;
86 box-shadow: inset 0px 0px 0px 1px #30a5ff;
87 }
88
89 .navbar-header .navbar-brand {
90 color: #fff;
91 font-size: 16px;
92 text-transform: uppercase;
93 font-weight: 500;
94 letter-spacing: 2px;
95 }
96
97 .navbar-header .navbar-brand span {
98 color: #30a5ff;
99 }
100
101 /*Buttons*/
102
103 a.btn:hover,
104 button:hover {
105 opacity: 0.8;
106 }
107
108 a.btn:active,
109 button:active {
110 box-shadow: inset 0px 0px 500px rgba(0,0,0,.1);
111 opacity: 1;
112 }
113
114 .btn-default,
115 .btn-default:hover,
116 .btn-default:focus,
117 .btn-default:active,
118 .btn-default.active,
119 .open > .dropdown-toggle.btn-default,
120 .btn-default.disabled,
121 .btn-default[disabled],
122 fieldset[disabled] .btn-default,
123 .btn-default.disabled:hover,
124 .btn-default[disabled]:hover,
125 fieldset[disabled] .btn-default:hover,
126 .btn-default.disabled:focus,
127 .btn-default[disabled]:focus,
128 fieldset[disabled] .btn-default:focus,
129 .btn-default.disabled:active,
130 .btn-default[disabled]:active,
131 fieldset[disabled] .btn-default:active,
132 .btn-default.disabled.active,
133 .btn-default[disabled].active,
134 fieldset[disabled] .btn-default.active {
135 background-color: #e9ecf2;
136 border-color: #e9ecf2;
137 color: #1b3548;
138 }
139
140 .btn-primary,
141 .btn-primary:hover,
142 .btn-primary:focus,
143 .btn-primary:active,
144 .btn-primary.active,
145 .open > .dropdown-toggle.btn-primary,
146 .btn-primary.disabled,
147 .btn-primary[disabled],
148 fieldset[disabled] .btn-primary,
149 .btn-primary.disabled:hover,
150 .btn-primary[disabled]:hover,
151 fieldset[disabled] .btn-primary:hover,
152 .btn-primary.disabled:focus,
153 .btn-primary[disabled]:focus,
154 fieldset[disabled] .btn-primary:focus,
155 .btn-primary.disabled:active,
156 .btn-primary[disabled]:active,
157 fieldset[disabled] .btn-primary:active,
158 .btn-primary.disabled.active,
159 .btn-primary[disabled].active,
160 fieldset[disabled] .btn-primary.active {
161 background-color: #30a5ff;
162 border-color: #30a5ff;
163 }
164
165 .btn-success,
166 .btn-success:hover,
167 .btn-success:focus,
168 .btn-success:active,
169 .btn-success.active,
170 .open > .dropdown-toggle.btn-success,
171 .btn-success.disabled,
172 .btn-success[disabled],
173 fieldset[disabled] .btn-success,
174 .btn-success.disabled:hover,
175 .btn-success[disabled]:hover,
176 fieldset[disabled] .btn-success:hover,
177 .btn-success.disabled:focus,
178 .btn-success[disabled]:focus,
179 fieldset[disabled] .btn-success:focus,
180 .btn-success.disabled:active,
181 .btn-success[disabled]:active,
182 fieldset[disabled] .btn-success:active,
183 .btn-success.disabled.active,
184 .btn-success[disabled].active,
185 fieldset[disabled] .btn-success.active {
186 background-color: #8ad919;
187 border-color: #8ad919;
188 }
189
190 .btn-warning,
191 .btn-warning:hover,
192 .btn-warning:focus,
193 .btn-warning:active,
194 .btn-warning.active,
195 .open > .dropdown-toggle.btn-warning,
196 .btn-warning.disabled,
197 .btn-warning[disabled],
198 fieldset[disabled] .btn-warning,
199 .btn-warning.disabled:hover,
200 .btn-warning[disabled]:hover,
201 fieldset[disabled] .btn-warning:hover,
202 .btn-warning.disabled:focus,
203 .btn-warning[disabled]:focus,
204 fieldset[disabled] .btn-warning:focus,
205 .btn-warning.disabled:active,
206 .btn-warning[disabled]:active,
207 fieldset[disabled] .btn-warning:active,
208 .btn-warning.disabled.active,
209 .btn-warning[disabled].active,
210 fieldset[disabled] .btn-warning.active {
211 background-color: #ffb53e;
212 border-color: #ffb53e;
213 }
214
215 .btn-danger,
216 .btn-danger:hover,
217 .btn-danger:focus,
218 .btn-danger:active,
219 .btn-danger.active,
220 .open > .dropdown-toggle.btn-danger,
221 .btn-danger.disabled,
222 .btn-danger[disabled],
223 fieldset[disabled] .btn-danger,
224 .btn-danger.disabled:hover,
225 .btn-danger[disabled]:hover,
226 fieldset[disabled] .btn-danger:hover,
227 .btn-danger.disabled:focus,
228 .btn-danger[disabled]:focus,
229 fieldset[disabled] .btn-danger:focus,
230 .btn-danger.disabled:active,
231 .btn-danger[disabled]:active,
232 fieldset[disabled] .btn-danger:active,
233 .btn-danger.disabled.active,
234 .btn-danger[disabled].active,
235 fieldset[disabled] .btn-danger.active {
236 background-color: #f9243f;
237 border-color: #f9243f;
238 }
239
240 /*Backgrounds*/
241
242 .bg-primary {
243 color: #1b3548;
244 background-color: #e9ecf2;
245 }
246 a.bg-primary:hover {
247 background-color: #e9ecf2;
248 }
249 .bg-success {
250 color: #fff;
251 background-color: #8ad919;
252 }
253 a.bg-success:hover {
254 background-color: #8ad919;
255 }
256 .bg-success a {
257 color: rgba(255, 255, 255, .75);
258 }
259 .bg-info {
260 color: #fff;
261 background-color: #30a5ff;
262 }
263 a.bg-info:hover {
264 background-color: #30a5ff;
265 }
266 .bg-info a {
267 color: rgba(255, 255, 255, .75);
268 }
269 .bg-warning {
270 color: #fff;
271 background-color: #ffb53e;
272 }
273 a.bg-warning:hover {
274 background-color: #ffb53e;
275 }
276 .bg-warning a {
277 color: rgba(255, 255, 255, .75);
278 }
279 .bg-danger {
280 color: #fff;
281 background-color: #f9243f;
282 }
283 a.bg-danger:hover {
284 background-color: #f9243f;
285 }
286 .bg-danger a {
287 color: rgba(255, 255, 255, .75);
288 }
289
290 /*Panels*/
291
292 .panel {
293 border: 0;
294 }
295
296 .panel-heading {
297 font-size: 18px;
298 font-weight: 300;
299 letter-spacing: 0.025em;
300 height: 66px;
301 line-height: 45px;
302 }
303
304 .panel-default .panel-heading {
305 background: #fff;
306 border-bottom: 1px solid #eee;
307 color: #5f6468;
308 }
309
310 .panel-footer {
311 background: #fff;
312 border-top: 1px solid #eee;
313 }
314
315 .panel-widget {
316 padding: 0;
317 position: relative;
318 }
319
320 .panel-widget .panel-footer {
321 border: 0;
322 text-align: center;
323 }
324
325 .panel-footer .input-group {
326 padding: 0px;
327 margin: 0 -5px;
328 }
329
330 .panel-footer .input-group-btn:last-child>.btn,
331 .panel-footer .input-group-btn:last-child>.btn-group {
332 margin: 0;
333 }
334
335 .panel-widget .panel-footer a {
336 color: #999;
337 }
338
339 .panel-widget .panel-footer a:hover {
340 color: #666;
341 text-decoration: none;
342 }
343
344 .panel-blue { background: #30a5ff; color: #fff; }
345 .panel-teal { background: #1ebfae; color: #fff; }
346 .panel-orange { background: #ffb53e; color: #fff; }
347 .panel-red { background: #f9243f; color: #fff; }
348
349 .panel-blue .panel-body p,
350 .panel-teal .panel-body p,
351 .panel-orange .panel-body p,
352 .panel-red .panel-body p {
353 color: #fff;
354 color: rgba(255, 255, 255, .8);
355 }
356
357 .panel-blue .panel-heading,
358 .panel-teal .panel-heading,
359 .panel-orange .panel-heading,
360 .panel-red .panel-heading {
361 border-bottom: 1px solid rgba(255, 255, 255, .2);
362 }
363
364 .panel-blue .text-muted,
365 .panel-teal .text-muted,
366 .panel-orange .text-muted,
367 .panel-red .text-muted {
368 color: rgba(255, 255, 255, .5);
369 }
370
371 .dark-overlay {
372 background: rgba(0, 0, 0, .05);
373 text-align: center;
374 }
375
376 .widget-left {
377 height: 80px;
378 padding-top: 15px;
379 text-align: center;
380 border-top-left-radius: 4px;
381 border-bottom-left-radius: 4px;
382 }
383
384 .widget-right {
385 text-align: left;
386 line-height: 1.6em;
387 margin: 0px;
388 padding: 20px;
389 height: 80px;
390 color: #999;
391 font-weight: 300;
392 background: #fff;
393 border-top-right-radius: 4px;
394 border-bottom-right-radius: 4px;
395 }
396
397 @media (max-width: 768px) {
398 .widget-right {
399 width: 100%;
400 margin: 0;
401 text-align: center;
402 border-top-left-radius: 0px;
403 border-top-right-radius: 0px;
404 border-bottom-left-radius: 4px;
405 border-bottom-right-radius: 4px;
406 }
407 }
408
409 @media (max-width: 768px) {
410 .widget-left {
411 border-top-left-radius: 4px;
412 border-top-right-radius: 4px;
413 border-bottom-left-radius: 0px;
414 border-bottom-right-radius: 0px;
415 }
416 }
417
418 .widget-right .text-muted {
419 color: #9fadbb;
420 }
421 .widget-right .large {
422 color: #5f6468;
423 }
424
425 .panel-blue .widget-left { background: #30a5ff; color: #fff; }
426 .panel-teal .widget-left { background: #1ebfae; color: #fff; }
427 .panel-orange .widget-left { background: #ffb53e; color: #fff; }
428 .panel-red .widget-left { background: #f9243f; color: #fff; }
429
430 .panel-widget {
431 background: #fff;
432 }
433
434 /*Jumbotron*/
435
436 .jumbotron {
437 background: #fff;
438 border-bottom: 1px solid #eee;
439 color: #5f6468;
440 }
441
442 /*Tabs*/
443
444 .panel .tabs {
445 margin: 0;
446 padding: 0;
447 }
448
449 .nav-tabs {
450 background: #e9ecf2;
451 border: 0;
452 }
453
454 .nav-tabs li a:hover {
455 background: #fff;
456 }
457
458 .nav-tabs li a,
459 .nav-tabs li a:hover,
460 .nav-tabs li.active a,
461 .nav-tabs li.active a:hover {
462 border: 0;
463 padding: 15px 20px;
464 }
465
466 .nav-pills {
467 padding: 15px;
468 padding-bottom: 0;
469 }
470
471 .nav-pills li a,
472 .nav-pills li a:hover,
473 .nav-pills li.active a,
474 .nav-pills li.active a:hover {
475 border: 0;
476 padding: 7px 15px;
477 }
478
479 .nav-pills li.active a,
480 .nav-pills li.active a:hover {
481 background: #30a5ff;
482 }
483
484 .tab-content {
485 padding: 15px;
486 }
487
488
489 /*Navbar*/
490
491 .navbar {
492 border: 0;
493 }
494
495 .navbar input {
496 border: 0;
497 background: #444;
498 color: #fff;
499 }
500
501 .navbar input:focus {
502 color: #fff;
503 background: #555;
504 border: 1px solid #30a5ff;
505 outline: 0;
506 box-shadow: inset 0px 0px 0px 1px #30a5ff;
507 }
508
509 .user-menu {
510 display: inline-block;
511 margin-top: 14px;
512 margin-right: 10px;
513 float: right;
514 list-style: none;
515 padding: 0;
516 }
517
518 .user-menu a {
519 color: #fff;
520 }
521
522 .user-menu a:hover, .user-menu a:focus {
523 text-decoration: none;
524 }
525
526 /* Sidebar */
527
528 .sidebar {
529 display: block;
530 background-color: #fff;
531 padding: 0;
532 display: none;
533 }
534
535 .sidebar form {
536 padding: 20px 15px 5px 15px;
537 border-bottom: 1px solid #eee;
538 margin-bottom: 20px;
539 }
540
541 @media (min-width: 768px) {
542 .sidebar {
543 display: block;
544 position: fixed;
545 top: 50px;
546 bottom: 0;
547 left: 0;
548 z-index: 1000;
549 display: block;
550 margin: 0;
551 padding: 0;
552 overflow-x: hidden;
553 overflow-y: auto;
554 background-color: #fff;
555 box-shadow: 1px 0px 10px rgba(0, 0, 0, .05);
556 }
557 .navbar-header {
558 width: 100%;
559 }
560 }
561
562 .sidebar ul.nav a:hover,
563 .sidebar ul.nav li.parent ul li a:hover {
564 text-decoration: none;
565 background-color: #e9ecf2;
566 }
567
568 .sidebar ul.nav .active a, .sidebar ul.nav li.parent a.active,
569 .sidebar ul.nav .active > a:hover, .sidebar ul.nav li.parent a.active:hover,
570 .sidebar ul.nav .active > a:focus, .sidebar ul.nav li.parent a.active:focus {
571 color: #fff;
572 background-color: #30a5ff;
573 }*/
574
575 .sidebar ul.nav ul,
576 .sidebar ul.nav ul li {
577 list-style: none;
578 list-style-type: none;
579 }
580
581 .sidebar ul.nav ul.children {
582 width: auto;
583 padding: 0;
584 margin: 0;
585 background: #f9f9f9;
586 }
587
588 .sidebar ul.nav ul.children li a {
589 height: 40px;
590 background: #f9f9f9;
591 color: #30a5ff!important;
592 }
593
594 .sidebar ul.nav li.current a {
595 background-color: #30a5ff;
596 color: #fff!important;
597 }
598
599 .sidebar ul.nav li.parent ul li a {
600 border: none;
601 display:block;
602 padding-left: 30px;
603 line-height: 40px;
604 }
605
606
607 .sidebar span.glyphicon {
608 margin-right: 10px;
609 }
610
611 .sidebar ul.nav li.divider {
612 border-bottom: 1px solid #eee;
613 margin: 20px 0;
614 }
615
616 .sidebar .attribution {
617 position: absolute;
618 bottom: 0px;
619 width: 100%;
620 padding: 15px;
621 text-align: center;
622 border-top: 1px solid #eee;
623 font-size: 12px;
624 }
625
626 /*Breadcrumbs*/
627
628 .breadcrumb {
629 border-radius: 0;
630 padding: 10px 15px;
631 background: #e9ecf2;
632 box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
633 margin: 0 ;
634 }
635
636 h1.page-header {
637 margin-top: 30px;
638 border-bottom: 0;
639 }
640
641 /*Charts*/
642
643 .main-chart {
644 background: #fff;
645 }
646
647 .easypiechart-panel {
648 text-align: center;
649 padding: 1px 0;
650 margin-bottom: 20px;
651 }
652
653 .placeholder h2 {
654 margin-bottom: 0px;
655 }
656
657 .donut {
658 width: 100%;
659 }
660
661 .easypiechart {
662 position: relative;
663 text-align: center;
664 width: 120px;
665 height: 120px;
666 margin: 20px auto 10px auto;
667 }
668
669 .easypiechart .percent {
670 display: block;
671 position: absolute;
672 font-size: 26px;
673 top: 38px;
674 width: 120px;
675 }
676
677 #easypiechart-blue .percent { color: #30a5ff;}
678 #easypiechart-teal .percent { color: #1ebfae;}
679 #easypiechart-orange .percent { color: #ffb53e;}
680 #easypiechart-red .percent { color: #ef4040;}
681
682 /*Calendar Widget*/
683
684 #calendar, .datepicker-inline {
685 width: 100%;
686 }
687
688 #calendar table {
689 width: 100%;
690 }
691
692 .datepicker table tr td.old,
693 .datepicker table tr td.new {
694 color: rgba(255, 255, 255, .50);
695 }
696
697 .datepicker table tr td.active,
698 .datepicker table tr td.active:hover,
699 .datepicker table tr td.active.disabled,
700 .datepicker table tr td.active.disabled:hover,
701 .datepicker table tr td.active:hover,
702 .datepicker table tr td.active:hover:hover,
703 .datepicker table tr td.active.disabled:hover,
704 .datepicker table tr td.active.disabled:hover:hover,
705 .datepicker table tr td.active:focus,
706 .datepicker table tr td.active:hover:focus,
707 .datepicker table tr td.active.disabled:focus,
708 .datepicker table tr td.active.disabled:hover:focus,
709 .datepicker table tr td.active:active,
710 .datepicker table tr td.active:hover:active,
711 .datepicker table tr td.active.disabled:active,
712 .datepicker table tr td.active.disabled:hover:active,
713 .datepicker table tr td.active.active,
714 .datepicker table tr td.active:hover.active,
715 .datepicker table tr td.active.disabled.active,
716 .datepicker table tr td.active.disabled:hover.active,
717 .open .dropdown-toggle.datepicker table tr td.active,
718 .open .dropdown-toggle.datepicker table tr td.active:hover,
719 .open .dropdown-toggle.datepicker table tr td.active.disabled,
720 .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
721 color: #ffffff;
722 background-color: rgba(0, 0, 0, .5);
723 border-color: #285e8e;
724 }
725
726 .datepicker table tr td span:hover,
727 .datepicker thead tr:first-child th:hover,
728 .datepicker tfoot tr th:hover,
729 .datepicker table tr td.day:hover,
730 .datepicker table tr td.day.focused {
731 background: rgba(0, 0, 0, 0.25);
732 }
733
734 .panel-heading .glyphicon {
735 margin-right: 10px;
736 }
737
738 /*Todo List Widget*/
739
740 .todo-list-item .glyphicon {
741 margin-right:5px;
742 color: #9fadbb;
743 }
744
745 .todo-list-item .glyphicon:hover {
746 margin-right:5px;
747 color: #1b3548;
748 }
749
750 .todo-list {
751 padding: 0;
752 margin: -15px;
753 background: #fff;
754 color: #5f6468;
755 }
756
757 #checkbox {
758 margin: 0;
759 }
760
761 .todo-list .checkbox {
762 display:inline-block;
763 margin: 0px;
764 }
765
766 .panel-body input[type=checkbox]:checked + label {
767 text-decoration: line-through;
768 color: #777;
769 }
770
771 .todo-list-item {
772 list-style: none;
773 line-height: 0.9;
774 padding: 14px 15px 8px 15px;
775 }
776
777 .todo-list-item:hover, a.todo-list-item:focus {
778 text-decoration: none;
779 background-color: #f6f6f6;
780 }
781
782 .todo-list-item .trash .glyph:hover {
783 color: #ef4040;
784 }
785
786
787 /*Chat Widget*/
788
789 .chat ul {
790 list-style: none;
791 margin: -15px;
792 padding: 15px;
793 }
794
795 .chat ul li {
796 margin-bottom: 10px;
797 padding: 15px 5px;
798 border-bottom: 1px solid #eee;
799 }
800
801 .chat ul li.left .chat-body { margin-left: 100px;}
802 .chat ul li.right .chat-body { margin-right: 100px;}
803
804 .chat ul li .chat-body p {
805 margin: 0;
806 }
807
808 .chat ul .glyphicon {
809 margin-right: 5px;
810 }
811
812 .chat .panel-body {
813 overflow-y: scroll;
814 height: 300px;
815 }
816
817 .chat-body small {
818 margin-left: 5px;
819 }
820
821 /*Tables*/
822 .table {
823 background: #fff;
824 }
825
826 .fixed-table-container {
827 border: 1px solid #eee;
828 }
829
830 .fixed-table-container thead th {
831 background: #f7f7f8;
832 border-color: #ddd;
833 color: #5f6468;
834 font-weight: 300;
835 font-size: 16px;
836 }
837
838 .fixed-table-container tbody td {
839 border: 1px solid #eee;
840 }
841
842 .fixed-table-container tbody td:last-child {
843 border-right: none;
844 }
845
846 .table>thead>tr>th {
847 border-bottom: 1px solid #e6e7e8;
848 vertical-align: middle;
849 height: 50px;
850 }
851
852 .fixed-table-pagination .pagination {
853 margin-top: 10px;
854 margin-bottom: 0px;
855 }
856 .fixed-table-pagination .pagination-detail {
857 margin-top: 20px;
858 }
859
860 /*Icons*/
861
862
863 .sidebar .glyph, .user-menu .glyph {
864 height: 16px;
865 width: 16px;
866 margin: 0 10px 0 0;
867 stroke-width: 3px;
868 }
869
870 .user-menu .glyph {
871 stroke-width: 4px;
872 }
873
874 .breadcrumb .glyph {
875 height: 14px;
876 width: 14px;
877 margin: -2px 0 0 0;
878 stroke-width: 4px;
879 }
880
881 .alert .glyph, .panel-heading .glyph {
882 width: 26px;
883 height: 26px;
884 margin: 0 10px 0 0;
885 stroke-width: 2px;
886 }
887
888 .panel-widget .glyph {
889 stroke-width: 2px;
890 }
891
892 .todo-list .glyph {
893 width: 14px;
894 height: 14px;
895 stroke-width: 4px;
896 color: #999;
897 }
898
899 .glyph.table {
900 background: none;
901 border: none;
902 }
903
904 /*Icon Grid*/
905
906 .icon-grid div {
907 border: 1px solid #ddd;
908 margin: 0 0 -1px -1px;
909 text-align: center;
910 padding: 10px 0 20px 0;
911 }
912
913 .icon-grid svg {
914 width: 35%;
915 display: block;
916 margin: 0 auto;
917 }
918
919 .icon-grid h4 {
920 display: none;
921 }
922
923 .icon-grid pre {
924 margin: 10px 10px -10px 10px;
925 border-radius: 0;
926 font-size: 10px;
927 border-color: #ddd;
928 height: 65px;
929 overflow: scroll;
930 }
