WIP: CSS Theme auf Basis vom neuen f18 Style

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

Vorheriges Thema - Nächstes Thema

gloob

Zitat von: devil77 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;
}


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

hexenmeister

Zitat von: FunkOdyssey am 09 Oktober 2018, 13:56:46
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.
Maintainer: MQTT_GENERIC_BRIDGE, SYSMON, SMARTMON, systemd_watchdog, MQTT, MQTT_DEVICE, MQTT_BRIDGE
Contrib: dev_proxy

FunkOdyssey

Hier auch Nginx über Docker-Container umgesetzt.

gloob

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

devil77

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.

gloob

#35
Zitat von: devil77 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

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

cwagner

#36
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
PI 2B+/3B+ Raspbian 12, Perl 5.36.0, FHEM 6.3: 295 Module in ConfigDB: Steuerung Heizkessel, FBH, Solarthermie, kontr. Lüftung mit WRG. Smarthome u.a. HMCUL, 1-Wire (FT232RL ; DS2480B), EnOcean (TCM EPS3), MQTT2. DOIF, PID20, Threshold, OWX; Micropelt IRTV, Volkszähler, SolarForecast; MariaDB

knopf_piano

#37
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.
zotac nano mit proxmox und ganz viel zeug drauf

ThomasMagnum

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

devil77

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.

knopf_piano

fein, jetzt mußt du uns nur noch sagen, wie du das gemacht hast

Gesendet von meinem SM-J510FN mit Tapatalk

zotac nano mit proxmox und ganz viel zeug drauf

devil77

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.

knopf_piano

#42
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)
zotac nano mit proxmox und ganz viel zeug drauf

HeikoE

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

devil77

Probier mal das in die css mit einzufügen.
Sollta das Fragezeichen rot einfärben.

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