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

Offline Thyraz

  • Sr. Member
  • ****
  • Beiträge: 875
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: 924
  • 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: 875
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: 924
  • 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: 308
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: 108
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: 924
  • 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: 308
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

Online Phill

  • Developer
  • Full Member
  • ****
  • Beiträge: 387
  • 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

Online Phill

  • Developer
  • Full Member
  • ****
  • Beiträge: 387
  • 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: 308
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: 108
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: 308
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: 537
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: 308
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: 537
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: 308
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: 875
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: 924
  • 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: 1362
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: 330
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: 330
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: 308
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: 330
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: 1341
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 »

Offline gloob

  • Hero Member
  • *****
  • Beiträge: 2010
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: 4071
    • 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: 1341
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.

Offline gloob

  • Hero Member
  • *****
  • Beiträge: 2010
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: 330
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.

Offline gloob

  • Hero Member
  • *****
  • Beiträge: 2010
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