monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-23 00:37:29 +08:00
Code Issues Packages Projects Releases Wiki Activity
monkeytype/public/css/style.scss

3075 lines
55 KiB
SCSS
Raw Normal View History

changed IBM Plex Mono to IBM Plex Sans
2020-10-22 11:52:48 +08:00
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Sans:wght@600&family=Inconsolata&family=Roboto+Mono&family=Source+Code+Pro&display=swap");
prettier
2020-08-02 10:54:43 +08:00
@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
@import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
Added Itim Font
2020-09-27 07:01:03 +08:00
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
:root {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
--roundness: 0.25rem;
fixed wrong font
2020-07-26 08:18:08 +08:00
--font: "Roboto Mono";
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
::placeholder {
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
color: var(--sub-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
opacity: 1;
/* Firefox */
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
ff scrollbar
2020-07-04 23:44:47 +08:00
html {
@extend .ffscroll;
}
.ffscroll {
scrollbar-width: thin;
scrollbar-color: var(--sub-color) transparent;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
input {
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
outline: none;
border: none;
border-radius: var(--roundness);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
color: var(--text-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.5rem;
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
font-size: 1rem;
line-height: 1rem;
preparing for custom fonts
2020-07-26 08:13:36 +08:00
font-family: var(--font);
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
}
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
styles done - ready for js
2020-06-11 09:59:22 +08:00
input[type="color"] {
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
-webkit-appearance: none;
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
padding: 0;
width: 100%;
more css refactoring
2020-07-03 02:35:41 +08:00
// height: 32px;
height: 1.8rem;
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
overflow: hidden;
styles done - ready for js
2020-06-11 09:59:22 +08:00
border-radius: var(--roundness);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
styles done - ready for js
2020-06-11 09:59:22 +08:00
input[type="color"]::-webkit-color-swatch-wrapper {
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
padding: 0;
styles done - ready for js
2020-06-11 09:59:22 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
styles done - ready for js
2020-06-11 09:59:22 +08:00
input[type="color"]::-webkit-color-swatch {
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
border: none;
styles done - ready for js
2020-06-11 09:59:22 +08:00
}
removed spinboxes
2020-08-12 05:17:53 +08:00
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
.colorPicker {
text-align: center;
will-change: transform;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: transform 0.2s ease-in-out;
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
overflow: hidden;
border-radius: var(--roundness);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
& label {
position: absolute;
width: 100%;
more css refactoring
2020-07-03 02:35:41 +08:00
// height: 32px;
line-height: 1.8rem;
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
display: flex;
align-items: center;
justify-content: center;
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
padding: auto;
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
color: var(--bg-color);
styles done - ready for js
2020-06-11 09:59:22 +08:00
cursor: pointer;
Add values to custom color buttons
2020-06-27 11:46:18 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
& [for="--bg-color"] {
change bg picker outline and text to text-color
2020-07-02 08:51:26 +08:00
color: var(--text-color);
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
& #--bg-color {
bg input style updated to sub border and text outside
2020-07-02 09:49:46 +08:00
border: 1px solid var(--sub-color);
styles done - ready for js
2020-06-11 09:59:22 +08:00
}
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
body {
margin: 0;
Fix Bingsu and change layout to be able to scale
2020-05-29 07:39:51 +08:00
padding: 0;
Fix sub vs main color issues, fixed bingsu background bug by changing body to min-height to support any height of page
2020-05-29 06:53:36 +08:00
min-height: 100vh;
initial commit
2020-05-09 08:29:47 +08:00
background: var(--bg-color);
preparing for custom fonts
2020-07-26 08:13:36 +08:00
font-family: var(--font);
initial commit
2020-05-09 08:29:47 +08:00
color: var(--main-color);
added an option to go back to the previous style and show all lines at once
2020-07-15 05:50:42 +08:00
// overflow-x: hidden;
initial commit
2020-05-09 08:29:47 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
html {
overflow-y: scroll;
}
added account page graphs
2020-05-10 09:04:05 +08:00
added a custom style to the scrollbar
2020-06-09 04:33:43 +08:00
/* width */
::-webkit-scrollbar {
ff scrollbar
2020-07-04 23:44:47 +08:00
width: 7px;
added a custom style to the scrollbar
2020-06-09 04:33:43 +08:00
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--sub-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
rounded the scrollbar a bit
2020-06-09 04:45:28 +08:00
border-radius: 2px !important;
added a custom style to the scrollbar
2020-06-09 04:33:43 +08:00
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--main-color);
}
initial commit
2020-05-09 08:29:47 +08:00
a {
color: var(--sub-color);
transition: 0.25s;
}
a:hover {
color: var(--main-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.notification {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
position: fixed;
background: var(--main-color);
color: var(--bg-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.5rem 1rem;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
border-radius: var(--roundness);
left: 50%;
z-index: 9999;
transform: translateX(-50%);
top: -5rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#backgroundLoader {
added background loading indicator
2020-06-13 00:30:20 +08:00
height: 3px;
position: fixed;
width: 100%;
background: var(--main-color);
animation-name: loader;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.38, 0.16, 0.57, 0.82);
leaderboard now pull data from db
2020-07-04 03:10:40 +08:00
z-index: 9999;
added background loading indicator
2020-06-13 00:30:20 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
@keyframes loader {
0% {
added background loading indicator
2020-06-13 00:30:20 +08:00
width: 0;
left: 0;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
50% {
width: 100%;
added background loading indicator
2020-06-13 00:30:20 +08:00
left: 0;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
100% {
added background loading indicator
2020-06-13 00:30:20 +08:00
width: 0;
left: 100%;
}
}
added popup for adding tags
2020-06-12 02:19:39 +08:00
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
#leaderboardsWrapper {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
#leaderboards {
made leaderboards larged, reduced font size
2020-07-05 00:12:58 +08:00
width: 85vw;
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
height: calc(100vh - 10rem);
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
gap: 2rem;
grid-template-rows: 3rem auto;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas:
"title buttons"
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
"tables tables";
grid-template-columns: 1fr 1fr;
.mainTitle {
font-size: 3rem;
line-height: 3rem;
grid-area: title;
}
.title {
font-size: 2rem;
line-height: 2rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-bottom: 0.5rem;
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
}
.tables {
grid-area: tables;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
margin-bottom: 2rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
font-size: 0.8rem;
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
added a subtitle that says when the lb will reset
2020-07-06 00:02:02 +08:00
.titleAndTable {
display: grid;
.title {
grid-area: 1/1;
}
.subtitle {
grid-area: 1/1;
align-self: center;
justify-self: right;
color: var(--sub-color);
}
}
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
.globalTableWrapper,
.dailyTableWrapper {
height: calc(100vh - 22rem);
ff scrollbar
2020-07-04 23:44:47 +08:00
@extend .ffscroll;
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
overflow-y: scroll;
added a subtitle that says when the lb will reset
2020-07-06 00:02:02 +08:00
overflow-x: hidden;
changed the way leaderboards scrol
2020-07-04 09:44:21 +08:00
}
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
added crown for the first person on the lb
2020-07-07 05:51:14 +08:00
tr td:first-child {
text-align: center;
}
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
td {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.25rem 0.5rem;
highlighting current user on the lb
2020-07-04 21:15:43 +08:00
&.me {
color: var(--main-color);
font-weight: 900;
}
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
}
thead {
color: var(--sub-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
font-size: 0.75rem;
added sticky headers and footers to the lb table
2020-07-17 07:18:58 +08:00
td {
updated not qualified lb styling
2020-08-15 23:33:56 +08:00
padding: 0.5rem;
added sticky headers and footers to the lb table
2020-07-17 07:18:58 +08:00
background: var(--bg-color);
position: -webkit-sticky;
position: sticky;
top: 0;
}
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
}
tbody {
color: var(--text-color);
tr:nth-child(odd) td {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
}
}
added sticky headers and footers to the lb table
2020-07-17 07:18:58 +08:00
tfoot {
td {
updated not qualified lb styling
2020-08-15 23:33:56 +08:00
padding: 0.5rem;
added sticky headers and footers to the lb table
2020-07-17 07:18:58 +08:00
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: var(--bg-color);
updated not qualified lb styling
2020-08-15 23:33:56 +08:00
color: var(--sub-color);
added sticky headers and footers to the lb table
2020-07-17 07:18:58 +08:00
z-index: 4;
}
}
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
}
}
.buttons {
grid-area: buttons;
display: -ms-grid;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
align-self: center;
.buttonGroup {
display: grid;
grid-auto-flow: column;
gap: 1rem;
now only using time 15 and 60 leaderboards
2020-07-08 07:28:40 +08:00
grid-area: 1/2;
added leaderboards skeleton
2020-07-04 02:30:05 +08:00
}
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#tagsWrapper {
added popup for adding tags
2020-06-12 02:19:39 +08:00
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#tagsEdit {
added popup for adding tags
2020-06-12 02:19:39 +08:00
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
overflow-y: scroll;
}
}
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
#customTextPopupWrapper {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
#customTextPopup {
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
width: 60vw;
textarea {
background: var(--bg-color);
padding: 1rem;
color: var(--main-color);
border: none;
outline: none;
font-size: 1rem;
preparing for custom fonts
2020-07-26 08:13:36 +08:00
font-family: var(--font);
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
width: 100%;
border-radius: var(--roundness);
resize: vertical;
height: 200px;
color: var(--text-color);
}
.inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
align-items: center;
style update
2020-10-06 01:01:45 +08:00
justify-items: left;
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
}
.check {
only showing word count when random is enabled, added random description
2020-08-03 01:26:15 +08:00
span {
display: block;
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
font-size: 0.76rem;
only showing word count when random is enabled, added random description
2020-08-03 01:26:15 +08:00
color: var(--sub-color);
margin-left: 1.5rem;
}
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
input {
margin: 0 !important;
cursor: pointer;
width: 0;
height: 0;
display: none;
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
& ~ .customTextRandomCheckbox {
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
width: 12px;
height: 12px;
prettier
2020-08-02 10:54:43 +08:00
background: rgba(0, 0, 0, 0.1);
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
border-radius: 2px;
prettier
2020-08-02 10:54:43 +08:00
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
display: inline-block;
prettier
2020-08-02 10:54:43 +08:00
margin: 0 0.5rem 0 0.25rem;
transition: 0.25s;
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
}
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
&:checked ~ .customTextRandomCheckbox {
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
background: var(--main-color);
}
}
}
[#390] Typography Symbols are not mapped to universal keyboard standards. Replaces specific typography characters with universal standards. This is available to the user by a default checked checkbox. The option is given to the user rather than always automatically applied because: a) I'm not 100% sure other languages or keyboard layouts do not use these typography symbols as standard inputs. b) There may be some who enjoy the challenge of entering Shift+Option+[ just to get a fancy quote mark.
2020-10-01 09:11:25 +08:00
.typographyCheck {
style update
2020-10-06 01:01:45 +08:00
grid-row: 2;
grid-column: 1/3;
[#390] Typography Symbols are not mapped to universal keyboard standards. Replaces specific typography characters with universal standards. This is available to the user by a default checked checkbox. The option is given to the user rather than always automatically applied because: a) I'm not 100% sure other languages or keyboard layouts do not use these typography symbols as standard inputs. b) There may be some who enjoy the challenge of entering Shift+Option+[ just to get a fancy quote mark.
2020-10-01 09:11:25 +08:00
span {
display: block;
font-size: 0.76rem;
color: var(--sub-color);
margin-left: 1.5rem;
}
input {
margin: 0 !important;
cursor: pointer;
width: 0;
height: 0;
display: none;
& ~ .customTextTypographyCheckbox {
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
display: inline-block;
margin: 0 0.5rem 0 0.25rem;
transition: 0.25s;
}
&:checked ~ .customTextTypographyCheckbox {
background: var(--main-color);
}
}
}
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
}
}
added custom word and time popup
2020-07-31 03:16:07 +08:00
#customMode2PopupWrapper {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
#customMode2Popup {
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
showing a tip about infinite tests
2020-10-20 01:30:50 +08:00
width: 400px;
added custom word and time popup
2020-07-31 03:16:07 +08:00
.title {
font-size: 1.5rem;
color: var(--sub-color);
}
showing a tip about infinite tests
2020-10-20 01:30:50 +08:00
.tip{
font-size: .75rem;
color: var(--sub-color);
}
added custom word and time popup
2020-07-31 03:16:07 +08:00
}
}
added a custom text popup that allows to randomise words with a certain number of words
2020-07-25 22:16:40 +08:00
added an option to share custom themes
2020-07-14 05:47:28 +08:00
#customThemeShareWrapper {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
#customThemeShare {
width: 50vw;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
overflow-y: scroll;
}
}
added popup for adding tags
2020-06-12 02:19:39 +08:00
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#resultEditTagsPanelWrapper {
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: center;
padding: 5rem 0;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#resultEditTagsPanel {
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
overflow-y: scroll;
width: 500px;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttons {
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#versionHistoryWrapper {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: start;
padding: 5rem 0;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#versionHistory {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
width: 75vw;
height: 100%;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
ff scrollbar
2020-07-04 23:44:47 +08:00
@extend .ffscroll;
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
overflow-y: scroll;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.tip {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
text-align: center;
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.releases {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
display: grid;
gap: 2rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.release {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
display: grid;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas:
"title date"
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
"body body";
.title {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
grid-area: title;
font-size: 2rem;
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.date {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
grid-area: date;
text-align: right;
color: var(--sub-color);
align-self: center;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.body {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
grid-area: body;
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
color: var(--text-color);
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:last-child {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
margin-bottom: 2rem;
}
}
}
}
}
initial commit
2020-05-09 08:29:47 +08:00
#commandLineWrapper {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: start;
padding: 5rem 0;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#commandInput {
added media queries to support small widths
2020-07-17 05:54:33 +08:00
width: 700px;
added email sending to the command line email sending is no longer using a function, just simply pushes to the database
2020-05-13 23:34:20 +08:00
background: var(--bg-color);
border-radius: var(--roundness);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added the ability to change custom pace caret speed from the command line added the ability to change custom word amout and time from the command line
2020-09-22 03:03:51 +08:00
input {
added email sending to the command line email sending is no longer using a function, just simply pushes to the database
2020-05-13 23:34:20 +08:00
background: var(--bg-color);
padding: 1rem;
color: var(--main-color);
border: none;
outline: none;
font-size: 1rem;
preparing for custom fonts
2020-07-26 08:13:36 +08:00
font-family: var(--font);
added email sending to the command line email sending is no longer using a function, just simply pushes to the database
2020-05-13 23:34:20 +08:00
width: 100%;
border-radius: var(--roundness);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.shiftEnter {
added email sending to the command line email sending is no longer using a function, just simply pushes to the database
2020-05-13 23:34:20 +08:00
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
text-align: center;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
#commandLine {
added media queries to support small widths
2020-07-17 05:54:33 +08:00
width: 700px;
initial commit
2020-05-09 08:29:47 +08:00
background: var(--bg-color);
border-radius: var(--roundness);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
input {
background: var(--bg-color);
padding: 1rem;
color: var(--main-color);
border: none;
outline: none;
font-size: 1rem;
preparing for custom fonts
2020-07-26 08:13:36 +08:00
font-family: var(--font);
initial commit
2020-05-09 08:29:47 +08:00
width: 100%;
added db connection, new highscore display
2020-05-10 06:33:48 +08:00
border-radius: var(--roundness);
initial commit
2020-05-09 08:29:47 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
.separator {
background: black;
width: 100%;
height: 1px;
margin-bottom: 0.5rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
.listTitle {
color: var(--main-color);
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
.suggestions {
added a scrollbar to the command line
2020-06-30 04:46:26 +08:00
display: block;
ff scrollbar
2020-07-04 23:44:47 +08:00
@extend .ffscroll;
added a scrollbar to the command line
2020-06-30 04:46:26 +08:00
overflow-y: scroll;
max-height: calc(100vh - 10rem - 3rem);
initial commit
2020-05-09 08:29:47 +08:00
display: grid;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
.entry {
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.fas {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-right: 0.5rem;
tags can now be toggled through the command line
2020-06-24 00:46:18 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:last-child {
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
border-radius: 0 0 var(--roundness) var(--roundness);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
fixed a bug that would cause the command line to not work if the mouse is hovering over an option
2020-06-27 08:01:55 +08:00
&.activeMouse {
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
color: var(--bg-color);
background: var(--main-color);
initial commit
2020-05-09 08:29:47 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
fixed a bug that would cause the command line to not work if the mouse is hovering over an option
2020-06-27 08:01:55 +08:00
&.activeKeyboard {
added mouse support to the command line changed the behaviour of the escape key to now go back to a previous command list
2020-05-28 06:07:41 +08:00
color: var(--bg-color);
background: var(--main-color);
fixed a bug that would cause the command line to not work if the mouse is hovering over an option
2020-06-27 08:01:55 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
fixed a bug that would cause the command line to not work if the mouse is hovering over an option
2020-06-27 08:01:55 +08:00
color: var(--text-color);
background: var(--sub-color);
added mouse support to the command line changed the behaviour of the escape key to now go back to a previous command list
2020-05-28 06:07:41 +08:00
cursor: pointer;
}
initial commit
2020-05-09 08:29:47 +08:00
}
}
}
}
#timerWrapper {
opacity: 0;
transition: 0.25s;
z-index: -1;
fixed #5
2020-05-17 19:40:58 +08:00
position: relative;
z-index: 99;
initial commit
2020-05-09 08:29:47 +08:00
}
#timer {
position: fixed;
top: 0;
updated timer bar to start filled
2020-06-16 05:52:47 +08:00
left: 0;
width: 100vw;
initial commit
2020-05-09 08:29:47 +08:00
/* height: 0.5rem; */
height: 0.5rem;
added timer color setting
2020-07-12 07:41:14 +08:00
background: black;
initial commit
2020-05-09 08:29:47 +08:00
/* background: #0f0f0f; */
/* background: red; */
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
// transition: 1s linear;
initial commit
2020-05-09 08:29:47 +08:00
z-index: -1;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#liveWpm,
#timerNumber {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
position: relative;
initial commit
2020-05-09 08:29:47 +08:00
font-size: 10rem;
color: black;
added livewpm config punctuation now shows on account page punctuation mode is sent to database added command to hide key tips
2020-05-11 07:07:36 +08:00
opacity: 0;
initial commit
2020-05-09 08:29:47 +08:00
width: 100%;
centered livewpm
2020-05-15 10:26:24 +08:00
left: 0;
initial commit
2020-05-09 08:29:47 +08:00
text-align: center;
z-index: -1;
height: 0;
transition: 0.25s;
added timer styles
2020-06-16 06:13:40 +08:00
line-height: 0;
initial commit
2020-05-09 08:29:47 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#timerNumber {
fixed timernumber centering
2020-09-05 04:11:24 +08:00
width: 0;
height: 0;
margin: 0 auto;
display: grid;
justify-content: center;
added timer color setting
2020-07-12 07:41:14 +08:00
bottom: 6rem;
added timer styles
2020-06-16 06:13:40 +08:00
transition: none;
}
added timer color setting
2020-07-12 07:41:14 +08:00
#liveWpm.timerMain,
#timerNumber.timerMain {
color: var(--main-color);
}
#timer.timerMain {
background: var(--main-color);
}
#liveWpm.timerSub,
#timerNumber.timerSub {
color: var(--sub-color);
}
#timer.timerSub {
background: var(--sub-color);
}
#liveWpm.timerText,
#timerNumber.timerText {
color: var(--text-color);
}
#timer.timerText {
background: var(--text-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#liveWpm {
added timer color setting
2020-07-12 07:41:14 +08:00
top: 6rem;
moved live wpm below keymap, catching any error while flashing keymap key
2020-08-03 05:34:43 +08:00
&.lower {
top: 15rem;
}
added timer styles
2020-06-16 06:13:40 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
#centerContent {
made the content a bit wider
2020-06-01 03:32:08 +08:00
max-width: 1000px;
allowed the content to be even smaller
2020-10-19 01:13:44 +08:00
// min-width: 500px;
initial commit
2020-05-09 08:29:47 +08:00
margin: 0 auto;
display: grid;
grid-auto-flow: row;
Fix Bingsu and change layout to be able to scale
2020-05-29 07:39:51 +08:00
min-height: 100vh;
padding: 2rem;
reworked the whole settings page
2020-05-28 07:35:41 +08:00
gap: 2rem;
initial commit
2020-05-09 08:29:47 +08:00
align-items: center;
z-index: 999;
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
grid-template-rows: auto 1fr auto;
added a setting to control the width of the content
2020-10-07 00:28:03 +08:00
&.wide125{
max-width: 1250px;
}
&.wide150{
max-width: 1500px;
}
&.wide200{
max-width: 2000px;
}
&.widemax{
max-width: unset;
}
initial commit
2020-05-09 08:29:47 +08:00
}
#caret {
height: 1.5rem;
background: var(--caret-color);
animation-name: caretFlash;
/* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
animation-iteration-count: infinite;
animation-duration: 1s;
position: absolute;
added db connection, new highscore display
2020-05-10 06:33:48 +08:00
border-radius: var(--roundness);
change the smooth caret behaviour added favico
2020-05-10 02:47:11 +08:00
// transition: 0.05s;
Fix caret scaling and size support for all carets
2020-05-29 12:48:21 +08:00
transform-origin: top left;
added pace caret small indentation changes
2020-09-21 06:06:13 +08:00
}
#paceCaret{
height: 1.5rem;
// background: var(--sub-color);
background: var(--sub-color);
opacity: 0.5;
position: absolute;
border-radius: var(--roundness);
// transition: 0.25s;
transform-origin: top left;
width: 2px;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added pace caret small indentation changes
2020-09-21 06:06:13 +08:00
#caret, #paceCaret{
added off caret style
2020-09-25 04:42:17 +08:00
&.off {
width: 0;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.default {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
width: 2px;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.block {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
width: 0.7em;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
margin-left: 0.25em;
border-radius: 0;
z-index: -1;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.outline {
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
@extend #caret, .block;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
background: transparent;
border: 1px solid var(--caret-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.underline {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
height: 2px;
width: 0.8em;
margin-top: 1.3em;
margin-left: 0.3em;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.size125 {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
margin-top: 1.8em;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.size15 {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
margin-top: 2.1em;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.size2 {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
margin-top: 2.7em;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.size125 {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
transform: scale(1.25);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.size15 {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
transform: scale(1.45);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.size2 {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
transform: scale(1.9);
}
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
@keyframes caretFlash {
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
0%,
100% {
Fix caret animation to work with all styles
2020-05-29 12:39:51 +08:00
opacity: 0;
initial commit
2020-05-09 08:29:47 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
50% {
Fix caret animation to work with all styles
2020-05-29 12:39:51 +08:00
opacity: 1;
initial commit
2020-05-09 08:29:47 +08:00
}
}
#menu {
font-size: 1rem;
line-height: 1rem;
color: var(--sub-color);
display: grid;
grid-auto-flow: column;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
aligned the menu to the right, removed margin on menu buttons
2020-05-24 21:16:09 +08:00
// margin-bottom: -0.4rem;
initial commit
2020-05-09 08:29:47 +08:00
width: fit-content;
width: -moz-fit-content;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
/* transition: 0.25s; */
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.button.discord {
&.discord {
added discord link
2020-05-22 18:51:05 +08:00
position: relative;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&::after {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
width: 0.5rem;
height: 0.5rem;
added discord link
2020-05-22 18:51:05 +08:00
content: "";
position: absolute;
changed the color of the discord notification
2020-05-30 21:26:38 +08:00
background: var(--main-color);
added discord link
2020-05-22 18:51:05 +08:00
border-radius: 1rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
top: 0.25rem;
right: 0.25rem;
added discord link
2020-05-22 18:51:05 +08:00
border: 2px solid var(--bg-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.dotHidden::after {
added an option to hide the discord dot
2020-06-06 09:25:12 +08:00
background: transparent;
border-color: transparent;
}
added discord link
2020-05-22 18:51:05 +08:00
}
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.icon-button {
.icon {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
display: grid;
align-items: center;
justify-items: center;
text-align: center;
width: 1.25rem;
height: 1.25rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.text {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
font-size: 0.65rem;
line-height: 0.65rem;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
align-self: center;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-left: 0.25rem;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
cursor: pointer;
color: var(--main-color);
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.separator {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
width: 2px;
height: 1rem;
background-color: var(--sub-color);
}
initial commit
2020-05-09 08:29:47 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#top.focus #menu .icon-button.discord::after {
red discord icon badge is now hidden when focus is triggered
2020-05-22 19:09:37 +08:00
background: transparent;
}
initial commit
2020-05-09 08:29:47 +08:00
#top.focus #menu {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
color: transparent !important;
}
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
#top.focus #menu .icon-button {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
color: transparent !important;
initial commit
2020-05-09 08:29:47 +08:00
}
#top {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas: "logo menu config";
initial commit
2020-05-09 08:29:47 +08:00
line-height: 2.3rem;
font-size: 2.3rem;
/* text-align: center; */
added settings page
2020-05-15 05:22:11 +08:00
transition: 0.25s;
initial commit
2020-05-09 08:29:47 +08:00
padding: 0 5px;
display: grid;
grid-auto-flow: column;
grid-template-columns: auto 1fr auto;
z-index: 2;
align-items: center;
gap: 0.5rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.logo {
aligned menu with the logo
2020-08-28 03:56:11 +08:00
margin-bottom: 0.6rem;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
white-space: nowrap;
logo is not selectable
2020-08-28 03:56:44 +08:00
user-select: none;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.top {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
font-size: 0.65rem;
line-height: 0.65rem;
margin-bottom: -0.4rem;
margin-left: -0.1rem;
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.bottom {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
margin-left: -0.15rem;
color: var(--main-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
cursor: pointer;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.config {
added media queries to support small widths
2020-07-17 05:54:33 +08:00
grid-area: config;
justify-self: right;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
display: grid;
grid-auto-flow: row;
grid-gap: 0.2rem;
added an option to set the quote length
2020-09-27 03:16:33 +08:00
// width: min-content;
// width: -moz-min-content;
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
transition: 0.25s;
/* margin-bottom: 0.1rem; */
justify-items: self-end;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.group {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
transition: 0.25s;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.title {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--sub-color);
font-size: 0.5rem;
line-height: 0.5rem;
margin-bottom: 0.15rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttons {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
font-size: 0.7rem;
line-height: 0.7rem;
display: flex;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.punctuationMode {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
margin-bottom: -0.1rem;
}
Add Numbers Toggle Similar to punctuation toggle, but for dem digits ( no integration w/ personal bests and db storage)
2020-09-03 17:19:53 +08:00
.numbersMode {
margin-bottom: -0.1rem;
}
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.result {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
display: grid;
grid-auto-flow: column;
grid-gap: 1rem;
width: min-content;
width: -moz-min-content;
transition: 0.25s;
grid-column: 3/4;
grid-row: 1/2;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.group {
.title {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
font-size: 0.65rem;
line-height: 0.65rem;
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.val {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
font-size: 1.7rem;
line-height: 1.7rem;
color: var(--main-color);
transition: 0.25s;
}
}
}
initial commit
2020-05-09 08:29:47 +08:00
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
//top focus
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.focus {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--sub-color) !important;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.result {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
opacity: 0 !important;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.logo .bottom {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--sub-color) !important;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.config {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
opacity: 0 !important;
}
}
initial commit
2020-05-09 08:29:47 +08:00
}
#tip {
font-size: 0.75rem;
line-height: 0.75rem;
color: var(--sub-color);
text-align: center;
/* margin-top: 1rem; */
align-self: center;
margin-top: 1rem;
opacity: 0;
transition: 0.25s;
}
key {
color: var(--bg-color);
background-color: var(--sub-color);
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
/* font-weight: bold; */
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.1rem 0.3rem;
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
margin: 3px 0;
initial commit
2020-05-09 08:29:47 +08:00
border-radius: 0.1rem;
display: inline-block;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
font-size: 0.7rem;
line-height: 0.7rem;
initial commit
2020-05-09 08:29:47 +08:00
}
#bottom {
text-align: center;
line-height: 1rem;
font-size: 0.75rem;
color: var(--sub-color);
footer redesign
2020-09-27 01:19:33 +08:00
transition: 0.25s;
padding: 0 5px;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
fixed footer being too far away from the bottom edge
2020-06-01 20:23:20 +08:00
// margin-bottom: 2rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.keyTips {
added account page graphs
2020-05-10 09:04:05 +08:00
margin-bottom: 1rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
footer redesign
2020-09-27 01:19:33 +08:00
.leftright{
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
.left{
text-align: left;
}
.right{
text-align: right;
// display: flex;
// gap: 1rem;
// align-items: center;
// justify-content: flex-end;
click footer theme to change theme
2020-10-06 01:47:25 +08:00
.current-theme{
transition: .25s;
text-decoration: none;
&:hover{
color: var(--main-color);
cursor: pointer;
}
}
footer redesign
2020-09-27 01:19:33 +08:00
.discordLink{
transition: .25s;
text-decoration: none;
&:hover{
color: var(--main-color);
cursor: pointer;
}
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.version {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
opacity: 0;
footer redesign
2020-09-27 01:19:33 +08:00
transition: .25s;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
- added version to the bottom of the page - added version history popup - fixed a bug where livewpm still would be drawn on top
2020-05-17 19:40:41 +08:00
cursor: pointer;
color: var(--main-color);
}
}
initial commit
2020-05-09 08:29:47 +08:00
}
#bottom.focus {
opacity: 0 !important;
}
#result {
display: grid;
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
// height: 200px;
optimised the look of the result page
2020-07-31 00:36:09 +08:00
gap: 1rem;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
// grid-template-columns: auto 1fr;
// justify-content: center;
initial commit
2020-05-09 08:29:47 +08:00
align-items: center;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
grid-template-columns: auto 1fr;
prettier
2020-08-02 10:54:43 +08:00
grid-template-areas:
"stats chart"
updated the result screen structure, added a new 'next test' button
2020-09-19 07:09:21 +08:00
"morestats morestats";
// "wordsHistory wordsHistory"
// "buttons buttons"
// "login login"
// "ssw ssw";
.buttons {
display: grid;
grid-auto-flow: column;
gap: 1rem;
justify-content: center;
// grid-area: buttons;
grid-column: 1/3;
}
.ssWatermark{
// grid-area: ssw;
grid-column: 1/3;
}
#resultWordsHistory{
// grid-area: wordsHistory;
added pace caret small indentation changes
2020-09-21 06:06:13 +08:00
color: var(--sub-color);
updated the result screen structure, added a new 'next test' button
2020-09-19 07:09:21 +08:00
grid-column: 1/3;
.words{
display: flex;
flex-wrap: wrap;
width: 100%;
align-content: flex-start;
user-select: none;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.chart {
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
grid-area: chart;
width: 100%;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
canvas {
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
width: 100% !important;
fixed #8
2020-05-15 10:04:10 +08:00
height: 100%;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
made the chart taller
2020-05-24 09:08:13 +08:00
max-height: 200px;
height: 200px;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.title {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
color: var(--sub-color);
margin-bottom: 1rem;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.loginTip {
changed evens on test complete added login tip added required password confirmation when registering
2020-05-13 03:40:16 +08:00
grid-column: 1/3;
text-align: center;
color: var(--sub-color);
updated the result screen structure, added a new 'next test' button
2020-09-19 07:09:21 +08:00
// grid-area: login;
grid-column: 1/3;
changed evens on test complete added login tip added required password confirmation when registering
2020-05-13 03:40:16 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.stats {
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
grid-area: stats;
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
display: grid;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
// column-gap: 0.5rem;
prettier
2020-08-02 10:54:43 +08:00
gap: 0.5rem;
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
justify-content: center;
align-items: center;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
// 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";
prettier
2020-08-02 10:54:43 +08:00
grid-template-areas:
"wpm"
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
"acc";
&.morestats {
display: grid;
grid-auto-flow: column;
grid-template-areas: none;
align-items: flex-start;
optimised the look of the result page
2020-07-31 00:36:09 +08:00
justify-content: space-between;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
column-gap: 2rem;
grid-area: morestats;
// grid-template-areas: "raw consistency testType infoAndTags leaderboards source"
// "key time testType infoAndTags leaderboards source";
.subgroup {
display: grid;
prettier
2020-08-02 10:54:43 +08:00
gap: 0.5rem;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.group {
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
// margin-bottom: 0.5rem;
updated result screen styles
2020-07-04 08:39:39 +08:00
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.top {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
color: var(--sub-color);
font-size: 1rem;
line-height: 1rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.bottom {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
color: var(--main-color);
font-size: 2rem;
line-height: 2rem;
}
changing the format of the time on the result screen
2020-10-22 01:11:54 +08:00
&.time{
.afk{
color: var(--sub-color);
font-size: .75rem;
line-height: .75rem;
margin-left: 0.2rem;
}
}
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
optimised the look of the result page
2020-07-31 00:36:09 +08:00
// .infoAndTags {
// display: grid;
// gap: 0.5rem;
// align-self: baseline;
// // grid-area: infoAndTags;
// color: var(--sub-color);
// .top {
// font-size: 1rem;
// line-height: 1rem;
// }
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
optimised the look of the result page
2020-07-31 00:36:09 +08:00
// .bottom {
// font-size: 1rem;
// line-height: 1rem;
// }
// }
.info,
made sure quote is not using a large font
2020-08-04 23:03:11 +08:00
.tags,
.source {
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.top {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
font-size: 1rem;
optimised the look of the result page
2020-07-31 00:36:09 +08:00
line-height: 1rem;
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.bottom {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
font-size: 1rem;
line-height: 1rem;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.wpm {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
grid-area: wpm;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.top {
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
font-size: 2rem;
fixed crown styling
2020-09-15 04:45:15 +08:00
line-height: 1.5rem;
added db connection, new highscore display
2020-05-10 06:33:48 +08:00
display: flex;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
// margin-top: -0.5rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added pb difference to the crown balloon
2020-09-14 06:32:56 +08:00
// .crownWrapper {
// width: 1.7rem;
// overflow: hidden;
// height: 1.7rem;
// margin-left: 0.5rem;
// // margin-top: 0.98rem;
// margin-top: -0.5rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
reformatted
2020-09-17 00:29:21 +08:00
.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;
}
added pb difference to the crown balloon
2020-09-14 06:32:56 +08:00
// }
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.bottom {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
font-size: 4rem;
line-height: 4rem;
}
}
reformatted
2020-09-17 00:29:21 +08:00
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
.testType,
.leaderboards {
.bottom {
font-size: 1rem;
line-height: 1rem;
added lbmemory
2020-09-17 06:15:55 +08:00
.lbChange .fas{
margin-right: 0.15rem;
}
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.acc {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
grid-area: acc;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
.top {
font-size: 2rem;
fixed crown styling
2020-09-15 04:45:15 +08:00
line-height: 1.5rem;
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
.bottom {
font-size: 4rem;
line-height: 4rem;
}
added time display to the result of word tests
2020-05-25 23:50:50 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added consistency stat, updated the result page layout
2020-07-30 23:52:38 +08:00
// .key {
// grid-area: key;
// }
// .time {
// grid-area: time;
// }
// .raw {
// grid-area: raw;
// }
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
}
added caps lock indicator
2020-07-23 20:42:16 +08:00
#capsWarning {
background: var(--main-color);
color: var(--bg-color);
display: table;
position: absolute;
left: 50%;
fixed caps warning appearing on other pages
2020-07-30 21:06:47 +08:00
// top: 66vh;
added caps lock indicator
2020-07-23 20:42:16 +08:00
transform: translateX(-50%) translateY(-50%);
padding: 1rem;
border-radius: var(--roundness);
/* margin-top: 1rem; */
prettier
2020-08-02 10:54:43 +08:00
transition: 0.25s;
added caps lock indicator
2020-07-23 20:42:16 +08:00
z-index: 999;
pointer-events: none;
i {
prettier
2020-08-02 10:54:43 +08:00
margin-right: 0.5rem;
added caps lock indicator
2020-07-23 20:42:16 +08:00
}
}
initial commit
2020-05-09 08:29:47 +08:00
#wordsInput {
height: 0;
padding: 0;
margin: 0;
border: none;
outline: none;
display: block;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#wordsTitle {
added input history display to the results page
2020-05-27 08:00:28 +08:00
color: var(--sub-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-left: 0.25rem;
added input history display to the results page
2020-05-27 08:00:28 +08:00
margin-top: 1rem;
display: none;
}
initial commit
2020-05-09 08:29:47 +08:00
#words {
height: fit-content;
display: flex;
flex-wrap: wrap;
width: 100%;
align-content: flex-start;
user-select: none;
Fix for typo getting cut off at the bottom lines https://discordapp.com/channels/713194177403420752/713195115275091969/762797016346132510
2020-10-07 07:28:20 +08:00
padding-bottom: 1em;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
some cleanup of Hebrew support
2020-09-10 20:36:40 +08:00
/* a little hack for right-to-left languages */
&.rightToLeftTest {
flex-direction: row-reverse;
.word {
flex-direction: row-reverse;
}
}
reformatted
2020-09-17 00:29:21 +08:00
&.blurred {
lowered opacity mode, changed message
2020-09-11 07:44:38 +08:00
opacity: 0.25;
added out of focus notice
2020-09-11 06:05:57 +08:00
filter: blur(4px);
-webkit-filter: blur(4px);
}
some cleanup of Hebrew support
2020-09-10 20:36:40 +08:00
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.flipped {
.word {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--text-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
& letter.correct {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--sub-color);
}
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
& letter.corrected {
color: var(--sub-color);
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-bottom: 2px dotted var(--main-color);
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
}
added an indicator of corrected extra chars
2020-08-09 02:28:21 +08:00
& letter.extraCorrected {
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-right: 2px dotted var(--main-color);
added an indicator of corrected extra chars
2020-08-09 02:28:21 +08:00
}
added flip test colors setting
2020-06-01 03:30:56 +08:00
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.colorfulMode {
.word {
& letter.correct {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--main-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
& letter.corrected {
color: var(--main-color);
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-bottom: 2px dotted var(--text-color);
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
}
added an indicator of corrected extra chars
2020-08-09 02:28:21 +08:00
& letter.extraCorrected {
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-right: 2px dotted var(--text-color);
added an indicator of corrected extra chars
2020-08-09 02:28:21 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
& letter.incorrect {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--colorful-error-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
& letter.incorrect.extra {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--colorful-error-extra-color);
}
added 2 more colors to each theme to make sure errors are visible with extra color enabled
2020-06-09 08:32:34 +08:00
}
made sure each theme is now using either an almost whie or almost black text color added extra test color setting
2020-06-09 06:00:16 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.flipped.colorfulMode {
.word {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--main-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
& letter.correct {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
& letter.corrected {
color: var(--sub-color);
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-bottom: 2px dotted var(--main-color);
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
}
added an indicator of corrected extra chars
2020-08-09 02:28:21 +08:00
& letter.extraCorrected {
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-right: 2px dotted var(--main-color);
added an indicator of corrected extra chars
2020-08-09 02:28:21 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
& letter.incorrect {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--colorful-error-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
& letter.incorrect.extra {
refactored css to use scss structure more
2020-07-03 02:07:43 +08:00
color: var(--colorful-error-extra-color);
}
added 2 more colors to each theme to make sure errors are visible with extra color enabled
2020-06-09 08:32:34 +08:00
}
made sure each theme is now using either an almost whie or almost black text color added extra test color setting
2020-06-09 06:00:16 +08:00
}
}
renamed extra test color to colorful mode
2020-06-27 07:49:05 +08:00
#words.flipped.colorfulMode .word.error,
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#words.colorfulMode .word.error {
renamed extra test color to colorful mode
2020-06-27 07:49:05 +08:00
border-bottom: 2px solid var(--colorful-error-color);
added 2 more colors to each theme to make sure errors are visible with extra color enabled
2020-06-09 08:32:34 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageTest #resultExtraButtons {
update 1 - added graph of wpm over time - changed the layout - added coming soon page
2020-05-10 01:39:23 +08:00
opacity: 0;
added a button to restart the test with the same wordset. closes #119
2020-06-06 09:05:21 +08:00
display: grid;
grid-auto-flow: column;
gap: 1rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#restartTestButton,
#showWordHistoryButton,
#copyResultToClipboardButton,
updated the result screen structure, added a new 'next test' button
2020-09-19 07:09:21 +08:00
#restartTestButtonWithSameWordset,
added a button to practise missed words
2020-09-21 06:26:47 +08:00
#nextTestButton,
#practiseMissedWordsButton {
added a button to restart the test with the same wordset. closes #119
2020-06-06 09:05:21 +08:00
position: relative;
initial commit
2020-05-09 08:29:47 +08:00
border-radius: var(--roundness);
fixed a small css bug
2020-06-06 09:51:10 +08:00
padding: 1rem 2rem;
initial commit
2020-05-09 08:29:47 +08:00
width: min-content;
width: -moz-min-content;
color: var(--sub-color);
transition: 0.25s;
cursor: pointer;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
&:hover,
&:focus {
color: var(--main-color);
outline: none;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial commit
2020-05-09 08:29:47 +08:00
&:focus {
added themes support support for hover functions on the command line fixed wpmovertime chart styling
2020-05-11 23:29:18 +08:00
background: var(--sub-color);
initial commit
2020-05-09 08:29:47 +08:00
}
}
updated the result screen structure, added a new 'next test' button
2020-09-19 07:09:21 +08:00
#restartTestButton{
margin: 0 auto;
margin-top: 1rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#middle {
.pageTest {
reformatted
2020-09-17 00:29:21 +08:00
.outOfFocusWarning {
added out of focus notice
2020-09-11 06:05:57 +08:00
text-align: center;
height: 0;
line-height: 150px;
z-index: 999;
position: relative;
user-select: none;
pointer-events: none;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#testModesNotice {
afk results will not contribute to restart count and time changes tags notice into test modes notice, now includes difficulty and blind mode
2020-06-15 01:19:56 +08:00
display: grid;
grid-auto-flow: column;
gap: 1rem;
color: var(--sub-color);
text-align: center;
margin-bottom: 1.25rem;
fixed notice animation repositioned elements on the result screen
2020-06-15 02:10:59 +08:00
height: 1rem;
line-height: 1rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.125s;
afk results will not contribute to restart count and time changes tags notice into test modes notice, now includes difficulty and blind mode
2020-06-15 01:19:56 +08:00
justify-content: center;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.fas {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-right: 0.5rem;
afk results will not contribute to restart count and time changes tags notice into test modes notice, now includes difficulty and blind mode
2020-06-15 01:19:56 +08:00
}
}
added mini timer style
2020-08-27 05:18:09 +08:00
#miniTimerAndLiveWpm {
height: 0;
margin-left: 0.37rem;
display: flex;
font-size: 1rem;
line-height: 1rem;
margin-top: -1.5rem;
position: absolute;
color: black;
.time {
margin-right: 2rem;
}
.wpm {
transition: 0.125s;
}
.time,
.wpm {
opacity: 0;
}
&.timerMain {
color: var(--main-color);
}
&.timerSub {
color: var(--sub-color);
}
&.timerText {
color: var(--text-color);
}
&.size125 {
margin-top: -1.75rem;
font-size: 1.25rem;
line-height: 1.25rem;
}
&.size15 {
margin-top: -2rem;
font-size: 1.5rem;
line-height: 1.5rem;
}
&.size2 {
margin-top: -2.5rem;
font-size: 2rem;
line-height: 2rem;
}
}
afk results will not contribute to restart count and time changes tags notice into test modes notice, now includes difficulty and blind mode
2020-06-15 01:19:56 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.focus .pageTest {
#testModesNotice {
afk results will not contribute to restart count and time changes tags notice into test modes notice, now includes difficulty and blind mode
2020-06-15 01:19:56 +08:00
opacity: 0 !important;
}
}
added an element to quickly see if a tag is active
2020-06-13 01:07:16 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#showWordHistoryButton {
added input history display to the results page
2020-05-27 08:00:28 +08:00
opacity: 1;
}
initial commit
2020-05-09 08:29:47 +08:00
.word {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin: 0.25rem;
initial commit
2020-05-09 08:29:47 +08:00
color: var(--sub-color);
fixed ligature languages not working well
2020-10-22 02:46:02 +08:00
// display: flex;
showing the important error underline faster
2020-05-16 18:19:07 +08:00
// transition: 0.25s;
initial commit
2020-05-09 08:29:47 +08:00
/* margin-bottom: 1px; */
border-bottom: 2px solid transparent;
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
line-height: 1rem;
fixed ligature languages not working well
2020-10-22 02:46:02 +08:00
letter{
display: inline;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
made the content a bit wider
2020-06-01 03:32:08 +08:00
// transition: .25s;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.wordInputAfter {
added input overlay when hovering over words
2020-05-31 03:59:42 +08:00
opacity: 1;
position: absolute;
background: var(--sub-color);
color: var(--bg-color);
/* background: red; */
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.5rem;
added input overlay when hovering over words
2020-05-31 03:59:42 +08:00
/* left: .5rem; */
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-left: -0.5rem;
margin-top: -0.5rem;
added input overlay when hovering over words
2020-05-31 03:59:42 +08:00
border-radius: var(--roundness);
// box-shadow: 0 0 10px rgba(0,0,0,.25);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
text-shadow: none;
added input overlay when hovering over words
2020-05-31 03:59:42 +08:00
}
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#words.size125 .word {
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
line-height: 1.25rem;
font-size: 1.25rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin: 0.31rem;
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#words.size15 .word {
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
line-height: 1.5rem;
font-size: 1.5rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin: 0.37rem;
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#words.size2 .word {
added an option to increase the test words font size
2020-05-19 05:45:14 +08:00
line-height: 2rem;
font-size: 2rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin: 0.5rem;
initial commit
2020-05-09 08:29:47 +08:00
}
.word.error {
/* margin-bottom: 1px; */
made sure incorrect words use the variable color
2020-05-30 21:48:08 +08:00
border-bottom: 2px solid var(--error-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
text-shadow: 1px 0px 0px var(--bg-color),
// 2px 0px 0px var(--bg-color),
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
-1px 0px 0px var(--bg-color),
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
// -2px 0px 0px var(--bg-color),
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
0px 1px 0px var(--bg-color),
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
initial commit
2020-05-09 08:29:47 +08:00
}
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
// .word letter {
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
// transition: .1s;
// height: 1rem;
// line-height: 1rem;
/* margin: 0 1px; */
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
// }
initial commit
2020-05-09 08:29:47 +08:00
.word letter.correct {
added more color variables to make theme creation bit easier
2020-05-30 21:25:34 +08:00
color: var(--text-color);
initial commit
2020-05-09 08:29:47 +08:00
}
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
.word letter.corrected {
color: var(--text-color);
made corrected indicators more visible
2020-09-11 06:20:46 +08:00
border-bottom: 2px dotted var(--main-color);
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
}
initial commit
2020-05-09 08:29:47 +08:00
.word letter.incorrect {
added more color variables to make theme creation bit easier
2020-05-30 21:25:34 +08:00
color: var(--error-color);
Update .incorrect positioning, add hint css
2020-09-25 16:26:55 +08:00
position:relative;
}
.word letter.incorrect hint {
position: absolute;
bottom: -1.2em;
color: var(--text-color);
line-height: 1em;
text is slightly smaller, and cenetered
2020-09-26 08:02:45 +08:00
font-size: .75em;
Update .incorrect positioning, add hint css
2020-09-25 16:26:55 +08:00
text-shadow: none;
padding: 1px;
left: 0;
opacity: .5;
text is slightly smaller, and cenetered
2020-09-26 08:02:45 +08:00
text-align: center;
width: 100%;
initial commit
2020-05-09 08:29:47 +08:00
}
.word letter.incorrect.extra {
added more color variables to make theme creation bit easier
2020-05-30 21:25:34 +08:00
color: var(--error-extra-color);
initial commit
2020-05-09 08:29:47 +08:00
}
.word letter.missing {
opacity: 0.5;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageTest {
added screenshot watermark
2020-07-29 01:44:36 +08:00
position: relative;
.ssWatermark {
font-size: 1.25rem;
color: var(--sub-color);
updated the result screen structure, added a new 'next test' button
2020-09-19 07:09:21 +08:00
line-height: 1rem;
text-align: right;
added screenshot watermark
2020-07-29 01:44:36 +08:00
}
added input history display to the results page
2020-05-27 08:00:28 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageLogin {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
display: flex;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
grid-auto-flow: column;
gap: 1rem;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
justify-content: space-around;
align-items: center;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.side {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
display: grid;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
justify-content: center;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.login {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas:
"title forgotButton"
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
"form form";
.title {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
grid-area: title;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#forgotPasswordButton {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
grid-area: forgotButton;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
font-size: 0.5rem;
line-height: 0.5rem;
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
height: fit-content;
align-self: center;
justify-self: right;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.25rem 0;
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
color: var(--sub-color);
cursor: pointer;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
color: var(--main-color);
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
form {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
grid-area: form;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#rememberMe {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
color: var(--sub-color);
-moz-user-select: none;
user-select: none;
cursor: pointer;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
input {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
margin: 0 !important;
cursor: pointer;
width: 0;
height: 0;
fixed issue #177
2020-07-08 13:30:31 +08:00
display: none;
prettier doesnt like whitespace
2020-07-09 22:55:13 +08:00
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
& ~ .customCheckbox {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
width: 12px;
height: 12px;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
border-radius: 2px;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
display: inline-block;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin: 0 0.5rem 0 0.25rem;
transition: 0.25s;
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
&:checked ~ .customCheckbox {
added forgot password and remember me buttons
2020-06-10 01:02:03 +08:00
background: var(--main-color);
}
}
}
}
}
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
form {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
display: grid;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
width: 100%;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.preloader {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
position: fixed;
left: 50%;
top: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
color: var(--main-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageAbout {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
display: grid;
gap: 2rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.section {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
display: grid;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
showing patreon list in about
2020-08-24 06:27:21 +08:00
.supporters {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: center;
gap: 0.25rem;
color: var(--text-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
h1 {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
font-size: 1rem;
line-height: 1rem;
color: var(--sub-color);
margin: 0;
fixed weight of section headers in about page
2020-05-28 05:02:32 +08:00
font-weight: 300;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
p {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
margin: 0;
padding: 0;
made sure settings, about and account use text-color variable
2020-05-30 21:36:13 +08:00
color: var(--text-color);
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageSettings {
added settings page
2020-05-15 05:22:11 +08:00
display: grid;
reworked the whole settings page
2020-05-28 07:35:41 +08:00
// grid-template-columns: 1fr 1fr;
added settings page
2020-05-15 05:22:11 +08:00
gap: 2rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.tip {
added settings page
2020-05-15 05:22:11 +08:00
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.sectionGroupTitle {
made section titles bigger
2020-07-15 05:16:41 +08:00
font-size: 2rem;
divided the settings page into groups
2020-06-04 06:48:26 +08:00
color: var(--sub-color);
made section titles bigger
2020-07-15 05:16:41 +08:00
line-height: 2rem;
added the ability to hide sections in the settings page
2020-08-03 04:48:19 +08:00
cursor: pointer;
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
transition: 0.25s;
added the ability to hide sections in the settings page
2020-08-03 04:48:19 +08:00
&:hover {
changed the hover color
2020-09-16 04:52:43 +08:00
color: var(--main-color);
added the ability to hide sections in the settings page
2020-08-03 04:48:19 +08:00
}
.fas {
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
margin-left: 0.5rem;
added the ability to hide sections in the settings page
2020-08-03 04:48:19 +08:00
&.rotate {
transform: rotate(-90deg);
}
}
divided the settings page into groups
2020-06-04 06:48:26 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.sectionSpacer {
divided the settings page into groups
2020-06-04 06:48:26 +08:00
height: 1.5rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added the ability to hide sections in the settings page
2020-08-03 04:48:19 +08:00
.settingsGroup {
display: grid;
gap: 2rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.section {
added settings page
2020-05-15 05:22:11 +08:00
display: grid;
reworked the whole settings page
2020-05-28 07:35:41 +08:00
// gap: .5rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas:
"title title"
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
"text buttons";
reworked the whole settings page
2020-05-28 07:35:41 +08:00
grid-template-columns: 2fr 1fr;
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
column-gap: 2rem;
reworked the whole settings page
2020-05-28 07:35:41 +08:00
align-items: center;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added reset settings button
2020-09-10 16:52:38 +08:00
.button.danger {
added two settings groups, renamed group to danger zone
2020-09-12 09:29:54 +08:00
background: var(--error-color);
added reset settings button
2020-09-10 16:52:38 +08:00
color: #eee;
&:hover {
background: var(--main-color);
color: var(--bg-color);
}
}
styles done - ready for js
2020-06-11 09:59:22 +08:00
&.customTheme {
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: stretch;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem 2rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
Inputs and labels now change to saved values
2020-07-01 09:10:33 +08:00
& p {
grid-area: unset;
styles done - ready for js
2020-06-11 09:59:22 +08:00
grid-column: 1 / span 4;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
fix smaller style issues
2020-07-02 08:48:00 +08:00
& .spacer {
grid-column: 3 / 5;
}
styles done - ready for js
2020-06-11 09:59:22 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added pace caret small indentation changes
2020-09-21 06:06:13 +08:00
&.paceCaret{
.customPaceCaretSpeed{
width: 4rem;
padding: 0 .5rem;
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
h1 {
added settings page
2020-05-15 05:22:11 +08:00
font-size: 1rem;
line-height: 1rem;
color: var(--sub-color);
margin: 0;
reworked the whole settings page
2020-05-28 07:35:41 +08:00
grid-area: title;
fixed font weight in the settings page being too thick
2020-05-28 08:46:08 +08:00
font-weight: 300;
added settings page
2020-05-15 05:22:11 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
p {
reworked the whole settings page
2020-05-28 07:35:41 +08:00
grid-area: text;
fix smaller style issues
2020-07-02 08:48:00 +08:00
color: var(--sub-color);
margin: 0;
added settings page
2020-05-15 05:22:11 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.text {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
align-self: normal;
made sure settings, about and account use text-color variable
2020-05-30 21:36:13 +08:00
color: var(--text-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttons {
added settings page
2020-05-15 05:22:11 +08:00
display: grid;
grid-auto-flow: column;
Add caret styles
2020-05-29 12:32:38 +08:00
grid-auto-columns: 1fr;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
reworked the whole settings page
2020-05-28 07:35:41 +08:00
grid-area: buttons;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added a discord integration section to the settings page
2020-07-07 23:39:48 +08:00
&.discordIntegration {
added an unlink button
2020-09-29 07:10:33 +08:00
#unlinkDiscordButton{
margin-top: 0.5rem;
font-size: 0.75rem;
}
added a discord integration section to the settings page
2020-07-07 23:39:48 +08:00
.code {
fixed discord integration section not working with the media queries
2020-07-17 05:58:31 +08:00
grid-area: buttons;
added a discord integration section to the settings page
2020-07-07 23:39:48 +08:00
justify-content: center;
display: grid;
.top {
font-size: 1rem;
line-height: 1rem;
color: var(--sub-color);
}
.bottom {
font-size: 2rem;
line-height: 2rem;
}
}
.info {
fixed discord integration section not working with the media queries
2020-07-17 05:58:31 +08:00
grid-area: buttons;
added a discord integration section to the settings page
2020-07-07 23:39:48 +08:00
text-align: center;
}
.howto {
margin-top: 1rem;
color: var(--text-color);
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.tags {
fixed tags not working with media queries
2020-07-17 06:00:40 +08:00
.tagsListAndButton {
grid-area: buttons;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.tagsList {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
display: grid;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.tag {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
display: grid;
display: grid;
grid-template-columns: auto 1fr auto auto;
color: var(--text-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.title {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
align-self: center;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.editButton,
.removeButton,
.active {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
display: grid;
grid-auto-flow: column;
align-content: center;
transition: 0.25s;
padding: 0 0.5rem;
border-radius: var(--roundness);
color: var(--sub-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:focus {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
background: var(--sub-color);
color: var(--main-color);
border: none;
outline: none;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
cursor: pointer;
color: var(--main-color);
}
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.addTagButton {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-top: 0.5rem;
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
color: var(--text-color);
cursor: pointer;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
padding: 0.2rem 0.5rem;
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
border-radius: var(--roundness);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
text-align: center;
-webkit-user-select: none;
display: grid;
align-content: center;
height: min-content;
height: -moz-min-content;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.active {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
background: var(--main-color);
color: var(--bg-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover,
&:focus {
added initial tags skeleton and reading from the db
2020-06-12 01:02:04 +08:00
color: var(--bg-color);
background: var(--main-color);
outline: none;
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.fontSize .buttons {
reworked the whole settings page
2020-05-28 07:35:41 +08:00
grid-template-columns: 1fr 1fr 1fr 1fr;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
added themes section to the settings page
2020-08-05 22:29:57 +08:00
&.themes {
.tabContainer {
position: relative;
grid-area: buttons;
.tabContent {
overflow: revert;
height: auto;
.text {
align-self: center;
}
}
}
added favourite themes, active theme indicator, ability to randomise only favourite themes
2020-08-19 23:21:02 +08:00
.theme.button {
display: grid;
grid-template-columns: auto 1fr auto;
.text {
color: inherit;
}
.activeIndicator {
overflow: hidden;
width: 1.25rem;
transition: 0.25s;
opacity: 0;
color: inherit;
.far {
margin: 0;
}
&.active {
width: 1.25rem;
opacity: 1;
}
}
.favButton {
overflow: hidden;
width: 1.25rem;
transition: 0.25s;
opacity: 0;
.far,
.fas {
margin: 0;
pointer-events: none;
}
&:hover {
cursor: pointer;
}
&.active {
width: 1.25rem;
opacity: 1;
}
}
&:hover {
.favButton {
width: 1.25rem;
opacity: 1;
}
}
}
added themes section to the settings page
2020-08-05 22:29:57 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.themes,
refactored settings page
2020-08-04 07:46:04 +08:00
&.language,
&.layout,
added funbox
2020-07-31 08:33:17 +08:00
&.keymapLayout,
added font customization
2020-08-01 09:53:04 +08:00
&.fontFamily,
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
&.funbox,
&.keymapStyle {
added themes section to the settings page
2020-08-05 22:29:57 +08:00
grid-template-columns: 2fr 1fr;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas:
added themes section to the settings page
2020-08-05 22:29:57 +08:00
"title tabs"
"buttons buttons";
column-gap: 2rem;
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
row-gap: 0.5rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial layout
2020-06-10 16:32:25 +08:00
.tabs {
added themes section to the settings page
2020-08-05 22:29:57 +08:00
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0.5rem;
styles done - ready for js
2020-06-11 09:59:22 +08:00
grid-area: tabs;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
initial layout
2020-06-10 16:32:25 +08:00
.tab {
styles done - ready for js
2020-06-11 09:59:22 +08:00
will-change: color;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.2s ease-in-out color;
initial layout
2020-06-10 16:32:25 +08:00
outline: 0;
cursor: pointer;
padding: 0;
font-size: 1rem;
color: var(--sub-color);
text-align: left;
border: 0;
background: 0;
preparing for custom fonts
2020-07-26 08:13:36 +08:00
font-family: var(--font);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:first-child {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-right: 0.5rem;
initial layout
2020-06-10 16:32:25 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.active,
&:hover {
initial layout
2020-06-10 16:32:25 +08:00
color: var(--main-color);
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttons {
reworked the whole settings page
2020-05-28 07:35:41 +08:00
margin-left: 0;
grid-auto-flow: dense;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
added settings page
2020-05-15 05:22:11 +08:00
}
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttons div.theme:hover {
Add slight hover effect to theme buttons
2020-06-02 10:00:06 +08:00
transform: scale(1.1);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.signOut {
added form buttons moved sign out button
2020-05-15 11:09:00 +08:00
font-size: 1rem;
line-height: 1rem;
justify-self: end;
// background: var(--sub-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
color: var(--sub-color);
added form buttons moved sign out button
2020-05-15 11:09:00 +08:00
width: fit-content;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.5rem;
added form buttons moved sign out button
2020-05-15 11:09:00 +08:00
border-radius: var(--roundness);
cursor: pointer;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
added form buttons moved sign out button
2020-05-15 11:09:00 +08:00
float: right;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
added form buttons moved sign out button
2020-05-15 11:09:00 +08:00
color: var(--main-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.fas {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-right: 0.5rem;
added form buttons moved sign out button
2020-05-15 11:09:00 +08:00
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageAccount {
added account page graphs
2020-05-10 09:04:05 +08:00
display: grid;
gap: 1rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.content {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
display: grid;
fixed timer appearing when not needed repalced punctuation icon on the account page
2020-07-18 00:01:34 +08:00
gap: 2rem;
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
reformatted
2020-09-17 00:29:21 +08:00
.topFilters .buttons {
cleaned up the filters, made them a togglable element
2020-09-14 04:21:01 +08:00
display: flex;
justify-content: space-evenly;
gap: 1rem;
reformatted
2020-09-17 00:29:21 +08:00
.button {
cleaned up the filters, made them a togglable element
2020-09-14 04:21:01 +08:00
width: 100%;
}
}
you can now view the charts for past results
2020-08-25 11:57:43 +08:00
// .hoverChartWrapper {
// z-index: 999;
// display: none;
// width: 100%;
// height: 100%;
// background: rgba(0, 0, 0, 0.25);
// position: fixed;
// left: 0;
// top: 0;
// }
.hoverChartWrapper {
// pointer-events: none;
z-index: 999;
display: none;
height: 15rem;
background: var(--bg-color);
width: 45rem;
position: absolute;
border-radius: var(--roundness);
padding: 1rem;
// box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
.hoverChartBg {
display: none;
z-index: 998;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
position: fixed;
left: 0;
top: 0;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.preloader {
added local font awesome to speed up the app styled the login page added a function to easily animate between elements optimised the database to use a local copy
2020-05-12 07:59:12 +08:00
font-size: 2rem;
justify-self: center;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
reformatted
2020-09-17 00:29:21 +08:00
.doublegroup {
added personal bests to the account page
2020-09-14 05:48:32 +08:00
display: grid;
grid-auto-flow: column;
gap: 1rem;
reformatted
2020-09-17 00:29:21 +08:00
.titleAndTable {
.title {
added personal bests to the account page
2020-09-14 05:48:32 +08:00
color: var(--sub-color);
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.triplegroup {
added account page graphs
2020-05-10 09:04:05 +08:00
display: grid;
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
grid-template-columns: 1fr 1fr 1fr;
added account page graphs
2020-05-10 09:04:05 +08:00
gap: 1rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.text {
added estimated typing time to the account page optimised the speed of loading the account page by limiting table results to 10 lines at a time
2020-05-30 07:21:39 +08:00
align-self: center;
color: var(--sub-color);
}
added account page graphs
2020-05-10 09:04:05 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.group {
&.noDataError {
changed the no data error height to margin
2020-05-27 02:59:43 +08:00
margin: 20rem 0;
// height: 30rem;
// line-height: 30rem;
added raw wpm
2020-05-27 00:52:07 +08:00
text-align: center;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.history {
.loadMoreButton {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
made buttons highlighted in the main color
2020-06-01 07:05:51 +08:00
color: var(--text-color);
added estimated typing time to the account page optimised the speed of loading the account page by limiting table results to 10 lines at a time
2020-05-30 07:21:39 +08:00
text-align: center;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.5rem;
added estimated typing time to the account page optimised the speed of loading the account page by limiting table results to 10 lines at a time
2020-05-30 07:21:39 +08:00
border-radius: var(--roundness);
cursor: pointer;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
-webkit-transition: 0.25s;
transition: 0.25s;
added estimated typing time to the account page optimised the speed of loading the account page by limiting table results to 10 lines at a time
2020-05-30 07:21:39 +08:00
-webkit-user-select: none;
display: -ms-grid;
display: grid;
-ms-flex-line-pack: center;
align-content: center;
margin-top: 1rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover,
&:focus {
made buttons highlighted in the main color
2020-06-01 07:05:51 +08:00
color: var(--bg-color);
added estimated typing time to the account page optimised the speed of loading the account page by limiting table results to 10 lines at a time
2020-05-30 07:21:39 +08:00
background: var(--main-color);
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.title {
added account page graphs
2020-05-10 09:04:05 +08:00
color: var(--sub-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.val {
added account page graphs
2020-05-10 09:04:05 +08:00
font-size: 3rem;
line-height: 3rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.chart {
updated the filter buttons
2020-05-25 04:58:13 +08:00
position: relative;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
completely rewrote filters
2020-08-10 02:52:00 +08:00
.above {
display: flex;
justify-content: center;
margin-bottom: 1rem;
color: var(--sub-color);
flex-wrap: wrap;
.group {
display: flex;
align-items: center;
}
.fas,
.punc {
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
margin-right: 0.25rem;
completely rewrote filters
2020-08-10 02:52:00 +08:00
}
.spacer {
width: 1rem;
}
}
added slope display below the account graph
2020-08-09 22:40:52 +08:00
.below {
text-align: center;
color: var(--sub-color);
fixed style
2020-10-20 23:31:43 +08:00
margin-top: 1rem;
display: grid;
grid-template-columns: auto 300px;
align-items: center;
.text{
height: min-content;
}
.buttons{
display: grid;
gap: .5rem;
}
added the ability to toggle accuracy on the account graph
2020-09-16 04:12:42 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.chartPreloader {
updated the filter buttons
2020-05-25 04:58:13 +08:00
position: absolute;
width: 100%;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
background: rgba(0, 0, 0, 0.5);
updated the filter buttons
2020-05-25 04:58:13 +08:00
height: 100%;
display: grid;
align-items: center;
justify-content: center;
font-size: 5rem;
text-shadow: 0 0 3rem black;
}
}
added account page graphs
2020-05-10 09:04:05 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
table {
border-spacing: 0;
added account page graphs
2020-05-10 09:04:05 +08:00
border-collapse: collapse;
made sure settings, about and account use text-color variable
2020-05-30 21:36:13 +08:00
color: var(--text-color);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
td {
added personal bests to the account page
2020-09-14 05:48:32 +08:00
padding: 0.5rem 0.5rem;
added account page graphs
2020-05-10 09:04:05 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
thead {
added account page graphs
2020-05-10 09:04:05 +08:00
color: var(--sub-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
font-size: 0.75rem;
added account page graphs
2020-05-10 09:04:05 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
tbody tr:nth-child(odd) td {
background: rgba(0, 0, 0, 0.1);
added account page graphs
2020-05-10 09:04:05 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
td.infoIcons span {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin: 0 0.1rem;
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
}
you can now view the charts for past results
2020-08-25 11:57:43 +08:00
.hoverChartButton {
opacity: 0.25;
transition: 0.25s;
cursor: pointer;
&:hover {
opacity: 1;
}
}
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#resultEditTags {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
#resultEditTags:hover {
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
cursor: pointer;
changed the tags edit button hover color
2020-06-24 07:58:02 +08:00
color: var(--main-color);
changed the result list to include icons added the ability to edit result tags made sure tag filters save when refreshed
2020-06-24 07:55:15 +08:00
opacity: 1 !important;
added account page graphs
2020-05-10 09:04:05 +08:00
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.pageAccount {
.group.filterButtons {
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
gap: 1rem;
display: grid;
updated the filter buttons
2020-05-25 04:58:13 +08:00
grid-template-columns: 1fr 1fr;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttonsAndTitle {
updated the filter buttons
2020-05-25 04:58:13 +08:00
height: fit-content;
height: -moz-fit-content;
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
display: grid;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.25rem;
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
color: var(--sub-color);
line-height: 1rem;
font-size: 1rem;
completely rewrote filters
2020-08-10 02:52:00 +08:00
&.testDate .buttons,
&.languages .buttons,
&.layouts .buttons,
&.funbox .buttons,
&.tags .buttons {
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: unset;
}
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.buttons {
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
display: grid;
grid-auto-flow: column;
gap: 1rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.button {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
made buttons highlighted in the main color
2020-06-01 07:05:51 +08:00
color: var(--text-color);
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
text-align: center;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.5rem;
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
border-radius: var(--roundness);
cursor: pointer;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
-webkit-user-select: none;
made sure the text is centered on the filter buttons
2020-05-25 06:16:18 +08:00
display: grid;
align-content: center;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.active {
made buttons highlighted in the main color
2020-06-01 07:05:51 +08:00
background: var(--main-color);
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
color: var(--bg-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover {
made buttons highlighted in the main color
2020-06-01 07:05:51 +08:00
color: var(--bg-color);
added advanced filters to the results page
2020-05-20 07:11:57 +08:00
background: var(--main-color);
}
}
}
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.devIndicator {
added more dev and local indicators because appearently im blind
2020-06-27 08:13:42 +08:00
position: fixed;
font-size: 3rem;
color: var(--sub-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
opacity: 0.25;
added media queries to support small widths
2020-07-17 05:54:33 +08:00
z-index: -1;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.tl {
added more dev and local indicators because appearently im blind
2020-06-27 08:13:42 +08:00
top: 2rem;
left: 2rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.tr {
added more dev and local indicators because appearently im blind
2020-06-27 08:13:42 +08:00
top: 2rem;
right: 2rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.bl {
added more dev and local indicators because appearently im blind
2020-06-27 08:13:42 +08:00
bottom: 2rem;
left: 2rem;
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.br {
added more dev and local indicators because appearently im blind
2020-06-27 08:13:42 +08:00
bottom: 2rem;
right: 2rem;
}
}
added account page graphs
2020-05-10 09:04:05 +08:00
initial commit
2020-05-09 08:29:47 +08:00
* {
box-sizing: border-box;
}
.hidden {
display: none !important;
}
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.button {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
color: var(--text-color);
cursor: pointer;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
transition: 0.25s;
padding: 0.4rem;
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
border-radius: var(--roundness);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
background: rgba(0, 0, 0, 0.1);
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
text-align: center;
-webkit-user-select: none;
// display: grid;
align-content: center;
height: min-content;
height: -moz-min-content;
more css refactoring
2020-07-03 02:35:41 +08:00
line-height: 1rem;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.fas,
.far {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
margin-right: 0.5rem;
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.active {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
background: var(--main-color);
color: var(--bg-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover,
&:focus {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
color: var(--bg-color);
background: var(--main-color);
outline: none;
}
disable sign up button once clicked
2020-10-16 11:37:34 +08:00
&.disabled {
&:hover {
color: var(--sub-color);
background: var(--bg-color);
cursor: default;
}
color: var(--sub-color);
background: var(--bg-color);
cursor: default;
}
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.text-button {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
transition: 0.25s;
color: var(--sub-color);
cursor: pointer;
margin-right: 0.25rem;
cursor: pointer;
always show words history corrected history restarting on long tests impossible
2020-08-07 07:42:25 +08:00
outline: none;
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:hover,
&:focus {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
color: var(--main-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&.active {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
color: var(--main-color);
}
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
.icon-button {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
display: grid;
grid-auto-flow: column;
align-content: center;
transition: 0.25s;
padding: 0.5rem;
border-radius: var(--roundness);
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
cursor: pointer;
added copy words history to clipboard button
2020-09-04 08:37:27 +08:00
&:hover {
color: var(--main-color);
}
fixed cursor not being a pointer
2020-07-03 10:03:29 +08:00
&:focus {
refactored css to use one button class instead of copy and pasting the same style
2020-07-03 01:39:24 +08:00
background: var(--sub-color);
color: var(--main-color);
border: none;
outline: none;
}
added media queries to support small widths
2020-07-17 05:54:33 +08:00
}
added scroll to top buttons
2020-08-30 10:55:23 +08:00
.scrollToTopButton {
bottom: 2rem;
right: 2rem;
position: fixed;
font-size: 2rem;
width: 4rem;
height: 4rem;
text-align: center;
line-height: 4rem;
background: var(--bg-color);
border-radius: 99rem;
z-index: 99;
cursor: pointer;
color: var(--sub-color);
transition: 0.25s;
&:hover {
color: var(--main-color);
}
}
changing the layout of results page sooner
2020-10-20 03:17:58 +08:00
@media only screen and (max-width: 1050px) {
added a spacer between all and favourite themes
2020-08-27 04:38:26 +08:00
#centerContent {
.pageSettings .section.themes .buttons,
.pageSettings .section.language .buttons,
.pageSettings .section.layout .buttons,
.pageSettings .section.keymapLayout .buttons,
.pageSettings .section.fontFamily .buttons,
.pageSettings .section.funbox .buttons,
.pageSettings .section.keymapStyle .buttons {
grid-template-columns: 1fr 1fr 1fr;
}
changing the layout of results page sooner
2020-10-20 03:17:58 +08:00
#result .morestats {
gap: 1rem;
grid-template-rows: 1fr 1fr;
}
added a spacer between all and favourite themes
2020-08-27 04:38:26 +08:00
}
}
changing the layout of results page sooner
2020-10-20 03:17:58 +08:00
added media queries to support small widths
2020-07-17 05:54:33 +08:00
@media only screen and (max-width: 800px) {
#centerContent {
#top {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
grid-template-areas:
"logo config"
added media queries to support small widths
2020-07-17 05:54:33 +08:00
"menu config";
aligned menu with the logo
2020-08-28 03:56:11 +08:00
.logo {
margin-bottom: 0;
}
added media queries to support small widths
2020-07-17 05:54:33 +08:00
}
#menu {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
gap: 0.5rem;
font-size: 0.8rem;
line-height: 0.8rem;
added media queries to support small widths
2020-07-17 05:54:33 +08:00
.icon-button {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
padding: 0.25rem;
added media queries to support small widths
2020-07-17 05:54:33 +08:00
}
}
}
#commandLine,
#commandLineInput {
width: 500px !important;
}
}
@media only screen and (max-width: 650px) {
.pageSettings .section {
grid-template-columns: 1fr;
grid-template-areas:
"title title"
"text text"
"buttons buttons";
added a spacer between all and favourite themes
2020-08-27 04:38:26 +08:00
& > .text {
swapped margins around
2020-07-17 06:01:43 +08:00
margin-bottom: 1rem;
added media queries to support small widths
2020-07-17 05:54:33 +08:00
}
}
#commandLine,
#commandLineInput {
width: 400px !important;
}
added a spacer between all and favourite themes
2020-08-27 04:38:26 +08:00
#centerContent {
.pageSettings .section.themes .buttons,
.pageSettings .section.language .buttons,
.pageSettings .section.layout .buttons,
.pageSettings .section.keymapLayout .buttons,
.pageSettings .section.fontFamily .buttons,
.pageSettings .section.funbox .buttons,
.pageSettings .section.keymapStyle .buttons {
grid-template-columns: 1fr 1fr;
}
}
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
}
fixed graph on narrow widths
2020-10-19 01:26:27 +08:00
@media only screen and (max-width: 600px) {
#middle{
#result{
grid-template-areas:
"stats stats"
"chart chart"
"morestats morestats";
.stats{
grid-template-areas: "wpm acc";
gap: 4rem;
}
.stats.morestats{
grid-template-rows: 1fr 1fr 1fr;
gap: 1rem;
}
}
}
}
allowed the content to be even smaller
2020-10-19 01:13:44 +08:00
@media only screen and (max-width: 500px) {
#top{
.logo{
.bottom{
font-size: 1.75rem;
line-height: 1.75rem;
margin-top: .5rem;
}
.top{
display: none;
}
}
#menu{
.icon-button{
padding: 0;
}
}
}
#centerContent{
padding: 1rem;
}
}
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
.keymap {
display: grid;
fixed keymap overlapping with restart button
2020-07-30 20:49:28 +08:00
grid-template-rows: 1fr 1fr 1fr;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
justify-content: center;
white-space: nowrap;
fixed keymap overlapping with restart button
2020-07-30 20:49:28 +08:00
// height: 140px;
prettier
2020-08-02 10:54:43 +08:00
gap: 0.25rem;
fixed keymap overlapping with restart button
2020-07-30 20:49:28 +08:00
margin-top: 1rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
}
.row {
height: 2rem;
prettier
2020-08-02 10:54:43 +08:00
gap: 0.25rem;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
}
.keymap-key {
display: flex;
keymap keys animating to transparent
2020-10-22 03:15:45 +08:00
background-color: transparent;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
color: var(--sub-color);
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
border-radius: var(--roundness);
border: 0.05rem solid;
border-color: var(--sub-color);
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
text-align: center;
justify-content: center;
align-items: center;
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
width: 2rem;
height: 2rem;
fixed keymap bumps being weird in vivaldi
2020-08-01 03:59:13 +08:00
position: relative;
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
.bump {
prettier
2020-08-02 10:54:43 +08:00
width: 0.75rem;
height: 0.05rem;
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
background: var(--sub-color);
position: absolute;
border-radius: var(--roundness);
fixed keymap bumps being weird in vivaldi
2020-08-01 03:59:13 +08:00
// margin-top: 1.5rem;
prettier
2020-08-02 10:54:43 +08:00
bottom: 0.15rem;
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
}
&.active-key {
color: var(--bg-color);
background-color: var(--main-color);
border-color: var(--main-color);
.bump {
background: var(--bg-color);
}
}
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
&#KeySpace,
&#KeySpace2 {
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
width: 100%;
}
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
&#KeySpace2 {
opacity: 0;
}
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
&.flash {
animation-name: flashKey;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: forwards;
}
}
@keyframes flashKey {
from {
color: var(--bg-color);
background-color: var(--main-color);
border-color: var(--main-color);
}
to {
color: var(--sub-color);
background-color: var(--bg-color);
border-color: var(--sub-color);
}
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
}
Added possible 4u spacebar on matrix keymap
2020-08-11 17:00:07 +08:00
.hidden-key,
.hide-key {
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
opacity: 0;
}
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
.keymap {
.keymap-split-spacer,
.keymap-stagger-split-spacer,
.keymap-matrix-split-spacer {
display: none;
}
}
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
.r1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
opacity: 0;
}
.r2 {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
}
.r3 {
display: grid;
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
}
.r4 {
display: grid;
added react mode, fixed settings and command line
2020-07-28 22:57:45 +08:00
grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.5fr;
added live keymaps. Needs some styling but fully functional
2020-07-28 08:59:06 +08:00
}
.r5 {
display: grid;
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
grid-template-columns: 4fr 5.5fr 4fr;
// &.matrixSpace {
// // grid-template-columns: 6.75fr 1.9fr 6.75fr;
// grid-template-columns: 6.9fr 4.6fr 6.9fr; // wider spacebar
// }
// &.splitSpace {
// // grid-template-columns: 6.75fr 1.9fr 6.75fr;
// grid-template-columns: 4fr 7.5fr 4fr;
// }
}
// .matrix {
// display: flex;
// justify-content: left;
// margin-left: 4.51rem;
// }
added simple implementation for displaying keymap in a matrix layout
2020-08-11 01:48:14 +08:00
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
.keymap {
&.matrix {
.r1,
.r2,
.r3,
.r4 {
display: flex;
justify-content: left;
margin-left: 4.51rem;
}
.r5 {
grid-template-columns: 6.9fr 4.6fr 6.9fr;
}
#KeyLeftBracket {
opacity: 0;
}
#KeyRightBracket {
opacity: 0;
}
#KeyQuote {
opacity: 0;
}
}
&.split {
.keymap-split-spacer {
display: block;
}
.keymap-stagger-split-spacer {
display: block;
}
.r1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
opacity: 0;
}
made the matrix layout cleaner, made code more versatile
2020-08-11 14:13:44 +08:00
changed the way keymap style works slightly, added split and split matrix
2020-08-12 06:17:00 +08:00
.r2 {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
}
.r3 {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
.r4 {
display: grid;
grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.5fr;
}
.r5 {
grid-template-columns: 5fr 3.5fr 1fr 3.5fr 5fr;
}
#KeySpace2 {
opacity: 1;
}
}
&.split_matrix {
.keymap-split-spacer {
display: block;
width: 2rem;
height: 2rem;
}
.keymap-stagger-split-spacer {
display: none;
}
.keymap-matrix-split-spacer {
display: block;
width: 2rem;
height: 2rem;
}
.r1,
.r2,
.r3,
.r4 {
display: flex;
justify-content: left;
margin-left: 4.51rem;
}
.r5 {
grid-template-columns: 6fr 2fr 1fr 2fr 6fr;
}
#KeyLeftBracket {
opacity: 0;
}
#KeyRightBracket {
opacity: 0;
}
#KeyQuote {
opacity: 0;
}
#KeySpace2 {
opacity: 1;
}
}
Added possible 4u spacebar on matrix keymap
2020-08-11 17:00:07 +08:00
}
Reference in a new issue Copy permalink