Giter VIP home page Giter VIP logo

Comments (16)

RoccoRakete avatar RoccoRakete commented on May 31, 2024 2

+1 for the ability to reorder symbols and widgets! That would be really nice :)

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024 1

Right-side up icons are now implemented and can be controlled with the IconAlwaysUp config option. SensorTooltips needs to be enabled, as otherwise the bar breaks. Regarding the time, setting e.g. DateTimeStyle: %H\n%M results in a split time (The newline escaping was added in a211747).

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024

Rotating the icons + text and reordering the time widget requires quite a bit of refactoring, which I unfortunately don't have the time for (Earliest possible implementation would be in ~1 month).
Tooltips for the sensors should be possible though.

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024

Sensor tooltips are now implemented.

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024

Reordering widgets is now implemented. The three options WidgetsLeft, WidgetsCenter and WidgetsRight control the layout. If you find any margin/layout issues, please notify me.

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

Nice! There's still a few problems when using it as a sidebar:

image

  1. Icons still need to be rotated

image

  1. There should be an option to rotate the time text

image

  1. The padding for the workspace switcher is off

image

And slightly unrelated, how do you remove the shadow/blur in Hyprland?

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

Nice! There's still a couple problems though:

image

  1. A few items are off-aligned (eg headphone/bluetooth icons, power button icons, workspace switcher)
  2. Hovering over the power button causes it to go off-screeen instead of moving the sensors up
screenrecord.mp4

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024

A few items are off-aligned (eg headphone/bluetooth icons, power button icons, workspace switcher)

What font are you using? Which NF version? The default font (Cascadia Code NF v3.0.2) doesn't have these issues.

Hovering over the power button causes it to go off-screeen instead of moving the sensors up

Decreasing TimeSpace fix this (Or disabling CenterTime). The janky hover area should improve when the icons are fixed.

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

What font are you using? Which NF version? The default font (Cascadia Code NF v3.0.2) doesn't have these issues.

Atkinson Hyperlegible for non-icons (isn't a NerdFont) and CaskaydiaCove Nerd Font for the Nerd Font.

Decreasing TimeSpace fix this

Yep, that worked :)

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024

What modifications did you do to the css? If you replace the custom one with the default, does it work then?

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

It still happens with the default CSS.

image

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

For reference:

style.scss:

$bg: #1f1d2e;
$fg: #e0def4;
$overlay: #26233a;
$inactive: #524f67;
$darkblue: #908caa;
$cyan: #31748f;
$green: #9ccfd8;
$orange: #ebbcba;
$pink: #ebbcba;
$purple: #c4a7e7;
$red: #eb6f92;
$yellow: #f6c177;

$btblue: #31748f;

$textsize: 18px;

* {
  all: unset;
  font-family: "Atkinson Hyperlegible, CaskaydiaCove Nerd Font";
}

// debug
// .cpu-box {
//   background-color: $red;
// }

.popup {
  color: $green;
  background-color: $overlay;
}

.bar {
  margin: 20px 0 20px 20px;
  border: 2px solid $orange;
}

.bar,
tooltip {
  background-color: $bg;
  border-radius: 20px;
}

.right {
  border-radius: 20px;
}

.time-text {
  font-size: $textsize;
}

.reboot-button {
  font-size: 28px;

  color: $darkblue;
}
.sleep-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-util-progress {
  color: $purple;
  background-color: $inactive;
  font-size: $textsize;
}
.disk-data-text {
  color: $purple;
  font-size: $textsize;
}

.vram-util-progress {
  color: $orange;
  background-color: $inactive;
}
.vram-data-text {
  color: $orange;
  font-size: $textsize;
}

.ram-util-progress {
  color: $yellow;
  background-color: $inactive;
}
.ram-data-text {
  color: $yellow;
  font-size: $textsize;
}

.gpu-util-progress {
  color: $cyan;
  background-color: $inactive;
}
.gpu-data-text {
  color: $cyan;
  font-size: $textsize;
}

.cpu-util-progress {
  color: $green;
  background-color: $inactive;
  font-size: $textsize;
}
.cpu-data-text {
  color: $green;
  font-size: $textsize;
}

.battery-util-progress {
  color: $pink;
  background-color: $inactive;
  font-size: $textsize;
}

.battery-data-text {
  color: $pink;
  font-size: $textsize;
}

.battery-charging {
  color: $orange;
}

.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;
}

config:

# Example configuration.
# Everything after '#' is ignored
# Format of the variables:
#    [variable]: [value]
# Whitespaces are ignored in the following locations:
# - Before the variable
# - After the ':'
# - After the value

# The following three options control the ordering of the widgets.
# Reordering can cause slight margin inconsistencies,
# so it is recommend to only make minor adjustments to the default layout.
# Adding the same widget multiple times to the layout is *not* supported and will cause issues.

# Widgets to show on the left side
WidgetsLeft: [Workspaces]
# Widgets to center
WidgetsCenter: [Time]
# Widgets to display on the right side
WidgetsRight: [Tray, Packages, Audio, Bluetooth, Network, Disk, VRAM, GPU, RAM, CPU, Battery, Power]

# The CPU sensor to use
CPUThermalZone: /sys/devices/pci0000:00/0000:00:18.3/hwmon/hwmon2/temp1_input

# The command to execute on suspend
SuspendCommand: systemctl suspend

# The command to execute on lock
LockCommand: swaylock

# The command to execute on exit
ExitCommand: killall Hyprland

# The folder, where the battery sensors reside
BatteryFolder: /sys/class/power_supply/BAT1

# The partition to monitor with disk sensor
DiskPartition: /

# Overrides the icon of the nth (in this case the first) workspace.
# Please note the missing space between "," and the symbol. Adding a space here adds it to the bar too!
#WorkspaceSymbol: 1,

# The default symbol for the workspaces
DefaultWorkspaceSymbol: 

# Scroll through the workspaces of the current monitor instead of all workspaces
WorkspaceScrollOnMonitor: true


# When the location is set to side, this option forces everything (even text) to be right-side up.
# *Always* make sure to enable SensorTooltips when enabling this option. Failure to do so *will* cause graphical issues.
IconsAlwaysUp: true

# When true: Scroll up -> Next workspace instead of previous workspace. Analogous with scroll down
WorkspaceScrollInvert: false

# Number of workspaces to display. Displayed workspace IDs are 1-n (Default: 1-9)
NumWorkspaces: 10

# Use Hyprland IPC instead of the ext_workspace protocol for workspace polling.
# Hyprland IPC is *slightly* less performant (+0.1% one core), but way less bug prone,
# since the protocol is not as feature complete as Hyprland IPC.
# NOTE: Hyprland no longer supports ext-workspace-unstable-v1 as of commit bb09334.
# Hyprland IPC is thus *required* for workspace support under Hyprland >=v0.30.0!
UseHyprlandIPC: true

# The location of the bar
# Needs to be capitalized!!
# Values are: L (Left), R (Right), T (Top), B (bottom)
Location: L

# Forces the time to be centered.
# This can cause the right widget to clip outside, if there is not enough space on screen (e.g. when opening the text)
# Setting this to false will definitely fix this issue, but it won't look very good, since it will be off-center.
# So try to decrease "TimeSpace" first, before setting this configuration to false.
CenterTime: true

# How much space should be reserved for the time widget. Setting this too high can cause the right widget to clip outside.
# Therefore try to set it as low as possible if you experience clipping.
# Although keep in mind, that a value that is too low can cause the widget to be be off-center,
# which can also cause clipping.
# If you can't find an optimal value, consider setting 'CenterTime' to false
TimeSpace: 110

# Set datetime style
#%A %m/%e
DateTimeStyle: %I\n%M

# Set datetime locale (defaults to system locale if not set or set to empty string)
#DateTimeLocale: de_DE.utf8

# Adds a audio input(aka. microphone) widget
AudioInput: false

# Sets the audio slider to be on reveal (Just like the sensors) when true. Only affects the bar.
AudioRevealer: false

# Sets the rate of change of the slider on each scroll. In Percent
AudioScrollSpeed: 5

# Display numbers instead of a slider for the two audio widgets. Doesn't affect the audio flyin
AudioNumbers: false

# Command that is run to check if there are out-of-date packages.
# The script should return *ONLY* a number. If it doesn't output a number, updates are no longer checked.
# Default value is applicable for Arch Linux. (See data/update.sh for a human-readable version)
CheckPackagesCommand: p="$(checkupdates)"; e=$?; if [ $e -eq 127 ] ; then exit 127; fi; if [ $e -eq 2 ] ; then echo "0" && exit 0; fi; echo "$p" | wc -l


# How often to check for updates. In seconds
CheckUpdateInterval: 300

# Limits the range of the audio slider. Only works for audio output.
# Slider "empty" is AudioMinVolume, Slider "full" is AudioMaxVolume
# AudioMinVolume: 30 # Audio can't get below 30%
# AudioMaxVolume: 120 # Audio can't get above 120%

# The network adapter to use. You can query /sys/class/net for all possible values
NetworkAdapter: wlan0

# Disables the network widget when set to false
NetworkWidget: true

# Use tooltips instead of sliders for the sensors
SensorTooltips: true

# Enables tray icons
EnableSNI: true

# SNIIconSize sets the icon size for a SNI icon.
# SNIPaddingTop Can be used to push the Icon down. Negative values are allowed
# For both: The first parameter is a filter of the tooltip(The text that pops up, when the icon is hovered) of the icon

# Scale everything down to 25 pixels ('*' as filter means everything)
SNIIconSize: *, 24
# Explicitly make OBS a bit smaller than default
#SNIIconSize: OBS, 23
# Nudges the Discord icon a bit down
#SNIPaddingTop: Discord, 5

# These set the range for the network widget. The widget changes colors at six intervals:
#    - Below Min...Bytes ("under")
#    - Between ]0%;25%]. 0% = Min...Bytes; 100% = Max...Bytes ("low")
#    - Between ]25%;50%]. 0% = Min...Bytes; 100% = Max...Bytes ("mid-low")
#    - Between ]50%;75%]. 0% = Min...Bytes; 100% = Max...Bytes ("mid-high")
#    - Between ]75%;100%]. 0% = Min...Bytes; 100% = Max...Bytes ("high")
#    - Above Max...Bytes ("over")
MinDownloadBytes: 0
MaxDownloadBytes: 10485760 # 10 * 1024 * 1024 = 10 MiB
MinUploadBytes:   0
MaxUploadBytes:   5242880    # 5 * 1024 * 1024 = 5 MiB

from gbar.

scorpion-26 avatar scorpion-26 commented on May 31, 2024

Weird, I tried your config, and everything looks fine on my end (I even tried multiple different NF versions). Do you use the arch package? If not, maybe that could work? Otherwise I don't know what the problem could be. As a hack you could try to manually fix the margins/paddings/font-sizes to the css. This should always work, though is a bit tedious.

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

I'm using the Arch package already... I'll try the padding thing when I get home.

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

Also, how do I get Hyprland to not draw a blur behind the bar?

from gbar.

ThatOneCalculator avatar ThatOneCalculator commented on May 31, 2024

With this CSS (mostly adding margin-left: 7px; to the misaligned items), I was able to get almost everything centered except the damn headphone icon...

image

$bg: #1f1d2e;
$fg: #e0def4;
$overlay: #26233a;
$inactive: #524f67;
$darkblue: #908caa;
$cyan: #31748f;
$green: #9ccfd8;
$orange: #ebbcba;
$pink: #ebbcba;
$purple: #c4a7e7;
$red: #eb6f92;
$yellow: #f6c177;

$btblue: #31748f;

$textsize: 18px;

* {
  all: unset;
  font-family: "Atkinson Hyperlegible, CaskaydiaCove Nerd Font";
}

// debug
// .cpu-box {
//   background-color: $red;
// }

.popup {
  color: $green;
  background-color: $overlay;
}

.bar {
  margin: 20px 0 20px 20px;
  border: 2px solid $orange;
}

.bar,
tooltip {
  background-color: $bg;
  border-radius: 20px;
}

.time-text {
  font-size: $textsize;
  margin-left: 2px;
}

.reboot-button {
  font-size: 28px;
  color: $darkblue;
}
.sleep-button {
  font-size: 28px;
  color: $darkblue;
}
.exit-button {
  font-size: 28px;
  color: $darkblue;
}

.power-button {
  font-size: 28px;
  color: $red;
}

.power-box {
  margin-left: 7px;
}

.power-box-expand {
  margin-left: -5px;
}

.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;
  margin-left: 7px;
}
.bt-label-off {
  font-size: 24px;
  color: $btblue;
  margin-left: 7px;
}
.bt-label-connected {
  font-size: 28px;
  color: $btblue;
  margin-left: 7px;
}

.disk-util-progress {
  color: $purple;
  background-color: $inactive;
  font-size: $textsize;
}
.disk-data-text {
  color: $purple;
  font-size: $textsize;
}

.vram-util-progress {
  color: $orange;
  background-color: $inactive;
}
.vram-data-text {
  color: $orange;
  font-size: $textsize;
}

.ram-util-progress {
  color: $yellow;
  background-color: $inactive;
}
.ram-data-text {
  color: $yellow;
  font-size: $textsize;
}

.gpu-util-progress {
  color: $cyan;
  background-color: $inactive;
}
.gpu-data-text {
  color: $cyan;
  font-size: $textsize;
}

.cpu-util-progress {
  color: $green;
  background-color: $inactive;
  font-size: $textsize;
}
.cpu-data-text {
  color: $green;
  font-size: $textsize;
}

.battery-util-progress {
  color: $pink;
  background-color: $inactive;
  font-size: $textsize;
}

.battery-data-text {
  color: $pink;
  font-size: $textsize;
}

.battery-charging {
  color: $orange;
}

.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;
  margin-left: 7px;
}
.ws-inactive {
  color: $darkblue;
  font-size: $textsize;
  margin-left: 7px;
}
.ws-visible {
  color: $cyan;
  font-size: $textsize;
  margin-left: 7px;
}
.ws-current {
  color: $yellow;
  font-size: $textsize;
  margin-left: 7px;
}
.ws-active {
  color: $green;
  font-size: $textsize;
  margin-left: 7px;
}

// 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;
}

from gbar.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.