diff --git a/css/_select2-dark.css b/css/_select2-dark.css index 4556f38..4547298 100644 --- a/css/_select2-dark.css +++ b/css/_select2-dark.css @@ -1,204 +1,42 @@ -body .select2-container--bootstrap-5 .select2-selection { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); - border: var(--bs-border-width) solid var(--bs-border-color); +/* Select 2 bootstrap-5 theme override */ +/* https://github.com/apalfrey/select2-bootstrap-5-theme/issues/65#issuecomment-1846786325 */ + +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection { + background-color: transparent !important; + border: 1px solid #495057; } -body - .select2-container--bootstrap-5.select2-container--focus - .select2-selection, -body - .select2-container--bootstrap-5.select2-container--open - .select2-selection { - border-color: var(--bs-link-hover-color); - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } -body - .select2-container--bootstrap-5 - .select2-selection--multiple - .select2-selection__clear, -body - .select2-container--bootstrap-5 - .select2-selection--single - .select2-selection__clear { - background: transparent - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") - 50%/0.75rem auto no-repeat; -} -body - .select2-container--bootstrap-5 - .select2-selection--multiple - .select2-selection__clear:hover, -body - .select2-container--bootstrap-5 - .select2-selection--single - .select2-selection__clear:hover { - background: transparent - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") - 50%/0.75rem auto no-repeat; -} -body .select2-container--bootstrap-5 .select2-dropdown { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); - border-color: var(--bs-link-hover-color); +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { + color: #dee2e6 !important; } -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-search - .select2-search__field { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); - background-clip: padding-box; - border: var(--bs-border-width) solid var(--bs-border-color); -} -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-search - .select2-search__field:focus { - border-color: var(--bs-link-hover-color); - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); -} -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option.select2-results__message { - color: #6c757d; -} -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option.select2-results__option--highlighted { - color: var(--bs-body-color); - background-color: var(--bs-light-bg-subtle) !important; -} -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option.select2-results__option--selected, -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option[aria-selected="true"]:not( - .select2-results__option--highlighted - ) { - color: var(--bs-body-color); - background-color: var(--bs-dark-bg-subtle); -} -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option.select2-results__option--disabled, -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option[aria-disabled="true"] { - color: #6c757d; -} -body - .select2-container--bootstrap-5 - .select2-dropdown - .select2-results__options - .select2-results__option[role="group"] - .select2-results__group { - color: #6c757d; -} -body - .select2-container--bootstrap-5 - .select2-selection--single - .select2-selection__rendered { - color: var(--bs-body-color); -} -body - .select2-container--bootstrap-5 - .select2-selection--single - .select2-selection__rendered - .select2-selection__placeholder { - color: #6c757d; -} -body - .select2-container--bootstrap-5 - .select2-selection--multiple - .select2-selection__rendered - .select2-selection__choice { - color: var(--bs-body-color); - border: var(--bs-border-width) solid var(--bs-border-color); +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { + color: #dee2e6 !important; } -body - .select2-container--bootstrap-5.select2-container--disabled - .select2-selection, -body - .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus - .select2-selection { - color: #6c757d; - background-color: var(--bs-light-bg-subtle); - border-color: var(--bs-dark-bg-subtle); +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { + border: 1px solid var(--bs-gray-600); } -.is-valid + body .select2-container--bootstrap-5 .select2-selection, -.was-validated - select:valid - + body - .select2-container--bootstrap-5 - .select2-selection { - border-color: #198754; + +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { + color: #dee2e6 !important; } -.is-valid - + body - .select2-container--bootstrap-5.select2-container--focus - .select2-selection, -.is-valid - + body - .select2-container--bootstrap-5.select2-container--open - .select2-selection, -.was-validated - select:valid - + body - .select2-container--bootstrap-5.select2-container--focus - .select2-selection, -.was-validated - select:valid - + body - .select2-container--bootstrap-5.select2-container--open - .select2-selection { - border-color: #198754; - box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); + +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { + background-color: transparent !important; + color: #dee2e6 !important; } -.is-invalid + body .select2-container--bootstrap-5 .select2-selection, -.was-validated - select:invalid - + body - .select2-container--bootstrap-5 - .select2-selection { - border-color: #dc3545; + +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { + color: #dee2e6 !important; + border: 1px solid #495057 !important; + background-color: var(--bs-body-bg); } -.is-invalid - + body - .select2-container--bootstrap-5.select2-container--focus - .select2-selection, -.is-invalid - + body - .select2-container--bootstrap-5.select2-container--open - .select2-selection, -.was-validated - select:invalid - + body - .select2-container--bootstrap-5.select2-container--focus - .select2-selection, -.was-validated - select:invalid - + body - .select2-container--bootstrap-5.select2-container--open - .select2-selection { - border-color: #dc3545; - box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); + +html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group { + color: var(--bs-secondary-color)!important; } \ No newline at end of file diff --git a/css/jstris-skin.css b/css/jstris-skin.css index 1d69015..35994a5 100644 --- a/css/jstris-skin.css +++ b/css/jstris-skin.css @@ -4,14 +4,18 @@ --skin-url: url(https://i.imgur.com/HqGYC5G.png); } +.select2-dropdown { + width: min-content !important; +} + +.select2-results__group { + display: inline-block; +} + .option { display: inline-block; width: calc(var(--nb-sprites) * var(--cell-size)); height: var(--cell-size); - background-image: var(--skin-url); - background-size: cover; - background-repeat: no-repeat; - vertical-align: middle; } .result { @@ -22,10 +26,14 @@ background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size)); --nb-sprites: 4; --sprite-pos: 4; + background-image: var(--skin-url); + background-size: cover; + background-repeat: no-repeat; + vertical-align: middle; } -.minoes-table { - border-collapse: collapse; +.card { + background-color: #1c1c1c; } #matrixCard { diff --git a/index.html b/index.html index 85d967c..6c9d470 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - +
@@ -40,7 +40,7 @@ - +