💄 ags(style): changed styles for dialogs(ask-popup,entry-popup), removed default-styles mixin

ags/style.scss

@@ -2,6 +2,7 @@
 
 @use "./style/wal";
 @use "./style/mixins";
+@use "./style/functions";
 @use "./style/colors";
 
 @use "./style/bar";
@@ -17,15 +18,11 @@
 * {
   @include mixins.reset-props;
 
-  /*&:selected {
+  /*&:focus {
     box-shadow: inset 0 0 0 2px colors.$fg-primary;
   }*/
 }
 
-window * {
-  @include mixins.default-styles;
-}
-
 entry {
   background: colors.$bg-primary;
   padding: 10px 9px;
@@ -40,19 +37,23 @@ entry {
   }
 }
 
-.ask-popup-box, .entry-popup-box {
+.custom-dialog-container {
   background: colors.$bg-translucent;
   padding: 18px;
   border-radius: 24px;
 
   & .title {
-    font-size: 20px;
+    font-size: 21px;
     font-weight: 700;
+    margin-bottom: 10px;
   }
 
-  & .buttons {
+  & .text {
-    margin-top: 20px;
+    font-size: 16px;
+    font-weight: 400;
+  }
 
+  & .options {
     & button {
       background: colors.$bg-primary;
       border-radius: 12px;
@@ -74,8 +75,14 @@ entry {
     }
   }
 
-  &.entry-popup-box entry.password {
+  &.entry-popup-box entry {
-    font-size: 16px;
+    margin-bottom: 10px;
+
+    &.password {
+      font-size: 14px;
+      font-family: "Adwaita Mono", "Cantarell Mono", "Noto Sans Mono", monospace;
+      font-weight: 400;
+    }
   }
 }
 
@@ -206,6 +213,66 @@ menu {
   }
 }
 
+.button-row {
+  & > button {
+    background: colors.$bg-secondary;
+    margin: 0 1px;
+    padding: 4px 6px;
+    border-radius: 2px;
+
+    &:hover {
+      background: colors.$bg-tertiary;
+    }
+
+    &:first-child {
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+      margin-left: 0;
+    }
+
+    &:last-child {
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+      margin-right: 0;
+    }
+  }
+}
+
+selection {
+  background: colors.$bg-tertiary;
+}
+
+label.nf,
+button.nf label {
+  font-size: 12px;
+  font-family: "Symbols Nerd Font Mono", "Noto Sans Nerd Font Mono",
+    "0xProto Nerd Font Mono", "Fira Code Nerd Font Mono", 
+    "Symbols Nerd Font", "Noto Sans Nerd Font", "Fira Code Nerd Font",
+    "Font Awesome";
+}
+
+trough {
+  background: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
+  border-radius: 8px;
+  margin: 2px 0;
+}
+
+trough highlight {
+  background: wal.$color1;
+  min-height: .9em;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+trough slider {
+  border-radius: 50%;
+  margin: -2px 0;
+  background: wal.$foreground;
+  margin-left: -1px;
+  min-width: 1.2em;
+  min-height: 1.2em;
+}
+
 scrollbar trough {
   @include mixins.reset-props;
 

ags/style/_bar.scss

@@ -4,7 +4,6 @@
 
 .bar-container {
   @include mixins.reset-props;
-  @include mixins.default-styles;
 
   padding: 6px;
   padding-bottom: 0px;
@@ -18,7 +17,7 @@
 
   // Style widget groups
   & > .bar-centerbox > * {
-    background: colors.$bg-translucent;
+    background: rgba(colors.$bg-translucent, .6);
     padding: 5px;
     border-radius: 18px;
 
@@ -54,8 +53,6 @@
     padding: 1px 1px;
 
     & button {
-      @include mixins.reset-props;
-      
       border-radius: 16px;
       transition: 80ms linear;
       min-width: 12px;

ags/style/_colors.scss

@@ -1,13 +1,13 @@
 @use "sass:color";
 @use "./wal";
-@use "./functions" as funs;
+@use "./functions";
 
-$bg-primary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -34%));
+$bg-primary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -34%));
-$bg-secondary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -16%));
+$bg-secondary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -16%));
-$bg-tertiary: funs.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%));
+$bg-tertiary: functions.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%));
 $bg-light: wal.$foreground;
-$bg-translucent: funs.toRGB(color.change($color: $bg-primary, $alpha: 75%));
+$bg-translucent: functions.toRGB(color.change($color: $bg-primary, $alpha: 75%));
-$bg-translucent-secondary: funs.toRGB(color.change($color: $bg-translucent, $alpha: 78%));
+$bg-translucent-secondary: functions.toRGB(color.change($color: $bg-translucent, $alpha: 78%));
 $fg-primary: wal.$foreground;
 $fg-light: $bg-primary;
-$fg-disabled: funs.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%));
+$fg-disabled: functions.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%));

ags/style/_control-center.scss

@@ -6,7 +6,6 @@
 
 .control-center-container {
   @include mixins.reset-props;
-  @include mixins.default-styles;
 
   background: colors.$bg-translucent;
   border-radius: 24px;
@@ -104,24 +103,33 @@ box.history {
   @include mixins.reset-props;
 
   & > flowbox {
-    & > flowboxchild .tile-eventbox {
+    & > flowboxchild .tile {
-      &:hover:not(.toggled) > .tile {
+      $radius: 16px;
+
+      &:not(.toggled) > .toggle-button {
+        @include mixins.hover-shadow;
+      }
+
+      &.toggled .toggle-button:hover,
+      &.toggled button.more:hover {
+        background: colors.$bg-tertiary;
+      }
+
+      &.toggled > .toggle-button,
+      &.toggled > button.more {
         background: colors.$bg-secondary;
       }
 
-      &.toggled:hover > .tile {
+      &.has-more > .toggle-button {
-        box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
 
-      &.toggled > .tile {
+      & > .toggle-button {
-        background: colors.$bg-secondary;
-      }
-
-      & > .tile {
         background: colors.$bg-primary;
-        border-radius: 16px;
+        border-radius: $radius;
 
-        & > .content {
+        & .content {
           padding: 8px;
 
           & > .icon {
@@ -141,68 +149,79 @@ box.history {
             }
           }
         }
+      }
       
-        & > .more {
+      & > button.more {
-          border-top-right-radius: inherit;
+        border-top-right-radius: $radius;
-          border-bottom-right-radius: inherit;
+        border-bottom-right-radius: $radius;
 
-          & label {
+        & label {
-            font-size: 16px;
+          font-size: 16px;
-          }
-
-          &:hover {
-            box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-disabled, $alpha: .4);
-          }
         }
       }
     }
   }
 }
 
-.pages > .page {
+.tile-pages {
-  background: colors.$bg-secondary;
+  transition: 120ms linear;
-  padding: 14px;
-  border-radius: 24px;
 
-  & .header {
+  & > .page {
-    margin-bottom: 12px;
+    background: colors.$bg-secondary;
+    padding: 14px;
+    border-radius: 24px;
 
-    & > .title:first-child {
+    & .header {
-      font-size: 20px;
+      margin-bottom: 12px;
-      font-weight: 600;
+
+      & .top > .title {
+        font-size: 20px;
+        font-weight: 600;
+      }
+
+      & > .description {
+        font-size: 12px;
+        font-weight: 500;
+        color: colors.$fg-disabled;
+      }
+
+      & button label {
+        font-size: 14px;
+      }
     }
 
-    & > .description {
+    & .sub-header {
-      font-size: 12px;
-      font-weight: 500;
-      color: colors.$fg-disabled;
-    }
-
-    & button label {
       font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 6px;
+    }
+
+    & button {
+      @include mixins.hover-shadow;
+
+      padding: 6px;
+      border-radius: 12px;
+    }
+
+    & .extra-buttons {
+      margin-left: 2px;
+      & > button {
+        border-radius: 12px;
+      }
+    }
+
+    &.bluetooth {
+      button.connected {
+        background: colors.$bg-tertiary;
+      }
+
+      &.paired {
+        margin-bottom: 20px;
+      }
     }
   }
 
-  & .sub-header {
+  &.revealed {
-    font-size: 14px;
+    padding-top: 12px;
-    font-weight: 500;
-    margin-bottom: 6px;
-  }
-
-  & button {
-    @include mixins.hover-shadow;
-
-    padding: 6px;
-    border-radius: 12px;
-  }
-
-  &.bluetooth {
-    button.connected {
-      background: colors.$bg-tertiary;
-    }
-
-    &.paired {
-      margin-bottom: 20px;
-    }
   }
 }

ags/style/_mixins.scss

@@ -19,65 +19,3 @@
     box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1);
   }
 }
-
-@mixin default-styles {
-  .button-row {
-    & > button {
-      background: colors.$bg-secondary;
-      margin: 0 1px;
-      padding: 4px 6px;
-      border-radius: 2px;
-
-      &:hover {
-        background: colors.$bg-tertiary;
-      }
-
-      &:first-child {
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-        margin-left: 0;
-      }
-
-      &:last-child {
-        border-top-right-radius: 10px;
-        border-bottom-right-radius: 10px;
-        margin-right: 0;
-      }
-    }
-  }
-
-  selection {
-    background: colors.$bg-tertiary;
-  }
-
-  label.nf,
-  button.nf label {
-    font-size: 12px;
-    font-family: "Symbols Nerd Font Mono", "Noto Sans Nerd Font Mono",
-      "0xProto Nerd Font Mono", "Fira Code Nerd Font Mono", 
-      "Symbols Nerd Font", "Noto Sans Nerd Font", "Fira Code Nerd Font",
-      "Font Awesome";
-  }
-
-  & trough {
-    background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
-    border-radius: 8px;
-    margin: 2px 0;
-  }
-
-  & trough highlight {
-    background: wal.$color1;
-    min-height: .9em;
-    border-top-left-radius: inherit;
-    border-bottom-left-radius: inherit;
-  }
-
-  & trough slider {
-    border-radius: 50%;
-    margin: -2px 0;
-    background: wal.$foreground;
-    margin-left: -1px;
-    min-width: 1.2em;
-    min-height: 1.2em;
-  }
-}

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Frieren Underwater.jpg";
+$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg";
 
 // Special
-$background: #0a1d30;
+$background: #0d101f;
-$foreground: #c1c6cb;
+$foreground: #c2c3c7;
-$cursor: #c1c6cb;
+$cursor: #c2c3c7;
 
 // Colors
-$color0: #0a1d30;
+$color0: #0d101f;
-$color1: #13A9D8;
+$color1: #586C8C;
-$color2: #4EAED3;
+$color2: #649D93;
-$color3: #2AC9EB;
+$color3: #60AFB7;
-$color4: #97A0AB;
+$color4: #96ABA0;
-$color5: #D1B8B5;
+$color5: #A3CCA4;
-$color6: #9CB6CD;
+$color6: #CFD8B4;
-$color7: #93989d;
+$color7: #90929b;
-$color8: #606b76;
+$color8: #5c6071;
-$color9: #6eadc0;
+$color9: #698abf;
-$color10: #8abacd;
+$color10: #79c5b9;
-$color11: #84bdca;
+$color11: #85c4ca;
-$color12: #9cb2d4;
+$color12: #9bd4b4;
-$color13: #e3c2bf;
+$color13: #b3deb3;
-$color14: #afc8dd;
+$color14: #dde4c2;
-$color15: #c1c6cb;
+$color15: #c2c3c7;