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. Material Design Widgets: Top App Bar Widget

NEWS

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.0k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.7k

Material Design Widgets: Top App Bar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
412 Beiträge 74 Kommentatoren 88.5k Aufrufe 79 Watching
  • Ä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.
  • B babl

    @ckmartens habe ein problem nach dem update auf den js controller schaltet die top app bar die links zu den anderen views nicht mehr, habe ich da was zerschossen?

    Alles Gut habe die Objekt ID gelöscht, geht wieder.

    Trotzdem bekomme ich im log einen Fehler web.0 2021-02-19 18:53:08.221 warn (14345) State "nothing_selected" has no existing object, this might lead to an error in future versions

    und da ich in der app bar "Nothing-selected" drin stehen habe denke ich mal daß es dies ist, denn als ich das gelöscht habe dann war die warnmeldung weg aber die navigation ging auch nicht mehr:disappointed: , wer kann mir denn da weiterhelfen?

    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #277

    @babl
    siehe https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/26 und folgende

    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

    B 1 Antwort Letzte Antwort
    1
    • ScroungerS Scrounger

      @babl
      siehe https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/26 und folgende

      B Online
      B Online
      babl
      schrieb am zuletzt editiert von
      #278

      @scrounger danke das wars, aber warum daß man sehen kann wie oft die aufgerufen wurde, irgendwie habe ich das beim einrichten nicht gecheckt hab mir immer schon gedacht was da wohl reinkommt?

      Danke Warnmeldungen sind weg.

      1 Antwort Letzte Antwort
      0
      • I Offline
        I Offline
        IOBaer
        schrieb am zuletzt editiert von
        #279

        Hallo zusammen,

        sehe ich das richtig, dass das Widget bei mehreren Usern, die gleichzeitig die VIS nutzen sollen, nicht sinnvoll ist, weil die Anzeige - wegen des Datenpunktes - bei allen Usern immer identisch wäre?

        1 Antwort Letzte Antwort
        0
        • B Offline
          B Offline
          BamBam89
          schrieb am zuletzt editiert von Scrounger
          #280

          Erstmal Herzlichen Dank an @Scrounger für die tolle Arbeit!!

          Ich hätte aber eine Frage. Ich nutze derzeit die Top App Bar.
          Dort gibt es vier Elemente Rum Vodka... etc

          Ich habe allerdings zwei Views Rum vielleich auch mal 3 oder 4. Der Einfachheit halber, nenn wir diese mal Rum_Start; Rum_1; Rum_2
          Nun kann ich über die Top App Bar in Rum_Start springen. Soweit funktioniert alles. Von Rum_Start möchte ich dann jedoch über Navigation Button die Seiten wechseln können.
          Ist das möglich oder gibt das das Widget nicht her?

          Gruß Christian

          Edit: Verschoben da Frage Widget Einstellung betrifft

          GlasfaserG 1 Antwort Letzte Antwort
          0
          • B BamBam89

            Erstmal Herzlichen Dank an @Scrounger für die tolle Arbeit!!

            Ich hätte aber eine Frage. Ich nutze derzeit die Top App Bar.
            Dort gibt es vier Elemente Rum Vodka... etc

            Ich habe allerdings zwei Views Rum vielleich auch mal 3 oder 4. Der Einfachheit halber, nenn wir diese mal Rum_Start; Rum_1; Rum_2
            Nun kann ich über die Top App Bar in Rum_Start springen. Soweit funktioniert alles. Von Rum_Start möchte ich dann jedoch über Navigation Button die Seiten wechseln können.
            Ist das möglich oder gibt das das Widget nicht her?

            Gruß Christian

            Edit: Verschoben da Frage Widget Einstellung betrifft

            GlasfaserG Offline
            GlasfaserG Offline
            Glasfaser
            schrieb am zuletzt editiert von
            #281

            @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

            Button die Seiten wechseln können.

            in etwa so :
            https://forum.iobroker.net/topic/41839/vis-mit-top-app-und-button-steuern/6

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            B 1 Antwort Letzte Antwort
            0
            • GlasfaserG Glasfaser

              @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

              Button die Seiten wechseln können.

              in etwa so :
              https://forum.iobroker.net/topic/41839/vis-mit-top-app-und-button-steuern/6

              B Offline
              B Offline
              BamBam89
              schrieb am zuletzt editiert von
              #282

              @glasfaser

              Also wenn ich das richtig verstehe, dann ist das nicht das was ich suche.
              In deinem Beispielt geht es ja scheinbar darum das Keller, Erdgeschoss, etc immer angezeigt werden soll. Das ist bei mir nicht der Fall. Ich versuche das mal bitte Bilder zu hinterfüllen.

              Das sind meine Views Zumindest die ersten. Ich bin noch in der kreativen Phase :-) :

              87cf4b29-d27c-46fa-88a6-0fe168bd2ba9-image.png

              Auf 0_1_Index liegt das Widget Top App Bar und das View in Widget 8.
              Bei sind über den Datenpunkt .... Zahl für Navigation.... verbunden

              e8ea294d-8095-40aa-9cc2-93375b3ad8c6-image.png

              Über das Menü Top App Bar kann ich nun einer meiner fünf Views besuchen

              06c881fd-b6fd-4a92-b34a-f4149c8514c6-image.png

              Wenn ich also auf Rum klicke, komme ich in das View 1_1_Rum

              9fc6e3ee-6631-4008-8059-54880586d806-image.png

              Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas), unten Links möchte ich dann gerne 1_2_Rum angezeigt bekommen.
              Hier wären dann ebenfalls ein Button um wieder zurück zu kommen. Bzw. sollte es mal eine Seite 1_3_Rum geben müsste es auf 1_2_Rum natürlich zwei Button geben um entweder auf 1_1_Rum oder auf 1-3-Rum zu kommen...

              Gruß

              GlasfaserG 1 Antwort Letzte Antwort
              0
              • B BamBam89

                @glasfaser

                Also wenn ich das richtig verstehe, dann ist das nicht das was ich suche.
                In deinem Beispielt geht es ja scheinbar darum das Keller, Erdgeschoss, etc immer angezeigt werden soll. Das ist bei mir nicht der Fall. Ich versuche das mal bitte Bilder zu hinterfüllen.

                Das sind meine Views Zumindest die ersten. Ich bin noch in der kreativen Phase :-) :

                87cf4b29-d27c-46fa-88a6-0fe168bd2ba9-image.png

                Auf 0_1_Index liegt das Widget Top App Bar und das View in Widget 8.
                Bei sind über den Datenpunkt .... Zahl für Navigation.... verbunden

                e8ea294d-8095-40aa-9cc2-93375b3ad8c6-image.png

                Über das Menü Top App Bar kann ich nun einer meiner fünf Views besuchen

                06c881fd-b6fd-4a92-b34a-f4149c8514c6-image.png

                Wenn ich also auf Rum klicke, komme ich in das View 1_1_Rum

                9fc6e3ee-6631-4008-8059-54880586d806-image.png

                Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas), unten Links möchte ich dann gerne 1_2_Rum angezeigt bekommen.
                Hier wären dann ebenfalls ein Button um wieder zurück zu kommen. Bzw. sollte es mal eine Seite 1_3_Rum geben müsste es auf 1_2_Rum natürlich zwei Button geben um entweder auf 1_1_Rum oder auf 1-3-Rum zu kommen...

                Gruß

                GlasfaserG Offline
                GlasfaserG Offline
                Glasfaser
                schrieb am zuletzt editiert von Glasfaser
                #283

                @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas),

                Ich habe dich schon verstanden .
                Du kannst doch die Widget´s auf deine View´s einzeln platzieren ( nicht die Index View) und dort mit Blättern .
                Also linker Button zu 1 ,rechter Button zu 2 . ( Er schaltet dann die View in Widget 8 um )

                1.JPG
                .

                2.JPG

                . oder meinst du beim Aufgehen der TopAppBar Liste ,das dort ein vor / zurück Button rein soll !?

                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                B 1 Antwort Letzte Antwort
                0
                • GlasfaserG Glasfaser

                  @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                  Und hier würde ich dann gerne "Blätter" Also mit klick auf Navigation (das soll dann mal heißen "Nächste Seite" oder so etwas),

                  Ich habe dich schon verstanden .
                  Du kannst doch die Widget´s auf deine View´s einzeln platzieren ( nicht die Index View) und dort mit Blättern .
                  Also linker Button zu 1 ,rechter Button zu 2 . ( Er schaltet dann die View in Widget 8 um )

                  1.JPG
                  .

                  2.JPG

                  . oder meinst du beim Aufgehen der TopAppBar Liste ,das dort ein vor / zurück Button rein soll !?

                  B Offline
                  B Offline
                  BamBam89
                  schrieb am zuletzt editiert von BamBam89
                  #284

                  @glasfaser

                  Ne das geht eben nicht.
                  Also den Button den man dort nun sieht, ist im View 1_1_Rum und verweist eigentlich auf 1_2_Rum.
                  Wenn ich diesen betätige passiert.

                  Halt Stop kommt gleich ein Uodate...

                  GlasfaserG 1 Antwort Letzte Antwort
                  0
                  • B BamBam89

                    @glasfaser

                    Ne das geht eben nicht.
                    Also den Button den man dort nun sieht, ist im View 1_1_Rum und verweist eigentlich auf 1_2_Rum.
                    Wenn ich diesen betätige passiert.

                    Halt Stop kommt gleich ein Uodate...

                    GlasfaserG Offline
                    GlasfaserG Offline
                    Glasfaser
                    schrieb am zuletzt editiert von Glasfaser
                    #285

                    @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                    Wenn ich diesen betätige passoert aber nix

                    Kann ich mir nicht vorstellen , habe es so mit meinen Cam´s , ich kann hin und her schalten .

                    Schaltet der Button von dir den Datenpunkt "Zahl für Navigation" von dir , auch mit den Werte .. 0 bis .. je nach View .

                    Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                    B 1 Antwort Letzte Antwort
                    0
                    • GlasfaserG Glasfaser

                      @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                      Wenn ich diesen betätige passoert aber nix

                      Kann ich mir nicht vorstellen , habe es so mit meinen Cam´s , ich kann hin und her schalten .

                      Schaltet der Button von dir den Datenpunkt "Zahl für Navigation" von dir , auch mit den Werte .. 0 bis .. je nach View .

                      B Offline
                      B Offline
                      BamBam89
                      schrieb am zuletzt editiert von
                      #286

                      @glasfaser

                      Ja das macht er. Ich habe das eben noch einmal versucht. Das geht am PC!
                      Aber nicht auf dem Tablet.....

                      GlasfaserG 1 Antwort Letzte Antwort
                      0
                      • B BamBam89

                        @glasfaser

                        Ja das macht er. Ich habe das eben noch einmal versucht. Das geht am PC!
                        Aber nicht auf dem Tablet.....

                        GlasfaserG Offline
                        GlasfaserG Offline
                        Glasfaser
                        schrieb am zuletzt editiert von Glasfaser
                        #287

                        @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                        Das geht am PC!

                        Aber nicht auf dem Tablet.....

                        und da liegt das Problem ... !

                        Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                        B 1 Antwort Letzte Antwort
                        0
                        • GlasfaserG Glasfaser

                          @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                          Das geht am PC!

                          Aber nicht auf dem Tablet.....

                          und da liegt das Problem ... !

                          Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                          B Offline
                          B Offline
                          BamBam89
                          schrieb am zuletzt editiert von BamBam89
                          #288

                          @glasfaser said in Material Design Widgets: Top App Bar Widget:

                          @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                          Das geht am PC!

                          Aber nicht auf dem Tablet.....

                          und da liegt das Problem ... !

                          Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                          Nicht zu machen. Keines der im Screenshot gezeigten funktioniert mit dem Tablet über die App
                          Auf dem Rechner im Browser ist alles ok...

                          759bdd65-bc12-4c3a-b3bf-546ae4bddfe9-image.png

                          ScroungerS 1 Antwort Letzte Antwort
                          0
                          • ScroungerS Scrounger

                            Top App Bar Widget

                            topappbar_modal.gif

                            Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

                            Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

                            • Dokumentation
                            • Online Beispiel

                            Themen zu anderen Widgets findest du hier!

                            G Offline
                            G Offline
                            gerald123
                            schrieb am zuletzt editiert von
                            #289

                            @scrounger Hallo scrounger,
                            Ich habe in meinem VIS Projekt deine Widget in Verwendung und sie funktionieren soweit sehr gut, danke schon mal für deine tolle Arbeit.

                            Leider habe ich ein kleines Problem wenn ich auf meine VIS über die ioBroker Cloud zugreife, da fehlen alle MD Widget in meinem Projekt.
                            Greife ich von Zuhause zu oder über den VPN dann sind alle verfügbar.
                            Wo könnte da bei mir der Fehler liegen?

                            Danke
                            Gerald

                            Synology 918+ 4GB; ioBroker auf RPI4; Zigbee; Sonoff

                            1 Antwort Letzte Antwort
                            0
                            • B BamBam89

                              @glasfaser said in Material Design Widgets: Top App Bar Widget:

                              @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                              Das geht am PC!

                              Aber nicht auf dem Tablet.....

                              und da liegt das Problem ... !

                              Nutze mal ein anderes Widget ... nicht das Materialdesign ... was ist dann !?

                              Nicht zu machen. Keines der im Screenshot gezeigten funktioniert mit dem Tablet über die App
                              Auf dem Rechner im Browser ist alles ok...

                              759bdd65-bc12-4c3a-b3bf-546ae4bddfe9-image.png

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              schrieb am zuletzt editiert von
                              #290

                              @bambam89 sagte in Material Design Widgets: Top App Bar Widget:

                              Nicht zu machen. Keines der im Screenshot gezeigten funktioniert mit dem Tablet über die App
                              Auf dem Rechner im Browser ist alles ok...

                              siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#iobroker-vis-app

                              @gerald123 sagte in Material Design Widgets: Top App Bar Widget:

                              Wo könnte da bei mir der Fehler liegen?

                              Ich nutze den Cloud Adapter nicht, deshalb kann ich dazu nichts sagen. Wahrscheinlich müssen die wie bei der App explizit implemnetiert werden. Bitte stell die Frage direkt beim Cloud Adapter.

                              <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                              <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                              1 Antwort Letzte Antwort
                              0
                              • ice987I Offline
                                ice987I Offline
                                ice987
                                schrieb am zuletzt editiert von ice987
                                #291

                                @Scrounger

                                hat sich erledigt. Das Problem lag bei mir... :joy:

                                husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                                GarganoG 1 Antwort Letzte Antwort
                                0
                                • NegaleinN Offline
                                  NegaleinN Offline
                                  Negalein
                                  Global Moderator
                                  schrieb am zuletzt editiert von
                                  #292

                                  @Scrounger

                                  gestern wurde mir die 0.5.5 angeboten.
                                  Läuft eigentlich alles, bis auf den Button (siehe Screenshot).

                                  Vorher war nur der runde Button zu sehen. Jetzt mit 0.5.5 ist es eckig mit dem runden in der Mitte.
                                  a0a5547b-c404-4820-be8a-6030011e2873-image.png

                                  ° Node.js: 20.17.0 NPM: 10.8.2
                                  ° Proxmox, Ubuntu 22.04.3 LTS
                                  ° Fixer ---> iob fix

                                  ScroungerS 1 Antwort Letzte Antwort
                                  0
                                  • NegaleinN Negalein

                                    @Scrounger

                                    gestern wurde mir die 0.5.5 angeboten.
                                    Läuft eigentlich alles, bis auf den Button (siehe Screenshot).

                                    Vorher war nur der runde Button zu sehen. Jetzt mit 0.5.5 ist es eckig mit dem runden in der Mitte.
                                    a0a5547b-c404-4820-be8a-6030011e2873-image.png

                                    ScroungerS Offline
                                    ScroungerS Offline
                                    Scrounger
                                    Developer
                                    schrieb am zuletzt editiert von
                                    #293

                                    @negalein
                                    Hintergrund Farbe evtl transparent?
                                    Hast du irgendwelche CSS uberscheibungen im Einsatz?

                                    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                    NegaleinN 1 Antwort Letzte Antwort
                                    0
                                    • ScroungerS Scrounger

                                      @negalein
                                      Hintergrund Farbe evtl transparent?
                                      Hast du irgendwelche CSS uberscheibungen im Einsatz?

                                      NegaleinN Offline
                                      NegaleinN Offline
                                      Negalein
                                      Global Moderator
                                      schrieb am zuletzt editiert von
                                      #294

                                      @scrounger sagte in Material Design Widgets: Top App Bar Widget:

                                      Hintergrund Farbe evtl transparent?

                                      Nein

                                      Hast du irgendwelche CSS uberscheibungen im Einsatz?

                                      Ja, aber die hatte ich vor dem Update auch schon.

                                      /* custom scrollbar layout */
                                        @media only screen and (min-width: 1025px) {
                                          :root {
                                              --material-design-widget-scrollbar-color: rgba(63,64,71,1);
                                              --material-design-widget-scrollbar-track-color: rgba(50,50,60,1);
                                              
                                              /* Firefox */
                                              --material-design-widget-scrollbar-style: thin;
                                              
                                              /* nur Chrome, Edge, Safari */
                                              --material-design-widget-scrollbar-width: 15px;
                                              --material-design-widget-scrollbar-radius: 7px;
                                              --material-design-widget-scrollbar-hover-color: rgba(63,64,71,1);
                                          }
                                          
                                          /* Firefox */
                                          .materialdesign-widget, 
                                          .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content, 
                                          .v-menu__content.menuable__content__active,
                                          .materialdesign-widget .v-calendar-daily__scroll-area,
                                          .materialdesign-widget .mdc-data-table,
                                          .materialdesign-widget .mdc-data-table__content {
                                              scrollbar-width: var(--material-design-widget-scrollbar-style);
                                              scrollbar-color: var(--material-design-widget-scrollbar-color) var(--material-design-widget-scrollbar-track-color);
                                          }
                                          
                                          /* Chrome, Edge, Safari */
                                          .materialdesign-widget::-webkit-scrollbar,
                                          .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar,
                                          .v-menu__content.menuable__content__active::-webkit-scrollbar, 
                                          .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar,
                                          .materialdesign-widget .mdc-data-table::-webkit-scrollbar,
                                          .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar {
                                              width: var(--material-design-widget-scrollbar-width);
                                          }
                                          .materialdesign-widget::-webkit-scrollbar-track, 
                                          .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar-track, 
                                          .v-menu__content.menuable__content__active::-webkit-scrollbar-track,
                                          .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar-track,
                                          .materialdesign-widget .mdc-data-table::-webkit-scrollbar-track,
                                          .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar-track {
                                              background: var(--material-design-widget-scrollbar-track-color);
                                          }
                                          .materialdesign-widget::-webkit-scrollbar-thumb,     
                                          .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar-thumb, 
                                          .v-menu__content.menuable__content__active::-webkit-scrollbar-thumb,
                                          .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar-thumb,
                                          .materialdesign-widget .mdc-data-table::-webkit-scrollbar-thumb,
                                          .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar-thumb {
                                              background-color: var(--material-design-widget-scrollbar-color);
                                              border-right: 0px solid white;
                                              border-radius: var(--material-design-widget-scrollbar-radius);
                                          }
                                          .materialdesign-widget::-webkit-scrollbar-thumb:hover, 
                                          .materialdesign-topAppBar-with-Drawer .mdc-drawer .mdc-drawer__content::-webkit-scrollbar-thumb:hover, 
                                          .v-menu__content.menuable__content__active::-webkit-scrollbar-thumb:hover,
                                          .materialdesign-widget .v-calendar-daily__scroll-area::-webkit-scrollbar-thumb:hover,
                                          .materialdesign-widget .mdc-data-table::-webkit-scrollbar-thumb:hover,
                                          .materialdesign-widget .mdc-data-table__content::-webkit-scrollbar-thumb:hover {
                                              background: var(--material-design-widget-scrollbar-hover-color);
                                          }
                                      }
                                      
                                      /*Trashschedule-Adapter*/
                                      .trashtype .daysleft {
                                          background: none !important;
                                          top: 56%;
                                          transform: scale(0.8) !important;
                                      }
                                       
                                      .trashtype .dumpster {
                                          transform: scale(0.9) !important;
                                          height: 120px !important;
                                      }
                                       
                                      .trashtype {
                                          width: 70px !important;
                                      }
                                       
                                      .trashtype .name {
                                          font-size: 16px !important;
                                          margin-top: 5px !important;
                                      }
                                      
                                      /**Top App Bar Hintergrund und Auswahlbutton @Glasfaser**/
                                      .mdc-drawer {
                                       
                                          background: linear-gradient(0deg, #2c2a3f, #4c6ed4, #2c2a3f) !important;
                                      }
                                       
                                      .mdc-top-app-bar {
                                            background: linear-gradient(0deg, #2c2a3f, #4c6ed4, #2c2a3f) !important;
                                      }
                                      

                                      #vis_container .mic-navleft-huawei .label {
                                        font-size: 100% !important;
                                        font-family: RobotoCondensed-Light !important;
                                        text-align: left !important;
                                        text-shadow: 2px 2px 2px #000000 !important;
                                        padding: 0 !important;
                                        margin: -3px 0px 0px 50px !important;
                                      }
                                      /* Nicht selektiert */
                                      #vis_container .mic-navleft-huawei .bg-orange {
                                          background: none !important;
                                          box-shadow: none !important; /* Rahmen weg */
                                      }
                                      /* selektiert */
                                      #vis_container .mic-navleft-huawei .bg-green {
                                          background: rgba(182, 17, 138, 0.6) !important;
                                          box-shadow: none !important; /* Rahmen weg */
                                      }
                                      .button_site_navigation_grey_200
                                          {
                                              height:94px;
                                          	width:200px;
                                          	line-height:94px;
                                              text-align:center;
                                              vertical-align:middle;
                                          	border:#85888a solid 3px;
                                              border-radius: 5px;
                                          	font-size:22px;
                                          	background: #0079FF;
                                              background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#676a6e), to(#1f2122));
                                              background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#676a6e), to(#1f2122));
                                              background: -moz-linear-gradient(center top, #676a6e, #1f2122);
                                              color:white;
                                          }
                                      .button_site_navigation_blue_200
                                          {
                                              height:94px;
                                          	width:200px;
                                          	line-height:94px;
                                              text-align:center;
                                              vertical-align:middle;
                                          	border:#1a89c8 solid 3px;
                                              border-radius: 5px;
                                          	font-size:22px;
                                          	background: #0079FF;
                                              background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#676a6e), to(#1f2122));
                                              background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#676a6e), to(#1f2122));
                                              background: -moz-linear-gradient(center top, #676a6e, #1f2122);
                                              color:white;
                                          }
                                      /************************
                                       * Log-Table 
                                       ************************/
                                      .tablelog .log-warn { color: orange; font-weight: bold; }
                                      .tablelog .log-error { color: red;  font-weight: bold;}
                                       
                                      .tablelog-inner {
                                          background-color: transparent;
                                      }
                                      .tablelog.vis-widget {
                                          background-color: transparent !important;
                                      }
                                       
                                      .tablelog-th1 { /* nur linke Spalte */ 
                                          width: 40px;
                                          text-align: center;
                                          color: white;
                                          font-size: 11px;
                                          padding: 2px;
                                      }
                                      /* Tabellen-Zeilen odd/even */
                                      .tablelog-tr:nth-child(odd) {
                                          font-size: 11px;
                                          color: white;
                                          background-color: #707070;
                                      }
                                      .tablelog-tr:nth-child(even) {
                                          font-size: 11px;
                                          color: white;
                                          background-color: #606060;
                                      }
                                      .hintegrundfarbe_bigbox{
                                      background: #484A5C;
                                      border:1px solid #2B2D3B;
                                      }
                                       
                                      /* das hellblaue 4F5165
                                      /*3E404C */
                                       
                                       
                                      .kod_fanart_verlauf{
                                      box-shadow: inset 700px 0px 150px 8px #161616;
                                       
                                      }
                                       
                                       
                                       
                                      .small_button_aktiv{
                                         border:#7F808F solid 0.5px;
                                         border-radius:4px;
                                         border-left-color:#7F808F;
                                         border-left-width: 10px;
                                         box-sizing:border-box;
                                      }
                                       
                                      .shadown_hg{
                                         box-shadow: 0px 10px 35px -10px
                                         #202020;
                                      }
                                       
                                      .shadown_box{
                                         box-shadow: 0px 12px 35px -12px #000;
                                      }
                                       
                                       
                                      .Menue_ueberschrift{
                                         font-size:20px;
                                         font-family:Jura-DemiBold;
                                         color:#fff;
                                      }
                                       
                                      .linie_unten{
                                      border-bottom: 0.2px solid #acacac;
                                      opacity:0.5;
                                      }
                                       
                                      .linie_oben_unten{
                                      border-top: 2px solid #2B2D3B;
                                      border-bottom: 2px solid #2B2D3B;
                                       
                                      }
                                       
                                      .linie_rechts{
                                      border-right: 1px solid #000;
                                      border-left: 0px solid #000;
                                      border-top: 0px solid #000;
                                      border-bottom: 1px solid #000;
                                      }
                                       
                                      /* ########################## */
                                       
                                      .zentrieren div {
                                         display: flex;
                                         align-items: center; /* vertikal*/
                                         justify-content: center; /* horizontal */
                                      }
                                       
                                      .zentrieren_links div {
                                         display: flex;
                                         align-items: center; /* vertikal*/
                                         justify-content: left; /* horizontal */
                                      }
                                       
                                      .zentrieren_unten div {
                                         display: flex;
                                         align-items: flex-end; /* vertikal*/
                                         justify-content: center; /* horizontal */
                                      }
                                       
                                      .zentrieren_oben_center div {
                                         display: flex;
                                         justify-content: center; /* horizontal */
                                      }
                                       
                                      .zentrieren_oben_links div {
                                         display: flex;
                                         align-items: left; /* vertikal*/
                                      }
                                       
                                       
                                       
                                      /* ########################## */
                                       
                                       
                                      .blur{
                                           /* Add the blur effect */
                                          filter: blur(2px);
                                         -webkit-filter: blur(10px);
                                      }
                                       
                                      .blur2{
                                           /* Add the blur effect */
                                          filter: blur(4px);
                                         -webkit-filter: blur(10px);
                                      }
                                       
                                      .blur3{
                                           /* Add the blur effect */
                                          filter: blur(1px);
                                         -webkit-filter: blur(2px);
                                      }
                                       
                                       
                                      
                                      /******************************************
                                                      — LINKS —
                                      ******************************************/
                                      .noteProject a:link { color: #b8b8b8; } /* unvisited link */
                                      .noteProject a:visited { color: #b8b8b8; } /* visited link */
                                      .noteProject a:hover { color: #ffffff; } /* mouse over link */
                                      .pnoteProjecte a:active { color: #ffffff; } /* selected link */
                                      hr { border:0; height: 1px; background-color:#b8b8b8 }
                                      
                                      
                                      /******************************************
                                                      — LINKS —
                                      ******************************************/
                                      .noteProject a:link { color: #b8b8b8; } /* unvisited link */
                                      .noteProject a:visited { color: #b8b8b8; } /* visited link */
                                      .noteProject a:hover { color: #ffffff; } /* mouse over link */
                                      .pnoteProjecte a:active { color: #ffffff; } /* selected link */
                                      hr { border:0; height: 1px; background-color:#b8b8b8 }
                                      
                                      
                                      
                                      
                                      /******************************************
                                                      — LINKS —
                                      ******************************************/
                                      .noteProject a:link { color: #b8b8b8; } /* unvisited link */
                                      .noteProject a:visited { color: #b8b8b8; } /* visited link */
                                      .noteProject a:hover { color: #ffffff; } /* mouse over link */
                                      .pnoteProjecte a:active { color: #ffffff; } /* selected link */
                                      hr { border:0; height: 1px; background-color:#b8b8b8 }
                                      
                                      
                                      /******************************************
                                                      — TABLE —
                                      ******************************************/
                                      
                                      /* Color of log level */
                                      .tableLog .logInfo { color: yellow;}
                                      .tableLog .logWarn { color: orange;}
                                      .tableLog .logError { color: red;}
                                      
                                      
                                      
                                      /* Apply word-break */
                                      .tableLog {
                                          word-break: break-word; 
                                      }
                                      
                                      
                                      
                                      /* Jede zweite Tabellenzeile formatieren */
                                      .tableLog tr:nth-child(even) {
                                          background:rgba(56,46,67,0.1);
                                      }
                                      
                                      /* Rand unterhalb Tabellenüberschrift setzen */
                                      .tableLog .mdc-data-table__header-row {
                                          border-bottom: 1px solid #434343;
                                      }
                                      
                                      /* Zeilenhöhe und Abstände definieren */
                                      .tableLog .mdc-data-table__cell  {
                                          line-height:1.3em;
                                          padding-top: 6px;
                                          padding-bottom: 6px;
                                      }
                                      
                                      
                                      /* Scrollbar */
                                      .tableLog::-webkit-scrollbar { width: 15px; }
                                      .tableLog::-webkit-scrollbar-track { background: transparent; }
                                      .tableLog::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                      .tableLog::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                      
                                      
                                      /******************************************
                                                      — BUTTONS —
                                      ******************************************/
                                      
                                      
                                      .leftBarBtn .materialdesign-button-body {
                                          justify-content: left !important; 
                                          margin-left: 0.9em;
                                      }
                                      
                                      
                                      
                                      
                                      /* Scrollbar von Widget "materialdesign - Select" enfernen */
                                      .v-menu__content.theme--light.menuable__content__active::-webkit-scrollbar {
                                          width: 0px;
                                          background: transparent; 
                                      }
                                      .v-menu__content.theme--light.menuable__content__active {
                                          scrollbar-width: none; /* für Firefox */
                                      }
                                      
                                      .mdc-dialog__content{
                                      padding: 0 !important;
                                      }
                                      
                                      /* ANFANG Anpassung Dialog View von Scrounger */
                                       
                                      .mdc-dialog__content {
                                         padding: 0 4px !important;
                                      }
                                      .mdc-dialog__content {
                                         padding: 0 4px !important;
                                         }
                                         
                                         
                                      .mdc-dialog__title {
                                         padding: 0 24px 1px !important;
                                         }
                                       
                                      .mdc-dialog__actions {
                                        padding: 0px  !important;
                                        min-height: 1px !important;
                                        margin: auto !important
                                      }
                                       
                                      .mdc-dialog .mdc-dialog__scrim {
                                       
                                         background:linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)!important;
                                         opacity: .8 !important;
                                      }
                                       
                                      .element.style ::-webkit-scrollbar {
                                         width: 0px;
                                         background: transparent; 
                                      }
                                       
                                      .mdc-dialog .element.style {
                                           overflow-y: none !important;
                                         } 
                                         
                                      /* ENDE Anpassung Dialog View von Scrounger */
                                       
                                      
                                         
                                      .rotate090 {
                                         transform-origin:50% 50%;
                                         transform: rotate(270deg);
                                      }
                                      
                                      /*  ===========================================
                                          Formatierung DOCKER-Ausgabe
                                          =========================================== */   
                                      .dockerup  { color:LIME; }
                                      .dockererr { color:RED; }
                                      .dockerimg { color:DARKTURQUOISE; }
                                      /* ENDE Anpassung Dialog View von Scrounger */
                                      
                                      /** Scrollbar: anderer Style (Chrome, Fully) **/
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                      .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                      
                                      .station_open {
                                          color: #2EFE2E;
                                      }
                                      
                                      .station_closed {
                                          color: #FF0000 !important; /* !important kann ggf. weggelassen werden */
                                      }
                                      
                                      /* € sign */
                                      .station_combined_euro {
                                          font-family: RobotoCondensed-Light;
                                          font-size: 88%;
                                      }
                                      
                                      /* Spinner */
                                      .spinnerleft {
                                      animation-name: spin;
                                      animation-duration: 60000ms;
                                      animation-iteration-count: infinite;
                                      animation-timing-function: linear; 
                                      }
                                       
                                      @keyframes spin {
                                        from {
                                            transform:rotate(360deg);
                                        }
                                        to {
                                            transform:rotate(0deg);
                                        }
                                      }
                                      .spinnerright {
                                      animation-name: spin2;
                                      animation-duration: 60000ms;
                                      animation-iteration-count: infinite;
                                      animation-timing-function: linear; 
                                      }
                                       
                                      @keyframes spin2 {
                                        from {
                                            transform:rotate(0deg);
                                        }
                                        to {
                                            transform:rotate(360deg);
                                        }
                                      }
                                      
                                      
                                      .rotate90{
                                      transform: rotate(90deg);
                                      }
                                       
                                      .rotate-90{
                                      transform: rotate(-90deg);
                                      }
                                       
                                      .rotate180{
                                      transform: rotate(180deg);
                                      }
                                      
                                      /* TimeSwitch */
                                      app-on-off-schedule-widget {
                                          /* Primary color (button background, toggle switch color) */
                                          --ts-widget-primary-color: #337ab7;
                                       
                                          /* Background color of the widget */
                                          --ts-widget-bg-color: #424242;
                                          /* Background color of the triggers */
                                          --ts-widget-trigger-bg-color: #272727;
                                       
                                          /* Foreground color (font color and scrollbar color) */
                                          --ts-widget-fg-color: white;
                                          /* Font color of the switched states id */
                                          --ts-widget-oid-fg-color: #a5a5a5;
                                          /* Font color in buttons */
                                          --ts-widget-btn-fg-color: white;
                                          /* Font color of a disabled weekday */
                                          --ts-widget-weekdays-disabled-fg-color: #5D5D5D;
                                          /* Font color of an enabled weekday */
                                          --ts-widget-weekdays-enabled-fg-color: white;
                                          /* Font color of the name of the widget (defaults to --ts-widget-fg-color) */
                                          --ts-widget-name-fg-color: white;
                                          /* Font color of switched time (defaults to --ts-widget-fg-color) */
                                          --ts-widget-switched-time-fg-color: white;
                                          /* Font color of switched value (defaults to --ts-widget-fg-color)*/
                                          --ts-widget-switched-value-fg-color: white;
                                          /* Font color of the astro time (defaults to --ts-widget-fg-color) */
                                          --ts-widget-astro-time-fg-color: black;
                                          /* Font color of the astro time's shift */
                                          --ts-widget-astro-shift-fg-color: #5d5d5d;
                                       
                                          /* Font family used in the whole widget */
                                          --ts-widget-font-family: 'Roboto', 'Segoe UI', BlinkMacSystemFont, system-ui, -apple-system;
                                          /* Font size of the name of the widget */
                                          --ts-widget-name-font-size: 2em;
                                          /* Font size of the switched oid */
                                          --ts-widget-oid-font-size: 30px;
                                       
                                          /* Applies a filter to icons used in buttons (safe, edit, remove, cancel), for
                                             white use invert(1) and for black invert(0) */
                                          --ts-widget-img-btn-filter: invert(1);
                                          
                                          /* Add trigger dropdown background color */
                                          --ts-widget-add-trigger-dropdown-bg-color: #f1f1f1;
                                          /* Add trigger dropdown font color */
                                          --ts-widget-add-trigger-dropdown-fg-color: black;
                                          /* Add trigger dropdown hover background color */
                                          --ts-widget-add-trigger-dropdown-hover-bg-color: #ddd;
                                       
                                          /* ! Changing these may break the layout, change at your own risk */
                                       
                                          /* Font size of weekdays */
                                          --ts-widget-weekdays-font-size: 23px;
                                          /* Font size of switched value (on/off) */
                                          --ts-widget-switched-value-font-size: 2em;
                                          /* Font size of switched time */
                                          --ts-widget-switched-time-font-size: 2em;
                                          /* Font size of the astro time (e.g. Sunrise, ...) */
                                          --ts-widget-astro-time-font-size: 1.5em;
                                          /* Font size of the astro time's shift */
                                          --ts-widget-astro-shift-font-size: 1em;
                                      }
                                      

                                      ° Node.js: 20.17.0 NPM: 10.8.2
                                      ° Proxmox, Ubuntu 22.04.3 LTS
                                      ° Fixer ---> iob fix

                                      1 Antwort Letzte Antwort
                                      0
                                      • GlasfaserG Offline
                                        GlasfaserG Offline
                                        Glasfaser
                                        schrieb am zuletzt editiert von
                                        #295

                                        @negalein sagte in Material Design Widgets: Top App Bar Widget:

                                        .... der runde Button zu sehen .... Jetzt ... ist es eckig

                                        Dito ... ;)
                                        Du kannst es mit den Standarteinstellung beinflussen .

                                        .
                                        1.JPG
                                        .
                                        Jede Ecke einzeln mit der Abrundung bestimmt :

                                        5.JPG
                                        .
                                        oder :

                                        2.JPG

                                        3.JPG

                                        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                        NegaleinN 1 Antwort Letzte Antwort
                                        0
                                        • GlasfaserG Glasfaser

                                          @negalein sagte in Material Design Widgets: Top App Bar Widget:

                                          .... der runde Button zu sehen .... Jetzt ... ist es eckig

                                          Dito ... ;)
                                          Du kannst es mit den Standarteinstellung beinflussen .

                                          .
                                          1.JPG
                                          .
                                          Jede Ecke einzeln mit der Abrundung bestimmt :

                                          5.JPG
                                          .
                                          oder :

                                          2.JPG

                                          3.JPG

                                          NegaleinN Offline
                                          NegaleinN Offline
                                          Negalein
                                          Global Moderator
                                          schrieb am zuletzt editiert von
                                          #296

                                          @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

                                          Du kannst es mit den Standarteinstellung beinflussen .

                                          leider nichts gebracht

                                          Edit vis.png Unbenannt-1.png

                                          ° Node.js: 20.17.0 NPM: 10.8.2
                                          ° Proxmox, Ubuntu 22.04.3 LTS
                                          ° Fixer ---> iob fix

                                          GlasfaserG 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

                                          827

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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