Если вы не хотите заморачиваться с настройкой трёх цветов в сборщике, то можете скопировать этот код:
/* Основной файл темы */
@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");
Неправильно работает открытие поиска: открывается со второго клика, после закрытия окна поиска нажатием на фон. Почти починили — спасибо Virous!
Подменю (открывается не по клику, а при наведении).
Когда доступен поиск по странице, поиск плохо себя ведёт.
Жаль нельзя сделать настраиваемое кол-во иконок и легко поменять сам набор ссылок.
Это часть моей темы, на других темах не работает! Можете открыть ссылку в новой вкладке и пошариться в читабельном коде, чтобы что-нибудь украсть себе.
Как сделать прыгающий график активности и летающую аватарку?
Таких анимаций в этой теме нет и не будет. Подгонять тему под шаблоны тоже не буду. В списке готовых тем есть другие темы, которые больше подходят для анимаций или уже имеют их под капотом — выберите одну из них.
Как изменить цвета списков?
Никогда не настраивайте акцентирующий цвет в сборщике как цвет полосы манги! Полоса манги всего лишь использует акцентирующий цвет и может быть легко переписана одним правилом:
Переписывать все акцентирующие элементы было бы куда сложнее. Последние два цвета — это тот же --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");
}
1500x850 Firewatch Night /theme-firewatch_night.css
1500x850 Darling in the FranXX /theme-darling_franxx.css
Чтобы переключится на ночную тему, нужно выбрать в настройках операционной системы или браузера тёмную схему (или Dark Mode). Вы можете использовать любую тёмную схему из коллекции тем. К примеру:
Файлы тем лежат в папке /darkmode, а у файлов нет префикса theme-. Возможно расположение и нейминг изменятся. Следите за обновлениями.
Ночную тему можно не только выбрать из готовых вариантов, но и настроить самостоятельно. Для этого нужно добавить простой медиа-запрос со своими тёмными цветами к себе в стиль. К примеру:
Цвета я просто скопировал из тёмной схемы. Но менять абсолютно все цвета не обязательно! Главное заменить цвета текстов и фонов — остальное уже по желанию.
Ещё раз ссылка на сборщик, если вы заблудились во вкладках: grin3671.github.io
Текущие ошибки и недоработки:
Полные настройки схемы недоступны. (Запрос на это есть от двух человек из более чем 2к+.)
Превью цвета не является кнопкой и недоступно для навигации с помощью Tab.
Нельзя добавить свой sass/scss/css к стилю. (Надо сделать как-нибудь.)
Изображения в FAQ'е мешают загрузке страницы.
Иконка ? слишком маленькая.
У кнопки открытия меню нет соответствующего label для accessibility.
ВКЛАДКИЭти вкладки можно встраивать друг в друга. Всегда указывайте уникальные идентификаторы в параметре data-switcher для каждого набора вкладок. Классы, написанные заглавными буквами можно удалить (вместе со знаком равно).
Класс --ripple добавляет эффект наведения на вкладку.
Класс --centered располагает горизонтальные вкладки по центру.
Виды u-tabs:
Класс --vertical делает вкладки вертикальными при @media (min-width: 960px). (класс --right перемещает боковые вкладки вправо)
Класс --anorva делает вкладки как у @anorva. При этом иконка таких табов будет отображаться на отдельной строке по середине.
Класс --akikawa делает вкладки похожими на вкладки Aki Kawa. При этом вместо границ табов будет использоваться фон, а активная вкладка будет слегка увеличена.
# Иконка в обычной кнопке
[div=b-button data-icon=monetization_on]Поддержать[/div]
# Иконка в кнопке переключения вкладок
[div data-tab-switch data-icon=palette]О моей теме[/div]
КАРУСЕЛЬ V2Вторая версия карусели с эффектом бесконечной прокрутки и определением размеров по первому слайду. Ширина определяется контейнером — пользуйтесь колонками из расширенного BBCode. Дорабатывается — пользуйтесь старой версией.
Я не использую GitHub для хранения скомпилированных файлов, т.к. отследить изменения в сжатых файлах там всё равно невозможно. Кроме того, ссылки на файлы получаются слишком длинными:
Надеюсь, бесплатного трафика хватит на обновления темы.
NOTE кросс-браузерность и пр.
В псевдоэлементах нельзя использовать em для font-size (по крайней мере перезапись значений), т.к. в IE9-11 перезапись не работает и происходит перемножение:
Японский визуальный роман, разработанный компанией Type-Moon и выпущенный 30 января 2004 года на PC. Японский визуальный роман, разработанный компанией Type-Moon и выпущенный 30 января 2004 года на PC. Японский визуальный роман, разработанный компанией Type-Moon и выпущенный 30 января 2004 года на PC.