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

package/css/themes/custom/spacelab/custom-spacelab.css

@@ -97,7 +97,6 @@
     --textColorDefault60: #ffffff;
     --textColorDefault70: #ffffff;
 
-
     /* Color - Primary (web) - Positive (mobile) */
     --colorPrimary10: #d9dee6;
     --colorPrimary20: #b5bfcf;
@@ -170,7 +169,6 @@
     --colorRoyal50: #775dcd;
     --colorRoyal60: #644eab;
     --colorRoyal70: #4a3a80;
-
     --textColorRoyal10: #8c8c8c;
     --textColorRoyal20: #bbbbbb;
     --textColorRoyal30: #dfdfdf;
@@ -268,18 +266,42 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #446e9b);
-    --btnDefault: var(--colorDefault40, #474949);
-    --btnPrimary: var(--colorPrimary40, #446e9b);
-    --btnSuccess: var(--colorSuccess40, #3cb521);
-    --btnCalm: var(--colorCalm40, #3399f3);
-    --btnWarning: var(--colorWarning40, #d47500);
-    --btnDanger: var(--colorDanger40, #cd0200);
-    --btnLight: var(--colorLight40, #eeeeee);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #333333);
+    --btnLink: var(--colorCalm40, #3399f3);
+    --btnDefault: linear-gradient(var(--colorDefault30, #8a8b8b), var(--colorDefault40, #474949) 50%, var(--colorDefault50, #3e4040));
+    --btnPrimary: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b) 50%, var(--colorPrimary50, #3c6088));
+    --btnSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --btnCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --btnWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --btnDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --btnLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --btnStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
+
+    --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(--colorDefault40, #474949);
+    --borderBtnPrimary: var(--colorPrimary40, #446e9b);
+    --borderBtnSuccess: var(--colorSuccess40, #3cb521);
+    --borderBtnCalm: var(--colorCalm40, #3399f3);
+    --borderBtnWarning: var(--colorWarning40, #d47500);
+    --borderBtnDanger: var(--colorDanger40, #cd0200);
+    --borderBtnLight: var(--colorLight40, #eeeeee);
+    --borderBtnStable: var(--colorStable40, #f8f8f8);
+    --borderBtnRoyal: var(--colorRoyal40, #886aea);
+    --borderBtnDark: var(--colorDark40, #333333);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #474949);
@@ -305,6 +327,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #333333);
 
+    --borderCheckboxDefault: var(--colorDefault40, #474949);
+    --borderCheckboxPrimary: var(--colorPrimary40, #446e9b);
+    --borderCheckboxSuccess: var(--colorSuccess40, #3cb521);
+    --borderCheckboxCalm: var(--colorCalm40, #3399f3);
+    --borderCheckboxWarning: var(--colorWarning40, #d47500);
+    --borderCheckboxDanger: var(--colorDanger40, #cd0200);
+    --borderCheckboxLight: var(--colorLight50, #d0d0d0);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #333333);
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault40, #474949);
     --comboboxPrimary: var(--colorPrimary40, #446e9b);
@@ -317,6 +350,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #333333);
 
+    --borderComboboxDefault: var(--colorDefault50, #ffffff);
+    --borderComboboxPrimary: var(--colorPrimary50, #4582ec);
+    --borderComboboxSuccess: var(--colorSuccess50, #3fad46);
+    --borderComboboxCalm: var(--colorCalm50, #11c1f3);
+    --borderComboboxWarning: var(--colorWarning50, #f0ad4e);
+    --borderComboboxDanger: var(--colorDanger50, #d9534f);
+    --borderComboboxLight: var(--colorLight50, #d0d0d0);
+    --borderComboboxStable: var(--colorStable50, #d9d9d9);
+    --borderComboboxRoyal: var(--colorRoyal50, #886aea);
+    --borderComboboxDark: var(--colorDark50, #444444);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault40, #474949);
     --optionPrimary: var(--colorPrimary40, #446e9b);
@@ -329,6 +373,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #333333);
 
+    --borderOptionDefault: var(--colorDefault40, #474949);
+    --borderOptionPrimary: var(--colorPrimary40, #446e9b);
+    --borderOptionSuccess: var(--colorSuccess40, #3cb521);
+    --borderOptionCalm: var(--colorCalm40, #3399f3);
+    --borderOptionWarning: var(--colorWarning40, #d47500);
+    --borderOptionDanger: var(--colorDanger40, #cd0200);
+    --borderOptionLight: var(--colorLight50, #d0d0d0);
+    --borderOptionStable: var(--colorStable50, #d9d9d9);
+    --borderOptionRoyal: var(--colorRoyal40, #886aea);
+    --borderOptionDark: var(--colorDark40, #333333);
+
     /* Components - Panel */
     --panelDefault: var(--colorPrimary40, #446e9b);
     --panelPrimary: var(--colorDefault40, #474949);
@@ -340,6 +395,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #333333);
+
+    --borderPanelDefault: var(--colorPrimary50, #bbbbbb);
+    --borderPanelPrimary: var(--colorDefault50, #335fad);
+    --borderPanelSuccess: var(--colorSuccess50, #2e7f33);
+    --borderPanelCalm: var(--colorCalm50, #0c8db2);
+    --borderPanelWarning: var(--colorWarning50, #b07f39);
+    --borderPanelDanger: var(--colorDanger50, #9f3d3a);
+    --borderPanelLight: var(--colorLight50, #d0d0d0);
+    --borderPanelStable: var(--colorStable50, #d9d9d9);
+    --borderPanelRoyal: var(--colorRoyal50, #886aea);
+    --borderPanelDark: var(--colorDark50, #444444);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .color-light {
@@ -493,17 +561,20 @@ 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,
-#crn-botao-cadastre:hover,
-.login-view .sign-up:hover,
-.crn-anchor-signup-back:hover {
-    color: var(--textColor40, #666666);
+.bg-login #container-first {
+    background: transparent;
+    border-style: solid;
+    border-width: 1px 0 1px 1px;
+    border-color: var(--colorStable50, #d9d9d9);
+    box-shadow: none;
+}
+
+.bg-login2 #container-first {
+    border-width: 0;
 }
 
 .bg-login #container-first .btn-login-mutual,
@@ -524,6 +595,10 @@ a:hover {
     outline: none;
 }
 
+.bg-login #container-second {
+    background: linear-gradient(-140deg, var(--colorPrimary20, #b5bfcf), var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b), var(--colorPrimary50, #3c6088), var(--colorPrimary60, #325172));
+}
+
 /* button - btn-fab */
 .btn.btn-fab,
 .btn-fab {
@@ -681,18 +756,6 @@ div[data-component="crn-textinputbutton"] div[data-component="crn-button"] butto
     background: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary50, #3c6088) 50%, var(--colorPrimary60, #325172));
 }
 
-.k-edit-form-container .k-edit-buttons .k-primary {
-    background: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
-    border-color: var(--colorSuccess40, #3cb521);
-    color: var(--textColorSuccess40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
-    color: var(--textColorSuccess40, #ffffff);
-    background: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess50, #359e1d) 50%, var(--colorSuccess60, #2c8518));
-    border-color: var(--colorSuccess40, #3cb521);
-}
-
 .k-scheduler-navigation .k-link {
     background: var(--backgroundColor40, #ffffff);
     color: var(--colorPrimary40, #446e9b);
@@ -748,18 +811,6 @@ td.k-state-focused {
     background: transparent;
 }
 
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel {
-    background: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
-    border-color: var(--colorDanger40, #cd0200);
-    color: var(--textColorDanger40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover {
-    color: var(--textColorDanger40, #ffffff);
-    background: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger50, #b30200) 50%, var(--colorDanger60, #960100));
-    border-color: var(--colorDanger40, #cd0200);
-}
-
 .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 {
@@ -872,4 +923,31 @@ td.k-state-focused.k-state-selected,
 
 .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
     border-top-color: var(--backgroundColor40, #ffffff);
+}
+
+/* Input with icon */
+.layout-template-modern {
+    background: var(--backgroundColor40, #fff);
+    border-radius: var(--borderRadiusSmallest, 5px);
+    padding: 0;
+    border: 1px solid var(--backgroundColor50, #ccc);
+}
+
+.layout-template-modern:focus-within {
+    background: var(--backgroundColor40, #fff);
+    outline: 0;
+    border-color: var(--colorCalm40, #3399f3);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--colorCalm40, #3399f3);
+}
+
+.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(--colorDefault40, #3b448e);
 }

package/css/themes/custom/superhero/button-superhero.css

@@ -1,3 +1,7 @@
+.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,
 .btn,
 .k-button {
     border-radius: 0;
@@ -21,6 +25,10 @@
 }
 
 /* Primary */
+.k-scheduler-edit-form .k-edit-field .k-button:hover,
+.k-edit-form-container .k-edit-buttons .k-primary:hover,
+.k-scheduler-edit-form .k-edit-field .k-button:focus,
+.k-edit-form-container .k-edit-buttons .k-primary:focus,
 .k-button.k-primary:focus,
 .k-button.k-primary:hover,
 .btn.btn-primary:focus,
@@ -29,6 +37,8 @@
     color: var(--textColorPrimary40, #ffffff);
 }
 
+.k-scheduler-edit-form .k-edit-field .k-button:active,
+.k-edit-form-container .k-edit-buttons .k-primary:active,
 .btn.btn-primary.active,
 .btn.btn-primary:active,
 .k-button.k-primary.active,
@@ -72,6 +82,10 @@
 }
 
 /* Danger */
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
 .k-button.k-danger:focus,
 .k-button.k-danger:hover,
 .btn.btn-danger:focus,
@@ -80,6 +94,8 @@
     color: var(--textColorDanger40, #ffffff);
 }
 
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
 .btn.btn-danger.active,
 .btn.btn-danger:active,
 .k-button.k-danger.active,

package/css/themes/custom/superhero/custom-superhero.css

@@ -267,6 +267,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #df691a);
     --btnDefault: var(--colorDefault40, #4e5d6c);
@@ -280,6 +281,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #20374c);
 
+    --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: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #8d949b);
     --colorPrimary: var(--colorPrimary40, #df691a);
@@ -304,6 +328,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #7e848c);
 
+    --borderCheckboxDefault: var(--colorDefault30, #dfdfdf);
+    --borderCheckboxPrimary: var(--colorPrimary40, #df691a);
+    --borderCheckboxSuccess: var(--colorSuccess40, #5cb85c);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #f0ad4e);
+    --borderCheckboxDanger: var(--colorDanger40, #d9534f);
+    --borderCheckboxLight: var(--colorLight40, #abb6c2);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark30, #7e848c);
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault40, #4e5d6c);
     --comboboxPrimary: var(--colorPrimary40, #df691a);
@@ -316,6 +351,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #20374c);
 
+    --borderComboboxDefault: var(--colorDefault50, #44515f);
+    --borderComboboxPrimary: var(--colorPrimary50, #c35c17);
+    --borderComboboxSuccess: var(--colorSuccess50, #51a151);
+    --borderComboboxCalm: var(--colorCalm50, #50a8c2);
+    --borderComboboxWarning: var(--colorWarning50, #d29744);
+    --borderComboboxDanger: var(--colorDanger50, #be4945);
+    --borderComboboxLight: var(--colorLight50, #969faa);
+    --borderComboboxStable: var(--colorStable50, #d9d9d9);
+    --borderComboboxRoyal: var(--colorRoyal50, #775dcd);
+    --borderComboboxDark: var(--colorDark50, #1c3043);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault40, #4e5d6c);
     --optionPrimary: var(--colorPrimary40, #df691a);
@@ -328,6 +374,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark30, #7e848c);
 
+    --borderOptionDefault: var(--colorDefault30, #dfdfdf);
+    --borderOptionPrimary: var(--colorPrimary40, #df691a);
+    --borderOptionSuccess: var(--colorSuccess40, #5cb85c);
+    --borderOptionCalm: var(--colorCalm40, #5bc0de);
+    --borderOptionWarning: var(--colorWarning40, #f0ad4e);
+    --borderOptionDanger: var(--colorDanger40, #d9534f);
+    --borderOptionLight: var(--colorLight40, #abb6c2);
+    --borderOptionStable: var(--colorStable40, #f8f8f8);
+    --borderOptionRoyal: var(--colorRoyal40, #886aea);
+    --borderOptionDark: var(--colorDark30, #7e848c);
+
     /* Components - Panel */
     --panelDefault: var(--colorPrimary40, #df691a);
     --panelPrimary: var(--colorDefault50, #44515f);
@@ -339,6 +396,19 @@
     --panelStable: var(--colorStable40, #f8f8f8);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark30, #7e848c);
+
+    --borderPanelDefault: transparent;
+    --borderPanelPrimary: transparent;
+    --borderPanelSuccess: transparent;
+    --borderPanelCalm: transparent;
+    --borderPanelWarning: transparent;
+    --borderPanelDanger: transparent;
+    --borderPanelLight: transparent;
+    --borderPanelStable: transparent;
+    --borderPanelRoyal: transparent;
+    --borderPanelDark: transparent;
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 h1,
@@ -466,26 +536,15 @@ a:hover {
 /* Page login */
 .bg,
 .siginPanel,
-.bg-login #container-second,
 .login-view {
     background: var(--backgroundLogin40, #2b3e50);
 }
 
+.bg-login #container-first .img-login[src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png"],
 .login-view img[src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png"] {
     filter: brightness(0) invert(1);
 }
 
-.bg-login #container-second h1,
-.bg-login #container-second p {
-    color: var(--textColorPrimary40, #ffffff);
-}
-
-#crn-botao-cadastre,
-.login-view .sign-up,
-.crn-anchor-signup-back {
-    color: var(--textColor40, #ebebeb);
-}
-
 .bg-login #container-first .btn-login-mutual,
 .bg-login #container-first .btn-login,
 .login-view .crn-button-signup-register,
@@ -505,6 +564,43 @@ a:hover {
     outline: none;
 }
 
+.bg-login #container-second {
+    background: linear-gradient(-140deg, var(--colorPrimary20, #eebeaf), var(--colorPrimary30, #e79a7d), var(--colorPrimary40, #df691a), var(--colorPrimary50, #c35c17), var(--colorPrimary60, #a34d13));
+}
+
+.bg-login #container-first {
+    background: var(--colorDefault50, #44515f);
+    border-style: solid;
+    border-width: 1px 0 1px 1px;
+    border-color: var(--colorDefault50, #44515f);
+    box-shadow: none;
+}
+
+#bg-signup1.bg-login1 #container-first {
+    box-shadow: none;
+}
+
+.bg-login2 #container-first {
+    border-width: 0;
+    background: transparent;
+}
+
+#bg-signup1.bg-login1 #container-first,
+#bg-signup1.bg-login1 #container-second,
+.bg-login1 #container-first,
+.bg-login1 #container-second {
+    border-radius: 0;
+}
+
+.bg-login #container-first #crn-botao-signup {
+    color: var(--textColor40, #ebebeb);
+}
+
+.bg-login #container-first #crn-botao-signup:hover {
+    color: var(--textColor50, #cecece)
+}
+
+
 /* button - btn-fab */
 .btn.btn-fab,
 .btn-fab {
@@ -712,7 +808,7 @@ div[data-component="crn-textinputbutton"] div[data-component="crn-button"] butto
 /* Date and hour */
 .bootstrap-datetimepicker-widget.dropdown-menu {
     background: var(--backgroundColor40, #ffffff);
-    color: var(--textColor40, #222222);
+    color: var(--textColor40, #ebebeb);
 }
 
 cron-calendar.k-calendar .k-footer,
@@ -747,6 +843,8 @@ cron-calendar.k-widget {
     background: var(--colorDefault10, #dadbdd);
 }
 
+.k-calendar .k-state-focused,
+.k-calendar td.k-state-focused,
 .k-calendar td.k-state-hover,
 .k-calendar td.k-state-focused.k-state-selected.k-state-hover,
 .k-calendar .k-state-selected.k-state-hover,
@@ -755,6 +853,7 @@ cron-calendar.k-widget {
 td.k-state-focused.k-state-selected,
 .k-state-selected {
     box-shadow: inset 0 0 10px 3px var(--colorDefault30, #8d949b);
+    color: var(--colorDefault40, #4e5d6c);
 }
 
 .k-calendar td.k-state-hover .k-link {
@@ -820,7 +919,6 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
 }
 
 /* Checkbox */
-
 .k-checkbox:checked+.k-checkbox-label:before,
 .k-checkbox:indeterminate+.k-checkbox-label:before,
 .k-checkbox-label:hover:before,
@@ -910,6 +1008,22 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
     color: var(--textColorDark40, #ffffff);
 }
 
+.k-grid table .k-checkbox:checked+.k-checkbox-label:before,
+.k-grid table .k-checkbox:indeterminate+.k-checkbox-label:before,
+.k-grid table .k-checkbox-label:hover:before,
+.k-grid table .k-checkbox:checked+.k-checkbox-label:hover:before,
+.k-grid table .k-checkbox:checked:hover+.k-checkbox-label:before,
+.k-grid table .k-checkbox:hover+.k-checkbox-label:before,
+.k-grid table .k-checkbox-label:active:before,
+.k-grid table .k-checkbox:active+.k-checkbox-label:before,
+.k-grid table .k-checkbox:focus+.k-checkbox-label:before,
+.k-grid table .k-checkbox:hover+.k-checkbox-label:before,
+.k-grid table .k-checkbox:checked+.k-checkbox-label:after,
+.k-grid table .k-checkbox:indeterminate+.k-checkbox-label:after,
+.k-grid table .k-checkbox-label:before {
+    border-color: var(--textColor40, #ebebeb)
+}
+
 /* Option */
 .k-radio-label {
     color: var(--textColor40, #ebebeb);
@@ -969,7 +1083,6 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
 }
 
 .k-scheduler-edit-form .k-edit-field .k-button,
-.k-edit-form-container .k-edit-buttons .k-primary,
 .k-scheduler .k-state-selected>.k-link,
 .k-scheduler .k-scheduler-toolbar .k-state-selected,
 .k-scheduler .k-today.k-state-selected,
@@ -1005,13 +1118,8 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
     color: var(--colorPrimary40, #df691a);
 }
 
-.k-calendar .k-state-focused,
-.k-calendar td.k-state-focused {
-    box-shadow: inset 0 0 10px 3px var(--colorDefault40, #4e5d6c);
-}
 
 .k-scheduler-edit-form .k-edit-field .k-button,
-.k-edit-form-container .k-edit-buttons .k-primary,
 .k-scheduler .k-scheduler-toolbar .k-state-selected,
 .k-scheduler .k-today.k-state-selected,
 .k-scheduler-navigation .k-nav-prev .k-link,
@@ -1029,40 +1137,13 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
 .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-edit-form .k-edit-field .k-button:hover,
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
+.k-scheduler-edit-form .k-edit-field .k-button:hover {
     color: var(--textColorPrimary40, #ffffff);
     background: var(--colorPrimary50, #c35c17);
     border-color: transparent;
     outline: none;
 }
 
-.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-edit-form-container .k-edit-buttons .k-primary {
-    background: var(--colorSuccess40, #5cb85c);
-    border-color: transparent;
-    color: var(--textColorSuccess40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
-    color: var(--textColorSuccess40, #ffffff);
-    background: var(--colorSuccess50, #51a151);
-    border-color: transparent;
-    outline: none;
-}
-
 .k-scheduler-table .k-today,
 .k-today>.k-scheduler-datecolumn,
 .k-today>.k-scheduler-groupcolumn {
@@ -1073,6 +1154,11 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
     background: var(--colorPrimary40, #df691a);
 }
 
+.k-window .k-window-titlebar.k-header,
+.k-edit-form-container .k-edit-buttons {
+    background: var(--colorDefault50, #44515f);
+    border: none;
+}
 
 /* Grid */
 .k-grid-toolbar .k-button {
@@ -1108,7 +1194,7 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
 
 .k-grid table tbody tr:hover,
 .k-grid tr td {
-    color: var(--textColor40);
+    color: var(--textColor40, #ebebeb);
 }
 
 .k-grid table tbody tr:hover {
@@ -1133,7 +1219,6 @@ div[data-component^='crn-textinputicon'] .k-button:hover {
 .k-listview>.k-state-focused.k-state-selected,
 .k-state-focused.k-state-selected,
 td.k-state-focused.k-state-selected {
-    box-shadow: inset 0 0 2px 0 var(--colorPrimary30, #e79a7d), inset 0 0 7px 0 var(--colorPrimary40, #df691a);
     background: transparent;
 }
 
@@ -1141,6 +1226,9 @@ td.k-state-focused.k-state-selected {
     background: transparent;
 }
 
+.k-calendar .k-state-selected.k-state-hover .k-link,
+.k-calendar .k-today.k-state-selected.k-state-hover,
+.k-calendar .k-today.k-state-selected,
 .k-calendar .k-link {
     color: var(--colorDefault40, #4e5d6c);
 }
@@ -1211,4 +1299,31 @@ td.k-state-focused.k-state-selected {
 .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);
+}
+
+/* Input with icon */
+.layout-template-modern {
+    background: var(--colorNeutral00, #ffffff);
+    color: var(--colorNeutral200, #131313);
+    border-radius: 0;
+    padding: 0;
+    border: 1px solid var(--textColor30, #858585);
+}
+
+.layout-template-modern:focus-within {
+    background: var(--colorNeutral00, #ffffff);
+    outline: 0;
+    border-color: var(--textColor30, #858585);
+}
+
+.layout-template-modern input.k-textbox:hover,
+.layout-template-modern input.k-textbox {
+    padding-left: 0;
+    box-shadow: none;
+}
+
+div[data-component^='crn-textinputicon'] .layout-template-modern .k-button,
+div[data-component^='crn-textinputicon'] .layout-template-modern .k-button:hover {
+    border: 0;
+    color: var(--colorDefault40, #3b448e);
 }

package/css/themes/custom/theme-general/button.css

@@ -1,3 +1,7 @@
+.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 {
     display: inline-block;
@@ -16,6 +20,12 @@
     -webkit-user-select: none;
     user-select: none;
     font-family: var(--fontFamily, Arial, sans-serif);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.btn:has(.glyphicon) {
+    text-overflow: unset;
 }
 
 .btn.disabled,