support older browsers css

Co-authored-by: Oscar Hermoso <[email protected]>

css/virtual-keyboard.less

@@ -82,7 +82,7 @@
   --_keycap-max-width: var(--keycap-max-width, 100px);
   --_keycap-gap: var(--keycap-gap, 8px);
 
-  --_keycap-font-size: var(--keycap-font-size, ~"clamp(16px, 4cqw, 24px)");
+  --_keycap-font-size: var(--keycap-font-size, ~"max(16px, min(4cqw, 24px))");
   --_keycap-small-font-size:var(--keycap-small-font-size,  calc(var(--keycap-font-size) * 0.8));
   --_keycap-extra-small-font-size: var(--keycap-extra-small-font-size, calc(var(--keycap-font-size) / 1.42));
 
@@ -379,22 +379,22 @@ body > .ML__keyboard.is-visible.animate > .MLK__backdrop {
     }
     .w5 {
       width: calc(
-        ~'min(var(--_keycap-max-width, 100px), 10cqw)' / 2 - var(--_keycap-gap);
+        ~'min(var(--_keycap-max-width, 100px), 10%)' / 2 - var(--_keycap-gap);
       );
     }
     .w15 {
       width: calc(
-        1.5 * ~'min(var(--_keycap-max-width, 100px), 10cqw)' - var(--_keycap-gap);
+        1.5 * ~'min(var(--_keycap-max-width, 100px), 10%)' - var(--_keycap-gap);
       );
     }
     .w20 {
       width: calc(
-        2 * ~'min(var(--_keycap-max-width, 100px), 10cqw)' -  var(--_keycap-gap);
+        2 * ~'min(var(--_keycap-max-width, 100px), 10%)' -  var(--_keycap-gap);
       );
     }
     .w50 {
       width: calc(
-        5 * ~'min(var(--_keycap-max-width, 100px), 10cqw)' -  var(--_keycap-gap);
+        5 * ~'min(var(--_keycap-max-width, 100px), 10%)' -  var(--_keycap-gap);
       );
     }
     .MLK__keycap.w50 {
@@ -481,7 +481,7 @@ body > .ML__keyboard.is-visible.animate > .MLK__backdrop {
       align-items: center;
       justify-content: space-evenly;
 
-      width: calc(~'min(var(--_keycap-max-width), 10cqw)' - var(--_keycap-gap));
+      width: calc(~'min(var(--_keycap-max-width), 10%)' - var(--_keycap-gap));
       height: var(--_keycap-height);
       box-sizing: border-box;
       padding: 0;