Feature request: rotation and adjustments for usage as side bar

[ardashir77]

Basically what it says in the title. Rotating the system tray icons and the sensor widgets (maybe replacing the sliding text with horizontal popups) and having an option to re-style the DateTime widget in the same fashion as rxyhn's classic eww bar and reposition it between the volume widget and the sensors. Don't know if I'm asking for too much, though :*

[scorpion-26]

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.

[scorpion-26]

Sensor tooltips are now implemented.

[RoccoRakete]

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

[scorpion-26]

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.

[ThatOneCalculator]

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

1. Icons still need to be rotated

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

3. The padding for the workspace switcher is off

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

[scorpion-26]

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).

[ThatOneCalculator]

Nice! There's still a couple problems though:

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

https://github.com/scorpion-26/gBar/assets/44733677/a3f9be5f-41b7-4fa2-b02c-feb95ab3491b

[scorpion-26]

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.

[ThatOneCalculator]

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 :)

[scorpion-26]

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

[ThatOneCalculator]

It still happens with the default CSS.

[ThatOneCalculator]

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

[scorpion-26]

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.

[ThatOneCalculator]

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

[ThatOneCalculator]

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

[ThatOneCalculator]

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

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