git ssb

1
FollowGraph {
2
  position: relative
3
  display: flex
4
  flex-wrap: wrap
5
  justify-content: center
6
  margin: 10px
7
  
8
9
  div {
10
    display: flex
11
    align-items: center;
12
    border-radius: 3px
13
    padding: 5px
14
    background: #353535
15
    margin: 5px
16
    white-space: nowrap
17
    overflow: hidden
18
19
    div {
20
      display: flex;
21
      align-items: center;
22
      flex-wrap: wrap;
23
24
      -left {
25
        background: #111;
26
        padding: 5px;
27
        margin: -5px;
28
        border-radius: 3px
29
      }
30
31
      a {
32
        vertical-align: middle
33
        display: inline-block
34
        img {
35
          display: block
36
          width: 45px;
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 {
79
      span { :after {
80
        content: '✓'
81
      }}
82
    }
83
84
    -unfollowed {
85
      background-color: #39434c
86
      span { :after {
87
        content: '⊗'
88
      }}
89
    }
90
91
    -identify {
92
      background-color: #afafaf
93
      span { :after {
94
        content: '👤'
95
      }}
96
    }
97
98
99
    span {
100
      vertical-align: middle;
101
      position: relative;
102
      display: inline-flex;
103
      align-items: center;
104
      background: svg(arrow) no-repeat right
105
      background-size: cover;
106
      height: 45px;
107
      margin-right: 3px;
108
      padding-left: 8px;
109
      padding-right: 15px;
110
111
      :after {
112
        color: white;
113
        font-size: 15px;
114
        vertical-align: middle;
115
        display: inline-block;
116
      }
117
118
      @svg arrow {
119
        width: 64px
120
        height: 64px
121
        path {
122
          fill: #111
123
        }
124
        content: "<path d='M40 54 L64 32 L40 10 L28 10 L16 0 L0 0 L0 64 L16 64 L28 54 Z' />"
125
      }
126
    }    
127
  }
128
}