Topic: selezione menù segnalibri con tasto destro del mouse

[Schwanz]

Nel menù segnalibri, quando faccio tasto destro, la selezione non rimane visibile e neanche stabile come accadeva con firefox 56.0.2 che come vedete, la sua selezione blu resta visibile e stabile, non sono riuscito a trovare il codice userchrome.css per ottenere questo comportamento, ho questi due codici per la dimensione testo e riduzione dello spazio, e la colorazione della selezione. Per me è molto importante questa maniera di selezione perchè così mi fa capire quale sito ho selezionato evitando di sbagliare a eliminarlo.

Codice: [Seleziona]

/* RIDUZIONE SPAZIO E CARATTERE BARRA MENU' */
menupopup > menuitem, menupopup > menu {
padding-block: 0px !important;
font-size: 10.6pt !important; }
#toolbar-menubar, #menubar-items, #main-menubar {
  font-size: 9.5pt !important;
  font-weight: 501 !important;
  opacity: 82% !important;  }

Codice: [Seleziona]

/* COLORARE LA SELEZIONE NELLA BARRA DEI MENU' */
#main-menubar > menu:hover {
    background: #b3b3b8 !important;
    }

menuitem:hover,
menupopup > menu:hover,
menupopup > menucaption:hover  {
background-color: #d1d1d6 !important; }
segnalibro firefox 142.0.1


segnalibro firefox 56.0.2

[mazonni]

Nel menù segnalibri, quando faccio tasto destro, la selezione non rimane visibile e neanche stabile come accadeva con firefox 56.0.2 che come vedete, la sua selezione blu resta visibile e stabile, non sono riuscito a trovare il codice userchrome.css per ottenere questo comportamento, ho questi due codici per la dimensione testo e riduzione dello spazio, e la colorazione della selezione. Per me è molto importante questa maniera di selezione perchè così mi fa capire quale sito ho selezionato evitando di sbagliare a eliminarlo.

Codice: [Seleziona]

/* RIDUZIONE SPAZIO E CARATTERE BARRA MENU' */
menupopup > menuitem, menupopup > menu {
padding-block: 0px !important;
font-size: 10.6pt !important; }
#toolbar-menubar, #menubar-items, #main-menubar {
  font-size: 9.5pt !important;
  font-weight: 501 !important;
  opacity: 82% !important;  }

Codice: [Seleziona]

/* COLORARE LA SELEZIONE NELLA BARRA DEI MENU' */
#main-menubar > menu:hover {
    background: #b3b3b8 !important;
    }

menuitem:hover,
menupopup > menu:hover,
menupopup > menucaption:hover  {
background-color: #d1d1d6 !important; }
segnalibro firefox 142.0.1


segnalibro firefox 56.0.2spikeslot

Ciao, capisco il problema, è fastidioso quando la selezione svanisce col tasto destro. Prova ad aggiungere questo al tuo userChrome.css per mantenere il blu stabile sui segnalibri selezionati:

Codice: [Seleziona]

#bookmarksMenuPopup .bookmark-item:hover,
#bookmarksMenuPopup .bookmark-item[selected] {
    background-color: #0050B3 !important;
    color: white !important;
}
Riavvia Firefox e dimmi se funziona

[Schwanz]

no non funziona, il colore comunque preferisco sempre grigio e cioè #d1d1d6, se guardi bene nella gif, inizialmente è selezionato al passaggio del mouse sul sito componenti aggiuntivi per firefox, poi arrivato a quel punto, faccio tasto destro e scompare.

ho notato che se faccio tasto destro su una cartella, ci sono due colori sovrapposti, uno è grigio e l'altro è celeste (ho sostituito il tuo codice con #90c8f6), quindi quando passo col mouse senza cliccare, il colore è celeste, e appena faccio tasto destro è grigio e lì resta stabile, mentre su firefox 56.0.2 correttamente ha solo celeste. il problema è che sparisce solo se seleziono un segnalibro.

Codice: [Seleziona]

/* COLORARE LA SELEZIONE NELLA BARRA DEI MENU' */
#main-menubar > menu:hover {
    background: #b3b3b8 !important;
    }

#bookmarksMenuPopup .bookmark-item:hover,
#bookmarksMenuPopup .bookmark-item[selected] {
    background-color: #90c8f6 !important;
    color: white !important;
}
il colore celeste di default di firefox 56.0.2 è #91c9f7

[Schwanz]

il carattere deve essere nero

/* COLORARE LA SELEZIONE NELLA BARRA DEI MENU' */
#main-menubar > menu:hover {
    background: #b3b3b8 !important;
    }
   
#bookmarksMenuPopup .bookmark-item:hover,
#bookmarksMenuPopup .bookmark-item[selected] {
    background-color: #90c8f6 !important;
    color: black !important;
}

[Schwanz]

ho forse trovato questa pagina dove rende la selezione fissa con tasto destro, ma non ho capito quale codice devo inserire nel secondo esempio dimostrativo Custom Select: "Hybrid Select"?

https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/

[Schwanz]

quale parte del codice per rendere visibile e stabile la selezione quando si fa tasto destro del menù contestuale che ho trovato nella pagina https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/?

Codice: [Seleziona]

// Both native and custom selects must have the same width/height.
.selectNative,
.selectCustom {
  position: relative;
  width: 22rem;
  height: 4rem;
}

// Make sure the custom select does not mess with the layout
.selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

// This media query detects devices where the primary
// input mechanism can hover over elements. (e.g. computers with a mouse)
@media (hover: hover) {
  // Since we are using a mouse, it's safe to show the custom select.
  .selectCustom {
    display: block;
  }

  // In a computer using keyboard? Then let's hide back the custom select
  // while the native one is focused:
  .selectNative:focus + .selectCustom {
    display: none;
  }
}

/* Add the focus states too, They matter, always! */
.selectNative:focus,
.selectCustom.isActive .selectCustom-trigger {
  outline: none;
  box-shadow: white 0 0 0 0.2rem, #ff821f 0 0 0 0.4rem;
}

//
// Rest of the styles to create the custom select.
// Just make sure the native and the custom have a similar "box" (the trigger).
//

.select {
  position: relative;
}

.selectLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.selectWrapper {
  position: relative;
}

.selectNative,
.selectCustom-trigger {
  font-size: 1.6rem;
  background-color: #fff;
  border: 1px solid #6f6f6f;
  border-radius: 0.4rem;
}

.selectNative {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 0.8rem;
  padding: 0rem 0.8rem;
}

.selectCustom-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0.8rem 0.8rem;
  cursor: pointer;
}

.selectCustom-trigger::after {
  content: "▾";
  position: absolute;
  top: 0;
  line-height: 3.8rem;
  right: 0.8rem;
}

.selectCustom-trigger:hover {
  border-color: #8c00ff;
}

.selectCustom-options {
  position: absolute;
  top: calc(3.8rem + 0.8rem);
  left: 0;
  width: 100%;
  border: 1px solid #6f6f6f;
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: 0 0 4px #e9e1f8;
  z-index: 1;
  padding: 0.8rem 0;
  display: none;
}

.selectCustom.isActive .selectCustom-options {
  display: block;
}

.selectCustom-option {
  position: relative;
  padding: 0.8rem;
  padding-left: 2.5rem;
}

.selectCustom-option.isHover,
.selectCustom-option:hover {
  background-color: #865bd7; // contrast AA
  color: white;
  cursor: default;
}

.selectCustom-option:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #d3d3d3;
}

.selectCustom-option.isActive::before {
  content: "✓";
  position: absolute;
  left: 0.8rem;
}

// ----- Theme styles -----

html {
  font-size: 62.5%;
}
body {
  background: #f8f3ef;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  color: #343434;
  line-height: 1.5;
  font-size: 1.6rem;
  min-height: 120vh; /* using arrow keys in the select, does not scroll the page */
}

body * {
  box-sizing: inherit;
}

strong {
  font-weight: 600;
}

.title {
  font-size: 2rem;
  font-weight: 600;
  margin: 1.6rem;
  line-height: 1.2;
  text-align: center;
}

.card {
  position: relative;
  margin: 2rem auto;
  max-width: calc(100% - 2rem);
  width: 40rem;
  background: white;
  padding: 3rem;
  box-shadow: 0.2rem 0.2rem #e9e1f8;
}

.inst {
  margin-bottom: 1rem;
}

.note {
  font-size: 1.4rem;
  margin: 2rem 0 0;
  color: #6b6b6b;
}

.link {
  display: inline-block;
  color: inherit;
  text-decoration-color: #9b78de;
  padding: 0.1rem 0;
  transform: translateX(-0.1em);
  margin-right: -0.1em;

  &:hover {
    color: #8c00ff;
  }

  &:focus {
    outline: none;
    background-color: #e9e1f8;
  }
}

.footer {
  position: relative;
  width: 100%;
  margin-top: 60px;
  padding: 24px 16px;
  text-align: center;
  font-size: 1.4rem;
  background: white;

  @media screen and (min-height: 26em) {
    position: fixed;
    left: 0;
    bottom: 0;
  }
}

[Schwanz]

questo codice è giusto che non fa apparire 2 due colori sovrapposti mentre si scorre col mouse nella lista di segnalibri, ancora non sono riuscito a trovare la selezione quando si fa click con tasto destro sul segnalibro, funziona solo se faccio click sulla cartella.

Codice: [Seleziona]

/* COLORARE LA SELEZIONE NELLA BARRA DEI MENU' */
menupopup : not(.in-menulist, .toolbar-menupopup, .toolbar-menupopup menupopup) {
 --panel-background: #f9f9fb !important;
 --panel-color: #000000 !important;
 --panel-padding: 6px !important;
 --panel-border-radius: 12px !important;
 --panel-border-color: transparent !important;
 
 &[_moz-menuactive]:not([disabled="true"]) {
 color: #000000 !important; /* colore testo nero */
 font-weight: bold;
 /* rende anche il testo del menu a discesa in grassetto quando evidenziato */
}
 &[_moz-menuactive="true"] [disabled="true"] {
 background-color: #ffffff !important;
}
}
}

/* cambia il colore del passaggio del mouse sul menu del tasto destro  */
 menu :where([_moz-menuactive="true"]:not([disabled])),
 menuitem:where([_moz-menuactive="true"]:not([disabled])) {
 background-color: #d1d1d6 !important; /* colore passaggio grigio */
 color: #000000 !important;  /* colore testo nero */
 }