Couleur des onglets

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : Mori, myahoo, jpj, nico@nc

Répondre
vinces
Lézard vert
Messages : 198
Enregistré le : 05 nov. 2003, 01:16

Couleur des onglets

Message par vinces » 10 sept. 2019, 10:35

Il y a quelque temps j'avais créé un userChrome.css pour diverses petites modifs avec des lignes de codes trouvé ici et là, ça fonctionnait bien mais depuis quelques versions de FF certaines lignes de code sont inopérantes.

Le positionnement de la barre des onglet dessous fonctionne bien donc le userchrome est bien pris en compte (je n'ai pas de usercontent)

Couleurs des onglets

Code : Tout sélectionner

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: 009900; !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
.tabbrowser-tab[unread] .tab-label{
color: red; !important;
/*font-weight: bold; !important;*/
font-style: italic !important;
Userchrome complet, il y a peut-etre des incohérences et des lignes a ?

Code : Tout sélectionner

/* Ligne obligatoire */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Fin de ligne obligatoire */



@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
	/* set to '0', if no menubar is used */
	#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 18px !important;
	}
	/* set to '0', if no menubar is used */
	#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 34px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
	  top: 8px !important;
	}
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 8px !important;
	}
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-buttonbox-container {
	  display: none !important;
	}
  }
  @media not all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: -8px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
	background-color: Highlight !important;
	color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;

/* Coins arrondi des onglets */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important; } 

/* Supprimer onglet lorsqu'une seule page est ouverte */
#tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; }
#tabbrowser-tabs tab { height: var(--tab-min-height); }
#tabbrowser-tabs tab:first-child:last-child { display: none !important; }

/* Supprimer la barre haute de l'onglet actif */
#TabsToolbar .tabbrowser-tab .tab-line {visibility: hidden}

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: 009900; !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
.tabbrowser-tab[unread] .tab-label{
color: red; !important;
/*font-weight: bold; !important;*/
font-style: italic !important;


Avatar du membre
pepersan
Varan
Messages : 1996
Enregistré le : 31 janv. 2017, 10:57

Re: Couleur des onglets

Message par pepersan » 10 sept. 2019, 18:57

Bonjour

voir ici : viewtopic.php?f=13&t=141630
Firefox 69.0 - W 7

Pour mettre en [Résolu] éditer le premier message du post, en cliquant sur le crayon blanc dans un carré bleu, modifier le titre, en y ajoutant [Résolu]

vinces
Lézard vert
Messages : 198
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 11 sept. 2019, 00:23

Merci de ta réponse mais mon userchrome est bien pris en charge par FF (j'ai bien les onglets en dessous telque les lignes de code d'userchrome le demande) le soucis est ailleurs

A noter que lors de la mise a jour vers FF69 sur mon portable s'est faite intervention de ma part pour la prise en compte d' userchrome alors que sur mon PC de bureau, j'ai du activer "toolkit.legacyUserProfileCustomizations.stylesheets" manuellement

Avatar du membre
pepersan
Varan
Messages : 1996
Enregistré le : 31 janv. 2017, 10:57

Re: Couleur des onglets

Message par pepersan » 12 sept. 2019, 10:59

Firefox 69.0 - W 7

Pour mettre en [Résolu] éditer le premier message du post, en cliquant sur le crayon blanc dans un carré bleu, modifier le titre, en y ajoutant [Résolu]

Freddy
Lézard à collerette
Messages : 360
Enregistré le : 15 nov. 2009, 11:37

Re: Couleur des onglets

Message par Freddy » 13 sept. 2019, 14:18

Bonjour,

D'après mes essais, c'est ok avec ces ptites modifs:

Code : Tout sélectionner

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: #009900 !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
#TabsToolbar .tabbrowser-tab[pending] .tab-label{
color: red !important;
/*font-weight: bold !important;*/
font-style: italic !important;
}
en plus du nom du sélecteur d'attribut pour la deuxième règle (pending), j'ai corrigé:
-pas de ; après la valeur de la propriété si suivi de "!important;"
-oubli du # pour la valeur de la couleur en hexa.
-oubli du } pour la deuxième règle (mais je pense que c'est un oubli de ton copier/coller)

vinces
Lézard vert
Messages : 198
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 13 sept. 2019, 20:47

J'ai apporté les modifs proposé mais sans résultat, je pense que je dois avoir un soucis ailleurs

Freddy
Lézard à collerette
Messages : 360
Enregistré le : 15 nov. 2009, 11:37

Re: Couleur des onglets

Message par Freddy » 14 sept. 2019, 14:57

Dans ton userChrome complet, il manque une } pour la fin de règle juste avant /* Coins arrondi des onglets */
/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/* Coins arrondi des onglets */

vinces
Lézard vert
Messages : 198
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 14 sept. 2019, 23:13

Là, j'ai une petite amélioration, l'onglet actif est en vert, mais les onglets non lu sont toujours de la même couleur, alors qu'ils devraient etre en rouge.

Ce qui fonctionne actuellement dans mon userchrome
- La barre des onglets en dessous
- les coins arrondis des onglets
- l'onglet actif en vert

Donc seule une partie du user chrome est pris en compte

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Bing [Bot] et 2 invités