From 6b35f9e5d32b214bf4bfdecd2dff0de8f683a85a Mon Sep 17 00:00:00 2001 From: Anees Ahee Date: Mon, 19 Aug 2024 16:05:37 +0100 Subject: [PATCH] Round off notification focus outlines (#225824) * Round off notification focus outlines * more changes needed * hygiene --------- Co-authored-by: Benjamin Pasero --- .../parts/notifications/media/notificationsCenter.css | 8 +++----- .../parts/notifications/media/notificationsList.css | 6 ------ .../parts/notifications/media/notificationsToasts.css | 7 +++++++ 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css b/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css index b4ac21708ba..a9e4fd0ebb0 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css @@ -44,14 +44,12 @@ justify-content: flex-end; } -.monaco-workbench > .notifications-center .notifications-list-container .monaco-list-row[data-last-element="false"] > .notification-list-item { +.monaco-workbench > .notifications-center .notifications-list-container .monaco-list-row:not(:last-child) > .notification-list-item { border-bottom: 1px solid var(--vscode-notifications-border); } -.monaco-workbench > .notifications-center .notifications-list-container, -.monaco-workbench > .notifications-center .notifications-list-container .monaco-scrollable-element, -.monaco-workbench > .notifications-center .notifications-list-container .notification-list-item { - border-radius: 0; +.monaco-workbench > .notifications-center .notifications-list-container .monaco-list-row:last-child { + border-radius: 0px 0px 4px 4px; /* adopt the border radius at the end of the notifications center */ } /* Icons */ diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsList.css b/src/vs/workbench/browser/parts/notifications/media/notificationsList.css index 1e46a103a1d..c5b4faf8e49 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsList.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsList.css @@ -9,7 +9,6 @@ color: var(--vscode-notifications-foreground); background: var(--vscode-notifications-background); outline-color: var(--vscode-contrastBorder); - border-radius: inherit; } .monaco-workbench .notifications-list-container .notification-list-item { @@ -19,7 +18,6 @@ padding: 10px 5px; height: 100%; box-sizing: border-box; - border-radius: 4px; } .monaco-workbench .notifications-list-container .notification-offset-helper { @@ -29,10 +27,6 @@ word-wrap: break-word; /* never overflow long words, but break to next line */ } -.monaco-workbench .notifications-list-container .monaco-scrollable-element { - border-radius: 4px; -} - /** Notification: Main Row */ .monaco-workbench .notifications-list-container .notification-list-item > .notification-list-item-main-row { diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css index 89ce01ed02b..d4ef2314bc5 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css @@ -30,6 +30,13 @@ transform: translate3d(0px, 100%, 0px); /* move the notification 50px to the bottom (to prevent bleed through) */ opacity: 0; /* fade the toast in */ transition: transform 300ms ease-out, opacity 300ms ease-out; +} + +.monaco-workbench > .notifications-toasts .notifications-list-container, +.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast, +.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast .monaco-scrollable-element, +.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast .monaco-list:not(.element-focused):focus:before, +.monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast .monaco-list-row { border-radius: 4px; }