Skip to content

Instantly share code, notes, and snippets.

@xTCry

xTCry/messages300.html

Created January 5, 2019 10:15
Show Gist options
  • Save xTCry/700fecd61a43d0fd105b25d9469d0c8a to your computer and use it in GitHub Desktop.
Save xTCry/700fecd61a43d0fd105b25d9469d0c8a to your computer and use it in GitHub Desktop.
Download ZIP
Test Template VK Messages
Raw
messages300.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VK</title>
<style type="text/css">
body{
background:#edeef0;
color:#000;
margin:0;
padding:0;
direction:ltr;
font-size:13px;
font-family:-apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
line-height:1.154;
font-weight:400;
-webkit-font-smoothing:subpixel-antialiased;
-moz-osx-font-smoothing:auto
}
:focus{
outline:none
}
::-moz-focus-inner{
border:0
}
a{
color:#2a5885;
text-decoration:none;
cursor:pointer
}
a b, b a{
color:#42648b
}
a:hover{
text-decoration:underline
}
b, strong{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
* html .clear_fix{
height:1%
}
.clear_fix:after{
content:'.';
display:block;
height:0;
font-size:0;
line-height:0;
clear:both;
visibility:hidden
}
.clear_fix{
display:block
}
/* #1 */
.wrap .header{
background:#4a76a8;
height:42px;
box-sizing:border-box;
border-bottom:1px solid #4872a3;
padding-top:11px
}
.wrap .header .page_header{
margin:0 auto;
width:640px
}
.wrap .header .page_header .top_home_logo{
background:url(https://vk.com/images/svg_icons/ic_head_logo.svg) no-repeat 50%/contain;
height:19px;
width:34px;
margin-left:8px;
float:left
}
.wrap .header .page_header .index-link{
float:right;
margin-right:8px;
margin-top:2px;
color:#fff
}
/* #2 */
.wrap .page_content{
margin:40px auto;
width:640px
}
.wrap .page_content .page_block_h2 .ui_crumb_sep{
background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='13' viewBox='71 29 6 13'%3E%3Cpath d='M71.4 40.6c-.3.3-.2.8.2 1 .3.3.8.2 1-.2l4-5.5c.2-.2.2-.6 0-.8l-4-5.5c-.2-.4-.7-.5-1-.2-.4.2-.5.7-.2 1l3.7 5.1-3.7 5.1z' fill='%23828a99' opacity='.7'/%3E%3C/svg%3E") 50% no-repeat
}
/* #3 */
.page_block{
position:relative;
background:#fff;
border-radius:2px;
box-shadow:0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8;
margin:15px 0 0
}
h2.page_block_h2{
margin:0;
font-size:inherit;
font-weight:inherit;
color:inherit
}
/* ASD */
.page_block_header{
display:block;
background:#fafbfc;
padding:0 20px;
height:54px;
line-height:54px;
border-bottom:1px solid #e7e8ec;
border-radius:2px 2px 0 0;
font-size:16px;
outline:none;
color:#000
}
.page_block_header:hover{
text-decoration:none
}
.page_block_header_extra{
float:right
}
.page_block_header_extra_left{
float:left
}
.page_block_header_inner{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
/* ASD */
.ui_crumb{
display:inline;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
line-height:54px;
height:54px
}
a.ui_crumb{
color:#656565
}
.ui_crumb_sep{
display:inline;
padding-left:6px;
font-size:9px;
margin:23px 10px 21px 12px;
position:relative;
top:-2px;
background:url(https://vk.com/images/icons/breadcrumbs.png) -6px 0 no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
.ui_crumb_sep{
background-image:url(https://vk.com/images/icons/breadcrumbs_2x.png);
background-size:12px 11px
}
}
/* ASD */
.wrap .wrap_page_content{
font-size:14px;
padding:10px 20px
}
.wrap .wrap_page_content .message .message__header{
margin-bottom:12px;
color:#939393
}
.wrap .wrap_page_content .message .message-edited{
color:#939393
}
.wrap .wrap_page_content .attachment .attachment__description{
display:inline-block;
color:#939393;
margin-right:6px
}
.wrap .wrap_page_content .attachment .attachment__link{
display:inline-block
}
.wrap .wrap_page_content .pagination{
margin-top:8px
}
.wrap .kludges{
margin-top:8px
}
.wrap .item{
padding:20px 0;
word-wrap:break-word;
border-bottom:1px solid #e7e8ec
}
.wrap .item:last-child{
border-bottom:0
}
.wrap .item .item__main{
color:#000
}
.wrap .item .item__main:not(:last-child){
margin-bottom:8px
}
/* ASD */
.fl_l{
float:left
}
.fl_r{
float:right
}
.pg_lnk{
padding-bottom:2px
}
.pg_lnk:hover{
padding-bottom:0;
border-bottom:2px solid #dae1e8;
text-decoration:none
}
h4 .fl_r,
h4 span{
font-weight:400
}
.subheader,
h4 .fl_r,
h4 span,
h4.subheader{
-webkit-font-smoothing:subpixel-antialiased;
-moz-osx-font-smoothing:auto
}
.pg_lnk_sel{
font-weight:700;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#45688e
}
.pg_lnk_sel:hover{
text-decoration:none
}
.pg_lnk_sel .pg_in{
border-bottom:2px solid #6587ac;
color:#2b2f33
}
.pg_in{
padding:3px 5px 7px;
color:#939393;
font-size:12.5px
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="page_header">
<div class="top_home_logo"></div>
</div>
</div>
<div class="page_content page_block">
<h2 class="page_block_h2">
<div class="page_block_header clear_fix">
<div class="page_block_header_extra_left _header_extra_left"></div>
<div class="page_block_header_extra _header_extra"></div>
<div class="page_block_header_inner _header_inner">
<a class="ui_crumb" href="#">Messages</a>
<div class="ui_crumb_sep"></div>
<div class="ui_crumb" >UserNameDialog</div>
</div>
</div>
</h2>
<div class="wrap_page_content">
<div class="item">
<div class='item__main'>
<div class="message">
<div class="message__header"><a href="https://vk.com/club172114143">HangMan Game</a>, 10 дек 2018 в 16:20:05</div>
<div>Такой буквы нет<br>**hgf<div class="kludges"></div></div>
</div>
</div>
</div>
<div class="item">
<div class='item__main'>
<div class="message">
<div class="message__header">Вы, 10 дек 2018 в 16:20:05</div>
<div>П<div class="kludges"></div></div>
</div>
</div>
</div>
<div class="item">
<div class='item__main'>
<div class="message">
<div class="message__header">Вы, 10 дек 2018 в 16:01:35</div>
<div>Новая игра [44/46] &#127918;<div class="kludges"></div></div>
</div>
</div>
</div>
<div class="pagination clear_fix">
<div class="fl_r">
<a class="pg_lnk fl_l" href="messages0.html"><div class="pg_in">1</div></a>
<a class="pg_lnk_sel fl_l" href="messages300.html"><div class="pg_in">2</div></a>
<a class="pg_lnk fl_l" href="messages600.html"><div class="pg_in">3</div></a>
<a class="pg_lnk fl_l" href="messages900.html"><div class="pg_in">4</div></a>
<a class="pg_lnk fl_l" href="messages8100.html"><div class="pg_in">&raquo;</div></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment