root pseudo class no longer working for Frameless HTML output

[KarenMinOR]

Using RoboHelp 2020.5.71

Our CSS files contain the :root{} pseudo class to define our corporate color palette, and the rest of the CSS relies on these color variables, rather than the Hex codes. Everything looked great until I upgraded to Update 5. Now, none of the color variables are accessible in the generated HTML!

(Oddly, the colors come through in the PDF. We use a different CSS for the PDF output, but the colors are defined exactly the same way.)

Using the browser's inspector, I see that all the color variables are "undefined," even though the css shows them right at the top -- same as they were before the update.

The only thing that changed was RoboHelp itself. Since applying the update, I haven't changed the web css. Before I log a bug, I wanted to ask here: Has this happened to anyone else?

Here's what the top of my css looks like:

:root {
  --dmrc_black: #393536;
  --dmrc_dkgray: #58585b;
  --dmrc_medgray: #939597;
  --dmrc_ltgray: #d1d2d4;
  --dmrc_dkwhite: #E6E7E8;
  --dmrc_white: #f1f1f2;
  --dmrc_blueblack: #051c2c;
  --dmrc_navy: #13274a;
  --dmrc_dkblue: #1b365d;
  --dmrc_blue: #005a96;
  --dmrc_ltblue: #41b6e6;
  --dmrc_paleblue: #b9d9eb;
  --dmrc_ecru: #e5dabe;
  --dmrc_orange: #cb6015;
  --dmrc_red: #ee1532;
  --dmrc_gold: #ff9e15;
  --dmrc_dkgreen: #2c704f;
  --dmrc_ltgreen: #8fc53c;
}

 And my classes look something like this:

p.attn_tip {
  background-color: var(--dmrc_dkgreen);
  padding: 25px;
  border-radius: 5px;
  color: white;
  font-style: normal;
}

 Ideas? I'm at a loss.

[Amebr]

Perhaps check the css file in the output using a text editor, to see if the generation process has mangled something.

[Stefan-Gentz]

Tough one …

I have a hunch: RoboHelp pushes custom CSS into the .RH-LAYOUT-CENTERPANEL-topic-box and .RH-LAYOUT-FOOTER-container to separate it from the "framework" around the topic itself. And then your :root selector does not work anymore.

I rebuilt this with your code and the custom CSS looks like this in the output:

.RH-LAYOUT-CENTERPANEL-topic-box :root, .RH-LAYOUT-FOOTER-container :root {
  --dmrc_black: #393536;
  --dmrc_dkgray: #58585b;
  --dmrc_medgray: #939597;
  --dmrc_ltgray: #d1d2d4;
  --dmrc_dkwhite: #E6E7E8;
  --dmrc_white: #f1f1f2;
  --dmrc_blueblack: #051c2c;
  --dmrc_navy: #13274a;
  --dmrc_dkblue: #1b365d;
  --dmrc_blue: #005a96;
  --dmrc_ltblue: #41b6e6;
  --dmrc_paleblue: #b9d9eb;
  --dmrc_ecru: #e5dabe;
  --dmrc_orange: #cb6015;
  --dmrc_red: #ee1532;
  --dmrc_gold: #ff9e15;
  --dmrc_dkgreen: #2c704f;
  --dmrc_ltgreen: #8fc53c;
}

.RH-LAYOUT-CENTERPANEL-topic-box p.attn_tip, .RH-LAYOUT-FOOTER-container p.attn_tip {
  background-color: var(--dmrc_dkgreen);
  padding: 25px;
  border-radius: 5px;
  color: white;
  font-style: normal;
}

Note the .RH-LAYOUT-CENTERPANEL-topic-box added to your CSS.

By the way, if I add class="RH-LAYOUT-CENTERPANEL-topic-box" to a topic's body element, it starts working …

I have not completely understood how to solve this, but maybe we are one step closer now … Maybe you need to put the :root manually into the CSS of the skin? My gut feeling is this could solve it.

[defaultbt4uzj77vtg6]

Thank you for the replies!

The :root{} pseudo-class with all my colors worked fine in Update 4. It only stopped working after I installed Update 5 and rebuilt all my projects. I wish I'd kept one from Update 4 so I could compare the CSS! Too confident, I suppose. (Can I back out the Update 5, or am I committed forever?)

How would I edit the CSS for the skin? I didn't find any css files in the project\publish\skins\frameless folder, just image files.

I submitted a bug report: RH-9448 | Tracker (adobe.com) (update 5 was not an option for selecting the build, so I had to improvise). If you're of a mind to vote for it, I'd appreciate the visibility! I do need to get this fixed.

Thanks!

[KarenMinOR]

Oops. That was me ^ Wrong login.

[Amebr]

To add it to your skin, create a css file with your colour variables and add it in the User Assets section (the location of this section may depend on your skin).

To downgrade, I think you have to uninstall RH completely , then install update 4. You can download the updates here: https://www.adobe.com/support/robohelp/downloads.html

[KarenMinOR]

Thank you! That's helpful to know. 

[Surbhi_Maheshwari · Accepted solution]

Hi,

Issue is there in Update 5 and we are able to reproduce it. We will fix it in upcoming updates.

Workaround is to move the variables from :root to body{} and regenerating Frameless output. Then variables should resolve fine. Can you please give it a try and let us know how it goes?

Thanks for your help and patience.

Regards,
Surbhi Maheshwari

[KarenMinOR]

Ahh! Thank you! I moved the color variables to the body {} definition and it works just fine!