Lesezeichen-Sidebar automatisch bei Vollbild (F11) ausblenden

Hallo alle.

Ich suche noch nach einer ganz besonderen Feinheit zum genannten Thema.

Die Automatik "Lesezeichen-Sidebar automatisch bei Vollbild (F11) ausblenden" habe ich schon mit wenig CSS eingerichtet, der Code dazu:

/* bei Vollbild (F11) Lesezeichensidebar automatisch ausblenden */
#main-window[sizemode="fullscreen"] #sidebar-box {
    width: 0px !important;
    min-width: 0px !important;
}

Nun würde ich aber gerne die Sidebar automatisch auch schon wieder einblenden, wenn ich im Vollbildmodus mit der Maus an den oberen Rand fahre und FF die Steuerelemente oben einblendet. Ich finde dazu aber keine Eigenschaft, die diesen Zustand zurückgibt. Gibt es die überhaupt?

Sollte dann "einfach" im Code so aussehen (nur als ein Beispiel)...

#main-window[sizemode="fullscreen"]:not([Leisteoben="eingeblendet"]) #sidebar-box

Falls es das gibt, ist es dann natürlich auch die Frage, ob die Sidebar sofort wieder verschwindet, wenn ich dahin mit der Maus gehe. Aber ein Schritt nach dem anderen... Vielen Dank schon mal dazu

Vielen Dank, Andreas.

Das funktioniert, wäre eine Variante, ist aber nicht ganz das, was ich suche...

Ich teste das erst mal in Ruhe, passe ggf. auch an.

Hallo Horstmann, vielen Dank , werde ich auch noch testen.

Zuerst hatte ich eben den Code von 2002Andreas getestet. Dazu eine kleine Verbesserung (Ausschnitt):

#main-window[sizemode="fullscreen"] #sidebar-header,
#main-window[sizemode="fullscreen"] #sidebar {
    background-color: inherit !important;
    border-right: 4px solid rgba(255, 0, 0, 0) !important;
    background-clip: padding-box !important;
    transition: min-width 300ms linear 200ms !important;
    min-width: 2px !important; 
}

Wenn opacity in rgba auf 0 steht, wird mit background-clip: padding-box !important; der rechte Rand vollständig transparent.

Zum Testen der Randbreite opacity auf 1 setzen, dann ist der Rand in "Rot" gut zu erkennen.

Soweit funktioniert das bei mir erstmal recht gut, ist vielleicht sogar besser als meine Idee, weil die Sidebar sofort mit "Maus an den linken Rand" verfügbar ist. Nur die Breite wird nicht so übernommen, wie im Normalbildmodus eingestellt, weil die eben zum Einblenden genutzt wird.

Horstmann Das funkt nicht - ist genau das Problem, was ich oben nannte. Geht man mit der Maus von den eingeblendeten Steuerelementen weg, ist es nicht mehr "hover" und die Sidebar ist wieder weg, bevor man da drauf ist...

Die Bedingung muss also so was wie "Steuerelemente oben sichtbar" sein.

Horstmann nee, das will einfach nicht. #navigator-toolbox-background:not(:hover) fuktioniert, aber sobald ich bei #browser #sidebar-box das :not(:hover) ergänze, wird die Sidebar gar nicht mehr ausgeblendet.

Da die Steuerelemente (das nenne ich so, es sind die URL- und die Tab-Leiste mit den Buttons; oder als ID die #navigator-toolbox) einfach dynamisch vom FF per margin-top: -62px nach oben "ausgeblendet" wird, gibt es dazu wohl keine Eigenschaft zur Auswertung.

Ich bleibe jetzt bei der Lösung von 2002Andreas , die funktioniert gut und auch sinnvoll.

"Probleme" sind zum einen die jetzt vorgegebene Breite der Sidebar in der Vollbildansicht (kann man verschmerzen) und die fehlende Begrenzung rechts. Da ist kein Rand mehr, weil der unsichtbar gemacht wurde. Bin noch ein wenig am probieren, ob man da eine Randlinie noch hinbekommt, weil bei identischen Hintergrundfarben eine optische Abgrenzung sinnvoll wäre.

Ja, aber ich muss doch den Wert händisch anpassen?

Ja, ein Missverständnis, ist mir klar. Ich meine damit, dass die Breite nicht mehr "automatisch" übernommen wird, wenn ich die Breite der Sidebar in der Normalansicht verändere. Ich muss dann zusätzlich händisch in den CSS-Code eingreifen.

Zitat von Horstmann

Das ist keine originale Firefox Funktion, oder doch?

Ist es. Wird dynamisch zur Laufzeit in FF so gesetzt, ich habe dazu keinen Code am Laufen.

Danke für Deinen weiteren Code - ähh - wenn man zwei (und mehr) Varianten testet, kommt man doch schnell durcheinander. Ich habe es oben nochmal korrigiert, es funktioniert, wie Du auch richtig angibst, mit

#main-window[sizemode="fullscreen"] #navigator-toolbox-background:not(:hover) ~ #browser #sidebar-box:not(:hover)

und nicht mit #navigator-toolbox:not(:hover) - allerdings gibt es dabei den unschönen Effekt, dass man mit der Maus eine gezielte Bewegung ausführen muss.

Das war ja von mir so nicht bedacht worden, weshalb die Lösung von 2002Andreas doch deutlich komfortabler ist.

Und ein zweiter Effekt, der hinzukommt: das Einblenden überlagert die dargestellte Internetseite, die Darstellung wird nicht nach rechts verschoben, weil die Eingeblendete Sidebar keine Platz beansprucht. Dadurch ist mehr "Ruhe" in der Darstellung beim Einblender der Sidebar

Zitat von 2002Andreas

Kannst du auch ändern:

Das funktioniert bei Dir? Bei mir nicht. Die Breite 1px ist zu schmal, dadurch gibt es keinen hover-Effekt mehr.

Bei mir mit dem originalen Code von Dir sind mindestens 5px nötig, also etwas breiter als das margin-left: -4.5 px der #sidebar-box.

Zitat von Horstmann

danach hattest du aber ausdrücklich nicht gefragt.

Stimmt absolut, aber andere haben doch auch gute Ideen, die ich doch gerne annehme! Trotzdem auch Danke für Deine Bemühungen, so lernt man auch dazu.

Wenn ihr Spaß am Testen habt, probiert mal diesen Code aus. Er basiert auf 2002Andreas Vorschlag oben.

Zum Testen habe ich die Farben des rechten Rands und die Zeiten für Ein- / Ausblenden so eingestellt.

Dann sieht man, was hier dynamisch verändert wird.

#main-window[sizemode="fullscreen"] #sidebar-box {
    margin-left: -2px !important;
    position: relative;
    min-width: 2px !important;
    max-width: 2px !important;
    z-index: 1;
}
#main-window[sizemode="fullscreen"] #sidebar-header {
    overflow: hidden;
    padding: 4px 0px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-header,
#main-window[sizemode="fullscreen"] #sidebar {
    background-color: inherit !important;
    border-right: 4px solid rgba(255, 0, 0, 1) !important;
    background-clip: padding-box !important;
    transition: border-right 1900ms linear 200ms, min-width 2s linear 100ms;
    min-width: 2px !important; 
    padding-left: 2px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-box:hover > #sidebar-header,
#main-window[sizemode="fullscreen"] #sidebar-box:hover > #sidebar {
    border-right: 1px solid gray !important;
    min-width: 280px !important;
    transition-delay: 200ms, 100ms !important;
}

Interessant wird das, wenn man in border-right: 4px solid rgba(255, 0, 0, 1) !important;

die Opacity von "1" auf "0" stellt In Verbindung mit dem background-clip: padding-box !important; "verschwindet" dann der rechte Rand vollständig, steht aber für hover noch zur Verfügung.