|
<< Klick för att visa innehållsförteckning >> Navigation: »Inga ämnen över den här nivån« Kundanpassning |
All custom styles ska gå i style-custom.css som ligger placerad i katalogen projectfiles
Gör inga ändringar i style-static.css eller i css filerna för komponenterna. Detta eftersom ändringen kommer att skrivas över vid uppdatering av ramverket.
De flesta grafiska objekt går att kundanpassa i css. Enklast att hitta vad är att i bild (Chrome/edge/Safari) högerklicka på objektet och välja Inspektera. Där syns klassnamn, id och hur befintlig css appliceras.
Style-custom.css laddas efter standard css-fil vilket betyder att style.custom "bestämmer"
Det finns stora style möjligheter för larmlistan.
Rader har klassen alarm-list-row.
Rader har också klass active, inactive, acknowledged beroende på status.
Utöver det har de också larmklass tex: class-a
Exempel:
.alarm-list-row {
}
.alarm-list-row.active {
background-color: lightcoral;
}
.alarm-list-row.active.class-a {
background-color: red;
font-weight: bold;
}
.alarm-list-row.inactive {
background-color: gainsboro;
}
.alarm-list-row.acknowledged {
}
Summalarm
Exempel på hur summlarmsklocka kan visas:
.nm-has-alarm.nm-has-alarm-unack .nm-alarm-unack{
visibility: visible;
animation: alarm-unack 2s infinite;
-webkit-animation: alarm-unack 2s infinite;
}
.nm-has-alarm.nm-has-alarm-ack .nm-alarm-ack{
visibility: visible;
}
@keyframes alarm-unack{
from{
opacity: 1;
}
50%{
opacity:0;
}
to{
opacity: 1;
}
}
@-webkit-keyframes alarm-unack{
from{
opacity: 1;
}
50%{
opacity:0;
}
to{
opacity: 1;
}
}
.nm-type-pump .nm-pump-indicator {
fill: lightgray !important;
}
.nm-type-pump [nm-oid=""] .nm-pump-indicator {
fill: rgb(159, 54, 255) !important;
}
.nm-type-pump:not([nm-oid]) .nm-pump-indicator {
fill: rgb(159, 54, 255) !important;
}