XF 2.3 Popup text and X color

[philmckrackon]

Been looking for what colors the text and dismiss "X" in the XF popups. Any hints or pointers? CSS or style setting?
Nothing here seams to control this and I do not see anything in extra.less either. On F12 I cannot find the CSS element.


Popup:


On X hover:


Text highlighted:

 

[CedricV]

.overlay-titleCloser

That's the CSS class, which you can add in extra less.

(unless I don't understand what you mean)

 

[philmckrackon]

.overlay-titleCloser

That's the CSS class, which you can add in extra less.

(unless I don't understand what you mean)

I edited my initial post for clarity. So it's not in the style settings?

 

[CedricV]

I don't think there is a setting, but adding it to the extra less would work:

.overlay-title {
     color: hsla(var(--xf-majorHeadingTextColor));
}

.overlay-titleCloser {
    color: hsla(var(--xf-majorHeadingTextColor));
}

 

[philmckrackon]

TY , CSS is not my forte...

// Popup Title and Dismiss Color
.overlay-title {
     color: orange;
}
.overlay-titleCloser {
    color: orange;
}

 

[philmckrackon]

Time for a revisit. I am having an issue with the 'a' reference font color in the .overlay-title div. Can you suggest CSS to add the color change and add an underline on hover? @CedricV

a:hover
text-decoration: underline;

 

[philmckrackon]

Probably a better way but this works except it also overrides the closer X color.

// Popup Title and Dismiss Color
.overlay-title {
     color: orange;
}
.overlay-title a {
     color: red;
    text-decoration: underline;
}
.overlay-titleCloser {
    color: orange;
}

 

[CedricV]

Try this:

.overlay-title {
    color: orange;
}

.overlay-title a {
    color: red;
}

.overlay-titleCloser {
    color: orange !important;
}

The important tag should force orange color on the closer.

 

[philmckrackon]

Try this:

.overlay-title {
    color: orange;
}

.overlay-title a {
    color: red;
}

.overlay-titleCloser {
    color: orange !important;
}

The important tag should force orange color on the closer.

Tie post...
TY, I changed the code to this while you were replying and this is the result.

// Popup Title and Dismiss Color
.overlay-title {
     color: orange;
}
.overlay-title a {
     color: red;
    text-decoration: underline;
}
.overlay-titleCloser.js-overlayClose {
    color: orange;
}