diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 1f1650d..0ae3bca 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -198,31 +198,44 @@ solid-notifications { -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: thin; - scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background); + scrollbar-color: #C9C8C8 #F1F1F1; &::-webkit-scrollbar-track { - background: var(--color-notification-scrollbar-background); + background: #F1F1F1; } &::-webkit-scrollbar-thumb { - background-color: var(--color-notification-scrollbar-track); - border-radius: 6px; + background-color: #C9C8C8; + border-radius: 8px; } &::-webkit-scrollbar { - width: 6px; + width: 8px; } /* End of custom scrollbar */ .solid-notifications__item { - /*border-bottom: 1px solid var(--color-notification-item-border);*/ + border-bottom: none; + + &:hover { + background-color: transparent; + + & solid-notification__title, + & solid-notification__summary { + color: var(--color-secondary); + } + } .solid-notification { padding: 1.2rem 0 1.5rem; + &[data-read] { + opacity: 0.5; + } + .solid-notification__avatar { align-items: center; - background: var(--color-avatar-background); + background: var(--color-grey); display: flex; height: 35px; justify-content: center; @@ -234,7 +247,7 @@ solid-notifications { width: 35px; img { - background-color: var(--color-grey-10); + background-color: var(--color-grey); height: 100%; object-fit: cover; object-position: center center; @@ -257,9 +270,14 @@ solid-notifications { .solid-notification__title__side { font-weight: normal; + + >span:first-child { + margin-right: 4px; + } } .solid-notification__title__icon { + display: inline-block; font-family: simple-line-icons; } }