diff options
Diffstat (limited to 'src/components/notifications/notifications.scss')
| -rw-r--r-- | src/components/notifications/notifications.scss | 228 |
1 files changed, 159 insertions, 69 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 241f10b4..9cbb1226 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,10 +4,24 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; + .panel { + background: $fallback--bg; + background: var(--bg, $fallback--bg) + } + + .panel-body { + border-color: $fallback--border; + border-color: var(--border, $fallback--border) + } + .panel-heading { // force the text to stay centered, while keeping // the button in the right side of the panel heading position: relative; + background: $fallback--btn; + background: var(--btn, $fallback--btn); + color: $fallback--fg; + color: var(--fg, $fallback--fg); .read-button { position: absolute; right: 0.7em; @@ -18,7 +32,8 @@ .unseen-count { display: inline-block; - background-color: rgba(255, 16, 8, 0.8); + background-color: $fallback--cRed; + background-color: var(--cRed, $fallback--cRed); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); min-width: 1.3em; border-radius: 1.3em; @@ -29,92 +44,167 @@ line-height: 1.3em; } - .notification { - // Will have to use pixels here to ensure consistent distance with - // pad alone and pad + border, browsers bad at rounding this with em, - // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em, - // which does not happen with 10px vs 4px + 6px. - padding: 0.4em 0 0 10px; - display: flex; - border-bottom: 1px solid; - border-bottom-color: inherit; + .unseen { + border-left: 4px solid $fallback--cRed; + border-left: 4px solid var(--cRed, $fallback--cRed); + padding-left: 0; + } +} +.notification { + box-sizing: border-box; + display: flex; + border-bottom: 1px solid; + border-bottom-color: inherit; + padding-left: 4px; + + .avatar-compact { + width: 32px; + height: 32px; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + overflow: hidden; + line-height: 0; + + &.animated::before { + display: none; + } + } - .text { - min-width: 0px; - word-wrap: break-word; - line-height:18px; - position: relative; - overflow: hidden; + &:hover .animated.avatar { + canvas { + display: none; + } + img { + visibility: visible; + } + } - .icon-retweet.lit { - color: $green; - } + .notification-usercard { + margin: 0; + } - .icon-user-plus.lit { - color: $blue; + .non-mention { + display: flex; + flex: 1; + flex-wrap: nowrap; + padding: 0.6em; + min-width: 0; + .avatar-container { + width: 32px; + height: 32px; + } + .status-el { + .status { + padding: 0.25em 0; + color: $fallback--faint; + color: var($fallback--faint, --faint); } - - .icon-reply.lit { - color: $blue; + padding: 0; + .media-body { + margin: 0; } + } + } - .icon-star.lit { - color: orange; - } + .follow-text { + padding: 0.5em 0; + } - .status-content { - margin: 0; - max-height: 300px; - } + .status-el { + flex: 1; + } - h1 { - word-break: break-all; - margin: 0 0 0.3em; - padding: 0; - font-size: 1em; - line-height:20px; - small { - font-weight: lighter; - } - } + time { + white-space: nowrap; + } - padding: 0.3em 0.8em 0.5em; - p { - margin: 0; - margin-top: 0; - margin-bottom: 0.3em; - } + .notification-right { + flex: 1; + padding-left: 0.8em; + min-width: 0; + } + + .notification-details { + min-width: 0px; + word-wrap: break-word; + line-height:18px; + position: relative; + overflow: hidden; + width: 100%; + flex: 1 1 0; + display: flex; + flex-wrap: nowrap; + + .name-and-action { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; } - .avatar { - padding-top: 0.3em; - width: 32px; - height: 32px; - border-radius: 50%; + .username { + font-weight: bolder; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + } + .timeago { + float: right; + font-size: 12px; } - &:last-child { - border-bottom: none; - border-radius: 0 0 10px 10px; + .icon-retweet.lit { + color: $fallback--cGreen; + color: var(--cGreen, $fallback--cGreen); } - } - .notification-content { - max-height: 12em; - overflow-y: hidden; - //text-overflow: ellipsis; - } + .icon-user-plus.lit { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); + } - .notification-gradient { - position: absolute; - width: 100%; - height: 4em; - margin-top:8em; + .icon-reply.lit { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); + } + + .icon-star.lit { + color: orange; + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); + } + + .status-content { + margin: 0; + max-height: 300px; + } + + h1 { + word-break: break-all; + margin: 0 0 0.3em; + padding: 0; + font-size: 1em; + line-height:20px; + small { + font-weight: lighter; + } + } + + p { + margin: 0; + margin-top: 0; + margin-bottom: 0.3em; + } } - .unseen { - border-left: 4px solid rgba(255, 16, 8, 0.75); - padding-left: 6px; + // ugly as heck + &:last-child { + border-bottom: none; + border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; + border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); + .status-el { + border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; + border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); + } } } |