Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Top App Bar Widget

    NEWS

    • ioBroker goes Matter ... Matter Adapter in Stable

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

    Material Design Widgets: Top App Bar Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      BamBam89 last edited by Scrounger

      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

      Glasfaser 1 Reply Last reply Reply Quote 0
      • Glasfaser
        Glasfaser @BamBam89 last edited by

        @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 1 Reply Last reply Reply Quote 0
        • B
          BamBam89 @Glasfaser last edited by

          @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ß

          Glasfaser 1 Reply Last reply Reply Quote 0
          • Glasfaser
            Glasfaser @BamBam89 last edited by 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 1 Reply Last reply Reply Quote 0
            • B
              BamBam89 @Glasfaser last edited by 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...

              Glasfaser 1 Reply Last reply Reply Quote 0
              • Glasfaser
                Glasfaser @BamBam89 last edited by 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 1 Reply Last reply Reply Quote 0
                • B
                  BamBam89 @Glasfaser last edited by

                  @glasfaser

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

                  Glasfaser 1 Reply Last reply Reply Quote 0
                  • Glasfaser
                    Glasfaser @BamBam89 last edited by 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 1 Reply Last reply Reply Quote 0
                    • B
                      BamBam89 @Glasfaser last edited by 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

                      Scrounger 1 Reply Last reply Reply Quote 0
                      • G
                        gerald123 @Scrounger last edited by

                        @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

                        1 Reply Last reply Reply Quote 0
                        • Scrounger
                          Scrounger Developer @BamBam89 last edited by

                          @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.

                          1 Reply Last reply Reply Quote 0
                          • ice987
                            ice987 last edited by ice987

                            @Scrounger

                            hat sich erledigt. Das Problem lag bei mir... 😂

                            Gargano 1 Reply Last reply Reply Quote 0
                            • Negalein
                              Negalein Global Moderator last edited by

                              @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

                              Scrounger 1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @Negalein last edited by

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

                                Negalein 1 Reply Last reply Reply Quote 0
                                • Negalein
                                  Negalein Global Moderator @Scrounger last edited by

                                  @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;
                                  }
                                  

                                  1 Reply Last reply Reply Quote 0
                                  • Glasfaser
                                    Glasfaser last edited by

                                    @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

                                    Negalein 1 Reply Last reply Reply Quote 0
                                    • Negalein
                                      Negalein Global Moderator @Glasfaser last edited by

                                      @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

                                      Glasfaser 1 Reply Last reply Reply Quote 0
                                      • Glasfaser
                                        Glasfaser @Negalein last edited by

                                        @negalein

                                        Du hast es aber im Widget TopAppBar geändert !?

                                        Negalein 1 Reply Last reply Reply Quote 0
                                        • Negalein
                                          Negalein Global Moderator @Glasfaser last edited by

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

                                          Du hast es aber im Widget TopAppBar geändert !?

                                          Jep 🙂

                                          Edit vis (1).png

                                          Glasfaser 1 Reply Last reply Reply Quote 0
                                          • Glasfaser
                                            Glasfaser @Negalein last edited by

                                            @negalein

                                            Komisch ...

                                            Nimm mal das Widget in einem anderen Projekt , ist es auch dort so das man es nicht verändern kann , bzw. nimm mal Testweise alle CSS Anweisungen raus . Global / Projekt

                                            Negalein 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            930
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            73
                                            411
                                            60151
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo