usecases/sway: move from mako to swaync for notifications

And adapt waybar for it

1 files changed, 257 insertions, 0 deletions

diff --git a/usecases/desktop/graphical/swaync.css b/usecases/desktop/graphical/swaync.css
new file mode 100644
index 0000000..d3e103a
--- /dev/null
+++ b/usecases/desktop/graphical/swaync.css
@@ -0,0 +1,257 @@
+/* Adapted from: https://pastebin.com/xycT4nrk */
+
+@define-color cc-bg @softBackground@;
+@define-color noti-border-color @cc-bg;
+@define-color noti-bg @background2@;
+@define-color noti-bg-darker @background2@;
+@define-color noti-bg-hover rgb(27, 27, 43);
+@define-color noti-bg-focus rgba(27, 27, 27, 0.6);
+@define-color text-color @foreground@;
+@define-color text-color-disabled @foreground3@;
+@define-color dominant @dominant@;
+@define-color dimDominant @dimDominant@;
+@define-color bg-selected @dominant;
+@define-color border-color @background5@;
+@define-color darker-bg @background1@;
+
+* {
+    font-family: mono;
+    font-weight: bold;
+        font-size: 14px;
+    outline: none;
+    transition: all .1s ease-in-out;
+}
+
+/* Buttons */
+
+.close-button,
+.notification-action,
+.widget-buttons-grid>flowbox>flowboxchild>button,
+.widget-menubar button,
+.widget-title>button {
+    color: @text-color;
+    background-color: @cc-bg;
+    border: 1px solid @darker-bg;
+    border-radius: 5px;
+    box-shadow: none;
+    text-shadow: none;
+}
+
+.close-button:hover,
+.notification-action:hover,
+.widget-buttons-grid>flowbox>flowboxchild>button:hover,
+.widget-menubar button:hover,
+.widget-title>button:hover {
+    background-color: @dominant;
+    box-shadow: none;
+    text-shadow: none;
+}
+
+.control-center .notification-row:focus,
+.control-center .notification-row:hover {
+    opacity: 1;
+    background: @noti-bg-darker
+}
+
+.notification-row {
+    outline: none;
+    margin: 5px;
+    padding: 0;
+}
+
+.notification {
+    background: @noti-bg;
+    margin: 0px;
+    border-radius: 5px;
+    border: 2px solid @border-color;
+    box-shadow: none;
+}
+
+.floating-notifications .notification {
+    border-color: @dominant;
+}
+
+.close-button {
+    border: none;
+    background: @dimDominant;
+    color: @cc-bg;
+    padding: 0;
+    margin: 5px 3px;
+}
+
+.close-button:hover {
+    box-shadow: none;
+    text-shadow: none;
+}
+
+.notification-content {
+    background: @cc-bg;
+    border-radius: 5px 5px 0 0;
+    padding: 7px;
+    margin: 0;
+}
+
+.notification-default-action:last-child .notification-content {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.notification-content .summary {
+        padding: 3px 1em;
+    font-size: 13px;
+    /*color: @text-color;*/
+}
+
+.notification-content .body {
+    padding: 1em;
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.notification-content .time {
+    font-size: 11px;
+    color: @dominant;
+    margin: 3px 3em;
+}
+
+.notification-action {
+    background-color: @noti-bg-darker;
+    border-radius: 0;
+    border: none;
+    border-top: 2px solid @border-color;
+    border-left: 1px solid @border-color;
+    border-right: 1px solid @border-color;
+}
+
+.notification-action:first-child {
+    border-left: none;
+    border-bottom-left-radius: 5px;
+}
+
+.notification-action:last-child {
+    border-right: none;
+    border-bottom-right-radius: 5px;
+}
+
+.notification-default-action:hover,
+.notification-action:hover {
+    background: @dominant;
+    text-shadow: none;
+}
+
+.control-center {
+    background: @cc-bg;
+    border: 2px solid @dominant;
+    border-radius: 0px;
+}
+
+.control-center-list {
+    background: transparent
+}
+
+.control-center-list-placeholder {
+    opacity: .5
+}
+
+.floating-notifications {
+    background: transparent
+}
+
+.blank-window {
+    background: alpha(black, 0.1)
+}
+
+.widget-backlight,
+.widget-buttons-grid,
+.widget-dnd,
+.widget-inhibitors,
+.widget-label,
+.widget-menubar,
+.widget-mpris,
+.widget-notifications,
+.widget-title,
+.widget-volume {
+    color: @text-color;
+    background: @noti-bg-darker;
+    border: 2px solid @border-color;
+    border-radius: 5px;
+    padding: 5px 10px;
+    margin: 10px;
+}
+
+.widget-title {
+    font-size: 1.5rem;
+}
+
+.widget-dnd {
+    font-size: large;
+    color: @text-color;
+}
+
+.widget-dnd>switch {
+    /*border-radius: 4px;*/
+    background: @darker-bg;
+}
+
+.widget-dnd>switch:checked {
+    background: @dominant;
+}
+
+.widget-dnd>switch slider {
+    /*margin: 3px;*/
+    background: @border-color;
+    /*border: 1px solid black;*/
+    /*border-radius: 5px*/
+}
+
+.widget-dnd>switch:checked slider {
+    /*border-radius: 5px;*/
+}
+
+.widget-label>label {
+    font-size: 1rem;
+    color: @text-color;
+}
+
+.widget-mpris > box > button {
+    border-radius: 5px;
+}
+
+.widget-mpris-player {
+    padding: 10px 20px;
+    margin: 22px;
+    box-shadow: none;
+}
+
+.widget-mpris-title {
+    font-weight: 700;
+    font-size: 1.25rem
+}
+
+.widget-mpris-subtitle {
+    font-size: 1.1rem
+}
+
+.widget-buttons-grid button label {
+    font-size: 1.5em;
+}
+
+.widget-buttons-grid>flowbox>flowboxchild>button {
+    margin: 3px;
+}
+
+.widget-menubar>box>.menu-button-bar>button {
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    text-shadow: none;
+}
+
+.topbar-buttons>button {
+    border: none;
+    background: transparent
+}
+
+scale trough highlight {
+  background-color: @dominant;
+}