grin3671

Обновление темы

Код темы

/* Основной файл темы */
@import url("https://shiki-theme.web.app/stable/main.css");
/* Шрифт Roboto */
@import url("https://shiki-theme.web.app/stable/font-roboto.css");
/* Стили обложки профиля */
@import url("https://shiki-theme.web.app/stable/profile-cover.css");
/* Изменения профиля #1 */
@import url("https://shiki-theme.web.app/stable/profile-update_1.css");
/* Тема «Стандартная светлая» */
@import url("https://shiki-theme.web.app/palette/light.css");

/* Настройки переменных темы */
@media {:root {
  /* Обложка профиля */
  --user-cover: url("https://i.imgur.com/j6TzpO5.jpg"); /* Пример */
  /* Фон сайта */
  --user-background: none;
}}

/* Моя обложка в профиле */
.p-profiles .profile-head::before {
  display: block;
  background-position: center 50%;
}

/* Компактный вид новостей в две колонки на больших экранах */
@import url("https://css-club.web.app/css/compact_news--grid.css");
/* Модуль для постеров */
@import url("https://css-club.web.app/css/rate_module.min.css");
/* Фиксированный размер обложек */
@import url("https://css-club.web.app/css/fixed_cover.min.css");
/* Тёмное оформление кода в настройках внешнего вида сайта */
@import url("https://css-club.web.app/css/CodeMirror_dark.css");

Частые вопросы

/* Замена логотипа в меню */
.l-top_menu-v2 .logo-container::after {
  content: 'Shikimori';
}

/* Замена логотипа в меню */
.l-top_menu-v2 .logo-container .logo {
  display: block;
}
.l-top_menu-v2 .logo-container::after {
  display: none;
}

/* Размеры полосок аниме/манги */
.p-profiles-show .b-stats_bar .bar {
  border-radius: 2px; /* Закругление углов (Сейчас: 4px) */
  font-size: 14px; /* Размер цифр (Сейчас: 0) */
  line-height: 20px; /* Высота полосок (Сейчас: 8px) */
}

/* Боковое меню */
@import url("https://shiki-theme.web.app/test/l-side_menu.css");

.b-stats_bar.manga {
  --color-accent: #80a3bf;
  --color-accent-reduced: #4b6377;
  --color-overlay-accent-hovered: #80a3bf14;
  --color-overlay-accent-pressed: #80a3bf29;
}

/* Общие / Пример «Цундере» */
[data-hint^="Цундере 1 уровня"] {
  --replacement-image: url("https://i.imgur.com/qTzhdru.jpg");
}

/* Жанровые / Пример «Историческое» (все уровни) */
[data-hint^="Историческое"] {
  --replacement-image: url("https://i.imgur.com/qTzhdru.jpg");
}

/* Франшизы / Пример «Sword Art Online» */
[href*="franchise/sword_art_online"] {
  --replacement-image: url("https://i.imgur.com/qTzhdru.jpg");
}

/* Авторы / Пример «Хаяо Миядзаки» */
[data-hint^="Хаяо Миядзаки"] {
  --replacement-image: url("https://i.imgur.com/qTzhdru.jpg");
}

• Обновления темы: /commits
  
• Ветки разработки: /branches
  
• Известные ошибки и планируемые улучшения: /issues
  
• Яндекс.Деньги: 41001258665103
  

Изменение палитры

/*  Палитра «Стандартная светлая» */
@import url("https://shiki-theme.web.app/palette/light.css");

/*  Палитра «Firewatch Night» */
@import url("https://shiki-theme.web.app/palette/firewatch_night.css");

Превью готовых палитр

1500x850
Палитра Shikimori
default

1500x850
Стандартная светлая
light

1500x850
Стандартная тёмная
dark

1500x850
Material Light
material_light

1500x850
Material Dark
material_dark

Дополнительные палитры

1500x850
Firewatch Night
firewatch_night

1500x850
Darling in the FranXX
darling_franxx

1500x850
Firewatch Sunset
firewatch_sunset

Тёмная схема

@media (prefers-color-scheme: dark) {
  body {
    /* Цвета текстов */
    --color-text-primary: #e3e3e3;
    --color-text-secondary: #b9b9b9;
    --color-text-hint: #9a9a9a;
    --color-text-disabled: #777777;
    --color-overlay-text-hovered: rgba(227, 227, 227, 0.04);
    --color-overlay-text-selected: rgba(227, 227, 227, 0.08);
    --color-overlay-text-pressed: rgba(227, 227, 227, 0.12);
    /* Фоновые цвета */
    --color-background: #242424;
    --color-background-translucent: rgba(36, 36, 36, 0.9);
    --color-background-dialog: #313131;
    --color-surface: #2e2e2e;
    --color-surface-hover: #3f3f3f;
    --color-surface-active: #474747;
    --color-border: #3e3e3e;
  }
}

• Полные настройки схемы недоступны. (Запрос на это есть от двух человек из более чем 2к+.)
  
• Превью цвета не является кнопкой и недоступно для навигации с помощью Tab.
  
• Нельзя добавить свой sass/scss/css к стилю. (Надо сделать как-нибудь.)
  
• Изображения в FAQ'е мешают загрузке страницы.
  
• Иконка ? слишком маленькая.
  
• У кнопки открытия меню нет соответствующего label для accessibility.
  

[div=use-tabs]
[div=active to-process data-dynamic=switcher data-switcher=tab1]Кнопка 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 2[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 3[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]Контент 1[/div]
[div=CUSTOM_PANEL]Контент 2[/div]
[div=CUSTOM_PANEL]Контент 3[/div]
[/div]
[/div]

@import url(https://shiki-theme.web.app/test/use-tabs.css);

• Цвета для тёмной версии. Можно указать только один раз для корневых вкладок

  --dark

• Дополнительные визуальные эффекты

  --ripple

• Центрирование вкладок

  --centered

• Растягивание вкладок на доступную ширину

  --stretched

• Вертикальный ряд кнопок

  --vertical

• Вертикальный ряд кнопок, расположен справа

  --vertical --right

• Компактный ряд кнопок

  --tabline

[div=use-tabs --ripple --centered --vertical]

[div=u-tabs to-process data-dynamic=tabs]
  [div]
    [div=active data-tab-switch]Кнопка вкладки №1[/div]
    [div data-tab-switch]Кнопка вкладки №2[/div]
    [div data-tab-switch]Кнопка вкладки №3[/div]
  [/div]
  [div data-tab]Содержимое вкладки №1[/div]
  [div=hidden data-tab]Содержимое вкладки №2[/div]
  [div=hidden data-tab]Содержимое вкладки №3[/div]
[/div]

• Класс --ripple добавляет эффект наведения на вкладку.
  
• Класс --centered располагает горизонтальные вкладки по центру.
  

• Класс --vertical делает вкладки вертикальными при @media (min-width: 960px).
  (класс --right перемещает боковые вкладки вправо)
  
• Класс --anorva делает вкладки как у @anorva.
  При этом иконка таких табов будет отображаться на отдельной строке по середине.
  
• Класс --akikawa делает вкладки похожими на вкладки Aki Kawa.
  При этом вместо границ табов будет использоваться фон, а активная вкладка будет слегка увеличена.
  

  [div=u-tabs --ripple --centered --vertical to-process data-dynamic=tabs]

[div=b-button data-icon=account_circle]Профиль[/div]

Примеры

# Иконка в обычной кнопке
[div=b-button data-icon=monetization_on]Поддержать[/div]

# Иконка в кнопке переключения вкладок
[div data-tab-switch data-icon=palette]О моей теме[/div]

• Чёрные полупрозрачные маркеры на видео и изображениях с цветовым индикатором хостинга (#4aefc92)
  
• Красивые читабельные цвета для b-code (#f4f183f) (сами цвета не мои)
  
• И маркер с указателем языка для всё того же b-code (#740e845)
  

Полезные ссылки

• shikimori.one — обновление кеша.
  
• www.colorhexa.com — подбор цветов, удобные ссылки на цвета.
  
• colorhunt.co — готовые палитры.
  

// GitHub
https://raw.githubusercontent.com/grin3671/shiki-theme/css-variables/import/

// Firebase
https://shiki-theme.web.app/import/

NOTE кросс-браузерность и пр.

• В псевдоэлементах нельзя использовать em для font-size (по крайней мере перезапись значений), т.к. в IE9-11 перезапись не работает и происходит перемножение:
  

  .text-large::after
    font-size: 1.25em // 20px - все браузеры
  
    @media (min-width: 960px)
      font-size: 1.5em // 24px - нормальные браузеры, 30px - IE9+ (16 * 1.25 * 1.5)

  Stack Overflow: stackoverflow.com/q/6322916 (2011 г), stackoverflow.com/q/25750684 (2014 г)
  
• Быстро перейти на английскую локаль: ?locale=en (сохраняется при переходах).