Sidebar per Maushover einblenden - Auslösebereich unveränderlich zu breit

Foxen666

Hallo zusammen,

Ich habe seit einiger Zeit das Problem, dass sich, wie der Titel bereits sagt, der Bereich, der das Ausklappen meiner Sidebar auslöst, nicht mehr schmaler stellen lässt.

Ursprünglich ließ sich das in Zeile 28 einstellen:

CSS

/* Sidebar per Maushover einblenden (https://www.windowspower.de/firefox-83-sidebar-per-hover-oeffnen/) width:15px (ändert den reagierenden Bereich)*/


@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {

#menu_bookmarksSidebar {
display: -moz-box !important;
}

#bookmarks-view-children {
margin-top: -120px !important;
margin-left: -15px !important;
}

.sidebar-placesTreechildren::-moz-tree-separator {
margin: 0px 500px !important;
}

/* width:5px = Bereite des Bereichs am linken Rand, der das Ausklappen auslöst
transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important; = Dauer der Einblendung hier einstellen*/

#sidebar-box {
display: block !important;
position: fixed !important;
top: 188px;
bottom: -35px;
width: 5px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
transition: width .2s ease-out 0.2s, opacity .2s ease-out 0.2s !important;
z-index: 2 !important;
}

/*width = Breite der Leiste */
#sidebar-box:hover {
width: 300px !important;
opacity: 1 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#sidebar-splitter {
display: none !important;
}

#sidebar {
display: block !important;
width: 100% !important;
height: 92%;
}
}

Alles anzeigen

Jetzt verändert meine Eingabe nichts mehr und der Bereich an der linken Seite ist dauerhaft viel zu breit. Die Sidebar stört dadurch ständig.

Den Cache habe ich nach meinen Änderungsversuchen mehrfach gelöscht und Firefox neu gestartet. Hat nichts geändert.

Könnte mir bitte jemand einen Tipp geben oder mir sagen warum genau ich zu doof bin?

LG

2002Andreas

Zitat von Foxen666

nicht mehr schmaler stellen lässt.

Dafür gibt es schon einen Thread mit Lösungen:

Beitrag

RE: Sidebar Hover Code anpassen

[…]

Hallo @geldhuegel ,

bitte teste mal folgenden CSS-Code:

Zeile 30 und 31:
Breite der Sidebar -> 300px.

Zeile 38:

margin-left: -296px + Breite = 4 Pixel = Abstand zum linken Rand, ab dem die Sidebar ausfährt.

Zeile 39:

Verzögerung, ab der die Sidebar wieder verschwindet: 'linear 4s' = 4 Sekunden.

'opacity' sollte immer 50% höher liegen, also hier: 'opacity 6s' = 6 Sekunden.

(Quelltext, 59 Zeilen)

BrokenHeart

2. Dezember 2022 um 13:08

Foxen666

Vielen lieben Dank für den Hinweis!

Der Code aus dem Thread hat zwar nicht funktioniert, aber ich hab es damit geschafft an meinem rumzupfuschen. Der sieht jetzt so aus und macht wieder das, was er soll:

CSS

/* Sidebar per Maushover einblenden (https://www.windowspower.de/firefox-83-sidebar-per-hover-oeffnen/) width:15px (ändert den reagierenden Bereich)*/


@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {

#menu_bookmarksSidebar {
display: -moz-box !important;
}

#bookmarks-view-children {
margin-top: -120px !important;
margin-left: -15px !important;
}

.sidebar-placesTreechildren::-moz-tree-separator {
margin: 0px 500px !important;
}

/* width:15px = Bereite des Bereichs am linken Rand, der das Ausklappen auslöst
transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important; = Dauer der Einblendung hier einstellen*/

#sidebar-box {
display: flex !important;
position: absolute !important;
top: 188px;
bottom: -35px;
width: 350px !important;
min-width: 350px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
margin-left: -340px !important;
transition: width .2s ease-out 0.2s, opacity .2s ease-out 0.2s !important;
z-index: 100 !important;
}

/*width = Breite der Leiste */
#sidebar-box:hover {
z-index: 100 !important;
margin-left: -120px !important;
opacity: 1 !important;

}

#sidebar {
display: flex !important;
position: absolute!important;
width: 100% !important;
height: 95%;



#sidebar-splitter {
display: none !important;
}

#sidebar {
display: block !important;
width: 100% !important;
height: 92%;
}
}

Alles anzeigen

2002Andreas

Zitat von Foxen666

macht wieder das, was er soll: