cronapp-framework-js 2.9.2 → 2.9.3-SP.10

package/css/themes/custom/paper/custom-paper.css

@@ -266,6 +266,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--textColor40, #666666);
     --btnDefault: var(--colorDefault40, #ffffff);
@@ -279,6 +280,29 @@
     --btnRoyal: var(--colorRoyal40, #9c27b0);
     --btnDark: var(--colorDark40, #444444);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault50, #dfdfdf);
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: var(--colorLight50, #dfdfdf);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault50, #dfdfdf);
     --colorPrimary: var(--colorPrimary40, #2196f3);
@@ -303,6 +327,17 @@
     --checkboxRoyal: var(--colorRoyal40, #9c27b0);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: var(--colorDefault50, #dfdfdf);
+    --borderCheckboxPrimary: var(--colorPrimary40, #2196f3);
+    --borderCheckboxSuccess: var(--colorSuccess40, #4caf50);
+    --borderCheckboxCalm: var(--colorCalm40, #9c27b0);
+    --borderCheckboxWarning: var(--colorWarning40, #ff9800);
+    --borderCheckboxDanger: var(--colorDanger40, #e51c23);
+    --borderCheckboxLight: var(--colorLight50, #dfdfdf);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #9c27b0);
+    --borderCheckboxDark: var(--colorDark40, #444444);
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault50, #dfdfdf);
     --comboboxPrimary: var(--colorPrimary40, #2196f3);
@@ -315,6 +350,17 @@
     --comboboxRoyal: var(--colorRoyal40, #9c27b0);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--colorDefault50, #dfdfdf);
+    --borderComboboxPrimary: var(--colorPrimary40, #2196f3);
+    --borderComboboxSuccess: var(--colorSuccess40, #4caf50);
+    --borderComboboxCalm: var(--colorCalm40, #9c27b0);
+    --borderComboboxWarning: var(--colorWarning40, #ff9800);
+    --borderComboboxDanger: var(--colorDanger40, #e51c23);
+    --borderComboboxLight: var(--colorLight40, #ffffff);
+    --borderComboboxStable: var(--colorStable40, #f8f8f8);
+    --borderComboboxRoyal: var(--colorRoyal40, #9c27b0);
+    --borderComboboxDark: var(--colorDark40, #444444);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault50, #dfdfdf);
     --optionPrimary: var(--colorPrimary40, #2196f3);
@@ -327,6 +373,17 @@
     --optionRoyal: var(--colorRoyal40, #9c27b0);
     --optionDark: var(--colorDark40, #444444);
 
+    --borderOptionDefault: var(--colorDefault50, #dfdfdf);
+    --borderOptionPrimary: var(--colorPrimary40, #2196f3);
+    --borderOptionSuccess: var(--colorSuccess40, #4caf50);
+    --borderOptionCalm: var(--colorCalm40, #9c27b0);
+    --borderOptionWarning: var(--colorWarning40, #ff9800);
+    --borderOptionDanger: var(--colorDanger40, #e51c23);
+    --borderOptionLight: var(--colorLight50, #dfdfdf);
+    --borderOptionStable: var(--colorStable50, #d9d9d9);
+    --borderOptionRoyal: var(--colorRoyal40, #9c27b0);
+    --borderOptionDark: var(--colorDark40, #444444);
+
     /* Components - Panel */
     --panelDefault: var(--colorPrimary40, #2196f3);
     --panelPrimary: var(--colorDefault50, #dfdfdf);
@@ -338,6 +395,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #9c27b0);
     --panelDark: var(--colorDark40, #444444);
+
+    --borderPanelDefault: transparent;
+    --borderPanelPrimary: var(--colorDefault50, #dfdfdf);
+    --borderPanelSuccess: var(--colorSuccess40, #4caf50);
+    --borderPanelCalm: var(--colorCalm40, #9c27b0);
+    --borderPanelWarning: var(--colorWarning40, #ff9800);
+    --borderPanelDanger: var(--colorDanger40, #e51c23);
+    --borderPanelLight: var(--colorLight50, #dfdfdf);
+    --borderPanelStable: var(--colorStable50, #d9d9d9);
+    --borderPanelRoyal: var(--colorRoyal40, #9c27b0);
+    --borderPanelDark: var(--colorDark40, #444444);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 h1,
@@ -587,20 +657,32 @@ a:hover {
 /* Page login */
 .bg,
 .siginPanel,
-.bg-login #container-second,
 .login-view {
     background: var(--backgroundLogin40, #ffffff);
 }
 
-.bg-login #container-second h1,
-.bg-login #container-second p {
-    color: var(--textColorPrimary40, #ffffff);
+.bg-login #container-second {
+    background: linear-gradient(-140deg, var(--colorPrimary20, #afcdf9), var(--colorPrimary30, #7fb4f6), var(--colorPrimary40, #2196f3), var(--colorPrimary50, #1d83d5), var(--colorPrimary60, #186eb2));
 }
 
-#crn-botao-cadastre,
-.login-view .sign-up,
-.crn-anchor-signup-back {
+.bg-login #container-first {
+    background: transparent;
+    border-style: solid;
+    border-width: 1px 0 1px 1px;
+    border-color: var(--colorStable40, #f8f8f8);
+}
+
+.bg-login2 #container-first {
+    border-width: 0;
+}
+
+.bg-login #container-first #crn-botao-signup {
     color: var(--textColor40, #666666);
+    font-size: var(--textSmallSize, 14px);
+}
+
+.bg-login #container-first #crn-botao-signup:hover {
+    color: var(--textColor5, #595959)
 }
 
 .bg-login #container-first .btn-login-mutual,
@@ -622,6 +704,11 @@ a:hover {
     outline: none;
 }
 
+.bg-login #container-second h1,
+.bg-login #container-first h1 {
+    font-size: var(--textExtraBigSize, 45px);
+}
+
 /* Banner */
 .jumbotron {
     background: var(--backgroundColor50, #dfdfdf);
@@ -991,19 +1078,6 @@ td.k-state-focused.k-state-selected,
     outline: none;
 }
 
-.k-edit-form-container .k-edit-buttons .k-primary {
-    background: var(--colorSuccess40, #4caf50);
-    border-color: transparent;
-    color: var(--textColorSuccess40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
-    color: var(--textColorSuccess40, #ffffff);
-    background: var(--colorSuccess50, #439946);
-    border-color: transparent;
-    outline: none;
-}
-
 .k-scheduler-navigation .k-link {
     background: var(--backgroundColor40, #ffffff);
     color: var(--colorPrimary40, #2196f3);
@@ -1078,7 +1152,7 @@ td.k-state-focused.k-state-selected,
 .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(--colorPrimary20, #afcdf9);
+    box-shadow: inset 0 0 10px 3px var(--colorPrimary30, #7fb4f6);
     color: var(--textColor40, #333333);
     background: transparent;
 }
@@ -1096,19 +1170,6 @@ td.k-state-focused {
     background: transparent;
 }
 
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel {
-    background: var(--colorDanger40, #e51c23);
-    border-color: transparent;
-    color: var(--textColorDanger40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover {
-    color: var(--textColorDanger40, #ffffff);
-    background: var(--colorDanger50, #c9191f);
-    border-color: transparent;
-    outline: none;
-}
-
 .k-list .k-item.k-state-hover.k-state-selected,
 .k-list .k-item:hover.k-state-selected,
 .k-list-optionlabel:hover.k-state-selected {
@@ -1145,4 +1206,34 @@ td.k-state-focused {
 
 .cronapp-icon.cronapp-success .cronapp-success-fix {
     left: 2em;
+}
+
+
+/* Input with icon */
+.layout-template-modern {
+    background: transparent;
+    padding: 0;
+    border: 0;
+    border-bottom: 1px solid #cccccc;
+    border-radius: 0;
+}
+
+.layout-template-modern:focus-within {
+    background: transparent;
+    outline: 0;
+    border-color: var(--colorPrimary40, #2196f3);
+    box-shadow: none;
+}
+
+.layout-template-modern input.k-textbox:hover,
+.layout-template-modern input.k-textbox {
+    padding-left: 0;
+    box-shadow: none;
+}
+
+.layout-template-modern .k-button,
+.layout-template-modern .k-button:hover {
+    border: 0;
+    border-radius: 0;
+    color: var(--colorPrimary40, #2196f3);box-shadow: none;
 }

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

@@ -51,7 +51,7 @@
 #main-nav-bar .navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu li a:hover span,
 #main-nav-bar .navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu li a:hover,
 #main-nav-bar .navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu li a:hover {
-    color: var(--textColor40, #666666);
+    color: var(--textColor70, #383838);
     background: var(--backgroundColor50, #dfdfdf);
 }
 

package/css/themes/custom/readable/custom-readable.css

@@ -267,78 +267,148 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #2c72a8);
-    --btnDefault: var(--colorDefault40, #2ca4a8);
-    --btnPrimary: var(--colorPrimary40, #2c72a8);
-    --btnSuccess: var(--colorSuccess40, #38a82c);
+    --btnLink: var(--colorPrimary40, #4582ec);
+    --btnDefault: var(--colorDefault40, #ffffff);
+    --btnPrimary: var(--colorPrimary40, #4582ec);
+    --btnSuccess: var(--colorSuccess40, #3fad46);
     --btnCalm: var(--colorCalm40, #11c1f3);
-    --btnWarning: var(--colorWarning40, #daa31f);
-    --btnDanger: var(--colorDanger40, #a82c2c);
-    --btnLight: var(--colorLight40, #444444);
-    --btnStable: var(--colorStable40, #b2b2b2);
-    --btnRoyal: var(--colorRoyal40, #7e5ee8);
+    --btnWarning: var(--colorWarning40, #f0ad4e);
+    --btnDanger: var(--colorDanger40, #d9534f);
+    --btnLight: var(--colorLight40, #ffffff);
+    --btnStable: var(--colorStable40, #f8f8f8);
+    --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #444444);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault50, #dfdfdf);
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: var(--colorLight50, #dfdfdf);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
-    --colorDefault: var(--colorDefault50, #3b448e);
-    --colorPrimary: var(--colorPrimary40, #5665be);
-    --colorSuccess: var(--colorSuccess40, #257d25);
-    --colorCalm: var(--colorCalm40, #3b448e);
+    --colorDefault: var(--colorDefault50, #dfdfdf);
+    --colorPrimary: var(--colorPrimary40, #4582ec);
+    --colorSuccess: var(--colorSuccess40, #3fad46);
+    --colorCalm: var(--colorCalm40, #11c1f3);
     --colorWarning: var(--colorWarning40, #f0ad4e);
-    --colorDanger: var(--colorDanger40, #ce3a36);
-    --colorLight: var(--colorLight50, #c2c2c2);
-    --colorStable: var(--colorStable50, #ffc900);
+    --colorDanger: var(--colorDanger40, #d9534f);
+    --colorLight: var(--colorLight50, #dfdfdf);
+    --colorStable: var(--colorStable50, #d9d9d9);
     --colorRoyal: var(--colorRoyal40, #886aea);
     --colorDark: var(--colorDark40, #444444);
 
     /* Components - Checkbox */
-    --checkboxDefault: var(--colorDefault50, #3b448e);
-    --checkboxPrimary: var(--colorPrimary40, #5665be);
-    --checkboxSuccess: var(--colorSuccess40, #257d25);
+    --checkboxDefault: var(--colorDefault50, #dfdfdf);
+    --checkboxPrimary: var(--colorPrimary40, #4582ec);
+    --checkboxSuccess: var(--colorSuccess40, #3fad46);
     --checkboxCalm: var(--colorCalm40, #11c1f3);
     --checkboxWarning: var(--colorWarning40, #f0ad4e);
-    --checkboxDanger: var(--colorDanger40, #ce3a36);
-    --checkboxLight: var(--colorLight50, #dddddd);
-    --checkboxStable: var(--colorStable50, #b2b2b2);
+    --checkboxDanger: var(--colorDanger40, #d9534f);
+    --checkboxLight: var(--colorLight50, #dfdfdf);
+    --checkboxStable: var(--colorStable50, #d9d9d9);
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: var(--colorDefault50, #dfdfdf);
+    --borderCheckboxPrimary: var(--colorPrimary40, #4582ec);
+    --borderCheckboxSuccess: var(--colorSuccess40, #3fad46);
+    --borderCheckboxCalm: var(--colorCalm40, #11c1f3);
+    --borderCheckboxWarning: var(--colorWarning40, #f0ad4e);
+    --borderCheckboxDanger: var(--colorDanger40, #d9534f);
+    --borderCheckboxLight: var(--colorLight50, #dfdfdf);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #444444);
+
     /* Components - Combobox */
-    --comboboxDefault: var(--colorDefault40, #3b448e);
-    --comboboxPrimary: var(--colorPrimary40, #5665be);
-    --comboboxSuccess: var(--colorSuccess40, #257d25);
+    --comboboxDefault: var(--colorDefault40, #ffffff);
+    --comboboxPrimary: var(--colorPrimary40, #4582ec);
+    --comboboxSuccess: var(--colorSuccess40, #3fad46);
     --comboboxCalm: var(--colorCalm40, #11c1f3);
     --comboboxWarning: var(--colorWarning40, #f0ad4e);
-    --comboboxDanger: var(--colorDanger40, #ce3a36);
-    --comboboxLight: var(--colorLight40, #dddddd);
-    --comboboxStable: var(--colorStable40, #b2b2b2);
+    --comboboxDanger: var(--colorDanger40, #d9534f);
+    --comboboxLight: var(--colorLight40, #ffffff);
+    --comboboxStable: var(--colorStable40, #f8f8f8);
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--colorDefault40, #ffffff);
+    --borderComboboxPrimary: var(--colorPrimary40, #4582ec);
+    --borderComboboxSuccess: var(--colorSuccess40, #3fad46);
+    --borderComboboxCalm: var(--colorCalm40, #11c1f3);
+    --borderComboboxWarning: var(--colorWarning40, #f0ad4e);
+    --borderComboboxDanger: var(--colorDanger40, #d9534f);
+    --borderComboboxLight: var(--colorLight40, #ffffff);
+    --borderComboboxStable: var(--colorStable40, #f8f8f8);
+    --borderComboboxRoyal: var(--colorRoyal40, #886aea);
+    --borderComboboxDark: var(--colorDark40, #444444);
+
     /* Components - Radio input */
-    --optionDefault: var(--colorDefault50, #3b448e);
-    --optionPrimary: var(--colorPrimary40, #5665be);
-    --optionSuccess: var(--colorSuccess40, #257d25);
+    --optionDefault: var(--colorDefault50, #dfdfdf);
+    --optionPrimary: var(--colorPrimary40, #4582ec);
+    --optionSuccess: var(--colorSuccess40, #3fad46);
     --optionCalm: var(--colorCalm40, #11c1f3);
     --optionWarning: var(--colorWarning40, #f0ad4e);
-    --optionDanger: var(--colorDanger40, #ce3a36);
-    --optionLight: var(--colorLight50, #ffffff);
-    --optionStable: var(--colorStable50, #f8f8f8);
+    --optionDanger: var(--colorDanger40, #d9534f);
+    --optionLight: var(--colorLight50, #dfdfdf);
+    --optionStable: var(--colorStable50, #d9d9d9);
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #444444);
 
+    --borderOptionDefault: var(--colorDefault50, #dfdfdf);
+    --borderOptionPrimary: var(--colorPrimary40, #4582ec);
+    --borderOptionSuccess: var(--colorSuccess40, #3fad46);
+    --borderOptionCalm: var(--colorCalm40, #11c1f3);
+    --borderOptionWarning: var(--colorWarning40, #f0ad4e);
+    --borderOptionDanger: var(--colorDanger40, #d9534f);
+    --borderOptionLight: var(--colorLight50, #dfdfdf);
+    --borderOptionStable: var(--colorStable50, #d9d9d9);
+    --borderOptionRoyal: var(--colorRoyal40, #886aea);
+    --borderOptionDark: var(--colorDark40, #444444);
+
     /* Components - Panel */
-    --panelDefault: var(--colorDefault50, #2ca4a8);
-    --panelPrimary: var(--colorDefault50, #2c72a8);
-    --panelSuccess: var(--colorSuccess50, #38a82c);
-    --panelCalm: var(--colorCalm50, #11c1f3);
-    --panelWarning: var(--colorWarning50, #daa31f);
-    --panelDanger: var(--colorDanger50, #a82c2c);
-    --panelLight: var(--colorLight50, #dddddd);
-    --panelStable: var(--colorStable50, #b2b2b2);
-    --panelRoyal: var(--colorRoyal40, #7e5ee8);
+    --panelDefault: var(--colorDefault50, #dfdfdf);
+    --panelPrimary: var(--colorDefault50, #dfdfdf);
+    --panelSuccess: var(--colorSuccess50, #37973d);
+    --panelCalm: var(--colorCalm50, #0fa9d5);
+    --panelWarning: var(--colorWarning50, #d29744);
+    --panelDanger: var(--colorDanger50, #be4945);
+    --panelLight: var(--colorLight50, #dfdfdf);
+    --panelStable: var(--colorStable50, #d9d9d9);
+    --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #444444);
+
+    --borderPanelDefault: var(--colorDefault60, #bbbbbb);
+    --borderPanelPrimary: var(--colorPrimary60, #335fad);
+    --borderPanelSuccess: var(--colorSuccess60, #2e7f33);
+    --borderPanelCalm: var(--colorCalm60, #0c8db2);
+    --borderPanelWarning: var(--colorWarning60, #b07f39);
+    --borderPanelDanger: var(--colorDanger60, #9f3d3a);
+    --borderPanelLight: var(--colorLight60, #bbbbbb);
+    --borderPanelStable: var(--colorStable50, #d9d9d9);
+    --borderPanelRoyal: var(--colorRoyal40, #886aea);
+    --borderPanelDark: var(--colorDark40, #444444);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .color-default {
@@ -567,22 +637,33 @@ label.form-group,
 /* Page login */
 .bg,
 .siginPanel,
-.bg-login #container-second,
 .login-view {
     background: var(--backgroundLogin40, #ffffff);
 }
 
-.bg-login #container-second h1,
-.bg-login #container-second p {
-    color: var(--textColorPrimary40, #ffffff);
+.bg-login #container-second {
+    background: linear-gradient(-140deg, var(--colorPrimary20, #b5c6f5), var(--colorPrimary30, #89a8f1), var(--colorPrimary40, #4582ec), var(--colorPrimary50, #3c72cf), var(--colorPrimary60, #335fad));
+}
+
+.bg-login #container-first {
+    background: transparent;
+    border-style: solid;
+    border-width: 1px 0 1px 1px;
+    border-color: var(--colorDefault50, #dfdfdf);
 }
 
-#crn-botao-cadastre,
-.login-view .sign-up,
-.crn-anchor-signup-back {
+.bg-login2 #container-first {
+    border-width: 0;
+}
+
+.bg-login #container-first #crn-botao-signup {
     color: var(--textColor40, #333333);
 }
 
+.bg-login #container-first #crn-botao-signup:hover {
+    color: var(--textColor50, #2d2d2d)
+}
+
 .bg-login #container-first .btn-login-mutual,
 .bg-login #container-first .btn-login,
 .login-view .crn-button-signup-register,
@@ -817,6 +898,8 @@ div[data-component="crn-textinputbutton"] div[data-component="crn-button"] butto
     color: var(--colorPrimary40, #4582ec);
 }
 
+.bootstrap-datetimepicker-widget table td.active,
+.bootstrap-datetimepicker-widget table td.active:hover ,
 cron-calendar.k-calendar .k-footer,
 cron-calendar.k-calendar .k-header,
 .k-calendar .k-footer .k-nav-today {
@@ -924,19 +1007,6 @@ td.k-state-focused.k-state-selected,
     outline: none;
 }
 
-.k-edit-form-container .k-edit-buttons .k-primary {
-    background: var(--colorSuccess40, #3fad46);
-    border-color: transparent;
-    color: var(--textColorSuccess40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
-    color: var(--textColorSuccess40, #ffffff);
-    background: var(--colorSuccess50, #37973d);
-    border-color: transparent;
-    outline: none;
-}
-
 .k-scheduler-navigation .k-link {
     background: var(--backgroundColor40, #ffffff);
     color: var(--colorPrimary40, #4582ec);
@@ -991,7 +1061,7 @@ td.k-state-focused.k-state-selected,
 .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(--colorPrimary20, #b5c6f5);
+    box-shadow: inset 0 0 10px 3px var(--colorPrimary30, #89a8f1);
     color: var(--textColor40, #333333);
     background: transparent;
 }
@@ -1009,22 +1079,36 @@ td.k-state-focused {
     background: transparent;
 }
 
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel {
-    background: var(--colorDanger40, #d9534f);
-    border-color: transparent;
-    color: var(--textColorDanger40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover {
-    color: var(--textColorDanger40, #ffffff);
-    background: var(--colorDanger50, #be4945);
-    border-color: transparent;
-    outline: none;
-}
-
 .k-list .k-item.k-state-hover.k-state-selected,
 .k-list .k-item:hover.k-state-selected,
 .k-list-optionlabel:hover.k-state-selected {
     color: var(--colorDefault40, #ffffff);
     background: transparent;
+}
+
+/* Input with icon */
+.layout-template-modern {
+    background: transparent;
+    border-radius: var(--borderRadiusSmallest, 4px);
+    padding: 0;
+    border: 1px solid var(--backgroundColor50, #dfdfdf);
+}
+
+.layout-template-modern:focus-within {
+    background: transparent;
+    outline: 0;
+    border-color: var(--colorPrimary30,#89a8f1);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--colorPrimary30,#89a8f1);
+}
+
+.layout-template-modern input.k-textbox:hover,
+.layout-template-modern input.k-textbox {
+    padding-left: 0;
+    box-shadow: none;
+}
+
+.layout-template-modern .k-button,
+.layout-template-modern .k-button:hover {
+    border: 0;
+    color: var(--colorPrimary40, #4582ec);
 }

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

@@ -11,24 +11,24 @@
 
 /* Default */
 .panel-default .panel-heading {
-    color: var(--textColor40, #333333);
-    background: var(--colorDefault50, #eae8e6);
-    border-color: var(--colorDefault60, #bbbbbb);
+    color: var(--textColorPrimary40, #ffffff);
+    background: var(--colorPrimary50, #3c72cf);
+    border-color: var(--colorPrimary60, #335fad);
 }
 
 .panel-default {
-    border-color: var(--colorDefault60, #bbbbbb);
+    border-color: var(--colorPrimary60, #335fad);
 }
 
 /* Primary */
 .panel-primary>.panel-heading {
-    color: var(--textColorPrimary40, #ffffff);
-    background: var(--colorPrimary50, #3c72cf);
-    border-color: var(--colorPrimary60, #335fad);
+    color: var(--textColor40, #333333);
+    background: var(--colorDefault50, #eae8e6);
+    border-color: var(--colorDefault60, #bbbbbb);
 }
 
 .panel-primary {
-    border-color: var(--colorPrimary60, #335fad);
+    border-color: var(--colorDefault60, #bbbbbb);
 }
 
 /* Success */