Sidebar mit Lesezeichen bei Vollbild automatisch ausblenden und bei hover am linken Rand einblenden

Thomas S.

Hallo, ich benötige wieder Hilfe.

Die Umstellung auf FF140 esr hat soweit geklappt (css & js), aber zwei Dinge funktionieren nicht mehr und ich komme nicht weiter.

Das erste, mir relativ wichtige: siehe Titel.

Hier das "alte" CSS, das bisher (FF128 esr und auch schon davor) funktionierte:

CSS

/* Do not remove this line -- it's required for correct functioning */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {}

/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

:root {

/* Sidebar im Vollbildmodus automatisch ausblenden und bei "hover" am linken Rand einblenden */

    --SidebarBorderColor: #E3E3E3; /* Sidebar Border-Farbe */
    --SidebarWidth: 280px; /* Sidebar-Breite */
    --SidebarTrD: 100ms; /* Verzögerung hover */
    --SidebarTrT: 300ms; /* Aus- / Einblendezeit Sidebar */
    --SidebarBoTrD: 20ms; /* zusätzliche Verzögerung Border (nur beim Einblenden, verhindert "Zittern") */
    --SidebarBoTrT: 10ms; /* Überblendezeit Border */

}


/* ################################################################## */
/* ++ bei Vollbild (F11) Lesezeichensidebar automatisch ausblenden ++ */
/* ############################# ANFANG ############################# */

/* Verstecken */
#main-window[sizemode="fullscreen"] #sidebar-box {
    margin-left: -2px !important;
    position: relative !important;
    min-width: 2px !important;
    max-width: 4px !important;        /* zum Test 4, normal 2 */
    z-index: 1 !important;
}
#main-window[sizemode="fullscreen"] #sidebar-header {
    overflow: hidden;
    padding: 4px 0px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-switcher-target {
    margin-left: 6px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-close {
    margin-right: 6px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-splitter {
    order: unset !important;
    display: none !important;
}

/* dynamisch Ausblenden */
/* der rechte Rand ist mit "rgb-opacity" = 0 und "background-clip: padding-box" nicht sichtbar, aber für "hover" mit 6px Breite verfügbar
der rechte Rand ist mit "rgb-opacity" = 1 als rote Linie zum Testen sichtbar
border-bottom ist zusätzlich notwendig, weil sonst immer eine kurze, aber sichtbare 1px-Linie bleibt
die Üerblendzeiten sind aufeinander abgestimmt */
#main-window[sizemode="fullscreen"] #sidebar-header,
#main-window[sizemode="fullscreen"] #sidebar {
    background-color: inherit !important;
    border-right: 6px solid rgba(255, 0, 0, 1) !important; /* rote Linie sichtbar, bei opacity 0 nicht */
    border-bottom: 1px solid rgba(255, 0, 0, 0) !important;
    background-clip: padding-box !important;
    /* Parameter: Style-Element, Überblendezeit, Überblendenart, Verzögerung zum Start des Ausblendens */
    transition: min-width var(--SidebarTrT) ease-out var(--SidebarTrD),
        border-right var(--SidebarBoTrT) ease-out calc(var(--SidebarTrD) + var(--SidebarTrT) - var(--SidebarBoTrT)),
        border-bottom var(--SidebarBoTrT) ease-out calc(var(--SidebarTrD) + var(--SidebarTrT) - var(--SidebarBoTrT));
    min-width: 2px !important;
    padding-left: 2px !important;
}

/* dynamisch Einblenden bei hover */
#main-window[sizemode="fullscreen"] #sidebar-box:hover > #sidebar-header,
#main-window[sizemode="fullscreen"] #sidebar-box:hover > #sidebar {
    border-right: 1px solid var(--SidebarBorderColor) !important;
    border-bottom: 1px solid var(--SidebarBorderColor) !important;
    min-width: var(--SidebarWidth) !important;
    /* Parameter: Verzögerungen zum Start des Einblendens: min-width, border-right, border-bottom */
    transition-delay: var(--SidebarTrD), calc(var(--SidebarTrD) + var(--SidebarBoTrD)), calc(var(--SidebarTrD) + var(--SidebarBoTrD));
}

Alles anzeigen

Das Problem ist, das sich jetzt bei hover am linken Rand nichts mehr rührt, die #sidebar wird nicht mehr eingeblendet. Ähm, das ist nicht ganz richtig, man sieht oben, dass sich der #sidebar-header "reinschiebt", aber eben nur am Rand, weil die #sidebar fehlt...

Wenn ich das CSS so ändere, dass statt #sidebar die #sidebar-box angesprochen wird, funktioniert es zwar, aber der wesentliche Vorteil zum alten CSS geht verloren: die #sidebar-box schiebt den Seiteninhalt zusammen, legt sich nicht als Overlay darüber.

CSS

/* Do not remove this line -- it's required for correct functioning */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {}

/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

:root {

/* Sidebar im Vollbildmodus automatisch ausblenden und bei "hover" am linken Rand einblenden */

    --SidebarBorderColor: #E3E3E3; /* Sidebar Border-Farbe */
    --SidebarWidth: 280px; /* Sidebar-Breite */
    --SidebarTrD: 100ms; /* Verzögerung hover */
    --SidebarTrT: 300ms; /* Aus- / Einblendezeit Sidebar */
    --SidebarBoTrD: 20ms; /* zusätzliche Verzögerung Border (nur beim Einblenden, verhindert "Zittern") */
    --SidebarBoTrT: 10ms; /* Überblendezeit Border */

}


/* ################################################################## */
/* ++ bei Vollbild (F11) Lesezeichensidebar automatisch ausblenden ++ */
/* ############################# ANFANG ############################# */

/* Verstecken */
#main-window[sizemode="fullscreen"] #sidebar-box {
    margin-left: -2px !important;
    position: relative;
    min-width: 12px !important;        /* besser sichtbar - war 2 ##################*/
    max-width: 12px !important;        /* besser sichtbar - war 2 ##################*/
    z-index: 1;
}
#main-window[sizemode="fullscreen"] #sidebar-header {
    overflow: hidden;
    padding: 4px 0px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-switcher-target {
    margin-left: 6px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-close {
    margin-right: 6px !important;
}
#main-window[sizemode="fullscreen"] #sidebar-splitter {
    order: unset !important;
    display: none !important;
}

/* Ausblenden */
/* der rechte Rand ist mit "rgb-opacity" = 0 und "background-clip: padding-box" nicht sichtbar, aber für "hover" mit 6px Breite verfügbar
der rechte Rand ist mit "rgb-opacity" = 1 als rote Linie zum Testen sichtbar
border-bottom ist zusätzlich notwendig, weil sonst immer eine kurze, aber sichtbare 1px-Linie bleibt
die Üerblendzeiten sind aufeinander abgestimmt */
#main-window[sizemode="fullscreen"] #sidebar-box,
#main-window[sizemode="fullscreen"] #sidebar-header {
    background-color: inherit !important;
    border-right: 6px solid rgba(255, 0, 0, 1) !important; /* als rote Linie sichtbar - opacity war 0)   ##################*/
    border-bottom: 1px solid rgba(255, 0, 0, 0) !important;
    background-clip: padding-box !important;
    /* Parameter: Style-Element, Überblendezeit, Überblendenart, Verzögerung zum Start des Ausblendens */
    transition: min-width var(--SidebarTrT) ease-out var(--SidebarTrD),
        border-right var(--SidebarBoTrT) ease-out calc(var(--SidebarTrD) + var(--SidebarTrT) - var(--SidebarBoTrT)),
        border-bottom var(--SidebarBoTrT) ease-out calc(var(--SidebarTrD) + var(--SidebarTrT) - var(--SidebarBoTrT));
    min-width: 2px !important;
    padding-left: 2px !important;
}

/* Einblenden bei hover */
#main-window[sizemode="fullscreen"] #sidebar-box:hover,
#main-window[sizemode="fullscreen"] #sidebar-box:hover > #sidebar-header{
    border-right: 1px solid var(--SidebarBorderColor) !important;
    border-bottom: 1px solid var(--SidebarBorderColor) !important;
    min-width: var(--SidebarWidth) !important;
    /* Parameter: Verzögerungen zum Start des Einblendens: min-width, border-right, border-bottom */
    transition-delay: var(--SidebarTrD), calc(var(--SidebarTrD) + var(--SidebarBoTrD)), calc(var(--SidebarTrD) + var(--SidebarBoTrD));
}

Alles anzeigen

Die Frage ist also: wie bekommt man die "alte" Funktionalität mit einer überlagerten #sidebar wieder zurück?

Gibt es eine Möglichkeit, die #sidebar-box über den Seiteninhalt zu legen? Das wäre eine Lösung.

Oder warum kommt die #sidebar nicht mehr zum Vorschein? Geht da was zu ändern?

Ich bin da überfragt...

Vielen Dank schon mal im Voraus!

Boersenfeger

Moin, ich nutze für das Einblenden via Hover der Sidebar folgenden CSS:

CSS

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

				   
#sidebar-main > sidebar-main {
    display: none !important;
}

#sidebar-box {
    display: flex !important;
    position: absolute !important;
    top: 0;
    bottom: 1px;
    width: 260px !important;
    z-index: 100 !important;
    opacity: 0 !important;
    margin-left: -255px !important;
    transition: margin-left .5s linear .4s, opacity .6s ease-in .2s !important;
}

#sidebar-box:hover {
    z-index: 100 !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    transition: margin-left .66s !important;
}

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

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

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

/* Beschriftungsende anpassen */
treechildren::-moz-tree-cell,
treechildren::-moz-tree-cell-text {
    margin-inline-end: -8px !important;
}

/* Lesezeichensidebar Icon-Abstand zur linken Seite */
.sidebar-placesTreechildren[view="bookmarks-view"] {
    margin-left: -10px !important;
}

/* Lesezeichensidebar Icon-Abstand */
#bookmarks-view-children:-moz-tree-image {
    margin-right: 5px !important;
}

/* Suchsymbol in der Sidebar ausblenden */

#input[type="search"] {
  padding-inline-start: var(--space-medium) !important;
  background-image: none !important;
}

/* Suchleiste Schrift-Größe einstellen */
.sidebar-placesTreechildren,
sidebarheader,
#sidebar-search-label,
#search-box {
    font-size: 16px !important;
    font-family: Comic Sans MS, sans-serif !important;
}

/* Sidebar Hintergrundfarbe */
#sidebar {
    background: #c1e7bb !important;
    opacity: 1 !important;
}

/* Lesezeichen-Sidebar Suchfeld und auch Haupt-Suchfeld ohne Eintrag */
::placeholder {
    color: transparent !important;
}

/* Lesezeichen Sidebar öffnende Dreiecke entfernen */
#bookmarksPanel treechildren::-moz-tree-twisty(closed),
#bookmarksPanel treechildren::-moz-tree-twisty(open) {
    height: 0!important;
    width: 0!important;
    display: none!important;
}

/* Lesezeichen verwalten */
treechildren::-moz-tree-image(container) {
    list-style-image: url('data:image/gif;base64,R0lGODlhEAAQAOZMAP/////MAF06AJhlAJNgAP//AP/lAP/UAJViAP/JANShAJRhAP/OAJRgAOy5AMaSAP/nAMyZAP/IAP/NAOazAP/RAMmVALaAAH5TAJNfAM2aAP/dT//XOv/KAOPOkMeRAP/nhOSxAOu4AP3KAOrTkv/nrv//1c6bAKdyAP/TAP/bPdWsMr6LA7iCALqGALiEAJNeAMCMAP/gcv/eYdGdAP/TEP/mgv/2y//gg/3JAP/ila97AP/aKsWPAJFbAJZgALeBAMiVAPC9AP/rOum2AHlQAP/4zP//z//jPpNdAP/LANixNP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEwALAAAAAAQABAAAAefgEyCg4SFhoeFDQ0LjIiCCyU5IwEBBAiXCAOEBDohFBREIg6jQgibODQKqgonDz0fPkkwDQMEMhYRERpBMUsAv8C1Mw8uLUAXKwA2EgkJDJoEGy8swAAgCZQMz0wEKigkN8wJHZQBFZrcPDsAHErllBMT6AQ1HkYVKQf6++hMGUgAhhgYSBAChH4/TBwpwLAhw35MMAiYSLFiEUcYmQQCADs=') !important;
}

/* Zeilenhöhe reduzieren */
.sidebar-placesTree treechildren::-moz-tree-row,
.placesTree treechildren::-moz-tree-row {
    min-height: 20px !important;
}

/* Ordner aus der Sidebar ausblenden */
.sidebar-placesTreechildren[view="bookmarks-view"] {

    margin-top: -10px!important;
}

/* Fokusring um Ordner entfernen */
treechildren {
    --default-focusring: 0px !important;
}
}

Alles anzeigen

Ich nutze Notepad++ für die Bearbeitung der Codes. Damit kannst du ab Zeile 41 zunächst mal meine weiteren Anpassungen auskommentieren.

Damit funktioniert auch im Vollbild via Hover die Einblendung der Sidebar. Allerdings muss die Maus dann in der Sidebar bleiben, sonst verschwindet sie wieder.

Thomas S.

Danke!

Ich werde mir das mal genauer ansehen, da sind ein paar gute Anregungen drinnen.

Dauert aber noch eine Weile, habe derzeit nicht wirklich Zeit dazu,,,

Boersenfeger

Wenn du was gebrauchen kannst, sollte es mich freuen! Lass dir die Zeit... es sind ja letztlich nur Spielereien

Sidebar mit Lesezeichen bei Vollbild automatisch ausblenden und bei hover am linken Rand einblenden

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Abstände zwischen einzelnen Lesezeichen im Menü

Mein Sidebar Script funktioniert seit einiger Zeit nicht mehr. Was muss angepasst werden? Gibt es bessere Alternativen?

Seit heute funktioniert die Sidebar via Hover einblenden mit einem CSS-Code bei Nightly 136 nicht mehr

Problem mit Darstellung Lesezeichen Symbolleiste