@charset "utf-8"; /* * author yinq */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { color:#000; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; height:800px; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0; padding:0; } /* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } /* HTML5 媒体文件跟 img 保持一致 */ audio,canvas,video { display:inline-block; *display:inline; *zoom:1; } /* 要注意表单元素并不继承父级 font 的问题 */ body,button,input,select,textarea { font:14px/1.5 "微软雅黑",tahoma,arial,\5b8b\4f53; } input,select,textarea { font-size:100%; } /* 去掉各Table cell 的边距并让其边重合 */ table { border-collapse:collapse; border-spacing:0; } /* IE bug fixed:th 不继承 text-align*/ th { text-align:inherit; } /* 去除默认边框 */ fieldset,img { border:0; } /* ie6 7 8(q) bug 显示为行内表现 */ iframe { display:block; } /* 去掉 firefox 下此元素的边框 */ abbr,acronym { border:0; font-variant:normal; } /* 一致的 del 样式 */ del { text-decoration:line-through; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:500; } /* 去掉列表前的标识,li 会继承 */ ol,ul { list-style:none; } /* 对齐是排版最重要的因素,别让什么都居中 */ caption,th { text-align:left; } /* 来自yahoo,让标题都自定义,适应多个系统应用 */ h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500; } q:before,q:after { content:''; } /* 统一上标和下标 */ sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; } /* 让链接在 hover 状态下显示下划线 */ a:hover { text-decoration:underline; } /* 默认不显示下划线,保持页面简洁 */ ins,a { text-decoration:none; } /* 清理浮动 */ .fn-clear:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .fn-clear { zoom:1; /* for IE6 IE7 */ } /* 隐藏,通常用来与 JS 配合 */ body .fn-hide { display:none; } /* 设置内联,减少浮动带来的bug */ .fn-left,.fn-right { display:inline; } .fn-left { float:left; } .fn-right { float:right; } /*webkit内核浏览器滚动条*/::-webkit-scrollbar-track-piece { background:#e9e9e9; } ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-button { display:none; } ::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece { background:-webkit-gradient(linear,left); } ::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:horizontal { border-radius:6px; background:#bdbdbd; } ::-webkit-scrollbar-thumb:hover { background:#8e8e8e; } ::-webkit-scrollbar-thumb:active { background:#828181; } @font-face { font-family:'fontello'; src:url('../font/fontello.eot?68245288'); src:url('../font/fontello.eot?68245288#iefix') format('embedded-opentype'),url('../font/fontello.woff?68245288') format('woff'),url('../font/fontello.ttf?68245288') format('truetype'),url('../font/fontello.svg?68245288#fontello') format('svg'); font-weight:normal; font-style:normal; } /*common*/ body { background:#176994 url(http://www.jq22.com/img/cs/500x500-9.png); height:-moz-calc(100% - 100px); height:-webkit-calc(100% - 100px); height:calc(100% - 100px); padding:50px; } .fontico:before { font-family:"fontello"; font-style:normal; font-weight:normal; speak:none; display:inline-block; text-decoration:inherit; text-align:center; } i.down:before { content:'\e800'; } i.lock:before { content:'\e806'; } i.logout:before { content:'\e804'; } /*chatbox*/ .chatbox { overflow:hidden; height:100%; width:100%; min-width:600px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:rgba(255,255,255,1); } /*chat_top*/ .chat_top { height:60px; border-bottom:1px solid #eee; background-image:url(../images/top.png); background-size:cover; } .logo { float:left; } .logo img { vertical-align:bottom; } .uinfo { margin:10px 0; float:right; padding-right:20px; } .uface { float:left; height:40px; } .uface img { -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .uinfo .uname { float:left; line-height:40px; margin-left:10px; color:#2E4059; position:relative; } .uinfo .uname i.down { margin-left:50px; } .managerbox { display:none; width:100px; border:1px solid #eee; background-color:#FFF; padding:10px 0; position:absolute; top:40px; right:-10px; } .managerbox a { display:block; color:#2E4059; padding:0px 10px; } .managerbox a i { margin-right:10px; } .managerbox a:hover { background-color:#f9f9f9; text-decoration:none; } /*chat_message*/ .chat_message { height:-moz-calc(100% - 61px); height:-webkit-calc(100% - 61px); height:calc(100% - 61px); } /*chat_left*/ .chat_left { padding:20px; width:-moz-calc(100% - 240px); width:-webkit-calc(100% - 240px); width:calc(100% - 240px); height:-moz-calc(100% - 40px); height:-webkit-calc(100% - 40px); height:calc(100% - 40px); float:left; } .message_box { background-color:#FFF; margin-bottom:20px; height:-moz-calc(100% - 120px); height:-webkit-calc(100% - 120px); height:calc(100% - 120px); overflow:auto; } .msg_item { margin-bottom:20px; position:relative; } .msg_item .uface { position:absolute; bottom:0px; } .msg_item .item_right { margin-left:45px; float:left; margin-right:15px; } .msg_item .msg { background-color:#F4F6F8; padding:10px 15px; line-height:24px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#2E4059; position:relative; margin-bottom:5px; } .msg.own { background-color:#E0F1FC; } /*自己的聊天记录显示为蓝色*/ .msg_item .msg:before { content:""; position:absolute; bottom:-12px; left:10px; border-width:12px 12px 0 0; border-style:solid; border-color:#F4F6F8 transparent; display:block; width:0; } .msg_item .msg.own:before { border-color:#E0F1FC transparent; } .msg_item .name_time { font-size:12px; color:#7E90A5; line-height:30px; padding-left:10px; } .write_box { height:100px; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; overflow:hidden; } .write_area { border:2px solid #E3E8ED; border-bottom:none; padding:5px; outline:none; color:#B4C0CE; margin:0; vertical-align:bottom; width:-moz-calc(100% - 14px); width:-webkit-calc(100% - 14px); width:calc(100% - 14px); height:56px; } .facebox { height:32px; width:100%; background-color:#E3E8ED; } .sub_but { float:right; padding:0 25px; background-color:#7E90A5; outline:none; border:none; height:32px; cursor:pointer; line-height:30px; color:#FFF; } /*chat_right*/ .chat_right { width:199px; height:100%; float:left; border-left:1px solid #eee; } .user_list { padding:0; overflow:auto; height:100%; } .user_list li { padding:10px 20px; color:#2E4059; cursor:pointer; } .user_list li:hover,.user_list li.selected { background-color:#F4F6F8; } .user_list li span { display:block; float:left; width:30px; height:30px; margin-right:10px; } .user_list li em { display:block; float:left; height:30px; line-height:30px; } .user_list li small { width:10px; height:10px; margin:10px; float:left; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } small.online { background-color:#57B869; } small.offline { background-color:#EB3E3E; } .user_list li img { -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; vertical-align:middle; } /*expression - 表情,有待增加*/ .expression { float:left; } /*chat_type - 聊天性质,私聊|群聊*/ .chat_type { float:left; line-height:30px; padding-left:10px; }