Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[liv-in-sky]

weiß jmd, wie man die scrollbar schöner bekommt ? nicht das langweilige grau

ich dachte, ich hatte sowas mal gesehen - kann aber nix mehr finden

z.b.

@sigi234

[liv-in-sky]

@sigi234

falls jmd eine bessere lösung hat - bitte posten ( arbeitet in chrome)
habe das gefunden in der ccs eintragen - wirkt sich aber auch auf den editor aus- ist mir aber nicht so wichtig

::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

die unsichtbare version - weiß nicht, ob die irgenwann mal probleme macht:

::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: transparent;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color:transparent;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

[Scrounger]

@liv-in-sky

@liv-in-sky sagte in schönere scrollbar in der vis:

ich dachte, ich hatte sowas mal gesehen - kann aber nix mehr finden

ja das gibt es irgendwo in den tiefen der ganzen MDW Themen ;-)

/* custom scrollbar layout */
  @media only screen and (min-width: 1025px) {
    :root {
        --material-design-widget-scrollbar-color: #cdcdcd;
        --material-design-widget-scrollbar-track-color: #f0f0f0;
        
        /* Firefox */
        --material-design-widget-scrollbar-style: thin;
        
        /* nur Chrome, Edge, Safari */
        --material-design-widget-scrollbar-width: 7.5px;
        --material-design-widget-scrollbar-radius: 0px;
        --material-design-widget-scrollbar-hover-color: #a6a6a6;
    }
    
    /* 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: 1px 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);
    }
}

im oberen Bereich kannst die Farben, Breite, etc. definieren, funktioniert aber nicht bei jedem browser

    :root {
        --material-design-widget-scrollbar-color: #cdcdcd;
        --material-design-widget-scrollbar-track-color: #f0f0f0;
        
        /* Firefox */
        --material-design-widget-scrollbar-style: thin;
        
        /* nur Chrome, Edge, Safari */
        --material-design-widget-scrollbar-width: 7.5px;
        --material-design-widget-scrollbar-radius: 0px;
        --material-design-widget-scrollbar-hover-color: #a6a6a6;
    }

Und du musst halt noch ggf. die ccs klassen anpassen, da diese in dem Beispiel nur auf die MDW angewendet werden.

Edit: hier war es:
https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/88

[liv-in-sky]

@Scrounger

css ist nicht gerade meine stärke

das hier funktioniert sehr gut :

::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

ist halt auf alles angewendet - der vis-editor ist ok aber wenn ich mal ein anderes widget mit einer anderen farbe (im scroll-balken) möchte, weiß ich nicht, wie man so ein webkit auf ein einzelnes widget "hindreht" - das transparente finde ich eigentlich sehr gut, aber ich möchte das nicht im editor sondern nur bei vereinzelten widgets - ist dann so ähnlich wie im handy - man kann scrollen, sieht aber diese leiste an der seite nicht - mit meiner momentanen einstellung gibt es auch kein problem mit z.b deinen widgets (z.b table)

weißt du evtl, wie ich einen bestimmt formatierten webkit in eine klasse bekomme, die dann auf ein html standard widget angewendet werden kann über die klassen definition unter generell

habe es so versucht: funktionert leider nicht
css:

.myscrolli::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

widget:

[Glasfaser]

@liv-in-sky sagte in schönere scrollbar in der vis:

habe es so versucht: funktionert leider nicht

Funktioniert doch ... dein weg mit ".myscrolli::-webkit-scrollbar" ist schon richtig !
.

.

siehe auch hier : Link Text

[liv-in-sky]

@Glasfaser ja das funktioniert - aber ich muss dann das "ohne klasse" rausnehmen. d.h ich muss für jedes element , welches eine scrollbalken hat, die klasse eingeben - ist aber auch nicht wild

einzeln eine klasse definieren funktioniert mit dem hier nicht (der untere teil überschreibt alles):

.myscrolli::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: red;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: #468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: transparent /*3px solid orange;   creates padding around scroll thumb */
}

ich weiß - luxus probleme - aber ich finde es garnicht so schlecht, auch im editor die "schlanken" scrollbalken zu haben

[Glasfaser]

@liv-in-sky sagte in schönere scrollbar in der vis:

ich weiß - luxus probleme -

Ist über den Befehl machbar

#visview_1 ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

brauchst auch kein CSS bei den Widgets eintragen , ist dann nur für die aktive Seite die im CSS eingetragen ist aktiv

hier bei meinem Beispiel heißt der View "1" , und auch nur dort wirkt sich der CSS aus .

[liv-in-sky]

@Glasfaser danke - gute idee - funktioniert

habe eh einige views die eigenes farb-layout haben

[Glasfaser]

@liv-in-sky sagte in schönere scrollbar in der vis:

..... die eigenes farb-layout haben

Ja ... das kenne ich von Dir ;)

[liv-in-sky]

@Glasfaser ist tagesabhängig - manchmal ist es hellblau - manchmal gibt es giftgrün - konnte noch nicht eruieren , was wann warum dran ist :-)