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");
/* Оформление для нового WYSIWYG редактора */
@import url("https://shiki-theme.web.app/test/b-shiki_editor-v2.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;
}

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

/* Общие / Пример «400 просмотренных аниме» (только 7-ой уровень) */
.level-7 [href*="common/animelist"] {
  --replacement-image: url("https://i.imgur.com/tPfPOud.gif");
}

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

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

/* Замена аватарки на GIF */
.p-profiles .profile-head .c-brief .avatar::before {
  background-image: url("https://i.imgur.com/CJSOBmF.gif");
  border-radius: 50%;
}

.p-profiles .profile-head .c-brief .avatar img {
  opacity: 0;
}

/* Использование CSS-свойств */
.p-profiles .profile-head .c-brief .avatar::after {
  border: 3px solid #76b9a8;
  border-radius: 50%;
  box-shadow: 0 0 24px #a2ce9b;
  box-sizing: border-box;
}

/* Использование Steam'овских рамок */
:root {
  --user-avatar-frame: url("https://i.imgur.com/ArLrZ6R.png");
  --user-avatar-frame-scale: 1.2;
}

.p-profiles .profile-head .c-brief .avatar img {
  border-radius: 0;
}

/* Использование HoYoLab'овских рамок */
:root {
  --user-avatar-frame: url("https://i.imgur.com/gfrzToi.png");
  --user-avatar-frame-scale: 1.3;
}

/* Padoru Padoru */
:root {
  --user-avatar-frame: url("https://i.imgur.com/QcSxX84.png");
  --user-avatar-frame-scale: 1.2;
}

Как сделать такой же шрифт? Как изменить шрифт?

Шрифты можно найти на Goolge Fonts или похожих сайтах, которые предоставляют ссылки для импорта файлов (не скачивания!). На странице шрифта выберите пункт «Get Font», а затем «Get embed code». На странице «Embed code» во вкладке «Web» выберите пункт import и скопируйте часть кода, вроде такой:

@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000");

Чуть ниже из всех правил нужно скопировать только название шрифта и фолбек вроде serif или sans-serif. Эти значения необходимо указать для свойств --font-main и --font-alt, чтобы заменить соответствующие шрифты на сайте:

body {
  --font-main: "Sofia Sans", sans-serif;
  --font-alt: "Sofia Sans", sans-serif;
}

На других сайтах будет другая последовательность действий, но необходимые данные останутся прежними: импорт шрифта на сайт, содержащий рабочую ссылку на шрифт (иначе вы увидите красную плашку ошибки импорта шрифта на Шикимори), а также название шрифта и, желательно, соответствующий шрифту фолбек. Эту информацию, помимо прочего, можно узнать, перейдя по ссылке для импорта и отыскав значение свойства font-family.

В примере указан шрифт, который выглядит так:
979x434

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

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

/*  Палитра «Стандартная светлая» */
@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 (сохраняется при переходах).