Шаблон алхимия

[html]<style>

section.alchemy-list {
width: 925px;
height: auto;
display: flex;
flex-direction: column;
gap: 7px;
position: relative;
margin: auto !important;
background-image: url(https://forumstatic.ru/files/001c/be/2e/19103.png);
border-radius: 5px;
padding: 15px 15px 20px;
box-sizing: border-box;
}

section.alchemy-list * {
box-sizing: border-box;
}

section.alchemy-list > ttl {
width: 100%;
text-align: center;
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 24px;
line-height: 1;
text-transform: lowercase;
display: block;
background: linear-gradient(90deg, #e3ac67 0%, #746043 100%);
transition: --gradient-x 0.7s ease, --gradient-y 0.7s ease !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

section.alchemy-list .alch-spoiler {
background: rgba(51, 48, 43, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
margin-bottom: 15px;
flex-grow: 1;
white-space: wrap;
}

section.alchemy-list .alch-spoiler summary {
padding: 10px 10px 13px;
font-weight: bold;
cursor: pointer;
color: #c4c4c4;
outline: none;
transition: color 0.3s ease;
list-style: none;
position: relative;
min-width: 200px;
}

section.alchemy-list .alch-spoiler summary ttl {
background: linear-gradient(90deg, #BB9059 0%, #4C4439 100%);
box-shadow: 0px 0px 13.7px 0px rgba(187, 144, 89, 1);
font-family: Moisette;
font-weight: 400;
font-style: Italic;
color: white;
font-size: 12px;
line-height: 1;
padding: 3px 10px 3px 55px;
border-radius: 50px;
text-transform: lowercase;
width: fit-content;
}

section.alchemy-list .alch-spoiler summary::-webkit-details-marker {
display: none;
}

section.alchemy-list .alch-spoiler summary::after {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 56px;
height: 56px;
transform: translateY(-50%) rotate(0deg);
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.7s ease-in-out;
transform-origin: center;
background-image: url(https://forumstatic.ru/files/001c/be/2e/21342.png);
opacity: 1;
}
}

section.alchemy-list .alch-spoiler[open] summary {
color: #fff;
}

section.alchemy-list .alch-spoiler[open] summary::after {
transform: translateY(-50%) rotate(90deg);
}

section.alchemy-list .alch-spoiler > div {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
}

section.alchemy-list .alch-spoiler[open] > div {
max-height: 2000px;
opacity: 1;
}

section.alchemy-list .alch-spoiler > div > div {
margin-top: 10px;
padding: 0 15px 15px 15px;
font-family: Pragmatica;
font-weight: 400;
font-size: 11px;
line-height: 137%;
color: rgba(194, 194, 194, 1);
}

section.alchemy-list ingredient {
background-color: rgba(30, 30, 30, 1);
display: block;
padding: 12px;
border-radius: 5px;
color: rgba(194, 194, 194, 1);
position: relative;
}

section.alchemy-list ingredient ttl {
width: 100%;
display: block;
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 120%;
}
section.alchemy-list ingredient desc {
font-family: Pragmatica;
font-weight: 400;
font-size: 11px;
line-height: 137%;
white-space: pre-wrap;
}

section.alchemy-list ingredient aff {
display: flex;
position: absolute;
top: 12px;
right: 12px;
gap: 5px;
}

section.alchemy-list ingredient aff span {
background-color: rgba(75, 75, 75, 0.43);
font-family: Moisette;
font-weight: 500;
font-style: Italic;
font-size: 11px;
line-height: 100%;
color: white;
display: block;
padding: 3px 10px 2px ;
border-radius: 50px;
}

section.alchemy-list ingredient quality {
position: relative;
font-family: Pragmatica;
font-weight: 400;
font-size: 10px;
line-height: 100%;
display: flex;
margin-top: 5px;
gap: 5px;
}

section.alchemy-list ingredient quality.rare_1::after {
content: 'обычный';
}

section.alchemy-list ingredient quality.rare_2::after {
content: 'редкий';
color: rgba(117, 130, 170, 1);
}

section.alchemy-list ingredient quality.rare_3::after {
content: 'исключительный';
color: rgba(166, 140, 202, 1);
}

section.alchemy-list ingredient quality.rare_4::after {
content: 'мифический';
color: rgba(187, 144, 89, 1);
}

section.alchemy-list ingredient quality.rare_5::after {
content: 'необычный';
color: rgba(117, 170, 139, 1);
}

section.alchemy-list ingredient quality::before {
content: '';
position: relative;
display: block;
width: 12px;
height: 12px;
margin-top: -1px;
background: url(https://forumstatic.ru/files/001c/be/2e/51603.png) no-repeat center / contain;
}

section.alchemy-list ingredient quality.rare_2::before {
background: url(https://forumstatic.ru/files/001c/be/2e/75643.png) no-repeat center / contain;
}

section.alchemy-list ingredient quality.rare_3::before {
background: url(https://forumstatic.ru/files/001c/be/2e/67841.png) no-repeat center / contain;
}

section.alchemy-list ingredient quality.rare_4::before {
background: url(https://forumstatic.ru/files/001c/be/2e/33805.png) no-repeat center / contain;
}

section.alchemy-list ingredient quality.rare_5::before {
background: url(https://forumstatic.ru/files/001c/be/2e/84199.png) no-repeat center / contain;
}

</style>

<section class='alchemy-list'>
<ttl>каталог алхимических ингредиентов</ttl>

<ingredient><ttl>болотная мшанка</ttl>
<aff><span>растительный</span><span>ландвиди</span><span>твердое</span></aff>

<quality class='rare_5'></quality>
<desc>
красивый чёрно-пурпурный цветок с небольшим бутоном. Чёрную лилию невозможно вырастить в тепличных условиях — её можно отыскать только там, где влажно и темно, то есть на дне тенистых лощин и в самой чаще дремучего леса, где кроны деревьев почти не пропускают свет. Чёрная лилия — прекрасный, нежный на вид цветок, от которого несёт трупным зловонием.

<details class="alch-spoiler"><summary><ttl>полное описание</ttl></summary><div><div>
Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска. Каждый зуб имеет естественную режущую кромку, которая при сборке образовала непрерывную, слегка волнистую линию лезвия. Фрагменты скреплены между собой стабилизированным костным клеем и жилами, образующими на поверхности клинка характерный ребристый, почти хитиновый рельеф, но стыки аккуратно залиты серебряной пастой, создающей тонкую, змееподобную сеть на тёмном фоне.
</div></div></details></desc></ingredient>

<ingredient><ttl>болотная мшанка</ttl>
<aff><span>растительный</span><span>ландвиди</span><span>твердое</span></aff>

<quality class='rare_2'></quality>
<desc>
красивый чёрно-пурпурный цветок с небольшим бутоном. Чёрную лилию невозможно вырастить в тепличных условиях — её можно отыскать только там, где влажно и темно, то есть на дне тенистых лощин и в самой чаще дремучего леса, где кроны деревьев почти не пропускают свет. Чёрная лилия — прекрасный, нежный на вид цветок, от которого несёт трупным зловонием.

<ingredient><ttl>болотная мшанка</ttl>
<aff><span>растительный</span><span>ландвиди</span><span>твердое</span></aff>

<quality class='rare_4'></quality>
<desc>
красивый чёрно-пурпурный цветок с небольшим бутоном. Чёрную лилию невозможно вырастить в тепличных условиях — её можно отыскать только там, где влажно и темно, то есть на дне тенистых лощин и в самой чаще дремучего леса, где кроны деревьев почти не пропускают свет. Чёрная лилия — прекрасный, нежный на вид цветок, от которого несёт трупным зловонием.

</section>[/html][hideprofile]

Подпись автора: Эффектная подпись

Test

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

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

Объявление

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

Шаблон алхимия

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

Перевести Поделиться12026-08-20 07:54:03

Поделиться22026-08-20 08:13:27

Test

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

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

Объявление

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

Шаблон алхимия

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

ПеревестиПоделиться12026-08-20 07:54:03

Поделиться22026-08-20 08:13:27

Перевести Поделиться12026-08-20 07:54:03