Audio-/Video-Tabs in bunt einbauen klappt nicht

harff182

Ich habe folgenden Code für Tabaussehen in Benutzung:

CSS

 /********** Tab-Aussehen verändern     *********************/
/*    210612: FF89neu 
    210616: einige Anpassungen/Zusätze bei 2002Andreas abgeguckt:
                                    https://www.camp-firefox.de/forum/thema/132802
    210616: Problem_1-Nachfrage:     https://www.camp-firefox.de/forum/thema/132849
    210815:    Problem_2-Nachfrage:     https://www.camp-firefox.de/forum/thema/133199
    210910: Sound-Tabs bunt:        https://www.camp-firefox.de/forum/thema/133353
 */

/*    Tab Inhalt Abstände
 */
:root {
   --proton-tab-radius: 0px !important;
   --proton-tab-block-margin: 0px !important;
   --inline-tab-padding: 10px !important;
}
#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}

/* TAB normal (inaktiv):
 ***********************
 * Hintergrund, Schrift, Rahmen 
 */
#TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 2px solid !important;
    border-bottom: 1px solid black!important;
    background: white !important;                   /* weiß für inaktive Tabs*/
    border-radius: 10px 10px 0 0 !important;        /*alle 0 für bigzorro*/
    margin: 5px 1px 0px 0px !important;
}

/* TAB bei bei angewähltem TAB (aktiv):
 **************************************
 * Hintergrund, Rahmen, Schrift.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
    color: black ! important;
    border: 3px solid !important;
    border-radius: 20px 20px 20px 20px !important;
    background: yellow !important;                   
    font-weight:bold !important;
}

/*    "Problem_1": .DejaVu hat in #8 das links und rechts im aktiven Tab augenscheinlich gelöst 
 */
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
[multiselected]) > .tab-stack > .tab-background
{
    box-shadow: none !important;
}

/*     Tab-Icon: 
 *    *********
 *    etwas größer, links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
 
#TabsToolbar .tab-icon-image {
    height: 18px !important;
    width:  18px !important;
    margin-left: -2px !important;
    margin-bottom: 2px !important;
}

/*     Tab-Schließen-Button:
 *    ***********************
 *     Rechts weniger Abstand zum TAB-Rand, etwas größer,
 *     Textfarbe (Kreuz)
 *     an den Eckenradius des Buttons angepaßt.
 *     bei angewähltem TAB (aktiv): Hintergrundfarbe.
 */

#TabsToolbar .tab-close-button[selected="true"] {
    margin-right: 2px !important;  
    padding: 0 !important;
    color: black !important;
    height: 20px !important;
    width:  20px !important;
    border-radius: 5px !important;
    background-color: red !important;
}

/*     Alle Elemente in der TABsToolbar ohne Hintergrund/Veränderung beim hovern.
 *    Dat klappt wohl so:
 */
#TabsToolbar * {
    background: none !important;
}

/*    Alle Tabs ausgewählt => alle grün*/
#main-window .tab-background[multiselected] {
    background: chartreuse !important;
}

/*    Lautsprecher Symbol vergrössern
 *     https://www.camp-firefox.de/forum/thema/132680
 *     #5 und #24 
 */
.tab-icon-overlay {
    top: 2px !important;
    fill: red !important;
    transform: scale(1.5, 1.5) !important;
}

/*    Problem_2: Dharkness-Lösung
 */    
#TabsToolbar .tabbrowser-tab[selected="true"] .tab-content {
    padding-bottom: 5px !important;
}

Alles anzeigen

Nun wollte ich aus dem Nachbarthread diesen Code von 2002Andreas einbauen:

CSS

.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] {
    color: white !important;
}

.tabbrowser-tab:not([visuallyselected="true"])[soundplaying] .tab-stack > .tab-background {
  background: red !important;
}

.tabbrowser-tab:not([visuallyselected="true"])[muted] {
    color: white !important;
}

.tabbrowser-tab:not([visuallyselected="true"])[muted] .tab-stack > .tab-background {
  background: green !important;
}

Alles anzeigen

Ich habs versucht ganz hinten anzuhängen, vorne einzufügen und auch Anweisungen für meine aktiven und inaktiven Tabs zu übernehmen.

Nix klappt

Wer erbarmt sich und zeigt mir wie ich zum Ziel kommen könnte?

2002Andreas

Zitat von harff182

wie ich zum Ziel kommen könnte?

In Zeile 86:

#TabsToolbar * {

Den * entfernen, dann passt es zumindest mit der Farbe für den Soundtab.

Wobei bei mir der kompl. Code eh keine Wirkung zeigt

CSS

#TabsToolbar * {
    background: none !important;
}

BrokenHeart

Versuch es mal so:

CSS

.tabbrowser-tab[selected][soundplaying] {
    color: white !important;
}

.tabbrowser-tab:not([selected])[soundplaying] {
    color: rgb(192,192,192) !important;
}

.tabbrowser-tab[selected][soundplaying] .tab-background {
  background: red !important;
}

.tabbrowser-tab:not([selected])[soundplaying] .tab-background {
  background: rgb(192,0,0) !important;
}

Alles anzeigen

Dass mit dem '[muted]' versteh ich nicht, da ja der Sound ja auch bei nicht selektiertem Tab weiterspielt und nicht stumm geschaltet wird. Oder soll der Tab allgemein optisch auf '[muted]' reagieren?

Zitronella

Zitat von 2002Andreas

Wobei bei mir der kompl. Code eh keine Wirkung zeigt

hm. doch bei mir klappt es, hab gerade wieder einen Styling-Schock erlitten

(Stern in Zeile 86 hab ich natürlich entfernt)

BrokenHeart

2002Andreas :

Ja der übrige Code ist irgendwie sehr merkwürdig und die Stelle die du genannt hast ist noch merkwürdiger. Hat vor allem ja nichts speziell mit dem 'hovern' zu tun .

Alles neu machen wäre fast einfacher, als da rumzureparieren...

2002Andreas

Zitat von BrokenHeart

Dass mit dem '[muted]' versteh ich nicht,

Wenn der Tab stumm geschaltet ist wird der HG grün, wenn der Tab nicht aktiv ist.

Das Movie läuft dann ganz normal weiter, nur eben ohne Ton.

BrokenHeart

Zitat von Zitronella

Styling-Schock

Das meinte ich auch mit 'merkwürdig'...

milupo

Zitat von 2002Andreas

obei bei mir der kompl. Code eh keine Wirkung zeigt

Das wird auch nicht gehen: Erst einmal ist es hier ungünstig, background als Sammeleigenschaft zu verwenden. background kann den Wert none nicht annehmen. Von den Einzelwerten kann meines Wissens nur background-image den Wert none annehmen, background-color kann nur eine Farbangabe oder transparent und die Vererbungswerte annehmen.

Zitat von harff182

Alle Elemente in der TABsToolbar ohne Hintergrund/Veränderung beim hovern.

Es ist mir unklar, was mit diesem Satz gemeint ist.

2002Andreas

Zitat von BrokenHeart

Ja der übrige Code ist irgendwie sehr merkwürdig

So ganz steige ich da auch nicht durch ob bzw. was davon wirklich gebraucht wird.

Die Tabs sind jedenfalls völlig unterschiedlich bezüglich der Form

Zitat von Zitronella

doch bei mir klappt es

Ich habe den ganz normalen hellen HG im Fx, evtl. fällt es dadurch hier/mir nicht auf.

Sören Hentzschel

Zitat von milupo

background als Sammeleigenschaft zu verwenden. background kann den Wert none nicht annehmen.

Doch, kann es. Sowas lässt sich über die Entwicklerwerkzeuge immer gut nachvollziehen, da Eigenschaften durchgestrichen und mit einem Ausrufezeichen versehen werden, wenn diese einen ungültigen Wert zugewiesen bekommen.

BrokenHeart

Zitat von 2002Andreas

Wenn der Tab stumm geschaltet ist wird der HG grün, wenn der Tab nicht aktiv ist.

Ok, dann ist es das, was ich im letzten Satz vermutet hatte. Sollte man dann nicht auch den '[muted]'-Status bei selektiertem Tab anzeigen (vielleicht ein helleres Grün oder mit der Selektionsfarbe mischen)?

Zitronella

ich teste so Codes immer in einem neuen Profil. Sehe aber keinen Unterschied dort zwischen eingestelltem Standard Theme oder hellem Theme.

2002Andreas

Zitat von BrokenHeart

Status bei selektierten Tab anzeigen

CSS

.tabbrowser-tab[muted] {
    color: white !important;
}

.tabbrowser-tab[muted] .tab-stack > .tab-background {
  background: green !important;
  opacity: .5 !important;
}

BrokenHeart

Edit: 2002Andreas: OMG, bist du schnell!

harff182 : Hier trotzdem meine Version mit 'muted': (den Rest von deinem Code bring ich da auch nicht vernünftig unter...)

CSS

.tabbrowser-tab[selected][soundplaying] {
    color: white !important;
}

.tabbrowser-tab:not([selected])[soundplaying] {
    color: rgb(192,192,192) !important;
}

.tabbrowser-tab[selected][soundplaying] .tab-background {
  background: red !important;
}

.tabbrowser-tab:not([selected])[soundplaying] .tab-background {
  background: rgb(192,0,0) !important;
}

.tabbrowser-tab[selected][muted] .tab-background {
  background: rgb(64,255,0) !important;
}

.tabbrowser-tab:not([selected])[muted] .tab-background {
  background: rgb(64,192,0) !important;
}

Alles anzeigen

harff182

Zitronella:

Das ist mein Haribo-Design

Spass beiseite - Ich komm weder mit dunklen noch mit hellen Themes/Oberflächen zurecht, aber je bunter, desto einfacher für mich und meine Augen....

@all : Ich hab ja versucht, so gut wie möglich zu Dokumentieren, warum was drin ist und woher.

2002Andreas und BrokenHeart :

Und wo soll ich den Schnipsel für bunt jeweils einfügen?

Ich probier jetzt ersma mit der Änderung in Zeile 86 und häng dann beide Codes mal hinten dran...

Huch.. vergessen abzuschicken...

bin noch am rumtesten...

Bisheriges Ergebnis:

Wenn ich gemäß #2 den "*" entferne, zerschießt es mir den aktiven TAB mit dem Code von Andreas:

Farben Rot/grün werden aber dargestellt.

Ihr seit teilweise zu schnell....

Ich kann die ganzen Änderungsvorschläge garnich so schnell einbauen und testen

harff182

Zitat von milupo

Es ist mir unklar, was mit diesem Satz gemeint ist.

Beim hovern wird in der Regel eine andere "Hintergrundfarbe" angezeigt.

Das will ich in der Tableiste nicht, weil es mich eher stört.

Zitat von 2002Andreas

Die Tabs sind jedenfalls völlig unterschiedlich bezüglich der Form

Der Unterschied zwischen den inaktiven (weiß, oben abreundet mit schwarzen Rahmen) und dem aktiven TAB (gelb mit allen abgerundeten Ecken des schwarzen Rahmens) ist genau so von mir gewünscht.

Zitat von 2002Andreas

So ganz steige ich da auch nicht durch ob bzw. was davon wirklich gebraucht wird.

Ich versuch wirklich so gut wie möglich zu dokumentieren, warum was drin ist und wo es her ist.

Und für mich brauch ich nicht aufzuschreiben, warum ich es gern so hätte.

Resüme:

sieht wohl so aus, als gingen "Audio-/Video-Tabs in bunt" bei meinen bisher von mir realisierten Wünschen für die TABs nicht.

Nuja, man kann halt nicht alles haben

Schade.

guuts nächtle und ein besseres Wochenende, als den verregneten Freitag von heute...

BrokenHeart

Ich habe mal deinen Code für die Tabs ausgemistet und wirklich ganz viele Sachen raus geschmissen, die entweder nicht mehr funktioniert haben bzw. das Gegenteil von dem gemacht haben, was sie wohl ursprünglich sollten. Dann erst habe ich den Code für die Hervorhebung des Tab-Hintergrundes bei Audio hinzugefügt. Hoffe mal, dass funktioniert jetzt so...

CSS

/*     Tab-Schließen-Button: */
 #TabsToolbar .tab-close-button[selected="true"] {
    padding: 0px !important;
    margin-right: -1px !important;
    color: white !important;
    height: 16px !important;
    width:  16px !important;
    border-radius: 5px !important;
    background-color: red !important;
}
.tab-icon-overlay, .tab-sharing-icon-overlay
{
    filter: drop-shadow( 2px 2px 1px rgba(0,0,0,0.75) ) !important;    
    transform: scale(1.5, 1.5) !important;            
    fill: white !important;
    margin-top: 2px !important;
}    
#tabbrowser-tabs {
  margin-bottom: -5px !important;
}
.tabbrowser-tab {
    color: black !important;
    font-weight: normal !important;
}

.tabbrowser-tab[selected] {
    font-weight: bold !important;
}
.tabbrowser-tab:not([selected]) .tab-background {
    border-radius: 10px 10px 0 0 !important;        
    background: white !important;
    font-weight: normal !important;
    border-radius: 10px 10px 0px 0px !important;
    border: 2px solid black !important;
    border-bottom: 1px solid black !important;
}
.tabbrowser-tab[selected] .tab-background {
    background: yellow !important;
    border-radius: 20px 20px 20px 20px !important;  
    border: 3px solid black !important;
}
.tabbrowser-tab[selected][soundplaying] .tab-background {
    background: red !important;
}
.tabbrowser-tab:not([selected])[soundplaying] .tab-background {
    background: rgb(192,0,0) !important;
}
.tabbrowser-tab[selected][muted] .tab-background {
    background: rgb(0,255,0) !important;
}
.tabbrowser-tab:not([selected])[muted] .tab-background {
    background: rgb(0,192,0) !important;
}
#main-window .tab-background[multiselected]  { 
    background: rgb(255,255,0) !important;
}

Alles anzeigen

2002Andreas

Zitat von harff182

ist genau so von mir gewünscht.

Dann ist das auch völlig ok so.

Zitat von BrokenHeart

Hoffe mal, dass funktioniert jetzt so..

Funktioniert hier einwandfrei

BrokenHeart

Zitat von 2002Andreas

Funktioniert hier einwandfrei

Danke fürs testen, Andreas...

harff182

Zitat von BrokenHeart

Hoffe mal, dass funktioniert jetzt so...

Kurzmeldung, weil mich gleich erst um dem Haushalt meiner Mom kümmern muß.

Zum genauer angucken des Codes, austesten und umfärben komm ich erst später...

Funtioniert bei mir grundsätztlich auch

Erste Bitte:

Um den aktiven TAB gibts hier wieder so einen Verlauf nach außen:

(wie) ist der wegzubekommen?

Bin dann erstmal kochen, waschen, spülen bei meiner Mom...

harff182 10. September 2021 um 21:32