Files: 4d9f238ff73f7136cd292da88f06c17fe1a8c445 / styles / base / all-channels.mcss
1446 bytesRaw
1 | AllChannels { |
2 | display: flex |
3 | flex-wrap: wrap |
4 | justify-content: center |
5 | overflow: auto |
6 | padding: 10px |
7 | a.channel { |
8 | display: flex |
9 | padding: 8px 10px |
10 | font-size: 110% |
11 | margin: 4px |
12 | border-radius: 5px |
13 | position: relative |
14 | width: 200px |
15 | background-repeat: no-repeat |
16 | background-position: right |
17 | -subscribed { |
18 | background-image: svg(subscribed) |
19 | span.name { |
20 | font-weight: bold |
21 | } |
22 | border-left: 2px solid rgb(81, 192, 103) |
23 | border-top-left-radius: 0 |
24 | border-bottom-left-radius: 0 |
25 | } |
26 | @svg subscribed { |
27 | width: 20px |
28 | height: 12px |
29 | content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>" |
30 | } |
31 | :hover { |
32 | text-decoration: none |
33 | a { |
34 | transition: opacity 0.05s |
35 | opacity: 1 |
36 | } |
37 | } |
38 | span.name { |
39 | flex: 1 |
40 | white-space: nowrap |
41 | min-width: 0 |
42 | overflow: hidden |
43 | text-overflow: ellipsis |
44 | } |
45 | a { |
46 | display: inline |
47 | opacity: 0 |
48 | font-size: 80% |
49 | background-color: rgb(112, 112, 112) |
50 | transition: opacity 0.2s, background-color 0.4s |
51 | padding: 9px 10px |
52 | color: white |
53 | margin: -8px -10px -8px 4px |
54 | border-radius: 5px; |
55 | border-left: 2px solid rgba(255, 255, 255, 0.9) |
56 | text-decoration: none |
57 | -unsubscribe { |
58 | :hover { |
59 | background: rgb(212, 112, 112) |
60 | } |
61 | } |
62 | } |
63 | } |
64 | } |
65 |
Built with git-ssb-web