Custom CSS in PolyGerrit

[florian....@allegorithmic.com]

Hello,

Following one of our dev's remark, I try to customize some elements in PollyGerrit. Original question is : "In PolyGerrit, in change list, change state (green or red mark) is less visible than in traditionnal UI". It's right, so, I look at generated html page and find that a custom CSS like this could to the stuff:

.gr-change-list-item.cell.label {
  font-size: 1.6rem !important;
  font-weight: bold !important;
}

I found this doc: /Documentation/config-themes.html and try to work with GerritSite.css. After some tests, I found that this doc is for classic UI, not PolyGerrit, and searching again I found this one: Documentation/pg-plugin-styling.html

But now, I am stuck ... If I understand correctly I need to seek for a '@apply' in the right component, but the one I am searching for is not referenced, right ?
polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html

I try a hack with:

<dom-module id="more-visible-change-label">
  <script>
    Gerrit.install(function(plugin) {
      plugin.registerStyleModule('app-theme', 'more-visible-change-label-style');
    });
  </script>
</dom-module>

<dom-module id="more-visible-change-label-style">
  <style>
    .gr-change-list-item.label {
      font-size: 1.6rem !important;
      font-weight: bold !important;
    }
  </style>
</dom-module>

But fail, since Polymer Shadow DOM generate CSS with 'not(style-scope)' like:

.gr-change-list-item.cell.label:not([style-scope]):not(.style-scope) {
  font-size: 1.6rem !important;
  font-weight: bold !important;
}

Do you have some hints about this ?

Thanks,

[florian....@allegorithmic.com]

Thanks to Luca Milanesio, solution was simpler, no need to install style module, keep only the style dom-module like:

<dom-module id="more-visible-change-label-style">
  <style>
    .gr-change-list-item.label {
      font-size: 1.6rem !important;
      font-weight: bold !important;
    }
  </style>
</dom-module>

Documentation "pg-plugin-styling.html" was made for plugins, not for global CSS themes.

Thanks again,

 

[florian....@allegorithmic.com]

Well ... styling is not so easy with PolyGerrit ;)

I had some problems after introducing styling: Gerrit suddendly freeze some seconds during page load. After some times searching server side, network side, I realize it's my little CSS hack.

On Browser side, in console, I see this error:
> Failed to load plugins: my-style

It's a timeout on plugin loading. (Gerrit.Install() not called)

So, my minimal CSS hack is below. Can you confirm that the good way to introduce some CSS customization ?

<dom-module>
   <script>
     Gerrit.install(plugin => {});
   </script>
 
   <style>
     .gr-change-list-item.label {
       font-weight: bold !important;
     }
     .gr-change-list-item.label:not(.u-monospace) {
       font-size: 1.6rem !important;
     }
   </style>
 </dom-module>

Thanks,