From d85d48bc1f728b575428a4d56630368c3d11dded Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 03:24:46 +0300 Subject: [PATCH] CSS fixes --- public/src/css/search.css | 19 +++++++++++++------ public/src/js/songselect.js | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/public/src/css/search.css b/public/src/css/search.css index 1024e68..067d55f 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -18,7 +18,7 @@ position: relative; display: flex; flex-direction: column; - width: 60em; + width: min(100%, 60em); height: 80%; border-radius: 0.8em; border: 0.35em solid #8C0C42; @@ -167,6 +167,7 @@ width: 100%; padding: 0.1em 0; border-radius: 0 0 0.3em 0.3em; + overflow: hidden; } .song-search-result-easy { @@ -218,21 +219,27 @@ background-size: 1.4em; background-position-x: center; background-repeat: repeat-y; - width: 100%; position: absolute; - height: 2em; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 1.4em; + height: 1.3em; + margin-bottom: 1.2em; } .song-search-result-gold { - background-position-y: 4.1em; + background-position-y: 59%; } .song-search-result-silver { - background-position-y: 6.1em; + background-position-y: 29%; } .song-search-result-noclear { - background-position-y: 0.15em; + background-position-y: -1%; } #song-search-tip { diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index b22e995..2a224c7 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -96,7 +96,7 @@ class SongSelect{ var stripped = key.replace(/\W/g, '') document.styleSheets[0].insertRule('.song-search-' + stripped + ' { background-color: ' + skin.background + ' }') - document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4vmax solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }') + document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }') document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-title::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }') document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-subtitle::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }') })