git ssb

1
AllChannels {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
  overflow: auto
6
  padding: 10px;
7
8
  a.channel {
9
    display: flex;
10
    padding: 8px 10px;
11
    font-size: 110%;
12
    margin: 4px;
13
    background: #2d2c2c;
14
    color: #ccc;
15
    border-radius: 3px;
16
    position: relative
17
    transition: background-color 0.25s
18
    width: 200px;
19
20
    background-repeat: no-repeat
21
    background-position: right
22
23
    -more {
24
      background-color: transparent
25
      color: #6e6d6d
26
27
      :hover {
28
        background-color: transparent
29
        color: #ccc
30
      }
31
    }
32
33
    -subscribed {
34
      background-image: svg(subscribed)
35
      border-left: 2px solid #51c067;
36
      border-top-left-radius: 0;
37
      border-bottom-left-radius: 0;
38
39
      span.name {
40
        font-weight: bold
41
      }
42
    }
43
44
    @svg subscribed {
45
      width: 20px
46
      height: 12px
47
      content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
48
    }
49
50
    :hover {
51
      background: #383736;
52
      text-decoration: none;
53
      a {
54
        transition: opacity 0.05s
55
        opacity: 1
56
      }
57
    }
58
59
    span.name {
60
      flex: 1
61
      white-space: nowrap;
62
      min-width: 0;
63
      overflow: hidden;
64
      text-overflow: ellipsis;
65
    }
66
67
    a {
68
      display: inline
69
      opacity: 0;
70
      font-size: 80%;
71
      background-color: rgb(112, 112, 112);
72
      transition: opacity 0.2s, background-color 0.4s
73
      padding: 9px 10px;
74
      color: white;
75
      border-radius: 3px;
76
      margin: -8px -10px -8px 4px;
77
      border-top-left-radius: 0;
78
      border-bottom-left-radius: 0;
79
      border-left: 2px solid rgba(255, 255, 255, 0.9);
80
      text-decoration: none
81
82
      -subscribe {
83
        :hover {
84
          background-color: #51c067;
85
        }
86
      }
87
88
      -unsubscribe {
89
        :hover {
90
          background: rgb(212, 112, 112);
91
        }
92
      }
93
    }
94
  }
95
}
96