f18 CSS-Anpassungen

[TomLee]

Ich hab mir vor längerem die hier irgendwo geteilten CSS-Anpassungen von Benni, mehr schlecht als recht, auf das nötigste, nach meinem Geschmack, reduziert.
Mir gefällt das mit den bunten Hintergründen bei Menü, DeviceOverview, Internals, Readings und Attributes und die runden Rahmen der Widgets.
Alles andere hab ich bis ich irgendwann nicht mehr weiter kam (und die Lust verloren) aus dem CSS von Benni entfernt.

Kann mir wer mit Lust/Zeit und Kenntnis in der Materie zeigen wie das CSS genau anzupassen wäre für meine zwei Wünsche in f-18 und was man genau anpassen muss das im light-Modus die Hintergründe bei set, attr und der Hilfe entsprechend dargestellt werden, Bennis Anpassungen basieren ja auf dem dark-Modus ?

Mein CSS hab ich mal zum nachvollziehen in der Demo-Installation von Cooltux eingefügt.

[DasQ]

Ich kann dir mangels Beispielen nicht wirklich folgen, aber css ist ja ,,relativ" einfach, wenn einem bestimmte Dinge bekannt/bewusst sind.

Zum einen wird css immer von oben nach unten gelesen und immer das letzt überschreibt die vorrausgegangen.

Und zum andern die Spezifität (Wertigkeit) von Selektoren

Code Auswählen Erweitern

- Spezifität von Selektoren von gering nach hoch geordnet
*              /* A=0, B=0, C=0, Spezifität 0 0 0 */
h1             /* A=0, B=0, C=1, Spezifität 0 0 1 */
ul li          /* A=0, B=0, C=2, Spezifität 0 0 2 */
a::after       /* A=0, B=0, C=2, Spezifität 0 0 2 */
p:first-child  /* A=0, B=1, C=1, Spezifität 0 1 1 */
a:not([href])  /* A=0, B=1, C=1, Spezifität 0 1 1 */
ul.nav [href]  /* A=0, B=2, C=1, Spezifität 0 2 1 */
#author        /* A=1, B=0, C=0, Spezifität 1 0 0 */
#editor p      /* A=1, B=0, C=1, Spezifität 1 0 1 */
Beachten Sie: Die Zähler der Spezifität sind voneinander unabhängig. Ein hoher Wert des Zählers C wirkt sich nicht auf den Zähler B aus (z. B. ist 0 0 15 weniger spezifisch als 0 1 5).
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade
https://www.w3schools.com/css/css_specificity.asp

Also höher wertige Selektoren greifen vor niederen.

(Pseudoselektoren lass ich jetzt mal bewusst weg, das ist Feintuning)

[TomLee]

Ja, ich war halt ausnahmsweise wieder mal so naiv und dachte es zeigt mir einfach jemand was wo genau noch angepasst werden muss.
Vlt. packts mich ja irgendwann mal wieder und ich mach es selbst, zur Zeit eher nicht.

Hier noch mal das CSS (da war ich genauso blauäuig das in der Demo einzufügen):

Code Auswählen Erweitern

attr WEB Css /* 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;;\
}\
\
\
a#saveCheck span {\
    color: red !important;;\
}\
\
@font-face {\
    font-style: normal;;\
    font-weight: 300;;\
}\
\
/* 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;;\
 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;;\
border:1px solid;;\
border-color:gray;;\
}\
\
\
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;;\
}\
\
\
\
.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;;\
}\
\
\
\
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;;\
}\
\
.rc_body {\
background-color: #5d5d5d;;\
}\
\
\
/* 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: 1px;;\
}\
\
\
.col_header[data-name="detail_Internals"] {\
background-color: #652b65;;\
color: white;;\
}\
\
table.block.wide.internals.wrapcolumns {\
    border-color: #652b65;;\
    border-style: solid;;\
    border-width: 1px;;\
}\
\
\
.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: 1px;;\
}\
\
\
.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: 1px;;\
}\
\
\
/* 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;;\
}\
\
\
.col_header {\
background-color: #2b3867;;\
background: #2b3867;;\
    fill: #2b3867;;\
}\

[DasQ]

ich muss mal blöd fragen, wie hast du das "list" oder raw so abgefragt bekommen? ich hab mal vor jahren an der optik von fhem rumgespielt, aber so richtig liegt mein hauptaugenmerk nicht auf der optik. da bin ich vielleicht zu alt dafür.

nichts desto trotz ich habs jetzt mal bei "Additional CSS" im f18 style eingebaut und bekomm sowas als ergebniss. stimmt denn das so in etwa? oder lieg ich total daneben? ggf ein paar screenshots was du wie geändert haben willst. das bekomm ich normal schon hingepfuscht
und hast du mir ggf noch nenn link zu dem quell style? wie gesagt muß mich selber zuerstmal reindenken.

[TomLee]

ich muss mal blöd fragen, wie hast du das "list" oder raw so abgefragt bekommen? ich hab mal vor jahren an der optik von fhem rumgespielt, aber so richtig liegt mein hauptaugenmerk nicht auf der optik. da bin ich vielleicht zu alt dafür.

Das ist einfach aus dem Raw-List von WEB rauskopiert. Mir ist das auch nicht wichtig, aber irgendwie häng ich auch dran weils mir gefällt und jetzt auch schon gewohnt bin.

nichts desto trotz ich habs jetzt mal bei "Additional CSS" im f18 style eingebaut und bekomm sowas als ergebniss.

Kann man gar nicht über das + oder die Befehlszeile eingeben, war mir nicht klar  , geht nur nur über den Raw-Editor unten im Device, sry.

stimmt denn das so in etwa? oder lieg ich total daneben?

Ja passt.
Wenn du jetzt in der Detailansicht eines Device bist passt im light Modus dann der Hintergrund bei Menü, DeviceOverview, Internals, Readings und Attributes nicht den hätt ich dann gerne auch weiss (entsprechen müsste die Rahmenfarbe der Widgets angepasst werden) und in der Hilfe unten sollte der Hintergrund dann auch weiss sein und die Schriftfarbe müsste angepasst werden.
Ich merk aber auch gerade beim schreiben das hier wsl. ein Denkfehler meinerseits vorliegt, ursprünglich ist die Anpassung von Benni ja nur für die dark-Variante.
Ich nutz halt tagsüber light und abends dark. Vlt. fällt dir dazu ja trotzdem was ein.

Entweder war die Basis aus dem Beitrag oder dem darauf folgenden Beitrag.

[DasQ]

in der art?

ich hab die weißen schriften gegen lesbare auf dem hintergrund getauscht.

bau das so wie ich oben geschrieben in "Additional CSS" im f18 style (select style) ein.

Code Auswählen Erweitern

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


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

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

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important;; color:#000000!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;
 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;
    border:1px solid;
    border-color:gray;
}


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: #AA0B0B;;
}

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

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

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: #911b1b ! 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;
    width: 100%;
}

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

.downText {
    margin-top: 0px;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    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;
}



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

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


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


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

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


.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: 1px;
}


.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: 1px;
}


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


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

[TomLee]

Dickes Danke das dir das angeschaut hast.

Hab diese Zeilen nochmal angepasst:

167 (Menühintergrund bei light und dark immer schwarz)
181 (Schriftfarbe im Menü immer weiss)
Zeile 64 (input, textarea immer schwarz)

Jetzt brauchts noch eine Lösung für die Schriftfarbe der Buttons bei den Dialogfeldern im dark Modus.

Code Auswählen Erweitern

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


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

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

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important;; color:#000000!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;
 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;
    border:1px solid;
    border-color:gray;
}


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: #000000;
}

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

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: #ffffff ! 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;
    width: 100%;
}

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

.downText {
    margin-top: 0px;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    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;
}



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

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


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


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

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


.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: 1px;
}


.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: 1px;
}


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


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

[DasQ]

dann etwa so.

ich hab der editbox schrift noch etwas schatten gegenben damit man es besser lesen kann

Code Auswählen Erweitern

.bg-readingsgroup{
    text-align: left;
    background-color: white;
    border: 1px solid;
    border-radius: 8px;
}

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


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

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

/* FhemWidget USZU */
.ui-button-text { font-weight:normal!important; color:#lightgrey!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;
 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;
    border:1px solid;
    border-color:gray;
}


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: #AA0B0B;
    text-shadow: 1px 1px 2px #000   /*          TEXTschatten          */
}

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

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

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: #911b1b ! 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;
    width: 100%;
}

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

.downText {
    margin-top: 0px;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    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;
}



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

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


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


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

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


.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: 1px;
}


.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: 1px;
}


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


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

[TomLee]

Code Auswählen Erweitern

... noch etwas schatten gegenben damit man es besser lesen kann
Weiß nicht, meine Sehfähigkeit lässt irgendwie auch nach (mag das aber gar nicht glauben, ich bin erst 24  ), darum versuch ich das nachzuempfinden, allerdings find ich das mit dem Schatten dann noch unleserlicher.

Aufgrund das ich hier jetzt gefragt hatte und du (wegen deiner Hilfe  ) mich dazu animiert hast, mich mal wieder damit zu beschäftigen, bin ich auch etwas weitergekommen.

Das anpassen der Schriftfarbe (im light/dark-Modus) hat gar keinen Sinn.
Ich will nur die erwähnten bunten Hintergründe und die runden Rahmen bei den "Widgets" etc., mehr nicht. Das mein ich hab ich jetzt verstanden umzusetzen und werd ich vermutlich auch hinbekommen.

Das hin und her, da hier nirgendwo steht wie das Ergebnis genau sein soll, ist für die Katz und erkären find ich schwierig.

Wird noch etwas dauern, wie ich es mir am Ende vorstelle, werd ich hier aber dann irgendwann festhalten.

Trotzdem nochmal Danke fürs drüberschauen.

[DasQ]

naja ich hab mir natürlich auch jetzt so meine gedanken darüber gemacht. wo du sagtest das du tags und nachts unterschiedliche farben nutz, dacht ich mir, eigentlich eine tolle idee. allerdings schwer über nur ein css umzusetzten. sollte aber auch irgendwie macvhbar sein (z.b. js)

allerdings dachte ich mir, das muss doch auch mit nur fhem boardmitteln gehen.
daher mein denkansatz, 2. fhemweb instanz unter anderem port.

also zwei getrennte css nur die ports müsste man via at doif oder dergleichen zweimal am tag switchen und schon hat man den gewünschten effekt.

[rudolfkoenig]

tags und nachts unterschiedliche farben nutz [...] daher mein denkansatz, 2. fhemweb instanz unter anderem port.

Alternativ setzt man  mit einem kurzen JavaScript je nach Uhrzeit eine Klasse in Body:

Code Auswählen Erweitern

let hour = (new Date()).getHours();
$("body").addClass(hour > 8 && hour < 20 ? "day":"night");

was die relevanten CSS Anweisungen beachten muessen:

Code Auswählen Erweitern

body.day input, body.day textarea { color: #AA0B0B; ... }
body.night input, body.night textarea { color: #eeeeee; ... }

[TomLee]

Kurz.

Ich nutz dazu zwei at (war mal ein Vorschlag von Rudi):

Code Auswählen Erweitern

defmod at_f18_dark at *{sunset(0,"17:00","22:00")} attr WEB styleData {\
"f18":{\
"Pinned.menu": true,\
"savePinChanges": true,\
"Pinned.style.list.f18 special": true,\
"rightMenu": false,\
"hideLogo": true,\
"hidePin": false,\
"Pinned.detail.DeviceOverview": true,\
"cols.bg": "444444",\
"cols.fg": "CCCCCC",\
"cols.link": "FF9900",\
"cols.evenrow": "333333",\
"cols.oddrow": "111111",\
"cols.header": "222222",\
"cols.menu": "111111",\
"cols.sel": "333333",\
"cols.inpBack": "444444",\
"hideInput": false,\
"Pinned.detail.Readings": true,\
"Pinned.style.list.f18: Room specific": true\
 }\
};save
attr at_f18_dark group WEB-Stil

setstate at_f18_dark Next: 21:10:09
setstate at_f18_dark 2023-04-26 09:22:12 state Next: 21:10:09

Code Auswählen Erweitern

defmod at_f18_light at *{sunrise(0,"05:00","07:30")}  attr WEB styleData {\
"f18":{\
"Pinned.menu": true,\
"savePinChanges": true,\
"Pinned.style.list.f18 special": true,\
"rightMenu": false,\
"hideLogo": true,\
"hidePin": false,\
"Pinned.detail.DeviceOverview": true,\
"cols.bg": "F8F8F8",\
"cols.fg": "465666",\
"cols.link": "4C9ED9",\
"cols.evenrow": "E8E8E8",\
"cols.oddrow": "F0F0F0",\
"cols.header": "DDDDDD",\
"cols.menu": "EEEEEE",\
"cols.sel": "CAC8CF",\
"cols.inpBack": "FFFFFF",\
"hideInput": false,\
"Pinned.detail.Readings": true,\
"Pinned.style.list.f18: Room specific": true\
}\
};;save
attr at_f18_light group WEB-Stil

setstate at_f18_light Next: 05:38:12
setstate at_f18_light 2023-04-26 09:22:12 state Next: 05:38:12

Das mit dem save fällt mir jetzt gerade auf, war der Versuch automatisch zu speichern um das rote Fragezeichen zu verhindern, greift aber gar nicht und seit damals gar nicht mehr beschäftigt.


Das mit dem Javascript wüsst ich gar nicht wie man das umsetzt. Vermutung ist in einer Datei ablegen und die dann im Javascripts-Attribut angeben ? Muss ich mich mal mit beschäftigen mit dem Thema.

[TomLee]

Nochmal zu dem Javascript.

Ich will eigentlich schon lange Fragen ob man diesen Tageszeiten-Wechsel nicht f-18 spendieren kann und frage hiermit einfach mal, weil sich die richtige Situation halt auch jetzt ergeben hat.

In dem Flex-Style gibts dieses Feature. siehe Anhang

[rudolfkoenig]

Wie definiert Flex-Style Tag bzw. Nacht?

[DasQ]

also der codeschnipsel schaut so aus aus dem javascript

Code Auswählen Erweitern

applyDaytimeStyle: function(force) {
if (!flex.sunset || force) {
flex.helper.getLocation(
function(lat,lon) {
flex.sunset  = SunriseSunsetJS.getSunset(lat, lon);
flex.sunrise = SunriseSunsetJS.getSunrise(lat, lon);
flex.endOfDay = new Date((new Date()).setHours(23,59,59,999));
var now = new Date();
flex.isDay = flex.sunrise <= now && now <= flex.sunset;
var changed;
if (flex.isDay)
changed = flex.colorPreset.load(flex.settings.local.dayStyle);
else
changed = flex.colorPreset.load(flex.settings.local.nightStyle);
if (changed) {
flex.settings.save(true,true);
flex.settings.apply();
}
},
function(error) {
flex.settings.local.enableDayTimeStyle = false;
flex.settings.save(true);
flex.settings.createHTML();
FW_okDialog("Error: cannot determine location. Daytime styles will be disabled.");
});
}
if (flex.settings.local.enableDayTimeStyle)
setTimeout(function() {
var now = new Date();
var isDay = flex.sunrise <= now && now <= flex.sunset;
flex.colorPreset.applyDaytimeStyle(isDay != flex.isDay || flex.endOfDay < now);
},60000); //check every minute
},

[TomLee]

Ergänzend:


https://github.com/thecodingdad/fhem-flex/blob/master/www/pgm2/flex.js

[rudolfkoenig]

Ich habe eine Tag und Nacht abhaengige Style Aktivierung eingebaut, siehe Anhang.

Man kann zwischen 4 Styles waehlen: custom, default, light, dark.
Die potentielle Umschaltung erfolgt erst nach einem reload.
Es ist moeglich die Umschaltung je nach Raum anders zu gestalten.
Ob Tag oder Nacht aktiv ist, wird per FHEM isday() Funktion entschieden.

[TomLee]

Vielen Dank dafür, du bist halt einfach beispiellos der Beste !

[TomLee]

Bei mir hat der Wechsel von light zu dark nicht stattgefunden fällt mir gerade auf.

Ich schliesse eigentlich aus das ich heute Mittag einen Fehler beim aktualisieren der f18.js und FHEMWEB.pm gemacht habe, es steht nix im Log und ich wüsste nicht was ich liefern könnte. Muss noch eine Datei aktualisiert werden ?

edit:

bevor ich auf schreiben gedrückt habe, hab ich nochmal nachgeschaut, wenn ich jetzt im Night-Style einen beliebigen Wert auswähle wird dieser nach einem reload nicht übernommen.
Wenn ich jetzt im Day-Style einen Wert auswähle wird dieser nach einem reload übernommen ?
Irgendwas passt noch nicht.

edit2:
isday liefert jetzt 0

[rudolfkoenig]

Nochmal bestaetigt: man sollte den Tag nicht vor dem Abend loben

Habe eine neue Version eingecheckt, diesmal etwas mehr getestet.