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

l2r

hi,

sieht gut aus!
Kannst du den Code noch posten?

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

ToKa

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

daywalkero

#17
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.

andy19850

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?

oduudo

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
RPI4b mit FHEM
CCU3
HM, HmIP diverse Komponenten (Fenster, Rolladen, Themostate, Steckdosen, Fernsteuerungen ...)

Thyraz

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

accessburn

Zitat von: Thyraz am 28 August 2018, 16: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

sash.sc

Sehr schöne Arbeit bis jetzt.

Wie bekommt man das Menü breiter ??

Danke
Sascha
Raspi 4B+ Bullseye ;LaCrosse; HomeMatic; MapleCUL; ZigBee; Signalduino ESP32 ; Shellys; MQTT2; Grafana mit Influxdb

devil77

Habe mich auch mal an dem f18 probiert und mal eine dunkle Variante erstellt.

oduudo

sieht auch gut aus... hast Du auch n css-File dazu?  ;D

Danke, Udo
RPI4b mit FHEM
CCU3
HM, HmIP diverse Komponenten (Fenster, Rolladen, Themostate, Steckdosen, Fernsteuerungen ...)

devil77

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

ToKa

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

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

oduudo

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

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
RPI4b mit FHEM
CCU3
HM, HmIP diverse Komponenten (Fenster, Rolladen, Themostate, Steckdosen, Fernsteuerungen ...)

devil77

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

FunkOdyssey

#29
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. :-)

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

HeikoE


ArduPino

#46
Hallo.

Da hier ja CSS Experten am Werk sind, klinke ich mich mal ein, auch wenn es mir hier nicht um das vorgestellte CSS geht.
Das hier gezeigte gefällt mir schon, doch stört es mich, das alles auf volle Bildschirmbreite gezogen wird.
"ON" und "OFF" stehen sehr weit auseinander, andere Dinge wie das letzte Kommando von einem DOIF sind dann mittig.
Alles sehr verschoben.

Grundsätzlich finde ich das darkstyle ok. Deshalb habe ich gerade versucht, dieses zuerst mal nach zu bauen, also Font usw.
Ich erkenne zwar grob was im CSS passiert, nur weiß ich nicht was welche Bedeutungen hat, deshalb habe ich mir Elemente aus der darkstyle.css raus kopiert und in die f18 eingefügt.

Leider bekomme ich es nicht hin, das ich einen runden Rahmen habe, wie im original Style. Auch sind die Gruppennamen in einem Schwarzen Balken versehen, im darkstyle haben diese keine Hintergrundfarbe.

Kann mir hier jemand helfen ?

Das hier habe ich zur Zeit eingefügt:
body     { font-family:Arial, Helvetica, sans-serif; font-size:13px;}


a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }


table.room { background: #111111; width: 140px; border-radius:8px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
table.room a { color: #CCCCCC; text-decoration: none; }
table.room a:hover { color: #ffffff; }       
table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}


Danach kann ich dann z.B. ein Hintergrundbild einfach über die FHEM Oberfläche anpassen oder andere Kleinigkeiten, eben direkt aus FHEM heraus...irgend wie muss man ja anfangen  ;)

EDIT:
Gibt es eine Möglichkeit, das eine feste Bildschirmhöhe festgelegt wird bei "normalen" Räumen (das Log müsste natürlich weiterhin komplett angezeigt werden) und die Gruppen dann seitlich angeordnet werden ?
Ich habe einen Raum der alle Wohnungsräume hat. Setze ich nun ein Hintergrundbild sieht das natürlich nicht schön aus, da das Bild ja irgend wo endet, die Liste aber weiter geht.
Wenn das zu aufwändig ist, werde ich mir die Wohnräume anders aufteilen, eben in zwei Räume (FHEM Räume)...aber fragen kann man ja mal  ;D

Simon74

Danke für die CSS Vorlagen, sieht schon mal ganz vernünftig aus:

Was mir noch auffällt:

1. Text Color im Eingabefeld
2. Text Color in webcmd "control:uzsuToggle,off,on"

Wie finde ich die richtigen CSS Attribute dazu ?  :)
https://i.imgur.com/vO9anQs.png

rudolfkoenig

ZitatWie finde ich die richtigen CSS Attribute dazu ?
Mit Rechte-Maustaste im Browser, Inspect, und dann nach eine eindeutige Klassen/ID Kombination suchen. Das ist aber nicht FHEM spezifisch, sondern CSS Grundkurs, und ich bin auch nicht der perfekte Ansprechpartner.
P.S.: Bitte Bilder nicht extern verlinken, sondern hier im Forum direkt hochladen.

Simon74

#49
Danke,

1.
input[type="text"] {
    color: black; /* Eingabefelder*/
}


2. Text Color in webcmd "control:uzsuToggle,off,on"
Finde das passende CSS Attrbibut auch nach längerer Suche nicht  :'(
HTML Code sieht so aus:
<tr class="even"><td><div class="col1"><a href="/fhem?detail=HM_sd_wz_led">LED WZ</a></div></td>
<td informId="HM_sd_wz_led"><div id="HM_sd_wz_led"  title="off" class="col2"><a href="/fhem?cmd.HM_sd_wz_led=set HM_sd_wz_led on&room=Wohnzimmer&amp;room=Wohnzimmer&fwcsrf=csrf_121181142182844"><svg class=" light_led_stripe9" data-txt="off" version="1.0" xmlns="http://www.w3.org/2000/svg"  width="361.000000pt" height="361.000000pt" viewBox="0 0 361.000000 361.000000"  preserveAspectRatio="xMidYMid meet">  <g transform="translate(0.000000,361.000000) scale(0.100000,-0.100000)"  stroke="none">
SNIP..
SNAP..
"/> </g> </svg></a></div></td>
<td><div class='col3'><div class='fhemWidget' cmd='control' reading='control' dev='HM_sd_wz_led' arg='uzsuToggle,off,on' current='off'></div></div></td>
</tr>


EDIT: Für mich sieht es so aus das dies vom f18 "cols.fg" übersteurt wird.

Simon74

Ich bin weitergekommen, und sieht für mich im Desktop Modus zufriedenstellend aus.  :)


Ich würde nun gerne erreichen das in der "mobilen Ansicht" im portrait Modus alle Commands angezeigt werden, wenn zu breit sollte in die nächste Zeile gewechselt werden.

Wurde für diese Anforderung schon etwas vorbereitet im F18 Style ?

rudolfkoenig

ZitatWurde für diese Anforderung schon etwas vorbereitet im F18 Style ?
Nicht bewusst.
Die Spalte wird. z.Zt im@media screen and (max-width: 480px) and (orientation: portrait) {
  #content > table { width: 100%; table-layout: fixed; }
  #content > table, table.block.wide { width: 100%; }
  table.block tr td:nth-child(2) { width: 0; }
  table.block tr td:nth-child(n+3) { width: 0px; display: none; }
...
CSS Abschnitt ausgeblendet.

rudolfkoenig

ZitatIch bin weitergekommen, und sieht für mich im Desktop Modus zufriedenstellend aus.
Bitte in solchen Faellen auch die dazugehoerigen CSS oder Attributwerte hier anhaengen, damit die, die das genauso haben wollen, es einfacher haben.

Simon74

#53
Vielen Dank,

es reicht ein entfernen/auskommentieren der letzten Zeile im folgende Codeauschnitt [f18style.css]
@media screen and (max-width: 480px) and (orientation: portrait) {
  #content > table { width: 100%; table-layout: fixed; }
  #content > table, table.block.wide { width: 100%; }
  table.block tr td:nth-child(2) { width: 0; }
  /* table.block tr td:nth-child(n+3) { width: 0px; display: none; } */


Commands werden nun einfach in neuer Zeile dargstellt.
Es gelingt mir jedoch nicht diese Einstellung in meinem optionalen CSS einzufügen, dort greift Sie nicht (möchte eigentlich keine Änderung in Originaldatei machen.)

Ev. wäre es möglich diese Einstellung in den f18 Einstellungen zu machen ?
Porträt Mode: "Anzahl Spalten" oder unbegrenzt" ?



knopf_piano

Zitat von: rudolfkoenig am 26 Dezember 2018, 11:34:16
Bitte in solchen Faellen auch die dazugehoerigen CSS oder Attributwerte hier anhaengen, damit die, die das genauso haben wollen, es einfacher haben.
@simon74,
kannst du dein css bitte komplett hier einstellen/anhängen?

Gesendet von meinem SM-J510FN mit Tapatalk
zotac nano mit proxmox und ganz viel zeug drauf

Simon74

#55
Es ist derselbse Code wie in Posts davor zu finden..
Farbliche Anpassungen halt..
Für mich ist es das erste mal FHEM am Smartphone sinnvoll zu bedienen, ohne das *würgreiz* ausgelöst wird  ;D

Offene Punkte:

  • Dropdowns (Schönheitsproblem unter iphone bzw. Safari) wenn die Codezeilen 52-54 fehlen
  • Hochkant (Portät) Modus: Tabellenspalten/Commands, siehe mein Beitrag davor, ohne sichtbare Commands macht das Ding genau 0 Sinn, (mM.)
  • Bei zoom dasselbe, sollte global im f18 einstellbar sein ?

rudolfkoenig

ZitatEs gelingt mir jedoch nicht diese Einstellung in meinem optionalen CSS einzufügen, dort greift Sie nicht (möchte eigentlich keine Änderung in Originaldatei machen.)
Die Anweisungen aus f18style.css CSS muss man nicht wiederholen.
Wenn man welche ueberschreiben will, dann muss man das betroffene Element "genauer" spezifizieren:@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}


Zitatohne sichtbare Commands macht das Ding genau 0 Sinn, (mM.)
Ich sehe das anders: mit Befehlen wird die schmale Seite unuebersichtlich, und die standard Befehle kann man auf dem Statusbild legen (devStateIcon). Bei on/off passiert das automatisch.

Simon74

Danke, das ist es. :-)

@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}


Ich verwende zum grössten Teil Dimmer mit voreingestellten Dimmstufen als Dropdown, daher ist mir ein on/off zu wenig um sinnvoll steuern zu können.
Auch andere Geräte lassen sich nun perfekt steuern, Befehle die nicht alle nebeneinander passen, wandern in eine neue Zeile.

Ich habe noch Logfile, Set, Get, Modify angepasst, und somit einen neuen Dark CSS Style für WEB und WEBPhone.
Vielleicht findet jemand noch weitere Verbesserungen.

Meine Einstellungen:
Background 101010
Foreground cccccc
Link d3d3d3
Even row                161616
Odd row                 202020
Header row              333333
Menu                    111111
Menu:Selected           333333
Input bg                ffffff

hide pin


CSS im Anhang.

dmq

#58
Hi,

ich benutze die CSS und Farbanpassung von devil77. Vielen Dank - sowohl an Rudolf für f18, als auch für deine Anpassungen!

Ich habe allerdings ein "Problem" mit den Spalten. Die Länge eines Strings in der ersten Spalte beeinflusst auch die anderen Spalten (bin mir da aber auch nicht wirklich sicher) - damit sieht vieles leider sehr unordentlich aus. Was ich gerne hätte wäre, dass die Spalten angezeigt werden und es ein Padding gibt, so dass alles bündig ist.

Anbei mal ein Screenshot, vielleicht kann mir ja jemand helfen?

Danke vielmals :)

dmq

Ok ich denke, dass ich da wohl oder übel mich mehr mit dem css beschäftigen muss.

Ich spiele derzeit mit den padding und border Elementen rum - allerdings ziemlich ineffizient.

rudolfkoenig

Diese Unschoenheit kommt daher, dass alle Bloecke einzelne Tabellen sind, die keine Vorgabe fuer die Spaltenbreite haben. Der Browser berechnet fuer jede Tabelle einzeln die optimale Spaltenbreiten, die aber nicht mit den Werten fuer die anderen Tabellen uebereinstimmt.
Wenn jemand weiss, wie man das richtig macht, dann bin ich daran interessiert.
Loesungen, wie Spaltenbreite fest auf X% setzen, gelten nicht als richtig.
Auch ein Umbau auf div kommt nicht in Frage, weil das zu viele Konsequenzen/Umbauarbeiten nach sich zieht.

dmq

Ja, richtig. Auf dem Weg mit der festen Spaltenbreite war ich zwar auch schon, aber das macht definitiv keinen Sinn (Mobilgeräte etc.). Wenn ich alle Geräte in eine Gruppe packe, gelten zumindest die gleichen Regeln. Bei einzelnen Gruppen auf einer Seite sieht es dann aus wie Kraut und Rüben - vor allem sind mir selbst nach Darstellung der "borders" die Regelungen dafür nicht klar.

Ich hoffe hier gibt es fähigere Leute in diesem Bereich als ich (das aber ganz bestimmt  ;))

Peedy

Hallo,
ich habe das Menue eingeklappt.
Als zusaetzliches css habe ich jenes von devil77 verwendet.

Nun versuche ich zum Menue noch einen schwarzen Rahmen zu definieren, damit es nicht mit den unteren Elementen grau in grau verschmilzt.

Unter div#menu habe ich es schon mit
    border-color: black;
    border-width: 2px;

versucht ... leider ohne sichtbare Auswirkung.

Hat jemand einen Tip?

Peedy

#63
Hat jemand eine passende CSP (Content Security Policy) fuer den Style?

Hab einiges schon probiert, bekomme jedoch immer:
f18.js line 14:
EvalError: call to eval() blocked by CSP

fhem ueber Apache reverse-proxy ...

@devil77 ... auch fuer fonts.googleapis.com?


choetzu

hallo,

Ich möchte gerne beim f18 den Inhalt rechts vom Menu genau so darstellen wie beim darkstyle. Nämlich nicht über die ganze Breite, sondern nur soviel, wie gebraucht wird... Das klappt mit folgendem CSS Eintrag eigentlich ganz gut..

div#content > table {
    border-collapse: collapse;
    width: fit-content;
}


nur auf dem iPhone sieht es im Hochformat dann ziemlich beschissen aus. Wie könnte man das lösen? Ich komm mit meinen Laienkenntnisse ans Ende meines Lateins...

danke. LG c
Raspi3, EnOcean, Zwave, Homematic

sash.sc

Besteht eigentlich die Möglichkeit dass alles transparent zu machen, damit ein Hintergrundbild durchschimmert ??

Man kann ja schon ein Hintergrundbild angeben. Aber die Transparenz fehlt.

Besteht die Möglichkeit auch ein Eingabefeld mit in den Style einzubauen, wo die Schriftart angegeben werden kann, die in FHEm bzw dem Style benutzt wird ??

Gruß und Danke
Sascha
Raspi 4B+ Bullseye ;LaCrosse; HomeMatic; MapleCUL; ZigBee; Signalduino ESP32 ; Shellys; MQTT2; Grafana mit Influxdb

Peedy

#66
Das Menü sah beim StyleAddon von Devil77 bei Mobilebrowsern nicht gerade toll aus.
Es fehlte eigentlich nur ein schmaler Rahmen zur optischen Abgrenzung.

Nun habe ich es rausgfunden.

Der berteffende Teil sieht nun so aus:

div#menu > table, div#content > table {\
    border-collapse: collapse;;\
    width: 100%;;\
    border-color: black;;\
    border-width: 1px;;\
    border-top-style: none;;\
    border-right-style: solid;;\
    border-buttom-style: solid;;\
    border-left-style: solid;;\
}\
\
div#menu > .col_header {\
    fill: #3373a6;;\
    font-size: 14px;;\
    border-color: black;;\
    border-width: 1px;;\
    border-top-style: solid;;\
    border-right-style: solid;;\
    border-buttom-style: none;;\
    border-left-style: solid;;\
}\


Peter aus Calw

Hallo zusammen,
versuche es trotzdem hier eine Antwort auf meine Frage zu erhalten. Ich versuche mit "f18" mein FHEM-Web Bild zu ändern.. Da ich Probleme mit meinen Augen hane ,möchte den Text (Schrift) fett black anzeigen. Wie könnte ich das mit "Select style" ändern (z.B. Eintrag in Addons).
Hier ein Abbild der jetzigen Situation im Anhang.
LG Peter

:-\


rudolfkoenig

Fett:
body { font-weight: bold; }

Fett und groesser:
body { font-weight: bold; font-size:120%; }

Peter aus Calw

Hallo Rudi,
besten Dank für diesen super Tipp, da mein Sehvermögen ziemlich nachgelassen hat ist das eine echte Erleichterung. Kann man das auch in Firefox realisieren ? Hier gibt es url die zum Teil kaum lesbar sind, es gibt zwar die Möglichkeit das global per "Barriereeinstellung" zu ändern, aber das passt auch nicht immer zu allen Seiten.
Auf jeden Fall hat es für mich viel gebracht und kann bestens weitermachen mit 75 und einem Auge.
LG von Peter

Benni

Ich habe auf Basis dieses Threads auch eine dark-Variante im Einsatz.

Bei Interesse finden sich die Details in folgendem Thread: https://forum.fhem.de/index.php/topic,125119.msg1197397.html#msg1197397

gb#