[html]<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tablet {
background-image: url(https://forumupload.ru/uploads/001b/ce/b4/4/104993.png);
width: 700px;
height: 920px;
margin-left: 20px;
}
/* Строка имени */
.stim {
width: 578px;
border: 1px;
border-color: #000;
background-color: #959D9F;
font-family: Oswald;
text-align: center;
position: absolute;
margin-top: 40px;
margin-left: 55px;
text-transform: uppercase;
}
.tabbed > input {
display: none;
}
.tabbed > label {
width: 100px;
margin-top: 110px;
margin-left: 43px;
margin-bottom: -90px;
display: block;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Oswald;
text-size: 20px;
text-transform: uppercase;
}
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}
/* Оформление */
/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
background: transparent;
color: #191970;
height: 30px;
}
/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
background: #A02223 !important;
color: azure !important;
}
/* Оформление поля с контентом */
.tabs-body {
background: transparent;
color: #000;
}
/* Даем имена переключателям и полю с контентом */
/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}
/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}
.tabs-body {
width: auto;
position: relative;
}
.tabs-body > div {
position: absolute;
top: 0;
left: 0;
line-height: 1.4em;
opacity: 0;
width: auto;
height: 726px;
padding: 10px;
z-index: 0;
margin-top: 110px;
margin-right: 55px;
text-align: justify;
overflow: auto;
}
/* Переключатели */
/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,
/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
transform: translateY(0px);
transform: translateX(0%);
opacity: 1;
z-index: 1;
}
input[id^=nav] ~ .tabs-body > div[class^=body] {
}
</style>
<!-- В пост. Только слева. (done by Kolobdur) -->
<style>
.tabbed {
display: grid;
grid-template: /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-5 tabs-body tabs-body tabs-body tabs-body" 1fr
/* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>
<div class="tablet">
<div class="stim"><td> Урсула Ниве <br> Уровень доступа: E </div>
<div class="tabbed">
<!-- Навигация слева -->
<!-- Слева 1 -->
<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Личные данные</label>
<!-- Слева 2 -->
<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Внешность</label>
<!-- Слева 3 -->
<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Способность</label>
<!-- Слева 4 -->
<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Характеристика</label>
<input type="radio" name="tabs-body" id="nav-left-5">
<label for="nav-left-5">Биография</label>
<div class="tabs-body">
<!-- Контент вкладок слева -->
<div class="body-left-1">
<center><img src="https://forumupload.ru/uploads/001b/fb/3e/76/t421023.png"></center>
Yae Miko / Genshin Impact [<br>
Пол: женский<br>
Дата рождения: 28.10.2101<br>
Возраст: 23<br>
Рост и вес: 161 / 53<br>
<br>
Семейное положение: не замужем<br>
Должность/Статус: студентка, V курс, связь и информационная поддержка<br>
Ник в чате академии: nomen1<br>
<br>
Отличительные признаки
<br>
Цвет глаз: карий <br>
Цвет волос: светлый блонд, в подражание подруге частыми прядями выкрашенный в розовый<br>
Татуировки/Шрамы/Пирсинг/Пигментация: едва заметные плохо зажившие татуировки на запястьях, изображающие сеточку вен
</div>
<div class="body-left-2">
Мягко, аккуратно сложена.<br>
Расчётливо медлительна. Осознаёт прелесть своих размеренных плавных движений и с умением демонстрирует врождённую женственность.
Округлые плечи, лоснящаяся белоснежная кожа. Едва перехваченые резинкой длинные волосы.<br>
Взгляд то легко касающийся всего живого, словно скользящий сатин, то устремленный в небо, как бы в поисках истины или божьего одобрения. Последнее – привычка, усвоенная в стенах отчего дома-секты и уже тогда часто служившая прикрытием равнодушия, потребности взять паузу, любых других эмоций.<br>
Низкий, чуть сиплый голос – металл, лишённый звонкости, льющийся, расплавленный. Речь слегка путанная и неритмичная, нередко уводящая собеседника в сторону от сути.
<br>
</div>
<div class="body-left-3">
► Ментальное слоумо<br><br>
Применение: активная / применяется на других / радиус действия от 25-30 см. до 4 м<br><br>
Ограничения: активируется при полной концентрации на объекте. Абсолютный максимум беспрерывного действия – 6 человек / существ, 3 часа.
При невозможности контролировать внешние процессы и при очевидно полной физической уязвимости во время активации, после применения наблюдается также частичная и кратковременная потеря слуха, зрения, памяти. Реже – слабость и апатия. <br>
Степень тяжести отката зависит от времени и радиуса применения, но всегда присутствуют минимум 1-2 симптома. Могут сохраняться от 2 до 5 часов. <br><br>
Описание способности: рассеивает внимание, концентрацию, замедляет мыслительные процессы, сбивает с толку – погружает в туман сознание любого живого существа, будь то человек, группа людей или животное. <br>
Не включает в себя внедрение галлюцинаций и навязчивых идей, страхов или контроль мышления. <br>
</div>
<div class="body-left-4">
Успеваемость: высокая*
<br>
*за счёт серьёзной самодисциплины, амбиций и способности систематизировать и усваивать большой объем информации. <br><br>
Педантична и придирчива – каждая мелочь неоднократно проверяется и доводится до идеала. Принципиально важна не скорость, а качество исполнения. <br>
Жизнь в интернате превратила её из диковатого ребёнка в девчушку, чётко осознающую как и к кому подластиться, как увернуться от досадливого шлепка кухарки, а после – выманить у неё же кусочек послаще. После детская находчивость, увёртливость и привычка к стойкому результату («получаю, что хочу») вылилась в спокойную уверенность – Урсула слишком хорошо знает, какое влияние может оказывать на людей и с удовольствием пользуется этим. Мягка в обхождении, ни тени суеты. Бестактность, прямолинейность и топорность ей чужды.
</div>
<div class="body-left-5">
Недвижный, холодный, молочно-прозрачный воздух. <br>
В кружевах тающей дымки вскипает рассвет. <br>
<br><br>
Урсула родилась холодным тихим утром и одним фактом своего рождения поставила перед собой большую цель – жить. <br>
Она родилась сильно раньше срока и выжила вопреки, вытеснив своим существом жизнь юной матери. <br>
Дочь главы мелкой религиозной секты и его воспитанницы, едва вошедшей в возраст семнадцати лет. <br>
<br><br>
Годы вымарали все яркие краски раннего детства из её памяти, оставив лишь белые вспышки воспоминаний. <br>
Пыльное лето. Лёгкие спазмы природы – смена сезонов. Пахнущий лавандой и скукой просторный пустой дом. Перебирающий крупные чётки отец.
Строгий взгляд его пронзительно-чёрных глаз.<br>
Острые хрустящие воротнички формы. <br>
<br><br>
Воображаемая любовь к придуманной матери затопила всё существование Урсулы. Отделила и отдалила её от других таких же беловолосых детей. От женщины ставшей то ли новой женой отца, то ли просто его любовницей. Урсула не вникала, не осуждала и проявляла мало интереса. <br>
С таким же спокойствием, с каким наблюдала за частой пропажей воспитанников, восприняла собственное переселение в интернат для изменённых в 12 лет. Она примерно догадывалась с чьей помощью это произошло, но… не вникала, не осуждала. Проявляла мало интереса. <br>
Её сердце не было разбито ни разлукой с отцом, ни сменой условного дома, ибо ум её был занят лишь выживанием – как оказалось, в отчем доме жизнь была относительно сытая и тёплая. <br>
<br>
Поступление в Академию уже считает большим успехом на пути к единственной цели – жить.
<br><br>
Секретная информация:
</div>
</div>
</div>
</div>
[/html]
Отредактировано Ursula Nivet (2023-11-10 21:37:11)
- Подпись автора
