J4 - Cassiopeia - 'Send Email' button colour.

[bannisa]

I changed the colour scheme of my template by including the following in user.css

Code: Select all

:root {
  --cassiopeia-color-primary: #fff;
  --cassiopeia-color-hover: #9669a9;
  --cassiopeia-color-link: blue;
}

This worked fine, until I realised that in setting the primary colour to white the background of my 'Send Email' button was also set to white - and so could not be seen.
I have searched various css files to see where I might create an override in user.css but cannot find anything.
Does anyone out there have an idea?

[imanickam]

The button interface look-and-feel is facilitated by the the css class btn-primary. The following css entries that are found in the file template.css are executed in the following order. You could override these css entries in the file user.css. In fact, the attribute background-color plays a major role in the button color.

Code: Select all

.btn-primary {
  --btn-color: #fff;
  --btn-bg: #010156;
  --btn-border-color: #010156;
  --btn-hover-color: #fff;
  --btn-hover-bg: #010149;
  --btn-hover-border-color: #010145;
  --btn-focus-shadow-rgb: 39, 39, 111;
  --btn-active-color: #fff;
  --btn-active-bg: #010145;
  --btn-active-border-color: #010141;
  --btn-active-shadow: inset 0 3px 5px #00000020;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #010156;
  --btn-disabled-border-color: #010156;
}


.btn-primary {
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--cassiopeia-color-hover);
}

[toivo]

Target the contact form and add the following lines to user.css:

Code: Select all

#contact-form button.btn-primary { 
	background-color: blue;
}