4 месяца и 2 недели
Время за аниме и мангой
1 неделя
1 месяц
3 месяца
6 месяцев
1 год
Активность на сайте
Общие
Жанровые
Франшизы
5 / 248
Авторы
4 / 44
Обо мне
О моей теме
Коллекция тем
Ночная тема
Cборщик
Вкладки (табы)
Вкладки (u-tabs)
Иконки
Карусель
Заметки

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

Тема обновляется автоматически, но старые версии нужно обновить еще один раз:
Обновить тему в сборщике

Код темы

Если вы не хотите заморачиваться с настройкой трёх цветов в сборщике, то можете скопировать этот код:
/* Основной файл темы */
@import url("https://shiki-theme.web.app/import/main.css");
/* Шрифт Roboto */
@import url("https://shiki-theme.web.app/import/font-roboto.css");
/* Стили обложки профиля */
@import url("https://shiki-theme.web.app/import/profile-cover.css");
/* Изменения профиля v1.0 */
@import url("https://shiki-theme.web.app/import/profile-update.1.css");
/* Светлая тема */
@import url("https://shiki-theme.web.app/import/theme-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%;
}

Важно: если вы отключаете чужие стили, то .p-profiles .profile-head::before надо заменить на .p-profiles .profile-head[data-user-id=2727]::before, где 2727 — ваш ID.



Я также рекомендую поставить следующие импорты, для большего удобства:
Доп. настройки
/* Компактный вид новостей в две колонки на больших экранах */
@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");
Подробнее о них написано тут: /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) */
}
Какие картинки лучше всего использовать для обложки?
С соотношением сторон 16:9 — в любом другом случае у вас будет немного обрезаться картинка по краям на мобильном экране.
Как сделать такое же боковое меню?
Ставьте на свой страх и риск:
/* Боковое меню */
@import url("https://shiki-theme.web.app/import/test/l-side_menu.css");
Что не так:
  • Неправильно работает открытие поиска: открывается со второго клика, после закрытия окна поиска нажатием на фон. Почти починили — спасибо VirousVirous!
  • Подменю (открывается не по клику, а при наведении).
  • Когда доступен поиск по странице, поиск плохо себя ведёт.
  • Жаль нельзя сделать настраиваемое кол-во иконок и легко поменять сам набор ссылок. :very sad2:
Это часть моей темы, на других темах не работает! Можете открыть ссылку в новой вкладке и пошариться в читабельном коде, чтобы что-нибудь украсть себе.
Как сделать прыгающий график активности и летающую аватарку?
Таких анимаций в этой теме нет и не будет. Подгонять тему под шаблоны тоже не буду. В списке готовых тем есть другие темы, которые больше подходят для анимаций или уже имеют их под капотом — выберите одну из них.
Как изменить цвета списков?
Никогда не настраивайте акцентирующий цвет в сборщике как цвет полосы манги! Полоса манги всего лишь использует акцентирующий цвет и может быть легко переписана одним правилом:
.b-stats_bar.manga {
  --color-accent: #80a3bf;
  --color-accent-reduced: #4b6377;
  --color-overlay-accent-hovered: #80a3bf14;
  --color-overlay-accent-pressed: #80a3bf29;
}
Переписывать все акцентирующие элементы было бы куда сложнее. Последние два цвета — это тот же --color-accent, но с двумя цифрами в конце (14) и (29), отвечающими за прозрачность при наведении и нажатии на ссылку «Список манги».

Полоса аниме меняется также просто, только вместо accent там используется primary-цвет. Ну, и в селекторе нужно заменить manga на anime.

Я всё же советую не менять цвет полосы аниме. А для подбора цвета для полосы манги использовать www.colorhexa.com.
Как изменить картинки для достижений?
/* Общие / Пример «Цундере» */
[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

Превью готовых тем


1500x850
Палитра Shikimori
/theme-default.css
1500x850
Стандартная светлая
/theme-light.css
1500x850
Стандартная тёмная
/theme-dark.css
1500x850
Material Light
/theme-material_light.css
1500x850
Material Dark
/theme-material_dark.css

Дополнительные темы

Свои темы можно будет добавить в сборщик позже.

1500x850
Firewatch Night
/theme-firewatch_night.css
1500x850
Darling in the FranXX
/theme-darling_franxx.css
Чтобы переключится на ночную тему, нужно выбрать в настройках операционной системы или браузера тёмную схему (или Dark Mode).
Вы можете использовать любую тёмную схему из коллекции тем. К примеру:
/* Ночная тема «Firewatch Night» */
@import url(https://shiki-theme.web.app/import/darkmode/firewatch_night.css);
Файлы тем лежат в папке /darkmode, а у файлов нет префикса theme-. Возможно расположение и нейминг изменятся. Следите за обновлениями.

Ночную тему можно не только выбрать из готовых вариантов, но и настроить самостоятельно. Для этого нужно добавить простой медиа-запрос со своими тёмными цветами к себе в стиль. К примеру:
@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;
  }
}
Цвета я просто скопировал из тёмной схемы. Но менять абсолютно все цвета не обязательно! Главное заменить цвета текстов и фонов — остальное уже по желанию.
Ещё раз ссылка на сборщик, если вы заблудились во вкладках: grin3671.github.io

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

BBCode
CSS
[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

P.S. Классы указываются так:
[div=use-tabs --ripple --centered --vertical]
(после use-tabs, через пробел, без точек)
УСТАРЕЛО!
Старые вкладки для профиля, которые не поддерживают вложенность. Пожалуйста, переходите на новые вкладки!
[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]
Дополнительные классы для u-tabs:
  • Класс --ripple добавляет эффект наведения на вкладку.
  • Класс --centered располагает горизонтальные вкладки по центру.

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

P.S. Классы указываются так:
  [div=u-tabs --ripple --centered --vertical to-process data-dynamic=tabs]
(после u-tabs, через пробел, без точек)
Возможность легко добавлять к div-элементам иконки с помощью атрибута data-icon.
Профиль
Поддержать
[div=b-button data-icon=account_circle]Профиль[/div]
Возможные значения: material.io

Примеры

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

# Иконка в кнопке переключения вкладок
[div data-tab-switch data-icon=palette]О моей теме[/div]
КАРУСЕЛЬ V2
Вторая версия карусели с эффектом бесконечной прокрутки и определением размеров по первому слайду. Ширина определяется контейнером — пользуйтесь колонками из расширенного BBCode.
Дорабатывается — пользуйтесь старой версией.

BBCode
CSS
Примеры
[div=u-carousel2 to-process data-dynamic=tabs]
[div=b-js-link active data-tab-switch]Tab 1[/div]
[div=b-js-link data-tab-switch]Tab 2[/div]
[div=b-js-link data-tab-switch]Tab 3[/div]
[div=u-carousel-inner]
[div data-tab][img w=1280]https://i.imgur.com/mxmG7NY.jpg[/img][/div]
[div=hidden data-tab][img w=1280]https://i.imgur.com/DEeBBEu.jpg[/img][/div]
[div=hidden data-tab][img w=1280]https://i.imgur.com/tu5R5uP.jpg[/img][/div]
[/div]
[/div]
@import url(https://css-club.web.app/css/u-carousel2.css);

Старая версия
Обычный вариант
Анимированный вариант
BBCode
CSS
[div=u-carousel animated counter][div=u-carousel_images]
[div=to-process active data-dynamic=switcher data-switcher=crsl1][poster]https://i.imgur.com/Tj3JhS8.jpg[/poster][/div]
[div=to-process data-dynamic=switcher data-switcher=crsl1][poster]https://i.imgur.com/8CRFn9R.jpg[/poster][/div]
[div=to-process data-dynamic=switcher data-switcher=crsl1][poster]https://i.imgur.com/8SLjKiA.jpg[/poster][/div]
[/div][/div]
@import url(https://css-club.web.app/css/u-carousel.css);

Подсказки


  • Это не часть моей темы! Не забудьте добавить правило из вкладки CSS выше.
  • Атрибут data-switcher должен содержать уникальный ID для каждой отдельной карусели.
  • Класс animated добавляет анимацию перехода. Дополнительная вложенность как раз из-за этого.
  • Класс counter добавляет счётчик кадров в верхний правый угол карусели.
  • Класс ratio_first позволяет зафиксировать пропорции карусели по первому изображению. Пример.
Части моей темы перекочевавшие в стиль Шикимори:
  • Чёрные полупрозрачные маркеры на видео и изображениях с цветовым индикатором хостинга (#4aefc92)
  • Красивые читабельные цвета для b-code (#f4f183f) (сами цвета не мои)
  • И маркер с указателем языка для всё того же b-code (#740e845)

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


Я не использую GitHub для хранения скомпилированных файлов, т.к. отследить изменения в сжатых файлах там всё равно невозможно. Кроме того, ссылки на файлы получаются слишком длинными:
// 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 (сохраняется при переходах).





Обо мне
Модуль для постеров
Персонажи
Модерация
Постеры
:caterpillar:
Модератор с 2019-10-04.
Мои правки контента: 549
Правила модерации контента (и текстов): /clubs/2052-moderatsiya-kontenta

Какие-то важные вещи записываю тут: /clubs/2744

youtube
youtube
youtube
youtube
youtube
youtube
youtube