Firefox 4.0 Beta 1: Aktiver Tab nicht stylebar?

[ScoutX]

Habe versucht, den Firefox 4.0 zu stylen.
In früheren Versionen ließ sich der aktive Tab leicht modifizieren.

Nun gibt es die glorreiche Option unter Ansicht, dass die Tableiste mit dem Menü on Top ist oder an der altbekannten Stelle. Standard ist Menü on Top. Schaltet man um, ist der aktive Tab weiß. Stylt man den Tab, kann man erkennen, dass die Ränder andere Farben annehmen und dass das Weiß ein Overlay irgendeines Bildes oder Funktion ist.

Mit Dom Inspector und Co, bekomm ich nicht raus, wie man dieses Weiß manipulieren kann.

Habt ihr die selbe Erfahrung gemacht oder kennt ihr einen Workaround.
Scheint mir ein Bug (oder doch ein Feature) zu sein.

 

[bluescript]

Ich benutzt die 4.0b3pre von heute und kann meine Tableiste problemlos stylen. Einfachste Möglichkeit ist zunächst mal, der Eigenschaft ein !important mitzugeben. Wenns dann immer noch nicht geht, muss man weiterschauen.

 

[ScoutX]

Ich weiß schon, wie man stylt. Dann werde ich mir morgen die pre3 anschauen und berichten.

Update: Die Firefox 32 bit Version macht es nicht. Auch selbes Erscheinungsbild. Sobald man die Tableiste wieder vom Menü trennt, wird der aktive Tab weiß ohne oder mit userchrome.css.
Nur die Schrift ist bei mir stylebar.

@ Bluescript: Poste mir doch bitte deinen Codeschnipsel für deinen Styleversuch des aktiven Tab.
Zumindest haben wir dann beide dieselbe Ausgangsbasis.

 

[bluescript]

Also, ich stell hier einfach mal meine kompletten Tabstoolbar-Styles zur Verfügung. Anzumerken ist, dass ich das Addon ColorfulTabs verwende und die Tabstyles darauf ausgerichtet sind. Ohne das Addon sollte es auch funktionieren, aber hab jetzt nicht getestet, wie es aussieht. Ob Tabs oben oder nicht, das Aussehen ist bei mir dasselbe. Die Styles die App-Tabs betreffend sind noch nicht finalisiert - das liegt aber daran, dass die App-Tabs selber noch nicht fertig zu sein scheinen.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* TABSTOOLBAR STYLES */

#tabbrowser-tabs {
  padding: 2px 5px 0 5px !important;
}



/* GLOBAL STYLES */

.tabbrowser-tab {
  background-clip: padding-box !important;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(255,255,255,0) 5px, rgba(210,214,218,.8) 7px, rgba(242,246,250,1) 23px) !important;
  border: 1px solid rgba(64,65,66,.5) !important;
    border-bottom: none !important;
    -moz-border-radius: 5px 5px 0 0 !important;
  height: 26px !important;
    max-height: 26px !important;
    min-height: 24px !important;
  margin-top: 2px !important;
    padding: 0 4px !important;
    padding-top: 1px !important;
}

.tabbrowser-tab:hover {
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(255,255,255,.25) 5px, rgba(255,255,255,.8) 7px, rgba(242,246,250,1) 23px) !important;
}

.tabbrowser-tab[pinned="true"],
.tabbrowser-tab[selected="true"] {
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(210,214,218,.8) 6px, rgba(242,246,250,1) 23px) !important;
    border-color: rgba(64,65,66,1) !important;
    border-color: rgba(255,255,255,1) !important;
    -moz-box-shadow: 0 0 1px rgba(255,255,255,1) !important;
  margin-top: 0px !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    padding-top: 3px !important;
}

.tabbrowser-tab[pinned="true"] {
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(255,255,255,0) 5px, rgba(210,214,218,.5) 7px, rgba(242,246,250,.25) 23px) !important;
  height: 26px !important;
    max-height: 26px !important;
    min-height: 24px !important;
}

.tabbrowser-tab[selected="true"] {
  background-color: rgba(240,246,248,1) !important;
}

.tabbrowser-tab[pinned="true"] .tab-icon {
  margin-top: 2px !important;
}

.tabbrowser-tab:not([pinned="true"]):not([selected="true"]) .tab-icon {
  display: none !important;
}

.tabbrowser-tab:not([pinned="true"]):not([selected="true"]) .tab-text {
  margin-left: 2px !important;
}



/* LOADING TABS */

.tabbrowser-tab[busy="true"]:not([selected="true"]) {
  background-color: rgba(64,65,66,1) !important;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(255,255,255,.7) 5px, rgba(210,214,218,.8) 7px, rgba(242,246,250,1) 23px) !important;
}



/* BLANK TABS AS SEPARATORS */

.tabbrowser-tab[label="New Tab"],
.tabbrowser-tab[label="New Tab"]:hover,
.tabbrowser-tab[label="Neuer Tab"],
.tabbrowser-tab[label="Neuer Tab"]:hover {
  background-color: rgba(64,65,66,1) !important;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(210,214,218,.8) 6px, rgba(242,246,250,1) 16px) !important;
  height: 16px !important;
    max-height: 16px !important;
    min-height: 16px !important;
  margin-top: 10px !important;
}

.tabbrowser-tab[label="New Tab"]:hover,
.tabbrowser-tab[label="New Tab"][selected="true"],
.tabbrowser-tab[label="Neuer Tab"]:hover,
.tabbrowser-tab[label="Neuer Tab"][selected="true"] {
  background-color: rgba(240,246,248,1) !important;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.8) 2px, rgba(210,214,218,.8) 6px, rgba(242,246,250,1) 16px) !important;
}

.tabbrowser-tab[label="New Tab"] *,
.tabbrowser-tab[label="Neuer Tab"] * {
  display: none !important;
}

Falls Du ColorfulTabs ausprobieren möchtest, brauchst Du noch das hier, um eine seltsame Leiste unter der Nav-Bar zu entfernen, die dieses Addon aus mir unerfindlichen Gründen da plaziert:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tabs-stack {
  display: none !important;
}

Und hier noch die Styles, um die Ladebalken in den Tabs entsprechend den Firefox 4 Mockups gestaltet. Damit das funktioniert, wird TabMixPlus notwendig sein (Dev-Build aus dem Forum):

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* UNSELEKTIERTE TABS */

.tabbrowser-tab .tab-progress {
  margin: 0 !important;
    margin-top: -4px !important;
  width: 100% !important;
}
.tabbrowser-tab .tab-progress,
.tabbrowser-tab .progress-bar,
.tabbrowser-tab .progress-remainder {
  height: 3px !important;
    max-height: 3px !important;
    min-height: 3px !important;
}
.tabbrowser-tab .progress-bar {
  background-color: rgba(64,65,66,.25) !important;
  border: 1px solid rgba(64,65,66,.5) !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
    -moz-border-radius: 0 0 0 2px !important;
  min-width: 2px !important;
}
.tabbrowser-tab[selected="true"] .progress-bar {
  margin-left: -19px;
}
.tabbrowser-tab .progress-remainder {
  background-color: rgba(240,246,248,1) !important;
  border: 1px solid rgba(64,65,66,.5) !important;
    border-left-width: 0 !important;
    border-top-width: 0 !important;
    -moz-border-radius: 0 0 2px 0 !important;
  min-width: 2px !important;
}



/* SELEKTIERTE TABS */

.tabbrowser-tab[selected="true"] .tab-progress {
  margin-top: -6px !important;
}
.tabbrowser-tab[selected="true"] .progress-bar {
  background-color: rgba(240,0,128,1) !important;
    -moz-box-shadow: 0 0 3px rgba(128,192,0,1) !important;
}

 

[ScoutX]

Erst einmal vielen Dank für den Code. Dies hilft bestimmt auch einigen anderen weiter.
Ich hatte schon sehr vieles ähnlich, leider nur nicht ganz.
Mit Blindheit geschlagen und ich weiß nicht, wie ich dort ein Komma hinfabriziert habe,
denn ich habe Code aus meinem 3.6 Stylesheet für den 4.0 gepastet.
So ist es eben im Leben. Heute morgen hatte ich dies sofort erkannt, nachdem ich gestern Nacht noch den pre3 bearbeitet hatte. Den Fehler kann man darauf reduzieren

/* funktioniert
 .tabbrowser-tab[selected="true"] {
  background-image: -moz-linear-gradient(top, rgba(0,255,255,.8), rgba(210,0,0,.8)) !important;} */

/*funktioniert nicht*/
 .tabbrowser-tab[selected="true"] {
  background-image: -moz-linear-gradient(top, rgba(0,255,255,.25), rgba(210,0,255,.25))[B][COLOR=Red],[/COLOR][/B] !important;}