Il pulsante Rispondi ottiene un effetto di schiarimento e grassetto su scorrimento/hover

Il pulsante di risposta si è rivelato la cosa più difficile da sistemare usando i CSS.

Sta rendendo il pulsante di risposta più luminoso quando si passa il mouse/si mette a fuoco su un post. Rende anche la parola “Reply” più grassa al passaggio del mouse, cosa che non mi piace.

Cambia anche il colore del carattere al passaggio diretto del mouse, ma ha cambiato solo l’icona, non la parola “Reply”, quindi servono i CSS per unificare l’impostazione predefinita.

image

Ci sono così tanti effetti che si verificano sul pulsante di risposta, c’è anche un qualche tipo di grassettatura o di font più pesante che viene aggiunto.

image

Questo è il codice che ho, c’è ancora un effetto di ingrandimento del font che si verifica, sono riuscito a eliminare l’effetto di schiarimento:

.post-info.edits .btn-flat svg,
.post-info.edits .btn-flat .d-button-label,
.topic-post .post-controls .create svg,
.topic-post .post-controls .create .d-button-label {
    fill: #7b7b7b !important;
    color: #7b7b7b !important;
 
}

/* 2. Stato hover: Cambiare a e0e0e0 */
.post-info.edits .btn-flat:hover svg,
.post-info.edits .btn-flat:hover .d-button-label,
.topic-post .post-controls .create:hover svg,
.topic-post .post-controls .create:hover .d-button-label {
    fill: #e0e0e0 !important;
    color: #e0e0e0 !important;
}

/* 3. Eliminare l'effetto schiarente/bagliore e rallentare le transizioni */
.post-info.edits .btn-flat,
.topic-post .post-controls .create {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* 4. Impedire che l'evidenziazione dello scroll sbiadisca i colori */
.topic-post.highlighted .post-controls .create,
.topic-post.highlighted .post-info.edits .btn-flat {
    filter: none !important;
    opacity: 1 !important;
}

Sarebbe davvero bello se potessi modificare le icone/il font/il testo tramite qualche tipo di stile integrato. Dato che ho così tanti CSS che rendono l’aspetto predefinito buono per le mie esigenze.

Avevo ottenuto un aspetto migliore, ma ho dovuto rimuovere i CSS che avevo perché stavano causando molti problemi a causa dei doppi pulsanti e di tutti i diversi stili applicati.

Puoi usare content: "Some text" per cambiare il testo di un elemento. Ma è sempre bene cambiare i testi tramite i testi del sito.