Intentando cambiar color de fuente

Desarrollador
1

Parece tan sencillo, ¿verdad? Todo lo que he probado simplemente no funciona.
Encontré la zona exacta en el Inspect Element donde está el color del texto. He probado todas las clases que aparecen al final del video, he añadido !important; a ellas, etcétera… pero el color de la fuente no cambia. Todo mi CSS que afecta al color de la fuente es este:

* {
  color: #ffffff
}
  a {
    text-decoration: none;
    color: #ffffff
  }

La parte que afecta al fondo donde está el texto está en
.mobile-header .menu, así que la tengo configurada así:

    .mobile-header .menu {
      background-color: #4a4a4a !important;
      background-image: none !important;
      color: #ffffff !important;
    }

El color de fondo cambia cuando modifico eso, pero el color de la fuente no cambia en absoluto. Esto solo ocurre en móviles, así que he estado editando mi archivo mobile.scss. En el escritorio, el texto de esos dos elementos es blanco, así que no tengo idea de por qué no lo será en dispositivos móviles.

Mi archivo CSS móvil completo es:

body.landing-page {
  &.blog {
    > .contents {
      max-width: 100%;
      width: 100%;
      display: block;
      padding: 1em;

      .page-first {
        display: none;
      }
    }

    .mobile-header .menu {
      background-color: #4a4a4a !important;
      background-image: none !important;
      color: #ffffff !important;
    }
    
    .topic-list {
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      padding: 2em 0 0 0;

      .topic-byline {
        .bull {
          padding: .2em .5em;
        }
      }
    }
  }

  &.blog-post {
    header {
      background-color: $secondary;
    }

    .container {
      width: 100%;
    }

    .post-container {
      width: 100%;
    }
    
    .title-container {
      min-height: unset;
      margin-top: 4em;

      .title {
        width: 100%;
        text-align: center;
        margin: 0 0 1em 0;
      }

      .topic-byline {
        flex-direction: column;

        .bull {
          padding: .2em 1em;
        }
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }
    
    .comment-container {
      .comment-heading h4 {
        text-align: center;
      }

      .comment-footer {
        padding: 0 2em;
        box-sizing: border-box;
        justify-content: center;
      }
    }
  }

  &.blog,
  &.blog-post {
    .btn-subscribe {
      padding: 0;

      .fixed-avatar {
        width: 60px;
        height: 60px;
      }
    }
  }
}

Y mi archivo common.scss completo es:

@import "common/base/topic-post";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  color: #ffffff
}
/* .landing-header {
  display:none
} */
.forum-button {
display:none
} 
.login-button {
  display: flex;
  justify-content: center;
  column-gap: 0.7em;
}

header.landing-header {
  background-color: #18191a !important;
}

body.blog,
body.blog-post {
  background-color: #18191a;
  font-family: 'Montserrat', sans-serif;

  h1 {
    font-size: 3em;
  }

  a {
    text-decoration: none;
    color: #ffffff
  }

  .btn {
    border-radius: 4px;
    position: relative;
    font-size: 1em;
    z-index: 1;
    border: none;
    
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
    }

    &:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 100%;
      transition: all .3s;
      z-index: -1;
    }

    &:hover {
      &:before {
        width: 100%;
      }
    }
  }

  .btn-fixed {
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 2em;
    border-radius: 2em;
    padding: 1em;
    box-shadow: shadow("card");
    cursor: pointer;
    overflow: hidden;
    z-index: 100;
    box-sizing: border-box;

    .fixed-avatar,
    .fixed-icon {
      width: 30px;
      height: 30px;
    }

    .fixed-avatar {
      border-radius: 50%;
    }

    .fixed-user {
      padding: 0.1em 0 0 0.4em
    }

    .fixed-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    .fixed-label {
      margin-left: .5em;
      font-weight: 800;
    }
  }

  .btn-blog {
    @extend .btn-fixed;
    left: 1.75em;

    .d-icon {
      fill: $secondary;
    }

    &:after {
      background-color: $primary;
    }

    &:before {
      background-color: darken($primary, 15%);
    }

    .fixed-label {
      color: $secondary;
    }

    .fixed-icon svg {
      height: 80%;
      width: 80%;
    }
  }

  .btn-subscribe {
    @extend .btn-fixed;
    color: $primary-very-low;
    right: 1.75em;

    &:after {
      background-color: $quaternary;
    }

    &:before {
      background-color: darken($quaternary, 15%);
    }

    .fixed-icon {
      svg {
        fill: $secondary;
      }
    }
  }
}

body.blog {
  padding-top: 8em;

  .blog-title {
    text-align: center;
    padding: 0 1em;

    h3 {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }
  }

  > .contents {
    min-height: 100vh;
    width: 100%;
    max-width: 87.5em;
    padding: 2em 5em 4em;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  .topic-list {
    position: relative;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    padding: 0;
  }

  .topic-list-item {
    position: relative;
    display: flex;
    flex-direction: column;

    .contents {
      border: 1px solid $primary-low;
      border-radius: 0.25em;
      padding: 1.3em;
      background-color: $secondary;
  
      &:hover {
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
      }
    }
  }

  .topic-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.18em;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .topic-link {
    position: relative;
    display: block;
    padding: 0;
    color: $primary;

    &:hover {
      text-decoration: none;
    }
  }

  .header {
    margin: 1.3em 0 0;
  }

  .topic-title {
    font-size: 1.6rem;
    margin: 0 0 0.4em;
    transition: color 0.2s ease-in-out;
  }

  .topic-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .topic-excerpt {
    max-width: 56em;
    color: $primary-high;

    p {
      margin-bottom: 1em;
      display: -webkit-box;
      overflow-y: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }

  .topic-meta {
    display: flex;
    align-items: center;
    padding: 0;
  }

  @media (min-width: 1000px) {
    .topic-list article:first-of-type {
      grid-column: 1 / span 3;
      min-height: 17.5em;

      .contents {
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr;
      }

      .topic-title {
        margin-top: 0;
        font-size: 3.2rem;
      }

      .topic-excerpt p {
        margin-bottom: 1.5em;
        font-size: 1.7rem;
        line-height: 1.55em;
        -webkit-line-clamp: 8;
      }

      .topic-details {
        justify-content: center;
      }

      .topic-image {
        position: relative;
        margin-bottom: 0;
        height: 100%;
        min-height: 23.75em;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  @media (max-width: 500px) {
    .topic-title {
      font-size: 1.9rem;
    }

    .topic-excerpt {
      font-size: 1.2rem;
    }
  }
}

body.blog-post {

  .canvas {
    background: $secondary;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .10);
    padding: 2em;
    box-sizing: border-box;
  }

  .title-container {
    background: no-repeat center/cover fixed;
    display: flex;
    flex-direction: column;
    min-height: 530px;
    max-height: 40%;
    justify-content: flex-end;
    align-items: center;

    .contents {
      width: 900px;
      max-width: 100vw; 
      box-sizing: border-box;
    } 

    .title {
      color: $primary;
      font-size: 2.5em;
      font-weight: 700;
      margin: 0 0 .5em 0;
    }
  }

  .post {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  li {
    line-height: 1.6em;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 900px;
    max-width: 100vw;
  }

  .comment-container {
    display: flex;
    flex-direction: column;
    width: 100%;

    .comment-user {
      color: $primary-high;
      text-transform: capitalize;
      font-size: $font-down-1;
      margin: 6px 0 10px 0;
    }

    div.comment {
      padding: 10px 0;
      margin-left: 1em;
      word-wrap: break-word;
      word-break: break-word;
      border-bottom: 1px solid $primary-low;

      .comment-content {
        margin-left: 50px;
      }

      &:first-of-type {
        padding-top: 0;
      }

      &:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
      }
    }

    .comment-avatar {
      float: left;
    }

    .img-avatar {
      border-radius: 50%;
    }

    .comment-heading {
      color: $primary-high;
      display: flex;
      flex-direction: column;

      h4 {
        margin: 2.5em 0 1em 0;
      }
    }

    .comments {
      width: 100%;
      border-top: 1px solid $primary-very-low;
    }
  }

  h1, h2, h3, h4 {
    margin: .75em 0 .15em;
  }

  blockquote {
    width: 100%;
    padding: 12px;
    margin-left: 0;
    box-sizing: border-box;
    font-style: italic;
    border-left: 5px solid $primary-low;
    background-color: $blend-primary-secondary-5;
  }

  code, pre {
    color: $primary-very-high;
    background: $primary-very-low;
  }

  img.emoji {
    width: 1.3em;
    height: 1.3em;
    vertical-align: middle;
  }

  .canvas {
    display: flex;
    flex-direction: column;
    align-self: center;

    .lightbox-wrapper {
      align-self: center;
    }
  }

  .post-content {
    border-top: 1px solid $primary-low;
    padding-top: 1em;
    min-width: 100%;
    word-spacing: 0.25em;
    display: flex;
    flex-direction: column;

    p:last-of-type {
      margin-bottom: 0;
    }
  }
}

.comment-footer {
  margin: 3em 0;
  width: 100%;
  display: flex;

  a.btn.btn-primary {
    cursor: pointer;
    font-weight: bold;
    padding: 12px 18px;
    font-size: 1.1em;
  }
}

.modal {
  display: none;

  &.active {
    visibility: visible;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: fixed;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-container {
    background: $primary-very-low;
    padding: 2em;
    position: relative;
    margin: auto;
    box-shadow: shadow("modal");
    border-radius: 0.3em;
    width: 30em;
    max-width: 90%;
    height: auto;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .modal-close {
      cursor: pointer;
      fill: $primary-low-mid;

      svg {
        height: 1.2em;
        width: 1.2em;

        &:hover,
        &:focus {
          text-decoration: none;
          cursor: pointer;
          fill: $primary-high;
        }
      }
    }

    .modal-header {
      border-bottom: 1px solid $primary-low;
      padding-bottom: 0.5em;
      margin-bottom: 1em;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .modal-title {
        margin: 0;
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  .modal .modal-container {
    padding: 1em;
  }
}

Por favor, ayúdame.

2

¿Has mirado tu paleta de colores en administración - configuración de esquemas de color?

4

Así que, acabo de probar un nuevo tema de prueba y puse todos los colores en blanco (#FFFFFF). Actualicé la página y el texto nunca cambió, ni el fondo de las páginas que no son principales (cuando probé el negro en ellas). Así que eso descarta los colores del tema al menos, supongo… Estoy haciendo todo esto con el plugin Landing Pages y el tema/diseño del blog que lo acompaña. Por alguna razón, cuando cambio el CSS, solo afecta al fondo del texto (mostrado en el video) en la única página principal en el móvil, en el menú hamburguesa, pero el fondo del resto de las páginas del menú desplegable hamburguesa son todos blancos. He intentado cambiar básicamente todos los colores que puedo encontrar en él… Ejemplo de video:

5

Ok, los fondos que no cambiarán están listados aquí:

@media only screen and (max-width: 480px)
body.landing-page .mobile-header .menu {

ddd
ddd310×219 5.78 KB

Y menu.scss:214 me lleva a:

    .mobile-header .menu {
      position: fixed;
      overflow: scroll;
      top: 6em;
      bottom: 0;
      right: 0;
      left: 0;
      visibility: hidden;
      padding: 20px;
      background-color: white;
      flex-direction: column;
      align-items: flex-start;

Pero eso está bajo
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page
¿Así que es algo que simplemente no puedo cambiar por mi cuenta que está integrado en el plugin Landing Pages, o hay algún truco para solucionar este problema de color?

Y el color de la fuente está bajo:

@media only screen and (max-width: 480px)
body.landing-page.menu-visible

que es…

          label {
            display: inline-block;
            background-image: linear-gradient(
              180deg,
              transparent 90%,
              $tertiary 0
            );
            background-size: 100% 100%;
            background-repeat: no-repeat;
            text-decoration: none;
            font-size: 1.5rem;
            color: $primary;
            transition: background-size 0.4s ease;
            cursor: pointer;
          }

Y eso está en:
stylesheets/plugins/discourse-landing-pages/assets/stylesheets/page/menu.scss
Pero cuando cambio el color primario, como se muestra que es, no pasa nada. Y “!important;” no lo anula, así que ¿cómo puedo cambiar el color de la fuente aquí?