Move styles into code

js/document.js

@@ -0,0 +1,19 @@
+export function whenLoaded(callback) {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", callback);
+    }
+    else {
+        callback();
+    }
+}
+export function addStyle(style) {
+    whenLoaded(() => {
+        addStyleNow(style);
+    });
+}
+export function addStyleNow(style) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(style);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jdW1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9kb2N1bWVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLFVBQVUsVUFBVSxDQUFDLFFBQW9CO0lBQzNDLElBQUksUUFBUSxDQUFDLFVBQVUsS0FBSyxTQUFTLEVBQUUsQ0FBQztRQUNwQyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDNUQsQ0FBQztTQUFNLENBQUM7UUFDSixRQUFRLEVBQUUsQ0FBQztJQUNmLENBQUM7QUFDTCxDQUFDO0FBRUQsTUFBTSxVQUFVLFFBQVEsQ0FBQyxLQUFhO0lBQ2xDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDWixXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdkIsQ0FBQyxDQUFDLENBQUM7QUFDUCxDQUFDO0FBRUQsTUFBTSxVQUFVLFdBQVcsQ0FBQyxLQUFhO0lBQ3JDLE1BQU0sS0FBSyxHQUFHLElBQUksYUFBYSxFQUFFLENBQUM7SUFDbEMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QixRQUFRLENBQUMsa0JBQWtCLEdBQUcsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxrQkFBa0IsRUFBRSxLQUFLLENBQUMsQ0FBQztBQUMxRSxDQUFDIn0=

js/highlighter.js

@@ -1,3 +1,4 @@
+import { addStyle } from "./document";
 import { SingleTimer } from "./singletimer";
 export class Highlighter {
     elem;
@@ -14,9 +15,7 @@ export class Highlighter {
         this.timer.start();
     }
 }
-document.addEventListener("DOMContentLoaded", () => {
+addStyle(`
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(`
 .preHighlight {
     transition: color 0.3s ease-out;
 }
@@ -26,6 +25,4 @@ document.addEventListener("DOMContentLoaded", () => {
     transition: color 0.1s ease-in;
 }
 `);
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9oaWdobGlnaHRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBRXRDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUMsTUFBTSxPQUFPLFdBQVc7SUFDWixJQUFJLENBQWM7SUFDbEIsS0FBSyxDQUFjO0lBRTNCLFlBQVksSUFBaUI7UUFDekIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBRXhDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxXQUFXLENBQUMsR0FBRyxFQUFFO1lBQzlCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUM1QyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDYixDQUFDO0lBRU0sU0FBUztRQUNaLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3ZCLENBQUM7Q0FDSjtBQUVELFFBQVEsQ0FBQzs7Ozs7Ozs7O0NBU1IsQ0FBQyxDQUFDIn0=
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9oaWdobGlnaHRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTVDLE1BQU0sT0FBTyxXQUFXO0lBQ1osSUFBSSxDQUFjO0lBQ2xCLEtBQUssQ0FBYztJQUUzQixZQUFZLElBQWlCO1FBQ3pCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUV4QyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUM5QixJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDNUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ2IsQ0FBQztJQUVNLFNBQVM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN2QixDQUFDO0NBQ0o7QUFFRCxRQUFRLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLEVBQUUsR0FBRyxFQUFFO0lBQy9DLE1BQU0sS0FBSyxHQUFHLElBQUksYUFBYSxFQUFFLENBQUM7SUFDbEMsS0FBSyxDQUFDLFdBQVcsQ0FBQzs7Ozs7Ozs7O0NBU3JCLENBQUMsQ0FBQztJQUVDLFFBQVEsQ0FBQyxrQkFBa0IsR0FBRyxDQUFDLEdBQUcsUUFBUSxDQUFDLGtCQUFrQixFQUFFLEtBQUssQ0FBQyxDQUFDO0FBQzFFLENBQUMsQ0FBQyxDQUFDIn0=

js/main.js

@@ -1,3 +1,4 @@
+import { addStyle, addStyleNow } from "./document";
 import { ElemWrapper } from "./elemwrapper";
 import { Highlighter } from "./highlighter";
 import { SLCard } from "./slcard";
@@ -5,11 +6,23 @@ import { SLIcon } from "./slicon";
 import { SLInput } from "./slinput";
 import { SLTabGroup } from "./sltabgroup";
 async function main() {
+    addStyle(`
+.no-outline:focus {
+    outline: none;
+}
+`);
     const root = new ElemWrapper(document.body);
+    root.style.fontSize = "12px";
+    root.style.fontFamily = "var(--sl-font-mono)";
+    root.style.display = "flex";
+    root.style.flexDirection = "column";
+    root.style.alignItems = "center";
     const tabGroup = new SLTabGroup();
     root.append(tabGroup);
     const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
-    tasksTab.append(new SLIcon("list-task"));
+    const tasksIcon = new SLIcon("list-task");
+    tasksIcon.style.fontSize = "20px";
+    tasksTab.append(tasksIcon);
     const tasksCard = new SLCard();
     tasksPanel.append(tasksCard);
     const tasksInput = new SLInput();
@@ -17,6 +30,7 @@ async function main() {
     tasksInput.setPill();
     const tasksAddIcon = tasksInput.addSuffixIcon("plus-circle");
     const highlighter = new Highlighter(tasksAddIcon);
+    tasksAddIcon.style.cursor = "pointer";
     const addTask = () => {
         const task = tasksInput.getValue();
         if (task.length === 0) {
@@ -35,7 +49,14 @@ async function main() {
         }
     });
     const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
-    tagsTab.append(new SLIcon("tags"));
+    const tagsIcon = new SLIcon("tags");
+    tagsIcon.style.fontSize = "20px";
+    tagsTab.append(tagsIcon);
 }
+addStyleNow(`
+:not(:defined) {
+    visibility: hidden;
+}
+`);
 document.addEventListener("DOMContentLoaded", main);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbEMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNsQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFMUMsS0FBSyxVQUFVLElBQUk7SUFDZixNQUFNLElBQUksR0FBRyxJQUFJLFdBQVcsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFFNUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztJQUNsQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRXRCLE1BQU0sQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUMzRCxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUM7SUFFekMsTUFBTSxTQUFTLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztJQUMvQixVQUFVLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBRTdCLE1BQU0sVUFBVSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7SUFDakMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM3QixVQUFVLENBQUMsT0FBTyxFQUFFLENBQUM7SUFFckIsTUFBTSxZQUFZLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM3RCxNQUFNLFdBQVcsR0FBRyxJQUFJLFdBQVcsQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUVsRCxNQUFNLE9BQU8sR0FBRyxHQUFHLEVBQUU7UUFDakIsTUFBTSxJQUFJLEdBQUcsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ25DLElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUUsQ0FBQztZQUNwQixPQUFPO1FBQ1gsQ0FBQztRQUVELFVBQVUsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNuQixVQUFVLENBQUMsS0FBSyxFQUFFLENBQUM7UUFFbkIsV0FBVyxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQzVCLENBQUMsQ0FBQztJQUVGLFlBQVksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsR0FBRyxFQUFFO1FBQ3hDLE9BQU8sRUFBRSxDQUFDO0lBQ2QsQ0FBQyxDQUFDLENBQUM7SUFFSCxVQUFVLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUU7UUFDekMsSUFBSyxDQUFtQixDQUFDLEdBQUcsS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUN2QyxPQUFPLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztJQUVILE1BQU0sQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFDLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN4RCxPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDdkMsQ0FBQztBQUVELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDbkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbEMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNsQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFMUMsS0FBSyxVQUFVLElBQUk7SUFDZixRQUFRLENBQUM7Ozs7Q0FJWixDQUFDLENBQUM7SUFFQyxNQUFNLElBQUksR0FBRyxJQUFJLFdBQVcsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsTUFBTSxDQUFDO0lBQzdCLElBQUksQ0FBQyxLQUFLLENBQUMsVUFBVSxHQUFHLHFCQUFxQixDQUFDO0lBQzlDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztJQUM1QixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsR0FBRyxRQUFRLENBQUM7SUFDcEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO0lBRWpDLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7SUFDbEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUV0QixNQUFNLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDM0QsTUFBTSxTQUFTLEdBQUcsSUFBSSxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDMUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsTUFBTSxDQUFDO0lBQ2xDLFFBQVEsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7SUFFM0IsTUFBTSxTQUFTLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztJQUMvQixVQUFVLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBRTdCLE1BQU0sVUFBVSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7SUFDakMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUM3QixVQUFVLENBQUMsT0FBTyxFQUFFLENBQUM7SUFFckIsTUFBTSxZQUFZLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM3RCxNQUFNLFdBQVcsR0FBRyxJQUFJLFdBQVcsQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNsRCxZQUFZLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxTQUFTLENBQUM7SUFFdEMsTUFBTSxPQUFPLEdBQUcsR0FBRyxFQUFFO1FBQ2pCLE1BQU0sSUFBSSxHQUFHLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNuQyxJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDcEIsT0FBTztRQUNYLENBQUM7UUFFRCxVQUFVLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDbkIsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBRW5CLFdBQVcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUM1QixDQUFDLENBQUM7SUFFRixZQUFZLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLEdBQUcsRUFBRTtRQUN4QyxPQUFPLEVBQUUsQ0FBQztJQUNkLENBQUMsQ0FBQyxDQUFDO0lBRUgsVUFBVSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFO1FBQ3pDLElBQUssQ0FBbUIsQ0FBQyxHQUFHLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDdkMsT0FBTyxFQUFFLENBQUM7UUFDZCxDQUFDO0lBQ0wsQ0FBQyxDQUFDLENBQUM7SUFFSCxNQUFNLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDeEQsTUFBTSxRQUFRLEdBQUcsSUFBSSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsUUFBUSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsTUFBTSxDQUFDO0lBQ2pDLE9BQU8sQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0IsQ0FBQztBQUVELFdBQVcsQ0FBQzs7OztDQUlYLENBQUMsQ0FBQztBQUVILFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyJ9

js/style.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

static/app.css

@@ -1,7 +1,3 @@
-:not(:defined) {
-    visibility: hidden;
-}
-
 :host,
 .sl-theme-dark {
     --sl-color-primary-50: rgb(254 247 254);
@@ -17,23 +13,4 @@
     --sl-color-primary-950: rgb(70 11 71);
 
     --sl-input-focus-ring-color: transparent;
-}
-
-sl-tab sl-icon {
-    font-size: 20px;
-}
-
-sl-input:focus {
-    outline: none;
-}
-
-sl-input sl-icon {
-    cursor: pointer;
-}
-
-body {
-    font: 12px var(--sl-font-mono);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }

ts/document.ts

@@ -0,0 +1,19 @@
+export function whenLoaded(callback: () => void) {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", callback);
+    } else {
+        callback();
+    }
+}
+
+export function addStyle(style: string) {
+    whenLoaded(() => {
+        addStyleNow(style);
+    });
+}
+
+export function addStyleNow(style: string) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(style);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}

ts/highlighter.ts

@@ -1,3 +1,4 @@
+import { addStyle } from "./document";
 import { ElemWrapper } from "./elemwrapper";
 import { SingleTimer } from "./singletimer";
 
@@ -20,9 +21,7 @@ export class Highlighter {
     }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+addStyle(`
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(`
 .preHighlight {
     transition: color 0.3s ease-out;
 }
@@ -31,7 +30,4 @@ document.addEventListener("DOMContentLoaded", () => {
     color: var(--sl-color-primary-600);
     transition: color 0.1s ease-in;
 }
-`);
+`);
-
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-});

ts/main.ts

@@ -1,3 +1,4 @@
+import { addStyle, addStyleNow } from "./document";
 import { ElemWrapper } from "./elemwrapper";
 import { Highlighter } from "./highlighter";
 import { SLCard } from "./slcard";
@@ -6,13 +7,26 @@ import { SLInput } from "./slinput";
 import { SLTabGroup } from "./sltabgroup";
 
 async function main() {
+    addStyle(`
+.no-outline:focus {
+    outline: none;
+}
+`);
+
     const root = new ElemWrapper(document.body);
+    root.style.fontSize = "12px";
+    root.style.fontFamily = "var(--sl-font-mono)";
+    root.style.display = "flex";
+    root.style.flexDirection = "column";
+    root.style.alignItems = "center";
 
     const tabGroup = new SLTabGroup();
     root.append(tabGroup);
 
     const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
-    tasksTab.append(new SLIcon("list-task"));
+    const tasksIcon = new SLIcon("list-task");
+    tasksIcon.style.fontSize = "20px";
+    tasksTab.append(tasksIcon);
 
     const tasksCard = new SLCard();
     tasksPanel.append(tasksCard);
@@ -23,6 +37,7 @@ async function main() {
 
     const tasksAddIcon = tasksInput.addSuffixIcon("plus-circle");
     const highlighter = new Highlighter(tasksAddIcon);
+    tasksAddIcon.style.cursor = "pointer";
 
     const addTask = () => {
         const task = tasksInput.getValue();
@@ -47,7 +62,15 @@ async function main() {
     });
 
     const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
-    tagsTab.append(new SLIcon("tags"));
+    const tagsIcon = new SLIcon("tags");
+    tagsIcon.style.fontSize = "20px";
+    tagsTab.append(tagsIcon);
 }
 
+addStyleNow(`
+:not(:defined) {
+    visibility: hidden;
+}
+`);
+
 document.addEventListener("DOMContentLoaded", main);