Fix checkbox styling

The original kaios-native-ui was using a fancy mask-image property, which was unfortunately a bit *too* fancy for KaiOS to handle. Instead, we've fallen back to good ol' conditions and a number of new SVGs for the selected version of the checkbox. The drawback is, of course, that selected checkboxes will perforce be white (which can be easily overridden to black if so desired, but not so easily to any other colour: Inkscape is your friend though).
Fix styling for selected elements
2022-09-27 19:17:32 +05:30 · 2022-09-27 19:15:16 +05:30 · 2022-09-27 18:09:54 +05:30
15 changed files with 336 additions and 32 deletions
--- a/public/checkboxes-radios/checkbox-off-selected-kaios-2.5.3.svg
+++ b/public/checkboxes-radios/checkbox-off-selected-kaios-2.5.3.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg4"
+   sodipodi:docname="checkbox-off-selected-kaios-2.5.3.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="black"
+     d="M304 80q53 0 90.5 37.5t37.5 90.5v96q0 53 -37.5 90.5t-90.5 37.5h-96q-53 0 -90.5 -37.5t-37.5 -90.5v-96q0 -53 37.5 -90.5t90.5 -37.5h96zM392 304v-96q0 -36 -26 -62t-62 -26h-96q-36 0 -62 26t-26 62v96q0 36 26 62t62 26h96q36 0 62 -26t26 -62z"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/checkbox-off-selected-kaios-2.5.svg
+++ b/public/checkboxes-radios/checkbox-off-selected-kaios-2.5.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg135"
+   sodipodi:docname="checkbox-off-selected-kaios-2.5.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs139" />
+  <sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" />
+  <path
+     fill="black"
+     d="M256 80q95 0 135.5 40.5t40.5 135.5t-40 135.5t-136 40.5t-136 -40.5t-40 -135.5t40 -135.5t136 -40.5zM256 400q82 0 113 -31t31 -113t-31 -113t-113 -31t-113 31t-31 113t31 113t113 31z"
+     id="path133"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/checkbox-on-selected-kaios-2.5.3.svg
+++ b/public/checkboxes-radios/checkbox-on-selected-kaios-2.5.3.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg260"
+   sodipodi:docname="checkbox-on-selected-kaios-2.5.3.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs264" />
+  <sodipodi:namedview
+     id="namedview262"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg260" />
+  <path
+     fill="black"
+     d="M304 80q53 0 90.5 37.5t37.5 90.5v96q0 53 -37.5 90.5t-90.5 37.5h-96q-53 0 -90.5 -37.5t-37.5 -90.5v-96q0 -53 37.5 -90.5t90.5 -37.5h96zM392 304v-96q0 -36 -26 -62t-62 -26h-96q-36 0 -62 26t-26 62v96q0 36 26 62t62 26h96q36 0 62 -26t26 -62zM329 177l-1 1 q6 -7 16 -7q9 0 16 6.5t7 15.5t-6 15l-115 128q-7 7 -16.5 7t-15.5 -7l-64 -64q-7 -7 -7 -16t6.5 -16t16 -7t16.5 7l48 48z"
+     id="path258"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/checkbox-on-selected-kaios-2.5.svg
+++ b/public/checkboxes-radios/checkbox-on-selected-kaios-2.5.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg385"
+   sodipodi:docname="checkbox-on-selected-kaios-2.5.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs389" />
+  <sodipodi:namedview
+     id="namedview387"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg385" />
+  <path
+     fill="black"
+     d="M256 80q95 0 135.5 40.5t40.5 135.5t-40 135.5t-136 40.5t-136 -40.5t-40 -135.5t40 -135.5t136 -40.5zM256 400q82 0 113 -31t31 -113v-4q0 -28 -5 -55l-108 108l-31 31l-84 -85q-8 -6 -8 -16q0 -6 3 -11t8 -8t11 -3q10 0 16 8l54 53l121 -121q-29 -41 -121 -41 q-82 0 -113 31t-31 113t31 113t113 31z"
+     id="path383"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/radio-off-selected-kaios-2.5.3.svg
+++ b/public/checkboxes-radios/radio-off-selected-kaios-2.5.3.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg510"
+   sodipodi:docname="radio-off-selected-kaios-2.5.3.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs514" />
+  <sodipodi:namedview
+     id="namedview512"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg510" />
+  <path
+     fill="black"
+     d="M256 80q73 0 124.5 51.5t51.5 124.5t-51.5 124.5t-124.5 51.5t-124.5 -51.5t-51.5 -124.5t51.5 -124.5t124.5 -51.5zM256 392q56 0 96 -40t40 -96t-40 -96t-96 -40t-96 40t-40 96t40 96t96 40z"
+     id="path508"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/radio-off-selected-kaios-2.5.svg
+++ b/public/checkboxes-radios/radio-off-selected-kaios-2.5.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg635"
+   sodipodi:docname="radio-off-selected-kaios-2.5.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs639" />
+  <sodipodi:namedview
+     id="namedview637"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg635" />
+  <path
+     fill="black"
+     d="M256 80q73 0 124.5 51.5t51.5 124.5t-51.5 124.5t-124.5 51.5t-124.5 -51.5t-51.5 -124.5t51.5 -124.5t124.5 -51.5zM256 400q60 0 102 -42t42 -102t-42 -102t-102 -42t-102 42t-42 102t42 102t102 42z"
+     id="path633"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/radio-on-selected-kaios-2.5.3.svg
+++ b/public/checkboxes-radios/radio-on-selected-kaios-2.5.3.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg760"
+   sodipodi:docname="radio-on-selected-kaios-2.5.3.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs764" />
+  <sodipodi:namedview
+     id="namedview762"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg760" />
+  <path
+     fill="black"
+     d="M176 256q0 -33 23.5 -56.5t56.5 -23.5t56.5 23.5t23.5 56.5t-23.5 56.5t-56.5 23.5t-56.5 -23.5t-23.5 -56.5zM256 80q73 0 124.5 51.5t51.5 124.5t-51.5 124.5t-124.5 51.5t-124.5 -51.5t-51.5 -124.5t51.5 -124.5t124.5 -51.5zM256 392q56 0 96 -40t40 -96t-40 -96 t-96 -40t-96 40t-40 96t40 96t96 40z"
+     id="path758"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/checkboxes-radios/radio-on-selected-kaios-2.5.svg
+++ b/public/checkboxes-radios/radio-on-selected-kaios-2.5.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="-10 0 522 512"
+   id="svg885"
+   sodipodi:docname="radio-on-selected-kaios-2.5.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs889" />
+  <sodipodi:namedview
+     id="namedview887"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90429688"
+     inkscape:cx="262.63499"
+     inkscape:cy="256.55292"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg885" />
+  <path
+     fill="black"
+     d="M256 80q73 0 124.5 51.5t51.5 124.5t-51.5 124.5t-124.5 51.5t-124.5 -51.5t-51.5 -124.5t51.5 -124.5t124.5 -51.5zM256 400q60 0 102 -42t42 -102t-42 -102t-102 -42t-102 42t-42 102t42 102t102 42zM256 160q40 0 68 28t28 68t-28 68t-68 28t-68 -28t-28 -68t28 -68 t68 -28z"
+     id="path883"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/public/images/icon-white.svg
+++ b/public/images/icon-white.svg
@ -5,9 +5,9 @@
   id="svg4"
   sodipodi:docname="icon-white.svg"
   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
-   inkscape:export-filename="../Code/jab/public/images/icon-48.png"
-   inkscape:export-xdpi="9"
-   inkscape:export-ydpi="9"
+   inkscape:export-filename="icon-white-256.png"
+   inkscape:export-xdpi="48"
+   inkscape:export-ydpi="48"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
@ -25,8 +25,8 @@
     inkscape:deskcolor="#d1d1d1"
     showgrid="false"
     inkscape:zoom="0.65186406"
-     inkscape:cx="39.118586"
-     inkscape:cy="381.98148"
+     inkscape:cx="-69.799829"
+     inkscape:cy="177.95121"
     inkscape:window-width="1366"
     inkscape:window-height="736"
     inkscape:window-x="0"
--- a/public/kaios-native-ui.css
+++ b/public/kaios-native-ui.css
@ -145,10 +145,6 @@
  background: var(--radio-color-focused) !important;
 }

-.selected > .checkbox-container__checkbox {
-  background: var(--checkbox-color-focused) !important;
-}
-
 html,
 body {
  height: 100%;
@ -457,17 +453,6 @@ body {
  text-transform: var(--capitalization);
 }

-.checkbox-container__input + .checkbox-container__checkbox {
-  background: var(--checkbox-color);
-  /* you can change it to "checkboxes-radios/checkbox-on-kaios-2.5.svg" */
-  mask-image: url("checkboxes-radios/checkbox-off-kaios-2.5.3.svg");
-}
-
-.checkbox-container__input:checked + .checkbox-container__checkbox {
-  /* you can change it to "checkboxes-radios/checkbox-on-kaios-2.5.svg" */
-  mask-image: url("checkboxes-radios/checkbox-on-kaios-2.5.3.svg");
-}
-
 /* List item with progress bar */

 .progress-container {
--- a/public/kaios-native-ui.js
+++ b/public/kaios-native-ui.js
@ -8,9 +8,9 @@ const callFunction = (callback, e) => {
    callback(element.parentElement);
 };

-const whenBlur = (element) => element.classList.remove("selected");
+const blur = (element) => element.classList.remove("selected");

-const whenFocus = (element) => element.classList.add("selected");
+const focus = (element) => element.classList.add("selected");

 window.addEventListener("focus", (e) => callFunction(focus, e), true);
 window.addEventListener("blur", (e) => callFunction(blur, e), true);
--- a/src/components/ChatMessage.svelte
+++ b/src/components/ChatMessage.svelte
@ -72,7 +72,7 @@
    font-size: 3rem;
  }

-  .chat-item-indicator:focus-within {
+  .chat-item-indicator:focus {
    background: var(--chatbox-indicator-background-focused);
  }

@ -84,7 +84,7 @@
    margin-top: 0;
  }

-  .chat-item-indicator:focus-within .chat-item-info {
+  .chat-item-indicator:focus .chat-item-info {
    color: var(--chatbox-indicator-color-focused);
  }
 </style>
--- a/src/components/Checkbox.svelte
+++ b/src/components/Checkbox.svelte
@ -22,20 +22,35 @@
 </div>

 <style>
-  .checkbox-container:focus-within {
+  .checkbox-container.selected {
    background: var(--item-focused-background);
    color: var(--item-focused-text-color);
  }

-  .checkbox-container:focus-within .checkbox-container__text {
+  .checkbox-container.selected .checkbox-container__text {
    color: var(--item-focused-text-color);
  }

-  .checkbox-container:focus-within .checkbox-container__subtext {
+  .checkbox-container.selected .checkbox-container__subtext {
    color: var(--item-focused-subtext-color);
  }

-  .checkbox-container:focus-within .checkbox-container__checkbox {
-    background: var(--checkbox-color-focused);
+  .checkbox-container__input + .checkbox-container__checkbox {
+    /* you can change it to "/checkboxes-radios/checkbox-on-kaios-2.5.svg" */
+    background-image: url("/checkboxes-radios/checkbox-off-kaios-2.5.3.svg");
+  }
+
+  .checkbox-container__input:checked + .checkbox-container__checkbox {
+    /* you can change it to "/checkboxes-radios/checkbox-on-kaios-2.5.svg" */
+    background-image: url("/checkboxes-radios/checkbox-on-kaios-2.5.3.svg");
+  }
+
+  /* for when they're selected */
+  :global(.selected > .checkbox-container__input + .checkbox-container__checkbox) {
+    background-image: url("/checkboxes-radios/checkbox-off-selected-kaios-2.5.3.svg") !important;
+  }
+
+  :global(.selected > .checkbox-container__input:checked + .checkbox-container__checkbox) {
+    background-image: url("/checkboxes-radios/checkbox-on-selected-kaios-2.5.3.svg") !important;
  }
 </style>
--- a/src/components/Input.svelte
+++ b/src/components/Input.svelte
@ -16,12 +16,12 @@
 </div>

 <style>
-  .input-container:focus-within {
+  .input-container.selected {
    background: var(--item-focused-background);
    color: var(--item-focused-text-color);
  }

-  .input-container:focus-within .input-container__label {
+  .input-container.selected .input-container__label {
    color: var(--item-focused-subtext-color)
  }
 </style>
--- a/src/components/Text.svelte
+++ b/src/components/Text.svelte
@ -13,7 +13,7 @@
    background: var(--item-background);
    color: var(--item-text-color);
  }
-  .text-container:focus-within {
+  .text-container:focus {
    background: var(--item-focused-background);
    color: var(--item-focused-text-color);
  }