26.09.05.A

dist/index.css

@@ -1,5 +1,5 @@
 /* src/colors.css */
-[color]:not([color="standard"]) {
+[color]:not([color=standard]) {
   --primary: hsl(var(--hue), 100%, var(--accent-luma));
   --primary-hover: hsl(var(--hue), 95%, var(--accent-luma));
   --primary-active: hsl(var(--hue), 80%, var(--accent-luma));
@@ -9,72 +9,74 @@
   --surface-hover: hsla(var(--hue), 100%, 5%, 10%);
   --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
-body[theme="dark"] [color]:not([color="standard"]) {
+body[theme=dark] [color]:not([color=standard]) {
   --accent-luma: var(--accent-luma-dark);
   --accent-text-luma: var(--accent-text-luma-dark);
   --surface: hsla(var(--hue), 100%, 95%, 5%);
   --surface-hover: hsla(var(--hue), 100%, 95%, 10%);
   --surface-active: hsla(var(--hue), 100%, 95%, 15%);
 }
-[color]:not([color="standard"]).tile {
+[color]:not([color=standard]).tile {
   --gradient-luma-1: 70%;
   --gradient-luma-2: 90%;
   --hover-luma: 75%;
   --active-luma: 80%;
   --text-luma: 20%;
-    --surface: linear-gradient(
+  --surface:
+    linear-gradient(
+      
       120deg,
       hsl(var(--hue), 100%, var(--gradient-luma-1)),
-        hsla(var(--hue), 100%, var(--gradient-luma-2), 40%)
+      hsla(var(--hue), 100%, var(--gradient-luma-2), 40%) );
-    );
   --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
   --surface-active: hsl(var(--hue), 100%, var(--active-luma));
   --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
-body[theme="dark"] [color]:not([color="standard"]).tile {
+body[theme=dark] [color]:not([color=standard]).tile {
   --gradient-luma-1: 20%;
   --gradient-luma-2: 15%;
   --hover-luma: 25%;
   --active-luma: 30%;
   --text-luma: 90%;
-    --surface: linear-gradient(
+  --surface:
+    linear-gradient(
+      
       120deg,
       hsl(var(--hue), 100%, var(--gradient-luma-1)),
-        hsla(var(--hue), 100%, var(--gradient-luma-2), 40%)
+      hsla(var(--hue), 100%, var(--gradient-luma-2), 40%) );
-    );
   --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
   --surface-active: hsl(var(--hue), 100%, var(--active-luma));
   --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
-[color]:not([color="standard"]).fill-color {
+[color]:not([color=standard]).fill-color {
   color: white;
   background-color: var(--primary);
 }
-[color]:not([color="standard"])[selected].fill-color {
+[color]:not([color=standard])[selected].fill-color {
   color: var(--primary);
 }
 @media (min-width: 1024px) {
-    [color]:not([color="standard"]).background {
+  [color]:not([color=standard]).background {
     --luma: var(--background-luma);
     --sat: 100%;
     background: hsl(var(--hue), var(--sat), var(--luma), 40%);
   }
-    body[theme="dark"] [color]:not([color="standard"]).background {
+  body[theme=dark] [color]:not([color=standard]).background {
     --luma: var(--background-luma-dark);
     --sat: 100%;
   }
-    [color="standard"].background {
+  [color=standard].background {
     background: var(--surface);
   }
 }
-[color]:not([color="standard"]).subtle-background {
+[color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
   background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
-body[theme="dark"] [color]:not([color="standard"]).subtle-background {
+body[theme=dark] [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma-dark);
 }
-[color="coral"] {
+[color=coral] {
   --hue: 20;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
@@ -85,7 +87,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="yellow"] {
+[color=yellow] {
   --hue: 50;
   --accent-luma: 50%;
   --accent-luma-dark: 60%;
@@ -96,7 +98,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="green"] {
+[color=green] {
   --hue: 120;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
@@ -107,7 +109,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="lightblue"] {
+[color=lightblue] {
   --hue: 180;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
@@ -118,7 +120,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="blue"] {
+[color=blue] {
   --hue: 220;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
@@ -129,7 +131,7 @@ body[theme="dark"] [color]:not([color="standard"]).subtle-background {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="purple"] {
+[color=purple] {
   --hue: 280;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
@@ -203,35 +205,35 @@ main {
 #background-wrapper #grass-1 {
   --color-1: hsl(150, 100%, 30%);
   --color-2: hsl(150, 100%, 25%);
-    background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       350deg,
       var(--color-1),
       var(--color-2) 30%,
-        transparent 40%
+      transparent 40%);
-    );
 }
 #background-wrapper #grass-2 {
   --color-1: hsl(110, 100%, 40%);
   --color-2: hsl(110, 100%, 35%);
-    background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       9deg,
       var(--color-1),
       var(--color-2) 30%,
-        transparent 35%
+      transparent 35%);
-    );
 }
-body[theme="dark"] #background-wrapper {
+body[theme=dark] #background-wrapper {
   opacity: 0.5;
 }
-body[theme="dark"] #background-wrapper #sky {
+body[theme=dark] #background-wrapper #sky {
   --color-1: hsl(188, 100%, 30%);
   --color-2: hsl(194, 72%, 24%);
 }
-body[theme="dark"] #background-wrapper #grass-1 {
+body[theme=dark] #background-wrapper #grass-1 {
   --color-1: hsl(120, 30%, 30%);
   --color-2: hsl(120, 30%, 24%);
 }
-body[theme="dark"] #background-wrapper #grass-2 {
+body[theme=dark] #background-wrapper #grass-2 {
   --color-1: hsl(110, 60%, 30%);
   --color-2: hsl(110, 50%, 24%);
 }
@@ -262,9 +264,7 @@ body[theme="dark"] #background-wrapper #grass-2 {
 }
 #home-page #overview-section,
 #home-page #chat-section {
-    padding-bottom: calc(
+  padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom));
-        var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
-    );
 }
 #home-page #chat-grid {
   margin-top: var(--content-padding);
@@ -387,14 +387,7 @@ body[showing-chat] #chat-page-wrapper {
   padding-bottom: var(--safe-area-bottom);
 }
 #chat-page > div > #ribbon > span,
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    > span.ribbon {
   gap: var(--gap-between-tiles);
   padding: var(--gap-between-tiles);
 }
@@ -445,14 +438,7 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    button.ribbon-button {
   min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -461,15 +447,7 @@ body[showing-chat] #chat-page-wrapper {
   color: var(--primary);
 }
 #chat-page > div > #ribbon button > .icon,
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    button
-    > .icon {
   font-size: 1.1rem;
 }
 #chat-page > div > #ribbon > span {
@@ -487,14 +465,7 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    :is(input, select, button) {
   height: 100%;
   flex: 1;
 }
@@ -506,14 +477,7 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
   overflow: hidden;
 }
-#chat-page
+#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content > div {
-    > div
-    > #main
-    > #task-page
-    > .pane-wrapper
-    > .pane
-    > .main-content
-    > div {
   animation: slide-up var(--animation-duration);
 }
 #chat-page > div > #main > #task-page .task-grid {
@@ -572,11 +536,7 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > #task-page .board-toggle-button {
   display: flex;
 }
-#chat-page
+#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list {
-    > div
-    > #main
-    > #task-page[isshowingboard][showingboardlist="false"]
-    #board-list {
   display: none;
 }
 @media (min-width: 640px) {
@@ -615,18 +575,10 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page #main #message-page .content #message-container {
   --message-container-padding: var(--control-height);
-    padding-bottom: calc(
+  padding-bottom: calc(var(--message-container-padding) + var(--content-padding)) !important;
-        var(--message-container-padding) + var(--content-padding)
-    ) !important;
 }
-#chat-page
+#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) #message-container {
-    #main
+  --message-container-padding: calc( 2 * var(--control-height) + var(--gap-between-tiles) );
-    #message-page
-    .content:has(.reply-preview-wrapper .reply-preview)
-    #message-container {
-    --message-container-padding: calc(
-        2 * var(--control-height) + var(--gap-between-tiles)
-    );
 }
 #message-page #message-container {
   overflow: auto;
@@ -840,27 +792,12 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 /* src/View/ChatPages/calendarPage.css */
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper {
   display: flex;
   padding: var(--gap-between-tiles);
   gap: var(--gap-between-tiles);
 }
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > input {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper
-    > input {
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   appearance: textfield;
@@ -873,26 +810,10 @@ body[showing-chat] #chat-page-wrapper {
   -webkit-appearance: none;
   margin: 0px;
 }
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .year-input {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper
-    > .year-input {
   width: 4.4rem;
 }
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper
-    > .month-input {
   width: 3.1rem;
 }
 @media (max-width: 750px) {

src/ViewModel/Global/coreViewModel.ts

@@ -9,7 +9,7 @@ import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.08.30.F";
+    readonly BUILD = "Build 26.09.05.A";
 
     translations: Translations;