hyprpanel

ags/HyprPanel/scss/style/common/widget-button.scss

@@ -0,0 +1,52 @@
+$popover-padding: 7px * 1.6;
+$padding: 7px;
+$spacing: 12px;
+$radius: 11px;
+
+.widget-button {
+  background: $crust;
+  opacity: 1;
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 10px;
+  padding: 15px 20px;
+  border-radius: 10px;
+  border: 3px solid;
+  border-color: $crust;
+  transition: border-color .3s ease-in-out;
+  transition: opacity .3s ease-in-out;
+
+  &:hover {
+    border: 3px solid;
+    border-color: $lavender;
+    transition: border-color .3s ease-in-out;
+  }
+
+  &:focus,
+  &:active {
+    border: 3px solid;
+    border-color: $lavender;
+  }
+
+  image {
+    border-radius: $radius + ($popover-padding * 1.4);
+    min-width: 1.2em;
+    min-height: 1.2em;
+    font-size: 4em;
+  }
+
+  label {
+    margin-top: $spacing;
+  }
+
+  &:active {
+    image {
+      opacity: .3;
+      transition: opacity .3s ease-in-out;
+    }
+    label {
+      opacity: .3;
+      transition: opacity .3s ease-in-out;
+    }
+  }
+}