{ lib, config, ... }: let theme = "dark"; in { home.file.".config/swaync/config.json".text = '' { "$schema": "/etc/xdg/swaync/configSchema.json", "positionX": "left", "positionY": "top", "layer": "overlay", "control-center-layer": "top", "layer-shell": true, "layer-shell-cover-screen": true, "cssPriority": "application", "control-center-margin-top": 0, "control-center-margin-bottom": 0, "control-center-margin-right": 0, "control-center-margin-left": 0, "notification-2fa-action": true, "notification-inline-replies": false, "notification-icon-size": 64, "notification-body-image-height": 100, "notification-body-image-width": 200, "timeout": 10, "timeout-low": 5, "timeout-critical": 0, "fit-to-screen": false, "relative-timestamps": true, "control-center-width": 500, "control-center-height": 700, "notification-window-width": 500, "keyboard-shortcuts": true, "image-visibility": "when-available", "transition-time": 200, "hide-on-clear": true, "hide-on-action": true, "text-empty": "No Notifications", "script-fail-notify": true, "scripts": { "example-script": { "exec": "echo 'Do something...'", "urgency": "Normal" }, "example-action-script": { "exec": "echo 'Do something actionable!'", "urgency": "Normal", "run-on": "action" } }, "notification-visibility": { "example-name": { "state": "muted", "urgency": "Low", "app-name": "Spotify" } }, "widgets": [ "inhibitors", "title", "dnd", "notifications", "mpris", "volume" ], "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, "image-radius": 12, "blacklist": [] }, "buttons-grid": { "actions": [ { "label": "ᯤ", "type": "toggle", "active": true, "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && nmcli radio wifi on || nmcli radio wifi off'", "update-command": "sh -c '[[ $(nmcli radio wifi) == \"enabled\" ]] && echo true || echo false'" }, { "label": "", "type": "toggle", "active": true, "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && bluetoothctl power on || bluetoothctl power off'", "update-command": "sh -c '[[ \$(bluetoothctl show | grep \"Powered\" | awk \"{print \\$2}\") == \"yes\" ]] && echo true || echo false'" } ] }, "notifications": { "vexpand": true }, "volume": { "show-per-app": true, "show-per-app-icon": true, "show-per-app-label": true } } } ''; home.file.".config/swaync/style_dark.css".text = '' :root { --font-family: "Monocraft"; --accent-bg-color: rgb(214, 93, 14); --cc-bg: #282828; --cc-margin: 10px; --noti-border-color: #504945; --noti-bg: 60, 56, 54; --noti-bg-alpha: 1.0; --noti-bg-darker: rgb(38, 38, 38); --noti-bg-hover: rgb(51, 51, 54); --noti-bg-focus: rgba(68, 68, 68, 0.0); --noti-close-bg: rgb(78, 78, 78); --noti-close-bg-hover: rgb(94, 94, 94); --text-color: #EADAB0; --text-color-disabled: rgb(150, 150, 150); --bg-selected: rgb(0, 128, 255); --notification-icon-size: 64px; --notification-app-icon-size: calc(var(--notification-icon-size) / 3); --notification-group-icon-size: 32px; --border: 2px solid var(--noti-border-color); --border-radius: 0px; --notification-shadow: 10px 10px 0px 0px rgba(0,0,0,0.5); --font-size-body: 15px; --font-size-summary: 16px; /* Deprecated variables (because of their typos). Keeeping them around for backwards compatibility. */ --hover-tranistion: background 0.15s ease-in-out; --group-collapse-tranistion: opacity 400ms ease-in-out; --hover-transition: var(--hover-tranistion); --group-collapse-transition: var(--group-collapse-tranistion); } /* Fallback for older CSS themes */ /* Fallback for older CSS themes */ @define-color cc-bg rgba(46, 46, 46, 0.7); @define-color noti-border-color rgba(255, 255, 255, 0.15); @define-color noti-bg rgba(48, 48, 48, 0.8); @define-color noti-bg-opaque rgb(48, 48, 48); @define-color noti-bg-darker rgb(38, 38, 38); @define-color noti-bg-hover rgb(56, 56, 56); @define-color noti-bg-hover-opaque rgb(56, 56, 56); @define-color noti-bg-focus rgba(68, 68, 68, 0.6); @define-color noti-close-bg rgba(255, 255, 255, 0.1); @define-color noti-close-bg-hover rgba(255, 255, 255, 0.15); @define-color text-color rgb(255, 255, 255); @define-color text-color-disabled rgb(150, 150, 150); @define-color bg-selected rgb(0, 128, 255); notificationwindow, blankwindow, blankwindow { background: transparent; } .close-button { /* The notification Close Button */ background: var(--noti-close-bg); color: var(--text-color); text-shadow: none; padding: 0; border-radius: 0%; margin-top: 8px; margin-right: 8px; box-shadow: none; border: none; min-width: 24px; min-height: 24px; } .close-button:hover { box-shadow: none; background: var(--noti-close-bg-hover); transition: var(--hover-tranistion); border: none; } .notification-row { background: none; outline: none; } .notification-row:focus { background: var(--noti-bg-focus); } .notification-row .notification-background { padding: 6px 12px; } .notification-row .notification-background .notification { /* The actual notification */ border-radius: var(--border-radius); border: var(--border); box-shadow: var(--notification-shadow); padding: 0; transition: var(--hover-tranistion); background: rgba(var(--noti-bg), var(--noti-bg-alpha)); } .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 */ } .notification-row .notification-background .notification .notification-default-action { /* The large action that also displays the notification summary and body */ padding: 4px; margin: 0; box-shadow: none; background: transparent; border: none; color: var(--text-color); transition: var(--hover-tranistion); border-radius: var(--border-radius); } .notification-row .notification-background .notification .notification-default-action:hover { -gtk-icon-filter: none; } .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: var(--border-radius); padding: 0; } .notification-row .notification-background .notification .notification-default-action .notification-content .image { /* Notification Primary Image */ -gtk-icon-filter: none; -gtk-icon-size: var(--notification-icon-size); border-radius: 0px; /* Size in px */ margin: 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-filter: none; -gtk-icon-size: var(--notification-app-icon-size); -gtk-icon-shadow: 0 1px 4px black; margin: 6px; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box label { /* Fixes base GTK 4 CSS setting a filter of opacity 50% for some odd reason */ filter: none; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary { /* Notification summary/title */ font-size: var(--font-size-summary); font-family: var(--font-family); font-weight: bold; background: transparent; color: var(--text-color); text-shadow: none; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time { /* Notification time-ago */ font-size: var(--font-size-summary); font-family: var(--font-family); font-weight: bold; background: transparent; color: var(--text-color); text-shadow: none; margin-right: 30px; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body { /* Notification body */ font-size: var(--font-size-body); font-family: var(--font-family); font-weight: normal; background: transparent; color: var(--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; -gtk-icon-filter: 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: var(--noti-bg-darker); color: var(--text-color); caret-color: var(--text-color); border: var(--border); border-radius: var(--border-radius); } .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { margin-left: 4px; background: rgba(var(--noti-bg), var(--noti-bg-alpha)); border: var(--border); border-radius: var(--border-radius); color: var(--text-color); } .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { background: initial; color: var(--text-color-disabled); border: var(--border); border-color: transparent; } .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover { background: var(--accent-bg-color); } .notification-row .notification-background .notification .notification-alt-actions { background: none; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding: 4px; } .notification-row .notification-background .notification .notification-action { /* The alternative actions below the default action */ margin: 4px; padding: 0; } .notification-row .notification-background .notification .notification-action > button { font-family: var(--font-family); border-radius: var(--border-radius); color: var(--text-color); } .notification-group { /* Styling only for Grouped Notifications */ transition: opacity 200ms ease-in-out; /* The groups close button */ } .notification-group:focus { background: var(--noti-bg-focus); } .notification-group.low { /* Low Priority Group */ } .notification-group.normal { /* Low Priority Group */ } .notification-group.critical { /* Low Priority Group */ } .notification-group .notification-group-close-button .close-button { margin: 12px 20px; } .notification-group .notification-group-buttons, .notification-group .notification-group-headers { margin: 0 16px; color: var(--text-color); } .notification-group .notification-group-headers { /* Notification Group Headers */ } .notification-group .notification-group-headers .notification-group-icon { color: var(--text-color); -gtk-icon-size: var(--notification-group-icon-size); } .notification-group .notification-group-headers .notification-group-header { color: var(--text-color); } .notification-group .notification-group-buttons { /* Notification Group Buttons */ } .notification-group.collapsed { /* When another group is expanded, lower the opacity of the collapsed ones */ } .notification-group.collapsed.not-expanded { opacity: 0.4; } .notification-group.collapsed .notification-row .notification { background-color: rgba(var(--noti-bg), 1); } .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: var(--noti-bg-hover); } .control-center { /* The Control Center which contains the old notifications + widgets */ background: var(--cc-bg); color: var(--text-color); border-radius: var(--border-radius); border: var(--border); margin: var(--cc-margin); } .control-center .control-center-list-placeholder { /* The placeholder when there are no notifications */ opacity: 0.5; } .control-center .control-center-list { /* List of notifications */ background: transparent; } .control-center .control-center-list .notification { box-shadow: var(--notification-shadow); } .control-center .control-center-list .notification .notification-default-action, .control-center .control-center-list .notification .notification-action { transition: var(--group-collapse-tranistion), var(--hover-tranistion); } .blank-window { /* Window behind control center and on all other monitors */ background: transparent; } .floating-notifications { background: transparent; } .floating-notifications .notification { box-shadow: none; } /*** Widgets ***/ .widget { margin: 8px; padding: 8px; border-radius: var(--border-radius); } /* Title widget */ .widget-title > label { margin-right: 8px; font-size: 1.5rem; font-family: var(--font-family); } .widget-title > button { margin-left: 8px; border-radius: var(--border-radius); } /* DND widget */ .widget-dnd label { color: var(--text-color); margin-right: 8px; font-size: 1.1rem; font-family: var(--font-family); } .widget-dnd switch { border-radius: var(--border-radius); margin-left: 8px; } .widget-dnd switch slider { border-radius: var(--border-radius); } /* Label widget */ .widget-label > label { font-size: 1.1rem; font-family: var(--font-family); } /* Mpris widget */ :root { --mpris-album-art-overlay: rgba(var(--noti-bg), 1); --mpris-button-hover: rgba(0, 0, 0, 0.5); --mpris-album-art-icon-size: 96px; --mpris-album-art-shadow: 7px 7px 0px 0px rgba(0,0,0,0.5); } .widget-mpris { padding: 0; /* The parent to all players */ } .widget-mpris .widget-mpris-player { margin: 16px 20px; border-radius: var(--border-radius); box-shadow: var(--mpris-album-art-shadow); } .widget-mpris .widget-mpris-player .mpris-background { filter: blur(10px); } .widget-mpris .widget-mpris-player .mpris-overlay { padding: 16px; background-color: var(--mpris-album-art-overlay); } .widget-mpris .widget-mpris-player .mpris-overlay button:hover { /* The media player buttons (play, pause, next, etc...) */ background: var(--accent-bg-color); } .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-album-art { border-radius: var(--border-radius); box-shadow: var(--mpris-album-art-shadow); -gtk-icon-size: var(--mpris-album-art-icon-size); } .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-title { font-weight: bold; font-family: var(--font-family); font-size: 1.25rem; } .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-subtitle { font-size: 1.1rem; font-family: var(--font-family); } .widget-mpris .widget-mpris-player .mpris-overlay > box > button { /* Change player control buttons */ } .widget-mpris .widget-mpris-player .mpris-overlay > box > button:hover { background-color: var(--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 flowboxchild > button { border-radius: var(--border-radius); } .widget-buttons-grid flowboxchild > button.toggle:checked { /* style given to the active toggle button */ } /* Menubar widget */ .widget-menubar { /* The revealer buttons */ /* .AnyName { Name defined in config after # background-color: rgba(var(--noti-bg), 1.0); padding: 8px; margin: 8px; border-radius: 12px; } .AnyName>button { background: transparent; border: none; } .AnyName>button:hover { background-color: var(--noti-bg-hover); } */ } .widget-menubar > .menu-button-bar { /* The left button container */ /* The right button container */ /* The left and right button container */ } .widget-menubar > .menu-button-bar > .start { margin-left: 8px; } .widget-menubar > .menu-button-bar > .end { margin-right: 8px; } .widget-menubar > .menu-button-bar > .widget-menubar-container button { border-radius: var(--border-radius); margin: 0 4px; } .widget-menubar > revealer * { margin-top: 8px; } .widget-menubar > revealer * button { border-radius: var(--border-radius); margin: 8px; margin-top: 0; } .widget-menubar > revealer * button:last-child { margin-bottom: 0; } /* Volume widget */ :root { --widget-volume-row-icon-size: 24px; font-family: var(--font-family); } /* Each row app icon */ .widget-volume row image { -gtk-icon-size: var(--widget-volume-row-icon-size); } .per-app-volume { background-color: var(--noti-bg-alt); margin: 8px; margin-bottom: 0; border-radius: var(--border-radius); } /* Slider widget */ .widget-slider label { font-size: inherit; font-family: var(--font-family); } /* Backlight widget */ /* Inhibitors widget */ .widget-inhibitors > label { margin-right: 8px; font-size: 1.5rem; font-family: var(--font-family); } .widget-inhibitors > button { margin-left: 8px; border-radius: var(--border-radius); } ''; home.file.".config/swaync/style_light.css".text = '' :root { --font-family: "Monocraft"; --accent-bg-color: #D65D0E; --cc-bg: #EBDBB2; --cc-margin: 10px; --noti-border-color: #D5C4A1; --noti-bg: 251, 241, 199; --noti-bg-alpha: 1.0; --noti-bg-darker: #DACAA6; --noti-bg-hover: #F9F5D7; --noti-bg-focus: var(--cc-bg); --noti-close-bg: #DFD0A9; --noti-close-bg-hover: #DACAA6; --text-color: #71644E; --text-color-disabled: rgb(150, 150, 150); --bg-selected: rgb(0, 128, 255); --notification-icon-size: 64px; --notification-app-icon-size: calc(var(--notification-icon-size) / 3); --notification-group-icon-size: 32px; --border: 2px solid var(--noti-border-color); --border-radius: 0px; --notification-shadow: 10px 10px 0px 0px rgba(0,0,0,0.5); --font-size-body: 15px; --font-size-summary: 16px; /* Deprecated variables (because of their typos). Keeeping them around for backwards compatibility. */ --hover-tranistion: background 0.15s ease-in-out; --group-collapse-tranistion: opacity 400ms ease-in-out; --hover-transition: var(--hover-tranistion); --group-collapse-transition: var(--group-collapse-tranistion); } /* Fallback for older CSS themes */ /* Fallback for older CSS themes */ @define-color cc-bg rgba(46, 46, 46, 0.7); @define-color noti-border-color rgba(255, 255, 255, 0.15); @define-color noti-bg rgba(48, 48, 48, 0.8); @define-color noti-bg-opaque rgb(48, 48, 48); @define-color noti-bg-darker rgb(38, 38, 38); @define-color noti-bg-hover rgb(56, 56, 56); @define-color noti-bg-hover-opaque rgb(56, 56, 56); @define-color noti-bg-focus rgba(68, 68, 68, 0.6); @define-color noti-close-bg rgba(255, 255, 255, 0.1); @define-color noti-close-bg-hover rgba(255, 255, 255, 0.15); @define-color text-color rgb(255, 255, 255); @define-color text-color-disabled rgb(150, 150, 150); @define-color bg-selected rgb(0, 128, 255); notificationwindow, blankwindow, blankwindow { background: transparent; } .close-button { /* The notification Close Button */ background: var(--noti-close-bg); color: var(--text-color); text-shadow: none; padding: 0; border-radius: 0%; margin-top: 8px; margin-right: 8px; box-shadow: none; border: none; min-width: 24px; min-height: 24px; } .close-button:hover { box-shadow: none; background: var(--noti-close-bg-hover); transition: var(--hover-tranistion); border: none; } .notification-row { background: none; outline: none; } .notification-row:focus { background: var(--noti-bg-focus); } .notification-row .notification-background { padding: 6px 12px; } .notification-row .notification-background .notification { /* The actual notification */ border-radius: var(--border-radius); border: var(--border); box-shadow: var(--notification-shadow); padding: 0; transition: var(--hover-tranistion); background: rgba(var(--noti-bg), var(--noti-bg-alpha)); } .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 */ } .notification-row .notification-background .notification .notification-default-action { /* The large action that also displays the notification summary and body */ padding: 4px; margin: 0; box-shadow: none; background: transparent; border: none; color: var(--text-color); transition: var(--hover-tranistion); border-radius: var(--border-radius); } .notification-row .notification-background .notification .notification-default-action:hover { -gtk-icon-filter: none; } .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: var(--border-radius); padding: 0; } .notification-row .notification-background .notification .notification-default-action .notification-content .image { /* Notification Primary Image */ -gtk-icon-filter: none; -gtk-icon-size: var(--notification-icon-size); border-radius: 0px; /* Size in px */ margin: 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-filter: none; -gtk-icon-size: var(--notification-app-icon-size); -gtk-icon-shadow: 0 1px 4px black; margin: 6px; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box label { /* Fixes base GTK 4 CSS setting a filter of opacity 50% for some odd reason */ filter: none; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary { /* Notification summary/title */ font-size: var(--font-size-summary); font-family: var(--font-family); font-weight: bold; background: transparent; color: var(--text-color); text-shadow: none; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time { /* Notification time-ago */ font-size: var(--font-size-summary); font-family: var(--font-family); font-weight: bold; background: transparent; color: var(--text-color); text-shadow: none; margin-right: 30px; } .notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body { /* Notification body */ font-size: var(--font-size-body); font-family: var(--font-family); font-weight: normal; background: transparent; color: var(--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; -gtk-icon-filter: 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: var(--noti-bg-darker); color: var(--text-color); caret-color: var(--text-color); border: var(--border); border-radius: var(--border-radius); } .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { margin-left: 4px; background: rgba(var(--noti-bg), var(--noti-bg-alpha)); border: var(--border); border-radius: var(--border-radius); color: var(--text-color); } .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { background: initial; color: var(--text-color-disabled); border: var(--border); border-color: transparent; } .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover { background: var(--accent-bg-color); } .notification-row .notification-background .notification .notification-alt-actions { background: none; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding: 4px; } .notification-row .notification-background .notification .notification-action { /* The alternative actions below the default action */ margin: 4px; padding: 0; } .notification-row .notification-background .notification .notification-action > button { font-family: var(--font-family); border-radius: var(--border-radius); color: var(--text-color); } .notification-group { /* Styling only for Grouped Notifications */ transition: opacity 200ms ease-in-out; /* The groups close button */ } .notification-group:focus { background: var(--noti-bg-focus); } .notification-group.low { /* Low Priority Group */ } .notification-group.normal { /* Low Priority Group */ } .notification-group.critical { /* Low Priority Group */ } .notification-group .notification-group-close-button .close-button { margin: 12px 20px; } .notification-group .notification-group-buttons, .notification-group .notification-group-headers { margin: 0 16px; color: var(--text-color); } .notification-group .notification-group-headers { /* Notification Group Headers */ } .notification-group .notification-group-headers .notification-group-icon { color: var(--text-color); -gtk-icon-size: var(--notification-group-icon-size); } .notification-group .notification-group-headers .notification-group-header { color: var(--text-color); } .notification-group .notification-group-buttons { /* Notification Group Buttons */ } .notification-group.collapsed { /* When another group is expanded, lower the opacity of the collapsed ones */ } .notification-group.collapsed.not-expanded { opacity: 0.4; } .notification-group.collapsed .notification-row .notification { background-color: rgba(var(--noti-bg), 1); } .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: var(--noti-bg-hover); } .control-center { /* The Control Center which contains the old notifications + widgets */ background: var(--cc-bg); color: var(--text-color); border-radius: var(--border-radius); border: var(--border); margin-left: var(--cc-margin); } .control-center .control-center-list-placeholder { /* The placeholder when there are no notifications */ opacity: 0.5; } .control-center .control-center-list { /* List of notifications */ background: transparent; } .control-center .control-center-list .notification { box-shadow: var(--notification-shadow); } .control-center .control-center-list .notification .notification-default-action, .control-center .control-center-list .notification .notification-action { transition: var(--group-collapse-tranistion), var(--hover-tranistion); } .blank-window { /* Window behind control center and on all other monitors */ background: transparent; } .floating-notifications { background: transparent; } .floating-notifications .notification { box-shadow: none; } /*** Widgets ***/ .widget { margin: 8px; padding: 8px; border-radius: var(--border-radius); } /* Title widget */ .widget-title > label { margin-right: 8px; font-size: 1.5rem; font-family: var(--font-family); } .widget-title > button { margin-left: 8px; border-radius: var(--border-radius); } /* DND widget */ .widget-dnd label { color: var(--text-color); margin-right: 8px; font-size: 1.1rem; font-family: var(--font-family); } .widget-dnd switch { border-radius: var(--border-radius); margin-left: 8px; } .widget-dnd switch slider { border-radius: var(--border-radius); } /* Label widget */ .widget-label > label { font-size: 1.1rem; font-family: var(--font-family); } /* Mpris widget */ :root { --mpris-album-art-overlay: rgba(var(--noti-bg), 1); --mpris-button-hover: rgba(0, 0, 0, 0.5); --mpris-album-art-icon-size: 96px; --mpris-album-art-shadow: 7px 7px 0px 0px rgba(0,0,0,0.5); } .widget-mpris { padding: 0; /* The parent to all players */ } .widget-mpris .widget-mpris-player { margin: 16px 20px; border-radius: var(--border-radius); box-shadow: var(--mpris-album-art-shadow); } .widget-mpris .widget-mpris-player .mpris-background { filter: blur(10px); } .widget-mpris .widget-mpris-player .mpris-overlay { padding: 16px; background-color: var(--mpris-album-art-overlay); } .widget-mpris .widget-mpris-player .mpris-overlay button:hover { /* The media player buttons (play, pause, next, etc...) */ background: var(--accent-bg-color); } .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-album-art { border-radius: var(--border-radius); box-shadow: var(--mpris-album-art-shadow); -gtk-icon-size: var(--mpris-album-art-icon-size); } .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-title { font-weight: bold; font-family: var(--font-family); font-size: 1.25rem; } .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-subtitle { font-size: 1.1rem; font-family: var(--font-family); } .widget-mpris .widget-mpris-player .mpris-overlay > box > button { /* Change player control buttons */ } .widget-mpris .widget-mpris-player .mpris-overlay > box > button:hover { background-color: var(--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 flowboxchild > button { border-radius: var(--border-radius); } .widget-buttons-grid flowboxchild > button.toggle:checked { /* style given to the active toggle button */ } /* Menubar widget */ .widget-menubar { /* The revealer buttons */ /* .AnyName { Name defined in config after # background-color: rgba(var(--noti-bg), 1.0); padding: 8px; margin: 8px; border-radius: 12px; } .AnyName>button { background: transparent; border: none; } .AnyName>button:hover { background-color: var(--noti-bg-hover); } */ } .widget-menubar > .menu-button-bar { /* The left button container */ /* The right button container */ /* The left and right button container */ } .widget-menubar > .menu-button-bar > .start { margin-left: 8px; } .widget-menubar > .menu-button-bar > .end { margin-right: 8px; } .widget-menubar > .menu-button-bar > .widget-menubar-container button { border-radius: var(--border-radius); margin: 0 4px; } .widget-menubar > revealer * { margin-top: 8px; } .widget-menubar > revealer * button { border-radius: var(--border-radius); margin: 8px; margin-top: 0; } .widget-menubar > revealer * button:last-child { margin-bottom: 0; } /* Volume widget */ :root { --widget-volume-row-icon-size: 24px; font-family: var(--font-family); } /* Each row app icon */ .widget-volume row image { -gtk-icon-size: var(--widget-volume-row-icon-size); } .per-app-volume { background-color: var(--noti-bg-alt); margin: 8px; margin-bottom: 0; border-radius: var(--border-radius); } /* Slider widget */ .widget-slider label { font-size: inherit; font-family: var(--font-family); } /* Backlight widget */ /* Inhibitors widget */ .widget-inhibitors > label { margin-right: 8px; font-size: 1.5rem; font-family: var(--font-family); } .widget-inhibitors > button { margin-left: 8px; border-radius: var(--border-radius); } ''; home.file.".config/swaync/style.css".source = config.home.file.".config/swaync/style_${theme}.css".source; }