diff --git a/css/_common.css b/css/_common.css index ddb40c4..0c5ab83 100644 --- a/css/_common.css +++ b/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; +} \ No newline at end of file diff --git a/css/_select2-dark.css b/css/_select2-dark.css index 4547298..4556f38 100644 --- a/css/_select2-dark.css +++ b/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); } \ No newline at end of file diff --git a/css/jstris-skin.css b/css/jstris-skin.css index 35994a5..d7059cc 100644 --- a/css/jstris-skin.css +++ b/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; } \ No newline at end of file diff --git a/css/tetrio-skin.css b/css/tetrio-skin.css index 4f8984f..e81feb8 100644 --- a/css/tetrio-skin.css +++ b/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; +} diff --git a/index.html b/index.html index 6c9d470..acd1937 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,8 @@ - + + @@ -21,7 +22,6 @@ - @@ -78,21 +78,21 @@