ifknow
в сети: 8 окт. 2026
муж.19 летна сайте с 2021 г.
Активность:
Активность на сайте
Друзья
Клубы
Обо мне
О стиле
Табы
Карусель
Соцсети
Осовремененный дизайн Shikimori в стиле экосистемы Apple
Особенности темы:
- Адаптивность: Полная поддержка ПК, планшетов и смартфонов (возможны баги отображения).
- 4 готовых стиля: Original Violet, Ruby Red, Monochrome Noir и Retrowave Neon.
Original Violet
Ruby Red
Retrowave Neon
Monochrome Noir
Как установить тему на свой профиль:
- Откройте Настройки профиля ➔ раздел «Внешний вид сайта».
- Вставьте базовый стиль:
@import url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/css/main.css"); - Для готового цветового пресета добавьте вторую строку импорта:
/* Красная тема (Ruby) */ @import url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/css/red.css"); /* Чёрно-белая тема (Noir) */ @import url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/css/monochrome.css"); /* Ретровейв тема (Neon) */ @import url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/css/retrowave.css"); - Нажмите кнопку «Сохранить».
Как изменить палитру вручную (переменные :root)
Вы можете сами настроить цвета темы, просто изменив следующие параметры и вставив их в поле кода на странице «Внешний вид сайта»
@media all {
:root, html, body, .p-profiles, .p-profiles-show, .l-page, #profiles_show {
/* ============================================================
1. ФОНОВОЕ ИЗОБРАЖЕНИЕ
============================================================ */
/* Вариант А: Использовать готовые картинки из репозитория:
--bg-image: var(--bg-red) !important; (красная тема red-style.gif)
--bg-image: var(--bg-BW) !important; (чёрно-белая тема b&w-style.gif)
--bg-image: var(--bg-retrowave) !important; (ретровейв retrowave.gif)
Вариант Б: Прямая ссылка на файл из репозитория (raw):
--bg-image: url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/img/b&w-style.gif") !important;
Вариант В: Любая внешняя ссылка на картинку (jpg, png, gif) или none: */
--bg-image: url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/img/b&w-style.gif") !important;
/* ============================================================
2. ТЕКСТОВАЯ ПАЛИТРА
============================================================ */
--color-text: #e4e4e9 !important; /* Основной текст страницы (описания, списки, комментарии) */
--color-text-primary: #ffffff !important; /* Самый яркий белый текст (заголовки h1-h6, ник, текст при hover) */
--color-text-secondary: #c4afd4 !important; /* Вторичный текст (категории, бейджи, инфо-метки) */
--color-text-hint: #a1a1aa !important; /* Приглушённый цвет (подсказки, даты, серые счетчики) */
--color-text-soft: #ede6f2 !important; /* Мягкий светлый текст (примеры BBCode, текст активности .action) */
--color-text-disabled: #636366 !important; /* Заблокированные и неактивные элементы */
/* ============================================================
3. ССЫЛКИ
============================================================ */
--color-link: #c4afd4 !important; /* Цвет ссылок по умолчанию */
--color-link-hover: #ffffff !important; /* Цвет ссылок при наведении */
--color-link-active: #ffffff !important; /* Цвет ссылок при нажатии */
/* ============================================================
4. ГЛАВНЫЙ АКЦЕНТНЫЙ ЦВЕТ
============================================================ */
--color-primary: #9884a5 !important; /* Основной цвет темы (кнопки, активные элементы, графики) */
--color-accent: #9884a5 !important; /* Дубликат основного акцента (для совместимости) */
--color-accent-rgb: 152, 132, 165 !important; /* Тот же цвет в формате R, G, B без скобок (отвечает за свечения и полупрозрачные фоны) */
/* ============================================================
5. СВЕТЛЫЙ ОТТЕНОК АКЦЕНТА
============================================================ */
--color-accent-light: #c4afd4 !important; /* Светлый оттенок акцента (градиенты, рамки, подсветка) */
--color-accent-light-rgb: 196, 175, 212 !important; /* R, G, B светлого акцента (для прозрачных эффектов при hover) */
/* ============================================================
6. ПОВЕРХНОСТИ, КАРТОЧКИ И РАМКИ
============================================================ */
--color-background: #121214 !important; /* Базовый тёмный цвет страницы под подложками */
--color-surface: #1c1c1e !important; /* Фон карточек и панелей */
--color-surface-hover: #2c2c2e !important; /* Фон карточек при наведении */
--color-border: rgba(255, 255, 255, 0.08) !important; /* Тонкая полупрозрачная рамка блоков */
--color-border-hover: rgba(255, 255, 255, 0.15) !important; /* Рамка блоков при наведении */
/* ============================================================
7. СИСТЕМНЫЕ ЭЛЕМЕНТЫ ДВИЖКА SHIKIMORI
============================================================ */
--headline-color: #ffffff !important; /* Цвет текста в полосах разделов */
--headline-border-color: #9884a5 !important; /* Акцентная боковая полоска у заголовков разделов */
--headline-background: #232326 !important; /* Фон полосы раздела */
--link-color: #c4afd4 !important; /* Системный цвет ссылок движка */
--link-hover-color: #ffffff !important; /* Системный цвет ссылок движка при hover */
--background-color: #121214 !important; /* Системный фон движка */
--text-color: #e4e4e9 !important; /* Системный текст движка */
}
}Я нашел ошибку, как о ней сообщить?
Создайте issue на GitHub или отправьте Pull Request, если исправили ошибку сами и хотите исправить ее другим
У меня есть идея по улучшению, куда ее передать?
Напишите в комментарии к этому профилю, все предложения будут рассмотрены и по возможности выполнены
Большая часть кода была заимствована у grin3671, за что ему отдельная благодарность
1. Подключение стилей:
Добавьте импорт в Настройки ➔ «Внешний вид сайта»:
@import url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/css/tabs.css");2. Шаблон BBCode для копирования:
[div=use-tabs --centered --ripple]
[div=b-js-link to-process active data-dynamic=switcher data-switcher=tabs data-icon=palette]Вкладка 1[/div]
[div=b-js-link to-process data-dynamic=switcher data-switcher=tabs data-icon=tab]Вкладка 2[/div]
[div=b-js-link to-process data-dynamic=switcher data-switcher=tabs data-icon=public]Вкладка 3[/div]
[div][div]Содержимое первой вкладки[/div]
[div]Содержимое второй вкладки[/div]
[div]Содержимое третьей вкладки[/div][/div]
[/div]3. Важные параметры кнопок переключения:
- to-process data-dynamic=switcher — активирует встроенный обработчик кликов движка Shikimori.
- data-switcher=название — уникальное имя группы переключателей (например, data-switcher=profile_tabs).
- active — класс активной по умолчанию вкладки (задаётся первому табу).
4. Доступные модификаторы (добавляются в use-tabs):
- --centered — центрирует кнопки переключения по ширине страницы.
- --stretched — равномерно растягивает кнопки во всю ширину контейнера.
- --tabline — стиль кнопок в виде аккуратных подчеркнутых вкладок без овальных рамок.
- --vertical — вертикальное меню вкладок слева от контента.
- --vertical --right — вертикальное меню вкладок справа от контента.
- --ripple — анимация неоновой световой полоски под активной вкладкой.
5. Иконки в табах и кнопках (data-icon):
Добавляйте векторные иконки к любым элементам с помощью атрибута data-icon:
- В кнопке переключения вкладок:
[div data-tab-switch data-icon=palette]О моей теме[/div] - В обычной кнопке:
[div=b-button data-icon=account_circle]Профиль[/div] - В кнопке поддержки:
[div=b-button data-icon=monetization_on]Поддержать[/div] - Иконка в заголовке или тексте:
[div data-icon=star][/div] Текст - Каталог всех доступных иконок: Material Icons (material.io)
Слайдер изображений с боковыми стрелками, точками и счётчиком
1. Подключение стилей:
Добавьте импорт в Настройки ➔ «Внешний вид сайта»:
@import url("https://raw.githubusercontent.com/sh1ndoo/shiki-style/main/css/carousel.css");2. Шаблон BBCode для копирования:
[div=u-carousel2 to-process data-dynamic=tabs data-counter]
[div=b-js-link active data-tab-switch]1[/div]
[div=b-js-link data-tab-switch]2[/div]
[div=b-js-link data-tab-switch]3[/div]
[div=u-carousel-inner]
[div data-tab][img w=700]https://ссылка_на_первую_картинку.jpg[/img][/div]
[div=hidden data-tab][img w=700]https://ссылка_на_вторую_картинку.jpg[/img][/div]
[div=hidden data-tab][img w=700]https://ссылка_на_третью_картинку.jpg[/img][/div]
[/div]
[/div]3. Параметры карусели:
- data-counter — отображает стеклянный бейдж со счётчиком (например, 1 / 3) в правом верхнем углу.
- data-counter="hover" — счётчик слайдов проявляется только при наведении мыши.
- hidden data-tab — всем слайдам, кроме первого, обязательно задаётся класс hidden.