465 lines
13 KiB
SCSS
465 lines
13 KiB
SCSS
.layout-editor-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.editor {
|
|
line-height: normal !important;
|
|
// height: 200px;
|
|
height: 350px;
|
|
box-sizing: border-box;
|
|
tab-size: 4;
|
|
outline: none;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
margin-bottom: 15px;
|
|
}
|
|
.ql-editor.ql-blank::before {
|
|
font-style: normal;
|
|
}
|
|
.ql-container {
|
|
height: calc(100% - 66px);
|
|
}
|
|
.ql-snow .ql-tooltip[data-mode='link']::before {
|
|
content: '请输入链接地址:';
|
|
}
|
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
|
border-right: 0px;
|
|
content: '保存';
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.ql-snow .ql-tooltip[data-mode='video']::before {
|
|
content: '请输入视频地址:';
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
|
|
content: '12px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
|
|
content: '14px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
|
|
content: '16px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
|
|
content: '18px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
|
|
content: '20px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
|
|
content: '22px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
|
|
content: '24px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
|
|
content: '26px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
|
|
font-size: 26px;
|
|
}
|
|
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
|
content: '32px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
|
|
content: '48px';
|
|
}
|
|
// select选择的字体大小
|
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.ql-editor .ql-size-12px {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ql-editor .ql-size-14px {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ql-editor .ql-size-16px {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.ql-editor .ql-size-18px {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.ql-editor .ql-size-20px {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ql-editor .ql-size-22px {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.ql-editor .ql-size-24px {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.ql-editor .ql-size-26px {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.ql-editor .ql-size-32px {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.ql-editor .ql-size-48px {
|
|
font-size: 48px;
|
|
}
|
|
|
|
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
|
content: '文本';
|
|
}
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
|
|
content: '标题1';
|
|
}
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
|
|
content: '标题2';
|
|
}
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
|
|
content: '标题3';
|
|
}
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
|
|
content: '标题4';
|
|
}
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
|
|
content: '标题5';
|
|
}
|
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
|
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
|
|
content: '标题6';
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-font {
|
|
min-width: 150px;
|
|
}
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
|
|
content: '宋体';
|
|
font-family: 'SimSun';
|
|
}
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
|
|
content: '黑体';
|
|
font-family: 'SimHei';
|
|
}
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Microsoft-YaHei']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Microsoft-YaHei']::before {
|
|
content: '微软雅黑';
|
|
font-family: 'Microsoft YaHei';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='幼圆']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='幼圆']::before {
|
|
content: '幼圆';
|
|
font-family: '幼圆';
|
|
}
|
|
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
|
|
content: '楷体';
|
|
font-family: 'KaiTi';
|
|
}
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
|
|
content: '仿宋';
|
|
font-family: 'FangSong';
|
|
}
|
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
|
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
|
|
content: 'Arial';
|
|
font-family: 'Arial';
|
|
}
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Times-New-Roman']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Times-New-Roman']::before {
|
|
content: 'Times New Roman';
|
|
font-family: 'Times New Roman';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='serif']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='serif']::before {
|
|
content: 'serif';
|
|
font-family: 'serif';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='sans-serif']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='sans-serif']::before {
|
|
content: 'sans-serif';
|
|
font-family: 'sans-serif';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Arial-Black']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Arial-Black']::before {
|
|
content: 'Arial Black';
|
|
font-family: 'Arial Black';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Arial-Narrow']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Arial-Narrow']::before {
|
|
content: 'Arial Narrow';
|
|
font-family: 'Arial Narrow';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Verdana']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Verdana']::before {
|
|
content: 'Verdana';
|
|
font-family: Verdana;
|
|
}
|
|
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Georgia']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Georgia']::before {
|
|
content: 'Georgia';
|
|
font-family: Georgia;
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='Comic-Sans-MS']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='Comic-Sans-MS']::before {
|
|
content: 'Comic Sans MS';
|
|
font-family: 'Comic Sans MS';
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='monospace']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='monospace']::before {
|
|
content: 'monospace';
|
|
font-family: monospace;
|
|
}
|
|
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-label[data-value='cursive']::before,
|
|
.ql-snow
|
|
.ql-picker.ql-font
|
|
.ql-picker-item[data-value='cursive']::before {
|
|
content: 'cursive';
|
|
font-family: cursive;
|
|
}
|
|
|
|
.ql-font-SimSun {
|
|
font-family: 'SimSun';
|
|
}
|
|
.ql-font-SimHei {
|
|
font-family: 'SimHei';
|
|
}
|
|
.ql-font-Microsoft-YaHei {
|
|
font-family: 'Microsoft YaHei';
|
|
}
|
|
.ql-font-KaiTi {
|
|
font-family: 'KaiTi';
|
|
}
|
|
.ql-font-FangSong {
|
|
font-family: 'FangSong';
|
|
}
|
|
.ql-font-Arial {
|
|
font-family: 'Arial';
|
|
}
|
|
.ql-font-Times-New-Roman {
|
|
font-family: 'Times New Roman';
|
|
}
|
|
.ql-font-serif {
|
|
font-family: 'serif';
|
|
}
|
|
.ql-font-sans-serif {
|
|
font-family: 'sans-serif';
|
|
}
|
|
.ql-font-Arial-Black {
|
|
font-family: 'Arial Black';
|
|
}
|
|
.ql-font-Arial-Narrow {
|
|
font-family: 'Arial Narrow';
|
|
}
|
|
.ql-font-Verdana {
|
|
font-family: Verdana;
|
|
}
|
|
.ql-font-Georgia {
|
|
font-family: Georgia;
|
|
}
|
|
.ql-font-Comic-Sans-MS {
|
|
font-family: 'Comic Sans MS';
|
|
}
|
|
.ql-font-monospace {
|
|
font-family: monospace;
|
|
}
|
|
.ql-font-cursive {
|
|
font-family: cursive;
|
|
}
|
|
|
|
|
|
|
|
|
|
//------------------------------------------修改样式----------------------------------------------
|
|
|
|
// .ql-toolbar.ql-snow .ql-picker-label {
|
|
// border: 1px solid red;
|
|
// }
|
|
.ql-toolbar.ql-snow .ql-formats {
|
|
margin-right: 5px;
|
|
border: 1px solid #9e9898;
|
|
margin-top: 2px;
|
|
}
|
|
.ql-toolbar.ql-snow {
|
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
padding: 2px 8px 4px 8px;
|
|
}
|
|
|
|
// 边框线
|
|
.ql-toolbar.ql-snow {
|
|
border-color: #DCDFE6;
|
|
}
|
|
.ql-container.ql-snow {
|
|
border-color: #DCDFE6;
|
|
}
|
|
// 头部字体颜色
|
|
.ql-snow .ql-picker{
|
|
// color: #dbdce5;
|
|
}
|
|
|
|
.ql-snow .ql-stroke {
|
|
|
|
// stroke: #dbdce5;
|
|
}
|
|
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill{
|
|
// fill:#dbdce5
|
|
}
|
|
// 下拉背景色
|
|
.ql-snow .ql-picker-options {
|
|
// background-color: #112660;
|
|
}
|
|
// 下拉边框
|
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
|
// border-color: #173659;
|
|
}
|
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
|
// border-color: #173659;
|
|
}
|
|
|
|
// 下拉选中效果
|
|
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
|
|
// color: #409eff;
|
|
}
|
|
// 下拉默认字体颜色
|
|
.layout-editor-wrap .ql-snow .ql-picker {
|
|
// color: #112660;
|
|
}
|
|
|
|
// 输入框内默认的字体颜色
|
|
.ql-editor.ql-blank::before {
|
|
color: #ffffff96;
|
|
}
|
|
// .ql-editor p{
|
|
// color: #dbdce5;
|
|
// }
|
|
// .ql-editor u{
|
|
// color: #dbdce5;
|
|
// }
|
|
.ql-snow .ql-editor pre.ql-syntax{
|
|
// background-color: #15428d;
|
|
}
|
|
|
|
} |