Erweiterte WebUI Anpassungen mit Hilfe der color.map

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

Moderator: Co-Administratoren

Antworten
Benutzeravatar
DerHeimer
Beiträge: 163
Registriert: 30.08.2014, 00:57

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) 22-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) 311 mal betrachtet
color_map black-blue-glossy v2.zip
(1.12 KiB) 13-mal heruntergeladen
silber.png
silber.png (31.81 KiB) 311 mal betrachtet
rot-silber.png
rot-silber.png (37.91 KiB) 311 mal betrachtet
color.map.rot-silber.zip
(1 KiB) 15-mal heruntergeladen
color.map.silver.zip
(1.03 KiB) 15-mal heruntergeladen

ptweety
Beiträge: 160
Registriert: 07.01.2017, 16:48

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.

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(--orange)"
channelBackground       "var(--white)"
channelBorder           "var(--steelblue)"

inherit                 inherit
transparent             transparent
windowText              WindowText

blue                    "var(--darkblue)"
testActive              "var(--yellow)"
testOk                  "var(--lime)"
red                     "var(--red)"
progressbarHighlight    "var(--midnightblue)"
progressbarBackground   "var(--gray)"
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; */

    --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: #F39C12; /* #ff9731 */
    --danger: #E74C3C;
    --lightgray: #D3D3D3; /* #f8f9fa; */
    --light: #F8F9F9;
    --lightslategray: #D5DBDB;
    --dark: #424949;
    --black: #000000;

    --bg-img: url(\"data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?><svg width='304' height='304' viewBox='0 0 304 304' xmlns='http://www.w3.org/2000/svg'><path fill='var(--primary)' 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'></path></svg>\");
    --bg-img-1: url(\"data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?><svg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><g fill-rule='evenodd'><g fill='var(--primary)'><path 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;'/></g></g></svg>\");
}

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

/* ------------------------------------------------------------------ */
/* 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;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' stroke='var(--white)'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1'><animate 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'/><animate 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'/></circle><circle cx='22' cy='22' r='1'><animate 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'/><animate 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'/></circle></g></svg>\") 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 !important;
}

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:hover {
    box-shadow: 0px 0px 10px 0px var(--light);
}

.CLASS04700 {
    margin: auto;
}


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

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

.firmwareAvailable,
#NoAlarms.CLASS02800,
#NoServices.CLASS02600,
#noNewDevs.CLASS04302,
.LayerContainer #content > p {
    color: var(--warning) !important;
    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;
}

#tblStartpageInfo {
    background-color: var(--secondary) !important;
    border: solid 1px var(--black);
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;
    width: 98%;
}

#tblStartpageInfo td {
    padding: 5px;
}

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

.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(--black) !important;
    border-radius: 5px;
    padding: 5px;
}

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


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

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

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

.PercBtn, .ControlBtnOn, .ControlBtnOff {
    border-radius: 5px;
    padding: 5px;
    border: solid 1px var(--black) !important;
}

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

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

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

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

.DeviceListButton, .CLASS20009, .CLASS02108, .CLASS21904 {
    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 {
    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;
}

table:matches(
        .filterTable, .tblList, .tTable, .tMain, .SetProfLinkTbl, .LinkListTbl, .ChnListTbl, .parameters_table,
        #tblFunctionNames, #tblRoomNames, #DeviceListTable, #tblFavs, #tblfav, #DeviceInformation, #createLinkStep1
    ) {
    padding: 10px !important;
    border-color: var(--black);
    border-style: solid;
    border-radius: 5px;
    border-spacing: 0 !important;
    border-collapse: separate;
    background-color: var(--secondary);
}

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

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

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

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

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

table:matches(
        .filterTable, .tblList, .tTable, .tMain, .SetProfLinkTbl, .LinkListTbl,
        #id_device_parameters_table, #tblFunctionNames, #tblfav
    ) > *:first-child > tr:first-child > :matches(td, th):first-child,
table:matches(
        .filterTable, .ChnListTbl, #tblFunctionList, #tblRoomList,
        #id_channel_parameters_table, #tblFunctionNames, #tblRoomNames,
        #DeviceListTable, #sysvarsListTable, #userAdmin, #tblFavs,
        #DeviceInformation, createLinkStep1
    ) > *:nth-child(2) > tr:first-child > :matches(td, 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;
}

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

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

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

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

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

#content > table > tbody > tr > td#contentLeft > :matches(table, 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;
}

:matches(.StdTable, #tblStatus, #mainTable) td,
#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;
}

:matches(.DeviceListRow, .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(--primary);
    padding: 5px;
}

#tblNewFav, .bidcosrf_page, .sysConfigHeight,
table.StdTable > tbody > tr > td,
#mainTable > tbody > tr > td {
    border-radius: 5px;
}

#tblNewFav .CLASS06301 {
    color: inherit;
}

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

#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 {
    background-color: var(--light);
}

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

.thCell {
    padding: 0 !important;
}

#mainTable {
    border-spacing: 0;
}

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

#mainTable tr td {
    display: inline-block;
    width: 23%;
    margin: 1%;
    padding: 0;
}

.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;
}


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

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

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

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

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


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

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

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


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

#messagebox {
    border: solid 1px var(--primary);
    border-radius: 5px;
    padding: 5px !important;
    background-color: var(--secondary);
}

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


/* ------------------------------------------------------------------ */
/* UI Dialog */

.UIFrame {
    border: solid 1px var(--primary) !important;
}

.UIFrameTitle {
    font-size: larger !important; font-weight: 700;
}

.UIFrame,
.UIFrameTitle,
.UIFrameContent {
    background-color: var(--secondary) !important;
}

.UIFrame,
.UIButton {
    border-radius: 5px;
 }


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

.popupTitle {
    font-size: larger !important;
    font-weight: 700;
}

.popupTable {
    border-spacing: 0;
    border-collapse: collapse;
}

.popupTableScript {
    border: 0;
}

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

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

.CLASS00012 {
    margin: auto;
}

a.FooterButton {
    padding: 5px;
}


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

input[type=text],
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(--black) !important;
    border-radius: 3px !important;
    margin: 0.25em !important;
}

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


/* ------------------------------------------------------------------ */
/* 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: 4px;
}

"

deviceListRowHighlight  "var(--clickable); 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-16 um 22.23.59.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

Antworten

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