CommunityScripts/themes/Theme-Minimal/inputs.css

/* custom */
.btn-secondary {
  background-color: unset;
  border: 0;
  color: var(--primary-12);

  &:disabled {
    background-color: unset;
    border: 0;
    color: var(--primary-11);
  }

  &:hover {
    background-color: var(--primary-4);
  }

  &:focus,
  &:active,
  &:active,
  &.active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    background-color: var(--primary-4);
  }
}

.btn-primary {
  background-color: var(--primary-6);
  border: 0;
  color: var(--primary-12);

  &:hover {
    background-color: var(--primary-7);
  }

  &:disabled {
    color: var(--primary-11);
    background-color: unset;
  }
}

.btn-danger {
  background-color: var(--danger-6);
  border: 0;
  color: var(--danger-12);

  &:hover {
    background-color: var(--danger-7);
  }

  &:disabled {
    color: var(--danger-11);
    background-color: unset;
  }
}

/* copied */
.input-control,
.input-control:focus,
.input-control:disabled {
  background-color: var(--primary-2);
}

.text-input,
.text-input:focus,
.text-input[readonly],
.text-input:disabled {
  background-color: var(--primary-2);
}

div.react-select__control {
  background-color: var(--primary-2);
  border: none;
}

div.react-select__menu,
div.dropdown-menu {
  background-color: var(--primary-2) !important;
  color: var(--primary-12) !important;
  border-radius: 12px;
  padding: 6px 0 !important;

  .react-select__option,
  .dropdown-item {
    padding: 12px 16px;
    background-color: unset !important;
    &:not(:first-child) {
      margin-top: 8px;
    }

    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }

  .react-select__option--is-focused,
  .dropdown-item:focus,
  .dropdown-item:hover {
    background-color: var(--primary-4) !important;
  }
}

.react-select-image-option {
  align-items: baseline;
  display: flex;
}

button.btn.favorite-button {
  opacity: 1;
  transition: opacity 0.5s;

  &.not-favorite {
    color: rgba(191, 204, 214, 0.5);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));

    &.hide-not-favorite {
      opacity: 0;
    }
  }

  &.favorite {
    color: #ff7373;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  }

  &:hover,
  &:active,
  &:focus,
  &:active:focus {
    background: none;
    box-shadow: none;
  }
}

.count-button {
  border-radius: 5px;

  &:hover {
    background: rgba(138, 155, 168, 0.15);
    color: #f5f8fa;
  }

  .count-icon {
    padding-left: 0.5rem;
    padding-right: 0.25rem;
  }

  .count-value {
    padding-left: 0.25rem;
    padding-right: 0.5rem;
  }

  button.count-icon,
  &.increment-only button.count-value {
    &:hover {
      background: none;
      color: #f5f8fa;
    }
  }

  button.btn-secondary.count-icon,
  button.btn-secondary.count-value {
    &:focus {
      border: none;
      box-shadow: none;
      color: #f5f8fa;

      &:not(:hover) {
        background: none;
      }
    }
  }
}

.external-links-button {
  display: inline-block;
}

.scraper-menu .dropdown-menu {
  min-width: 250px;
  padding-top: 0;

  .dropdown-divider {
    border-top-color: var(--primary-6);
    margin: 0;
  }

  .scraper-filter-container {
    background-color: var(--primary-7);
    border-bottom: solid 1px var(--primary-6);
    padding: 5px;
    position: sticky;
    top: 0;
    z-index: 1;

    .btn-group {
      border: solid 1px var(--primary-6);
      border-radius: 5px;
      width: 100%;
    }

    .clearable-text-field {
      background-color: var(--primary-6);
    }

    .clearable-text-field-clear {
      background-color: unset;
      border: unset;
    }

    .reload-button.btn {
      border-bottom-right-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
    }
  }
}

#date-picker-portal .react-datepicker-popper {
  z-index: 1600;
}

.clearable-input-group {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.clearable-text-field,
.clearable-text-field:active,
.clearable-text-field:focus {
  background-color: var(--primary-1);
  border: 0;
  color: var(--primary-12);
}

.clearable-text-field-clear {
  background-color: var(--primary-7);
  bottom: 0;
  color: var(--primary-11);
  font-size: 0.875rem;
  margin: 0.375rem 0.75rem;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;

  &:hover,
  &:focus,
  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled):active:focus {
    background-color: var(--primary-7);
    border-color: transparent;
    box-shadow: none;
  }
}

.string-list-row .input-group {
  flex-wrap: nowrap;
}

.scrape-url-button:disabled {
  opacity: 0.5;
}

.string-list-input .input-group {
  margin-bottom: 0.35rem;
}

.bulk-update-text-input {
  button {
    background-color: var(--primary-7);
    color: var(--primary-11);
    /* font-size: $btn-font-size-sm; */
    /* margin: $btn-padding-y $btn-padding-x; */
    padding: 0;
    position: absolute;
    right: 0;
    z-index: 4;

    &:hover,
    &:focus,
    &:active,
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled):active:focus {
      background-color: var(--primary-7);
      border-color: transparent;
      box-shadow: none;
    }
  }

  &.unset button {
    visibility: hidden;
  }
}

div.react-datepicker {
  background-color: var(--primary-1);
  border-color: var(--primary-2);
  color: var(--primary-12);

  .react-datepicker__header,
  .react-datepicker-time__header {
    background-color: var(--primary-7);
    color: var(--primary-12);
    padding-top: 0.4rem;
  }

  .react-datepicker__navigation {
    top: 0.4rem;
  }

  .react-datepicker__day {
    color: var(--primary-12);

    &.react-datepicker__day--disabled {
      color: var(--primary-11);
    }

    &:hover {
      background: rgba(138, 155, 168, 0.15);
    }
  }

  div.react-datepicker__time-container div.react-datepicker__time {
    background-color: var(--primary-1);
    color: var(--primary-12);

    ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
      background-color: rgba(138, 155, 168, 0.15);
    }
  }

  .react-datepicker__day-name {
    color: var(--primary-12);
  }

  /* // replace the current month with the dropdowns */
  .react-datepicker__current-month {
    display: none;
  }

  .react-datepicker__triangle {
    display: none;
  }

  .react-datepicker__month-dropdown-container {
    margin-left: 0;
    margin-right: 0.1rem;
  }

  .react-datepicker__year-dropdown-container {
    margin-left: 0.1rem;
    margin-right: 0;
  }

  .react-datepicker__month-dropdown-container
    .react-datepicker__month-read-view,
  .react-datepicker__year-dropdown-container .react-datepicker__year-read-view {
    font-weight: bold;
    font-size: 0.944rem;

    /* // react-datepicker hides these fields when the dropdown is shown */
    visibility: visible !important;
  }

  .react-datepicker__year-dropdown,
  .react-datepicker__month-dropdown {
    background-color: var(--primary-1);

    .react-datepicker__year-option:hover,
    .react-datepicker__month-option:hover {
      background-color: #8a9ba826;
    }
  }
}

.input-group-text {
  background-color: var(--primary-2);
  color: var(--primary-11);
  border: unset;
}

/* ios toggle */
/* :before is background pill */
.custom-control-input ~ .custom-control-label:before {
  /* color: var(--primary-11); */
  border-color: var(--primary-6);
  background-color: var(--primary-6);
}
.custom-control-input:checked ~ .custom-control-label:before {
  /* color: var(--primary-12); */
  border-color: var(--primary-6);
  background-color: var(--primary-6);
}
/* due to hierarchy parent can disabled checked child*/
.custom-switch
  .custom-control-input:disabled:checked
  ~ .custom-control-label:before {
  border-color: var(--primary-6);
  background-color: var(--primary-6);
}

/* :after is moving cirle */
.custom-switch .custom-control-input ~ .custom-control-label:after {
  /* color: var(--primary-11); */
  /* border-color: var(--primary-4); */
  background-color: var(--primary-2);

  box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0);
  transition: all 0.3s ease-out, box-shadow 1s ease-out;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label:after {
  /* color: var(--primary-12); */
  /* border-color: var(--primary-7); */
  background-color: var(--primary-12);
  box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.5);
  animation-delay: 0.5s;
}

/* scene/studio filter buttons */
.filtered-list-toolbar.btn-toolbar,
.pagination {
  .btn {
    border-left: 0;
    border-right: 0;
  }
  .btn-secondary {
    &.active {
      color: var(--primary-12);
      background-color: unset;
      svg {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
      }
    }
    color: var(--primary-11);
  }
}

.filter-container.text-muted.paginationIndex.center-text {
  color: var(--primary-10) !important;
  font-size: var(--text-xs);
}

/* sliders */
input[type="range"]::-moz-range-track {
  background: var(--primary-4);
}
input[type="range"]::-moz-range-thumb {
  border-radius: 50%;
  background: var(--primary-10);
  border: 1px solid var(--primary-10);
}

input[type="range"]:active::-moz-range-track,
input[type="range"]:focus::-moz-range-track {
  background: var(--primary-4);
}
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--primary-4);
}
input[type="range"]:active::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--primary-4);
}

input[type="range"]::-webkit-slider-thumb {
  border-radius: 50%;
  background: var(--primary-10);
  border: 1px solid var(--primary-10);
}

/* player side-bar */
.organized-button {
  transition: filter, color ease-in 0.5;
  &.organized {
    color: var(--primary-12);
    svg {
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
  }
  &.not-organized {
    color: var(--primary-10);
  }
}