Seit heute funktioniert dieses Sidebar via Hover einblenden nicht mehr

Boersenfeger

Moin, siehe Betreff:

CSS

/* Sidebar via Hover hervorrufen und andere Sidebar-Einstellungen */


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


#menu_bookmarksSidebar {
display: flex !important;
}


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


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


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


label[persist="value"][flex="1"][crop="end"][control="sidebar"][value="Lesezeichen"] {
display: none !important;
}


#sidebar-box {
display: block !important;
position: fixed !important;
top: 108px;
bottom: 27px !important;
width: 0px !important;
overflow-x: hidden !important;
appearance: none !important;
border: 0px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important;
}


#sidebar-box:hover {
z-index: 3 !important;
width: 300px !important;
opacity: 1 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#appcontent {
margin-left: 2px !important;
}

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

#sidebar {
display: block !important;
width: 100% !important;
height: 100% !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 */


.textbox-search-sign{
display:none !important;
}
textbox input.textbox-input::-moz-placeholder,
#search-container input.textbox-input::-moz-placeholder,
#urlbar input.textbox-input::-moz-placeholder {
color: transparent !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

Wenn der o.a. Code aktiv ist, kann ich im aktuellen Nightly 132 die Sidebar gar nicht anzeigen lassen, weder über das Lesezeichenmenü noch mit STRG+B und via Hover sowieso nicht. Was muss geändert werden bzw geht der Code grundsätzlich nicht mehr? Ich erinnere mich an Aussagen, dass die Sidebar grundlegend überarbeitet wird.

Schalte ich den Code still, funktionieren der Aufruf via Menü und auch mit STRG+B.

2002Andreas

Zitat von Boersenfeger

siehe Betreff:

Mit diesem Code keine Probleme hier:

CSS

/*Sidebar per hover*/

#menu_bookmarksSidebar {
  display: flex !important;
}

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

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

#sidebar-search-container {
  display: none !important;
}

#sidebar-box {
  margin-left: -4.5px !important;
  position: relative;
  min-width: 3px !important;
  max-width: 3px !important;
  z-index: 1;
}

#sidebar-splitter { 
  display: none;
}

#sidebar-header {
  overflow: hidden;
  padding: 0 !important;
}

#sidebar-header,
#sidebar {
  background-color: inherit !important;
  border-right: 5px solid transparent !important;
  transition: min-width 300ms linear .2s !important;
  min-width: 3px !important; 
}

#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
  min-width: 230px !important;
  transition-delay: 100ms !important;
}

Alles anzeigen

Kannst du dir ja für dich wieder genauer anpassen.

Oder teste mal deinen geänderten Code:

CSS

/* Sidebar via Hover hervorrufen und andere Sidebar-Einstellungen */

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

#menu_bookmarksSidebar {
display: flex !important;
}


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


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


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


label[persist="value"][flex="1"][crop="end"][control="sidebar"][value="Lesezeichen"] {
display: none !important;
}


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


#sidebar-box:hover {

width: 300px !important;
opacity: 1 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#tabbrowser-tabbox {
margin-left: 2px !important;
}

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

#sidebar {
display: block !important;
width: 100% !important;
height: 100% !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 */


.textbox-search-sign{
display:none !important;}

textbox input.textbox-input::-moz-placeholder,
#search-container input.textbox-input::-moz-placeholder,
#urlbar input.textbox-input::-moz-placeholder {
color: transparent !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

Zeile 43 ist neu.

Und der Hinweis aus Beitrag Nr. 6 ist eingefügt.

2002Andreas

Und wie so oft bei dir

Die eine Klammer gehört da nicht hin:

oder die letzte nicht:

In dem angepassten Code von dir, habe ich die in Zeile 69 schon entfernt gehabt.

Sören Hentzschel

Nicht, dass das margin-left: 2px viel ausmachen dürfte, aber #appcontent gibt es seit heute nicht mehr.

Endor

Zitat von Sören Hentzschel

#appcontent gibt es seit heute nicht mehr.

Womit müsste man das dann ersetzen?
Ich habe hier in einem Script folgendes:

Code

if (this._FLOATING_SIDEBAR) {
      let x = document.getElementById("appcontent").getBoundingClientRect().x;
      this._sidebar_box.style.setProperty("left", x + "px", "");
      this._sidebar.style.setProperty("left", x - 1  + "px", "");
    }

Code

if (ucjs_expand_sidebar._FLOATING_SIDEBAR) {
          let x = document.getElementById("appcontent").getBoundingClientRect().x;
          ucjs_expand_sidebar._sidebar_box.style.setProperty("left", x + "px", "");
        }

Da müsste man das dann wohl auch ändern.
Mfg.
Endor

Sören Hentzschel

Mit tabbrowser-tabbox musst du das ersetzen.

Endor

Hallo Sören Hentzschel
Vielen Dank.
Mfg.
Endor

milupo

Endor Schaue mal hier:

mozilla-central @ 9e4551c785d7

Bug 1916098 - Remove appcontent box. r=dao,desktop-theme-reviewers,devtools-reviewers,tabbrowser-reviewers,nchevobbe

hg.mozilla.org

2002Andreas

Zitat von Sören Hentzschel

gibt es seit heute nicht mehr.

Hallo Sören.

Danke für den Hinweis.

Ich habe das in dem von mir angepassten Code von Boersenfeger geändert.

Boersenfeger

2002Andreas vielen Dank, damit funktioniert es fast wieder so wie gewohnt.

Die Zeilen 55-57 habe ich gelöscht, der klitzekleine weiße Rand zwischen der Sidebar-Box und dem Seitenrand, der mich auch vorher schon gestört hatte, ist damit verschwunden.

Allerdings bleibt die Sidebar noch geschätzte 4 Sekunden offen, wenn ich mit der Maus vom Seitenrand wieder weggehe. Das würde ich gerne wieder so ändern, dass sie verschwindet, sobald ich den definierten Bereich verlasse.

Auch allen anderen danke ich für die Kommentare. Meine anderen Codes werde ich nach

Code

#appcontent

durchsuchen und ggf. ändern.

2002Andreas

Zitat von Boersenfeger

dass sie verschwindet, sobald ich den definierten Bereich verlasse.

Entfern bitte mal Zeile 44 kompl.

und dann testen.

milupo

Zitat von Boersenfeger

Die Zeilen 55-57 habe ich gelöscht

Auf welche Codeversion bezieht sich das nun? Auf die aus dem Eingangsbeitrag? Dann bleibt eine isolierte schließende geschweifte Klammer aus Zeile 58 übrig, was natürlich ein Fehler ist.

Sören Hentzschel

Ziemlich sicher bezieht sich das auf den Code von Andreas in Beitrag #2.

Zitat von 2002Andreas

Entfern bitte mal Zeile 44 kompl.

Oder zumindest für beide transitions den zweiten Zeitwert, also jeweils die 3.2s, denn das ist die Verzögerung, mit welcher der Übergang startet. Eine transition zu haben, ist grundsätzlich ja schon immer schön, damit der Übergang fließend ist.

Boersenfeger

Danke 2002Andreas ,damit ists wieder so wie vormals.

milupo für dich nochmal der jetzige Komplett-Code. ich bezog mich natürlich auf den Code von Andreas aus #2, denn der hatte ja diese Änderung nach Sörens Hinweis eingebracht.

CSS

/* Sidebar via Hover hervorrufen und andere Sidebar-Einstellungen */

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

#menu_bookmarksSidebar {
display: flex !important;
}


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


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


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


label[persist="value"][flex="1"][crop="end"][control="sidebar"][value="Lesezeichen"] {
display: none !important;
}


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


#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: 100% !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 */


.textbox-search-sign{
display:none !important;}

textbox input.textbox-input::-moz-placeholder,
#search-container input.textbox-input::-moz-placeholder,
#urlbar input.textbox-input::-moz-placeholder {
color: transparent !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

2002Andreas

Zitat von Boersenfeger

damit ists wieder so wie vormals.

gerne doch

Boersenfeger

Ich habe nun noch diese Zeile 44 eingefügt,

CSS

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

jetzt schleicht sich die Sidebar annehmbar davon. Danke Sören Hentzschel für diesen Hinweis!

Oben bereits eingefügt.

milupo

Zitat von Boersenfeger

ich bezog mich natürlich auf den Code von Andreas aus #3, denn der hatte ja diese Änderung nach Sörens Hinweis eingebracht.

OK, aber, wenn sich immer wieder Änderungen ergeben und keiner mehr so richtig weiß, worauf sich diese beziehen, ist es schon gut, den kompletten Code immer mal wieder anzugeben. Die Zeilennummern 55-57 bezogen sich ja auch auf deinen Originalcode. Außerdem wäre es nicht das erste Mal, dass du Klammern stehen lässt oder weglässt.

Boersenfeger

Nein das ist mal definitiv falsch... Es bezog sich auf den Code den Andreas gepostet hat. Und nun lass mal gut sein..

milupo

Ich schreibe hier mit, um dir zu helfen und nicht um dich zu ärgern. Aber nun gut. War ein Fehler dir helfen zu wollen.

Boersenfeger

...muss doch nochmal eine Frage hinterherschieben.

Wenn ich mich mit der Maus dem linken Seitenrand nähere, öffnet die Sidebar bereits, wenn ich ca. 7 cm vom Rand entfernt bin. Da sich auf manchen Webseiten die Einlog-Felder ungefähr dort befinden, wäre es praktischer, die Sidebar öffnete sich erst, wenn der Mauszeiger 2 cm vom Seitenrand entfernt ist. Wo im Code aus #14 kann man dies ggf. ändern?

Seit heute funktioniert dieses Sidebar via Hover einblenden nicht mehr

Ähnliche Themen

Lesezeichen-Sidebar automatisch bei Vollbild (F11) ausblenden

Add-on Leisten Skript für Fx 119 anpassen - Hinweis