| 1 | button.colorpad { |
| 2 | &, &:hover, &:active, &:checked { |
| 3 | &, &:backdrop { background-color: #{'@colorpad_color'}; } |
| 4 | } |
| 5 | color: #{'@colorpad_fg_color'}; |
| 6 | |
| 7 | &:hover { filter: brightness(93%); } |
| 8 | &:active { filter: brightness(86%); } |
| 9 | |
| 10 | &:checked { |
| 11 | filter: brightness(100%); |
| 12 | box-shadow: |
| 13 | 0px 0px 0px 1.5px $selected_bg_color, |
| 14 | inset 0px -3px 0px 0px #{'@colorpad_fg_color'}; |
| 15 | } |
| 16 | } |
| 17 | |
| 18 | button.colorsetter { |
| 19 | &, &:hover, &:active, &:checked { |
| 20 | &, &:backdrop { background-color: #{'@colorsetter_color'}; } |
| 21 | } |
| 22 | color: #{'@colorsetter_fg_color'}; |
| 23 | |
| 24 | &:hover { filter: brightness(93%); } |
| 25 | |
| 26 | &:active { filter: brightness(86%); } |
| 27 | |
| 28 | &:checked { filter: brightness(100%); } |
| 29 | } |
| 30 | |
| 31 | .overlay_toolbar, .overlay_toolbar_scrollable { |
| 32 | background: lighten($base_color, 5%);; |
| 33 | padding: 10px; |
| 34 | } |