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

Offline gloob

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

Folgendes CSS (devil77) nutze ich:

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

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

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

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

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

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

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

body.touch a {
    font-size: 16px;
}

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

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

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

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

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

table.block.wide {
    font-weight: 300;
}

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

td {
    padding: 0px;
}

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

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

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

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

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

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

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

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

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

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

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

.slider {
    background-color: #DDDDDD;
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: #3373a6;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: #3373a6;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

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

.downText {
    margin-top: 0px;
}

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

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

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

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

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}
input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

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

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 10px;
    border: 1px solid #000000;
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: #a6a033 !important;
}

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

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

Offline devil77

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

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

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

Offline gloob

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

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

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

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

Offline cwagner

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

Vielen Dank für einen hilfreichen Hinweis im Voraus!


Herzliche Grüße

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

Offline knopf_piano

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

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

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

Offline ThomasMagnum

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

Gruß, Thomas

Offline devil77

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

Offline knopf_piano

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

Gesendet von meinem SM-J510FN mit Tapatalk

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

Offline devil77

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

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

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

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

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

Offline knopf_piano

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

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

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

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

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


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

Offline HeikoE

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

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

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

Offline devil77

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

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

 

decade-submarginal