137 lines
9.9 KiB
CSS
137 lines
9.9 KiB
CSS
|
/**
|
||
|
|
|
||
|
|
@Name: layim
|
||
|
|
@Author: 贤心
|
||
|
|
@Site: http://layim.layui.com
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* 加载就绪标志 */
|
||
|
|
html #layuicss-skinlayim-mobilecss{display: none; position: absolute; width: 1989px;}
|
||
|
|
|
||
|
|
/* 主界面 */
|
||
|
|
.layui-layim-tab li,
|
||
|
|
.layim-tab-content li h5 *,
|
||
|
|
.layui-layim-tool li,
|
||
|
|
.layui-layim-skin li{display: inline-block; vertical-align: top; *zoom: 1; *display: inline;}
|
||
|
|
.layui-layim-list li p,
|
||
|
|
.layim-tab-content li h5 span,
|
||
|
|
.layui-layim-list li span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
||
|
|
|
||
|
|
.layui-layim-tab{position: absolute; bottom: 0; left: 0; right: 0; height: 50px; border-top: 1px solid #f2f2f2; background-color: #fff;}
|
||
|
|
.layui-layim-tab li{position: relative; width: 33.33%; height: 50px; text-align: center; color: #666; color: rgba(0,0,0,.6); cursor: pointer;}
|
||
|
|
.layui-layim-tab li .layui-icon{position: relative; top: 7px; font-size: 25px;}
|
||
|
|
.layui-layim-tab li span{position: relative; bottom: -3px; display: block; font-size: 12px;}
|
||
|
|
.layui-layim-tab li[lay-type="more"] .layui-icon{top: 4px; font-size: 22px;}
|
||
|
|
.layui-layim-tab li.layim-this{color: #3FDD86;}
|
||
|
|
.layim-new{display: none; position: absolute; top: 5px; left: 50%; margin-left: 15px; width: 10px; height: 10px; border-radius: 10px; background-color: #F74C31; color: #fff;}
|
||
|
|
.layim-list-top .layim-new{position: relative; vertical-align: top; top: 10px; left: initial; margin-left: 5px;}
|
||
|
|
.layim-list-top i.layui-show{display: inline-block!important;}
|
||
|
|
|
||
|
|
.layui-layim{position: fixed; left: 0; right: 0; top: 50px; bottom: 50px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling : touch; }
|
||
|
|
|
||
|
|
.layim-tab-content{display: none;}
|
||
|
|
.layim-tab-content li h5{position:relative; padding-left: 35px; height: 45px; line-height: 45px; cursor:pointer; font-size:0; border-bottom: 1px solid #f2f2f2; white-space: nowrap; overflow: hidden;}
|
||
|
|
.layim-tab-content li h5 *{font-size: 17px;}
|
||
|
|
.layim-tab-content li h5 span{max-width: 80%;}
|
||
|
|
.layim-tab-content li h5 i{position: absolute; left: 12px; top: 0; color: #C9BDBB;}
|
||
|
|
.layim-tab-content li h5 em{padding-left: 5px; color: #999;}
|
||
|
|
.layim-tab-content li ul{display: none;}
|
||
|
|
.layim-list-friend, .layim-list-group{background-color: #fff;}
|
||
|
|
.layui-layim-list li{position:relative; height: 42px; border-bottom: 1px solid #f2f2f2; padding: 5px 15px 5px 60px; font-size:0; cursor:pointer;}
|
||
|
|
.layui-layim-list li:active{background-color: #F2F2F2; background-color: rgba(0,0,0,0.05);}
|
||
|
|
.layui-layim-list li.layim-null{height: 20px; line-height: 20px; padding: 10px 0; font-size: 17px; color: #999; text-align: center; cursor: default; font-size: 14px;}
|
||
|
|
.layim-list-history li.layim-null{padding: 30px 0; border-bottom: none; background-color: #eee;}
|
||
|
|
.layui-layim-list li *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size: 17px;}
|
||
|
|
.layui-layim-list li span{margin-top: 2px; max-width: 155px; font-size: 17px;}
|
||
|
|
.layui-layim-list li img{position: absolute; left: 12px; top: 8px; width: 36px; height: 36px; border-radius: 100%;}
|
||
|
|
.layui-layim-list li p{display: block; padding-right: 30px; line-height: 18px; font-size: 13px; color: #999;}
|
||
|
|
.layui-layim-list li .layim-msg-status{display: none; position: absolute; right: 10px; bottom: 7px; padding: 0 5px; height: 17px; line-height: 17px; border-radius: 17px; text-align: center; font-size: 10px; background-color: #F74C31; color: #fff;}
|
||
|
|
.layim-list-group{}
|
||
|
|
|
||
|
|
.layim-list-gray{-webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
|
||
|
|
|
||
|
|
.layim-list-top{background-color: #fff; font-size: 17px;}
|
||
|
|
.layim-list-top li{position: relative; padding: 0 15px 0 50px; line-height: 45px; border-bottom: 1px solid #f2f2f2; cursor: pointer;}
|
||
|
|
.layim-list-top li:last-child{margin-bottom: 10px; border-bottom: none;}
|
||
|
|
.layim-list-top li .layui-icon{position: absolute; left: 12px; top: 0; margin-right: 10px; color: #36373C; font-size: 24px;}
|
||
|
|
.layim-list-top li[layim-event="newFriend"] .layui-icon{left: 15px;}
|
||
|
|
.layim-list-top li[layim-event="group"] .layui-icon{font-size: 20px;}
|
||
|
|
.layim-list-top li[layim-event="about"] .layui-icon{font-size: 25px;}
|
||
|
|
|
||
|
|
/* 通用面板 */
|
||
|
|
.layim-panel{position: fixed; bottom: 0; top: 0; left: 0; right: 0; background-color: #eee;}
|
||
|
|
.layim-panel{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}
|
||
|
|
.layim-title{position: fixed; top: 0; left: 0; right: 0; height: 50px; line-height: 50px; padding: 0 15px; background-color: #36373C; color: #fff; font-size: 18px;}
|
||
|
|
.layim-chat-status{padding-left: 15px; font-size: 14px; opacity: 0.7;}
|
||
|
|
.layim-title .layim-chat-back{display: inline-block; vertical-align: middle; position: relative; padding: 0 15px; margin-left: -10px; top: 0; font-size: 24px; cursor: pointer;}
|
||
|
|
.layim-chat-detail{position: absolute; right: 0; top: 0; padding: 0 15px; font-size: 18px; cursor: pointer;}
|
||
|
|
.layim-title .layim-chat-back:active,
|
||
|
|
.layim-chat-detail:active{opacity: 0.8}
|
||
|
|
.layui-layim .layim-title{text-align: left;}
|
||
|
|
.layui-layim .layim-title p{padding: 0 15px;}
|
||
|
|
.layim-content{position: fixed; top: 50px; bottom: 0; left: 0; right: 0; overflow-x: hidden; overflow-y: auto;}
|
||
|
|
|
||
|
|
/* 聊天面板 */
|
||
|
|
.layim-chat-main{position: fixed; width: 100%; bottom: 85px; top: 50px; left: 0; right: 0; padding: 15px; overflow-y: auto; overflow-x: hidden; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
|
||
|
|
.layim-chat-main ul{overflow-x: hidden;}
|
||
|
|
.layim-chat-main ul li{position: relative; font-size: 0; margin-bottom: 10px; padding-left: 60px; min-height: 68px;}
|
||
|
|
.layim-chat-user,
|
||
|
|
.layim-chat-text{display: inline-block; *display:inline; *zoom:1; vertical-align:top; font-size: 15px;}
|
||
|
|
.layim-chat-user{position: absolute; left: 3px;}
|
||
|
|
.layim-chat-user img{width: 40px; height: 40px; border-radius: 100%;}
|
||
|
|
.layim-chat-user cite{position: absolute; left: 60px; top: -2px; width: 500px; line-height: 24px; font-size: 12px; white-space: nowrap; color: #999; text-align: left; font-style: normal;}
|
||
|
|
.layim-chat-user cite i{padding-left: 15px; font-style: normal;}
|
||
|
|
.layim-chat-text{position: relative; min-height: 22px; line-height: 22px; margin-top: 25px; padding: 8px 15px; background-color: #fff; border-radius: 3px; color: #333; word-break: break-all;}
|
||
|
|
.layim-chat-text:after{content: ''; position: absolute; left: -10px; top: 13px; width: 0; height: 0; border-style: dashed; border-color:transparent; overflow:hidden; border-width: 10px; border-top-style: solid; border-top-color: #fff;}
|
||
|
|
.layim-chat-text a{color: #33DF83;}
|
||
|
|
.layim-chat-text img{ max-width: 100%; vertical-align: middle;}
|
||
|
|
.layui-layim-file,
|
||
|
|
.layim-chat-text .layui-layim-file{display: block; text-align: center; }
|
||
|
|
.layim-chat-text .layui-layim-file{color: #333;}
|
||
|
|
.layui-layim-file:active{opacity: 0.9}
|
||
|
|
.layui-layim-file i{font-size: 80px; line-height: 80px;}
|
||
|
|
.layui-layim-file cite{display: block; line-height: 20px; font-size: 17px;}
|
||
|
|
.layui-layim-audio {text-align: center; cursor: pointer}
|
||
|
|
.layui-layim-audio .layui-icon {position: relative; top: 5px; font-size: 24px}
|
||
|
|
.layui-layim-audio p {margin-top: 3px}
|
||
|
|
.layui-layim-video {width: 120px; height: 80px; line-height: 80px; background-color: #333; text-align: center; border-radius: 3px}
|
||
|
|
.layui-layim-video .layui-icon {font-size: 36px; cursor: pointer; color: #fff}
|
||
|
|
.layim-chat-main ul .layim-chat-system{min-height: 0; padding: 0;}
|
||
|
|
|
||
|
|
.layim-chat-main ul .layim-chat-mine{text-align: right; padding-left: 0; padding-right: 60px;}
|
||
|
|
.layim-chat-mine .layim-chat-user{left: auto; right: 3px;}
|
||
|
|
.layim-chat-mine .layim-chat-user cite{left: auto; right: 60px; text-align: right;}
|
||
|
|
.layim-chat-mine .layim-chat-user cite i{padding-left: 0; padding-right: 15px;}
|
||
|
|
.layim-chat-mine .layim-chat-text{margin-left: 0; text-align: left; background-color: #5FB878; color: #fff;}
|
||
|
|
.layim-chat-mine .layim-chat-text:after{left: auto; right: -10px; border-top-color: #5FB878;}
|
||
|
|
.layim-chat-mine .layim-chat-text a{color: #fff;}
|
||
|
|
|
||
|
|
.layim-chat-main ul .layim-chat-system{min-height: 0; margin: 20px 0 5px; padding: 0;}
|
||
|
|
.layim-chat-system{margin: 10px 0; text-align: center;}
|
||
|
|
.layim-chat-system span{display: inline-block; line-height: 30px; padding: 0 15px; border-radius: 3px; background-color: #ddd; color: #fff; font-size: 14px; cursor: pointer;}
|
||
|
|
|
||
|
|
.layim-chat-footer{ position: fixed; bottom: 0; left: 10px; right: 10px; height: 80px;}
|
||
|
|
.layim-chat-send{display: -webkit-box; display: -webkit-flex; display: flex;}
|
||
|
|
.layim-chat-send input{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: 40px; padding-left: 5px; border: none 0; background-color: #fff; border-radius: 3px;}
|
||
|
|
.layim-chat-send button{border-radius: 3px; height: 40px; padding: 0 20px; border: none 0; margin-left: 10px; background-color: #5FB878; color: #fff;}
|
||
|
|
|
||
|
|
.layim-chat-tool{position: relative; width: 100%; overflow-x: auto; padding: 0; height: 38px; line-height: 38px; margin-top: 3px; font-size: 0; white-space: nowrap;}
|
||
|
|
.layim-chat-tool span{position: relative; margin: 0 15px; display: inline-block; *display:inline; *zoom:1; vertical-align:top; font-size: 28px; cursor: pointer;}
|
||
|
|
.layim-chat-tool .layim-tool-log{position: absolute; right: 5px; font-size: 14px; }
|
||
|
|
.layim-tool-log i{position: relative; top: 2px; margin-right: 5px; font-size: 20px; color: #999}
|
||
|
|
.layim-tool-image input{position: absolute; font-size: 0; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.01; filter: Alpha(opacity=1); cursor: pointer;}
|
||
|
|
|
||
|
|
|
||
|
|
.layim-layer{position: fixed; bottom: 85px; left: 10px; right: 10px; margin: 0 auto;}
|
||
|
|
|
||
|
|
.layui-layim-face{position:relative; max-height: 180px; overflow: auto; padding: 10px; font-size: 0;}
|
||
|
|
.layui-layim-face li{cursor: pointer; display: inline-block; vertical-align: bottom; padding: 5px 2px; text-align: center; width: 10%; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
|
||
|
|
.layui-layim-face li img{width: 22px; height: 22px;}
|
||
|
|
|
||
|
|
/* 其它 */
|
||
|
|
.layim-about{font-size: 17px;}
|
||
|
|
.layim-about .layui-m-layercont{text-align: left;}
|
||
|
|
.layim-about .layui-m-layercont p{line-height: 30px;}
|
||
|
|
.layim-about .layui-m-layercont a{color: #01AAED;}
|