improve jstris skin

css/_select2-dark.css

@@ -1,204 +1,42 @@
-body .select2-container--bootstrap-5 .select2-selection {
+/* Select 2 bootstrap-5 theme override */
-    color: var(--bs-body-color);
+/* https://github.com/apalfrey/select2-bootstrap-5-theme/issues/65#issuecomment-1846786325 */
-    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 {
+    background-color: transparent !important;
+    border: 1px solid #495057;
 }
 
-body
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
-    .select2-container--bootstrap-5.select2-container--focus
+    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");
-    .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);
 }
 
-body
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
-    .select2-container--bootstrap-5
+	color: #dee2e6 !important;
-    .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);
 }
 
-body
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
-    .select2-container--bootstrap-5
+	color: #dee2e6 !important;
-    .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);
 }
 
-body
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
-    .select2-container--bootstrap-5.select2-container--disabled
+	border: 1px solid var(--bs-gray-600);
-    .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);
 }
-.is-valid + body .select2-container--bootstrap-5 .select2-selection,
+
-.was-validated
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
-    select:valid
+	color: #dee2e6 !important;
-    + body
-    .select2-container--bootstrap-5
-    .select2-selection {
-    border-color: #198754;
 }
-.is-valid
+
-    + body
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
-    .select2-container--bootstrap-5.select2-container--focus
+    background-color: transparent !important;
-    .select2-selection,
+    color: #dee2e6 !important;
-.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);
 }
-.is-invalid + body .select2-container--bootstrap-5 .select2-selection,
+
-.was-validated
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
-    select:invalid
+    color: #dee2e6 !important;
-    + body
+    border: 1px solid #495057 !important;
-    .select2-container--bootstrap-5
+	background-color: var(--bs-body-bg);
-    .select2-selection {
-    border-color: #dc3545;
 }
-.is-invalid
+
-    + body
+html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
-    .select2-container--bootstrap-5.select2-container--focus
+	color: var(--bs-secondary-color)!important;
-    .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,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 {
+.card {
-    border-collapse: collapse;
+  background-color: #1c1c1c;
 }
 
 #matrixCard {

index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="fr">
+<html lang="fr" data-bs-theme="dark">
 
   <head>
     <meta charset="utf-8" />
@@ -40,7 +40,7 @@
     <meta property="og:site_name" content="adrien.malingrey.fr"/>
   </head>
 
-  <body data-bs-theme="dark">
+  <body>
 
     <div class="modal fade" id="settingsModal" data-bs-backdrop="static" data-bs-keyboard="false">
       <div class="modal-dialog modal-dialog-centered">

js/interface.js

@@ -66,14 +66,13 @@ class Settings {
                     templateSelection: state =>
                         state.id
                             ? $(
-                                  `<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" loading="lazy"></span>`,
+                                  `<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" alt="${state.id}" loading="lazy"></span>`,
                               )
                             : state.text,
                     theme: 'bootstrap-5',
-                    width: '100%',
                     selectionCssClass: 'form-select',
-                    dropdownAutoWidth: true,
                     dropdownParent: $('#settingsModal'),
+                    dropdownAutoWidth: true,
                     placeholder: "URL de l'image",
                     tags: true,
                     createTag: function (params) {