git ssb

1
AllChannels {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
  overflow-y: 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
    }
64
65
    a {
66
      display: inline
67
      opacity: 0;
68
      font-size: 80%;
69
      background-color: rgb(112, 112, 112);
70
      transition: opacity 0.2s, background-color 0.4s
71
      padding: 9px 10px;
72
      color: white;
73
      border-radius: 3px;
74
      margin: -8px -10px -8px 4px;
75
      border-top-left-radius: 0;
76
      border-bottom-left-radius: 0;
77
      border-left: 2px solid rgba(255, 255, 255, 0.9);
78
      text-decoration: none
79
80
      -subscribe {
81
        :hover {
82
          background-color: #51c067;
83
        }
84
      }
85
86
      -unsubscribe {
87
        :hover {
88
          background: rgb(212, 112, 112);
89
        }
90
      }
91
    }
92
  }
93
}
94