cronapp-framework-js 3.0.0-SP.10 → 3.0.0-SP.11

package/css/themes/custom/krypton/grid-krypton.css

@@ -22,12 +22,12 @@
 .k-button.k-default,
 .btn.btn-default {
     box-shadow: transparent;
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
 }
 
 .k-button:hover {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
-    box-shadow: 0px 0px 3px #187AD4;
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+    box-shadow: 0px 0px 3px #187ad4;
 }
 
 .k-grid-header .k-header {
@@ -49,7 +49,7 @@
 }
 
 .k-slider .k-button {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
     color: var(--textColorPrimary40, #f0f0f0);
     border-radius: 5px;
     transform: translate(-50%, -50%);
@@ -65,13 +65,13 @@
 }
 
 .k-grid .k-pager-numbers .k-state-selected {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
     color: var(--textColor40, #f0f0f0);
     border-radius: 5px;
 }
 
 .k-button.k-primary {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
 }
 
 .k-button.k-primary:focus,
@@ -89,7 +89,7 @@
 
 .k-grid-header:first-child th.k-header:first-child {
     border-radius: 10px;
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
 }
 
 .k-grid-header th.k-header {
@@ -115,51 +115,40 @@
 }
 
 .k-grid-header .k-header {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
-}
-
-.k-grid-toolbar:first-child,
-.k-grouping-header+.k-grid-toolbar {
-    background: var(--backgroundColor40, #090f13);
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
 }
 
 .k-grid-header th.k-header {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     color: var(--textColor40, #f0f0f0);
     border: transparent;
     height: 8px;
 }
 
 .k-grid tbody td>.k-grid-delete {
-    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
 }
 
 .k-grid tbody td>.k-grid-delete:hover {
-    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
-    box-shadow: 0px 0px 3px #DE3636;
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
+    box-shadow: 0px 0px 3px #de3636;
 }
 
 .k-grid table {
     border-spacing: 1px;
+    background: var(--backgroundColor, #090f13);
+    border: unset;
 }
 
 .k-slider-horizontal .k-slider-selection,
 .k-slider-horizontal .k-slider-track {
-    background: var(--backgroundColor30, #546270);
+    background: var(--textColor40, #f0f0f0);
     height: 10px;
     margin-top: 0px;
     top: 0%;
     border-radius: 20px;
 }
 
-.k-slider .k-button {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
-    color: var(--textColorPrimary40, #f0f0f0);
-    border-radius: 5px;
-    box-shadow: none;
-    top: 1px;
-}
-
 .k-draghandle .k-state-focused:link {
     height: initial;
 }
@@ -170,24 +159,24 @@
 }
 
 .k-grid .k-pager-numbers .k-state-selected {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     color: var(--textColorPrimary40, #f0f0f0);
     border-radius: 5px;
     border: none;
 }
 
 .k-pager-wrap>.k-link>.k-icon {
-    color: var(--textColorDefault40, #f0f0f0);
+    color: var(--colorPrimary60, #125da2);
 }
 
 .k-button.k-primary {
-    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+    background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
 }
 
 .k-button.k-primary:focus,
 .k-button.k-primary:hover {
-    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
-    box-shadow: 0px 0px 3px #2FFC2B;
+    background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
+    box-shadow: 0px 0px 3px #2ffc2b;
 }
 
 .k-widget.k-tooltip {
@@ -195,17 +184,120 @@
 }
 
 .k-widget.k-tooltip.k-slider-tooltip {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+}
+
+/*Modais*/
+.modal-content {
+    position: relative;
+    background: var(--backgroundColor30, #546270);
+    color: var(--textColor40, #f0f0f0);
+    background-clip: padding-box;
+    border: 1px solid #999;
+    border: 1px solid rgba(0, 0, 0, .2);
+    border-radius: 30px;
+    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+    outline: 0;
+    text-align: center;
+}
+
+.modal-title {
+    margin: 0;
+    line-height: 1.42857143;
+    font-weight: 700;
+    margin-top: 20px;
+}
+
+.modal-header {
+    padding: 15px;
+    border-bottom: unset;
+    margin-bottom: -10px;
+}
+
+.close {
+    color: transparent;
+    text-shadow: unset;
+}
+
+#modalTemplateCancel {
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
+}
+
+.modal-footer {
+    padding: 15px;
+    text-align: right;
+    border-top: unset;
+    margin-top: 20px;
+}
+
+.btn:active:focus,
+.btn:focus {
+    outline: unset;
+    outline-offset: -2px;
+}
+
+
+/* Modal Notification*/
+.k-dialog-buttongroup .k-button.k-primary {
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+    color: var(--textColorPrimary40, #f0f0f0);
+}
+
+.k-dialog-buttongroup .k-button.k-primary:hover {
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+    box-shadow: 0px 0px 3px 0px #187ad4;
+}
+
+.k-dialog-buttongroup .k-button.k-primary:active:focus,
+.k-dialog-buttongroup .k-button.k-primary:focus {
+    background: var(--colorPrimary70, #09467f);
+    box-shadow: unset;
+}
+
+.k-dialog-buttongroup .k-button {
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
+    color: var(--textColorDanger40, #f0f0f0);
+    box-shadow: none;
+}
+
+.k-dialog-buttongroup .k-button:hover {
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
+    box-shadow: 0px 0px 3px 0px #de3636;
+}
+
+.k-dialog-buttongroup .k-button:active,
+.k-dialog-buttongroup .k-button:selected {
+    background: var(--colorDanger60, #7e2121);
+}
+
+.k-dialog-buttongroup .k-button:focus {
+    background: var(--colorDanger60, #7e2121);
+}
+
+.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-normal {
+    border-radius: 0;
+    justify-content: center;
+    border: 0;
+    margin-bottom: 20px;
 }
 
 .k-widget {
+    background: var(--backgroundColor30, #546270);
     color: var(--textColor40, #f0f0f0);
     border-bottom: none;
+    border-radius: 30px;
 }
+/* End modal*/
 
-thead.k-grid-header th.k-header:last-child {
-    border-radius: 10px;
+/*Modal mudar senha*/
+.modal .modal-content .list-group-item {
+    border: 0;
+    padding: 10px 0;
+    color: var(--textColorDefault40, #f0f0f0);
+    background: transparent;
 }
+/* -----*/
 
 .btn.btn-link:focus,
 .btn.btn-link:hover {
@@ -218,7 +310,7 @@ thead.k-grid-header th.k-header:last-child {
     height: 15px;
     padding: 1px;
     margin: 2px;
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     border-color: transparent;
     border: none;
 }
@@ -226,13 +318,13 @@ thead.k-grid-header th.k-header:last-child {
 .k-slider-buttons .k-button:focus,
 .k-grid .k-slider .k-button:hover,
 .k-slider .k-button:hover {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     color: var(--textColor40, #f0f0f0);
-    box-shadow: 0px 0px 3px #187AD4;
+    box-shadow: 0px 0px 3px #187ad4;
 }
 
 .k-slider .k-slider-selection {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     border-radius: 20px 0px 0px 20px;
     top: 2px;
     left: 2px;
@@ -248,12 +340,22 @@ thead.k-grid-header th.k-header:last-child {
 .k-grid tr td {
     border-radius: 10px;
     background: var(--textColor40, #f0f0f0);
-    color: var(--backgroundColor, #14202A);
+    color: var(--backgroundColor, #090f13);
+}
+
+.k-grid td:hover {
+    background: var(--backgroundColor30, #546270);
+    color: var(--textColorDefault40, #f0f0f0);
+    border: none;
+}
+
+td.k-command-cell:hover {
+    background: var(--backgroundColor10, #f0f0f0);
 }
 
 .carousel-control .glyphicon-chevron-left,
 .carousel-control .glyphicon-chevron-right {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
     color: var(--textColor40, #f0f0f0);
     border-radius: 20px;
     font-size: 20px;
@@ -262,11 +364,11 @@ thead.k-grid-header th.k-header:last-child {
 }
 
 .carousel-indicators li {
-    border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
 }
 
 .carousel-indicators .active {
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
 }
 
 .carousel .carousel-caption h1,
@@ -293,25 +395,19 @@ label {
 
 .k-dropdown-wrap .k-input {
     background: var(--textColor40, #f0f0f0);
-    color: var(--textColor70, #838383);
-    border-radius: 20px;
-}
-
-.k-state-hover,
-.k-state-hover:hover {
-    background: transparent;
 }
 
 .k-webkit .k-pager-numbers .k-current-page .k-link {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+    color: var(--texColorPrimary40, #f0f0f0);
     border-color: transparent;
     border-radius: 10px;
     width: auto;
 }
 
 .k-webkit .k-pager-numbers .k-current-page .k-link:hover {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
-    box-shadow: 0px 0px 3px #187AD4;
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+    box-shadow: 0px 0px 3px #187ad4;
 }
 
 .k-autocomplete.k-state-default .k-input {
@@ -325,15 +421,14 @@ label {
 }
 
 .k-pager-sizes .k-dropdown-wrap .k-input {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     color: var(--texColorPrimary40, #f0f0f0);
     border-color: transparent;
     border-radius: 10px;
-}
-
-.k-state-default>.k-select {
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
-    border-radius: 10px;
+    text-indent: initial;
+    margin-left: -3px;
+    width: auto;
+    text-align: center;
 }
 
 .k-pager-wrap .k-pager-refresh {
@@ -363,14 +458,29 @@ label {
     border-bottom: none;
 }
 
+.k-dropdown-wrap.k-state-default.k-state-hover {
+    background: var(--backgroundColor10, #f0f0f0);
+}
+
+
 .k-popup {
-    background: var(--backgroundColor, #14202A);
+    background: var(--backgroundColor30, #546270);
+    color: var(--textColorDefault40, #f0f0f0);
+}
+
+.k-popup .k-list .k-item {
+    color: var(--textColorDefault40, #f0f0f0);
+}
+
+.k-popup .k-list .k-item:hover {
+    color: var(--textColorTexts, #14202a);
 }
 
 .k-popup .k-list .k-state-focused {
-    box-shadow: none;
-    background: var(--backgroundColor, #14202A);
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     color: var(--textColor40, #f0f0f0);
+    box-shadow: none;
+    border: unset;
 }
 
 .k-list>.k-state-hover {
@@ -385,6 +495,7 @@ label {
 
 .k-autocomplete.k-state-default {
     border-bottom: none;
+    border-radius: 20px;
 }
 
 cron-grid .k-tooltip span:before {
@@ -416,16 +527,82 @@ cron-grid .k-tooltip span:before {
     background: var(--backgroundColor30, #546270);
 }
 
-.navbar-nav>li>a,
-    {
+.navbar-nav>li>a {
     color: var(--textColor40, #f0f0f0);
 }
 
-.k-dropdown-wrap,
+
 .k-dropdown-wrap.k-state-defaul:focus,
-.k-dropdown-wrap,
 .k-dropdown-wrap.k-state-defaul:hover,
-.k-dropdown-wrap,
 .k-dropdown-wrap.k-state-defaul:active {
     background: transparent;
+}
+
+.k-pager-nav.k-pager-first+.k-link {
+    border-right: unset;
+}
+
+.k-pager-wrap .k-link.k-pager-last {
+    border-right-width: unset;
+    border-right-style: unset;
+}
+
+.k-state-default>.k-select {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--backgroundColor10, #f0f0f0);
+    color: var(--texColorPrimary40, #f0f0f0);
+    border-radius: 0px;
+}
+
+.k-pager-wrap .k-link {
+    border-color: unset;
+    border: unset;
+    background: var(--textColorDefault40, #f0f0f0);
+}
+
+.k-slider .k-button {
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
+    color: var(--textColorDefault40, #f0f0f0);
+    border-radius: 5px;
+    box-shadow: none;
+    top: 3px;
+}
+
+.k-i-arrow-end-right:before,
+.k-i-arrow-end-left:before,
+.k-i-arrow-60-down:before {
+    color: var(--colorPrimary60, #125da2);
+}
+
+.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
+    background: var(--backgroundCOlor10, #f0f0f0);
+    border-radius: 10px;
+}
+
+.ng-scope.k-grid.k-widget.k-display-block.k-editable {
+    background: transparent;
+    border: unset;
+}
+
+.k-select {
+    background: var(--backgroundColor10, #f0f0f0);
+}
+
+.k-button.k-button-icontext.k-grid-cancel {
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
+}
+
+thead.k-grid-header th.k-header:last-child {
+    border-radius: 10px;
+}
+
+.k-i-clock:before {
+    color: var(--colorPrimary70, #09467f);
+}
+
+.k-scheduler-footer .k-icon {
+    background: var(--backbgroundColor10, #f0f0f0);
+    border-radius: 20px;
 }

package/css/themes/custom/krypton/navbar-krypton.css

@@ -3,13 +3,13 @@
 }
 
 .navbar {
-    background: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
     border-bottom: none;
     text-transform: uppercase;
 }
 
 .navbar-inverse {
-    background: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
     border: none
 }
 
@@ -38,21 +38,23 @@
 
 .navbar-default #navbar .navbar-nav li .dropdown-menu li a:hover,
 .navbar-default #navbar2 .navbar-nav li .dropdown-menu li a:hover {
-    color: var(--textColorDefault40, #fffef9);
-    background: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
-    border-radius: 0;
+    color: var(--textColorDefault40, #f0f0f0);
+    background: var(--backgroundColor30, #546270);
+    border-radius: 0px;
 }
 
 .dropdown-menu {
     color: var(--textColor40, #f0f0f0);
     font-size: var(--textMediumSize, 16px);
-    background: var(--backgroundColor30, #7c7e81);
+    background: var(--backgroundColor10, #f0f0f0);
     border-radius: 5px;
 }
 
 .navbar-default #navbar .navbar-nav li .dropdown-menu a,
 .navbar-default #navbar2 .navbar-nav li .dropdown-menu a {
-    color: var(--textColor40, #f0f0f0);
+    color: var(--textColorTexts, #14202a);
+    background: var(--textColor40, #f0f0f0);
+    border-radius: 10px;
     margin: 0;
 }
 
@@ -146,12 +148,12 @@
 }
 
 .dropdown-menu>li>a {
-    color: var(--textColor40, #f0f0f0);
+    color: var(--textColorTexts, #14202a);
 }
 
 .dropdown-menu>li>a:focus,
 .dropdown-menu>li>a:hover {
-    color: var(--textColor40, #f0f0f0);
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
-    border-radius: 0;
+    color: var(--textColorDefault40, #f0f0f0);
+    background: var(--backgroundColor30, #546270);
+    border-radius: 0px;
 }

package/css/themes/custom/krypton/panel-krypton.css

@@ -7,7 +7,7 @@
 
 .panel-footer {
     color: var(--backgroundColor40, #14202a);
-    background: var(--backgroundColor10, #CED0D2);
+    background: var(--backgroundColor10, #ced0d2);
     border: transparent;
     border-radius: 10px;
 }
@@ -16,7 +16,10 @@
     margin-bottom: 0;
     font-size: var(--textNormalSize, 10px);
     border-radius: 10px;
+}
 
+.panel-heading {
+    border-bottom: unset;
 }
 
 .panel-body {
@@ -36,7 +39,7 @@
 /* Default */
 .panel-default .panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -44,7 +47,7 @@
 /* Primary */
 .panel-primary>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -52,7 +55,7 @@
 /* Success */
 .panel-success>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+    background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -60,7 +63,7 @@
 /* Info */
 .panel-info>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+    background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -68,7 +71,7 @@
 /* Warning */
 .panel-warning>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+    background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -76,7 +79,7 @@
 /* Danger */
 .panel-danger>.panel-heading {
     color: var(--textColorDanger40, #fffef9);
-    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -84,7 +87,7 @@
 /* Light */
 .panel-light>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -92,7 +95,7 @@
 /* Stable */
 .panel-stable>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+    background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -100,7 +103,7 @@
 /* Royal */
 .panel-royal>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+    background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
     border-color: transparent;
     border-radius: 10px;
 }
@@ -108,7 +111,7 @@
 /* Dark */
 .panel-dark>.panel-heading {
     color: var(--textColor40, #f0f0f0);
-    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+    background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
     border-color: transparent;
     border-radius: 10px;
 }

package/css/themes/custom/material/navbar-material.css

@@ -72,6 +72,8 @@
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
     border-color: transparent;
+    padding: 0;
+    margin-left: -8px;
 }
 
 .navbar-default .navbar-toggle:focus,