- Firefox-Version
- 140 esr
- Betriebssystem
- win10
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));
}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));
}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!
