cronapp-framework-js/css/themes/custom/krypton/grid-krypton.css

Javascript library for CronApp's projects

.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-grid-header:first-child th.k-header:first-child, .k-rtl thead.k-grid-header th.k-header:last-child, thead.k-grid-header th.k-header:first-child {
    border-radius: 10px;
}

.k-filter-menu .k-button+.k-button,
.btn,
.k-button.k-default,
.btn.btn-default {
    box-shadow: transparent;
    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
}

.k-button.k-default:hover {
    background: var(linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%));
    box-shadow: 0px 0px 3px 0px #3a4753;
}

.k-button:active {
    background: var(--colorDefault50, #252e36);
}

.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: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 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: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
    color: var(--textColor40, #f0f0f0);
    border-radius: 5px;
}

.k-button.k-primary {
    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 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: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 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: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
}

.k-grid-header th.k-header {
    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: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
}

.k-grid tbody td>.k-grid-delete:hover {
    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(--textColor40, #f0f0f0);
    height: 10px;
    margin-top: 0px;
    top: 0%;
    border-radius: 20px;
}

.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: 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(--colorPrimary60, #125da2);
}

.k-button.k-primary {
    background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
}

.k-button.k-primary:focus,
.k-button.k-primary:hover {
    background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
    box-shadow: 0px 0px 3px #2ffc2b;
}

.k-widget.k-tooltip {
    background: var(--colorStable20, #c6c6c6);
}

.k-widget.k-tooltip.k-slider-tooltip {
    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*/

/*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 {
    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: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 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: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
    color: var(--textColor40, #f0f0f0);
    box-shadow: 0px 0px 3px #187ad4;
}

.k-slider .k-slider-selection {
    background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 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, #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: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
    color: var(--textColor40, #f0f0f0);
    border-radius: 20px;
    font-size: 20px;
    padding: 4px;
    margin-right: 1px;
}

.carousel-indicators li {
    border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
}

.carousel-indicators .active {
    background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 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);
    border-radius: 0px;
}

input#cron-crn-enterprise-combobox-773856.k-input.cronSelect {
    border-radius: 0px;
    box-shadow: 0px;
}

.k-webkit .k-pager-numbers .k-current-page .k-link {
    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: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 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: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
    color: var(--texColorPrimary40, #f0f0f0);
    border-color: transparent;
    border-radius: 10px;
    text-indent: initial;
    margin-left: -3px;
    width: auto;
    text-align: center;
}

.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-dropdown-wrap.k-state-default.k-state-hover {
    background: var(--backgroundColor10, #f0f0f0);
}

.k-popup {
    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 {
    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 {
    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;
    border-radius: 20px;
}

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-state-defaul:focus,
.k-dropdown-wrap.k-state-defaul:hover,
.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;
}