stuff

2024-02-22 15:35:06 +07:00
commit 8db26e9707
4220 changed files with 208544 additions and 0 deletions
@@ -0,0 +1,17 @@
+# Eww configuration
+
+This configuration aims to provide a fully working shell replacement for
+compositors/window managers. Features constantly get added and existing ones
+get improved.
+
+## ❔ Usage
+
+To quickly install this config, grab all the files in this directory and put
+them in `~/.config/eww`. Then run `eww daemon` and `eww open bar`. Enjoy!
+
+Dependencies:
+- Icon fonts: `material-design-icons`, `material-icons`
+- Text font: Gabarito
+
+## 🎨 Theme
+- tokyonight
@@ -0,0 +1,36 @@
+.bg-decor-dow {
+  font-family: Gabarito;
+  font-size: 64pt;
+  color : rgba(255, 255, 255, 0.4);
+}
+
+.bg-decor-date {
+  font-family: Gabarito;
+  font-size: 26pt;
+  color : rgba(255, 255, 255, 0.4);
+}
+
+.bg-decor-input-left {
+  border-top-left-radius: 999px;
+  border-bottom-left-radius: 999px;
+  margin-top: 30px;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: 15pt;
+  min-height: 50px;
+  background-color : rgba(255, 255, 255, 0.2);
+}
+
+.bg-decor-input-right {
+  border-top-right-radius: 999px;
+  border-bottom-right-radius: 999px;
+  margin-top: 30px;
+  padding-left: 20px;
+  padding-right: 20px;
+  // padding-top: 5px;
+  // padding-bottom: 5px;
+  font-size: 15pt;
+  min-height: 50px;
+  background-color : rgba(255, 255, 255, 0.2);
+  color : rgba(255, 255, 255, 0.2);
+}
@@ -0,0 +1,51 @@
+.calendar-win {
+  @include window;
+  background-color: $colorbg;
+  border: 3px solid $color7;
+  color: $colortext;
+  padding: .2em;
+  font-family: 'Gabarito';
+}
+
+calendar {
+  //padding: 5px;
+  // padding-top: 4px;
+  // padding-left: 4px;
+  padding: 7px;
+
+
+  :selected {
+    color: $colortext;
+    font-weight: bolder;
+    background-color: $overlay0;
+    border-radius: 8px;
+    font-family: 'Gabarito';
+  }
+
+  .header {
+    font-family: 'Gabarito';
+    color: $color6;
+  }
+
+  .highlight {
+    font-family: 'Gabarito';
+    color: $color0;
+    font-weight: bold;
+  }
+
+  .button {
+    font-family: 'Gabarito';
+    color: $colortext;
+  }
+
+  :indeterminate {
+    color: $overlay0;
+  }
+}
+
+.date-clock{
+  font-family: 'Gabarito';
+  background: transparent;
+  color: $color6;
+  padding-left: 5px;
+}
@@ -0,0 +1,73 @@
+
+
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+// $red:         #EF738A;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$true: #EF738A;
+$false: #A9B1D6;
+
+
+$forestgreen: #A8B468;
+$forestyellow : #8e8370;
+$foresttext : #d3c6ab;
+$forestblack : #1e201f;
+$forestred : #e76c69;
+$forestpink : #d698b5;
+$forestorange : #e59576;
+$forestgray : #75817b;
+$forestgraylight: #495156;
+$forestgreendark: #7fba90;
+$forestblue: #77AEA7;
+
+$tokyobluedark: #1A1B26;
+$tokyobluelessdark: #1f212e;
+$tokyotext: #a9b1d6;
+$tokyopink: #ff79b1; //nah theres no pink in tokyonight, but i need one so added
+$tokyored: #EF738A;
+$tokyoorange: #FF9E64;
+$tokyoyellow: #E0AF68;
+$tokyogreen: #9ECE6A;
+$tokyoturquoise: #73daca;
+$tokyoice: #b4f9f8;
+$tokyocyan: #0DB9D7;
+$tokyoblue: #7AA2F7;
+$tokyopurple: #9778D0;
+$tokyogrey: #444B6A;
+$catbg: #1E1E2E;
+
+$text: $tokyotext;
+$subtext1: #868dac;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: rgba(108, 112, 134, 0.5);
+
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: rgba(28, 28, 48, 0.5); //Needs dynamic change
+
+$base: #1E201F;
+$mantle: #181825;
+$crust: #121415;
+
+$fg: $tokyotext;
+$bg: #171726;
+$barbg: #131426;
+$bg1: $surface0;
+$shadow: $crust;
+
+// $battcolor: $tokyogreen;
+// $memcolor: $tokyoorange;
+// $cpucolor: $tokyoblue;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/OdasYzoN7TQ/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCYFcwiVGbaXXSPIUCHH7RG7dYbMQ
+$colorbg: #1b1938;
+$colortext: #BCE2FD;
+$color0: #C9B1FC;
+$color1: #9CC6FB;
+$color2: #B1D1FB;
+$color3: #BCE2FD;
+$color4: #CDD3FA;
+$color5: #E2D6FA;
+$color6: #e0eaf5;
+$color7: #BCE2FD;
@@ -0,0 +1,11 @@
+$colorbg: #171726;   //Get from color0
+$colortext: #a9b1d6; //Get from color4
+$color0: #ff79b1;
+$color1: #EF738A;
+$color2: #FF9E64;
+$color3: #E0AF68;
+$color4: #9ECE6A;
+$color5: #7AA2F7;
+$color6: #0DB9D7;
+$color7: #9778D0; //Get from color4 (border)
+$colormusic: #EF738A;
@@ -0,0 +1,107 @@
+.song-cover-art {
+  @include rounding;
+  background-position: center;
+  background-size: cover;
+  margin: 4px 5px 4px 0;
+  min-height: 24px;
+  min-width: 24px;
+}
+
+.music-window {
+  @include window;
+  background-color: $colorbg;
+  border: 3px solid;
+  color: $colortext;
+  padding: 3px;
+  margin: 3px;
+}
+
+.music-cover-art {
+  @include rounding;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  // border-radius: 5px;
+  margin: 1em;
+  min-height: 200px;
+  min-width: 200px;
+  // background-image: url("/home/end/.config/eww/images/LinageTrack.png");
+}
+
+.music-box {
+  margin: 1rem 1rem 1rem 0;
+}
+
+.music-title {
+  // font-weight: bold;
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  font-size: 1.1rem;
+}
+
+.music-artist {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  color: $color1;
+}
+
+.music-button label {
+  font-family: 'Material Symbols Rounded';
+  // color: $text;
+  font-size: 2rem;
+  font-family: SF Mono Nerd Font;
+  padding: 8px;
+}
+
+.music-time {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  color: $color1;
+  margin: 0 1rem;
+}
+
+.music-bar scale {
+  font-family: 'Material Symbols Rounded';
+  font-family: SF Mono Nerd Font;
+
+  highlight {
+    background-color: $color1;
+    border-radius: 24px;
+  }
+
+  trough {
+    background-color: $surface0;
+    border-radius: 24px;
+    margin-top: 0;
+    min-height: 10px;
+    min-width: 170px;
+  }
+}
+
+.music-ctl {
+  border-radius: 0px;
+  color: $color1;
+  // padding-right: 10px;
+  min-height: 32px;
+}
+
+.music-icon {
+  padding-top: 5px; //Because the music icon is a bit high
+  padding-left: 16px;
+  padding-right: 16px;
+  color: $color1;
+  background-image: url("images/LinageMusic.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.music-ctl-revealer {
+  padding-left: 10px;
+}
+
+.song-button {
+  color: $color1;
+  padding: 0px;
+}
+
+.music-button-box {
+  font-family: 'Material Symbols Rounded';
+}
@@ -0,0 +1,62 @@
+.notifications-box {
+  @include window;
+  background: $bg;
+  padding: 1rem;
+  font-family: 'Gabarito';
+}
+
+.notification {
+  font-family: 'Gabarito';
+  background-color: $surface0;
+  border-bottom: 3px solid $bg;
+  padding: .5rem;
+
+  box { margin-bottom: .5rem; }
+
+  label { font-size: 1rem; }
+
+  &:hover {
+    border: 3px solid $color7;
+  }
+
+  .appname {
+    color: $color0;
+    font-weight: bold;
+  }
+
+  .summary {
+    color: $colortext;
+    font-weight: bold;
+  }
+
+  .body { color: $colortext; }
+}
+
+.container {
+  &:first-child { border-radius: 8px 8px 0 0; };
+  &:last-child { border-radius: 0 0 8px 8px; };
+}
+
+.notification-header {
+  margin-bottom: 1rem;
+}
+
+.notification-label {
+  color: $color6;
+  font-size: 1.5rem;
+}
+
+.notification-action {
+  border-radius: 50%;
+  margin-bottom: .2rem;
+  padding: 0 .3rem;
+
+  label {
+    color: $colortext;
+    font-size: 1.2rem;
+  }
+
+  &:hover {
+    background: $surface0;
+  }
+}
@@ -0,0 +1,64 @@
+.overview-window {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  @include rounding;
+  background-color: $colorbg;
+  border: 3px solid $color7;
+  padding: 5px;
+}
+
+.overview-window-top {
+  @include rounding;
+  background-color: transparent;
+  border: 3px solid transparent;
+  padding: 5px;
+}
+
+.overview-ws {
+  border-radius: 11px;
+  background-color: $surface0;
+  margin: 5px;
+}
+
+.overview-ws-window {
+  border: 2px solid $color0;
+  border-radius: 11px;
+  margin: 3px; 
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.overview-icon {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-left: 17px;
+  padding-right: 17px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.overview-ws-text {
+  padding-left: 5px;
+  font-size: 13pt;
+}
+.overview-ws-subtext {
+  padding-left: 5px;
+  font-size: 9pt;
+}
+
+.overview-ws-number { //Note: height 100px width 356px
+  font-size: 25pt;
+  border-radius: 11px;
+  background-color: $overlay0;
+  color: $colortext;
+  margin: 10px;
+  min-height: 40px;
+  min-width: 40px;
+}
+
+.overview-title {
+  font-weight: bold;
+  font-size: 15pt;
+  padding-top: .6rem;
+  padding-bottom: .6rem;
+}
@@ -0,0 +1,157 @@
+.system-menu-box {
+  @include window;
+  background-color: $colorbg;
+  border: 3px solid $border;
+  // color: $colortext;
+}
+
+.separator {
+  font-size: 1rem;
+}
+
+.top-row {
+  margin: 1rem 1.5rem 0;
+
+  .time {
+    font-size: 2rem;
+  }
+
+  .date-box {
+    margin: 0 1rem;
+
+    label {
+      font-size: 1.1rem;
+    }
+
+    .date {
+      background: unset;
+      margin: 0 .5rem 0 0;
+      padding: 0;
+    }
+  }
+}
+
+.system-row {
+  font-family: Gabarito;
+  margin: .5rem .7rem;
+
+  .airplane-box button {
+    padding: 1rem 3rem;
+  }
+
+  label {
+    font-size: 1rem;
+    margin: 0 .1rem;
+  }
+}
+
+.element {
+  font-family: 'Gabarito';
+  @include rounding;
+  background: $surface0;
+  margin: .3rem;
+
+  button {
+    @include rounding;
+    padding: 1rem;
+
+    label {
+      font-size: 1.5rem;
+    }
+
+    &:hover {
+      background: $overlay0;
+    }
+  }
+}
+
+.sliders {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  @include rounding;
+  background-color: $surface0;
+  margin: .5rem 1rem;
+  padding: .6rem 1rem;
+
+  scale {
+    margin-right: -1rem;
+    min-width: 25.8rem;
+  }
+  scale trough {
+    background-color: $bg1;
+    border-radius: 24px;
+    margin: 0 1rem;
+    min-height: 10px;
+    min-width: 70px;
+  }
+
+  box {
+    margin: .2rem 0;
+  }
+
+  label {
+    font-size: 1.2rem;
+  }
+}
+
+.sliderbg {
+  background-color: transparent;
+  padding: 0px;
+}
+
+.volume-bar highlight {
+  font-family: SF Mono Nerd Font;
+  @include rounding;
+  background: $color6;
+  // background-image: linear-gradient(to right, $tokyocyan 30%, $tokyopurple 100%);
+}
+
+.volume-slider-box scale highlight {
+  @include rounding;
+  background: $color6;
+  // background-image: linear-gradient(to right, $tokyocyan 30%, $tokyopurple 100%);
+  // border: 2px solid;
+  min-height: 0.9rem;
+}
+
+// .volume-slider-box scale {
+//   @include rounding;
+//   background-color: #1A1B26;
+//   border: 2px solid;
+// }
+
+.bottom-row {
+  margin: .5rem 1rem;
+
+  .battery-icon {
+    font-size: 2rem;
+  }
+
+  .battery-wattage {
+    color: $color7;
+  }
+
+  .battery-status {
+    color: $colortext;
+    margin: 0 .5rem;
+  }
+
+  button {
+    background-color: $surface0;
+    border-radius: 50%;
+    margin-bottom: .1rem;
+    padding: 0 .5rem;
+
+    label {
+      font-size: 1.5rem;
+    }
+
+    &:hover {
+      background: $overlay0;
+    }
+  }
+}
+
+.power-button {
+  min-height: 2.5rem;
+  // min-width: 2.5rem;
+}
@@ -0,0 +1,169 @@
+.membar {
+  color: $memcolor;
+}
+
+.cpubar {
+  color: $cpucolor;
+}
+
+.batbar {
+  color: $battcolor;
+  padding-right: 4px;
+}
+
+// .batbar-circle {
+//   color: $battcolor;
+//   padding-right: 4px;
+// }
+
+// .membar,
+// .cpubar,
+// .batbar {
+//   // background-color: transparent;
+//   padding: 0px;
+// }
+
+.membar:hover,
+.cpubar:hover,
+.batbar:hover {
+  border-top: 2px solid;
+}
+
+.batt-percentage {
+  padding-right: 5px;
+  padding-left: 4px;
+}
+
+.batt-low {
+  background-color: #B5E8E0;
+  color: #161320;
+  animation-name: blink;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+.sys-menu-charge {
+  padding-left: 2px;
+}
+
+.iconmem {
+  color: $memcolor;
+}
+
+.iconcpu {
+  color: $cpucolor;
+}
+
+.icon-text {
+  font-size: 3rem;
+  padding: .7rem;
+}
+
+.sys-text-sub {
+  color: $colortext;
+}
+
+.sys-text-mem,
+.sys-text-cpu {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.sys-icon-mem,
+.sys-icon-cpu {
+  font-size: 1.5rem;
+  margin: 1.5rem;
+}
+
+.system-info-box {
+  @include rounding;
+  background-color: $surface0;
+  margin: .5rem 1rem;
+  padding: .5rem;
+}
+
+.sys-mem,
+.sys-cpu {
+  background-color: $colorbg;
+}
+
+.sys-icon-mem,
+.sys-text-mem,
+.sys-mem {
+  color: $memcolor;
+}
+
+.sys-icon-cpu,
+.sys-text-cpu,
+.sys-cpu {
+  color: $cpucolor;
+}
+
+.sys-box {
+  margin: .3em;
+
+  box {
+    margin-left: 1rem;
+  }
+}
+
+.cpu-menu {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  color: $cpucolor;
+  padding-left: 5px;
+}
+
+.mem-menu {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  color: $memcolor;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.mem-menu-left {
+  color: $memcolor;
+  padding-left: 5px;
+  padding-right: 0px;
+}
+
+.mem-menu-mid {
+  color: $memcolor;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.mem-menu-right {
+  color: $memcolor;
+  padding-left: 0px;
+  padding-right: 5px;
+}
+
+.sys-menu {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  color: $battcolor;
+  margin: 0px;
+  padding: 0px;
+}
+
+.sys-menu-button {
+  color: $color1;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  background-image: url("images/LinageSettings.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+// .volume-bar, .brightness-slider, .slider {
+// background-color: #16161E;
+// border: 2px solid #7C9FF5;
+// border-radius: 99px;
+// }
+
+.sys-toggle {
+  font-size: 3pt;
+}
@@ -0,0 +1,48 @@
+.themer-menu-box {
+    @include window;
+    background-color: $colorbg;
+    border: 3px solid $border;
+    // color: $colortext;
+}
+
+.themer-title {
+    font-family: 'Gabarito', 'Material Symbols Rounded';
+    font-weight: bold;
+    font-size: 15pt;
+    padding: .6rem;
+}
+
+.themer-prompt {
+    font-family: 'Gabarito', 'Material Symbols Rounded';
+    font-size: 12pt;
+    padding: .6rem;
+}
+
+.themer-input {
+    font-family: 'Gabarito', 'Material Symbols Rounded';
+    background-color: $surface0;
+    border-radius: 10px;
+    padding: 3px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    border: 2px solid $overlay0;
+}
+.themer-input:focus {
+    border: 2px solid $colortext;
+}
+
+.themer-color-preview {
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 5px;        
+    border-width: 55px;
+}
+
+.preview-0 { background-color: $color0; }
+.preview-1 { background-color: $color1; }
+.preview-2 { background-color: $color2; }
+.preview-3 { background-color: $color3; }
+.preview-4 { background-color: $color4; }
+.preview-5 { background-color: $color5; }
+.preview-6 { background-color: $color6; }
+.preview-7 { background-color: $color7; }
@@ -0,0 +1,29 @@
+.vol-icon {
+  color: $color6;
+  padding-right: 2px;
+}
+
+// .vol-icon {
+//   color: $tokyocyan;
+//   padding-right: 2px;
+// }
+
+.volbar highlight {
+  background-image: linear-gradient(to right, $teal 30%, $sky 100%);
+  border-radius: 10px;
+}
+
+
+.vol-menu {
+  font-size: 1pt;
+  color: $color6;
+  padding-right: 2px;
+  padding-top: 4px;
+}
+
+.vol-menu:hover {
+  border-top: 2px solid;
+}
+.vol-icon:hover {
+  border-top: 2px solid;
+}
@@ -0,0 +1,55 @@
+.winctl {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  padding-left: 3px;
+  padding-right: 3px;
+  color: $color0;
+  padding-top: 4px;
+}
+
+.winctl:hover {
+  border-top: 2px solid;
+}
+
+.winws {
+  @include rounding;
+  background-color: $surface0;
+  margin: .4rem .8rem;
+  padding: .3rem .5rem;
+  min-width: 31rem;
+}
+
+.winws-title {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  font-weight: bold;
+  font-size: 15pt;
+  padding-top: .6rem;
+  padding-bottom: .6rem;
+}
+
+.wintext {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  font-size: 13pt;
+}
+.winsubtext {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  font-size: 10pt;
+}
+
+.winws-workspace {
+  padding: 0px;
+  margin: 0px;
+}
+
+.appicon {
+  background-size: 90%;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding-left: 22px;
+  padding-right: 22px;
+  margin-right: 10px;
+}
+
+.wschoose {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  font-size: 14pt;
+}
@@ -0,0 +1,207 @@
+.osettings-window {
+    padding-top: 50px;
+    background-color: #302E38;
+    color: #F8F8F8;
+    font-family: Rubik;
+}
+
+.osettings-separator {
+    background-color: #18171C;
+    min-height: 6px;
+    margin-top: 27px;
+}
+
+.osettings-content {
+    padding-top: 13px;
+    padding-bottom: 10px;
+    background-color: #302E38;
+    color: #F8F8F8;
+    font-family: Rubik;
+}
+
+.osettings-heading {
+    padding-left: 28px;
+    padding-right: 28px;
+    background-color: #302E38;
+    color: #F8F8F8;
+    font-family: Rubik;
+}
+
+.osettings-title {
+    background-color: #302E38;
+    color: #F8F8F8;
+    font-family: Rubik;
+    font-size: 30pt;
+}
+
+.osettings-subtitle {
+    background-color: #302E38;
+    color: #DCD7EC;
+    font-family: Rubik;
+    font-size: 14pt;
+}
+
+.osettings-section {
+    margin-top: 20px;
+    margin-bottom: 9px;
+    background-color: #302E38;
+    color: #FAFAFA;
+    font-family: Rubik;
+    font-size: 20pt;
+}
+
+.osettings-text {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    color: #F7F7F7;
+    font-family: Rubik;
+    font-size: 14pt;
+}
+
+.osettings-search {
+    margin-left: 28px;
+    margin-right: 28px;
+    margin-top: 65px;
+    background-color: #24222A;
+    color: #FAFAFA;
+    border-radius: 6px;
+    font-size: 11pt;
+    min-height: 45px;
+}
+
+.osettings-search-text {
+    color: #EBEBEC;
+    padding: 10px;
+    font-size: 13pt;
+    min-width: 420px;
+
+    cursor {
+        color: #7F7E83;
+    }
+
+    highlight {
+        color: green;
+        background-color: green;
+    }
+}
+
+.osettings-search-icon {
+    color: #FAFAFA;
+    padding: 6px;
+    padding-left: 0px;
+    font-size: 20pt;
+}
+
+.osettings-scroll-bg {
+    padding-left: 28px;
+    padding-right: 28px;
+}
+
+.osettings-settings {}
+
+.osettings-btn {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: 9999px;
+    min-height: 50px;
+    font-weight: bold;
+    font-size: 13pt;
+}
+
+.osettings-btn-destructive {
+    background-color: #CC3378;
+}
+
+.osettings-btn-neutral {
+    background-color: #5933CC;
+}
+
+.osettings-btn-informative {
+    background-color: #EEAA00;
+}
+
+.osettings-btn-neutral:hover,
+.osettings-btn-neutral:focus {
+    background-color: #8C66FF;
+}
+
+.osettings-btn-destructive:hover,
+.osettings-btn-destructive:focus {
+    background-color: #F53D90;
+}
+
+.osettings-btn-informative:hover,
+.osettings-btn-informative:focus {
+    background-color: #FFCC00;
+}
+
+.rounder {
+    border-radius: 9999px;
+}
+
+.osettings-slider {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    min-height: 6px;
+    border-radius: 9999px;
+    background-image: linear-gradient(to right, #8C66FF 50%, #24222A 50%);
+    padding: 0px;
+
+    trough {
+        border-radius: 9999px;
+        background-color: #24222A;
+        min-height: 6px;
+        margin-left: 32px;
+        margin-right: 32px;
+        // min-width: 70px;
+    }
+
+    highlight {
+        border-radius: 9999px;
+        background-color: #8C66FF;
+    }
+
+    slider {
+        border-radius: 9999px;
+        min-height: 20px;
+        // min-height: 6px;
+        min-width: 65px;
+        background-color: #8C66FF;
+        margin: -8px;
+    }
+
+    slider:hover {
+        background-color: #A87AFF;
+    }
+
+    slider:focus {
+        background-color: #A87AFF;
+    }
+}
+
+.osettings-checkbox {
+    border-radius: 9999px;
+    // min-height: 20px;
+    // min-height: 6px;
+    min-width: 60px;
+    background-color: transparent;
+    color: transparent;
+    border: 3px solid #8C66FF;
+
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.osettings-checkbox:checked {
+    border-radius: 9999px;
+    background-color: #8C66FF;
+    color: #8C66FF;
+}
+
+.scrollbar { //whyyyyyyy
+    background-color: red;
+
+    trough {
+        background-color: red;
+    }
+}
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #000101;
+$colortext: #28BABD;
+$color0: #1D9194;
+$color1: #12B0B3;
+$color2: #2DAEB0;
+$color3: #28BABD;
+$color4: #568587;
+$color5: #16CFD1;
+$color6: #87e5e6;
+$color7: #28BABD;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/eW5kCVkBBP0/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCvqcy7AEqsLJWnbvruHbqHtyXMjA
+$colorbg: #060308;
+$colortext: #7256AA;
+$color0: #30148F;
+$color1: #3615A1;
+$color2: #4D22AC;
+$color3: #7256AA;
+$color4: #6626D0;
+$color5: #8E46DE;
+$color6: #c5a6ea;
+$color7: #7256AA;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #0E3055;
+$colortext: #10A997;
+$color0: #216F89;
+$color1: #4F7085;
+$color2: #0F908B;
+$color3: #10A997;
+$color4: #23A59F;
+$color5: #5DA2A6;
+$color6: #8edfd5;
+$color7: #10A997;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/OdasYzoN7TQ/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCYFcwiVGbaXXSPIUCHH7RG7dYbMQ
+$colorbg: #1b1938;
+$colortext: #BCE2FD;
+$color0: #C9B1FC;
+$color1: #9CC6FB;
+$color2: #B1D1FB;
+$color3: #BCE2FD;
+$color4: #CDD3FA;
+$color5: #E2D6FA;
+$color6: #e0eaf5;
+$color7: #BCE2FD;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/YPdCyC-H_v0/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB_SQ40d0_Pmw0rZtCRQ6_ggVShIg
+$colorbg: #000000;
+$colortext: #995A92;
+$color0: #6A4776;
+$color1: #8A4579;
+$color2: #765487;
+$color3: #995A92;
+$color4: #CA5AA8;
+$color5: #DBA1A8;
+$color6: #e1c9d2;
+$color7: #995A92;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #1f2228;
+$colortext: #60D5E8;
+$color0: #59A6B8;
+$color1: #21A1D8;
+$color2: #20D5E6;
+$color3: #60D5E8;
+$color4: #A1A4B3;
+$color5: #9FE6EB;
+$color6: #dde4e5;
+$color7: #60D5E8;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/oKOsXdB_C0Q/hqdefault.jpg?sqp=-oaymwE2CNACELwBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARgTIEcofzAP&rs=AOn4CLAcG9PBSsh7MtP-PmSBee046IVFXQ
+$colorbg: #02070D;
+$colortext: #65A3D5;
+$color0: #37669A;
+$color1: #1F62A7;
+$color2: #5C9AB8;
+$color3: #65A3D5;
+$color4: #88B6D5;
+$color5: #A0D4E8;
+$color6: #ddeef2;
+$color7: #65A3D5;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/0CuTOGKMWW0/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBkQ9ETNGNv538s2qddDWjrEvW4-A
+$colorbg: #09040A;
+$colortext: #1AEDAB;
+$color0: #11988A;
+$color1: #04B190;
+$color2: #05CB99;
+$color3: #1AEDAB;
+$color4: #5FD0AC;
+$color5: #9FD2BF;
+$color6: #e1ede5;
+$color7: #1AEDAB;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/VR1H9njDd9w/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDVltG4xzVCF5FVl8ywZqwwNepufg
+$colorbg: #091414;
+$colortext: #37B6AF;
+$color0: #1C8E6F;
+$color1: #47AE6C;
+$color2: #1BA19B;
+$color3: #37B6AF;
+$color4: #22D5DC;
+$color5: #2CF2F8;
+$color6: #9cf2f2;
+$color7: #37B6AF;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #021336;
+$colortext: #147AC5;
+$color0: #335B8D;
+$color1: #1A63A8;
+$color2: #126BB3;
+$color3: #147AC5;
+$color4: #2696D8;
+$color5: #58BAE8;
+$color6: #c6e6ee;
+$color7: #147AC5;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/pgrUT_Vg5g8/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAewmIHWJ2J7GYT2oj0_XMMPAHsnQ
+$colorbg: #12052d;
+$colortext: #D035F7;
+$color0: #7324F3;
+$color1: #902CFB;
+$color2: #A831FC;
+$color3: #D035F7;
+$color4: #AD56EE;
+$color5: #DD67EF;
+$color6: #e9bfeb;
+$color7: #D035F7;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #0c041c;
+$colortext: #6B50A1;
+$color0: #85826F;
+$color1: #57309A;
+$color2: #5338B7;
+$color3: #6B50A1;
+$color4: #A05BA9;
+$color5: #B053B0;
+$color6: #c4afe4;
+$color7: #6B50A1;
@@ -0,0 +1,11 @@
+$colorbg: #171726;   //Get from color0
+$colortext: #a9b1d6; //Get from color4
+$color0: #ff79b1;
+$color1: #EF738A;
+$color2: #FF9E64;
+$color3: #E0AF68;
+$color4: #9ECE6A;
+$color5: #7AA2F7;
+$color6: #0DB9D7;
+$color7: #9778D0; //Get from color4 (border)
+$colormusic: #EF738A;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: https://i.ytimg.com/vi/TJB0vBURJu8/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBSn25aezZvjIetBF8GVsTMPat0Zw
+$colorbg: #1f133f;
+$colortext: #B592D1;
+$color0: #B26CB9;
+$color1: #AB8FB2;
+$color2: #AD9ED3;
+$color3: #B592D1;
+$color4: #CFA2D9;
+$color5: #DCCFE8;
+$color6: #ebe2ee;
+$color7: #B592D1;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #0C1012;
+$colortext: #6240A2;
+$color0: #405865;
+$color1: #51108E;
+$color2: #681AA7;
+$color3: #6240A2;
+$color4: #9E21D9;
+$color5: #BE3DDF;
+$color6: #acbebe;
+$color7: #6240A2;
@@ -0,0 +1,11 @@
+//Auto generated color theme for image at: 
+$colorbg: #0f1212;
+$colortext: #9A906B;
+$color0: #956267;
+$color1: #8B7F7F;
+$color2: #BDAC54;
+$color3: #9A906B;
+$color4: #A09F95;
+$color5: #CAAB99;
+$color6: #e0ddd1;
+$color7: #9A906B;
@@ -0,0 +1,338 @@
+@import 'css/colors';
+@import 'css/colorscheme';
+
+$battcolor: $color4;
+$memcolor: $color2;
+$cpucolor: $color5;
+$border: $color7;
+
+//thanks flick0!
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+//also thanks to him
+@keyframes blink {
+  to {
+    background-color: #f9e2af;
+    color: #96804e;
+  }
+}
+
+@keyframes ripple {
+  to {
+    background-size: 1000% 1000%;
+  }
+}
+
+@mixin rounding {
+  border-radius: 16px;
+}
+
+@mixin filter {
+  saturate {
+    filter: saturate(3);
+  }
+
+  grayscale {
+    filter: grayscale(100%);
+  }
+
+  contrast {
+    filter: contrast(160%);
+  }
+
+  brightness {
+    filter: brightness(0.25);
+  }
+
+  blur {
+    filter: blur(3px);
+  }
+
+  invert {
+    filter: invert(100%);
+  }
+
+  .sepia {
+    filter: sepia(100%);
+  }
+
+  huerotate {
+    filter: hue-rotate(180deg);
+  }
+
+  rss.opacity {
+    filter: opacity(50%);
+  }
+}
+
+@mixin window {
+  border: 3px solid $color7;
+  // box-shadow: 0 2px 3px $shadow;
+  margin: 5px 5px 10px;
+  @include rounding;
+}
+
+* {
+  all: unset;
+  transition: 200ms cubic-bezier(0.05, 0.9, 0.1, 1);
+  // font-family: 'Gabarito', 'Material Symbols Rounded';
+}
+
+.scale slider {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.progress slider {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.music-ctl-revealer {
+  font-family: Material Symbols Rounded;
+}
+
+.music-ctl-revealer:hover {
+  border-top: 2px solid;
+}
+
+@import 'css/bgdecor';
+@import 'css/calendar';
+@import 'css/music';
+@import 'css/notification';
+@import 'css/overview';
+@import 'css/osettings';
+@import 'css/sidebar';
+@import 'css/system';
+@import 'css/themer';
+@import 'css/volume';
+@import 'css/winctl';
+
+.barbg {
+  background-color: $colorbg;
+  // background-image: url("/home/end/.config/eww/images/topbar.png");
+  color: $colortext;
+  border-radius: 100px;
+
+  label {
+    font-size: 1.2rem;
+  }
+
+  font-family: 'Gabarito';
+}
+
+.bar {
+  background-color: transparent;
+  min-height: 32px;
+  // background-image: url("/home/end/.config/eww/images/topbar.png");
+  color: $fg;
+  border-radius: 100px;
+
+  label {
+    font-size: 1.2rem;
+  }
+
+  font-family: 'Gabarito';
+}
+
+tooltip {
+  background: $colorbg;
+  border: 1px solid $color7;
+  border-radius: 8px;
+
+  label {
+    font-family: Gabarito;
+    font-size: 13pt;
+  }
+}
+
+.music-module {
+  font-family: Material Symbols Rounded;
+}
+
+.icon {
+  font-family: Material Symbols Rounded;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.module {
+  font-family: Material Symbols Rounded;
+  min-height: 32px;
+}
+
+.module:hover {
+  border-top: 2px solid;
+}
+
+.hour {
+  // font-weight: bold;
+  margin-left: 15px;
+  color: $color5;
+}
+
+.clock {
+  color: $color5;
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+}
+
+// .clock-module:hover {
+//   border-top: 2px solid $color5;
+// }
+
+.minute {
+  color: $color5;
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+}
+
+.date {
+  font-family: 'Gabarito', 'Material Symbols Rounded';
+  background: $barbg;
+  color: $color5;
+  padding-left: 4px;
+
+  label {
+    font-size: 1.2rem;
+  }
+}
+
+.bright-icon {
+  color: $color3;
+  padding-right: 4px;
+  padding-top: 4px;
+}
+
+.bright-icon:hover {
+  border-top: 2px solid;
+}
+
+.module-bt {
+  font-size: 1.2rem;
+}
+
+.workspaces {
+  margin-left: 10px;
+}
+
+.notif-toggle {
+  padding: 0 5px;
+}
+
+.player-controls {
+  font-family: Material Symbols Rounded;
+}
+
+.volume-icon {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+.net-icon {
+  color: $color7;
+  font-family: Material Symbols Rounded;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+}
+
+.net-icon:hover {
+  border-top: 2px solid;
+}
+
+.my-separator {
+  padding-left: 15px;
+  padding-right: 15px;
+  color: $colortext;
+  min-height: 32px;
+}
+
+.ws {
+  font-size: 4rem;
+  padding: 3px;
+}
+
+.ws:hover {
+  color: $color5;
+}
+
+.ws-active {
+  color: $color1;
+}
+
+.ws-inactive {
+  color: $color6;
+}
+
+.ws-empty {
+  color: #313244;
+}
+
+.activewin {
+  color: $color3;
+  // padding-left: 8px;
+  // padding-right: 8px;
+}
+
+.themer-button {
+  // padding-top: 4px;
+  // padding-bottom: 4px;
+  // padding-left: 5px;
+  // padding-right: 5px;
+  min-height: 32px;
+  min-width: 32px;
+  color: $color6;
+  // background-color: $surface0;
+  border-radius: 7px;
+  font-family: Material Symbols Rounded;
+}
+
+.themer-button:hover {
+  background-color: $overlay0;
+}
+
+.themer-button:active {
+  background-color: $overlay0;
+}
+
+.themer-button:focus {
+  border: 2px solid $overlay0;
+}
+
+// .themer-get {
+//   padding-top: 4px;
+//   padding-left: 10px;
+//   padding-right: 10px;
+//   background-image: url("images/grayscale/Add.png");
+//   background-repeat: no-repeat;
+//   background-position: center;
+//   background-size: 100%;
+// }
+
+// .themer-restore {
+//   padding-top: 7px;
+//   padding-left: 10px;
+//   padding-right: 10px;
+//   padding-bottom: 16px;
+//   background-image: url("images/grayscale/Backup.png");
+//   background-repeat: no-repeat;
+//   background-position: center;
+//   background-size: 100%;
+// }
+
+
+.icon,
+.icon,
+.vol-icon label {
+  font-family: "Material Symbols Rounded"; //AAAAAAAAAGGGHHH
+}
+
@@ -0,0 +1,163 @@
+(include "./modules/activewindow.yuck")
+(include "./modules/audiolevels.yuck")
+(include "./modules/bluetooth.yuck")
+(include "./modules/bright.yuck")
+(include "./modules/clock.yuck")
+(include "./modules/music.yuck")
+(include "./modules/net.yuck")
+(include "./modules/sys.yuck")
+(include "./modules/variables.yuck")
+(include "./modules/volume.yuck")
+(include "./modules/winctl.yuck")
+(include "./modules/workspaces.yuck")
+
+(include "./windows/bg-decor.yuck")
+(include "./windows/calendar.yuck")
+(include "./windows/music.yuck")
+(include "./windows/notifications.yuck")
+(include "./windows/overview.yuck")
+(include "./windows/osettings.yuck")
+(include "./windows/system-menu.yuck")
+(include "./windows/win-workspace.yuck")
+(include "./windows/themer.yuck")
+(defvar popup "none")
+
+(defwidget themer []
+  (eventbox
+    (box
+      :style "padding-right: 5px;"
+      :valign "start"
+      :space-evenly false
+      :spacing 4
+      (button
+        :class "themer-button"
+        :onclick "eww open --toggle themer"
+        :style "font-family: 'Material Symbols Rounded';"
+        ''
+      )
+    )
+  )
+)
+
+(defwidget notif-toggle []
+  (button
+    :class "notif-toggle module"
+    :onclick "${EWW_CMD} open --toggle notifications";
+    {notif_icons.icon}
+  )
+)
+
+(defwidget separator []
+  (box
+    :valign "start"
+    (label
+      :class "my-separator"
+      :text "|"
+    )
+  )
+)
+
+
+; clipboard 󰅌 󰅍 󰄷
+
+(defwidget left []
+  (box
+    :space-evenly false
+    :valign "start"
+    :halign "start"
+    :class "bar"
+    (music-module)
+    (clock_module)
+    ; (activewindow)
+    ; (notif-toggle)
+  )
+)
+
+(defwidget right []
+  (box
+    :space-evenly false
+    :halign "end"
+    :valign "start"
+    :class "bar"
+    (themer)
+    (winctl)
+    (separator)
+    (volume-module)
+    (bright)
+    ; (bluetooth)
+    (net)
+    (separator)
+    
+    ; (syscpu)
+    ; (cpumenu)
+    ; (sysmem)
+    ; (memmenu)
+    ; (sysbatt)
+    (sys)
+  )
+)
+
+(defwidget center []
+  (box
+    :valign "start"
+    :space-evenly false
+    :halign "center"
+    :class "bar"
+    (workspaces)
+  )
+)
+
+(defwidget bar []
+  ; (box
+    ;   :space-evenly false
+    ;   :orientation "v"
+    (eventbox
+      :onhoverlost "${EWW_CMD} update popup='none'"
+      :onhover "${EWW_CMD} update popup='none'"
+      (centerbox
+        :class "bar"
+        (left)
+        (center)
+        (right)
+      )
+    )
+  ; )
+)
+
+(defwidget barbg []
+  (box
+    :class "barbg"
+  )
+)
+
+(defwindow bar
+  :wm-ignore true
+  :windowtype dock
+  :monitor 0
+  :geometry (geometry
+    :x "0%"
+    :y "0%"
+    :width "100%"
+    :height "32px"
+    :anchor "top center"
+  )
+  ; :stacking "fg"
+  :exclusive false
+  (bar)
+)
+
+(defwindow barbg
+  :wm-ignore true
+  :windowtype dock
+  :monitor 0
+  :geometry (geometry
+    :x "0%"
+    :y "0%"
+    :width "100%"
+    :height "32px"
+    :anchor "top center"
+  )
+  :stacking "bg"
+  :exclusive false
+  (barbg)
+)
--- a/Show More
+++ b/Show More