Establish application infrastructure

theme/check.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458 2.6458" version="1.1">
+  <g>
+    <path style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.05832,1.653625 1.3229,-1.3229 v 0.66145 l -1.3229,1.3229 -0.79374,-0.79374 v -0.66145 z" />
+  </g>
+</svg>

theme/dark.css

@@ -0,0 +1,20 @@
+:root {
+  --tk-control              : #333333;
+  --tk-control-active       : #555555;
+  --tk-control-border       : #cccccc;
+  --tk-control-disabled-text: #9b9b9b;
+  --tk-control-shadow       : #9b9b9b;
+  --tk-control-text         : #e4e4e4;
+  --tk-desktop              : #111111;
+  --tk-window               : #111111;
+  --tk-window-text          : #e4e4e4;
+}
+
+.tk .menu-bar .menu-item[aria-disabled] {
+  text-shadow:
+    -1px -1px 1px var(--tk-control),
+     1px -1px 1px var(--tk-control),
+     1px  1px 1px var(--tk-control),
+    -1px  1px 1px var(--tk-control)
+  ;
+}

theme/kiosk.css

@@ -0,0 +1,128 @@
+:root {
+  --tk-font-dialog: "Roboto", sans-serif;
+  --tk-font-mono  : "Inconsolata SemiExpanded Medium", monospace;
+  --tk-text-scale : 0.75rem;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src        : /**/url("./roboto.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inconsolata SemiExpanded Medium";
+  src        : /**/url("./inconsolata.woff2") format("woff2");
+}
+
+body {
+  margin  : 0;
+  overflow: hidden;
+}
+
+.tk, .tk * {
+  box-sizing : border-box;
+  font-family: var(--tk-font-dialog);
+  font-size  : var(--tk-text-scale);
+  line-height: 1em;
+  margin     : 0;
+  outline    : none;
+  padding    : 0;
+}
+
+.tk.mono {
+  font-family: var(--tk-font-mono);
+}
+
+
+
+/*********************************** Menus ***********************************/
+
+.tk .menu-bar, .tk .menu-bar .menu {
+  background   : var(--tk-control);
+  border-bottom: 1px solid var(--tk-control-border);
+  gap          : 2px;
+  padding      : 2px;
+}
+
+.tk .menu-bar .menu-item > div {
+  align-items: center;
+  border     : 1px solid transparent;
+  color      : var(--tk-control-text);
+  cursor     : default;
+  gap        : 2px;
+  margin     : 0 1px 1px 0;
+  padding    : 1px;
+  user-select: none;
+}
+
+.tk .menu-bar .menu-item[aria-disabled] > div {
+  color: var(--tk-control-disabled-text);
+}
+
+.tk .menu-bar .menu {
+  border     : 1px solid var(--tk-control-border);
+  box-shadow : 1px 1px 0 var(--tk-control-border);
+  margin     : -1px 0 0 1px;
+}
+
+.tk .menu-bar .menu-item:not(.active):is(:focus,:hover) > div {
+  border-color: var(--tk-control-shadow);
+  box-shadow  : 1px 1px 0 var(--tk-control-shadow);
+}
+
+.tk .menu-bar .menu-item:not(.active):is(:focus) > div {
+  background: var(--tk-control-active);
+}
+
+.tk .menu-bar .menu-item.active > div {
+  background  : var(--tk-control-active);
+  border-color: var(--tk-control-shadow);
+  box-shadow  : none;
+  margin      : 1px 0 0 1px;
+}
+
+.tk .menu-bar .menu-item[role="menuitemradio"] > div > :nth-child(1) {
+  background   : var(--tk-window);
+  border       : 1px solid var(--tk-control-border);
+  border-radius: 50%;
+  height       : 1em;
+  width        : 1em;
+}
+
+.tk .menu-bar .menu-item[role="menuitemradio"][aria-checked="true"] >
+  div > :nth-child(1):before {
+  background   : var(--tk-window-text);
+  content      : "";
+  display      : block;
+  height       : 100%;
+  mask-image   : /**/url("./radio.svg");
+  mask-position: center;
+  mask-repeat  : no-repeat;
+  mask-size    : contain;
+  width        : 100%;
+}
+
+.tk .menu-bar .menu-item[role="menuitemcheckbox"] > div > :nth-child(1) {
+  background: var(--tk-window);
+  border    : 1px solid var(--tk-control-border);
+  height    : 1em;
+  width     : 1em;
+}
+
+.tk .menu-bar .menu-item[role="menuitemcheckbox"][aria-checked="true"] >
+  div > :nth-child(1):before {
+  background   : var(--tk-window-text);
+  content      : "";
+  display      : block;
+  height       : 100%;
+  mask-image   : /**/url("./check.svg");
+  mask-position: center;
+  mask-repeat  : no-repeat;
+  mask-size    : contain;
+  width        : 100%;
+}
+
+.tk .menu-bar .menu-separator {
+  margin    : 2px;
+  border-top: 1px solid var(--tk-control-shadow);
+}

theme/light.css

@@ -0,0 +1,11 @@
+:root {
+  --tk-control              : #eeeeee;
+  --tk-control-active       : #cccccc;
+  --tk-control-border       : #000000;
+  --tk-control-disabled-text: #565656;
+  --tk-control-shadow       : #6c6c6c;
+  --tk-control-text         : #000000;
+  --tk-desktop              : #cccccc;
+  --tk-window               : #ffffff;
+  --tk-window-text          : #000000;
+}

theme/radio.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458332 2.6458332" version="1.1">
+  <g>
+    <circle style="opacity:1;fill:#000000;stroke-width:0.264583;stroke-linecap:square" cx="1.3229166" cy="1.3229166" r="0.66145831" />
+  </g>
+</svg>

theme/virtual.css

@@ -0,0 +1,20 @@
+:root {
+  --tk-control              : #000000;
+  --tk-control-active       : #550000;
+  --tk-control-border       : #ff0000;
+  --tk-control-disabled-text: #770000;
+  --tk-control-shadow       : #aa0000;
+  --tk-control-text         : #ff0000;
+  --tk-desktop              : #000000;
+  --tk-window               : #000000;
+  --tk-window-text          : #ff0000;
+}
+
+.tk .menu-bar .menu-item[aria-disabled] {
+  text-shadow:
+    -1px -1px 1px var(--tk-control),
+     1px -1px 1px var(--tk-control),
+     1px  1px 1px var(--tk-control),
+    -1px  1px 1px var(--tk-control)
+  ;
+}