Firefox View

edvoldi

Durch einen anderen Beitrag ist mir aufgefallen das ich die Seite Firefox View auch einmal geändert hatte.

Ich habe meine alte Änderung gefunden und wieder angepasst.Nur die Button auf der linke Seite bekomme ich nicht so hin wie ich es haben möchte.

CSS

/* Linke Seite Symbole ausblenden und neue einfügen   */
	.page-nav-icon {
	color: transparent !important;
	}
	
	moz-page-nav-button[data-l10n-id="firefoxview-overview-nav"] {
	border-radius: 60px !important;
	border: 1px solid white !important;
    background: gainsboro url("../../../Icons/Bild45.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: 1px solid white !important;
    background: gainsboro url("../../../Icons/tab_offen.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: 1px solid white !important;
    background: gainsboro url("../../../Icons/tab_closed.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: 1px solid white !important;
    background: gainsboro url("../../../Icons/alle_geräte.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: 1px solid white !important;
    background: gainsboro url("../../../Icons/history.png") no-repeat !important;
    background-position: 10px 10px !important;
	}

Alles anzeigen

Leider bekomme ich keine andere Farbe für Hover und auch nicht für ein selektierten Button hin.
Hat eine eine Idee!
Gruß EDV-Oldie

2002Andreas

Zitat von edvoldi

keine andere Farbe für Hover und auch nicht für ein selektierten Button hin.

Teste bitte mal damit zusätzlich:

CSS

moz-page-nav-button {
	--page-nav-button-background-color-hover: red !important;
	--page-nav-button-border-radius: 60px !important;
    --page-nav-button-text-color: white !important;
    --page-nav-button-indicator-color: white !important;
    --page-nav-button-background-color-selected : green !important;
}

Farben und Wert wenn dann anpassen.

edvoldi

Hallo Andreas,
leider nein, auch hier werden keine Symbole beim hovern und beim selektierten Tab angezeigt.

2002Andreas

Zitat von edvoldi

keine Symbole beim hovern

Zitat von edvoldi

keine andere Farbe für Hover und auch nicht für ein selektierten Button hin.

Der Code betrifft also nur den Hintergrund der Button bei hover.

edvoldi

Doch die Farbe hat sich geändert, aber die Symbole werden dann nicht mehr angezeigt.

edvoldi

Ich bin jetzt erst einmal bis zum 18.06. Offline.
Wenn noch jemand Ideen hat, ruhig hier posten, ich teste es dann später.

Gruß EDV Oldie

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

Endor

Hallo 2002Andreas und edvoldi.
Kann und muss es bestätigen. Hover funktioniert nur beim aktiven Button.
Bei den anderen tut sich nichts.

Mfg.
Endor

edvoldi

Hallo zusammen,

Wenn es nicht geht, dann nicht, beim Thunderbird ist es das gleiche, da hatte ich mir auch schon verzweifelt gesucht.

Aber wie geschrieben erst wieder ab dem 18.06.

Gruß EDV-OLDIE vom Smartphone.

2002Andreas

Zitat von FuchsFan

Mit deinen gewünschten Icon ist das nicht möglich

edvoldi und Endor Testet bitte mal, die Icons müsst ihr wieder anpassen:

Zeile 5 - 21 sind neu hinzugefügt.

CSS

		/* Firefox View */

    @-moz-document url(about:firefoxview) {
		
moz-page-nav-button {    
    --page-nav-button-indicator-color: white !important;    
}
	
button {
  &[selected]:hover {
  	background: green url("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") no-repeat !important;
       background-position: 10px 10px !important;
  }
}

button {
  &[selected] {
	background: red url("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") no-repeat !important;
       background-position: 10px 10px !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("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") 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("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") 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("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") 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("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") 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("file:///C:/Users/weiss/IconsFirefox/Computer_File_064.gif") 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

2002Andreas

In Zeile 20 das noch hinzufügen:

border-radius: 60px !important;

edvoldi

Das sieht ja gut aus, werde es dann testen.

Vielen Dank schon einmal im voraus.

2002Andreas

Zitat von edvoldi

werde es dann testen.

Genieß deinen Urlaub, das ist wichtiger

edvoldi

Zitat von 2002Andreas

Genieß deinen Urlaub, das ist wichtiger

Das sowieso, bin schon dabei.

2002Andreas

Zitat von edvoldi

bin schon dabei.

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.

2002Andreas

Zitat von FuchsFan

dass der aktive Button immer das gleiche Icon verwendet

Stimmt, ist im ersten Teil vom Code (button& selected) so festgelegt.

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

Endor

Hallo 2002Andreas.
Funktioniert prima.
Aber eben mit der von FuchsFan erwähnten Einschränkung.

Vielen Dank für Deine Mühe.
Mfg.
Endor

2002Andreas

Zitat von Endor

Vielen Dank für Deine Mühe.

gerne wie immer

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.

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