improve UI

dist/index.css

@@ -185,6 +185,83 @@ main {
   --subtle-luma-dark: 5%;
 }
 
+/* src/aero.css */
+:root {
+  --primary: hsl(220, 100%, 90%);
+  --primary-hover: hsl(220, 100%, 88%);
+  --primary-active: hsl(220, 100%, 85%);
+  --text-on-color: black;
+  --surface: hsla(220, 30%, 90%, 50%);
+  --surface-hover: hsla(220, 30%, 85%, 50%);
+  --surface-active: hsla(220, 30%, 80%, 50%);
+  --control-height: 2rem;
+  --outline-width: 2px;
+}
+.gap {
+  gap: 0px !important;
+}
+.flex-row :is(button, input, .tile):not(:last-child) {
+  margin-right: var(--gap-between-tiles);
+}
+.flex-column :is(button, input, .tile):not(:last-child) {
+  margin-bottom: var(--gap-between-tiles);
+}
+button,
+input,
+select,
+textarea,
+.tile {
+  border-radius: 5px;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 0.9rem;
+}
+button .icon {
+  font-size: 1.1rem;
+}
+.modal > div {
+  border-radius: 7px;
+}
+:is(input, select):not(.tile *),
+button,
+.tile {
+  position: relative;
+  border: 1px solid var(--border);
+}
+:is(input, select):not(.tile *)::before,
+button::before,
+.tile::before {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  opacity: 0.25;
+  pointer-events: none;
+}
+:is(input, select):not(.tile *)::before,
+button::before,
+.tile:has(select)::before {
+  background:
+    linear-gradient(
+      #b7b7b7,
+      #fff 45%,
+      #bdbdbd 70%,
+      #eee);
+}
+:is(input):not(.tile *)::before,
+.tile:has(input)::before {
+  background:
+    linear-gradient(
+      #d8d8d8,
+      #bdbdbd 35%,
+      #eee);
+}
+
 /* src/View/chatPage.css */
 #chat-page-wrapper {
   display: none;
@@ -402,52 +479,54 @@ body[showing-chat] #chat-page-wrapper {
   width: 100%;
   max-width: var(--max-content-width);
 }
-.message-bubble .main {
+.message-bubble .tile.main {
   display: flex;
   flex-direction: row;
-  background-color: var(--surface);
+  align-items: start;
+  padding: 0px;
   width: 100%;
   max-width: var(--max-input-width);
   overflow: hidden;
 }
-.message-bubble .main .text-container {
+.message-bubble .tile.main .text-container {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   width: 100%;
   flex: 1;
 }
-.message-bubble .main .button-container {
+.message-bubble .tile.main .button-container {
   display: flex;
-  align-items: start;
+  width: var(--control-height);
+  max-width: var(--control-height);
 }
-.message-bubble .main button {
+.message-bubble .tile.main button {
   justify-content: center;
   padding: 0px;
-  width: var(--control-height);
+  width: 100%;
   --surface: transparent;
 }
-.message-bubble .main .text-container {
+.message-bubble .tile.main .text-container {
   padding: var(--control-padding);
 }
-.message-bubble .main .timestamp,
-.message-bubble .main .timestamp .icon,
-.message-bubble .main .sender-name {
+.message-bubble .tile.main .timestamp,
+.message-bubble .tile.main .timestamp .icon,
+.message-bubble .tile.main .sender-name {
   font-size: 0.8rem;
   opacity: 0.6;
 }
-.message-bubble .main .timestamp {
+.message-bubble .tile.main .timestamp {
   display: flex;
   align-items: center;
   gap: var(--gap-between-tiles);
 }
-.message-bubble .main .timestamp .icon {
+.message-bubble .tile.main .timestamp .icon {
   display: none;
 }
-.message-bubble .main .sender-name {
+.message-bubble .tile.main .sender-name {
   font-weight: bold;
 }
-.message-bubble .main .body {
+.message-bubble .tile.main .body {
   word-break: break-word;
 }
 .message-bubble[sentbyuser] {
@@ -456,14 +535,14 @@ body[showing-chat] #chat-page-wrapper {
 .message-bubble[sentbyuser] {
   align-items: flex-end;
 }
-.message-bubble[sentbyuser] .main,
-.message-bubble[sentbyuser] .main .timestamp {
+.message-bubble[sentbyuser] .tile.main,
+.message-bubble[sentbyuser] .tile.main .timestamp {
   flex-direction: row-reverse;
 }
-.message-bubble[sentbyuser] .main .timestamp .icon {
+.message-bubble[sentbyuser] .tile.main .timestamp .icon {
   display: flex;
 }
-.message-bubble[sentbyuser] .main span {
+.message-bubble[sentbyuser] .tile.main span {
   text-align: right;
 }
 

dist/index.js

@@ -1311,7 +1311,7 @@
         class: "message-bubble",
         "toggle:sentbyuser": chatMessageViewModel.sentByUser
       },
-      /* @__PURE__ */ createElement("div", { class: "main" }, /* @__PURE__ */ createElement("div", { class: "text-container" }, /* @__PURE__ */ createElement("span", { class: "sender-name ellipsis" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement(
+      /* @__PURE__ */ createElement("div", { class: "main tile" }, /* @__PURE__ */ createElement("div", { class: "text-container" }, /* @__PURE__ */ createElement("span", { class: "sender-name ellipsis" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement(
         "span",
         {
           class: "body",

dist/styles.css

@@ -252,6 +252,9 @@ SIZES
   --gap-in-controls: 1.2rem;
   --large-gap: 2rem;
 
+  /* outline */
+  --outline-width: var(--gap-between-tiles);
+
   /* margin */
   --label-top-padding: 0.25rem;
   --label-tile-top-padding: 0.5rem;
@@ -379,7 +382,7 @@ label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
 [selected] {
-  outline: var(--gap-between-tiles) solid var(--primary);
+  outline: var(--outline-width) solid var(--primary);
 }
 
 /* border-radius */
@@ -457,7 +460,7 @@ textarea {
   display: inline-flex;
 }
 
-.modal{
+.modal {
   display: none;
 }
 
@@ -1225,4 +1228,4 @@ input[type="checkbox"],
   font-style: normal;
   font-weight: 300;
   src: url("Icons/material-icons.woff") format("woff");
-}
+}