Commit cfbab38f9350eec6987c0b43817d90932d810c58
Styles for toggle button
Alan Shaw committed on 9/15/2017, 9:12:52 PMParent: c5580eb0d33ca90bb4d506404529e1828c6458a0
Files changed
styles/dark/toggle-button.mcss | changed |
styles/dark/toggle-button.mcss | ||
---|---|---|
@@ -1,27 +1,36 @@ | ||
1 | 1 | ToggleButton { |
2 | - font-size: 90%; | |
3 | - background: rgb(112, 112, 112); | |
4 | - border: 2px solid #313131; | |
5 | - transition: opacity 0.2s; | |
6 | - opacity: 0.6; | |
7 | - padding: 6px 12px; | |
8 | - color: white; | |
9 | - border-radius: 3px; | |
10 | - font-weight: bold; | |
11 | - text-decoration: none; | |
12 | - display: block; | |
2 | + display: inline-block | |
3 | + color: #757474 | |
4 | + padding: 8px 10px | |
5 | + background: #2d2c2c | |
6 | + border: 0 | |
7 | + border-radius: 3px | |
8 | + font-size: 13px | |
9 | + cursor: pointer | |
10 | + transition: background-color 0.25s ease, color 0.25s ease | |
13 | 11 | |
14 | 12 | -subscribe { |
15 | - background-color: rgb(88, 171, 204); | |
16 | - border-color: #20699c; | |
13 | + color: #ccc | |
14 | + | |
15 | + :before { | |
16 | + content: '★ ' | |
17 | + } | |
18 | + :hover { | |
19 | + background-color: #45b754; | |
20 | + color: white; | |
21 | + } | |
17 | 22 | } |
18 | 23 | |
19 | 24 | -unsubscribe { |
20 | 25 | background-repeat: no-repeat |
21 | 26 | background-position: right |
22 | 27 | background-image: svg(subscribed) |
23 | 28 | padding-right: 25px |
29 | + | |
30 | + :hover { | |
31 | + background-image: svg(subscribed-hover) | |
32 | + } | |
24 | 33 | } |
25 | 34 | |
26 | 35 | -disabled { |
27 | 36 | cursor: default |
@@ -36,7 +45,13 @@ | ||
36 | 45 | |
37 | 46 | @svg subscribed { |
38 | 47 | width: 20px |
39 | 48 | height: 12px |
40 | - content: "<circle cx='6' stroke='#FFF' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#FFF'/>" | |
49 | + content: "<circle cx='6' stroke='#757474' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#757474'/>" | |
41 | 50 | } |
51 | + | |
52 | + @svg subscribed-hover { | |
53 | + width: 20px | |
54 | + height: 12px | |
55 | + content: "<circle cx='6' stroke='#aaa' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#aaa'/>" | |
56 | + } | |
42 | 57 | } |
Built with git-ssb-web