Tab runde Ecken und Hintergrundfarbe,Code inside, Schriftfarbe/Größe auch änderbar ?

Sambatiger

#TabsToolbar .tabbrowser-tab{

background: lightblue !important;

border-radius: 80px !important;

border:none!important;

}

.tab-background[selected="true"] {

background: orange !important;

border-radius: 80px !important;

border:none!important;

}

.tabbrowser-tab::after, .tabbrowser-tab::before {

margin-inline-start: 0px!important;

border-left: 0px solid!important;

border-image:none!important;

border-image-slice: 0!important;

width: 0px!important;

box-sizing: border-box;

opacity: 0!important;

}

.tab-line[selected=true] {

display:none!important

}

1. Schriftart änderbar ?

2. Schriftgröße ?

3. Auch per Farbcode,also anstelle von black = #11111 ?

klickman

So hab ich es für mich angepasst:

Schriftgröße:

CSS

/* GRÖßE SCHRIFT, TAB */
.tabbrowser-tab[selected="true"]{
font-size: 14px !important;
}
.tabbrowser-tab[unread="true"]{
font-size: 14px !important;
}
.tabbrowser-tab[pending="true"]{
font-size: 14px !important;
}
.tabbrowser-tab:hover:not[selected="true"]{
font-size: 14px !important;
}
.tabbrowser-tab{
font-size: 14px !important;
}

Alles anzeigen

Schriftfarbe und -formatierung (fett, kursiv, Textschatten, etc.) (Aris' CustomCSSforFx entnommen:

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/*******************************************/
/* default tab *****************************/

/* text color */
.tabbrowser-tab .tab-label {
  color: white !important;
}
/* text shadow
.tabbrowser-tab .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
} */
/*bold*//*
.tabbrowser-tab .tab-label {
  font-weight: bold !important;
}
/* italic *//*
.tabbrowser-tab .tab-label {
  font-style: italic !important;
}


/*******************************************/
/* selected tab ****************************/

/* text color */
.tabbrowser-tab[selected] .tab-label {
  color: blue !important;
}
/* text shadow
.tabbrowser-tab[selected] .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
} */
/*bold*/
.tabbrowser-tab[selected] .tab-label {
  font-weight: bold !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
  font-style: italic !important;
}

/*******************************************/
/* busy/loading tab ************************/

/* text color *//*
.tabbrowser-tab[busy] .tab-label {
  color: white !important;
}
/* text shadow *//*
.tabbrowser-tab[busy] .tab-label {
  text-shadow:    0px 1px 0px #FFCCFF,
                0px 1px 4px #FFCCFF !important;
} */
/*bold*//*
.tabbrowser-tab[busy] .tab-label {
  font-weight: initial !important;
}
/* italic *//*
.tabbrowser-tab[busy] .tab-label {
  font-style: italic !important;
}


/*******************************************/
/* hovered tab ****************************/

/* text color *//*
.tabbrowser-tab:hover:not([selected]) .tab-label {
  color: white !important;
}
/* text shadow
.tabbrowser-tab:hover:not([selected]) .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
} */
/*bold*/
.tabbrowser-tab:hover:not([selected]) .tab-label {
  font-weight: bold !important;
}
/* italic *//*
.tabbrowser-tab:hover:not([selected]) .tab-label {
  font-style: italic !important;
}


/*******************************************/
/* unloaded/pending tab ********************/

/* text color */
.tabbrowser-tab[pending] .tab-label {
  color: white !important;
}
/* text shadow
.tabbrowser-tab[pending] .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
} */
/*bold*/
.tabbrowser-tab[pending] .tab-label {
  font-weight: bold !important;
}
/* italic */
.tabbrowser-tab[pending] .tab-label {
  font-style: italic !important;
}

/**/

Alles anzeigen

AlphaSigma

Hallo klickman,

gibt es auch noch die Möglichkeit geladene und nicht gelesene Tabs (unread) farbig zu markieren?

Gruß

Alpha

klickman

Das müsste mit diesem Code aus der custom_tab_color_settings.css, ebenfalls von Aris, machbar sein. Farbwerte müsstest du für deine Bedürfnisse anpassen.

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


/* color names, hexcodes, rgb(a) and hsl(a) and gradients can be used */

:root {
    --default_tabs_bg_selected: linear-gradient(to bottom,#FF8800,#FFCC99);
    --default_tabs_toolbar_background: linear-gradient(to bottom,#FFCC99,#FFCC99);
    --default_tabs_bg_default: linear-gradient(to bottom,#FFCC99,#CCCCCC);
    --default_tabs_bg_hovered: linear-gradient(to bottom,#FF9900,#FF6600);
    --default_tabs_bg_unloaded: linear-gradient(to bottom,#FFCC99,#CCCCCC);
    --default_tabs_bg_newtab: linear-gradient(to bottom,#FFCC99,#CCCCCC);
    --default_tabs_bg_newtab_hovered: linear-gradient(to bottom,#FF9900,#FF6600);
}


/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: var(--default_tabs_bg_selected) !important;
}
/* background color on toolbars */
/*#main-window #navigator-toolbox toolbar:not(#TabsToolbar):not(#toolbar-menubar) {
  background: var(--default_tabs_toolbar_background) !important;
}*/

/* background color for 'tabs below navigation toolbar' option */
/*#main-window #navigator-toolbox #TabsToolbar {
  background: var(--default_tabs_toolbar_background) !important;
}*/

/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: var(--default_tabs_bg_default) !important;
}

/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: var(--default_tabs_bg_hovered) !important;
}

/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: var(--default_tabs_bg_unloaded) !important;
}

/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: var(--default_tabs_bg_newtab) !important;
}

/* hovered new tab *************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: var(--default_tabs_bg_newtab_hovered) !important;
}

Alles anzeigen

AlphaSigma

Besten Dank.
Ich meinte aber nur die Schriftfarbe und nicht den ganzen Tab.

klickman

Auch das ist mit einer Datei von Aris möglich. Code aus der custom_tab_text_settings.css:

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/*******************************************/
/* default tab *****************************/

/* text color */
.tabbrowser-tab .tab-label {
  color: black !important;
}
/* text shadow */
.tabbrowser-tab .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
}
/*bold*//*
.tabbrowser-tab .tab-label {
  font-weight: bold !important;
}
/* italic *//*
.tabbrowser-tab .tab-label {
  font-style: italic !important;
}


/*******************************************/
/* selected tab ****************************/

/* text color */
.tabbrowser-tab[selected] .tab-label {
  color: blue !important;
}
/* text shadow */
.tabbrowser-tab[selected] .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
}
/*bold*/
.tabbrowser-tab[selected] .tab-label {
  font-weight: bold !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
  font-style: italic !important;
}

/*******************************************/
/* busy/loading tab ************************/

/* text color *//*
.tabbrowser-tab[busy] .tab-label {
  color: #9933CC !important;
}
/* text shadow *//*
.tabbrowser-tab[busy] .tab-label {
  text-shadow:    0px 1px 0px #FFCCFF,
                0px 1px 4px #FFCCFF !important;
}
/*bold*//*
.tabbrowser-tab[busy] .tab-label {
  font-weight: initial !important;
}
/* italic *//*
.tabbrowser-tab[busy] .tab-label {
  font-style: italic !important;
}


/*******************************************/
/* hovered tab ****************************/

/* text color *//*
.tabbrowser-tab:hover:not([selected]) .tab-label {
  color: black !important;
}
/* text shadow */
.tabbrowser-tab:hover:not([selected]) .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
}
/*bold*/
.tabbrowser-tab:hover:not([selected]) .tab-label {
  font-weight: bold !important;
}
/* italic *//*
.tabbrowser-tab:hover:not([selected]) .tab-label {
  font-style: italic !important;
}


/*******************************************/
/* unloaded/pending tab ********************/

/* text color */
.tabbrowser-tab[pending] .tab-label {
  color: purple !important;
}
/* text shadow */
.tabbrowser-tab[pending] .tab-label {
  text-shadow:    0px 1px 0px white,
                0px 1px 4px white !important;
}
/*bold*/
.tabbrowser-tab[pending] .tab-label {
  font-weight: bold !important;
}
/* italic */
.tabbrowser-tab[pending] .tab-label {
  font-style: italic !important;
}

/**/

Alles anzeigen

Kennst du Aris' customCSSforFx ?

AlphaSigma

Das funktioniert leider nicht.

Ich kann zwar den Text eines geladenen Tab farblich kennzeichnen aber keinen Unterschied hervorheben ob der Tab "gelesen" bzw. "ungelesen" (unread) ist.

Früher ging es mal so:

CSS

/* --- Tabs Schriftfarbe --- */

/* Aktiver Tab */
.tabbrowser-tab[selected="true"] .tab-label {
color: rgba(65, 105, 225, 1.0) !important; / RoyalBlue /
text-shadow: 1px 1px 1px #aaa !important;
font-weight: 600;
font-size: 100%;
}

/* Inaktiver Tab */
.tabbrowser-tab:not([visuallyselected=true]) .tab-label {
color: rgba(0, 135, 0, 1.0) !important; / darkgreen /
text-shadow: 1px 1px 1px #666 !important;
font-weight: 600;
font-size: 90%;
}

/* Geladen aber nicht ausgewählter Tab */
.tabbrowser-tab:not([selected="true"])[unread] .tab-label {
color: rgba(255, 0, 0, 1.0) !important; / red /
text-shadow: 1px 1px 1px #999 !important;
font-weight: 600;
font-size: 90%;
font-style: italic;
}

/* Nicht neugeladen aber besuchter Tab */
.tabbrowser-tab:not([selected="true"])[pending] .tab-label,
.tabbrowser-tab:not([selected="true"])[visited] .tab-label {
color: rgba(0, 0, 0, 0.7) !important; / black /
text-shadow: 1px 1px 1px #bbb !important;
font-weight: 600;
font-size: 90%;
}

/* Ladender Tab */
.tabbrowser-tab[busy] .tab-text.tab-label {
color: rgba(0, 191, 255, 1.0) !important; / deepskyblue /
text-shadow: 1px 1px 1px #999 !important;
font-weight: 600;
font-size: 90%;
}

Alles anzeigen

klickman

Tut mir leid, da muss ich passen. Doch ich bin sicher, dass einer der css-Profis hier weiterhelfen kann.

AlphaSigma

Trotzdem vielen Dank für Deine Mühe.