Re personnaliser 103.0 via userchrome.css [résolu]

[fredbxlbe]

Salut à tous,

La dernière mise à jour a de nouveau chamboulé l'apparence de Firefox et - entre autres- agrandi la hauteur des barres (toutes).
Est-ce que l'un de vous aurait le code à insérer dans userchrome.css pour réduire la hauteur des barres (menu, adresse, personnelle et onglets) de façon égale et dans les 2 affichages (max et intermédiaire).

D'avance merci.

F.

[Agent virtuel]

Bonjour

Est-ce retrouver le mode compact de Firefox https://support.mozilla.org/fr/kb/compa ... nd-firefox

Est-ce viewtopic.php?p=918460#p918460

[lui]

ne marche pas chez moi et c'est une calamité cet agrandissement !!!! revenez en mode normal

[Agent virtuel]

Bonjour

Est-ce https://support.mozilla.org/fr/forums/c ... post-83946
about:config, ajouter une préférence https://support.mozilla.org/fr/kb/edite ... preference
ui.textScaleFactor Nombre entier et lui donner la valeur 100

[lui]

re, c est ok il fallait modifier dans parametre et ecran la valeur
merci

[fredbxlbe]

Bonsoir,

Je constate avoir été incomplet...
Parce que je veux les 4 barres dans un ordre bien précis (menu, adresse, personnelle et onglets) - ndlr: ce qui n'est plus paramétrable depuis 2 ou 3 ans - j'utilise le fichier userchrome.css avec une série de commandes que je ne maitrise pas personnellement, mais qui fonctionnaient impeccablement jusqu'à la toute dernière mise à jour (vers 103,0).
Accessoirement, je ne trouve aucun tuto en français pour me familiariser avec le language css juste utile au paramétrage de Firefox....
Je cherche donc un érudit qui pourrait me donner les lignes de codes css nécessaires pour ajuster la hauteur/l'épaisseur des barres menus (et non le texte).
Bàv.
F

[Agent virtuel]

Bonjour

Le code présenté par Kirth GERSEN viewtopic.php?p=916441#p916441 peut-il vous être utile

Code : Tout sélectionner

/* 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 }

Copier/coller le code (par exemple) dans un Bloc-notes
Enregistrer
Type : Tous les fichiers
userChrome.css

Créer un dossier chrome
Déplacer userChrome.css vers votre dossier chrome

Dirigez-vous vers votre dossier de profil
https://support.mozilla.org/fr/kb/profi ... mon-profil Ouvrir le dossier correspondant
Déplacer votre dossier chrome vers votre dossier de profil

about:config https://support.mozilla.org/fr/kb/edite ... on-firefox
Rechercher une préférence toolkit.legacyUserProfileCustomizations.stylesheets
Vérifier true

Arrêt Firefox démarrer Firefox

Ajout, et selon les cas ...
Afficher la barre de titre https://support.mozilla.org/fr/kb/perso ... ersonnelle

Pour afficher la barre de titre : cochez la case à côté de Barre de titre en bas à gauche

[fredbxlbe]

non....

[Freddy]

Bonjour,

voilà par exemple pour toutes les barres de la même hauteur:

Code : Tout sélectionner

#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#TabsToolbar {
  height: 30px;
}

sinon pour ajuster chaque barre séparément, il suffit d'appliquer le code pour chacune, par exemple:

Code : Tout sélectionner

#TabsToolbar {
  height: 30px;
}

[fredbxlbe]

Un tout grand merci
J'ai de la sorte réduit mes hauteurs à 25px....ce qui crée 2 nouveaux petits problèmes.
1) le texte des adresses est centré verticalement dans le nouvel espace alloué; par contre, les icônes qui devancent la barre d'adresse (refaire, défaire, home, rafraichir, téléchargement, etc) sont excentrées vers le bas.
Un code pour les centrer verticalement dans le nouvel espace alloué ?

2) la barre des onglets a donc été réduite à 25px, mais les onglets (l'actif et les autres) restent surdimensionnés en hauteur.
Un code pour aligner la hauteur des onglets sur la hauteur de la barre des onglets ?
Fred

[Freddy]

il faudrait que tu colle ton code css qui concerne la modif de l'ordre des barres pour que j'obtienne exactement la même config.

[fredbxlbe]

Je te colle l'entièreté du fichier actuel, je suppose que tu pourras "élaguer"

Code : Tout sélectionner

#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#TabsToolbar {
  height: 25px;
}

/* 3-Barres d'onglet en dessous */


@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}

: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; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

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

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }


/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
   /* height if native titlebar is enabled, assumes empty menubar */
  --uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
  /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
  --uc-menubar-height: 29px; 
}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
  position: fixed;
  display: flex;
  top: var(--uc-titlebar-padding,0px);
  height: var(--uc-menubar-height);
  width: 100%;
  overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; 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 15px !important;  }

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

/* Largeur des onglets */ 
.tabbrowser-tab:not([pinned]) { 
max-width: 125px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) { 
max-width: 1px !important; min-width: 1px !important; } 

.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}

/* Make menus big, pretty and readable */
menubar, menubutton, menulist, menu, menuitem {
font-size: 17px !important
}
#TabsToolbar {
 width: 100vw !important;
 font-size: 18px !important;
 max-height: 35px !important;
}

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

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

}

[Freddy]

J'ai pas pris le temps de décortiquer le code, mais voilà ce que j'ajouterais pour corriger le tir, ...à voir si les valeurs correspondent bien chez toi...

Code : Tout sélectionner

/****************************************************/
/****************************************************/
/*=====alignement Onglets=====*/
:root {--tab-min-height:25px !important;
}


/*====alignement Boutons barre navigation=====*/
#nav-bar-customization-target {
  -moz-box-align: start !important;
}


#nav-bar toolbarbutton > image, /*---boutons natifs---*/
#nav-bar stack /*---boutons extensions---*/ {
  padding: 3px !important; 
  height: 25px !important;
}

/*---bouton "Menu"---*/
#nav-bar toolbaritem * {
  padding-top: 1px !important; 
  padding-bottom: 1px!important;
  max-height: 25px !important;
}
/*==== fin alignement Boutons barre navigation=====*/
/*****************************************************/
/*****************************************************/

[fredbxlbe]

Génial, tout est remis à sa place....ou presque.
Juste par perfectionnisme (et pour accumuler des connaissances), j'ai maintenant le texte des onglets (l'actif et les autres) qui est posé sur la base inférieure des onglets.
Un code pour centrer verticalement le texte dans l'espace disponible ?

PS: j'ai retrouvé un tuto pour pouvoir visualiser les modifications en temps réel (sans devoir fermer et ré-ouvrir Firefox) via l'Editeur de style; ça aide aussi quand on tâtonne.
Fred

[Freddy]

Ben je ferait un ptit ajout dans la première partie de ce que je t'ai déjà ajouté, c'est à dire, que ça donnerait:

Code : Tout sélectionner

/*=====alignement Onglets=====*/
:root {--tab-min-height:25px !important;
}

/*partie ajoutée pour recentrer le texte*/
#tabbrowser-tabs .tab-content ,
#tabbrowser-tabs .tab-label{
  height: 25px !important;
}

PS: j'ai retrouvé un tuto pour pouvoir visualiser les modifications en temps réel (sans devoir fermer et ré-ouvrir Firefox) via l'Editeur de style; ça aide aussi quand on tâtonne

C'est clair que c'est beaucoup plus pratique.
Au cas où ça peut t'aider à appronfondir la chose (je ne sais pas si c'est ça que t'as trouvé):
https://firefox-source-docs.mozilla.org ... index.html
https://firefox-source-docs.mozilla.org ... index.html
et pourquoi pas, entre plein d'autres...:
https://developer.mozilla.org/fr/docs/Web/CSS

ps:
euh ben je sais pas chez toi, mais je viens de m'appercevoir en voulant te coller les liens, que mon code d'hier créer un bug pour afficher le menu contextuel de la barre d'adresse et du popup des suggestions de recherche
Si ça te concerne, voilà qui peut arranger le coup, et en même temps j'aligne les icones à droite (au bout) de la barre d'url (niveau de zoom, mode lecture, marquer cette page,...)

Code : Tout sélectionner

/****************************************************/
/****************************************************/
/*=====alignement Onglets=====*/
:root {--tab-min-height:25px !important;
}

#tabbrowser-tabs .tab-content ,
#tabbrowser-tabs .tab-label{
  height: 25px !important;
}



/*====alignement Boutons barre navigation=====*/

#nav-bar-customization-target {
  -moz-box-align: start !important;
}
/**/

#nav-bar toolbarbutton > image, /*---boutons natifs---*/
#nav-bar stack /*---boutons extensions---*/ {
  padding: 3px !important; 
  height: 25px !important;
}


#nav-bar #urlbar-input-container,
#page-action-buttons {
  margin-top: -3px !important;
}


/*==== fin alignement Boutons barre navigation=====*/
/*****************************************************/
/*****************************************************/