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
    137

  • 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.
  • htreckslerH Offline
    htreckslerH Offline
    htrecksler
    Forum Testing
    schrieb am zuletzt editiert von
    #3

    ich habs auch direkt getestet.

    Kriegst Du eventuell die einzelnen Reiter für die Views etwas deutlicher hin?

    Ich hoffe du verstehst was ich meine.

    :D

    Edit: Nach einem Aktualisieren [F5] sind die Scrollbalken (z. B. bei aktiven Widgets, css der Widgets) zwar noch vorhanden, aber nicht mehr sichtbar. Zumindest bei mir nicht (Chrome)

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

                        805

                        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