роли и внешности

[hideprofile][html]
<div id="lst" data-theme="light">
<style>
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..800;1,300..800&display=swap');
@font-face { font-family: "fine"; src: url(https://forumstatic.ru/files/001b/73/d1/67460.otf); }

html, body { background: transparent !important; margin: 0; }

#lst {
--bg: #f4f4f4; --bg2: #eaeaea; --text: #3a3a3a; --muted: #7a7a7a;
--acc: #75424a; --acc-text: #75424a; --line: rgba(117,66,74,.30);
--on-acc: #f4f4f4;
box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: 4px 0 10px;
font: 400 12px/1.5 "Mulish", "Manrope", sans-serif; color: var(--text); text-align: left;
}
#lst[data-theme="dark"] {
--bg: #d7d7d7; --bg2: #cccccc; --text: #333d33; --muted: #5d665d;
--acc: #415549; --acc-text: #415549; --line: rgba(65,85,73,.40);
--on-acc: #e8ece6;
}
#lst *, #lst *::before, #lst *::after { box-sizing: border-box; }

/* перемикач */
#lst input { position: absolute; opacity: 0; pointer-events: none; }
#lst .lst-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; }
#lst .lst-tabs label {
cursor: pointer; padding: 7px 22px; border-radius: 999px;
background: var(--bg2); color: var(--text);
font: 700 10px/1 "Mulish", sans-serif; letter-spacing: .6px; text-transform: uppercase;
transition: background .2s ease, color .2s ease;
}
#lst .lst-tabs label:hover { background: var(--line); }
#lst #lst-t1:checked ~ .lst-tabs label[for="lst-t1"],
#lst #lst-t2:checked ~ .lst-tabs label[for="lst-t2"] { background: var(--acc); color: var(--on-acc); }
#lst #lst-t1:focus-visible ~ .lst-tabs label[for="lst-t1"],
#lst #lst-t2:focus-visible ~ .lst-tabs label[for="lst-t2"] { outline: 2px solid var(--acc); outline-offset: 2px; }

/* панелі */
#lst .lst-pane { display: none; }
#lst #lst-t1:checked ~ .lst-roles { display: block; }
#lst #lst-t2:checked ~ .lst-faces { display: block; }

/* підказка зверху */
#lst .lst-note {
margin: 0 0 6px; padding: 12px 18px; text-align: center;
border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
font-size: 11px; line-height: 1.6;
}
#lst .lst-note b { font-weight: 700; color: var(--acc-text); }

/* заголовок групи */
#lst .lst-h { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; }
#lst .lst-h::before, #lst .lst-h::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
#lst .lst-h span {
font: italic 500 24px/1 "fine", "Instrument Serif", serif; color: var(--text); text-transform: lowercase;
}

/* сітка записів */
#lst .lst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
#lst .lst-e { padding: 9px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
#lst .lst-l1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#lst .lst-tag {
flex: none; padding: 2px 8px; border-radius: 999px;
background: var(--bg2); color: var(--acc-text);
font: 700 9px/1.3 "Mulish", sans-serif; letter-spacing: .4px; text-transform: lowercase;
}
#lst .lst-l2 { margin-top: 2px; font-size: 11px; color: var(--muted); }
#lst .lst-f { font-style: italic; color: var(--acc-text); }
#lst .lst-f:not(:first-child)::before { content: " · "; color: var(--muted); font-style: normal; }

/* внешности: актор — персонаж */
#lst .lst-e2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#lst .lst-actor { color: var(--muted); font-size: 11px; }

/* посилання */
#lst a {
color: var(--text) !important; font-weight: 700; text-decoration: none !important;
text-transform: lowercase; transition: color .2s ease;
}
#lst a:hover { color: var(--acc-text) !important; }

@media (max-width: 600px) {
#lst .lst-grid { grid-template-columns: 1fr; }
}
</style>
<input type="radio" name="lst-tab" id="lst-t1" checked>
<input type="radio" name="lst-tab" id="lst-t2">
<div class="lst-tabs"><label for="lst-t1">роли</label><label for="lst-t2">внешности</label></div>

<div class="lst-pane lst-roles">
<div class="lst-note"><b>pb</b> — чистокровный, <b>hb</b> — полукровный, <b>mb</b> — магглорожденный, <b>sq</b> — сквиб, <b>hh</b> — получеловек, в чьих жилах кроме людской крови течёт кровь иных волшебных существ.<br>для поиска используйте ctrl+f.</div>
<div class="lst-h"><span>A-B-C-D-E</span></div>
<div class="lst-grid">
<div class="lst-e"><div class="lst-l1"><a href="https://quibbler.rusff.me/profile.php?id=25" target="_blank" rel="noopener">BONES, SUSAN</a><span class="lst-tag">1980 / PURE-BLOOD</span></div><div class="lst-l2">птсрное солнышко, проспиртованый медик</div></div>
</div>
<div class="lst-h"><span>F-G-H-I-J</span></div>
<div class="lst-grid">
<div class="lst-e"><div class="lst-l1"><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">SURNAME, NAME</a><span class="lst-tag">ГОД РОЖДЕНИЯ / СТАТУС КРОВИ</span></div><div class="lst-l2">КОРОТКОЕ ОПИСАНИЕ</div></div>
</div>
<div class="lst-h"><span>K-L-M-N-O</span></div>
<div class="lst-grid">
<div class="lst-e"><div class="lst-l1"><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">SURNAME, NAME</a><span class="lst-tag">ГОД РОЖДЕНИЯ / СТАТУС КРОВИ</span></div><div class="lst-l2">КОРОТКОЕ ОПИСАНИЕ</div></div>
</div>
<div class="lst-h"><span>P-Q-R-S-T</span></div>
<div class="lst-grid">
<div class="lst-e"><div class="lst-l1"><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">SURNAME, NAME</a><span class="lst-tag">ГОД РОЖДЕНИЯ / СТАТУС КРОВИ</span></div><div class="lst-l2">КОРОТКОЕ ОПИСАНИЕ</div></div>
</div>
<div class="lst-h"><span>U-V-W-X-Y-Z</span></div>
<div class="lst-grid">
<div class="lst-e"><div class="lst-l1"><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">SURNAME, NAME</a><span class="lst-tag">ГОД РОЖДЕНИЯ / СТАТУС КРОВИ</span></div><div class="lst-l2">КОРОТКОЕ ОПИСАНИЕ</div></div>
</div>
</div>

<div class="lst-pane lst-faces">
<div class="lst-note">В этой теме отмечены занятые персонажи и их внешности. Если персонажа или внешности нет в этом списке — он считается свободным, но, во избежание путаницы, проверьте придержанных в гостевой.</div>
<div class="lst-h"><span>A-B-C-D-E</span></div>
<div class="lst-grid">
<div class="lst-e lst-e2"><span class="lst-actor">austin butler</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">draco malfoy</a></div>
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
</div>
<div class="lst-h"><span>F-G-H-I-J</span></div>
<div class="lst-grid">
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
</div>
<div class="lst-h"><span>K-L-M-N-O</span></div>
<div class="lst-grid">
<div class="lst-e lst-e2"><span class="lst-actor">mika abdalla</span><a href="https://quibbler.rusff.me/profile.php?id=25" target="_blank" rel="noopener">susan bones</a></div>
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
</div>
<div class="lst-h"><span>P-Q-R-S-T</span></div>
<div class="lst-grid">
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
</div>
<div class="lst-h"><span>U-V-W-X-Y-Z</span></div>
<div class="lst-grid">
<div class="lst-e lst-e2"><span class="lst-actor">имя знаменитости на англ.</span><a href="ССЫЛКА НА ПРОФИЛЬ" target="_blank" rel="noopener">имя персонажа на англ.</a></div>
</div>
</div>

function set(t) {
var th = t === "dark" ? "dark" : "light";
box.setAttribute("data-theme", th);
document.documentElement.style.colorScheme = th;
}

// 1. якщо блок не в iframe або iframe той самий домен: читаємо тему напряму
try {
var root = window.parent.document.documentElement;
set(root.getAttribute("data-forum-theme") || "light");
new MutationObserver(function () { set(root.getAttribute("data-forum-theme") || "light"); })
.observe(root, { attributes: true, attributeFilter: ["data-forum-theme"] });
} catch (e) {}

// 2. запасний шлях: форум надсилає тему повідомленням
window.addEventListener("message", function (e) {
if (e.data && e.data.forumTheme) set(e.data.forumTheme);
});

// 3. просимо форум надіслати поточну тему
try { window.parent.postMessage({ lstReady: 1 }, "*"); } catch (e) {}
})();
</script>
</div>[/html]

oops!... I did it again

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

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

Объявление

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

роли и внешности

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

Поделиться1Вчера 13:58:11

Быстрый ответ