Change color of font of pop up

Question

Hello ,

I would like to change my pop up style and I'll trying to change the font and it doesn't work. I'll working with the sassy theme.

Like you can see, the background color change but not the center and I don't know how to change the font. I didn't find the font color option.

Thank you for your help!

.sassy-theme .esri-widget
      .sassy-theme .esri-widget--button,
      .sassy-theme .esri-menu,

.sassy-theme .esri-popup,
     .sassy-theme .esri-popup__main-container{
        background-color: rgb(27, 27, 9);
      }

.sassy-theme .esri-widget.esri-search,
      .sassy-theme .esri-search .esri-widget--button ,
      .sassy-theme .esri-widget .esri-menu
      {
        background-color: rgb(198, 198, 63);
        color: rgb(121, 5, 50);
        font-size:larger;
        font-family: 'Montserrat';
      }
     .sassy-theme .esri-attribution
     .sassy-theme .esri-attribution a

.sassy-theme .esri-popup .esri-attribution

.sassy-theme .esri-popup .esri-popup__pointer-direction,
      .sassy-theme .esri-popup .esri-popup__button,
      .sassy-theme .esri-button,
      .sassy-theme .esri-input,
      .sassy-theme .esri-widget a

KARIMLABIDI · Answer

So, unfortunetaly, I didn't find antyhing about theses borders.

It's possible to fit the content but it doesn't work  like I Want !

If someone knows about these things, it would be very nice 🙂

Thank you!

KARIMLABIDI · Answer

Thank you @DavidSolari . With the link https://github.com/Esri/arcgis-js-api/blob/4master/assets/esri/themes/base/widgets/_Popup.scss, I found solutions. Now, I miss the border, i didn't find for now. I 'm still searching...

DavidSolari · Answer

For what it's worth, here's what the selectors look like after I ran the CSS through a formatter:

.sassy-theme .esri-widget .sassy-theme .esri-widget--button, .sassy-theme .esri-menu, .sassy-theme .esri-popup, .sassy-theme .esri-popup__main-container{
     background-color: rgb(27, 27, 9);
}
 .sassy-theme .esri-widget.esri-search, .sassy-theme .esri-search .esri-widget--button , .sassy-theme .esri-widget .esri-menu {
     background-color: rgb(198, 198, 63);
     color: rgb(121, 5, 50);
     font-size:larger;
     font-family: 'Montserrat';
}
 .sassy-theme .esri-attribution .sassy-theme .esri-attribution a .sassy-theme .esri-popup .esri-attribution .sassy-theme .esri-popup .esri-popup__pointer-direction, .sassy-theme .esri-popup .esri-popup__button, .sassy-theme .esri-button, .sassy-theme .esri-input, .sassy-theme .esri-widget a

The formatter flagged the last line as an error, maybe the extra definitions are conflicting with something? If it's not that, crack open your dev tools and look at the cascade order on those text elements. You might have to select a more specific element, maybe something related to tables.