(Erledigt) dark style passt manche Devices nicht an...

[misux]

HI!

Ich habe ein Problem mit dem Style "dark" Es ist für mich das ansprechendste und aufgrräumteste. Problem ist das ich bei manchen Devices das phänomen habe das die Breite des Bildes auf einmal ca 3 Meter ist, aufgrund von manchen Attributen oder styleSheets oder sonstigem. Somit ist das in diesen Fällen sogut wie nicht nutzbar.
Beim F11 oder F18 style wird es problemlos auf einem Bildschirm, egal wie groß, dargestellt.

Gibt es dafür vielleicht eine Lösung? Gibt es irgendwas was ich machen könnte damit die ansicht im "dark" style vernünftig auf die Bildschirmbreite angepasst wird..?

Vielen Dank und Frohes Neues!

[rudolfkoenig]

Es ist für mich das ansprechendste und aufgrräumteste.

Das ist erfreulich.
Weniger erfreulich ist, dass dieser Style noch nie einen Maintainer hatte.
Meine Motivation zum debuggen ist begrenzt, ich will ja f18 propagieren

Gibt es irgendwas was ich machen könnte damit die ansicht im "dark" style vernünftig auf die Bildschirmbreite angepasst wird..?

Klar: CSS anpassen und die diffs mir schicken, ich werde sie einchecken, versprochen

[misux]

Meine Motivation zum debuggen ist begrenzt, ich will ja f18 propagieren

Wenn das f18er noch solche Umrandungen hätte und die Schrift etwas kleiner sein könnte wäre ich nach der einen oder anderen Anpassung auch zufrieden damit.
Und irgendwie finde ich keine Möglichkeit die set oder get buttons farblich hervorzuheben... Das ist manchmal anstrengend... siehe Bild...

Klar: CSS anpassen und die diffs mir schicken, ich werde sie einchecken, versprochen

Wenn ich davon Ahnung hätte würde ich es sofort übernehmen...  Alles was ich bis jetzt gemacht habe musste ich mir üüübelst zusammensuchen... Vielleicht findet sich jemand... Es ist ja an sich nur das Problem in den Devices... nur dors wird es brutal breit dargestellt...

Siehe Bild... So sieht eines meiner 2 Devices aus...

[Benni]

Wenn das f18er noch solche Umrandungen hätte und die Schrift etwas kleiner sein könnte wäre ich nach der einen oder anderen Anpassung auch zufrieden damit.
Und irgendwie finde ich keine Möglichkeit die set oder get buttons farblich hervorzuheben... Das ist manchmal anstrengend... siehe Bild...

Schau dir doch mal den Thread an, damit habe ich letztendlich zu f18 gefunden. Vielleicht ist das ja auch für dich ein guter Einstiegspunkt: https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740


Die Buttons (get/set/attr) und Überschriften der Einzelnen Detail-Sektionen (Internals/Readings/Attribute/...) sind bei mir farblich unterschieden. Ich bin jetzt auch nicht der css-Profi und tu mich meistens etwas schwer damit.
Das habe ich mit folgenden css-Anpassungen hinbekommen:

Code Auswählen Erweitern


input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input[type=submit] {
border-radius: 4px;
}


.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

.col_header[data-name="detail_Internals"] {
background-color: #652b65;;
color: white;
}

.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}

@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}


gb#

[rudolfkoenig]

Das habe ich mit folgenden css-Anpassungen hinbekommen:

Ergaenzung fuer @misux: bei f18 gibts einen "Additioanal CSS" Knopf Link

[misux]

Schau dir doch mal den Thread an, damit habe ich letztendlich zu f18 gefunden. Vielleicht ist das ja auch für dich ein guter Einstiegspunkt: https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740


Die Buttons (get/set/attr) und Überschriften der Einzelnen Detail-Sektionen (Internals/Readings/Attribute/...) sind bei mir farblich unterschieden. Ich bin jetzt auch nicht der css-Profi und tu mich meistens etwas schwer damit.
Das habe ich mit folgenden css-Anpassungen hinbekommen:

Code Auswählen Erweitern


input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input[type=submit] {
border-radius: 4px;
}


.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

.col_header[data-name="detail_Internals"] {
background-color: #652b65;;
color: white;
}

.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}

@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}


gb#

Das würde mir glatt auf anhieb sehr gefallen! Hast du vielleicht die Muße mir zu geben was ich dafür brauche? Würde mich sehr freuen!
Den CSS code habe ich eingefügt, aber das ist ja nicht alles oder? Habe noch lange nicht so eine Schicke Ansicht wie dein Beispielbild.
Damit könnte cih auf "dark" verzichten.

[Benni]

Das würde mir glatt auf anhieb sehr gefallen! Hast du vielleicht die Muße mir zu geben was ich dafür brauche? Würde mich sehr freuen!
Den CSS code habe ich eingefügt, aber das ist ja nicht alles oder? Habe noch lange nicht so eine Schicke Ansicht wie dein Beispielbild.

Das ist bei mir etwas gewachsen und momentan noch recht willkürlich verteilt auf den, von Rudi genannten Additional-Css-Link, das Css-Attribut im FHEMWEB-Device und 2 zusätzlich eingebundenen css-Files. 

Ich werde morgen mal versuchen, das zu harmonisieren und würde es dann, möglichst f18-gerecht hier bereitstellen.

gb#

[misux]

Schau dir doch mal den Thread an, damit habe ich letztendlich zu f18 gefunden. Vielleicht ist das ja auch für dich ein guter Einstiegspunkt: https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740


Die Buttons (get/set/attr) und Überschriften der Einzelnen Detail-Sektionen (Internals/Readings/Attribute/...) sind bei mir farblich unterschieden. Ich bin jetzt auch nicht der css-Profi und tu mich meistens etwas schwer damit.
Das habe ich mit folgenden css-Anpassungen hinbekommen:

Code Auswählen Erweitern


input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input[type=submit] {
border-radius: 4px;
}


.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

.col_header[data-name="detail_Internals"] {
background-color: #652b65;;
color: white;
}

.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}

@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}


gb#

Bin grad am tüddeln... Wie hast du denn die unterschiedlichen Farben der Readings, Internals, Device Overviev, Attribute usw hinbekommen, ich bekomme sie immer nur gleichfarbig hin...

EDIT:
Ich glaube ich sehe es...

[Benni]

Also ....

.... ich habe das jetzt alles mal so zusammengeführt und angepasst, dass es direkt im F18 unter Additional-Css eingefügt werden kann.

Das meiste habe ich direkt aus dem bereits genannten Thread (https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740) übernommen.

Ich werde dafür auch keinen weiteren Support übernehmen da ich, wie bereits gesagt, absolut kein CSS-Profi bin und froh bin dass das so funktioniert, wenn ich auch manchmal ("Wie wird den hier kaskadiert?") nicht genau verstehe, wieso.

Ansonsten, wenn also irgendein Css-Crack hier Anmerkungen oder Verbesserungen hat, immer her damit!

Jetzt aber zur Einrichtung:

Für das FHEMWEB-Device muss natürlich f18 als Style ausgewählt sein!

Die Farb- und Basiseinstellungen für das gewählte f18 sind die folgenden und einzutragen im styleData-Attribut des betroffenen FHEMWEB-Device:

Code Auswählen Erweitern


{
"f18": {
  "Pinned.menu": true,
  "cols.bg": "101010",
  "cols.fg": "cccccc",
  "cols.link": "f5f5f5",
  "cols.evenrow": "161616",
  "cols.oddrow": "202020",
  "cols.header": "333333",
  "cols.menu": "111111",
  "cols.sel": "333333",
  "cols.inpBack": "ffffff",
  "savePinChanges": true,
  "hidePin": true,
  "hideLogo": true,
  "fixedInput": true,
  "hideTextInput": false
}
}


Dann per Link "Additional-Css" unter "Select-Style" folgendes CSS einfügen:

Code Auswählen Erweitern


/* FHEM Style f18_dark@benni (adapted from:f18_dark@Simon74) */
/* https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740 */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
--myOrange:     #aa6900;
--myRed:        #ad3333;
--myGreen:      #32a054;
--myBlue:       #3373a6;
--myGray:       #8C8C8C;
--myGreen:      #52B26D;
--myTitle:      White;
--myDevices:    LightGray;
--myBackground: #222222;
--myButtonA:    goldenrod;
--mySyslink:    orange;
--myTextBG:     #dddddd;
--myMenuText:   #fefefe;
}

html, body, html * {
    font-family: 'Roboto';
}

a#saveCheck span {
    color: red !important;
}

@font-face {
    font-style: normal;
    font-weight: 300;
}

/* Logfile Schriftart */
[class*="log"] {
    font-family: Courier,Verdana, Arial;
    font-size: 12px;
}

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important; color:#cccccc!important; }
.ui-state-active {border:1px solid var(--myDevices); }
.ui-button-text-only.ui-state-default { background:var(--myBackground); }
.ui-button-text-only.ui-state-active { background:var(--myOrange); }
.ui-menu { background:var(--myBackground); }
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
border: 1px solid var(--myGray);
background: none;
background-color: var(--myBackground);
font-size: 14px;
}

/* Dropdown */
select {
/* -webkit-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* -moz-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
margin-left:3px;
margin-right:3px;
border-radius:3px;
background-color:var(--myBackground);
border:1px solid;
border-color:gray;
}

/* ReadingsGroup */
@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-rg_mms1 tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_mms1 tr {
    display: table-cell !important;
}
table#readingsGroup-rg_mms1 tr td {
    display: table-cell !important;
}

table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tr td {
width: 100% !important;
    display: table-cell !important;
}
}

/* Smartphone, zeige Commands auch Hochkant (Portait Mode) */
@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
    color: #CCCCCC;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    background-color: var(--myTextBG);
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 30px;
    width: 30px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;

}

div#menu > .col_header {
    fill: var(--myRed);
    font-size: 16px;
background-color: var(--myRed);
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #333333;
}

div#menu tr tr:hover {
    background-color: var(--myBlue);
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: var(--myMenuText) ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: var(--myOrange);
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: transparent;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: var(--myRed);
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

/* Command Eingabefelder*/
input[type="text"] {
    color: black;
padding-left: 8px;
}

/* Submit */
input[type=submit] {
background-color: var(--myOrange);
border: 1px solid var(--myTitle);
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}

input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 20px;
  /* text-transform: uppercase; */
  font-weight: 200;
  line-height: 20px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  /* text-transform: uppercase;  */
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 4px;
background-color: var(--myTextBG);
    /*border: 1px solid #000000;*/
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: var(--mySyslink) !important;
}

table.block.wide.internals.wrapcolumns a {
    color: var(--mySyslink) !important;
}

a#DEFa {
    padding: 4px;
}

input[type=submit] {
border-radius: 4px;
}


/* Different colors for set-/get- and attr-Buttons in Device details */

input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

.rc_body {
background-color: #5d5d5d;
}

input.maininput {
    box-shadow: inset 2px 2px 5px 0px #404040;
font-family: monospace;
font-weight:  bold;
}

/* Colored tab look for device detail areas Internals/Readings/Attributes/Probably associataed with */
@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}

.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

.col_header[data-name="detail_Internals"] {
background-color: #652b65;;
color: white;
}

.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

/* I like to have menu-header and device-overview header in seperate color (red) */
.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}


.CodeMirror * {
font-family: monospace;
}

pre {   
font-family: monospace;
}

.log {
font-size:16px;
color: khaki;
}

.col_header {
background-color: #2b3867;
background: #2b3867;
    fill: #2b3867;
}

#FW_okDialog a {
    font-family: monospace;
}


/* Special colors for special group headers */
*[class*="_grp_Beleuchtung"] {
    background-color: #c7bb1fa6;
}

*[class*="_grp_Licht"] {
    background-color: #c7bb1fa6;
}

/* adjust line-/word-break to window size */

table.internals td:nth-child(2) { word-break:break-word; }
table.attributes td:nth-child(2) { word-break:break-word; }



Beispielhaft sind in obigem Css für die Gruppen-Überschriften der Gruppen "Beleuchtung" und "Licht" nochmals andere Farben (ein gedecktes gelb) angegeben um diese gesondert hervorzuheben. Das lässt sich natürlich auf beliebige Gruppen erweitern und anpassen. Wichtig ist nur zu wissen, wie sich dann der Css-Klassen-Name aus dem Gruppen-Namen (group-Attribut) zusammensetzt.
Hier nochmal explizit die Einträge für die beiden Gruppen

Code Auswählen Erweitern


/* Special colors for special group headers */
*[class*="_grp_Beleuchtung"] {
    background-color: #c7bb1fa6;
}

*[class*="_grp_Licht"] {
    background-color: #c7bb1fa6;
}


Weiterhin habe ich bei mir Code-Mirror aktiv. Das gehört zwar nicht wirklich zum Style, aber ist für die Code-Bearbeitung unter "Edit-Files" in sofern, u.a. eine visuelle Bereicherung, da damit Syntax-Highlighting zur Verfügung steht.

Das geschieht indem man das Code-Morror-Script im FHEMWEB-Device über das Attribut JavaScripts einbindet und ggf. über das Attribut codemirrorParam configuriert:

Code Auswählen Erweitern


JavaScripts=codemirror/fhem_codemirror.js
codemirrorParam={ "height":"auto","theme":"monokai", "lineNumbers":true ,"jumpToLine":true,"lineWrapping":true}


Siehe dazu auch: https://wiki.fhem.de/wiki/Codemirror

Als zusätzliches Helferlein habe ich bei noch die Command-Bar-History aktiv: https://forum.fhem.de/index.php/topic,68945.0.html

gb#

Edit: Ich habe jetzt nochmal 2 Bespiel-Screenshots angehängt, zum einen um das mit der Gruppe "Beleuchtung" zu zeigen und zum anderen um nochmal eine komplette Device-Übersicht mit allen Bereichen und Buttons zu zeigen.

[Benni]

Ich habe das css bei mir noch etwas erweitert.

Die einzelnen Bereiche erhalten damit einen Rahmen mit abgerundeten Ecken in derselben Farbe wie der Bereichsheader (s. Screenshot)

Code Auswählen Erweitern


/* FHEM Style bb_f18_dark@benni (inherited from:f18_dark@Simon74) */
/* https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740 */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
--myOrange:     #aa6900;
--myRed:        #ad3333;
--myGreen:      #32a054;
--myBlue:       #3373a6;
--myGray:       #8C8C8C;
--myGreen:      #52B26D;
--myTitle:      White;
--myDevices:    LightGray;
--myBackground: #222222;
--myButtonA:    goldenrod;
--mySyslink:    orange;
--myTextBG:     #dddddd;
--myMenuText:   #fefefe;
}

html, body, html * {
    font-family: 'Roboto';
}

a#saveCheck span {
    color: red !important;
}

@font-face {
    font-style: normal;
    font-weight: 300;
}

/* Logfile Schriftart */
[class*="log"] {
    font-family: Courier,Verdana, Arial;
    font-size: 12px;
}

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important; color:#cccccc!important; }
.ui-state-active {border:1px solid var(--myDevices); }
.ui-button-text-only.ui-state-default { background:var(--myBackground); }
.ui-button-text-only.ui-state-active { background:var(--myOrange); }
.ui-menu { background:var(--myBackground); }
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
border: 1px solid var(--myGray);
background: none;
background-color: var(--myBackground);
font-size: 14px;
}

/* Dropdown */
select {
/* -webkit-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* -moz-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
margin-left:3px;
margin-right:3px;
border-radius:3px;
background-color:var(--myBackground);
border:1px solid;
border-color:gray;
}

/* ReadingsGroup */
@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-rg_mms1 tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_mms1 tr {
    display: table-cell !important;
}
table#readingsGroup-rg_mms1 tr td {
    display: table-cell !important;
}

table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tr td {
width: 100% !important;
    display: table-cell !important;
}
}

/* Smartphone, zeige Commands auch Hochkant (Portait Mode) */
@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
    color: #CCCCCC;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    background-color: var(--myTextBG);
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 30px;
    width: 30px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;

}

div#menu > .col_header {
    fill: var(--myRed);
    font-size: 16px;
background-color: var(--myRed);
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #333333;
}

div#menu tr tr:hover {
    background-color: var(--myBlue);
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: var(--myMenuText) ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: var(--myOrange);
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: transparent;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: var(--myRed);
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

/* Command Eingabefelder*/
input[type="text"] {
    color: black;
padding-left: 8px;
}

/* Submit */
input[type=submit] {
background-color: var(--myOrange);
border: 1px solid var(--myTitle);
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}

input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 20px;
  /* text-transform: uppercase; */
  font-weight: 200;
  line-height: 20px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  /* text-transform: uppercase;  */
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 4px;
background-color: var(--myTextBG);
    /*border: 1px solid #000000;*/
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: var(--mySyslink) !important;
}

table.block.wide.internals.wrapcolumns a {
    color: var(--mySyslink) !important;
}

a#DEFa {
    padding: 4px;
}

input[type=submit] {
border-radius: 4px;
}


/* Different colors for set-/get- and attr-Buttons in Device details */

input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

.rc_body {
background-color: #5d5d5d;
}

input.maininput {
    box-shadow: inset 2px 2px 5px 0px #404040;
font-family: monospace;
font-weight:  bold;
}

/* Colored tab look for device detail areas Internals/Readings/Attributes/Probably associataed with */
@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}

table.block.wide {
    border-collapse: separate;
    padding: 5px;
    border: solid 2px #2b3867;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

table.block.wide.attributes.wrapcolumns {
    border-color: #0073aa;
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Internals"] {
background-color: #652b65;
color: white;
}

table.block.wide.internals.wrapcolumns {
    border-color: #652b65;
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

table.block.wide.readings.wrapcolumns {
    border-color: var(--myGreen);
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

table.block.wide.assoc.wrapcolumns {
    border-color: var(--myOrange);
    border-style: solid;
    border-width: 2px;
}


/* I like to have menu-header and device-overview header in seperate color (red) */
.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}
#ddtable table:first-of-type {
    border-color: var(--myRed);
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}


.CodeMirror * {
font-family: monospace;
}

pre {   
font-family: monospace;
}

.log {
font-size:16px;
color: khaki;
}

.col_header {
background-color: #2b3867;
background: #2b3867;
    fill: #2b3867;
}

#FW_okDialog a {
    font-family: monospace;
}


/* Special colors for special group headers */
*[class*="_grp_Beleuchtung"] {
    background-color: #c7bb1fa6;
}

table#TYPE_Beleuchtung {
border-color: #c7bb1fa6;
}

*[class*="_grp_Licht"] {
    background-color: #c7bb1fa6;
}
table#TYPE_Licht {
border-color: #c7bb1fa6;
}

/* adjust line-/word-break to window size */

table.internals td:nth-child(2) { word-break:break-word; }
table.attributes td:nth-child(2) { word-break:break-word; }




Wenn man möchte und einem das gefällt, kann man das auch noch um folgenden Css-Code erweitern:

Code Auswählen Erweitern


div.pinHeader {
   position: sticky;
   top: 0px;
}


Damit bleibt dann beim Scrollen der jeweils oberste header oben fixiert, bis dann der nächste dort angekommen ist, dann bleibt der stehen und der vorherige wird weggescrollt (keine Ahnung, wie sich der Effekt nennt, wahrscheinlich irgendwas mit "Stack").

gb#

[misux]

 
Das Ding ist Grandios! Fett! Trifft genau meinen Geschmack! Habe es genauso übernommen! 

Vielen Dank dafür!

[misux]

Ich habe das css bei mir noch etwas erweitert.

Die einzelnen Bereiche erhalten damit einen Rahmen mit abgerundeten Ecken in derselben Farbe wie der Bereichsheader (s. Screenshot)

Code Auswählen Erweitern


/* FHEM Style bb_f18_dark@benni (inherited from:f18_dark@Simon74) */
/* https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740 */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
--myOrange:     #aa6900;
--myRed:        #ad3333;
--myGreen:      #32a054;
--myBlue:       #3373a6;
--myGray:       #8C8C8C;
--myGreen:      #52B26D;
--myTitle:      White;
--myDevices:    LightGray;
--myBackground: #222222;
--myButtonA:    goldenrod;
--mySyslink:    orange;
--myTextBG:     #dddddd;
--myMenuText:   #fefefe;
}

html, body, html * {
    font-family: 'Roboto';
}

a#saveCheck span {
    color: red !important;
}

@font-face {
    font-style: normal;
    font-weight: 300;
}

/* Logfile Schriftart */
[class*="log"] {
    font-family: Courier,Verdana, Arial;
    font-size: 12px;
}

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important; color:#cccccc!important; }
.ui-state-active {border:1px solid var(--myDevices); }
.ui-button-text-only.ui-state-default { background:var(--myBackground); }
.ui-button-text-only.ui-state-active { background:var(--myOrange); }
.ui-menu { background:var(--myBackground); }
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
border: 1px solid var(--myGray);
background: none;
background-color: var(--myBackground);
font-size: 14px;
}

/* Dropdown */
select {
/* -webkit-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* -moz-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
margin-left:3px;
margin-right:3px;
border-radius:3px;
background-color:var(--myBackground);
border:1px solid;
border-color:gray;
}

/* ReadingsGroup */
@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-rg_mms1 tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_mms1 tr {
    display: table-cell !important;
}
table#readingsGroup-rg_mms1 tr td {
    display: table-cell !important;
}

table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tr td {
width: 100% !important;
    display: table-cell !important;
}
}

/* Smartphone, zeige Commands auch Hochkant (Portait Mode) */
@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
    color: #CCCCCC;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    background-color: var(--myTextBG);
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 30px;
    width: 30px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;

}

div#menu > .col_header {
    fill: var(--myRed);
    font-size: 16px;
background-color: var(--myRed);
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #333333;
}

div#menu tr tr:hover {
    background-color: var(--myBlue);
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: var(--myMenuText) ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: var(--myOrange);
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: transparent;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: var(--myRed);
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

/* Command Eingabefelder*/
input[type="text"] {
    color: black;
padding-left: 8px;
}

/* Submit */
input[type=submit] {
background-color: var(--myOrange);
border: 1px solid var(--myTitle);
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}

input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 20px;
  /* text-transform: uppercase; */
  font-weight: 200;
  line-height: 20px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  /* text-transform: uppercase;  */
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 4px;
background-color: var(--myTextBG);
    /*border: 1px solid #000000;*/
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: var(--mySyslink) !important;
}

table.block.wide.internals.wrapcolumns a {
    color: var(--mySyslink) !important;
}

a#DEFa {
    padding: 4px;
}

input[type=submit] {
border-radius: 4px;
}


/* Different colors for set-/get- and attr-Buttons in Device details */

input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

.rc_body {
background-color: #5d5d5d;
}

input.maininput {
    box-shadow: inset 2px 2px 5px 0px #404040;
font-family: monospace;
font-weight:  bold;
}

/* Colored tab look for device detail areas Internals/Readings/Attributes/Probably associataed with */
@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}

table.block.wide {
    border-collapse: separate;
    padding: 5px;
    border: solid 2px #2b3867;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

table.block.wide.attributes.wrapcolumns {
    border-color: #0073aa;
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Internals"] {
background-color: #652b65;
color: white;
}

table.block.wide.internals.wrapcolumns {
    border-color: #652b65;
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

table.block.wide.readings.wrapcolumns {
    border-color: var(--myGreen);
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

table.block.wide.assoc.wrapcolumns {
    border-color: var(--myOrange);
    border-style: solid;
    border-width: 2px;
}


/* I like to have menu-header and device-overview header in seperate color (red) */
.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}
#ddtable table:first-of-type {
    border-color: var(--myRed);
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}


.CodeMirror * {
font-family: monospace;
}

pre {   
font-family: monospace;
}

.log {
font-size:16px;
color: khaki;
}

.col_header {
background-color: #2b3867;
background: #2b3867;
    fill: #2b3867;
}

#FW_okDialog a {
    font-family: monospace;
}


/* Special colors for special group headers */
*[class*="_grp_Beleuchtung"] {
    background-color: #c7bb1fa6;
}

table#TYPE_Beleuchtung {
border-color: #c7bb1fa6;
}

*[class*="_grp_Licht"] {
    background-color: #c7bb1fa6;
}
table#TYPE_Licht {
border-color: #c7bb1fa6;
}

/* adjust line-/word-break to window size */

table.internals td:nth-child(2) { word-break:break-word; }
table.attributes td:nth-child(2) { word-break:break-word; }




Wenn man möchte und einem das gefällt, kann man das auch noch um folgenden Css-Code erweitern:

Code Auswählen Erweitern


div.pinHeader {
   position: sticky;
   top: 0px;
}


Damit bleibt dann beim Scrollen der jeweils oberste header oben fixiert, bis dann der nächste dort angekommen ist, dann bleibt der stehen und der vorherige wird weggescrollt (keine Ahnung, wie sich der Effekt nennt, wahrscheinlich irgendwas mit "Stack").

gb#

Sagemal, könnte man den Menübereich noch etwas unterteilen? Da sind etwas viele wichtige funktionen ganz schön dicht zusammen. Siehe Bild... Kann man da auch farbliche Rahmen setzen?

Dankeschön!

[Benni]

Sagemal, könnte man den Menübereich noch etwas unterteilen? Da sind etwas viele wichtige funktionen ganz schön dicht zusammen.

Räume können gruppiert werden, will heißen sie können hierarchisch strukturiert werden.

Schau mal da: https://fhem.de/commandref_DE.html#room
und/oder da: https://wiki.fhem.de/wiki/Room

Vielleicht ist das ja eine Alternative für dich? Ich habe das jedenfalls so im Einsatz!

Zusammen mit den FHEMWEB-Attributen sortRooms (https://fhem.de/commandref_DE.html#sortRooms) und hiddenroom (https://fhem.de/commandref_DE.html#hiddenroom) kann man da ganz gut das Menü aufräumen und strukturieren.

Ansonsten kann man sicher auch im Menü noch mit Css was machen, aber da habe ich selbst keinen Bedarf

gb#

[Benni]

Kleinere Anpassungen im css für HMdeviceTools (https://forum.fhem.de/index.php/topic,106959.0.html).

Im Menü gibt es bei mir einen Eintrag "Uebersicht" dieser wird jetzt mit font-weight:bold dargestellt.

Weiterhin habe ich den "Stack-Effekt" (aus #9) nun direkt mit drin. Der funktioniert allerdings bisher nicht überall und ich weiß noch nicht genau warum ( css und ich werden wohl keine Freunde mehr werden).

Code Auswählen Erweitern


/* FHEM Style bb_f18_dark@benni (inherited from:f18_dark@Simon74) */
/* https://forum.fhem.de/index.php/topic,84760.msg770740.html#msg770740 */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
--myOrange:     #aa6900;
--myRed:        #ad3333;
--myGreen:      #32a054;
--myBlue:       #3373a6;
--myGray:       #8C8C8C;
--myGreen:      #52B26D;
--myTitle:      White;
--myDevices:    LightGray;
--myBackground: #222222;
--myButtonA:    goldenrod;
--mySyslink:    orange;
--myTextBG:     #dddddd;
--myMenuText:   #fefefe;
}

html, body, html * {
    font-family: 'Roboto';
}

a#saveCheck span {
    color: red !important;
}

@font-face {
    font-style: normal;
    font-weight: 300;
}

/* Logfile Schriftart */
[class*="log"] {
    font-family: Courier,Verdana, Arial;
    font-size: 12px;
}

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important; color:#cccccc!important; }
.ui-state-active {border:1px solid var(--myDevices); }
.ui-button-text-only.ui-state-default { background:var(--myBackground); }
.ui-button-text-only.ui-state-active { background:var(--myOrange); }
.ui-menu { background:var(--myBackground); }
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
border: 1px solid var(--myGray);
background: none;
background-color: var(--myBackground);
font-size: 14px;
}

/* Dropdown */
select {
/* -webkit-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* -moz-appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
/* appearance: none; /* damit im safari nicht grauer-bg und weisse schrift..*/
margin-left:3px;
margin-right:3px;
border-radius:3px;
background-color:var(--myBackground);
border:1px solid;
border-color:gray;
}

/* ReadingsGroup */
@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-rg_mms1 tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_mms1 tr {
    display: table-cell !important;
}
table#readingsGroup-rg_mms1 tr td {
    display: table-cell !important;
}

table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tbody {
    width: 100%;
    display: table !important;
}
table#readingsGroup-rg_wz_receiver, table#readingsGroup-rg_wz_squeezelite tr td {
width: 100% !important;
    display: table-cell !important;
}
}

/* Smartphone, zeige Commands auch Hochkant (Portait Mode) */
@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
    color: #CCCCCC;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    background-color: var(--myTextBG);
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 30px;
    width: 30px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;

}

div#menu > .col_header {
    fill: var(--myRed);
    font-size: 16px;
background-color: var(--myRed);
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #333333;
}

div#menu tr tr:hover {
    background-color: var(--myBlue);
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: var(--myMenuText) ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: var(--myOrange);
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: transparent;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: var(--myRed);
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

/* Command Eingabefelder*/
input[type="text"] {
    color: black;
padding-left: 8px;
}

/* Submit */
input[type=submit] {
background-color: var(--myOrange);
border: 1px solid var(--myTitle);
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}

input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 20px;
  /* text-transform: uppercase; */
  font-weight: 200;
  line-height: 20px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  /* text-transform: uppercase;  */
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 4px;
background-color: var(--myTextBG);
    /*border: 1px solid #000000;*/
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: var(--mySyslink) !important;
}

table.block.wide.internals.wrapcolumns a {
    color: var(--mySyslink) !important;
}

a#DEFa {
    padding: 4px;
}

input[type=submit] {
border-radius: 4px;
}


/* Different colors for set-/get- and attr-Buttons in Device details */

input.get {
background-color: green;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.set {
background-color: var(--myRed);
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

input.attr{
background-color: #0073aa;
border-style: none;
    box-shadow: 1px 1px 2px 1px #a5a5a5;
    margin: 3px;
}

.rc_body {
background-color: #5d5d5d;
}

input.maininput {
    box-shadow: inset 2px 2px 5px 0px #404040;
font-family: monospace;
font-weight:  bold;
}

/* Colored tab look for device detail areas Internals/Readings/Attributes/Probably associataed with */
@media screen and (min-width: 800px) {
.col_header {
width:400px;
}
}

table.block.wide {
    border-collapse: separate;
    padding: 5px;
    border: solid 2px #2b3867;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.col_header[data-name="detail_Attributes"] {
background-color: #0073aa;
color: white;
}

table.block.wide.attributes.wrapcolumns {
    border-color: #0073aa;
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Internals"] {
background-color: #652b65;
color: white;
}

table.block.wide.internals.wrapcolumns {
    border-color: #652b65;
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Readings"] {
background-color: var(--myGreen);
color: white;
}

table.block.wide.readings.wrapcolumns {
    border-color: var(--myGreen);
    border-style: solid;
    border-width: 2px;
}


.col_header[data-name="detail_Probably_associated_with"] {
background-color: var(--myOrange);
color: white;
}

table.block.wide.assoc.wrapcolumns {
    border-color: var(--myOrange);
    border-style: solid;
    border-width: 2px;
}


/* I like to have menu-header and device-overview header in seperate color (red) */
.col_header[data-name="detail_DeviceOverview"] {
background-color: var(--myRed);
color: white;
}
#ddtable table:first-of-type {
    border-color: var(--myRed);
}

.col_header[data-name="menu"] {
background-color: var(--myRed);
color:white;
width:unset;
}


.CodeMirror * {
font-family: monospace;
}

pre {   
font-family: monospace;
}

.log {
font-size:16px;
color: khaki;
}

.col_header {
background-color: #2b3867;
background: #2b3867;
    fill: #2b3867;
}

#FW_okDialog a {
    font-family: monospace;
}


/* Special colors for special group headers */
*[class*="_grp_Beleuchtung"] {
    background-color: #c7bb1fa6;
}

table#TYPE_Beleuchtung {
border-color: #c7bb1fa6;
}

*[class*="_grp_Licht"] {
    background-color: #c7bb1fa6;
}
table#TYPE_Licht {
border-color: #c7bb1fa6;
}

div.pinHeader {
   position: sticky;
   top: 0px;
}

/* Special formatted menu entries*/
.menu_Uebersicht {
    font-weight: bold ! important;
}

/* adjust line-/word-break to window size */

div#HMdeviceTools_toolsTable .col_header {
background-color: #2b3867;
}

div#HMdeviceTools_toolsTable table.block.wide {
    border: solid 2px #2b3867;
    background-color:unset !important;
}


table.internals td:nth-child(2) { word-break:break-word; }
table.attributes td:nth-child(2) { word-break:break-word; }





gb#

[misux]

Hallo Benni,

deine style Anpassung ist immernoch best Ever... Aber eine Frage... habe meine Homematic Aktoren in Gruppen gepackt.. Schick! Allerdings ist die Verteilung irgendwie durcheinander was die ansicht angeht... Siehe Bild.

Hast du eine Idee woran es liegen könnte? Es sind im Prinzop alle 1Fach oder 2Fach Schalter... die 8fach Schalter sind alle schön gleichmäßig untereinander.

Vielen Dank!