#tabs-newtab-button soll beim hovern die Farbe behalten

harff182

Hab mal wieder ein Problemchen

Mit folgenden Code habe ich meinen #tabs-newtab-button angepaßt:

CSS

#TabsToolbar #tabs-newtab-button {
    border: 2px solid !important;                      /* Rahmen setzen */
    border-radius: 5px 5px 5px 5px !important;         /* Runde Ecken */
    color: black !important;                           /* Farbe des Rahmens  */           
    background: orange !important;                   /* Hintergrundfarbe */
    fill: black !important;                           /* Farbe des "+" */
    font-weight: bold !important;
    margin: 7px 10px 4px 5px !important;            /* Gesamtgröße des Buttons und relative Lage*/
    padding: 0 !important;
}

Nun will ich erreichen, daß sich beim hoverrn farblich nix ändert.

Dazu hab ich mir ausgedacht:

CSS

#tabs-newtab-button:hover {
    background-color: orange !important;               /* Hintergrundfarbe beim hovern gleich*/
}

Klappt nich :nowink:

Was mach ich falsch?

2002Andreas

Zitat von harff182

daß sich beim hoverrn farblich nix ändert.

Teste bitte:

CSS

#TabsToolbar #tabs-newtab-button > image {
    border: 2px solid !important;                      /* Rahmen setzen */
    border-radius: 5px 5px 5px 5px !important;         /* Runde Ecken */
    color: black !important;                           /* Farbe des Rahmens  */           
    background: orange !important;                   /* Hintergrundfarbe */
    fill: black !important;                           /* Farbe des "+" */
    font-weight: bold !important;
    margin: 7px 10px 4px 5px !important;            /* Gesamtgröße des Buttons und relative Lage*/
    padding: 0 !important;
}

#tabs-newtab-button > image:hover {
    background-color: orange !important;               /* Hintergrundfarbe beim hovern gleich*/
}

Alles anzeigen

Wenn das so richtig ist für dich, wäre das die Kurzform dafür:

CSS

#TabsToolbar #tabs-newtab-button > image,
#tabs-newtab-button > image:hover{
    border: 2px solid !important;                      /* Rahmen setzen */
    border-radius: 5px 5px 5px 5px !important;         /* Runde Ecken */
    color: black !important;                           /* Farbe des Rahmens  */           
    background: orange !important;                   /* Hintergrundfarbe */
    fill: black !important;                           /* Farbe des "+" */
    font-weight: bold !important;
    margin: 7px 10px 4px 5px !important;            /* Gesamtgröße des Buttons und relative Lage*/
    padding: 0 !important;
}

Alles anzeigen

harff182

Die Kurzform hat Einzug gehalten. Danke.

So schnell kann man auch mit kleinen Sachen meinereiner eine Freude machen

2002Andreas

Oder auch so:

CSS

#TabsToolbar #tabs-newtab-button {
    border: 2px solid !important;                      /* Rahmen setzen */
    border-radius: 5px 5px 5px 5px !important;         /* Runde Ecken */
    color: black !important;                           /* Farbe des Rahmens  */           
    background: orange !important;                   /* Hintergrundfarbe */
    fill: black !important;                           /* Farbe des "+" */
    margin: 7px 10px 4px 5px !important;            /* Gesamtgröße des Buttons und relative Lage*/
    padding: 0 !important;

}
    
#TabsToolbar #tabs-newtab-button:hover,
#TabsToolbar #tabs-newtab-button:hover > image {
  background: orange !important;
}

Alles anzeigen

Zitat von harff182

Danke.

Gerne doch

harff182

2002Andreas :

Hab noch'n Nachbrenner:

Wenn es Text wäre, würde ich "Bold" fürs "+" versuchen, aber fürn Image hab ich keine Idee

Siehst Du eine Möglichkeit, das Kreuz etwas "dicker" zu machen?

grisu2099

Meinst du in dieser Art?

Dann teste mit diesem geänderten Icon (Pfad mußt du dir dann anpassen...)

CSS

#tabs-newtab-button {
    list-style-image: url("file:///F:/FIREFOX-ICONS/icons/neu.png") !important;
}

harff182

Huch...

Interessanter Ansatz...

Ich teste mal rum bis ich ...

2002Andreas

Zitat von harff182

etwas "dicker" zu machen?

So?

Wenn ja...teste bitte:

CSS

#TabsToolbar #tabs-newtab-button > image,
#tabs-newtab-button > image:hover{
    border: 2px solid !important;                      /* Rahmen setzen */
    border-radius: 5px 5px 5px 5px !important;         /* Runde Ecken */
    color: black !important;                           /* Farbe des Rahmens  */           
    background: orange !important;                   /* Hintergrundfarbe */
    fill: black !important;                           /* Farbe des "+" */
    font-weight: bold !important;
    margin: 5px 10px 4px 5px !important;            /* Gesamtgröße des Buttons und relative Lage*/
    padding: 0 !important;
}


#TabsToolbar #tabs-newtab-button > image {
  width: 49px !important;
  height: 40px !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACtklEQVR4Xu1aO08bQRA+x07AuYeBFJEgVYoUQZZSJaKgpErH7+E30SFFoqQKHaKjJpGi8PI9cHiYy3wSlhDyLrfcjMWeZ6WVXex+O/PN7N3NtxsE2pQBZUAZUAZml4GWhOtpmiUb3zcPsyzvceDHcTTY3dnuJ0mccuA9xOhwAwKvDMrW+cXg3XA4DDnwb0ejDjA5sB5jvJIABWan3b7lwubEmhoBXM5L40hlwJ2A4f8EMAMRAnpJknEbS5hX3JjAEyFAwlApTCVAillfcDUDfImUlJ2aAVLM+oKrGeBLpIqiYCmsplILHP/6vcJZvY2ry0Ga9qjHnEEzlpjf1jf2qJ7vT1gM3+SYh+1zSR2fqG+oI0Kvx+OzPE/ux3HYW8ZR5KIFwMYz6qhIr0lP+PFzb3drkiFGAj71v6ZUz7OyzcHEczC63e750eH+0qS5xoegZA3+HCfqzCFfjH7a3gJlnUV9mauvQUukbnyJYh07bRmAJ3zjm24BS4hFZOiXllK2DJh5AtovLVoS9tgyQOTUSMKJOpg2AubqAPsy10bATLwhZsJJWzYqAb7sVSk7NQNMzOJSghTr08a1+WJ0cnGhd/qEKDIkR3LqkJ+uqeNIHB9PH+HglCSxE1oKUhnWhn4xluqW6f/8mGiSxP6aSLd+7pIACZ0PYwA+oiPqSmf0JIq+pztCR3leQBes3aIoTHFHiBw5IxtAeqVG9r+F/TSnME2wprltos2CDyvLfz5/WWNTlFpBq0RGhmFodGSSPWT/kyW9Nw9B2scitYk3BFA0XWTxSlsEg7whoLJHjgOVAEfCGjdcM6BxIXV0SDPAkbDGDdcMaFxIHR3yJQNQ9Yk0MQI49QTCQukt0sRED6reDkhPWHWwekRjoSvgWgtOpnH1Br83VAYfO+DoUGVAGVAGlAFloCID/wFgmp1azmu+ZgAAAABJRU5ErkJggg==") !important;
  background-repeat: no-repeat !important;
  background-position: 1px 0px !important;
  background-size: 44px 38px !important;
}

Alles anzeigen

grisu2099

Wenn du lieber eine andere Farbe hättest, melde dich...

harff182

Zitat von 2002Andreas

So?

So ähnlich

Sieht grade so aus:

Kann ich mich aber erst morgen drum kümmern, denn morgen ist wieder Arzt-Tag und damit jetzt Bubu-Time

DANKE und guuts nächtle auch beiden...

2002Andreas

Zitat von harff182

Sieht grade so aus:

CSS

#TabsToolbar #tabs-newtab-button > image {
  display: none !important;
}

#TabsToolbar #tabs-newtab-button {
  border: 2px solid !important;           /* Rahmen setzen */
  border-radius: 5px  !important;         /* Runde Ecken */
  width: 29px !important;
  margin-bottom: 5px !important;
  margin-top: 4px !important;
  background: orange !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACtklEQVR4Xu1aO08bQRA+x07AuYeBFJEgVYoUQZZSJaKgpErH7+E30SFFoqQKHaKjJpGi8PI9cHiYy3wSlhDyLrfcjMWeZ6WVXex+O/PN7N3NtxsE2pQBZUAZUAZml4GWhOtpmiUb3zcPsyzvceDHcTTY3dnuJ0mccuA9xOhwAwKvDMrW+cXg3XA4DDnwb0ejDjA5sB5jvJIABWan3b7lwubEmhoBXM5L40hlwJ2A4f8EMAMRAnpJknEbS5hX3JjAEyFAwlApTCVAillfcDUDfImUlJ2aAVLM+oKrGeBLpIqiYCmsplILHP/6vcJZvY2ry0Ga9qjHnEEzlpjf1jf2qJ7vT1gM3+SYh+1zSR2fqG+oI0Kvx+OzPE/ux3HYW8ZR5KIFwMYz6qhIr0lP+PFzb3drkiFGAj71v6ZUz7OyzcHEczC63e750eH+0qS5xoegZA3+HCfqzCFfjH7a3gJlnUV9mauvQUukbnyJYh07bRmAJ3zjm24BS4hFZOiXllK2DJh5AtovLVoS9tgyQOTUSMKJOpg2AubqAPsy10bATLwhZsJJWzYqAb7sVSk7NQNMzOJSghTr08a1+WJ0cnGhd/qEKDIkR3LqkJ+uqeNIHB9PH+HglCSxE1oKUhnWhn4xluqW6f/8mGiSxP6aSLd+7pIACZ0PYwA+oiPqSmf0JIq+pztCR3leQBes3aIoTHFHiBw5IxtAeqVG9r+F/TSnME2wprltos2CDyvLfz5/WWNTlFpBq0RGhmFodGSSPWT/kyW9Nw9B2scitYk3BFA0XWTxSlsEg7whoLJHjgOVAEfCGjdcM6BxIXV0SDPAkbDGDdcMaFxIHR3yJQNQ9Yk0MQI49QTCQukt0sRED6reDkhPWHWwekRjoSvgWgtOpnH1Br83VAYfO+DoUGVAGVAGlAFloCID/wFgmp1azmu+ZgAAAABJRU5ErkJggg==") !important;
  background-repeat: no-repeat !important;
  background-size: 26px 25px !important;
}

Alles anzeigen

Und das ist dein kompl. Code mit allen Änderungen:

CSS

#TabsToolbar #tabs-newtab-button > image {
   display: none !important;
}

#TabsToolbar #tabs-newtab-button {
   border: 2px solid !important;           /* Rahmen setzen */
   border-radius: 5px  !important;         /* Runde Ecken */
   width: 29px !important;
   margin-bottom: 5px !important;
   margin-top: 4px !important;
   background: orange !important;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACtklEQVR4Xu1aO08bQRA+x07AuYeBFJEgVYoUQZZSJaKgpErH7+E30SFFoqQKHaKjJpGi8PI9cHiYy3wSlhDyLrfcjMWeZ6WVXex+O/PN7N3NtxsE2pQBZUAZUAZml4GWhOtpmiUb3zcPsyzvceDHcTTY3dnuJ0mccuA9xOhwAwKvDMrW+cXg3XA4DDnwb0ejDjA5sB5jvJIABWan3b7lwubEmhoBXM5L40hlwJ2A4f8EMAMRAnpJknEbS5hX3JjAEyFAwlApTCVAillfcDUDfImUlJ2aAVLM+oKrGeBLpIqiYCmsplILHP/6vcJZvY2ry0Ga9qjHnEEzlpjf1jf2qJ7vT1gM3+SYh+1zSR2fqG+oI0Kvx+OzPE/ux3HYW8ZR5KIFwMYz6qhIr0lP+PFzb3drkiFGAj71v6ZUz7OyzcHEczC63e750eH+0qS5xoegZA3+HCfqzCFfjH7a3gJlnUV9mauvQUukbnyJYh07bRmAJ3zjm24BS4hFZOiXllK2DJh5AtovLVoS9tgyQOTUSMKJOpg2AubqAPsy10bATLwhZsJJWzYqAb7sVSk7NQNMzOJSghTr08a1+WJ0cnGhd/qEKDIkR3LqkJ+uqeNIHB9PH+HglCSxE1oKUhnWhn4xluqW6f/8mGiSxP6aSLd+7pIACZ0PYwA+oiPqSmf0JIq+pztCR3leQBes3aIoTHFHiBw5IxtAeqVG9r+F/TSnME2wprltos2CDyvLfz5/WWNTlFpBq0RGhmFodGSSPWT/kyW9Nw9B2scitYk3BFA0XWTxSlsEg7whoLJHjgOVAEfCGjdcM6BxIXV0SDPAkbDGDdcMaFxIHR3yJQNQ9Yk0MQI49QTCQukt0sRED6reDkhPWHWwekRjoSvgWgtOpnH1Br83VAYfO+DoUGVAGVAGlAFloCID/wFgmp1azmu+ZgAAAABJRU5ErkJggg==") !important;
    background-repeat: no-repeat !important;
    background-size: 26px 25px !important;
}

/*     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;
}

#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
    box-shadow: none  !important; 
}

Alles anzeigen

harff182

2002Andreas :

Du hast Dir ja richtig Arbeit für mich gemacht

Zitat von 2002Andreas

Und das ist dein kompl. Code mit allen Änderungen:

Tja, nur hab ich schon vor langer Zeit meine userChrome.css funktional in Import-Schnipsel aufgesplittet:

CSS

/*userChrome.css*/
/*Grundsätzliches zum Anfangen*/
@import url("css/01_tabs_unten_andy_neu_89.css");
@import url("css/02_lesezeichentoolbar_89.css");
@import url("css/03_leistenfolge+farben_89.css");
@import url("css/04_Abstaende_kleiner.css");
@import url("css/05_findbar_oben.css");
/*Menü-Leiste*/
@import url("css/11_menuzeileneinträge_pimpen.css");
@import url("css/12_menu_trenner.css");
/*Zusatz-Leisten (Suchbar etc)*/
@import url("css/21_Trenner.css");
@import url("css/22_Rahmen.css");
@import url("css/23_Verti-Bar_pimpen.css");
/*Lesezeichen-Leiste*/
@import url("css/31_standardfoldericon.css");
@import url("css/32_foldericons_erste_ebene.css");
@import url("css/33_fileicons_erste_ebene.css");
@import url("css/34_bookmarktrenner.css");
@import url("css/35_icons_in_ordnern.css");
/*URL-Leiste*/
@import url("css/40_adressleiste_89.css");
@import url("css/41_urlbar_pimpen.css");
@import url("css/42_Rahmen.css");
/*TAB-Leiste*/
@import url("css/51_spinner.css");
@import url("css/52_tabaussehen_BH.css");
@import url("css/53_newtabbutton_grisu.css");
/*sonstiges*/
@import url("css/61_popups_pimpen.css");
@import url("css/62_dlr_pimpen.css");
@import url("css/63_tab_2_fenster.css");
@import url("css/64_link-kontext-reihenfolge.css"); 
@import url("css/65_Tableiste-kontext-reihenfolge.css");
@import url("css/66_bookmark-kontext-reihenfolge.css");

Alles anzeigen

Für den newtab-butten hab ich mit Deinem und Vorschlag von grisu2099 ne Menge rumgetestet um einiges zu lernen und zu verstehen. Ich hab während der Test sogar mit der Bildschirmlupe gecheckt, wann das "+" irgendwie zu "schmutzig" wird und mit welcher GFX-Größe das für mich am angenehmsten ist

Herausgekommen ist dieser schlanke Code, in den ich hoffentlich keine argen Schnitzer eingebaut habe:

CSS

/*  53_newtabbutton_grisu.css*/
/*  New-TAB-Button verschönern                  */
/*    210911:    Anpassungen an die neuen Tabs       */ 
/*  210913: Umbau wegen hovern von Any: https://www.camp-firefox.de/forum/thema/133369 */
/*  210914: grisu-variante fürs "+" */

/*    grisu-Vorschlag => viel mit der GFX-Größe getestet und gelernt ;)*/
#tabs-newtab-button {
    list-style-image: url('../icons/cross_g_64.gif') !important;
}

/*    andys hover-umbau damit die Hintergrundfarbe gleich bleibt*/
#TabsToolbar #tabs-newtab-button > image,
#tabs-newtab-button > image:hover{
    border: 2px solid !important;                          /* Rahmen setzen */
    border-radius: 8px !important;                         /* Runde Ecken */
    color: black !important;                              /* Farbe des Rahmens  */           
    background: orange !important;                        /* Hintergrundfarbe */
    margin: 6px  10px  3px   2px  !important;              /* Gesamtgröße des Buttons und relative Lage ?*/
/*  Sören:  oben rechs unten links  */                    /* separates Info-File zu "margin" und "padding"*/
}

Alles anzeigen

Das sieht dann hier jetzt so aus:

Aber mit dem Füxchen isses je wie mit dem Garten: man findet immer eine Ecke, die man verschlimmbessern kann

In diesem Sinne sei Euch beiden gedankt und ich wünsch Euch einen schönen Abend und eine ruhige Woche...

grisu2099

Freut mich, wenn mein Vorschlag dich inspirieren konnte!

2002Andreas

Zitat von harff182

und ich wünsch Euch einen schönen Abend und eine ruhige Woche...

Danke, das wünsche ich dir auch

Schön wenn du zufrieden bist.

#tabs-newtab-button soll beim hovern die Farbe behalten

harff182 13. September 2021 um 19:07

harff182 13. September 2021 um 19:20