diff --git a/public/css/style.scss b/public/css/style.scss index a4f398765..f088c9256 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -759,8 +759,7 @@ key { "wpm acc" "wpm key" "raw time" - "testType info" - "tags info"; + "testType infoAndTags"; .group{ .top{ color: var(--sub-color); @@ -786,22 +785,11 @@ key { line-height: 1rem; } } - .info{ + .infoAndTags{ + display: grid; + gap: .5rem; align-self: baseline; - grid-area: info; - color: var(--sub-color); - .top{ - font-size: 1rem; - line-height: 1.25rem; - } - .bottom{ - font-size: 1rem; - line-height: 1rem; - } - } - .tags{ - align-self: baseline; - grid-area: tags; + grid-area: infoAndTags; color: var(--sub-color); .top{ font-size: 1rem; @@ -965,7 +953,9 @@ key { color: var(--sub-color); text-align: center; margin-bottom: 1.25rem; - transition: .25s; + height: 1rem; + line-height: 1rem; + transition: .125s; justify-content: center; .fas{ margin-right: .5rem; diff --git a/public/index.html b/public/index.html index cc1cb83f9..54a3a81ad 100644 --- a/public/index.html +++ b/public/index.html @@ -184,6 +184,9 @@
+
+ +
-
-
input history
diff --git a/public/js/script.js b/public/js/script.js index a82f84330..687eb4a53 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -632,7 +632,11 @@ function showResult(difficultyFailed = false) { },125); }, 125); - $("#testModesNotice").css('opacity',0); + $("#testModesNotice").css({ + 'opacity': 0, + // 'height': 0, + // 'margin-bottom': 0 + }); let mode2 = ""; if (config.mode == "time") { @@ -959,7 +963,11 @@ function restartTest(withSameWordset = false) { showWords(); } $("#result").addClass('hidden'); - $("#testModesNotice").css('opacity',1); + $("#testModesNotice").css({ + 'opacity': 1, + // 'height': 'auto', + // 'margin-bottom': '1.25rem' + }); $("#words").css('opacity', 0).removeClass('hidden').stop(true, true).animate({ opacity: 1 }, 125, () => {