Set the Tings!
My main complaint with KaiOS has been that for how much they claim it's optimized for small screens, the font sizes are huge and there is so much whitespace around everything, they don't actually manage to fit that much information on the screen. I don't know if this is limited to the devices sold in the US or not - ours tend to be marketed specifically to old people who don't want a smartphone, and can't see that well anyway. There's a limit to the usability of big font sizes, and I think KaiOS is over said limit. Let's modify the Alarm app to be more usable.
There is a global font size setting in KaiOS, but it only toggles between big and enormous. Unfortunately, I haven't found a nice easy way to globally reduce the size of text, and it seems that the CSS isn't designed well enough to really handle arbitrary changes in text sizes anyway - stuff moves around and needs adjusting. So as far as I know, it really needs to be done on a per-app basis. This means you don't have to modify the system app anyway, so it's not really dangerous.
One caveat, I don't know that much CSS, so I really just play around with it until it does what I want. There are probably more elegant and robust ways to do what I do here, but this is how I did it anyway. It’s not perfect but I think it’s pretty functional.
We do need ADB root access, so install the adbroot app or your rooting method of choice. Then get the Settings app and webapps.json from the phone with ADB root like so:
adb pull /system/b2g/webapps/clock.gaiamobile.org
adb pull /data/local/webapps/webapps.json
Create a working directory and extract the application source there:
mkdir clock-source
unzip clock.gaiamobile.org/application.zip -d clock-source
Now we can do the modifications!
Find the block below and modify it to match:
*.focus,
.hasfocused {
color: var(--highlight-text-color, #ffffff) !important;
background-color: var(--highlight-color, #00B965) !important;
}
#alarm-name {
border-color: #737D80;
color: #333;
width: calc(100% - 2rem);
margin: auto;
}
.settings-chapter-lbl{
background-color: var(--color-gs10);
margin-left: 0rem;
padding-left: 2rem;
height: 3rem;
width: 100%;
font-size: 1.6rem;
display: block;
font-weight: 300;
font-size: 2.2rem;
color: #000;
}
ul.compact li {
position: relative;
min-height: 5rem;
padding-top: 0rem;
margin-left: 0rem;
width: 100%;
border-color: #737D80;
}
ul.compact li label {
margin-left: 1rem;
padding: 0 1rem 0 0.5rem;
color: #9a9898;
font-size: var(--font-p-pri);
display: block;
font-weight: 500;
color: #000;
}
ul.compact li label.value {
font-size: var(--font-p-pri);
color: #A1B0B2;
font-weight: 600;
}
ul.compact li.focus > #alarm-name {
margin-left: 1rem;
margin-right: 8rem;
width: calc(100% - rem);
color: #ffff;
background-color: var(--color-gs00);
}
#sound-label,
#new-alarm-sound-label {
color: #A1B0B2;
font-weight: 600;
}
ul#alarms li.alarm-cell: after {
content: "";
position: absolute;
width: 100%;
height: .1rem;
display: none;
}
Find the following blocks of code and modify them to match:
html, body {
width: 100%
height: 100%
overflow: hidden;
margin: 0;
color: white;
font-size: 7.5px;
-moz-user-select: none;
}
body label.pack-checkbox-large > span {
margin-bottom: 0;
color: var(--color-gs90);
width: 30.5rem;
height: 4rem;
left: 0;
line-height: 4rem;
text-overflow: ellipsis;
position: absolute;
overflow: hidden;
margin-left: 0 !important;
-moz-padding-start: 0 !important;
padding-right: 1rem;
}
Find the following blocks of code and modify them to match:
#stopwatch-time-label {
display: flex;
margin-left: 30px;
}
.lap-duration {
float: right;
font-variant-numeric: tabular-nums;
font-size: 1.7rem;
color: inherit;
margin-right: 1rem;
font-family: "Open Sans Semi-Bold";
}
Whew! That was quite a bit, huh? The hard part's over. Now let's put it back on the phone and make sure it works.
We could either just install this with WebIDE or put it on the phone with ADB. It's just as easy to put it on using ADB, and you can replace the stock one in the menu with the newly modified version without actually removing the stock one from the phone. First, get root access, then the following:
cd clock-source
rm ../clock.gaiamobile.org/application.zip
zip -r ../clock.gaiamobile.org/application.zip ./*
cd ..
adb push clock.gaiamobile.org /data/local/webapps
And now we will change the path to the app in the webapps.json file we pulled earlier. Find the clock.gaiamobile.org section in the file:
"clock.gaiamobile.org": {
"origin": "app://clock.gaiamobile.org",
"installOrigin": "app://clock.gaiamobile.org",
"receipt": null,
"installTime": 1547465160507,
"updateTime": 1547465160507,
"manifestURL": "app://clock.gaiamobile.org/manifest.webapp",
"localId": 1026,
"appStatus": 3,
"manifestHash": "1e7e9b359b4871956d9d8095bf94885c",
"basePath": "/system/b2g/webapps",
"id": "clock.gaiamobile.org",
"removable": false,
"kind": "packaged",
"enabled": true,
"name": "Settings",
"csp": "",
"role": "",
"widgetPages": [],
"redirects": null,
"additionalLanguages": {},
"installerAppId": 0,
"installerIsBrowser": false,
"installState": "installed",
"storeId": "",
"storeVersion": 0,
"downloading": false,
"readyToApplyDownload": false
},
Yours will probably be slightly different, but all we need to do is change the basePath line from “/system/b2g/webapps" to “/data/local/webapps”.
Finally, push the webapps.json file back to the phone and reboot:
adb push webapps.json /data/local/webapps/
adb reboot
It should be pretty obvious if it worked, I would think! You should be able to see MUCH more text onscreen!