diff --git a/src/assets/css/keyboard.css b/src/assets/css/keyboard.css index 4dceab37ee6592832d156a212073da599547b210..8c4103dbc8cfba31795da5e089ccf338dd40924f 100644 --- a/src/assets/css/keyboard.css +++ b/src/assets/css/keyboard.css @@ -63,7 +63,7 @@ div.keyboard_row > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_ke font-size: 20px; } -div.keyboard_key > *:not(:first-child) { +div.keyboard_key > *:not(h1) { margin: 0px; font-size: 18px; position: absolute; @@ -121,3 +121,51 @@ div.keyboard_key#keyboard_spacebar { width: 515px; height: 38px; } + +section#keyboard[data-is-caps-lck-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- CAPSLCK: ON"] { + background-color: rgb(190, 230, 193); + color: black; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty), section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) { + position: relative; + top: 3px; + font-size: 26px; + margin: 0px 5px; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 { + font-size: 20px; + opacity: 1; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1 { + margin: 0px; + font-size: 18px; + position: absolute; + top: 3px; + left: 3px; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1 { + opacity: 0; +} + + +section#keyboard[data-is-fn-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- FN: ON"] { + background-color: rgb(190, 230, 193); + color: black; +} + +section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) { + position: relative; + top: 3px; + font-size: 23px; + margin: 0px 5px; + opacity: 1; +} + +section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3, section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3 + h2, section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3 + h2 + h1 { + position: absolute; + opacity: 0; +} diff --git a/src/assets/kb_layouts/en-US.json b/src/assets/kb_layouts/en-US.json index 3c7c8d753eeadef1e8efb22c842b99b1ebf54c57..524c3d6dc2d93ce6a3e7652e60b9e30990d3708f 100644 --- a/src/assets/kb_layouts/en-US.json +++ b/src/assets/kb_layouts/en-US.json @@ -224,7 +224,6 @@ { "name": "CAPS", "cmd": "ESCAPED|-- CAPSLCK: ON", - "shift_name": "CAPS", "shift_cmd": "ESCAPED|-- CAPSLCK: OFF" }, { diff --git a/src/classes/keyboard.class.js b/src/classes/keyboard.class.js index 262a8530521e465ca47f5b8553fcc9f9c41ca482..1b045951169690d6adba29bdae9445c9efd19c02 100644 --- a/src/classes/keyboard.class.js +++ b/src/classes/keyboard.class.js @@ -11,6 +11,7 @@ class Keyboard { container.dataset.isCapsLckOn = false; container.dataset.isAltOn = false; container.dataset.isCtrlOn = false; + container.dataset.isFnOn = false; // Parse keymap and create DOM Object.keys(layout).forEach((row) => { @@ -26,10 +27,10 @@ class Keyboard { key.innerHTML = `