bootstrap-forced-colors-css/css/bootstrap-forced-colors.css

Bootstrap 5 Forced Colors CSS for Windows High Contrast Themes

/*!
 * Bootstrap Forced Colors CSS v1.0.7 (https://github.com/coliff/bootstrap-forced-colors-css)
 * Copyright 2024 C.Oliff
 * Licensed under MIT (https://github.com/coliff/bootstrap-forced-colors-css/blob/main/LICENSE)
 */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}
@media (forced-colors: active) {
  hr {
    opacity: 0.5;
  }
  .btn.disabled,
  .btn[disabled] {
    color: GrayText;
    border-color: GrayText;
  }
  button:focus:not(:focus-visible) {
    outline: 1px solid Highlight;
  }
  .btn-check:checked + .btn,
  .btn.active,
  .btn.show,
  .btn:first-child:active,
  :not(.btn-check) + .btn:active {
    background-color: Highlight;
  }
  .btn .badge {
    outline: 1px solid transparent;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .form-check-input:checked {
    background-color: ButtonText !important;
  }
}
@media (forced-colors: active) {
  .form-check-input:focus {
    outline: 1px solid Highlight;
  }
  .form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
    color: GrayText;
  }
  .form-control:focus {
    outline: 1px solid transparent;
  }
  .form-control:disabled {
    border-color: GrayText;
    color: GrayText;
  }
  .form-floating > label {
    border: 0;
  }
  .form-floating > .form-control::-moz-placeholder,
  .form-floating > .form-control-plaintext::-moz-placeholder {
    color: transparent;
    forced-color-adjust: none;
  }
  .form-floating > .form-control::placeholder,
  .form-floating > .form-control-plaintext::placeholder {
    color: transparent;
    forced-color-adjust: none;
  }
  .form-floating > .form-control:disabled ~ label,
  .form-floating > :disabled ~ label {
    color: GrayText;
  }
  .form-range {
    -moz-appearance: auto;
    -webkit-appearance: auto;
    appearance: auto;
  }
  .form-range:disabled {
    opacity: 0.5;
  }
  .form-range::-webkit-slider-runnable-track {
    background-color: ButtonText;
  }
  .form-range::-webkit-slider-thumb {
    outline: 2px solid Canvas;
  }
  .form-range::-moz-range-thumb {
    outline: 2px solid Canvas;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  }
}
@media (forced-colors: active) {
  .form-select:focus {
    outline: 1px solid transparent;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .form-switch .form-check-input {
    border: 1px solid;
  }
  [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
    filter: brightness(5);
  }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .form-switch .form-check-input:checked {
    forced-color-adjust: none;
  }
}
@media (forced-colors: active) {
  .vr {
    background-color: ButtonText;
    opacity: 0.5;
  }
  .dropdown-toggle::after, .dropdown-toggle::before {
    color: ButtonText;
    forced-color-adjust: none;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .accordion-button::after {
    filter: invert(1) saturate(0.1) brightness(9);
  }
}
@media (forced-colors: active) {
  .list-group-item.disabled, .list-group-item:disabled {
    color: GrayText;
  }
  .modal-backdrop {
    --bs-backdrop-opacity: 0.8;
  }
  .navbar {
    border-bottom: 1px solid transparent;
  }
  .navbar-toggler-icon {
    filter: invert(1);
  }
  .navbar-dark,
  .navbar[data-bs-theme=dark] {
    filter: invert(0);
  }
  .nav-tabs .nav-link {
    border: 0 !important;
  }
  .nav-link.active {
    border: 1px solid transparent;
    border-bottom: 0 !important;
    outline: 2px solid transparent;
  }
  .nav-link.disabled, .nav-link:disabled {
    color: GrayText;
  }
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    outline: 1px solid transparent;
  }
  .page-item.active .page-link {
    color: ButtonText;
    outline: 1px solid transparent;
  }
  .disabled > .page-link,
  .page-link.disabled {
    color: GrayText;
  }
  .placeholder {
    background-color: ButtonText;
  }
  .progress {
    --bs-progress-bar-bg: Highlight;
    outline: 1px solid transparent;
  }
  .progress .progress-bar {
    font-weight: 700;
    background-color: CanvasText !important;
    border-right: 1px solid transparent;
  }
  .progress-stacked {
    outline: 1px solid transparent;
  }
  .progress-stacked .progress:nth-child(even) {
    opacity: 0.5;
  }
  .btn-close {
    --bs-btn-close-opacity: 0.75;
    --bs-btn-close-hover-opacity: 1;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .btn-close-white {
    filter: none;
  }
  .btn-close {
    filter: none !important;
  }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .btn-close {
    filter: var(--bs-btn-close-white-filter);
  }
}
@media (forced-colors: active) {
  .carousel-indicators [data-bs-target] {
    forced-color-adjust: none;
  }
  .carousel-control-next,
  .carousel-control-prev {
    opacity: 0.8;
  }
  .carousel-control-next:focus,
  .carousel-control-next:hover,
  .carousel-control-prev:focus,
  .carousel-control-prev:hover {
    opacity: 1;
  }
  .tooltip .tooltip-inner {
    outline: 1px solid transparent;
  }
  .tooltip .tooltip-arrow {
    forced-color-adjust: none;
  }
  .tooltip .tooltip-arrow::before {
    forced-color-adjust: none;
  }
  .popover {
    --bs-popover-arrow-border: ButtonText;
  }
  .popover .popover-inner {
    outline: 1px solid transparent;
  }
  .popover .popover-arrow {
    forced-color-adjust: none;
  }
  .spinner-border {
    border-right-color: Canvas;
  }
  .spinner-grow {
    background-color: ButtonText;
    border: 1px solid transparent;
  }
  .table {
    outline: 1px solid transparent;
  }
}

/*# sourceMappingURL=bootstrap-forced-colors.css.map */