nur das Icon Play/Mute anzuzeigen und nicht auch das Icon der Webseite?
Damit funkioniert das:
So müsstest du deinem Ziel..
Danke, ist ja reichlich fummelig alles, darum bin ich auch froh, dass nicht nutzen zu müssen.
Wenn ich mal mehr als 4 Tabs offen habe, dann macht mich das schon nervös
Damit funkioniert das:
Danke, hab das jetzt etwas versucht zu ändern, aber nur das mit Video-Wiedergabe-Icon funkt.
Kann keine Farben ändern oder wenn es Stummgeschaltet ist, dass es ein anderes Icon azeigt.
Gibts auch für das schon was?
wenn es Stummgeschaltet ist, dass es ein anderes Icon azeigt.
Teste bitte:
.tab-audio-button {
scale: 1.5 !important;
}
.tab-audio-button[soundplaying]::part(button) {
fill: green !important;
}
.tab-audio-button[muted]::part(button) {
fill: red !important;
}
.tab-audio-button[muted]::part(button) {
background-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
}Doch
Danke dir. Es dauert jedoch ein paar Sekunden, die hatte ich nicht gewartet, auch bei ARD Live Stream.
Wegen Tag - wenn ich mit den Browserwerkzeugen, das Symbol wähle:
.tab-audio-button {
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&[soundplaying]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
}
}Da ist also eine andere CLASS zu sehen, aber auch eben besagtes shadow-CSS. Das kann ich mit den hier genutzten Mitteln nicht berücksichtigen, da braucht es das, was Andreas vorschlug.
"Springen" kann man vermutlich nur verhindern, wenn in Abhängigkeit dieses Buttons (Ton, oder nicht) der Inhalt darunter immer angezeigt. Da kann ich dir leider nicht weiterhelfen.
Gibts auch für das schon was?
Wenn dir das alles zu kompliziert ist, setze doch das css einfach in eine .uc.js, ungefähr so (Damit wäre der gesamte Quelltext an einem Ort):
// TabIconSound.css.uc.js
(function() {
if (location != 'chrome://browser/content/browser.xhtml') return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
IconPath1 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image', 'ff_svg')), // Pfad zum 1.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
IconPath2 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')), // Pfad zum 2.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
IconPath3 = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // Pfad zum 3.Ordner der das .svg-Symbol (mit: fill="context-fill" fill-opacity="context-fill-opacity") beinhaltet.
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
.tab-audio-button {
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&[soundplaying]::part(button) {
background-image: url("${IconPath2}/16_volume-up_moz.svg") !important;
}
}
}
.tab-audio-button:hover {
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&[soundplaying]::part(button) {
background-image: url("${IconPath2}/16_volume-off_moz.svg") !important;
}
}
}
.tab-audio-button {
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&[muted]::part(button) {
background-image: url("${IconPath2}/16_volume-off_moz.svg") !important;
}
}
}
.tab-audio-button:hover {
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&[muted]::part(button) {
background-image: url("${IconPath2}/16_volume-up_moz.svg") !important;
}
}
}
.tab-audio-button {
&[soundplaying]::part(button) {
fill: green !important;
}
}
.tab-audio-button {
&[muted]::part(button) {
fill: red !important;
}
}
.tab-audio-button:hover {
&[soundplaying]::part(button) {
fill: red !important;
background-color: lightgray !important;
}
}
.tab-audio-button:hover {
&[muted]::part(button) {
fill: green !important;
background-color: lightgray !important;
}
}
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
.tab-content .tab-icon-image {
display: none;
}
.tab-audio-button {
--button-size-icon-small: 18px !important;
--button-min-height-small: 18px !important;
margin: auto 2px auto -20px !important;
transform: translateY(-2px);
}
}
`), null, null);
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
})();
/*Der Letzte räumt den Quellcode auf*/Beispielicons:
.DeJaVu Danke, jetzt hab ich es verstanden. Hatte gestern dann auch mit den BrowserWerkzeugen gesucht und wurde sogar fündig. Weiß aber nicht, ob ich es dann noch geschafft hätte den korrekten css Code zu erstellen. Zeitgleich wurde er dann hier ins Forum gepostet und dann habe ich es mir zugegebenermaßen leicht gemacht und diesen genommen.
setze doch das css einfach in eine .uc.js, ungefähr so
Von wegen einfach. Das ist doch viel zu unübersichtlich inmitten des ganzen JavaScript-Codes.
Das ist doch viel zu unübersichtlich inmitten des ganzen JavaScript-Codes.
Verstehe ich nicht, mach es einfach besser! Klug******!!
Verstehe ich nicht, mach es einfach besser! Klug******!!
Ich meine damit, dass man CSS nur in begrenztem Maße in ein Skript einbauen sollte. Dann besser eine eigene CSS-Datei mit dem gleichen Namen wie das Skript, damit man weiß, dass die Dateien zusammengehören. Also bitte nichts mit Klug******!
Ich meine damit, dass man CSS nur in begrenztem Maße in ein Skript einbauen sollte.
Hallo milupo.
Welchen Nachteil könnte das denn dann haben?
Welchen Nachteil könnte das denn dann haben?
Wie gesagt, ich halte es für unübersichtlicher. Was ist, wenn das Skript nicht mehr funktioniert, du musst dann auch den CSS-Code durchgehen. Und für jemanden, der von Skripten keine Ahnung hat, ist das nicht einfacher, das einzubauen. Der kann dann wieder nur komplette Skripts übernehmen.
Und ich könnte mir auch vorstellen, dass das Skript dann langsamer geladen wird.
ich könnte mir auch vorstellen
Danke für deine Erklärung/Meinung dazu.
Lieber milupo , der .tab-audio-button befindet sich im shadow-root-Bereich. Also gibt es nur eine Lsg. über userChromeShadow.css; ein Teil befindet sich aber außerhalb dieses Bereiches; eine Lsg. die beide Bereiche bedient ist also: Die oben genannte Datei (so kompliziert sich der text auch liest!) in eine .us.js-Datei einzugliedern. Hast du was Besseres?
Hast du was Besseres?
Ich habe meine Meinung geschrieben. Es geht hier nicht um besser oder nicht besser. Es geht einfach um Übersichtlichkeit und Handhabbarkeit für den Nutzer. Wenn es ein Problem mit dem zugehörigen CSS gibt, muss man nicht erst ein Skript durchsuchen, sondern die entsprechende CSS-Datei. Außerdem ist zusätzlicher Code immer eine Fehlerquelle, zumal das kein JavaScript-Code ist. Nun gut, ich habe mich nicht strikt gegen CSS in JavaScript ausgesprochen, aber einem Nutzer, der sich mit Skripten und kaum mit CSS auskennt zu sagen, er solle das CSS einfach in das Skript übernehmen, ist die Übernahme für dich einfach, aber nicht für den Nutzer.
Teste bitte:
Dieses Teil hab ich in cssshadowordner:
@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
.tab-audio-button[soundplaying]::part(button) {
fill: green !important;
}
.tab-audio-button[muted]::part(button) {
fill: red !important;
}
.tab-audio-button[muted]::part(button) {
background-image: url("file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/16_volume-off_moz.svg") !important;
}
}Dieses Teil in cssordner:
@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
/* hide favicon when audio is playing (like FF 135) */
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
.tab-content .tab-icon-image {
display: none;
}
.tab-audio-button {
--button-size-icon-small: 18px !important;
--button-min-height-small: 18px !important;/**/
/*margin: auto 2px auto -20px !important;
transform: translateY(-1.5px);
transform: scale(1.2, 1.2) !important;
color: white !important; */
}
}
.tab-audio-button {
scale: 1.4 !important;
}
}und beide Teile auch nur in cssordner..
icon wird nicht eingefärbt und bei stummschaltung wird das icon der webseite angezeigt..
kA was ich wieder falsch mache.
kA was ich wieder falsch mache.
Entfern bitte mal Zeile 1 in dem ersten Code für die userChromeShadow.css. Und auch die Klammer in Zeile 13 dann noch.
Die Zeile gehört da auch nicht rein, und ist auch in keinem der hier geposteten CSS Codes enthalten.
Ich habe die Regeln eben bei Aris gepostet, aber will das hier auch mal schnell tun. Das funktioniert bei mir:
.tab-audio-button {
--button-size-icon-small: 22px !important;
--button-min-height-small: 22px !important;
}
.tab-audio-button[activemedia-blocked] {
--button-icon-fill: #FFE900 !important;/* var(--yellow-50) */
}
.tab-audio-button[soundplaying] {
--button-icon-fill: #058B00 !important;/* var(--green-70) */
}
.tab-audio-button[muted] {
--button-icon-fill: #D70022 !important;/* var(--red-60) */
}Die Variablen werden dann in .button-background angewandt.
Die Vorgabe für --button-icon-fill ist currentColor und deshalb funktionieren die Regeln vom FuchsFan aus #66.
Entfern bitte mal Zeile 1 in dem ersten Code für die userChromeShadow.css. Und auch die Klammer in Zeile 13 dann noch.
Die Zeile gehört da auch nicht rein, und ist auch in keinem der hier geposteten CSS Codes enthalten.
Hab es gemacht, dann funkt nurnoch das mit dem "Stummschaltung" nicht.
Ich habe die Regeln eben bei Aris gepostet, aber will das hier auch mal schnell tun. Das funktioniert bei mir:
bei mir funktionert es auch nicht so.
Die CSSshadow
.tab-audio-button[soundplaying]::part(button) {
--button-icon-fill: white !important;
}
.tab-audio-button[muted]::part(button) {
--button-icon-fill: red !important;
}
/*
.tab-audio-button[muted]::part(button) {
background-image: url("file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/16_volume-off_moz.svg") !important;
}
*/Und die normale CSS
@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
/* hide favicon when audio is playing (like FF 135) */
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
.tab-content .tab-icon-image {
display: none;
}
.tab-audio-button {
--button-size-icon-small: 18px !important;
--button-min-height-small: 18px !important;/**/
/*margin: auto 2px auto -20px !important;
transform: translateY(-1.5px);
transform: scale(1.2, 1.2) !important;
color: white !important; */
}
}
.tab-audio-button {
scale: 1.4 !important;
}
}wenn video lauft, da wird der weisse Icon angzeigt.
aber bei stummschaltung wird das originale Icon von der webseite angezeigt.
dann funkt nurnoch das mit dem "Stummschaltung" nicht.
Dann teste diesen Code mal in der userChrome.css:
Dann teste diesen Code mal in der userChrome.css:
Das funkt auch nicht beim Stummschaltung.
