weis nicht wozu dieser CSS Code ist

Son Goku

Hallo,

beim umschreiben meiner CSS Dateien ist mir folgender Code untergekommen

CSS

:root:not([customizing]) .toolbarbutton-1[disabled="true"],
#nav-bar-overflow-button[disabled="true"], 
#PanelUI-menu-button[disabled="true"] {
    opacity: 0.2 !important;  /* Org 0.4 */ 
    }

ich weis leider nicht mehr wofür der ist ?

ok der Code soll was durchsichtiger machen aber was ?

kan nmir das jemand sagen ?

grisu2099

Das dunkelt nicht aktive Buttons ab. Die verwendete Farbe ist dann nicht so leuchtend, bzw. hell.

Son Goku

Danke.

Drachen

Hallo grisu,

würde so ein Code auch bei Proton helfen im System-Theme und den aktiven Tab damit besser herausstellen? Der geringe Kontrast stellt mich leider vor Probleme beim zügigen Erkennen des gerade aktiven Tabs :-/

Falls ja, kann ich den Code 1:1 übernehmen oder was müsste ich konkret anpassen?

Danke vorab

Drachen

.DeJaVu

Vielleicht solltest du deine Frage in einem eigenen Thema stellen, denn das, was du möchtest, funktioniert so nicht. Was ich mir erarbeitet habe, dass v89 so wie v88 bzw v87 aussieht:

CSS

/*Tabs eckig, no margin, color not active*/

#TabsToolbar #alltabs-button
{
    display: none !important;
}

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: #A3A3A3 !important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
    border-top: 2px solid transparent !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover
{
    border-top: 2px solid #757575 !important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
}

.tabbrowser-tab .tab-background[selected="true"] {
    background-color: #F9F9FA !important;
}


.tabbrowser-tab
{
    padding-inline: unset !important;
}

Alles anzeigen

Boersenfeger

Ist hier so umgesetzt

CSS

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

Drachen

Zitat von .DeJaVu

Vielleicht solltest du deine Frage in einem eigenen Thema stellen

Hab ich doch längst, siehe einige Proton-Änderungen abmildern und dort die erste meiner drei Fragen

Den Code teste ich, vielen lieben Dank

Boersenfeger danke auch dir. Wenn ich die inaktiven Tabs nicht zufriedenstellend abgedunkelt bekomme, dann komme ich ggf. auf das Hervorheben des aktiven Tabs zurück

Boersenfeger

Hier poste ich mal meinen ganzen Tabs-Code.. der ist hier im Forum gewachsen und hat einige Väter...

Vielleicht kannst du oder Mitlesende etwas davon gebrauchen....

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 angepasst,
    * unten kein Rahmen -> Abschlussrahmen vom Container.*/

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

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe.*/
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !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: 22px !important;
    width:  22px !important;
    margin-left: 5px !important;
    margin-bottom: 0px !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: 1px !important;
    padding: 0 !important;
    color: black !important; }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 18px !important;
    width:  18px !important;
    background-color: red !important;
    border-radius: 5px !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;}

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

    .tabbrowser-tab {
    box-shadow: none !important;
    margin-right: 0 !important;}
    
    #tabbrowser-tabs:not([positionpinnedtabs]) > 
    #tabbrowser-arrowscrollbox > 
    .tabbrowser-tab[pinned] + 
    .tabbrowser-tab:not([pinned]) {
    margin-inline-start: 6px !important;}

    .tabbrowser-tab .tab-content {
    background-image: linear-gradient(to bottom, dimgrey 0%, dimgrey 14%, dimgrey 14%, dimgrey 100%) !important;
    padding: 0 3px !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;}
    
    .tabbrowser-tab[selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, dimgrey 14%, dimgrey 100%) !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;}
    
    .tabbrowser-tab:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;}
    
    .tabbrowser-tab[selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;} 

    .tab-throbber:not([pinned]),
    .tab-sharing-icon-overlay:not([pinned]),
    .tab-icon-pending:not([pinned]),
    .tab-icon-image:not([pinned]) {
    margin-top: 2px !important;
    margin-inline-end: 5px !important;}

    .tabbrowser-tab .tab-content .tab-text.tab-label,
    .tabbrowser-tab:hover .tab-content .tab-text.tab-label {
    margin-top: 1px !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: 3px !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.9em !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;
    width: 16px !important;}

    /* Tab Mindestbreite einstellen */
    
    .tabbrowser-tab:not([pinned]) {
    -moz-box-flex: 0 !important;
    min-width: 250px !important;
}

Alles anzeigen

weis nicht wozu dieser CSS Code ist

Ähnliche Themen

About Seiten mit CSS Codes anpassen

Grafik-Info

Urlbar-Schrift bitte komplett schwarz

Diverse Skripts funktionieren nicht mehr

Menü- und Navigations-Symbolleiste automatisch verstecken?

Schaltflächen vergrössern bzw. Fehler Lesezeichen Hover-Effekt