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:
parent
40de497a6a
commit
e89cc99a11
GPG key ID:
8D3C82F9F309F8EC
133
users/simon/modules/sway/swaync.css
Normal file
133
users/simon/modules/sway/swaync.css
Normal 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;
|
||||
}
|
||||
|
|
@ -8,9 +8,10 @@ in
|
|||
Install.WantedBy = [ "sway-session.target" ];
|
||||
|
||||
Service = {
|
||||
# FIXME: use new version (currently system style discovery fails)
|
||||
ExecStart = "${pkgs._2205.swaynotificationcenter}/bin/swaync";
|
||||
ExecStart = "${pkgs.swaynotificationcenter}/bin/swaync";
|
||||
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-critical = 0;
|
||||
notification-window-width = 480;
|
||||
fit-to-screen = false;
|
||||
fit-to-screen = true;
|
||||
keyboard-shortcuts = true;
|
||||
image-visibility = "when-available";
|
||||
transition-time = 0;
|
||||
hide-on-clear = true;
|
||||
hide-on-action = true;
|
||||
};
|
||||
"swaync/style.css".text = lib.concatStrings (lib.attrsets.mapAttrsToList (k: v: "@define-color ${k} ${v};\n") solarized) + /* less */ ''
|
||||
.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;
|
||||
}
|
||||
'';
|
||||
"swaync/style.css".text = lib.concatStrings (lib.attrsets.mapAttrsToList (k: v: "@define-color ${k} ${v};\n") solarized) + builtins.readFile ./swaync.css;
|
||||
};
|
||||
|
||||
# dummy file to create empty theme
|
||||
xdg.dataFile."themes/none/gtk-3.0/gtk.css".text = "";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -288,9 +288,9 @@ in
|
|||
dnd-none = "${thinsp}";
|
||||
};
|
||||
return-type = "json";
|
||||
exec = "${pkgs._2205.swaynotificationcenter}/bin/swaync-client -swb";
|
||||
on-click = "${pkgs._2205.swaynotificationcenter}/bin/swaync-client -t -sw";
|
||||
on-click-right = "${pkgs._2205.swaynotificationcenter}/bin/swaync-client -d -sw";
|
||||
exec = "${pkgs.swaynotificationcenter}/bin/swaync-client -swb";
|
||||
on-click = "${pkgs.swaynotificationcenter}/bin/swaync-client -t -sw";
|
||||
on-click-right = "${pkgs.swaynotificationcenter}/bin/swaync-client -d -sw";
|
||||
escape = true;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue