testing ags

home/core/gui/ags/style/general.scss

@@ -0,0 +1,100 @@
+/* general styles */
+
+$round: 8px;
+$round2: calc($round * 2);
+$margin: 0.4rem;
+$padding: 0.4rem;
+$border-width: 2px;
+$scale: 0.5rem;
+
+@mixin animate {
+  transition: 200ms;
+}
+
+* {
+  color: $fg;
+}
+
+/* mixins */
+@mixin window-rounding {
+  border-radius: $round2;
+}
+
+@mixin rounding {
+  border-radius: calc($round2 - $padding - $border-width);
+}
+
+@mixin window-box {
+  @include rounding;
+
+  background: $surface;
+  box-shadow: 0 1px 5px -5px rgba(0, 0, 0, 0.5);
+  margin: $margin;
+  padding: $padding;
+}
+
+@mixin window {
+  @include border;
+  @include window-rounding;
+
+  background: $bg;
+  margin: 5px 10px 15px;
+  padding: $padding;
+}
+
+tooltip {
+  background: $tooltip-bg;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 0 rgba(0, 0, 0, 0.4);
+  border-radius: $round;
+}
+
+/* scales & progress bars */
+scale,
+progressbar {
+  trough {
+    background-color: $surface;
+    border-radius: $scale;
+    min-width: calc($scale * 10);
+    padding: 0 calc($scale / 2);
+  }
+
+  highlight,
+  progress {
+    background: $overlay;
+    border-radius: $scale;
+    margin: 0 calc(0px - $scale / 2);
+    min-height: $scale;
+  }
+}
+
+@mixin button-active {
+  @include animate;
+  background: $button-enabled;
+  border-radius: 5rem;
+  padding: 0.4rem;
+
+  &:hover {
+    background: $button-enabled-hover;
+  }
+}
+
+@mixin button {
+  @include animate;
+  background: $button-disabled;
+  border-radius: 5rem;
+  padding: 0.4rem;
+
+  &:hover {
+    background: $button-disabled-hover;
+  }
+}
+
+.button {
+  @include button-active;
+}
+
+.button.disabled {
+  @include button;
+}