Files: 7a2806f51cfcc2a146b0f508dbfde798a1fa11c3 / styles / light / channel-list.mcss
1689 bytesRaw
1 | ChannelList { |
2 | a.channel { |
3 | display: flex; |
4 | padding: 8px 10px; |
5 | font-size: 110%; |
6 | margin: 4px 0; |
7 | background: rgba(255, 255, 255, 0.66); |
8 | color: #333; |
9 | border-radius: 5px; |
10 | position: relative |
11 | transition: background-color 0.2s |
12 | max-width: 250px; |
13 | |
14 | background-repeat: no-repeat |
15 | background-position: right |
16 | |
17 | -more { |
18 | color: #658aaf; |
19 | background: rgb(255, 255, 255); |
20 | } |
21 | |
22 | -subscribed { |
23 | background-image: svg(subscribed) |
24 | border-left: 2px solid #51c067; |
25 | border-top-left-radius: 0; |
26 | border-bottom-left-radius: 0; |
27 | } |
28 | |
29 | @svg subscribed { |
30 | width: 20px |
31 | height: 12px |
32 | content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>" |
33 | } |
34 | |
35 | :hover { |
36 | background: rgba(255, 255, 255, 0.4); |
37 | text-decoration: none; |
38 | a { |
39 | transition: opacity 0.05s |
40 | opacity: 1 |
41 | } |
42 | } |
43 | |
44 | span.name { |
45 | flex: 1 |
46 | white-space: nowrap; |
47 | min-width: 0; |
48 | } |
49 | |
50 | a { |
51 | display: inline |
52 | opacity: 0; |
53 | font-size: 80%; |
54 | background-color: rgb(112, 112, 112); |
55 | transition: opacity 0.2s, background-color 0.4s |
56 | padding: 9px 10px; |
57 | color: white; |
58 | border-radius: 4px; |
59 | font-weight: bold; |
60 | margin: -8px -10px -8px 4px; |
61 | border-top-left-radius: 0; |
62 | border-bottom-left-radius: 0; |
63 | border-left: 2px solid rgba(255, 255, 255, 0.9); |
64 | text-decoration: none |
65 | |
66 | -subscribe { |
67 | :hover { |
68 | background-color: rgb(112, 184, 212); |
69 | } |
70 | } |
71 | |
72 | -unsubscribe { |
73 | :hover { |
74 | background: rgb(212, 112, 112); |
75 | } |
76 | } |
77 | } |
78 | } |
79 | } |
80 |
Built with git-ssb-web