Hoverfarbe dauerhaft für unloaded Tabs benutzen und danach ändern

  • Firefox-Version
    94.0.1
    Betriebssystem
    Windows 10 Pro

    Hallo,

    bisher habe ich folgenden Code benutzt, um unloaded Tabs von loaded Tabs zu unterscheiden:

    Code
    .tabbrowser-tab[pending] {
    opacity: .5;
    }

    Nun möchte ich aber den Hintergrund der unloaded Tabs in der Hoverfarbe dauerhaft haben, dies ist ein leicht dunkleres grau (der dritte von den vier Tabs von links aus gesehen):

    Anschließene möchte ich die Hoverfarbe für unloaded und loaded Tabs etwas heller oder dunkler machen.

    Zur Info: Dieses grau im Hover habe ich nicht manuell geändert irgendwo. Wenn, dann kommt es vom Theme, aber kann man das eventuell mit einem Befehl ansprechen?

    Ich möchte ja nicht irgendeine Farbe festlegen, sondern entweder einen Effekt, der sich über die genannten Tabarten legt oder die Farbe aus dem Theme. Ich vermute, dass es einfach nur ein Effekt ist, aber welcher?

  • Spiel mal mit

    /* ### TAB Textfarbe schwarz (black) ### */
    #TabsToolbar .tabbrowser-tab {color: black !important;}

    /* ### Farbe des aktuellen TABs #c9b887 helles braun ### */
    #TabsToolbar .tabbrowser-tab .tab-content[selected="true"] {background: #c9b887 !important;}

    /* ### Farbe eines ungelesenen TABs #aeaba5 dunkles grau bis #c9c6be helles grau ### */
    #TabsToolbar .tabbrowser-tab .tab-content {
    background-image: linear-gradient(to top,#aeaba5,#c1beb7,#c9c6be) !important;}

    /* ### Farbänderung, wenn man über den TAB fährt #cac7c1 mittleres grau bis #e8e6e2 helles grau ### */
    #TabsToolbar:not(:-moz-lwtheme) :-moz-any(.tabs-newtab-button,#tabs-newtab-button):hover,
    #TabsToolbar .tabbrowser-tab:hover .tab-content:not([selected="true"]) {
    background-image: linear-gradient(to top,#cac7c1,#d5d2cc,#e8e6e2) !important;}

  • Danke, ich habe jetzt deine Farbe genommen und diesen Code hier:

    CSS
    .tabbrowser-tab:not([selected],[pending]) .tab-background{ background-image: linear-gradient(to top,#aeaba5,#c1beb7,#c9c6be) !important;} !important;}

    Sieht dann so aus. Mich stört, dass halt nicht das Muster vom Theme im Hintergrund ist, sondern die Farbe 100% Deckkraft hat.

    Kann man das ändern mit der Deckkraft?