Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。

森中灵 最后提交于3月前 整理V8.0.6
zhiqim_text_editor.css7KB
/*
** 一:容器、通用样式
*/
.zte-container,.zte-container *{box-sizing:border-box;}
.zte-container{border:1px solid #ccc;border-bottom:none;position:relative;}
/*
.zte-container table,.zte-container td,.zte-container div{font-size:inherit;line-height:inherit;}
*/
.zte-disable{opacity:.7;pointer-events:none;}
/*
** 二:按钮样式
*/
.zte-toolbar{position:relative;z-index:1000;}
/*按钮栏*/
.zte-btn-toolbar{padding:8px 8px 0 8px;border-bottom:1px solid #ccc;background:#fcfcfc;}
/*按钮*/
.zte-btn,.zte-btn .zte-font,.zte-btn-separator{display:inline-block;}
.zte-btn,.zte-btn-separator{vertical-align:top;text-align:center;}
.zte-btn.zte-btn .zte-font{width:20px;height:20px;line-height:20px;}
.zte-btn{height:26px;padding:2px;margin:0px 1px 8px 1px;border:1px solid transparent;position:relative;cursor:default;}
/*按钮中的“按钮”,颜色选择器的三角选择按钮*/
.zte-pickerBtn{border-left:1px solid transparent;width:100px;}
.zte-pickerBtn:hover{border-color:#ccc;}
/*悬浮、选中、不可选*/
.zte-btn.zte-active,.zte-btn:not(.zte-btn-disable):hover{border-color:#aaa;background:#fefefe;}
.zte-btn.zte-btn-disable{opacity:.4;pointer-events:none;}
/*分隔符*/
.zte-btn-separator{width:0;height:20px;margin:2px 2px 7px;border-left:1px solid #999;border-right:1px solid #fff}
/*按钮提示文字*/
.zte-btn-title{position:absolute;padding:5px;display:none;z-index:99;}
.zte-btn-title .zte-btn-title-arrow{position:absolute;top:0;_top:-2px;left:50%;width:0;height:0;font-size:0;margin-left:-5px;border-color:transparent;border-style:dashed dashed solid;border-bottom-color:#999;border-width:0 5px 5px;background:transparent;}
.zte-btn-title .zte-btn-title-text{padding:6px;color:#fff;text-align:center;text-decoration:none;font-size:12px;background-color:#999;white-space:nowrap;line-height:12px;}
/*颜色展示*/
.zte-btn-color{display:inline-block;width:5px;height:15px;border:0px dashed #888;}
/*dropdown的样式*/
.zte-btn.zte-btn-dropdown{width:100px;font-size:14px;padding:0;border-width:0px;margin:0 2px;text-align:left;border:1px solid #999;}
.zte-btn.zte-btn-dropdown .zte-dropdown-selected{white-space:nowrap;width:100%;padding:0 10px 0 10px;line-height:24px;}
.zte-btn.zte-btn-dropdown .zte-dropdown-selected .zte-font{position:absolute;right:0;top:50%;margin-top:-10px;}
ul.zte-btn-dropdown{display:none;position:absolute;left:-1px;top:100%;box-sizing:content-box;min-width:100%;border:1px solid #999;background:#fff;z-index:9999;}
ul.zte-btn-dropdown li{white-space:nowrap;padding:0 50px 0 15px;line-height:150%;cursor:pointer;}
ul.zte-btn-dropdown li:hover{background:#ccc;}
ul.zte-btn-dropdown li > *{margin:0;}

/*
** 三:弹出框容器
*/
/*整体容器*/
.zte-dialog-container{position:absolute;left:0;top:0;width:100%;height:0;}

/*颜色选择器*/
.zte-colorPicker{position:absolute;padding:8px 0;display:none;}
.zte-colorPicker table{border-collapse:collapse;border-spacing:2px;}
.zte-colorPicker td{empty-cells:show;width:20px;height:20px;border-style:solid;border-color:#fff;border-width:1px;}
.zte-colorPicker td a{display:block;width:100%;height:100%;}
.zte-colorPicker td a:hover{transform:scale(1.6);border:1px solid #fff !important;}
.zte-pickedColor{position:absolute;width:16px;height:3px;left:3px;top:18px;}
.zte-btn[data-attr=backColor] .zte-pickedColor{width:16px;}
/*颜色选择器-箭头*/
.zte-colorPicker-arrow{position:absolute;width:13px;height:13px;left:12px;top:2px;background:#fcfcfc;border-color:#ddd;border-width:1px 0 0 1px;border-style:solid;transform:rotate(45deg);}
/*颜色选择器-表格*/
.zte-colorPick-table{background:#fcfcfc;padding:5px 10px 15px 10px;border:1px solid #ddd;}
/*颜色选择器-标题*/
.zte-colorPick-table .zte-colorPicker-title{border:none;font-size:14px;padding:10px 0 5px;}

/*图片添加弹窗 && 特殊字符添加*/
/*选择标题*/
.zte-dialogSwitchBtn{border-bottom:1px solid #ddd;}
.zte-dialogSwitchBtn span{display:inline-block;padding:10px 10px 5px;margin-bottom:-1px;margin-left:-1px;font-size:12px;border-width:1px;border-style:solid;border-color:#ddd;background:#fcfcfc;cursor:pointer;}
.zte-dialogSwitchBtn span:first-child{margin-left:0;}
.zte-dialogSwitchBtn span.zte-active{border-bottom-color:#fff;background:#fff;}
/*内容操作区域*/
.zte-dialogContent{padding:50px 20px 0 20px !important;text-align:center;position:relative;}
.zte-dialogContent > div{display:none;}
.zte-dialogContent > div.zte-active{display:block;}
/*--图片添加--预览*/
.zte-imgInsertor-imgWrap{display:table-cell;width:500px;max-width:100%;height:190px;vertical-align:middle;text-align:center;}
.zte-imgInsertor-imgWrap img{max-width:100%;max-height:100%;}
.zte-imgInsertor-browse{float:right;padding:10px 10px 5px;font-size:12px;cursor:pointer;color:#e8351f;}
.zte-imgInsertor-browse:hover{text-decoration:underline;}
.zte-dialogContent > .zte-imgInsertor-conUrl{position:absolute;display:block;left:20px;top:5px;font-size:12px;text-align:left;}
.zte-imgInsertor-conUrlHeader,.zte-imgInsertor-conUrlChange{display:inline-block;padding:0 8px;height:26px;line-height:26px;vertical-align:top;color:#777;background:#f5f5f5;border-width:1px 0 1px 1px;border-style:solid;border-color:#ccc;border-top-left-radius:2px;border-bottom-left-radius:2px;}
.zte-imgInsertor-conUrlChange{margin-left:5px;color:#444;border-width:1px;border-radius:2px;cursor:pointer;}
.zte-imgInsertor-conUrlInput{width:250px;vertical-align:top;border-color:#ccc;}
.zte-imgInsertor-saveUrlText{color:#aaa;}
/*--服务器图片浏览--*/
.zte-insertImgBrowse-header{padding:10px 15px;}
.zte-insertImgBrowse-backBtn{float:left;width:70px;text-align:center;height:28px;line-height:28px;font-size:12px;text-decoration:underline;cursor:pointer;background:#fcfcfc;}
.zte-insertImgBrowse-location{width:100%;height:28px;line-height:28px;padding-left:80px;background:#f1f1f1;}
.zte-insertImgBrowse-list::azter{content:"";display:table;clear:both;padding:10px;}
.zte-insertImgBrowse-list li{float:left;width:200px;height:200px;padding:5px;margin:10px;border-radius:3px;text-align:center;border:1px solid #ccc;box-shadow:1px 1px 5px rgba(0,0,0,0.1);position:relative;overflow:hidden;}
.zte-insertImgBrowse-list li .zte-font{font-size:90px;position:absolute;left:55px;top:90px;}
.zte-insertImgBrowse-list li img{max-width:100%;max-height:100%;}
.zte-insertImgBrowse-list li .zte-insertImgBrowse-itemName{font-size:12px;position:absolute;left:0;bottom:0;width:100%;height:40px;padding:5px;line-height:30px;color:#444;background:rgba(0,0,0,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/*--特殊字符--*/
.zte-dialogContent-symbol{height:160px;padding:0px 20px !important;vertical-align:top;}
.zte-dialogContent-symbol td{padding:3px 0;}
.zte-dialogContent-symbol td a{display:inline-block;width:26px;height:26px;font-size:16px;line-height:24px;border:1px solid #ccc;border-radius:2px;}

/*
** 四:编辑器样式
*/
.zte-editor{position:relative;border:0;outline:0;cursor:text;padding:4px 10px;font-size:14px;overflow:auto;word-wrap:break-word;font-family:sans-serif;z-index:999;border-bottom:1px solid #ccc;}
/*工具容器*/
.zte-zoomTool-wrap{position:absolute;left:0;right:0;bottom:0;overflow: hidden;pointer-events: none;z-index:999;}
/*缩放编辑容器*/
.zte-zoomTool-cover{position:absolute;border:1px solid #3C9DD0;display:none;pointer-events:auto;}
.zte-zoomTool-cover>div{position:absolute;width:7px;height:7px;background:#3C9DD0;}
.zte-zoomTool-cover .zte-zoomTool-e{right:-3px;top:50%;margin-top:-3px;cursor:e-resize}
.zte-zoomTool-cover .zte-zoomTool-se{right:-3px;bottom:-3px;cursor:se-resize}
.zte-zoomTool-cover .zte-zoomTool-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}
/*内容*/
.zte-editor a{cursor:text;}
.zte-editor img{cursor:move;}
/*部分兼容性调整*/
/*1:zhiqimUI全局样式*/
.zte-editor.ZUI-fix table,
.zte-editor.ZUI-fix td,
.zte-editor.ZUI-fix div{font-size: inherit; line-height: inherit;}