From: Andre Ramnitz Date: Tue, 22 Oct 2024 22:08:48 +0000 (+0200) Subject: swaync: improve button margins X-Git-Url: https://git.ramnitz.eu/?a=commitdiff_plain;h=38cc5623cd42f72969ed6026d20014f8774c03df;p=dotfiles.git swaync: improve button margins --- diff --git a/dot-config/swaync/style.css b/dot-config/swaync/style.css index 941e359c..febafe86 100644 --- a/dot-config/swaync/style.css +++ b/dot-config/swaync/style.css @@ -1,4 +1,4 @@ -@import "../waybar/base16-colors.css"; +@import url("../waybar/base16-colors.css"); @define-color cc-bg rgba(46, 46, 46, 0.7); @define-color noti-border-color rgba(255, 255, 255, 0.15); @@ -15,426 +15,538 @@ @define-color bg-selected rgb(0, 128, 255); .notification-row { - outline: none; + outline: none; } -.notification-row:focus, .notification-row:hover { - background: @base03; +.notification-row:focus, +.notification-row:hover { + background: @base03; } .notification-row .notification-background { - padding: 6px 12px; + padding: 6px 12px; } .notification-row .notification-background .close-button { - /* The notification Close Button */ - background: @base03; - color: @base05; - 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; - border: 1px solid @base02; + /* The notification Close Button */ + background: @base03; + color: @base05; + 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; + border: 1px solid @base02; } .notification-row .notification-background .close-button:hover { - box-shadow: none; - background: @base0F; - transition: background 0.15s ease-in-out; - border: none; + box-shadow: none; + background: @base0F; + transition: background 0.15s ease-in-out; + border: none; } .notification-row .notification-background .notification { - /* The actual notification */ - border-radius: 12px; - border: 1px solid @base02; - padding: 0; - transition: background 0.15s ease-in-out; - background: @base00; + /* The actual notification */ + border-radius: 12px; + border: 1px solid @base02; + padding: 0; + transition: background 0.15s ease-in-out; + background: @base00; } .notification-row .notification-background .notification.low { - /* Low Priority Notification */ + /* Low Priority Notification */ } .notification-row .notification-background .notification.normal { - /* Normal Priority Notification */ + /* Normal Priority Notification */ } .notification-row .notification-background .notification.critical { - /* Critical Priority Notification */ - background-color: alpha(@base07,1.0); -} - -.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: @base05; - transition: background 0.15s 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: @base03; -} - -.notification-row .notification-background .notification .notification-default-action { - /* The large action that also displays the notification summary and body */ - border-radius: 12px; -} - -.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: 4px; -} - -.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; -} - -.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: 16px; - font-weight: bold; - background: transparent; - color: @base05; - text-shadow: none; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time { - /* Notification time-ago */ - font-size: 16px; - font-weight: bold; - background: transparent; - color: @base05; - text-shadow: none; - margin-right: 30px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body { - /* Notification body */ - font-size: 15px; - font-weight: normal; - background: transparent; - color: @base05; - 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: @base00; - color: @base05; - caret-color: @base05; - border: 1px solid @base02; - border-radius: 12px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { - margin-left: 4px; - background: @base00; - border: 1px solid @base02; - border-radius: 12px; - color: @base05; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { - background: initial; - color: @base04; - border: 1px solid @base02; - border-color: transparent; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover { - background: @base03; + /* Critical Priority Notification */ + background-color: alpha(@base08, 1); +} + +.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: @base05; + transition: background 0.15s 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: @base03; +} + +.notification-row + .notification-background + .notification + .notification-default-action { + /* The large action that also displays the notification summary and body */ + border-radius: 12px; +} + +.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: 4px; +} + +.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; +} + +.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: 16px; + font-weight: bold; + background: transparent; + color: @base05; + text-shadow: none; +} + +.notification-row + .notification-background + .notification + .notification-default-action + .notification-content + .text-box + .time { + /* Notification time-ago */ + font-size: 16px; + font-weight: bold; + background: transparent; + color: @base05; + text-shadow: none; + margin-right: 30px; +} + +.notification-row + .notification-background + .notification + .notification-default-action + .notification-content + .text-box + .body { + /* Notification body */ + font-size: 15px; + font-weight: normal; + background: transparent; + color: @base05; + 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: @base00; + color: @base05; + caret-color: @base05; + border: 1px solid @base02; + border-radius: 12px; +} + +.notification-row + .notification-background + .notification + .notification-default-action + .notification-content + .inline-reply + .inline-reply-button { + margin-left: 4px; + background: @base00; + border: 1px solid @base02; + border-radius: 12px; + color: @base05; +} + +.notification-row + .notification-background + .notification + .notification-default-action + .notification-content + .inline-reply + .inline-reply-button:disabled { + background: initial; + color: @base04; + border: 1px solid @base02; + border-color: transparent; +} + +.notification-row + .notification-background + .notification + .notification-default-action + .notification-content + .inline-reply + .inline-reply-button:hover { + background: @base03; } .notification-row .notification-background .notification .notification-action { - /* The alternative actions below the default action */ - border-top: 1px solid @base02; - border-radius: 0px; - border-right: 1px solid @base02; + /* The alternative actions below the default action */ + border-top: 1px solid @base02; + border-radius: 0px; + border-right: 1px solid @base02; } -.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: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-row + .notification-background + .notification + .notification-action:last-child { + border-bottom-right-radius: 12px; + border-right: none; } .notification-group { - /* Styling only for Grouped Notifications */ + /* Styling only for Grouped Notifications */ } .notification-group.low { - /* Low Priority Group */ + /* Low Priority Group */ } .notification-group.normal { - /* Low Priority Group */ + /* Low Priority Group */ } .notification-group.critical { - /* Low Priority Group */ + /* Low Priority Group */ } -.notification-group .notification-group-buttons, .notification-group .notification-group-headers { - margin: 0 16px; - color: @base05; +.notification-group .notification-group-buttons, +.notification-group .notification-group-headers { + margin: 0 16px; + color: @base05; } .notification-group .notification-group-headers { - /* Notification Group Headers */ + /* Notification Group Headers */ } .notification-group .notification-group-headers .notification-group-icon { - color: @base05; + color: @base05; } .notification-group .notification-group-headers .notification-group-header { - color: @base05; + color: @base05; } .notification-group .notification-group-buttons { - /* Notification Group Buttons */ + /* Notification Group Buttons */ } .notification-group.collapsed .notification-row .notification { - background-color: @base00; + background-color: @base00; } .notification-group.collapsed .notification-row:not(:last-child) { - /* Top notification in stack */ - /* Set lower stacked notifications opacity to 0 */ + /* 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 + .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: @base03; +.notification-group.collapsed:hover + .notification-row:not(:only-child) + .notification { + background-color: @base03; } .control-center { - /* The Control Center which contains the old notifications + widgets */ - background: alpha(@base00,0.95); - color: @base01; - border-radius: 12px; - border: 1px solid @base0D; + /* The Control Center which contains the old notifications + widgets */ + background: alpha(@base00, 0.95); + color: @base01; + border-radius: 12px; + border: 1px solid @base0D; } .control-center .control-center-list-placeholder { - /* The placeholder when there are no notifications */ - opacity: 0.5; + /* The placeholder when there are no notifications */ + opacity: 0.5; } .control-center .control-center-list { - /* List of notifications */ - background: transparent; + /* List of notifications */ + background: transparent; } .control-center .control-center-list .notification { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3); + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.3), + 0 1px 3px 1px rgba(0, 0, 0, 0.7), + 0 2px 6px 2px rgba(0, 0, 0, 0.3); } .control-center .control-center-list .notification .notification-default-action, .control-center .control-center-list .notification .notification-action { - transition: opacity 400ms ease-in-out, background 0.15s ease-in-out; + transition: + opacity 400ms ease-in-out, + background 0.15s ease-in-out; } -.control-center .control-center-list .notification .notification-default-action:hover, +.control-center + .control-center-list + .notification + .notification-default-action:hover, .control-center .control-center-list .notification .notification-action:hover { - background-color: @base03; + background-color: @base03; } .blank-window { - /* Window behind control center and on all other monitors */ - background: transparent; + /* Window behind control center and on all other monitors */ + background: transparent; } .floating-notifications { - background: transparent; + background: transparent; } .floating-notifications .notification { - box-shadow: none; + box-shadow: none; } /*** Widgets ***/ /* Title widget */ .widget-title { - color: @base05; - margin: 8px; + color: @base05; + margin: 8px; } .widget-title > button { - font-size: initial; - color: @base05; - text-shadow: none; - background: @base00; - border: 1px solid @base02; - box-shadow: none; - border-radius: 12px; + font-size: initial; + color: @base05; + text-shadow: none; + background: @base00; + border: 1px solid @base02; + box-shadow: none; + border-radius: 12px; } .widget-title > button:hover { - background: @base03; + background: @base03; } /* DND widget */ .widget-dnd { - color: @base05; - margin: 8px; - font-size: 1.1rem; + color: @base05; + margin: 8px; + font-size: 1.1rem; } .widget-dnd > switch { - font-size: initial; - border-radius: 12px; - background: @base00; - border: 1px solid @base02; - box-shadow: none; + font-size: initial; + border-radius: 12px; + background: @base00; + border: 1px solid @base02; + box-shadow: none; } .widget-dnd > switch:checked { - background: @bg-selected; + background: @bg-selected; } .widget-dnd > switch slider { - background: @base03; - border-radius: 12px; + background: @base03; + border-radius: 12px; } /* Label widget */ .widget-label { - margin: 8px; + margin: 8px; } .widget-label > label { - font-size: 1.1rem; + 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 */ + /* The parent to all players */ } .widget-mpris .widget-mpris-player { - padding: 8px; - padding: 16px; - margin: 16px 20px; - background-color: @mpris-album-art-overlay; - border-radius: 12px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); + padding: 8px; + padding: 16px; + margin: 16px 20px; + background-color: @mpris-album-art-overlay; + border-radius: 12px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); } .widget-mpris .widget-mpris-player button:hover { - /* The media player buttons (play, pause, next, etc...) */ - background: @base03; + /* The media player buttons (play, pause, next, etc...) */ + background: @base03; } .widget-mpris .widget-mpris-player .widget-mpris-album-art { - border-radius: 12px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); + 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; + font-weight: bold; + font-size: 1.25rem; } .widget-mpris .widget-mpris-player .widget-mpris-subtitle { - font-size: 1.1rem; + font-size: 1.1rem; } .widget-mpris .widget-mpris-player > box > button { - /* Change player control buttons */ + /* Change player control buttons */ } .widget-mpris .widget-mpris-player > box > button:hover { - background-color: @base03; + background-color: @base03; } .widget-mpris > box > button { - /* Change player side buttons */ + /* Change player side buttons */ } .widget-mpris > box > button:disabled { - /* Change player side buttons insensitive */ + /* Change player side buttons insensitive */ } /* Buttons widget */ .widget-buttons-grid { - padding: 8px; - margin: 8px; - border-radius: 12px; - background-color: @base00; + padding: 8px; + margin: 8px; + border-radius: 12px; + background-color: @base00; } .widget-buttons-grid > flowbox > flowboxchild > button { - background: @base00; - border-radius: 12px; + background: @base00; + border-radius: 12px; } .widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked { - /* style given to the active toggle button */ + /* style given to the active toggle button */ } /* Menubar widget */ + .widget-menubar > box > .menu-button-bar > button { - border: none; - background: transparent; - font-size: 2rem; + border: none; + background: transparent; + font-size: 2rem; + margin: 8px; } /* .AnyName { Name defined in config after # @@ -452,57 +564,62 @@ .AnyName>button:hover { background-color: @base03; } */ + +.topbar-buttons { + margin: 8px; +} + .topbar-buttons > button { - /* Name defined in config after # */ - border: none; - background: transparent; - font-size: 2rem; + /* Name defined in config after # */ + border: none; + background: transparent; + font-size: 2rem; } /* Volume widget */ .widget-volume { - background-color: @base00; - padding: 8px; - margin: 8px; - border-radius: 12px; + background-color: @base00; + padding: 8px; + margin: 8px; + border-radius: 12px; } .widget-volume > box > button { - background: transparent; - border: none; + 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; + background-color: @noti-bg-alt; + padding: 4px 8px 8px 8px; + margin: 0px 8px 8px 8px; + border-radius: 12px; } /* Backlight widget */ .widget-backlight { - background-color: @base00; - padding: 8px; - margin: 8px; - border-radius: 12px; + background-color: @base00; + padding: 8px; + margin: 8px; + border-radius: 12px; } /* Inhibitors widget */ .widget-inhibitors { - margin: 8px; - font-size: 1.5rem; + margin: 8px; + font-size: 1.5rem; } .widget-inhibitors > button { - font-size: initial; - color: @base05; - text-shadow: none; - background: @base00; - border: 1px solid @base02; - box-shadow: none; - border-radius: 12px; + font-size: initial; + color: @base05; + text-shadow: none; + background: @base00; + border: 1px solid @base02; + box-shadow: none; + border-radius: 12px; } .widget-inhibitors > button:hover { - background: @base03; + background: @base03; }