Erweiterte WebUI Anpassungen mit Hilfe der color.map

Problemlösungen und Hinweise von allgemeinem Interesse zur Haussteuerung mit HomeMatic

Moderator: Co-Administratoren

Benutzeravatar
DerHeimer
Beiträge: 166
Registriert: 30.08.2014, 00:57
Danksagung erhalten: 1 Mal

Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von DerHeimer » 26.01.2019, 14:42

Im Beitrag viewtopic.php?f=26&t=48479 hatte ich bereits meine Ergebnisse aufgezeigt, wie einfach man mit Bordmitteln die UI erheblich anpassen kann. Ich hatte diesen Tipps & Tricks Bereich übersehen.
Daher werde ich nun unter diesem Beitrag meine Anpassungen ablegen, so dass diese Übersichtlich bleiben. Im anderen Thread beantworte ich dann gerne Fragen.

________________________________________________________________________________________
Aktuelle Anleitung: Hinzugekommen:
-Weitere detallierte CSS Anpassungen doch möglich.
-Zuweisungstabelle color.map -> WebUI verfeinert
________________________________________________________________________________________
Neues Style: flat_black_red - schwarz/rot / flacheres Design.
Besonderheiten: Hoverfunktionen und eigene Styles verwendet. Slidertext nun doch anpassbar.
flat_black_red.zip
(116.47 KiB) 44-mal heruntergeladen
2019-01-26 12_31_27-Window.png
2019-01-26 12_32_21-Window.png

Im Zip-File ist eine Übersicht, wo ihr das Hintergrundbild hinkopieren müsst. Die IP-Adresse eurer CPU muss ebenfalls angepasst werden.
________________________________________________________________________________________

Viel Spaß,
DerHeimer
Dateianhänge
black-blue-glossy.png
black-blue-glossy.png (34.37 KiB) 1203 mal betrachtet
color_map black-blue-glossy v2.zip
(1.12 KiB) 32-mal heruntergeladen
silber.png
silber.png (31.81 KiB) 1203 mal betrachtet
rot-silber.png
rot-silber.png (37.91 KiB) 1203 mal betrachtet
color.map.rot-silber.zip
(1 KiB) 31-mal heruntergeladen
color.map.silver.zip
(1.03 KiB) 30-mal heruntergeladen

ptweety
Beiträge: 217
Registriert: 07.01.2017, 16:48
Hat sich bedankt: 3 Mal
Danksagung erhalten: 2 Mal

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von ptweety » 16.02.2019, 22:40

DerHeimer, danke für diese Inspiration. Und auch bei Stilgar habe ich mal schamlos Teile kopiert. Auch Ihm gilt mein Dank.

Ich war selber an ein paar optischen Änderungen der WebUI interessiert und hier ist nun mein Ergebnis. Vielleicht will das ja jemand aufgreifen und für sich weiter nutzen.

EDIT 20.02.19: Icons zu den Knöpfen ins Hauptmenü eingebaut.
EDIT 21.02.19: Anpassungen w/Firmware 3.43.15

Als erstes mal der Code. Wie immer ist der Inhalt als color.map auf der CCU unter /usr/local/etc/config abzulegen:

Code: Alles auswählen

active                  "var(--primary)"
attention               "var(--red)"
activeBackground        "var(--active)"
background              "var(--primary)"

contentBackground       "var(--primary)"

backgroundStart         "var(--clickable)"
backgroundEnd           "var(--white)"

black                   "var(--black)"
clickable               "var(--clickable)"

inactiveBackground      "var(--inactive)"
okSignal                "var(--limegreen)"
warnSignal              "var(--yellow)"
white                   "var(--white)"

inactiveButton          "var(--silver)"

channelHighlight        "var(--primary)"
channelBackground       "var(--secondary)"
channelBorder           "var(--border-color)"

inherit                 inherit
transparent             transparent
windowText              WindowText

blue                    "var(--darkblue)"
testActive              "var(--yellow)"
testOk                  "var(--lime)"
red                     "var(--red)"
progressbarHighlight    "var(--primary)"
progressbarBackground   "var(--secondary)"
progressbarText         "var(--white)"
gray                    "var(--gray)"
darkgray                "var(--darkgray)"
profile                 "var(--lightgray)"
profileActive           "var(--lightskyblue)"
grayText                GrayText
textColorA              "var(--white)"
textColorB              "var(--black)"

navBarSeparator         "var(--inactive)"

mainMenuBackground      "var(--secondary); background-image: none !important"
subMenuBackground       "var(--secondary); background-image: none !important"
subMenuHighlight        "var(--clickable); background-image: none !important"

messagesBackground      "var(--secondary); background-image: none !important"
logoutButton            "var(--secondary); background-image: none !important"

programEven             "var(--secondary)"
programOdd              "var(--secondary); }

/* ------------------------------------------------------------------ */
/* Defaults */

:root { /* https://htmlcolorcodes.com/color-chart/flat-design-color-chart/ */
    --primary: #154360; /* #2e3338; /* #134984; */
    --secondary: #F2F3F4; /* #ebf1f2; */
    --border-color: var(--black);

    --active: #F8F9F9; /* #f8f9fa; /* #f0f0f0; */
    --inactive: #D7DBDD; /* #bcc7cb; */
    --clickable: #A6ACAF; /* #89989b; */

    --red: #E74C3C;
    --darkred: #78281F;
    --orange: #F39C12;
    --yellow: #F1C40F;
    --olive: #7D6608;
    --blue: #2980B9;
    --darkblue: #1F618D;
    --steelblue: #5499C7;
    --lightskyblue: #A9CCE3;
    --midnightblue: #1A5276;
    --cyan: #2980B9;
    --indigo: #9B59B6;
    --purple: #512E5F;
    --pink: #F5B7B1;
    --green: #27AE60;
    --darkgreen: #145A32;
    --teal: #1ABC9C;
    --lime: #ABEBC6;
    --limegreen: #2ECC71;
    --silver: #BDC3C7;
    --white: #FFFFFF;
    --gray: #A6ACAF;
    --darkgray: #626567;
    --success: #27AE60;
    --info: #2980B9;
    --warning: var(--orange);
    --danger: var(--red);
    --lightgray: #D3D3D3;
    --light: #F8F9F9;
    --lightslategray: #D5DBDB;
    --dark: #424949;
    --black: #000000;
    --cold: var(--blue);
    --warm: var(--red);

    --bg-img: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='304' height='304' viewBox='0 0 304 304'%3E%3Cpath fill-opacity='0.05' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E\");
    --bg-img-1: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg%3E%3Cpath d='M 6 5 L 6 0 L 5 0 L 5 5 L 0 5 L 0 6 L 5 6 L 5 100 L 6 100 L 6 6 L 91.667 6 L 100 6 L 100 5 L 85.464 5 L 6 5 Z M 96 95 L 100 95 L 100 96 L 96 96 L 96 100 L 95 100 L 95 96 L 86 96 L 86 100 L 85 100 L 85 96 L 76 96 L 76 100 L 75 100 L 75 96 L 66 96 L 66 100 L 65 100 L 65 96 L 56 96 L 56 100 L 55 100 L 55 96 L 46 96 L 46 100 L 45 100 L 45 96 L 36 96 L 36 100 L 35 100 L 35 96 L 26 96 L 26 100 L 25 100 L 25 96 L 16 96 L 16 100 L 15 100 L 15 96 L 0 96 L 0 95 L 15 95 L 15 86 L 0 86 L 0 85 L 15 85 L 15 76 L 0 76 L 0 75 L 15 75 L 15 66 L 0 66 L 0 65 L 15 65 L 15 56 L 0 56 L 0 55 L 15 55 L 15 46 L 0 46 L 0 45 L 15 45 L 15 36 L 0 36 L 0 35 L 15 35 L 15 26 L 0 26 L 0 25 L 15 25 L 15 16 L 0 16 L 0 15 L 15 15 L 15 0 L 16 0 L 16 15 L 25 15 L 25 0 L 26 0 L 26 15 L 35 15 L 35 0 L 36 0 L 36 15 L 45 15 L 45 0 L 46 0 L 46 15 L 55 15 L 55 0 L 56 0 L 56 15 L 65 15 L 65 0 L 66 0 L 66 15 L 75 15 L 75 0 L 76 0 L 76 15 L 85 15 L 85 0 L 86 0 L 86 15 L 95 15 L 95 0 L 96 0 L 96 15 L 100 15 L 100 16 L 96 16 L 96 25 L 100 25 L 100 26 L 96 26 L 96 35 L 100 35 L 100 36 L 96 36 L 96 45 L 100 45 L 100 46 L 96 46 L 96 55 L 100 55 L 100 56 L 96 56 L 96 65 L 100 65 L 100 66 L 96 66 L 96 75 L 100 75 L 100 76 L 96 76 L 96 85 L 100 85 L 100 86 L 96 86 L 96 95 Z M 95 95 L 95 86 L 86 86 L 86 95 L 95 95 Z M 85 95 L 85 86 L 76 86 L 76 95 L 85 95 Z M 75 95 L 75 86 L 66 86 L 66 95 L 75 95 Z M 65 95 L 65 86 L 56 86 L 56 95 L 65 95 Z M 55 95 L 55 86 L 46 86 L 46 95 L 55 95 Z M 45 95 L 45 86 L 36 86 L 36 95 L 45 95 Z M 35 95 L 35 86 L 26 86 L 26 95 L 35 95 Z M 25 95 L 25 86 L 16 86 L 16 95 L 25 95 Z M 16 85 L 25 85 L 25 76 L 16 76 L 16 85 Z M 26 85 L 35 85 L 35 76 L 26 76 L 26 85 Z M 36 85 L 45 85 L 45 76 L 36 76 L 36 85 Z M 46 85 L 55 85 L 55 76 L 46 76 L 46 85 Z M 56 85 L 65 85 L 65 76 L 56 76 L 56 85 Z M 66 85 L 75 85 L 75 76 L 66 76 L 66 85 Z M 76 85 L 85 85 L 85 76 L 76 76 L 76 85 Z M 86 85 L 95 85 L 95 76 L 86 76 L 86 85 Z M 95 75 L 95 66 L 86 66 L 86 75 L 95 75 Z M 85 75 L 85 66 L 76 66 L 76 75 L 85 75 Z M 75 75 L 75 66 L 66 66 L 66 75 L 75 75 Z M 65 75 L 65 66 L 56 66 L 56 75 L 65 75 Z M 55 75 L 55 66 L 46 66 L 46 75 L 55 75 Z M 45 75 L 45 66 L 36 66 L 36 75 L 45 75 Z M 35 75 L 35 66 L 26 66 L 26 75 L 35 75 Z M 25 75 L 25 66 L 16 66 L 16 75 L 25 75 Z M 16 65 L 25 65 L 25 56 L 16 56 L 16 65 Z M 26 65 L 35 65 L 35 56 L 26 56 L 26 65 Z M 36 65 L 45 65 L 45 56 L 36 56 L 36 65 Z M 46 65 L 55 65 L 55 56 L 46 56 L 46 65 Z M 56 65 L 65 65 L 65 56 L 56 56 L 56 65 Z M 66 65 L 75 65 L 75 56 L 66 56 L 66 65 Z M 76 65 L 85 65 L 85 56 L 76 56 L 76 65 Z M 86 65 L 95 65 L 95 56 L 86 56 L 86 65 Z M 95 55 L 95 46 L 86 46 L 86 55 L 95 55 Z M 85 55 L 85 46 L 76 46 L 76 55 L 85 55 Z M 75 55 L 75 46 L 66 46 L 66 55 L 75 55 Z M 65 55 L 65 46 L 56 46 L 56 55 L 65 55 Z M 55 55 L 55 46 L 46 46 L 46 55 L 55 55 Z M 45 55 L 45 46 L 36 46 L 36 55 L 45 55 Z M 35 55 L 35 46 L 26 46 L 26 55 L 35 55 Z M 25 55 L 25 46 L 16 46 L 16 55 L 25 55 Z M 16 45 L 25 45 L 25 36 L 16 36 L 16 45 Z M 26 45 L 35 45 L 35 36 L 26 36 L 26 45 Z M 36 45 L 45 45 L 45 36 L 36 36 L 36 45 Z M 46 45 L 55 45 L 55 36 L 46 36 L 46 45 Z M 56 45 L 65 45 L 65 36 L 56 36 L 56 45 Z M 66 45 L 75 45 L 75 36 L 66 36 L 66 45 Z M 76 45 L 85 45 L 85 36 L 76 36 L 76 45 Z M 86 45 L 95 45 L 95 36 L 86 36 L 86 45 Z M 95 35 L 95 26 L 86 26 L 86 35 L 95 35 Z M 85 35 L 85 26 L 76 26 L 76 35 L 85 35 Z M 75 35 L 75 26 L 66 26 L 66 35 L 75 35 Z M 65 35 L 65 26 L 56 26 L 56 35 L 65 35 Z M 55 35 L 55 26 L 46 26 L 46 35 L 55 35 Z M 45 35 L 45 26 L 36 26 L 36 35 L 45 35 Z M 35 35 L 35 26 L 26 26 L 26 35 L 35 35 Z M 25 35 L 25 26 L 16 26 L 16 35 L 25 35 Z M 16 25 L 25 25 L 25 16 L 16 16 L 16 25 Z M 26 25 L 35 25 L 35 16 L 26 16 L 26 25 Z M 36 25 L 45 25 L 45 16 L 36 16 L 36 25 Z M 46 25 L 55 25 L 55 16 L 46 16 L 46 25 Z M 56 25 L 65 25 L 65 16 L 56 16 L 56 25 Z M 66 25 L 75 25 L 75 16 L 66 16 L 66 25 Z M 76 25 L 85 25 L 85 16 L 76 16 L 76 25 Z M 86 25 L 95 25 L 95 16 L 86 16 L 86 25 Z' style='opacity: 0.05;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");

    --fas-fa-home: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'/%3E%3C/svg%3E\");
    --fas-fa-kiwi: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.81 217.98C572.64 157.41 518.28 112 457.63 112h-9.37c-52.82 0-104.25-16.25-147.74-46.24-41.99-28.96-96.04-41.62-153.21-28.7C129.3 41.12-.08 78.24 0 224c.04 70.95 38.68 132.8 95.99 166.01V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-54.26c15.36 3.96 31.4 6.26 48 6.26 5.44 0 10.68-.73 16-1.18V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-59.43c14.24-5.06 27.88-11.39 40.34-19.51C342.07 355.25 393.86 336 448.46 336c25.48 0 16.01-.31 23.05-.78l74.41 136.44c2.86 5.23 8.3 8.34 14.05 8.34 1.31 0 2.64-.16 3.95-.5 7.09-1.8 12.05-8.19 12.05-15.5 0 0 .14-240.24-.16-246.02zM463.97 248c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24zm80 153.25l-39.86-73.08c15.12-5.83 28.73-14.6 39.86-25.98v99.06z'/%3E%3C/svg%3E\");
    --fas-fa-keyboard: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z'/%3E%3C/svg%3E\");
    --fas-fa-cogs: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z'/%3E%3C/svg%3E\");
    --fas-fa-magic: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z'/%3E%3C/svg%3E\");
    --fas-fa-question: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z'/%3E%3C/svg%3E\");

    --fas-fa-bell: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'/%3E%3C/svg%3E\");
    --fas-fa-exclamation: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E\");
    --fas-fa-poweroff: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z'/%3E%3C/svg%3E\");

    --fas-fa-code: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z'/%3E%3C/svg%3E\");
    --fas-fa-tools: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z'/%3E%3C/svg%3E\");

    --slider: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 82'%3E%3Cdefs%3E%3ClinearGradient id='gradient-0' x1='0' y1='0' x2='1' y2='0' gradientTransform='matrix(0.9, 0, 0, 1, 0.1, 0)'%3E%3Cstop offset='0' stop-color='%232980B9'/%3E%3Cstop offset='1' stop-color='%23E74C3C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill='url(%23gradient-0)' stroke='%23F2F3F4' stroke-width='2px' points='0 68 200 0 200 68'/%3E%3C/svg%3E\");
    --handle: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 68'%3E%3Cpath d='M 0 0 H 10 V 68 H 0 V 0 Z' stroke-linejoin='round'/%3E%3C/svg%3E\");
}

 * {
    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif !important;
    font-size: 12px ! important;
}

/* ------------------------------------------------------------------ */
/* Print */

@media print {
    * {
        background-color: white !important;
        color: black !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    #header, #menubar, #footer {
        display: none
    }

    #content {
        height: 100% !important; width: 90%
    }
}


/* ------------------------------------------------------------------ */
/* Header */

#headerLogo {
    -webkit-filter: invert(0);
    filter: invert(0); /* 0 -> 1 wenn erforderlich */
}

#UserName, #PagePath {
    -webkit-filter: invert(1) grayscale(1) contrast(10);
    filter: invert(1) grayscale(1) contrast(10);
    color: var(--primary) !important;
}

img[src=\"/ise/img/loading.gif\"], img[src=\"/ise/img/ajaxload.gif\"] /* ladekringel */ {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' stroke='var(--white)'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E\") no-repeat;
    width: 31px; /* Width of new image */
    height: 31px; /* Height of new image */
    padding-left: 42px;
    padding-top: 42px;
}

/* ------------------------------------------------------------------ */
/* Images */

img[src^=\"/ise/img/dot/\"] {
    margin-right: 10px !important;
    width: 18px;
    height: 18px;
}

div[id$=\"Thumbnail\"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1), /* Devices */
div[id$=\"Thumbnail\"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(2),
div[id^=\"picDiv\"] > div:nth-child(1) > div:nth-child(1),
div[id^=\"picDiv\"] > div:nth-child(1) > div:nth-child(2),
div[id^=\"pic\"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1), /* Firmware */
div[id^=\"pic\"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
    background-color: transparent !important;
    text-align: center;
}

img[id$=\"checkItem\"], img[id$=\"dangerItem\"], img[src$=\"_thumb.png\"] {
    mix-blend-mode: multiply !important;
}

img[src=\"/ise/img/up.png\"] {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

img[src=\"/ise/img/down.png\"] {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

img[src=\"/ise/img/enter.png\"] {
    border-radius: 3px;
}

.CLASS02543 {
    border-color: var(--border-color) !important;
}

.CLASS02543:hover {
    box-shadow: 0px 0px 10px 0px var(--light);
}

.CLASS04700 {
    margin: auto;
}

div[id$=base] {
    background-image: var(--slider) !important;
    z-index: 10 !important;
    /* background-size: 100% 70%; */
    background-repeat: no-repeat;
    background-position: center;
}

div[id$=green] {
    background-size: 0% 0%;
}

img[src=\"/ise/img/slider/slider.gif\"], img[id$=slider] {
    background-image: var(--handle) !important;
    opacity: 0.8;
    border-radius: 3px;
}

#slMin {
    top: -12px !important;
}

#slMax {
    top: -15px !important;
}


/* ------------------------------------------------------------------ */
/* Content */

.LayerContainer #content {
    color: var(--light) !important;
    background-color: var(--light);
    background-image: var(--bg-img);
/*  background-image: var(--bg-img-1); */
/*  background-image: url(/addons/images/bg.svg); background-size: cover; background-repeat: no-repeat; */
}

#NoAlarms.CLASS02800 {
    color: var(--danger) !important;
}

.firmwareAvailable,
#NoServices.CLASS02600,
#noNewDevs.CLASS04302,
.LayerContainer #content > p {
    color: var(--warning) !important;
}

.firmwareAvailable,
#NoAlarms.CLASS02800,
#NoServices.CLASS02600,
#noNewDevs.CLASS04302,
.LayerContainer #content > p {
    margin-left: 15px;
    margin-top: 10px;
}


/* ------------------------------------------------------------------ */
/* Start page */

#startpage > #contentLeft {
    width: calc(100% - 5px - 470px - 8px) !important
}

#startpage > #contentRight {
    width: 470px !important;
    padding-right: 8px;
    border: none !important;
}

#favSelector {
    background-color: transparent !important;
}

select.browser-default {
    display: block;
}

select, .SelectBox {
    color: var(--dark) !important;
    background-color: var(--light) !important;
    border: solid 1px var(--border-color) !important;
    border-radius: 3px;
}

#tblStartpageInfo {
    background-color: var(--secondary) !important;
    border: solid 1px var(--border-color);
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;
    width: 98%;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

#tblStartpageInfo td {
    padding: 5px;
}

#tblStartpageInfo tr:not(:last-child) td {
    border-bottom: solid 1px var(--border-color);
}

.CLASS01806 /* startpage - device frame */ {
    border: none !important;
}

.CLASS01807 /* startpage - device heading */ {
    background-color: inherit !important;
    color: var(--primary);
    font-size: 20px !important;
    line-height: 110%;
    padding-top: 25px;
    padding-bottom: 5px;
    border: none !important;
    text-align: left !important;
}

.CLASS01812 /* startpage - device details */ {
    color: var(--black);
    width: 100%;
    border: solid 1px var(--border-color) !important;
    border-radius: 5px;
    padding: 5px;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

.GrayBkg, .WhiteBkg {
    background-color: var(--light) !important;
}


/* ------------------------------------------------------------------ */
/* Menu */

#header > table > colgroup > col {
    width: auto !important;
}

#header > table > tbody > tr > td:nth-last-child(2).CLASS11105,
.CLASS11109 {
    float: right;
}

#msgAlarms,
#msgServices {
    text-align: initial;
    width: auto !important;
}

.NavButton {
    padding: 5px;
    width: max-content !important;
}

@media only screen and (min-width: 850px) {
    #menuStartPage_TITLE:before,
    #menuControlPage_TITLE:before,
    #menuProgramsLinksPage_TITLE:before,
    #menuSettingsPage_TITLE:before,
    #menuNewDevicesPage_TITLE:before,
    #menuHelpPage_TITLE:before,
    #msgAlarms:before,
    #msgServices:before,
    .NavButton:before {
        content: '';
        display: block;
        width: 15px;
        height: 15px;
        float: left;
        margin: 0 6px 0 0;
        background-color: var(--black);
    }

    #menuStartPage_TITLE:hover:before,
    #menuControlPage_TITLE:hover:before,
    #menuProgramsLinksPage_TITLE:hover:before,
    #menuSettingsPage_TITLE:hover:before,
    #menuNewDevicesPage_TITLE:hover:before,
    #menuHelpPage_TITLE:hover:before,
    .NavButton:hover:before {
        background-color: var(--primary);
    }

    #msgAlarms:hover {
        color: var(--danger);
    }

    #msgAlarms:hover:before {
        background-color: var(--danger);
    }

    #msgServices:hover {
        color: var(--warning);
    }

    #msgServices:hover:before {
        background-color: var(--warning);
    }

    #menuStartPage_TITLE:before {
        -webkit-mask: var(--fas-fa-home) no-repeat 50% 50%;
        mask: var(--fas-fa-home) no-repeat 50% 50%;
    }

    #menuControlPage_TITLE:before {
        -webkit-mask: var(--fas-fa-kiwi) no-repeat 50% 50%;
        mask: var(--fas-fa-kiwi) no-repeat 50% 50%;
    }

    #menuProgramsLinksPage_TITLE:before {
        -webkit-mask: var(--fas-fa-keyboard) no-repeat 50% 50%;
        mask: var(--fas-fa-keyboard) no-repeat 50% 50%;
    }

    #menuSettingsPage_TITLE:before {
        -webkit-mask: var(--fas-fa-cogs) no-repeat 50% 50%;
        mask: var(--fas-fa-cogs) no-repeat 50% 50%;
    }

    #menuNewDevicesPage_TITLE:before {
        -webkit-mask: var(--fas-fa-magic) no-repeat 50% 50%;
        mask: var(--fas-fa-magic) no-repeat 50% 50%;
    }

    #menuHelpPage_TITLE:before {
        -webkit-mask: var(--fas-fa-question) no-repeat 50% 50%;
        mask: var(--fas-fa-question) no-repeat 50% 50%;
    }

    #msgAlarms:before {
        -webkit-mask: var(--fas-fa-bell) no-repeat 50% 50%;
        mask: var(--fas-fa-bell) no-repeat 50% 50%;
    }

    #msgServices:before {
        -webkit-mask: var(--fas-fa-exclamation) no-repeat 50% 50%;
        mask: var(--fas-fa-exclamation) no-repeat 50% 50%;
    }

    .NavButton:before {
        -webkit-mask: var(--fas-fa-poweroff) no-repeat 50% 50%;
        mask: var(--fas-fa-poweroff) no-repeat 50% 50%;
    }
}

.MainMenuSubMenu {
    margin-left: 6px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

.MainMenuSubMenu table > tbody > tr:first-child > td {
    border-top: 0 none;
}

.MainMenuItemCaption,
.MainMenuSubMenu,
.MainMenuSubItem {
    border-color: var(--border-color) !important;
}


/* ------------------------------------------------------------------ */
/* Help */

#overviewHelpPage {
    width: 100% !important;
    empty-cells: hide;
    height: min-content !important;
}

#tdOnline,
#tdInfo {
    width: 25% !important;
    min-width: 250px;
    color: var(--black);
    background-color: var(--secondary);
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

#tdOnline li:first-of-type,
#tdInfo li:first-of-type {
    padding: 0 3px;

    font-size: large !important;
}

#tdInfo li > img {
    filter: invert(1);
}

#tdOnline h1,
#tdInfo h1 {
    color: var(--white);
    background-color: var(--clickable);
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 0;
    margin: 0 5px 10px 5px;
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

#tdOnline h1 u,
#tdInfo h1 u,
#tdInfo h1 u b {
    font-size: large !important;
    font-weight: 400;
    text-decoration: none;
}

#tdOnline ul,
#tdInfo ul {
    padding: 0 !important;
}


/* ------------------------------------------------------------------ */
/* Buttons */

.MainMenuItemCaption,
.Button,
.Button.colorGradient,
.StdButton,
.StdButtonBig,
.StdButtonInactive,
.StdTableBtn,
.CLASS06305 .colorGradient,
.FilterBtn,
.FilterSetButton,
.FilterButton,
.FilterCaption,
.DeviceListButton,
.FooterButton,
.CLASS06412,
.CLASS21904 {
    background-image: none !important;
}

.Messages:hover,
.NavButton:hover,
.MainMenuItemCaption:hover,
.Button:hover,
.StdButton:hover,
.StdButtonBig:hover,
.StdTableBtn:hover,
.CLASS06305 .colorGradient:hover,
.TestButton:hover,
.ControlBtnOff:hover,
.FooterButton:hover,
.CLASS21904:hover,
.DeviceListButton:hover:not(.CLASS10902) {
    color: var(--primary);
}

.PercBtn,
.ControlBtnOn,
.ControlBtnOff {
    border-radius: 5px;
    padding: 5px;
    border-width: 1px !important;
    border-style: solid !important;
}

.Messages,
.NavButton,
.PercBtn,
.ControlBtnOn,
.ControlBtnOff,
.ControlBtnInfo {
    border-color: var(--border-color) !important;
}

.StdTableBtn,
.TestButtonDisabled,
.TestDate {
    border: none !important;
}

.StdTableBtn {
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

.TestButton, .OkButton {
    border-radius: 2px;
}

.OkButton {
    width: auto !important;
    margin: 5px;
}

.DeviceListButton,
.StdButton,
.StdButtonBig,
.StdButtonInactive,
.TestButton,
.FilterBtn,
.FilterSetButton,
.FilterButton,
.FilterCaption,
.Button.colorGradient,
.CLASS06305 .colorGradient,
.Messages_Selected,
.FooterButton,
.CLASS06412,
.CLASS21904 {
    background-color: var(--secondary) !important;
}

.StdButton,
.CLASS06412 {
    margin-right: 5px !important;
}

.StdButton.CLASS04907,
.DeviceListButton.CLASS10902,
.DeviceListButton.CLASS04907 {
    height: 25px !important;
}

.StdButtonInactive,
.CLASS06412 {
    color: var(--secondary) !important;
}

.StdTableBtn {
    color: var(--white) !important;
}

.DeviceListButton, .CLASS20009, .CLASS02108, .CLASS21904, .CLASS06412 {
    border-radius: 5px !important;
}

.FilterBtn, .FilterCaption, .Filter,
.CLASS00203, .CLASS03501, .CLASS03601,
.CLASS03801, .CLASS03706, .CLASS03006,
.CLASS03304, .CLASS10901, .CLASS04104,
.CLASS04206, .CLASS05205, .CLASS05202,
.CLASS06408, .CLASS04109, .CLASS04211,
.CLASS06405 {
    border-width: 0 !important;
    font-weight: 700;
}

.CLASS02108, .CLASS21904, .CLASS06412 {
    margin: 2%;
    height: 20px;
    line-height: 20px;
}

.ButtonStatusRooms > br,
.CLASS05608 > br,
#ToggleButtonChannelView > br {
    content: ' ';
}

#ToggleButtonChannelView > br:after {
    content: ' ';
}


/* ------------------------------------------------------------------ */
/* Tables */

#content > table > tbody > tr > td#contentRight {
    padding-right: 8px;
    border: none !important;
}

.filterTable,
.tblList,
.tTable,
.tMain,
.SetProfLinkTbl,
.LinkListTbl,
.ChnListTbl,
.parameters_table,
.bidcosrf_table,
#tblFunctionNames,
#tblRoomNames,
#DeviceListTable,
#tblFavs,
#tblfav,
#DeviceInformation,
#createLinkStep1 {
    padding: 10px !important;
    border-color: var(--border-color) !important;
    border-style: solid;
    border-radius: 5px;
    border-spacing: 0 !important;
    border-collapse: separate;
    background-color: var(--secondary);
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

table[id^=\"id_firmware_table_\"] {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: auto !important;
}

.filterTable > * > tr > td,
.tblList > * > tr > td,
.tTable > * > tr > td,
.tMain > * > tr > td,
.SetProfLinkTbl > * > tr > td,
.LinkListTbl > * > tr > td,
.ChnListTbl > * > tr > td,
.parameters_table > * > tr > td,
.bidcosrf_table > * > tr > td,
#tblFunctionNames > * > tr > td,
#tblRoomNames > * > tr > td,
#DeviceListTable > * > tr > td,
#tblFavs > * > tr > td,
#DeviceInformation > * > tr > td,
#createLinkStep1 > * > tr > td,
/* */
.filterTable > * > tr > th,
.tblList > * > tr > th,
.tTable > * > tr > th,
.tMain > * > tr > th,
.SetProfLinkTbl > * > tr > th,
.LinkListTbl > * > tr > th,
.ChnListTbl > * > tr > th,
.parameters_table > * > tr > th,
.bidcosrf_table > * > tr > th,
#tblFunctionNames > * > tr > th,
#tblRoomNames > * > tr > th,
#DeviceListTable > * > tr > th,
#tblFavs > * > tr > th,
#DeviceInformation > * > tr > th,
#createLinkStep1 > * > tr > th {
    border-color: var(--border-color) !important;
    border-style: solid;
}

.filterTable > * > tr:empty,
.tblList > * > tr:empty,
.tTable > * > tr:empty,
.tMain > * > tr:empty,
.SetProfLinkTbl > * > tr:empty,
.LinkListTbl > * > tr:empty,
.ChnListTbl > * > tr:empty,
.parameters_table > * > tr:empty,
.bidcosrf_table > * > tr:empty,
#tblFunctionNames > * > tr:empty,
#tblRoomNames > * > tr:empty,
#DeviceListTable > * > tr:empty,
#tblFavs > * > tr:empty,
#tblfav > * > tr:empty,
#DeviceInformation > * > tr:empty,
#createLinkStep1 > * > tr:empty,
.CLASS05605,
.CLASS05606 {
    display: none;
}

.filterTable > * > tr > td,
.tblList > * > tr > td,
.tTable > * > tr > td,
.tMain > * > tr > td,
.SetProfLinkTbl > * > tr > td,
.LinkListTbl > * > tr > td,
.ChnListTbl > * > tr > td,
.parameters_table > * > tr > td,
.bidcosrf_table > * > tr > td,
#tblFunctionNames > * > tr > td,
#tblRoomNames > * > tr > td,
#DeviceListTable > * > tr > td,
#tblFavs > * > tr > td,
#tblfav > * > tr > td,
#DeviceInformation > * > tr > td,
#createLinkStep1 > * > tr > td,
/* */
.filterTable > * > tr > th,
.tblList > * > tr > th,
.tTable > * > tr > th,
.tMain > * > tr > th,
.SetProfLinkTbl > * > tr > th,
.LinkListTbl > * > tr > th,
.ChnListTbl > * > tr > th,
.parameters_table > * > tr > th,
.bidcosrf_table > * > tr > th,
#tblFunctionNames > * > tr > th,
#tblRoomNames > * > tr > th,
#DeviceListTable > * > tr > th,
#tblFavs > * > tr > th,
#tblfav > * > tr > th,
#DeviceInformation > * > tr > th,
#createLinkStep1 > * > tr > th {
    border-width: 0 1px 1px 0 !important;
}

.filterTable > * > tr > td:first-child,
.tblList > * > tr > td:first-child,
.tTable > * > tr > td:first-child,
.tMain > * > tr > td:first-child,
.SetProfLinkTbl > * > tr > td:first-child,
.LinkListTbl > * > tr > td:first-child,
.ChnListTbl > * > tr > td:first-child,
.parameters_table > * > tr > td:first-child,
.bidcosrf_table > * > tr > td:first-child,
#tblFunctionNames > * > tr > td:first-child,
#tblRoomNames > * > tr > td:first-child,
#DeviceListTable > * > tr > td:first-child,
#tblFavs > * > tr > td:first-child,
#tblfav > * > tr > td:first-child,
#DeviceInformation > * > tr > td:first-child,
#createLinkStep1 > * > tr > td:first-child,
/* */
.filterTable > * > tr > th:first-child,
.tblList > * > tr > th:first-child,
.tTable > * > tr > th:first-child,
.tMain > * > tr > th:first-child,
.SetProfLinkTbl > * > tr > th:first-child,
.LinkListTbl > * > tr > th:first-child,
.ChnListTbl > * > tr > th:first-child,
.parameters_table > * > tr > th:first-child,
.bidcosrf_table > * > tr > th:first-child,
#tblFunctionNames > * > tr > th:first-child,
#tblRoomNames > * > tr > th:first-child,
#DeviceListTable > * > tr > th:first-child,
#tblFavs > * > tr > th:first-child,
#tblfav > * > tr > th:first-child,
#DeviceInformation > * > tr > th:first-child,
#createLinkStep1 > * > tr > th:first-child {
    border-width: 0 1px 1px 1px !important;
}

.filterTable > *:first-child > tr:first-child > td,
.tblList > *:first-child > tr:first-child > td,
.tTable > *:first-child > tr:first-child > td,
.tMain > *:first-child > tr:first-child > td,
.SetProfLinkTbl > *:first-child > tr:first-child > td,
.LinkListTbl > *:first-child > tr:first-child > td,
.bidcosrf_table > *:first-child > tr:first-child > td,
#id_device_parameters_table > *:first-child > tr:first-child > td,
#tblFunctionNames > *:first-child > tr:first-child > td,
#tblfav > *:first-child > tr:first-child > td,
/* */
.filterTable > *:first-child > tr:first-child > th,
.tblList > *:first-child > tr:first-child > th,
.tTable > *:first-child > tr:first-child > th,
.tMain > *:first-child > tr:first-child > th,
.SetProfLinkTbl > *:first-child > tr:first-child > th,
.LinkListTbl > *:first-child > tr:first-child > th,
.bidcosrf_table > *:first-child > tr:first-child > th,
#id_device_parameters_table > *:first-child > tr:first-child > th,
#tblFunctionNames > *:first-child > tr:first-child > th,
#tblfav > *:first-child > tr:first-child > th,
/* */
.filterTable > *:nth-child(2) > tr:first-child > td,
.ChnListTbl > *:nth-child(2) > tr:first-child > td,
#tblFunctionList > *:nth-child(2) > tr:first-child > td,
#tblRoomList > *:nth-child(2) > tr:first-child > td,
#id_channel_parameters_table > *:nth-child(2) > tr:first-child > td,
#newDevTbl > *:nth-child(2) > tr:first-child > td,
#tblFunctionNames > *:nth-child(2) > tr:first-child > td,
#tblRoomNames > *:nth-child(2) > tr:first-child > td,
#DeviceListTable > *:nth-child(2) > tr:first-child > td,
#sysvarsListTable > *:nth-child(2) > tr:first-child > td,
#userAdmin > *:nth-child(2) > tr:first-child > td,
#tblFavs > *:nth-child(2) > tr:first-child > td,
#DeviceInformation > *:nth-child(2) > tr:first-child > td,
#createLinkStep1 > *:nth-child(2) > tr:first-child > td,
/* */
.filterTable > *:nth-child(2) > tr:first-child > th,
.ChnListTbl > *:nth-child(2) > tr:first-child > th,
#tblFunctionList > *:nth-child(2) > tr:first-child > th,
#tblRoomList > *:nth-child(2) > tr:first-child > th,
#id_channel_parameters_table > *:nth-child(2) > tr:first-child > th,
#newDevTbl > *:nth-child(2) > tr:first-child > th,
#tblFunctionNames > *:nth-child(2) > tr:first-child > th,
#tblRoomNames > *:nth-child(2) > tr:first-child > th,
#DeviceListTable > *:nth-child(2) > tr:first-child > th,
#sysvarsListTable > *:nth-child(2) > tr:first-child > th,
#userAdmin > *:nth-child(2) > tr:first-child > th,
#tblFavs > *:nth-child(2) > tr:first-child > th,
#DeviceInformation > *:nth-child(2) > tr:first-child > th,
#createLinkStep1 > *:nth-child(2) > tr:first-child > th {
    border-width: 1px 1px 1px 0 !important;
}

.filterTable > *:first-child > tr:first-child > td:first-child,
.tblList > *:first-child > tr:first-child > td:first-child,
.tTable > *:first-child > tr:first-child > td:first-child,
.tMain > *:first-child > tr:first-child > td:first-child,
.SetProfLinkTbl > *:first-child > tr:first-child > td:first-child,
.LinkListTbl > *:first-child > tr:first-child > td:first-child,
.bidcosrf_table > *:first-child > tr:first-child > td:first-child,
#id_device_parameters_table > *:first-child > tr:first-child > td:first-child,
#tblFunctionNames > *:first-child > tr:first-child > td:first-child,
#tblfav > *:first-child > tr:first-child > td:first-child,
/* */
.filterTable > *:first-child > tr:first-child > th:first-child,
.tblList > *:first-child > tr:first-child > th:first-child,
.tTable > *:first-child > tr:first-child > th:first-child,
.tMain > *:first-child > tr:first-child > th:first-child,
.SetProfLinkTbl > *:first-child > tr:first-child > th:first-child,
.LinkListTbl > *:first-child > tr:first-child > th:first-child,
.bidcosrf_table > *:first-child > tr:first-child > th:first-child,
#id_device_parameters_table > *:first-child > tr:first-child > th:first-child,
#tblFunctionNames > *:first-child > tr:first-child > th:first-child,
#tblfav > *:first-child > tr:first-child > th:first-child,
/* */
.filterTable > *:nth-child(2) > tr:first-child > td:first-child,
.ChnListTbl > *:nth-child(2) > tr:first-child > td:first-child,
#tblFunctionList > *:nth-child(2) > tr:first-child > td:first-child,
#tblRoomList > *:nth-child(2) > tr:first-child > td:first-child,
#id_channel_parameters_table > *:nth-child(2) > tr:first-child > td:first-child,
#newDevTbl > *:nth-child(2) > tr:first-child > td:first-child,
#tblFunctionNames > *:nth-child(2) > tr:first-child > td:first-child,
#tblRoomNames > *:nth-child(2) > tr:first-child > td:first-child,
#DeviceListTable > *:nth-child(2) > tr:first-child > td:first-child,
#sysvarsListTable > *:nth-child(2) > tr:first-child > td:first-child,
#userAdmin > *:nth-child(2) > tr:first-child > td:first-child,
#tblFavs > *:nth-child(2) > tr:first-child > td:first-child,
#DeviceInformation > *:nth-child(2) > tr:first-child > td:first-child,
#createLinkStep1 > *:nth-child(2) > tr:first-child > td:first-child,
/* */
.filterTable > *:nth-child(2) > tr:first-child > th:first-child,
.ChnListTbl > *:nth-child(2) > tr:first-child > th:first-child,
#tblFunctionList > *:nth-child(2) > tr:first-child > th:first-child,
#tblRoomList > *:nth-child(2) > tr:first-child > th:first-child,
#id_channel_parameters_table > *:nth-child(2) > tr:first-child > th:first-child,
#newDevTbl > *:nth-child(2) > tr:first-child > th:first-child,
#tblFunctionNames > *:nth-child(2) > tr:first-child > th:first-child,
#tblRoomNames > *:nth-child(2) > tr:first-child > th:first-child,
#DeviceListTable > *:nth-child(2) > tr:first-child > th:first-child,
#sysvarsListTable > *:nth-child(2) > tr:first-child > th:first-child,
#userAdmin > *:nth-child(2) > tr:first-child > th:first-child,
#tblFavs > *:nth-child(2) > tr:first-child > th:first-child,
#DeviceInformation > *:nth-child(2) > tr:first-child > th:first-child,
#createLinkStep1 > *:nth-child(2) > tr:first-child > th:first-child {
    border-width: 1px 1px 1px 1px !important;
}

#tblFunctionNames, #tblRoomNames {
    margin-left: auto;
    margin-right: auto;
}

#tblFunctionNames td,
#tblRoomNames td {
    text-align: center;
}

#tblRoomList tbody > tr > td:nth-child(-n+3):not(:first-child),
#tblFunctionList tbody > tr > td:nth-child(-n+3):not(:first-child) {
    text-align: left;
    padding-left: 10px;
}

#tblRoomList > * > tr > td:first-child,
#tblFunctionList > * > tr > td:first-child,
#DeviceListTable > * > tr > td:first-child,
/* */
#tblRoomList > * > tr > th:first-child,
#tblFunctionList > * > tr > th:first-child,
#DeviceListTable > * > tr > th:first-child,
/* */
#tblRoomList thead > tr > td:first-child,
#tblFunctionList thead > tr > td:first-child,
/* */
#tblRoomList tbody > tr > td:nth-child(2):empty,
#tblFunctionList tbody > tr > td:nth-child(2):empty {
    background-color: var(--primary);
    color: var(--white);
}

td.DeviceListThumbnail {
    background-color: initial !important;
}

.DeviceListThumbnail > div {
    text-align: center;
}

#newDevTbl > * > tr:nth-last-child(n+2) > td:first-child,
#newDevTbl > * > tr:nth-last-child(n+2) > th:first-child,
/* */
#tblRoomList > * > tr:nth-last-child(n+2) > td:first-child,
#tblFunctionList > * > tr:nth-last-child(n+2) > td:first-child,
/* */
#tblRoomList > * > tr:nth-last-child(n+2) > th:first-child,
#tblFunctionList > * > tr:nth-last-child(n+2) > th:first-child,
/* */
#tblRoomList thead > tr > td:first-child,
#tblFunctionList thead > tr > td:first-child,
/* */
#tblRoomList tbody > tr:nth-last-child(n+2) > td:nth-child(2):empty,
#tblFunctionList tbody > tr:nth-last-child(n+2) > td:nth-child(2):empty,
/* */
#DeviceListTable > thead > tr > td:first-child.DeviceListCell_Invisible,
#DeviceListTable > thead > tr > th:first-child.DeviceListCell_Invisible,
/* */
#DeviceListTable > tbody > tr:nth-last-child(n+2) > td:first-child.DeviceListCell_Invisible,
#DeviceListTable > tbody > tr:nth-last-child(n+2) > th:first-child.DeviceListCell_Invisible {
    border-bottom: none;
}

/* */
#tblRoomList > tbody > tr > td:first-child:empty,
#tblFunctionList > tbody > tr > td:first-child:empty,
/* */
#tblRoomList > tbody > tr > th:first-child:empty,
#tblFunctionList > tbody > tr > th:first-child:empty {
    border-right: none;
}

#DeviceListTable, #tblFavs {
    border: solid 1px var(--border-color) !important;
}

#content > table > tbody > tr > td#contentLeft > table,
#content > table > tbody > tr > td#contentLeft > div {
    min-width: 350px;
}

#ic_deviceparameters #id_body, #ic_deviceparameters .parameter_area,
#ic_selchannel #body_wrapper, #ic_selchannel #previous_step_wrapper,
#body_wrapper {
    background-color: transparent !important;
}

#ic_deviceparameters .parameter_area {
    padding-bottom: 0;
}

.subOffsetDivPopup {
    width: 100% !important;
    padding: 0 !important;
}

table.parameter_header > thead > tr > td {
    background-color: inherit !important;
    color: var(--primary);
    font-size: 20px !important;
    line-height: 110%;
    padding-top: 25px;
    padding-bottom: 5px;
    border: none !important;
    text-align: left !important;
}

#id_sender_receiver_profiles_wrapper table:first-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#id_sender_receiver_profiles_wrapper table:last-child {
    padding-top: 0 !important;
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.CLASS02520 table.hidden_ {
    border-spacing: 0 2px;
}

.StdTable td,
#tblStatus td,
#mainTable td:not(:empty),
#ChnTblContentDiv,
#ChnListTbl {
    background-color: var(--secondary) !important;
}

.tblList, .tTable,
#head_wrapper, #body_wrapper,
#ic_deviceparameters #id_body, #createLinkStep1, #ChnListTbl {
    width: calc(100% - 20px) !important;
    margin: 27px 10px 10px !important;
}

.DeviceListRow td:nth-child(2),
.DeviceListRow_Highlight td:nth-child(2) {
    text-align: left;
    padding-left: 10px;
}

.DeviceListFoot {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

#tblNewFav, .bidcosrf_page {
    background-color: inherit;
    color: var(--black);
    border: solid 1px var(--border-color);
    padding: 5px;
}

#tblNewFav, .bidcosrf_page, .sysConfigHeight,
table.StdTable > tbody > tr > td,
#mainTable > tbody > tr > td:not(:empty) {
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

#tblNewFav .CLASS06301 {
    color: inherit;
}

.tblList, #tblfav {
    margin: 1%;
    border: solid 1px var(--border-color);
}

#tblFavs.CLASS05610 {
    padding: 5px !important;
    margin: 27px 10px 10px !important;
}

#tblFavs.CLASS05610 table {
    margin: 0 !important;
}

#tblFavs.CLASS05610 table, .CLASS02500 {
    border-collapse: collapse;
}

#tblFavs.CLASS05610 tbody > tr:not(:nth-child(2)) > td {
    border: 0;
    padding: 5px;
}

#tblFavs tbody > tr:not(:nth-child(2)) > td {
    background-color: var(--secondary);
}

#tblFavs .CLASS05609,
div.bidcosrf_footer {
    background-color: var(--light);
}

.bidcosrf_table {
    width: calc(100% - 10px) !important;
    margin: 5px;
}

.bidcosrf_optionbutton {
    margin: 10px 10px 10px 5px !important;
}

.Sort, .SortSelected {
    color: var(--light);
    height: 100% !important;
}

.thCell {
    padding: 0 !important;
}

#mainTable > colgroup > col {
    width: auto !important;
}

#mainTable tr td:not(:empty) {
    padding: 5px;
}

.DeviceListCell {
    border-width: 0 !important
}

.ctrlTbl {
    background-color: var(--active) !important;
    border-radius: 3px;
}

.ctrlTbl .hidden table > tbody > tr:first-child > td {
    padding: 0;
}

.ctrlTbl .hidden table > tbody > tr:not(:first-child) > td {
    padding-top: 5px;
}

.ctrlTbl .hidden div > table {
    background-color: var(--clickable);
}

.TblUserAdministration,
.CLASS05303 {
    background-color: var(--active) !important;
}

.CLASS22014 {
    width: 200px !important;
}

table.CLASS02500 {
    width: 100%;
}

td.CLASS02529 {
    width: 50%;
}


/* ------------------------------------------------------------------ */
/* Rules */

.Rule {
    border-width: 0px 0px 1px 0px !important;
    border-color: var(--border-color) !important;
    border-style: solid;
}

.Condition {
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
}

.conditionEven {
    background-color: var(--active);
}

.conditionOdd {
    background-color: var(--inactive);
}


/* ------------------------------------------------------------------ */
/* Footer */

#footer table > colgroup > col {
    width: auto !important;
}

#footer table > tbody > tr > td:empty {
    width: 20% !important;
}


/* ------------------------------------------------------------------ */
/* All dialogs */

.DialogLayer,
.YesNoDialogLayer,
#trlayer,
#trlayer2,
#ChannelConfigDialogLayer,
#DeviceConfigDialogLayer {
    background: radial-gradient(ellipse at center, rgba(128, 128, 128, 0.2) 0%, rgba(128, 128, 128, 0.7) 100%) !important;
    background-size: 0% 0%;
}

.UIFrame,
.UIFrameTitle,
.UIFrameContent,
.YesNoDialog,
.YesNoDialogTitle,
.YesNoDialogContent,
.YesNoDialogFooter,
#ChannelConfigDialog,
#ChannelConfigDialogTitle,
#ChannelConfigDialogFooter,
#DeviceConfigDialog,
#DeviceConfigDialogTitle,
#DeviceConfigDialogFooter {
    background-color: var(--secondary) !important;
}

.UIFrame,
.YesNoDialog,
#ChannelConfigDialog,
#DeviceConfigDialog,
#messagebox {
    border: solid 1px var(--border-color) !important;
    -webkit-box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
    box-shadow: 0 3px 10px -2px hsla(153,5%,65%,.5);
}

.UIFrame,
.UIButton,
.YesNoDialog,
#ChannelConfigDialog,
#DeviceConfigDialog,
#messagebox {
    border-radius: 5px;
}

.UIFrameTitle,
.YesNoDialogTitle,
#ChannelConfigDialogTitle,
#DeviceConfigDialogTitle, {
    font-size: larger !important; font-weight: 700;
}


/* ------------------------------------------------------------------ */
/* MessageBox */

#messagebox {
    padding: 5px !important;
    background-color: var(--secondary);
}

#messagebox .popupTitle,
#messagebox .popupControls {
    border: none;
    background-color: inherit
}


/* ------------------------------------------------------------------ */
/* YesNo Dialog */

#btnYes,
#btnNo {
    background-image: none !important;
    background-color: var(--secondary) !important;
    top: 19px;
    height: 25px;
    line-height: 25px;
}

#btnNo {
    color: var(--warning);
}

#btnYes:hover,
#btnNo:hover {
    color: var(--primary);
}


/* ------------------------------------------------------------------ */
/* Popups */

.popupTitle {
    font-size: larger !important;
    font-weight: 700 !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: auto !important;
}

.popupTable {
    border-spacing: 0;
    border-collapse: collapse;
    border-color: var(--border-color) !important;
}

.popupTableScript {
    border: 0;
}

.popupControls div, .CLASS21000, .CLASS05008 {
    background-image: none !important;
    background-color: var(--secondary) !important;
}

#scrinp, scrout {
    width: 99% !important;
}

.CLASS00012 {
    margin: auto;
}

.CLASS00718 {
    background-color: var(--secondary) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

a.FooterButton {
    padding: 5px;
}

.CLASS10200 {
    background-color: var(--secondary) !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.CLASS10101 {
    padding: 2px 5px !important;
    background-color: var(--light) !important;
    border-radius: 5px !important;
}

.CLASS10101:hover {
    color: var(--primary);
}

.CLASS10302 {
    background-color: var(--secondary);
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
}


/* ------------------------------------------------------------------ */
/* Forms */

input[type=text],
input[type=password],
input[id^=\"notassignedColor\"],
input[id=\"text_serial\"],
input[id$=\"_tmp\"] {
    width: auto !important;
    padding: 0 .45rem !important;
    line-height: 1.5 !important;
    color: var(--black) !important;
    vertical-align: middle !important;
    background: var(--light) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 3px !important;
    margin: 0.25em !important;
}

#ic_selchannel #createLinkStep1 .WhiteHeader input {
    width: 90% !important;
}


/* ------------------------------------------------------------------ */
/* Login */

#LoginMask {
    border-radius: 5px;
    padding: 5px;
}


/* ------------------------------------------------------------------ */
/* Logout */

table#logout_content > tbody > tr > td > div:not(#btnLogNew) {
    -webkit-filter: invert(1) grayscale(1) contrast(10);
    filter: invert(1) grayscale(1) contrast(10);
}


/* ------------------------------------------------------------------ */
/* Pile of random classes */

.pt11 {
    width: 100%;
}

.CLASS02539 {
    background-color: var(--active) !important;
}

.CLASS21000:hover {
    color: var(--primary);
}

.CLASS21906 {
    color: var(--danger) !important;
}

.CLASS05501 {
    display: none;
}

.CLASS05607 {
    background-color: var(--clickable) !important;
}

.CLASS05608 {
    background-image: none !important;
    color: var(--black);
    height: auto !important;
    line-height: inherit !important;
    vertical-align: middle;
}

.CLASS02529 {
    padding-left: 0;
}

"

deviceListRowHighlight  "var(--inactive); background-image: none !important"
borderColor             "var(--active)"

shutterOpeningDegree    "var(--clickable)"
link                    #0101FF
Natürlich sind da noch ein paar Bugs drin und auch ein paar Seiten, die ich nicht angefasst habe (bsp. Geräte - Posteingang oder Diagramme). Der Rest sieht dann halt so aus:
Bildschirmfoto 2019-02-20 um 21.08.53.png
Bildschirmfoto 2019-02-16 um 22.27.59.png
Bildschirmfoto 2019-02-16 um 22.26.44.png
Bildschirmfoto 2019-02-16 um 22.26.18.png
Bildschirmfoto 2019-02-16 um 22.25.27.png
Bildschirmfoto 2019-02-16 um 22.25.52.png
Zuletzt geändert von ptweety am 25.02.2019, 22:32, insgesamt 10-mal geändert.

gaslamperl
Beiträge: 27
Registriert: 17.03.2016, 17:56

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von gaslamperl » 17.02.2019, 12:09

Danke für das tolle Farbschema
gefällt mir sehr gut
arbeitest Du weiter an dieser WebUI ?
habe noch etwas gefunden was nicht so schön ist
unter Systemsteuerung ist die Anordnung nicht so schön
unter Geräte fehlen die linien

gibt es eine Möglichkeit das anzupassen ?

Vielen DANK
Dateianhänge
webui 2.jpg
webui 2.jpg (21.4 KiB) 871 mal betrachtet
webui 1.jpg

ptweety
Beiträge: 217
Registriert: 07.01.2017, 16:48
Hat sich bedankt: 3 Mal
Danksagung erhalten: 2 Mal

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von ptweety » 17.02.2019, 21:47

Hi gaslamperl,

die Anpassung ist im obigen Beitrag erfolgt. Leider kann Chromium nur experimentell mit :matches() umgehen. Und mir ist nicht aufgefallen, dass ich diese Option anhatte. Es sollte jetzt aber auch bei dir korrekt aussehen, wenn du die color.map nochmal neu mit dem Inhalt von oben erstellst.

Benutzeravatar
onkeltommy
Beiträge: 663
Registriert: 07.05.2016, 08:03
Wohnort: Wien
Hat sich bedankt: 6 Mal
Danksagung erhalten: 2 Mal

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von onkeltommy » 18.02.2019, 10:24

Hey Leute, das wird ja immer besser :-)

Sollte man bald ne Rubrik "Skins" aufmachen ... Hammer

lG
--------------------------
Raspberrymatic 3.47.15.20190831 ...... auf TinkerS (Produktivsystem) + RB3 & RB3+

Benutzeravatar
DerHeimer
Beiträge: 166
Registriert: 30.08.2014, 00:57
Danksagung erhalten: 1 Mal

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von DerHeimer » 18.02.2019, 18:38

ptweety hat geschrieben:
16.02.2019, 22:40
DerHeimer, danke für diese Inspiration. Und auch bei Stilgar habe ich mal schamlos Teile kopiert. Auch Ihm gilt mein Dank.

Ich war selber an ein paar optischen Änderungen der WebUI interessiert und hier ist nun mein Ergebnis. Vielleicht will das ja jemand aufgreifen und für sich weiter nutzen.
Genau so hatte ich es mir gedacht! :D
Schön, was Du daraus gemacht hast. Gefällt mir sehr.

gaslamperl
Beiträge: 27
Registriert: 17.03.2016, 17:56

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von gaslamperl » 23.02.2019, 19:53

Danke für die Anpassung
leider funktioniert die Reihenfolge in der Systemsteuerung noch nich sauber
web.jpg
Vielen DANK

ptweety
Beiträge: 217
Registriert: 07.01.2017, 16:48
Hat sich bedankt: 3 Mal
Danksagung erhalten: 2 Mal

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von ptweety » 23.02.2019, 21:19

Hi gaslamperl,

Versuchs nochmal mit der aktuellen Version weiter oben. Wenn das nicht funktioniert, dann zeige ich dir, wie man diesen Teil des css rauswerfen kann.

gaslamperl
Beiträge: 27
Registriert: 17.03.2016, 17:56

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von gaslamperl » 24.02.2019, 09:23

Guten morgen,
prima das würde mich freuen wenn wir das hinbringen.
Besteht das Problem auch bei anderen usern ?
schönen Sonntag..

gaslamperl
Beiträge: 27
Registriert: 17.03.2016, 17:56

Re: Erweiterte WebUI Anpassungen mit Hilfe der color.map

Beitrag von gaslamperl » 24.02.2019, 09:28

schon besser
nur noch nicht perfekt :D :?:
web.jpg
mit der Ansicht im Contol des Thermostates ist das so gewollt mit dem Regler ?
Dateianhänge
web2.jpg

Antworten

Zurück zu „HomeMatic Tipps & Tricks - keine Fragen!“