UNPKG

mdui.editor

Version:

Material Design 样式的富文本编辑器

1,580 lines (1,503 loc) 38.2 kB
/*! * mdui.editor 1.0.2 (https://github.com/zdhxiong/mdui.editor#readme) * Copyright 2019-2020 zdhxiong * Licensed under MIT *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * ============================================================================= * ************ 公共样式 ************ * ============================================================================= */ * { -webkit-tap-highlight-color: transparent; } body { color: rgba(0, 0, 0, 0.87); font-size: 14px; font-family: Roboto, Noto, Helvetica, Arial, sans-serif; background-color: #fff; } @media (min-width: 600px) { body { font-size: 14.5px; } } @media (min-width: 1024px) { body { font-size: 15px; } } body *::-webkit-scrollbar { width: 5px; height: 5px; background: transparent; } @media (min-width: 1024px) { body *::-webkit-scrollbar { width: 8px; height: 8px; } } body *::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } /* 锁定屏幕 */ body.mdui-locked { overflow: hidden; } /* 遮罩层 */ .mdui-overlay { position: fixed; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; z-index: 2000; background: rgba(0, 0, 0, 0.4); -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: hidden; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; will-change: opacity; } /* 显示遮罩层 */ .mdui-overlay-show { visibility: visible; opacity: 1; } /* 取消 transition 过渡效果 */ .mdui-no-transition { -webkit-transition-property: none !important; transition-property: none !important; } /** * ============================================================================= * ************ Global dark ************ * ============================================================================= */ /** * ============================================================================= * ************ Button 按钮 ************ * ============================================================================= */ /* 默认为 Flat 扁平按钮 */ .mdui-btn, .mdui-fab { position: relative; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 88px; height: 36px; margin: 0; padding: 0 16px; overflow: hidden; color: inherit; font-weight: 500; font-size: 14px; line-height: 36px; letter-spacing: 0.04em; white-space: nowrap; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; background: transparent; border: none; border-radius: 2px; outline: none; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: manipulation; touch-action: manipulation; will-change: box-shadow; zoom: 1; -webkit-user-drag: none; } .mdui-btn:hover, .mdui-fab:hover { background-color: rgba(0, 0, 0, 0.1); } .mdui-btn:not(.mdui-ripple):active, .mdui-fab:not(.mdui-ripple):active { background-color: rgba(0, 0, 0, 0.165); } .mdui-btn[class*="mdui-color-"]:hover, .mdui-fab[class*="mdui-color-"]:hover { opacity: 0.87; } .mdui-btn:not(.mdui-ripple)[class*="mdui-color-"]:active, .mdui-fab:not(.mdui-ripple)[class*="mdui-color-"]:active { opacity: 0.76; } /* 按钮内的图标 */ .mdui-btn .mdui-icon-left, .mdui-btn .mdui-icon-right, .mdui-btn .mdui-icon-left::before, .mdui-btn .mdui-icon-right::before { height: inherit; font-size: 1.3em; line-height: inherit; } .mdui-btn .mdui-icon-left { float: left; margin-right: 0.4em; } .mdui-btn .mdui-icon-right { float: right; margin-left: 0.4em; } input.mdui-btn[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Raised button 浮动按钮 */ .mdui-btn-raised { -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .mdui-btn-raised:hover { -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .mdui-btn-raised:active { -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } /* 禁用按钮 */ .mdui-btn[disabled], .mdui-fab[disabled], .mdui-btn[disabled]:hover, .mdui-fab[disabled]:hover, .mdui-btn[disabled]:active, .mdui-fab[disabled]:active, .mdui-btn[disabled]:focus, .mdui-fab[disabled]:focus { color: rgba(0, 0, 0, 0.26) !important; background-color: transparent !important; cursor: default !important; opacity: 1 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .mdui-btn[disabled] .mdui-icon, .mdui-fab[disabled] .mdui-icon, .mdui-btn[disabled]:hover .mdui-icon, .mdui-fab[disabled]:hover .mdui-icon, .mdui-btn[disabled]:active .mdui-icon, .mdui-fab[disabled]:active .mdui-icon, .mdui-btn[disabled]:focus .mdui-icon, .mdui-fab[disabled]:focus .mdui-icon { color: rgba(0, 0, 0, 0.26) !important; } /* 禁用状态浮动按钮和浮动操作按钮 */ .mdui-btn-raised[disabled], .mdui-fab[disabled], .mdui-btn-raised[disabled]:hover, .mdui-fab[disabled]:hover, .mdui-btn-raised[disabled]:active, .mdui-fab[disabled]:active, .mdui-btn-raised[disabled]:focus, .mdui-fab[disabled]:focus { background-color: rgba(0, 0, 0, 0.12) !important; -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important; } /* 加粗按钮文本 */ .mdui-btn-bold { font-weight: bold; } /* 图标按钮 */ .mdui-btn-icon { width: 36px; min-width: 36px; height: 36px; margin-right: 0; margin-left: 0; padding: 0; overflow: hidden; font-size: 24px; line-height: normal; border-radius: 50%; } .mdui-btn-icon .mdui-icon { position: absolute; top: 50%; left: 50%; width: 24px; line-height: 24px; -webkit-transform: translate(-12px, -12px); transform: translate(-12px, -12px); } .mdui-btn-icon.mdui-ripple { -webkit-transform: translateZ(0); transform: translateZ(0); } /* 按钮 100% 宽度 */ .mdui-btn-block { display: block; width: 100%; } /* 密集型按钮 */ .mdui-btn-dense { height: 32px; font-size: 13px; line-height: 32px; } .mdui-btn-dense.mdui-btn-icon { width: 32px; min-width: 32px; } /* 按钮组 */ .mdui-btn-group { position: relative; display: inline-block; vertical-align: middle; } .mdui-btn-group .mdui-btn { float: left; min-width: inherit; padding: 0 12px; color: rgba(0, 0, 0, 0.54); border-radius: 0; } .mdui-btn-group .mdui-btn::before { position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid transparent; content: ' '; } .mdui-btn-group .mdui-btn:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .mdui-btn-group .mdui-btn:first-child::before { border-left: none; } .mdui-btn-group .mdui-btn:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .mdui-btn-group .mdui-btn.mdui-btn-active { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.215); } .mdui-btn-group .mdui-btn.mdui-btn-active + .mdui-btn-active::before { border-left: 1px solid rgba(0, 0, 0, 0.145); } /** * ============================================================================= * ************ Button dark ************ * ============================================================================= */ /** * ============================================================================= * ************ Text Field 文本框 ************ * ============================================================================= */ /* 文本框外层 */ .mdui-textfield { position: relative; padding-top: 16px; padding-bottom: 8px; overflow: hidden; } .mdui-textfield-has-bottom { padding-bottom: 28px; } /* 输入框 */ .mdui-textfield-input { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 36px; margin: 0; padding: 8px 0; overflow: hidden; color: rgba(0, 0, 0, 0.87); font-size: 16px; font-family: inherit; line-height: 20px; background: none; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.42); border-radius: 0; outline: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: border-bottom-color, padding-right, -webkit-box-shadow; transition-property: border-bottom-color, padding-right, -webkit-box-shadow; transition-property: border-bottom-color, padding-right, box-shadow; transition-property: border-bottom-color, padding-right, box-shadow, -webkit-box-shadow; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; } .mdui-textfield-input::-webkit-input-placeholder { color: inherit; opacity: 0.42; } .mdui-textfield-input:not([disabled]):hover { border-bottom: 1px solid rgba(0, 0, 0, 0.87); -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.87); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.87); cursor: pointer; } .mdui-textfield-input[rows] { height: auto !important; overflow: auto; -webkit-overflow-scrolling: touch; } /* 文本框 label */ .mdui-textfield-label { display: block; width: 100%; color: rgba(0, 0, 0, 0.54); font-size: 16px; -webkit-transform: scale(0.75) translateY(0); transform: scale(0.75) translateY(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.2s; transition: all 0.2s; pointer-events: none; } /* 表单验证错误提示、帮助文本提示 */ .mdui-textfield-error, .mdui-textfield-helper { position: absolute; bottom: 8px; height: 12px; font-size: 12px; line-height: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mdui-textfield-error { color: rgba(255, 23, 68, 0.87); visibility: hidden; } .mdui-textfield-helper { color: rgba(0, 0, 0, 0.54); } /* 表单中的图标 ========== */ .mdui-textfield .mdui-icon { position: absolute; bottom: 8px; padding: 6px; color: rgba(0, 0, 0, 0.54); } .mdui-textfield .mdui-icon ~ .mdui-textfield-label, .mdui-textfield .mdui-icon ~ .mdui-textfield-input, .mdui-textfield .mdui-icon ~ .mdui-textfield-error, .mdui-textfield .mdui-icon ~ .mdui-textfield-helper, .mdui-textfield .mdui-icon ~ .mdui-textfield-flex-wrap { /* stylelint-disable-next-line */ width: calc(100% - 56px); margin-left: 56px; } .mdui-textfield-has-bottom .mdui-icon { bottom: 28px; } /* 聚焦状态的文本框 ============= */ .mdui-textfield-focus .mdui-textfield-input, .mdui-textfield-focus .mdui-textfield-input:hover { border-bottom-color: #C51162; -webkit-box-shadow: 0 1px 0 0 #C51162; box-shadow: 0 1px 0 0 #C51162; } .mdui-textfield-focus .mdui-textfield-label, .mdui-textfield-focus .mdui-icon { color: rgba(197, 17, 98, 0.87); } /* 含有浮动标签的文本框 ================ */ .mdui-textfield-floating-label .mdui-textfield-label { color: rgba(0, 0, 0, 0.35); -webkit-transform: scale(1) translateY(27px); transform: scale(1) translateY(27px); } .mdui-textfield-floating-label.mdui-textfield-focus .mdui-textfield-label, .mdui-textfield-floating-label.mdui-textfield-not-empty .mdui-textfield-label { color: rgba(0, 0, 0, 0.65); -webkit-transform: scale(0.75) translateY(0); transform: scale(0.75) translateY(0); } .mdui-textfield-floating-label.mdui-textfield-focus .mdui-textfield-label { color: #E91E63; } /* 可展开文本框,默认向右展开 ========== */ .mdui-textfield-expandable { width: 36px; min-height: 36px; padding: 1px 0; -webkit-transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mdui-textfield-expandable .mdui-icon { bottom: 0; padding: 0; } .mdui-textfield-expandable .mdui-textfield-input { /* stylelint-disable-next-line */ width: calc(100% - 36px); margin-left: 36px; padding-right: 0; } .mdui-textfield-expandable .mdui-textfield-icon { position: absolute; top: 0; left: 0; } .mdui-textfield-expandable .mdui-textfield-close { position: absolute; top: 0; right: 0; -webkit-transform: scale(0); transform: scale(0); } .mdui-textfield-expandable.mdui-textfield-expanded { width: 100%; } .mdui-textfield-expandable.mdui-textfield-expanded .mdui-textfield-input { padding-right: 36px; } .mdui-textfield-expandable.mdui-textfield-expanded .mdui-textfield-close { -webkit-transform: scale(1); transform: scale(1); } /* 表单验证不通过 =========== */ .mdui-textfield-invalid .mdui-textfield-input, .mdui-textfield-invalid-html5 .mdui-textfield-input, .mdui-textfield-invalid.mdui-textfield-focus .mdui-textfield-input, .mdui-textfield-invalid-html5.mdui-textfield-focus .mdui-textfield-input { border-bottom-color: #FF1744 !important; -webkit-box-shadow: 0 1px 0 0 #FF1744 !important; box-shadow: 0 1px 0 0 #FF1744 !important; } .mdui-textfield-invalid .mdui-textfield-label, .mdui-textfield-invalid-html5 .mdui-textfield-label { color: #FF1744 !important; } .mdui-textfield-invalid.mdui-textfield-floating-label .mdui-textfield-label, .mdui-textfield-invalid-html5.mdui-textfield-floating-label .mdui-textfield-label { color: rgba(255, 23, 68, 0.35) !important; } .mdui-textfield-invalid.mdui-textfield-floating-label.mdui-textfield-focus .mdui-textfield-label, .mdui-textfield-invalid-html5.mdui-textfield-floating-label.mdui-textfield-focus .mdui-textfield-label, .mdui-textfield-invalid.mdui-textfield-floating-label.mdui-textfield-not-empty .mdui-textfield-label, .mdui-textfield-invalid-html5.mdui-textfield-floating-label.mdui-textfield-not-empty .mdui-textfield-label { color: #FF1744 !important; } .mdui-textfield-invalid .mdui-textfield-error, .mdui-textfield-invalid-html5 .mdui-textfield-error { visibility: visible; } .mdui-textfield-invalid .mdui-textfield-error + .mdui-textfield-helper, .mdui-textfield-invalid-html5 .mdui-textfield-error + .mdui-textfield-helper { visibility: hidden; } /* 禁用表单 ====== */ .mdui-textfield-disabled .mdui-textfield-label, .mdui-textfield-disabled .mdui-textfield-input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.38); } .mdui-textfield-disabled .mdui-textfield-input { color: rgba(0, 0, 0, 0.42); cursor: default; } .mdui-textfield-disabled .mdui-textfield-input { border-bottom: 1px dashed rgba(0, 0, 0, 0.42); } /* 字数统计 ====== */ .mdui-textfield-counter { position: absolute; right: 8px; bottom: 8px; height: 12px; color: rgba(0, 0, 0, 0.54); font-size: 12px; line-height: 12px; } /** * ============================================================================= * ************ Textfield dark ************ * ============================================================================= */ /** * ============================================================================= * ************ Textfield 强调色 ************ * ============================================================================= */ /** * ============================================================================= * ************ Dialog alert ************ * ============================================================================= */ /** * ============================================================================= * ************ Dialog 提示框 ************ * ============================================================================= */ .mdui-dialog { position: fixed; right: 0; left: 0; z-index: 6000; display: none; -webkit-box-sizing: border-box; box-sizing: border-box; width: 92%; min-width: 180px; max-width: 728px; max-height: 90%; margin: auto; overflow: hidden; color: #000; background-color: #fff; border-radius: 2px; -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity, visibility, -webkit-transform; transition-property: opacity, visibility, -webkit-transform; transition-property: transform, opacity, visibility; transition-property: transform, opacity, visibility, -webkit-transform; will-change: top, opacity, transform; -webkit-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); } @media (min-width: 600px) { .mdui-dialog { width: 85%; max-height: 85%; } } @media (min-width: 1024px) { .mdui-dialog { width: 80%; max-height: 80%; } } /* 打开提示框 */ .mdui-dialog-open { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } /* 提示框标题 */ .mdui-dialog-title { -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: 500; font-size: 20px; line-height: 24px; text-align: left; } /* 标题固定在顶部 */ .mdui-dialog > .mdui-dialog-title { padding: 24px 24px 20px 24px; } /* 提示框内容 */ .mdui-dialog-content { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 24px; overflow-y: auto; color: rgba(0, 0, 0, 0.7); font-size: 15px; line-height: 1.5; -webkit-overflow-scrolling: touch; } /* 标题随内容滚动 */ .mdui-dialog-content > .mdui-dialog-title { padding-bottom: 20px; } .mdui-dialog-title + .mdui-dialog-content { padding-top: 0; } /* 提示框底部按钮 */ .mdui-dialog-actions { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px; text-align: right; } .mdui-dialog-actions .mdui-btn { min-width: 64px; margin-left: 8px; color: #E91E63; } .mdui-dialog-actions .mdui-btn:first-child { margin-left: 0; } /* 底部按钮滚随内容动 */ .mdui-dialog-content > .mdui-dialog-actions { margin: 0 -24px -24px -24px; padding-top: 32px; } /* 使提示框底部按钮竖排 */ .mdui-dialog-actions-stacked { padding: 8px 0 8px 0; } .mdui-dialog-actions-stacked .mdui-btn { width: 100%; height: 48px; margin: 0; line-height: 48px !important; text-align: right; border-radius: 0; } /** * ============================================================================= * ************ Dialog 强调色 ************ * ============================================================================= */ /** * ============================================================================= * ************ Dialog dark ************ * ============================================================================= */ .mdui-dialog-alert { max-width: 448px; } /** * ============================================================================= * ************ Dialog confirm ************ * ============================================================================= */ .mdui-dialog-confirm { max-width: 448px; } /** * ============================================================================= * ************ Dialog prompt ************ * ============================================================================= */ .mdui-dialog-prompt { max-width: 448px; } .mdui-dialog-prompt .mdui-textfield { padding-top: 0; } /** * ============================================================================= * ************ Toolbar 工具栏 ************ * ============================================================================= */ .mdui-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .mdui-toolbar > * { margin: 0 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mdui-toolbar[class*="mdui-color-"]:not(.mdui-color-transparent) .mdui-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .mdui-toolbar[class*="mdui-color-"]:not(.mdui-color-transparent) .mdui-btn:active { background-color: rgba(255, 255, 255, 0.165); } .mdui-toolbar > a { color: inherit; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdui-toolbar > .mdui-btn-icon { width: 48px; min-width: 48px; height: 48px; } @media (orientation: landscape) and (max-width: 959px) { .mdui-toolbar > .mdui-btn-icon { width: 40px; min-width: 40px; height: 40px; } } .mdui-toolbar > .mdui-btn-icon .mdui-icon { height: 24px; line-height: 24px; } .mdui-toolbar .mdui-icon { color: inherit; } .mdui-toolbar-spacer { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; } /* 手机 */ .mdui-toolbar { height: 56px; line-height: 56px; } .mdui-toolbar > .mdui-btn { margin: 0 4px; } .mdui-toolbar > .mdui-btn + .mdui-btn { margin-left: 0; } @media (min-width: 600px) { .mdui-appbar .mdui-toolbar { height: 64px; line-height: 64px; } .mdui-appbar .mdui-toolbar > .mdui-btn { margin: 0 8px; } .mdui-appbar .mdui-toolbar > .mdui-btn + .mdui-btn { margin-left: 0; } } @media (orientation: landscape) and (max-width: 959px) { .mdui-appbar .mdui-toolbar { height: 48px; line-height: 48px; } .mdui-appbar .mdui-toolbar > .mdui-btn { margin: 0 4px; } .mdui-appbar .mdui-toolbar > .mdui-btn + .mdui-btn { margin-left: 0; } } /** * ============================================================================= * ************ Icon 图标 ************ * ============================================================================= */ .mdui-icon, .mdui-icon::before { color: inherit; font-weight: normal; font-size: 24px; /* Preferred icon size */ font-style: normal; line-height: 1; direction: ltr; letter-spacing: normal; white-space: nowrap; text-transform: none; vertical-align: middle; word-wrap: normal; } .mdui-icon { display: inline-block; text-align: center; } .mdui-icon::before { display: block !important; width: 24px; height: 24px; } /** * ============================================================================= * ************ Material Icons ************ * ============================================================================= * * https://github.com/google/material-design-icons/ * v3.0.1 */ @font-face { font-weight: 400; font-family: 'Material Icons'; font-style: normal; src: local('Material Icons'), local('MaterialIcons-Regular'), url(../icons/material-icons/MaterialIcons-Regular.woff2) format('woff2'), url(../icons/material-icons/MaterialIcons-Regular.woff) format('woff'); } .material-icons { /* stylelint-disable-next-line */ font-family: 'Material Icons'; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } /** * ============================================================================= * ************ Typography 文章排版 ************ * ============================================================================= */ .mdui-typo { line-height: 1.8; word-wrap: break-word; /* a */ /* small */ /* blockquote */ /* mark */ /* h1 - h6 */ /* code */ /* pre code */ /* abbr */ /* ins */ /* u */ /* del */ /* hr */ /* pre */ /* kbd */ /* ul / ol */ /* img */ } .mdui-typo address, .mdui-typo caption, .mdui-typo cite, .mdui-typo code, .mdui-typo dfn, .mdui-typo th { font-weight: 400; font-style: normal; } .mdui-typo caption, .mdui-typo th { text-align: left; } .mdui-typo q::before, .mdui-typo q::after { content: ''; } .mdui-typo pre, .mdui-typo code, .mdui-typo kbd, .mdui-typo samp, .mdui-typo pre tt { font-family: Consolas, Courier, 'Courier New', monospace; } .mdui-typo figcaption { color: rgba(0, 0, 0, 0.54); font-size: 80%; } .mdui-typo [draggable], .mdui-typo [draggable="true"] { cursor: move; } .mdui-typo [draggable="false"] { cursor: inherit; } .mdui-typo p, .mdui-typo pre, .mdui-typo ul, .mdui-typo ol, .mdui-typo dl, .mdui-typo form, .mdui-typo hr, .mdui-typo figure, .mdui-typo table, .mdui-typo .mdui-table, .mdui-typo .mdui-table-fluid { margin: 0 0 1.2em 0; } .mdui-typo p:last-child, .mdui-typo pre:last-child, .mdui-typo ul:last-child, .mdui-typo ol:last-child, .mdui-typo dl:last-child, .mdui-typo form:last-child, .mdui-typo hr:last-child, .mdui-typo figure:last-child, .mdui-typo table:last-child, .mdui-typo .mdui-table:last-child, .mdui-typo .mdui-table-fluid:last-child { margin-bottom: 0; } .mdui-typo a { color: #FF4081; position: relative; display: inline-block; overflow: hidden; text-decoration: none; vertical-align: top; outline: none; } .mdui-typo a::before { position: absolute; top: auto; bottom: 1px; left: 0; width: 100%; height: 1px; background-color: #FF4081; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; content: ' '; } .mdui-typo a:hover::before, .mdui-typo a:focus::before { -webkit-transform: scaleX(1); transform: scaleX(1); } .mdui-typo small { font-size: 80%; } .mdui-typo blockquote { margin: 1em 3em 1em 2em; padding-left: 1em; font-weight: 400; border-left: 4px solid rgba(0, 0, 0, 0.12); } @media only screen and (max-width: 599px) { .mdui-typo blockquote { margin: 1em 0; } } .mdui-typo blockquote:last-child { margin-bottom: 0; } .mdui-typo blockquote footer { color: rgba(0, 0, 0, 0.54); font-size: 86%; } .mdui-typo mark { margin: 0 5px; padding: 2px; background: #fffdd1; border-bottom: 1px solid #ffedce; } .mdui-typo h1, .mdui-typo h2, .mdui-typo h3, .mdui-typo h4, .mdui-typo h5, .mdui-typo h6 { margin-top: 1.2em; margin-bottom: 0.6em; color: inherit; font-weight: 400; font-family: inherit; line-height: 1.35; } .mdui-typo h1:last-child, .mdui-typo h2:last-child, .mdui-typo h3:last-child, .mdui-typo h4:last-child, .mdui-typo h5:last-child, .mdui-typo h6:last-child { margin-bottom: 0; } .mdui-typo h1 small, .mdui-typo h2 small, .mdui-typo h3 small, .mdui-typo h4 small, .mdui-typo h5 small, .mdui-typo h6 small { color: rgba(0, 0, 0, 0.54); font-weight: 400; font-size: 65%; line-height: 1; } .mdui-typo h1 { font-size: 2em; } .mdui-typo h2 { font-size: 1.8em; } .mdui-typo h3 { font-size: 1.6em; } .mdui-typo h4 { font-size: 1.4em; } .mdui-typo h5 { font-size: 1.2em; } .mdui-typo h6 { font-size: 1.1em; } .mdui-typo code { padding: 2px 6px; color: #c7254e; background-color: #f7f7f9; border-radius: 2px; } .mdui-typo pre code { padding: 0; color: inherit; font-size: inherit; line-height: 1.7; background-color: transparent; border-radius: 0; } .mdui-typo abbr[title] { text-decoration: none; border-bottom: 1px dotted; cursor: help; } .mdui-typo ins { text-decoration: none; border-bottom: 1px solid ; } .mdui-typo u { text-decoration: none; border-bottom: 1px solid; } .mdui-typo del { text-decoration: line-through; } .mdui-typo hr { height: 10px; margin-bottom: 0.8em; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .mdui-typo pre { padding: 12px 16px; overflow-x: auto; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 2px; -webkit-overflow-scrolling: touch; } .mdui-typo kbd { padding: 2px 6px; color: #fff; font-size: 90%; background-color: #333; border-radius: 2px; } .mdui-typo ul { padding-left: 2em; list-style: disc; } .mdui-typo ol { padding-left: 2em; list-style: decimal; } .mdui-typo li ul, .mdui-typo li ol { margin: 0.8em 0; } .mdui-typo li ul { list-style: circle; } .mdui-typo img { max-width: 100%; } .mdui-typo figure { text-align: center; } .mdui-typo figure figcaption { margin-top: 8px; color: #999; font-size: 14px; } .mdui-typo figure figcaption:empty::before { z-index: -1; color: #bfbfbf; cursor: text; content: attr(placeholder); } /** * ============================================================================= * ************ Typo 强调色 ************ * ============================================================================= */ /** * ============================================================================= * ************ Typo dark ************ * ============================================================================= */ .mdui_editor-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 16px; } .mdui_editor-toolbar::after { display: table; clear: both; content: ''; } .mdui_editor-toolbar-menu { width: 28px; min-width: 28px; height: 28px; padding: 0; color: #212121; line-height: 28px; border-radius: 3px; -webkit-box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px transparent; opacity: 0.6; } .mdui_editor-toolbar-menu i { font-size: 21px; } .mdui_editor-toolbar-menu:hover { background-color: transparent; opacity: 1; } .mdui_editor-toolbar-menu + .mdui_editor-toolbar-menu { margin-left: 2px; } .mdui_editor-toolbar-menu-active { background-color: rgba(0, 0, 0, 0.12) !important; opacity: 1; } .mdui_editor-toolbar-menu-image + input[type="file"] { display: none; } .mdui_editor-toolbar-divider { display: inline-block; float: left; width: 1px; width: 0.8px; height: 28px; margin: 0 6px; background-color: #e5e5e5; } .mdui_editor-content { -webkit-box-sizing: border-box; box-sizing: border-box; /* stylelint-disable-next-line */ height: calc(100% - 60px); padding: 16px; overflow-y: auto; color: rgba(0, 0, 0, 0.87); font-size: 14px; line-height: 22px; white-space: pre-wrap; word-wrap: break-word; outline: none; -webkit-overflow-scrolling: touch; } .mdui_editor-content-empty::before { position: absolute; color: rgba(0, 0, 0, 0.42); cursor: text; content: attr(placeholder); } .mdui_editor-upload-progress-dialog { max-width: 448px; } /*# sourceMappingURL=editor.css.map */