Проблема с цветом иконок в заголовке при наведении мыши

Поддержка
1

Привет!

Долгое время при наведении на иконки на моём сайте они становились серыми, несмотря на то, что я переопределил это значение своим собственным цветом (светло-голубым):

image

Из-за этого CSS-правила Discourse:

.discourse-no-touch .d-header-icons .icon:hover .d-icon, .discourse-no-touch .d-header-icons .icon:focus .d-icon {
    color: #919191;
}

Светло-голубой цвет работал в самом начале, и, похоже, перестал работать после обновления Discourse. Я не обращал на это внимания, возможно, целый год.

Затем я совсем недавно обновился до версии 2.9.0 (я обновляюсь каждый раз, когда интерфейс предлагает это сделать, а иногда и чаще), и мой ранее установленный пользовательский цвет сам собой вернулся, как по волшебству :magic_wand:

image

Однако теперь я заметил, что серый цвет снова вернулся :grey_question: :weary:

Возможно, я обновил Discourse ещё раз за это время.
В любом случае, я не понимаю, почему правильный цвет вернулся и снова исчез, ведь я не редактировал CSS своего форума.

Итак, вот текущий порядок правил CSS:

image
image305×173 4.37 KB

Я хочу вернуть свой светло-голубой цвет. :relieved:

Мой текущий пользовательский CSS:

.d-header-icons .d-icon {
    color: white;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
    background: white;
}
.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
    color: var(--tertiary-medium);
}
.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

Я предпочитаю не использовать !important, если можно обойтись без него, и у меня часто возникают проблемы с переопределением CSS-классов Discourse простым способом из-за родительского класса .discourse-no-touch, который заставляет меня создавать целый поезд :train: :train: :train: селекторов, чтобы достичь своей цели.

  1. Есть ли какие-либо идеи, почему моё переопределение цвета снова работало несколько дней, а затем перестало?

  2. Как правильно переопределить классы Discourse с этим надоедливым дедушкой .discourse-no-touch?

Примечание: синий цвет работает на смартфонах. Существует ли простое целевое правило, чтобы изменения CSS применялись как к устройствам с сенсорным экраном, так и к устройствам без него?

2

Здравствуйте,

Это немного сложно, но я также использую что-то подобное на своём сайте, так что это может быть полезно и для вас. :slightly_smiling_face:

Общее

// Кнопки в заголовке

.d-header-icons {
  .icon {
    &:hover,
    &:focus,
    &:active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
    .discourse-no-touch &:hover,
    .discourse-no-touch &:focus {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
  }
  .d-icon {
    color: #fff;
  }
  .header-dropdown-toggle {
    &:hover {
      background: #fff;
    }
    &.active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
      &:hover {
        background: #fff;
        .d-icon {
          color: var(--tertiary-medium);
        }
      }
    }
  }
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
  color: var(--tertiary);
}
3

Спасибо за ваш ответ!

По какой-то причине, похоже, что цвета были правильными (мой любимый светло-голубой) для нативных иконок в заголовке, но не для моих остальных иконок, установленных через компонент темы.

Таким образом, светло-голубой цвет иконок «гамбургер» и поиска сработал, возможно, из-за их класса .header-dropdown-toggle.
Компонент темы, который добавляет мои дополнительные иконки, также добавляет селектор .custom-header-icon-link на том же уровне, что и класс .header-dropdown-toggle.

Возможно, эти селекторы обеспечивают достаточную специфичность, чтобы переопределить любое правило, использующее .discourse-no-touch? Честно говоря, я не до конца понимаю, что именно происходит здесь в CSS.

Но ваша подсказка помогла мне рефакторить мой CSS. Вот результат:

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

Это работает идеально, и я больше не использую .discourse-no-touch.

chrome_Q7W3Tsm9BU