jspanel4/es6module/extensions/dialog/jspanel.dialog.css

A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu

/**
 * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
 * @version v4.16.1
 * @homepage https://jspanel.de/
 * @license MIT
 * @author Stefan Sträßer - info@jspanel.de
 * @author of dialog extension: Michael Daumling - michael@terrapinlogo.com
 * @github https://github.com/Flyer53/jsPanel4.git
 */
/* Dialog adaptation: a simple white box */
.jsPanel-dialog {
  min-width: 400px;
  margin-top: 50px;
  max-height: calc(90vh - 50px);
}
.jsPanel-dialog .jsPanel-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Add some padding to the dialog content */ 
  padding: 1rem;
}
.jsPanel-dialog .buttonbar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
  width: 100%;
  display: flex;
  justify-content: right;
}
.jsPanel-dialog .buttonbar button {
  margin-left: 0.5rem;
}

/* Modals in the background are partly transparent */
.jsPanel-modal.background {
  opacity: 0.3 !important;
}

/* Dialog sizes */
.dialog-sm, .dialog-md, .dialog-lg, .dialog-xl {
  max-height: calc(90vh - 50px);
  overflow: hidden auto;
  margin: 0 auto;
}

.dialog-sm {
  width: 400px !important;
}

.dialog-md {
  width: 600px !important;
}

.dialog-lg {
  width: 800px !important;
}

.dialog-xl {
  width: 1000px !important;
}

@media (max-width: 767px) {
  .dialog-md, .dialog-lg, .dialog-xl {
    width: 90vw !important;
  }
}
@media (max-width: 991px) {
  .dialog-lg, .dialog-xl {
    width: 90vw !important;
  }
}
@media (max-width: 1199px) {
  .dialog-xl {
    width: 90vw !important;
  }
}
/* A few button colors */
button.blue, button.info {
  color: #fff !important;
  background-color: #039be5 !important;
  border-color: #039be5 !important;
}

button.gray, button.default, button.secondary {
  color: #fff;
  background-color: #b0bec5 !important;
  border-color: #b0bec5 !important;
}

button.white {
  color: #333 !important;
  background-color: #fff !important;
}

button.primary {
  color: #fff !important;
  background-color: #01579b !important;
  border-color: #01579b !important;
}

button.yellow, button.warning {
  color: #000 !important;
  background-color: #f57f17 !important;
  border-color: #f57f17 !important;
}

button.red, button.danger {
  color: #fff !important;
  background-color: #dd2c00 !important;
  border-color: #dd2c00 !important;
}

button.green, button.success {
  color: #fff !important;
  background-color: #2e7d32 !important;
  border-color: #2e7d32 !important;
}

input:disabled, input[readonly] {
  cursor: not-allowed !important;
  background-color: #eee !important;
}

/* Radio buttons and checkboxes, followed by a span */
input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  margin: 0 0.5rem 0 0;
}

input[type=radio] {
  margin-bottom: 2px;
}

input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

/*# sourceMappingURL=jspanel.dialog.css.map */