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

Offline l2r

  • Sr. Member
  • ****
  • Beiträge: 536
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #15 am: 26 Februar 2018, 11:15:36 »
hi,

sieht gut aus!
Kannst du den Code noch posten?

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

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 300
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #16 am: 26 Februar 2018, 17:13:07 »
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
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline daywalkero

  • New Member
  • *
  • Beiträge: 28
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #17 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.

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.
« Letzte Änderung: 22 Juni 2018, 09:45:26 von daywalkero »

Offline andy19850

  • New Member
  • *
  • Beiträge: 42
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #18 am: 28 August 2018, 13:19:17 »
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?

Offline oduudo

  • New Member
  • *
  • Beiträge: 28
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #19 am: 28 August 2018, 16:04:54 »
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
RPI3
CUL
HMLAN, HM-CC-TC, HM-RC
MAX WT, MAX HT, MAX+ HT, MAX Fensterkontakte
Intertechno, Fritz-DECT

Offline Thyraz

  • Sr. Member
  • ****
  • Beiträge: 873
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #20 am: 28 August 2018, 16:07:12 »
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, Lacrosse, Hue, Harmony, Solo4k, LaMetric, Snips, ...

Offline accessburn

  • Sr. Member
  • ****
  • Beiträge: 924
  • Lecker Raspberry-Cocktail!
    • TRcoding
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #21 am: 28 August 2018, 17: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

Offline sash.sc

  • Hero Member
  • *****
  • Beiträge: 1339
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #22 am: 03 September 2018, 18:58:17 »
Sehr schöne Arbeit bis jetzt.

Wie bekommt man das Menü breiter ??

Danke
Sascha
Raspi 2 ; LaCrosse; HomeMatic; 1x TX 29 als Lichtsensor umgebaut;
ESP8622 ;nanoCUL a-fw (433 & 868 MHz); miniCULwlan;
WLANduino 433&868 ; WlanCul

Offline devil77

  • Full Member
  • ***
  • Beiträge: 316
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #23 am: 11 September 2018, 14:22:08 »
Habe mich auch mal an dem f18 probiert und mal eine dunkle Variante erstellt.
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline oduudo

  • New Member
  • *
  • Beiträge: 28
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #24 am: 11 September 2018, 18:16:00 »
sieht auch gut aus... hast Du auch n css-File dazu?  ;D

Danke, Udo
RPI3
CUL
HMLAN, HM-CC-TC, HM-RC
MAX WT, MAX HT, MAX+ HT, MAX Fensterkontakte
Intertechno, Fritz-DECT

Offline devil77

  • Full Member
  • ***
  • Beiträge: 316
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #25 am: 11 September 2018, 20:28:47 »
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;
}