improve highlight style, improve filter button marker

dist/index.css

@@ -376,7 +376,8 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button[selected] {
   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));
@@ -384,6 +385,9 @@ body[showing-chat] #chat-page-wrapper {
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   color: var(--primary);
 }
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button[selected]:not(.ribbon-button) {
+  margin: var(--gap-between-tiles);
+}
 #chat-page > div > #ribbon button > .icon,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
   font-size: 1.1rem;
@@ -391,11 +395,6 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #ribbon > span {
   width: 100%;
 }
-#chat-page > div > #ribbon .ribbon-button[highlight] {
-  background: rgb(255, 217, 0) !important;
-  color: black;
-  outline-color: black;
-}
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   height: var(--ribbon-size);
   overflow-x: auto;
@@ -447,13 +446,6 @@ body[showing-chat] #chat-page-wrapper {
   gap: var(--gap-between-tiles);
   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }
-.chat-entry[unread] {
-  border: var(--outline-width) solid black;
-}
-.chat-entry[unread]:not(:hover):not(:active) {
-  background: rgb(255, 217, 0) !important;
-  color: black;
-}
 @media (min-width: 640px) {
   #home-page > div {
     overflow-x: hidden;

dist/index.js

@@ -3443,7 +3443,7 @@
     return /* @__PURE__ */ createElement(
       "button",
       {
-        class: "ribbon-button",
+        class: "ribbon-button animate-highlight",
         "aria-label": label,
         "toggle:selected": isSelected,
         "toggle:highlight": isHighlighted,
@@ -3738,10 +3738,6 @@
     const ChatMessageViewModelToView = (chatMessageViewModel) => {
       return ChatMessage4(coreViewModel2, chatMessageViewModel);
     };
-    const filterIcon = createProxyState(
-      [messagePageViewModel.isFilterActive],
-      () => messagePageViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off"
-    );
     const messageContainer = /* @__PURE__ */ createElement(
       "div",
       {
@@ -3773,15 +3769,10 @@
       {
         class: "ghost",
         "on:click": messagePageViewModel.openFilterModal,
-        "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel
+        "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel,
+        "toggle:selected": messagePageViewModel.isFilterActive
       },
-      /* @__PURE__ */ createElement(
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt")
-        "span",
-        {
-          class: "icon",
-          "subscribe:innerText": filterIcon
-        }
-      )
     ))), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
       "input",
       {
@@ -4371,10 +4362,6 @@
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(coreViewModel2, boardViewModel) {
     boardViewModel.loadData();
-    const filterIcon = createProxyState(
-      [boardViewModel.isFilterActive],
-      () => boardViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off"
-    );
     const mainContent = createProxyState(
       [boardViewModel.selectedPage],
       () => {
@@ -4459,15 +4446,10 @@
       {
         class: "ghost",
         "aria-label": coreViewModel2.translations.chatPage.task.filterTasksButtonAudioLabel,
-        "on:click": boardViewModel.showFilterModal
+        "on:click": boardViewModel.showFilterModal,
+        "toggle:selected": boardViewModel.isFilterActive
       },
-      /* @__PURE__ */ createElement(
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt")
-        "span",
-        {
-          class: "icon",
-          "subscribe:innerText": filterIcon
-        }
-      )
     ), /* @__PURE__ */ createElement(
       "button",
       {
@@ -6279,11 +6261,11 @@
     const view = /* @__PURE__ */ createElement(
       "button",
       {
-        class: "tile colored-tile chat-entry",
+        class: "tile colored-tile chat-entry animate-highlight",
         "set:color": chatViewModel.settingsPageViewModel.color,
         style: "height: 8rem",
         "on:click": chatViewModel.open,
-        "toggle:unread": chatViewModel.hasUnreadMessages
+        "toggle:highlight": chatViewModel.hasUnreadMessages
       },
       /* @__PURE__ */ createElement(
         "span",

dist/styles.css

@@ -28,7 +28,7 @@ body {
     --animation-duration: 0.4s;
 }
 
-.modal > div,
+.modal>div,
 .slide-up {
     animation: slide-up var(--animation-duration);
 }
@@ -62,6 +62,9 @@ body {
     --text-error: #da1e28;
     --text-info: #0043ce;
 
+        --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%));
+    --highlight-color: black;
+
     --link: #0f62fe;
     --link-hover: #0043ce;
 
@@ -116,7 +119,7 @@ body {
     color: var(--text-placeholder);
 }
 
-.modal > div {
+.modal>div {
     background: var(--background-glass);
 }
 
@@ -164,6 +167,7 @@ select:not(.tile *),
 }
 
 @media (hover: hover) {
+
     button:hover,
     select:hover,
     button.tile.ghost:hover {
@@ -336,7 +340,7 @@ select {
 /* backdrop-filter */
 header,
 menu,
-.modal > div {
+.modal>div {
     backdrop-filter: blur(70px);
     -webkit-backdrop-filter: blur(70px);
 }
@@ -353,9 +357,7 @@ footer {
     border-top: 1px solid var(--surface-border);
 }
 
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(label.tile *),
-        label.tile *
-    ),
 label.tile,
 select:not(label.tile *),
 textarea:not(label.tile *) {
@@ -370,9 +372,7 @@ hr {
     border-bottom: 1px solid var(--border) !important;
 }
 
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(label.tile *):not(.no-outline),
-        label.tile *
-    ):not(.no-outline),
 label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
@@ -437,13 +437,13 @@ input[type="radio"],
 label.inline,
 main,
 .modal[open],
-.modal > div,
+.modal>div,
 .tile,
-.tile > div {
+.tile>div {
     display: flex;
 }
 
-header > span,
+header>span,
 .flex-column,
 .flex-row {
     display: flex;
@@ -470,7 +470,7 @@ textarea {
 
 main,
 .tile,
-.tile > div {
+.tile>div {
     flex: 1;
 }
 
@@ -482,9 +482,9 @@ main,
     flex: 0 !important;
 }
 
-.modal > div,
+.modal>div,
 .modal main,
-.tile > div {
+.tile>div {
     flex-direction: column;
 }
 
@@ -507,7 +507,7 @@ label.inline,
     gap: var(--gap-in-controls);
 }
 
-header > span,
+header>span,
 .gap {
     gap: var(--gap-between-tiles) !important;
 }
@@ -619,7 +619,7 @@ input[type="radio"] {
     padding: 0 !important;
 }
 
-article > div {
+article>div {
     padding: var(--content-padding);
 }
 
@@ -643,7 +643,7 @@ textarea,
     padding: var(--control-padding) !important;
 }
 
-header > span {
+header>span {
     padding: var(--gap-between-tiles);
 }
 
@@ -659,7 +659,7 @@ header > span {
     padding-top: var(--control-padding) !important;
 }
 
-article > div {
+article>div {
     padding-top: calc(var(--header-height) + var(--content-margin));
 }
 
@@ -691,11 +691,8 @@ select {
     padding-bottom: var(--control-padding) !important;
 }
 
-article > div {
+article>div {
-    padding-bottom: calc(
+    padding-bottom: calc(var(--menu-height-mobile) + var(--control-height) + var(--content-padding));
-        var(--menu-height-mobile) + var(--control-height) +
-            var(--content-padding)
-    );
 }
 
 label:not(.inline) {
@@ -712,10 +709,10 @@ label.tile:has(> span.icon) {
 }
 
 /* position etc */
-article > div,
+article>div,
 footer,
 header,
-select + .icon {
+select+.icon {
     position: absolute;
 }
 
@@ -746,7 +743,7 @@ label {
     position: sticky !important;
 }
 
-article > div,
+article>div,
 header,
 .modal {
     top: 0;
@@ -756,7 +753,7 @@ header,
     top: 0 !important;
 }
 
-article > div,
+article>div,
 footer,
 header,
 .modal {
@@ -767,7 +764,7 @@ header,
     left: 0px !important;
 }
 
-article > div,
+article>div,
 footer,
 header,
 .modal {
@@ -778,7 +775,7 @@ header,
     right: 0px !important;
 }
 
-select + .icon {
+select+.icon {
     right: var(--control-marker-padding);
 }
 
@@ -790,8 +787,8 @@ body:has(> menu) footer {
     bottom: var(--menu-height-mobile);
 }
 
-article > div,
+article>div,
-select + .icon,
+select+.icon,
 .modal {
     bottom: 0px;
 }
@@ -803,8 +800,8 @@ select + .icon,
 /* size */
 article,
 main,
-select + .icon,
+select+.icon,
-.modal > div,
+.modal>div,
 .modal main {
     height: 100%;
 }
@@ -821,7 +818,7 @@ button:not(.tile):not(header *),
 footer,
 input:not([type="checkbox"]):not([type="radio"]),
 select,
-select + .icon {
+select+.icon {
     height: var(--control-height);
 }
 
@@ -841,7 +838,7 @@ button:not(.tile):not(header *),
 footer,
 input:not([type="checkbox"]):not([type="radio"]),
 select,
-.modal > div > :is(button, div.flex-row) {
+.modal>div> :is(button, div.flex-row) {
     min-height: var(--control-height);
 }
 
@@ -864,9 +861,9 @@ header,
 main,
 select,
 textarea,
-.modal > div,
+.modal>div,
 .tile,
-.tile > div {
+.tile>div {
     width: 100%;
 }
 
@@ -920,7 +917,7 @@ code {
 .error,
 .warning,
 .success,
-label.tile > div > span:not(.icon) {
+label.tile>div>span:not(.icon) {
     font-size: 0.9rem;
 }
 
@@ -940,7 +937,7 @@ menu {
     z-index: 2;
 }
 
-.modal > div {
+.modal>div {
     z-index: 2;
 }
 
@@ -1036,11 +1033,8 @@ menu {
     font-size: 0.5rem;
 }
 
-article > div {
+article>div {
-    padding-bottom: calc(
+    padding-bottom: calc(var(--menu-height-mobile) + var(--header-height) + var(--content-padding));
-        var(--menu-height-mobile) + var(--header-height) +
-            var(--content-padding)
-    );
 }
 
 /* overflow */
@@ -1060,7 +1054,7 @@ main,
     overflow: hidden !important;
 }
 
-article > div,
+article>div,
 .modal main {
     overflow: auto;
 }
@@ -1112,7 +1106,7 @@ main::-webkit-scrollbar {
 }
 
 main,
-article > div {
+article>div {
     scroll-behavior: smooth;
 }
 
@@ -1126,29 +1120,30 @@ main {
 
 /* tablet & up */
 @media (min-width: 640px) {
+
     /* basic */
     .mobile-only {
         display: none !important;
     }
 
     /* border, outline, etc */
-    .modal > div {
+    .modal>div {
         border: 1px solid var(--surface-border);
     }
 
     menu,
-    main.split > article:first-of-type {
+    main.split>article:first-of-type {
         border-right: 1px solid var(--border);
     }
 
     /* size */
-    .modal > div {
+    .modal>div {
         height: auto;
         max-height: 100%;
     }
 
     p,
-    .modal > div {
+    .modal>div {
         max-width: var(--max-content-width);
     }
 
@@ -1177,7 +1172,7 @@ main {
         grid-template-columns: var(--split-pane-width-desktop) 1fr;
     }
 
-    article > div {
+    article>div {
         padding-bottom: calc(var(--content-padding) + var(--control-height));
     }
 
@@ -1210,6 +1205,28 @@ main {
     }
 }
 
+/*
+STATE
+*/
+
+[highlight]:not(:hover):not(:active) {
+    color: var(--highlight-color) !important;
+    background: var(--highlight-background) !important;
+}
+
+[highlight].animate-highlight {
+    animation: 3s infinite highlight;
+}
+
+@keyframes highlight {
+    30%, 60% {
+        opacity: 1;
+    }
+    0%, 100% {
+        opacity: .1;
+    }
+}
+
 /*
 ICONS
  */

src/View/ChatPages/boardPage.tsx

@@ -20,14 +20,6 @@ export function BoardPage(
 ) {
     boardViewModel.loadData();
 
-    const filterIcon = React.createProxyState(
-        [boardViewModel.isFilterActive],
-        () =>
-            boardViewModel.isFilterActive.value
-                ? "filter_alt"
-                : "filter_alt_off",
-    );
-
     // main content
     const mainContent = React.createProxyState(
         [boardViewModel.selectedPage],
@@ -142,11 +134,9 @@ export function BoardPage(
                                 .filterTasksButtonAudioLabel
                         }
                         on:click={boardViewModel.showFilterModal}
+                        toggle:selected={boardViewModel.isFilterActive}
                     >
-                        <span
+                        <span class="icon">filter_alt</span>
-                            class="icon"
-                            subscribe:innerText={filterIcon}
-                        ></span>
                     </button>
                     <button
                         class="ghost"

src/View/ChatPages/messagePage.tsx

@@ -19,14 +19,6 @@ export function MessagePage(
         return ChatMessage(coreViewModel, chatMessageViewModel);
     };
 
-    const filterIcon = React.createProxyState(
-        [messagePageViewModel.isFilterActive],
-        () =>
-            messagePageViewModel.isFilterActive.value
-                ? "filter_alt"
-                : "filter_alt_off",
-    );
-
     const messageContainer = (
         <div
             id="message-container"
@@ -76,11 +68,11 @@ export function MessagePage(
                                     coreViewModel.translations.chatPage.message
                                         .filterMessagesButtonAudioLabel
                                 }
+                                toggle:selected={
+                                    messagePageViewModel.isFilterActive
+                                }
                             >
-                                <span
+                                <span class="icon">filter_alt</span>
-                                    class="icon"
-                                    subscribe:innerText={filterIcon}
-                                ></span>
                             </button>
                         </span>
                     </div>

src/View/Components/chatEntry.tsx

@@ -5,11 +5,11 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 export function ChatEntry(chatViewModel: ChatViewModel) {
     const view = (
         <button
-            class="tile colored-tile chat-entry"
+            class="tile colored-tile chat-entry animate-highlight"
             set:color={chatViewModel.settingsPageViewModel.color}
             style="height: 8rem"
             on:click={chatViewModel.open}
-            toggle:unread={chatViewModel.hasUnreadMessages}
+            toggle:highlight={chatViewModel.hasUnreadMessages}
         >
             <span
                 class="shadow"

src/View/Components/ribbonButton.tsx

@@ -13,7 +13,7 @@ export function RibbonButton(
 ) {
     return (
         <button
-            class="ribbon-button"
+            class="ribbon-button animate-highlight"
             aria-label={label}
             toggle:selected={isSelected}
             toggle:highlight={isHighlighted}

src/View/chatPage.css

@@ -186,7 +186,15 @@ body[showing-chat] #chat-page-wrapper {
     > .pane-wrapper
     > .pane
     > .toolbar
-    button.ribbon-button {
+    button.ribbon-button,
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button[selected] {
     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));
@@ -197,6 +205,17 @@ body[showing-chat] #chat-page-wrapper {
     color: var(--primary);
 }
 
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button[selected]:not(.ribbon-button) {
+    margin: var(--gap-between-tiles);
+}
+
 #chat-page > div > #ribbon button > .icon,
 #chat-page
     > div
@@ -214,12 +233,6 @@ body[showing-chat] #chat-page-wrapper {
     width: 100%;
 }
 
-#chat-page > div > #ribbon .ribbon-button[highlight] {
-    background: rgb(255, 217, 0) !important;
-    color: black;
-    outline-color: black;
-}
-
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
     height: var(--ribbon-size);
 

src/View/homePage.css

@@ -45,15 +45,6 @@
     grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }
 
-.chat-entry[unread] {
-    border: var(--outline-width) solid black;
-}
-
-.chat-entry[unread]:not(:hover):not(:active) {
-    background: rgb(255, 217, 0) !important;
-    color: black;
-}
-
 @media (min-width: 640px) {
     #home-page > div {
         overflow-x: hidden;