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