From b07a296bf8ca7c5bd676e3aa1fccf881b7cf4ae9 Mon Sep 17 00:00:00 2001 From: Erik Reider <35975961+ErikReider@users.noreply.github.com> Date: Fri, 15 Dec 2023 15:41:23 +0100 Subject: [PATCH] Updated default style of notifications and control center --- data/style/style.scss | 173 ++++++++++++++++++++----------- src/notification/notification.ui | 4 +- 2 files changed, 114 insertions(+), 63 deletions(-) diff --git a/data/style/style.scss b/data/style/style.scss index 81e5689..97b409c 100644 --- a/data/style/style.scss +++ b/data/style/style.scss @@ -1,9 +1,11 @@ @define-color cc-bg rgba(0, 0, 0, 0.7); @define-color noti-border-color rgba(255, 255, 255, 0.15); -@define-color noti-bg rgb(48, 48, 48); +@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); @@ -13,6 +15,18 @@ @define-color bg-selected rgb(0, 128, 255); +$border: 1px solid #{"@noti-border-color"}; +$border-radius: 12px; + +$font-size-body: 15px; +$font-size-summary: 16px; + +$hover-tranistion: background 0.15s ease-in-out; +$group-collapse-tranistion: opacity 400ms ease-in-out; + +$notification-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); + .notification-row { outline: none; @@ -21,6 +35,8 @@ background: #{"@noti-bg-focus"}; } .notification-background { + padding: 6px 12px; + .close-button { /* The notification Close Button */ background: #{"@noti-close-bg"}; @@ -28,8 +44,9 @@ text-shadow: none; padding: 0; border-radius: 100%; - margin-top: 10px; - margin-right: 16px; + $margin: 6px; + margin-top: $margin; + margin-right: $margin; box-shadow: none; border: none; min-width: 24px; @@ -38,18 +55,18 @@ &:hover { box-shadow: none; background: #{"@noti-close-bg-hover"}; - transition: all 0.15s ease-in-out; + transition: $hover-tranistion; border: none; } } .notification { /* The actual notification */ - border-radius: 12px; - margin: 6px 12px; - 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); + border-radius: $border-radius; + border: $border; padding: 0; + transition: $hover-tranistion; + background: #{"@noti-bg"}; &.low { /* Low Priority Notification */ @@ -65,10 +82,10 @@ padding: 4px; margin: 0; box-shadow: none; - background: #{"@noti-bg"}; - border: 1px solid #{"@noti-border-color"}; + background: transparent; + border: none; color: #{"@text-color"}; - transition: all 0.15s ease-in-out; + transition: $hover-tranistion; } %action-hover { -gtk-icon-effect: none; @@ -78,7 +95,7 @@ .notification-default-action { /* The large action that also displays the notification summary and body */ @extend %action; - border-radius: 12px; + border-radius: $border-radius; &:hover { @extend %action-hover; @@ -92,38 +109,44 @@ .notification-content { background: transparent; - padding: 6px; - border-radius: 12px; + $padding: 6px; + padding: $padding; + border-radius: $border-radius; .image { /* Notification Primary Image */ -gtk-icon-effect: none; - border-radius: 10px; /* Size in px */ + border-radius: 100px; /* Size in px */ + margin: 4px; } - .summary { - /* Notification summary/title */ - font-size: 16px; - font-weight: bold; - background: transparent; - color: #{"@text-color"}; - text-shadow: none; - } - .time { - /* Notification time-ago */ - font-size: 16px; - font-weight: bold; - background: transparent; - color: #{"@text-color"}; - text-shadow: none; - margin-right: 18px; - } - .body { - /* Notification body */ - font-size: 15px; - font-weight: normal; - background: transparent; - color: #{"@text-color"}; - text-shadow: none; + + .text-box { + margin: 0 8px; + .summary { + /* Notification summary/title */ + font-size: $font-size-summary; + font-weight: bold; + background: transparent; + color: #{"@text-color"}; + text-shadow: none; + } + .time { + /* Notification time-ago */ + font-size: $font-size-summary; + font-weight: bold; + background: transparent; + color: #{"@text-color"}; + text-shadow: none; + margin-right: 24px; + } + .body { + /* Notification body */ + font-size: $font-size-body; + font-weight: normal; + background: transparent; + color: #{"@text-color"}; + text-shadow: none; + } } progressbar { @@ -134,7 +157,8 @@ /* The "extra" optional bottom notification image */ margin-top: 6px; background-color: white; - border-radius: 12px; + border-radius: $border-radius; + -gtk-icon-effect: none; } .inline-reply { @@ -145,20 +169,21 @@ background: #{"@noti-bg-darker"}; color: #{"@text-color"}; caret-color: #{"@text-color"}; - border: 1px solid #{"@noti-border-color"}; - border-radius: 12px; + border: $border; + border-radius: $border-radius; } .inline-reply-button { margin-left: 4px; background: #{"@noti-bg"}; - border: 1px solid #{"@noti-border-color"}; - border-radius: 12px; + border: $border; + border-radius: $border-radius; color: #{"@text-color"}; &:disabled { background: initial; color: #{"@text-color-disabled"}; - border: 1px solid transparent; + border: $border; + border-color: transparent; } &:hover { background: #{"@noti-bg-hover"}; @@ -169,19 +194,19 @@ } .notification-action { - /* The sub actions below the default action */ + /* The alternative actions below the default action */ @extend %action; + border-top: $border; border-radius: 0px; - border-top: none; - border-right: none; + border-right: $border; &:first-child { /* add bottom border radius to eliminate clipping */ - border-bottom-left-radius: 10px; + border-bottom-left-radius: $border-radius; } &:last-child { - border-bottom-right-radius: 10px; - border-right: 1px solid #{"@noti-border-color"}; + border-bottom-right-radius: $border-radius; + border-right: none; } &:hover { @@ -227,20 +252,26 @@ } &.collapsed { - /* Set lower stacked notifications opacity to 0 */ - .notification-row:not(:last-child) { - /* Top notification in stack */ - .notification-action *, - .notification-default-action * { - transition: opacity 400ms ease-in-out; - opacity: 0; + .notification-row { + .notification { + background-color: #{"@noti-bg-opaque"}; + } + + &:not(:last-child) { + /* Top notification in stack */ + /* Set lower stacked notifications opacity to 0 */ + .notification-action, + .notification-default-action { + opacity: 0; + } } } &:hover { - .notification-default-action, - .notification-action { - background-color: #{"@noti-bg-hover"}; + .notification-row:not(:only-child) { + .notification { + background-color: #{"@noti-bg-hover-opaque"}; + } } } } @@ -249,6 +280,7 @@ .control-center { /* The Control Center which contains the old notifications + widgets */ background: #{"@cc-bg"}; + border-radius: $border-radius; .control-center-list-placeholder { /* The placeholder when there are no notifications */ @@ -258,16 +290,33 @@ .control-center-list { /* List of notifications */ background: transparent; + + .notification { + box-shadow: $notification-shadow; + + .notification-default-action, + .notification-action { + transition: $group-collapse-tranistion, $hover-tranistion; + + &:hover { + background-color: #{"@noti-bg-hover"}; + } + } + } } } .blank-window { /* Window behind control center and on all other monitors */ - background: #{"alpha(black, 0.25)"}; + background: transparent; } .floating-notifications { background: transparent; + + .notification { + box-shadow: none; + } } /*** Widgets ***/ diff --git a/src/notification/notification.ui b/src/notification/notification.ui index 67e8ed2..af0e92c 100644 --- a/src/notification/notification.ui +++ b/src/notification/notification.ui @@ -81,7 +81,6 @@ True False center - 14 True True vertical @@ -153,6 +152,9 @@ 1 + True