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