UX: change styling of dotmenu to make it more visible

public/css/index-tailwind-output.css

@@ -1324,20 +1324,20 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin: 0px;
 }
 
-.m-8 {
-  margin: 2rem;
+.m-1 {
+  margin: 0.25rem;
 }
 
 .m-2 {
   margin: 0.5rem;
 }
 
-.m-0\.5 {
-  margin: 0.125rem;
+.m-8 {
+  margin: 2rem;
 }
 
-.m-1 {
-  margin: 0.25rem;
+.m-0\.5 {
+  margin: 0.125rem;
 }
 
 .m-11 {
@@ -1698,14 +1698,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   height: 6rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-fit {
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2028,6 +2028,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: max-content;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -2121,10 +2125,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: 0.25rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
 .w-9\/12 {
   width: 75%;
 }
@@ -2244,14 +2244,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   flex: 1 1 0%;
 }
 
-.flex-shrink {
-  flex-shrink: 1;
-}
-
 .flex-shrink-0 {
   flex-shrink: 0;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -2509,6 +2509,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   row-gap: 0.25rem;
 }
 
+.gap-x-2 {
+  column-gap: 0.5rem;
+}
+
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -2517,10 +2521,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   row-gap: 1rem;
 }
 
-.gap-x-2 {
-  column-gap: 0.5rem;
-}
-
 .gap-x-1 {
   column-gap: 0.25rem;
 }
@@ -3045,11 +3045,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
-.border-subtle {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 234 254 / var(--tw-border-opacity));
-}
-
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -3065,6 +3060,11 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-gray-800 {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -4045,18 +4045,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   padding-bottom: 0.75rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
+.pt-2 {
+  padding-top: 0.5rem;
 }
 
 .pr-4 {
   padding-right: 1rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -5067,6 +5063,8 @@ input[type="range"].range-lg::-moz-range-thumb {
 @font-face {
   font-family: "Source Sans Pro";
 
+  /*This path might seem incorrect. However, 'index.css' will be compiled and placed in 'public/css', from where this path _is_ correct*/
+
   src: url("../assets/fonts/source-sans-pro.regular.ttf") format("woff");
 }
 

src/UI/Base/DotMenu.svelte

@@ -53,6 +53,8 @@
         fill: var(--button-background-hover);
         transition: fill 350ms linear;
         cursor: pointer;
+        stroke-width: 0.8;
+        stroke: white;
     }
 
     :global(.dots-menu:hover > path, .dots-menu-opened > path) {