config/eww/bar/eww.scss

246 lines
5.0 KiB
SCSS
Raw Normal View History

$window: #eeeeee;
$window_border: rgba(200, 200, 200, 0.7);
$workspace_inactive: rgba(100, 114, 125, 0.6);
$workspace_inactive_bg: transparent;
$workspace_active: rgba(180, 190, 200, 0.9);
$workspace_active_bg: transparent;
$workspace_focused: rgba(220, 230, 230, 0.9);
$workspace_focused_bg: rgba(100, 114, 125, 0.5);
$workspace_hover: #2E5DFF;
$widget_bg: rgba(40, 40, 40, 0.5);
$weather: rgba(180, 220, 235, 0.8);
$weather_end: rgba(171, 233, 179, 0.8);
2024-06-02 07:11:20 -07:00
$media-progress-bg: #333333;
$media: rgba(224, 232, 224, 0.7);
2024-06-02 07:11:20 -07:00
$media-paused: rgba(224, 200, 200, 0.7);
2024-06-02 14:57:12 -07:00
// Dims the desktop background so status icons can be seen against darker wallpapers
$status_bg: rgba(0, 0, 0, 0.3);
2024-06-03 00:03:45 -07:00
$tray-bg: rgba(204, 204, 204, 0.3);
$tray: #c9cbff;
$keyboard: #f2cdcd;
$idle_inhibitor: #f28fad;
2024-06-02 18:23:39 -07:00
$volume: #fae3b0;
$microphone: #e8a2af;
2024-06-02 14:57:12 -07:00
$network: #f8bd96;
$backlight: #bd93f9;
2024-06-03 00:03:45 -07:00
$cpu-bg: #333333;
$cpu: #96cdfb;
2024-06-03 00:03:45 -07:00
$memory-bg: #333333;
2024-06-02 14:57:12 -07:00
// previously bluetooth colour
$memory: #caa9c7;
//$memory: #88bbeb;
2024-06-02 23:51:55 -07:00
$temperature-bg: rgba(180, 180, 180, 0.5);
$temperature: #b6b2b3;
$temperature-critical: #ff6666;
$battery: #ddb6f2;
2024-06-03 00:03:45 -07:00
$clock: rgba(171, 233, 179, 1.0);
2024-06-02 14:57:12 -07:00
// Styles all scales
2024-06-02 23:51:55 -07:00
progressbar trough {
all: unset;
background-color: #333333;
border-radius: 5px;
min-height: 80px;
min-width: 2px;
//margin: .3rem 0 .3rem 0;
}
trough progress {
all: unset;
background-color: #00ff00;
border-radius: 5px;
min-width: 2px;
}
2024-06-02 14:57:12 -07:00
scale trough {
all: unset;
background-color: #333333;
border-radius: 5px;
min-height: 80px;
min-width: 2px;
//margin: .3rem 0 .3rem 0;
}
trough highlight {
all: unset;
background-color: #eeeeee;
border-radius: 5px;
}
trough slider {
2024-05-31 14:33:53 -07:00
background-color: transparent;
2024-06-02 14:57:12 -07:00
border-width: 0px;
border-radius: 10px;
}
2024-06-02 14:57:12 -07:00
.vbar {
2024-05-31 14:33:53 -07:00
background-color: transparent;
2024-06-03 00:03:45 -07:00
font-size: 20px;
2024-05-31 14:33:53 -07:00
font-family: monospace;
}
.icon {
font-size: 20px;
}
.launcher {
all: unset;
font-size: 40px;
2024-06-02 14:57:12 -07:00
margin: -2px -5px 5px 0px;
}
box .workspaces {
all: unset;
border-radius: 10px;
button {
all: unset;
font-size: 30px;
padding-left: 2px;
margin: -5px -5px -5px -5px;
border-radius: 2px;
}
button:hover {
color: $workspace_hover;
}
.focused {
color: $workspace_focused;
background-color: $workspace_focused_bg;
}
.active {
color: $workspace_active;
background-color: $workspace_active_bg;
}
.inactive {
color: $workspace_inactive;
background-color: $workspace_inactive_bg;
}
}
2024-06-02 14:57:12 -07:00
box .status {
background-color: $status_bg;
}
box .weather {
color: $weather;
margin-left: 2px;
//margin-right: -1px;
background-color: $widget_bg;
border-radius: 5;
.temperature {
color: mix($weather_end, $weather, 0%);
.feelsLike {
font-style: italic;
}
}
.uvIndex {
color: mix($weather_end, $weather, 20%);
}
.humidity {
color: mix($weather_end, $weather, 40%);
}
.precip {
color: mix($weather_end, $weather, 60%);
}
.wind {
color: mix($weather_end, $weather, 80%);
}
.cloud {
color: mix($weather_end, $weather, 100%);
}
}
2024-06-02 18:23:39 -07:00
.volume {
2024-06-02 07:11:20 -07:00
background-color: transparent;
2024-06-02 18:23:39 -07:00
color: $volume;
border-left: 2px solid $volume;
margin-bottom: 1px;
margin-top: 1px;
highlight {
background-color: $volume;
2024-06-02 14:57:12 -07:00
}
2024-06-02 18:23:39 -07:00
}
.microphone {
background-color: transparent;
color: $microphone;
border-left: 2px solid $microphone;
2024-06-02 14:57:12 -07:00
margin-bottom: 1px;
margin-top: 1px;
2024-06-02 18:23:39 -07:00
highlight {
background-color: $microphone;
}
}
.media {
font-family: "Noto Serif";
min-height: 15px;
min-width: 15px;
2024-06-03 00:03:45 -07:00
font-size: 15px;
color: $media;
border: none;
2024-06-02 14:57:12 -07:00
.media-text-playing {
padding-left: 10px;
}
.media-text-paused {
padding-left: 10px;
color: $media-paused;
}
.media-playing {
background-color: $media-progress-bg;
color: $media;
}
.media-paused {
background-color: $media-progress-bg;
color: $media-paused;
}
}
2024-06-02 23:51:55 -07:00
box .temperature {
color: $temperature;
border-left: 2px solid $temperature-bg;
margin-bottom: 1px;
margin-top: 1px;
}
.temperature-progress-cpu trough progress {
background-color: mix($cpu, $temperature, 50%);
}
2024-06-03 00:03:45 -07:00
.temperature-progress-gpu trough progress {
background-color: $temperature;
}
2024-06-02 23:51:55 -07:00
.temperature-progress-critical trough progress {
background-color: $temperature-critical;
}
2024-06-02 14:57:12 -07:00
box .cpu {
.progress {
2024-06-03 00:03:45 -07:00
background-color: $cpu-bg;
2024-06-02 14:57:12 -07:00
}
color: $cpu;
border-left: 2px solid $cpu;
margin-bottom: 1px;
margin-top: 1px;
}
2024-06-02 14:57:12 -07:00
box .memory {
.progress {
2024-06-03 00:03:45 -07:00
background-color: $memory-bg;
2024-06-02 14:57:12 -07:00
}
color: $memory;
border-left: 2px solid $memory;
margin-bottom: 1px;
margin-top: 1px;
}
2024-06-02 14:57:12 -07:00
box .clock {
background-color: transparent;
color: $clock;
margin-top: 1px;
border-left: 2px solid $clock;
}
2024-06-02 14:57:12 -07:00
.systray {
//background-color: $tray_bg;
color: $tray;
border-left: 2px dotted $tray;
2024-06-03 00:03:45 -07:00
border-bottom: 2px dotted $tray-bg;
}