CSS is not completely compatible with matrix builds

[XavierRaynaud]

Hi,

I've a jenkins instance, with matrix build plugin:
https://wiki.jenkins-ci.org/display/JENKINS/Matrix+Project+Plugin

For such projects, icons are not displayed properly. It displays a mix of neo icons and old-jenkins icons.

(Not sure if it's a CSS bug, or a bug in MatrixProject plug-in)

[XavierRaynaud]

Fixed with rules like that in images.less:

[src$='24x24/blue.png'] {
  .icon-img('../images/ic_check_circle_black.svg', @color-green);
  .icon(@size-md);
}

[src$='16x16/blue.png'] {
  .icon-img('../images/ic_check_circle_black.svg', @color-green);
  .icon(@size-sm);
}

[src$='24x24/red.png'] {
  .icon(@size-md);
  .icon-img('../images/ic_error_black.svg', @color-red);
}

[src$='16x16/red.png'] {
  .icon(@size-sm);
  .icon-img('../images/ic_error_black.svg', @color-red);
}

[src$='24x24/blue_anime.gif'] {
  .icon-img('../images/ic_autorenew_black.svg', @color-green);
  .icon(@size-md);
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

[src$='24x24/red_anime.gif'] {
  .icon-img('../images/ic_autorenew_black.svg', @color-red);
  .icon(@size-md);
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

[src$='16x16/blue_anime.gif'] {
  .icon-img('../images/ic_autorenew_black.svg', @color-green);
  .icon(@size-sm);
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

[src$='16x16/red_anime.gif'] {
  .icon-img('../images/ic_autorenew_black.svg', @color-red);
  .icon(@size-sm);
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

As I'm absolutely not a CSS expert, not sure whether it's a good idea or not.

[khornberg]

Example

[afonsof]

@XavierRaynaud, be careful about duplicate a .icon-img function using the same img url. In that case the build will insert the same svg twice, increasing the theme file.

[afonsof]

Currently we are porting the SVG image referencing to another repo: https://github.com/jenkins-contrib-themes/jenkins-core-theme. With this we'll be able to user the same iconset in various themes, including https://github.com/jenkins-contrib-themes/jenkins-material-theme and https://github.com/jenkins-contrib-themes/jenkins-neo-theme

[clement-parisot]

I am experiencing the same issue.
Maybe just this to handle images under the matrix plugin in the same way as it is done with icon-img :

#matrix img {
 padding-left:18.36px!important;
 padding-top:18.36px!important;
 height:0!important;
 width:0!important;
 background-size:100% 100%!important;
}

As I'm absolutely not a CSS expert either.