Beiträge von FuchsFan

FuchsFan

Zitat von 2002Andreas

Auch nicht schlecht

FuchsFan

Dieses wäre noch eine Variante.

CSS

/* Firefox View */

@-moz-document url-prefix("about:firefoxview") {

/* Inaktive Buttons */
:root {
   --button-background-color-ghost: #e0e0e0 !important;
}

/* Firefox View Buttons */
moz-page-nav-button {
   --page-nav-button-border-radius: 0 60px 60px 0 !important;
   /* Farben */
   --page-nav-button-background-color-selected: red !important;
   --page-nav-button-background-color-hover: #77b5fe !important;
   --page-nav-button-background-color-active: greenyellow !important;
   /* Textfarbe */
   --page-nav-button-text-color: black !important;
   --page-nav-button-text-color-hover: #480607 !important;
   --page-nav-button-text-color-active: blue !important;
   border: 2px solid grey !important;
   border-radius: 60px  !important;
   background-color: #e0e0e0 !important;
}

/* Textfarbe im aktiven Button */  
button[selected] {
   color: yellow !important;  
}
  
  /* blauer Rand links im aktiven Button ausgeblendet */
    @media not (prefers-contrast) {
       button::before {
       content: "";
       display: none !important;
    }
    }
	
	/* Original-Icon ausblenden */
	.page-nav-icon {
       display: none !important; 
    }

  moz-page-nav-button[data-l10n-id="firefoxview-overview-nav"] {
    background-image: url("../Icons/1213.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-opentabs-nav"] {
    background-image: url("../Icons/009.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-recently-closed-nav"] {
    background-image: url("../Icons/0013.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-synced-tabs-nav"] {
    background-image: url("../Icons/0059.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-history-nav"] {
    background-image: url("../Icons/chronik.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
}

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

In diesem Fall das Problem mit den eigenen Icons die bei hover nicht angezeigt werden, wenn man den Hintergrund ändert

Genau so ist es. Ich habe schon versucht hieraus etwas abzuleiten, aber ohne Erfolg.

Code

:host {
 --page-nav-button-border-radius: var(--button-border-radius);
 --page-nav-button-text-color: var(--button-text-color-ghost);
 --page-nav-button-text-color-hover: var(--button-text-color-ghost-hover);
 --page-nav-button-text-color-active: var(--button-text-color-ghost-active);
 --page-nav-button-background-color: var(--button-background-color-ghost);
 --page-nav-button-background-color-hover: var(--button-background-color-ghost-hover);
 --page-nav-button-background-color-active: var(--button-background-color-ghost-active);
 --page-nav-button-background-color-selected: color-mix(in srgb, currentColor 8%, transparent);
 --page-nav-button-padding: var(--space-small) var(--space-medium);
 --page-nav-button-border-color-hover: var(--button-border-color-ghost-hover);
 --page-nav-button-border-color-active: var(--button-border-color-ghost-active);
 --page-nav-button-indicator-color: var(--color-accent-primary);
 --page-nav-button-indicator-width: var(--dimension-4);
 border-radius: var(--border-radius-small);
}

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

Wie/ob man das ändern kann bin ich überfragt zur Zeit

Es ist jetzt auch nicht einfach, weil es immer bei den Button eine Überlagerung gibt, einmal button , und dann moz-page-nav-button . button wirkt ja übergreifend auch auf andere Menüs.

FuchsFan

Zitat von 2002Andreas

Zeile 5 - 21 sind neu hinzugefügt.

Ja, Andreas, das funktioniert, aber man muss sich dann dafür entscheiden, dass der aktive Button immer das gleiche Icon verwendet. Wäre auch kein Problem.

FuchsFan

Nur so nebenbei, hier wiederholt sich, was schon in about:addons und abaut:preferences verändert wurde. Es ist also nicht mehr so einfach hier allen Wünschen gerecht zu werden (oder es ist für uns i.M. noch zu kompliziert). Ich kann dir zwei Wege anbieten, der erste wäre dann ohne die eigenen Icon. Hier ist es dann möglich dem aktiven Button einen anderen HG zu vergeben. Mit deinen gewünschten Icon ist das nicht möglich ( eventuell hilft jemand weiter), hier kann dann der HG bei hover gewählt werden, und die Icon bleiben dann auch sichtbar. Der aktive Button ist so nur durch die fette Schrift und anderer Farbe erkennbar.

CSS

/* Firefox View */

@-moz-document url(about:firefoxview) {
	
body {
	background: #000 !important;
}	

/* Button in der Sidebar  */

/* blauer Rand links im aktiven Button ausgeblendet */
@media not (prefers-contrast) {
  button::before {
    content: "";
    display: none !important;
   }
}

/* aktiver Button */
button[aria-selected="true"] {
    appearance: none !important;
    border-radius: 60px !important;
    border: 2px solid white !important;
    background-color: green !important;
    color: #FFF !important;
    padding: 6px 8px !important;
}

/* inaktiver Button */
button[aria-selected="false"] {
    appearance: none !important;
    border-radius: 60px !important;
    border: 2px solid #ededed !important;
    background-color: #B8B8B8 !important;
    color: #000 !important;
    padding: 6px 8px !important;
}
button[aria-selected="false"]:hover {
    appearance: none !important;
    background-color: #D1E2F2 !important;
    border: 2px solid #0082FC !important;
    color: blue !important;
}

/* Text der Button / auch rechts die URL */
slot {
    font-size: 16px !important;
}

/*== Button ** ENDE ==*/
	 
}

Alles anzeigen

CSS

/* Firefox View */

    @-moz-document url(about:firefoxview) {
	
    body {
	   background: #000 !important;
    }	

    /* Linke Seite Symbole ausblenden und neue einfügen */
	.page-nav-icon {
	   color: transparent !important;
	}
	
	button {
	   background-color: transparent !important;
	}

    /* blauer Rand links im aktiven Button ausgeblendet */
    @media not (prefers-contrast) {
       button::before {
       content: "";
       display: none !important;
    }
    }

	moz-page-nav-button[data-l10n-id="firefoxview-overview-nav"] {
	   border-radius: 60px !important;
	   border: 3px solid white !important;
       background: gainsboro url("../Icons/1213.png") no-repeat !important;
       background-position: 10px 10px !important;
	}

	moz-page-nav-button[data-l10n-id="firefoxview-opentabs-nav"] {
	   margin-top: 5px !important;
	   border-radius: 60px !important;
	   border: 3px solid white !important;
       background: gainsboro url("../Icons/009.png") no-repeat !important;
       background-position: 10px 10px !important;
	}
	
	moz-page-nav-button[data-l10n-id="firefoxview-recently-closed-nav"] {
	   margin-top: 5px !important;
	   border-radius: 60px !important;
	   border: 3px solid white !important;
       background: gainsboro url("../Icons/0013.png") no-repeat !important;
       background-position: 10px 10px !important;
	}
	
	moz-page-nav-button[data-l10n-id="firefoxview-synced-tabs-nav"] {
	   margin-top: 5px !important;
	   border-radius: 60px !important;
	   border: 3px solid white !important;
       background: gainsboro url("../Icons/0059.png") no-repeat !important;
       background-position: 10px 10px !important;
	}
	
	moz-page-nav-button[data-l10n-id="firefoxview-history-nav"] {
	   margin-top: 5px !important;
	   border-radius: 60px !important;
	   border: 3px solid white !important;
       background: gainsboro url("../Icons/chronik.png") no-repeat !important;
       background-position: 10px 10px !important;
	}
	
	moz-page-nav-button:hover {
	   border-radius: 60px !important;	
	   background-color: lightblue !important;
       color: magenta !important;
    }
    }

Alles anzeigen

FuchsFan

Zitat von Boersenfeger

Vielleicht kann man unter Themes die Buttons in beige weiter nach links rücken, damit die neuen nicht verdeckt werden?

In Zeile 226 bei right: den Wert erhöhen.

FuchsFan

Zitat von 2002Andreas

Wenn ja, teste bitte mal:

Danke, Andreas, das habe ich soweit auch schon. Der Code wirkt aber auf alle Button, auf der Hauptseite Themes, sowie auch unter "Verwalten". Mir kommt es darauf an, nur die Button unter Verwalten extra anzusprechen, wenn das überhaupt möglich ist.

So verhält es sich auch dem more-options-button, der auf alle Menüs wirkt. Auch hier wollte ich ihn nur unter Verwalten ausklammern, und ihn extra ansprechen, wenn es auch hier überhaupt möglich ist.

FuchsFan

Und es geht weiter unter about:addons, z.B. die Button Aktivieren/Deaktivieren bei Themes. Ich komme da nicht weiter, wenn ich unter Verwalten diese Button einzeln ansprechen möchte. Alles was ich bisher versucht habe wirkt immer übergreifend auf andere Button.

FuchsFan

Zitat von Sören Hentzschel

Mit einem installierten Firefox habe ich das Problem jedenfalls nicht.

Damit hier auch nicht, es sind nur die portablen Versionen.

FuchsFan

Zitat von 2002Andreas

Klicke ich auf: Weiter wird ein neues Profil erstellt.

Und das Schlimme daran ist, ich finde auch keine Möglichkeit das abzubrechen, also nur auf "Weiter" , oder gibt es da einen anderen Weg?

FuchsFan

Zitat von 2002Andreas

Warum nicht in der userContent.css?

Gute Frage, weil ich gelernt habe ::part imm er in Shadow.

FuchsFan

Um hier reinen Tisch zu machen, es lag nicht an dem Script, sondern an css-Code in der userChromeShadow.css, und zwar an diesem.

CSS

panel-item::part(button) {
    background-image: none !important;
}

Der war dafür gedacht die originalen Icon in dem Popup auszublenden (funktionierte bis Version 150).

Damit wurden dann auch noch die Suchmaschinen-Icon angezeigt, aber nicht mehr in Version 151.

Jetzt habe ich den css-Code so abgeändert, damit sind alle Probleme beseitigt.

CSS

panel-item[action="remove"]::part(button), 
panel-item[action="report"]::part(button) {
	background-image: none !important;
}

Danke, Andreas, für deinen Einsatz.

FuchsFan

Zitat von 2002Andreas

Ich glaube, du verwechselst da etwas
Dieses Skript lädt das, was in der userChromeShadow.css eingetragen ist.

Kann sein, ich war mir jetzt nicht sicher, deswegen nochmals nachgebohrt.

Und ich habe beide in meinem Script vereinigt, schau mal hier RE: Popup der Suchmaschinen ohne Icons, deswegen die Nachfrage.

FuchsFan

Zitat von 2002Andreas

Ja, und das macht es hier auch.

Gut, dann werde ich es auch mal testen, danke Andreas.

FuchsFan

Zitat von 2002Andreas

Funktioniert hier einwandfrei in Fx 151

Ja, glaube ich dir, aber noch einmal zu meinen Gedanken, muss das Script nicht auch den Code laden, der in userChromeShadow.css hinterlegt ist, damit er funktioniert?

FuchsFan

Zitat von Mira_Belle

Und was war jetzt genau der "falsche" Code?

Mira_Belle Dieser hier.

JavaScript

//  userChromeShadow.uc.js
//  Button zum Aufruf der userChromeShadow.css im Ordner chrome

(async function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
       
    try {
          let path = PathUtils.join(PathUtils.profileDir, 'chrome', 'userChromeShadow.css');
          let cssIn = await IOUtils.readUTF8(path);

          let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
          let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(cssIn));
          sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    
       } catch(e) { 
        
         console.log("UserChromeShadow-Error: " + e.name + ': ' + e.message );
 
       };        
   
})();

(function() {

  if (!window.gBrowser)
	return;

        let btn_id ='chromeshadow_button';

       	try {
          CustomizableUI.createWidget({
            id: btn_id,
            defaultArea: CustomizableUI.AREA_NAVBAR,
            label: "Datei userChromeShadow.css",
            tooltiptext: "Datei userChromeShadow.css öffnen",
            onCreated: (this_button) => {
                this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                this_button.style.listStyleImage = 'url("file:///C:/FoxIcons2/css22.png")';
                this_button.style.minWidth = 'fit-content';
            }
          });
    	} catch(e) {}
		
		function click_button() {
          document.getElementById(btn_id).addEventListener('click', event => {
                if (event.button == 0) {
                    let dir = Services.dirsvc.get('UChrm', Ci.nsIFile);
                        dir.append('userChromeShadow.css');
                        dir.launch();	
                }
			});
        };

      if (window.readyState !== "loading") {
    		setTimeout(click_button, 500);
        }
      else {
    	  window.addEventListener( "DOMContentLoaded", click_button );
        };
          window.addEventListener('aftercustomization', () => {
    		setTimeout(() => click_button(), 100)
        });
})();

Alles anzeigen

Zitat von 2002Andreas

Ich nutze hier dieses Skript dafür:

2002Andreas

Ja, so rufe ich die Test-Shadow.css auf, aber das Script lädt ja nicht den Code in der userChromeShadow.css, damit er funktioniert. Liege ich mit meiner Denkweise daneben?

FuchsFan

Zitat von 2002Andreas

viel Spaß dann

Danke, hatte ich.

Du wirst es nicht glauben, es lag am Script userChromeShadow.uc.js. Mit dem folgenden Script funktioniert es nun wieder.

JavaScript

 // userChromeShadow.uc.js
// Button zum Aufruf der userChromeShadow.css im Ordner chrome

(async function() {
    if (location !== 'chrome://browser/content/browser.xhtml') return;

    try {
        // Pfad zur CSS-Datei
        let file = PathUtils.join(PathUtils.profileDir, 'chrome', 'userChromeShadow.css');

        // Datei-URI erzeugen statt Data-URI
        let fileObj = new FileUtils.File(file);
        let uri = Services.io.newFileURI(fileObj);

        let sss = Cc['@mozilla.org/content/style-sheet-service;1']
                    .getService(Ci.nsIStyleSheetService);

        // Vorherige Registrierung entfernen, falls schon vorhanden
        if (sss.sheetRegistered(uri, sss.AUTHOR_SHEET)) {
            sss.unregisterSheet(uri, sss.AUTHOR_SHEET);
        }

        sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    } catch (e) {
        console.log("UserChromeShadow-Error: " + e.name + ': ' + e.message);
    }
})();

(function() {
    if (!window.gBrowser) return;

    let btn_id = 'chromeshadow_button';

    try {
        CustomizableUI.createWidget({
            id: btn_id,
            defaultArea: CustomizableUI.AREA_NAVBAR,
            label: "Datei userChromeShadow.css",
            tooltiptext: "Datei userChromeShadow.css öffnen",
            onCreated: (this_button) => {
                this_button.style.MozContextProperties = 'fill, stroke, fill-opacity, stroke-opacity';
                this_button.style.listStyleImage = 'url("file:///C:/FoxIcons2/css22.png")';
                this_button.style.minWidth = 'fit-content';
            }
        });
    } catch (e) {}

    function click_button() {
        document.getElementById(btn_id).addEventListener('click', event => {
            if (event.button == 0) {
                let dir = Services.dirsvc.get('UChrm', Ci.nsIFile);
                dir.append('userChromeShadow.css');
                dir.launch();
            }
        });
    }

    if (window.readyState !== "loading") {
        setTimeout(click_button, 500);
    } else {
        window.addEventListener("DOMContentLoaded", click_button);
    }

    window.addEventListener('aftercustomization', () => {
        setTimeout(() => click_button(), 100);
    });
})();

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

Hier werden die Icons in allen Profilen angezeigt.

Danke, Andreas, für den Text suche ich mir das Passende raus.

Nun habe ich den Ordner Scripte entfernt, alle Icon da, also auf zur Jagd.

FuchsFan

Zitat von 2002Andreas

Evtl. funkt dir ein anderer Code dazwischen

Alle Codes deaktiviert, keine Änderung. Es ist je nichts weiter verändert worden, nur das Update von 150 auf 151.

Für den Text habe ich das noch probiert, müsste funktionieren, wie es aussieht.

CSS

panel-item.searchmode-switcher-installed::part(label) {
  font-size: 1.2em !important;
  font-weight: 600 !important;
}

Beiträge von FuchsFan

Firefox View

Firefox View

Firefox View

Firefox View

Firefox View

Firefox View

Anzeige unter about:addons in Nightly verändert

Anzeige unter about:addons in Nightly verändert

Anzeige unter about:addons in Nightly verändert

Entwicklung Firefox

Entwicklung Firefox

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons

Popup der Suchmaschinen ohne Icons