git ssb

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