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

3
.notifications {
4 5 6 7
  &:not(.minimal) {
    // a bit of a hack to allow scrolling below notifications
    padding-bottom: 15em;
  }
lain's avatar
lain committed
8

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

14 15
  .notification {
    position: relative;
16

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

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

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

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

49 50 51 52
  .muted {
    padding: .25em .6em;
  }

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

kPherox's avatar
kPherox committed
79
  .follow-text, .move-text {
80 81
    padding: 0.5em 0;
  }
82

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

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

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

97 98 99 100 101 102 103
  .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
104
    flex: 1 1 0;
105 106
    display: flex;
    flex-wrap: nowrap;
107
    justify-content: space-between;
108

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

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

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

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

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

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

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

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

kPherox's avatar
kPherox committed
154 155 156 157 158
    .icon-arrow-curved.lit {
      color: $fallback--cBlue;
      color: var(--cBlue, $fallback--cBlue);
    }

159 160 161 162
    .status-content {
      margin: 0;
      max-height: 300px;
    }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
163

164 165 166 167 168 169 170 171 172
    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
173 174
    }

175 176 177 178 179
    p {
      margin: 0;
      margin-top: 0;
      margin-bottom: 0.3em;
    }
Shpuld Shpludson's avatar
Shpuld Shpludson committed
180
  }
181
}