2 * Copyright 2016, CMCC Technologies Co., Ltd.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
8 * http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
16 /**************************
17 PLUGIN CSS CUSTOMIZATIONS
18 **************************/
21 Calendar with full calendar
24 display: inline-block ;
30 .portlet .event-form-title {
37 .portlet.calendar .fc-button {
38 -webkit-box-shadow: none ;
39 -moz-box-shadow: none ;
43 padding: 6px 8px 30px 8px ;
45 border-top-style: none;
46 border-bottom-style: none;
47 border-right-style: solid;
48 border-left-style: solid;
50 background: transparent;
55 .portlet.calendar .fc-header {
59 .portlet.calendar .fc-button-prev {
64 .portlet.calendar .fc-button-next {
69 .portlet.calendar .fc-button.fc-state-active,
70 .portlet.calendar .fc-button.fc-state-hover {
72 background-color: #F9F9F9 ;
75 .portlet.calendar .fc-button.fc-state-disabled {
79 .portlet.calendar .fc-text-arrow {
81 font-family: "Courier New", Courier, monospace;
82 vertical-align: baseline;
85 /* begin: event element */
86 .portlet.calendar .fc-event {
88 background-color: #69a4e0;
92 .portlet.calendar .fc-event-inner {
96 .portlet.calendar .fc-event-time {
104 .portlet.calendar .fc-event-title {
111 /* end: event element */
113 .portlet.calendar .fc-header-title h2 {
120 .portlet.calendar .fc-widget-header {
121 background-image: none ;
123 background-color: #eee ;
124 text-transform: uppercase;
128 .portlet.calendar .mobile .fc-button {
132 .portlet.calendar .mobile .fc-button {
133 padding: 0px 6px 20px 6px ;
136 background-color: #ddd ;
137 background-image: none;
138 -webkit-box-shadow: none ;
139 -moz-box-shadow: none ;
141 -webkit-border-radius: 0 ;
142 -moz-border-radius: 0 ;
149 .portlet.calendar .mobile .fc-state-hover,
150 .portlet.calendar .mobile .fc-state-active {
151 background-color: #eee ;
154 .portlet.calendar .mobile .fc-button-prev {
159 .portlet.calendar .mobile .fc-button-next {
164 .portlet.calendar .mobile .fc-header-space {
170 .portlet.calendar .mobile .fc-state-disabled {
174 .portlet.calendar .mobile .fc-header-left {
179 .portlet.calendar .mobile .fc-header-right {
184 .portlet.calendar .mobile .fc-header-left .fc-button {
188 .portlet.calendar .mobile .fc-header-right {
193 .portlet.calendar .mobile .fc-header-right .fc-button {
197 .portlet.calendar .mobile .fc-content {
206 .form-wizard .progress {
210 .form-wizard .steps {
212 //margin-bottom: 15px;
215 .form-wizard .steps {
216 background-color: #fff ;
217 background-image: none ;
223 .form-wizard .steps li a {
224 background-color: #fff ;
225 background-image: none ;
231 .form-wizard .steps li a:hover {
235 .form-wizard .step:hover {
236 text-decoration: none;
239 .form-wizard .step .number {
240 background-color: #eee;
241 display: inline-block;
242 text-align: center !important;
245 padding: 11px 15px 13px 15px;
249 -webkit-border-radius: 50% !important;
250 -moz-border-radius: 50% !important;
251 border-radius: 50% !important;
254 .form-wizard .step .desc {
255 display: inline-block;
260 .form-wizard .active .step .number {
261 background-color: #35aa47;
265 .form-wizard .active .step .desc {
270 .form-wizard .step i {
274 .form-wizard .done .step .number {
275 background-color: #f2ae43;
279 .form-wizard .done .step .desc {
283 .form-wizard .done .step i {
287 display: inline-block;
291 @media (min-width: 600px) and (max-width: 1280px) {
292 .form-wizard .step .desc {
298 @media (max-width: 600px) {
299 .form-wizard .steps > li > a {
304 @media (min-width: 600px){
319 /* important! bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
325 background-repeat: no-repeat ;
326 background-position: 50% 50% ;
332 #gmap_routes_instructions {
338 SlimScrollBar plugins css changes
343 padding-right: 12px ;
351 .scroller-footer:after,
352 .scroller-footer:before {
358 .scroller-footer:after {
362 .portlet-body .slimScrollBar {
372 background-color: #666 ;
378 background-color: #666 ;
389 Error state for WYSIWYG Editors
391 .has-error .md-editor,
392 .has-error .wysihtml5-sandbox,
394 border: 1px solid #B94A48 !important;
397 .has-success .md-editor,
398 .has-success .wysihtml5-sandbox,
400 border: 1px solid #468847 !important;
404 Select2 plugin css changes
407 /* enable form validation classes for select2 dropdowns */
408 .has-error .select2-container .select2-choice {
409 border-color: #B94A48;
412 .has-error .select2-container.select2-dropdown-open .select2-choice {
413 border-color: #e5e5e5;
416 .has-error .select2-container.select2-dropdown-open .select2-choice > span {
420 .has-success .select2-container .select2-choice {
421 border-color: #468847;
424 .has-success .select2-container.select2-dropdown-open .select2-choice {
425 border-color: #e5e5e5;
428 .has-success .select2-container.select2-dropdown-open .select2-choice > span {
434 Jansy File Input plugin css changes
444 .wysihtml5-toolbar li {
449 .wysihtml5-toolbar li .dropdown-menu {
463 background-image: none !important;
467 -webkit-box-shadow: none !important;
468 -moz-box-shadow: none !important;
469 box-shadow: none !important;
473 .cke_dialog_ui_button,
475 background-image: none !important;
477 -webkit-box-shadow: none !important;
478 -moz-box-shadow: none !important;
479 box-shadow: none !important;
480 text-shadow:none !important;
483 .cke_dialog_ui_button:hover,
484 .cke_dialog_tab:hover {
485 text-decoration: none;
489 .cke_dialog_ui_input_text {
490 background-image: none !important;
492 -webkit-box-shadow: none !important;
493 -moz-box-shadow: none !important;
494 box-shadow: none !important;
501 background-image: none !important;
502 filter:none !important;
504 -webkit-box-shadow: none !important;
505 -moz-box-shadow: none !important;
506 box-shadow: none !important;
511 .cke_panel_grouptitle,
512 .cke_hc.cke_panel_listItem a {
513 background-image: none !important;
516 -webkit-border-radius: 0px !important;
517 -moz-border-radius: 0px !important;
518 -ms-border-radius: 0px !important;
519 -o-border-radius: 0px !important;
523 .cke_combo_button:hover {
524 background-color: #ddd;
528 background-image: none !important;
529 filter:none !important;
531 box-shadow: none !important;
532 -webkit-box-shadow : none !important;
533 -moz-box-shadow: none !important;
534 -ms-box-shadow: none !important;
535 -o-box-shadow: none !important;
539 Modify tags input plugin css
543 height: auto !important;
545 padding: 5px 5px 0px 5px;
549 div.tagsinput span.tag {
558 div.tagsinput input {
560 width: 75px !important;
563 div.tagsinput span.tag a {
567 div.tagsinput .not_valid {
570 background-color: #e02222 ;
574 Gritter notification modify
577 #gritter-notice-wrapper {
578 right:1px !important;
582 left:auto !important;
583 right: 3px !important;
587 font-family: 'Open Sans' ;
593 jQuery UI Sliders(new in v1.1.1)
603 .ui-slider-vertical {
607 .ui-slider-horizontal .ui-slider-handle {
611 .ui-slider-vertical .ui-slider-handle {
617 filter: none !important;
618 background-image: none !important;
622 Dropzone css changes(new in v1.1.1)
625 -webkit-border-radius: 0px ;
626 -moz-border-radius: 0px ;
632 Dashboard Charts(new in v1.2.1)
644 .easy-pie-chart .number {
651 .sparkline-chart .number {
657 .sparkline-chart .title,
658 .easy-pie-chart .title {
668 .sparkline-chart .title:hover,
669 .easy-pie-chart .title:hover {
671 text-decoration: none;
674 .sparkline-chart .title > i,
675 .easy-pie-chart .title > i {
680 Fancy box fix overlay fix(in v1.2.4)
687 Datatables Plugin(in v1.3)
690 width: 100% !important;
695 .dataTables_filter label {
699 .dataTable .row-details {
701 display: inline-block;
707 .dataTable .row-details.row-details-close {
708 background: url("../image/datatable-row-openclose.png") no-repeat 0 0;
711 .dataTable .row-details.row-details-open {
712 background: url("../image/datatable-row-openclose.png") no-repeat 0 -23px ;
715 .dataTable .details {
716 background-color: #eee ;
719 .dataTable .details td,
720 .dataTable .details th {
726 .dataTable .details tr:hover td,
727 .dataTable .details tr:hover th {
731 .dataTable .details tr:nth-child(odd) td,
732 .dataTable .details tr:nth-child(odd) th {
733 background-color: #fff ;
736 .dataTable .details tr:nth-child(even) td,
737 .dataTable .details tr:nth-child(even) th {
738 background-color: #eee ;
741 .dataTable > thead > tr > th.sorting,
742 .dataTable > thead > tr > th.sorting_asc,
743 .dataTable > thead > tr > th.sorting_desc {
747 .dataTable .table-checkbox {
748 width: 8px !important;
751 @media (max-width: 768px) {
752 .dataTables_wrapper .dataTables_length .form-control,
753 .dataTables_wrapper .dataTables_filter .form-control {
754 display: inline-block;
757 /* .dataTables_wrapper .dataTables_info {
761 /* .dataTables_wrapper .dataTables_paginate {
766 @media (max-width: 480px) {
767 .dataTables_wrapper .dataTables_filter .form-control {
768 width: 175px !important;
771 .dataTables_wrapper .dataTables_paginate {
777 .dataTables_processing {
787 border: 1px solid #ddd;
788 background-color: #eee;
789 vertical-align: middle;
790 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
791 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
792 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
795 .dataTables_processing span {
797 vertical-align: middle;
807 .dataTables_extended_wrapper {
808 position: relative !important;
809 clear: both !important;
811 .dataTables_extended_wrapper .seperator {
815 .dataTables_extended_wrapper .dataTables_paginate,
816 .dataTables_extended_wrapper .dataTables_length,
817 .dataTables_extended_wrapper .dataTables_info {
818 display: inline-block;
819 float: none !important;
820 padding: 0 !important;
821 margin: 0 !important;
822 position: static !important;
826 @media (max-width: 480px) {
828 .dataTables_extended_wrapper .dataTables_paginate,
829 .dataTables_extended_wrapper .dataTables_length,
830 .dataTables_extended_wrapper .dataTables_info {
832 margin-bottom: 10px !important;
835 .dataTables_extended_wrapper .seperator {
840 .dataTables_extended_wrapper .dataTables_length label {
841 margin: 0 !important;
842 padding: 0 !important;
844 float: none !important;
845 display: inline-block !important;
848 .table-container .table-actions-wrapper {
853 Password Strength(in v1.4)
855 .password-strength .password-verdict {
856 display: inline-block;
861 .password-strength .progress {
866 .password-strength .progress-bar {
871 Uniform disabled checkbox, radio button fix(in v1.4)
874 .table .uniform-inline {
880 margin-top: -2px !important;
881 margin-right: 2px !important;
887 outline: none !important;
890 div.checker.disabled span,
891 div.checker.disabled.active span{
892 background-position: -152px -260px;
895 div.checker.disabled:hover,
896 div.radio.disabled:hover {
910 width: auto !important;
911 height: auto !important;
919 .ms-container .ms-list {
920 border: 1px solid #e5e5e5;
921 -webkit-box-shadow: none;
922 -moz-box-shadow: none;
927 .ms-container .ms-optgroup-label{
931 .ms-container .ms-selectable li.ms-elem-selectable,
932 .ms-container .ms-selection li.ms-elem-selection{
936 .ms-container .ms-list.ms-focus {
937 border-color: #999999;
938 -webkit-box-shadow: none;
939 -moz-box-shadow: none;
943 .ms-container .ms-selectable li.ms-hover,
944 .ms-container .ms-selection li.ms-hover{
946 background-color: #eee;
949 .ms-container .form-control {
954 Bootstrap Colorpicker
956 .input-group.color .input-group-btn i {
965 .colorpicker.dropdown-menu {
969 /* change z-index when opened in modal */
970 .modal-open .colorpicker {
971 z-index: 10055 !important;
975 Bootstrap Datetimepicker
978 .datetimepicker table td {
979 font-weight: 300 !important;
980 font-family: 'Open Sans' !important;
983 .datetimepicker table th {
984 font-family: 'Open Sans' !important;
985 font-weight: 400 !important;
988 .datetimepicker.dropdown-menu {
992 .datetimepicker .active {
993 background-color:#4b8df8 !important;
994 background-image: none !important;
995 filter: none !important;
998 .datetimepicker .active:hover {
999 background-color: #2678FC !important;
1000 background-image: none !important;
1001 filter: none !important;
1005 /* change z-index when opened in modal */
1006 .modal-open .datetimepicker {
1007 z-index: 10055 !important;
1011 Bootstrap Time Picker
1013 .bootstrap-timepicker-widget table td a {
1017 .bootstrap-timepicker-widget input,
1018 .bootstrap-timepicker-widget input:focus {
1019 outline: none !important;
1023 .modal-open .bootstrap-timepicker-widget {
1024 z-index: 10055 !important;
1027 .bootstrap-timepicker-widget.timepicker-orient-bottom:before,
1028 .bootstrap-timepicker-widget.timepicker-orient-bottom:after {
1033 Bootstrap Datepicker
1036 .datepicker.dropdown-menu {
1040 .datepicker .selected {
1041 background-color:#909090 !important;
1042 background-image: none !important;
1043 filter: none !important;
1046 .datepicker .active {
1047 background-color:#4b8df8 !important;
1048 background-image: none !important;
1049 filter: none !important;
1052 .datepicker .active:hover {
1053 background-color: #2678FC !important;
1054 background-image: none !important;
1055 filter: none !important;
1058 .datepicker .input-daterange input {
1062 /* change z-index when opened in modal */
1063 .modal-open .datepicker {
1064 z-index: 10055 !important;
1067 .datepicker table td {
1068 font-weight: 300 !important;
1069 font-family: 'Open Sans' !important;
1072 .datepicker table th {
1073 font-family: 'Open Sans' !important;
1074 font-weight: 400 !important;
1082 .modal-open .clockface {
1083 z-index: 10055 !important;
1086 .clockface .cell .inner.active,
1087 .clockface .cell .outer.active {
1088 background-color:#4b8df8 !important;
1089 background-image: none ;
1095 Bootstrap Daterangepicker
1098 .modal-open .daterangepicker {
1099 z-index: 10055 !important;
1102 .daterangepicker td {
1106 .daterangepicker td.active {
1107 background-color: #4b8df8 ;
1108 background-image: none ;
1112 .daterangepicker th {
1117 .daterangepicker .ranges input[type="text"] {
1118 width: 70px !important;
1120 vertical-align: middle;
1123 .daterangepicker .ranges label {
1128 .daterangepicker .ranges .btn {
1132 .daterangepicker.dropdown-menu {
1136 .daterangepicker .ranges li {
1140 .daterangepicker .ranges li.active,
1141 .daterangepicker .ranges li:hover {
1142 background: #4b8df8 !important;
1143 border: 1px solid #4b8df8 !important;
1147 .daterangepicker .range_inputs input {
1148 margin-bottom: 0 !important;
1155 .editable-input table,
1156 .editable-input table th,
1157 .editable-input table td,
1158 .editable-input table tr {
1159 border: 0 !important;
1162 .editable-input .combodate select {
1170 .spinner-buttons.btn-group-vertical .btn {
1187 margin: -3px 0 0 -20px;
1195 background: #ffb848;
1199 Toastr Notifications
1202 -webkit-box-shadow: none !important;
1203 -moz-box-shadow: none !important;
1204 box-shadow: none !important;
1208 background-color: #030303;
1211 background-color: #51a351;
1214 background-color: #bd362f;
1217 background-color: #2f96b4;
1220 background-color: #f89406;
1223 .toast .toast-close-button {
1224 display: inline-block;
1227 text-indent: -100000px;
1230 background-repeat: no-repeat !important;
1231 background-image: url("../image/portlet-remove-icon-white.png") !important;
1238 margin-left: -150px;
1241 .toast-bottom-center {
1245 margin-left: -150px;
1251 .form-recaptcha-img {
1252 margin-bottom: 10px;
1254 border: 1px solid #e5e5e5;
1258 iframe[src="about:blank"] {
1266 padding: 5px !important;
1267 border-bottom: 0 !important;
1270 .md-editor .btn-toolbar {
1275 border: 1px solid #999999;
1276 -webkit-box-shadow: none !important;
1277 -moz-box-shadow: none !important;
1278 box-shadow: none !important;
1282 Bootstrap Datepaginator
1285 font-family: 'Open Sans';
1290 .datepicker .today {
1291 background-image: none !important;
1292 filter: none !important;
1296 right: 4px !important;
1300 Font Awesome 4.0 Demo
1304 padding: 10px 10px 10px 20px;
1309 display: inline-block;
1321 /* fix: content shifting to the right on modal open */
1322 .modal-open.page-overflow .page-container,
1323 .modal-open.page-overflow .page-container .navbar-fixed-top,
1324 .modal-open.page-overflow .page-container .navbar-fixed-bottom,
1325 .modal-open.page-overflow .modal-scrollable {
1326 overflow-y: auto !important;
1330 overflow: hidden !important;
1335 jQuery Notific8 Plugin
1338 .jquery-notific8-message {
1342 [class*="jquery-notific8"],
1343 [class*="jquery-notific8"]:after,
1344 [class*="jquery-notific8"]:before {
1345 -webkit-box-sizing: content-box;
1346 -moz-box-sizing: content-box;
1347 box-sizing: content-box;
1350 .right .jquery-notific8-close-sticky span,
1351 .left .jquery-notific8-close-sticky span {
1355 .jquery-notific8-heading {
1364 .blueimp-gallery .close {
1365 background-image: url("../image/portlet-remove-icon-white.png") !important;
1369 .blueimp-gallery .prev,
1370 .blueimp-gallery .next {
1371 border-radius: 23px !important;
1379 border-color: #e5e5e5;
1383 -webkit-box-shadow: none;
1391 .jstree-default .jstree-clicked {
1393 background-color: #e1e1e1;
1397 .jstree-default .jstree-hovered {
1399 background-color: #eee;
1403 .jstree-default .jstree-wholerow-clicked,
1404 .jstree-wholerow .jstree-wholerow-clicked {
1407 background-color: #e1e1e1;
1411 .jstree-default .jstree-wholerow-hovered,
1412 .jstree-wholerow .jstree-wholerow-hovered {
1414 background-color: #eee;
1418 .jstree-icon.icon-lg {
1422 .jstree-open > .jstree-anchor > .fa-folder:before {
1427 .jstree-default.jstree-rtl .jstree-last {
1428 background: transparent;
1429 background-repeat: no-repeat;
1433 .vakata-context ul {
1436 background-color: #ffffff;
1437 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1438 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1439 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1441 font-family: "Segoe UI",Helvetica, Arial, sans-serif;
1442 border: 1px solid #ddd;
1445 .vakata-context li a {
1449 .vakata-context .vakata-context-hover > a,
1450 .vakata-context li a:hover {
1451 background-color: #eee;
1456 .vakata-context li a span,
1457 .vakata-context li a ins {
1461 .vakata-context .vakata-context-separator a,
1462 .vakata-context-rtl .vakata-context-separator a {
1466 .jstree-rename-input {
1467 background-color: #ffffff !important;
1468 border: 1px solid #e5e5e5 !important;
1469 outline: none !important;
1470 padding: 2px 6px !important;
1471 margin-right: -4px !important;
1478 .bootstrap-select .btn {
1479 border-color: #e5e5e5;
1482 .bootstrap-select.open .btn1 {
1483 border-color: #999999;
1486 .bootstrap-select.open.dropup .btn1 {
1487 border-color: #999999;
1490 .bootstrap-select .btn:focus {
1491 outline: none !important;
1495 .bootstrap-select.btn-group .dropdown-menu {
1499 .bootstrap-select.btn-group .dropdown-menu > li > dt > .text {
1501 font-family: 'Open Sans';
1505 .bootstrap-select.btn-group .dropdown-menu .text-muted {
1506 color: #999 !important;
1509 .bootstrap-select .caret {
1513 margin-top: -10px !important;
1516 .bootstrap-select .caret:before {
1518 display: inline-block;
1520 font-family: FontAwesome;
1522 font-weight: normal;
1525 .bootstrap-select .selected i {
1530 Pace - Page Progress
1533 .pace .pace-progress {
1539 .pace .pace-progress-inner {
1543 .pace .pace-activity {
1546 border-radius: 10px !important;
1550 @media (max-width: 480px) {
1552 .page-header-fixed .pace .pace-progress {
1556 .page-header-fixed .pace .pace-activity {