Wie kann ich das Script und den CSS zusammenbringen?

Boersenfeger

Jetzt klappt es, Danke!

Ich habe die Tabs in einem CSS angepasst, sie sind rund; mit Einsatz des Scripts sind allerdings die nicht gelesenen Tabs nicht rund. wie kann ich das Script und den CSS zusammenbringen?

CSS

.tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px !important;
    margin-top: 2px !important;  
    border: none !important;
    color: black ! important; 
    margin-bottom: 0 !important;
    }
    
	.tab-background {
    outline: none !important;
    }

Alles anzeigen

CSS

	/* Ungelesen Tabs mit grüner Ecke */
	
(async (url) => {
   if (location != url) return;
   let css =`
       #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] {
           border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsSAAALEgHS3X78AAABQklEQVR42q3TP0vDQBjH8atDhQ4uFhSnTg66FieHuljQRUpAbZI2bZqmSf+kQehbEN+Fr6fuvgM7+w7i84M7OI7YHPQJfAkcTz5HEk4URSE4E82zixp1TT1Sr7IxNaJcbW0TxcmzqLposP3Uc/rb7ZdDO3RkXeqeulNrNBdk+ds73W+qQOdnt3ugh06pI62aMTdsfDcKut/ijT5bv8JMDbr08JUJlGw8ACjRLtXaB15afBpfgRLtUedloGcJejooUfy0ExP0LUHXBCUaUnUdHBwCSjTVwaEl6PwHSnSjBgNLsL0PRC997wODI0vwuOREBfJU+WoNg2MbsOqCAQtgyAiGACeM4ARgxAhGAKeM4BRgzAjGAGeM4AxgwggmAFNGMAU4ZwTnABeM4ALgkhFcAlwxgiuAGSOYAVwzgmuAOSOY/wGB0oICMFHRdQAAAABJRU5ErkJggg==") 4 10 3 3 / 4px 10px 0px 3px stretch !important;
       }
   `;
   let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
   let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
   sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
   gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
})("chrome://browser/content/browser.xhtml");

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

wie kann ich das Script und den CSS zusammenbringen?

Teste bitte:

JavaScript

	/* Ungelesen Tabs mit grüner Ecke */
	
(async (url) => {
   if (location != url) return;
   let css =`
       #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] {
           border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsSAAALEgHS3X78AAABQklEQVR42q3TP0vDQBjH8atDhQ4uFhSnTg66FieHuljQRUpAbZI2bZqmSf+kQehbEN+Fr6fuvgM7+w7i84M7OI7YHPQJfAkcTz5HEk4URSE4E82zixp1TT1Sr7IxNaJcbW0TxcmzqLposP3Uc/rb7ZdDO3RkXeqeulNrNBdk+ds73W+qQOdnt3ugh06pI62aMTdsfDcKut/ijT5bv8JMDbr08JUJlGw8ACjRLtXaB15afBpfgRLtUedloGcJejooUfy0ExP0LUHXBCUaUnUdHBwCSjTVwaEl6PwHSnSjBgNLsL0PRC997wODI0vwuOREBfJU+WoNg2MbsOqCAQtgyAiGACeM4ARgxAhGAKeM4BRgzAjGAGeM4AxgwggmAFNGMAU4ZwTnABeM4ALgkhFcAlwxgiuAGSOYAVwzgmuAOSOY/wGB0oICMFHRdQAAAABJRU5ErkJggg==") 4 10 3 3 / 4px 10px 0px 3px stretch !important;
       }
	   .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px !important;
    margin-top: 2px !important;  
    border: none !important;
    color: black ! important; 
    margin-bottom: 0 !important;
    }
    
	.tab-background {
    outline: none !important;
    }
   `;
   let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
   let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
   sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
   gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
})("chrome://browser/content/browser.xhtml");

Alles anzeigen

Boersenfeger

Vielen Dank fürs Verschieben 2002Andreas

Zur Erklärung: In diesem Thread wurde der Vorschlag eingebracht, dass man die nicht gelesenen Tabs mit einer grünen Ecke auf Basis eines Scripts ausstatten kann. Daraus ergab sich dann die obige Frage. Kann da jemand beides zusammenfrickeln?

Edit: Nee das ergibt keine Änderung!

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste */

    /* TAB bei bei angewähltem TAB (aktiv): */
    /* Hintergrundfarbe, Rahmen,*/
    /* Schriftfarbe. */
 
 /*  .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px !important;
    margin-top: 2px !important;  
    border: none !important;
    color: black ! important; 
    margin-bottom: 0 !important;
    }
    
	.tab-background {
    outline: none !important;
    }  */

    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {
	display: none !important; 
    }

    /* Schriftgröße Tabs */

    .tab-text {
    font-size: 18px !important;
    }

    /* Damit wird der Tabtext am Ende schleichend ausgeblendet */

    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 1em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; 
    }

    .tabbrowser-tab[visuallyselected] .tab-label {
    font-weight:  bold !important;
    }

    #TabsToolbar .tabbrowser-tab:not([selected]) {
    border-radius: 16px !important;
    height: 22px ! important;
    margin-top: 5px !important;
    padding: 0 !important;
    color: black ! important; 
    }
    
    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand */
	
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -2px !important;    
    margin-bottom: 2px !important;
    }
    
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepasst */
 
    #TabsToolbar .tab-close-button {
    margin-right: -6px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 6px !important;
    width:  6px !important;    
    background-color: red !important;
    border-radius: 12px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 185px !important;
	min-height: 30px !important;
	max-height: 40px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 200px !important;
	min-height: 30px !important;
	max-height: 40px !important;
    flex-grow: 0 !important;
    }

	/* Lautsprechersymbol größer und ohne Hintergrund */
	
	.tab-audio-button[soundplaying] {
	--button-icon-fill: blue !important;
	scale: 1.8 !important;  
	border: none !important;
	--button-background-color-ghost-hover: transparent !important;
	}
	
	/* Lautsprechersymbol blauviolett bei Sound */
	
	[soundplaying] {
		fill: blueviolet !important;
	}
  
	/* Lautsprechersymbol gelb bei stumm */
		
	.tab-audio-button[muted] {
	--button-icon-fill: yellow !important;
	scale: 1.8 !important;  
	border: none !important;
	--button-background-color-ghost-hover: transparent !important;
	}

		
    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    margin-top: -1px !important;
    justify-content: center !important;
    align-items: center !important;
    }
    
    #TabsToolbar .tabbrowser-tab[selected] .tab-content {
    margin-top: 2px !important;
    }

	.tabbrowser-tab {
	min-height: 40px !important;
	max-height: 40px !important;
	}

    .tab-label-container {
    margin: auto !important;
    }

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    padding: 0  !important; 
    width: 17px !important;
	height: 17px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    min-height: 34px !important;    
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    } 
    
    #TabsToolbar .tabbrowser-tab:not([selected])  {
    min-height: 34px !important;
    border: 1px solid #B2B2B2 !important;
    } 

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    } 

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }

	/* Fortschrittsanzeige für das Laden der Seite */

	.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 0;
    background-color: #00ff00;
    height: 6px;
	margin-inline: 8px;
    margin-top: 2px;
	border-radius: 90px;
	}
	.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 1;
    transform-origin: left center;
    animation: 2s ease-in-out scale;
	}
	.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
    transition: opacity 2s ease-out;
	}
	@keyframes scale {
    0% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
	}

	/* Tab Pluszeichen einfärben*/
	
	#tabs-newtab-button {
    color: red !important;
	font-size: 100px !important;
	font-weight: bold !important;
	
    }
	
	/* Tabs mittig */

	#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-left: auto !important;
	}
	#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
	
	}

Alles anzeigen

Hier mal der ganze CSS, der sich mit den Tabs beschäftigt, der entsprechende Teil Zeile 9 bis 20 ist ausdokumentiert.

2002Andreas

Zitat von Boersenfeger

Nee das ergibt keine Änderung!

Boersenfeger

Das war vorher auch schon so, es sollen aber aller Tabs so abgerundet sein. Guckst du oben in Beitrag 1.

2002Andreas

Zitat von Boersenfeger

es sollen aber aller Tabs so abgerundet sein

Skript und dein CSS-Code ergeben hier:

Boersenfeger

Richtig! Die Frage ist ja, wie Skript und Code so zusammengeschrieben werden, das alle Tabs abgerundet sind und die grüne Ecke in ungelesenen ebenfalls zu sehen ist.

2002Andreas

Zitat von Boersenfeger

das alle Tabs abgerundet sind und die grüne Ecke in ungelesenen ebenfalls zu sehen ist.

Ob sich das anpassen lässt bin ich überfragt.

Aber das Skript verändert ja den Rahmen um den Tab durch die grüne Ecke. Wenn du den Tab dann anklickst, dann wird er auch abgerundet.

Horstmann

Zitat von Boersenfeger

Richtig! Die Frage ist ja, wie Skript und Code so zusammengeschrieben werden, das alle Tabs abgerundet sind und die grüne Ecke in ungelesenen ebenfalls zu sehen ist.

border-image folgt nicht border-radius, bzw. ignoriert den Radius.

Horstmann

Sowas könnste mal testen; im Prinzip sollte jedes background-image benutzbar sein, aber der Rest von deinem CSS Code für die Tabs schiesst hier quer, daher nur ein grober Ansatz.

Wie gesagt, border-image kann man nicht benutzten, deswegen.

JavaScript

/* Ungelesen Tabs mit grüner Ecke */

(async (url) => {
 if (location != url) return;
 let css =`
		 /*
     #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background {
				 border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsSAAALEgHS3X78AAABQklEQVR42q3TP0vDQBjH8atDhQ4uFhSnTg66FieHuljQRUpAbZI2bZqmSf+kQehbEN+Fr6fuvgM7+w7i84M7OI7YHPQJfAkcTz5HEk4URSE4E82zixp1TT1Sr7IxNaJcbW0TxcmzqLposP3Uc/rb7ZdDO3RkXeqeulNrNBdk+ds73W+qQOdnt3ugh06pI62aMTdsfDcKut/ijT5bv8JMDbr08JUJlGw8ACjRLtXaB15afBpfgRLtUedloGcJejooUfy0ExP0LUHXBCUaUnUdHBwCSjTVwaEl6PwHSnSjBgNLsL0PRC997wODI0vwuOREBfJU+WoNg2MbsOqCAQtgyAiGACeM4ARgxAhGAKeM4BRgzAjGAGeM4AxgwggmAFNGMAU4ZwTnABeM4ALgkhFcAlwxgiuAGSOYAVwzgmuAOSOY/wGB0oICMFHRdQAAAABJRU5ErkJggg==") 4 10 3 3 / 4px 10px 0px 3px stretch !important;
		 }
     */

     #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: linear-gradient(lightgreen, lightgreen);
    background-size: 10px 10px;
    background-position: top right;
    background-repeat: no-repeat;
}

 `;
 let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
 let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
 sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
 gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
})("chrome://browser/content/browser.xhtml");

Alles anzeigen

Boersenfeger

Danke, aber dann lasse ich den Code lieber so, wie er ist. Mir ist schon wichtig, dass der aktuelle Tab rot ist. Wenn Ungelesene nicht abgerundet werden können, ist das zwar unschön, aber dann wohl nicht zu ändern.

Der Link auf die technische Seite hilft mir nicht weiter, da ich daraus keine Lösung ziehen kann. Bin absolut kein Coder!

Horstmann

Zitat von Boersenfeger

Danke, aber dann lasse ich den Code lieber so, wie er ist. Mir ist schon wichtig, dass der aktuelle Tab rot ist.

Aber der bleibt doch rot mit deinem CSS, das benutzt du einfach normal weiter.

Das Script ist ja nur für die gewünschte Ecke in ungelesenen Tabs, sonst ändert das nichts.

Boersenfeger

Nee bleibt er nicht, mit deinem Code sieht es so aus:

Keine grüne Ecke und der Aktive Tab ist nicht rot nur Fettschrift.

2002Andreas

Zitat von Boersenfeger

Keine grüne Ecke und der Aktive Tab ist nicht rot nur Fettschrift.

Sieht hier so aus:

In deinem Code hast du den roten Tab auch auskommentiert in Beitrag Nr. 3.

Zeile 9 - 13

Horstmann

Zitat von Boersenfeger

Nee bleibt er nicht, mit deinem Code sieht es so aus:
Keine grüne Ecke und der Aktive Tab ist nicht rot nur Fettschrift.

Hab gerade nochmal getestet mit deinem CSS aus #3; du hast vermutlich die dort auskommentierten Teile immer noch auskommentiert, da kann ja nix rot werden.

Das Grün taucht tatsächlich auf in deinem Screenshot, aber an der falschen Stelle - weil offengestanden dein Tab CSS ziemlich daneben ist.

Boersenfeger

Ihr habt recht, nun ist es fast gut...

Damit wäre ich zufrieden.

Horstmann Was könnte man denn im Tab CSS verbessern?

Horstmann

Zitat von Boersenfeger

Damit wäre ich zufrieden. Was könnte man den im Tab CSS verbessern?

Neu aufbauen fürchte ich; du hast grundverschiedene Codes für selektierte versus unselektierte Tabs, mal mit .tab-background (wie es sein sollte für den sichtbaren Teil der Tabs), mal ohne; margins wo paddings sein sollten, etc., und evtl. ein Theme das die eigentlich offensichtlichen Fehler möglicherweise verdeckt.

Der Rest sieht dann aus wie Pflaster über Pflaster, damit alles irgendwie zusammenpasst.
Das Grundproblem ist aber halt, daß deine Tabs eigentlich nicht zusammenpassen.

Boersenfeger

Ich wiederhole mich, ich bin kein Coder und werde es auch nicht werden.

So wie es jetzt aussieht, gefällt es mir!

Danke für deine Unterstützung!

Mira_Belle

Boersenfeger For U

JavaScript

/* Ungelesen Tabs eingefärbt */

(async (url) => {
    if (location != url) return;
    let css =`
            /*
        #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background {
                    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAAsSAAALEgHS3X78AAABQklEQVR42q3TP0vDQBjH8atDhQ4uFhSnTg66FieHuljQRUpAbZI2bZqmSf+kQehbEN+Fr6fuvgM7+w7i84M7OI7YHPQJfAkcTz5HEk4URSE4E82zixp1TT1Sr7IxNaJcbW0TxcmzqLposP3Uc/rb7ZdDO3RkXeqeulNrNBdk+ds73W+qQOdnt3ugh06pI62aMTdsfDcKut/ijT5bv8JMDbr08JUJlGw8ACjRLtXaB15afBpfgRLtUedloGcJejooUfy0ExP0LUHXBCUaUnUdHBwCSjTVwaEl6PwHSnSjBgNLsL0PRC997wODI0vwuOREBfJU+WoNg2MbsOqCAQtgyAiGACeM4ARgxAhGAKeM4BRgzAjGAGeM4AxgwggmAFNGMAU4ZwTnABeM4ALgkhFcAlwxgiuAGSOYAVwzgmuAOSOY/wGB0oICMFHRdQAAAABJRU5ErkJggg==") 4 10 3 3 / 4px 10px 0px 3px stretch !important;
            }
        */
   
        #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background::after {
       content: "";
       width: 100%;
       height: 100%;
       border-radius: inherit;
       background-color: rgba(255, 0 ,0, 0.2);
       background-size: 100%;
       background-position: top right;
       background-repeat: no-repeat;
   }
   
    `;
    let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
    let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
    sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
    gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
   })("chrome://browser/content/browser.xhtml");

Alles anzeigen

Boersenfeger

Mira_Belle Sei mir nicht böse, aber das gefällt mir nicht.

Ich nutze jetzt diesen Code:

JavaScript

/* Ungelesene Tabs mit grüner Ecke */

(async (url) => {
 if (location != url) return;
 let css =`
 
     #TabsToolbar .tabbrowser-tab[notselectedsinceload="true"] .tab-background::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: linear-gradient(lightgreen, lightgreen);
    background-size: 10px 10px;
    background-position: top right;
    background-repeat: no-repeat;
}

 `;
 let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
 let uri = "data:text/css;charset=utf-8," + encodeURIComponent(css);
 sss.loadAndRegisterSheet(Services.io.newURI(uri), sss.AGENT_SHEET);
 gBrowser.tabContainer.addEventListener("TabSelect", e => e.target.setAttribute("notselectedsinceload", "false"));
})("chrome://browser/content/browser.xhtml");

Alles anzeigen