feat: accent button active property

refactor: combine sidebar buttons' properties in accent-button class

3 files changed, 64 insertions, 36 deletions

diff --git a/static/input.css b/static/input.css
index 04d68b7..b9fb166 100644
--- a/static/input.css
+++ b/static/input.css
@@ -568,6 +568,44 @@ form.crossable.htmx-request input {
     --border-size: 0.2rem;
 }
 
+.accent-button,
+.accent-button.active:active {
+    --tw-duration: 1500ms;
+    --tw-ease: var(--ease-in-out);
+    --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 10%, transparent);
+    --tw-gradient-position: from 225deg in oklab;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 10%, transparent);
+    --tw-gradient-via: transparent;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    background-image: conic-gradient(var(--tw-gradient-stops));
+    transition-duration: 1500ms;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--ease-in-out);
+}
+
+.accent-button:hover,
+.accent-button.active:active:hover {
+    cursor: pointer;
+    --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 50%, transparent);
+    --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 50%, transparent);
+}
+
+.accent-button.active,
+.accent-button:active {
+    --tw-gradient-from: color-mix(in oklab, var(--color-accent-dark) 30%, transparent);
+    --tw-gradient-position: from 45deg in oklab;
+    --tw-gradient-to: color-mix(in oklab, var(--color-accent-dark) 30%, transparent);
+    --tw-gradient-via: color-mix(in oklab, var(--color-accent-light) 50%, transparent);
+}
+
+.accent-button.active:hover,
+.accent-button:active:hover {
+    --tw-gradient-from: color-mix(in oklab, var(--color-accent-light) 70%, transparent);
+    --tw-gradient-to: color-mix(in oklab, var(--color-accent-light) 70%, transparent);
+    --tw-gradient-via: color-mix(in oklab, var(--color-accent-dark) 50%, transparent);
+}
+
 .custom-svg-marker {
     background: transparent;
     border: none;
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index b435402..848c786 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -346,9 +346,7 @@
                 class="flex flex-row w-full h-24 md:flex-col md:w-24 md:h-full bg-paper bg-background shadow-elevation-6 z-2 shrink-0"
             >
                 <a
-                    class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                        from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                        hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                    class="w-18 h-18 rounded-xl m-3 accent-button"
                     onclick="return changeUrl('/..', true);"
                     href="../"
                     id="sidebar-back-button"
@@ -357,9 +355,7 @@
                     <svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
                 </a>
                 <a
-                    class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                        from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                        hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                    class="w-18 h-18 rounded-xl m-3 accent-button"
                     onclick="return changeUrl('/{{ .Lang }}');"
                     href="/{{ .Lang }}"
                     id="sidebar-home-button"
@@ -368,9 +364,7 @@
                     <svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
                 </a>
                 <a
-                    class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                        from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                        hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                    class="w-18 h-18 rounded-xl m-3 accent-button"
                     onclick="return changeUrl('/{{ .Lang }}/blog');"
                     href="/{{ .Lang }}/blog"
                     id="sidebar-blog-button"
@@ -379,9 +373,7 @@
                     <svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
                 </a>
                 <a
-                    class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                        from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                        hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                    class="w-18 h-18 rounded-xl m-3 accent-button"
                     href="/{{ .Lang }}/map"
                     id="sidebar-map-button"
                     draggable="false"
@@ -389,9 +381,7 @@
                     <svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
                 </a>
                 <div
-                    class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                        from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                        hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                    class="w-18 h-18 rounded-xl m-3 accent-button"
                     onclick="toggleThemeWheel()"
                     id="sidebar-theme-button"
                     draggable="false"
@@ -399,9 +389,7 @@
                     <svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
                 </div>
                 <a
-                    class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                        from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                        hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                    class="w-18 h-18 rounded-xl m-3 accent-button"
                     onclick="return changeUrl('/{{ .Lang }}/user');"
                     href="/{{ .Lang }}/user"
                     id="sidebar-user-button"
@@ -434,6 +422,11 @@
                     );
 
                     function updateSidebar() {
+                        sidebarHomeButton.classList.remove("active");
+                        sidebarMapButton.classList.remove("active");
+                        sidebarBlogButton.classList.remove("active");
+                        sidebarBackButton.classList.remove("active");
+                        sidebarUserButton.classList.remove("active");
                         if (
                             location.pathname == "" ||
                             location.pathname == "/"
@@ -455,6 +448,9 @@
                                 "onclick",
                                 `return changeUrl('/${lang}', false);`,
                             );
+                            if (location.pathname == `/${lang}`) {
+                                sidebarHomeButton.classList.add("active");
+                            }
                             sidebarMapButton.setAttribute(
                                 "href",
                                 `/${lang}/map`,
@@ -467,6 +463,9 @@
                                 "onclick",
                                 `return changeUrl('/${lang}/blog', false);`,
                             );
+                            if (location.pathname.startsWith(`/${lang}/blog`)) {
+                                sidebarBlogButton.classList.add("active");
+                            }
                             sidebarUserButton.setAttribute(
                                 "href",
                                 `/${lang}/user`,
@@ -475,6 +474,9 @@
                                 "onclick",
                                 `return changeUrl('/${lang}/user', false);`,
                             );
+                            if (location.pathname.startsWith(`/${lang}/user`)) {
+                                sidebarUserButton.classList.add("active");
+                            }
                         }
                     }
                     window.addEventListener("popstate", updateSidebar);
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 53e6448..34fb870 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -165,9 +165,7 @@
             class="fixed flex flex-row w-full h-24 md:flex-col md:w-24 md:h-auto bg-paper bg-background shadow-elevation-6 z-1001 shrink-0 md:rounded-br-md"
         >
             <a
-                class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                    from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                    hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                class="w-18 h-18 rounded-xl m-3 accent-button"
                 href="./"
                 id="sidebar-back-button"
                 draggable="false"
@@ -175,9 +173,7 @@
                 <svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
             </a>
             <a
-                class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                    from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                    hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                class="w-18 h-18 rounded-xl m-3 accent-button"
                 href="/{{ .Lang }}"
                 id="sidebar-home-button"
                 draggable="false"
@@ -185,9 +181,7 @@
                 <svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
             </a>
             <a
-                class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                    from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                    hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                class="w-18 h-18 rounded-xl m-3 accent-button"
                 href="/{{ .Lang }}/blog"
                 id="sidebar-blog-button"
                 draggable="false"
@@ -195,9 +189,7 @@
                 <svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
             </a>
             <a
-                class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                    bg-conic-45 from-accent-dark/30 via-accent-light/50 to-accent-dark/30 transition-colors duration-1500 ease-in-out
-                    hover:cursor-pointer hover:from-accent-light/70 hover:via-accent-dark/50 hover:to-accent-light/70"
+                class="w-18 h-18 rounded-xl m-3 accent-button active"
                 href="/{{ .Lang }}/map"
                 id="sidebar-map-button"
                 draggable="false"
@@ -205,9 +197,7 @@
                 <svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
             </a>
             <div
-                class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                    from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                    hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                class="w-18 h-18 rounded-xl m-3 accent-button"
                 onclick="toggleThemeWheel()"
                 id="sidebar-theme-button"
                 draggable="false"
@@ -215,9 +205,7 @@
                 <svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
             </div>
             <a
-                class="w-18 h-18 bg-conic-225 rounded-xl m-3
-                    from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
-                    hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+                class="w-18 h-18 rounded-xl m-3 accent-button"
                 href="/{{ .Lang }}/user"
                 id="sidebar-user-button"
                 draggable="false"