safe

resources/styles/_apps-window.scss

@@ -7,6 +7,9 @@
   padding: 28px;
   background: colors.$bg-translucent;
   border-radius: $radius $radius 0 0;
+  max-width: 1600px;
+  margin-left: auto;
+  margin-right: auto;
 
   & entry {
     background: transparent;
@@ -22,29 +25,46 @@
   }
 
   & flowbox {
-    padding: 16px 24px;
+    padding: 16px 36px;
 
     & > flowboxchild {
       & > button {
         padding: 10px;
         border-radius: 24px;
+        background: linear-gradient(
+          135deg,
+          color.change($color: colors.$bg-primary, $alpha: 0.9),
+          color.change($color: colors.$bg-secondary, $alpha: 0.7)
+        );
+        border: 1px solid transparent;
 
         & image {
           -gtk-icon-size: 64px;
         }
 
-        & label {
+        & label.app-name {
           margin-top: 24px;
+          font-size: 16px;
           text-shadow: 1px 1px 1px rgba(colors.$bg-primary, .2);
           font-weight: 500;
         }
       }
 
       &:focus > button, 
-      &:selected > button,
-      & > button:hover {
-        background-color: rgba($color: colors.$bg-secondary, $alpha: .5);
+      &:selected > button {
+        background: linear-gradient(
+          135deg,
+          color.change($color: colors.$bg-secondary, $alpha: 0.95),
+          color.change($color: colors.$bg-tertiary, $alpha: 0.8)
+        );
+        border-color: colors.$bg-tertiary;
+        box-shadow: 0 0 0 1px colors.$bg-tertiary;
+
+        & label.app-name {
+          font-weight: 700;
+        }
       }
+
     }
   }
 }

resources/styles/_runner.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "./colors";
 
 .runner .popup-window-container {
@@ -29,16 +30,18 @@
     }
   }
 
-  & scrolledwindow {
-    margin: 6px;
-  }
-
   & list {
+    padding: 0 12px;
     & .result {
       padding: 10px;
-      background: colors.$bg-primary;
-      margin: 2px 0;
-      border-radius: 14px;
+      background: linear-gradient(
+        135deg,
+        color.change($color: colors.$bg-primary, $alpha: 0.9),
+        color.change($color: colors.$bg-secondary, $alpha: 0.7)
+      );
+      margin: 6px 0;
+      border-radius: 18px;
+      border: 1px solid transparent;
 
       & image {
         -gtk-icon-size: 28px;
@@ -47,7 +50,7 @@
 
       & .title {
         font-weight: 500;
-        font-size: 16px;
+        font-size: 17px;
       }
 
       & .description {
@@ -57,17 +60,19 @@
     }
 
     & > *:selected .result,
-    & > *:active .result,
-    & > *:hover .result {
-      background: colors.$bg-secondary;
-    }
+    & > *:active .result {
+      background: linear-gradient(
+        135deg,
+        color.change($color: colors.$bg-secondary, $alpha: 0.95),
+        color.change($color: colors.$bg-tertiary, $alpha: 0.8)
+      );
 
-    & > *:first-child {
-      margin-top: 12px;
-    }
+      border-color: colors.$bg-tertiary;
+      box-shadow: 0 0 0 1px colors.$bg-tertiary;
 
-    &:last-child {
-      margin-bottom: 0;
+      & .title {
+        font-weight: 700;
+      }
     }
   }
 }