Шаблоны с @import

grin3671вCSS-club – настройка внешнего вида сайта

7 июня 2019

Импортируемые шаблоны

Шаблоны, код которых импортируется с помощью правила @import. Основная идея – упростить установку шаблона, избавиться от повторяющегося кода в настройках пользователей и необходимости обновлять его вручную. Из-за особенностей работы @import на Шикимори все шаблоны с @media рекомендуется делать в виде импортируемых шаблонов. О самом правиле можно прочитать тут: webref.ru.

Особенности @import

Работа @import на Шикимори имеет свои особенности:

@import встаивается в стиль
Все @import'ы автоматически скачиваются на сервер Шикимори и встраиваются в готовый пользовательский стиль в открытом виде вне медиа-запроса, которым оборачиваются другие правила.

спойлер

CSS в настройках

body {
  color: red;
}

@import url("https://example.com/css/import.css");

Обработанный CSS

/* https://example.com/css/import.css */
.example::after { content: "Imported!"; }

@media only screen and (min-width: 1024px) {
  body {
    color: red;
  }
}

@import можно писать где угодно
Из-за предыдущей особенности вы можете указывать @import там, где вам будет удобнее.

@import можно делать напрямую с гитхаба
Опять же из-за первой особенности @import не требует жесткой привязки к content-type импортируемого стиля: просто указывайте ссылку на raw.githubusercontent.com!

@import кешируется!
Эта информация для авторов стилей!

кешируются

/tests/reset_styles_cache

Комментарии

Скрыть 8 комментариев

Показать 8 комментариев

Загрузить ещё 8 комментариев

borr14 июля 2022#

@Dilragon, Потому один скрипт отметил стили другого скрипта, поэтому испорчено.

@Dilragon

Dilragon14 июля 2022#

@borr, И как это исправить?

@borr

borr14 июля 2022#

@Dilragon, либо убери код с прогресс баром, либо расположение ачивок )

@Dilragon

Dilragon14 июля 2022#

@borr, Ах, спасибо. Сам не догадывался

Теперь все работает)

Aлeкcaндрoвич14 декабря 2022#

Замена стандартных постеров не работает. Я даже с примера скопировал коды и добавил в избранное Айрисвиль, но ничего не поменялось. Как так?

@grin3671

grin367114 декабря 2022#

@Aлeкcaндрoвич, закрывать правила надо:

.p-profiles-show .b-feedback:after {
  display: inline-block;
  position: fixed;
  width: 300px;
  height: 300px;
  right: 0px;
  bottom: 0px;
} /* Добавить эту скобку */

[href*="characters/503-"] {
  --show-default: 0;
  --custom-image: url(…);
}

@Aлeкcaндрoвич

Aлeкcaндрoвич14 декабря 2022#

@grin3671,

720x1650

720x1650всё равно не работает. Что не так делаю?

@grin3671

grin367114 декабря 2022#

@Aлeкcaндрoвич, зачем ты ещё одно правило .p-profiles-show .b-feedback:after добавил, так и не закрыв первое?

@Aлeкcaндрoвич

Aлeкcaндрoвич14 декабря 2022#

@grin3671, всё, разобрался, получилось. Оказалось, что все просто, даже как-то стыдно за себя. Спасибо большое за помощь.

lolokoshka 3 апреля 2023#

Нужна помощь с ачивками. Я использую альтернативный вид достижений

@import url(https://raw.githubusercontent.com/anorva/Shikimori/master/Import-files/Trophies.css);

И у меня возникла проблема с ачивками авторов. Пишет, что у меня 100 процентов по Миядзаки, но ачивка серая. И я так поняла, это связано с этим скриптом. Это можно как-то исправить?

@grin3671

grin3671 3 апреля 2023#

@lolokoshka,

#profiles_show .b-achievement[data-progress="100"]::before {
  opacity: 0;
}

Стили для «Нет достижений»

.p-profiles .profile-content .achievements .cc-2 {
  align-items: start;
}

.p-profiles .profile-content .achievements .cc-2 .c-column .b-nothing_here {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #424242;
  text-indent: 16px;
  grid-area: 1 / 1;
  background-color: rgba(0 0 0 / 8%);
  border-radius: 3px;
  transition: 160ms ease-in-out;
  cursor: var(--cursor-default, default);
}
.p-profiles .profile-content .achievements .cc-2 .c-column .b-nothing_here:hover {
  background-color: rgba(0 0 0 / 12%);
}

.p-profiles .profile-content .achievements .cc-2 .c-column .b-nothing_here::after {
  content: "";
  grid-area: 1 / 1;
  display: block;
  width: calc(100% - 1px);
  padding-top: 50%;
  background-color: rgba(17 17 17 / 60%);
  border-radius: 3px 0 0 3px;
}

.p-profiles .profile-content .achievements .header:has(+.b-nothing_here) {
  display: flex;
  position: relative;
  grid-area: 1 / 1;
  width: 50%;
  align-items: center;
  justify-content: center;
}

.p-profiles .profile-content .achievements .header:has(+.b-nothing_here) .title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(255 255 255 / 72%);
}

@lolokoshka

lolokoshka 3 апреля 2023#

@grin3671, большое спасибо

animeshnik_ALT16 мая 2023#

Дополнение для «Замена стандартных постеров»

Замена стандартных постеров везде

Замена стандартных постеров на странице тайтла/персонажа, на мелких постерах и на странице редактирования.

569x488

442x103

742x396
Код должен выглядеть примерно так:

/* Замена стандартных постеров от grin3671*/
@import url(https://css-club.web.app/css/custom_posters.min.css);
/*Дополнение*/
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/Update-posters.css);
/*Аниме Наруто*/
[href*="animes/z20-"], [data-href*="animes/20/"], [srcset*="animes/20/"] {
  --show-default: 0 !important;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=5d695e7e6b50b9feb8c346fe7045bb6e_l-8221351-images-thumbs&n=13) !important;
}
/*Манга Ванпанчмен*/
[href*="mangas/z44347-"], [data-href*="mangas/44347/"], [srcset*="mangas/44347/"] {
  --show-default: 0 !important;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=82183d8defd70e14696a8805ebe52a86_l-4297369-images-thumbs&n=13) !important;
}
/*Персонаж Лелуш Ламперуж*/
[href*="characters/417-"], [srcset*="characters/417/"] {
  --show-default: 0 !important;
  --display-default-character: none !important;
  --display-character-image: flex !important;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=4656b4c21ce4042d1ca7d77d88605ae9_l-5208099-images-thumbs&ref=rim&n=13&w=2012&h=3000) !important;
}

Объяснение кода

Для этого, в дополнение к коду от /grin3671 импортируем данный файл 1 раз:
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/Update-posters.css);
Для аниме в селекторе ещё указываем [data-href*="animes/20/"], [srcset*="animes/20/"] ID БЕЗ тире и букв.
Для манги в селекторе ещё указываем [data-href*="mangas/44347/"], [srcset*="mangas/44347/"]. ID Также без тире и букв.
Персонажам в селекторе можно указать только [srcset*="characters/417/"]. Но зато им добавляются ещё 2 свойства:

--display-default-character: none !important;  
--display-character-image: flex !important;

Первое отвечает за отображение стандартного постера на странице персонажа, а второе за отображение --custom-image. Не трогаем.
ВАЖНО! После каждого правила нужно прописать !important, иначе стандартное значение перекроет ваше! Это, скорей всего, мой косяк, но я не знаю как его починить

--custom-settings Поддерживаются, вроде.

@animeshnik_ALT, @animeshnik_ALT, @animeshnik_ALT, @animeshnik_ALT

animeshnik_ALT20 мая 2023#

@animeshnik_ALT, Для людей делаем то же, что и для персонажей, только меняем characters на people

@animeshnik_ALT

animeshnik_ALT23 мая 2023#

@animeshnik_ALT,

Добавляем постер в подсказку

Было:

666x392

Стало:

858x387

Для этого вставляем это:

/* Добавляем постер в подсказку */
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/add-poster-to-tooltip.css);

И всё. Если вы уже до этого сделали всё как надо, то код сработает.
*Создаём пустоту слева куда будем запихивать наш постер.* *Код работает только на странице профиля и избранного.*

@animeshnik_ALT

animeshnik_ALT27 мая 2023#

@animeshnik_ALT,

Улучшение кода

Поправил код. Теперь !important указывать не нужно.
Для аниме и манги в селекторе вместо srcset указываем src.
Селекторы персонажей, как и людей, остались неизменны.
Также content'ом добавил постеры ещё в парочку мест.
Если что-то забыл, пишите

.
P.S. морр недолюбливает читателей ранобэ, поэтому в ссылке href он указывает ranobe, а в остальных уже mangas. Не будем высокомерными и подчинимся его правилам.

Правильный код должен выглядеть так:

/* Замена стандартных постеров от grin3671 */
@import url(https://css-club.web.app/css/custom_posters.min.css);
/* Дополнение */
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/Update-posters.css);
/* Добавляем постер в подсказку */
@import url(https://raw.githubusercontent.com/ALTaww/Shikimori-posters/main/add-poster-to-tooltip.css);
/* Аниме Наруто */
[href*="animes/z20-"], [data-href*="animes/20/"], [src*="animes/20/"] {
  --show-default: 0;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=5d695e7e6b50b9feb8c346fe7045bb6e_l-8221351-images-thumbs&n=13);
}
/* Манга Ванпанчмен */
[href*="mangas/z44347-"], [data-href*="mangas/44347/"], [src*="mangas/44347/"] {
  --show-default: 0;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=82183d8defd70e14696a8805ebe52a86_l-4297369-images-thumbs&n=13);
}
/* Персонаж Лелуш Ламперуж */
[href*="characters/417-"], [srcset*="characters/417/"] {
  --show-default: 0;
  --display-default-character: none;
  --display-character-image: flex;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=4656b4c21ce4042d1ca7d77d88605ae9_l-5208099-images-thumbs&ref=rim&n=13&w=2012&h=3000);
}
/* Человек Людвиг ван Бетховен */
[href*="people/9160-"], [srcset*="people/9160/"] {
  --show-default: 0;
  --display-default-character: none;
  --display-character-image: flex;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=103a6ef0fd0e6650720b6e47e5f45df0_l-5652956-images-thumbs&n=13);
}
/* Ранобэ Волчица и пряности */
[href*="ranobe/9115-"], [data-href*="mangas/9115/"], [src*="mangas/9115/"] {
  --show-default: 0;
  --custom-image: url(https://avatars.mds.yandex.net/i?id=5d695e7e6b50b9feb8c346fe7045bb6e_l-8221351-images-thumbs&n=13);
}

@animeshnik_ALT, @Reverend

Reverend16 октября 2023#

@animeshnik_ALT, не знаешь как можно улучшить качество постеров в избранном, например вот тут йор и сатоми выглядят хорошо, а китагава пиксельно

399x235

@animeshnik_ALT

animeshnik_ALT16 октября 2023#

@Reverend, Единственный способ который я знаю это округление углов, но если это не помогает то видимо уже ничего не поделать(

Apc 4 января 2024#

А чаво бенгальский огонь на курсор не навешивается? Слишком крупная гифка?

Хотя ладно, в мелком масштабе смотрится не оч.

ryoumu28 апреля 2024#

кто-то может подсказать как вернуть постеры персонажей, которые я заменил? они все слетели, когда я ничего не изменял и сейчас стоят обычные постеры... раньше все ок было, потом постеры исчезли вообще, сейчас постарался чето сделать, но вернулись не те, которые я делал

Твой комментарий