[html]
<div class="twilight-grim">
<input type="radio" name="tw-tabs" id="t-past" checked>
<input type="radio" name="tw-tabs" id="t-present">
<input type="radio" name="tw-tabs" id="t-alt">
<div class="tw-header">
<div class="tw-moon">☾ ✶ ☽</div>
<div class="tw-title">Линии жизни</div>
<div class="tw-divider"></div>
</div>
<div class="tw-nav">
<label for="t-past">ПРОШЛОЕ</label>
<label for="t-present">НАСТОЯЩЕЕ</label>
<label for="t-alt">АЛЬТЕРНАТИВА</label>
</div>
<div class="tw-body">
<div class="tw-pane pane-past">
<div class="tw-row">
<div class="tw-date">07.09.2010</div>
<a href="https://kindredspirits.ru/viewtopic.php?id=540" class="tw-link">Знаешь что?</a>
<div class="tw-status s-process">В процессе</div>
</div>
<div class="tw-row">
<div class="tw-date">07.05.2021</div>
<a href="https://kindredspirits.ru/viewtopic.php?id=212" class="tw-link">Инстинкт самоубийства</a>
<div class="tw-status s-process">В процессе</div>
</div>
<div class="tw-row">
<div class="tw-date">20.11.2024</div>
<a href="https://kindredspirits.ru/viewtopic.php?id=367" class="tw-link">Always</a>
<div class="tw-status s-process">В процессе</div>
</div>
</div>
<div class="tw-pane pane-present">
<div class="tw-row">
<div class="tw-date">??.??.??</div>
<a href="#" class="tw-link"> Нити еще не сплетены </a>
<div class="tw-status s-process">В процессе</div>
</div>
</div>
<div class="tw-pane pane-alt">
<div class="tw-row">
<div class="tw-date">??.??.??</div>
<a href="#" class="tw-link"> Нити еще не сплетены </a>
<div class="tw-status s-lost">Заброшено</div>
</div>
<div class="tw-row">
<div class="tw-date">??.??.??</div>
<a href="#" class="tw-link"> Нити еще не сплетены </a>
<div class="tw-status s-done">Завершено</div>
</div>
</div>
</div>
<div class="tw-footer">
<div class="tw-divider"></div>
<div class="tw-symbol">✧</div>
</div>
</div>
<style>
/* КОНТЕЙНЕР */
.twilight-grim {
--tw-accent: #915252; /* Бордовый форума */
--tw-bg: #323236; /* Более светлый сумеречный фон */
--tw-inner: #2a2a2e; /* Темная подложка */
--tw-border: #5b2a2a; /* Акцентная рамка */
max-width: 580px;
margin: 30px auto;
background: var(--tw-bg);
padding: 30px;
border-radius: 25px;
border: 1px solid #444;
box-shadow:
0 10px 20px rgba(0,0,0,0.5),
inset 0 0 30px rgba(145, 82, 82, 0.15);
font-family: 'manrope', sans-serif;
color: #d1cfcf;
position: relative;
}
/* ШАПКА */
.tw-header { text-align: center; margin-bottom: 10px; }
.tw-moon {
font-size: 18px;
color: var(--tw-accent);
letter-spacing: 5px;
margin-bottom: 5px;
}
.tw-title {
font-family: 'auge', serif;
font-size: 28px;
letter-spacing: 4px;
color: #eee;
text-transform: uppercase;
}
.tw-divider {
height: 1px;
width: 150px;
background: linear-gradient(90deg, transparent, var(--tw-accent), transparent);
margin: 15px auto;
}
/* НАВИГАЦИЯ */
input[name="tw-tabs"] { display: none; }
.tw-nav {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
}
.tw-nav label {
font-size: 10px;
letter-spacing: 2px;
cursor: pointer;
color: #888;
padding: 6px 18px;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 15px;
transition: 0.4s ease-in-out;
}
#t-past:checked ~ .tw-nav label[for="t-past"],
#t-present:checked ~ .tw-nav label[for="t-present"],
#t-alt:checked ~ .tw-nav label[for="t-alt"] {
color: #fff;
background: var(--tw-inner);
border-color: var(--tw-accent);
box-shadow: 0 0 10px rgba(145, 82, 82, 0.3);
}
/* ПАНЕЛИ */
.tw-pane { display: none; animation: twFade 0.7s ease; }
#t-past:checked ~ .tw-body .pane-past,
#t-present:checked ~ .tw-body .pane-present,
#t-alt:checked ~ .tw-body .pane-alt { display: block; }
/* СТРОКИ */
.tw-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
margin-bottom: 8px;
background: rgba(0,0,0,0.15);
border-radius: 12px;
border-left: 2px solid transparent;
transition: 0.3s;
}
.tw-row:hover {
border-left: 2px solid var(--tw-accent);
background: rgba(145, 82, 82, 0.05);
transform: translateX(4px);
}
.tw-date { font-size: 10px; color: #777; font-family: 'Verdana'; width: 60px; }
.tw-link {
flex-grow: 1;
margin-left: 15px;
text-decoration: none;
color: #ccc;
font-family: 'auge', serif;
font-size: 15px;
transition: 0.3s;
}
.tw-link:hover { color: var(--tw-accent); }
/* ОБНОВЛЕННЫЕ КОНТРАСТНЫЕ СТАТУСЫ */
.tw-status {
font-size: 9px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding: 5px 12px;
border-radius: 4px;
min-width: 95px;
text-align: center;
transition: 0.3s;
}
/* В процессе — яркая бордовая заливка */
.s-process {
background: var(--tw-accent);
color: #fff;
box-shadow: 0 0 12px rgba(145, 82, 82, 0.4);
border: 1px solid #b96161;
}
/* Завершено — яркая светлая плашка */
.s-done {
background: #b96161;
color: #222;
border: 1px solid #5b2a2a;
}
/* Заброшено — тусклая серая плашка */
.s-lost {
background: rgba(0,0,0,0.25);
color: #666;
border: 1px solid #444;
opacity: 0.6;
}
@keyframes twFade {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.tw-footer { text-align: center; margin-top: 15px; opacity: 0.4; }
.tw-symbol { color: var(--tw-accent); font-size: 14px; }
</style>
[/html]
Отредактировано Sean Bones (03-03-2026 00:05:06)
Цитировать
