diff --git a/users/myuser/graphical/default.nix b/users/myuser/graphical/default.nix index 6875247..4eba17c 100644 --- a/users/myuser/graphical/default.nix +++ b/users/myuser/graphical/default.nix @@ -6,18 +6,23 @@ }: { imports = [ - ./wired-notify.nix ./discord.nix ./firefox.nix - ./flameshot.nix ./kitty.nix ./signal.nix ./theme.nix ./thunderbird.nix + + # X11 ./i3.nix - ./rofi.nix + ./flameshot.nix + ./wired-notify.nix + + # Wayland ./hyprland.nix ./waybar.nix + ./rofi.nix + ./swaync.nix ] ++ lib.optionals nixosConfig.graphical.gaming.enable [ ./games diff --git a/users/myuser/graphical/hyprland.nix b/users/myuser/graphical/hyprland.nix index 063c51f..11457a5 100644 --- a/users/myuser/graphical/hyprland.nix +++ b/users/myuser/graphical/hyprland.nix @@ -1,3 +1,7 @@ +# TODO: waybar qr scan button +# TODO: waybar color picker button +# TODO: notification center toggle +# TODO ai speech indicator / toggle { lib, nixosConfig, diff --git a/users/myuser/graphical/swaync-style.css b/users/myuser/graphical/swaync-style.css new file mode 100644 index 0000000..a8a29db --- /dev/null +++ b/users/myuser/graphical/swaync-style.css @@ -0,0 +1,522 @@ +@define-color cc-bg @base00; +@define-color noti-border-color rgba(255, 255, 255, 0.1); +@define-color noti-bg @base01; +@define-color noti-bg-critical lighter(mix(#000, @base08, 0.5)); +@define-color noti-bg-opaque @base01; +@define-color noti-bg-darker @base00; +@define-color noti-bg-hover lighter(@noti-bg); +@define-color noti-bg-hover-critical darker(@noti-bg-critical); +@define-color noti-bg-hover-opaque lighter(@noti-bg); +@define-color noti-close-bg rgba(255, 255, 255, 0.1); +@define-color noti-close-bg-hover rgba(255, 255, 255, 0.2); +@define-color text-color @base07; +@define-color text-color-muted @base05; +@define-color text-color-disabled @base04; +@define-color switch-color alpha(@base07, 0.5); +@define-color bg-selected @base0D; + +*:focus { + outline-style: none; +} + +.notification-row { + outline: none; +} + +.notification-row:focus, +.notification-row:hover { +} + +.notification-row .notification-background { +} + +.notification-row .notification-background .close-button { + /* The notification Close Button */ + background: @noti-close-bg; + color: @text-color; + text-shadow: none; + padding: 0; + border-radius: 100%; + margin-top: 5px; + margin-right: 5px; + box-shadow: none; + border: none; + min-width: 24px; + min-height: 24px; +} + +.notification-row .notification-background .close-button:hover { + box-shadow: none; + background: @noti-close-bg-hover; + transition: background 50ms ease-in-out; + border: none; +} + +.notification-row .notification-background .notification { + /* The actual notification */ + border-radius: 8px; + border: 2px solid @noti-border-color; + padding: 0; + transition: background 50ms ease-in-out; + background: @noti-bg; +} + +.notification-row .notification-background .notification.low { + /* Low Priority Notification */ +} + +.notification-row .notification-background .notification.normal { + /* Normal Priority Notification */ +} + +.notification-row .notification-background .notification.critical { + /* Critical Priority Notification */ + background: @noti-bg-critical; +} + +.notification-row .notification-background .notification .notification-action, +.notification-row .notification-background .notification .notification-default-action { + padding: 4px; + margin: 0; + box-shadow: none; + background: transparent; + border: none; + color: @text-color; + transition: background 50ms ease-in-out; +} + +.notification-row .notification-background .notification .notification-action:hover, +.notification-row .notification-background .notification .notification-default-action:hover { + -gtk-icon-effect: none; + background: @noti-bg-hover; +} + +.notification-row .notification-background .notification.critical .notification-action:hover, +.notification-row .notification-background .notification.critical .notification-default-action:hover { + /* Critical Priority Notification */ + background: @noti-bg-hover-critical; +} + +.notification-row .notification-background .notification .notification-default-action { + /* The large action that also displays the notification summary and body */ + border-radius: 4px; +} + +.notification-row .notification-background .notification .notification-default-action:not(:only-child) { + /* When alternative actions are visible */ + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content { + background: transparent; + border-radius: 12px; + padding: 16px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .image { + /* Notification Primary Image */ + -gtk-icon-effect: none; + border-radius: 100px; + /* Size in px */ + margin: 4px 12px 4px 4px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon { + /* Notification app icon (only visible when the primary image is set) */ + -gtk-icon-effect: none; + -gtk-icon-shadow: 0 1px 4px black; + margin: 6px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary { + /* Notification summary/title */ + font-size: 1.75rem; + font-weight: bold; + background: transparent; + color: @text-color; + text-shadow: none; + margin-bottom: 8px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time { + /* Notification time-ago */ + font-size: 1.5rem; + font-weight: bold; + background: transparent; + color: @text-color-muted; + text-shadow: none; + margin-right: 30px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body { + /* Notification body */ + font-size: 1.5rem; + background: transparent; + color: @text-color; + text-shadow: none; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content progressbar { + /* The optional notification progress bar */ + margin-top: 4px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .body-image { + /* The "extra" optional bottom notification image */ + margin-top: 4px; + background-color: white; + border-radius: 12px; + -gtk-icon-effect: none; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply { + /* The inline reply section */ + margin-top: 4px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry { + background: @noti-bg-darker; + color: @text-color; + caret-color: @text-color; + border: 1px solid @noti-border-color; + border-radius: 12px; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { + font-size: 1.5rem; + margin-left: 4px; + background: @noti-bg; + border: 1px solid @noti-border-color; + border-radius: 12px; + color: @text-color; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { + background: initial; + color: @text-color-disabled; + border: 1px solid @noti-border-color; + border-color: transparent; +} + +.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover { + background: @noti-bg-hover; +} + +.notification-row .notification-background .notification .notification-action { + /* The alternative actions below the default action */ + border-top: 1px solid @noti-border-color; + border-radius: 0px; + border-right: 1px solid @noti-border-color; +} + +.notification-row .notification-background .notification .notification-action:first-child { + /* add bottom border radius to eliminate clipping */ + border-bottom-left-radius: 12px; +} + +.notification-row .notification-background .notification .notification-action:last-child { + border-bottom-right-radius: 12px; + border-right: none; +} + +.notification-group { + /* Styling only for Grouped Notifications */ +} + +.notification-group.low { + /* Low Priority Group */ +} + +.notification-group.normal { + /* Low Priority Group */ +} + +.notification-group.critical { + /* Low Priority Group */ +} + +.notification-group .notification-group-buttons, +.notification-group .notification-group-headers { + margin: 0 16px; + color: @text-color; +} + +.notification-group .notification-group-headers { + /* Notification Group Headers */ + padding: 12px 8px; +} + +.notification-group .notification-group-headers .notification-group-icon { + color: @text-color; +} + +.notification-group .notification-group-headers .notification-group-header { + color: @text-color; + font-size: 2rem; +} + +.notification-group .notification-group-buttons { + /* Notification Group Buttons */ +} + +.notification-group.collapsed .notification-row .notification { + background-color: @noti-bg-opaque; +} + +.notification-group.collapsed .notification-row:not(:last-child) { + /* Top notification in stack */ + /* Set lower stacked notifications opacity to 0 */ +} + +.notification-group.collapsed .notification-row:not(:last-child) .notification-action, +.notification-group.collapsed .notification-row:not(:last-child) .notification-default-action { + opacity: 0; +} + +.notification-group.collapsed:hover .notification-row:not(:only-child) .notification { + background-color: @noti-bg-hover-opaque; +} + +.control-center { + /* The Control Center which contains the old notifications + widgets */ + background: @cc-bg; + color: @text-color; + border-radius: 0px; + padding: 6px 12px; +} + +.control-center .control-center-list-placeholder { + /* The placeholder when there are no notifications */ + opacity: 1; +} + +.control-center .control-center-list { + /* List of notifications */ + background: transparent; +} + +.control-center .control-center-list .notification { + box-shadow: none; +} + +.control-center .control-center-list .notification .notification-default-action, +.control-center .control-center-list .notification .notification-action { + transition: opacity 50ms ease-in-out, background 50ms ease-in-out; +} + +.control-center .control-center-list .notification .notification-default-action:hover, +.control-center .control-center-list .notification .notification-action:hover { + background-color: @noti-bg-hover; +} + +.blank-window { + /* Window behind control center and on all other monitors */ + background: transparent; +} + +.floating-notifications { + background: transparent; +} + +.floating-notifications .notification { + box-shadow: none; +} + +/*** Widgets ***/ +/* Title widget */ +.widget-title { + color: @text-color; + margin: 8px; + font-size: 1.5rem; +} + +.widget-title > button { + font-size: initial; + color: @text-color; + text-shadow: none; + background: @noti-bg; + border: 1px solid @noti-border-color; + box-shadow: none; + border-radius: 12px; +} + +.widget-title > button:hover { + background: @noti-bg-hover; +} + +/* DND widget */ +.widget-dnd { + color: @text-color; + margin: 8px; + font-size: 1.5rem; + padding: 8px 16px; +} + +.widget-dnd > switch { + font-size: initial; + border-radius: 9999px; + background: @noti-bg; + border: 1px solid @switch-color; + box-shadow: none; +} + +.widget-dnd > switch:checked { + background: @bg-selected; +} + +.widget-dnd > switch slider { + background: @switch-color; + border-radius: 12px; +} + +/* Label widget */ +.widget-label { + margin: 8px; +} + +.widget-label > label { + font-size: 1.1rem; +} + +/* Mpris widget */ +@define-color mpris-album-art-overlay rgba(0, 0, 0, 0.55); +@define-color mpris-button-hover rgba(0, 0, 0, 0.50); +.widget-mpris { + /* The parent to all players */ +} + +.widget-mpris .widget-mpris-player { + padding: 8px 16px; + margin: 16px 20px; + background-color: @mpris-album-art-overlay; + border-radius: 12px; + box-shadow: none; +} + +.widget-mpris .widget-mpris-player button:hover { + /* The media player buttons (play, pause, next, etc...) */ + background: @noti-bg-hover; +} + +.widget-mpris .widget-mpris-player .widget-mpris-album-art { + border-radius: 12px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); +} + +.widget-mpris .widget-mpris-player .widget-mpris-title { + font-weight: bold; + font-size: 1.25rem; +} + +.widget-mpris .widget-mpris-player .widget-mpris-subtitle { + font-size: 1.1rem; +} + +.widget-mpris .widget-mpris-player > box > button { + /* Change player control buttons */ +} + +.widget-mpris .widget-mpris-player > box > button:hover { + background-color: @mpris-button-hover; +} + +.widget-mpris > box > button { + /* Change player side buttons */ +} + +.widget-mpris > box > button:disabled { + /* Change player side buttons insensitive */ +} + +/* Buttons widget */ +.widget-buttons-grid { + padding: 8px; + margin: 8px; + border-radius: 12px; + background-color: @noti-bg; +} + +.widget-buttons-grid > flowbox > flowboxchild > button { + background: @noti-bg; + border-radius: 12px; +} + +.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked { + /* style given to the active toggle button */ +} + +/* Menubar widget */ +.widget-menubar > box > .menu-button-bar > button { + border: none; + background: transparent; +} + +/* .AnyName { Name defined in config after # + background-color: @noti-bg; + padding: 8px; + margin: 8px; + border-radius: 12px; +} + +.AnyName>button { + background: transparent; + border: none; +} + +.AnyName>button:hover { + background-color: @noti-bg-hover; +} */ +.topbar-buttons > button { + /* Name defined in config after # */ + border: none; + background: transparent; +} + +/* Volume widget */ +.widget-volume { + background-color: @noti-bg; + padding: 8px; + margin: 8px; + border-radius: 12px; +} + +.widget-volume > box > button { + background: transparent; + border: none; +} + +.per-app-volume { + background-color: @noti-bg-alt; + padding: 4px 8px 8px 8px; + margin: 0px 8px 8px 8px; + border-radius: 12px; +} + +/* Backlight widget */ +.widget-backlight { + background-color: @noti-bg; + padding: 8px; + margin: 8px; + border-radius: 12px; +} + +/* Inhibitors widget */ +.widget-inhibitors { + margin: 8px; + font-size: 1.5rem; +} + +.widget-inhibitors > button { + font-size: initial; + color: @text-color; + text-shadow: none; + background: @noti-bg; + border: 1px solid @switch-color; + box-shadow: none; + border-radius: 12px; +} + +.widget-inhibitors > button:hover { + background: @noti-bg-hover; +} diff --git a/users/myuser/graphical/swaync.nix b/users/myuser/graphical/swaync.nix new file mode 100644 index 0000000..2778fe0 --- /dev/null +++ b/users/myuser/graphical/swaync.nix @@ -0,0 +1,89 @@ +{ + config, + lib, + ... +}: { + services.swaync = { + enable = true; + settings = { + positionX = "right"; + positionY = "top"; + + layer = "overlay"; + layer-shell = true; + cssPriority = "application"; + + control-center-layer = "top"; + control-center-width = 800; + control-center-height = 1600; + control-center-margin-top = 0; + control-center-margin-bottom = 0; + control-center-margin-right = 0; + control-center-margin-left = 0; + + notification-window-width = 800; + notification-2fa-action = true; + notification-inline-replies = false; + notification-icon-size = 64; + notification-body-image-height = 100; + notification-body-image-width = 200; + + keyboard-shortcuts = true; + image-visibility = "when-available"; + transition-time = 100; + + widgets = [ + "inhibitors" + "dnd" + "mpris" + "notifications" + ]; + + widget-config = { + inhibitors = { + text = "Inhibitors"; + button-text = "Clear All"; + clear-all-button = true; + }; + title = { + text = "Notifications"; + clear-all-button = true; + button-text = "Clear All"; + }; + dnd = { + text = "Do Not Disturb"; + }; + label = { + max-lines = 5; + text = "Label Text"; + }; + mpris = { + image-size = 96; + blur = true; + }; + }; + }; + style = + lib.concatLines ( + map (c: "@define-color ${c} ${config.lib.stylix.colors.withHashtag.${c}};") [ + "base00" + "base01" + "base02" + "base03" + "base04" + "base05" + "base06" + "base07" + "base08" + "base09" + "base0A" + "base0B" + "base0C" + "base0D" + "base0E" + "base0F" + ] + ) + + (builtins.readFile ./swaync-style.css); + }; +}