Topic: Re:aumentare il gap tra l'icona del sito e dell'audio nella scheda RISOLTO

[Schwanz]

vorrei aumentare un pochino lo spazio dell'audio che è troppo vicino all'icona del sito, non sono riuscito a trovare tra le ricerche anche in inglese ciò che vorrei fare. su userchrome.css ho lasciato disattivati questi due parametri perchè togliendo entrambe /* raffigura l'altoparlante senza cerchio con sfondo bianco e quindi graficamente non mi piace

/* @import "./css/tabs/tab_audio_icon.css"; /**/
/* @import "./css/tabs/tab_audio_icon_colorized.css"; /**/

Codice: [Seleziona]

/* MOSTRA ALTOPARLANTE NELLE SCHEDE */
.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }

.tab-icon-overlay:not([pinned]){
  padding: 0px !important;
  margin-inline: -3px 1px !important;
}

[Schwanz]

ho trovato il codice per il gap (evidenziato in rosso), ora con la versione 133, hanno cambiato il colore dello sfondo in nero e l'audio in verde, sono riuscito ad impostare l'audio in bianco, però vorrei la stessa icona che vedete nel post precedente, e cioè audio nero e sfondo bianco e non sono riuscito a trovarlo e nemmeno so cosa scriverci? lo sfondo nero è fastidioso, anche perchè ho colorato in celeste il muto, anche col giallo e viola ci sta male il nero, ho provato ad inserire background: #DCDCDC !important; } ma non lo riconosce

/* MOSTRA ALTOPARLANTE NELLE SCHEDE */
.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }

.tab-icon-overlay:not([pinned]){
  padding: 0px !important;
  margin-inline: -3px 1px !important;
}
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-icon-overlay:not([pinned]) {
  margin-inline-start: -2px !important;
  margin-inline-end: 2px !important;
}
.tab-icon-overlay[soundplaying] {
  fill: #0d0a0a !important;/* var(--black-70) */
}
.tab-icon-overlay[muted] {
  fill: #9900fa !important;/* var(--violet-60) */
}
.tab-icon-overlay[activemedia-blocked] {
  fill: #FFFFFF !important;/* var(--grey-50) */
}

[Schwanz]

sono riuscito ad invertire il bianco e il nero dell'icona audio, manca da inserire il bordo nero del cerchio

/* MOSTRA ALTOPARLANTE NELLE SCHEDE */
.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }

.tab-icon-overlay:not([pinned]){
  padding: 0px !important;
  margin-inline: -3px 1px !important;
}
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-icon-overlay:not([pinned]) {
  margin-inline-start: -2px !important;
  margin-inline-end: 2px !important;
}
.tab-icon-overlay[soundplaying] {
  fill: #000 !important;
  background-color: #fff !important;
  border: 2px solid #000;
}

.tab-icon-overlay[muted] {
  fill: #1F75FE !important;
  background-color: #fff !important;
  border: 2px solid #000;
  opacity: 100% !important;
  font-weight: bold !important;
}

.tab-icon-overlay[activemedia-blocked] {
  fill: #000 !important;
  background-color: #fff !important;
  border: 2px solid #000;
}
.tab-icon-overlay {
width: 19px !important;
height: 18px !important; }

[Schwanz]

ho trovato la soluzione del bordo

/* MOSTRA ALTOPARLANTE NELLE SCHEDE */
.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }

.tab-icon-overlay:not([pinned]){
  padding: 0px !important;
  margin-inline: -3px 1px !important;
}
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-icon-overlay:not([pinned]) {
  margin-inline-start: -2px !important;
  margin-inline-end: 2px !important;
}
.tab-icon-overlay[soundplaying] {
  fill: #000 !important;
  background-color: #f7f7f7 !important;
  border: 2px solid #000;
}

.tab-icon-overlay[muted] {
  fill: #00aecf !important;
  background-color: #f7f7f7 !important;
  border: 2px solid #000;
  opacity: 1 !important;
}

.tab-icon-overlay[activemedia-blocked] {
  fill: #000 !important;
  background-color: #f7f7f7 !important;
  border: 2px solid #000;
}

/* dimensione icona audio */
.tab-icon-overlay {
  width: 19px !important;
  height: 19px !important;
  background-size: 15px !important;
  padding: 1px !important;
}
/* posizione icona del sito */
.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
  margin-top: 2px !important;
  margin-bottom: 2px !important; }