gBar/css/style.css

* {
  all: unset;
  font-family: "CaskaydiaCove NF";
}

.popup {
  color: #50fa7b;
}

.bar, tooltip {
  background-color: #282a36;
  border-radius: 16px;
}

.right {
  border-radius: 16px;
}

.time-text {
  font-size: 16px;
}

.title-text {
  font-size: 16px;
}

.reboot-button {
  font-size: 28px;
  color: #6272a4;
}

.sleep-button {
  font-size: 28px;
  color: #6272a4;
}

.lock-button {
  font-size: 28px;
  color: #6272a4;
}

.exit-button {
  font-size: 28px;
  color: #6272a4;
}

.power-button {
  font-size: 28px;
  color: #ff5555;
}

.system-confirm {
  color: #50fa7b;
}

trough {
  border-radius: 3px;
  border-width: 1px;
  border-style: none;
  background-color: #44475a;
  min-width: 4px;
  min-height: 4px;
}

slider {
  border-radius: 0%;
  border-width: 1px;
  border-style: none;
  margin: -9px -9px -9px -9px;
  min-width: 16px;
  min-height: 16px;
  background-color: transparent;
}

highlight {
  border-radius: 3px;
  border-width: 1px;
  border-style: none;
  min-width: 6px;
  min-height: 6px;
}

.audio-icon {
  font-size: 24px;
  color: #ffb86c;
}

.audio-volume {
  font-size: 16px;
  color: #ffb86c;
}
.audio-volume trough {
  background-color: #44475a;
}
.audio-volume slider {
  background-color: transparent;
}
.audio-volume highlight {
  background-color: #ffb86c;
}

.mic-icon {
  font-size: 24px;
  color: #bd93f9;
}

.mic-volume {
  font-size: 16px;
  color: #bd93f9;
}
.mic-volume trough {
  background-color: #44475a;
}
.mic-volume slider {
  background-color: transparent;
}
.mic-volume highlight {
  background-color: #bd93f9;
}

.package-outofdate {
  margin: -5px -5px -5px -5px;
  font-size: 24px;
  color: #ff5555;
}

.bt-num {
  font-size: 16px;
  color: #1793D1;
}

.bt-label-on {
  font-size: 20px;
  color: #1793D1;
}

.bt-label-off {
  font-size: 24px;
  color: #1793D1;
}

.bt-label-connected {
  font-size: 28px;
  color: #1793D1;
}

.disk-widget * {
  color: #bd93f9;
  font-size: 16px;
}

.disk-util-progress {
  background-color: #44475a;
}

.vram-widget * {
  color: #ffb86c;
  font-size: 16px;
}

.vram-util-progress {
  background-color: #44475a;
}

.ram-widget * {
  color: #f1fa8c;
  font-size: 16px;
}

.ram-util-progress {
  background-color: #44475a;
}

.gpu-widget * {
  color: #8be9fd;
  font-size: 16px;
}

.gpu-util-progress {
  background-color: #44475a;
}

.cpu-widget * {
  color: #50fa7b;
  font-size: 16px;
}

.cpu-util-progress {
  background-color: #44475a;
}

.battery-widget * {
  color: #ff79c6;
  font-size: 16px;
}

.battery-util-progress {
  background-color: #44475a;
}

.battery-charging {
  color: #ffb86c;
}

.battery-warning {
  color: #ff5555;
}

.network-data-text {
  color: #50fa7b;
  font-size: 16px;
}

.network-up-under {
  color: #44475a;
}

.network-up-low {
  color: #50fa7b;
}

.network-up-mid-low {
  color: #f1fa8c;
}

.network-up-mid-high {
  color: #ffb86c;
}

.network-up-high {
  color: #bd93f9;
}

.network-up-over {
  color: #ff5555;
}

.network-down-under {
  color: #44475a;
}

.network-down-low {
  color: #50fa7b;
}

.network-down-mid-low {
  color: #f1fa8c;
}

.network-down-mid-high {
  color: #ffb86c;
}

.network-down-high {
  color: #bd93f9;
}

.network-down-over {
  color: #ff5555;
}

.ws-dead {
  color: #44475a;
  font-size: 16px;
}

.ws-inactive {
  color: #6272a4;
  font-size: 16px;
}

.ws-visible {
  color: #8be9fd;
  font-size: 16px;
}

.ws-current {
  color: #f1fa8c;
  font-size: 16px;
}

.ws-active {
  color: #50fa7b;
  font-size: 16px;
}

@keyframes connectanim {
  from {
    background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, transparent 0%, transparent 100%);
  }
  to {
    background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, #1793D1 100%, transparent 100%);
  }
}
@keyframes disconnectanim {
  from {
    background-image: radial-gradient(circle farthest-side at center, transparent 0%, #1793D1 0%, #1793D1 100%);
  }
  to {
    background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, #1793D1 100%);
  }
}
@keyframes scanonanim {
  from {
    color: #f1fa8c;
  }
  to {
    color: #50fa7b;
  }
}
@keyframes scanoffanim {
  from {
    color: #50fa7b;
  }
  to {
    color: #f1fa8c;
  }
}
.bt-bg {
  background-color: #282a36;
  border-radius: 16px;
}

.bt-header-box {
  margin-top: 4px;
  margin-right: 8px;
  margin-left: 8px;
  font-size: 24px;
  color: #1793D1;
}

.bt-body-box {
  margin-right: 8px;
  margin-left: 8px;
}

.bt-button {
  border-radius: 16px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  margin-top: 4px;
  font-size: 16px;
}
.bt-button.active {
  animation-name: connectanim;
  animation-duration: 50ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.bt-button.inactive {
  animation-name: disconnectanim;
  animation-duration: 50ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.bt-button.failed {
  color: #ff5555;
}

.bt-close {
  color: #ff5555;
  background-color: #44475a;
  border-radius: 16px;
  padding: 0px 8px 0px 7px;
  margin: 0px 0px 0px 8px;
}

.bt-scan {
  color: #f1fa8c;
  background-color: #44475a;
  border-radius: 16px;
  padding: 2px 11px 0px 7px;
  margin: 0px 0px 0px 10px;
  font-size: 18px;
}
.bt-scan.active {
  animation-name: scanonanim;
  animation-duration: 50ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.bt-scan.inactive {
  animation-name: scanoffanim;
  animation-duration: 50ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}