gBar/css/style.scss
scorpion-26 bc0281ca53 Rewrite large parts of SNI
This is the fix for https://github.com/scorpion-26/gBar/issues/79, but
blown out of proportions, because various things kept breaking

- Original fix: Add/Remove items instead of cleaning everything
  everytime something changes. If the dbus-menu was open, it was
  referencing the old widget causing issues. The new method keeps the
  original GtkDrawingArea and only replace the buffer/tooltip
- Create dbus-menu on widget creation instead of on click. This was
  actually the fix for
  https://github.com/scorpion-26/gBar/pull/12#issuecomment-1529143790.
  The css has also been updated, making the popup finally look good.
- With the new item refreshing theme KeePassXC kept deadlocking when the
  properties changed. To fix it, the dbus properties are now queried
  asynchronously via 'GetAll'
2024-03-18 02:26:09 +01:00

430 lines
6.9 KiB
SCSS

// colorscheme(dracula)
// See https://github.com/dracula/dracula-theme/blob/master/LICENSE or dracula/LICENSE for the license
$bg: #282a36;
$fg: #f8f8f2;
$inactive: #44475a;
$darkblue: #6272a4;
$cyan: #8be9fd;
$green: #50fa7b;
$orange: #ffb86c;
$pink: #ff79c6;
$purple: #bd93f9;
$red: #ff5555;
$yellow: #f1fa8c;
$btblue: #1793D1;
$textsize: 16px;
*{
all: unset;
font-family: "CaskaydiaCove NF";
}
.popup {
background-color: $bg;
color: #50fa7b;
border-radius: 16px;
}
menu {
padding: 8px 8px 8px 8px;
}
// debug
.cpu-box{
//background-color: #00cc00
}
.bar,tooltip{
background-color: $bg;
border-radius: 16px;
}
.right {
border-radius: 16px;
}
.time-text {
font-size: $textsize;
}
.title-text {
font-size: $textsize;
}
.reboot-button {
font-size: 28px;
color: $darkblue;
}
.sleep-button {
font-size: 28px;
color: $darkblue;
}
.lock-button {
font-size: 28px;
color: $darkblue;
}
.exit-button {
font-size: 28px;
color: $darkblue;
}
.power-button {
font-size: 28px;
color: $red;
}
.power-box {
}
.power-box-expand {
}
.system-confirm {
color: $green;
}
// Common slider settings
trough {
border-radius: 3px;
border-width: 1px;
border-style: none;
background-color: $inactive;
// margin-top: 2px;
min-width: 4px;
min-height: 4px;
}
slider {
// Controls the size of the control area (set border-style to solid to see)
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;
// For vertical we need width, for horizontal we need height
// Both can coexist though
min-width: 6px;
min-height: 6px;
}
.audio-icon {
font-size: 24px;
color: $orange;
}
.audio-volume {
trough {
background-color: $inactive;
}
slider {
background-color: transparent;
}
highlight {
background-color: $orange;
}
font-size: 16px;
color: $orange;
}
.mic-icon {
font-size: 24px;
color: $purple;
// margin-right: 0px;
}
.mic-volume {
trough {
background-color: $inactive;
}
slider {
background-color: transparent;
}
highlight {
background-color: $purple;
}
font-size: 16px;
color: $purple;
}
.package-outofdate {
margin: -5px -5px -5px -5px;
font-size: 24px;
color: $red;
}
.bt-num {
font-size: $textsize;
color: $btblue;
}
.bt-label-on {
font-size: 20px;
color: $btblue;
}
.bt-label-off {
font-size: 24px;
color: $btblue;
}
.bt-label-connected {
font-size: 28px;
color: $btblue;
}
.disk-widget * {
color: $purple;
font-size: $textsize;
}
.disk-util-progress {
background-color: $inactive;
}
.vram-widget * {
color: $orange;
font-size: $textsize;
}
.vram-util-progress {
background-color: $inactive;
}
.ram-widget * {
color: $yellow;
font-size: $textsize;
}
.ram-util-progress {
background-color: $inactive;
}
.gpu-widget * {
color: $cyan;
font-size: $textsize;
}
.gpu-util-progress {
background-color: $inactive;
}
.cpu-widget * {
color: $green;
font-size: $textsize;
}
.cpu-util-progress {
background-color: $inactive;
}
.battery-widget * {
color: $pink;
font-size: $textsize;
}
.battery-util-progress {
background-color: $inactive;
}
.battery-charging {
color: $orange;
}
.battery-warning {
color: $red;
}
.network-data-text {
color: $green;
font-size: $textsize;
}
// <= 0% (Below MinUploadBytes)
.network-up-under {
color: $inactive;
}
// <= 25%
.network-up-low {
color: $green;
}
// <= 50%
.network-up-mid-low {
color: $yellow;
}
// <= 75%
.network-up-mid-high {
color: $orange;
}
// <= 100%
.network-up-high {
color: $purple;
}
// > 100% (Above MaxUploadBytes)
.network-up-over {
color: $red;
}
// <= 0% (Below MinDownloadBytes)
.network-down-under {
color: $inactive;
}
// <= 25%
.network-down-low {
color: $green;
}
// <= 50%
.network-down-mid-low {
color: $yellow;
}
// <= 75%
.network-down-mid-high {
color: $orange;
}
// <= 100%
.network-down-high {
color: $purple;
}
// > 100% (Above MaxDownloadBytes)
.network-down-over {
color: $red;
}
.ws-dead {
color: $inactive;
font-size: $textsize;
}
.ws-inactive {
color: $darkblue;
font-size: $textsize;
}
.ws-visible {
color: $cyan;
font-size: $textsize;
}
.ws-current {
color: $yellow;
font-size: $textsize;
}
.ws-active {
color: $green;
font-size: $textsize;
}
// Bluetooth Widget
@keyframes connectanim {
from {
background-image: radial-gradient(circle farthest-side at center, $btblue 0%, transparent 0%, transparent 100%)
}
to {
background-image: radial-gradient(circle farthest-side at center, $btblue 0%, $btblue 100%, transparent 100%)
}
}
@keyframes disconnectanim {
from {
background-image: radial-gradient(circle farthest-side at center, transparent 0%, $btblue 0%, $btblue 100%)
}
to {
background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, $btblue 100%)
}
}
@keyframes scanonanim {
from {
color: $yellow;
}
to {
color: $green;
}
}
@keyframes scanoffanim {
from {
color: $green;
}
to {
color: $yellow;
}
}
.bt-bg {
background-color: $bg;
border-radius: 16px;
}
.bt-header-box {
margin-top: 4px;
margin-right: 8px;
margin-left: 8px;
font-size: 24px;
color: $btblue;
}
.bt-body-box {
margin-right: 8px;
margin-left: 8px;
}
.bt-button {
&.active {
animation-name: connectanim;
animation-duration: 50ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
&.inactive {
animation-name: disconnectanim;
animation-duration: 50ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
&.failed {
color: $red;
}
border-radius: 16px;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 4px;
margin-top: 4px;
font-size: 16px;
// color: $green;
}
.bt-close {
color: $red;
background-color: $inactive;
border-radius: 16px;
padding: 0px 8px 0px 7px;
margin: 0px 0px 0px 8px;
}
.bt-scan {
&.active {
animation-name: scanonanim;
animation-duration: 50ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
&.inactive {
animation-name: scanoffanim;
animation-duration: 50ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
color: $yellow;
background-color: $inactive;
border-radius: 16px;
padding: 2px 11px 0px 7px;
margin: 0px 0px 0px 10px;
font-size: 18px;
}