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

Javascript library for CronApp's projects

.modal .modal-content .list-group-item {
    border: 0;
    padding: 10px 0;
}

.modal .modal-content .list-group-item {
    border: 0;
    padding: 10px 0;
}

.modal .modal-content .k-textbox {
    width: 100%;
}

.modal .modal-content .list-group {
    display: contents;
}

#modalBodyConfirmDialog {
    text-align: center;
}

#modalBodyConfirmDialog .subtitle,
#modalBodyConfirmDialog .title {
    color: var(--textColor40, #393939);    
    white-space: pre-wrap
}

#modalBodyConfirmDialog .title {
    font-size: var(--textExtraBigSize, 18px);
    font-weight: bold;
    line-height: 1;
}

#modalBodyConfirmDialog .subtitle {
    margin: 10px 0px;
    font-size: var(--textNormalSize, 14px);
    font-weight: 300;
    line-height: 1.3;
}

.k-dialog .k-content {
    border-radius: 0px;
}

.k-window {
    background: var(--backgroundColor40, #f1f1f1);
    border-color: var(--backgroundColor50, #dfdfdf);
}

.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-normal {
    border-radius: 0;
    justify-content: center;
    border-color: var(--backgroundColor50, #dfdfdf);
}

.k-button.k-primary.k-state-hover, .k-button.k-primary:hover {
    border-color: var(--colorPrimary40, #ff6b58);
    color: var(--textColorPrimary40, #fff);
    background-color: var(--colorPrimary40, #ff6b58);
    background-image: linear-gradient(var(--colorPrimary10, rgba(255,146,88,.0)), var(--colorPrimary20, rgba(255,146,88,.2)));
  }
  
  .k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
      color: var(--colorPrimary40, #ff6b58);
  }
  
  .k-button.k-primary.k-state-active, .k-button.k-primary:active {
      border-color: var(--colorPrimary40, #ff6b58);
      color: var(--textColorPrimary40, #fff);
      background-color: var(--colorPrimary40, #ff6b58);
      background-image: linear-gradient(var(--colorPrimary10, rgba(255,138,88,.2)), var(--colorPrimary20, rgba(255,138,88,0)));
      box-shadow: inset 0 2px 2px 0 rgb(0 0 0 / 6%);
  }
  
  .k-dialog-button-layout-stretched .k-button.k-primary.k-state-focused, .k-dialog-button-layout-stretched .k-button.k-primary:focus {
      box-shadow: inset 0 0 0 2px var(--colorPrimary10, rgb(255 99 88 / 30%));
  }

  .k-dialog .k-dialog-titlebar .k-dialog-title {
    font-size: large;
  }

  .k-dialog .k-dialog-titlebar:before {
    content: "\e403";
    font-family: "WebComponentsIcons";
    margin-right: 5px;
    font-size: large;
  }

  .k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
  .k-dialog[data-dialog-type="error"] .k-dialog-title,
  .k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
    background-color: var(--colorDanger40, #ff6358);
    color: var(--textColorDanger40, #fff);
  }

  .k-dialog[data-dialog-type="success"] .k-dialog-titlebar,
  .k-dialog[data-dialog-type="success"] .k-dialog-title,
  .k-dialog[data-dialog-type="success"] .k-dialog-titlebar:before {
    background-color: var(--colorSuccess40, #ff6358);
    color: var(--textColorSuccess40, #fff);
  }

  .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
  .k-dialog[data-dialog-type="warning"] .k-dialog-title,
  .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
    background-color: var(--colorWarning40, #ff6358);
    color: var(--textColorWarning40, #fff);
  }

  .k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
  .k-dialog[data-dialog-type="info"] .k-dialog-title,
  .k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
    background-color: var(--colorPrimary40, #ff6358);
    color: var(--textColorPrimary40, #fff);
  }

  .k-window-titlebar {
    background-clip: padding-box;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 12px 16px;
    border-width: 0 0 1px;
    border-style: solid;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-align: center;
    align-items: center;
  }