Executando verificação de segurança...
5

🎨 Estilização personalizada do `TabNews`

Eu estava fuçando pelos artigos daqui e me interessei pelo artigo do Brendo10x: TabNews modo dark - plugin do google chrome

Estava sentindo falta realmente de um DarkMode, mas o que me chamou atenção mesmo foi o comentário do Legazim, onde ele mostra a extensão Stylus que permite aplicar um CSS na página e fica salvo.

Com isso, eu resolvi dar uma alterada na estilização do TabNews e ficou assim:

Obs: Eu uso a extensão DarkReader pra colocar no modo escuro

Print da home

Print dos comentários

Minha configuração do Stylus é a seguinte:

 .dWxAqQ {
     /* Header */
     color: rgba(232, 230, 227, 0.7);
     background-color: rgb(29, 33, 38);
     margin: 0 auto;
     max-width: 1100px;
     border-radius: 10px;
     box-shadow: 0 5px 10px #0001;
     position: fixed;
     top: 10px;
     left: 10px;
     right: 10px;
 }

 .kraPei {
     /* Div principal */
     padding-top: 100px;
 }

 .czRdDB[href="/rocha"] {
     /* Nome do usuário na lista de posts */
    background: #0b471b;
    color: #85f7a4;
    padding: 1px 5px;
    border-radius: 5px;
 }

.dJOScE[href="/rocha"]{
     /* Nome do usuário nos comentários */
    background: #0b471b;
    color: #85f7a4;
}


.czRdDB[href="/filipedeschamps"] {
     /* Nome do usuário na lista de posts */
     background: #f9c23c;
     padding: 1px 5px;
     color: #000000;
     border-radius: 5px;
 }

.dJOScE[href="/filipedeschamps"]{
     /* Nome do usuário nos comentários */
     background: #f9c23c;
     color: #000000;
}


 .ixUrcw {
    /* Modal de perfil */
    margin-top: 20px;
    position: fixed;
    top: 60px !important;
 }
Carregando publicação patrocinada...
1

Me parece que o nome dessas classes são geradas aleatoriamente e, se for isso, mudam a cada deploy.

Uma coisa legal que já vi a equipe do Stack Exchange se preocupando é em dar id (ou algum outro atributo, como data-algo) para os elementos para permitir que os usuários customizem o site com o uso de user scripts ou user styles. Pode ser interessante adotarmos isso no TabNews, já que grande parte dos usuários são desenvolvedores e desenvolvedoras.

1

Eu imaginei que realmente mudassem, mas pelo menos até agora não foi alterado 😬

Seria ótimo adotarmos isso no TabNews. Permitiria uma maior customização por parte do usuário!

Só não sei como o Deschamps está querendo manter a identidade visual do Tab, pq se permitir isso, cada usuário vai ter um "TabNews diferente".

2

rocha eu acho esses hacks sensacionais e estão dando várias idéias do que implementar no core do projeto!

Sobre as classes mudarem, seria legal o projeto conseguir gerar alguma coisa fixa para facilitar esses hacks 🤝

1

Concordo, uma coisa que eu acharia muito legal de ver implementada seria um visual mais massa, pegar uma equipe de UI e UX pra deixar o site mais atrativo, já recomendei ele para muitos amigos e conhecidos, o problema é que a galera não se encontra no meio dos posts, infelizmente biologicamente pensar cansa, e as pessoas cada vez menos se atraem por coisas que as façam gastar energia pensando

1
1