Autor Thema: WIP: CSS Theme auf Basis vom neuen f18 Style  (Gelesen 3735 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

Online 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, ...

Online 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

Online 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

Offline Phill

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

 

decade-submarginal