config/eww/bar/eww.scss

168 lines
3.3 KiB
SCSS

$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);
$clock: rgba(171, 233, 179, 1.0);
$media: rgba(224, 232, 224, 0.7);
$tray_background: rgba(204, 204, 204, 0.1);
$tray: #c9cbff;
$keyboard: #f2cdcd;
$language: #e8a2af;
$idle_inhibitor: #f28fad;
$audio: #fae3b0;
$backlight: #f8bd96;
$bluetooth: #caa9c7;
$network: #bd93f9;
$cpu: #96cdfb;
$memory: #88bbeb;
$temperature: #ddb6f2;
$temperature_critical: #ff6666;
$battery: #b6b2b3;
* { all: unset; }
.bar {
//background-color: transparent;
margin-left: 5px;
font-size: 15px;
font-family: monospace;
}
.icon {
font-size: 20px;
}
.launcher {
font-size: 40px;
margin: -7px -5px 15px -5px;
}
box .workspaces {
border-radius: 10px;
button {
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;
}
}
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%);
}
}
box .clock {
background-color: $widget_bg;
border-radius: 5;
color: $clock;
margin-bottom: 30px;
padding: 2pt 2pt 2pt 2pt;
}
.media {
font-family: "Noto Serif";
padding-left: 5px;
padding-right: 5px;
color: $media;
border: none;
}
.status {
font-family: monospace;
}
// Styles on classes (see eww.yuck for more information)
.status slider {
all: unset;
color: #ffd5cd;
}
.metric scale trough highlight {
all: unset;
background-color: #D35D6E;
color: #000000;
border-radius: 10px;
}
.metric scale trough {
all: unset;
background-color: #4e4e4e;
border-radius: 50px;
min-height: 3px;
min-width: 50px;
margin-left: 10px;
margin-right: 20px;
}
.metric scale trough highlight {
all: unset;
background-color: #D35D6E;
color: #000000;
border-radius: 10px;
}
.metric scale trough {
all: unset;
background-color: #4e4e4e;
border-radius: 50px;
min-height: 3px;
min-width: 50px;
margin-left: 10px;
margin-right: 20px;
}
.label-ram {
font-size: large;
}