datatables.net-autofill-bs5/css/autoFill.bootstrap5.css

AutoFill for DataTables with styling for [Bootstrap5](https://getbootstrap.com/)

:root {
  --dtaf-handle_height: 10px;
  --dtaf-handle_width: 10px;
  --dtaf-handle_background: #3366ff;
  --dtaf-handle_background-focus: #ff8b33;
  --dtaf-handle_border: none;
  --dtaf-handle_z-index: 10;
  --dtaf-outline_background-color: #4989de;
  --dtaf-outline_background-image: repeating-linear-gradient(45deg,
  	transparent,
  	transparent 5px,
  	rgba(255,255,255,.2) 5px,
  	rgba(255,255,255,.2) 10px
  );
  --dtaf-list_background: var(--dt-html_background);
  --dtaf-list_box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  --dtaf-list_border: none;
  --dtaf-list_width: 500px;
  --dtaf-list_border-radius: 0.75em;
  --dtaf-list_padding-top-closeable: 2.5em;
  --dtaf-option_margin: 1em 0;
  --dtaf-option_padding: 1em;
  --dtaf-option_border-radius: 0.5em;
  --dtaf-option_color: inherit;
  --dtaf-option_border: 1px solid rgba(0, 0, 0, 0.175);
  --dtaf-option_background: #f6f6f6;
  --dtaf-option_background-hover: #ebebeb;
  --dtaf-close_background: transparent;
  --dtaf-close_border: none;
  --dtaf-background_background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  --dtaf-background_z-index: 103;
}

:root.dark {
  --dtaf-handle_background: rgb(110, 168, 254);
  --dtaf-outline_background-color: #4989de;
  --dtaf-outline_background-image: repeating-linear-gradient(45deg,
  	transparent,
  	transparent 5px,
  	rgba(0,0,0,.2) 5px,
  	rgba(0,0,0,.2) 10px
  );
  --dtaf-list_border: 1px solid rgba(255, 255, 255, 0.15);
  --dtaf-option_color: inherit;
  --dtaf-option_border: 1px solid rgba(255, 255, 255, 0.175);
  --dtaf-option_background: rgb(47, 52, 56);
  --dtaf-option_background-hover: rgb(64, 69, 73);
}

@media screen and (max-width: 767px) {
  :root {
    --dtaf-handle_height: 16px;
    --dtaf-handle_width: 16px;
  }
  div.dtaf-list {
    width: 90%;
  }
}
div.dtaf-handle {
  position: absolute;
  height: var(--dtaf-handle_height);
  width: var(--dtaf-handle_width);
  z-index: var(--dtaf-handle_z-index);
  box-sizing: border-box;
  background: var(--dtaf-handle_background);
  border: var(--dtaf-handle_border);
  cursor: pointer;
}

div.dtk-focus-alt div.dtaf-handle {
  background: var(--dtaf-handle_background-focus);
}

div.dtaf-select {
  position: absolute;
  z-index: 1001;
  background-color: var(--dtaf-outline_background-color);
  background-image: var(--dtaf-outline_background-image);
}
div.dtaf-select.top, div.dtaf-select.bottom {
  height: 3px;
  margin-top: -1px;
}
div.dtaf-select.left, div.dtaf-select.right {
  width: 3px;
  margin-left: -1px;
}

div.dtaf-container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dtaf-background_background);
  z-index: var(--dtaf-background_z-index);
  justify-content: center;
  align-items: center;
}

div.dtaf-list {
  position: relative;
  width: var(--dtaf-list_width);
  background: var(--dtaf-list_background);
  border: var(--dtaf-list_border);
  border-radius: var(--dtaf-list_border-radius);
  box-shadow: var(--dtaf-list_box-shadow);
  z-index: 104;
  box-sizing: border-box;
  padding: 2em;
}
div.dtaf-list.dtaf-list-closeable {
  padding-top: var(--dtaf-list_padding-top-closeable);
}
div.dtaf-list button.dtaf-list-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 12;
  background: var(--dtaf-close_background);
  border: var(--dtaf-close_border);
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  opacity: 0.7;
}
div.dtaf-list button.dtaf-list-close:hover {
  opacity: 1;
}
div.dtaf-list > div.dtaf-list-items > button {
  display: block;
  width: 100%;
  margin: var(--dtaf-option_margin);
  padding: var(--dtaf-option_padding);
  border-radius: var(--dtaf-option_border-radius);
  border: var(--dtaf-option_border);
  background-color: var(--dtaf-option_background);
  text-align: left;
  cursor: pointer;
  color: var(--dtaf-option_color);
}
div.dtaf-list > div.dtaf-list-items > button:hover {
  background-color: var(--dtaf-option_background-hover);
}
div.dtaf-list > div.dtaf-list-items > button:first-child {
  margin-top: 0;
}
div.dtaf-list > div.dtaf-list-items > button:last-child {
  margin-bottom: 0;
}
div.dtaf-list > div.dtaf-list-items > button input[type=number] {
  display: inline-block;
  box-sizing: border-box;
  padding: 6px;
  width: 70px;
  margin: -2px 0;
}
div.dtaf-list > div.dtaf-list-items > button span {
  float: right;
}

:root {
  --dtaf-handle_border: 1px solid #0d6efd;
  --dtaf-handle_background: #0d6efd;
  --dtaf-list_box-shadow: var(--bs-box-shadow);
  --dtaf-list_background: var(--bs-body-bg);
  --dtaf-list_border: var(--bs-border-width) solid var(--bs-border-color-translucent);
  --dtaf-list_border-radius: var(--bs-border-radius-lg);
  --dtaf-list_padding-top-closeable: 3.5em;
  --dtaf-outline_background-color: #0d6efd;
  --dtaf-background_background: rgba(0, 0, 0, 0.5);
  --dtaf-background_z-index: 1050;
}

div.dtaf-list div.dtaf-question input[type=number] {
  padding: 6px;
  width: 60px;
  margin: -2px 0;
}
div.dtaf-list .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: transparent;
}

div.row.dt-row > div.col-sm-12 {
  position: relative;
}