Google keyboard highlights for touch typing by verymoko

/* ==UserStyle==
@name         Google keyboard highlights for touch typing 
@version      20220528.11.01
@namespace    userstyles.world/user/verymoko
@description  It helps when you don’t have letters on the physical keyboard and are used to touch typing.

Works with any language.

@author       verymoko
@license      CC0, maybe. Do what you want.
==/UserStyle== */

@-moz-document url-prefix("https://translate.google."), url-prefix("https://www.google.") {
/*
Contents 
1. Setting up existing styling.
2. Fingers highlights.
3. RTL Backspace.
*/



/* 1. Setting up existing styling */

/* Removes bothering styling */
.vk-btn {
	background-image: none !important;
	/* Without “!important” highlight disappears on press */
}

/* Makes presses more visible on highlights */
.vk-btn.vk-sf-a {
	border-color: rgba(1, 1, 1, .3);
}



/* 2. Fingers highlights */

/* Little */
#K8,
#K16,
#K20,
#K48,
#K49,
#K65,
#K80,
#K81,
#K90,
#K186,
#K187,
#K189,
#K191,
#K192,
#K219,
#K221,
#K220,
#K222,
#K273 {
	background-color: #dbdeff;
}

/* Ring */
#K50,
#K55,
#K57,
#K76,
#K79,
#K83,
#K87,
#K88,
#K190 {
	background-color: #d4f4ff;
}

/* Middle */
#K51,
#K56,
#K67,
#K68,
#K69,
#K73,
#K75,
#K188 {
	background-color: #d1ffde;
}

/* Left hand index */
#K52,
#K53,
#K66,
#K70,
#K71,
#K82,
#K84,
#K86 {
	background-color: #ffefb6;
}

/* Right hand index */
#K54,
#K55,
#K89,
#K85,
#K72,
#K74,
#K78,
#K77 {
	background-color: #ffe68c;
}

/* Bumps */
#K70,
#K74 {
	border-bottom: 2px solid rgba(1, 1, 1, .3);
}



/* 3. RTL Backspace. Uncomment to enable */
/* #K8 > span {
	transform: rotate(180deg) translate(1px, -2px);
} */
}