Firefox View

2002Andreas

Zitat von FuchsFan

wirkt ja übergreifend auch auf andere Menüs.

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

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

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

2002Andreas

Zitat von FuchsFan

Dieses wäre noch eine Variante.

Auch nicht schlecht

Dann hat edvoldi ja Auswahl.

FuchsFan

Zitat von 2002Andreas

Auch nicht schlecht

2002Andreas

Die OT-Beiträge habe ich mal verschoben, sind jetzt hier zu finden:

Beitrag

Off-Topic aus: Firefox View

[…]

Genau, gleich legt mein Schiff ab

edvoldi

9. Juni 2026 um 18:34

grisu2099

Ich hab da nochmal gebastelt...

So sieht das dann in den Preferences aus. Das gleiche Prinzip funktioniert auch bei about:Addons und bei FirefoxView. Es muß nur das "title"-Argument des jeweiligen Buttons geändert/angepaßt werden. Eigene Icons, Hoverfarbe (auch für den selektierten Button!) und andere Farbe für den selektierten Button sind damit möglich

CSS

	:root {
		--background-color-canvas: rgb(40,40,42) !important;				/* Hintergrundfarbe für die ganze Seite */
		--button-background-color-hover: rgb(255,99,71) !important;			/* Hoverfarbe für die Navi-Buttons links */
	}

			/** Allgemeines **/
	#categories {
		border-right: 2px ridge rgb(0,128,0) !important;
		width: 346px !important;
		padding: 30px 0 0 !important;
		margin: 0 0 0 15px !important;
	}
		/* Überschrift links in Navigation */
	.page-nav-heading-wrapper {
		border-bottom: none !important;
		gap: 0 !important;
		height: 48px !important;
		padding: 0 10px 20px !important;
		margin: 0 !important;
		& > .logo {
			height: 54px !important;
			width: 48px !important;
			background: url("file:///E:/ICONS/Nightly-Logo.svg") no-repeat center -6px !important;
			background-size: 48px !important;
			margin: -3px 0 0 -2px !important;
		}
	}
	#page-nav-heading {
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 15px !important;
		background-color: rgb(144,238,144) !important;
		color: #000000 !important;
		font-size: 20px !important;
		font-weight: 600 !important;
		text-align: center !important;
		line-height: 38px !important;
		height: 40px !important;
		padding: 0 50px !important;
		margin: 4px auto 0px 29px !important;
	}
	
		/* Die Buttons */
	.page-nav-icon {
		display: none !important;
	}
	nav {
		--page-nav-button-gap: 10px !important;
	}
	button[role="tab"] {
		--page-nav-button-background-color: rgb(222,184,135) !important;
		--page-nav-button-background-color-selected: rgb(144,238,144) !important;
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 10px !important;
		background-position: 10px 7px !important;
		background-repeat: no-repeat !important;
		color: #000000 !important;
		font-weight: bold !important;
		max-width: 335px !important;
		padding: 5px 0 5px 36px !important;
		margin: 0 !important;
		&:hover {
			--page-nav-button-background-color: rgb(255,99,71) !important;
			--page-nav-button-background-color-selected: rgb(255,99,71) !important;
		}
		&::before {
			display: none !important;
		}
	}
	button[role="tab"][title="Konto und Synchronisation"] {
		background-image: url("file:///E:/ICONS/FF/Sync.png") !important;
	}
	button[role="tab"][title="Startseite"] {
		background-image: url("file:///E:/ICONS/FF/Home.png") !important;
	}
	button[role="tab"][title="Suche"] {
		background-image: url("file:///E:/ICONS/FF/search.png") !important;
	}
	button[role="tab"][title="Datenschutz & Sicherheit"] {
		background-image: url("file:///E:/ICONS/FF/padlock.png") !important;
	}
	button[role="tab"][title="Passwörter und Autovervollständigung"] {
		background-image: url("file:///E:/ICONS/FF/Passwort.png") !important;
	}
	button[role="tab"][title="Erscheinungsbild"] {
		background-image: url("file:///E:/ICONS/FF/Palette.png") !important;
	}
	button[role="tab"][title="Downloads"] {
		background-image: url("file:///E:/ICONS/FF/download3.png") !important;
	}
	button[role="tab"][title="Tabs und Surfen"] {
		background-image: url("file:///E:/ICONS/FF/tab-blau.png") !important;
	}
	button[role="tab"][title="Barrierefreiheit"] {
		background-image: url("file:///E:/ICONS/FF/Barrierefreiheit.png") !important;
	}
	button[role="tab"][title="Sprachen"] {
		background-image: url("file:///E:/ICONS/FF/Sprachen.png") !important;
	}
	button[role="tab"][title="KI-Einstellungen"] {
		background-image: url("file:///E:/ICONS/FF/KI16.png") !important;
	}
	button[role="tab"][title="Berechtigungen und Daten"] {
		background-image: url(chrome://browser/skin/permissions.svg) !important;
		-moz-context-properties: fill !important;
		fill: rgb(65,105,225) !important;
	}
	button[role="tab"][title="Firefox Labs"] {
		background-image: url("file:///E:/ICONS/FF/Experimente.png") !important;
	}
	button[role="tab"][title="Über Nightly"] {
		background-image: url("file:///E:/ICONS/FF/Nightly.png") !important;
	}
	#addonsButton {
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 10px !important;
		background: rgb(95,158,160) url("file:///E:/ICONS/FF/Addons.png")  no-repeat 10px 7px !important;
		color: #000000 !important;
		font-weight: bold !important;
		padding: 0 0 0 36px !important;
		margin: 0 !important;
	}
	#helpButton {
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 10px !important;
		background: rgb(95,158,160) url("file:///E:/ICONS/FF/Nightly.png")  no-repeat 10px 7px !important;
		color: #000000 !important;
		font-weight: bold !important;
		padding: 0 0 0 36px !important;
		margin: 0 !important;
	}
	.moz-page-nav-link {
		font-weight: bold !important;
		padding: 3px 0 !important;
	}
	#addonsButton:hover,
	#helpButton:hover {
		background-color: rgb(255,99,71) !important;
	}
		/* Trennlinie */
	.nav-separator,
	nav > hr {
		border-top: 2px ridge rgb(0,150,0) !important;
		width: 336px !important;
		height: 0px !important;
		margin: 5px 0 !important;
	}
	nav > hr {
		margin: 0 0 10px !important;
	}

Alles anzeigen

Sören Hentzschel

Zitat von grisu2099

Das gleiche Prinzip funktioniert auch bei about:Addons und bei FirefoxView.

… sowie about:policies und Stand heute noch nicht, aber in Zukunft about:debugging.

Wobei es nur mit dem Code aus deinem Beitrag bei mir nicht so wie in deinem Screenshot aussieht, weder in Firefox 152 noch in Firefox Nightly. Ich denke, da fehlt etwas …

grisu2099

Gut zu wissen - so weit war ich noch nicht...

grisu2099

Zitat von Sören Hentzschel

Wobei es nur mit dem Code aus deinem Beitrag bei mir ganz anders als in deinem Screenshot aussieht …

Hast du einen Screenshot - damit ich weiß, was da an Code noch fehlt. Ich hatte das aus meinem Komplett-Code für about:preferences rauskopiert...

Firefox View

Off-Topic aus: Firefox View

Ähnliche Themen

Firefoxview Button Strich rechts daneben entfernen

Firefox 149.0beta9 Schriftfarbe der Tab im Split-View-Modus ändern

Natives Split View im Firefox

Titelleiste color nicht alle Buttons gleiche Farbe