Compare commits

...

3 commits

Author SHA1 Message Date
Badri Sunderarajan aa0f1c5641 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).
2022-09-27 19:17:32 +05:30
Badri Sunderarajan c8c5d3178c Fix styling for selected elements
KaiOS 2 doesn't support :focus-within, so we're replacing it with
a (resurrected) wee bit of JavaScript.

Closes #8
2022-09-27 19:15:16 +05:30
Badri Sunderarajan 356911ed52 Update Inkscape export info for white icon
Should've done this earlier but :P
2022-09-27 18:09:54 +05:30
15 changed files with 336 additions and 32 deletions

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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"

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -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 {

View file

@ -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);

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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);
}