Probleme mit dem Tab-CSS

2002Andreas

Zitat von Boersenfeger

den oberen Eintrag nicht "erscrollen"

Zitat von 2002Andreas

Such nach dem CSS Code, der dir die Abstände durcheinander gebracht hat.

Alles andere wäre jetzt eine fummelei, zumal man deine ganzen Codes nicht hat/kennt.

Boersenfeger

Hm, ich hatte am Code nichts verändert, erst mit Erscheinen von Nightly 108 trat das auf. Ich hatte bereits alle anderen CSS-Codes, und das sind einige, ausgeschlossen, bis ich dann mit dem Codeschnipsel der mittigen Tabs fündig wurde. An Abständen wurde nichts verändert, also kann ich auch nicht danach suchen.

Hier noch mal der derzeitige Code für die Tabs-Gestaltung mit dem auskommentierten Teil am Ende....

CSS

    @-moz-document url(chrome://browser/content/browser.xhtml){

    /* Tabs rund und farbig */

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

    /* TAB bei bei angewähltem TAB (aktiv):*/
    /* Hintergrundfarbe, Rahmen,*/
    /* Schriftfarbe. */
 
   .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px 18px !important;
    margin-top: 1px !important;  
    border: none !important;
    color: black ! important; 
    margin-bottom: 0 !important;
    }
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: 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]):-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 1em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

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

    @-moz-document url(chrome://browser/content/browser.xhtml){
    
    .tabbrowser-tab[visuallyselected="true"] .tab-label {
    font-weight:  bold !important;
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    height: 20px ! important;
    margin-top: 2px !important;
    padding: 0 !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: -8px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 12px !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: 236px !important;
    max-width: 236px !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.8, 1.8) !important;
    }
    
    image.tab-icon-overlay {
    margin-top: 3px !important;
    }
    
     /* Lautsprechersymbol violet bei Sound */
    
    .tab-icon-overlay[soundplaying] {
    fill: blueviolet !important;
    margin-left: -5px !important;
    }

    /* Lautsprechersymbol gelb bei Stumm */
    
    .tab-icon-overlay[muted] {
    fill: yellow !important;
    margin-left: -5px !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; 
    margin-top: -4px !important;
    justify-content: center !important;
    align-items: center !important;
    }
    
    #TabsToolbar .tabbrowser-tab[selected="true"] .tab-content {
    margin-top: 2px !important;
    }

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

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0 !important; 
    width: 16px !important;
    }
    
    /* Kein Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
    [multiselected]) > .tab-stack > .tab-background
    {
    box-shadow: none !important;
    }
    
    /* Kein blauer Kasten */
    
    tab.tabbrowser-tab {
    --focus-outline-width: 0 !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }
    
    /* Tabs Proton-Design */

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

    #TabsToolbar .toolbarbutton-1 {
    min-height: 34px !important;    
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }
    
    #TabsToolbar .tabbrowser-tab:not([selected="true"])  {
    min-height: 34px !important;
    border: 1px solid #B2B2B2 !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;
    }
    
    /* Tabs in Tableiste mittig 
    
    .scrollbox-clip > scrollbox:not(#PlacesToolbarItems){
    -moz-box-pack: center !important;
    } */

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

mit dem Codeschnipsel der mittigen Tabs fündig wurde.

Boersenfeger

So sieht es dann bei mir ohne Schnipsel aus, wenn ich auf Style Loader Menü klicke

Beachte vielleicht, das ich ja die Statuszeile einblende und dort der UserStyleLoader-Button liegt...

Wenn es mit einer einfachen Schnipseländerung nicht machbar ist, dann muss ich halt drauf verzichten...

2002Andreas

Zitat von Boersenfeger

und dort der UserStyleLoader-Button liegt

Und wenn du ihn mal auf eine andere Leiste verschiebst

Boersenfeger

Nee, das würde ja meinen Fuchs völlig durcheinander bringen...

Edit: Habe ich jetzt mal gemacht und den Button in die URL-Leiste geschoben. Ergebnis: Dort taucht dann der Eintrag zum laden gar nicht mehr auf.

2002Andreas

Zitat von Boersenfeger

mit einer einfachen Schnipseländerung nicht machbar ist

Meinst du das so?

Wenn ja, dann teste bitte diesen CSS Code:

CSS

#usercssloader-menupopup > menu[label="Style Loader Menü"] {
  -moz-box-ordinal-group: 2 !important;
}

Und so sieht das im Nightly auf einer anderen Leiste dann aus:

Boersenfeger

Nein, das bringt in Verbindung mit dem Tabs mittig Schnipsel gar nichts.

Im Gegenteil, mit deinem Code verschwindet der Eintrag komplett, auch ohne den Tabs mittig Schnipsel..

Ich denke, wenn da was funktionieren soll, müsste der Tabs-Code passig für meinen Fuchs gestaltet werden!

CSS

/* Tabs in Tableiste mittig */
    
    .scrollbox-clip > scrollbox:not(#PlacesToolbarItems){
    -moz-box-pack: center !important;
    }

2002Andreas

Zitat von Boersenfeger

mit deinem Code verschwindet der Eintrag komplett

Ist schon alles mehr als eigenartig bei dir

Noch ein Versuch.

Den Eintrag Style Loader Menü tiefer gesetzt:

CSS

#usercssloader-menupopup > menu[label="Style Loader Menü"] {
  margin-top: 20px !important;
}

Wenn das auch nicht funktioniert, dann weiß ich es auch nicht.

Oder gleich das ganze Popup verschieben:

CSS

#usercssloader-menupopup > menu[label="Style Loader Menü"] {
  margin-top: 20px !important;
}

#usercssloader-menupopup {
  margin-top: 50px !important;
}

Boersenfeger

Der Code bewirkt mit meinem Tabs-Schnipsel nichts und Ohne, das der Eintrag tiefer rutscht, das ist aber ja gar nicht notwendig ohne den Schnipsel..

Du hast also explizit für diesen vermaledeiten Schnipsel keine Ideen?

2002Andreas

Zitat von Boersenfeger

Du hast also explizit für diesen vermaledeiten Schnipsel keine Ideen?

Das Problem ist ja nicht der Code, sondern das der Tab dann mittig ist.

Und dadurch bei dir etwas verschoben wird.(warum auch immer)

Zitat von Boersenfeger

Der Code bewirkt mit meinem Tabs-Schnipsel nichts

Wie du auf meinen Sreenshots ja erkennen kannst, wird das Popup verschoben bzw. der Eintrag.

Zitat von 2002Andreas

Wenn das auch nicht funktioniert, dann weiß ich es auch nicht.

PS:

Hier hattest du ja eh schon Probleme mit dem Abstand/Icon von diesem Script.

Zitat von Boersenfeger

das das Loader-Icon nur zur Hälfte zu sehen ist

Und hier mit anderen Abständen:

Beitrag

RE: Symbole in den Kontextmenüs [ Update ]

[…]

Teste mal ohne den Eintrag margin-top.

Und ändere mal den 2ten Wert in Zeile 11.

PS: da passen aber einige Abstände nicht bei dir

2002Andreas

19. Oktober 2022 um 12:50

Boersenfeger

... das war aber unabhängig vom Tabs-Schnipsel und ist auch behoben.. nun gut, dann soll es halt nicht sein...

Danke Dir trotzdem für deine Geduld..