WIP: CSS Theme auf Basis vom neuen f18 Style

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

Vorheriges Thema - Nächstes Thema

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