How do you use custom CSS?

[TheShovel]

I've been trying to mess around with custom css with the packager. Sadly, I can't figure out how it works. Can anyone show me some examples of how to use it? Maybe change the transparency of the variable boxes using it or something like that.

[GarboMuffin]

The HTML for the monitors looks like

You can use your browser's developer tools to find this and see which elements make which parts of the interface.

For custom CSS the important part is class=. If you want to change the style of class="sc-monitor-root", you could do

.sc-monitor-root {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

for example

There are good places online to learn how to use CSS

[TheShovel]

thanks a lot!

[TheShovel]

I tried doing

.sc-monitor-root {
    position: absolute;
    top: 0;
    left: 0;
    /* background: hsla(215, 100%, 95%, 1); */
    color: #575e75;
    /* border: 1px solid hsla(0, 0%, 0%, 0.15); */
    border-radius: 4px;
    font-size: 12px;
    overflow: hidden;
    user-select: none;
    pointer-events: all;
}

.sc-monitor-root[opcode="data_"] .sc-monitor-value-color {
    background-color: #ff8c1a00;
}

.sc-monitor-large-value {
    min-height: 1.4rem;
    min-width: 3rem;
    padding: 0.1rem 0.25rem;
    text-align: center;
    color: black;
    font-size: 1rem;
    white-space: pre-wrap;
}

to make the boxes transparent and remove the border, but it doesn't work. It works in chrome with inspect element, but now when exporting with the packager and the custom css.

[GarboMuffin]

then background-color: transparent !important and background: none !important

[TheShovel]

still gets overwriten

[GarboMuffin]

apparently that can happen, will look later tonight

[GarboMuffin]

The packager's default styles now have lower priority than custom CSS

This will work now:

.sc-monitor-value-color {
  background-color: transparent !important;
}
.sc-monitor-root {
  background-color: transparent;
  border: none;
}

[TheShovel]

Thanks a lot! It worked :D

[RlabsLLC]

that doens't seem to work when I package it into a Rasperry Pi app...