WIP: CSS Theme auf Basis vom neuen f18 Style

Begonnen von Thyraz, 21 Februar 2018, 23:54:43

Vorheriges Thema - Nächstes Thema

Thyraz

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
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

accessburn

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

Thyraz

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, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

accessburn

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

ToKa

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 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

ThomasMagnum

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

accessburn

Zitat von: ThomasMagnum am 22 Februar 2018, 13:15:57
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

ToKa

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 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

Phill

#8
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;
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

Phill

Zitat von: ToKa 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...
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

ToKa

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 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

ThomasMagnum

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

ToKa

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 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

l2r

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

ToKa

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 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight