Specifically @prince-overlay. However, I want to apply this overlay based on a javascript condition i.e.: if an account status is pending, show the overlay, if it isn't, don't show the overlay. I was even looking for the source code of that @rule to use the ruleset in a user-defined class (i.e.: .overlay { ... } that I could pass into a 'if' statement, but I'm unable to find it. (I'm new to prince)

@prince-overlay {
  color: rgba(0,0,0,0.2);
  content: "Pending Approval";
  font-size: 100px;
  transform: rotate(-20deg);
}

How can I perform the test?

Edited 16 Sep 2019 by pencir

You would need to make a named page with the overlay, then selectively apply that named page to the appropriate elements. For example:

@page overlay {
    @prince-overlay { ... }
}

div.pending { page: overlay }

Then the JavaScript could just set the pending class on the appropriate divs.

@mikeday, thanks!

Edited 16 Sep 2019 by pencir