The recent UI change made the app look slightly worse on desktop layouts, in my opinion. Here’s some custom CSS I’m trying out to improve things a little. You can install it using the CSS Override extension for Firefox, or an equivalent extension for your browser.
Before/after:
The following code is released under the MIT license. Copyright © 2023 Joe Anderson. If you suggest changes to the code in a reply to this topic, those changes will be assumed to be released under the same license unless you explicitly state otherwise.
:root {
/* Use system font */
--font-family-title: system-ui, sans-serif;
--font-family-text: system-ui, sans-serif;
/* Switch colours on SRS toasts */
--color-quiz-srs-correct-text-color: #39aa0b;
--color-quiz-srs-incorrect-text-color: #F03;
--color-quiz-srs-correct-background: white;
--color-quiz-srs-incorrect-background: white;
--color-quiz-srs-correct-text-shadow: none;
--color-quiz-srs-incorrect-text-shadow: none;
}
/* Stretch to fill screen */
#turbo-body {
display: flex;
flex-direction: column;
}
.character-header {
flex-grow: 1;
display: flex;
}
.character-header__content {
align-items: stretch;
flex-grow: 1;
}
.quiz-input__input {
/* Remove focus ring on input */
outline: none;
/* Round input corners */
border-radius: 0.5rem;
}
/* Redesign buttons */
.additional-content__item {
background-color: white;
color: inherit;
border: none;
border-radius: 0.5rem;
flex-direction: row-reverse;
gap: 0.5rem;
}
.additional-content__item-text, .additional-content__item-icon-container {
display: flex !important;
}
/* Prevent info tooltips from overflowing */
.additional-content {
padding-bottom: 2.5rem;
}
/* Redesign item info pane */
.additional-content__item--open::after {
border-color: transparent transparent white transparent;
}
.additional-content__content {
border: none;
background-color: white;
border-radius: 0.5rem;
}
.subject-section__meanings-title {
color: #555;
font-weight: 500;
min-width: 12ch;
}
.subject-section__subtitle {
font-weight: 400;
}
.user-synonyms__button {
text-shadow: none;
}