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).
This commit is contained in:
parent
c8c5d3178c
commit
aa0f1c5641
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,22 @@
|
|||
color: var(--item-focused-subtext-color);
|
||||
}
|
||||
|
||||
.checkbox-container.selected .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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue