[hideprofile]
[html]
<style>
.pokemon-loop {
--pc-small: 190px;
--pc-active: 390px;
--pc-height: 580px;
--pc-image-height: 300px;
position: relative;
left: 49.5%;
width: min(100%, 890px);
max-width: none;
margin: 18px 0 28px;
color: #f7f8fb;
font-family: "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif;
transform: translateX(-50%);
}
.pokemon-loop,
.pokemon-loop * {
box-sizing: border-box;
}
.pokemon-loop__title {
position: relative;
z-index: 30;
display: flex;
align-items: center;
gap: 11px;
width: max-content;
max-width: calc(100% - 90px);
margin: 0 auto -1px;
padding: 12px 22px 13px;
color: #f7f8fb;
background: #202226;
border: 1px solid rgba(255,255,255,.08);
border-bottom: 0;
border-radius: 12px 12px 0 0;
box-shadow: 0 -5px 24px rgba(0,0,0,.12);
}
.pokemon-loop__title-mark {
width: 9px;
height: 9px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(157,220,255,.12), 0 0 15px rgba(157,220,255,.42);
}
.pokemon-loop__title-text {
font-size: 19px;
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
}
.pokemon-loop__title small {
padding-left: 11px;
color: #9298a2;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: .11em;
text-transform: uppercase;
border-left: 1px solid rgba(255,255,255,.12);
}
.pokemon-loop__viewport {
position: relative;
width: 100%;
height: var(--pc-height);
overflow: hidden;
background: #1d1f23;
border: 1px solid rgba(255,255,255,.07);
border-radius: 18px;
box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.pokemon-loop__track {
position: absolute;
top: 0;
left: 50%;
display: flex !important;
align-items: stretch;
width: max-content !important;
min-width: 0 !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
transition: transform .1s cubic-bezier(.22,.61,.36,1);
}
.pokemon-loop__set {
display: flex;
height: 100%;
}
.pokemon-loop__card {
--accent: #aeb7c2;
--accent-rgb: 174, 183, 194;
position: relative;
display: block;
flex: 0 0 var(--pc-small);
width: var(--pc-small);
height: var(--pc-height);
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
color: #f7f8fb;
background: #24262a;
border: 0 !important;
border-right: 1px solid rgba(0,0,0,.58) !important;
transition: flex-basis .1s ease, width .1s ease, background-color .1s ease;
}
.pokemon-loop__image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: var(--pc-image-height);
padding: 15px 18px 10px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb),.19), transparent 43%),
linear-gradient(160deg, #55585e 0%, #35373b 60%, #292b2f 100%);
}
.pokemon-loop__image::before {
content: attr(data-number);
position: absolute;
top: 22px;
left: 17px;
z-index: -1;
color: rgba(15,16,18,.21);
font-size: 43px;
font-weight: 800;
line-height: .9;
letter-spacing: -.045em;
text-transform: uppercase;
white-space: nowrap;
}
.pokemon-loop__image::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.pokemon-loop__image > img {
position: relative;
z-index: 2;
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: contain;
filter: grayscale(.76) saturate(.72);
opacity: .56;
transform: scale(1);
transition: filter .1s ease, opacity .1s ease, transform .1s ease;
}
.pokemon-loop__body {
position: relative;
height: calc(var(--pc-height) - var(--pc-image-height));
padding: 20px 22px 22px;
background:
linear-gradient(90deg, rgba(var(--accent-rgb),.09), transparent 3px),
#24262a;
}
.pokemon-loop__body::before {
content: "";
position: absolute;
top: 0;
left: 22px;
width: 36px;
height: 2px;
background: var(--accent);
box-shadow: 0 0 12px rgba(var(--accent-rgb),.5);
}
.pokemon-loop__heading {
display: flex !important;
align-items: center;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
background: none !important;
}
.pokemon-loop__identity {
display: flex;
align-items: center;
min-width: 0;
gap: 10px;
}
.pokemon-loop__badge {
position: relative;
display: grid;
flex: 0 0 31px;
width: 31px;
height: 31px;
place-items: center;
background: var(--accent);
border: 2px solid rgba(255,255,255,.5);
border-radius: 9px 50% 50% 50%;
}
.pokemon-loop__badge img {
margin: -20px;
position: relative;
max-width: 45px;
}
.pokemon-loop__name {
overflow: hidden;
font-size: 23px;
font-weight: 750;
line-height: 1.15;
letter-spacing: -.025em;
text-overflow: ellipsis;
white-space: nowrap;
}
.pokemon-loop__gym-type {
display: grid;
flex: 0 0 29px;
height: 29px;
margin-left: 10px;
padding: 0 6px;
place-items: center;
color: var(--accent);
font-size: 18px;
line-height: 1;
background: rgba(var(--accent-rgb),.1);
border: 1px solid rgba(var(--accent-rgb),.58);
border-radius: 10px;
}
.pokemon-loop__details {
max-height: 0;
margin-top: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-7px);
transition: max-height .16s ease, margin-top .16s ease, opacity .08s ease, transform .14s ease;
}
.pokemon-loop__row {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 13px;
margin: 10px 0;
font-size: 14px;
line-height: 1.45;
}
.pokemon-loop__label {
color: #888f99;
font-size: 14px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.pokemon-loop__value {
min-width: 0;
color: #e7e9ed;
}
.pokemon-loop__value--city {
color: #fff;
font-weight: 650;
}
.pokemon-loop__team-label {
margin: 17px 0 5px;
color: #888f99;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
letter-spacing: .12em;
text-align: center;
text-transform: uppercase;
}
.pokemon-loop__team {
display: flex;
align-items: center;
justify-content: center;
min-height: 57px;
gap: 8px;
margin: 0 auto;
}
.pokemon-loop__pokemon {
display: grid;
width: 54px;
height: 54px;
padding: 3px;
place-items: center;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.075);
border-radius: 50%;
transition: border-color .1s ease, background-color .1s ease, transform .1s ease;
}
.pokemon-loop__pokemon:hover {
background: rgba(var(--accent-rgb),.1);
border-color: rgba(var(--accent-rgb),.55);
transform: translateY(-2px);
}
.pokemon-loop__pokemon img {
display: block;
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
object-fit: contain;
image-rendering: auto;
}
.pokemon-loop__button {
position: absolute;
top: 50%;
z-index: 40;
display: none;
align-items: center;
justify-content: center;
width: 50px;
height: 66px;
color: #fff;
font-size: 38px;
line-height: 1;
background: rgba(18,19,22,.82);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
box-shadow: 0 7px 20px rgba(0,0,0,.25);
cursor: pointer;
transform: translateY(-50%);
transition: background-color .2s ease, border-color .2s ease;
user-select: none;
}
.pokemon-loop__button:hover {
background: rgba(10,11,13,.97);
border-color: rgba(255,255,255,.18);
}
.pokemon-loop__button--prev { left: -60px; }
.pokemon-loop__button--next { right: -60px; }
/* Состояния, которыми управляет существующий локальный JS карусели. */
.pokemon-loop.is-js .pokemon-loop__track {
transition: none !important;
}
.pokemon-loop.is-js .pokemon-loop__button {
display: flex;
}
.pokemon-loop.is-js .pokemon-loop__card.is-active {
z-index: 3;
flex-basis: var(--pc-active);
width: var(--pc-active);
background: #202226;
box-shadow: 0 12px 34px rgba(0,0,0,.42);
}
.pokemon-loop.is-js .pokemon-loop__card.is-active .pokemon-loop__image > img {
filter: none;
opacity: 1;
transform: scale(1.012);
}
.pokemon-loop.is-js .pokemon-loop__card.is-active .pokemon-loop__body {
background:
linear-gradient(90deg, rgba(var(--accent-rgb),.15), transparent 3px),
#202226;
}
.pokemon-loop.is-js .pokemon-loop__card.is-active .pokemon-loop__details {
max-height: 190px;
margin-top: 8px;
opacity: 1;
transform: translateY(0);
transition: max-height .1s ease, margin-top .1s ease, opacity .1s ease .05s, transform .1s ease;
}
/* Во время внутренней перестановки карточек переходы отключены. */
.pokemon-loop.is-normalizing .pokemon-loop__card,
.pokemon-loop.is-normalizing .pokemon-loop__image > img,
.pokemon-loop.is-normalizing .pokemon-loop__details {
transition: none !important;
}
@media (max-width: 650px) {
.pokemon-loop {
--pc-small: 122px;
--pc-active: min(82vw, 330px);
--pc-height: 510px;
--pc-image-height: 250px;
left: 0;
width: 100%;
margin: 14px auto 22px;
transform: none;
}
.pokemon-loop__title {
max-width: calc(100% - 52px);
padding: 10px 15px 11px;
}
.pokemon-loop__title-text { font-size: 16px; }
.pokemon-loop__title small { display: none; }
.pokemon-loop__viewport { border-radius: 13px; }
.pokemon-loop__body { padding: 18px 17px 20px; }
.pokemon-loop__body::before { left: 17px; }
.pokemon-loop__identity { gap: 8px; }
.pokemon-loop__badge { flex-basis: 28px; width: 28px; height: 28px; }
.pokemon-loop__name { font-size: 20px; }
.pokemon-loop__gym-type { flex-basis: 27px; width: 27px; height: 27px; }
.pokemon-loop__row { grid-template-columns: 76px minmax(0,1fr); gap: 8px; font-size: 13px; }
.pokemon-loop__button { width: 40px; height: 58px; font-size: 31px; }
.pokemon-loop__button--prev { left: -6px; }
.pokemon-loop__button--next { right: 6px; }
.pokemon-loop__pokemon { width: 49px; height: 49px; }
.pokemon-loop__pokemon img { width: 44px !important; height: 44px !important; max-width: 44px !important; }
}
</style>
<div class="pokemon-loop" data-pokemon-loop data-start="2">
<div class="pokemon-loop__title">
<span class="pokemon-loop__title-mark"></span>
<span class="pokemon-loop__title-text">Лидеры стадионов</span>
</div>
<div class="pokemon-loop__viewport">
<div class="pokemon-loop__track">
<!-- Служебная структура карусели сохранена для существующего JS MyBB. -->
<div class="pokemon-loop__set pokemon-loop__set--middle">
<div class="pokemon-loop__card pokemon-loop__card--1" style="--accent:#c8d0d8;--accent-rgb:200,208,216;">
<div class="pokemon-loop__image" data-number="CHEREN">
<img src="https://forumstatic.ru/files/001c/73/c0/68557.png" alt="Шерен">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Базовый значок"><span>◆</span></span>
<span class="pokemon-loop__name">Шерен</span>
<span class="pokemon-loop__gym-type" title="Стадион нормального типа">●</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Аспертия</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Преподаватель школы тренеров и наставник начинающих.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Вотчог"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/505.png" alt="Вотчог" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Хердиер"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/507.png" alt="Хердиер" loading="lazy"></span>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__card pokemon-loop__card--2" style="--accent:#f1cf4d;--accent-rgb:241,207,77;">
<div class="pokemon-loop__image" data-number="ELESA">
<img src="https://forumstatic.ru/files/001c/73/c0/53740.png" alt="Элеса">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Токсичный значок"><img src="https://archives.bulbagarden.net/media/upload/5/5b/Bolt_Badge.png"></span>
<span class="pokemon-loop__name">Элеса</span>
<span class="pokemon-loop__gym-type" title="Электрический стадион">ϟ</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Нимбаса</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Модель и лидер стадиона, известная быстрыми электрическими боями.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Эмолга"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/587.png" alt="Эмолга" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Зебстрайка"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/523.png" alt="Зебстрайка" loading="lazy"></span>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__card pokemon-loop__card--3" style="--accent:#d66bdc;--accent-rgb:214,107,220;">
<div class="pokemon-loop__image" data-number="ROXIE">
<img src="https://forumstatic.ru/files/001c/73/c0/63362.png?v=1" alt="Рокси">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Токсичный значок"><img src="https://archives.bulbagarden.net/media/upload/3/3e/Toxic_Badge.png"></span>
<span class="pokemon-loop__name">Рокси</span>
<span class="pokemon-loop__gym-type" title="Ядовитый стадион">Ядовитый</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Вирбанк</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Бас-гитаристка рок-группы и лидер ядовитого стадиона.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Коффинг"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/109.png" alt="Коффинг" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Уирлипид"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/544.png" alt="Уирлипид" loading="lazy"></span>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__card pokemon-loop__card--4" style="--accent:#f0a8cb;--accent-rgb:240,168,203;">
<div class="pokemon-loop__image" data-number="VALERIE">
<img src="https://forumstatic.ru/files/001c/73/c0/51062.png?v=1" alt="Валери">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Стальной значок"><span><img src="https://forumstatic.ru/files/001c/73/c0/51270.png"></span></span>
<span class="pokemon-loop__name">Валери</span>
<span class="pokemon-loop__gym-type" title="Волшебный стадион">✦</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Лаверр</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Модельер и лидер стадиона, вдохновлённого миром фей.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Мавайл"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/303.png" alt="Мавайл" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Сильвеон"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/700.png" alt="Сильвеон" loading="lazy"></span>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__card pokemon-loop__card--4" style="--accent:#f0a8cb;--accent-rgb:240,168,203;">
<div class="pokemon-loop__image" data-number="CLAY">
<img src="https://archives.bulbagarden.net/media/upload/d/d0/Black_White_Clay.png" alt="Клэй">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Волшебный значок"><span>◆</span></span>
<span class="pokemon-loop__name">Клэй</span>
<span class="pokemon-loop__gym-type" title="Волшебный стадион">✦</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Лаверр</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Модельер и лидер стадиона, вдохновлённого миром фей.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Мавайл"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/303.png" alt="Мавайл" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Сильвеон"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/700.png" alt="Сильвеон" loading="lazy"></span>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__card pokemon-loop__card--5" style="--accent:#8f83e8;--accent-rgb:143,131,232;">
<div class="pokemon-loop__image" data-number="IRIS">
<img src="https://forumstatic.ru/files/001c/73/c0/79726.png" alt="Ирис">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Значок Легенды"><span><img src="
https://archives.bulbagarden.net/media/ … ;/span>
<span class="pokemon-loop__name">Ирис</span>
<span class="pokemon-loop__gym-type" title="Драконий стадион">◇</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Опелусид</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Тренер драконов и бывший чемпион лиги Юнова.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Хаксорус"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/612.png" alt="Хаксорус" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Драддигон"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/621.png" alt="Драддигон" loading="lazy"></span>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__card pokemon-loop__card--5" style="--accent:#8f83e8;--accent-rgb:143,131,232;">
<div class="pokemon-loop__image" data-number="IRIS">
<img src="https://forumstatic.ru/files/001c/73/c0/62803.png" alt="Ирис">
</div>
<div class="pokemon-loop__body">
<div class="pokemon-loop__heading">
<span class="pokemon-loop__identity">
<span class="pokemon-loop__badge" title="Ледяной значок"><span><img src="
https://forumstatic.ru/files/001c/73/c0 … ;/span>
<span class="pokemon-loop__name">Ирис</span>
<span class="pokemon-loop__gym-type" title="Драконий стадион">◇</span>
</span>
</div>
<div class="pokemon-loop__details">
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Город</span>
<span class="pokemon-loop__value pokemon-loop__value--city">Опелусид</span>
</div>
<div class="pokemon-loop__row">
<span class="pokemon-loop__label">Инфо</span>
<span class="pokemon-loop__value">Тренер драконов и бывший чемпион лиги Юнова.</span>
</div>
<div class="pokemon-loop__team-label">Команда</div>
<div class="pokemon-loop__team">
<span class="pokemon-loop__pokemon" title="Хаксорус"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/612.png" alt="Хаксорус" loading="lazy"></span>
<span class="pokemon-loop__pokemon" title="Драддигон"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/621.png" alt="Драддигон" loading="lazy"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pokemon-loop__controls"></div>
</div>
[/html]