notifications.scss 2.99 KB
Newer Older
lain's avatar
lain committed
1
@import '../../_variables.scss';
2

3
.notifications {
4 5
  // a bit of a hack to allow scrolling below notifications
  padding-bottom: 15em;
lain's avatar
lain committed
6

HJ's avatar
HJ committed
7
  .loadmore-error {
HJ's avatar
HJ committed
8 9
    color: $fallback--text;
    color: var(--text, $fallback--text);
HJ's avatar
HJ committed
10 11
  }

12 13
  .notification {
    position: relative;
14

15 16 17 18 19 20
    .notification-overlay {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
HJ's avatar
fixes  
HJ committed
21
      pointer-events: none;
22 23 24 25 26 27 28
    }

    &.unseen {
      .notification-overlay {
        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
      }
    }
29 30
  }
}
31

32 33 34 35
.notification {
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid;
HJ's avatar
HJ committed
36 37
  border-color: $fallback--border;
  border-color: var(--border, $fallback--border);
38

39
  &:hover .animated.avatar {
40 41
    canvas {
      display: none;
42
    }
43 44
    img {
      visibility: visible;
Shpuld Shpludson's avatar
Shpuld Shpludson committed
45
    }
46
  }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
47

48 49 50
  .notification-usercard {
    margin: 0;
  }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
51

52 53 54 55 56 57 58 59 60 61 62 63 64 65
  .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;
HJ's avatar
HJ committed
66
        color: var(--faint, $fallback--faint);
HJ's avatar
HJ committed
67 68 69
        a {
          color: var(--faintLink);
        }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
70
      }
71
      padding: 0;
72
      .media-body {
73
        margin: 0;
Shpuld Shpludson's avatar
Shpuld Shpludson committed
74
      }
75 76
    }
  }
lain's avatar
lain committed
77

78 79 80
  .follow-text {
    padding: 0.5em 0;
  }
81

82 83 84
  .status-el {
    flex: 1;
  }
eal's avatar
eal committed
85

86 87 88
  time {
    white-space: nowrap;
  }
89

90 91 92 93 94
  .notification-right {
    flex: 1;
    padding-left: 0.8em;
    min-width: 0;
  }
95

96 97 98 99 100 101 102
  .notification-details {
    min-width: 0px;
    word-wrap: break-word;
    line-height:18px;
    position: relative;
    overflow: hidden;
    width: 100%;
Shpuld Shpludson's avatar
Shpuld Shpludson committed
103
    flex: 1 1 0;
104 105
    display: flex;
    flex-wrap: nowrap;
106
    justify-content: space-between;
107

108 109
    .name-and-action {
      flex: 1;
110 111
      overflow: hidden;
      text-overflow: ellipsis;
112
    }
113

114 115
    .username {
      font-weight: bolder;
116 117 118
      max-width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
119 120 121 122 123 124 125

      img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        object-fit: contain
      }
126
    }
127

128 129 130 131
    .timeago {
      margin-right: .2em;
    }

132 133 134
    .icon-retweet.lit {
      color: $fallback--cGreen;
      color: var(--cGreen, $fallback--cGreen);
135
    }
136

137 138 139 140
    .icon-user-plus.lit {
      color: $fallback--cBlue;
      color: var(--cBlue, $fallback--cBlue);
    }
141

142 143 144
    .icon-reply.lit {
      color: $fallback--cBlue;
      color: var(--cBlue, $fallback--cBlue);
145
    }
146

147 148 149 150 151
    .icon-star.lit {
      color: orange;
      color: $fallback--cOrange;
      color: var(--cOrange, $fallback--cOrange);
    }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
152

153 154 155 156
    .status-content {
      margin: 0;
      max-height: 300px;
    }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
157

158 159 160 161 162 163 164 165 166
    h1 {
      word-break: break-all;
      margin: 0 0 0.3em;
      padding: 0;
      font-size: 1em;
      line-height:20px;
      small {
        font-weight: lighter;
      }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
167 168
    }

169 170 171 172 173
    p {
      margin: 0;
      margin-top: 0;
      margin-bottom: 0.3em;
    }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
174
  }
175
}