Tweak bar colors
This commit is contained in:
parent
dc8fec6ce8
commit
d9f0f4ad20
GPG key ID:
B684FD451B692E04
7 changed files with 36 additions and 33 deletions
|
|
@ -19,10 +19,9 @@ function Workspaces() {
|
|||
return Widget.Box({
|
||||
children: Array.from({ length: 10 }, (_, i) => {
|
||||
i += 1;
|
||||
return Widget.Box({
|
||||
return Widget.Label({
|
||||
class_name: "workspace-button",
|
||||
children: [Widget.Label({ hexpand: true, label: i.toString() })],
|
||||
hpack: "center",
|
||||
label: i.toString(),
|
||||
setup: (btn) => {
|
||||
btn.hook(
|
||||
sway,
|
||||
|
|
@ -131,10 +130,10 @@ const barContainer = Widget.Box({
|
|||
spacing: 6,
|
||||
vertical: true,
|
||||
children: [
|
||||
ProfilePicture(),
|
||||
// ProfilePicture(),
|
||||
Workspaces(),
|
||||
Widget.Box({ expand: true, vpack: "fill" }), // Separator
|
||||
CTest(),
|
||||
// CTest(),
|
||||
ProcessorUsage(),
|
||||
MemoryUsage(),
|
||||
graphics_card_usage,
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
@define-color bg rgba(26, 27, 38, 0.4);
|
||||
@define-color normal rgba(26, 27, 38, 0.6);
|
||||
@define-color hover rgba(76, 77, 88, 0.8);
|
||||
@define-color press rgba(76, 77, 88, 0.2);
|
||||
@define-color bg-noa rgb(26, 27, 38);
|
||||
@define-color bg-bar rgba(0, 0, 0, 0.1);
|
||||
@define-color bg rgba(0, 0, 0, 0.0);
|
||||
@define-color normal rgba(0, 0, 0, 0.6);
|
||||
@define-color hover rgba(0, 0, 0, 0.4);
|
||||
@define-color press rgba(0, 0, 0, 0.2);
|
||||
@define-color bg-noa rgb(0, 0, 0);
|
||||
|
||||
window {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background-color: @bg;
|
||||
background-color: @bg-bar;
|
||||
border-radius: 8px;
|
||||
padding: 4px 4px;
|
||||
padding: 8px 4px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +37,7 @@ window {
|
|||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 1.2em;
|
||||
padding: 4px 0;
|
||||
padding: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.clock-hours {
|
||||
|
|
@ -44,11 +45,11 @@ window {
|
|||
}
|
||||
|
||||
.clock-minutes {
|
||||
color: #ddd;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.clock-seconds {
|
||||
color: #bbb;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.music-indicator {
|
||||
|
|
@ -80,12 +81,10 @@ window {
|
|||
.workspace-button {
|
||||
background-color: @bg;
|
||||
border-radius: 8px;
|
||||
color: #c0caf5;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
color 0.3s,
|
||||
|
|
@ -93,12 +92,16 @@ window {
|
|||
}
|
||||
|
||||
.occupied {
|
||||
/*
|
||||
min-width: 24px;
|
||||
*/
|
||||
}
|
||||
|
||||
.active {
|
||||
color: @bg-noa;
|
||||
/*
|
||||
min-width: 32px;
|
||||
*/
|
||||
}
|
||||
|
||||
.active:nth-child(1) {
|
||||
|
|
@ -142,13 +145,13 @@ window {
|
|||
}
|
||||
|
||||
.launcher {
|
||||
background-color: @bg;
|
||||
background-color: @bg-bar;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.launcher-search {
|
||||
background-color: @normal;
|
||||
background-color: @bg-bar;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
|
|
@ -165,7 +168,7 @@ window {
|
|||
|
||||
.application {
|
||||
all: unset;
|
||||
background-color: @normal;
|
||||
background-color: transparent;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const extended_bar = Widget.Window({
|
|||
ProfileBlock(),
|
||||
workspaces,
|
||||
Widget.Box({ expand: true, vpack: "fill" }), // Separator
|
||||
currently_playing_controller,
|
||||
// currently_playing_controller,
|
||||
processor_usage,
|
||||
memory_usage,
|
||||
graphics_card_usage,
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const processor_usage = Widget.Box({
|
|||
let level = (usage * 100).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.4) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 6,
|
||||
|
|
@ -45,7 +45,7 @@ export const memory_usage = Widget.Box({
|
|||
let level = (usage * 100).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.4) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 6,
|
||||
|
|
@ -78,7 +78,7 @@ export const graphics_card_usage = Widget.Box({
|
|||
var level = Number(usage).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.4) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 6,
|
||||
|
|
@ -110,12 +110,12 @@ export const volume_widget = Widget.Box({
|
|||
if (level >= 0 && level <= 100) {
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.4) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
);`;
|
||||
} else if (level > 100 && level <= 200) {
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(226, 27, 38, 0.4) ${level - 100}%, rgba(26, 27, 38, 0.8) ${level - 100}%
|
||||
90deg, rgba(226, 27, 38, 0.4) ${level - 100}%, rgba(0, 0, 0, 0.4) ${level - 100}%
|
||||
);`;
|
||||
} else {
|
||||
return "background: rgba(226, 27, 38, 0.4)";
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export function ProcessorUsage() {
|
|||
let level = (usage * 100).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.2) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 2,
|
||||
|
|
@ -39,7 +39,7 @@ export function MemoryUsage() {
|
|||
let level = (usage * 100).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.2) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 2,
|
||||
|
|
@ -72,7 +72,7 @@ export const graphics_card_usage = Widget.Box({
|
|||
var level = Number(usage).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.2) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 2,
|
||||
|
|
@ -100,12 +100,12 @@ export const volume_widget = Widget.Box({
|
|||
if (level >= 0 && level <= 100) {
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
90deg, rgba(0, 0, 0, 0.2) ${level}%, rgba(0, 0, 0, 0) ${level}%
|
||||
);`;
|
||||
} else if (level > 100 && level <= 200) {
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(226, 27, 38, 0.4) ${level - 100}%, rgba(26, 27, 38, 0.8) ${level - 100}%
|
||||
90deg, rgba(226, 27, 38, 0.4) ${level - 100}%, rgba(0, 0, 0, 0.2) ${level - 100}%
|
||||
);`;
|
||||
} else {
|
||||
return "background: rgba(226, 27, 38, 0.4)";
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
lxqt.lxqt-policykit
|
||||
qdiskinfo
|
||||
mangohud
|
||||
heroic
|
||||
];
|
||||
};
|
||||
nixpkgs.config.allowUnfree = true;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
"ctrl+alt+9" = "goto_tab 9";
|
||||
};
|
||||
settings = {
|
||||
"background_opacity" = "0.85";
|
||||
"background_opacity" = "0.65";
|
||||
"dynamic_background_opacity" = true;
|
||||
"force_ltr" = "yes";
|
||||
"disable_ligatures" = "never";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue