git ssb

1
FeedMetaSummary {
2
  position: relative
3
  display: flex
4
  flex-wrap: wrap
5
  justify-content: center
6
  margin: 10px
7
  div {
8
    display: flex
9
    align-items: center
10
    border-radius: 3px
11
    padding: 5px
12
    background: #353535
13
    margin: 5px
14
    white-space: nowrap
15
    overflow: hidden
16
    div {
17
      display: flex
18
      align-items: center
19
      flex-wrap: wrap
20
      -left {
21
        background: #111
22
        padding: 5px
23
        margin: -5px
24
        border-radius: 3px
25
      }
26
      strong {
27
        margin-left: 3px
28
        font-size: 20px
29
        font-weight: normal
30
      }
31
      a {
32
        vertical-align: middle
33
        display: inline-block
34
        img {
35
          display: block
36
          width: 45px
37
          height: 45px
38
          border-radius: 3px
39
          object-fit: cover
40
        }
41
        -channel {
42
          font-size: 20px
43
          color: #91c1ec
44
          border-bottom: 1px dotted #91c1ec
45
          margin: 5px
46
        }
47
      }
48
      a + a {
49
        margin-left: 3px
50
      }
51
    }
52
    span {
53
      vertical-align: middle
54
      position: relative
55
      display: inline-flex
56
      align-items: center
57
      background: svg(arrow) no-repeat right
58
      background-size: cover
59
      height: 45px
60
      margin-right: 3px
61
      padding-left: 10px
62
      padding-right: 13px
63
      :after {
64
        color: white
65
        font-size: 15px
66
        vertical-align: middle
67
        display: inline-block
68
      }
69
      @svg arrow {
70
        width: 64px
71
        height: 64px
72
        content: "<path d='M40 54 L64 32 L40 10 L28 10 L16 0 L0 0 L0 64 L16 64 L28 54 Z' />"
73
        path {
74
          fill: #111
75
        }
76
      }
77
    }
78
    -blocked {
79
      background-color: #382c01
80
      span {
81
        :after {
82
          content: '⚠️'
83
          color: #ffa603
84
        }
85
      }
86
      div {
87
        -right {
88
          opacity: 0.7
89
          :hover {
90
            opacity: 1
91
          }
92
        }
93
      }
94
    }
95
    -unblocked {
96
      background-color: #39434c
97
      span {
98
        :after {
99
          content: '?'
100
        }
101
      }
102
    }
103
    -followed, -subscribed {
104
      span {
105
        :after {
106
          content: '✓'
107
        }
108
      }
109
    }
110
    -unfollowed, -unsubscribed {
111
      background-color: #39434c
112
      span {
113
        :after {
114
          content: '⊗'
115
        }
116
      }
117
      div {
118
        -right {
119
          opacity: 0.7
120
          :hover {
121
            opacity: 1
122
          }
123
        }
124
      }
125
    }
126
    -identified {
127
      background-color: #afafaf
128
      span {
129
        :after {
130
          content: '👤'
131
        }
132
      }
133
    }
134
  }
135
}
136