Code CSS modifie le thème des barres

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 : myahoo, nico@nc, Mori, jpj

Répondre
cobra999
Lézard vert
Messages : 145
Inscription : 27 août 2008, 21:41

Code CSS modifie le thème des barres

Message par cobra999 »

Bonjour,

J'ai trouvé un code ici : viewtopic.php?f=5&t=146656&p=918449&hil ... es#p918449

Code : Tout sélectionner

/*==================== ordre des barres =================*/
/* barre de titre */
/* barre de menu */
/* barre de navigation */
/* barre personnelle */
/* barre d'onglets */

#titlebar {
  -moz-box-ordinal-group: 2;
}

/* afficher [barre de menu] par le raccourci "Alt" */

#main-window[sizemode="maximized"] #toolbar-menubar  {
  display: flex;
  position: absolute;
  top: 5px;
  background-color:black; 
 /* color: menubartext!important;*/
  width: 100vw !important;
}
#main-window[sizemode="normal"] #toolbar-menubar  {
  display: flex;
  position: absolute;
  top: 2px;
 /* background-color:black; 
  color: menubartext!important;*/
  width: 100vw !important;
}
#main-window:not([tabsintitlebar])[sizemode="normal"] {
  margin-top: -25px !important;
}
#main-window:not([tabsintitlebar])[sizemode="maximized"] {
  margin-top: -7px !important;
}

/* si Thème clair activé */
#main-window[lwthemetextcolor="dark"][sizemode="maximized"] #toolbar-menubar:not([inactive="true"]),
#main-window[lwthemetextcolor="dark"][sizemode="maximized"] #toolbar-menubar .toolbarbutton-1
{
  filter: invert(95%); 
}
/* décaler la barre de navigation pour emplacement des boutons fenêtre */
#main-window[tabsintitlebar][sizemode="maximized"] #nav-bar-customization-target {
  max-width: calc(100vw - 140px);
}

/* positionner les boutons contrôle fenêtre */
#main-window[sizemode="maximized"] #toolbar-menubar/*[autohide="true"]*/ .titlebar-buttonbox-container {
  display: flex;
  position: fixed;
  right: 0px;   
  top: 0px !important;
}
#main-window[sizemode="maximized"] #toolbar-menubar[inactive="true"] .titlebar-buttonbox-container {
  display: flex;
  position: fixed;
  right: 0px;   
  top: 8px !important;
}
#main-window[sizemode="normal"] #toolbar-menubar .titlebar-buttonbox-container {
  display: flex;
  position: fixed;
  right: 0px;   
  top:0px!important;
}
#TabsToolbar .titlebar-buttonbox-container {
  display: none;
}

/*#main-window[tabsintitlebar]*/ #toolbar-menubar[autohide="true"]+ #TabsToolbar{
  margin-top: -7px !important;
  margin-right: -40px !important;
}
#nav-bar {
  margin-top: 7px !important;
}

/* recréer espace préhension fenêtre en mode redimentionné */
#main-window[sizemode="normal"] #navigator-toolbox {
  padding-top: 15px !important;
  -moz-window-dragging: drag !important;
}

/* supprimer décalage gauche de la barre d'onglets */
#main-window[sizemode="normal"]  #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
  display:none;
}

/* pour les boutons placés dans la barre de menu */
#toolbar-menubar .toolbarbutton-1 {
  margin-top: -5px !important;
}

/* boutons controle fenêtre en plein écran (F11) */
#main-window[sizemode="fullscreen"] #window-controls[pack="end"] {
   display: flex;
  position: fixed;
  right: 0px;   
  top:-0px!important;
}

/************************************************************/
/* si [barre de menu] toujours affichée, ajouter ces règles */
/************************************************************/
#main-window:not([tabsintitlebar])[sizemode="normal"]  #nav-bar {
  margin-top: 32px !important;
}
#main-window[sizemode="maximized"] #nav-bar {
  margin-top: 30px !important; 
}
#main-window[tabsintitlebar] #nav-bar-customization-target {
  max-width: 100vw !important;
}
#toolbar-menubar {
  background-color:initial !important;
}
#toolbar-menubar + #TabsToolbar{
  margin-top: -10px !important;
}
#main-window[sizemode="normal"] #toolbar-menubar[autohide="false"] + #TabsToolbar {
  margin-top: 0px !important;
}
/***********************************************************/
/* fin [barre de menu] toujours affichée */
pour retrouver enfin le bon ordre des barres sauf qu'il modifie le thème esthétique que j'ai installé .

image avec mon ancien code mais ordre des barres non souhaitée : ( sur l'image faire clic-droit " ouvrir dans un nouvel onglet " )

Image

et avec le nouveau code cité plus haut : ( sur l'image faire clic-droit " ouvrir dans un nouvel onglet " )

Image

Si quelqu'un peut me dire les lignes à modifier ( je ne suis pas expert je précise ) , merci !

Autre question importante : quand vous proposez des codes pour modifier telle ou telle fonctions /apparences comment fait on pour qu'ils s'ajoutent ; je m'explique : j'ai trouvé donc le code pour avoir un ordre des barres ( barre de titre , barre d’adresse , etc... ) ...et un autre code pour Diminuer l'espace vertical des marques-pages.
- si je fait 2 fichiers userChrome.css ça va pas , ça porte le même nom ou alors il faut les chiffrer : userChrome1 , userChrome2 ?

- ou si j'ajoute un code je le met simplement à la suite du premier en laissant un espace entre les 2 ?

Merci
Agent virtuel

Re: Code CSS modifie le thème des barres

Message par Agent virtuel »

Bonjour

Par exemple
viewtopic.php?f=5&t=146650
viewtopic.php?f=5&t=146328

Code : Tout sélectionner

/* Diminuer l'espace vertical des marques-pages  */

/* Use Normal top and bottom padding for compact */
#PlacesToolbarItems .bookmark-item {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

/***Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px 8px !important;
}

/* Onglets en dessous de la barre d'adresse */

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
Image

Et pour la barre de titre https://support.mozilla.org/fr/kb/perso ... ersonnelle
Ai coché la case à côté de Barre de titre en bas à gauche
Dernière modification par Agent virtuel le 20 sept. 2021, 11:28, modifié 1 fois.
Avatar de l’utilisateur
lool_lauris
Animal mythique
Messages : 7151
Inscription : 14 mars 2008, 22:51

Re: Code CSS modifie le thème des barres

Message par lool_lauris »

Salut,

Concernant la personnalisation par ajout d'un fichier userChrome.css, tu trouveras toutes les informations nécessaires en consultant ce lien => https://www.userchrome.org/
.
Soutenez le Libre !

Image
cobra999
Lézard vert
Messages : 145
Inscription : 27 août 2008, 21:41

Re: Code CSS modifie le thème des barres

Message par cobra999 »

@ Agent virtuel ,

Merci , les liens que tu m'a donné je les avait déjà trouvé , par contre 2 choses :
1 - ça ne change rien concernant l’apparence du thème, c'est toujours comme l'image 2
2 - quel chiffre doit on modifier pour diminuer encore l'espace entre les liens ( dans une liste déroulante ) ? si c'est encore possible ; il n'y a pas d'indication donné dans le premier lien .

Merci pour le code entier ( mes questions au-dessus ) , donc on ajoute juste un espace entre chacun , c'est ça ?

@ Merci lool_lauris ,

Merci , mais je ne suis pas anglophone

Edit : je viens de voir que si j'enlève la barre de menu les noms ( fichiers , éditions , tec ) sont supprimés mais :
1 : la barre reste
2 : une fait légèrement agrandir en hauteur la barre perso ( disons 2 mm )
Avatar de l’utilisateur
lool_lauris
Animal mythique
Messages : 7151
Inscription : 14 mars 2008, 22:51

Re: Code CSS modifie le thème des barres

Message par lool_lauris »

cobra999 a écrit : 20 sept. 2021, 11:54 Merci , mais je ne suis pas anglophone
=> https://addons.mozilla.org/en-US/firefo ... /to-deepl/
.
Soutenez le Libre !

Image
Freddy
Lézard à collerette
Messages : 497
Inscription : 15 nov. 2009, 11:37

Re: Code CSS modifie le thème des barres

Message par Freddy »

Bonjour,

Pour ce qui est de la couleur de fond des barres, tu peux ajouter cette règle (où tu veux dans ce que tu as déjà de présent dans ton fichier userchrome, au début, à la fin, à la suite d'une règle qui te plait bien :wink:, c'est mieux pour s'y retrouver si ça reste en rapport avec le changement d'ordre des barres)

Code : Tout sélectionner

/* supprimer couleur de fond barre navigation et personnelle */
#main-window[lwtheme-image="true"] .browser-toolbar:not(.titlebar-color) {
background-color: transparent !important;
}
cobra999 a écrit : 20 sept. 2021, 11:54 Edit : je viens de voir que si j'enlève la barre de menu les noms ( fichiers , éditions , tec ) sont supprimés mais :
1 : la barre reste
2 : une fait légèrement agrandir en hauteur la barre perso ( disons 2 mm
si tu choisis de ne pas afficher la barre de menu, il faut désactiver une partie du code, c'est précisé dedans et c'est à cet endroit (à la fin du code de ton premier message) tu l'inserts entre ces deux /* */ comme ceci:
/************************************************************/
/* si [barre de menu] toujours affichée, ajouter ces règles */
/************************************************************/
/*
#main-window:not([tabsintitlebar])[sizemode="normal"] #nav-bar {
margin-top: 32px !important;
}
#main-window[sizemode="maximized"] #nav-bar {
margin-top: 30px !important;
}
#main-window[tabsintitlebar] #nav-bar-customization-target {
max-width: 100vw !important;
}
#toolbar-menubar {
background-color:initial !important;
}
#toolbar-menubar + #TabsToolbar{
margin-top: -10px !important;
}
#main-window[sizemode="normal"] #toolbar-menubar[autohide="false"] + #TabsToolbar {
margin-top: 0px !important;
}
*/
/***********************************************************/
/* fin [barre de menu] toujours affichée */
cobra999 a écrit : 20 sept. 2021, 11:54 2 - quel chiffre doit on modifier pour diminuer encore l'espace entre les liens ( dans une liste déroulante ) ? si c'est encore possible ; il n'y a pas d'indication donné dans le premier lien .
...pas réussi avec seulement ce qu'il y a de proposé dans ce code, par contre en ajoutant cette règle:

Code : Tout sélectionner

/* Diminuer l'espace vertical des marques-pages  */
 
#PlacesToolbarItems .bookmark-item > menupopup > menuitem {
  margin-top: -3px !important;
qui peut apparemment même faire l'affaire à elle seule en choisissant une valeur plus grande, du genre margin-top: -12px
cobra999 a écrit : 20 sept. 2021, 10:44 - ou si j'ajoute un code je le met simplement à la suite du premier en laissant un espace entre les 2 ?
Oui, et pour plus de clarté tu peux créer des séparations avec ou sans commentaires, du moment que ce soit compris entre deux /*...*/
par exemples:
/**************************************/
ou
/*=========================*/
ou
/******* je suis une séparation ******/
ou
/*##########################*/
/*----- et ben moi aussi !!! ------*/
/*##########################*/

Et mieux encore quand on a plusieurs modifs et que c'est un peu le souk pour s'y retrouver ou pour en désactiver que certaines,
:arrow: dans le dossier "chrome" où ce trouve déjà le fichier "userChrome.css, tu crées un dossier (nommé par exemple "modifs")
:arrow: dans ce dossier tu peux créer les fichiers de chaque partie où tu veux faire intervenir des changements,
par exemple: "ordre des barres.css", "espace des marque-pages.css", "apparence des onglets.css",...
:arrow: et dans le fichier "userChrome.css" tu inscris ceci:
@import "modifs/ordre-des-barres.css";
@import "modifs/espace des marque-pages.css";
@import "modifs/apparence des onglets.css";
cobra999
Lézard vert
Messages : 145
Inscription : 27 août 2008, 21:41

Re: Code CSS modifie le thème des barres

Message par cobra999 »

@ Freddy ,

Merci , je procède doucement car pas trop de temps et pas l'habitude de mettre les mains dans les codes .

/* supprimer couleur de fond barre navigation et personnelle */
Super :D ça a marché sauf que j'ai une ligne grisée apparente entre la barre d'adresse et la barre de titre ( si elle reste tant pis c'est pas grave , si on peut l'enlever tant mieux ) .

Image

Après pour : /* Diminuer l'espace vertical des marques-pages */
ça m'inverse la position barre d'onglet qui passe au dessus de la barre perso :roll: , et ça annule les réductions d'écart en hauteur entre les onglets listés ( un peu comme un retour à l'origine ) ...c'est pas logique bon après j'avais , à la base , repris le code d'Agent Virtuel ( + rajout au-dessus ) et comme il y a un mélange de français et d'anglais ( que je ne comprend pas ) je suis paumé .

voici ce que j'ai actuellement , je n'ai pas encore mis de séparation sauf celle du haut car j'avais mis un de tes codes cité plus haut :

Code : Tout sélectionner

/**************************************/

/* supprimer couleur de fond barre navigation et personnelle */
#main-window[lwtheme-image="true"] .browser-toolbar:not(.titlebar-color) {
background-color: transparent !important;
}

/* Hauteur des onglets */
*|*:root { --tab-min-height: 25px !important;} /*ajuster le chiffre pour régler la hauteur*/

/* Diminuer l'espace vertical des marques-pages  */

/* Use Normal top and bottom padding for compact */
#PlacesToolbarItems .bookmark-item {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

/***Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px 8px !important;
}

/* Onglets en dessous de la barre d'adresse */

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
j’attends de voir ce que tu en penses , si tu trouve pourquoi ton second code cité plus haut fait que ça déconne après le rajout ( code ) pour enlevé la barre de titre ( quand j'en ai pas besoin , c'est mon désir ) ;
Autre chose : je ne sais pas si je pouvais rajouté tout entier /* si [barre de menu] toujours affichée, ajouter ces règles */ ....et pas que " tu l'inserts entre ces deux /* */ comme ceci: "
je demande car je comprend rien aux termes anglais .

Merci encore pour ton aide et de m'avoir appris comment faire certaines choses que j'vais demandé et d'autres que je ne connaissais pas .
Anonyme1
Varan
Messages : 1474
Inscription : 05 juil. 2006, 15:54

Re: Code CSS modifie le thème des barres

Message par Anonyme1 »

Bonjour,
Certain confonde les Barres:
Petit rappelle: Ne pas mélanger le nom des barres.
Lien de l'image: https://i.postimg.cc/PfF6Cpcg/1.jpg




Autre petit rappelle:
Pour enlever la Barre de Titre ou/et La Barre de Menu
Dans Personnaliser la barre d'outil.. → Cliquez sur les trois barres horizontales en haut a droite → puis sur Outils supplémentaires et choisir Personnaliser la barre d’outils…

Pour enlever la Barre de Titre → décocher la case Barre de titre, même chose pour la Barre de Menu
Lien de l'image: https://i.postimg.cc/X75d8pHB/2.png
Image
A+ :wink:
Freddy
Lézard à collerette
Messages : 497
Inscription : 15 nov. 2009, 11:37

Re: Code CSS modifie le thème des barres

Message par Freddy »

cobra999 a écrit : 21 sept. 2021, 07:48 /* supprimer couleur de fond barre navigation et personnelle */
Super :D ça a marché sauf que j'ai une ligne grisée apparente entre la barre d'adresse et la barre de titre ( si elle reste tant pis c'est pas grave , si on peut l'enlever tant mieux ) .
avec ça, ça devrait aller:

Code : Tout sélectionner

/* supprimer trait sous la barre de menu */
#main-window[lwtheme-image="true"] #nav-bar {
  box-shadow: none !important;
}
cobra999 a écrit : 21 sept. 2021, 07:48 Après pour : /* Diminuer l'espace vertical des marques-pages */
ça m'inverse la position barre d'onglet qui passe au dessus de la barre perso :roll: , et ça annule les réductions d'écart en hauteur entre les onglets listés ( un peu comme un retour à l'origine )
cobra999 a écrit : 21 sept. 2021, 07:48 j’attends de voir ce que tu en penses , si tu trouve pourquoi ton second code cité plus haut fait que ça déconne après le rajout
ce qui déconne c'est moi dans mon copier/coller, le copiement l'a pas pris l'accolade de fermeture et du coup y a erreur de syntaxe dans la lecture du fichier et firefox n'en veux pas :roll:
Bon d'après l'illustration de GlopGlop, y pourtant pas la "barre à bière" d'intégrer :mrgreen: :lol: ...bon voilà en mieux:

Code : Tout sélectionner

/* Diminuer l'espace vertical dans les dossiers de marques-pages  */
#PlacesToolbarItems .bookmark-item > menupopup > menuitem {
  margin-top: -3px !important;
}
cobra999 a écrit : 21 sept. 2021, 07:48 Autre chose : je ne sais pas si je pouvais rajouté tout entier /* si [barre de menu] toujours affichée, ajouter ces règles */ ....et pas que " tu l'inserts entre ces deux /* */ comme ceci: "
ce code est valable avec la version de ton premier post, d'après ce que tu as dans ton fichier (que tu as eu raison de coller ici, ça permet de mieux avancer dans la résolution des problèmes :wink: ) il vaut mieux que tu colles ça:

Code : Tout sélectionner

/**********************************************/
/*!!!!!! si [barre de menu] pas activée !!!!!!*/
/**********************************************/
/*supprimer l'espace restant*/
 #nav-bar {
  margin-top: -30px !important;
}

/*ajouter une couleur de fond si on affiche la [barre de menu] par la touche "Alt"*/
/*qui permet un affichage temporaire de la barre*/
#menubar-items {
  background-color: black !important;
}
/**********************************************/
/*fin [barre de menu] pas activée*/
/**********************************************/
:arrow: Précision
L'interface utilisateur de Firefox est agencée ainsi (dans son codage)
--> barre de titre
     -->barre de menu
     -->barre d'onglets
-->barre de navigation
-->barre personnelle

Et pour faire court, les barres de menu et d'onglets sont des "enfants" de la barre de titre, et en "css" il n'est pas possible de faire:
Je veux agir sur la barre de navigation (qui est frère de barre de titre et personnelle) suivant une condition qui dépend de la barre de menu (enfant de barre de titre)
Je ne sais pas si c'est clair, mais donc qu'on ne peut pas supprimer l'espace de la barre de menu quand on ne veut pas l'afficher, en tout cas avec ce changement d'ordre des barres. :-?
Donc tout ça pour dire que si tu choisis de ne pas afficher la barre de menu, il faut intervenir dans le fichier userchrome pour faire apparaitre le nouvel agencement désiré; et c'est pour cela que je propose la solution du raccourci de la touche "Alt" qui permet de la faire apparaitre seulement quand on veut s'en servir.

Dernier point ici les règles sont activées, mais si tu veux afficher en permanence la barre de menu tu les désactive en les mettant entre les fameux /*...*/

Pour résumer tout ça je te colle ton code que tu as donné, mais avec les modifs que j'ai ajouté et restructuré un peu l'ensemble pour plus de clarté (c'est qu'un exemple)(et j'ai traduit les commentaire en laissant le l'original)

Code : Tout sélectionner

/*======= Hauteur des onglets =======*/
*|*:root { --tab-min-height: 25px !important;} /*ajuster le chiffre pour régler la hauteur*/



/*======= Diminuer l'espace vertical des marques-pages  =======*/

/* Use Normal top and bottom padding for compact */
/* Diminuer la hauteur de la barre personnelle */ 
#PlacesToolbarItems .bookmark-item {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

/***Tighten up drop-down/context/popup menu spacing ***/
/***Resserrer l'espacement des menus déroulants/contextuels/popup***/

menupopup > menuitem, menupopup > menu {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px 8px !important;
}

/* Diminuer l'espace vertical dans les dossiers de marques-pages  */
#PlacesToolbarItems .bookmark-item > menupopup > menuitem {
  margin-top: -3px !important;
}



/*======= Onglets en dessous de la barre d'adresse =======*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }


/*================================*/

/* supprimer couleur de fond barre navigation et personnelle */
#main-window[lwtheme-image="true"] .browser-toolbar:not(.titlebar-color) {
background-color: transparent !important;
}

/* supprimer trait sous la barre de menu */
#main-window[lwtheme-image="true"] #nav-bar {
  box-shadow: none !important;
}

/**********************************************/
/*!!!!!! si [barre de menu] pas activée !!!!!!*/
/**********************************************/
/*supprimer l'espace restant*/
/*
 #nav-bar {
  margin-top: -30px !important;
}
/**/

/*ajouter une couleur de fond si on affiche la [barre de menu] par la touche "Alt"*/
/*qui permet un affichage temporaire de la barre*/
/*
#menubar-items {
  background-color: black !important;
}
/**/
/**********************************************/
/*fin [barre de menu] pas activée*/
/**********************************************/
Par contre ici les modifs pour la "barre de menu non affichée" ne sont pas activées, pour les activer il suffit de supprimer le premier /*
et en laissant à la fin le /**/
(c'est une astuce qui permet d'aller plus vite, quand on a /*---/**/ tout ce qui est en rouge n'est pas pris en compte.
Et si on supprime le premier ça donne ---/**/
cobra999
Lézard vert
Messages : 145
Inscription : 27 août 2008, 21:41

Re: Code CSS modifie le thème des barres

Message par cobra999 »

Bonjour Freddy , et désolé du retard pour mon remerciement ( semaine chargée en espaces verts )

Merci pour toutes tes explications , très intéressant de savoir même si je ne suis pas calé sur le sujet ; je prend note et je reviendrais dès que j'aurais plus de temps pour m'en occuper , histoire de faire un retour voir de poser d'éventuelle questions.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Ahrefs [Bot], clara99, gopi et 19 invités