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

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 {
-      &:hover:not(.toggled) > .tile {
+    & > flowboxchild .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 {
-        box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
+      &.has-more > .toggle-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
 
-      &.toggled > .tile {
-        background: colors.$bg-secondary;
-      }
-
-      & > .tile {
+      & > .toggle-button {
         background: colors.$bg-primary;
-        border-radius: 16px;
+        border-radius: $radius;
 
-        & > .content {
+        & .content {
           padding: 8px;
 
           & > .icon {
@@ -141,68 +149,79 @@ box.history {
             }
           }
         }
+      }
+      
+      & > button.more {
+        border-top-right-radius: $radius;
+        border-bottom-right-radius: $radius;
 
-        & > .more {
-          border-top-right-radius: inherit;
-          border-bottom-right-radius: inherit;
-
-          & label {
-            font-size: 16px;
-          }
-
-          &:hover {
-            box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-disabled, $alpha: .4);
-          }
+        & label {
+          font-size: 16px;
         }
       }
     }
   }
 }
 
-.pages > .page {
-  background: colors.$bg-secondary;
-  padding: 14px;
-  border-radius: 24px;
+.tile-pages {
+  transition: 120ms linear;
 
-  & .header {
-    margin-bottom: 12px;
+  & > .page {
+    background: colors.$bg-secondary;
+    padding: 14px;
+    border-radius: 24px;
 
-    & > .title:first-child {
-      font-size: 20px;
-      font-weight: 600;
+    & .header {
+      margin-bottom: 12px;
+
+      & .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 {
-      font-size: 12px;
-      font-weight: 500;
-      color: colors.$fg-disabled;
-    }
-
-    & button label {
+    & .sub-header {
       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 {
-    font-size: 14px;
-    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;
-    }
+  &.revealed {
+    padding-top: 12px;
   }
 }