cronapp-framework-js/css/themes/custom/theme-general/theme-general.css

Javascript library for CronApp's projects

@import 'button.css';
@import 'carousel.css';
@import 'forms.css';
@import 'login.css';
@import 'menu-vertical-retratil.css';
@import 'menu.css';
@import 'modal.css';
@import 'notification.css';
@import 'scheduler.css';
@import 'slider.css';
@import 'table-grid.css';
@import 'tabs.css';
@import 'treeview.css';

/* ==== GENERAL ==== */
*,
*:hover,
*:focus,
*:active {
    outline: 0;
}

body {
    background: var(--backgroundColor40, #f1f1f1);
    font-family: var(--fontFamily, Arial, sans-serif);
    font-size: var(--textNormalSize, 14px);
    line-height: 1.42857143;
    color: var(--textColor40, #393939);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
}

h1,
.h1 {
    font-size: var(--textFullSize, 36px);
}

h2,
.h2 {
    font-size: var(--textExtraBigSize, 30px);
}

h3,
.h3 {
    font-size: var(--textBigSize, 24px);
}

h4,
.h4 {
    font-size: var(--textMediumSize, 18px);
}

h5,
.h5 {
    font-size: var(--textNormalSize, 14px);
}

h6,
.h6 {
    font-size: var(--textSmallSize, 12px);
}

p,
label,
a,
input {
    font-size: var(--textNormalSize, 14px);
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    padding-right: initial;
    padding-left: initial;
}

/* checkbox */
.k-checkbox-label:before {
    border-radius: var(--borderRadiusSmallest, 2px);
    width: var(--textMediumSize, 16px);
    height: var(--textMediumSize, 16px);
    line-height: var(--textMediumSize, 16px);
    font-size: var(--textNormalSize, 14px);
}

.k-checkbox:checked+.k-checkbox-label:before {
    content: "\f00c";
    font-family: "FontAwesome";
}

.k-checkbox-label {
    line-height: var(--textMediumSize, 18px);
    padding-left: calc(var(--textMediumSize, 18px) * 1.75);
    color: var(--textColor40, #393939);
}

/* radio */
.k-radio:checked+.k-radio-label:after {
    width: calc(var(--textMediumSize, 16px) - 4px);
    height: calc(var(--textMediumSize, 16px) - 4px);
    border-radius: var(--borderRadiusFull, 99999px);
}

.k-radio-label:before {
    width: var(--textMediumSize, 16px);
    height: var(--textMediumSize, 16px);
    line-height: var(--textMediumSize, 16px);
    background: transparent;
    border-radius: var(--borderRadiusFull, 99999px);
    border: 1px solid;
}

.k-radio-label {
    line-height: var(--textMediumSize, 16px);
    padding-left: calc(var(--textMediumSize, 16px) * 2);
    color: var(--textColor40, #393939);
    margin-bottom: 5px;
}

a,
a:focus,
a:active {
    color: var(--colorDefault40, #3b448e);
    text-decoration: none;
    outline: 0;
    font-size: var(--textNormalSize, 14px);
}

a:focus {
    outline: none;
}

a:hover {
    color: var(--colorDefault30, #8689af);
}

.k-block,
.k-content {
    background: transparent;
}

/* button */
div[data-component="crn-textinputbutton"] div[data-component="crn-button"] {
    margin-bottom: 0px;
}

.btn.btn-fab,
.btn-fab {
    border-radius: 50%;
    font-size: var(--textNormalSize, 14px);
    height: calc(var(--textNormalSize, 14px) * 3);
    margin: initial;
    min-width: calc(var(--textNormalSize, 14px) * 3);
    width: calc(var(--textNormalSize, 14px) * 3);
    padding: 0;
    position: relative;
}

.k-button.btn-fab i {
    font-size: var(--textNormalSize, 14px);
}

/* ==== TEXT ==== */
.text-default {
    color: var(--colorDefault40, #3b448e);
}

.text-primary {
    color: var(--colorPrimary40, #5665be);
}

.text-secondary {
    color: var(--colorPrimary50, #37479e);
}

.text-success {
    color: var(--colorSuccess40, #257d25);
}

.text-warning {
    color: var(--colorWarning40, #f0ad4e);
}

.text-danger {
    color: var(--colorDanger40, #ce3a36);
}

.text-info {
    color: var(--colorCalm40, #3b448e);
}

.text-light {
    color: var(--colorLight40, #ffffff);
}

.text-dark {
    color: var(--colorDark40, #444444);
}

.text-muted {
    color: #666;
}

.text-white {
    color: #fff;
}

.lead {
    font-size: var(--textBigSize, 18px);
}

.k-state-focused {
    box-shadow: 0 0 7px 0 var(--textColor60, #2a2a2a);
}

.k-grouping-row .k-state-focused,
.k-state-focused {
    border-color: var(--textColor60, #2a2a2a);
}

/* ==== PAGE LOADING BAR ====*/
.pace div.pace-progress {
    background: var(--colorPrimary40, #5665be);
}

/* ==== ADMIN PAGES ====*/
#starter div[id^="crn-form"] input {
    width: 100%;
}

/* ==== COMPONENTS ==== */

/* Drag File Upload */
.dynamic-image-container {
    border-style: dashed;
    border: 1px dashed var(--colorDefault40, #3b448e);
    border-radius: var(--borderRadiusSmallest, 5px);
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.dynamic-image-container .btn.remove-image-button {
    position: absolute;
    top: 24px;
    right: 4px;
    width: 40px;
    height: 40px;
    background: var(--colorDanger40, #ce3a36);
    color: var(--textColorDanger40, #ffffff);
}

.dynamic-image-container .btn.remove-image-button:hover {
    background: var(--colorDanger60, #541616FF);
    color: var(--textColorDanger40, #ffffff);
}

.dynamic-image-container .btn {
    margin: 8px;
    padding: 3px 12px;
    background: var(--colorDefault40, #3b448e);
    outline: none;
    color: var(--textColorDefault40, #ffffff);
    align-self: center;
}

.dynamic-image-container .btn:hover {
    background: var(--colorDefault50, #343c7c);
    color: var(--textColorDefault40, #ffffff);
}

.dynamic-input-upload {
    border-style: dashed;
    border: 1px dashed var(--colorDefault40, #3b448e);
    border-radius: var(--borderRadiusSmallest, 5px);
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.dynamic-input-upload .btn {
    margin: 8px;
    padding: 3px 12px;
    outline: none;
}

.dynamic-input-upload .btn-container {
    display: flex;
}
.dynamic-input-upload .cancel-btn {
    padding: 0 5px;
    cursor: pointer;
}
.dynamic-input-upload .hidden {
    display: none;
}

/* Rating */
*[id^="crn-rating"] .fa {
    cursor: pointer;
}

/* Charts */
div[id^="crn-chart"] {
    float: none;
    padding: 0;
}

.chartjs-render-monitor {
    padding: 0;
    float: none;
}

/* Signatura Pad */
div[id^="crn-signature-pad"] canvas {
    background: var(--colorNeutral00, #FFFFFF);
    border-radius: var(--borderRadiusSmallest, 5px);
    border: 1px solid var(--colorNeutral40, #C7C7C7);
}

/* Rich Text Editor */
.mce-tinymce.mce-panel {
    overflow: hidden;
    padding: 0;
    background: var(--colorNeutral10, #F1F1F1);
}

.mce-tinymce.mce-panel .mce-menubar {
    border-bottom-color: var(--colorNeutral40, #C7C7C7);
}

.mce-tinymce.mce-panel .mce-menubar .mce-btn-group:not(:first-child) {
    border-left-color: var(--colorNeutral40, #C7C7C7);
}

.mce-tinymce.mce-panel .mce-menubar .mce-btn button,
.mce-tinymce.mce-panel .mce-toolbar .mce-btn button,
.mce-tinymce.mce-panel .mce-toolbar .mce-btn button span,
.mce-tinymce.mce-panel .mce-toolbar .mce-btn button i {
    color: var(--colorNeutral160, #383838);
}

.mce-tinymce.mce-panel .mce-toolbar-grp.mce-panel,
.mce-tinymce.mce-panel .mce-statusbar.mce-panel {
    background: var(--colorNeutral10, #F1F1F1);
}

.mce-tinymce.mce-panel .mce-toolbar .mce-btn button i {
    color: var(--colorNeutral160, #383838);
}

/* Date and hour */
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td.day {
    height: calc(var(--textNormalSize, 14px) * 1.7);
    line-height: var(--textNormalSize, 14px);
    width: var(--textNormalSize, 14px);
    font-size: var(--textNormalSize, 14px);
}

.bootstrap-datetimepicker-widget table td span {
    height: calc(var(--textNormalSize, 14px) * 2.1);
    line-height: calc(var(--textNormalSize, 14px) * 2.1);
    width: calc(var(--textNormalSize, 14px) * 5);
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: calc(var(--textNormalSize, 14px) * 2.1);
}

.k-calendar .k-link.k-nav-fast,
.k-calendar .k-header .k-link.k-nav-next,
.k-calendar .k-header .k-link.k-nav-prev {
    color: var(--textColorDefault40, #ffffff);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--colorDefault40, #3b448e);
    color: var(--textColorDefault40, #ffffff);
    font-family: var(--fontFamily, Arial, sans-serif);
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: var(--colorDefault40, #3b448e);
    border: 0;
    background: transparent;
    font-family: var(--fontFamily, Arial, sans-serif);
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 20px;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: var(--textColor40, #393939);
    opacity: 0.5;
}

/* seta do modal do calendario */
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #cccccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    top: -7px;
    left: 7px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--colorDefault40, #3b448e);
    top: -6px;
    left: 8px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #cccccc;
    border-top-color: rgba(0, 0, 0, 0.2);
    bottom: -7px;
    left: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--colorDefault40, #3b448e);
    bottom: -6px;
    left: 7px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
    left: auto;
    right: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
    left: auto;
    right: 7px;
}

.k-dropzone .k-upload-status,
.k-dropzone em,
.k-other-month,
.k-other-month .k-link,
.k-slider .k-draghandle,
.k-state-disabled,
.k-state-disabled .k-link,
.k-tile-empty strong,
.k-other-month.k-state-hover .k-link,
.k-state-hover>.k-link,
div.k-filebrowser-dropzone em {
    color: var(--textColor30, #393939);
}

/* componente */
.k-dropdown-wrap.k-state-active.k-state-border-down,
.k-numeric-wrap .k-link.k-state-selected,
.k-pager-numbers.k-state-expanded .k-current-page .k-link,
.k-picker-wrap.k-state-active.k-state-border-down {
    box-shadow: none;
}

.cardinput {
    border-color: var(--textColor30, #858585);
}

.cardinput .k-textbox.form-control {
    box-shadow: none;
    font-family: var(--fontFamily, Arial, sans-serif);
    min-height: auto;
    padding: 0;
}

/* Breadcrumbs */
#cron-breadcrumbs {
    border: 0;
    background: var(--colorLight50, #dfdfdf);
    display: block;
    padding: 8px 15px;
    border-radius: var(--borderRadiusSmallest, 5px);
    box-shadow: none;
}

#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-root-link,
#cron-breadcrumbs .k-breadcrumb-item::marker,
#cron-breadcrumbs .k-breadcrumb-item,
#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-link {
    color: var(--colorPrimary40, #5665be);
    font-family: var(--fontFamily, Arial, sans-serif);
}

#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-root-link:hover,
#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-link:hover {
    color: var(--colorPrimary60, #2e3b85);
}

#cron-breadcrumbs .k-breadcrumb-item.k-breadcrumb-last-item::marker,
#cron-breadcrumbs .k-breadcrumb-item.k-breadcrumb-last-item,
#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-link.k-state-disabled {
    color: var(--textColor30, #858585);
    opacity: 1;
    text-decoration: none;
}

#cron-breadcrumbs .k-breadcrumb-item .k-breadcrumb-root-link:last-child {
    color: var(--textColor30, #858585);
}

#cron-breadcrumbs .k-breadcrumb-container {
    display: flex;
    gap: 19px;
    margin-left: 14px;
    margin-bottom: 0;
}

#cron-breadcrumbs .k-breadcrumb-container .k-breadcrumb-delimiter-icon {
    margin: 0 7px;
    margin-top: -5px;
}

.k-popup.k-list-container .k-virtual-content {
    height: auto !important;
    max-height: 185px;
}

input[exibir-icone="true"]::-webkit-calendar-picker-indicator {
  display: block !important;
}

input[exibir-icone="false"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

.input-icon-wrapper {
    position: absolute;
    right: 6.5rem;
    pointer-events: auto;
    margin-top: -2.5rem;    
    overflow: hidden;
}

.dark-placeholder::placeholder {
  color: #000;
  opacity: 1;
}

.dark-placeholder:-ms-input-placeholder {
  color: #000; /* Suporte para IE */
}

.dark-placeholder::-ms-input-placeholder {
  color: #000; /* Suporte para Edge */
}

.nav-wizard a {
    text-decoration: none;
    color: inherit;
}

.nav-wizard a:hover,
.nav-wizard a:focus {
    text-decoration: none;
}

.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    color: #dc3545;
    margin-top: 0.25rem;
    font-size: 0.875em;
}

.btn-disabled-wizard {
  color: #a1a1a1 !important;
  border-color: #ccc !important;
  background-color: #fff !important;
  background-image: none !important;
  pointer-events: none;
  cursor: not-allowed;
}

/* step ativo */
.ctn-wizard .nav-wizard>li.step-active .step-circle {
  background-color: var(--colorDefault40, #3b448e);
  color: var(--textColorDefault40, #ffffff);
  border: 2px solid var(--colorDefault40, #3b448e);
}

.ctn-wizard .nav-wizard>li.step-active .step-title {
  font-weight: bold;
  color: var(--colorDefault40, #3b448e);
}

.ctn-wizard .nav-wizard>li.step-completed .step-circle {
  background-color: var(--colorDefault40, #3b448e);
  color: var(--textColorDefault40, #ffffff);
  border: 2px solid var(--colorDefault40, #3b448e);
}

.ctn-wizard .nav-wizard>li.step-invalid .step-circle {
  background-color: var(--textColorDefault40, #ffffff);
  color: var(--colorDanger40, #dc3545);
  border: 2px solid var(--colorDanger40, #dc3545);
}

.ctn-wizard .nav-wizard>li:not(.step-completed):not(.step-invalid):not(.step-active) .step-circle {
  background-color: var(--textColorDefault40, #ffffff);
  color: var(--colorDefault40, #3b448e);
  border: 2px solid var(--colorDefault40, #3b448e);
}

.ctn-wizard .step-circle {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

input[exibir-icone="true"]::-webkit-calendar-picker-indicator {
  display: block !important;
}

input[exibir-icone="false"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

.input-icon-wrapper {
    position: absolute;
    right: 6.5rem;
    pointer-events: auto;
    margin-top: -2.5rem;    
    overflow: hidden;
}

.dark-placeholder::placeholder {
  color: #000;
  opacity: 1;
}

.dark-placeholder:-ms-input-placeholder {
  color: #000; /* Suporte para IE */
}

.dark-placeholder::-ms-input-placeholder {
  color: #000; /* Suporte para Edge */
}