style: fix an outline sometimes appearing around the result

This commit is contained in:
Miodec 2024-04-28 14:16:55 +02:00
parent a2078dab17
commit e632df7442
2 changed files with 352 additions and 346 deletions

View file

@ -516,25 +516,9 @@
}
}
#result .wrapper {
display: grid;
// height: 200px;
gap: 1rem;
// grid-template-columns: auto 1fr;
// justify-content: center;
align-items: center;
grid-template-columns: auto 1fr;
grid-template-areas:
"stats chart"
"morestats morestats";
// "wordsHistory wordsHistory"
// "buttons buttons"
// "login login"
// "ssw ssw";
.editTagsButton {
padding: 0 0.25em;
margin-left: 0.5em;
#result {
&:focus-visible {
outline: none;
}
&.noBalloons {
@ -548,368 +532,390 @@
outline: none;
}
button {
padding: 1em 2em;
}
.buttons {
.wrapper {
display: grid;
grid-auto-flow: column;
// height: 200px;
gap: 1rem;
justify-content: center;
grid-column: 1/3;
}
// grid-template-columns: auto 1fr;
// justify-content: center;
align-items: center;
grid-template-columns: auto 1fr;
grid-template-areas:
"stats chart"
"morestats morestats";
// "wordsHistory wordsHistory"
// "buttons buttons"
// "login login"
// "ssw ssw";
.ssWatermark {
grid-column: 1/3;
}
#retrySavingResultButton {
margin: 0 auto 1rem auto;
display: flex;
}
#resultWordsHistory,
#resultReplay {
// grid-area: wordsHistory;
color: var(--sub-color);
// grid-column: 1/3;
margin-bottom: 1rem;
.textButton {
.editTagsButton {
padding: 0 0.25em;
}
#copyWordsListButton {
margin-left: 0.5em;
}
.heatmapLegend {
margin-left: 0.5rem;
display: inline-grid;
grid-template-columns: auto auto auto;
gap: 1rem;
font-size: 0.75rem;
color: var(--sub-color);
width: min-content;
.boxes {
// display: flex;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
.box {
// width: 1rem;
height: 1rem;
color: var(--bg-color);
padding: 0.1rem 0.5rem;
white-space: nowrap;
line-height: 0.75rem;
display: grid;
place-content: center center;
}
.box:nth-child(1) {
border-radius: var(--roundness) 0 0 var(--roundness);
}
.box:nth-child(5) {
border-radius: 0 var(--roundness) var(--roundness) 0;
}
}
}
.title {
user-select: none;
margin-bottom: 0.25rem;
display: flex;
align-items: center;
}
.words {
display: flex;
flex-wrap: wrap;
width: 100%;
align-content: flex-start;
.word {
position: relative;
margin: 0.18rem 0.6rem 0.15rem 0;
letter.correct {
color: var(--text-color);
}
letter.incorrect {
color: var(--error-color);
}
letter.incorrect.extra {
color: var(--error-extra-color);
}
&.heatmapInherit letter {
color: inherit;
}
}
&.rightToLeftTest {
//flex-direction: row-reverse; // no need for hacking 😉, CSS fully support right-to-left languages
direction: rtl;
.word {
//flex-direction: row-reverse;
direction: rtl;
}
}
&.withLigatures {
letter {
display: inline;
}
}
}
}
#resultReplay .words {
user-select: none;
-webkit-user-select: none;
}
.chart {
grid-area: chart;
width: 100%;
canvas {
width: 100% !important;
height: 100%;
button {
padding: 1em 2em;
}
max-height: 200px;
height: 200px;
.title {
color: var(--sub-color);
margin-bottom: 1rem;
}
}
.loginTip {
grid-column: 1/3;
text-align: center;
color: var(--sub-color);
// grid-area: login;
grid-column: 1/3;
.link {
text-decoration: underline;
display: inline-block;
cursor: pointer;
}
}
.bottom {
grid-column: 1/-1;
}
.stats {
grid-area: stats;
display: grid;
// column-gap: 0.5rem;
gap: 0.5rem;
justify-content: center;
align-items: center;
// grid-template-areas:
// "wpm acc"
// "wpm key"
// "raw time"
// "consistency consistency"
// "source source"
// "leaderboards leaderboards"
// "testType infoAndTags";
// grid-template-areas:
// "wpm acc key consistency testType leaderboards source"
// "wpm raw time nothing infoAndTags leaderboards source";
grid-template-areas:
"wpm"
"acc";
&.morestats {
.buttons {
display: grid;
grid-auto-flow: column;
grid-template-areas: none;
align-items: flex-start;
justify-content: space-between;
column-gap: 2rem;
grid-area: morestats;
// grid-template-areas: "raw consistency testType infoAndTags leaderboards source"
// "key time testType infoAndTags leaderboards source";
.subgroup {
display: grid;
gap: 0.5rem;
}
gap: 1rem;
justify-content: center;
grid-column: 1/3;
}
.group {
// margin-bottom: 0.5rem;
.ssWatermark {
grid-column: 1/3;
}
.top {
#retrySavingResultButton {
margin: 0 auto 1rem auto;
display: flex;
}
#resultWordsHistory,
#resultReplay {
// grid-area: wordsHistory;
color: var(--sub-color);
// grid-column: 1/3;
margin-bottom: 1rem;
.textButton {
padding: 0 0.25em;
}
#copyWordsListButton {
margin-left: 0.5em;
}
.heatmapLegend {
margin-left: 0.5rem;
display: inline-grid;
grid-template-columns: auto auto auto;
gap: 1rem;
font-size: 0.75rem;
color: var(--sub-color);
font-size: 1rem;
line-height: 1rem;
width: min-content;
.boxes {
// display: flex;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
.box {
// width: 1rem;
height: 1rem;
color: var(--bg-color);
padding: 0.1rem 0.5rem;
white-space: nowrap;
line-height: 0.75rem;
display: grid;
place-content: center center;
}
.box:nth-child(1) {
border-radius: var(--roundness) 0 0 var(--roundness);
}
.box:nth-child(5) {
border-radius: 0 var(--roundness) var(--roundness) 0;
}
}
}
.title {
user-select: none;
margin-bottom: 0.25rem;
}
.bottom {
color: var(--main-color);
font-size: 2rem;
line-height: 2rem;
}
&.time {
.afk,
.timeToday {
color: var(--sub-color);
font-size: 0.75rem;
line-height: 0.75rem;
margin-left: 0.2rem;
}
}
&.dailyLeaderboard {
max-width: 13rem;
overflow: hidden;
white-space: nowrap;
}
&.source {
#rateQuoteButton,
#reportQuoteButton,
#favoriteQuoteButton {
padding: 0 0.25rem;
}
#rateQuoteButton {
gap: 0.25rem;
}
}
}
// .infoAndTags {
// display: grid;
// gap: 0.5rem;
// align-self: baseline;
// // grid-area: infoAndTags;
// color: var(--sub-color);
// .top {
// font-size: 1rem;
// line-height: 1rem;
// }
// .bottom {
// font-size: 1rem;
// line-height: 1rem;
// }
// }
.info,
.tags,
.source {
.top {
display: flex;
align-items: center;
font-size: 1rem;
line-height: 1rem;
}
.bottom {
font-size: 1rem;
line-height: 1rem;
}
}
.source {
max-width: 30rem;
}
.tags .bottom .fas {
margin-left: 0.5rem;
}
.wpm {
grid-area: wpm;
.top {
font-size: 2rem;
line-height: 1.5rem;
.words {
display: flex;
// margin-top: -0.5rem;
// .crownWrapper {
// width: 1.7rem;
// overflow: hidden;
// height: 1.7rem;
// margin-left: 0.5rem;
// // margin-top: 0.98rem;
// margin-top: -0.5rem;
.crown {
height: 1.7rem;
width: 1.7rem;
margin-left: 0.5rem;
margin-top: -0.2rem;
font-size: 0.7rem;
line-height: 1.7rem;
background: var(--main-color);
color: var(--bg-color);
border-radius: 0.6rem;
text-align: center;
align-self: center;
width: 1.7rem;
height: 1.7rem;
flex-wrap: wrap;
width: 100%;
align-content: flex-start;
.word {
position: relative;
margin: 0.18rem 0.6rem 0.15rem 0;
letter.correct {
color: var(--text-color);
}
letter.incorrect {
color: var(--error-color);
}
letter.incorrect.extra {
color: var(--error-extra-color);
}
&.heatmapInherit letter {
color: inherit;
}
}
// }
}
.bottom {
font-size: 4rem;
line-height: 4rem;
}
}
.testType,
.leaderboards {
.bottom {
font-size: 1rem;
line-height: 1rem;
.lbChange .fas {
margin-right: 0.15rem;
&.rightToLeftTest {
//flex-direction: row-reverse; // no need for hacking 😉, CSS fully support right-to-left languages
direction: rtl;
.word {
//flex-direction: row-reverse;
direction: rtl;
}
}
&.withLigatures {
letter {
display: inline;
}
}
}
}
.acc {
grid-area: acc;
#resultReplay .words {
user-select: none;
-webkit-user-select: none;
}
.top {
font-size: 2rem;
line-height: 1.5rem;
.chart {
grid-area: chart;
width: 100%;
canvas {
width: 100% !important;
height: 100%;
}
.bottom {
font-size: 4rem;
line-height: 4rem;
max-height: 200px;
height: 200px;
.title {
color: var(--sub-color);
margin-bottom: 1rem;
}
}
.burst {
grid-area: burst;
.top {
font-size: 2rem;
line-height: 1.5rem;
}
.bottom {
font-size: 4rem;
line-height: 4rem;
.loginTip {
grid-column: 1/3;
text-align: center;
color: var(--sub-color);
// grid-area: login;
grid-column: 1/3;
.link {
text-decoration: underline;
display: inline-block;
cursor: pointer;
}
}
// .key {
// grid-area: key;
// }
.bottom {
grid-column: 1/-1;
}
// .time {
// grid-area: time;
// }
.stats {
grid-area: stats;
display: grid;
// column-gap: 0.5rem;
gap: 0.5rem;
justify-content: center;
align-items: center;
// grid-template-areas:
// "wpm acc"
// "wpm key"
// "raw time"
// "consistency consistency"
// "source source"
// "leaderboards leaderboards"
// "testType infoAndTags";
// grid-template-areas:
// "wpm acc key consistency testType leaderboards source"
// "wpm raw time nothing infoAndTags leaderboards source";
grid-template-areas:
"wpm"
"acc";
// .raw {
// grid-area: raw;
// }
&.morestats {
display: grid;
grid-auto-flow: column;
grid-template-areas: none;
align-items: flex-start;
justify-content: space-between;
column-gap: 2rem;
grid-area: morestats;
// grid-template-areas: "raw consistency testType infoAndTags leaderboards source"
// "key time testType infoAndTags leaderboards source";
.subgroup {
display: grid;
gap: 0.5rem;
}
}
.group {
// margin-bottom: 0.5rem;
.top {
color: var(--sub-color);
font-size: 1rem;
line-height: 1rem;
margin-bottom: 0.25rem;
}
.bottom {
color: var(--main-color);
font-size: 2rem;
line-height: 2rem;
}
&.time {
.afk,
.timeToday {
color: var(--sub-color);
font-size: 0.75rem;
line-height: 0.75rem;
margin-left: 0.2rem;
}
}
&.dailyLeaderboard {
max-width: 13rem;
overflow: hidden;
white-space: nowrap;
}
&.source {
#rateQuoteButton,
#reportQuoteButton,
#favoriteQuoteButton {
padding: 0 0.25rem;
}
#rateQuoteButton {
gap: 0.25rem;
}
}
}
// .infoAndTags {
// display: grid;
// gap: 0.5rem;
// align-self: baseline;
// // grid-area: infoAndTags;
// color: var(--sub-color);
// .top {
// font-size: 1rem;
// line-height: 1rem;
// }
// .bottom {
// font-size: 1rem;
// line-height: 1rem;
// }
// }
.info,
.tags,
.source {
.top {
display: flex;
align-items: center;
font-size: 1rem;
line-height: 1rem;
}
.bottom {
font-size: 1rem;
line-height: 1rem;
}
}
.source {
max-width: 30rem;
}
.tags .bottom .fas {
margin-left: 0.5rem;
}
.wpm {
grid-area: wpm;
.top {
font-size: 2rem;
line-height: 1.5rem;
display: flex;
// margin-top: -0.5rem;
// .crownWrapper {
// width: 1.7rem;
// overflow: hidden;
// height: 1.7rem;
// margin-left: 0.5rem;
// // margin-top: 0.98rem;
// margin-top: -0.5rem;
.crown {
height: 1.7rem;
width: 1.7rem;
margin-left: 0.5rem;
margin-top: -0.2rem;
font-size: 0.7rem;
line-height: 1.7rem;
background: var(--main-color);
color: var(--bg-color);
border-radius: 0.6rem;
text-align: center;
align-self: center;
width: 1.7rem;
height: 1.7rem;
}
// }
}
.bottom {
font-size: 4rem;
line-height: 4rem;
}
}
.testType,
.leaderboards {
.bottom {
font-size: 1rem;
line-height: 1rem;
.lbChange .fas {
margin-right: 0.15rem;
}
}
}
.acc {
grid-area: acc;
.top {
font-size: 2rem;
line-height: 1.5rem;
}
.bottom {
font-size: 4rem;
line-height: 4rem;
}
}
.burst {
grid-area: burst;
.top {
font-size: 2rem;
line-height: 1.5rem;
}
.bottom {
font-size: 4rem;
line-height: 4rem;
}
}
// .key {
// grid-area: key;
// }
// .time {
// grid-area: time;
// }
// .raw {
// grid-area: raw;
// }
}
}
}

View file

@ -834,7 +834,7 @@ export async function update(
$("#result"),
250,
async () => {
$("#result .wrapper").trigger("focus");
$("#result").trigger("focus");
void AdController.renderResult();
TestUI.setResultCalculating(false);
$("#words").empty();