FF89: kleines optisches Problem beim TAB-aufhübschen

harff182

Ein kleines "optisches Problem" hab ich noch:

Links und rechts im aktiven Tab tauchen noch minimale, dünne senkrechte Linien auf, die ich gerne noch weghätte.

Mein Code fürs Tab-Aussehen:

CSS

/********** Tab-Aussehen verändern     *********************/
/*    210612: FF89neu 
    210616: einige Anpassungen/Zusätze bei 2002Andreas abgeguckt:
    https://www.camp-firefox.de/forum/thema/132802
*/

/*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):
 ***********************
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 */
  
#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;
  margin: 5px 1px 0px 0px !important;
  padding: -10px 0 !important;                    /*2px 0*/
}

/* 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;
   /*  border-radius: 80px !important; */
    background: yellow !important;                   
    font-weight:bold !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: -4px !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;
}

Alles anzeigen

Irgendeine Idee, wie ich die Macken wegbekomme?

grisu2099

Versuch mal:

CSS

.tabbrowser-tab[selected] .tab-content {
border: none !important;
}

harff182

Bleibt ohne Auswirkungen...

grisu2099

Dann weiß ich leider auch nicht weiter...

Mira_Belle

In Zeile 28 hast Du definiert, dass die Tabs nur oben einen Radius aufweisen!

CSS

  border-radius: 10px 10px 0 0 !important;

In Zeile 40 wiederum haben die Tabs oben UND unten einen Radius!

CSS

    border-radius: 20px 20px 20px 20px !important;

Versuche mal

CSS

    border-radius: 20px 20px 0 0 !important;

grisu2099

In Zeile 28 spricht er die nicht aktiven Tabs an, in Zeile 40 die aktiven!

Mira_Belle

Mh, wer lesen kann, ist klar im Vorteil!

Da habe ich ein Problem zu lösen versucht, dass harff182 gar nicht hat.

Wegen der feinen Linien, versuche mal das:

CSS

.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
  border: 1px solid transparent !important;

}

Versuch macht klug.

.DeJaVu

Auch daneben, wenn du schon mit strg+umschalt+alt+i arbeitet :p

CSS

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

harff182

Dank an alle, die zu helfen versuchen

Die Lösung ist augenscheinlich in #8 von .DeJaVu

an Dich dafür

.DeJaVu

Gerne, auch ein Blinder findet mal 'nen krümel

Boersenfeger

Oh, schick, das hat mir auch geholfen...

Ich habe jetzt noch das Problem, das, wenn ich einen Tab anklicke, ein blauer Rahmen erscheint. Wenn ich die Tabs hovere, dann erscheint dieser Rahmen nicht... der via hover ausgewählte Tab wird rot, breit und enthält das Schließen-Kreuz. Wie kann ich den blauen Rahmen ausmerzen?

Vielen Dank!

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;    
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important; 
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -5px !important;  
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 14px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important; 
    }
 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important; 
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; 
    }

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar {
    min-height: 36px !important;
    max-height: 36px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
    margin-top: 0px !important;
    margin-right: 0px !important;
    } 
    
    .tab-icon-sound[soundplaying="true"],
    .tab-icon-sound[muted="true"],
    .tab-icon-sound[activemedia-blocked="true"] {
    background: #FFF !important;
    padding: 0 1px !important;
    }
    
    .tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
    .tab-icon-sound[muted="true"] .tab-icon-sound-image,
    .tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
    fill: #F10 !important;
    }

    .tab-icon-sound-image {
    height: 1.7em !important;
    }
    
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;}

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0px !important;
    padding-top: -5px!important;
    width: 16px !important;
    }

    /*Tabs in Tableiste mittig*/
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.7, 1.7) !important;
    }
    
    image.tab-icon-overlay {
    top: 3px !important;
    padding-right: 3px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
[multiselected]) > .tab-stack > .tab-background
{
    box-shadow: none !important;
}

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

ein blauer Rahmen erscheint

Sieht mit deinem obigen Code hier so aus:

Kein blauer Rahmen zu sehen

Boersenfeger

Danke fürs Testen, dann muss ich mal suchen, welcher andere Code, da ggf. reinhaut..

2002Andreas

Zitat von Boersenfeger

der via hover ausgewählte Tab wird rot

Nicht mit obigen Code. Da ist der aktive Tab rot ohne hover.

Siehe Zeile 25.

Boersenfeger

Jo, das habe ich falsch kommuniziert...

~~Habe den auslösenden Code gefunden~~ Nee nach Neustart ist der Rahmen wieder da, auch ohne Code

CSS

/*AGENT_SHEET*/

/*********************************************************************************************
  simpleMenuWizard: Firefox 57+ userChrome.css tweaks to remove context menu items.
  https://github.com/stonecrusher/simpleMenuWizard
**********************************************************************************************
/*** tab-context.css ***/

/* #tabContextMenu #context_reloadTab,                        /* Tab neu laden           */
 #tabContextMenu #context_reloadAllTabs,                    /* Alle Tabs neu laden     */
 #tabContextMenu #context_reloadTab + menuseparator,
 #tabContextMenu #context_reloadSelectedTabs,               /* Ausgewählte Tabs neu laden*/
 #tabContextMenu #context_toggleMuteTab,                    /* Laut / Still Tab        */
 #tabContextMenu #context_toggleMuteSelectedTabs,           /* Mute / Unmute Tabs      */
 #tabContextMenu #context_pinTab,                           /* Tab anpinnen            */
 #tabContextMenu #context_pinSelectedTabs,                  /* Tabs anpinnen           */
 #tabContextMenu #context_unpinSelectedTabs,                /* Tabs abpinnen           */
 #tabContextMenu #context_unpinTab,                         /* Tab abpinnen            */
 #tabContextMenu #context_duplicateTab,                     /* Tab duplizieren         */
 #tabContextMenu #context_duplicateTabs,                    /* Tabs duplizieren        */
 #tabContextMenu #context_duplicateTabs + menuseparator,    /******** Separator ********/
 #tabContextMenu #context_selectAllTabs,                    /* Alle Tabs auswählen     */
 #tabContextMenu #context_bookmarkTab,                        /* Tabs als LZ hinzufügen  */
 #tabContextMenu #context_bookmarkSelectedTabs,             /* Ausgewählte Tabs als LZ speichern */
 #tabContextMenu #context_reopenInContainer,                /* In Container öffnen     */
 #tabContextMenu #context_moveTabOptions,                    /* Tab verschieben         */
 #tabContextMenu #context_moveToStart,                      /* An den Anfang schieben  */
 #tabContextMenu #context_moveToEnd,                        /* Ans Ende schieben       */
 #tabContextMenu #context_openTabInWindow,                  /* In ein neues Fenster verschieben */
 #tabContextMenu #context_sendTabToDevice,                  /* Send Tab to Device      */
 #tabContextMenu #context_dummy,                            /* Send Tab to Device Submenu not yet supported */
 #tabContextMenu #context_sendTabToDevice + menuseparator,  /******** Separator ********/
 #tabContextMenu #context_closeTabOptions,                  /* Close Multiple Tabs     */
 #tabContextMenu #context_closeTabsToTheEnd,                /* Rechte Tabs schließen   */
 #tabContextMenu #context_closeTabsToTheStart,              /* Linke Tabs schließen    */
 #tabContextMenu #context_closeOtherTabs,                   /* Andere Tabs schließen   */
/*#tabContextMenu #context_undoCloseTab,                    /* Geschlossenen Tab wieder öffnen  */
 #tabContextMenu #context_closeTab,                         /* Tab schließen           */
 #tabContextMenu #context_openANewTab,                        /* Neuer Tab               */
 #context_shareTabURL,                        /* Teilen                   */ 
 #tabContextMenu #context_closeSelectedTabs,                /* Ausgewählte Tabs schließen        */
                                
 #leave_this_dummy_here
{ display:none !important; }

Alles anzeigen

Aber was löst das hier aus?

milupo

Das ist auch kein Rahmen vom Typ „border“, sondern die CSS-Variable --focus-outline(-xxx). Der blaue „Rahmen“ tritt nur bei Klick auf den Tab auf, nicht einfach bei Auswahl des Tabs. Scrollt mal im Regel-Fenster der Entwicklerwerkzeuge herunter, irgendwann sollten dann folgende CSS-Regeln erscheinen:

CSS

:root {
    --focus-outline-color: #0061E0;
}
:root {
    --focus-outline-width: 2px;
}

2002Andreas

Zitat von milupo

irgendwann sollten dann folgende CSS-Regeln erscheinen:

Die betreffen die Urlbar, nicht die Tabs.

Ich habe die Werte und Farbe mal geändert damit man das besser erkennen kann:

milupo

Ich habe für .tabbrowser-tab --focus-outline auf none gesetzt und schon habe ich das Problem nicht mehr.

2002Andreas

Zitat von milupo

schon habe ich das Problem nicht mehr.

Ich habe hier keinen blauen Rahmen um den Tab

Und wenn ich deinen Code mit der Farbe rot nehme passiert hier nichts.

milupo

Zitat von 2002Andreas

Und wenn ich deinen Code mit der Farbe rot nehme passiert hier nichts.

Bei mir passiert plötzlich auch nichts, sprich, wenn ich diese Zeile entderne, erscheint der Rahmen nicht mehr. Gestern konnte ich ihn so noch unterdrücken, jetzt ist er immer noch weg. Er hätte ja eigentlich wiederkommen müssen.