Topic: schiarire lo sfondo della selezione pulsante barra degli strumenti

[Schwanz]

vorrei un codice per schiarire l'opacità della selezione del pulsante.



ho quello per rimuovere lo sfondo ma vorrei sapere quale è la voce da inserire per attivare la selezione al posto di transparent? ovviamente per riattivarlo basta eliminare il codice ma per sicurezza lo vorrei tenere

/* RIMOZIONE SFONDO RIQUADRO AL PASSAGGIO DEL MOUSE DEI PULSANTI DELLA BARRA STRUMENTI */
:root {
--toolbarbutton-hover-background: transparent !important; /button_background_hover/
--toolbarbutton-active-background: transparent !important; /button_background_active/ }

[Schwanz]

ho risolto prendendo il codice di buttons_on_bookmarks_toolbar_aero_appareance.css cambiando il background color in c2c2c7 al posto di transparent e i valori rgb

/* 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: #000000 !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 notato che si visualizza la selezione nella barra delle estensioni e vorrei rimuoverlo, oppure schiarlo



ho provato così ma non va

Codice: [Seleziona]

/* hovered state */
/*#addon-bar :is(#addon-bar-customization-target,#PanelUI-menu-button) .unified-extensions-item addonbarbutton:not([disabled=true]):hover,*/
#addon-bar :is(#nav-bar-customization-target,#PanelUI-button) toolbarbutton:not([disabled=true]):hover :is(.toolbarbutton-badge-stack,.toolbarbutton-icon),
#addon-bar #nav-bar-overflow-button:not([disabled=true]):hover :is(.addonbarbutton-badge-stack,.addonbarbutton-icon) {
  background: transparent !important;
  background-color: none !important;
  }
/* clicked/active state */
/*#addon-bar :is(#addon-bar-customization-target,#PanelUI-button) .unified-extensions-item addonbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active),*/
#addon-bar :is(#nav-bar-customization-target,#PanelUI-button) addonbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.toolbarbutton-badge-stack,.addonbarbutton-icon),
#addon-bar #addon-bar-overflow-button:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.addonbarbutton-badge-stack,.addonbarbutton-icon)  {
  background: transparent !important;
  background-color: none !important;
}

[Schwanz]

è questo il motivo per cui hanno fatto scurire il background delle selezioni nella barra degli strumenti e barra delle estensioni nella versione 133, fino alla 132 non mi comparivano

[Schwanz]

ho risolto prendendo il codice di buttons_on_bookmarks_toolbar_aero_appareance.css cambiando il background color in c2c2c7 al posto di transparent e i valori rgb

/* COLORE SFONDO SELEZIONE ICONA BARRA DELLE ESTENSIONI */
#PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover,
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text,
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
  background-color: transparent !important;
}
#PersonalToolbar toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]),
#PersonalToolbar toolbarbutton.bookmark-item[open="true"],
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-text,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
  background-color: transparent !important;
}
/* colore sfondo selezione */
#PersonalToolbar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is(:hover,[open]) > .toolbarbutton-menubutton-button ,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
#PersonalToolbar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
  background: transparent !important;
  background-color: #c2c2c7 !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;
}

codice di buttons_on_bookmarks_toolbar_aero_appareance.css (in arancione la parte rimossa)

#PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover,
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text,
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
  background-color: transparent !important;
}

#PersonalToolbar toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]),
#PersonalToolbar toolbarbutton.bookmark-item[open="true"],
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-text,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
  background-color: transparent !important;
}

#PersonalToolbar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is(:hover,[open]) > .toolbarbutton-menubutton-button ,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
#PersonalToolbar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image:
   linear-gradient(to right, rgba(255,255,255,0.4) 0px, transparent 0px),
   linear-gradient(to left, rgba(255,255,255,0.4) 0px, transparent 0px),
   linear-gradient(to top, rgba(255,255,255,0.3) 0px, transparent 0px),
   linear-gradient(to bottom, rgba(163,196,247,0.2), rgba(122,180,246,0.2)) !important;
  border-radius: 6px !important;
  outline: 1px solid rgba(124,163,206,0.7) !important;
  transition: background-color .3s ease-in,
           border-color .2s ease-in,
           box-shadow .2s ease-in !important;
}