🎨 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
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;
}