use https://you.have.fail/tetrioplus/ skins

css/_common.css

@@ -289,3 +289,11 @@ tr.cleared-line-animation {
 #statsModal tr:last-child td {
     border-bottom: none;
 }
+
+.select2-dropdown {
+    width: min-content !important;
+}
+
+.select2-results__group {
+    display: inline-block;
+}

css/_select2-dark.css

@@ -1,42 +1,204 @@
-/* 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-selection {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 }
 
-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-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 .select2-selection__rendered {
-	color: #dee2e6 !important;
+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--multiple .select2-selection__rendered .select2-selection__choice {
-	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 {
-	border: 1px solid var(--bs-gray-600);
+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--single .select2-selection__rendered .select2-selection__placeholder {
-	color: #dee2e6 !important;
+.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-dropdown .select2-search .select2-search__field {
-    background-color: transparent !important;
-    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 {
-    color: #dee2e6 !important;
-    border: 1px solid #495057 !important;
-	background-color: var(--bs-body-bg);
+.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 .select2-results__options .select2-results__option[role=group] .select2-results__group {
-	color: var(--bs-secondary-color)!important;
+.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);
 }

css/jstris-skin.css

@@ -4,38 +4,14 @@
   --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);
-}
-
-.result {
-    --nb-sprites: 9;
-}
-
-.selection {
-    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;
-}
-
 .card {
   background-color: #1c1c1c;
 }
 
+.card-body {
+    background-color: black;
+}
+
 #matrixCard {
     background-image: url(jstris-skin/jstris-grid.png);
     background-position: bottom;
@@ -99,4 +75,23 @@ tr.matrix td:not(.mino) {
 #holdTable .mino,
 #nextTable .mino {
     box-shadow: 4px 4px 10px #0002;
+}
+
+.option {
+    display: inline-block;
+    height: var(--cell-size);
+}
+
+.result {
+    --nb-sprites: 9;
+}
+
+.select2-container:not(.select2-container--disabled) .selection {
+    width: calc(var(--nb-sprites) * var(--cell-size));
+    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;
 }

css/tetrio-skin.css

@@ -1,7 +1,7 @@
 :root {
-  --cell-size: 30px;
-  --sprite-size: calc(100% / 11);
-  --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
+    --cell-size: 30px;
+    --sprite-size: calc(100% / 11);
+    --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
 }
 
 .minoes-table {
@@ -9,12 +9,12 @@
 }
 
 .mino {
-  width: var(--cell-size);
-  height: var(--cell-size);
-  background-image: var(--skin-url);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
+    width: var(--cell-size);
+    height: var(--cell-size);
+    background-image: var(--skin-url);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
 }
 
 .I {
@@ -46,14 +46,39 @@
 }
 
 .ghost {
-  --sprite-pos: 7;
-  opacity: 40%;
+    --sprite-pos: 7;
+    opacity: 40%;
 }
 
 .disabled {
-  --sprite-pos: 8;
+    --sprite-pos: 8;
 }
 
 .locking.mino {
     filter: saturate(60%) brightness(180%);
 }
+
+#holdTable .mino,
+#nextTable .mino {
+    box-shadow: 4px 4px 10px #0002;
+}
+
+.option {
+    display: inline-block;
+    height: var(--cell-size);
+}
+
+.result {
+    --nb-sprites: 9;
+}
+
+.select2-container:not(.select2-container--disabled) .selection {
+    --padded-cell-size: calc(var(--cell-size) + 1px);
+    width: calc(var(--nb-sprites) * var(--padded-cell-size));
+    background-position-x: calc(-1 * var(--sprite-pos) * var(--padded-cell-size));
+    --nb-sprites: 3;
+    --sprite-pos: 4;
+    background-image: var(--skin-url);
+    background-size: cover;
+    background-repeat: no-repeat;
+}