cronapp-framework-js 2.9.3 → 2.9.4-RC.3

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

@@ -73,7 +73,7 @@
 
     /* Border Radius */
     --borderRadiusNone: 0;
-    --borderRadiusSmallest: 5px;
+    --borderRadiusSmallest: 2px;
     --borderRadiusExtraSmall: 10px;
     --borderRadiusSmall: 15px;
     --borderRadiusBig: 30px;
@@ -352,7 +352,7 @@
     --comboboxDark: var(--colorDark40, #444444);
 
     --borderComboboxDefault: var(--backgroundColor60, #b1b1b1);
-    --borderComboboxPrimary: var(--colorPrimary50, #4b58a6);
+    --borderComboboxPrimary: var(--colorPrimary50, #37479e);
     --borderComboboxSuccess: var(--colorSuccess50, #2db353);
     --borderComboboxCalm: var(--colorCalm50, #0fa9d5);
     --borderComboboxWarning: var(--colorWarning50, #dfb000);
@@ -431,7 +431,12 @@ h6 {
 }
 
 .color-stable {
-    color: var(--colorStable50, #d9d9d9);
+    color: var(--colorStable60, #b6b6b6);
+}
+
+.color-stable:focus,
+.color-stable:hover {
+    color: var(--colorStable70, #888888);
 }
 
 .color-info {
@@ -439,7 +444,7 @@ h6 {
 }
 
 .color-info:hover {
-    color: var(--colorDefault60, #2b3268);
+    color: var(--colorDefault60, #343c7c);
 }
 
 
@@ -505,19 +510,39 @@ textarea.k-textbox:hover {
     border-radius: 0;
 }
 
-.cardinput{
+.cardinput {
     padding: 0;
 }
 
+.cronMultiSelect.k-state-hover .k-multiselect-wrap,
+.cronMultiSelect.k-state-hover:hover .k-multiselect-wrap {
+    border-color: var(--textColor30, #393939);
+}
+
+textarea.k-textbox:focus,
+.k-multiselect-wrap.k-state-focused,
+.k-state-focused>.k-multiselect-wrap,
+.cardinput:focus-within,
+.input-group.layout-template-modern:focus-within,
+input.k-textbox:hover:focus,
 .k-autocomplete.k-state-focused,
 .k-dropdown-wrap.k-state-focused,
 .k-multiselect.k-header.k-state-focused,
 .k-numeric-wrap.k-state-focused,
 .k-picker-wrap.k-state-focused,
-.k-textbox:focus {
+.k-textbox:focus,
+.k-autocomplete.k-state-focused,
+.k-dropdown-wrap.k-state-focused,
+.k-multiselect.k-header.k-state-focused,
+.k-numeric-wrap.k-state-focused,
+.k-picker-wrap.k-state-focused {
     box-shadow: none;
     border: none;
-    border-bottom: 1px solid var(--textColor30, #393939);
+    border-bottom: 1px solid var(--colorDefault40, #3b448e);
+}
+
+.input-group.layout-template-modern input.k-textbox:hover:focus {
+    border: 0;
 }
 
 .k-autocomplete.k-state-default .k-input,
@@ -532,9 +557,13 @@ textarea.k-textbox:hover {
 }
 
 /* Button */
+.k-scheduler-edit-form .k-edit-field .k-button,
+.k-edit-form-container .k-edit-buttons .k-primary,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
 .k-button,
 .btn {
-    border-radius: 2px;
+    border-radius: var(--borderRadiusSmallest, 2px);
     box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
 }
 
@@ -601,12 +630,12 @@ textarea.k-textbox:hover {
     box-shadow: 0 0px 0px 0px rgb(0 0 0 / 20%), 0 0px 0px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
     background: #ffffff;
     padding: 40px 30px 40px 30px;
-    border-radius: 3px;
+    border-radius: var(--borderRadiusSmallest, 2px);
 }
 
 .login-view .crn-button-signup-register,
 .login-view .btn.btn-default {
-    background: var(--colorPrimary40, #3b448e);
+    background: var(--colorPrimary40, #5665be);
     border-color: transparent;
     color: var(--textColorPrimary40, #ffffff);
 }
@@ -614,14 +643,14 @@ textarea.k-textbox:hover {
 .login-view .crn-button-signup-register:hover,
 .login-view .btn.btn-default:hover {
     color: var(--textColorPrimary40, #ffffff);
-    background: var(--colorPrimary50, #343c7c);
+    background: var(--colorPrimary50, #37479e);
     border-color: transparent;
     outline: none;
 }
 
 /* Abas */
 .ctn-tab .nav-tabs {
-    background: var(--colorPrimary40, #387ef5);
+    background: var(--colorPrimary40, #5665be);
     border: none;
 }
 
@@ -644,10 +673,6 @@ textarea.k-textbox:hover {
 }
 
 /* Banner */
-.jumbotron {
-    background: var(--backgroundColor40, #f1f1f1);
-}
-
 .jumbotron .h1,
 .jumbotron h1,
 .jumbotron .h2,
@@ -655,6 +680,11 @@ textarea.k-textbox:hover {
     color: var(--textColor40, #393939);
 }
 
+.container .jumbotron,
+.container-fluid .jumbotron {
+    background: var(--backgroundColor40, #f1f1f1);
+}
+
 /* Slider */
 .k-slider .k-slider-selection {
     background: var(--colorDefault40, #3b448e);
@@ -688,10 +718,6 @@ textarea.k-textbox:hover {
 }
 
 /* Arquivo/Imagem dinâmica */
-.dynamic-image-container {
-    border: 1px dashed var(--colorDefault40, #3b448e);
-}
-
 .dynamic-image-container .btn {
     color: var(--textColor40, #393939);
     background: var(--backgroundColor40, #f1f1f1);
@@ -744,36 +770,36 @@ textarea.k-textbox:hover {
 /* option - radio  */
 .option-light .k-radio:checked+.k-radio-label:before,
 .option-light .k-radio-label:before {
-    border-color: var(--colorLight50, #d9d7d2);
+    border-color: var(--colorLight50, #dfdfdf);
 }
 
 .option-light .k-radio-label:after,
 .option-light .k-radio:checked+.k-radio-label:after {
-    background: var(--colorLight50, #d9d7d2);
-    border-color: var(--colorLight50, #d9d7d2);
+    background: var(--colorLight50, #dfdfdf);
+    border-color: var(--colorLight50, #dfdfdf);
 }
 
 .option-light .k-radio:focus+.k-radio-label::before,
 .option-light .k-radio:hover+.k-radio-label::before {
-    box-shadow: 0 0 5px 0 var(--colorLight50, #d9d7d2);
-    border-color: var(--colorLight50, #d9d7d2);
+    box-shadow: 0 0 5px 0 var(--colorLight50, #dfdfdf);
+    border-color: var(--colorLight50, #dfdfdf);
 }
 
 .option-stable .k-radio:checked+.k-radio-label:before,
 .option-stable .k-radio-label:before {
-    border-color: var(--colorStable50, #d9d9d9);
+    border-color: var(--colorStable60, #b6b6b6);
 }
 
 .option-stable .k-radio-label:after,
 .option-stable .k-radio:checked+.k-radio-label:after {
-    background: var(--colorStable50, #d9d9d9);
-    border-color: var(--colorStable50, #d9d9d9);
+    background: var(--colorStable60, #b6b6b6);
+    border-color: var(--colorStable60, #b6b6b6);
 }
 
 .option-stable .k-radio:focus+.k-radio-label::before,
 .option-stable .k-radio:hover+.k-radio-label::before {
-    box-shadow: 0 0 5px 0 var(--colorStable50, #d9d9d9);
-    border-color: var(--colorStable50, #d9d9d9);
+    box-shadow: 0 0 5px 0 var(--colorStable60, #b6b6b6);
+    border-color: var(--colorStable60, #b6b6b6);
 }
 
 .option-info .k-radio-label:before {
@@ -782,7 +808,7 @@ textarea.k-textbox:hover {
 
 .option-info .k-radio-label:after,
 .option-info .k-radio:checked+.k-radio-label:after {
-    background-color: var(--colorDefault40, #3b448e);
+    background: var(--colorDefault40, #3b448e);
     border-color: var(--colorDefault40, #3b448e);
 }
 
@@ -843,7 +869,7 @@ textarea.k-textbox:hover {
 .checkbox-light .k-checkbox:checked+.k-checkbox-label:after,
 .checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:after,
 .checkbox-light .k-checkbox-label:before {
-    border-color: var(--colorLight50, #d7d7d7);
+    border-color: var(--colorLight50, #dfdfdf);
 }
 
 .checkbox-light .k-checkbox-label:hover:before,
@@ -859,7 +885,7 @@ textarea.k-textbox:hover {
 .checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:before,
 .checkbox-light .k-checkbox:checked+.k-checkbox-label:after,
 .checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:after {
-    background: var(--colorLight50, #d7d7d7);
+    background: var(--colorLight50, #dfdfdf);
     color: var(--textColorLight40, #222222);
 }
 
@@ -876,7 +902,7 @@ textarea.k-textbox:hover {
 .checkbox-stable .k-checkbox:checked+.k-checkbox-label:after,
 .checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:after,
 .checkbox-stable .k-checkbox-label:before {
-    border-color: var(--colorStable50, #d9d9d9);
+    border-color: var(--colorStable60, #b6b6b6);
 }
 
 .checkbox-stable .k-checkbox-label:hover:before,
@@ -885,20 +911,17 @@ textarea.k-textbox:hover {
 .checkbox-stable .k-checkbox:hover+.k-checkbox-label:before,
 .checkbox-stable .k-checkbox:focus+.k-checkbox-label:before,
 .checkbox-stable .k-checkbox:hover+.k-checkbox-label:before {
-    box-shadow: 0 0 5px 0 var(--colorStable60, #b6b6b6);
+    box-shadow: 0 0 5px 0 var(--colorStable70, #888888);
 }
 
 .checkbox-stable .k-checkbox:checked+.k-checkbox-label:before,
 .checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:before,
 .checkbox-stable .k-checkbox:checked+.k-checkbox-label:after,
 .checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:after {
-    background: var(--colorStable50, #d9d9d9);
+    background: var(--colorStable60, #b6b6b6);
     color: var(--textColorStable40, #444444);
 }
 
-
-
-
 /* seta do modal do calendario */
 .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
     border-bottom-color: var(--backgroundColor10, #fbfbfb);
@@ -909,15 +932,23 @@ textarea.k-textbox:hover {
 }
 
 /* Calendar */
+.k-calendar .k-header,
+.k-calendar .k-footer,
+.k-calendar .k-footer .k-link,
 cron-calendar.k-calendar .k-footer,
 cron-calendar.k-calendar .k-header,
 .k-calendar .k-footer .k-nav-today {
-    background: var(--colorDefault40, #2f2f2f);
+    background: var(--colorDefault40, #3b448e);
     color: var(--textColorDefault40, #ffffff);
 }
 
+.k-calendar .k-footer .k-link {
+    color: var(--textColorDefault40, #ffffff);
+    opacity: 1;
+}
+
 cron-calendar.k-widget {
-    border: 1px solid var(--colorDefault40, #2f2f2f);
+    border: 1px solid var(--colorDefault40, #3b448e);
 }
 
 .k-calendar .k-content th {
@@ -929,12 +960,13 @@ cron-calendar.k-widget {
 .k-calendar .k-nav-fast.k-state-hover,
 .k-calendar .k-footer .k-nav-today.k-state-hover,
 .k-calendar .k-footer .k-nav-today:hover {
-    background: var(--colorDefault60, #3e3e3e);
+    background: var(--colorDefault60, #2b3268);
     box-shadow: none;
+    color: var(--textColorDefault40, #ffffff);
 }
 
 .k-calendar th {
-    background: var(--colorDefault10, #3e3e3e);
+    background: var(--colorDefault10, #d8d9e3);
 }
 
 .k-calendar .k-content .k-state-hover,
@@ -943,7 +975,7 @@ cron-calendar.k-widget {
 .k-listview>.k-state-focused.k-state-selected,
 .k-state-selected td.k-state-focused,
 td.k-state-focused.k-state-selected {
-    box-shadow: inset 0 0 10px 3px var(--colorDefault40, #5665be);
+    box-shadow: inset 0 0 10px 3px var(--colorDefault40, #3b448e);
 }
 
 .k-calendar .k-content .k-state-hover .k-link {
@@ -976,7 +1008,7 @@ div[data-component^='crn-textinputicon'] .k-button {
 #forgotPasswordModal .modal-footer .btn.btn-success,
 #modalPassword .modal-footer .k-button.k-success,
 #modalPassword .modal-footer .btn.btn-success {
-    background: var(--colorPrimary40, #3f51b5);
+    background: var(--colorPrimary40, #5665be);
     border-color: transparent;
     color: var(--textColorPrimary40, #ffffff);
 }
@@ -994,7 +1026,7 @@ div[data-component^='crn-textinputicon'] .k-button {
 #forgotPasswordModal .modal-footer .btn.btn-danger,
 #modalPassword .modal-footer .k-button.k-danger,
 #modalPassword .modal-footer .btn.btn-danger {
-    background: var(--colorDefault40, #2b71e8);
+    background: var(--colorDefault40, #3b448e);
     border-color: transparent;
     color: var(--textColorDefault40, #ffffff);
 }
@@ -1063,7 +1095,7 @@ div[data-component^='crn-textinputicon'] .k-button {
 .combobox-default .k-multiselect-wrap .k-button.k-state-hover .k-select,
 .combobox-default .k-multiselect-wrap .k-button:hover {
     color: var(--textColorDefault40, #ffffff);
-    background: var(--colorDefault70, #343c7c);
+    background: var(--colorDefault70, #20254e);
     border-color: transparent;
 }
 
@@ -1082,7 +1114,7 @@ div[data-component^='crn-textinputicon'] .k-button {
 .combobox-info .k-multiselect-wrap .k-button.k-state-hover .k-select,
 .combobox-info .k-multiselect-wrap .k-button:hover {
     color: var(--textColorDefault40, #ffffff);
-    background: var(--colorDefault70, #343c7c);
+    background: var(--colorDefault70, #20254e);
     border-color: transparent;
 }
 
@@ -1099,27 +1131,44 @@ div[data-component^='crn-textinputicon'] .k-button {
 }
 
 /* Scheduler */
-.k-scheduler-toolbar .k-nav-current .k-lg-date-format,
-.k-scheduler-toolbar .k-nav-current .k-sm-date-format {
-    color: var(--textColor40, #393939);
-}
-
-.k-scheduler-toolbar .k-nav-current.k-state-hover .k-icon,
-.k-scheduler-toolbar .k-nav-current.k-state-hover .k-lg-date-format,
-.k-scheduler-toolbar .k-nav-current.k-state-hover .k-sm-date-format {
-    color: var(--colorDefault40, #3b448e);
-}
-
-.k-scheduler-navigation .k-nav-today.k-state-hover .k-link,
-.k-scheduler-navigation .k-nav-next.k-state-hover .k-link,
-.k-scheduler-navigation .k-nav-prev.k-state-hover .k-link {
-    background: var(--colorPrimary60, #2e3b85);
-    color: var(--textColorPrimary40, #ffffff);
-}
-
-.k-scheduler-navigation .k-nav-prev .k-link span,
-.k-scheduler-navigation .k-nav-next.k-state-hover .k-link span,
-.k-scheduler-navigation .k-nav-prev.k-state-hover .k-link span {
+@media only screen and (min-width: 1024px) {
+
+    .k-scheduler .k-scheduler-toolbar .k-state-selected .k-link,
+    .k-scheduler .k-scheduler-toolbar .k-state-selected,
+    .k-scheduler-navigation .k-nav-prev .k-link,
+    .k-scheduler div.k-scheduler-footer .k-link,
+    .k-scheduler div.k-scheduler-footer ul li {
+        background: var(--colorPrimary40, #5665be);
+        color: var(--textColorPrimary40, #ffffff);
+        border-color: var(--colorPrimary40, #5665be);
+    }
+
+    .k-scheduler-navigation .k-nav-prev .k-link:hover,
+    .k-scheduler div.k-scheduler-footer .k-link:hover,
+    .k-scheduler div.k-scheduler-footer ul li:hover,
+    .k-scheduler .k-scheduler-toolbar ul.k-scheduler-views li.k-state-hover a,
+    .k-scheduler .k-scheduler-toolbar ul.k-scheduler-views li.k-state-hover,
+    .k-scheduler .k-scheduler-toolbar ul li.k-state-hover,
+    .k-scheduler .k-scheduler-toolbar ul li.k-state-hover .k-link {
+        background: var(--colorPrimary60, #2e3b85);
+        border-color: var(--colorPrimary60, #2e3b85);
+        color: var(--textColorPrimary40, #ffffff);
+    }
+
+    .k-scheduler-navigation .k-nav-prev,
+    .k-scheduler .k-scheduler-toolbar .k-state-selected {
+        border-color: var(--colorPrimary40, #5665be);
+    }
+
+    .k-scheduler-navigation .k-nav-prev .k-link span,
+    .k-scheduler-navigation .k-nav-next.k-state-hover .k-link span,
+    .k-scheduler-navigation .k-nav-prev.k-state-hover .k-link span {
+        color: var(--textColorPrimary40, #ffffff);
+    }
+}
+
+.k-scheduler .k-today.k-state-selected div .k-icon.k-i-close,
+.k-scheduler .k-today.k-state-selected div {
     color: var(--textColorPrimary40, #ffffff);
 }
 
@@ -1133,6 +1182,17 @@ div[data-component^='crn-textinputicon'] .k-button {
     border-width: 0 0 1px 0;
 }
 
-#cron-breadcrumbs{
+#cron-breadcrumbs {
     background: transparent;
+}
+
+#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-root-link:last-child,
+#cron-breadcrumbs .k-breadcrumb-item.k-breadcrumb-last-item::marker,
+#cron-breadcrumbs .k-breadcrumb-item.k-breadcrumb-last-item,
+#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-link.k-state-disabled {
+    color: var(--colorDefault30, #8689af);
+}
+
+.k-widget{
+    box-shadow: none;
 }

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

@@ -2,8 +2,7 @@
     position: relative;
     vertical-align: bottom;
     padding: 12px;
-    background: var(--backgroundColor10, #f1f1f1);
-    ;
+    background: var(--backgroundColor10, #fbfbfb);
     color: var(--textColor40, #393939);
 }
 
@@ -49,11 +48,11 @@ thead.k-grid-header th.k-header:last-child,
 }
 
 .k-grid-toolbar .k-button.k-state-hover:focus,
-.k-grid-toolbar .k-button.k-state-hover:hover ,
+.k-grid-toolbar .k-button.k-state-hover:hover,
 .k-grid-toolbar .k-button:focus,
 .k-grid-toolbar .k-button:hover {
     color: var(--textColorDefault40, #ffffff);
-    background: var(--colorDefault70, #343c7c);
+    background: var(--colorDefault70, #20254e);
     border-color: transparent;
     outline: none;
 }
@@ -69,21 +68,8 @@ thead.k-grid-header th.k-header:last-child,
     background: var(--backgroundColor10, #fbfbfb);
 }
 
-.k-editor,
-.k-grid,
-.k-menu,
-.k-scheduler,
-.k-grid-header:first-child,
-.k-grid-toolbar:first-child,
-.k-grid>.k-grouping-header,
-.k-grid-pager,
-.k-scheduler-footer,
-.k-scheduler>.k-scheduler-toolbar:first-child {
-    border-radius: 0;
-}
-
 .k-grid-header {
-    font-size: 16px;
+    font-size: var(--textNormalSize, 14px);
 }
 
 .k-grid-header th.k-header,
@@ -104,7 +90,7 @@ thead.k-grid-header th.k-header:last-child,
 .k-grid-header th.k-header:hover a,
 .k-grid-header th.k-header:hover .k-icon,
 .k-grid-header th.k-header:hover .k-tool-icon {
-    color: var(--colorWarning40, #ffc900);
+    color: var(--colorWarning40, #f0ad4e);
 }
 
 .k-grid-header .k-header {
@@ -122,7 +108,7 @@ thead.k-grid-header th.k-header:last-child,
 .k-grid td.k-state-selected:hover,
 .k-grid tr.k-state-selected:hover td {
     background: var(--backgroundColor40, #f1f1f1);
-    color: var(--textColor40, #ffffff);
+    color: var(--textColor40, #393939);
 }
 
 .k-pager-wrap .k-state-selected {
@@ -138,19 +124,32 @@ thead.k-grid-header th.k-header:last-child,
     font-size: inherit;
 }
 
-.k-pager-wrap .k-link:hover,
+.k-pager-wrap .k-link {
+    background: var(--backgroundColor40, #f1f1f1);
+}
+
+.k-pager-wrap .k-link.k-state-disabled:hover,
 .k-pager-wrap .k-pager-nav:hover,
 .k-pager-wrap .k-link:focus,
 .k-pager-wrap .k-pager-nav:focus {
     background: rgba(0, 0, 0, 0.07);
 }
 
+.k-pager-wrap .k-link:hover {
+    background: var(--colorDefault10, #d8d9e3);
+}
+
+.k-dropdown {
+    border-radius: 0;
+}
+
 .k-pager-wrap .k-pager-nav {
     color: #000;
 }
 
-.k-pager-wrap {
-    background: var(--backgroundColor40);
+.k-block,
+.k-widget {
+    background: #fff;
 }
 
 .k-pager-nav.k-pager-first+.k-link {
@@ -165,13 +164,13 @@ thead.k-grid-header th.k-header:last-child,
 .k-picker-wrap.k-state-default {
     border: 0;
     border-radius: 0;
-    border-bottom: 1px solid var(--textColor30, #393939);
+    border-bottom: 1px solid var(--textColor30, #858585);
     box-shadow: none;
 }
 
 .k-popup .k-list .k-state-focused {
     box-shadow: none;
-    background: var(--backgroundColor50, #dfdfdf);
+    background: var(--backgroundColor50, #d3d3d3);
     color: var(--textColor40, #393939);
 }
 
@@ -206,34 +205,25 @@ thead.k-grid-header th.k-header:last-child,
 .k-group,
 .k-group-footer td,
 .k-grouping-header,
-.k-pager-wrap,
 .k-popup {
     background: var(--backgroundColor10, #fbfbfb);
 }
 
-.k-filter-menu-container .k-action-buttons button {
-    box-shadow: none;
-    background: transparent;
-}
-
+.k-filter-menu-container .k-action-buttons button,
 .k-filter-menu-container .k-action-buttons button:focus,
 .k-filter-menu-container .k-action-buttons button:hover {
     box-shadow: none;
     border-color: transparent;
 }
 
-.k-filter-menu-container .k-action-buttons button.k-primary {
-    color: var(--colorPrimary40, #3b448e);
-}
-
 .k-filter-menu-container .k-action-buttons button:hover {
     color: var(--textColor40, #393939);
-    background: var(--backgroundColor50, #bbbbbb);
+    background: var(--backgroundColor50, #d3d3d3);
 }
 
 .k-filter-menu-container .k-action-buttons .k-primary:hover {
-    color: var(--colorPrimary40, #3b448e);
-    background: var(--colorDefault10, #b3b5ca);
+    color: var(--colorDefault40, #3b448e);
+    background: var(--colorDefault10, #d8d9e3);
 }
 
 /* Pagination - Grid */
@@ -252,9 +242,9 @@ thead.k-grid-header th.k-header:last-child,
 }
 
 .k-grid .k-pager-numbers .k-state-selected {
-    background: var(--colorPrimary40, #3f51b5);
-    color: var(--textColorPrimary40, #ffffff);
-    border-color: var(--colorPrimary40, #3f51b5);
+    background: var(--colorDefault40, #3b448e);
+    color: var(--textColorDefault40, #ffffff);
+    border-color: var(--colorDefault40, #3b448e);
 }
 
 .k-pager-wrap .k-link.k-pager-last,
@@ -267,6 +257,10 @@ thead.k-grid-header th.k-header:last-child,
     box-shadow: none;
 }
 
+.k-pager-wrap .k-link {
+    background: transparent;
+}
+
 .k-pager-wrap .k-link.k-pager-last,
 .k-pager-wrap .k-pager-nav {
     border-radius: 50%;
@@ -280,11 +274,11 @@ thead.k-grid-header th.k-header:last-child,
 }
 
 .k-pager-wrap>.k-link.k-pager-refresh .k-icon {
-    color: var(--colorPrimary40, #3f51b5);
+    color: var(--colorPrimary40, #5665be);
 }
 
 .k-pager-wrap>.k-link.k-pager-refresh:hover {
-    background: var(--colorPrimary40, #3f51b5);
+    background: var(--colorPrimary40, #5665be);
 }
 
 .k-pager-wrap>.k-link.k-pager-refresh:hover .k-icon {