E-club - поддержка стиля Edesign для shikimori

[div=Ssylki-anime Дополнительный-класс][b][anime=ID][/b][/anime][div=Evaluation]Текст на красном фоне[/div][div=Text-2]Текст на постере[/div][/div]

.Ssylki-anime strong::before {
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  background-size: 600%;
}
.Ssylki-anime strong::before {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
  background-size: 600%;
}
/*Золотой*/
.Ssylki-anime strong::before {
  background: radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #FDB931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 600%;
}
/*Синий*/
.Ssylki-anime strong::before {
  background: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
  background-size: 600%;
}

.Ssylki-anime .Text-2 {
  color: #dda2a2;
}

.Ssylki-anime .Evaluation
    top: 0.9rem;
    left: 0;
    background: #6e1515;
    border-color: #6e1515;
    color: #d9c9e0;
}

[div=Ssylki-anime Дополнительный-класс][b][anime=1][/b][/anime][div=Evaluation]text[/div][div=Text-2]TEXT2[/div]
[/div]

/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-anime {
  cursor: pointer;
}

.Ssylki-anime.Дополнительный-класс > strong > a::before {
  background-image: url(постер);
}

2 постера в одном

скрин

281x168

В bb code добавляем ещё 1 тайтл:

[div=Ssylki-anime krest-rokunin][b][manga=125076 крест-рокунин][/b][/manga][b][manga=13 ван-пис][/b][/manga][div=Evaluation][/div][div=Evaluation][/div][div=Text-2][/div][/div]

Смещаем вторую красную полоску

/* Двойной постер красная полоска */
.Ssylki-anime .Evaluation:nth-child(4) {
    left: 49%;
}

[div=Ssylki-anime Дополнительный-класс][b][anime=ID][/b][/anime][div=Evaluation]Текст на красном фоне[/div][div=Text-2]Текст на постере[/div][/div]

.Ssylki-anime:hover > .Text-2, .Ssylki-anime:hover .Evaluation {
  opacity: 1 !important;
}

.Ssylki-anime.ваш-класс:hover .Evaluation, .Ssylki-anime.ваш-класс:hover > .Text-2 {
  font-size: 0;
}
.Ssylki-anime.ваш-класс:hover .Evaluation:after {
  font-size: 14px;
  content: "Текст на красном фоне при наведении";
}
.Ssylki-anime.ваш-класс:hover > .Text-2:after {
  font-size: 15px;
  content: "Текст на постере при наведении";
}

.Ssylki-anime.ваш-класс > strong > a::before {
  background-image: url("https://avatars.mds.yandex.net/i?id=78925d9a8fcb39475dc5ac5a95f97c67_l-4034571-images-thumbs&n=13"); /* Картинка */
}
.Ssylki-anime.ваш-класс:hover > strong > a::before {
  background-image: url("https://i.pinimg.com/564x/18/31/07/18310767f33a8733abedd1498c194f7d.jpg"); /* Картинка при наведении */
}

.Ssylki-anime a.b-link.bubbled-processed {
  pointer-events: none;
}
/* Курсор меняется при наведении */
.Ssylki-anime {
  cursor: pointer;
}

[div=Ssylki-Characters][b][anime=20 наруто][/b][/anime][div=Text-1]1 весна2021[/div][/div]

.Ssylki-Characters {
  width: calc(100% / 5); /*где 5 - кол-во в строке*/
}

.Ssylki-Characters {
  background-image: url("https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13");
}

div.Ssylki-Characters:hover {
    background-image: url(https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13);
}

.Ssylki-Characters .Text-1:after {
  height: calc(100% - 2%); /* Изображение немного выходило за рамки */
  width: calc(100% - 2%);
  content: url("https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13");
  filter: blur(4px); /* Размытие */
}

div.Ssylki-Characters {
  transform: none;
  transition: none;
}

@media screen and (max-width: 767px) {
  .magnet {
    display: unset;
  }
  /*Размер*/
  .Ssylki-Characters {
    width: calc(100% / 3);
  }
  .Ssylki-Characters .b-link {
    pointer-events: none; /*Кликабельность*/
  }
}
@media screen and (max-width: 1023px) {
  .Ssylki-Characters .Text-1 {
    visibility: unset;
  }
}

[div=Ssylki-Characters Дополнительный-класс][b][anime=1 ковбой-бибоп][/b][/anime][div=Text-1]300 Скоро[/div][/div]

/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-Characters {
  cursor: pointer;
}

.Ssylki-Characters.Дополнительный-класс a::before {
  background: url(постер) 50% / cover;
}

[div=button-left-1][url=ссылка]Name[/url][b][/b][/div]

@media screen and (min-width: 900px) {
  .id-01 {
    width: calc(100% / 5 - 1 * 1%); /*где 5 - кол-во в строке*/
  }
}

.id-0 img.b-poster, .id-0 .b-image.b-poster img {
  width: unset; /*Картинка влезает по высоте*/
}
.id-0_control-block::after {
  display: none; /*удаляю череп*/
}
.id-0__button.active {
    background: rgba(var(--bright-color), 0.8); /*Цвет активного кружочка*/
}

/* border у обычного таба */
.use-tabs.--On > [data-dynamic], .custom-panel > [data-dynamic] {
    border: 1px solid rgba(var(--light-color), 1);
}
/* border у активного таба */
.use-tabs > [data-dynamic].active, .custom-panel > [data-dynamic].active {
  border-color: #6c6c6c;
  box-shadow: 0 0 10px 1px #323232;
}
/* border у обычного таба, на который навели мышкой */
.use-tabs > [data-dynamic]:hover, .custom-panel > [data-dynamic]:hover {
    background: hsla(var(--c-tab) var(--l-background) / 0%);
    border-color: #606060;
    box-shadow: 0 0 5px 1px #123;
}
/* border у активного таба, на который навели мышкой */
.use-tabs > [data-dynamic].active:hover, .custom-panel > [data-dynamic].active:hover {
    border-color: rgba(var(--light-color), 1);
}
/* Нективный вложенный таб */
.custom-panel > [data-dynamic]:not(.active) {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(var(--light-color), 1);
    border-radius: 0px;
    background: transparent;
}
/* Нективный вложенный таб, наведенный */
.custom-panel > [data-dynamic]:not(.active):hover {
    background: rgba(var(--block-color), 0.7);
}

[div=use-tabs  --ripple --centered --On]
[div=to-process active 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=to-process data-dynamic=switcher data-switcher=tab1]Название 4[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Название 5[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
[div=use-tabs  --ripple --centered --vertical --Fat]
[div=to-process active data-dynamic=switcher data-switcher=tab4]Вертикальный таб 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab4]Вертикальный таб 2[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри первого вертикального таба.
[/div]
[div=CUSTOM_PANEL]
Контент внутри второго вертикального таба.
[/div]
[/div][/div][/div]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab2]Вложенный таб 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab2]Вложенный таб 2[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри первого вложенного таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри второго вложенного таба
[/div]
[/div]
[/div]
[/div]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab3]Вложенный таб 3[/div]
[div=to-process data-dynamic=switcher data-switcher=tab3]Вложенный таб 4[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри третьего вложенного таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри четвертого вложенного таба
[/div]
[/div]
[/div]
[/div]
[div=CUSTOM_PANEL]
Контент внутри 4 таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри 5 таба
[/div]
[/div]
[/div]

.qa-panel:after {
  content: "♥";
}
.qa-panel {
  color: red; /*Цвет*/
}

.qa-panel {
  left: unset;
  right: 3%;
  top: 9.375rem;
}
.qa-link:before {
    left: unset;
    right: 0;
}
.qa-link:hover:before {
    left: unset;
    right: 4.25rem;
}

.qa-link:before {
  color: white;
}