Topic: diminuire la dimensione icona di una estensione installata RISOLTO

[Schwanz]

quando installo una estensione, alcune vengono visualizzate nella barra strumenti e l'icona è sempre enorme, vorrei che la dimensione sia uguale a quella di unified extensions (puzzle blu) dove il suo codice è questo, in questo forum c'era qualcuno che aveva inserito il codice anche per tutte le estensioni e non riesco a trovarlo.

Codice: [Seleziona]

/* DIMENSIONE ICONA UNIFIED EXTENSIONS */
#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{
width: 33px !important;
padding-left: 1px !important;
padding-right: 4px !important;
} 

[Schwanz]

ho provato a inserire questo codice ma non va

Codice: [Seleziona]

#bookmarks-menu-button {
--toolbarbutton-inner-padding: 0px }
#bookmarks-menu-button .toolbarbutton-icon {
width: 18px !important;
height: 18px !important; }

[bobo779256]

Che estensione è?

Probabile che dentro l'estensione stessa, il file *.xpi, ci siano le icone con varie dimensioni

Ridurre la dimensione di una sola penso si possa fare ma sarebbe da sapere quale in particolare, leggi ad esempio questa pagina che dava indicazioni per mettere un'icona personalizzata (di qualche anno fa)

[Schwanz]

quella icona era semplicemente un'immagine dimostrativa, quindi qualsiasi estensione che installo (una volta installato lo rimuovo facendo tasto destro su rimuovi dalla barra degli strumenti), viene sempre visualizzato accanto all'icona di unified extensions e lo rende più grande, anche lo stesso unified extensions era enorme e l'ho aggiustato usando il padding, quindi non serve andare all'interno del file xpi per cambiare le dimensioni che poi è laborioso, nel firefox 56.0.2, le icone rimanevano sempre tutte delle stesse dimensioni.

Codice: [Seleziona]

/* DIMENSIONE ICONA UNIFIED EXTENSIONS */
#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{
width: 38px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 1px !important;
padding-right: 6px !important; } 

[Schwanz]

ho provato a scrivere così ma rimane grande

Codice: [Seleziona]

#main-window #navigator-toolbox > #PersonalToolbar  > #extensions-button
.toolbarbutton-icon {
  width: 12pt !important;
  height: 12pt !important;  }

[bobo779256]

Beh, da qualche parte l'icona dell'estensione ci deve essere, ad esempio per uBlock Origin una volta scompattato il suo file xpi appare questa nella cartella img



con le icone a 16, 32 e 64 pixel x pixel

Ma immagino tu abbia ragione, ci sarà la maniera per ridimensionarle in altro modo

[Schwanz]

ciao bobo, con questo codice mi ha ridimensionato l'estensione installata, però comprende le dimensioni dei pulsanti di avanti e indietro stop ricarica schermo intero cronologia e il visualizza barra laterale, invece di toolbarbutton cosa devo scrivere?

Codice: [Seleziona]

.toolbarbutton-icon{
width: 38px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 1px !important;
padding-right: 6px !important; } 



c'è anche questo ma mi ha ingrandito solo i pulsanti di sinistra

Codice: [Seleziona]

#nav-bar .toolbarbutton-1 > .toolbarbutton-icon{
width: 38px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 1px !important;
padding-right: 6px !important; } 

[bobo779256]

Non so che dirti, da me su FF 151.0.2 64 bit appaiono tutte uguali, o almeno mi sembra, vedi sotto la cattura schermata in finestra



Che estensione è? Magari provo a metterla su e vedere cosa appare da me...

[Schwanz]

è Awesome Screenshot & Screen Recorder

ma ti ripeto che quando installo qualsiasi estensione, viene sempre posizionato lì, quindi me li appare sempre con dimensioni enormi, poi con tasto destro sull'icona, lo rimuovo dalla barra degli strumenti e va all'interno della lista di unified extensions, voglio che le estensioni abbiano la stessa dimensione dell'icona puzzle blu di unified extension. quando avevo le vecchie versioni prima di 100, le estensioni erano sempre correttamente con dimensioni ridotte.

[Schwanz]

ho trovato la causa, avevo impostato i pulsanti di sinistra a 37px e quindi fa comprendere anche l'estensione aggiunta nella barra degli strumenti, non so come fare in modo che deve ridurre solo l'estensione. questo codice è del file buttons_on_navbar_huge_48px_size.css dove in cui 48px per me è troppo grande, quindi ho copiato quel pezzo all'interno di my_userchrome.css

Codice: [Seleziona]

/* DIMENSIONE PULSANTI BARRA DEGLI STRUMENTI */
:root {
  --space_required_for_appbutton_fix: 54px !important;
  --toolbar-start-end-padding: 2px !important; }

/* large button mode */
#main-window:not([customizing]) #nav-bar-customization-target > toolbaritem.chromeclass-toolbar-additional toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar-customization-target > toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar > toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
  width: 37px !important;
  height: 37px !important; }
ecco come diventa se rimuovo quel pezzo del codice

Codice: [Seleziona]

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


:root {
  --space_required_for_appbutton_fix: 54px !important;
  --toolbar-start-end-padding: 2px !important;
}

/* large button mode */
#main-window:not([customizing]) #nav-bar-customization-target > toolbaritem.chromeclass-toolbar-additional toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar-customization-target > toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar > toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
  width: 48px !important;
  height: 48px !important;
}

#main-window:not([customizing]) #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack .toolbarbutton-icon {
  width: 48px !important;
  height: 48px !important;
}

#main-window:not([customizing]) #nav-bar-customization-target > toolbarbutton :is(.scrollbutton-up,.scrollbutton-down) .toolbarbutton-icon {
  width: unset !important;
  height: unset !important;
}

/* compact */
#main-window[uidensity=compact]:not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 36px !important;
  height: 36px !important;
}
#main-window[uidensity=compact]:not([customizing]) #nav-bar-customization-target #downloads-indicator-icon {
  background-size: 36px 36px !important;
  width: 36px !important;
  height: 36px !important;
}
#main-window[uidensity=compact]:not([customizing]) #nav-bar-customization-target #downloads-indicator-progress-inner {
  background-size: 36px 36px !important;
  animation-name: indicatorArrowProgressN !important;
}
#downloads-indicator-progress-inner:-moz-locale-dir(rtl) {
  animation-name: indicatorArrowProgressRTLN !important;
}
#main-window[uidensity=compact]:not([customizing]) #nav-bar-customization-target #downloads-indicator-progress-outer {
  background-size: 36px 36px !important;
}


/* normal */
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 36x !important;
  height: 36px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target #downloads-indicator-icon {
  background-size: 36px 36px !important;
  width: 36px !important;
  height: 36px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target #downloads-indicator-progress-inner {
  background-size: 36px 36px !important;
  animation-name: indicatorArrowProgressN !important;
}
#downloads-indicator-progress-inner:-moz-locale-dir(rtl) {
  animation-name: indicatorArrowProgressRTLN !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]):not([customizing]) #nav-bar-customization-target #downloads-indicator-progress-outer {
  background-size: 36px 36px !important;
}

/* touch */
#main-window[uidensity=touch]:not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 30px !important;
  height: 30px !important;
}
#main-window[uidensity=touch]:not([customizing]) #nav-bar-customization-target #downloads-indicator-icon {
  background-size: 30px 30px !important;
  width: 30px !important;
  height: 30px !important;
}
#main-window[uidensity=touch]:not([customizing]) #nav-bar-customization-target #downloads-indicator-progress-inner {
  background-size: 30px 30px !important;
  animation-name: indicatorArrowProgressTN !important;
}
#downloads-indicator-progress-inner:-moz-locale-dir(rtl) {
  animation-name: indicatorArrowProgressTRTLN !important;
}
#main-window[uidensity=touch]:not([customizing]) #nav-bar-customization-target #downloads-indicator-progress-outer {
  background-size: 30px 30px !important;
}


/**/
@keyframes indicatorArrowProgressN {
  0% {
    margin-right: 35px;
  }
  100% {
    margin-right: 1px;
  }
}

@keyframes indicatorArrowProgressRTLN {
  0% {
    margin-left: 35px;
  }
  100% {
    margin-left: 1px;
  }
}

@keyframes indicatorArrowProgressTN {
  0% {
    margin-right: 30px;
  }
  100% {
    margin-right: 1px;
  }
}

@keyframes indicatorArrowProgressTRTLN {
  0% {
    margin-left: 30px;
  }
  100% {
    margin-left: 1px;
  }
}


[Schwanz]

ho risolto aggiungendo questo, quindi i pulsanti di sinistra rimangono con 37px, e l'estensione a 24px come l'unified extensions

Codice: [Seleziona]

/* dimensione icona estensione installata */
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 24px !important;
  height: 23px !important;
}

/* DIMENSIONE PULSANTI BARRA DEGLI STRUMENTI */
:root {
  --space_required_for_appbutton_fix: 54px !important;
  --toolbar-start-end-padding: 2px !important; }

/* large button mode */
#main-window:not([customizing]) #nav-bar-customization-target > toolbaritem.chromeclass-toolbar-additional toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar-customization-target > toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar > toolbarbutton .toolbarbutton-icon,
#main-window:not([customizing]) #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
  width: 37px !important;
  height: 37px !important; }

/* dimensione icona estensione installata */
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 24px !important;
  height: 23px !important;
}

uso questo per ottenere la selezione dei pulsanti della barra degli strumenti

Codice: [Seleziona]

/* COLORE SFONDO SELEZIONE ICONA BARRA DEGLI STRUMENTI */
/* hovered state */
/*#nav-bar :is(#nav-bar-customization-target,#PanelUI-menu-button) .unified-extensions-item toolbarbutton:not([disabled=true]):hover,*/
#nav-bar :is(#nav-bar-customization-target,#PanelUI-button) toolbarbutton:not([disabled=true]):hover :is(.toolbarbutton-badge-stack,.toolbarbutton-icon),
#nav-bar #nav-bar-overflow-button:not([disabled=true]):hover :is(.toolbarbutton-badge-stack,.toolbarbutton-icon) {
  background: transparent !important;
  background-color: #c2c2c7 !important;
  color: #f9f9fb !important;
  opacity: 92% !important;
  background-image:
linear-gradient(to right, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to left, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to top, rgba(194,194,199,0.4,0.3) 0px, transparent 0px),
linear-gradient(to bottom, rgba(163,196,247,0.2), rgba(122,180,246,0.2)) !important;
}
/* clicked/active state */
/*#nav-bar :is(#nav-bar-customization-target,#PanelUI-button) .unified-extensions-item toolbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active),*/
#nav-bar :is(#nav-bar-customization-target,#PanelUI-button) toolbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.toolbarbutton-badge-stack,.toolbarbutton-icon),
#nav-bar #nav-bar-overflow-button:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.toolbarbutton-badge-stack,.toolbarbutton-icon)  {
  background: transparent !important;
  background-color: #c2c2c7 !important;
  color: #000 !important;
  opacity: 92% !important;
  background-image:
linear-gradient(to right, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to left, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to top, rgba(194,194,199,0.4,0.3) 0px, transparent 0px),
linear-gradient(to bottom, rgba(163,196,247,0.2), rgba(122,180,246,0.2)) !important; }

[Schwanz]

ho ingrandito leggermente l'unified extensions e l'estensione aggiunta, nella seconda icona l'area di selezione grigia è un po' più ingrandito rispetto all'icona puzzle, se diminuisco l'icona dell'estensione, la selezione si centra, ma non posso diminuirlo perchè diventerebbe troppo piccola, quale è il codice per ridurre l'area di selezione?

Codice: [Seleziona]

/* dimensione icona estensione installata */
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 19.3pt !important;
  height: 19.3pt !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
}

Codice: [Seleziona]

/* DIMENSIONE ICONA UNIFIED EXTENSIONS */
#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{
width: 34px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 1px !important;
padding-right: 4px !important;
margin-right: 0.2pt !important; } 


uso questo per ottenere la selezione dei pulsanti della barra degli strumenti

Codice: [Seleziona]

/* COLORE SFONDO SELEZIONE ICONA BARRA DEGLI STRUMENTI */
/* hovered state */
/*#nav-bar :is(#nav-bar-customization-target,#PanelUI-menu-button) .unified-extensions-item toolbarbutton:not([disabled=true]):hover,*/
#nav-bar :is(#nav-bar-customization-target,#PanelUI-button) toolbarbutton:not([disabled=true]):hover :is(.toolbarbutton-badge-stack,.toolbarbutton-icon),
#nav-bar #nav-bar-overflow-button:not([disabled=true]):hover :is(.toolbarbutton-badge-stack,.toolbarbutton-icon) {
  background: transparent !important;
  background-color: #c2c2c7 !important;
  color: #f9f9fb !important;
  opacity: 92% !important;
  background-image:
linear-gradient(to right, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to left, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to top, rgba(194,194,199,0.4,0.3) 0px, transparent 0px),
linear-gradient(to bottom, rgba(163,196,247,0.2), rgba(122,180,246,0.2)) !important;
}
/* clicked/active state */
/*#nav-bar :is(#nav-bar-customization-target,#PanelUI-button) .unified-extensions-item toolbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active),*/
#nav-bar :is(#nav-bar-customization-target,#PanelUI-button) toolbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.toolbarbutton-badge-stack,.toolbarbutton-icon),
#nav-bar #nav-bar-overflow-button:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.toolbarbutton-badge-stack,.toolbarbutton-icon)  {
  background: transparent !important;
  background-color: #c2c2c7 !important;
  color: #000 !important;
  opacity: 92% !important;
  background-image:
linear-gradient(to right, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to left, rgba(194,194,199,0.4) 0px, transparent 0px),
linear-gradient(to top, rgba(194,194,199,0.4,0.3) 0px, transparent 0px),
linear-gradient(to bottom, rgba(163,196,247,0.2), rgba(122,180,246,0.2)) !important; }

[Schwanz]

ho trovato la soluzione per l'area di selezione

Codice: [Seleziona]

/* dimensione icona estensione installata */
#main-window:not([uidensity=compact]):not([uidensity=touch]) :not([customizing]) #nav-bar-customization-target .webextension-browser-action .toolbarbutton-icon {
  width: 23px !important;
  height: 23px !important;
  min-height: 9px !important;
  padding-top: 2px !important;
  padding-bottom: 1px !important;
  padding-left: 1px !important;
  padding-right: 2px !important;
  scale: 1.28 !important;
}