NEWS
schönere scrollbar in der vis
-
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.
-
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 */ }
-
@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 -
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:
-
@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
-
@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
-
@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 .
-
@Glasfaser danke - gute idee - funktioniert
habe eh einige views die eigenes farb-layout haben
-
@liv-in-sky sagte in schönere scrollbar in der vis:
..... die eigenes farb-layout haben
Ja ... das kenne ich von Dir
-
@Glasfaser ist tagesabhängig - manchmal ist es hellblau - manchmal gibt es giftgrün - konnte noch nicht eruieren , was wann warum dran ist