testing ags

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

@@ -0,0 +1,134 @@
+.bar {
+  background: $bar-bg;
+  min-height: 32px;
+
+  .module {
+    margin: 0 0.5rem;
+  }
+}
+
+/* workspaces */
+.bar .workspaces {
+  margin: 0.2rem 0.5rem;
+
+  button {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 2rem;
+    margin: 0.7rem 0.2rem;
+    min-width: 1rem;
+    transition: 100ms linear;
+  }
+
+  .focused {
+    min-width: 2rem;
+  }
+
+  .monitor0 {
+    background: $red;
+  }
+
+  .monitor1 {
+    background: $yellow;
+  }
+
+  .monitor2 {
+    background: $green;
+  }
+
+  .monitor3 {
+    background: $blue;
+  }
+}
+
+/* music */
+.bar .music {
+  &>box {
+    @include animate;
+    border-radius: $round2;
+    margin: 0.4rem;
+  }
+
+  &.active>box {
+    background: $surface;
+  }
+
+  .cover {
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+}
+
+/* tray */
+.tray button {
+  @include button;
+  background: none;
+  margin: 0.5rem 0;
+
+  &:not(:last-child) {
+    margin-right: 0.3rem;
+  }
+
+  &.active {
+    background: $surface;
+  }
+}
+
+menu {
+  background: $tooltip-bg;
+  border-radius: $round;
+
+  separator {
+    background-color: $surface;
+  }
+
+  menuitem {
+    @include button;
+    border-radius: 0;
+    padding: 0.4rem 0.7rem;
+
+    &:first-child {
+      border-radius: $round $round 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $round $round;
+    }
+
+    &:only-child {
+      border-radius: $round;
+    }
+  }
+}
+
+/* system-info */
+.bar .system-info {
+  margin: 0 0.2rem;
+
+  &>box {
+    margin: 0 0.3rem;
+  }
+
+  .type {
+    font-size: 0.55rem;
+    font-weight: 300;
+  }
+
+  .value {
+    font-size: 0.8rem;
+  }
+}
+
+.system-menu-toggler {
+  box {
+    @include animate;
+    margin: 0.4rem 0;
+    border-radius: $round2;
+  }
+
+  &.active box {
+    background: $surface;
+  }
+}