How to enhance the unpublished view of a node

Change this:

Image

into this:

Image

Step 1 - install the https://www.drupal.org/project/asset_injector module

Step 2 - configure CSS

• go to admin/config/development/asset-injector/css
• click on + Add CSS Injector
• give it a meaningful name like "Unpublished"
• check the Enabled box (if not already)
• paste the following CSS rules in the Code field

.node--unpublished {
  background-color: transparent;
  border-left: solid 3px orange;
  padding-left: 15px;
}
.gin--dark-mode li.entity-moderation-form__item,
.gin--dark-mode li.entity-moderation-form__item label {
  color: black;
}

The .node--unpublished part is important, the rest is optional.

• Under 'Conditions' you can select the Content types that this rule applies to
• and finally, hit Save