Карточки участников

[hideprofile]~~пока так, буду еще менять визуал~~
[html]<style>
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.player-card {
width: 210px;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 12px;
font-family: 'Nunito Sans';
position: relative;
overflow: visible;
height: 217px;
}

.player-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 240px; /* подгони под нужную высоту картинки */
background-image: url(https://upforme.ru/uploads/001c/25/14/3/729594.png);
background-size: cover;
background-position: center;
filter: blur(2px); /* легкий блюр сверху картинки */
z-index: 0;
border-radius: 12px;
}

.player-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 240px;
background: linear-gradient(to bottom, rgb(252 244 255 / 73%), rgb(223 179 218 / 64%), rgb(26 4 28 / 25%));
z-index: 1;
pointer-events: none;
border-radius: 12px;
}

.player-card > * {
position: relative;
z-index: 2;
}

.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #831e6054 !important;
box-sizing: border-box;
}

.player-name { font-weight: 700; font-size: 16px; color: #000; }
.petals { font-size: 13px; color: #333; font-weight: bold;}

.section-title { font-size: 12px;
color: #ffffff;
margin: 6px 0 4px;
display: block;
font-weight: bold;
font-family: 'Nunito Sans';
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0px 0px 4px #35003b;}

.row { display: flex; gap: 6px; align-items: center; }
.card, .card-content, .festival-panel, .festival-left, .festival-right { overflow: visible; }

/* Обобщённый стиль для 50x50 изображений/иконок */
.icon-image {
width: 28px;
height: 28px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
position: relative;
overflow: visible; /* разрешаем показывать подсказку вне рамок блока */
}

.icon-image > img {
width: 24px;
height: 24px;
object-fit: cover;
display: block;
}

.tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
width: 150px;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
background: #333;
color: #fff;
padding: 6px 8px;
border-radius: 4px;
font-size: 11px;
line-height: 1.2;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
z-index: 9999;
}
.icon-image:hover .tooltip,
.icon-image:focus-within .tooltip {
opacity: 1;
}
.muted { color: #666; font-size: 12px; }
</style>
<div class="card-grid">

<div class="player-card">
<div class="card-header">
<img class="avatar" src="https://upforme.ru/uploads/001c/25/14/14/916893.png">
<div>
<div class="player-name">Флёр Бланшетт</div>
<span class="petals">Лепестков: 23</span>
</div>
</div>

<div class="section-title">Баффы</div>
<div class="row" aria-label="Баффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/934156.png">
<div class="tooltip">+2 в выбранной активности с постом; в саду что-то произойдёт</div>
</div>
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/872202.png">
<div class="tooltip">+2 к социальному рейтингу</div>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Дебаффы</div>
<div class="row" aria-label="Дебаффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/59122.png">
<div class="tooltip">лишь задумайтесь — как много различных персонажей!</div>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Предметы</div>
<div class="row" aria-label="Предметы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/992528.png">
<div class="tooltip">Цветок [1] — обменивается на 5 лепестков или другие предметы.</div>
</div>
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/232201.png">
<div class="tooltip">Цветочище [1] — обменивается на 12 лепестков или другие предметы.</div>
</div>
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/325307.png">
<div class="tooltip">Светящийся амулет одиночества [2] — даёт +2 к модификатору в одиночных сценах (+1 в сценах с людьми) и +10 лепестков</div>
</div>
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/810448.png">
<div class="tooltip">Элемент уникального наряда [1]</div>
</div>
</div>
</div>

<div class="player-card">
<div class="card-header">
<img class="avatar" src="https://upforme.ru/uploads/001c/25/14/12/533021.jpg">
<div>
<div class="player-name">Деми Мелодис</div>
<span class="petals">Лепестков: 19</span>
</div>
</div>

<div class="section-title">Баффы</div>
<div class="row" aria-label="Баффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/872202.png">
<div class="tooltip">+1 к социальному рейтингу</div>
</div>
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/985758.png" style="filter: grayscale(1);">
<div class="tooltip"><s>перебросьте кубик в любой активности. Если выпадет результат лучше, поменяйте</s></div>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Дебаффы</div>
<div class="row" aria-label="Дебаффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/2/441545.png">
<div class="tooltip">no debuff?</div>
</div>
</div>

<div class="player-card">
<div class="card-header">
<img class="avatar" src="https://upforme.ru/uploads/001c/25/14/3/698427.png">
<div>
<div class="player-name">Мэгги Сойер</div>
<span class="petals">Лепестков: 17</span>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Дебаффы</div>
<div class="row" aria-label="Дебаффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/2/441545.png">
<div class="tooltip">no debuff?</div>
</div>
</div>

</div>
</div>

<div class="player-card">
<div class="card-header">
<img class="avatar" src="https://upforme.ru/uploads/001c/25/14/3/294340.png">
<div>
<div class="player-name">Райз Коллен</div>
<span class="petals">Лепестков: 3</span>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Дебаффы</div>
<div class="row" aria-label="Дебаффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/616585.png">
<div class="tooltip">спутали с айдолом</div>
</div>
</div>

</div>
</div>


<div class="player-card">
<div class="card-header">
<img class="avatar" src="https://upforme.ru/uploads/001c/25/14/63/394767.png">
<div>
<div class="player-name">Николас Леман</div>
<span class="petals">Лепестков: 8</span>
</div>
</div>

<div class="section-title">Баффы</div>
<div class="row" aria-label="Баффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/113629.png">
<div class="tooltip">+2 к модификатору на любую активность; кажется, что-то произойдет в ателье.</div>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Дебаффы</div>
<div class="row" aria-label="Дебаффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/187828.png">
<div class="tooltip">-1 к сл. отметке. Вам ещё идти за карточкой.</div>
</div>
</div>

</div>
</div>


<div class="player-card">
<div class="card-header">
<img class="avatar" src="https://upforme.ru/uploads/001c/25/14/69/703109.png">
<div>
<div class="player-name">Кайл Лестер</div>
<span class="petals">Лепестков: 11</span>
</div>
</div>

<div class="section-title">Баффы</div>
<div class="row" aria-label="Баффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/113629.png">
<div class="tooltip">+2 к модификатору на любую сцену в ателье; +3 лепестка за образ в ателье.</div>
</div>
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/71211.png">
<div class="tooltip">+1 к рейтингу среди обслуги</div>
</div>
</div>

<div class="section-title" style="margin-top:6px;">Дебаффы</div>
<div class="row" aria-label="Дебаффы">
<div class="icon-image" tabindex="0">
<img src="https://upforme.ru/uploads/001c/25/14/3/243240.png">
<div class="tooltip">ну что, болит ребро? лучше бы станцевали</div>
</div>
</div>

</div>
</div>

</div>
</div>[/html]

RE:Pokemon

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Карточки участников

Сообщений 1 страница 2 из 2

Поделиться12026-03-10 01:58:07

Поделиться22026-03-12 00:44:26