Beiträge von Mira_Belle

Mira_Belle

Zitat von milupo

Wenn der Ordner icons direkt unter chrome liegt: Verwende dann den Pfad ../icons/screenshot.svg

Tut er!

Z.B. Aus der "Weitere Werkzeuge-CSS"

CSS

#appmenu-developer-tools-view .subviewbutton:nth-child(1) {
  list-style-image: url("../icons/developer.svg");
}

Wird das Icon nicht angezeigt.

Was ich aber mittlerweile gelöst bekommen habe ist,

dass in diesem Submenü die Icons, welche angezeigt werden,

nicht mehr dunkel sind und nicht mehr am Text kleben!

Hier der Code dafür:

CSS

#appmenu-moreTools > .panel-subview-body > toolbarbutton > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}

Für das erste Symbol!

Und für alle anderen =>

CSS

#appmenu-developer-tools-view > .subviewbutton  > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}

Nur für das verdammte Hilfemenü bekomme ich es einfach nicht hin!

Fazit:

Nur noch drei Probleme!

1. Das Submenü "Hilfe",

2. das mit den Pfaden

und

3. immer noch das "Zoom-Icon"

Gruß

Mira

NACHTRAG!

Hatte einen Geistesblitz!!

Problem im Submenü "Hilfe" ist jetzt auch gelöst,

für die Icons, die angezeigt werden.

Der Code:

CSS

#PanelUI-helpItems> toolbarbutton > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}

Mira_Belle

So habe noch etwas rumgespielt.

Wenn ich in Andreas Code für das Zoom-Icon

so abändere

CSS

#appMenu-zoom-controls2::before {
  margin-top: 3px !important;
  margin-right: 10px !important; 
  margin-left: -1px !important;
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  mask-image: url ("../chrome/icons/screenshot.svg") !important;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}

Alles anzeigen

bekomme ich nur ein graues Kästchen zusehen! Irgendwie scheint was mit dem Pfad nicht zustimmen.

Habe under dem Pofil einen Chrome-Ordner in dem ich einen weiteren Icons-Ordner habe.

C:\Users\Benutzer\AppData\Roaming\Mozilla\Firefox\Profiles\default-release\chrome\Icons

Wie binde ich diese SVG-Dateien richtig ein?

Denn das Problem habe ich auch bei den Submenüs.

1. Weitere Werkzeuge

CSS

/*-----------------------*/
/* Weitere Werkzeuge */
/*-----------------------*/

/* Symbolleiste anpassen ... */

#appmenu-moreTools-button {
  list-style-image: url("chrome://browser/skin/customize.svg");
}

/* Werkzeuge für Web-... */

#appmenu-developer-tools-view .subviewbutton:nth-child(1) {
  list-style-image: url("../icons/developer.svg");
}

/* Task-Manager */

#appmenu-developer-tools-view .subviewbutton:nth-child(2) {
  list-style-image: url("../icons/performance.svg");
}

/* Externes Debugging */

#appmenu-developer-tools-view .subviewbutton:nth-child(3) {
  list-style-image: url("../icons/bug.svg");
}

/* Browser-Werkzeuge */

#appmenu-developer-tools-view .subviewbutton:nth-child(4) {
  list-style-image: url("../icons/window-dev-tools.svg");
}

/* Browser-Inhaltswerkzeuge */

#appmenu-developer-tools-view .subviewbutton:nth-child(5) {
  list-style-image: url("../icons/command-frames.svg");
}

/* Browser-Konsole */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(5) {
  list-style-image: url("chrome://devtools/skin/images/command-console.svg");
}

/* Bildschirmgrößen testen */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(4) {
  list-style-image: url("../icons/command-responsivemode.svg");
}

/* Farbpipette */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(3) {
  list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
}

/* Seitenquelltext anzeigen */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(2) {
  list-style-image: url("../icons/document-search.svg");
}

/* Erweiterungen für Entwickler */

#appmenu-developer-tools-view .subviewbutton:nth-last-child(1) {
  list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}

Alles anzeigen

und 2. Firefox-Hilfe

CSS

/*---------------*/
/* Firefox-Hilfe */
/*---------------*/

/* Hilfe erhalten */

#appMenu_menu_openHelp {
  list-style-image: url("chrome://global/skin/icons/help.svg");
}

/* Ideen und Feedback teilen ... */

#appMenu_feedbackPage {
  list-style-image: url("../icons/send.svg");
}

/* Fehlerbehebungsmodus ... */

#appMenu_helpSafeMode {
  list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
}

/* Weitere Informationen zur ... */

#appMenu_troubleShooting {
  list-style-image: url("chrome://global/skin/icons/more.svg");
}

/* Betrügerische Website melden ... */

#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
  list-style-image: url("chrome://global/skin/icons/warning.svg");
}

/* Über Firefox */

#appMenu_aboutName {
  list-style-image: url("chrome://global/skin/icons/info.svg");
}

Alles anzeigen

Bei den Subs keben auch die Icons und der Text wider aneinander

und

sie sind dunkel.

Gruß

Mira

Mira_Belle

Ich bin jetzt so weit!

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)
{
    .foo {    /* nur wegen der Klammern */
    }

#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
    fill: currentColor;
    -moz-context-properties: fill;
    margin-inline: 0 8px !important;
}
    
/*Sync*/
#appMenu-fxa-status2::before {
  margin-top: 3px !important;
  margin-right: 10px !important; 
  margin-left: -1px !important;
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  mask-image: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}

    
/* Neuer Tab */

    #appMenu-new-tab-button2 {
        list-style-image: url("chrome://browser/skin/new-tab.svg");
    }

/* Neues Fenster */

    #appMenu-new-window-button2 {
        list-style-image: url("chrome://browser/skin/window.svg");
    }

/* Neues privates Fenster */

    #appMenu-new-private-window-button2 {
        list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
    }

/* Lesezeichen */

    #appMenu-bookmarks-button {
        list-style-image: url("chrome://browser/skin/bookmark.svg");
    }

/* Chronik */

    #appMenu-history-button {
        list-style-image: url("chrome://browser/skin/history.svg");
    }

/* Download */

    #appMenu-downloads-button {
        list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
    }

/* Passwörter */

    #appMenu-passwords-button {
        list-style-image: url("chrome://browser/skin/login.svg");
    }

/* Add-ons und Themes */

    #appMenu-extensions-themes-button {
        list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
    }

/* Drucken */

    #appMenu-print-button2 {
        list-style-image: url("chrome://global/skin/icons/print.svg");
    }

/* Seite speichern unter */

    #appMenu-save-file-button2 {
        list-style-image: url("chrome://browser/skin/save.svg");
    }

/* In Seite suchen */

    #appMenu-find-button2 {
        list-style-image: url("chrome://global/skin/icons/search-glass.svg");
    }

/* Zoom */



/*Einstellungen */

    #appMenu-settings-button {
        list-style-image: url("chrome://global/skin/icons/settings.svg");
    }

/*Weitere Werkzeuge */

    #appMenu-more-button2 { 
        list-style-image: url("chrome://global/skin/icons/developer.svg") 
    }

/* Hilfe */

    #appMenu-help-button2 {
        list-style-image: url("chrome://global/skin/icons/help.svg");
    }

/* Beenden */

    #appMenu-quit-button2 {
        list-style-image: url("../chrome/icons/quit.svg");
    }



#appmenu-moreTools-button {
  list-style-image: url("chrome://browser/skin/customize.svg");
}

}

Alles anzeigen

Und die Icons für das Untermenü "Weitere Werkzeuge" habe ich auch gefunden.

CSS

/* Zoom */
#appMenu-zoom-controls2::before {
margin-right: 6px !important; 
margin-left: -5px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 15px !important;
background-image: url("chrome://browser/skin/fullscreen.svg") !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 15px 15px !important;
}

Alles anzeigen

Blendet zwar ein Icon ein, aber halt nicht das aus "LEPTON".

Für Heute mach ich Schluß.

Danke für Eure Hilfe.

Gruß

Mira

Mira_Belle

Ein leichter Schubser, danke!

@Gabbo

So schaut nun "mein" Code aus:

CSS

#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
    fill: currentColor;
    -moz-context-properties: fill;
    margin-inline: 0 8px !important;
}    

/* Neuer Tab */

    #appMenu-new-tab-button2 {
        list-style-image: url("chrome://browser/skin/new-tab.svg");
    }

/* Neues Fenster */

    #appMenu-new-window-button2 {
        list-style-image: url("chrome://browser/skin/window.svg");
    }

/* Neues privates Fenster */

    #appMenu-new-private-window-button2 {
        list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
    }

/* Lesezeichen */

    #appMenu-bookmarks-button {
        list-style-image: url("chrome://browser/skin/bookmark.svg");
    }

/* Chronik */

    #appMenu-history-button {
        list-style-image: url("chrome://browser/skin/history.svg");
    }

/* Download */

    #appMenu-downloads-button {
        list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
    }

/* Passwörter */

    #appMenu-passwords-button {
        list-style-image: url("chrome://browser/skin/login.svg");
    }

/* Add-ons und Themes */

    #appMenu-extensions-themes-button {
        list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
    }

/* Drucken */

    #appMenu-print-button2 {
        list-style-image: url("chrome://global/skin/icons/print.svg");
    }

/* Seite speichern unter */

    #appMenu-save-file-button2 {
        list-style-image: url("chrome://browser/skin/save.svg");
    }

/* In Seite suchen */

    #appMenu-find-button2 {
        list-style-image: url("chrome://global/skin/icons/search-glass.svg");
    }

/* Zoom */



/*Einstellungen */

    #appMenu-settings-button {
        list-style-image: url("chrome://global/skin/icons/settings.svg");
    }

/*Weitere Werkzeuge */

    #appMenu-more-button2 { 
        list-style-image: url("chrome://global/skin/icons/developer.svg") 
    }

/* Hilfe */

    #appMenu-help-button2 {
        list-style-image: url("chrome://global/skin/icons/help.svg");
    }

/* Beenden */

    #appMenu-quit-button2 {
        list-style-image: url("../chrome/icons/quit.svg");
    }

Alles anzeigen

So weit war ich fast schon mal!

Nur fehlten mir die ersten sechs Zeilen.

OK, danke dafür.

Nun sind fast alle meine Probleme gelöst, fast, da ja immer noch das Ding mit dem Zoom offen ist

und

mir immer noch das Icon für Daten synchronisieren und speichern fehlt.

Gruß

Mira

PS: Das Menü schaut jetzt so aus.

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Nur mit weniger Zeilenhöhe.

Siehe Beitrag Nr. 13 +16.
Das ist doch nur eine geänderte Einstellung im Fx.

Das hatte ich aber, ich glaube mit Deiner Hilfe,

so fest eingestellt.

CSS

    :root {
        --arrowpanel-menuitem-padding: 0px 8px !important;                    /* Zeilenabstand */
    }

Mira_Belle

War gerade etwas Künstlerisch!

Habe einen Entwurf gemacht.

Wie bis Download, so hätte ich gerne das Menü.

Probleme, welche ich bisher habe:

* Mir fehlen zwei Icons Datei synchronisieren und speichern, Weitere Werkzeuge und Zoom

* Icon bekomme ich nicht alle HELL

* Zeilenhöhe !

Gruß

Mira

Mira_Belle

CSS

#appMenu-new-tab-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url('chrome://browser/skin/new-tab.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}
#appMenu-new-tab-button2 label {
  padding: 10px !important;
}

#appMenu-new-window-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url("chrome://browser/skin/window.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}
#appMenu-new-window-button2 label {
  padding: 10px !important;
}
#appMenu-new-private-window-button2 image {
  width: 16px;
  height: 16px;
  mask-image: url("chrome://browser/skin/privateBrowsing.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #e1e1e1 !important;
}
#appMenu-new-private-window-button2 label {
  padding: 10px !important;
}

Alles anzeigen

Führt leider nicht zum erwünschten Erfolg.

Rot markiert stimmt es!

Icon ist "hell" der Abstand zum Text ist auch i.O.

ABER die Zeilenhöhe wurde verändert!

Siehe Zeilenabstäne ab "Lesezeichen".

Die Icons, gelb unterstichen, wollen aber nicht hell werden.

Zitat von 2002Andreas

Meinst du das alles so?

Ja, genau so!

Nur mit weniger Zeilenhöhe.

Also, eigentlich genau so =>

Gruß

Mira

PS: Das Icon für Daten synchronisieren und speichern habe ich auch noch nicht gefunden).

Mira_Belle

So, habe einige "Sybole" (Icons) gefunden und genau so in die Stilbearbeitung mal eingetragen.

Siehe da, die Anordnung stimmt schon mal.

CSS

/* Neuer Tab */
#appMenu-new-tab-button2 {
list-style-image: url("chrome://browser/skin/new-tab.svg");
}
/* Neues Fenster */
#appMenu-new-window-button2 {
list-style-image: url("chrome://browser/skin/window.svg");
}
/* Neues privates Fenster */
#appMenu-new-private-window-button2 {
list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}
/* Lesezeichen */
#appMenu-bookmarks-button {
list-style-image: url("chrome://browser/skin/bookmark.svg");
}
/* CHronik */
#appMenu-history-button {
list-style-image: url("chrome://browser/skin/history.svg");
}
/* Download */
#appMenu-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
/* Passwörter */
#appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg");
}
/* Add-ons und Themes */
#appMenu-extensions-themes-button {
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
/* Drucken */
#appMenu-print-button2 {
list-style-image: url("chrome://global/skin/icons/print.svg");
}
/* Seite speichern unter */
#appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg");
}
/* In Seite suchen */
#appMenu-find-button2 {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
/* Zoom */



/*Einstellungen */
#appMenu-settings-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
/*Weitere Werkzeuge */


/* Hilfe */
#appMenu-help-button2 {
list-style-image: url("chrome://global/skin/icons/help.svg");
}
/* Beenden */

Alles anzeigen

Jedoch, so'n Käse, sind alle Symbole dunkel (schwarz)

und mit fill: white !important; oder color: white !important; tut sich auch nichts.

Schade.

Auch klebt die Beschriftung direkt an den "Sybolen" (Icons),

auch nicht wirklich schön!

Tja, und was ich bisher so gar nicht herausgefunden habe,

die "Sybole" (Icons) für:

Zoom, Weitere Werkzeuge und Beenden.

Gruß

Mira

PS:

Normalerweise sollten diese Eintrage die fehlenden "Sybole" (Icons) sein.

CSS

#appMenu-zoom-controls2::before {
content: url("../icons/screenshot.svg");
}

#appMenu-more-button2 {
list-style-image: url("chrome://browser/skin/ion.svg");
}

#appMenu-quit-button2 {
list-style-image: url("../icons/quit.svg");
}

Alles anzeigen

Jedoch werden die so nicht angesprochen und erscheinen dan ja nicht.

Wie bekomme ich das noch hin?

HA!

"screenshot.svg" & "quit.svg" sind im Unterverzeichnis!

Mira_Belle

Wenn Du magst, kannst Du ja nochmal folgendes ausprobieren!

CSS

#appMenu-popup panelview {
  border: 3px solid red !important;
}

#appMenu-popup {
    --panel-border-color: none !important;
}

Hätte den Vorteil, dass Du die Strichbreite des Rahmens bestimmen kannst.

Warum Andreas Code bei Dir's nicht tut, weiß ich leider auch nicht.

Gruß

Mira

Mira_Belle

Zitat von Vlex

Hi Mira,
...
Immer noch weißer Rahmen drum

Nutzt Du noch weiteren Code zur Anpassung?

Vermutlich schon, oder?

Stell Deinen Code doch bitte mal komplett hier rein

und teile uns mit, welches Theme Du nutzt.

Gute Nacht

wünscht

Mira

Mira_Belle

Zitat von Vlex

Hi Mira,

Nur beim Hamburger Menü bleibt der wiesee Rahmen trotzdem:
Ist also ein Mischmasch

Da nimm 2002Andreas Code

CSS

#appMenu-popup panelview {  border: 5px solid red !important;
}

... der ist besser!

Den nutze ich im übrigen jetzt auch

Gruß

Mira

Wie Du die "Breite" "einstellst" ist klar?

Mira_Belle

So etwas...

CSS

#appMenu-new-window-button2 {
list-style-image: url("chrome://browser/skin/window.svg");
}

... stellt mich vor ein Rätzel!

Wo bitte finde ich diese "windows.svg"?

Im Profilordner schon mal nicht! Oder etwa doch?

Wenn ich also all diese Codefragmente kopiere, werden die Icons dann auch in meinem anderen Profil gefunden und eingebunden?

Und wenn ja, muss ich noch herausfinden, wie sie dann anrichtiger Stelle erscheinen.

Gruß

Mira

PS: Nur zur Erinnerung!

CSS

@supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
#appMenu-new-tab-button2 {
list-style-image: url("chrome://browser/skin/new-tab.svg");
}
}

CSS

@supports -moz-bool-pref("userChrome.icon.panel_sparse") {
#appMenu-new-tab-button2,
#appMenu-passwords-button,
#appMenu-extensions-themes-button,
#appMenu-save-file-button2,
#appMenu-find-button2,
#appMenu-more-button2,
#appMenu-help-button2,
#appMenu-quit-button2 {
padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
}


#appMenu-zoom-controls2 {
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}
}
#appMenu-new-window-button2 {
list-style-image: url("chrome://browser/skin/window.svg");
}


#appMenu-new-private-window-button2 {
list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}


#appMenu-bookmarks-button {
list-style-image: url("chrome://browser/skin/bookmark.svg");
}


#appMenu-history-button {
list-style-image: url("chrome://browser/skin/history.svg");
}


#appMenu-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}


@supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
#appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg");
}


#appMenu-extensions-themes-button {
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
}
#appMenu-print-button2 {
list-style-image: url("chrome://global/skin/icons/print.svg");
}


@supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg");
}


#appMenu-find-button2 {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}


#appMenu-zoom-controls2::before {
content: url("../icons/screenshot.svg");
}
}
#appMenu-settings-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}


@supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-more-button2 {
list-style-image: url("chrome://browser/skin/ion.svg");
}
}
@supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
#appMenu-help-button2 {
list-style-image: url("chrome://global/skin/icons/help.svg");
}


#appMenu-quit-button2 {
list-style-image: url("../icons/quit.svg");
}
}

Alles anzeigen

Mira_Belle

Du weißt wie man den FF dazu bekommt CSS-Dateien zu verarbeiten?

CSS

    panelview,
    #appMenu-popup  .panel-subview-body {
        border: 1px solid #ff9600 !important;
        border-radius: 8px !important;
    }

Sollte Dir ein wunderschönen orangen Rahmen um das Hamburgermenü zaubern.

Und ...

CSS

menupopup {
    border: 3px solid #ff9600 !important;                             /* Rahmenfarbe */
    border-radius: 8px !important;                                    /* Rahmenradius */
}

... sorgt dafür, dass bei ALLEN Popups ein 3 Pixel breiter Rahmen in Orange zu sehen ist.

Gruß

Mira

Mira_Belle

Hahaha!

Ich kann nicht mehr.

Nein, das Profil gibt es noch.

Hingerichtet wird es später!

Gruß

Mira

Mira_Belle

So, habe mal ein neues Profil angelegt und mit "Lepton" [hingerichtet. ] eingerichtet.

Die Menüs schauen schon so aus, wie ich sie gerne auch hätte.

Habe mir dann die CSS's angeschaut, und blöde aus der Wäsche geschaut.

Danach geschaut, was ich mit den "Werkzeugen" rausfinden kann.

So auf die Schnelle nix.

Werde also etwas Zeit benötigen.

Gruß

Mira

Mira_Belle

Danke Endor für Deine Rückmeldung.

Ich habe, die vom mir gewünschten Symbole (Icons) gefunden.

Lepton (old name: Proton Fix)

Jetzt muss ich nur noch zusehen, wie ich diese so einbinde, dass sie auch an richtiger Stelle erscheinen.

Dazu kann ich ja dann Deinen Code als Beispiel heranziehen.

Mal schauen, ob ich das dann an diesem WE wie von mir gewünscht hinbekomme.

Gruß

Mira

Mira_Belle

Hallo.

Inspiriert durch diesen Beitrag, bzw. den Link auf Reddit

erwuchs in mir das Bedürfnis, meine Menüs auch mit Symbole zu verschönern.

Eventuell kann mir da jemand, Andreas?, unter die Arme greifen.

Was ich bräuchte sind sie Symbole bzw, die Verweise darauf.

Und so in etwa sollte es dann ausschauen.

Es geht NUR um die Symbole, eventuell in hell und dunkel,

aber eher in hell, da z.Z. bei mir der Hintergrund dunkel ist.

Hamburgermenü

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)
{
    /*---------------------------------------------------*/
    /********* Anpassungen des "Hamburgermenüs" **********/
    /*---------------------------------------------------*/

    .foo {    /* nur wegen der Klammern */
    }

    :root {
        --arrowpanel-menuitem-padding: 0px 8px !important;                    /* Zeilenabstand */
    }
    
    #appMenu-protonMainView {                                                /* Menübreite */
        width: 320px !important;            
    }    

    /* Farbe der Separatoren */
 
    #editBookmarkPanel toolbarseparator, 
    .cui-widget-panel toolbarseparator {
        appearance: none !important;
        background: #5b5b66 !important;                                    /* Helles Mausgrau */
    }

    /* Farbe der Schrift & Hintergrund */
    
    panelview,
    #appMenu-popup  .panel-subview-body {
        background: #292c2f !important;                                          /* Dunkles Grau */
        border: 1px solid #ff9600 !important;
        border-radius: 8px !important;
    }

    :is(menupopup, panel)[type="arrow"] {
    
        --panel-color: #e1e1e1 !important;                                 /* Schriftfarbe */        /* Hellgrau */
        --panel-border-color:#292c2f !important;                             /* Rahmenfarbe */
        --panel-border-radius: 8px !important;                                 /* Rahmenradius */
    } 
}

Alles anzeigen

Lesezeichen, weil hier auch die Popups sind.

CSS

@-moz-document url(chrome://browser/content/browser.xhtml)            
{
    /* ----------------------------------------------------------------------------*/
    /***** Abstände der Einträge in den Menüs und Lesezeichen wieder schmaler ******/
    /* ----------------------------------------------------------------------------*/

    /* Abstände */ 
    menupopup > menuitem,
    menupopup > menu {
        appearance: none !important;
        padding-block: 2px !important;
        padding-inline-start: 25px !important;
    }


/*Abstände Lesezeichen Popup + Menü */
/*
#PlacesToolbar :is(menu,menuitem){
  margin: 0 0 !important;
  min-height: 20px !important;
  padding-top: 0 !important; 
  padding-bottom: 0 !important;
}

*/

    /* Anpassungen der Popups */
    menupopup {
        appearance: none !important;
        --panel-color: #e1e1e1 !important;                                    /* Hellgrau, Schrift */
        --panel-background: #292c2f !important;                                /* Dunkles Grau, Hintergrund */    
        --panel-border-color:transparent !important;                        /* Rahmenfarbe */
        --panel-border-radius: 4px !important;                                /* Rahmenradius */
        background-color: #292c2f !important;                             /* Hintergrund */
    border: 3px solid #ff9600 !important;
/*    border: 3px solid #ff9600 !important;    */
    border-radius: 8px !important;
    }
  
    /* Nur für anderes Windowstheme */
    #context-navigation {
        background-color: transparent !important;
    }

    #context-navigation:not([hidden]) {
        appearance: none !important;
        padding: 0 25px 4px !important;
    }

    menu[id="file-menu"],
    menu[id="edit-menu"],
    menu[id="view-menu"],
    menu[id="history-menu"],
    menu[id="bookmarksMenu"],
    menu[id="tools-menu"],
    menu[id="helpMenu"]  {
        appearance: none !important; 
        background:transparent !important;    
        color: #e1e1e1  !important;                                        /* Hellgrau, Schrift */
    }
    menu[id="file-menu"]:hover,
    menu[id="edit-menu"]:hover,
    menu[id="view-menu"]:hover,
    menu[id="history-menu"]:hover,
    menu[id="bookmarksMenu"]:hover,
    menu[id="tools-menu"]:hover,
    menu[id="helpMenu"]:hover {
        appearance: none !important; 
        background: rgba(225, 225, 225, 0.2) !important;                    /* Hellgrau, Feld */
    }

}

Alles anzeigen

Gruß

Mira

Mira_Belle

Zitat von Horstmann

Ich hatte das gleiche Problem, ich glaube FF hat mit dem Update 102 eine Outline in die Tabs gemogelt .
Auf Reddit gab's einige Beschwerden zu dem Thema, da hatte ich dann auch die grobe Lösung gepostet , wie Mira sie erwähnt hat .
Soweit scheint's zu funktionieren, bei mir jedenfalls, hängt aber evtl. noch mit anderen Faktoren zusammen, die der einen oder anderen userChrome.css in die Quere kommen könnten .

Misst!

Jetzt hast Du Begehrlichkeiten in mir geweckt!

So hätte ich das "Hamburgermenü" auch gerne!

(Es geht NUR um die Symbole )

Wenn mir da jemand weiterhelfen könnte, mach eich einen neuen Thread auf

und poste meinen bisherigen Code.

Gruß

Mira

Mira_Belle

Thomas3

Danke für den Tipp.

Mit ...

CSS

.tab-background {
  outline: none !important
}

... werden alle Rahmen aller aktiven Tabs von den von mir getesteten Themes ausgeblendet!

Gruß

Mira

Mira_Belle

Danke Sören.

Mir ist's jetzt auch wieder eingefallen!

Die aboutDialog.csswar, ist mein allererstes Projekt,

und dass da noch Fehler drin steckten, war mir damals bewusst,

deshalb gab es dazu auch Kommentare.

Das Ding funktionierte aber wie gewünscht und so vergaß ich,

dass das noch eine Baustelle ist.

Nun aber sollte der Code sauber sein.

Hab die "falsche" Klammer gefunden und auch die 0px Werte geändert.

Ach ja, das mit den "präzise Angaben", da hätte ich echt auch selber kommen können.

Habe sogar auf MDN Web Docs extra nachgeschlagen

und

wohl Tomaten auf den Augen gehabt.

Da bin ich denn auch auf die Lösung mit den Werten gekommen,

weil ja box-shadow: transparent !important; total falsch war.

OK, nun ist auch dieser Fehler bereinigt und ich blende aus.

box-shadow: none !important;

Möchte mich nochmals ganz lich bei Dir und .DeJaVu

für Eure Hilfe bedanken.

Gruß

Mira

Beiträge von Mira_Belle

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Rahmen um Hamburger Menü und Lesezeichen

Rahmen um Hamburger Menü und Lesezeichen

Rahmen um Hamburger Menü und Lesezeichen

Symbole in Menüs

Rahmen um Hamburger Menü und Lesezeichen

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Symbole in Menüs

Aktiver Tab

Aktiver Tab

Aktiver Tab