💄 chore(style): fix some styles, update others to work on gtk4

the inset box-shadow on hover technique doesn't work anymore 😭

ags/style/_apps-window.scss

@@ -1,7 +1,5 @@
 @use "sass:color";
-@use "./mixins";
 @use "./colors";
-@use "./functions";
 
 .apps-window-container {
   $radius: 48px;
@@ -10,12 +8,16 @@
   background: colors.$bg-translucent;
   border-radius: $radius $radius 0 0;
 
-  & > entry {
+  & entry {
     background: rgba(colors.$bg-primary, .4);
     margin-bottom: 32px;
     min-width: 450px;
     padding: 14px;
     border-radius: 18px;
+
+    &:focus-within {
+      box-shadow: inset 0 0 0 2px colors.$bg-tertiary;
+    }
   }
 
   & flowbox {
@@ -26,8 +28,8 @@
         padding: 8px;
         border-radius: 24px;
 
-        & icon {
+        & image {
-          font-size: 64px;
+          -gtk-icon-size: 64px;
         }
 
         & label {

ags/style/_bar.scss

@@ -59,6 +59,7 @@
         min-width: 32px;
 
         & label.id {
+          opacity: 0;
           color: colors.$fg-light;
           margin-right: 0;
         }
@@ -103,8 +104,8 @@
     }
   }
 
-  .clock.open > button {
+  .clock.open {
-    background-color: colors.$bg-primary;
+    background: colors.$bg-primary;
   }
 
   .media {

ags/style/_center-window.scss

@@ -7,18 +7,16 @@
   background: colors.$bg-translucent;
   border-radius: 24px;
   padding: 12px;
-  box-shadow: 0 0 6px colors.$bg-translucent;
 
   & .big-media {
-    padding: 6px;
+    margin-top: 9px;
-
+    & .image {
-    & > box > .image {
       background-size: cover;
       background-position: center center;
       border-radius: 10px;
     }
 
-    & > .info {
+    & .info {
       padding: {
         top: 4px;
         bottom: 6px;
@@ -37,7 +35,8 @@
     }
 
     & slider {
-      background: transparent;
+      all: unset;
+      opacity: 0;
       min-height: .6em;
     }
 
@@ -54,8 +53,10 @@
     & .bottom {
       & .controls {
         margin-top: 9px;
+
         & button {
           padding: 7px;
+
           & label {
             font-size: 9px;
           }
@@ -85,25 +86,28 @@
     }
   }
 
-  & .calendar-box {
+  & calendar.view {
-    & calendar {
     $border-radius: 14px;
     font-weight: 600;
-      padding-bottom: 2px;
-
-      &.view {
     background: colors.$bg-primary;
     border-radius: $border-radius;
-      }
 
-      &.header {
+    & header {
       background: colors.$bg-secondary;
+      padding: 6px;
       border-top-left-radius: $border-radius;
       border-top-right-radius: $border-radius;
-        padding: 4px;
     }
 
-      &.button {
+    & grid {
+      margin: 4px;
+
+      label.day-number {
+        min-height: 22px;
+      }
+    }
+
+    & button {
       transition: 80ms linear;
       border-radius: 6px;
 
@@ -112,19 +116,9 @@
       }
     }
 
-      &:selected {
+    & label:selected {
       background: colors.$bg-secondary;
       border-radius: 6px;
     }
-
-      &.highlight {
-        background: transparent;
-        box-shadow: 0 2px 0 -1px rgba(colors.$bg-secondary, .5);
-      }
-
-      &:focus {
-        outline: 1px white;
-      }
-    }
   }
 }

ags/style/_control-center.scss

@@ -10,7 +10,6 @@
   background: colors.$bg-translucent;
   border-radius: 28px;
   padding: 20px;
-  box-shadow: 0 0 6px 1px colors.$bg-translucent;
 
   & > * {
     margin: 9px 0;
@@ -35,8 +34,8 @@
       font-weight: 600;
     }
 
-    & > box:not(.button-row) icon {
+    & > box:not(.button-row) image {
-      font-size: 12px;
+      -gtk-icon-size: 12px;
       color: colors.$fg-disabled;
       margin-right: 3px;
     }
@@ -168,59 +167,23 @@
   }
 }
 
-box.history {
-  background: colors.$bg-translucent;
-  box-shadow: 0 0 6px 1px colors.$bg-translucent;
-  border-radius: 24px;
-  padding: 18px;
-  transition: 120ms linear;
-
-  &.hide {
-    opacity: 0;
-  }
-
-  & .notifications {
-    & .notification {
-      background: colors.$bg-translucent-primary;
-      padding: 3px;
-    }
-  }
-
-  & > .button-row {
-    margin-top: 12px;
-
-    & button {
-      padding: 6px;
-
-      &:focus {
-        box-shadow: inset 0 0 0 1px colors.$fg-primary;
-      }
-
-      & icon {
-        font-size: 16px;
-      }
-
-      & label {
-        font-size: 12px;
-        font-weight: 600;
-      }
-    }
-  }
-}
-
 .tiles-container {
   @include mixins.reset-props;
 
   & > flowbox {
     & > flowboxchild .tile {
-      $radius: 16px;
+      $radius: 18px;
 
       &:not(.toggled) > .toggle-button,
       &:not(.toggled) > button.more {
-        @include mixins.hover-shadow;
         background: colors.$bg-primary;
       }
 
+      &:not(.toggled) > .toggle-button:hover,
+      &:not(.toggled) > button.more:hover {
+        background: color.scale($color: colors.$bg-primary, $lightness: 10%);
+      }
+
       &.toggled .toggle-button:hover,
       &.toggled button.more:hover {
         background: colors.$bg-tertiary;
@@ -287,3 +250,34 @@ box.history {
     padding-top: 12px;
   }
 }
+
+box.notif-history {
+  background: colors.$bg-translucent;
+  border-radius: 24px;
+  padding: 18px;
+  transition: 120ms linear;
+
+  &.hide {
+    opacity: 0;
+  }
+
+  & .notifications {
+    & .notification {
+      background: colors.$bg-translucent-primary;
+      padding: 3px;
+    }
+  }
+
+  & .button-row {
+    margin-top: 12px;
+
+    & button {
+      padding: 7px;
+
+      & label {
+        font-size: 12px;
+        font-weight: 600;
+      }
+    }
+  }
+}

ags/style/_logout-menu.scss

@@ -20,8 +20,8 @@
     margin: 0 150px;
 
     & > button {
-      & icon {
+      & image {
-        font-size: 128px;
+        -gtk-icon-size: 128px;
       }
 
       &:focus {

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Gumi Forest Sunlight.jpg";
+$wallpaper: "/home/joaov/wallpapers/Anna Yanami Makeine Blue Sky.jpg";
 
 // Special
-$background: #2a2825;
+$background: #2d3643;
-$foreground: #c9c9c8;
+$foreground: #caccd0;
-$cursor: #c9c9c8;
+$cursor: #caccd0;
 
 // Colors
-$color0: #2a2825;
+$color0: #2d3643;
-$color1: #6a6a3b;
+$color1: #738AA7;
-$color2: #7b7b48;
+$color2: #3784E4;
-$color3: #908a45;
+$color3: #5A99EA;
-$color4: #7e876d;
+$color4: #B8A9A4;
-$color5: #8a9680;
+$color5: #8CB9EB;
-$color6: #a5a679;
+$color6: #A2C8EF;
-$color7: #a29f98;
+$color7: #a0a4a9;
-$color8: #7d7667;
+$color8: #707b89;
-$color9: #8E8E4F;
+$color9: #87a5cb;
-$color10: #A5A560;
+$color10: #87a5cb;
-$color11: #C0B85C;
+$color11: #9db5d4;
-$color12: #A9B592;
+$color12: #dab6a8;
-$color13: #B9C8AB;
+$color13: #b7cae0;
-$color14: #DDDEA2;
+$color14: #c5d5e6;
-$color15: #c9c9c8;
+$color15: #caccd0;