@use "sass:color"; @use "colors.scss" as *; $radius: 10px; %item { all: unset; background: $bg; border-radius: $radius; padding: 4px; & + &, .item + & { margin-left: 4px; } label { margin: 0 8px; } } window.Bar { border: none; box-shadow: none; background-color: transparent; color: $fg; font-size: 1.1em; font-weight: bold; .Container { margin: 10px 10px 0; } .Workspaces { button { all: unset; &:hover label { background: $surface0; color: $accent; } &:active label { background: $surface0; color: $accent; } } label { transition: 200ms; padding: 0 6px; margin: 2px; border-radius: $radius; border: 1pt solid transparent; } .focused label { background: $accent; color: $bg; border-color: $accent; } } .Layout.en { color: $accent; } .SysTray button { all: unset; padding: 8px; border-radius: inherit; &:hover { background: $surface0; } } .Media { &.playing { border: 2pt solid $accent; } .Cover { min-height: 1.2em; min-width: 1.2em; border-radius: $radius; background-position: center; background-size: contain; } } .Battery label { padding-left: 0; margin-left: 0; } .Time { padding: 0 8px; } .AudioSlider icon { margin-left: 8px; } .Workspaces, .Layout, .Media, .SysTray, .AudioSlider, .Time { @extend %item; } }