Sidebar Hover Code anpassen

Boersenfeger

Moin, komme aus dem Urlaub zurück und zack, schon hat sich im Nightly irgendwas verdreht. Auch andere CSS wirken anders... aber Stück für Stück...

Ich nutze diesen Code zum Hovern der Sidebar bei Annäherung an den linken Rand:

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: -moz-box !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: 111px;
bottom: 27px !important;
width: 0px !important;
overflow-x: hidden !important;
appearance: none !important;
z-index: 2 !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}


#sidebar-box:hover {
width: 255px !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;
}


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

Wie kann ich den Code anpassen, das er erst bei Annäherung von ca 3 cm an den Seitenrand anspringt. Jetzt macht er das schon bei ca 9 cm und damit verdeckt er auf Webseiten manche Links, die dann nicht mehr erreicht werden.

Vielen Dank einstweilen....

2002Andreas

Zitat von Boersenfeger

Wie kann ich den Code anpassen

Hallo Boersenfeger ..

hier ist das auch so.

Ich bin mir nicht sicher, ob es evtl. auch mit diesem Problem etwas zu tun haben könnte.

(das wurde mit dem aktuellen Update behoben für die beiden Popups)

Beitrag

RE: Entwicklung Firefox

Hallo @ all.

Seit einigen Updates vom Nightly passt die Breite der Fenster nicht mehr.

So sieht das aus:

Kann das jemand bestätigen?

Vielen Dank für jegliche Antwort.

2002Andreas

4. Oktober 2022 um 13:31

Evtl. kann uns Sören ja etwas dazu sagen.

Sören Hentzschel

Zitat von 2002Andreas

Ich bin mir nicht sicher, ob es evtl. auch mit diesem Problem etwas zu tun haben könnte.

Ausgehend von den Ursachen für diese zwei Probleme halte ich das für sehr unwahrscheinlich. Ich könnte mir eher vorstellen, dass das etwas mit der Umstellung von der XUL-Flexbox auf die CSS-Flexbox zu tun hat. Was Aufschluss geben würde, wäre ein Test mit mozregression (dort kann auch ein Firefox-Profil ausgewählt werden, so dass die Anpassungen theoretisch geladen werden sollten).

2002Andreas

Zitat von Boersenfeger

Wie kann ich den Code anpassen

Teste bitte mal:

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: -moz-box !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: 111px;
bottom: 27px !important;
width: 0px !important;
overflow: hidden !important;
appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}


#sidebar-box:hover {
z-index: 3 !important;
width: 255px !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;
}


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

Boersenfeger

Mit diesem Code klappt es jetzt prima, aber erst, nach dem ich das 2. gestrige Nightly Build installiert hatte. Dankeschön!

Nun mache ich in einem neuen Thread weiter

Thema

About Dialog CSS stellt nicht mehr alles dar

Moin, wie im Post Sidebar Hover Code anpassen

angekündigt, stelle ich hier meinen 2. Problemcode im aktuellen Nightly vor:

(Quelltext, 310 Zeilen)

Es fehlt der Build-Strang:

Wo hakt es denn hier und ist es bei den Verwendern des CSS genauso?

Lieben Dank!

Boersenfeger

6. Oktober 2022 um 13:36

geldhuegel

Ich möchte mich hier anschließen. Ich habe vor einiger Zeit folgendes css übernommen für die rechte Sidebar. Seit gestern geht sie auf wenn ich in den Bereich der Breite komme. Wo muss da eine Änderung vorgenommen werden?

CSS

/*Sidebar per hover ausfahren*/

@-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;
    }

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

#sidebar-box:hover {
    width: 350px !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%;
    }
}

Alles anzeigen

Oder ist es besser gleich das obige aus #4 zu nehmen?

2002Andreas

Zitat von geldhuegel

Wo muss da eine Änderung vorgenommen werden?

Teste bitte mal:

CSS

/*Sidebar per hover ausfahren*/

@-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;
    }

#sidebar-box {
    display: block !important;
    position: fixed!important;
    top: 125px;
    right: 0px;
    bottom: 0px;
    width: 0px !important;
    overflow-x: hidden !important;
    appearance: none !important;
    border: 1px 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: 350px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }
    
#appcontent {
  margin-right: 1px !important;
    }

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

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

Alles anzeigen

geldhuegel

Vielen Dank Andreas,

jetzt passt es wieder.

2002Andreas

Zitat von geldhuegel

jetzt passt es wieder.

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

testerer

Ich bräuchte bitte auch einmal Hilfe. Bei mir erscheint die Sidebar jetzt auch zu früh, wenn man mit der Maus darüber hovert. Hier mein Code:

CSS

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {
    
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
appearance: none!important;
background:#d1cdc8!important}

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

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

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

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

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

#sidebar-box:hover {
    width: 230px !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: 95%;
    }
}

Alles anzeigen

2002Andreas

Zitat von testerer

Ich bräuchte bitte auch einmal Hilfe.

CSS

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {
    
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
appearance: none!important;
background:#d1cdc8!important}

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

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

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

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

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

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

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

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

Alles anzeigen

testerer

Klappt leider nicht, es erscheint gar keine Sidebar mehr.

2002Andreas

Zitat von testerer

es erscheint gar keine Sidebar mehr.

Es gibt die für die rechte oder linke Seite.

Darum neuer Test rechte Seite:

CSS

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {
    
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
appearance: none!important;
background:#d1cdc8!important}

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

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

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

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

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

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

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

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

Alles anzeigen

Und so für die linke Seite:

CSS

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {
    
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
appearance: none!important;
background:#d1cdc8!important}

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

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

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

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

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

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

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

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

Alles anzeigen

testerer

Ich habe sie auf der linken Seite. Mit dem unteren Code geht es. Danke dir!

2002Andreas

Zitat von testerer

Mit dem unteren Code geht es. Danke dir!

Gerne doch

geldhuegel

Hallo, ich bin's noch mal.

Mein alter Code im Beitrag #6 hat nach dem wegziehen der Maus die Sidebar noch einige Sekunden offen gelassen. Mit dem neuen Code von andreas in # 7 schließt sie sich sofort. Ich kann dadurch keine Tabs mehr greifen und direkt in die Sidebar ziehen.

Eigentlich ist doch Zeile 31 für die Zeitverzögerung, oder nicht? Gibt es auch dafür eine Lösung?

Im Voraus schon ein Dankeschön.

Gabbo

Du könntest auch Deinen alten Code nehmen und in der #sidebar-box und in der #sidebar-box:hover

width mit min-width ersetzen;

(auch bei transition darauf achten)

Dann funktioniert alles wieder wie vor dem update ....

2002Andreas

Zitat von Gabbo

Dann funktioniert alles wieder wie vor dem update ....

Du meinst das so?

CSS

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

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

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

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

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

#sidebar-box {
    display: block !important;
    position: fixed !important;
    bottom: 0px;
    margin-bottom: 0px !important;
    min-width: 0px !important;/*geändert*/
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    opacity: 0 !important;
    transition: border .2s ease-out .2s, min-width/*geändert*/ .2s ease-out .2s, opacity .2s ease-out .2s !important; 
    z-index: 2 !important;
}
#sidebar-box:hover {
    min-width: 230px !important;/*geändert*/
    border: 1px solid var(--uc-color-border) !important;
    opacity: 1 !important;
    transition: border .15s ease-out .01s, min-width/*geändert*/ .15s ease-out .01s, opacity .15s ease-out .01s !important;
}

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

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

Alles anzeigen

Daten für deinen Code auch von hier:

Beitrag

RE: Hilfe bei Konfiguration der "userChrome.css"

Bei mir geht das mit der Änderung in der #sidebar-box:

min-width anstatt width...

(Quelltext, 21 Zeilen)

Gabbo

15. November 2022 um 22:22

Damit funktioniert hier kein hover für die Sidebar.

Gabbo

Mal auf die schnelle, bin gerade schon in Hut und Mantel.

Hier mein Code, leider mit Variablen:

CSS

#sidebar-close {
    display: none !important;
}
#sidebar-switcher-target {
    appearance: none;
    color: inherit;
    margin-inline-end: 4px;
    border-radius: var(--toolbarbutton-border-radius);
    border: 1px solid transparent;
    padding: 2px 0px !important;
}
#sidebar-switcher-target:hover {
    background-color: var(--uc-color-dd-over) !important;
}
#sidebar-header {
    padding: 8px;
    font-size: 1em !important;
    height: 3px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    width: 100% !important;
    border-bottom: 1px solid transparent !important;
    opacity: 0 !important;
    transition: height 2s ease-out 2s,opacity .1s ease-out 2s !important;
}
#sidebar-header:hover {
    height: 22px !important;
    border-bottom: 1px solid transparent !important;
    cursor: url("../css/image/cursor/32_cursor-mac-1_schwarz_orange.svg") 10 8, pointer !important;
    opacity: 1 !important;
    transition: height .3s ease-out .2s,opacity .3s ease-out .2s !important;
    background-color: var(--uc-color-dd-over) !important; 
}
#sidebar-search-container {
    display: none !important;
}
#sidebar-box {
    display: block !important;
    position: fixed !important;
    bottom: 0px;
    margin-bottom: 0px !important;
    min-width: 0px !important;/*geändert*/
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    opacity: 0 !important;
    transition: border .2s ease-out .2s, min-width/*geändert*/ .2s ease-out .2s, opacity .2s ease-out .2s !important; 
    z-index: 2 !important;
}
#sidebar-box:hover {
    min-width: 230px !important;/*geändert*/
    border: 1px solid var(--uc-color-border) !important;
    opacity: 1 !important;
    transition: border .15s ease-out .01s, min-width/*geändert*/ .15s ease-out .01s, opacity .15s ease-out .01s !important;
}
#sidebar-splitter {
    display: none !important;
}
#sidebar {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

Alles anzeigen

2002Andreas

Zitat von Gabbo

Hier mein Code

Mit dem Code passiert hier gar nichts.

Die Sidebar bleibt fest stehen.

Sidebar Hover Code anpassen

RE: Entwicklung Firefox

About Dialog CSS stellt nicht mehr alles dar

RE: Hilfe bei Konfiguration der "userChrome.css"

Ähnliche Themen

Sidebar Popup-Menü anpassen

Lesezeichenbutton anpassen

Sidebar - CloseButton

about:addons anpassen

about:logins anpassen

Addons Manager Code anpassen