| 1 |
/* |
| 2 |
* The button or link that opens a donation form embedded as a modal or in |
| 3 |
* a new tab. Shared by the WordPress block and the external embed script, |
| 4 |
* which inlines it (externalEmbed/styles.scss), so keep it free of |
| 5 |
* WordPress-only selectors. |
| 6 |
*/ |
| 7 |
|
| 8 |
/* |
| 9 |
* Text color from the button color's own lightness: white on a dark primary |
| 10 |
* color, black on a light one. Relative color syntax; browsers without it |
| 11 |
* keep the white declared first. Interpolated so Sass leaves the math to CSS. |
| 12 |
*/ |
| 13 |
$launcher-text-color: #{'oklch(from var(--givewp-primary-color, #2271b1) clamp(0, (0.7 - l) * 1000, 1) 0 0)'}; |
| 14 |
|
| 15 |
.givewp-donation-form-link, |
| 16 |
.givewp-donation-form-modal__open { |
| 17 |
color: #ffffff !important; |
| 18 |
color: $launcher-text-color !important; |
| 19 |
background: var(--givewp-primary-color, #2271b1) !important; |
| 20 |
padding: 0.75rem 1.25rem !important; |
| 21 |
cursor: pointer; |
| 22 |
border: none; |
| 23 |
border-radius: 5px; |
| 24 |
font-size: 1rem; |
| 25 |
font-weight: 500 !important; |
| 26 |
text-decoration: none !important; |
| 27 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', |
| 28 |
sans-serif; |
| 29 |
|
| 30 |
transition: background-color 0.2s ease; |
| 31 |
|
| 32 |
/* |
| 33 |
* Theme and host-page rules such as `button:hover` or `a:hover` outrank a |
| 34 |
* lone class and would recolor the launcher with the theme's hover color. |
| 35 |
* Own every state: the same darkening the campaign donate button uses. |
| 36 |
*/ |
| 37 |
&:hover, |
| 38 |
&:focus, |
| 39 |
&:active { |
| 40 |
color: #ffffff !important; |
| 41 |
color: $launcher-text-color !important; |
| 42 |
background: color-mix(in srgb, var(--givewp-primary-color, #2271b1), black 20%) !important; |
| 43 |
text-decoration: none !important; |
| 44 |
} |
| 45 |
} |
| 46 |
|
