Bookmark-Button und Bezeichnung

simplicissimus

Hallo,

ich bin vom 102esr-Zweig auf die aktuelle esr-Version 115.2 umgestiegen.

Nur ein kleines Problem mit der userChrome.css habe ich leider noch.

Wie man auf dem Dateianhang unten sieht, wird beim "Hover" und "Klicken" leider nur der Bookmark-Button dunkelgrau eingefärbt, das Wort "Lesezeichen" bleibt unverändert / unmarkiert.

CSS

/* Bookmark - Show default button label */
#PersonalToolbar #bookmarks-menu-button .toolbarbutton-text {
    display: block !important;
}

/* Bookmark - Create Fx56-like button label for supported locales */
#PersonalToolbar #bookmarks-menu-button:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"],[label="Menu des marque-pages"],[label="Menú de marcadores"],[label="Menu de marcadores"],[label="Menu segnalibri"],[label="Меню закладок"]) .toolbarbutton-text {
    display: none !important;
}
#PersonalToolbar #bookmarks-menu-button:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"],[label="Menu des marque-pages"],[label="Menú de marcadores"],[label="Menu de marcadores"],[label="Menu segnalibri"],[label="Меню закладок"])::after {
    visibility: visible !important;
    display: block !important;
}

/* Bookmark - German: 'Lesezeichen' */
#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"]::after {
    content: "Lesezeichen" !important;
    padding-top: 4px;
}
#PersonalToolbar  #bookmarks-menu-button[label="Lesezeichen-Menü"] #BMB_bookmarksPopup {
    -moz-margin-end: -42px !important;
}

Alles anzeigen

Wie bekomme ich es hin, dass der "Button" gemeinsam mit dem Wort "Lesezeichen" beim "Hover" und "Klicken" markiert wird.

Ich bedanke mich für eure Mühe und Hilfe.

.DeJaVu

Das liegt an deinem CSS. Bitte das genutzte CSS komplett hier einfügen.

simplicissimus

Vielen Dank für Deinen Hinweis.

Ich habe im ersten Beitrag den CSS-Code vervollständigt.

Horstmann

Zitat von simplicissimus

Wie man auf dem Dateianhang unten sieht, wird beim "Hover" und "Klicken" leider nur der Bookmark-Button dunkelgrau eingefärbt, das Wort "Lesezeichen" bleibt unverändert / unmarkiert.

Wie bekomme ich es hin, dass der "Button" gemeinsam mit dem Wort "Lesezeichen" beim "Hover" und "Klicken" markiert wird.

Ist ein ziemliches Gehacke, und selber würde ich den ganzen CC Code rauswerfen und neu machen, aber teste vielleicht mal das hier, zusätzlich zu deinem Code:

CSS

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"] image {
    border-radius: var(--toolbarbutton-border-radius) 0px 0px var(--toolbarbutton-border-radius) !important;
}

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"]::after {
    border-radius: 0px var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0px;
    padding-right: var(--toolbarbutton-inner-padding);
}

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"]:hover::after {
    background-color: var(--button-hover-bgcolor) !important;
}

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"][open]::after {
    background-color: var(--button-active-bgcolor) !important;
}

Alles anzeigen

2002Andreas

Zitat von simplicissimus

das Wort "Lesezeichen" bleibt unverändert / unmarkiert.

Teste bitte mal:

CSS

/* Bookmark - Show default button label */
#PersonalToolbar #bookmarks-menu-button .toolbarbutton-text {
    display: block !important;
}

/* Bookmark - Create Fx56-like button label for supported locales */
#PersonalToolbar #bookmarks-menu-button:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"],[label="Menu des marque-pages"],[label="Menú de marcadores"],[label="Menu de marcadores"],[label="Menu segnalibri"],[label="Меню закладок"]) .toolbarbutton-text {
    display: none !important;
}

#PersonalToolbar #bookmarks-menu-button:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"],[label="Menu des marque-pages"],[label="Menú de marcadores"],[label="Menu de marcadores"],[label="Menu segnalibri"],[label="Меню закладок"])::after {
    visibility: visible !important;
    display: block !important;
}

#bookmarks-menu-button > image {
  background: none !important;
}

#bookmarks-menu-button:hover {
  background-color: rgba(207,207,216,.66) !important;
  border-radius: 5px !important;
}

/* Bookmark - German: 'Lesezeichen' */
#bookmarks-menu-button::after {
    content: "Lesezeichen" !important;
    padding-top: 4px;
 }

#PersonalToolbar  #bookmarks-menu-button[label="Lesezeichen-Menü"] #BMB_bookmarksPopup {
    -moz-margin-end: -42px !important;
}

Alles anzeigen

Horstmann

Zitat von 2002Andreas

Damit wird der Button halt zu groß/hoch; das ganze Ding sollte neu aufgebaut werden.

milupo

2002Andreas :-moz-any sollte durch :is ersetzt werden. Funktioniert denn :-moz-any überhaupt noch?

Dharkness

Zitat von milupo

Funktioniert denn :-moz-any überhaupt noch?

Ja.

Horstmann

Zitat von simplicissimus

Wie bekomme ich es hin, dass der "Button" gemeinsam mit dem Wort "Lesezeichen" beim "Hover" und "Klicken" markiert wird.

Oder vielleicht den gesamten Code damit ersetzen?

CSS

/*   BMB button in box  */

#bookmarks-menu-button::after {
    content: "Lesezeichen";
    display: flex !important;
    align-items: center !important;
    padding-right: 6px !important;
}

#bookmarks-menu-button {
    margin: var(--toolbarbutton-inner-padding) !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
}

#bookmarks-menu-button .toolbarbutton-icon {
    background-color: transparent !important;
}

#bookmarks-menu-button:hover {
    background-color: var(--button-hover-bgcolor) !important;
}

#bookmarks-menu-button[open] {
    background-color: var(--button-active-bgcolor) !important;
}

#BMB_bookmarksPopup {
    margin-inline: 0 -75px !important;
}

Alles anzeigen

simplicissimus

Ganz vielen lieben Dank an 2002Andreas und Horstmann für eure schnelle und hervorragende Hilfe!!!

Horstmann

Zitat von simplicissimus

und Horstmann für

Moment , das hier sollte besser sein; wieder als Ersatz für den gesamten alten Code:

CSS

/*   BMB button in box #3  */

#bookmarks-menu-button::after {
    content: "Lesezeichen";
    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
    display: flex;
    align-items: center;
    border-radius: var(--toolbarbutton-border-radius);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-right: var(--toolbarbutton-inner-padding);
}

#bookmarks-menu-button .toolbarbutton-icon {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#bookmarks-menu-button:hover::after {
    background-color: var(--button-hover-bgcolor) !important;
}

#bookmarks-menu-button:is([open], :active)::after {
    background-color: var(--button-active-bgcolor) !important;
}

#BMB_bookmarksPopup {
    margin-inline: 0 -75px !important;
}

Alles anzeigen

Mit dem margin für das Popup kannst du ja mal spielen.

simplicissimus

@ Horstmann

Noch einmal herzlichen Dank für Deine Mühe und Hilfe!

Jetzt sieht es perfekt aus.

Horstmann

Zitat von simplicissimus

Jetzt sieht es perfekt aus.

Prima!

Horstmann

Ich weiss man sollte keine alten Themen ausgraben , aber das hier fand ich generell ganz interessant.

Die meisten Buttons in Fx haben ja Text, der ist nur nicht sichtbar.

Dieser Text sitzt in einem ::before Element zu label, und - man kann ihn sich anpassen!

Diesen Text zu beutzen ist um einiges einfacher als ein neues Pseudoelement zu basteln, wie wir es hier gemacht hatten; weniger Code, und alle nötigen Maße, Farben etc. werden von Fx bereitgestellt.

Das Prinzip sollte bei den meisten Buttons funktionieren; der eine zusätzliche Aufwand ist für das Anpassen Fenster, da fällt mir gerade nichts eleganteres ein.

Wer Lust hat kann das hier mal testen; ich bin auf Fx115esr, würd mich interessieren ob das auch in 119+ klappt.

CSS

/* Text sichtbar machen / optional nach links vom Icon verschieben */
#bookmarks-menu-button  label.toolbarbutton-text {
    display: flex !important;
    /*order: -1 !important;*/
}

/* Text ändern */
#bookmarks-menu-button label.toolbarbutton-text::before {
    content: "Eigener Text" !important;
}

/* Anpassen Fenster */

toolbarpaletteitem[place="palette"]#wrapper-bookmarks-menu-button::after {
    content: "Eigener Test" !important;
}

toolbarpaletteitem[place="palette"] label.toolbarbutton-text::before {
    display: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Horstmann

auch in 119+ klappt.

Im Anpassenfenster

Horstmann

Zitat von 2002Andreas

Zitat von Horstmann

auch in 119+ klappt.

Im Anpassenfenster

Danke für's Testen!

Ich habe den Code nochmal gerafft bekommen, das war mir doch zu unhübsch und umständlich .

CSS

/* Text sichtbar machen / optional nach links vom Icon verschieben */
toolbar #bookmarks-menu-button  label.toolbarbutton-text {
    display: flex !important;
    /*order: -1 !important;*/
}

/* Text ändern */
#bookmarks-menu-button label.toolbarbutton-text::before, 
toolbarpaletteitem[place="palette"]#wrapper-bookmarks-menu-button::after {
    content: "Eigener Text" !important;
}

Alles anzeigen

2002Andreas

Zitat von Horstmann

den Code nochmal gerafft bekommen

Auch der funktioniert einwandfrei.

Horstmann

Zitat von 2002Andreas

Auch der funktioniert einwandfrei.