FF89: kleines optisches Problem beim TAB-aufhübschen

2002Andreas

Zitat von Boersenfeger

die Tabs noch 2oder 3 px nach unten rutschen

In Zeile 111:

margin-bottom: 1px !important;

den Wert mal ändern, z.B. auf -1px

Boersenfeger

kann man auch mit halben Pixeln arbeiten?

Jetzt fehlt es unten... oder die Tableiste 2 Px breiter....

2002Andreas

Zitat von Boersenfeger

mit halben Pixeln arbeiten?

Ja.

Dann mit Punkt dazwischen: 1.8px

Zitat von Boersenfeger

oder die Tableiste 2 Px breiter

In Zeile 108 den Wert ändern.

max-height: 36px !important;

Boersenfeger

CSS

    #TabsToolbar .tabbrowser-tab {
    max-height: 34px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 2px !important;
    }

Mit diesen Werten siehts jetzt gut aus...

Vielen Dank mal wieder....

BTW: Wie kann man eigentlich einen Beitrag als hilfreich kennzeichnen?

2002Andreas

Zitat von Boersenfeger

einen Beitrag als hilfreich kennzeichnen?

In dem Beitrag dann rechts auf den Stern klicken.

Boersenfeger

Wo kann ich denn da auf bearbeiten klicken, das kann ich doch nur bei meinen eigenen...

Ich habe jetzt extra den Camp Firefox Code ausgeschaltet, damit ich auch alles sehe, aber ich bin blind..

Sören Hentzschel

Auf "Bearbeiten" sollst du ja nicht klicken. Und natürlich kannst du nur Beiträge in den Themen als hilfreichste Antwort markieren, die von dir erstellt worden sind. Denn du kannst ja nicht für den Themenersteller sprechen, was ihm / ihr am meisten geholfen hat. Dieses Thema hier ist nicht von dir, ergo keine Option.

Boersenfeger

Ah, danke...

ErSchonWieder

Zitat von Boersenfeger

Mit diesen Werten siehts jetzt gut aus...

Aber wäre es nicht noch "schöner", wenn der Text im Tab mittig, vertikal gesehen, stehen würde?

Etwa so:

Boersenfeger

Hast du eine Idee dazu?

ErSchonWieder

Nein

Bei mir (Windows 7 - Desktop at 125%) und rechteckigen Tabs funktioniert es mit

/* ### TABs UNTER Adressleiste ### */
#titlebar {-moz-box-ordinal-group: 100 !important;}

/* ### TAB Höhe so klein wie möglich (normal 26px) ### */
#main-window {--tab-min-height: 20px !important;}

ganz gut - aber ob das hilft?

2002Andreas

Zitat von Boersenfeger

Hast du eine Idee dazu?

Bin zwar nicht gemeint, aber..

Teste bitte, den Wert evtl. noch anpassen.

CSS

    .tab-content {
    margin-top: -8px !important;
    }

Boersenfeger

Du bist natürlich immer gemeint...
Mit dem Wert

CSS

 -4px

sieht es dann so aus:

camp-firefox.de/attachment/31470/

2002Andreas

Zitat von Boersenfeger

Du bist natürlich immer gemeint..

Ok...freut mich wenn es mal wieder funktioniert hat

ErSchonWieder

Na also; geht doch...

J87

Zitat von 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

gibts das ganze auch für mehrreihige Tabs?

Optisch gefällt mir das nämlich echt gut