CSS für VerticalToolbar_mod.uc.js gesucht

Hallo,

ich nutze neben der Erweiterung Vertical Toolbar (auf der rechten Seite des Browserfensters) noch das userChromeJS-Skript VerticalToolbar_mod.uc.js (auf der linken Seite).

Ich würde der Toolbar gern einen Hovereffekt verpassen, also dass sie bei Berührung des Browserrands mit der Maus verzögert ausfährt, dabei soll sie nicht transparent sein. Miccovin hatte hier bereits mal einen Code gepostet, der schon fast tut, was ich möchte. Ich habe ihn leicht angepasst (Zeit der Verzögerung und neue ID in Skript und CSS-Code vergeben, da die ID sonst in meinen beiden Vertical Toolbars gleich gewesen wäre):

#vertical-toolbar-userchrome {
                    position:fixed!important;
                    top:115px;
                    bottom:24px;

                    width: 0px !important;
                    overflow-x: hidden !important;
                    border: 1px solid transparent !important;

                    -moz-transition: width .2s ease-out 0s, opacity 0s ease-out 0s !important;
            }


            #vertical-toolbar-userchrome:hover {
                    width: 32px !important; /*-adjust sidebar width here-*/
                    opacity: 1 !important;
                    -moz-transition: width .2s ease-out 3.5s, opacity 0s ease-out 0s !important;
            }

Durch den Code ist das Hoververhalten bereits wie gewünscht, nur leider wird die Leiste damit transparent dargestellt. Ich habe verschiedenes versucht, bekomme es aber nicht hin.

Diesen Code verwende ich mit Vertical Toolbar (Addon), leider funktioniert er nur auf der rechten und nicht auf der linken Seite:

#vertical-toolbar{
-moz-transition-delay: 2s;}


#vertical-toolbar:not(:hover) {
margin-right: -65px !important;
-moz-transition: .5s }

Hat jemand eine Idee?

Danke und Grüße

Hallo loshombre,

danke für die Antwort. Sie ganz nett aus. Aber ist es normal, dass der Webseiteninhalt sich beim Ausfahren der Toolbar mitbewegt (wird nach rechts geschoben)?

Viele Grüße

Ok, danke auf jeden Fall. Hm, mein obiger Code hovert zwar, ohne die Seite dabei zu bewegen, ist aber leider transparent.. Bei irgendwelchen Spielereien habe ich diese Seitenbewegung aber auch schonmal "hinbekommen" Mal sehen, ob ich der transparenten Leiste irgendeinen background verleihen kann.. Vielleicht hat ja noch jemand eine Idee

Viele Grüße

Grandiose Idee Super, jetzt ist es wirklich wie ich es haben will :klasse:

Ich habe kurz überlegt.. Die Originaltoolbar passt sich oben in der Höhe an, sobald eine Reihe mehrzeiliger Tabs beginnt. Durch den CSS-Code steht sie dann etwas über (siehe Bild: links einzeilige Tabreihe, rechts mehrzeilig mit Überstand; ich habe die Leiste mal rot gefärbt, damit man es besser erkennt). Das ist aber wahrscheinlich sogar sinnvoll so, weil bei einer Autoanpassung der Höhe, die Leiste ja verkürzt werden müsste. Das wäre sicherlich auch nicht ideal, wenn viele Buttons drin sind, denn die müssten dann ja auch irgendwo hingequetscht werden. Also, das passt nun wie es ist. Nochmal vielen Dank :klasse:

Hier der endgültige Code (die background-Farbe ist das Standardgrau der Firefoxoberfläche; ich habe nochmal die Abstandswerte für oben und unten, sowie die Toolbarbreite etwas angepasst, außerdem einen Wert margin-left zugefügt, weil ich sonst einen kleinen Überstand hatte. Diese px-Werte wären noch bei jedem individuell anzupassen):

#vertical-toolbar {
                    position:fixed!important;
                    top:112px;
                    bottom:20px;
                    background: #D4D0C8;
                    width: 0px !important;
                    overflow-x: hidden !important;
                    border: 1px solid transparent !important;
                    margin-left: -1.9px !important;

                    -moz-transition: width .2s ease-out 0s, opacity 0s ease-out 0s !important;
            }


            #vertical-toolbar:hover {
                    width: 26px !important; /*-adjust sidebar width here-*/
                    opacity: 1 !important;
                    -moz-transition: width .2s ease-out 3.5s, opacity 0s ease-out 0s !important;
            }

Viele Grüße

[attachment=0]vertbar.jpg[/attachment]