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