Autor Thema: WIP: CSS Theme auf Basis vom neuen f18 Style  (Gelesen 5616 mal)

Offline Thyraz

  • Sr. Member
  • ****
  • Beiträge: 882
WIP: CSS Theme auf Basis vom neuen f18 Style
« am: 21 Februar 2018, 23:54:43 »
Hallo zusammen.

Seit einiger Zeit gibt es ja den neuen Style von Rudi, der recht einfach Farb- und CSS Anpassungen erlaubt:
https://forum.fhem.de/index.php/topic,82351.0.html

Ich habe jetzt angefangen mir damit einen neuen Skin für FHEM zu basteln.

Das Ganze ist ein Work in progress, es hakt also noch an sehr vielen Stellen.
Seht es aktuell eher als Designstudie und weniger als Style für die tägliche Nutzung.

Ich werden den CSS Code hier von Zeit zu Zeit aktualisieren und evtl. das eine oder andere zum Stil passende Icon mit anfügen.
Mitarbeit und Erweiterungen sind gern gesehen. ;)

Farben die man im f18 Style definieren muss:

Background
EEEEEE

Foreground
888888

Link
1C1D21

Even row
FFFFFF

Odd row
FFFFFF

Header row
3B82ED

Menu
4A4B58

Menu:Selected
515261

Input bg
FFFFFF

CSS Code der unter den f18 Settings "Additional CSS" landen muss:
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
}

body, input, select, textarea {
    font-family: 'Lato';
    font-weight: 300;
    font-size: 16px;
}

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

input[type="text"] {
    -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-radius: 5px 5px 0px 0px;
    padding: 5px 8px 5px 8px;
}

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

svg:not([fill]):not(.jssvg) {
    fill: #666666;
}

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

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

td {
    padding: 0px;
}

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

div#menu > table, div#content > table {
    border-collapse: collapse;
}

div#menu > .col_header {
    background: #9a9ca9;
    fill: #9a9ca9;
    font-size: 16px;
}

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

div#menu tr {
    border: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #65666f;
}

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

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

div#menu a {
    color: #8a8c98 ! important;   
}

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

.slider {
    background-color: #DDDDDD;
    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: #CCCCCC;
    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: #777777;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

Viel Spaß damit
« Letzte Änderung: 22 Februar 2018, 18:41:54 von Thyraz »
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Lacrosse, Hue, Harmony, Solo4k, LaMetric, Snips, ...
Gefällt mir Gefällt mir x 5 Liste anzeigen

Offline accessburn

  • Sr. Member
  • ****
  • Beiträge: 927
  • Lecker Raspberry-Cocktail!
    • TRcoding
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #1 am: 22 Februar 2018, 07:59:32 »
Ich hab noch zusätzlich folgendes drin:

a:hover {
    text-decoration: underline;
}
td {
    padding: 3px;
}
div#content > table {
    width: 100%;
}
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline Thyraz

  • Sr. Member
  • ****
  • Beiträge: 882
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #2 am: 22 Februar 2018, 08:29:08 »
Ah danke. :)

Mit der 100% Width werden dann alle Elemente in der Hauptansicht gleich breit?
Das war auch noch etwas das ich ausprobieren wollte.
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Lacrosse, Hue, Harmony, Solo4k, LaMetric, Snips, ...

Offline accessburn

  • Sr. Member
  • ****
  • Beiträge: 927
  • Lecker Raspberry-Cocktail!
    • TRcoding
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #3 am: 22 Februar 2018, 08:36:15 »
Bei mir ja, nur die Groups machen ärger, aber das belastet mich kaum  :)
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #4 am: 22 Februar 2018, 13:06:20 »
Super, vielen Dank für die CSS Ergänzungen. Mit dem fs18 von Rudi und Deinen Ergänzungen kann man sich tolle styles bauen.

Lässt sich das mit der Breite der Readingsgroups noch machen? Momentan gehen die leider in eine gruppe auch nicht ganz über die Gruppenbereiten.

Ist es möglich, das Bild für den Pin per CSS durch ein anderen Bild auszutauschen?

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline ThomasMagnum

  • Full Member
  • ***
  • Beiträge: 120
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #5 am: 22 Februar 2018, 13:15:57 »
Hallo zusammen,

prima Ergänzung, gefällt mir sehr gut! Vor allen Fällen ist das sehr flexibel.

ToKa, wie hast du die Überschriften "fett" dargestellt? Wäre für einen Hinweis dankbar.

Gruß, Thomas

Offline accessburn

  • Sr. Member
  • ****
  • Beiträge: 927
  • Lecker Raspberry-Cocktail!
    • TRcoding
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #6 am: 22 Februar 2018, 13:25:20 »
ToKa, wie hast du die Überschriften "fett" dargestellt? Wäre für einen Hinweis dankbar.

Ich bin mal so frei :-)

attr DEVICE nameStyle style="color:blue;font-weight:bold"
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #7 am: 22 Februar 2018, 13:34:31 »
ja, mit font-weight:bold in den Readingsroups über cellStyle, da ich noch weitere Einstellungen vornehme. Sollte auch über nameStyle funktionieren.

Habt Ihr eine Idee wie man den Titel im SVG auf den sonst ausgewählten Font einstellen kann? Beiße mir gerade daran die Zähne aus...
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline Phill

  • Developer
  • Full Member
  • ****
  • Beiträge: 396
  • Langsam wird'n Schuh d'raus.
    • iVDR
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #8 am: 22 Februar 2018, 14:48:01 »
Also bei mir ist die Schrift extrem dünn, bei verschiedenen Rechnern. Bin auf Regular hochgegangen. Vielleicht werde ich aber auch nur alt.  ::)
Außerdem den Hintergrund auf DDDDDD und das Menü wieder wie am Anfang einheitlich. Fand ich besser so.


Gruß


@import url('https://fonts.googleapis.com/css?family=Lato');
font-family: 'Lato', sans-serif;
« Letzte Änderung: 22 Februar 2018, 15:14:15 von Phill »
Homebrew 1-Wire / HomeMatic Mix - Cubietruck mit FHEM als Server - Raspberry PI 3 als Informationsanzeige im MagicMirror Stil - Raspberry Pi 1 als Klingelanlage - VDR

Mein Modul: Talk2Fhem - Mein Tipp: https://forum.fhem.de/index.php/topic,82442.0.html

Offline Phill

  • Developer
  • Full Member
  • ****
  • Beiträge: 396
  • Langsam wird'n Schuh d'raus.
    • iVDR
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #9 am: 22 Februar 2018, 15:29:53 »
ja, mit font-weight:bold in den Readingsroups über cellStyle, da ich noch weitere Einstellungen vornehme. Sollte auch über nameStyle funktionieren.

Habt Ihr eine Idee wie man den Titel im SVG auf den sonst ausgewählten Font einstellen kann? Beiße mir gerade daran die Zähne aus...
Echt tricky, ich vermute durch diese Embeded Geschichte hat übergeordneter CSS keinen Einfluss. Es gibt auch keinen Zugriff auf die im document geladene Schriften.
Ich kann zwar den Text Sans-Serif ändern aber nicht auf Lato. Ich bekomme es auch nicht hin...
Homebrew 1-Wire / HomeMatic Mix - Cubietruck mit FHEM als Server - Raspberry PI 3 als Informationsanzeige im MagicMirror Stil - Raspberry Pi 1 als Klingelanlage - VDR

Mein Modul: Talk2Fhem - Mein Tipp: https://forum.fhem.de/index.php/topic,82442.0.html

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #10 am: 22 Februar 2018, 16:24:21 »
Hab's geschafft, man muss eine der xxxsvg_style.css Dateien als Vorlagen nehmen und unter f18svg_style.css speichern. In dieser kann man dann seine Anpassungen machen. Auch die f18svg_defs.svg muss man aus den Originaldatei erstellen.
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline ThomasMagnum

  • Full Member
  • ***
  • Beiträge: 120
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #11 am: 22 Februar 2018, 17:05:03 »
Hallo accessburn,

ich hatte nicht die Überschriften der readingsGroups gemeint, das ist klar.
Mir scheint es als wären die Überschriften der "Groups" fett, kann aber auch täuschen.

Gruß, Thomas

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #12 am: 22 Februar 2018, 17:59:34 »
Hallo Thomas,

die Gruppenüberschriften sind nicht fett aber in Schriftgröße 16px. Außerdem verwende ich grundsätzlich die Schriftart ROBOTO.

Gruß
Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline l2r

  • Sr. Member
  • ****
  • Beiträge: 549
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #13 am: 23 Februar 2018, 15:05:40 »
+1
Wissen ist Macht.
Ich weiß nix.
Macht nix.

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #14 am: 25 Februar 2018, 20:28:58 »
Hallo zusammen,

nachdem ich am WE nichts anderes vorhatte, habe ich die Zeit in die Erweiterung meiner CSS-Einstellungen für f18 investierten. Im Anhang findert Ihr das Ergebnis. Als nächstes will ich probieren, ob man noch mehr in Richtung Material Design gehen kann.

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2
Gefällt mir Gefällt mir x 3 Liste anzeigen

Offline l2r

  • Sr. Member
  • ****
  • Beiträge: 549
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #15 am: 26 Februar 2018, 11:15:36 »
hi,

sieht gut aus!
Kannst du den Code noch posten?

Gruß Michael
Wissen ist Macht.
Ich weiß nix.
Macht nix.

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #16 am: 26 Februar 2018, 17:13:07 »
Hallo zusammen,

ja klar doch, werde aber sicherlich noch weiter daran basteln:

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

/* Variables */
:root {
/* Primary Colors */
--blueGrey50:  #ECEFF1;
--blueGrey100: #CFD8DC;
--blueGrey200: #B0BEC5;
--blueGrey300: #90A4AE;
--blueGrey400: #78909C;
--blueGrey500: #607D8B;
--blueGrey600: #546E7A;
--blueGrey700: #455A64;
--blueGrey800: #37474F;
--indigo900:   #1A237E;
--primary-color: var(--blueGrey500);

/* Secondary Color */
--deepOrange50:   #FBE9E7;
--deepOrange100:  #FFCCBC;
--deepOrange200:  #FFAB91;
--deepOrange300:  #FF8A65;
--deepOrange400:  #FF7043;
--deepOrange500:  #FF5722;
--deepOrange600:  #F4511E;
--deepOrange700:  #E64A19;
--deepOrange800:  #D84315;
--deepOrange900:  #BF360C;
--deepOrangeA100: #FF9E80;
--deepOrangeA200: #FF6E40;
--deepOrangeA400: #FF3D00;
--deepOrangeA700: #DD2C00;

--secondary-color: var(--deepOrange500);
--odd-color: #f5f6f9;
--transparent: rgba(0, 0, 0, 0);
--fullBlack: rgba(0, 0, 0, 1);
--darkBlack: rgba(0, 0, 0, 0.87);
--lightBlack: rgba(0, 0, 0, 0.54);
--minBlack: rgba(0, 0, 0, 0.26);
--faintBlack: rgba(0, 0, 0, 0.12);
--fullWhite: rgba(255, 255, 255, 1);
--darkWhite: rgba(255, 255, 255, 0.87);
--lightWhite: rgba(255, 255, 255, 0.54);

/* Fontsizes */
--default-fontsize: 10pt;
--medium-fontsize: 10.75pt;
--large-fontsize: 12pt;
}

body, input, select, textarea {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: var(--default-fontsize);
}

input, textarea {
    border-style: solid;
    border-width: 1px;
    border-color: var(--deepOrangeA200);
}

input[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
}

input.maininput {
    width: auto !important;
}

body.touch a {
    font-size: var(--large-fontsize);
}

.col2 {
    text-align: left;
}

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

*:focus {
    outline: none;
}

div.pinHeader {
    color: var(--fullWhite);
    height: 20px;
    padding: 5px 8px 5px 8px;
    border-radius: 2px;
    font-size: var(--large-fontsize);
    font-weight: 500;
    line-height: normal;
    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.4);
}

div.pinHeader a {
    color: var(--fullWhite) !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #666666;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 0px;
    margin-top: 5px;
}

table.block.wide.internals,
table.block.wide.readings,
table.block.wide.attributes,
table.block.wide.assoc {
    margin-top: 5px;
}

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

table.block.wide table {
    width: 100%; /* auto; */
}

td {
    padding: 0px 0px 0px 0px; /* 5px 0px 0px 0px; */
}

table.block.wide.internals td, table.block.wide.readings td,
table.block.wide.attributes td, table.block.wide.assoc td {
    padding: 0px 0px 0px 0px;
}

.odd td, .even td {
    padding: 2px 0px 1px 0px;
}


div #ddtable table.block.wide {
    margin-top: 5px;
}

div#ddtable.makeTable.wide {
    margin-top: 0px;
}

div#menu {
    top: 51px !important;
font-size: var(--medium-fontsize);
font-weight: 500;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
}

div#menu > .col_header {
    background: var(--blueGrey500);
}

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

div#menu tr {
/*    border: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #65666f;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) */
}

div#menu tr:last-child {
  /*  border-bottom: none !important; 
    border: 2px solid white !important;
    border-radius: 10px !important; */
}

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

div#menu a {
    color: var(--fullWhite) !important; 
    border-bottom: 3px solid var(--blueGrey500);
    padding: 0px 0;
    transition: border-bottom ease 0.75s;

}

div#menu a:hover {
border-bottom: 3px solid var(--deepOrangeA400);
padding: 0px 0; 
}

div#menu tr.sel div[class^="menu_"] {
    border-bottom: 3px solid var(--deepOrangeA700)!important;
    padding: 0px 0;
}

div#menu tr.sel {
    fill: none !important;
    background: none !important;
}

div#menu tr.sel a {
    border-bottom: none!important;
    padding: 0px 0;
    color: var(--darkBlack) !important;
}

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

.slider {
    background-color: #DDDDDD;
    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: var(--default-fontsize);
    color: var(--fullWhite) !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: #CCCCCC;
    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: #777777;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.dname a,
.col1 a,
.block.wide.assoc a {
    border-bottom: 3px solid var(--blueGrey50);
    padding: 0px 0;
    transition: border-bottom ease 0.5s;
}

.block.wide.assoc a {
     font-weight: 500;
}

.dname a:hover,
.col1 a:hover,
.block.wide.assoc a:hover {
border-bottom: 3px solid var(--deepOrangeA400);
padding: 0px 0; 
}

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

tr.fbcalllist.header {
    font-size: var(--default-fontsize);
    font-weight: 700;
}

input.set.psc,
input.get.psc,
input.attr.psc {
    border: 1px solid var(--deepOrangeA100);
    background: var(--deepOrange500);
    font-weight: 500;
}

.set.downText,
.get.downText {
    font-weight: 500;
}

select.set,
select.get,
select.attr {
    border-color: var(--primary-color);
    height: 22px;
}

a#DEFa {
    padding-left: 5px;
    font-weight: 700;
}

.dname {
    font-weight: 500;
}


.block.wide.attributes td:nth-child(3) a[href$="#"] {
   /* visibility: hidden; */
 color: transparent !important;
}

.block.wide.attributes td:nth-child(3) a[href$="#"]:after {
    content: url(fhem/icons/ic_indeterminate_check_box_black_24px);
 /*   color: red;
    margin-left: -30px; */
}

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline daywalkero

  • New Member
  • *
  • Beiträge: 28
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #17 am: 22 Juni 2018, 08:28:30 »
Wenn die Buttons noch mehr Material-Design nachahmen sollen, hier mal ganz fix der Start. Achtung: Buttons funktionieren danach (noch) nicht, werde mich da nach Feierabend mal drum kümmern.

div[class^="menu_"] {
  position: relative;
  margin-top: 8px;
  border: none;
  border-radius: 2px;
  padding: 0 0px;
  max-width: 100%;
  min-width: 100%;
  height: 35px;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
  font-size: 14px;
  font-weight: 500;
  line-height: 35px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

div[class^="menu_"]:hover,
div[class^="menu_"]:focus {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

div[class^="menu_"]:active {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

div[class^="menu_"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
}

div[class^="menu_"]:hover::before {
  opacity: 0.12;
}

div[class^="menu_"]:focus::before {
  opacity: 0.2;
}

div[class^="menu_"]:active::before {
  opacity: 0.32;
}

div[class^="menu_"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  border-radius: 50%;
  padding: 50%;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1) ;
  transition: opacity 1s, transform 0.5s;
}

div[class^="menu_"]:active::after {
  opacity: 0.4;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0s;
}

Edit: Problem ist übrigens die content property. Zum testen also bitte beide entfernen, sonst wird's etwas knifflig wieder CSS Menü zu kommen. Wenn ihr das ganze Material Design mäßige Verhalten testen wollt, dann fügt oben den Code 1:1 ein, schließt aber nicht den Browser, sondern navigiert anschließend wieder zu Additional CSS und nehmt content raus (oder setzt den Wert auf content: normal;). Muss mal schauen, ob ich das irgendwie mit "" gerade gebogen bekomme - und warum es überhaupt nicht funktioniert, das finde ich nämlich merkwürdig.
« Letzte Änderung: 22 Juni 2018, 09:45:26 von daywalkero »

Offline andy19850

  • New Member
  • *
  • Beiträge: 42
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #18 am: 28 August 2018, 13:19:17 »
Das wertet doch die Oberfläche um einiges auf, wie ich finde - gefällt mir sehr gut!
Gibt es hier noch weiteren Input?
Gibt es Leute, die auf dieser Basis auch eine Anzeige auf dem (Wand)Tablet nutzen?

Offline oduudo

  • New Member
  • *
  • Beiträge: 31
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #19 am: 28 August 2018, 16:04:54 »
Hatte den Thread auch die Tage entdeckt und angefangen damit rumzutesten. Das Design find ich gut, die Vorlage zum Anpassen natürlich auch.
Danke für die Arbeit bis hierher, wäre aber auch interessiert, ob es hier weitergegangen ist...  ;D

Danke!
Udo
RPI3
CUL
HMLAN, HM-CC-TC, HM-RC
MAX WT, MAX HT, MAX+ HT, MAX Fensterkontakte
Intertechno, Fritz-DECT

Offline Thyraz

  • Sr. Member
  • ****
  • Beiträge: 882
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #20 am: 28 August 2018, 16:07:12 »
Zumindest bei mir hat sich nichts mehr groß getan aus Mangel an Zeit.
Aber nach den neusten f18 Änderungen hat es das Menu etwas zerrissen, dass muss ich mir auf alle Fälle mal ansehen.
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Lacrosse, Hue, Harmony, Solo4k, LaMetric, Snips, ...

Offline accessburn

  • Sr. Member
  • ****
  • Beiträge: 927
  • Lecker Raspberry-Cocktail!
    • TRcoding
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #21 am: 28 August 2018, 17:07:12 »
Aber nach den neusten f18 Änderungen hat es das Menu etwas zerrissen, dass muss ich mir auf alle Fälle mal ansehen.

Ja und ja bitte  :D
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

Offline sash.sc

  • Hero Member
  • *****
  • Beiträge: 1381
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #22 am: 03 September 2018, 18:58:17 »
Sehr schöne Arbeit bis jetzt.

Wie bekommt man das Menü breiter ??

Danke
Sascha
Raspi 2 ; LaCrosse; HomeMatic; 1x TX 29 als Lichtsensor umgebaut;
ESP8622 ;nanoCUL a-fw (433 & 868 MHz); miniCULwlan;
WLANduino 433&868 ; WlanCul

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #23 am: 11 September 2018, 14:22:08 »
Habe mich auch mal an dem f18 probiert und mal eine dunkle Variante erstellt.
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline oduudo

  • New Member
  • *
  • Beiträge: 31
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #24 am: 11 September 2018, 18:16:00 »
sieht auch gut aus... hast Du auch n css-File dazu?  ;D

Danke, Udo
RPI3
CUL
HMLAN, HM-CC-TC, HM-RC
MAX WT, MAX HT, MAX+ HT, MAX Fensterkontakte
Intertechno, Fritz-DECT

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #25 am: 11 September 2018, 20:28:47 »
Anbei mal die Einstellung, ich hoffe ich hab weitesgehend alles durch die CSS erwischt.
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

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

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

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

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

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

input[type="text"] {
    -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-radius: 0px;
    padding: 5px 8px 5px 8px;
}

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

svg:not([fill]):not(.jssvg) {
    fill: #0179d8;
    height: 25px;
    width: 25px;
    padding-right: 10px;
}

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

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

div#menu > .col_header {
    fill: #0179d8;
    font-size: 14px;
}

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

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

div#menu tr tr:hover {
    background-color: #a9a9a9;
}

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

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

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
}

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

.slider {
    background-color: #DDDDDD;
    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: #0179d8;
    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: #0179d8;
    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: #2a2a2a;
    width: 100%;
}

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

.downText {
    margin-top: 0px;
}

input[type="text"] {
    color: #060606;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

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

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

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

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 342
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #26 am: 24 September 2018, 18:57:30 »
Wenn die Buttons noch mehr Material-Design nachahmen sollen, hier mal ganz fix der Start. Achtung: Buttons funktionieren danach (noch) nicht, werde mich da nach Feierabend mal drum kümmern.

Edit: Problem ist übrigens die content property. Zum testen also bitte beide entfernen, sonst wird's etwas knifflig wieder CSS Menü zu kommen. Wenn ihr das ganze Material Design mäßige Verhalten testen wollt, dann fügt oben den Code 1:1 ein, schließt aber nicht den Browser, sondern navigiert anschließend wieder zu Additional CSS und nehmt content raus (oder setzt den Wert auf content: normal;). Muss mal schauen, ob ich das irgendwie mit "" gerade gebogen bekomme - und warum es überhaupt nicht funktioniert, das finde ich nämlich merkwürdig.

Wow, das sieht super aus mit dem Materialdesignverhalten des Menüs!

Hast Du es mal mit zwei einfachen Anführungszeichen versucht '' anstelle der zwei doppelten Anführungszeichen ""? In meinem Beispiel verwende ich nämlich die einfachen und es gibt keine Probleme damit.

Würde mich total freuen, wenn Du das hinbekämst und die Buttons auch noch funktionieren würden.

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline oduudo

  • New Member
  • *
  • Beiträge: 31
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #27 am: 25 September 2018, 16:35:26 »
Wenn die Buttons noch mehr Material-Design nachahmen sollen, hier mal ganz fix der Start. Achtung: Buttons funktionieren danach (noch) nicht, werde mich da nach Feierabend mal drum kümmern.

Habs auch grade mal ausprobiert, sieht natürlich echt edel aus. Konntest Du nochmal etwas dran tun? Gibts nen neuen Stand dazu??
Würd mich echt freuen...

viele Grüße,
Udo
RPI3
CUL
HMLAN, HM-CC-TC, HM-RC
MAX WT, MAX HT, MAX+ HT, MAX Fensterkontakte
Intertechno, Fritz-DECT

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #28 am: 09 Oktober 2018, 13:41:45 »
Hab auch etwas weiter gemacht und bissel mit Farben variiert für Kontrast usw.

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

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

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

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

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

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

input[type="text"] {
    -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: 25px;
    width: 25px;
    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%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

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

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

div#menu tr tr:hover {
    background-color: #3373a6;
}

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

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

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

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

.slider {
    background-color: #DDDDDD;
    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: #3373a6;
    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: #3373a6;
    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;
}

input[type="text"] {
    color: #060606;
}

.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: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  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: 10px;
    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: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}

Offline FunkOdyssey

  • Hero Member
  • *****
  • Beiträge: 1412
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #29 am: 09 Oktober 2018, 13:56:46 »
Ich muss irgendwie ein Brett vor dem Kopf haben.

Ich habe mit einigen CSS-Varianten hier im Thread das Problem, dass FHEM diese nicht übernimmt.
Richtig ist doch, dass ich dieses unter "Additional CSS" einfügen muss, oder?
Nach dem Klicken auf OK und nem Refresh der Site sind die Styles aber wieder verschwunden.

Bin ich der Einzige, der das Problem hat?



Nachtrag: Es scheint an meinen Proxy zu liegen. Ab einer gewissen Anzahl Zeilen wird nichts mehr angenommen und dann ist das CSS nicht valide und wird scheinbar nicht akzeptiert.

Füge ich das CSS über die FHEMWEB-Schnittstelle ohne Proxy ein, so klappt es.

Ärgerlich. Für mich. :-)
« Letzte Änderung: 09 Oktober 2018, 14:29:45 von FunkOdyssey »

Online gloob

  • Hero Member
  • *****
  • Beiträge: 2264
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #30 am: 09 Oktober 2018, 14:39:12 »
Hab auch etwas weiter gemacht und bissel mit Farben variiert für Kontrast usw.

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

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

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

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

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

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

input[type="text"] {
    -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: 25px;
    width: 25px;
    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%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

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

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

div#menu tr tr:hover {
    background-color: #3373a6;
}

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

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

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

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

.slider {
    background-color: #DDDDDD;
    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: #3373a6;
    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: #3373a6;
    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;
}

input[type="text"] {
    color: #060606;
}

.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: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  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: 10px;
    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: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}

Läuft und sieht gut aus bei mir.
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Offline hexenmeister

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4313
    • tech_LogBuch
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #31 am: 09 Oktober 2018, 21:32:40 »
Bin ich der Einzige, der das Problem hat?
Nö. Habe das selbe Problem. FHEM ist auch hinten dem Nginx. Habe einfach direkt in fhem.cfg eingefügt.
Interessant, zu wissen, dass es an dem Proxy liegen kann... Wohl die Größe ist das Problem.
In Verwendung: HM, EnOcean, 1wire, Firmata, MySensors, ESPEasy, MQTT*, NodeRED, Alexa, Telegram,..
Maintainer: MQTT_GENERIC_BRIDGE, SYSMON, SMARTMON, systemd_watchdog, MQTT, MQTT_DEVICE, MQTT_BRIDGE
Contrib: dev_proxy
Kaffeekasse: https://www.paypal.me/s6z
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline FunkOdyssey

  • Hero Member
  • *****
  • Beiträge: 1412
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #32 am: 09 Oktober 2018, 22:11:09 »
Hier auch Nginx über Docker-Container umgesetzt.

Online gloob

  • Hero Member
  • *****
  • Beiträge: 2264
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #33 am: 10 Oktober 2018, 08:30:31 »
Hat jemand vielleicht einen Tipp, warum bei mir die Room-Icons abgeschnitten sind? Man sieht es relativ gut beim "SYSTEM"

Folgendes CSS (devil77) nutze ich:

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

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

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

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

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

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

input[type="text"] {
    -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: 25px;
    width: 25px;
    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%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

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

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

div#menu tr tr:hover {
    background-color: #3373a6;
}

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

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

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

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

.slider {
    background-color: #DDDDDD;
    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: #3373a6;
    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: #3373a6;
    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;
}

input[type="text"] {
    color: #060606;
}

.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: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  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: 10px;
    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: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #34 am: 10 Oktober 2018, 14:52:56 »
Das liegt daran das bei mir die Menüeinträge ohne Symbole eine geringer Höhe haben.
Meine Einträge dazu sind folgende
.roomBlock3 div, .roomBlock5 div {
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

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

Wobei roomBlock1, 2 und 4 bei mir ohne Symbole sind.
Du müsstes nur die Nummern an dein Menü anpassen. Ich weiß leider nicht was Du noch alles für Menüeinträge hast.
Wenn Du eine kompletten Screenshot vom Menü machen kannst kann ich dir gerne helfen was durch was ersetzt werden muss.

Online gloob

  • Hero Member
  • *****
  • Beiträge: 2264
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #35 am: 10 Oktober 2018, 15:03:06 »
Das liegt daran das bei mir die Menüeinträge ohne Symbole eine geringer Höhe haben.
Meine Einträge dazu sind folgende

Wobei roomBlock1, 2 und 4 bei mir ohne Symbole sind.
Du müsstes nur die Nummern an dein Menü anpassen. Ich weiß leider nicht was Du noch alles für Menüeinträge hast.
Wenn Du eine kompletten Screenshot vom Menü machen kannst kann ich dir gerne helfen was durch was ersetzt werden muss.

Danke ich habe es gefunden. Liegt daran, das ich noch keinen Block 2 für FTUI habe, der kommt erst noch später.  ;D

Mich würde bitte nur noch interessieren, womit du deine Plots machst? Die sehen um einiges besser aus als die Standard-Plots in FHEM.   <<<< Grafana
« Letzte Änderung: 10 Oktober 2018, 15:18:17 von gloob »
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

Offline cwagner

  • Sr. Member
  • ****
  • Beiträge: 526
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #36 am: 26 Oktober 2018, 11:06:09 »
Gibt es eigentlich eine Möglichkeit, über die additional CSS die Einstellung zu verändern, die das Menü auf kleinen Screens ausblendet auf ein gelbes "Burger-Menu". Auf meinem hochauflösenden 7"-Tablet bleibt das Menü noch stehen, dort ist es mir aber hochkant im Weg!

Vielen Dank für einen hilfreichen Hinweis im Voraus!


Herzliche Grüße

Christian
« Letzte Änderung: 26 Oktober 2018, 13:28:29 von cwagner »
Raspi 2B +3B: 5.8 DEV Perl v5.24.1, 270 Entities in DbLog  zur Steuerung von Heizung, Solarkollektoren, Lüftung und Smarthome u.a. HM (CUL), 1-Wire (FT232RL & DS2480B) und EnOcean (EnOceanPi). Im Einsatz u.a.DOIF, PID20, Threshold, OWX New Gen; Micropelt IRTV, HM Zählermodule, Volkszähler

Offline knopf_piano

  • Full Member
  • ***
  • Beiträge: 345
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #37 am: 01 November 2018, 12:18:29 »
Ich suche nach der Möglichkeit, webcmd oder Inhalte von readingsgroup im Mobilteil anzuzeigen, ohne dass ich das Teil um 90° drehen muss.
Aktuell werden bei "5,2"-hochkant" von den defines nur 2 Spalten angezeigt.

Hier https://forum.fhem.de/index.php/topic,88451.0.html
wurde schonmal lapidar auf ein css-element - jedoch leider ohne konkreten Vorschlag/Lösung - hingewiesen.

Habt ihr in euren additional-css was drin, was das kann?
Screenshots am Beispiel von meinem Abfall-Readingsgroup.
« Letzte Änderung: 01 November 2018, 14:29:45 von knopf_piano »
zotac nano, Bananapi-R1, fhem-trunk, hmlan, jeelink, zwave, tablet-ui,  ESPeasy, pywws, raspi, yamaha-671, ufs910-titan

Offline ThomasMagnum

  • Full Member
  • ***
  • Beiträge: 120
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #38 am: 01 November 2018, 16:33:58 »
Daran wäre ich auch sehr interessiert.
Ich fände eine Lösung gut die RGs anzeigen würde wie SVGs. Die SVGs kann man ja auch als "Einzelelement" seitl. swippen.
Muss aber zugeben das ich keine Idee hätte wie soetwas umzusetzen wäre.

Gruß, Thomas

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #39 am: 01 November 2018, 16:50:12 »
Das pauschal für alle readingsgroups zu machen halte ich nicht für optimal.
Da dann versucht wird alles auf den kleinen Bildschirm zu pressen und darunter leider die Übersichtlichkeit.
Für eine  einzelne readingsgroup sollte das kein Problem sein und habe es eben mal bei mir auch beim Müllkalender getestet.
Anbei die Screenshots mit "normal" und angepasst.

Offline knopf_piano

  • Full Member
  • ***
  • Beiträge: 345
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #40 am: 01 November 2018, 17:49:03 »
fein, jetzt mußt du uns nur noch sagen, wie du das gemacht hast

Gesendet von meinem SM-J510FN mit Tapatalk

zotac nano, Bananapi-R1, fhem-trunk, hmlan, jeelink, zwave, tablet-ui,  ESPeasy, pywws, raspi, yamaha-671, ufs910-titan

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #41 am: 01 November 2018, 17:58:22 »
Müssen muß ich doch nichts, oder ;) Aber ich versuche mal mein Halbwissen zu teilen.

Meine readingsgroup für den Abfall heißt WOhng_Muellabfuhr
In meiner CSS Dateil habe ich nun folgenden Code ergänzt
@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-WOhng_Muellabfuhr tbody {
    width: 100% !important;
    display: table !important;
}

table#readingsGroup-WOhng_Muellabfuhr tr {
    display: table-row !important;
}

table#readingsGroup-WOhng_Muellabfuhr tr td {
    display: table-cell !important;
}
}

Man muß nur den entsprechenden Name ändern und dann sollte es funktionieren.

Offline knopf_piano

  • Full Member
  • ***
  • Beiträge: 345
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #42 am: 04 November 2018, 11:44:25 »
Dank dir, ja, übertreiben will ich es nicht mit "Übersichtlichtkeit".
Schaut gut aus!
Hab folgendes in meiner css:
table.block.wide table {
    width: 100%; /* auto; */
}

@media screen and (max-width: 480px) and (orientation: portrait) {
table#readingsGroup-rg_AbfallTest tbody {
    width: 100% !important;
    display: table !important;
}

table#readingsGroup-rg_AbfallTest tr {
    display: table-row !important;
}

table#readingsGroup-rg_AbfallTest tr td {
    display: table-cell !important;
}
}

Der title vom readingsGroup ist noch verschoben bzw. nicht in den Spalten der einzelnen Readings-Zeilen.
Bevor die Seite final geladen wird, ist's ok von der Ausrichtung her, dann springt die ReadingsGroup-Title auf diese Format.
Hast du da noch separate Elemente?


EDIT:
dieses gelöscht:
attr rg_AbfallTest sortColumn 3--> geht (2.Bild)
« Letzte Änderung: 04 November 2018, 11:53:38 von knopf_piano »
zotac nano, Bananapi-R1, fhem-trunk, hmlan, jeelink, zwave, tablet-ui,  ESPeasy, pywws, raspi, yamaha-671, ufs910-titan

Offline HeikoE

  • Jr. Member
  • **
  • Beiträge: 89
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #43 am: 08 November 2018, 21:39:24 »
Hab auch etwas weiter gemacht und bissel mit Farben variiert für Kontrast usw.

Der css Teil zum Theme
...
Hallo,
ich habe diese Version übernommen und finde das echt gut. Danke dafür.

Was mir gefehlt hat, ist die Anzeige in welchem Raum man sich gerade befindet.
Das hab ich in Anlehnung an "darkstyle.css" mit diesem Eintrag hinbekommen:
div#menu tr.sel {
    background-color: #3373a6;
}
Darin war auch das "?" bei einer Änderung rot:
.changed a, .changed {
    color: red !important;
}
Dieser Eintrag funktionoiert aber nicht. Wenn ich es richtig verstehe, gewinnt das hier:
div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}
Kann man irgendwas so einstellen, dass das "?" wieder rot wird? Mit meinen (geringen) CSS-Kenntnissen komme ich da nicht weiter.
Danke schon mal!
Gruß Heiko

Offline devil77

  • Full Member
  • ***
  • Beiträge: 343
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #44 am: 09 November 2018, 15:44:09 »
Probier mal das in die css mit einzufügen.
Sollta das Fragezeichen rot einfärben.

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

Offline HeikoE

  • Jr. Member
  • **
  • Beiträge: 89
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #45 am: 09 November 2018, 18:01:47 »
Danke! hat funktioniert.

Offline ArduPino

  • Full Member
  • ***
  • Beiträge: 287
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #46 am: 02 Dezember 2018, 12:27:49 »
Hallo.

Da hier ja CSS Experten am Werk sind, klinke ich mich mal ein, auch wenn es mir hier nicht um das vorgestellte CSS geht.
Das hier gezeigte gefällt mir schon, doch stört es mich, das alles auf volle Bildschirmbreite gezogen wird.
"ON" und "OFF" stehen sehr weit auseinander, andere Dinge wie das letzte Kommando von einem DOIF sind dann mittig.
Alles sehr verschoben.

Grundsätzlich finde ich das darkstyle ok. Deshalb habe ich gerade versucht, dieses zuerst mal nach zu bauen, also Font usw.
Ich erkenne zwar grob was im CSS passiert, nur weiß ich nicht was welche Bedeutungen hat, deshalb habe ich mir Elemente aus der darkstyle.css raus kopiert und in die f18 eingefügt.

Leider bekomme ich es nicht hin, das ich einen runden Rahmen habe, wie im original Style. Auch sind die Gruppennamen in einem Schwarzen Balken versehen, im darkstyle haben diese keine Hintergrundfarbe.

Kann mir hier jemand helfen ?

Das hier habe ich zur Zeit eingefügt:
body     { font-family:Arial, Helvetica, sans-serif; font-size:13px;}


a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }


table.room { background: #111111; width: 140px; border-radius:8px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
table.room a { color: #CCCCCC; text-decoration: none; }
table.room a:hover { color: #ffffff; }       
table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}

Danach kann ich dann z.B. ein Hintergrundbild einfach über die FHEM Oberfläche anpassen oder andere Kleinigkeiten, eben direkt aus FHEM heraus...irgend wie muss man ja anfangen  ;)

EDIT:
Gibt es eine Möglichkeit, das eine feste Bildschirmhöhe festgelegt wird bei "normalen" Räumen (das Log müsste natürlich weiterhin komplett angezeigt werden) und die Gruppen dann seitlich angeordnet werden ?
Ich habe einen Raum der alle Wohnungsräume hat. Setze ich nun ein Hintergrundbild sieht das natürlich nicht schön aus, da das Bild ja irgend wo endet, die Liste aber weiter geht.
Wenn das zu aufwändig ist, werde ich mir die Wohnräume anders aufteilen, eben in zwei Räume (FHEM Räume)...aber fragen kann man ja mal  ;D
« Letzte Änderung: 02 Dezember 2018, 12:36:55 von ArduPino »
FHEM auf Raspberry Pi3 / nanoCUL433 mit a-CulFW
Pollin Funksteckdosen, Außentemperatursensor
Shelly 1
Digispark (Attiny85) Eigenbau Temp/Hum/Alarm Sensoren
DashButtons, günstige Bewegungsmelder

 

decade-submarginal