79 lines
1.9 KiB
SCSS
79 lines
1.9 KiB
SCSS
@use 'sass:color';
|
|
@use '../../style/colors';
|
|
|
|
.bar {
|
|
margin-left: 5px;
|
|
margin-right: 15px;
|
|
margin-bottom: 13px;
|
|
|
|
.bar-item {
|
|
padding: 5px 10px 5px 10px;
|
|
border-radius: 7px;
|
|
background-color: color.adjust(colors.$window_bg_color, $lightness: -3%);
|
|
font-size: 20px;
|
|
min-height: 35px;
|
|
|
|
transition: background-color 300ms;
|
|
|
|
&:hover {
|
|
background-color: color.adjust(colors.$window_bg_color, $lightness: 3%);
|
|
}
|
|
|
|
&.bluetooth icon,
|
|
&.network icon,
|
|
&.tablet-mode icon {
|
|
min-width: 30px;
|
|
}
|
|
|
|
&.battery icon {
|
|
&.charging {
|
|
color: green;
|
|
}
|
|
|
|
&.low {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.workspaces {
|
|
.button {
|
|
margin: 0 2.5px;
|
|
min-height: 22px;
|
|
min-width: 22px;
|
|
border-radius: 100%;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.occupied {
|
|
border: 2px solid colors.$window_bg_color;
|
|
background: colors.$accent_color;
|
|
transition: background-color 0.3s ease-in-out;
|
|
}
|
|
|
|
.urgent {
|
|
border: 2px solid colors.$window_bg_color;
|
|
background: red;
|
|
transition: background-color 0.3s ease-in-out;
|
|
}
|
|
|
|
.active {
|
|
border: 2px solid #50fa7b;
|
|
transition: margin-left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
}
|
|
}
|
|
|
|
&.system-tray {
|
|
.tray-item {
|
|
all: unset;
|
|
font-size: 30px;
|
|
min-width: 36px;
|
|
border-radius: 100%;
|
|
transition: background-color 300ms;
|
|
|
|
&:hover {
|
|
background: colors.$window_bg_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|