Add some transparency back, fix waybar module settings

This commit is contained in:
Evie Litherland-Smith 2024-05-27 21:07:45 +01:00
parent 58ce683cb2
commit dff251d0f9
5 changed files with 74 additions and 70 deletions

View file

@ -21,6 +21,7 @@
cursor = {blink = true;}; cursor = {blink = true;};
mouse = {hide-when-typing = true;}; mouse = {hide-when-typing = true;};
colors = with config.scheme; rec { colors = with config.scheme; rec {
opacity = 0.9;
background = base00; background = base00;
foreground = base05; foreground = base05;
regular0 = base02; regular0 = base02;

View file

@ -27,7 +27,7 @@
layer = "overlay"; layer = "overlay";
}; };
colors = with config.scheme; { colors = with config.scheme; {
background = "${base00}FF"; background = "${base00}50"; # 80% Opacity
text = "${base05}FF"; text = "${base05}FF";
match = "${red}FF"; match = "${red}FF";
selection = "${base01}FF"; selection = "${base01}FF";

View file

@ -6,7 +6,9 @@
... ...
}: { }: {
home.packages = [pkgs.swaynotificationcenter]; home.packages = [pkgs.swaynotificationcenter];
xdg.configFile."swaync/style.css".text = with config.scheme; '' xdg.configFile."swaync/style.css".text = with config.scheme.withHashtag; let
alpha-background = "${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.8";
in ''
* { * {
all: unset; all: unset;
font-size: 1.2rem; font-size: 1.2rem;
@ -17,10 +19,10 @@
.floating-notifications.background .notification-row .notification-background { .floating-notifications.background .notification-row .notification-background {
border-radius: 10px; border-radius: 10px;
border: 1px solid ${withHashtag.${accentColour}}; border: 1px solid ${config.scheme.withHashtag.${accentColour}};
margin: 18px; margin: 18px;
background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 1.0); background-color: rgba(${alpha-background});
color: ${withHashtag.base05}; color: ${base05};
padding: 0; padding: 0;
} }
@ -46,7 +48,7 @@
.notification .notification
.notification-content .notification-content
.summary { .summary {
color: ${withHashtag.base05}; color: ${base05};
} }
.floating-notifications.background .floating-notifications.background
@ -55,7 +57,7 @@
.notification .notification
.notification-content .notification-content
.time { .time {
color: ${withHashtag.base04}; color: ${base04};
} }
.floating-notifications.background .floating-notifications.background
@ -64,7 +66,7 @@
.notification .notification
.notification-content .notification-content
.body { .body {
color: ${withHashtag.base05}; color: ${base05};
} }
.floating-notifications.background .floating-notifications.background
@ -84,8 +86,8 @@
> * > *
.notification-action { .notification-action {
border-radius: 10px; border-radius: 10px;
background-color: ${withHashtag.base01}; background-color: ${base01};
color: ${withHashtag.base05}; color: ${base05};
margin: 7px; margin: 7px;
} }
@ -96,8 +98,8 @@
> *:last-child > *:last-child
> * > *
.notification-action:hover { .notification-action:hover {
background-color: ${withHashtag.base01}; background-color: ${base01};
color: ${withHashtag.base05}; color: ${base05};
} }
.floating-notifications.background .floating-notifications.background
@ -107,8 +109,8 @@
> *:last-child > *:last-child
> * > *
.notification-action:active { .notification-action:active {
background-color: ${withHashtag.blue}; background-color: ${blue};
color: ${withHashtag.base00}; color: ${base00};
} }
.floating-notifications.background .floating-notifications.background
@ -118,61 +120,61 @@
margin: 7px; margin: 7px;
padding: 2px; padding: 2px;
border-radius: 10px; border-radius: 10px;
background-color: ${withHashtag.red}; background-color: ${red};
color: ${withHashtag.base00}; color: ${base00};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.close-button:hover { .close-button:hover {
background-color: ${withHashtag.red}; background-color: ${red};
color: ${withHashtag.base00}; color: ${base00};
} }
.floating-notifications.background .floating-notifications.background
.notification-row .notification-row
.notification-background .notification-background
.close-button:active { .close-button:active {
background-color: ${withHashtag.red}; background-color: ${red};
color: ${withHashtag.base00}; color: ${base00};
} }
.control-center { .control-center {
border-radius: 10px; border-radius: 10px;
border: 1px solid ${withHashtag.${accentColour}}; border: 1px solid ${config.scheme.withHashtag.${accentColour}};
margin: 18px; margin: 18px;
background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.9); background-color: rgba(${alpha-background});
color: ${withHashtag.base05}; color: ${base05};
padding: 14px; padding: 14px;
} }
.control-center .widget-title { .control-center .widget-title {
color: ${withHashtag.base05}; color: ${base05};
font-size: 1.3em; font-size: 1.3em;
} }
.control-center .widget-title button { .control-center .widget-title button {
border-radius: 7px; border-radius: 7px;
background-color: ${withHashtag.base01}; background-color: ${base01};
color: ${withHashtag.base05}; color: ${base05};
padding: 8px; padding: 8px;
} }
.control-center .widget-title button:hover { .control-center .widget-title button:hover {
background-color: ${withHashtag.base02}; background-color: ${base02};
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .widget-title button:active { .control-center .widget-title button:active {
background-color: ${withHashtag.base03}; background-color: ${base03};
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .notification-row .notification-background { .control-center .notification-row .notification-background {
border-radius: 10px; border-radius: 10px;
background-color: ${withHashtag.base01}; background-color: ${base01};
color: ${withHashtag.base05}; color: ${base05};
margin-top: 14px; margin-top: 14px;
} }
@ -195,7 +197,7 @@
.notification .notification
.notification-content .notification-content
.summary { .summary {
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .control-center
@ -204,7 +206,7 @@
.notification .notification
.notification-content .notification-content
.time { .time {
color: ${withHashtag.base04}; color: ${base04};
} }
.control-center .control-center
@ -213,7 +215,7 @@
.notification .notification
.notification-content .notification-content
.body { .body {
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .control-center
@ -233,8 +235,8 @@
> * > *
.notification-action { .notification-action {
border-radius: 7px; border-radius: 7px;
background-color: ${withHashtag.base00}; background-color: ${base00};
color: ${withHashtag.base05}; color: ${base05};
margin: 7px; margin: 7px;
} }
@ -245,8 +247,8 @@
> *:last-child > *:last-child
> * > *
.notification-action:hover { .notification-action:hover {
background-color: ${withHashtag.base01};; background-color: ${base01};;
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .control-center
@ -256,39 +258,39 @@
> *:last-child > *:last-child
> * > *
.notification-action:active { .notification-action:active {
background-color: ${withHashtag.blue}; background-color: ${blue};
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .notification-row .notification-background .close-button { .control-center .notification-row .notification-background .close-button {
margin: 7px; margin: 7px;
padding: 2px; padding: 2px;
border-radius: 6.3px; border-radius: 6.3px;
background-color: ${withHashtag.red}; background-color: ${red};
color: ${withHashtag.base00}; color: ${base00};
} }
.control-center .notification-row .notification-background .close-button:hover { .control-center .notification-row .notification-background .close-button:hover {
background-color: ${withHashtag.red}; background-color: ${red};
color: ${withHashtag.base00}; color: ${base00};
} }
.control-center .control-center
.notification-row .notification-row
.notification-background .notification-background
.close-button:active { .close-button:active {
background-color: ${withHashtag.red}; background-color: ${red};
color: ${withHashtag.base00}; color: ${base00};
} }
.control-center .notification-row .notification-background:hover { .control-center .notification-row .notification-background:hover {
background-color: ${withHashtag.base00}; background-color: ${base00};
color: ${withHashtag.base05}; color: ${base05};
} }
.control-center .notification-row .notification-background:active { .control-center .notification-row .notification-background:active {
background-color: ${withHashtag.blue}; background-color: ${blue};
color: ${withHashtag.base05}; color: ${base05};
} }
progressbar, progressbar,
@ -298,35 +300,35 @@
} }
.notification.critical progress { .notification.critical progress {
background-color: ${withHashtag.red}; background-color: ${red};
} }
.notification.low progress, .notification.low progress,
.notification.normal progress { .notification.normal progress {
background-color: ${withHashtag.blue}; background-color: ${blue};
} }
trough { trough {
background-color: ${withHashtag.base00}; background-color: ${base00};
} }
.control-center trough { .control-center trough {
background-color: ${withHashtag.base03}; background-color: ${base03};
} }
.control-center-dnd { .control-center-dnd {
margin-top: 5px; margin-top: 5px;
border-radius: 8px; border-radius: 8px;
background: ${withHashtag.base00}; background: ${base00};
border: 1px solid ${withHashtag.base03}; border: 1px solid ${base03};
} }
.control-center-dnd:checked { .control-center-dnd:checked {
background: ${withHashtag.base00}; background: ${base00};
} }
.control-center-dnd slider { .control-center-dnd slider {
background: ${withHashtag.base03}; background: ${base03};
border-radius: 8px; border-radius: 8px;
} }
@ -338,18 +340,18 @@
.widget-dnd > switch { .widget-dnd > switch {
font-size: initial; font-size: initial;
border-radius: 8px; border-radius: 8px;
background: ${withHashtag.base00}; background: ${base00};
border: 1px solid ${withHashtag.base03}; border: 1px solid ${base03};
} }
.widget-dnd > switch:checked { .widget-dnd > switch:checked {
background: ${withHashtag.base00}; background: ${base00};
} }
.widget-dnd > switch slider { .widget-dnd > switch slider {
background: ${withHashtag.base01}; background: ${base01};
border-radius: 8px; border-radius: 8px;
border: 1px solid ${withHashtag.${accentColour}}; border: 1px solid ${config.scheme.withHashtag.${accentColour}};
} }
''; '';

View file

@ -9,7 +9,7 @@
}: { }: {
systemd.user.targets.tray.Unit = { systemd.user.targets.tray.Unit = {
Description = "Home Manager System Tray"; Description = "Home Manager System Tray";
Requires = ["graphical-session-pre.target"]; Requires = ["graphical-session.target"];
}; };
programs.waybar = { programs.waybar = {
enable = true; enable = true;
@ -23,8 +23,8 @@
layer = "top"; layer = "top";
position = "top"; position = "top";
# Layout # Layout
"modules-left" = ["sway/window"]; "modules-left" = ["mpris"];
"modules-center" = ["mpris"]; "modules-center" = ["sway/workspaces"];
"modules-right" = [ "modules-right" = [
"custom/notification" "custom/notification"
"pulseaudio" "pulseaudio"
@ -255,6 +255,7 @@
}; };
style = with config.scheme.withHashtag; let style = with config.scheme.withHashtag; let
accent = config.scheme.withHashtag.${accentColour}; accent = config.scheme.withHashtag.${accentColour};
alpha = "0.8";
in '' in ''
* { * {
all: unset; all: unset;
@ -269,13 +270,13 @@
window > box { window > box {
color: ${base05}; color: ${base05};
background: ${base00}; background: alpha(${base00}, ${alpha});
padding: 0px; padding: 0px;
border: none; border: none;
} }
tooltip { tooltip {
background: ${base00}; background: alpha(${base00}, ${alpha});
border: none; border: none;
box-shadow: none; box-shadow: none;
} }

View file

@ -14,7 +14,7 @@
font = "${fonts.monospace.name}-${toString fonts.sizes.applications}"; font = "${fonts.monospace.name}-${toString fonts.sizes.applications}";
fixed-font-family = "${fonts.monospace.name}"; fixed-font-family = "${fonts.monospace.name}";
variable-font-family = "${fonts.sansSerif.name}"; variable-font-family = "${fonts.sansSerif.name}";
alpha = "100"; alpha = "90";
in '' in ''
(customize-set-variable 'shell-file-name "${shell}") (customize-set-variable 'shell-file-name "${shell}")
(add-to-list 'initial-frame-alist '(font . "${font}")) (add-to-list 'initial-frame-alist '(font . "${font}"))