feat: "emboss" taskbar icons by adding shadows

1 files changed, 81 insertions, 49 deletions

diff --git a/static/input.css b/static/input.css
index 110e5fd..1eb5ae1 100644
--- a/static/input.css
+++ b/static/input.css
@@ -46,14 +46,21 @@ html {
 }
 
 [data-theme="olive"] {
-    --main-hard-color: #4b513a;
-    --main-medium-color: #8a9d8a;
-    --main-soft-color: #a5b8a5;
-    --background-dark-color: #ffffdd;
-    --background-medium-color: var(--background-dark-color);
-    --background-light-color: #fffff0;
+    --main-dark-color-hard: #4b513a;
+    --main-dark-color-medium: #8a9d8a;
+    --main-dark-color-soft: #a5b8a5;
+    --main-light-color-soft: #ffffdd;
+    --main-light-color-medium: var(--background-dark-color);
+    --main-light-color-hard: #fffff0;
+    --main-hard-color: var(--main-dark-color-hard);
+    --main-medium-color: var(--main-dark-color-medium);
+    --main-soft-color: var(--main-dark-color-soft);
+    --background-dark-color: var(--main-light-color-soft);
+    --background-medium-color: var(--main-light-color-medium);
+    --background-light-color: var(--main-light-color-hard);
+    --sidebar-text-color: var(--main-hard-color);
     --sidebar-text-color: var(--background-dark-color);
-    --sidebar-stroke-color: var(--main-hard-color);
+    --sidebar-stroke-color: var(--main-dark-color-hard);
     --secondary-color: var(--main-soft-color);
     --leaflet-text-color: var(--main-hard-color);
     --leaflet-link-color: var(--main-medium-color);
@@ -68,14 +75,20 @@ html {
 }
 
 [data-theme="lettuce"] {
-    --main-hard-color: #384a0c;
-    --main-medium-color: #9bb665;
-    --main-soft-color: #bbd095;
-    --background-dark-color: #f5eee2;
-    --background-medium-color: var(--background-dark-color);
-    --background-light-color: #fff9ef;
+    --main-dark-color-hard: #384a0c;
+    --main-dark-color-medium: #9bb665;
+    --main-dark-color-soft: #bbd095;
+    --main-light-color-soft: #f5eee2;
+    --main-light-color-medium: var(--background-dark-color);
+    --main-light-color-hard: #fff9ef;
+    --main-hard-color: var(--main-dark-color-hard);
+    --main-medium-color: var(--main-dark-color-medium);
+    --main-soft-color: var(--main-dark-color-soft);
+    --background-dark-color: var(--main-light-color-soft);
+    --background-medium-color: var(--main-light-color-medium);
+    --background-light-color: var(--main-light-color-hard);
     --sidebar-text-color: var(--main-hard-color);
-    --sidebar-stroke-color: var(--background-dark-color);
+    --sidebar-stroke-color: var(--main-dark-color-hard);
     --secondary-color: var(--main-medium-color);
     --leaflet-text-color: var(--main-hard-color);
     --leaflet-link-color: var(--main-medium-color);
@@ -90,14 +103,20 @@ html {
 }
 
 [data-theme="night"] {
-    --main-hard-color: var(--color-sky-100);
-    --main-medium-color: var(--color-sky-200);
-    --main-soft-color: var(--color-sky-300);
-    --background-dark-color: #13131b;
-    --background-medium-color: var(--background-dark-color);
-    --background-light-color: #222230;
+    --main-light-color-hard: var(--color-sky-100);
+    --main-light-color-medium: var(--color-sky-200);
+    --main-light-color-soft: var(--color-sky-300);
+    --main-dark-color-hard: #13131b;
+    --main-dark-color-medium: var(--background-dark-color);
+    --main-dark-color-soft: #222230;
+    --main-hard-color: var(--main-light-color-hard);
+    --main-medium-color: var(--main-light-color-medium);
+    --main-soft-color: var(--main-light-color-soft);
+    --background-dark-color: var(--main-dark-color-hard);
+    --background-medium-color: var(--main-dark-color-medium);
+    --background-light-color: var(--main-dark-color-soft);
     --sidebar-text-color: var(--main-hard-color);
-    --sidebar-stroke-color: var(--background-light-color);
+    --sidebar-stroke-color: var(--main-light-color-soft);
     --secondary-color: var(--main-soft-color);
     --leaflet-text-color: var(--background-dark-color);
     --leaflet-link-color: var(--background-dark-color);
@@ -112,14 +131,20 @@ html {
 }
 
 [data-theme="ram"] {
-    --main-hard-color: #fefad8;
-    --main-medium-color: #f6e4c5;
-    --main-soft-color: #e8d4b8;
-    --background-dark-color: #413b34;
-    --background-medium-color: #62584f;
-    --background-light-color: #6d6258;
+    --main-light-color-hard: #fefad8;
+    --main-light-color-medium: #f6e4c5;
+    --main-light-color-soft: #e8d4b8;
+    --main-dark-color-hard: #413b34;
+    --main-dark-color-medium: #62584f;
+    --main-dark-color-soft: #6d6258;
+    --main-hard-color: var(--main-light-color-hard);
+    --main-medium-color: var(--main-light-color-medium);
+    --main-soft-color: var(--main-light-color-soft);
+    --background-dark-color: var(--main-dark-color-hard);
+    --background-medium-color: var(--main-dark-color-medium);
+    --background-light-color: var(--main-dark-color-soft);
     --sidebar-text-color: var(--main-hard-color);
-    --sidebar-stroke-color: var(--background-light-color);
+    --sidebar-stroke-color: var(--main-light-color-soft);
     --secondary-color: var(--main-soft-color);
     --leaflet-text-color: var(--background-dark-color);
     --leaflet-link-color: var(--background-dark-color);
@@ -134,14 +159,20 @@ html {
 }
 
 [data-theme="lilac"] {
-    --main-hard-color: #343b58;
-    --main-medium-color: #414868;
-    --main-soft-color: #6c6e75;
-    --background-dark-color: #c3caff;
-    --background-medium-color: #d1d6ff;
-    --background-light-color: #e3e6ff;
+    --main-dark-color-hard: #343b58;
+    --main-dark-color-medium: #414868;
+    --main-dark-color-soft: #6c6e75; 
+    --main-light-color-hard: #e3e6ff;
+    --main-light-color-medium: #d1d6ff;
+    --main-light-color-soft: #c3caff;
+    --main-hard-color: var(--main-dark-color-hard);
+    --main-medium-color: var(--main-dark-color-medium);
+    --main-soft-color: var(--main-dark-color-soft);
+    --background-dark-color: var(--main-light-color-hard);
+    --background-medium-color: var(--main-light-color-medium);
+    --background-light-color: var(--main-light-color-soft);
     --sidebar-text-color: var(--main-hard-color);
-    --sidebar-stroke-color: var(--background-light-color);
+    --sidebar-stroke-color: var(--main-light-color-hard);
     --secondary-color: var(--main-medium-color);
     --leaflet-text-color: var(--main-hard-color);
     --leaflet-link-color: var(--main-medium-color);
@@ -227,11 +258,11 @@ form.crossable.htmx-request input {
 }
 
 .text-sidebar {
-    color: var(--sidebar-text-color);
-}
-
-.stroke-sidebar {
-    border-color: var(--sidebar-stroke-color);
+    color: var(--main-dark-color-soft);
+    text-shadow: -0.2rem 0 var(--main-dark-color-hard), 0 -0.2rem var(--main-dark-color-hard), 0.2rem 0rem var(--main-light-color-soft), 0 0.2rem var(--main-light-color-soft);
+    -webkit-text-stroke-color: var(--sidebar-stroke-color);
+    -webkit-text-stroke-width: 0.1rem;
+    background: linear-gradient(135deg, color-mix(in srgb, var(--main-light-color-soft) 20%, transparent), color-mix(in srgb, var(--main-dark-color-soft) 20%, transparent));
 }
 
 .text-main-hard {
@@ -416,7 +447,7 @@ form.crossable.htmx-request input {
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, #fff, #000);
+    background: linear-gradient(135deg, var(--main-light-color-hard), var(--main-dark-color-hard));
     opacity: 0.2;
     z-index: 1;
     content: "";
@@ -434,18 +465,19 @@ form.crossable.htmx-request input {
     background-image: var(--squares-and-triangles-background);
     background-repeat: var(--squares-and-triangles-background-repeat);
     background-size: calc(var(--squares-and-triangles-background-width-coef) * 0.9rem) calc(var(--squares-and-triangles-background-height-coef) * 0.9rem);
-    border-top: 0.3rem solid #fff;
-    border-left: 0.3rem solid #fff;
-    border-bottom: 0.3rem solid #000;
-    border-right: 0.3rem solid #000;
+    border-top: 0.3rem solid var(--main-light-color-hard);
+    border-left: 0.3rem solid var(--main-light-color-hard);
+    border-bottom: 0.3rem solid var(--main-dark-color-hard);
+    border-right: 0.3rem solid var(--main-dark-color-hard);
+    
     position: relative;
 }
 
 .toolbar-button:active {
-    border-top: 0.3rem solid #000;
-    border-left: 0.3rem solid #000;
-    border-bottom: 0.3rem solid #fff;
-    border-right: 0.3rem solid #fff;
+    border-top: 0.3rem solid var(--main-dark-color-hard);
+    border-left: 0.3rem solid var(--main-dark-color-hard);
+    border-bottom: 0.3rem solid var(--main-light-color-hard);
+    border-right: 0.3rem solid var(--main-light-color-hard);
 }
 
 .toolbar-button:active > * {