Tabs farbig hervorheben bei nightly UX australis

Zitronella

Hallo, ich habe in meinem Standard Firefox via userChrome.css die Tabs farbig hervorgehoben siehe

Nun probierte ich heute mal die nightly UX aus und würde gerne auch ein ähnliches Aussehen haben. Funktioniert natürlich alles nicht mehr mit dem alten code und sieht dann dementsprechend aus
[Blockierte Grafik: http://i.imgur.com/8XzcVs3.png]

Ich habe auch schon selbst bissel Code von userstyles.org geholt und rumprobiert. Sieht auch schon fast wie früher aus, allerdings mit Fehlern , denn wenn man 3 tabs öffnet und den mittleren schließt, dann bleibt eine Lücke an der Stelle vom geschlossenen Tab siehe Video

Mein ganzer Code ist folgender:

CSS

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

/* Australis Kram entfernen */


    .tab-background-start, .tab-background-end{


        visibility: hidden !important;


        box-shadow: none !important;


    }


    #TabsToolbar, #TabsToolbar *{


        clip-path: none !important;


        max-height: 25px !important;


    }


    #TabsToolbar, .tabbrowser-tab *, .tabs-newtab-button, .toolbarbutton, .tab-background *{


        background-image: none !important;


    }           


    .tabbrowser-tab, .tabs-newtab-button{


        margin-left:  0px !important;


        margin-right: 0px !important;


    }   


    #TabsToolbar, .tabbrowser-tab *, .tabs-newtab-button, .toolbarbutton{


        max-height: 27px !important;        


    }      


    .tabbrowser-tab *{


        margin-top: -1px !important;


    }    


    .tabs-newtab-button{


        max-width: 28px;


    }


    .tab-content{


        padding-left: 2px !important;


        padding-right: 2px !important;


    }


    .tabbrowser-tab{


        max-width: 240px !important;


    }


/* Tab Toolbar durchsichtig */




  #TabsToolbar:not(:-moz-lwtheme)::before {


    box-shadow: 0 0 30px 30px rgb(255,255,255) !important;


    opacity: 0.0 !important;


  }


/* meine Einstellungen von früher*/


        #appmenu-button {
          background: #A90101 !important;
        }


        #appmenu-button dropmarker:before {
          content: "My Firefox" !important;
          color: #FFFFFF !important;
          text-shadow:none;
        }


        #appmenu-button .button-text {
          display: none !important;
        }
        tabs.tabbrowser-tabs#tabbrowser#tabs{


            background-color: transparent!important;
           }




        .tabbrowser-tab, .tabs-newtab-button {


            background: transparent !important;
            color: #ffffff !important;
            text-shadow:  0px 0px 0px !important;
            font-size: 0.9em !important;
            border: #000000 1px solid !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
           box-shadow: inset 0px 0px 1em 0px rgba(255,255,255,.5) !important;
           border-radius: 6px 6px 0px 0px !important;
            height: 24px !important;
           }

        .tabbrowser-tab:not([pinned="true"]){


            margin-left: 1px !important;
            margin-right: 1px !important;
                 color: #ffffff !important;
           }


        .tabbrowser-tab[selected="true"]{
            background: transparent !important;
            color: #ffffff !important;
                 text-shadow:  0px 0px 0px !important;
           box-shadow: inset 0px 0px 10px 0px  #EE0000 !important;
           }
        /* privates Fenster/Tab */
        #main-window[privatebrowsingmode=temporary] #appmenu-button {
          background: #6913A3 !important;
        }




    #main-window[privatebrowsingmode=temporary]:not([disablechrome]) .tabbrowser-tab[selected=true] {
box-shadow: inset 0px 0px 10px 0px  #8b00e9 !important;
    }

Alles anzeigen

Außerdem hätte ich auch gerne diese originalen abgerundeten Tabs vom Australis Design. Könnt ihr mir dabei helfen?
Also primär gehts jetzt erst mal darum diese orginal abgerundeten Tabs einzufärben. Vielleicht ist damit dann auch der gezeigte Fehler behoben. Kann mir da jemand bei helfen :-???
Gruß Zitronella

2002Andreas

Zitat von Zitronella

dann bleibt eine Lücke an der Stelle vom geschlossenen Tab

Entfern bitte mal:

CSS

.tabbrowser-tab{


            max-width: 240px !important;


        }

Das mit dem Hintergrund vom Tab ist mehr als fummelig..bin noch am testen :-??

Evtl. fällt ja einem anderen User noch etwas ein.

Test-Code zur Zeit:

CSS

.tab-background-start[selected=true]::before,
.tab-background-end[selected=true]::before {
   background: red!important;
  background-image: linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.72) 2px, rgba(254,254,254,0.72) 2px, rgba(250,250,250,0.88) 3px, rgba(250,250,250,0.88) 3px, rgba(254,254,254,0.72) 4px, rgba(254,254,254,0.72) 4px, rgba(253,253,253,0.45));
  background-repeat: no-repeat;
}


.tab-background-middle[selected=true] {
  background: red!important;


 border-radius: 25px!important;
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                    linear-gradient(transparent, transparent 2px, rgba(254,254,254,0.72) 2px, rgba(254,254,254,0.72) 2px, rgba(250,250,250,0.88) 3px, rgba(250,250,250,0.88) 3px, rgba(254,254,254,0.72) 4px, rgba(254,254,254,0.72) 4px, rgba(253,253,253,0.45)),
                    linear-gradient(transparent, transparent 2px, -moz-dialog 2px, -moz-dialog);
  background-repeat: repeat-x;
  background-size: auto 100%;


}

Alles anzeigen

Zitronella

Danke dass du mir hilfst. Den Codeschnipsel zu entfernen half tatsächlich beim Fehler mit der Lücke

Ich habe auch grade ein wenig getestet

so sieht mein Test Code aus:

CSS

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


.tab-background-start[selected=true]::before,
.tab-background-end[selected=true]::before ,
.tab-background-middle[selected=true] {
   background: red!important;
   background-color: transparent!important;
   text-shadow:  0px 0px 0px !important;
           box-shadow: inset 0px 0px 10px 0px  #EE0000 !important;
           }
  #TabsToolbar:not(:-moz-lwtheme)::before {


    box-shadow: 0 0 30px 30px rgb(255,255,255) !important;


    opacity: 0.0 !important;


  }

Alles anzeigen

allerdings stimmt da noch einiges nicht, mit dem mittleren Tab Teil.
[Blockierte Grafik: http://i.imgur.com/kyr1cdg.png]
Zudem wäre es klasse wenn man alle Tabs sehen könnte. Also so ein Aussehen wie es besteht, wenn man mit der Maus darüber fährt.
[Blockierte Grafik: http://i.imgur.com/SE8sAlX.png]

2002Andreas

Damit wären alle Tabs sichtbar..

CSS

.tabbrowser-tab > .tab-stack > .tab-background{
  background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                    url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                    url(chrome://browser/skin/tabbrowser/tab-background-end.png);
  background-position: left bottom, 30px bottom, right bottom!important;
  background-repeat: no-repeat;
  background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%!important;


}


    #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
    .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
    #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
    background-image:none!important;


}

Alles anzeigen

Das mit dem Hintergrund der Tabs entwickelt sich zum Problem für mich, zumindest wenn du diese abgerundeten Tabs behalten willst. :-??

PS:
Ich denke auch das es noch zu früh ist für manche Anpassung, wer weiß was noch alles geändert wird.

edvoldi

Kann man nicht das Script " ColorfulTab.uc.js " anpassen??

2002Andreas

Hallo edvoldi...

damit bin zumindest ich überfragt dann.

Zitronella

Andreas: ja, ich scheitere auch am Hintergrund, dachte mir, wenn man einmal die Farbe geändert hat dann ist das alles ganz leicht aber nix da.
Klar, es wird noch vieles geändert, aber ich dachte mir ich probier mal bissel aus, dabei lerne ich auch immer ne ganze Menge durchs rumprobieren. Alleine allerdings würd ich das nicht schaffen, insofern danke ich dir dass du mir dabei hilfst

2002Andreas

Zitat von Zitronella

ich probier mal bissel aus, dabei lerne ich auch immer

:klasse: , mache ich ja auch so.

Zitat von Zitronella

die Farbe geändert hat

Genau das ist das Problem, bei der UX Version besteht der Hintergrund aus 3 Bildern und nicht nur aus Farben wie bis jetzt.

Zitat von Zitronella

dass du mir dabei hilfst

Wenn und was ich kann......immer gerne.
Bin allerdings heute nicht immer am PC..ich genieße die noch Sonne hier im Garten auf dem Liegestuhl :wink:

PS:
Ich habe meine Tabs ja auch geändert, allerdings habe ich diese neue Form dabei gleich mal entfernt.....die mag ich nämlich nicht.
Wir werden diese UX Version schon wieder zu einer anständigen Optik ändern.

Boersenfeger

Zitat von edvoldi

Kann man nicht das Script " ColorfulTab.uc.js " anpassen??

Wenn es soweit ist, wird dem dunklen Gebieter ggf. was einfallen oder seinen Untergebenen in Fern-Ost...

edvoldi

Da ich einer der wenigen bin, dem das Design gefällt, habe ich UX schon zu meinem Standardbrowser gemacht.
Im Alter ist man wohl etwas flexibler, im Moment habe ich das Script ColorfulTab.uc.js deinstalliert und einen Hintergrund gewählt der durchsichtig ist.
Was ich allerdings auch vermisse ist die Status-Bar.

Boersenfeger

Zitat von edvoldi

... dem das Design gefällt...

[Blockierte Grafik: http://fc03.deviantart.net/fs28/f/2008/051/2/b/Puke_by_Kiwi_Fox3.gif]
Es ist nicht persönlich gemeint....

edvoldi

Zitat von Boersenfeger

Es ist nicht persönlich gemeint....

So habe ich es auch nicht aufgefasst.

Zitronella

Heute ist wieder etwas Basteltag und ich möchte mein Vorhaben, von vor 2 Jahren ( :o wie die Zeit vergeht) wieder aufnehmen und bin auch recht weit gekommen. Aber etwas Hilfe bräuchte ich dann doch noch. Ich hoffe jemand erklärt sich bereit.

1. Ich möchte die Schrift in ungelesenen Tabs rot(in privaten Tabs dann lila) haben und in allen anderen (ausgewählt und inaktiven) weiß.
2. Ich möchte beim Schließen-Kreuz von Tabs dieses rote Quadrat weg haben beim drüber fahren und hätte dies gerne durchsichtig. Das müsste dann ungefähr so aussehen (bei dunklem Hintergrund) [attachment=0]Tab-schließen-Kreuz.jpg[/attachment]
3. Beim Button für einen neuen Tab hätte ich auch gerne das Plus [+]-Zeichen in weiß.

Hier ist eine Grafik angehängt (draufklicken), bei der man sieht, wie es momentan ausschaut.
[Blockierte Grafik: http://i.imgur.com/p4th2Jds.gif]

Und hier ist meine userChrome.css

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Tableiste komplett transparent */
@-moz-document url(chrome://browser/content/browser.xul){
	#TabsToolbar:not(:-moz-lwtheme)::after,
	#TabsToolbar:not(:-moz-lwtheme)::before {
	  box-shadow: none !important;
	}
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-start-indicator,
	#tabbrowser-tabs .tabbrowser-arrowscrollbox .arrowscrollbox-overflow-end-indicator {
	  background-image: none !important;
	}


/* Tabs immer anzeigen */
    .tabbrowser-tab > .tab-stack > .tab-background{
      background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                        url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                        url(chrome://browser/skin/tabbrowser/tab-background-end.png);
      background-position: left bottom, 30px bottom, right bottom!important;
      background-repeat: no-repeat;
      background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%!important;


    }


        #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
        .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
        #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
        background-image:none!important;


    }         



/* Weiße Schrift im Tab */
.tabbrowser-tab[selected=true]
{color:#fff!important}


/* aktiven Tab einfärben */
.tab-background,.tab-background-middle{
background-color:transparent!important}


.tab-background .tab-background-middle[selected=true]{
background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
linear-gradient(transparent,transparent 2px,#EE0000 2px,transparent)!important;
background-size:auto 100%!important}


.tab-background-start[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start)!important}


.tab-background-end[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end)!important}


.tab-background .tab-background-start[selected=true]::before,.tab-background .tab-background-end[selected=true]::before{
content:""!important;
display:-moz-box!important;
background-color:transparent!important;
background-image:url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),linear-gradient(#EE0000 0px,transparent)!important} 


/* privates, aktives Fenster/Tab einfärben*/
.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-start[selected=true]:not(:-moz-lwtheme)::before,


.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-end[selected=true]:not(:-moz-lwtheme)::before,


.tabbrowser-tab[privateTab-isPrivate] > .tab-stack > .tab-background > .tab-background-middle[selected=true]:not(:-moz-lwtheme) {






  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),


                    linear-gradient(transparent 2px,#6913A3 2px,#6913A3 2px,transparent 3px,transparent 3px,#6913A3 4px,#6913A3 4px,transparent)!important


}

Alles anzeigen

Zitronella

grummel. Ich stelle gerade fest dass die lila Tabs im privaten Fenster/Tab nur lila sind wenn die Erweiterung Private Tab installiert ist. Vielleicht gibsts da doch ne Lösung die auch funktioniert ohne die Erweiterung.

Boersenfeger

.. wenn deine Signatur (Weiterleitungslink= https://www.camp-firefox.de/forum/viewtopi…art=195#p843786) stimmt, nutzt du u.a. Colorful Tabs. Ich meine mich zu erinnern, das man dort ähnliches einstellen kann..

Zitronella

nein, nutze ich nicht und habe(hatte) ich auch nie genutzt .Es ist und war auch nie in der verlinkten Auflistung drin. Zudem möchte ich das ganze via userChrome.css bewerkstelligen und dazu bräuchte ich eben Hilfe.

Fox2Fox

Das kannst du doch mit CTR realisieren

[Blockierte Grafik: http://fs2.directupload.net/images/150606/temp/ll4vzcsw.jpg]

Zitronella

Ich weiß, aber ich möchte es gerade ohne CTR haben
Aber Punkt 2 ist mir auch nicht so wichtig und Punkt 3 habe ich hinbekommen mit folgendem Code:

CSS

/*Weiße Buttons auf: "Einen neuen Tab öffnen","Alle Tabs auflisten", "Vor/Zurück-Pfeil wenn Tabliste voll" */
	#main-window .tabs-newtab-button,
	#main-window #TabsToolbar > #new-tab-button {
	  list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png) !important;
	  -moz-image-region: rect(0, 16px, 18px, 0) !important;
	}


	#main-window #TabsToolbar > #alltabs-button {
	  list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png) !important;
	  -moz-image-region: rect(0, 9px, 18px, 0) !important;
	}
	#main-window .scrollbutton-up,#main-window .scrollbutton-down
	{list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png") !important; }

Alles anzeigen

Jetzt fehlt nur noch Punkt1

Zitat von Zitronella

1. Ich möchte die Schrift in ungelesenen Tabs rot(in privaten Tabs dann lila) haben und in allen anderen (ausgewählt und inaktiven) weiß.

sowie möglicherweise eine Lösung für

Zitat von Zitronella

Ich stelle gerade fest dass die lila Tabs im privaten Fenster/Tab nur lila sind wenn die Erweiterung Private Tab installiert ist. Vielleicht gibsts da doch ne Lösung die auch funktioniert ohne die Erweiterung.

Boersenfeger

// Entschuldige, wenn ich den Link aus deiner Signatur aufrufe...
https://www.camp-firefox.de/forum/viewtopi…art=195#p843786
lande ich nicht bei dir, sondern bei Etymotic. Das hatte ich nicht beachtet.... und fand deswegen auch Colorful Tabs
Aber deine aufgelisteten Erweiterungen erreiche ich so nicht... übrigens auch nicht via Suche.. Vielleicht könntest du den Link anpassen?

Zitronella

//Dann läuft aber bei deinem Fuchs wohl etwas gewaltig schief. Ich habs selbst in einem neuen Profil nochmal überprüft und auch mit anderen Browsern und lande immer auf meinen Beitrag #197 von Thread "Versionsinfo: Welche Erweiterungen/Themes/Plugins nutzt Ihr?" auf Seite 14 :-??