diff --git a/logic/app.js b/logic/app.js index ba95bce..7b437af 100644 --- a/logic/app.js +++ b/logic/app.js @@ -953,6 +953,7 @@ function updateCheatsheetStyling(level) { n.classList.remove('active'); n.classList.add('punctuation'); }else if(i==0){ + n.classList.add('active'); n.classList.add('homeRow'); }else if(i==6){ // all words selected @@ -963,6 +964,10 @@ function updateCheatsheetStyling(level) { n.classList.add('active'); } } + + if(i==1) { + n.classList.remove('homeRow'); + } } } diff --git a/logic/main.css b/logic/main.css index 39ed40e..6bf1b13 100644 --- a/logic/main.css +++ b/logic/main.css @@ -471,6 +471,7 @@ input:checked + .slider:before { -webkit-box-align: center; -ms-flex-align: center; align-items: center; + color: #222222; background-color: transparent; border: .2vh solid var(--accent-color); height: 75%; @@ -484,6 +485,26 @@ input:checked + .slider:before { vertical-align: top; } +#KeyQ, #KeyA, #KeyZ, #KeyP, #Semicolon, #Slash { + background-color: #80c4c4; +} + +#KeyW, #KeyS, #KeyX, #KeyO, #KeyL, #Period { + background-color: #ca80ca; +} + +#KeyE, #KeyD, #KeyC, #KeyI, #KeyK, #Comma { + background-color: #80b780; +} + +#KeyR, #KeyF, #KeyV, #KeyT, #KeyG, #KeyB { + background-color: #7a93c0; +} + +#KeyY, #KeyH, #KeyN, #KeyU, #KeyJ, #KeyM { + background-color: #8080ca; +} + .letter { display: block; font-size: 2.2vh; @@ -527,17 +548,17 @@ input:checked + .slider:before { .currentLevelKeys { border-color: var(--tertiary-accent-color); - color: var(--tertiary-accent-color); + color: #ffffff; opacity: 1; -webkit-filter: brightness(1.2); filter: brightness(1.2); } -.homeRow { +/*.homeRow { border-color: var(--secondary-accent-color); color: var(--secondary-accent-color); opacity: 1; -} +}*/ .restingPosition { text-decoration: underline; @@ -545,10 +566,18 @@ input:checked + .slider:before { .active { border-color: var(--accent-color); - color: var(--accent-color); + color: #222222; opacity: 1; - -webkit-filter: brightness(1.5); - filter: brightness(1.5); + /*-webkit-filter: brightness(1.5); + filter: brightness(1.5);*/ +} + +.homeRow { + border-color: var(--tertiary-accent-color) !important; + color: #ffffff !important; + opacity: 1 !important; + -webkit-filter: brightness(1.2) !important; + filter: brightness(1.2) !important; }