cronapp-framework-js/css/themes/custom/cerulean/button-cerulean.css

Javascript library for CronApp's projects

.btn,
.k-button {
    background: var(--colorDefault40, #f5f5f5);
    text-align: center;
    color: var(--textColorDefault40, #444444);
    border: 1px solid;
}

.btn:focus:hover,
.k-button:focus:hover {
    box-shadow: none;
}

/* Default */
.btn,
.k-button,
.btn.btn-default {
    background: linear-gradient(var(--colorDefault10, #fcfcfc), var(--colorDefault10, #fcfcfc) 60%, var(--colorDefault40, #f5f5f5));
    border-color: var(--colorDefault50, #d7d7d7);
    color: var(--textColorDefault40, #444444);
}

.k-button:focus,
.btn:focus,
.k-button:hover,
.btn:hover,
.btn.btn-default:focus,
.btn.btn-default:hover {
    color: var(--textColorDefault40, #444444);
    background: linear-gradient(var(--colorDefault30, #f7f7f7), var(--colorDefault50, #d7d7d7) 60%, var(--colorDefault60, #b3b3b3));
    border-color: var(--colorDefault50, #d7d7d7);
}

.k-button.active,
.btn.active,
.k-button:active,
.btn:active,
.btn.btn-default.active,
.btn.btn-default:active {
    color: var(--textColorDefault40, #444444);
    box-shadow: none;
    background: var(--colorDefault50, #d7d7d7);
    border-color: var(--colorDefault50, #d7d7d7);
}

/* Primary */
.k-scheduler-edit-form .k-edit-field .k-button,
.k-edit-form-container .k-edit-buttons .k-primary,
.k-dialog-buttongroup .k-button.k-primary,
.k-button.k-primary,
.btn.btn-primary {
    background: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7) 60%, var(--colorPrimary50, #3c6088));
    border-color: var(--colorPrimary40, #2fa4e7);
    color: var(--textColorPrimary40, #ffffff);
}

.k-scheduler-edit-form .k-edit-field .k-button:focus,
.k-edit-form-container .k-edit-buttons .k-primary:focus,
.k-scheduler-edit-form .k-edit-field .k-button:hover,
.k-edit-form-container .k-edit-buttons .k-primary:hover,
.k-dialog-buttongroup .k-button.k-primary:focus,
.k-dialog-buttongroup .k-button.k-primary:hover,
.k-button.k-primary:focus,
.k-button.k-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
    color: var(--textColorPrimary40, #ffffff);
    background: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary50, #2990ca) 60%, var(--colorPrimary60, #2278a9));
    border-color: var(--colorPrimary40, #2fa4e7);
}

.k-scheduler-edit-form .k-edit-field .k-button:active,
.k-edit-form-container .k-edit-buttons .k-primary:active,
.k-scheduler-edit-form .k-edit-field .k-button.active,
.k-edit-form-container .k-edit-buttons .k-primary.active,
.k-dialog-buttongroup .k-button.k-primary.active,
.k-dialog-buttongroup .k-button.k-primary:active,
.k-button.k-primary.active,
.k-button.k-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active {
    color: var(--textColorPrimary40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorPrimary60, #2278a9);
    border-color: var(--colorPrimary70, #1a5a7f);
}

/* Success */
.k-button.k-success,
.btn.btn-success {
    background: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess40, #73a839) 60%, var(--colorSuccess50, #359e1d));
    border-color: var(--colorSuccess40, #73a839);
    color: var(--textColorSuccess40, #ffffff);
}

.k-button.k-success:focus,
.k-button.k-success:hover,
.btn.btn-success:focus,
.btn.btn-success:hover {
    color: var(--textColorSuccess40, #ffffff);
    background: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess50, #659332) 60%, var(--colorSuccess60, #547b2a));
    border-color: var(--colorSuccess40, #73a839);
}

.k-button.k-success.active,
.k-button.k-success:active,
.btn.btn-success.active,
.btn.btn-success:active {
    color: var(--textColorSuccess40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorSuccess60, #547b2a);
    border-color: var(--colorSuccess70, #216312);
}

/* Warning */
.k-button.k-warning,
.btn.btn-warning {
    background: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600) 60%, var(--colorWarning50, #c24b00));
    border-color: var(--colorWarning40, #dd5600);
    color: var(--textColorWarning40, #ffffff);
}

.k-button.k-warning:focus,
.k-button.k-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:hover {
    color: var(--textColorWarning40, #ffffff);
    background: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning50, #c24b00) 60%, var(--colorWarning60, #a23f00));
    border-color: var(--colorWarning40, #dd5600);
}

.k-button.k-warning.active,
.k-button.k-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:active {
    color: var(--textColorWarning40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorWarning60, #a23f00);
    border-color: var(--colorWarning70, #792f00);
}

/* Danger */
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
.k-button.k-danger,
.btn.btn-danger {
    background: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #c71c22) 60%, var(--colorDanger50, #ae191e));
    border-color: var(--colorDanger40, #c71c22);
    color: var(--textColorDanger40, #ffffff);
}

.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
.k-button.k-danger:focus,
.k-button.k-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:hover {
    color: var(--textColorDanger40, #ffffff);
    background: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger50, #ae191e) 60%, var(--colorDanger60, #921519));
    border-color: var(--colorDanger40, #c71c22);
}

.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone.active,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel.active,
.k-button.k-danger.active,
.k-button.k-danger:active,
.btn.btn-danger.active,
.btn.btn-danger:active {
    color: var(--textColorDanger40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorDanger60, #921519);
    border-color: var(--colorDanger70, #6d0f13);
}

/* Info */
.k-button.k-info,
.btn.btn-info {
    background: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73) 60%, var(--colorCalm50, #033565));
    border-color: var(--colorCalm40, #033c73);
    color: var(--textColorCalm40, #ffffff);
}

.k-button.k-info:focus,
.k-button.k-info:hover,
.btn.btn-info:focus,
.btn.btn-info:hover {
    color: var(--textColorCalm40, #ffffff);
    background: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm50, #033565) 60%, var(--colorCalm60, #022c54));
    border-color: var(--colorCalm40, #033c73);
}

.k-button.k-info.active,
.k-button.k-info:active,
.btn.btn-info.active,
.btn.btn-info:active {
    color: var(--textColorCalm40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorCalm60, #022c54);
    border-color: var(--colorCalm70, #02213f);
}

/* Light */
.btn.btn-light {
    background: var(--colorLight40, #ffffff);
    border-color: var(--colorLight40, #ffffff);
    color: var(--textColorLight40, #444444);
}

.btn.btn-light:focus,
.btn.btn-light:hover {
    color: var(--textColorLight40, #444444);
    background: var(--colorLight50, #dfdfdf);
    border-color: var(--colorLight70, #ffffff);
}

.btn.btn-light.active,
.btn.btn-light:active {
    color: var(--textColorLight40, #444444);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorLight60, #bbbbbb);
    border-color: var(--colorLight70, #8c8c8c);
}

/* Link */
.btn.btn-link {
    background: transparent;
    border: none;
}

.btn.btn-link i,
.btn.btn-link span {
    color: var(--colorPrimary40, #2fa4e7);
}

.btn.btn-link.active,
.btn.btn-link:active {
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
}

.btn.btn-link:focus,
.btn.btn-link:hover {
    color: var(--colorPrimary40, #2fa4e7);
    text-decoration: underline;
    background: transparent;
}

.btn.btn-link:focus i,
.btn.btn-link:hover i {
    text-decoration: none;
}

/* Stable */
.k-button.k-stable,
.btn.btn-stable {
    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
    border-color: var(--colorStable40, #f8f8f8);
    color: var(--textColorStable40, #444444);
}

.k-button.k-stable:focus,
.k-button.k-stable:hover,
.btn.btn-stable:focus,
.btn.btn-stable:hover {
    color: var(--textColorStable40, #444444);
    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable50, #d9d9d9) 60%, var(--colorStable60, #b6b6b6));
    border-color: var(--colorStable40, #f8f8f8);
}

.k-button.k-stable.active,
.k-button.k-stable:active,
.btn.btn-stable.active,
.btn.btn-stable:active {
    color: var(--textColorStable40, #444444);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorStable60, #b6b6b6);
    border-color: var(--colorStable70, #888888);
}

/* Royal */
.k-button.k-royal,
.btn.btn-royal {
    background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
    border-color: var(--colorRoyal40, #886aea);
    color: var(--textColorRoyal40, #ffffff);
}

.k-button.k-royal:focus,
.k-button.k-royal:hover,
.btn.btn-royal:focus,
.btn.btn-royal:hover {
    color: var(--textColorRoyal40, #ffffff);
    background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal50, #775dcd) 60%, var(--colorRoyal60, #644eab));
    border-color: var(--colorRoyal40, #886aea);
}

.k-button.k-royal.active,
.k-button.k-royal:active,
.btn.btn-royal.active,
.btn.btn-royal:active {
    color: var(--textColorRoyal40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorRoyal60, #644eab);
    border-color: var(--colorRoyal70, #4a3a80);
}

/* Dark */
.k-button.k-dark,
.btn.btn-dark {
    background: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444) 60%, var(--colorDark50, #3c3c3c));
    border-color: var(--colorDark40, #444444);
    color: var(--textColorDark40, #ffffff);
}

.k-button.k-dark:focus,
.k-button.k-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:hover {
    color: var(--textColorDark40, #ffffff);
    background: linear-gradient(var(--colorDark30, #898989), var(--colorDark50, #3c3c3c) 60%, var(--colorDark60, #323232));
    border-color: var(--colorDark40, #444444);
}

.k-button.k-dark.active,
.k-button.k-dark:active,
.btn.btn-dark.active,
.btn.btn-dark:active {
    color: var(--textColorDark40, #ffffff);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
    background: var(--colorDark60, #323232);
    border-color: var(--colorDark70, #252525);
}