Cinnamon: Fix support for ctrl and alt OSK modifiers. (#529)

Ref:
linuxmint/cinnamon#13355

Author: mtwebster

src/Mint-X/theme/Mint-X/cinnamon/cinnamon.css

@@ -1397,6 +1397,8 @@ On-Screen Keyboard (>= Cinnamon 6.6)
 }
 
 .vkeyboard-key:active,
+.vkeyboard-key.modifier-key:latched,
+.vkeyboard-key.modifier-key:latched:hover,
 .vkeyboard-key.shift-key-uppercase {
     border-image: url("button-assets/button-pressed.png") 4;
 }
@@ -1405,6 +1407,7 @@ On-Screen Keyboard (>= Cinnamon 6.6)
 .vkeyboard-key.escape-key,
 .vkeyboard-key.hide-key,
 .vkeyboard-key.enter-key,
+.vkeyboard-key.modifier-key,
 .vkeyboard-key.non-alpha-key {
     border-image: url("button-assets/button-darker.png") 4;
 }
@@ -1417,6 +1420,8 @@ On-Screen Keyboard (>= Cinnamon 6.6)
 .vkeyboard-key.escape-key:checked,
 .vkeyboard-key.hide-key:hover,
 .vkeyboard-key.hide-key:checked,
+.vkeyboard-key.modifier-key:hover,
+.vkeyboard-key.modifier-key:checked,
 .vkeyboard-key.non-alpha-key:hover,
 .vkeyboard-key.non-alpha-key:checked {
     border-image: url("button-assets/button-hover.png") 4;
@@ -1426,6 +1431,7 @@ On-Screen Keyboard (>= Cinnamon 6.6)
 .vkeyboard-key.shift-key-lowercase:active,
 .vkeyboard-key.escape-key:active,
 .vkeyboard-key.hide-key:active,
+.vkeyboard-key.modifier-key:active,
 .vkeyboard-key.non-alpha-key:active {
     border-image: url("button-assets/button-pressed.png") 4;
 }

src/Mint-Y/cinnamon/cinnamon-dark.css

@@ -1989,6 +1989,15 @@ On-Screen Keyboard (>= Cinnamon 6.6)
       background-color: #35a854;
       border: 1px solid #35a854;
       box-shadow: inset 0 2px 4px #35a854; }
+  .vkeyboard-key.modifier-key {
+    background-color: #38383e; }
+    .vkeyboard-key.modifier-key:hover, .vkeyboard-key.modifier-key:checked {
+      color: #e1e1e1;
+      background-color: #3c3c44;
+      border: 1px solid #303036;
+      box-shadow: inset 0 2px 4px rgba(60, 60, 68, 0.05); }
+    .vkeyboard-key.modifier-key:latched {
+      background-color: #5e5e69; }
   .vkeyboard-key StIcon {
     icon-size: 1.125em; }
 

src/Mint-Y/cinnamon/cinnamon.css

@@ -1991,6 +1991,15 @@ On-Screen Keyboard (>= Cinnamon 6.6)
       background-color: #35a854;
       border: 1px solid #35a854;
       box-shadow: inset 0 2px 4px #35a854; }
+  .vkeyboard-key.modifier-key {
+    background-color: #c0c0c6; }
+    .vkeyboard-key.modifier-key:hover, .vkeyboard-key.modifier-key:checked {
+      color: #303030;
+      background-color: #bdbdc4;
+      border: 1px solid #b5b5bd;
+      box-shadow: inset 0 2px 4px rgba(189, 189, 196, 0.05); }
+    .vkeyboard-key.modifier-key:latched {
+      background-color: #9a9aa5; }
   .vkeyboard-key StIcon {
     icon-size: 1.125em; }
 

src/Mint-Y/cinnamon/sass/_keyboard.scss

@@ -52,6 +52,15 @@ $shifted_key_color: if($variant == 'light', darken($bg_color, 30%), lighten($bg_
     &:active { @include button(active); }
   }
 
+  &.modifier-key {
+    background-color: $non_alpha_key_color;
+
+    &:hover, &:checked { @include button(hover); }
+    &:latched {
+      background-color: $shifted_key_color;
+    }
+  }
+
   StIcon { icon-size: 1.125em; }
 }