initial commit, you are welcome odette

style/components/bar-control-center.scss

@@ -0,0 +1,68 @@
+#status-bar .Menu {
+  background-color: $bg-alt-1;
+  min-width: 640px;
+
+  .mpd-controls {
+    background-color: $bg;
+    border-radius: 10px;
+    margin: 10px;
+
+    .button { 
+      font-size: 24px;
+      padding: 10px;
+      margin: 10px;
+      background-color: $bg-alt-1; 
+      border-color: $bg-alt-1;
+      border-radius: 10px;
+    }
+
+    .cover {
+      min-width: 250px; 
+      min-height: 250px;
+      border-radius: 10px;
+      margin: 10px;
+      background: $bg;
+      background-size: cover;
+    }
+
+    .title {
+      padding-top: 10px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    .position {
+      margin: 10px;
+      margin-right: 20px;
+      min-height: 10px;
+      border-radius: 5px;
+
+      trough {
+        background: $bg-alt-1;
+        border-radius: 5px;
+        min-height: 10px;
+      }
+
+      slider {
+        min-height: 10px;
+        border-radius: 5px;
+        background: $mpd-progress-primary;
+      }
+    }
+
+    .position-label {
+      margin-top: 75px;
+    }
+  }
+
+  .dial-parent {
+    @include panel-dial($resource-dial-fg-cpu, $bg);
+    border-radius: 10px;
+
+
+    .dial-icon {
+      color: $fg;
+    }   
+  }
+}
+

style/components/bar.scss

@@ -0,0 +1,75 @@
+* :not(selection) :not(tooltip) {
+    all: unset;
+}
+
+#status-bar {
+  background-color: $bg;
+
+  border-radius: 0 10px 10px 0; 
+
+  .dial-container {
+    margin-top: 10px;
+
+    .battery-dial {
+      @include bar-dial($battery-dial-bg, $battery-dial-fg)
+    }    
+
+    .volume-dial {
+      @include bar-dial($volume-dial-bg, $volume-dial-fg)
+    }    
+
+    .brightness-dial {
+      @include bar-dial($brightness-dial-bg, $brightness-dial-fg)
+    }
+  }
+
+  .workspace-container {
+    background-color: $bg-alt-1;
+    border-radius: 10px;
+    padding: 6px 0px;
+    margin: 0px 12px;
+      border: none;
+
+    .ws-norm {
+      min-width: 15px;
+      border-radius: 10px;
+      margin: 2px 5px;
+      padding: 6px 10px; 
+      background-color: $ws-inactive;
+      color: $fg;
+    }
+
+    .ws-active {
+      color: $bg;
+      background-color: $ws-active;
+    }
+  }
+
+  .menu-visibility-button {
+    border-radius: 0px 10px 10px 0px;
+    padding: 10px 0px 10px 2px;
+    background-color: $bg-alt-1
+  }
+
+  .clock {
+    background-color: $bg-alt-1;
+    margin: 8px;
+    margin-bottom: 10px;
+    padding: 6px 2px;
+    border-radius: 10px;
+  }
+
+  .mpd-controls {
+    .button {
+      font-size: 14px;
+      margin: 2px;
+      margin-bottom: 8px;
+      font-family: 'Symbols Nerd Font Mono';
+
+      &:hover {
+        color: $button-hover-color;
+      }
+    }
+  }
+}
+

style/components/launcher.scss

@@ -0,0 +1,43 @@
+.launcher {
+  min-width: 640px;
+  background: $bg-alt-1;
+  
+  .search {
+    > image {
+      margin-left: 10px;
+    }
+
+    > entry {
+      padding: 5px;
+      margin: 10px;
+      background: $bg;
+      border: 5px solid $bg; 
+      border-radius: 10px;
+      font-size: 32px;
+    }
+  }
+
+  .entry {
+    margin: 0 10px 0 10px;
+    border: 10px solid $bg; 
+    border-radius: 10px;
+    background: $bg;
+
+    > box {
+      > image {
+        padding: 5px;
+        margin: 5px 10px 5px 10px;
+        background: $bg-alt-1;
+        border-radius: 5px;
+      }
+
+      > label {
+
+      }
+    }
+  }
+
+  > scrolledwindow > * > box:last-child {
+    margin-bottom: 10px;
+  }
+}

style/components/lock.scss

@@ -0,0 +1,28 @@
+.lock-ready > box{
+  box {
+    background: $bg;
+    padding: 20px;
+    border: 10px solid $hl-alt-1;
+    min-width: 300px;
+    margin: 15px;
+  }
+
+  .img {
+    background: url('/home/catalie/.config/wallpaper');
+    min-width: 300px;
+    min-height: 300px;
+    background-position: 25% 12.5%; 
+    background-size: cover;
+  }
+
+  box > entry {
+    background: $bg-alt-1;
+    font-size: 14px;
+    padding: 5px;
+    margin: 10px;
+  }
+}
+
+.lock {
+  background: transparent;
+}

style/components/notification-popups.scss

@@ -0,0 +1,89 @@
+#notifications {
+  background: transparent;
+}
+
+.notifications {
+  opacity: 1;
+  min-width: 24rem;
+  .revealer {
+    + .revealer {
+      >*>box {
+        margin-top: 0;
+      }
+    }
+    
+    .notification {
+      margin-bottom: 25px;
+      min-width: 24rem;
+      padding: 0px;
+      border: 2px solid $fg;
+      border-right: 25px solid $hl-alt-2; 
+      background: $bg;
+
+      &.critical {
+        border-right: 25px solid $hl; 
+      }
+    }
+
+    .body {
+      margin-right: 1em;
+    }
+
+    .timeout-bar {
+      margin: 5px 0px 0;
+      margin-top: 5px;
+      background: $bg-alt-1;
+
+      > trough > progress {
+        background-image: none;
+        background-color: $hl-alt-1;
+      }
+    }
+
+    .button {
+      font-size: 20px; 
+      margin-left: 5px;
+      margin-right: 5px;
+      
+      &:hover {
+        color: $hl;
+      }
+    }
+
+    .icon {
+      min-width: 68px;
+      min-height: 68px;
+      margin-right: 1em;
+      margin-left: 1em;
+    }
+
+    .icon image {
+      font-size: 58px;
+      margin: 5px;
+      color: $fg;
+    }
+
+    .icon box {
+      min-width: 68px;
+      min-height: 68px;
+    }
+
+    .title { 
+      font-size: 28px;
+    }
+
+    .actions .action-button {
+      margin: 0 .4em;
+      margin-top: .8em;
+      border: 2px solid $fg;
+    }
+
+    .actions .action-button:first-child {
+      margin-left: .5em;
+    }
+
+    .actions .action-button:last-child {
+      margin-right: .5em;
+    }
+  }
+}

style/components/top-bar.scss

@@ -0,0 +1,126 @@
+$height: 50px;
+
+#status-bar {
+  background: transparent;
+  
+  .workspaces {
+    min-height: $height;
+    background: $bg;
+    padding: 5px;
+    padding-top: 15px;
+
+    .workspace {
+      min-width: 10px;
+      min-height: 10px;
+      margin: 5px;
+      background-color: $bg-alt-1;
+    }
+
+    .occupied {
+      background-color: $bg-alt-2;
+    }
+
+    .focused {
+      background-color: $hl;
+    }
+  }
+
+  .media-controls {
+    margin-top: 20px;
+    min-width: 220px; 
+
+    .button {
+      font-size: 20px;
+    }
+  }
+  
+  .progress-bar {
+    margin-top: 20px;
+    min-width: 200px;
+    min-height: 2px;
+    background: transparent;
+
+    trough {
+      min-height: 2px;
+      background: $bg-alt-1;
+    }
+
+    highlight {
+      min-height: 2px;
+      background: $mpd-progress-primary;
+    }
+  }
+
+  .right {
+    min-height: $height;
+    background: $bg;
+
+
+    .battery-container {
+      padding-left: 10px;
+      padding-right: 10px;
+      .battery-dial {
+        @include bar-dial($battery-dial-bg, $battery-dial-fg);
+      }    
+    }
+    
+    .sliderbox {
+      margin: 5px;
+      .volume {
+        .slider {
+          trough {
+              min-height: 10px;
+              min-width: 120px;
+              background: $bg-alt-1;
+          }
+
+          highlight {
+            background: $hl-alt-1;
+          }
+        }
+
+        button {
+          font-size: 20px;
+          margin: 5px;
+        }
+      }
+
+      .brightness {
+        .slider {
+          trough {
+              min-height: 10px;
+              min-width: 120px;
+              background: $bg-alt-1;
+          }
+
+          highlight {
+            background: $hl-alt-1;
+          }
+        }
+
+        button {
+          font-size: 20px;
+          margin: 5px;
+        }
+      }
+    }
+
+    separator {
+      background: $bg-alt-1;
+      padding: 1px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    .clock {
+      background: $bg;
+      
+      .datetime {
+        margin: 1px;
+        font-size: 10pt;
+      }
+    }
+
+  }
+}
+