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;};
mouse = {hide-when-typing = true;};
colors = with config.scheme; rec {
opacity = 0.9;
background = base00;
foreground = base05;
regular0 = base02;

View file

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

View file

@ -6,7 +6,9 @@
...
}: {
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;
font-size: 1.2rem;
@ -17,10 +19,10 @@
.floating-notifications.background .notification-row .notification-background {
border-radius: 10px;
border: 1px solid ${withHashtag.${accentColour}};
border: 1px solid ${config.scheme.withHashtag.${accentColour}};
margin: 18px;
background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 1.0);
color: ${withHashtag.base05};
background-color: rgba(${alpha-background});
color: ${base05};
padding: 0;
}
@ -46,7 +48,7 @@
.notification
.notification-content
.summary {
color: ${withHashtag.base05};
color: ${base05};
}
.floating-notifications.background
@ -55,7 +57,7 @@
.notification
.notification-content
.time {
color: ${withHashtag.base04};
color: ${base04};
}
.floating-notifications.background
@ -64,7 +66,7 @@
.notification
.notification-content
.body {
color: ${withHashtag.base05};
color: ${base05};
}
.floating-notifications.background
@ -84,8 +86,8 @@
> *
.notification-action {
border-radius: 10px;
background-color: ${withHashtag.base01};
color: ${withHashtag.base05};
background-color: ${base01};
color: ${base05};
margin: 7px;
}
@ -96,8 +98,8 @@
> *:last-child
> *
.notification-action:hover {
background-color: ${withHashtag.base01};
color: ${withHashtag.base05};
background-color: ${base01};
color: ${base05};
}
.floating-notifications.background
@ -107,8 +109,8 @@
> *:last-child
> *
.notification-action:active {
background-color: ${withHashtag.blue};
color: ${withHashtag.base00};
background-color: ${blue};
color: ${base00};
}
.floating-notifications.background
@ -118,61 +120,61 @@
margin: 7px;
padding: 2px;
border-radius: 10px;
background-color: ${withHashtag.red};
color: ${withHashtag.base00};
background-color: ${red};
color: ${base00};
}
.floating-notifications.background
.notification-row
.notification-background
.close-button:hover {
background-color: ${withHashtag.red};
color: ${withHashtag.base00};
background-color: ${red};
color: ${base00};
}
.floating-notifications.background
.notification-row
.notification-background
.close-button:active {
background-color: ${withHashtag.red};
color: ${withHashtag.base00};
background-color: ${red};
color: ${base00};
}
.control-center {
border-radius: 10px;
border: 1px solid ${withHashtag.${accentColour}};
border: 1px solid ${config.scheme.withHashtag.${accentColour}};
margin: 18px;
background-color: rgba(${base00-rgb-r}, ${base00-rgb-g}, ${base00-rgb-b}, 0.9);
color: ${withHashtag.base05};
background-color: rgba(${alpha-background});
color: ${base05};
padding: 14px;
}
.control-center .widget-title {
color: ${withHashtag.base05};
color: ${base05};
font-size: 1.3em;
}
.control-center .widget-title button {
border-radius: 7px;
background-color: ${withHashtag.base01};
color: ${withHashtag.base05};
background-color: ${base01};
color: ${base05};
padding: 8px;
}
.control-center .widget-title button:hover {
background-color: ${withHashtag.base02};
color: ${withHashtag.base05};
background-color: ${base02};
color: ${base05};
}
.control-center .widget-title button:active {
background-color: ${withHashtag.base03};
color: ${withHashtag.base05};
background-color: ${base03};
color: ${base05};
}
.control-center .notification-row .notification-background {
border-radius: 10px;
background-color: ${withHashtag.base01};
color: ${withHashtag.base05};
background-color: ${base01};
color: ${base05};
margin-top: 14px;
}
@ -195,7 +197,7 @@
.notification
.notification-content
.summary {
color: ${withHashtag.base05};
color: ${base05};
}
.control-center
@ -204,7 +206,7 @@
.notification
.notification-content
.time {
color: ${withHashtag.base04};
color: ${base04};
}
.control-center
@ -213,7 +215,7 @@
.notification
.notification-content
.body {
color: ${withHashtag.base05};
color: ${base05};
}
.control-center
@ -233,8 +235,8 @@
> *
.notification-action {
border-radius: 7px;
background-color: ${withHashtag.base00};
color: ${withHashtag.base05};
background-color: ${base00};
color: ${base05};
margin: 7px;
}
@ -245,8 +247,8 @@
> *:last-child
> *
.notification-action:hover {
background-color: ${withHashtag.base01};;
color: ${withHashtag.base05};
background-color: ${base01};;
color: ${base05};
}
.control-center
@ -256,39 +258,39 @@
> *:last-child
> *
.notification-action:active {
background-color: ${withHashtag.blue};
color: ${withHashtag.base05};
background-color: ${blue};
color: ${base05};
}
.control-center .notification-row .notification-background .close-button {
margin: 7px;
padding: 2px;
border-radius: 6.3px;
background-color: ${withHashtag.red};
color: ${withHashtag.base00};
background-color: ${red};
color: ${base00};
}
.control-center .notification-row .notification-background .close-button:hover {
background-color: ${withHashtag.red};
color: ${withHashtag.base00};
background-color: ${red};
color: ${base00};
}
.control-center
.notification-row
.notification-background
.close-button:active {
background-color: ${withHashtag.red};
color: ${withHashtag.base00};
background-color: ${red};
color: ${base00};
}
.control-center .notification-row .notification-background:hover {
background-color: ${withHashtag.base00};
color: ${withHashtag.base05};
background-color: ${base00};
color: ${base05};
}
.control-center .notification-row .notification-background:active {
background-color: ${withHashtag.blue};
color: ${withHashtag.base05};
background-color: ${blue};
color: ${base05};
}
progressbar,
@ -298,35 +300,35 @@
}
.notification.critical progress {
background-color: ${withHashtag.red};
background-color: ${red};
}
.notification.low progress,
.notification.normal progress {
background-color: ${withHashtag.blue};
background-color: ${blue};
}
trough {
background-color: ${withHashtag.base00};
background-color: ${base00};
}
.control-center trough {
background-color: ${withHashtag.base03};
background-color: ${base03};
}
.control-center-dnd {
margin-top: 5px;
border-radius: 8px;
background: ${withHashtag.base00};
border: 1px solid ${withHashtag.base03};
background: ${base00};
border: 1px solid ${base03};
}
.control-center-dnd:checked {
background: ${withHashtag.base00};
background: ${base00};
}
.control-center-dnd slider {
background: ${withHashtag.base03};
background: ${base03};
border-radius: 8px;
}
@ -338,18 +340,18 @@
.widget-dnd > switch {
font-size: initial;
border-radius: 8px;
background: ${withHashtag.base00};
border: 1px solid ${withHashtag.base03};
background: ${base00};
border: 1px solid ${base03};
}
.widget-dnd > switch:checked {
background: ${withHashtag.base00};
background: ${base00};
}
.widget-dnd > switch slider {
background: ${withHashtag.base01};
background: ${base01};
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 = {
Description = "Home Manager System Tray";
Requires = ["graphical-session-pre.target"];
Requires = ["graphical-session.target"];
};
programs.waybar = {
enable = true;
@ -23,8 +23,8 @@
layer = "top";
position = "top";
# Layout
"modules-left" = ["sway/window"];
"modules-center" = ["mpris"];
"modules-left" = ["mpris"];
"modules-center" = ["sway/workspaces"];
"modules-right" = [
"custom/notification"
"pulseaudio"
@ -255,6 +255,7 @@
};
style = with config.scheme.withHashtag; let
accent = config.scheme.withHashtag.${accentColour};
alpha = "0.8";
in ''
* {
all: unset;
@ -269,13 +270,13 @@
window > box {
color: ${base05};
background: ${base00};
background: alpha(${base00}, ${alpha});
padding: 0px;
border: none;
}
tooltip {
background: ${base00};
background: alpha(${base00}, ${alpha});
border: none;
box-shadow: none;
}

View file

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