CSS-переменные Шикимори

grin3671вCSS-club – настройка внешнего вида сайта

22 апреля 2022

В стандартном стиле Шикимори существуют CSS-переменные, которые позволяют гораздо проще изменить некоторые элементы сайта, в особенности ссылки. Вместо поиска множества селекторов, можно изменить переменную и все элементы, использующие эту переменную, будут изменены. Список, конечно, небольшой, но даже это сильно упростит жизнь. Если интересно узнать больше о переменных, прочитайте эту статью: developer.mozilla.org

Иконки

Ссылки

Подзаголовки

Шрифты

...

Переменная --icon-color, которая позволит быстро изменить цвет иконок действий под постерами тайтлов и клубов, а также кнопки действий в старом редакторе сообщений:

html[data-color-mode=light] {
  --icon-color: #444;
}

Примеры элементов:

html[data-color-mode=light] {
  --link-color: #0d6efd;
  --link-hover-color: #0a58ca;
  --link-active-color: #0a58ca;
}

Пример элемента:
CSS-переменные Шикимори

html[data-color-mode=light] {
  --headline-background-color: #f8f9fa;
  --headline-border-color: #e3f2fd;
  --headline-color: #141414;
}

Пример элемента:

Подзаголовок

:root {
  /* Размер шрифта */
  --font-size-base-desktop: 13px;
  --font-size-base-mobile: 13px;

  /* Основной шрифт */
  --font-main: Helvetica Neue, Arial, Verdana, sans-serif;

  /* Шрифт для кода */
  --font-code: Monaco, Menlo, Consolas, Ubuntu Mono, Courier New, monospace;

  /* Альтернативный шрифт */
  --font-alt: Open Sans, Helvetica Neue, Arial, Verdana, sans-serif;
  --font-alt-hadline-letter-spacing: 0.18px;
  --font-alt-text-letter-spacing: -0.13px;
}

Пример элементов с альтернативным шрифтом:

Кнопка

Тег

Комментарии

grin3671 9 августа 2024#

Добавлена переменная --icon-color, которая позволит быстро изменить цвет иконок действий под постерами тайтлов и клубов, а также кнопки действий в старом текстовом редакторе (не WYSIWYG).

Твой комментарий