monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-12 00:26:18 +08:00
Code Issues Projects Releases Packages Wiki Activity

changed class name to a more unique one to aboid applying to unwanted elements

Browse source
This commit is contained in:
Miodec 2023-01-17 12:12:00 +01:00
parent 4babbba80a
commit ddad75abc1
2 changed files with 79 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/styles/settings.scss
View file

@ -153,7 +153,7 @@
}
}
.title {
.groupTitle {
font-size: 1rem;
color: var(--sub-color);
margin: 0;

156
frontend/static/html/pages/settings.html
View file

@ -43,7 +43,7 @@
</div>
<div class="settingsGroup account hidden">
<div class="section discordIntegration">
<div class="title">discord integration</div>
<div class="groupTitle">discord integration</div>
<div class="text">
When you connect your monkeytype account to your Discord account, you
will be automatically assigned a new role every time you achieve a new
@ -76,7 +76,7 @@
</div>
</div>
<div class="section tags">
<div class="title">tags</div>
<div class="groupTitle">tags</div>
<div class="text">
With tags, you can compare how fast you're typing in different
situations. You can see your active tags above the test words. They will
@ -99,7 +99,7 @@
</div>
</div>
<div class="section presets">
<div class="title">presets</div>
<div class="groupTitle">presets</div>
<div class="text">
Create settings presets that can be applied with one click. Remember to
edit your preset if you make any changes - they don't save on their own.
@ -130,7 +130,7 @@
</div>
<div class="settingsGroup behavior">
<div class="section difficulty">
<div class="title">test difficulty</div>
<div class="groupTitle">test difficulty</div>
<div class="text">
Normal is the classic type test experience. Expert fails the test if you
submit (press space) an incorrect word. Master fails if you press a
@ -164,7 +164,7 @@
</div>
</div>
<div class="section quickRestart" id="quickRestart">
<div class="title">quick restart</div>
<div class="groupTitle">quick restart</div>
<div class="text">
Press
<key>tab</key>
@ -205,7 +205,7 @@
</div>
<div class="section repeatQuotes" id="repeatQuotes">
<div class="title">repeat quotes</div>
<div class="groupTitle">repeat quotes</div>
<div class="text">
This setting changes the restarting behavior when typing in quote mode.
Changing it to 'typing' will repeat the quote if you restart while
@ -236,7 +236,7 @@
</div>
<div class="section blindMode">
<div class="title">blind mode</div>
<div class="groupTitle">blind mode</div>
<div class="text">
No errors or incorrect words are highlighted. Helps you to focus on raw
speed. If enabled, quick end is recommended.
@ -262,7 +262,7 @@
</div>
</div>
<div class="section alwaysShowWordsHistory">
<div class="title">always show words history</div>
<div class="groupTitle">always show words history</div>
<div class="text">
This option will automatically show the words history at the end of the
test. Can cause slight lag with a lot of words.
@ -286,7 +286,7 @@
</div>
</div>
<div class="section singleListCommandLine">
<div class="title">single list command line</div>
<div class="groupTitle">single list command line</div>
<div class="text">
When enabled, it will show the command line with all commands in a
single list instead of submenu arrangements. Selecting 'manual' will
@ -314,7 +314,7 @@
</div>
</div>
<div class="section minWpm" section="">
<div class="title">min wpm</div>
<div class="groupTitle">min wpm</div>
<div class="text">
Automatically fails a test if your WPM falls below a threshold.
</div>
@ -349,7 +349,7 @@
</div>
</div>
<div class="section minAcc" section="">
<div class="title">min accuracy</div>
<div class="groupTitle">min accuracy</div>
<div class="text">
Automatically fails a test if your accuracy falls below a threshold.
</div>
@ -384,7 +384,7 @@
</div>
</div>
<div class="section minBurst" section="">
<div class="title">min burst</div>
<div class="groupTitle">min burst</div>
<div class="text">
Automatically fails a test if your raw for a single word falls below
this threshold. Selecting 'flex' allows for this threshold to
@ -434,7 +434,7 @@
</div>
</div>
<div class="section britishEnglish" section="">
<div class="title">british english</div>
<div class="groupTitle">british english</div>
<div class="text">
When enabled, the website will use the British spelling instead of
American. Note that this might not replace all words correctly. If you
@ -462,12 +462,12 @@
</div>
</div>
<div class="section language">
<div class="title">language</div>
<div class="groupTitle">language</div>
<div class="text">Change in which language you want to type.</div>
<select></select>
</div>
<div class="section funbox fullWidth">
<div class="title">funbox</div>
<div class="groupTitle">funbox</div>
<div class="text">
These are special modes that change the website in some special way (by
altering the word generation, behavior of the website or the looks).
@ -477,7 +477,7 @@
</div>
<div class="sectionSpacer"></div>
<div class="section customLayoutfluid">
<div class="title">custom layoutfluid</div>
<div class="groupTitle">custom layoutfluid</div>
<div class="text">
Select which layouts you want the layoutfluid funbox to cycle through.
</div>
@ -501,7 +501,7 @@
</div>
<div class="settingsGroup input">
<div class="section freedomMode">
<div class="title">freedom mode</div>
<div class="groupTitle">freedom mode</div>
<div class="text">
Allows you to delete any word, even if it was typed correctly.
</div>
@ -525,7 +525,7 @@
</div>
</div>
<div class="section strictSpace">
<div class="title">strict space</div>
<div class="groupTitle">strict space</div>
<div class="text">
Pressing space at the beginning of a word will insert a space character
when this mode is enabled.
@ -550,7 +550,7 @@
</div>
</div>
<div class="section oppositeShiftMode">
<div class="title">opposite shift mode</div>
<div class="groupTitle">opposite shift mode</div>
<div class="text">
This mode will force you to use opposite
<key>shift</key>
@ -594,7 +594,7 @@
</div>
</div>
<div class="section stopOnError">
<div class="title">stop on error</div>
<div class="groupTitle">stop on error</div>
<div class="text">
Letter mode will stop input when pressing any incorrect letters. Word
mode will not allow you to continue to the next word until you correct
@ -628,7 +628,7 @@
</div>
</div>
<div class="section confidenceMode">
<div class="title">confidence mode</div>
<div class="groupTitle">confidence mode</div>
<div class="text">
When enabled, you will not be able to go back to previous words to fix
mistakes. When turned up to the max, you won't be able to backspace at
@ -663,7 +663,7 @@
</div>
</div>
<div class="section quickEnd">
<div class="title">quick end</div>
<div class="groupTitle">quick end</div>
<div class="text">
This only applies to the words mode - when enabled, the test will end as
soon as the last word has been typed, even if it's incorrect. When
@ -685,7 +685,7 @@
</div>
</div>
<div class="section indicateTypos" section="">
<div class="title">indicate typos</div>
<div class="groupTitle">indicate typos</div>
<div class="text">
Shows typos that you've made. Below shows what you typed below the
letters and replace will replace the letters with the ones you typed.
@ -718,7 +718,7 @@
</div>
</div>
<div class="section hideExtraLetters" section="">
<div class="title">hide extra letters</div>
<div class="groupTitle">hide extra letters</div>
<div class="text">
Hides extra letters. This will completely avoid words jumping lines (due
to changing width), but might feel a bit confusing when you press a key
@ -744,7 +744,7 @@
</div>
</div>
<div class="section lazyMode">
<div class="title">lazy mode</div>
<div class="groupTitle">lazy mode</div>
<div class="text">
Replaces accents / diacritics / special characters with their normal
letter equivalents.
@ -764,7 +764,7 @@
</div>
</div>
<div class="section layout">
<div class="title">layout emulator</div>
<div class="groupTitle">layout emulator</div>
<div class="text">
With this setting you can emulate other layouts. This setting is best
kept off, as it can break things like dead keys and alt layers.
@ -791,7 +791,7 @@
</div>
<div class="settingsGroup sound">
<div class="section soundVolume">
<div class="title">sound volume</div>
<div class="groupTitle">sound volume</div>
<div class="text">Change the volume of the sound effects.</div>
<div class="buttons">
<div
@ -821,7 +821,7 @@
</div>
</div>
<div class="section playSoundOnClick fullWidth">
<div class="title">play sound on click</div>
<div class="groupTitle">play sound on click</div>
<div class="text">Plays a short sound when you press a key.</div>
<div class="buttons">
<div
@ -923,7 +923,7 @@
</div>
</div>
<div class="section playSoundOnError">
<div class="title">play sound on error</div>
<div class="groupTitle">play sound on error</div>
<div class="text">
Plays a short sound if you press an incorrect key or press space too
early.
@ -956,7 +956,7 @@
</div>
<div class="settingsGroup caret">
<div class="section smoothCaret" section="">
<div class="title">smooth caret</div>
<div class="groupTitle">smooth caret</div>
<div class="text">
The caret will move smoothly between letters and words.
</div>
@ -980,7 +980,7 @@
</div>
</div>
<div class="section caretStyle" section="">
<div class="title">caret style</div>
<div class="groupTitle">caret style</div>
<div class="text">Change the style of the caret during the test.</div>
<div class="buttons">
<div
@ -1026,7 +1026,7 @@
</div>
</div>
<div class="section paceCaret" section="">
<div class="title">pace caret</div>
<div class="groupTitle">pace caret</div>
<div class="text">
Displays a second caret that moves at constant speed. The 'average'
option averages the speed of last 10 results. The 'daily' option takes
@ -1100,7 +1100,7 @@
</div>
</div>
<div class="section repeatedPace" section="">
<div class="title">repeated pace</div>
<div class="groupTitle">repeated pace</div>
<div class="text">
When repeating a test, a pace caret will automatically be enabled for
one test with the speed of your previous test. It does not override the
@ -1126,7 +1126,7 @@
</div>
</div>
<div class="section paceCaretStyle" section="">
<div class="title">pace caret style</div>
<div class="groupTitle">pace caret style</div>
<div class="text">
Change the style of the pace caret during the test.
</div>
@ -1182,7 +1182,7 @@
</div>
<div class="settingsGroup appearance">
<div class="section timerStyle" section="">
<div class="title">timer/progress style</div>
<div class="groupTitle">timer/progress style</div>
<div class="text">
Change the style of the timer/progress during a timed test.
</div>
@ -1214,7 +1214,7 @@
</div>
</div>
<div class="section timerColor" section="">
<div class="title">timer/progress color</div>
<div class="groupTitle">timer/progress color</div>
<div class="text">
Change the color of the timer/progress number/bar and live wpm number.
</div>
@ -1254,7 +1254,7 @@
</div>
</div>
<div class="section timerOpacity" section="">
<div class="title">timer/progress opacity</div>
<div class="groupTitle">timer/progress opacity</div>
<div class="text">
Change the opacity of the timer/progress number/bar and live wpm number.
</div>
@ -1294,7 +1294,7 @@
</div>
</div>
<div class="section highlightMode" section="">
<div class="title">highlight mode</div>
<div class="groupTitle">highlight mode</div>
<div class="text">Change what is highlighted during the test.</div>
<div class="buttons">
<div
@ -1324,7 +1324,7 @@
</div>
</div>
<div class="section tapeMode" section="">
<div class="title">tape mode</div>
<div class="groupTitle">tape mode</div>
<div class="text">
Only shows one line which scrolls horizontally. Setting this to 'word'
will make it scroll after every word and 'letter' will scroll after
@ -1349,7 +1349,7 @@
</div>
</div>
<div class="section smoothLineScroll">
<div class="title">smooth line scroll</div>
<div class="groupTitle">smooth line scroll</div>
<div class="text">
When enabled, the line transition will be animated.
</div>
@ -1373,7 +1373,7 @@
</div>
</div>
<div class="section showAllLines">
<div class="title">show all lines</div>
<div class="groupTitle">show all lines</div>
<div class="text">
When enabled, the website will show all lines for word, custom and quote
mode tests - otherwise the lines will be limited to 3, and will
@ -1400,7 +1400,7 @@
</div>
</div>
<div class="section alwaysShowDecimalPlaces">
<div class="title">always show decimal places</div>
<div class="groupTitle">always show decimal places</div>
<div class="text">
Always shows decimal places for values on the result page, without the
need to hover over the stats.
@ -1425,7 +1425,7 @@
</div>
</div>
<div class="section alwaysShowCPM">
<div class="title">always show cpm</div>
<div class="groupTitle">always show cpm</div>
<div class="text">
Always shows characters per minute calculation instead of the default
words per minute calculation.
@ -1450,7 +1450,7 @@
</div>
</div>
<div class="section startGraphsAtZero">
<div class="title">start graphs at zero</div>
<div class="groupTitle">start graphs at zero</div>
<div class="text">
Force graph axis to always start at zero, no matter what the data is.
Turning this off may exaggerate the value changes.
@ -1475,7 +1475,7 @@
</div>
</div>
<div class="section fontSize">
<div class="title">font size</div>
<div class="groupTitle">font size</div>
<div class="text">Change the font size of the test words.</div>
<div class="inputAndButton">
<input
@ -1490,12 +1490,12 @@
</div>
</div>
<div class="section fontFamily fullWidth">
<div class="title">font family</div>
<div class="groupTitle">font family</div>
<!-- <div class="text">Change the font family for the site</div> -->
<div class="buttons"></div>
</div>
<div class="section pageWidth">
<div class="title">page width</div>
<div class="groupTitle">page width</div>
<div class="text">Control the width of the content.</div>
<div class="buttons">
<div class="button" pageWidth="100" tabindex="0" onclick="this.blur();">
@ -1516,7 +1516,7 @@
</div>
</div>
<div class="section keymapMode">
<div class="title">keymap</div>
<div class="groupTitle">keymap</div>
<div class="text">
Displays your current layout while taking a test. React shows what you
pressed and Next shows what you need to press next.
@ -1557,12 +1557,12 @@
</div>
</div>
<div class="section keymapLayout">
<div class="title">keymap layout</div>
<div class="groupTitle">keymap layout</div>
<div class="text">Controls which layout is displayed on the keymap.</div>
<select></select>
</div>
<div class="section keymapStyle fullWidth">
<div class="title">keymap style</div>
<div class="groupTitle">keymap style</div>
<!-- <div class="text">Displays the keymap in a different style.</div> -->
<div class="buttons">
<div
@ -1608,7 +1608,7 @@
</div>
</div>
<div class="section keymapLegendStyle fullWidth">
<div class="title">keymap legend style</div>
<div class="groupTitle">keymap legend style</div>
<div class="buttons">
<div
class="button"
@ -1645,7 +1645,7 @@
</div>
</div>
<div class="section keymapShowTopRow fullWidth">
<div class="title">keymap show top row</div>
<div class="groupTitle">keymap show top row</div>
<div class="buttons">
<div
class="button"
@ -1691,7 +1691,7 @@
</div>
<div class="settingsGroup theme">
<div class="section flipTestColors">
<div class="title">flip test colors</div>
<div class="groupTitle">flip test colors</div>
<div class="text">
By default, typed text is brighter than the future text. When enabled,
the colors will be flipped and the future text will be brighter than the
@ -1717,7 +1717,7 @@
</div>
</div>
<div class="section colorfulMode">
<div class="title">colorful mode</div>
<div class="groupTitle">colorful mode</div>
<div class="text">
When enabled, the test words will use the main color, instead of the
text color, making the website more colorful.
@ -1742,7 +1742,7 @@
</div>
</div>
<div class="section customBackgroundSize">
<div class="title">custom background</div>
<div class="groupTitle">custom background</div>
<div class="text">
Set an image url to be a custom background image. Cover fits the image
to cover the screen. Contain fits the image to be fully visible. Max
@ -1790,7 +1790,7 @@
</div>
</div>
<div class="section customBackgroundFilter fullWidth">
<div class="title">custom background filter</div>
<div class="groupTitle">custom background filter</div>
<div class="text">Apply various effects to the custom background.</div>
<div class="groups">
<div class="group blur">
@ -1816,7 +1816,7 @@
</div>
</div>
<div class="section autoSwitchTheme">
<div class="title">auto switch theme</div>
<div class="groupTitle">auto switch theme</div>
<div class="text">
Enabling this will automatically switch the theme between light and dark
depending on the system theme (this will not override custom theme).
@ -1847,7 +1847,7 @@
<div><select class="dark"></select></div>
</div>
<div class="section randomTheme fullWidth">
<div class="title">randomize theme</div>
<div class="groupTitle">randomize theme</div>
<div class="text">
After completing a test, the theme will be set to a random one. The
random themes are not saved to your config. If set to 'favorite' only
@ -1907,7 +1907,7 @@
</div>
</div>
<div class="section themes fullWidth">
<div class="title">theme</div>
<div class="groupTitle">theme</div>
<div class="tabs">
<div class="button" tab="preset" tabindex="0" onclick="this.blur();">
preset
@ -2153,7 +2153,7 @@
</div>
<div class="settingsGroup hideElements">
<div class="section showLiveWpm">
<div class="title">live wpm</div>
<div class="groupTitle">live wpm</div>
<div class="text">
Displays a live WPM speed during the test. Updates once every second.
</div>
@ -2177,7 +2177,7 @@
</div>
</div>
<div class="section showLiveAcc">
<div class="title">live accuracy</div>
<div class="groupTitle">live accuracy</div>
<div class="text">Displays live accuracy during the test.</div>
<div class="buttons">
<div
@ -2199,7 +2199,7 @@
</div>
</div>
<div class="section showLiveBurst">
<div class="title">live burst</div>
<div class="groupTitle">live burst</div>
<div class="text">
Displays live burst during the test of the last word you typed.
</div>
@ -2223,7 +2223,7 @@
</div>
</div>
<div class="section showTimerProgress">
<div class="title">timer/progress</div>
<div class="groupTitle">timer/progress</div>
<div class="text">
Displays a live timer for timed tests and progress for words/custom
tests.
@ -2248,7 +2248,7 @@
</div>
</div>
<div class="section showKeyTips">
<div class="title">key tips</div>
<div class="groupTitle">key tips</div>
<div class="text">Shows the keybind tips at the bottom of the page.</div>
<div class="buttons">
<div
@ -2270,7 +2270,7 @@
</div>
</div>
<div class="section showOutOfFocusWarning">
<div class="title">out of focus warning</div>
<div class="groupTitle">out of focus warning</div>
<div class="text">
Shows an out of focus reminder after 1 second of being 'out of focus'
(not being able to type).
@ -2295,7 +2295,7 @@
</div>
</div>
<div class="section capsLockWarning">
<div class="title">caps lock warning</div>
<div class="groupTitle">caps lock warning</div>
<div class="text">Displays a warning when caps lock is on.</div>
<div class="buttons">
<div
@ -2317,7 +2317,7 @@
</div>
</div>
<div class="section showAverage">
<div class="title">average</div>
<div class="groupTitle">average</div>
<div class="text">
Displays your average wpm and/or accuracy over the last 10 tests.
</div>
@ -2365,7 +2365,7 @@
</div>
<div class="settingsGroup dangerZone">
<div class="section importexportSettings">
<div class="title">import/export settings</div>
<div class="groupTitle">import/export settings</div>
<div class="text">Import or export the settings as JSON.</div>
<div class="buttons">
<div
@ -2387,7 +2387,7 @@
</div>
</div>
<div class="section ads">
<div class="title">ads</div>
<div class="groupTitle">ads</div>
<div class="text">
You can disable or enable ads at any time. "Result" will show one ad on
the result page, "on" will add floating vertical banners, and "sellout"
@ -2412,7 +2412,7 @@
</div>
</div>
<div class="section apeKeys needsAccount hidden">
<div class="title">ape keys</div>
<div class="groupTitle">ape keys</div>
<div class="text">
Generate Ape Keys to access certain API endpoints
<span style="display: inline-flex">
@ -2436,7 +2436,7 @@
</div>
</div>
<div class="section updateCookiePreferences">
<div class="title">update cookie preferences</div>
<div class="groupTitle">update cookie preferences</div>
<div class="text">
If you changed your mind about which cookies you consent to, you can
change your preferences here.
@ -2446,7 +2446,7 @@
</div>
</div>
<div class="section updateAccountName needsAccount hidden">
<div class="title">update account name</div>
<div class="groupTitle">update account name</div>
<div class="text">
Change the name of your account. You can only do this once every 30
days.
@ -2463,7 +2463,7 @@
</div>
</div>
<div class="section passwordAuthSettings needsAccount hidden">
<div class="title">password authentication settings</div>
<div class="groupTitle">password authentication settings</div>
<div class="text">
Add password authentication, update your password or email.
</div>
@ -2495,7 +2495,7 @@
</div>
</div>
<div class="section googleAuthSettings needsAccount hidden">
<div class="title">google authentication settings</div>
<div class="groupTitle">google authentication settings</div>
<div class="text">Add or remove Google authentication.</div>
<div class="buttons vertical">
<div
@ -2517,7 +2517,7 @@
</div>
</div>
<div class="section resetSettings">
<div class="title">reset settings</div>
<div class="groupTitle">reset settings</div>
<div class="text">
Resets settings to the default (but doesn't touch your tags). Warning:
you can't undo this action!
@ -2534,7 +2534,7 @@
</div>
</div>
<div class="section resetPersonalBests needsAccount hidden">
<div class="title">reset personal bests</div>
<div class="groupTitle">reset personal bests</div>
<div class="text">
Resets all your personal bests (but doesn't delete any tests from your
history). Warning: you can't undo this action!
@ -2551,7 +2551,7 @@
</div>
</div>
<div class="section resetAccount needsAccount hidden">
<div class="title">reset account</div>
<div class="groupTitle">reset account</div>
<div class="text">Completely resets your account to a blank state.</div>
<div class="buttons">
<div
@ -2565,7 +2565,7 @@
</div>
</div>
<div class="section deleteAccount needsAccount hidden">
<div class="title">delete account</div>
<div class="groupTitle">delete account</div>
<div class="text">Deletes your account and all data connected to it.</div>
<div class="buttons">
<div