Настройка css-файла mkdocs

#css #mkdocs

Вопрос:

Ссылки в теле изменяют цвет, как только вы наведете курсор мыши и нажмете на ссылку. Есть ли способ исправить цвет в теле mkdocs. Я использовал некоторую документацию mkdocs в качестве примера, но до сих пор у меня есть это

   css: `
    body {
      font-family: ${theme.typography.fontFamily};
      --md-text-color: ${theme.palette.text.primary};
      --md-text-link-color: #8CD7F7;

      --md-code-fg-color: ${theme.palette.text.primary};
      --md-code-bg-color: ${theme.palette.background.paper};

    }
 

Я бы хотел, чтобы ссылки были одинаковыми, когда пользователь наводит курсор и нажимает на них. Каков правильный синтаксис при нажатии или наведении указателя мыши на ссылку.

Я попытался добавить

 .md-nav__link:hover { color: #8CD7F7; }
.md-nav__link--active { color: #8CD7F7; }
 

внутри тела, но это не помогает. Интересно, есть ли другой синтаксис, который должен следовать внутри тела

Ответ №1:

В своем проекте я использую, например, два цвета.

Я создал папку в корневом каталоге под названием «таблицы стилей», где я создал extra.css файл. Вот что внутри этого файла:

 :root {
  --md-primary-fg-color: #5f64a0;
  --md-accent-fg-color: #5f64a0;
}

 

введите описание изображения здесь

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

Не забудьте настроить свой mkdocs.yml:

 extra_css:
  - stylesheets/extra.css

theme:
    palette:
      primary: stylesheets/extra.css
    name: material
    logo: 'images/logo.png'
 

Комментарии:

1. Принятый ответ. Работает отлично, спасибо!

2. Рад вам помочь 🙂