swaync: Overhaul style

This replaces the default style sheet that gets overridden with a custom
one from scratch.

One thing that is still not ideal is that notifications with action
buttons have a scoll area for the action buttons, which shouldn’t be the
case.
This commit is contained in:
Simon Bruder 2022-12-21 19:06:41 +01:00
parent 40de497a6a
commit e89cc99a11
Signed by: simon
GPG key ID: 8D3C82F9F309F8EC
3 changed files with 144 additions and 119 deletions

View file

@ -0,0 +1,133 @@
window {
font-family: "monospace";
background: @base03;
color: @base0;
}
button {
padding: 4px;
border: 2px solid @base02;
}
scrollbar {
opacity: 0;
}
.notification-row {
outline: none;
}
.notification-row:focus,
.notification-row:hover {
background: @noti-bg-focus;
}
.notification {
background-color: @base03;
margin: 0px 8px;
padding: 0;
}
.notification:first-child {
margin-top: 12px;
}
.notification-content {
padding: 6px;
}
.close-button {
color: @base0;
padding: 0px;
border-radius: 100%;
margin-top: 16px;
margin-right: 16px;
border: none;
min-width: 24px;
min-height: 24px;
}
.close-button:hover {
background: @base02;
}
.notification-default-action,
.notification-action {
margin: 0;
border: 2px solid @base02;
}
.notification-default-action:hover,
.notification-action:hover {
-gtk-icon-effect: none;
}
.notification-action {
border-top: none;
border-right: none;
}
.notification-action:last-child {
border-right: 2px solid @base02;
}
.notification-default-action > button,
.notification-action > button {
margin: 4px;
}
.image {
}
.body-image {
margin-top: 6px;
background-color: white;
}
.summary {
font-size: 16px;
font-weight: bold;
}
.time {
font-weight: bold;
margin-right: 18px;
}
.control-center {
background: @base03;
color: @base0;
}
.control-center-list {
}
.floating-notifications {
background: transparent;
}
.blank-window {
background: transparent;
}
.widget-title {
margin: 8px;
font-size: 1.5rem;
}
.widget-title > button {
font-size: initial;
}
.widget-dnd {
margin: 8px;
font-size: 1.1rem;
}
.widget-dnd > switch {
font-size: initial;
border: 2px solid @base02;
color: transparent; /* hide default on and off state text */
}
.widget-dnd > switch:checked slider {
background-color: @green;
}
.widget-dnd > switch slider {
background: @base0;
}

View file

@ -8,9 +8,10 @@ in
Install.WantedBy = [ "sway-session.target" ]; Install.WantedBy = [ "sway-session.target" ];
Service = { Service = {
# FIXME: use new version (currently system style discovery fails) ExecStart = "${pkgs.swaynotificationcenter}/bin/swaync";
ExecStart = "${pkgs._2205.swaynotificationcenter}/bin/swaync";
Restart = "on-failure"; Restart = "on-failure";
# override default stylesheet and GTK theme
Environment = "XDG_CONFIG_DIRS=${pkgs.writeTextDir "swaync/style.css" ""} GTK_THEME=none";
}; };
}; };
@ -22,125 +23,16 @@ in
timeout-low = 5; timeout-low = 5;
timeout-critical = 0; timeout-critical = 0;
notification-window-width = 480; notification-window-width = 480;
fit-to-screen = false; fit-to-screen = true;
keyboard-shortcuts = true; keyboard-shortcuts = true;
image-visibility = "when-available"; image-visibility = "when-available";
transition-time = 0; transition-time = 0;
hide-on-clear = true; hide-on-clear = true;
hide-on-action = true; hide-on-action = true;
}; };
"swaync/style.css".text = lib.concatStrings (lib.attrsets.mapAttrsToList (k: v: "@define-color ${k} ${v};\n") solarized) + /* less */ '' "swaync/style.css".text = lib.concatStrings (lib.attrsets.mapAttrsToList (k: v: "@define-color ${k} ${v};\n") solarized) + builtins.readFile ./swaync.css;
.control-center {
background-color: @base03;
color: #839496;
}
/* if the font is only set for .control-center, notifications do not use it */
window {
font-family: "monospace";
}
.control-center-list {
background: transparent;
}
.control-center-clear-all {
color: @base0;
text-shadow: none;
background: @base03;
box-shadow: none;
border-radius: 0px;
border: 2px solid @base02;
}
.control-center-dnd {
border-radius: 0px;
border: none;
box-shadow: none;
background-color: @base02;
}
.control-center-dnd:checked {
background: @green;
}
.control-center-dnd slider {
background: @base0;
border-radius: 0px;
border: 2px solid @base02;
box-shadow: none;
}
.control-center-dnd slider:checked {
background: @green;
}
.floating-notifications {
background: transparent;
}
.notification-row {
outline: none;
}
.notification {
border-radius: 0px;
box-shadow: none;
margin: 3px 6px;
padding: 0;
}
.notification:first-child {
margin-top: 6px;
}
.low .summary {
color: @base00;
}
.critical .summary {
color: @red;
}
.notification-content {
padding: 6px;
border-radius: 0px;
}
/* hide close button (clicking on the notification does the same) */
.close-button {
opacity: 0;
}
.notification-default-action,
.notification-action {
padding: 4px;
margin: 0;
box-shadow: none;
background: @base03;
border: 2px solid @base02;
border-radius: 0px;
}
.notification-action {
color: @base0;
box-shadow: none;
text-shadow: none;
border-right: none;
border-top: none;
}
/* re-add right border to last action */
.notification-action:last-child {
border-right: 2px solid @base02;
}
.body-image {
margin-top: 6px;
background-color: @base0;
}
.summary,
.time,
.body,
.top-action-title {
color: @base0;
text-shadow: none;
}
'';
}; };
# dummy file to create empty theme
xdg.dataFile."themes/none/gtk-3.0/gtk.css".text = "";
} }

View file

@ -288,9 +288,9 @@ in
dnd-none = "${thinsp}"; dnd-none = "${thinsp}";
}; };
return-type = "json"; return-type = "json";
exec = "${pkgs._2205.swaynotificationcenter}/bin/swaync-client -swb"; exec = "${pkgs.swaynotificationcenter}/bin/swaync-client -swb";
on-click = "${pkgs._2205.swaynotificationcenter}/bin/swaync-client -t -sw"; on-click = "${pkgs.swaynotificationcenter}/bin/swaync-client -t -sw";
on-click-right = "${pkgs._2205.swaynotificationcenter}/bin/swaync-client -d -sw"; on-click-right = "${pkgs.swaynotificationcenter}/bin/swaync-client -d -sw";
escape = true; escape = true;
}; };
}; };