4 месяца и 2 недели
Время за аниме и мангой
1 неделя
1 месяц
3 месяца
6 месяцев
1 год
Активность на сайте
Общие
Жанровые
Франшизы
6 / 232
Обо мне
О моей теме
Коллекция тем
Ночная тема
Cборщик
Вкладки (табы)
Вкладки (u-tabs)
Иконки
Карусель
Заметки
Сборщик с упрощённым подбором цветов: grin3671.github.io

Если вы не хотите заморачиваться с настройкой трёх цветов, то можете скопировать этот код:
Код темы
/* Основной файл темы */
@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);
/* Материальные поля ввода */
@import url(https://shiki-theme.web.app/import/md-textfields.css);
/* Изменения профиля v1.0 */
@import url(https://shiki-theme.web.app/import/profile-update.1.css);
/* Изменения профиля v1.1 (дополнение к v1.0) */
@import url(https://shiki-theme.web.app/import/profile-update.1.1.css);
/* Светлая тема */
@import url(https://shiki-theme.web.app/import/theme-light.css);

/* Настройки переменных темы */
@media {:root {
  /* Обложка профиля */
  --user-cover: url(https://i.imgur.com/A9fsHnT.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);
Подробнее о них написано тут: /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.

Хотите спросить еще что-то — пишите в личку!



Для заинтересованных:
  • Обновления темы: /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]
В ПРОЦЕССЕ РАЗРАБОТКИ

Обычный вариант
Анимированный вариант
Код будет примерно такой. Структура чуть проще, чем в карусели на табах, но более длинные строчки:
[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]
  • Класс animated добавляет анимацию перехода. Дополнительная вложенность как раз из-за этого.
  • Класс counter добавляет счётчик кадров в верхний правый угол карусели.
Части моей темы перекочевавшие в стиль Шикимори:
  • Чёрные полупрозрачные маркеры на видео и изображениях с цветовым индикатором хостинга (#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


Скрыть 836 комментариев
Показать 836 комментариев
Загрузить ещё 10 из 836 комментариев
grin3671
grin3671#
@lujich, @Alan_Baban,
/* Основной файл */
@import url(https://shiki-theme.web.app/import/main.css);
/* Полноэкранная обложка */
@import url(https://shiki-theme.web.app/import/immersive-cover.css);
/* Шрифт Roboto */
@import url(https://shiki-theme.web.app/import/font-roboto.css);
/* Материальные поля ввода */
@import url(https://shiki-theme.web.app/import/md-textfields.css);
/* Изменения профиля v1.0 */
@import url(https://shiki-theme.web.app/import/profile-update.1.css);
/* Изменения профиля v1.1 (дополнение к v1.0) */
@import url(https://shiki-theme.web.app/import/profile-update.1.1.css);


/* Тема с различными вариантами цветовой схемы */
@import url(https://shiki-theme.web.app/import/test/theme_auto-whiteness_blue.css);


/* Боковое меню */
@import url(https://shiki-theme.web.app/import/test/l-side_menu.css);
@media (min-width: 1264px) {
  body::-webkit-scrollbar-thumb {
    --color-surface: rgba(128,128,128,.3);
  }
  .l-top_menu-v2,
  #profiles_show .l-top_menu-v2 {
    background: transparent;
    box-shadow: none;
  }
  .l-top_menu-v2 .logo-container::before { display: none; }
  .l-top_menu-v2 .logo-container .glyph { display: block; }
}


/* Всякие импорты */
@import url(https://css-club.web.app/css/td_spoiler.min.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/compact_news--grid.css);
@import url(https://css-club.web.app/css/u-carousel.css);
@import url(https://css-club.web.app/css/hex_flex.css);
@import url(https://shiki-theme.web.app/test/use-tabs.css);


/* Внешнйи вид */
@media (min-width: 960px) {
  body {
    background: #05050d url(https://i.imgur.com/Tnu4ngU.jpg) center top/100% auto no-repeat scroll !important;
  }
  .l-page {
    background: #05050ddd;
  }
  #profiles_show .l-page {
    background: transparent;
  }
}
lujich
lujich#
@grin3671, благодарю
SkaiRess
SkaiRess#
И снова это я), хотел спросить:
438x378
можно ли, эти оценки разместить в - О себе (BBcode) ?
каждые тип оценок раздельно,
допустим - с 9 в одной вкладке, с 8 в другой и т.д.
erosennin
erosennin#
Привет. хотел спросить про слайдеры. Они мне очень понравились, но я никак не могу разобраться, как мне сделать так, чтобы высота была в виде коэффициента. Как это можно сделать? Хотел украсть идею у /Cosmo+☭ (Обо мне -> Женские персонажи), но никак не получается. Еще возникла проблема с самими слайдерами. Я их добавил 2, но когда я нажимаю на переключение картинки на одном, анимация происходит и на другом тоже. Никак не могу разобраться, не подскажешь, как мне решить эти две проблемы? Свой код скину.

Блок "Обо мне":
[div=u-carousel animated counter][div=u-carousel_images]
[div=to-process active data-dynamic=switcher data-switcher=crsl1][poster]https://img.elo7.com.br/product/original/1F89327/cosplay-zero-two-darling-in-the-franxx-fantasia.jpg[/poster][/div]
[div=to-process data-dynamic=switcher data-switcher=crsl1][poster]https://static.zerochan.net/Zero.Two.%28Darling.in.the.FranXX%29.full.2284953.jpg[/poster][/div]
[div=to-process data-dynamic=switcher data-switcher=crsl1][poster]https://i.imgur.com/8SLjKiA.jpg[/poster][/div]
[/div][/div]

[div=u-carousel animated counter][div=u-carousel_images]
[div=to-process active data-dynamic=switcher data-switcher=crsl1][poster]https://img.elo7.com.br/product/original/1F89327/cosplay-zero-two-darling-in-the-franxx-fantasia.jpg[/poster][/div]
[div=to-process data-dynamic=switcher data-switcher=crsl1][poster]https://static.zerochan.net/Zero.Two.%28Darling.in.the.FranXX%29.full.2284953.jpg[/poster][/div]
[div=to-process data-dynamic=switcher data-switcher=crsl1][poster]https://i.imgur.com/8SLjKiA.jpg[/poster][/div]
[/div][/div]

CSS:
.u-carousel {
	display: inline-flex;
    position: relative;
    transition: none;
    text-align: start;
  	max-height: 455px;
    max-width: 765px;
    width: calc(100% / 5);
  	height: 300px;
}

.u-carousel .u-carousel_images{
  padding-top 75% !important;	
  width: 100%;
  height: 100%;
}

Хотел я получить что-то вроде этого:

1850x441

Если по ширине все понятно: просто указать в процентах, то с высотой так не выходит, а по-другому не получается ничего. Уверен, что мой затуп решается очень просто, но я никак не могу его осилить :(

Заранее спасибо!

P.S. Конкретную высоту я задал временно, когда экспериментировал.


Upd: Мне уже скинули код, но все же интересно, где же была ошибка.
viptalya
viptalya#
@grin3671, привет, возможно ты уже отвечал на этот вопрос, но как поменять при наведении на блоки цвет бордера и самого блока?516x268
ʎxǝɯnʇuɐnᕹ
ʎxǝɯnʇuɐnᕹ#
Лучший модер, на равне с госпожой @Rinrin6 :-D
grin3671
grin3671#
TODO: colors
Content 1
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть