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