тык

Поделиться12023-09-03 17:12:04

Автор: hagalnaud
Администратор
очень длинное имя, 26
ROSES ARE RED VIOLETS ARE BLUE
I'M TIRED OF THIS SHIT
SO FUCK U
Сообщений: 56
300
300
Уважение: +0

Поделиться22023-09-05 13:59:49

Автор: hagalnaud
Администратор
очень длинное имя, 26
ROSES ARE RED VIOLETS ARE BLUE
I'M TIRED OF THIS SHIT
SO FUCK U
Сообщений: 56
300
300
Уважение: +0

Поделиться32023-09-26 15:32:34

Автор: hagalnaud
Администратор
очень длинное имя, 26
ROSES ARE RED VIOLETS ARE BLUE
I'M TIRED OF THIS SHIT
SO FUCK U
Сообщений: 56
300
300
Уважение: +0

[html]<div class='messenger'><div class='head'><div class='tap back'></div>
<img src='https://forumupload.ru/uploads/001b/b4/c8/6/138504.png' class='ava'><p><strong>
ИМЯ СОБЕСЕДНИКА
</strong><br>typing...</p><div class='tap video'></div><div class='tap call'></div><div class='tap options'></div></div>
<div class='mess'>

<div class='left'><img src='https://forumupload.ru/uploads/001b/b4/c8/6/138504.png' class='ava'><span>
СООБЩЕНИЕ СОБЕСЕДНИКА
<mark>02:53 pm</mark></span></div>

<div class='right'><span>
СООБЩЕНИЕ ВАШЕ
<mark>02:53 pm</mark></span>
<img src='https://forumupload.ru/uploads/001b/b4/c8/6/70530.png' class='ava'></div>

<div class='left'><img src='https://forumupload.ru/uploads/001b/b4/c8/6/138504.png' class='ava'><span>
<div class='answer'><strong>ВАШЕ ИМЯ</strong><br>ТО, ЧТО СОБЕСЕДНИК ЦИТИРУЕТ</div>
СООБЩЕНИЕ СОБЕСЕДНИКА
<mark>02:53 pm</mark></span></div>

<div class='right'><span>
<div class='answer'><strong>ИМЯ СОБЕСЕДНИКА</strong><br>ТО, ЧТО ВЫ ЦИТИРУЕТЕ</div>
СООБЩЕНИЕ ВАШЕ
<mark>02:53 pm</mark></span>
<img src='https://forumupload.ru/uploads/001b/b4/c8/6/70530.png' class='ava'></div>

<div class='left'><img src='https://forumupload.ru/uploads/001b/b4/c8/6/138504.png' class='ava'><span><details><summary>показать расшифровку</summary>
ТЕКСТ ГОЛОСОВОГО ПИШЕМ ТУТ
</details><mark>02:53 pm</mark></span></div>

<div class='right'><span><details><summary>показать расшифровку</summary>
ТЕКСТ ГОЛОСОВОГО ПИШЕМ ТУТ
</details><mark>02:53 pm</mark></span>
<img src='https://forumupload.ru/uploads/001b/b4/c8/6/70530.png' class='ava'></div>


</div>
<div class='send'><div class='tap smile'></div><span>send message...<div class='taps'><div class='tap add'></div><div class='tap photo'></div></div></span><div class='tap mic'></div></div></div><style>
/*************************************************************
main color messenger
**************************************************************/

:root {--color: #e1d6ea;}

/*************************************************************
fonts messenger
**************************************************************/

@font-face {
font-family: 'IBMPlexSans';
src: url('https://forumstatic.ru/files/001b/9b/e5/60634.eot');
src: url('https://forumstatic.ru/files/001b/9b/e5/60634.eot?#iefix') format('embedded-opentype'),
url('https://forumstatic.ru/files/001b/9b/e5/78111.woff2') format('woff2'),
url('https://forumstatic.ru/files/001b/9b/e5/72018.woff') format('woff'),
url('https://forumstatic.ru/files/001b/9b/e5/80978.ttf') format('truetype'),
url('https://forumstatic.ru/files/001b/9b/e5/44792.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: fa-solid;
src: url("https://forumstatic.ru/files/001b/73/d1/43250.ttf?v=1") format("truetype");
}
@font-face {
font-family: fa-regular;
src: url("https://forumstatic.ru/files/001b/73/d1/37687.ttf?v=1") format("truetype");
}

/*************************************************************
base messenger
**************************************************************/

.messenger {
width: 500px;
height: auto;
margin: 10px!important;
/* outline: 1px solid red; */
font-family: 'IBMPlexSans';
}

.head {
display: inline-flex;
gap: 10px;
width: 460px;
background: var(--color);
padding: 3px 20px;
border-radius: 20px 20px 0px 0px;
/* outline: 1px solid red; */
height: 37px;
align-items: center;
}

.head p {
padding: 4px 0 0!important;
color: white;
text-transform: uppercase;
line-height: 9px!important;
font-size: 7px;
width: 343px;
}

.head p strong {
font-size: 12px;
}

.mess {
width: 500px;
display: inline-flex;
/* gap: 14px; */
/* outline: 1px solid red; */
background: #f8f8f8;
flex-direction: column;
align-items: center;
padding: 10px 0px;
}

.mess span.emoji {
border: none;
}

.mess span.emoji img {
max-width: 30px;
}

.mess span.emoji mark {
margin-top: 34px;
}

img.ava {
border-radius: 100%;
width: 27px;
cursor: pointer;}

.mess span {
padding: 7px 6px;
border: 1px solid #e1e1e1;
border-radius: 10px;
max-width: 192px;
font-size: 9px;
color: #acacac;
letter-spacing: 0.7px;
}

.send {
width: 500px;
height: 37px;
display: inline-flex;
background: #e7e7e7;
border-radius: 0px 0px 20px 20px;
/* outline: 1px solid red; */
justify-content: center;
gap: 10px;
align-items: center;
}

.send span {
display: inline-flex;
background: #f0f0f0;
height: 19px;
border-radius: 13px;
width: 350px;
align-items: center;
padding: 1px 10px;
justify-content: space-between;
color: #919191;
font-size: 9px;
}

.answer {
display: block;
border-left: 3px solid var(--color);
padding-left: 6px;
margin: 3px;
}

.mess span img {
max-width: 192px;
/* max-height: 188px; */
border-radius: 5px;
}

.mess mark {
background: none;
display: block;
float: right;
margin-left: -13px;
margin-top: 16px;
font-size: 6px;
color: #919191cf;
}

.left, .right {
width: 480px;
/* outline: 1px solid red; */
padding: 9px 10px;
display: inline-flex;
align-items: flex-end;
gap: 7px;
}

.left {
justify-content: flex-start;
}

.right {
justify-content: flex-end;
}

/*************************************************************
icons messenger
**************************************************************/

.taps {
display: inline-flex;
gap: 5px;
}

.tap:before {
font-family: 'fa-solid';
position: relative;
color: #ffffff;
background-image: none!important;
font-size: 13px;
cursor: pointer;
}

.tap.back:before {
content: "\f053";
padding-right: 7px;
}

.tap.video:before {
content: "\f03d";
}

.tap.call:before {
content: "\f095";
}

.tap.options:before {
content: "\f142";
}

.tap.smile:before {
content: "\f118";
padding: 4px;
font-family: fa-regular;
background: #f2f2f2;
border-radius: 100%;
color: #919191;
}

.tap.add:before {
content: "\f0c6";
color: #919191;
}

.tap.photo:before {
content: "\f030";
color: #919191;
}

.tap.mic:before {
content: "\f130";
display: inline-flex;
width: 20px;
height: 20px;
color: white!important;
background: var(--color);
border-radius: 100%;
justify-content: center;
align-items: center;
}
/*************************************************************
spoiler messenger
**************************************************************/

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;}
summary {
width: 200px;
padding: 0.3em 0.6em 0.3em 1.7em!important;
display: inline-block;
cursor: pointer;
position: relative;
font-size: 9px;
font-weight: bold;
letter-spacing: 0px;
margin-top: 25px!important;
text-transform: uppercase;
font-family: 'IBMPlexSans';
}
summary:before {
left: 0.3em;
top: 0.4em;
color: transparent;
background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=) no-repeat 47% 47% / 2em 2em;
opacity: 0.6;
width: 1em;
height: 1em;
content: "";
position: absolute;
transition: transform .5s;
}
details[open] > summary:before {
transform: rotateZ(90deg);
}
summary ~ * {
padding:0 1em 0 1em;
}
details[open] summary ~ *{
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0;}
100% {opacity: 1;}
}
summary:focus {
outline:0;
}
details {
display: block;
margin-bottom: 0.5rem;
background: url(https://forumstatic.ru/files/001b/d5/6a/62216.png) no-repeat left top;
}
</style>[/html]

0

hagalnaudbase00

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

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

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

тык

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

Поделиться12023-09-03 17:12:04

Поделиться22023-09-05 13:59:49

Поделиться32023-09-26 15:32:34