Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Fun] vis-Editor im Material Design Style

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    10
    1
    114

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.4k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.3k

[Fun] vis-Editor im Material Design Style

Geplant Angeheftet Gesperrt Verschoben Visualisierung
13 Beiträge 5 Kommentatoren 3.1k Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • Jey CeeJ Online
    Jey CeeJ Online
    Jey Cee
    Developer
    schrieb am zuletzt editiert von
    #4

    Hi Uhula,

    das ist mal ein richtig cooles upgrade für den vis Editor. Danke für die Arbeit. ;)

    Neben dem fehlenden Scrollbalken ist mir bei den Metro Widgets noch aufgefallen das die Farb Vorschau fehlt, siehe Screenshot.
    282_vis_material_bugs.png

    Persönlicher Support
    Spenden -> paypal.me/J3YC33

    1 Antwort Letzte Antwort
    0
    • UhulaU Offline
      UhulaU Offline
      Uhula
      schrieb am zuletzt editiert von
      #5

      @Jey Cee:

      Neben dem fehlenden Scrollbalken ist mir bei den Metro Widgets noch aufgefallen das die Farb Vorschau fehlt, siehe Screenshot. `
      Alle Änderungen sind im Code-Abschnitt im 1.Post dieses Themas eingepflegt:

      • Scrollbars: werden, zumindest in webkit-Browsern (Chrome, Safari), gesetzt

      • Metro-Widgets: Farbangabe sichtbar

      • Slider: haben nun einen runden Thumb

      • Register-Tabs der Views: Entzerrt, nun deutlicher lesbar

      Uhula - Leise und Weise
      Ex: ioBroker on Gigabyte NUC Proxmox

      1 Antwort Letzte Antwort
      0
      • htreckslerH Offline
        htreckslerH Offline
        htrecksler
        Forum Testing
        schrieb am zuletzt editiert von
        #6

        ok, sieht echt gut aus. Allerdings die Farbangaben im Css-Teil sind nicht sichtbar, nur wenn man mit der Maus darüberzieht.

        (Siehe Bilder)
        115_color.jpg
        115_color1.jpg

        Gruss Hermann

        ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

        1 Antwort Letzte Antwort
        0
        • Jey CeeJ Online
          Jey CeeJ Online
          Jey Cee
          Developer
          schrieb am zuletzt editiert von
          #7

          Das die farbangaben nicht zu sehen sind hab ich auch ohne das Material design.

          Gesendet von Unterwegs

          Persönlicher Support
          Spenden -> paypal.me/J3YC33

          1 Antwort Letzte Antwort
          0
          • htreckslerH Offline
            htreckslerH Offline
            htrecksler
            Forum Testing
            schrieb am zuletzt editiert von
            #8

            @Jey Cee:

            Das die farbangaben nicht zu sehen sind hab ich auch ohne das Material design.

            Gesendet von Unterwegs `

            Ohne Material design kann man aber den Text, zumindest bei mir, lesen.

            Jetzt sieht das Feld so aus als ob es leer wäre.

            Weißer Adler auf weißem Grund (ostfriesische Nationalflagge) :D

            Edit: Aber keine Eile, auch so ist der Edit-Modus schon deutlich stylischer. Hut ab - Klasse Job

            Gruss Hermann

            ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

            1 Antwort Letzte Antwort
            0
            • htreckslerH Offline
              htreckslerH Offline
              htrecksler
              Forum Testing
              schrieb am zuletzt editiert von
              #9

              @htrecksler:

              Ohne Material design kann man aber den Text, zumindest bei mir, lesen.

              Jetzt sieht das Feld so aus als ob es leer wäre.

              Weißer Adler auf weißem Grund (ostfriesische Nationalflagge) :D `

              @Uhula - Könntest du eventuell nochmal schauen?

              Gruss Hermann

              ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

              1 Antwort Letzte Antwort
              0
              • UhulaU Offline
                UhulaU Offline
                Uhula
                schrieb am zuletzt editiert von
                #10

                @htrecksler:

                @Uhula - Könntest du eventuell nochmal schauen? `
                Klar.

                Ursache ist, dass in diesen Edits die color/background-color direkt im gesetzt sind um die Farbe auch darzustellen - das übersteuer ich mit den CSS Anweisungen. Es lässt sich im CSS aber leicht eine Ausnahme dafür einbauen (drei Stellen, jeweils den blauen Text ergänzen):

                #attr_wrap textarea,

                #attr_wrap select,

                #attr_wrap select+span,

                #attr_wrap select+button,

                #attr_wrap input {

                border:none !important;

                border-bottom: 2px solid #d0d0d0 !important;

                }

                #attr_wrap textarea,

                #attr_wrap select,

                #attr_wrap select+span,

                #attr_wrap select+button,

                #attr_wrap input:not([style*="color:"]) {

                color: #101010;

                background:transparent !important;

                }

                #attr_wrap textarea:focus,

                #attr_wrap select:focus,

                #attr_wrap input:not([style*="color:"]):focus{

                background-color:#FFF8E1 !important;

                border-bottom-color: #FFC107 !important;

                }

                Oder die CSS aus dem 1.Post dieses Themas nutzen, habe es dort aktualisiert (in 2 min). Danke für den Hinweis.

                Uhula - Leise und Weise
                Ex: ioBroker on Gigabyte NUC Proxmox

                1 Antwort Letzte Antwort
                0
                • htreckslerH Offline
                  htreckslerH Offline
                  htrecksler
                  Forum Testing
                  schrieb am zuletzt editiert von
                  #11

                  Perfekt.

                  Hab es gerade geändert und jetzt funktioniert es perfekt.

                  1000 Dank

                  Gruss Hermann

                  ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                  1 Antwort Letzte Antwort
                  0
                  • D Offline
                    D Offline
                    dtp
                    schrieb am zuletzt editiert von
                    #12

                    Danke für den Style.

                    Kleine Frage. Ich bekommen im CSS-Editor für die "!important;"-Einträge sehr viele Warnings angezeigt. Ist das normal?

                    Gruß,

                    Thorsten

                    ioBroker im Docker-Container auf Synology DiskStation DS718+, HomeMatic IP über CCU3, IKEA Dirigera inkl. Matter, Apple Homekit, Amazon Alexa.

                    1 Antwort Letzte Antwort
                    0
                    • UhulaU Offline
                      UhulaU Offline
                      Uhula
                      schrieb am zuletzt editiert von
                      #13

                      @dtp:

                      Kleine Frage. Ich bekommen im CSS-Editor für die "!important;"-Einträge sehr viele Warnings angezeigt. Ist das normal? `
                      Ja, der Editor warnt generell bei der Verwendung von "!important".

                      Info:

                      Die CSS-Anweisungen wurden im 1.Beitrag aktualisiert.

                      2018-01-05 Anpassung: an vis 1.0.4: Headlines der Dialoge (waren weiß)

                      Uhula - Leise und Weise
                      Ex: ioBroker on Gigabyte NUC Proxmox

                      1 Antwort Letzte Antwort
                      0
                      Antworten
                      • In einem neuen Thema antworten
                      Anmelden zum Antworten
                      • Älteste zuerst
                      • Neuste zuerst
                      • Meiste Stimmen


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      808

                      Online

                      32.5k

                      Benutzer

                      81.7k

                      Themen

                      1.3m

                      Beiträge
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Anmelden

                      • Du hast noch kein Konto? Registrieren

                      • Anmelden oder registrieren, um zu suchen
                      • Erster Beitrag
                        Letzter Beitrag
                      0
                      • Home
                      • Aktuell
                      • Tags
                      • Ungelesen 0
                      • Kategorien
                      • Unreplied
                      • Beliebt
                      • GitHub
                      • Docu
                      • Hilfe