Estilos personalizados para la plataforma EDteam
Hola comunidad, si alguien le interesa como personalizar los colores de la plataforma, y demás estilos, yo les recomiendo la extensión de Ghrome que se llama Stylish (temas a medida para cada sitio web), en mi caso modifique los estilos como un tema dark. Aquí les dejo una vista y las modificaciones en las clases que hice: Extención: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=es
css
body {
background: var(--dark-color);
color: var(--light-color);
}
.main-header {
border-bottom: 1px solid <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
background: var(--dark-color);
}
.main-menu a {
color: var(--light-color);
}
.main-logo {
height: 2.5rem;
background-color: <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
border-radius: 5px;
padding: 5px;
box-shadow: 0 0 6px 2px rgba(255,255,255,1);
}
.topbar {
background-color: var(--dark-color);
}
.meatballs-menu__nav {
background: var(--dark-color-darker);
box-shadow: 0 0 3px 2px rgba(255,255,255,1);
}
.lg-tooltip {
background-color: var(--dark-color-darker);
}
.dropdown ul .main-menu__item a {
color: var(--light-color);
}
.notification-panel {
background-color: var(--dark-color-darker);
}
.color {
color: var(--color);
}
.text-color,
.publication-editor__textarea{
--color: var(--text-color-light);
}
textarea{
color: <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
}
.dark-color {
--color: var(--grey-color-lighter);
--color-alt: var(--grey-color-lighter);
}
.answer {
color: var(--fourth-color-darker);
}
.vote{
color: var(--first-color);
}
.featured-publication,
.featured-publication__item,
.foro-sidebar__list {
background-color: var(--dark-color-darker);
}
.create-publication.active.main .create-publication__container {
background-color: var(--dark-color);
border-radius: 5px;
box-shadow: 0 0 3px 2px rgba(255,255,255,1);
}
.courses-searchbar {
background-color: var(--dark-color-dark);
}
.footer-card {
background-color: var(--thumb-color-hover);
}
.s-bg-white {
background-color: var(--dark-color-darker);
}
.t4, .aside-course-card__price .t4, h3{
color: var(--light-color);
}
.class-page-container{
background-color: var(--dark-color);
}
.main-banner {
background-color: var(--dark-color-darker);
}
.s-to-bottom {
background-color: var(--dark-color-darker);
}
.lg-bg-white {
background-color: var(--dark-color-dark);
}
.scroll, [class*=scroll], body {
--thumb-color: var(--dark-color-dark);
--thumb-color-hover: var(--dark-color-smooth);
--track-color: var(--dark-color-smoother);
}
