Which CSS version is using node red?

Dashboard
1

Hey - I am trying to understand which version of CSS is used in nodered - the reason i am asking is that i try to create a battery animation inside nodered - it works on my html/ecss emulator but nod in node red but bug on node red.

Bonus: is there any library of node red objects already created where i could store that once done?

See below my ui-template




<div class="battery">
  <div class="battery-level" style="height:75%;"></div>
</div>

<div class="battery">
  <div class="battery-level" style="height:50%;"></div>
</div>

<div class="battery">
  <div class="battery-level" style="height:25%;"></div>
</div>

<div class="battery">
  <div class="battery-level warn" style="height:18%;"></div>
</div>

<div class="battery">
  <div class="battery-level alert" style="height:10%;"></div>
</div>

<style>
body {
  padding: 25px 50px;
}

.battery {
/* Battery outerwall*/
  border: 3px solid #333;
  width: 78px;
  height: 28px;
  padding: 2px;
  border-radius: 4px;
  position: relative;
  margin: 15px 0;
  
  &::before {
  /* Battery Pole */
    content: '';
    height: 24px;
    width: 6px;
    background: #333;
    display: block;
    position: absolute;
    top: 4px;
    right: -6px;
    border-radius: 0 4px 4px 0;
  }

  &::after {
    /* Battery inner margins*/
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #fff;
    border-radius: 2px;
  }
}

.battery-level {
  /* battery level*/
  background: #30b455;  
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  
  
  &.warn {
    background-color: #EFAF13;
  }
    
  &.alert {
    background-color: #e81309;
    
    &:before {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20fill%3D%22%23e81309%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); background-repeat: no-repeat;
  background-size: 18px;
  height: 18px;
  width: 18px;
  margin: 6px 0 0 8px;
      content: '';
      display: inline-block;
      position: absolute;
    }
  }    
}
</style>
2

In general, CSS v3 is in use. But of course, support for some elements are browser dependent.

The important thing for us to understand is where are you creating this page? Is it for the admin interface, Dashboard or something else?

Next to note is that you have used a data URL with SVG and that wont work in all browsers I don't think.

Please read the Node-RED website, everything you need and want is right there.

3

Well, the browser didn't help, i had to change the my CSS syntax to match the one Node red uses to

.class{...}
&:after{...}

to

.class{...}
.class::after{...}

I wanted to create a dashboard with that app - also wanting to interact with java script into the html is there any kind of exmple that exists - found some a bite complicated to start with.

4

The "&" syntax is typical of SASS/LESS and is not a regular CSS syntax AFAIK.... NR doesn't use SASS/LESS ... so only regular CSS syntax is supported.

Besides the CSS support is browser-based ....

1 Like
5

Lets just clarify a few things.

We use SASS to manage the CSS for the core Node-RED editor. We develop using the SASS syntax and a build step generates the CSS that is actually served to the browser. But that is nothing to do with Node-RED Dashboard.

This question is about providing CSS in a ui_template - which is rendered directly in the browser with no build-step. So yes, you have to use normal css in your own code.

2 Likes