Merge pull request #26 from hohaicongthuan/main

Add glow effect when hovering title bar buttons
khang-nd · Sep 10, 2022 · 6a3e0a6 · 6a3e0a6 · vercel · Sep 10, 2022
2 parents 8357936 + 10822eb
commit 6a3e0a6
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/gui/_window.scss b/gui/_window.scss
@@ -5,7 +5,7 @@
   --window-spacing: 6px;
   --window-border: 1px solid;
   --window-border-radius: 6px;
-  --window-border-color: rgba(0, 0, 0, 0.6);
+  --window-border-color: rgba(0, 0, 0, .7);
   --window-background-color: #4580c4;
   --window-background: linear-gradient(
       to right,
@@ -33,7 +33,7 @@
 
 .window {
   font: var(--font);
-  box-shadow: 0 0 5px 1px var(--window-border-color);
+  box-shadow: 2px 2px 10px 1px var(--window-border-color);
   border: var(--window-border) var(--window-border-color);
   border-radius: var(--window-border-radius);
   position: relative;
@@ -215,10 +215,11 @@
             transparent 60%
           ),
           linear-gradient(#a9d2e8 50%, #196c9b 50%);
+          box-shadow: 0 0 15px #2aceda;
       }
 
       &:active {
-        box-shadow: inset 0 0 0 0.5px #eee;
+        box-shadow: inset 0 0 0 0.5px #eee, 0 0 15px #2aceda;
         background: radial-gradient(
             circle at 50% 100%,
             #0bfdfa,
@@ -265,6 +266,7 @@
         &:hover {
           filter: contrast(1.3);
           background-image: var(--control-background);
+          box-shadow: 0 0 15px #d04a37, inset 0 -1px 5px orange;
         }
 
         &:active {