You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
7.2 KiB
364 lines
7.2 KiB
/*
|
|
.page-body:
|
|
设置页面的最小宽度、高度、边距、边框圆角和溢出行为。
|
|
.menu:
|
|
定义左侧菜单栏的宽度、位置、高度、浮动方向、背景色和显示类型。
|
|
.menu-head, .menu-head-photo, .menu-head-img, .menu-head-info, .menu-head-nickname:
|
|
这些类用于设置菜单头部区域的布局、内边距、图片样式和昵称样式。
|
|
.menu-search, .menu-search-icon, .menu-search-bar:
|
|
提供搜索框的样式，包括位置、宽度、高度、边框、背景色、字体颜色和内边距。
|
|
.menu-option, .menu-option-item, .menu-option-chat:
|
|
定义菜单选项的布局和样式。
|
|
.chat-box, .chat-box-head, .chat-box-title, .chat-box-title-box, .chat-box-title-text:
|
|
这些类用于设置聊天框的整体布局、标题样式和文本样式。
|
|
.chat-input-box, .text-area:
|
|
定义聊天输入框的固定位置、高度、边框、背景色、字体大小和其他相关样式。
|
|
.chat-output-box, .chat-output-head-photo-right, .chat-output-head-photo-left, .chat-output-content-right, .chat-output-content-left, .chat-output-meta-left, .chat-output-bubble-right, .chat-output-bubble-left, .chat-output-bubble-inner, .chat-output-bubble-pre-right, .chat-output-bubble-pre-left:
|
|
这些类用于设置聊天输出框的布局、头像位置、消息气泡的样式、文本的对齐方式、最大宽度和背景色。
|
|
.user-photo, .my-photo, .user-list-block-href, .user-list-block, .user-info, .user-box, .my-name, .my-message:
|
|
这些类用于定义用户列表的样式，包括头像、用户名、消息预览的布局和样式。
|
|
*/
|
|
.page-body {
|
|
min-width: 800px;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu {
|
|
width: 30%;
|
|
position: relative;
|
|
height: available;
|
|
float: left;
|
|
background: #2e3238;
|
|
display: block;
|
|
}
|
|
|
|
.menu-head {
|
|
padding: 18px;
|
|
position: relative;
|
|
}
|
|
|
|
.menu-head-photo {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
padding-right: 10.625px;
|
|
}
|
|
|
|
.menu-head-img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu-head-info {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
width: 2000px;
|
|
}
|
|
|
|
.menu-head-nickname {
|
|
font-weight: 400;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
line-height: 20px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.menu-search {
|
|
position: relative;
|
|
width: available;
|
|
margin: 30px;
|
|
}
|
|
|
|
.menu-search-icon {
|
|
position: absolute;
|
|
z-index: 101;
|
|
top: 1px;
|
|
}
|
|
|
|
.menu-search-bar {
|
|
width: available;
|
|
height: 50px;
|
|
line-height: 32px;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
background-color: #26292e;
|
|
color: #fff;
|
|
padding-left: 30px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.menu-option {
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.menu-option-item {
|
|
float: left;
|
|
width: 25%;
|
|
position: relative;
|
|
}
|
|
|
|
.menu-option-chat {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.chat-box {
|
|
position: relative;
|
|
background-color: #eee;
|
|
height: available;
|
|
overflow: hidden
|
|
}
|
|
|
|
.chat-box-head {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
line-height: 40px
|
|
}
|
|
|
|
.chat-box-title {
|
|
position: relative;
|
|
padding: 10px 0;
|
|
margin: 0 19px;
|
|
border-bottom: 1px solid #d6d6d6;
|
|
background-color: #eee;
|
|
z-index: 1024
|
|
|
|
}
|
|
|
|
.chat-box-title-box {
|
|
font-weight: 400;
|
|
height: 25px;
|
|
display: inline-block;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.chat-box-title-text {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
text-decoration: none;
|
|
color: #000;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
.chat-input-box {
|
|
position: fixed;
|
|
height: 250px;
|
|
bottom: 0;
|
|
min-height: 250px;
|
|
border-top: 1px solid #d6d6d6;
|
|
}
|
|
|
|
.text-area {
|
|
border-top: 1px solid #d6d6d6;
|
|
height: 200px;
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
resize: none;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-left: 20px;
|
|
outline: none;
|
|
border: 0;
|
|
font-size: 25px;
|
|
background-color: #eee;
|
|
}
|
|
|
|
|
|
.chat-output-box {
|
|
position: relative;
|
|
margin-bottom: 0px;
|
|
margin-right: 0px;
|
|
margin-top: 80px;
|
|
min-height: 500px;
|
|
max-height: 600px;
|
|
height: available;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.chat-output-head-photo-right {
|
|
float: right;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.chat-output-head-photo-left {
|
|
float: left;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-left: 15px;
|
|
margin-top: 15px
|
|
}
|
|
|
|
.chat-output-content-right {
|
|
overflow: hidden;
|
|
text-align: right;
|
|
}
|
|
|
|
.chat-output-content-left {
|
|
overflow: hidden;
|
|
text-align: left;
|
|
}
|
|
|
|
.chat-output-meta-left {
|
|
font-weight: 400;
|
|
padding-left: 10px;
|
|
height: 20px;
|
|
line-height: 18px;
|
|
color: #4f4f4f;
|
|
width: 500px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
margin-top: 22px
|
|
}
|
|
|
|
.chat-output-bubble-right {
|
|
max-width: 500px;
|
|
min-height: 55px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
text-align: left;
|
|
font-size: 20px;
|
|
-webkit-border-radius: 3px;
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
.chat-output-bubble-left {
|
|
background-color: #eeeeee;
|
|
max-width: 500px;
|
|
min-height: 55px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
text-align: left;
|
|
font-size: 20px;
|
|
-webkit-border-radius: 3px;
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
.chat-output-bubble-inner {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
min-height: 25px;
|
|
}
|
|
|
|
|
|
.chat-output-bubble-pre-right {
|
|
background-color: #b2e281;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
white-space: pre-wrap;
|
|
word-break: normal;
|
|
}
|
|
|
|
.chat-output-bubble-pre-left {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
white-space: pre-wrap;
|
|
word-break: normal;
|
|
}
|
|
|
|
|
|
.user-photo {
|
|
float: left;
|
|
margin-right: 10px;
|
|
position: relative
|
|
}
|
|
|
|
.my-photo {
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px
|
|
}
|
|
|
|
.user-list-block-href {
|
|
background: #2e3238;
|
|
border: 0px;
|
|
outline: none;
|
|
}
|
|
|
|
|
|
.user-list-block {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.user-info {
|
|
overflow: hidden;
|
|
height: 60px;
|
|
}
|
|
|
|
.user-box {
|
|
overflow: hidden;
|
|
padding: 12px 18px 11px;
|
|
border-bottom: 1px solid #292c33;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.my-name {
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
line-height: 20px;
|
|
margin-top: 5px;
|
|
float: left;
|
|
width: 100%;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.my-message {
|
|
color: #989898;
|
|
font-size: 17px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
height: 1.5em;
|
|
float: left;
|
|
text-align: left;
|
|
margin-right: 20px;
|
|
width: 300px;
|
|
|
|
}
|