cronapp-framework-js 2.9.4 → 2.9.5-SP.2

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

@@ -0,0 +1,431 @@
+.k-state-selected,
+.k-state-selected:link,
+.k-state-selected:visited,
+.k-tool.k-state-selected,
+.k-grid td.k-state-selected:hover,
+.k-grid tr.k-state-selected:hover td {
+    background: var(--backgroundColor40, #14202a);
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-grid-header th.k-header,
+.k-grid-header th.k-header .k-link,
+.k-grid-header th.k-header a,
+.k-grid-header th.k-header .k-icon,
+.k-grid-header th.k-header .k-tool-icon {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-filter-menu .k-button+.k-button,
+.k-button,
+.btn,
+.k-button.k-default,
+.btn.btn-default {
+    box-shadow: transparent;
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.k-button:hover {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    box-shadow: 0px 0px 3px #187AD4;
+}
+
+.k-grid-header .k-header {
+    background: var(--colorDefault40, #262c32);
+}
+
+.k-grid-toolbar:first-child,
+.k-grouping-header+.k-grid-toolbar {
+    background: var(--backgroundColor40, #090f13);
+}
+
+.k-grid-header th.k-header {
+    background: var(--colorDefault40, #262c32);
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-grid table {
+    border-spacing: 1px;
+}
+
+.k-slider .k-button {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    color: var(--textColorPrimary40, #f0f0f0);
+    border-radius: 5px;
+    transform: translate(-50%, -50%);
+    box-shadow: 0px;
+}
+
+.k-draghandle .k-state-focused:link {
+    height: initial;
+}
+
+.k-slider .k-button:hover {
+    background: var(--colorDefault60, #1c2025);
+}
+
+.k-grid .k-pager-numbers .k-state-selected {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    color: var(--textColor40, #f0f0f0);
+    border-radius: 5px;
+}
+
+.k-button.k-primary {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.k-button.k-primary:focus,
+.k-button.k-primary:hover {
+    background: var(--colorSuccess60, #22b920);
+}
+
+.k-widget.k-tooltip {
+    background: var(--colorStable30, #a7a7a7);
+}
+
+.k-widget {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-grid-header:first-child th.k-header:first-child {
+    border-radius: 10px;
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.k-grid-header th.k-header {
+    border-radius: 10px;
+}
+
+.k-state-selected,
+.k-state-selected:link,
+.k-state-selected:visited,
+.k-tool.k-state-selected,
+.k-grid td.k-state-selected:hover,
+.k-grid tr.k-state-selected:hover td {
+    background: var(--textColor40, #f0f0f0);
+    color: var(--backgroundColor40, #090f13);
+}
+
+.k-grid-header th.k-header,
+.k-grid-header th.k-header .k-link,
+.k-grid-header th.k-header a,
+.k-grid-header th.k-header .k-icon,
+.k-grid-header th.k-header .k-tool-icon {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.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);
+}
+
+.k-grid-header th.k-header {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 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%));
+}
+
+.k-grid tbody td>.k-grid-delete:hover {
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    box-shadow: 0px 0px 3px #DE3636;
+}
+
+.k-grid table {
+    border-spacing: 1px;
+}
+
+.k-slider-horizontal .k-slider-selection,
+.k-slider-horizontal .k-slider-track {
+    background: var(--backgroundColor30, #546270);
+    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;
+}
+
+.k-slider-horizontal .k-label {
+    color: var(--textColor40, #f0f0f0);
+    top: 18px;
+}
+
+.k-grid .k-pager-numbers .k-state-selected {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    color: var(--textColorPrimary40, #f0f0f0);
+    border-radius: 5px;
+    border: none;
+}
+
+.k-pager-wrap>.k-link>.k-icon {
+    color: var(--textColorDefault40, #f0f0f0);
+}
+
+.k-button.k-primary {
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 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;
+}
+
+.k-widget.k-tooltip {
+    background: var(--colorStable20, #c6c6c6);
+}
+
+.k-widget.k-tooltip.k-slider-tooltip {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+}
+
+.k-widget {
+    color: var(--textColor40, #f0f0f0);
+    border-bottom: none;
+}
+
+thead.k-grid-header th.k-header:last-child {
+    border-radius: 10px;
+}
+
+.btn.btn-link:focus,
+.btn.btn-link:hover {
+    text-decoration-color: var(--colorPrimary40, #197fdd);
+}
+
+.k-slider .k-draghandle,
+.k-slider .k-draghandle.k-state-focused,
+.k-slider .k-draghandle.k-state-focused:link {
+    height: 15px;
+    padding: 1px;
+    margin: 2px;
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    border-color: transparent;
+    border: none;
+}
+
+.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%));
+    color: var(--textColor40, #f0f0f0);
+    box-shadow: 0px 0px 3px #187AD4;
+}
+
+.k-slider .k-slider-selection {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    border-radius: 20px 0px 0px 20px;
+    top: 2px;
+    left: 2px;
+    height: 6px;
+}
+
+.k-slider .k-label {
+    position: relative;
+    display: block;
+    margin-top: 2px;
+}
+
+.k-grid tr td {
+    border-radius: 10px;
+    background: var(--textColor40, #f0f0f0);
+    color: var(--backgroundColor, #14202A);
+}
+
+.carousel-control .glyphicon-chevron-left,
+.carousel-control .glyphicon-chevron-right {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    color: var(--textColor40, #f0f0f0);
+    border-radius: 20px;
+    font-size: 20px;
+    padding: 4px;
+    margin-right: 1px;
+}
+
+.carousel-indicators li {
+    border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+}
+
+.carousel-indicators .active {
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+}
+
+.carousel .carousel-caption h1,
+.carousel .carousel-caption h2 {
+    color: var(--backgroundColor40, #090f13);
+}
+
+.carousel-indicators li {
+    border-color: var(--backgroundColor40, #090f13);
+}
+
+label {
+    margin-bottom: 15px;
+}
+
+.k-tick .k-tick-large {
+    line-height: 10px;
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-slider .k-button-decrease {
+    left: 30px;
+}
+
+.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%));
+    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;
+}
+
+.k-autocomplete.k-state-default .k-input {
+    border-radius: 20px;
+    box-shadow: none;
+    border: none;
+}
+
+.k-webkit .k-pager-numbers.k-state-expanded .k-current-page .k-link {
+    border-radius: 10px;
+}
+
+.k-pager-sizes .k-dropdown-wrap .k-input {
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 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;
+}
+
+.k-pager-wrap .k-pager-refresh {
+    background: transparent;
+}
+
+.k-pager-wrap .k-link.k-state-disabled:hover {
+    background: var(--colorDefault20, #b0b1b1);
+    border-radius: 30px;
+}
+
+.k-icon {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.layout-template-modern:focus-within {
+    border-bottom: none;
+}
+
+.layout-template-modern {
+    border-radius: 20px;
+    border-bottom: none;
+}
+
+.k-dropdown-wrap,
+.k-dropdown-wrap.k-state-default {
+    border-bottom: none;
+}
+
+.k-popup {
+    background: var(--backgroundColor, #14202A);
+}
+
+.k-popup .k-list .k-state-focused {
+    box-shadow: none;
+    background: var(--backgroundColor, #14202A);
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-list>.k-state-hover {
+    box-shadow: none;
+    background: var(--colorStable20, #e6e6e6);
+}
+
+.k-i-check:before,
+.k-i-cancel:before {
+    left: 1px;
+}
+
+.k-autocomplete.k-state-default {
+    border-bottom: none;
+}
+
+cron-grid .k-tooltip span:before {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.k-widget.k-tooltip-validation {
+    background: var(--colorStable20, #c6c6c6);
+}
+
+.k-webkit .k-pager-numbers .k-current-page .k-link:after {
+    content: none;
+}
+
+.layout-template-modern:focus-within {
+    background: none
+}
+
+.bootstrap-datetimepicker-widget table td span {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.bootstrap-datetimepicker-widget table td span:focus,
+.bootstrap-datetimepicker-widget table td span:hover {
+    color: var(--textColor70, #838383);
+}
+
+.table-bordered>thead>tr>th:focus .table-bordered>thead>tr>th:hover {
+    background: var(--backgroundColor30, #546270);
+}
+
+.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;
+}

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

@@ -0,0 +1,157 @@
+.navbar .navbar-brand img[src="node_modules/cronapp-framework-js/img/logo.png"] {
+    filter: brightness(0) invert(1);
+}
+
+.navbar {
+    background: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
+    border-bottom: none;
+    text-transform: uppercase;
+}
+
+.navbar-inverse {
+    background: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
+    border: none
+}
+
+.navbar-inverse .badge {
+    background: var(--backgroundColor30, #546270);
+    color: var(--textColor40, #f0f0f0);
+}
+
+.navbar-default #navbar .navbar-nav li a,
+.navbar-default #navbar2 .navbar-nav li a {
+    color: var(--textColor40, #f0f0f0);
+    font-size: var(--textNormalSize, 12px);
+    text-transform: uppercase;
+}
+
+.navbar-default #navbar .navbar-nav li a:hover,
+.navbar-default #navbar2 .navbar-nav li a:hover,
+.navbar-default #navbar .navbar-nav li .dropdown-menu li a:hover,
+.navbar-default #navbar2 .navbar-nav li .dropdown-menu li a:hover,
+.navbar-default .navbar-nav>.open>a,
+.navbar-default .navbar-nav>.open>a:focus,
+.navbar-default .navbar-nav>.open>a:hover {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorDefault40, #442b69);
+}
+
+.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;
+}
+
+.dropdown-menu {
+    color: var(--textColor40, #f0f0f0);
+    font-size: var(--textMediumSize, 16px);
+    background: var(--backgroundColor30, #7c7e81);
+    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);
+    margin: 0;
+}
+
+.navbar-default #navbar2 .navbar-nav .dropdown-menu {
+    margin-top: -1px;
+}
+
+/* Menu mobile */
+.navbar-default .navbar-toggle {
+    border-color: transparent;
+}
+
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+    border-color: transparent;
+}
+
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+    background: var(--backgroundColor30, #7c7e81);
+    border-color: transparent;
+}
+
+@media (max-width: 767px) {
+
+    .navbar-default #navbar .navbar-nav li .dropdown-menu a,
+    .navbar-default #navbar2 .navbar-nav li .dropdown-menu a,
+    #main-nav-bar .navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
+    #main-nav-bar .navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a {
+        color: var(--textColor40, #f0f0f0);
+    }
+
+    #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, #f0f0f0);
+    }
+
+    #main-nav-bar.crn-navigator-horizontal #navbar .navbar-nav,
+    #main-nav-bar .navbar-default .container-fluid #navbar {
+        margin-bottom: 0;
+    }
+
+    #main-nav-bar .navbar-default .container-fluid #navbar2 .navbar-nav {
+        margin-top: 0;
+    }
+
+    #main-nav-bar.crn-navigator-horizontal .navbar-default .container-fluid #navbar2 {
+        box-shadow: none;
+    }
+
+    #main-nav-bar.crn-navigator-vertical .navbar-default .container-fluid #navbar2 {
+        display: none;
+    }
+
+    .navbar-nav .open .dropdown-menu .dropdown-header,
+    .navbar-nav .open .dropdown-menu>li>a {
+        padding: calc(var(--menuItemPaddingSize) * 0.5) calc(var(--menuItemPaddingSize) * 1.5);
+    }
+
+}
+
+/* Dynamic Menu */
+
+.navbar-nav>li>a {
+    color: var(--textColor40, #f0f0f0);
+    border-radius: 5px;
+}
+
+.nav>li>a:focus,
+.nav>li>a:hover {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--backgroundColor30, #7c7e81);
+}
+
+.ctn-tab .nav-tabs li a {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.ctn-tab .nav-tabs li a:hover {
+    background: var(--backgroundColor30, #546270);
+    box-shadow: 0px 0px 3px #546270;
+    color: var(--textColor40, #f0f0f0);
+}
+
+.nav .open>a,
+.nav .open>a:focus,
+.nav .open>a:hover {
+    background: var(--backgroundColor30, #7c7e81);
+    border-color: transparent;
+    border-radius: 5px;
+}
+
+.dropdown-menu>li>a {
+    color: var(--textColor40, #f0f0f0);
+}
+
+.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;
+}

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

@@ -0,0 +1,114 @@
+.panel {
+    background: var(--backgroundColor40, #14202a);
+    box-shadow: none;
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+.panel-footer {
+    color: var(--backgroundColor40, #14202a);
+    background: var(--backgroundColor10, #CED0D2);
+    border: transparent;
+    border-radius: 10px;
+}
+
+.panel-body .lead {
+    margin-bottom: 0;
+    font-size: var(--textNormalSize, 10px);
+    border-radius: 10px;
+
+}
+
+.panel-body {
+    padding: 31px 15px;
+    border-radius: var(--borderRadiusSmallest, 2px);
+    margin: 1px 0;
+    border: transparent;
+    background: var(--textColor40, #f0f0f0);
+    border-radius: 10px;
+    color: var(--backgroundColor40, #14202a);
+}
+
+.panel-group .panel-heading.heading-arrow {
+    border-radius: 10px;
+}
+
+/* Default */
+.panel-default .panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Primary */
+.panel-primary>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Success */
+.panel-success>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Info */
+.panel-info>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Warning */
+.panel-warning>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Danger */
+.panel-danger>.panel-heading {
+    color: var(--textColorDanger40, #fffef9);
+    background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Light */
+.panel-light>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Stable */
+.panel-stable>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Royal */
+.panel-royal>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}
+
+/* Dark */
+.panel-dark>.panel-heading {
+    color: var(--textColor40, #f0f0f0);
+    background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
+    border-color: transparent;
+    border-radius: 10px;
+}

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

@@ -214,6 +214,7 @@ thead.k-grid-header th.k-header:last-child,
 .k-filter-menu-container .k-action-buttons button {
     box-shadow: none;
     background: transparent;
+    color: var(--textColor40, #393939);
 }
 
 .k-filter-menu-container .k-action-buttons button:focus,