From aa2a1c78648945ec59da6308c3bfdb83f718c086 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 28 Jul 2021 14:30:31 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tinymce/skins/content/dark/content.css | 12 + .../tinymce/skins/content/default/content.css | 11 + .../skins/content/document/content.css | 11 + .../tinymce/skins/content/writer/content.css | 11 + .../tinymce/skins/ui/oxide-dark/content.css | 142 +++- .../skins/ui/oxide-dark/content.inline.css | 142 +++- .../skins/ui/oxide-dark/content.mobile.css | 5 + .../tinymce/skins/ui/oxide-dark/skin.css | 663 ++++++++++++++++-- .../skins/ui/oxide-dark/skin.mobile.css | 135 +++- .../skins/ui/oxide-dark/skin.shadowdom.css | 7 +- .../public/tinymce/skins/ui/oxide/content.css | 144 +++- .../tinymce/skins/ui/oxide/content.inline.css | 142 +++- .../tinymce/skins/ui/oxide/content.mobile.css | 5 + .../public/tinymce/skins/ui/oxide/skin.css | 663 ++++++++++++++++-- .../tinymce/skins/ui/oxide/skin.mobile.css | 135 +++- .../tinymce/skins/ui/oxide/skin.shadowdom.css | 7 +- .../src/components/canvas/styles/animate.css | 50 +- .../src/components/canvas/styles/reset.css | 26 +- frontend/src/styles/deicon/demo.css | 50 +- frontend/src/styles/deicon/iconfont.css | 4 +- frontend/src/styles/index.scss | 105 ++- frontend/src/styles/sidebar.scss | 20 +- frontend/src/styles/topbar.scss | 16 +- frontend/src/styles/variables.scss | 16 +- 24 files changed, 2284 insertions(+), 238 deletions(-) diff --git a/frontend/public/tinymce/skins/content/dark/content.css b/frontend/public/tinymce/skins/content/dark/content.css index bae7923fb0..3919f03e75 100644 --- a/frontend/public/tinymce/skins/content/dark/content.css +++ b/frontend/public/tinymce/skins/content/dark/content.css @@ -11,60 +11,72 @@ body { line-height: 1.4; margin: 1rem; } + a { color: #4099ff; } + table { border-collapse: collapse; } + /* Apply a default padding if legacy cellpadding attribute is missing */ table:not([cellpadding]) th, table:not([cellpadding]) td { padding: 0.4rem; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-width"]) th, table[border]:not([border="0"]):not([style*="border-width"]) td { border-width: 1px; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-style"]) th, table[border]:not([border="0"]):not([style*="border-style"]) td { border-style: solid; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-color"]) th, table[border]:not([border="0"]):not([style*="border-color"]) td { border-color: #6d737b; } + figure { display: table; margin: 1rem auto; } + figure figcaption { color: #8a8f97; display: block; margin-top: 0.25rem; text-align: center; } + hr { border-color: #6d737b; border-style: solid; border-width: 1px 0 0 0; } + code { background-color: #6d737b; border-radius: 3px; padding: 0.1rem 0.2rem; } + .mce-content-body:not([dir=rtl]) blockquote { border-left: 2px solid #6d737b; margin-left: 1.5rem; padding-left: 1rem; } + .mce-content-body[dir=rtl] blockquote { border-right: 2px solid #6d737b; margin-right: 1.5rem; diff --git a/frontend/public/tinymce/skins/content/default/content.css b/frontend/public/tinymce/skins/content/default/content.css index dd6a5c1ca9..46367b55c9 100644 --- a/frontend/public/tinymce/skins/content/default/content.css +++ b/frontend/public/tinymce/skins/content/default/content.css @@ -9,57 +9,68 @@ body { line-height: 1.4; margin: 1rem; } + table { border-collapse: collapse; } + /* Apply a default padding if legacy cellpadding attribute is missing */ table:not([cellpadding]) th, table:not([cellpadding]) td { padding: 0.4rem; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-width"]) th, table[border]:not([border="0"]):not([style*="border-width"]) td { border-width: 1px; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-style"]) th, table[border]:not([border="0"]):not([style*="border-style"]) td { border-style: solid; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-color"]) th, table[border]:not([border="0"]):not([style*="border-color"]) td { border-color: #ccc; } + figure { display: table; margin: 1rem auto; } + figure figcaption { color: #999; display: block; margin-top: 0.25rem; text-align: center; } + hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0 0; } + code { background-color: #e8e8e8; border-radius: 3px; padding: 0.1rem 0.2rem; } + .mce-content-body:not([dir=rtl]) blockquote { border-left: 2px solid #ccc; margin-left: 1.5rem; padding-left: 1rem; } + .mce-content-body[dir=rtl] blockquote { border-right: 2px solid #ccc; margin-right: 1.5rem; diff --git a/frontend/public/tinymce/skins/content/document/content.css b/frontend/public/tinymce/skins/content/document/content.css index 75f637a131..abd6fc2575 100644 --- a/frontend/public/tinymce/skins/content/document/content.css +++ b/frontend/public/tinymce/skins/content/document/content.css @@ -10,9 +10,11 @@ min-height: 100%; } } + body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } + @media screen { body { background-color: #fff; @@ -24,47 +26,56 @@ body { padding: 4rem 6rem 6rem 6rem; } } + table { border-collapse: collapse; } + /* Apply a default padding if legacy cellpadding attribute is missing */ table:not([cellpadding]) th, table:not([cellpadding]) td { padding: 0.4rem; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-width"]) th, table[border]:not([border="0"]):not([style*="border-width"]) td { border-width: 1px; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-style"]) th, table[border]:not([border="0"]):not([style*="border-style"]) td { border-style: solid; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-color"]) th, table[border]:not([border="0"]):not([style*="border-color"]) td { border-color: #ccc; } + figure figcaption { color: #999; margin-top: 0.25rem; text-align: center; } + hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0 0; } + .mce-content-body:not([dir=rtl]) blockquote { border-left: 2px solid #ccc; margin-left: 1.5rem; padding-left: 1rem; } + .mce-content-body[dir=rtl] blockquote { border-right: 2px solid #ccc; margin-right: 1.5rem; diff --git a/frontend/public/tinymce/skins/content/writer/content.css b/frontend/public/tinymce/skins/content/writer/content.css index ceee359938..df0b3959d3 100644 --- a/frontend/public/tinymce/skins/content/writer/content.css +++ b/frontend/public/tinymce/skins/content/writer/content.css @@ -10,57 +10,68 @@ body { margin: 1rem auto; max-width: 900px; } + table { border-collapse: collapse; } + /* Apply a default padding if legacy cellpadding attribute is missing */ table:not([cellpadding]) th, table:not([cellpadding]) td { padding: 0.4rem; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-width"]) th, table[border]:not([border="0"]):not([style*="border-width"]) td { border-width: 1px; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-style"]) th, table[border]:not([border="0"]):not([style*="border-style"]) td { border-style: solid; } + /* Set default table styles if a table has a positive border attribute and no inline css */ table[border]:not([border="0"]):not([style*="border-color"]) th, table[border]:not([border="0"]):not([style*="border-color"]) td { border-color: #ccc; } + figure { display: table; margin: 1rem auto; } + figure figcaption { color: #999; display: block; margin-top: 0.25rem; text-align: center; } + hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0 0; } + code { background-color: #e8e8e8; border-radius: 3px; padding: 0.1rem 0.2rem; } + .mce-content-body:not([dir=rtl]) blockquote { border-left: 2px solid #ccc; margin-left: 1.5rem; padding-left: 1rem; } + .mce-content-body[dir=rtl] blockquote { border-right: 2px solid #ccc; margin-right: 1.5rem; diff --git a/frontend/public/tinymce/skins/ui/oxide-dark/content.css b/frontend/public/tinymce/skins/ui/oxide-dark/content.css index a6871c8cd4..bfddf3af7b 100644 --- a/frontend/public/tinymce/skins/ui/oxide-dark/content.css +++ b/frontend/public/tinymce/skins/ui/oxide-dark/content.css @@ -15,22 +15,27 @@ -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; - user-select: all; + user-select: all; width: 8px !important; } + .mce-content-body .mce-item-anchor[data-mce-selected] { outline-offset: 1px; } + .tox-comments-visible .tox-comment { background-color: #fff0b7; } + .tox-comments-visible .tox-comment--active { background-color: #ffe168; } + .tox-checklist > li:not(.tox-checklist--hidden) { list-style: none; margin: 0.25em 0; } + .tox-checklist > li:not(.tox-checklist--hidden)::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%236d737b%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); cursor: pointer; @@ -40,13 +45,16 @@ position: absolute; width: 1em; } + .tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); } + [dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before { margin-left: 0; margin-right: -1.5em; } + /* stylelint-disable */ /* http://prismjs.com/ */ /** @@ -73,6 +81,7 @@ pre[class*="language-"] { -ms-hyphens: none; hyphens: none; } + /* Code blocks */ pre[class*="language-"] { padding: 1em; @@ -80,28 +89,34 @@ pre[class*="language-"] { overflow: auto; border-radius: 0.3em; } + :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #282a36; } + /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } + .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6272a4; } + .token.punctuation { color: #f8f8f2; } + .namespace { opacity: 0.7; } + .token.property, .token.tag, .token.constant, @@ -109,10 +124,12 @@ pre[class*="language-"] { .token.deleted { color: #ff79c6; } + .token.boolean, .token.number { color: #bd93f9; } + .token.selector, .token.attr-name, .token.string, @@ -121,6 +138,7 @@ pre[class*="language-"] { .token.inserted { color: #50fa7b; } + .token.operator, .token.entity, .token.url, @@ -129,42 +147,52 @@ pre[class*="language-"] { .token.variable { color: #f8f8f2; } + .token.atrule, .token.attr-value, .token.function, .token.class-name { color: #f1fa8c; } + .token.keyword { color: #8be9fd; } + .token.regex, .token.important { color: #ffb86c; } + .token.important, .token.bold { font-weight: bold; } + .token.italic { font-style: italic; } + .token.entity { cursor: help; } + /* stylelint-enable */ .mce-content-body { overflow-wrap: break-word; word-wrap: break-word; } + .mce-content-body .mce-visual-caret { background-color: black; background-color: currentColor; position: absolute; } + .mce-content-body .mce-visual-caret-hidden { display: none; } + .mce-content-body *[data-mce-caret] { left: -1000px; margin: 0; @@ -173,31 +201,39 @@ pre[class*="language-"] { right: auto; top: 0; } + .mce-content-body .mce-offscreen-selection { left: -2000000px; max-width: 1000000px; position: absolute; } + .mce-content-body *[contentEditable=false] { cursor: default; } + .mce-content-body *[contentEditable=true] { cursor: text; } + .tox-cursor-format-painter { cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default; } + .mce-content-body figure.align-left { float: left; } + .mce-content-body figure.align-right { float: right; } + .mce-content-body figure.image.align-center { display: table; margin-left: auto; margin-right: auto; } + .mce-preview-object { border: 1px solid gray; display: inline-block; @@ -205,6 +241,7 @@ pre[class*="language-"] { margin: 0 2px 0 2px; position: relative; } + .mce-preview-object .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -213,13 +250,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-preview-object[data-mce-selected="2"] .mce-shim { display: none; } + .mce-object { background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center; border: 1px dashed #aaa; } + .mce-pagebreak { border: 1px dashed #aaa; cursor: default; @@ -229,11 +269,13 @@ pre[class*="language-"] { page-break-before: always; width: 100%; } + @media print { .mce-pagebreak { border: 0; } } + .tiny-pageembed .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -242,13 +284,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .tiny-pageembed[data-mce-selected="2"] .mce-shim { display: none; } + .tiny-pageembed { display: inline-block; position: relative; } + .tiny-pageembed--21by9, .tiny-pageembed--16by9, .tiny-pageembed--4by3, @@ -259,18 +304,23 @@ pre[class*="language-"] { position: relative; width: 100%; } + .tiny-pageembed--21by9 { padding-top: 42.857143%; } + .tiny-pageembed--16by9 { padding-top: 56.25%; } + .tiny-pageembed--4by3 { padding-top: 75%; } + .tiny-pageembed--1by1 { padding-top: 100%; } + .tiny-pageembed--21by9 iframe, .tiny-pageembed--16by9 iframe, .tiny-pageembed--4by3 iframe, @@ -282,20 +332,25 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-content-body[data-mce-placeholder] { position: relative; } + .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { color: rgba(34, 47, 62, 0.7); content: attr(data-mce-placeholder); position: absolute; } + .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before { left: 1px; } + .mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before { right: 1px; } + .mce-content-body div.mce-resizehandle { background-color: #4099ff; border-color: #4099ff; @@ -307,24 +362,31 @@ pre[class*="language-"] { width: 10px; z-index: 10000; } + .mce-content-body div.mce-resizehandle:hover { background-color: #4099ff; } + .mce-content-body div.mce-resizehandle:nth-of-type(1) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(2) { cursor: nesw-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(3) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(4) { cursor: nesw-resize; } + .mce-content-body .mce-resize-backdrop { z-index: 10000; } + .mce-content-body .mce-clonedresizable { cursor: default; opacity: 0.5; @@ -332,10 +394,12 @@ pre[class*="language-"] { position: absolute; z-index: 10001; } + .mce-content-body .mce-clonedresizable.mce-resizetable-columns th, .mce-content-body .mce-clonedresizable.mce-resizetable-columns td { border: 0; } + .mce-content-body .mce-resize-helper { background: #555; background: rgba(0, 0, 0, 0.75); @@ -352,9 +416,11 @@ pre[class*="language-"] { white-space: nowrap; z-index: 10002; } + .tox-rtc-user-selection { position: relative; } + .tox-rtc-user-cursor { bottom: 0; cursor: default; @@ -362,6 +428,7 @@ pre[class*="language-"] { top: 0; width: 2px; } + .tox-rtc-user-cursor::before { background-color: inherit; border-radius: 50%; @@ -373,6 +440,7 @@ pre[class*="language-"] { top: -3px; width: 8px; } + .tox-rtc-user-cursor:hover::after { background-color: inherit; border-radius: 100px; @@ -391,52 +459,66 @@ pre[class*="language-"] { white-space: nowrap; z-index: 1000; } + .tox-rtc-user-selection--1 .tox-rtc-user-cursor { background-color: #2dc26b; } + .tox-rtc-user-selection--2 .tox-rtc-user-cursor { background-color: #e03e2d; } + .tox-rtc-user-selection--3 .tox-rtc-user-cursor { background-color: #f1c40f; } + .tox-rtc-user-selection--4 .tox-rtc-user-cursor { background-color: #3598db; } + .tox-rtc-user-selection--5 .tox-rtc-user-cursor { background-color: #b96ad9; } + .tox-rtc-user-selection--6 .tox-rtc-user-cursor { background-color: #e67e23; } + .tox-rtc-user-selection--7 .tox-rtc-user-cursor { background-color: #aaa69d; } + .tox-rtc-user-selection--8 .tox-rtc-user-cursor { background-color: #f368e0; } + .tox-rtc-remote-image { background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center; border: 1px solid #ccc; min-height: 240px; min-width: 320px; } + .mce-match-marker { background: #aaa; color: #fff; } + .mce-match-marker-selected { background: #39f; color: #fff; } + .mce-match-marker-selected::-moz-selection { background: #39f; color: #fff; } + .mce-match-marker-selected::selection { background: #39f; color: #fff; } + .mce-content-body img[data-mce-selected], .mce-content-body video[data-mce-selected], .mce-content-body audio[data-mce-selected], @@ -445,51 +527,63 @@ pre[class*="language-"] { .mce-content-body table[data-mce-selected] { outline: 3px solid #4099ff; } + .mce-content-body hr[data-mce-selected] { outline: 3px solid #4099ff; outline-offset: 1px; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:focus { outline: 3px solid #4099ff; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:hover { outline: 3px solid #4099ff; } + .mce-content-body *[contentEditable=false][data-mce-selected] { cursor: not-allowed; outline: 3px solid #4099ff; } + .mce-content-body.mce-content-readonly *[contentEditable=true]:focus, .mce-content-body.mce-content-readonly *[contentEditable=true]:hover { outline: none; } + .mce-content-body *[data-mce-selected="inline-boundary"] { background-color: #4099ff; } + .mce-content-body .mce-edit-focus { outline: 3px solid #4099ff; } + .mce-content-body td[data-mce-selected], .mce-content-body th[data-mce-selected] { position: relative; } + .mce-content-body td[data-mce-selected]::-moz-selection, .mce-content-body th[data-mce-selected]::-moz-selection { background: none; } + .mce-content-body td[data-mce-selected]::selection, .mce-content-body th[data-mce-selected]::selection { background: none; } + .mce-content-body td[data-mce-selected] *, .mce-content-body th[data-mce-selected] * { outline: none; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { background-color: rgba(180, 215, 255, 0.7); @@ -502,18 +596,22 @@ pre[class*="language-"] { right: -1px; top: -1px; } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { border-color: rgba(0, 84, 180, 0.7); } } + .mce-content-body img::-moz-selection { background: none; } + .mce-content-body img::selection { background: none; } + .ephox-snooker-resizer-bar { background-color: #4099ff; opacity: 0; @@ -522,15 +620,19 @@ pre[class*="language-"] { -ms-user-select: none; user-select: none; } + .ephox-snooker-resizer-cols { cursor: col-resize; } + .ephox-snooker-resizer-rows { cursor: row-resize; } + .ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging { opacity: 1; } + .mce-spellchecker-word { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -539,6 +641,7 @@ pre[class*="language-"] { cursor: default; height: 2rem; } + .mce-spellchecker-grammar { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -546,15 +649,19 @@ pre[class*="language-"] { background-size: auto 6px; cursor: default; } + .mce-toc { border: 1px solid gray; } + .mce-toc h2 { margin: 4px; } + .mce-toc li { list-style-type: none; } + table[style*="border-width: 0px"], .mce-item-table:not([border]), .mce-item-table[border="0"], @@ -569,6 +676,7 @@ table[style*="border-width: 0px"] caption, .mce-item-table[border="0"] caption { border: 1px dashed #bbb; } + .mce-visualblocks p, .mce-visualblocks h1, .mce-visualblocks h2, @@ -594,66 +702,87 @@ table[style*="border-width: 0px"] caption, margin-left: 3px; padding-top: 10px; } + .mce-visualblocks p { background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7); } + .mce-visualblocks h1 { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==); } + .mce-visualblocks h2 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==); } + .mce-visualblocks h3 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7); } + .mce-visualblocks h4 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==); } + .mce-visualblocks h5 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==); } + .mce-visualblocks h6 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==); } + .mce-visualblocks div:not([data-mce-bogus]) { background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7); } + .mce-visualblocks section { background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=); } + .mce-visualblocks article { background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7); } + .mce-visualblocks blockquote { background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7); } + .mce-visualblocks address { background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=); } + .mce-visualblocks pre { background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==); } + .mce-visualblocks figure { background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7); } + .mce-visualblocks figcaption { border: 1px dashed #bbb; } + .mce-visualblocks hgroup { background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7); } + .mce-visualblocks aside { background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=); } + .mce-visualblocks ul { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==); } + .mce-visualblocks ol { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==); } + .mce-visualblocks dl { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==); } + .mce-visualblocks:not([dir=rtl]) p, .mce-visualblocks:not([dir=rtl]) h1, .mce-visualblocks:not([dir=rtl]) h2, @@ -676,6 +805,7 @@ table[style*="border-width: 0px"] caption, .mce-visualblocks:not([dir=rtl]) dl { margin-left: 3px; } + .mce-visualblocks[dir=rtl] p, .mce-visualblocks[dir=rtl] h1, .mce-visualblocks[dir=rtl] h2, @@ -699,16 +829,20 @@ table[style*="border-width: 0px"] caption, background-position-x: right; margin-right: 3px; } + .mce-nbsp, .mce-shy { background: #aaa; } + .mce-shy::after { content: '-'; } + body { font-family: sans-serif; } + table { border-collapse: collapse; } diff --git a/frontend/public/tinymce/skins/ui/oxide-dark/content.inline.css b/frontend/public/tinymce/skins/ui/oxide-dark/content.inline.css index df6ed08b58..dcffbcae42 100644 --- a/frontend/public/tinymce/skins/ui/oxide-dark/content.inline.css +++ b/frontend/public/tinymce/skins/ui/oxide-dark/content.inline.css @@ -15,22 +15,27 @@ -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; - user-select: all; + user-select: all; width: 8px !important; } + .mce-content-body .mce-item-anchor[data-mce-selected] { outline-offset: 1px; } + .tox-comments-visible .tox-comment { background-color: #fff0b7; } + .tox-comments-visible .tox-comment--active { background-color: #ffe168; } + .tox-checklist > li:not(.tox-checklist--hidden) { list-style: none; margin: 0.25em 0; } + .tox-checklist > li:not(.tox-checklist--hidden)::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); cursor: pointer; @@ -40,13 +45,16 @@ position: absolute; width: 1em; } + .tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); } + [dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before { margin-left: 0; margin-right: -1.5em; } + /* stylelint-disable */ /* http://prismjs.com/ */ /** @@ -73,6 +81,7 @@ pre[class*="language-"] { -ms-hyphens: none; hyphens: none; } + pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, @@ -80,6 +89,7 @@ code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } + pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, @@ -87,40 +97,48 @@ code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } + @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } + /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; } + :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } + /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } + .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } + .token.punctuation { color: #999; } + .namespace { opacity: 0.7; } + .token.property, .token.tag, .token.boolean, @@ -130,6 +148,7 @@ pre[class*="language-"] { .token.deleted { color: #905; } + .token.selector, .token.attr-name, .token.string, @@ -138,6 +157,7 @@ pre[class*="language-"] { .token.inserted { color: #690; } + .token.operator, .token.entity, .token.url, @@ -146,43 +166,53 @@ pre[class*="language-"] { color: #9a6e3a; background: hsla(0, 0%, 100%, 0.5); } + .token.atrule, .token.attr-value, .token.keyword { color: #07a; } + .token.function, .token.class-name { color: #DD4A68; } + .token.regex, .token.important, .token.variable { color: #e90; } + .token.important, .token.bold { font-weight: bold; } + .token.italic { font-style: italic; } + .token.entity { cursor: help; } + /* stylelint-enable */ .mce-content-body { overflow-wrap: break-word; word-wrap: break-word; } + .mce-content-body .mce-visual-caret { background-color: black; background-color: currentColor; position: absolute; } + .mce-content-body .mce-visual-caret-hidden { display: none; } + .mce-content-body *[data-mce-caret] { left: -1000px; margin: 0; @@ -191,31 +221,39 @@ pre[class*="language-"] { right: auto; top: 0; } + .mce-content-body .mce-offscreen-selection { left: -2000000px; max-width: 1000000px; position: absolute; } + .mce-content-body *[contentEditable=false] { cursor: default; } + .mce-content-body *[contentEditable=true] { cursor: text; } + .tox-cursor-format-painter { cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default; } + .mce-content-body figure.align-left { float: left; } + .mce-content-body figure.align-right { float: right; } + .mce-content-body figure.image.align-center { display: table; margin-left: auto; margin-right: auto; } + .mce-preview-object { border: 1px solid gray; display: inline-block; @@ -223,6 +261,7 @@ pre[class*="language-"] { margin: 0 2px 0 2px; position: relative; } + .mce-preview-object .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -231,13 +270,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-preview-object[data-mce-selected="2"] .mce-shim { display: none; } + .mce-object { background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center; border: 1px dashed #aaa; } + .mce-pagebreak { border: 1px dashed #aaa; cursor: default; @@ -247,11 +289,13 @@ pre[class*="language-"] { page-break-before: always; width: 100%; } + @media print { .mce-pagebreak { border: 0; } } + .tiny-pageembed .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -260,13 +304,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .tiny-pageembed[data-mce-selected="2"] .mce-shim { display: none; } + .tiny-pageembed { display: inline-block; position: relative; } + .tiny-pageembed--21by9, .tiny-pageembed--16by9, .tiny-pageembed--4by3, @@ -277,18 +324,23 @@ pre[class*="language-"] { position: relative; width: 100%; } + .tiny-pageembed--21by9 { padding-top: 42.857143%; } + .tiny-pageembed--16by9 { padding-top: 56.25%; } + .tiny-pageembed--4by3 { padding-top: 75%; } + .tiny-pageembed--1by1 { padding-top: 100%; } + .tiny-pageembed--21by9 iframe, .tiny-pageembed--16by9 iframe, .tiny-pageembed--4by3 iframe, @@ -300,20 +352,25 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-content-body[data-mce-placeholder] { position: relative; } + .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { color: rgba(34, 47, 62, 0.7); content: attr(data-mce-placeholder); position: absolute; } + .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before { left: 1px; } + .mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before { right: 1px; } + .mce-content-body div.mce-resizehandle { background-color: #4099ff; border-color: #4099ff; @@ -325,24 +382,31 @@ pre[class*="language-"] { width: 10px; z-index: 10000; } + .mce-content-body div.mce-resizehandle:hover { background-color: #4099ff; } + .mce-content-body div.mce-resizehandle:nth-of-type(1) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(2) { cursor: nesw-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(3) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(4) { cursor: nesw-resize; } + .mce-content-body .mce-resize-backdrop { z-index: 10000; } + .mce-content-body .mce-clonedresizable { cursor: default; opacity: 0.5; @@ -350,10 +414,12 @@ pre[class*="language-"] { position: absolute; z-index: 10001; } + .mce-content-body .mce-clonedresizable.mce-resizetable-columns th, .mce-content-body .mce-clonedresizable.mce-resizetable-columns td { border: 0; } + .mce-content-body .mce-resize-helper { background: #555; background: rgba(0, 0, 0, 0.75); @@ -370,9 +436,11 @@ pre[class*="language-"] { white-space: nowrap; z-index: 10002; } + .tox-rtc-user-selection { position: relative; } + .tox-rtc-user-cursor { bottom: 0; cursor: default; @@ -380,6 +448,7 @@ pre[class*="language-"] { top: 0; width: 2px; } + .tox-rtc-user-cursor::before { background-color: inherit; border-radius: 50%; @@ -391,6 +460,7 @@ pre[class*="language-"] { top: -3px; width: 8px; } + .tox-rtc-user-cursor:hover::after { background-color: inherit; border-radius: 100px; @@ -409,52 +479,66 @@ pre[class*="language-"] { white-space: nowrap; z-index: 1000; } + .tox-rtc-user-selection--1 .tox-rtc-user-cursor { background-color: #2dc26b; } + .tox-rtc-user-selection--2 .tox-rtc-user-cursor { background-color: #e03e2d; } + .tox-rtc-user-selection--3 .tox-rtc-user-cursor { background-color: #f1c40f; } + .tox-rtc-user-selection--4 .tox-rtc-user-cursor { background-color: #3598db; } + .tox-rtc-user-selection--5 .tox-rtc-user-cursor { background-color: #b96ad9; } + .tox-rtc-user-selection--6 .tox-rtc-user-cursor { background-color: #e67e23; } + .tox-rtc-user-selection--7 .tox-rtc-user-cursor { background-color: #aaa69d; } + .tox-rtc-user-selection--8 .tox-rtc-user-cursor { background-color: #f368e0; } + .tox-rtc-remote-image { background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center; border: 1px solid #ccc; min-height: 240px; min-width: 320px; } + .mce-match-marker { background: #aaa; color: #fff; } + .mce-match-marker-selected { background: #39f; color: #fff; } + .mce-match-marker-selected::-moz-selection { background: #39f; color: #fff; } + .mce-match-marker-selected::selection { background: #39f; color: #fff; } + .mce-content-body img[data-mce-selected], .mce-content-body video[data-mce-selected], .mce-content-body audio[data-mce-selected], @@ -463,51 +547,63 @@ pre[class*="language-"] { .mce-content-body table[data-mce-selected] { outline: 3px solid #b4d7ff; } + .mce-content-body hr[data-mce-selected] { outline: 3px solid #b4d7ff; outline-offset: 1px; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:focus { outline: 3px solid #b4d7ff; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:hover { outline: 3px solid #b4d7ff; } + .mce-content-body *[contentEditable=false][data-mce-selected] { cursor: not-allowed; outline: 3px solid #b4d7ff; } + .mce-content-body.mce-content-readonly *[contentEditable=true]:focus, .mce-content-body.mce-content-readonly *[contentEditable=true]:hover { outline: none; } + .mce-content-body *[data-mce-selected="inline-boundary"] { background-color: #b4d7ff; } + .mce-content-body .mce-edit-focus { outline: 3px solid #b4d7ff; } + .mce-content-body td[data-mce-selected], .mce-content-body th[data-mce-selected] { position: relative; } + .mce-content-body td[data-mce-selected]::-moz-selection, .mce-content-body th[data-mce-selected]::-moz-selection { background: none; } + .mce-content-body td[data-mce-selected]::selection, .mce-content-body th[data-mce-selected]::selection { background: none; } + .mce-content-body td[data-mce-selected] *, .mce-content-body th[data-mce-selected] * { outline: none; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { background-color: rgba(180, 215, 255, 0.7); @@ -520,18 +616,22 @@ pre[class*="language-"] { right: -1px; top: -1px; } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { border-color: rgba(0, 84, 180, 0.7); } } + .mce-content-body img::-moz-selection { background: none; } + .mce-content-body img::selection { background: none; } + .ephox-snooker-resizer-bar { background-color: #b4d7ff; opacity: 0; @@ -540,15 +640,19 @@ pre[class*="language-"] { -ms-user-select: none; user-select: none; } + .ephox-snooker-resizer-cols { cursor: col-resize; } + .ephox-snooker-resizer-rows { cursor: row-resize; } + .ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging { opacity: 1; } + .mce-spellchecker-word { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -557,6 +661,7 @@ pre[class*="language-"] { cursor: default; height: 2rem; } + .mce-spellchecker-grammar { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -564,15 +669,19 @@ pre[class*="language-"] { background-size: auto 6px; cursor: default; } + .mce-toc { border: 1px solid gray; } + .mce-toc h2 { margin: 4px; } + .mce-toc li { list-style-type: none; } + table[style*="border-width: 0px"], .mce-item-table:not([border]), .mce-item-table[border="0"], @@ -587,6 +696,7 @@ table[style*="border-width: 0px"] caption, .mce-item-table[border="0"] caption { border: 1px dashed #bbb; } + .mce-visualblocks p, .mce-visualblocks h1, .mce-visualblocks h2, @@ -612,66 +722,87 @@ table[style*="border-width: 0px"] caption, margin-left: 3px; padding-top: 10px; } + .mce-visualblocks p { background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7); } + .mce-visualblocks h1 { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==); } + .mce-visualblocks h2 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==); } + .mce-visualblocks h3 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7); } + .mce-visualblocks h4 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==); } + .mce-visualblocks h5 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==); } + .mce-visualblocks h6 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==); } + .mce-visualblocks div:not([data-mce-bogus]) { background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7); } + .mce-visualblocks section { background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=); } + .mce-visualblocks article { background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7); } + .mce-visualblocks blockquote { background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7); } + .mce-visualblocks address { background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=); } + .mce-visualblocks pre { background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==); } + .mce-visualblocks figure { background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7); } + .mce-visualblocks figcaption { border: 1px dashed #bbb; } + .mce-visualblocks hgroup { background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7); } + .mce-visualblocks aside { background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=); } + .mce-visualblocks ul { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==); } + .mce-visualblocks ol { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==); } + .mce-visualblocks dl { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==); } + .mce-visualblocks:not([dir=rtl]) p, .mce-visualblocks:not([dir=rtl]) h1, .mce-visualblocks:not([dir=rtl]) h2, @@ -694,6 +825,7 @@ table[style*="border-width: 0px"] caption, .mce-visualblocks:not([dir=rtl]) dl { margin-left: 3px; } + .mce-visualblocks[dir=rtl] p, .mce-visualblocks[dir=rtl] h1, .mce-visualblocks[dir=rtl] h2, @@ -717,10 +849,12 @@ table[style*="border-width: 0px"] caption, background-position-x: right; margin-right: 3px; } + .mce-nbsp, .mce-shy { background: #aaa; } + .mce-shy::after { content: '-'; } diff --git a/frontend/public/tinymce/skins/ui/oxide-dark/content.mobile.css b/frontend/public/tinymce/skins/ui/oxide-dark/content.mobile.css index 4bdb8babcb..68f5f0ffe1 100644 --- a/frontend/public/tinymce/skins/ui/oxide-dark/content.mobile.css +++ b/frontend/public/tinymce/skins/ui/oxide-dark/content.mobile.css @@ -11,19 +11,24 @@ opacity: 0.5; position: absolute; } + body { -webkit-text-size-adjust: none; } + body img { /* this is related to the content margin */ max-width: 96vw; } + body table img { max-width: 95%; } + body { font-family: sans-serif; } + table { border-collapse: collapse; } diff --git a/frontend/public/tinymce/skins/ui/oxide-dark/skin.css b/frontend/public/tinymce/skins/ui/oxide-dark/skin.css index 769655f357..eca3f7fb0e 100644 --- a/frontend/public/tinymce/skins/ui/oxide-dark/skin.css +++ b/frontend/public/tinymce/skins/ui/oxide-dark/skin.css @@ -21,6 +21,7 @@ vertical-align: initial; white-space: normal; } + .tox *:not(svg):not(rect) { box-sizing: inherit; color: inherit; @@ -39,6 +40,7 @@ vertical-align: inherit; white-space: inherit; } + .tox *:not(svg):not(rect) { /* stylelint-disable-line no-duplicate-selectors */ background: transparent; @@ -53,14 +55,17 @@ position: static; width: auto; } + .tox:not([dir=rtl]) { direction: ltr; text-align: left; } + .tox[dir=rtl] { direction: rtl; text-align: right; } + .tox-tinymce { border: 1px solid #000000; border-radius: 0; @@ -73,32 +78,39 @@ position: relative; visibility: inherit !important; } + .tox-tinymce-inline { border: none; box-shadow: none; } + .tox-tinymce-inline .tox-editor-header { background-color: transparent; border: 1px solid #000000; border-radius: 0; box-shadow: none; } + .tox-tinymce-aux { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; z-index: 1300; } + .tox-tinymce *:focus, .tox-tinymce-aux *:focus { outline: none; } + button::-moz-focus-inner { border: 0; } + .tox .accessibility-issue__header { align-items: center; display: flex; margin-bottom: 4px; } + .tox .accessibility-issue__description { align-items: stretch; border: 1px solid #000000; @@ -106,127 +118,163 @@ button::-moz-focus-inner { display: flex; justify-content: space-between; } + .tox .accessibility-issue__description > div { padding-bottom: 4px; } + .tox .accessibility-issue__description > div > div { align-items: center; display: flex; margin-bottom: 4px; } + .tox .accessibility-issue__description > *:last-child:not(:only-child) { border-color: #000000; border-style: solid; } + .tox .accessibility-issue__repair { margin-top: 16px; } + .tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description { background-color: rgba(32, 122, 183, 0.5); border-color: #207ab7; color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child { border-color: #207ab7; } + .tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg { fill: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description { background-color: rgba(255, 165, 0, 0.5); border-color: rgba(255, 165, 0, 0.8); color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child { border-color: rgba(255, 165, 0, 0.8); } + .tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg { fill: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description { background-color: rgba(204, 0, 0, 0.5); border-color: rgba(204, 0, 0, 0.8); color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child { border-color: rgba(204, 0, 0, 0.8); } + .tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg { fill: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description { background-color: rgba(120, 171, 70, 0.5); border-color: rgba(120, 171, 70, 0.8); color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child { border-color: rgba(120, 171, 70, 0.8); } + .tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg { fill: #fff; } + .tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon { color: #fff; } + .tox .tox-dialog__body-content .accessibility-issue__header h1, .tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 { margin-top: 0; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button { margin-left: 4px; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) { margin-left: auto; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description { padding: 4px 4px 4px 8px; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child { border-left-width: 1px; padding-left: 4px; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button { margin-right: 4px; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) { margin-right: auto; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description { padding: 4px 8px 4px 4px; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child { border-right-width: 1px; padding-right: 4px; } + .tox .tox-anchorbar { display: flex; flex: 0 0 auto; } + .tox .tox-bar { display: flex; flex: 0 0 auto; } + .tox .tox-button { background-color: #207ab7; background-image: none; @@ -255,6 +303,7 @@ button::-moz-focus-inner { text-transform: none; white-space: nowrap; } + .tox .tox-button[disabled] { background-color: #207ab7; background-image: none; @@ -263,6 +312,7 @@ button::-moz-focus-inner { color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } + .tox .tox-button:focus:not(:disabled) { background-color: #1c6ca1; background-image: none; @@ -270,6 +320,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button:hover:not(:disabled) { background-color: #1c6ca1; background-image: none; @@ -277,6 +328,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button:active:not(:disabled) { background-color: #185d8c; background-image: none; @@ -284,6 +336,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button--secondary { background-color: #3d546f; background-image: none; @@ -304,6 +357,7 @@ button::-moz-focus-inner { text-decoration: none; text-transform: none; } + .tox .tox-button--secondary[disabled] { background-color: #3d546f; background-image: none; @@ -311,6 +365,7 @@ button::-moz-focus-inner { box-shadow: none; color: rgba(255, 255, 255, 0.5); } + .tox .tox-button--secondary:focus:not(:disabled) { background-color: #34485f; background-image: none; @@ -318,6 +373,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button--secondary:hover:not(:disabled) { background-color: #34485f; background-image: none; @@ -325,6 +381,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button--secondary:active:not(:disabled) { background-color: #2b3b4e; background-image: none; @@ -332,17 +389,20 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button--icon, .tox .tox-button.tox-button--icon, .tox .tox-button.tox-button--secondary.tox-button--icon { padding: 4px; } + .tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg { display: block; fill: currentColor; } + .tox .tox-button-link { background: 0; border: none; @@ -357,45 +417,54 @@ button::-moz-focus-inner { padding: 0; white-space: nowrap; } + .tox .tox-button-link--sm { font-size: 14px; } + .tox .tox-button--naked { background-color: transparent; border-color: transparent; box-shadow: unset; color: #fff; } + .tox .tox-button--naked[disabled] { background-color: #3d546f; border-color: #3d546f; box-shadow: none; color: rgba(255, 255, 255, 0.5); } + .tox .tox-button--naked:hover:not(:disabled) { background-color: #34485f; border-color: #34485f; box-shadow: none; color: #fff; } + .tox .tox-button--naked:focus:not(:disabled) { background-color: #34485f; border-color: #34485f; box-shadow: none; color: #fff; } + .tox .tox-button--naked:active:not(:disabled) { background-color: #2b3b4e; border-color: #2b3b4e; box-shadow: none; color: #fff; } + .tox .tox-button--naked .tox-icon svg { fill: currentColor; } + .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) { color: #fff; } + .tox .tox-checkbox { align-items: center; border-radius: 3px; @@ -404,6 +473,7 @@ button::-moz-focus-inner { height: 36px; min-width: 36px; } + .tox .tox-checkbox__input { /* Hide from view but visible to screen readers */ height: 1px; @@ -412,6 +482,7 @@ button::-moz-focus-inner { top: auto; width: 1px; } + .tox .tox-checkbox__icons { align-items: center; border-radius: 3px; @@ -423,73 +494,94 @@ button::-moz-focus-inner { padding: calc(4px - 1px); width: 24px; } + .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: block; fill: rgba(255, 255, 255, 0.2); } + .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { display: none; fill: #207ab7; } + .tox .tox-checkbox__icons .tox-checkbox-icon__checked svg { display: none; fill: #207ab7; } + .tox .tox-checkbox--disabled { color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } + .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg { fill: rgba(255, 255, 255, 0.5); } + .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { fill: rgba(255, 255, 255, 0.5); } + .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { fill: rgba(255, 255, 255, 0.5); } + .tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: none; } + .tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg { display: block; } + .tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: none; } + .tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { display: block; } + .tox input.tox-checkbox__input:focus + .tox-checkbox__icons { border-radius: 3px; box-shadow: inset 0 0 0 1px #207ab7; padding: calc(4px - 1px); } + .tox:not([dir=rtl]) .tox-checkbox__label { margin-left: 4px; } + .tox:not([dir=rtl]) .tox-checkbox__input { left: -10000px; } + .tox:not([dir=rtl]) .tox-bar .tox-checkbox { margin-left: 4px; } + .tox[dir=rtl] .tox-checkbox__label { margin-right: 4px; } + .tox[dir=rtl] .tox-checkbox__input { right: -10000px; } + .tox[dir=rtl] .tox-bar .tox-checkbox { margin-right: 4px; } + .tox { /* stylelint-disable-next-line no-descending-specificity */ } + .tox .tox-collection--toolbar .tox-collection__group { display: flex; padding: 0; } + .tox .tox-collection--grid .tox-collection__group { display: flex; flex-wrap: wrap; @@ -498,6 +590,7 @@ button::-moz-focus-inner { overflow-y: auto; padding: 0; } + .tox .tox-collection--list .tox-collection__group { border-bottom-width: 0; border-color: #1a1a1a; @@ -507,9 +600,11 @@ button::-moz-focus-inner { border-top-width: 1px; padding: 4px 0; } + .tox .tox-collection--list .tox-collection__group:first-child { border-top-width: 0; } + .tox .tox-collection__group-heading { background-color: #333333; color: #fff; @@ -523,10 +618,11 @@ button::-moz-focus-inner { text-transform: none; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .tox .tox-collection__item { align-items: center; color: #fff; @@ -534,54 +630,67 @@ button::-moz-focus-inner { display: flex; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .tox .tox-collection--list .tox-collection__item { padding: 4px 8px; } + .tox .tox-collection--toolbar .tox-collection__item { border-radius: 3px; padding: 4px; } + .tox .tox-collection--grid .tox-collection__item { border-radius: 3px; padding: 4px; } + .tox .tox-collection--list .tox-collection__item--enabled { background-color: #2b3b4e; color: #fff; } + .tox .tox-collection--list .tox-collection__item--active { background-color: #4a5562; } + .tox .tox-collection--toolbar .tox-collection__item--enabled { background-color: #757d87; color: #fff; } + .tox .tox-collection--toolbar .tox-collection__item--active { background-color: #4a5562; } + .tox .tox-collection--grid .tox-collection__item--enabled { background-color: #757d87; color: #fff; } + .tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) { background-color: #4a5562; color: #fff; } + .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #fff; } + .tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #fff; } + .tox .tox-collection__item--state-disabled { background-color: transparent; color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } + .tox .tox-collection__item-icon, .tox .tox-collection__item-checkmark { align-items: center; @@ -590,14 +699,17 @@ button::-moz-focus-inner { justify-content: center; width: 24px; } + .tox .tox-collection__item-icon svg, .tox .tox-collection__item-checkmark svg { fill: currentColor; } + .tox .tox-collection--toolbar-lg .tox-collection__item-icon { height: 48px; width: 48px; } + .tox .tox-collection__item-label { color: currentColor; display: inline-block; @@ -610,6 +722,7 @@ button::-moz-focus-inner { text-transform: none; word-break: break-all; } + .tox .tox-collection__item-accessory { color: rgba(255, 255, 255, 0.5); display: inline-block; @@ -618,25 +731,31 @@ button::-moz-focus-inner { line-height: 24px; text-transform: none; } + .tox .tox-collection__item-caret { align-items: center; display: flex; min-height: 24px; } + .tox .tox-collection__item-caret::after { content: ''; font-size: 0; min-height: inherit; } + .tox .tox-collection__item-caret svg { fill: #fff; } + .tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg { display: none; } + .tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark { display: none; } + .tox .tox-collection--horizontal { background-color: #2b3b4e; border: 1px solid #1a1a1a; @@ -650,6 +769,7 @@ button::-moz-focus-inner { overflow-x: auto; padding: 0; } + .tox .tox-collection--horizontal .tox-collection__group { align-items: center; display: flex; @@ -657,125 +777,159 @@ button::-moz-focus-inner { margin: 0; padding: 0 4px; } + .tox .tox-collection--horizontal .tox-collection__item { height: 34px; margin: 2px 0 3px 0; padding: 0 4px; } + .tox .tox-collection--horizontal .tox-collection__item-label { white-space: nowrap; } + .tox .tox-collection--horizontal .tox-collection__item-caret { margin-left: 4px; } + .tox .tox-collection__item-container { display: flex; } + .tox .tox-collection__item-container--row { align-items: center; flex: 1 1 auto; flex-direction: row; } + .tox .tox-collection__item-container--row.tox-collection__item-container--align-left { margin-right: auto; } + .tox .tox-collection__item-container--row.tox-collection__item-container--align-right { justify-content: flex-end; margin-left: auto; } + .tox .tox-collection__item-container--row.tox-collection__item-container--valign-top { align-items: flex-start; margin-bottom: auto; } + .tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle { align-items: center; } + .tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom { align-items: flex-end; margin-top: auto; } + .tox .tox-collection__item-container--column { -ms-grid-row-align: center; - align-self: center; + align-self: center; flex: 1 1 auto; flex-direction: column; } + .tox .tox-collection__item-container--column.tox-collection__item-container--align-left { align-items: flex-start; } + .tox .tox-collection__item-container--column.tox-collection__item-container--align-right { align-items: flex-end; } + .tox .tox-collection__item-container--column.tox-collection__item-container--valign-top { align-self: flex-start; } + .tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle { -ms-grid-row-align: center; - align-self: center; + align-self: center; } + .tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom { align-self: flex-end; } + .tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-right: 1px solid #000000; } + .tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) { margin-left: 8px; } + .tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child { margin-left: 4px; } + .tox:not([dir=rtl]) .tox-collection__item-accessory { margin-left: 16px; text-align: right; } + .tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret { margin-left: 16px; } + .tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-left: 1px solid #000000; } + .tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) { margin-right: 8px; } + .tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child { margin-right: 4px; } + .tox[dir=rtl] .tox-collection__item-icon-rtl { /* stylelint-disable-next-line no-descending-specificity */ } + .tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg { transform: rotateY(180deg); } + .tox[dir=rtl] .tox-collection__item-accessory { margin-right: 16px; text-align: left; } + .tox[dir=rtl] .tox-collection .tox-collection__item-caret { margin-right: 16px; transform: rotateY(180deg); } + .tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret { margin-right: 4px; } + .tox .tox-color-picker-container { display: flex; flex-direction: row; height: 225px; margin: 0; } + .tox .tox-sv-palette { box-sizing: border-box; display: flex; height: 100%; } + .tox .tox-sv-palette-spectrum { height: 100%; } + .tox .tox-sv-palette, .tox .tox-sv-palette-spectrum { width: 225px; } + .tox .tox-sv-palette-thumb { background: none; border: 1px solid black; @@ -785,6 +939,7 @@ button::-moz-focus-inner { position: absolute; width: 12px; } + .tox .tox-sv-palette-inner-thumb { border: 1px solid white; border-radius: 50%; @@ -792,20 +947,24 @@ button::-moz-focus-inner { position: absolute; width: 10px; } + .tox .tox-hue-slider { box-sizing: border-box; height: 100%; width: 25px; } + .tox .tox-hue-slider-spectrum { background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00); height: 100%; width: 100%; } + .tox .tox-hue-slider, .tox .tox-hue-slider-spectrum { width: 20px; } + .tox .tox-hue-slider-thumb { background: white; border: 1px solid black; @@ -813,11 +972,13 @@ button::-moz-focus-inner { height: 4px; width: 100%; } + .tox .tox-rgb-form { display: flex; flex-direction: column; justify-content: space-between; } + .tox .tox-rgb-form div { align-items: center; display: flex; @@ -825,72 +986,91 @@ button::-moz-focus-inner { margin-bottom: 5px; width: inherit; } + .tox .tox-rgb-form input { width: 6em; } + .tox .tox-rgb-form input.tox-invalid { /* Need !important to override Chrome's focus styling unfortunately */ border: 1px solid red !important; } + .tox .tox-rgb-form .tox-rgba-preview { border: 1px solid black; flex-grow: 2; margin-bottom: 0; } + .tox:not([dir=rtl]) .tox-sv-palette { margin-right: 15px; } + .tox:not([dir=rtl]) .tox-hue-slider { margin-right: 15px; } + .tox:not([dir=rtl]) .tox-hue-slider-thumb { margin-left: -1px; } + .tox:not([dir=rtl]) .tox-rgb-form label { margin-right: 0.5em; } + .tox[dir=rtl] .tox-sv-palette { margin-left: 15px; } + .tox[dir=rtl] .tox-hue-slider { margin-left: 15px; } + .tox[dir=rtl] .tox-hue-slider-thumb { margin-right: -1px; } + .tox[dir=rtl] .tox-rgb-form label { margin-left: 0.5em; } + .tox .tox-toolbar .tox-swatches, .tox .tox-toolbar__primary .tox-swatches, .tox .tox-toolbar__overflow .tox-swatches { margin: 2px 0 3px 4px; } + .tox .tox-collection--list .tox-collection__group .tox-swatches-menu { border: 0; margin: -4px 0; } + .tox .tox-swatches__row { display: flex; } + .tox .tox-swatch { height: 30px; transition: transform 0.15s, box-shadow 0.15s; width: 30px; } + .tox .tox-swatch:hover, .tox .tox-swatch:focus { box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset; transform: scale(0.8); } + .tox .tox-swatch--remove { align-items: center; display: flex; justify-content: center; } + .tox .tox-swatch--remove svg path { stroke: #e74c3c; } + .tox .tox-swatches__picker-btn { align-items: center; background-color: transparent; @@ -903,26 +1083,33 @@ button::-moz-focus-inner { padding: 0; width: 30px; } + .tox .tox-swatches__picker-btn svg { height: 24px; width: 24px; } + .tox .tox-swatches__picker-btn:hover { background: #4a5562; } + .tox:not([dir=rtl]) .tox-swatches__picker-btn { margin-left: auto; } + .tox[dir=rtl] .tox-swatches__picker-btn { margin-right: auto; } + .tox .tox-comment-thread { background: #2b3b4e; position: relative; } + .tox .tox-comment-thread > *:not(:first-child) { margin-top: 8px; } + .tox .tox-comment { background: #2b3b4e; border: 1px solid #000000; @@ -931,16 +1118,19 @@ button::-moz-focus-inner { padding: 8px 8px 16px 8px; position: relative; } + .tox .tox-comment__header { align-items: center; color: #fff; display: flex; justify-content: space-between; } + .tox .tox-comment__date { color: rgba(255, 255, 255, 0.5); font-size: 12px; } + .tox .tox-comment__body { color: #fff; font-size: 14px; @@ -951,26 +1141,32 @@ button::-moz-focus-inner { position: relative; text-transform: initial; } + .tox .tox-comment__body textarea { resize: none; white-space: normal; width: 100%; } + .tox .tox-comment__expander { padding-top: 8px; } + .tox .tox-comment__expander p { color: rgba(255, 255, 255, 0.5); font-size: 14px; font-style: normal; } + .tox .tox-comment__body p { margin: 0; } + .tox .tox-comment__buttonspacing { padding-top: 16px; text-align: center; } + .tox .tox-comment-thread__overlay::after { background: #2b3b4e; bottom: 0; @@ -983,6 +1179,7 @@ button::-moz-focus-inner { top: 0; z-index: 5; } + .tox .tox-comment__reply { display: flex; flex-shrink: 0; @@ -990,16 +1187,19 @@ button::-moz-focus-inner { justify-content: flex-end; margin-top: 8px; } + .tox .tox-comment__reply > *:first-child { margin-bottom: 8px; width: 100%; } + .tox .tox-comment__edit { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; } + .tox .tox-comment__gradient::after { background: linear-gradient(rgba(43, 59, 78, 0), #2b3b4e); bottom: 0; @@ -1010,6 +1210,7 @@ button::-moz-focus-inner { position: absolute; width: 100%; } + .tox .tox-comment__overlay { background: #2b3b4e; bottom: 0; @@ -1024,6 +1225,7 @@ button::-moz-focus-inner { top: 0; z-index: 5; } + .tox .tox-comment__loading-text { align-items: center; color: #fff; @@ -1031,9 +1233,11 @@ button::-moz-focus-inner { flex-direction: column; position: relative; } + .tox .tox-comment__loading-text > div { padding-bottom: 16px; } + .tox .tox-comment__overlaytext { bottom: 0; flex-direction: column; @@ -1045,15 +1249,18 @@ button::-moz-focus-inner { top: 0; z-index: 10; } + .tox .tox-comment__overlaytext p { background-color: #2b3b4e; box-shadow: 0 0 8px 8px #2b3b4e; color: #fff; text-align: center; } + .tox .tox-comment__overlaytext div:nth-of-type(2) { font-size: 0.8em; } + .tox .tox-comment__busy-spinner { align-items: center; background-color: #2b3b4e; @@ -1066,38 +1273,47 @@ button::-moz-focus-inner { top: 0; z-index: 20; } + .tox .tox-comment__scroll { display: flex; flex-direction: column; flex-shrink: 1; overflow: auto; } + .tox .tox-conversations { margin: 8px; } + .tox:not([dir=rtl]) .tox-comment__edit { margin-left: 8px; } + .tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child, .tox:not([dir=rtl]) .tox-comment__edit > *:last-child, .tox:not([dir=rtl]) .tox-comment__reply > *:last-child { margin-left: 8px; } + .tox[dir=rtl] .tox-comment__edit { margin-right: 8px; } + .tox[dir=rtl] .tox-comment__buttonspacing > *:last-child, .tox[dir=rtl] .tox-comment__edit > *:last-child, .tox[dir=rtl] .tox-comment__reply > *:last-child { margin-right: 8px; } + .tox .tox-user { align-items: center; display: flex; } + .tox .tox-user__avatar svg { fill: rgba(255, 255, 255, 0.5); } + .tox .tox-user__name { color: rgba(255, 255, 255, 0.5); font-size: 12px; @@ -1105,18 +1321,23 @@ button::-moz-focus-inner { font-weight: bold; text-transform: uppercase; } + .tox:not([dir=rtl]) .tox-user__avatar svg { margin-right: 8px; } + .tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name { margin-left: 8px; } + .tox[dir=rtl] .tox-user__avatar svg { margin-left: 8px; } + .tox[dir=rtl] .tox-user__avatar + .tox-user__name { margin-right: 8px; } + .tox .tox-dialog-wrap { align-items: center; bottom: 0; @@ -1128,6 +1349,7 @@ button::-moz-focus-inner { top: 0; z-index: 1100; } + .tox .tox-dialog-wrap__backdrop { background-color: rgba(34, 47, 62, 0.75); bottom: 0; @@ -1137,9 +1359,11 @@ button::-moz-focus-inner { top: 0; z-index: 1; } + .tox .tox-dialog-wrap__backdrop--opaque { background-color: #222f3e; } + .tox .tox-dialog { background-color: #2b3b4e; border-color: #000000; @@ -1156,16 +1380,19 @@ button::-moz-focus-inner { width: 95vw; z-index: 2; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog { align-self: flex-start; margin: 8px auto; width: calc(100vw - 16px); } } + .tox .tox-dialog-inline { z-index: 1100; } + .tox .tox-dialog__header { align-items: center; background-color: #2b3b4e; @@ -1177,9 +1404,11 @@ button::-moz-focus-inner { padding: 8px 16px 0 16px; position: relative; } + .tox .tox-dialog__header .tox-button { z-index: 1; } + .tox .tox-dialog__draghandle { cursor: grab; height: 100%; @@ -1188,12 +1417,15 @@ button::-moz-focus-inner { top: 0; width: 100%; } + .tox .tox-dialog__draghandle:active { cursor: grabbing; } + .tox .tox-dialog__dismiss { margin-left: auto; } + .tox .tox-dialog__title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 20px; @@ -1203,6 +1435,7 @@ button::-moz-focus-inner { margin: 0; text-transform: none; } + .tox .tox-dialog__body { color: #fff; display: flex; @@ -1216,18 +1449,21 @@ button::-moz-focus-inner { text-align: left; text-transform: none; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog__body { flex-direction: column; } } + .tox .tox-dialog__body-nav { align-items: flex-start; display: flex; flex-direction: column; padding: 16px 16px; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog__body-nav { flex-direction: row; -webkit-overflow-scrolling: touch; @@ -1235,6 +1471,7 @@ button::-moz-focus-inner { padding-bottom: 0; } } + .tox .tox-dialog__body-nav-item { border-bottom: 2px solid transparent; color: rgba(255, 255, 255, 0.5); @@ -1245,13 +1482,16 @@ button::-moz-focus-inner { text-decoration: none; white-space: nowrap; } + .tox .tox-dialog__body-nav-item:focus { background-color: rgba(32, 122, 183, 0.1); } + .tox .tox-dialog__body-nav-item--active { border-bottom: 2px solid #207ab7; color: #207ab7; } + .tox .tox-dialog__body-content { box-sizing: border-box; display: flex; @@ -1263,48 +1503,58 @@ button::-moz-focus-inner { -webkit-overflow-scrolling: touch; padding: 16px 16px; } + .tox .tox-dialog__body-content > * { margin-bottom: 0; margin-top: 16px; } + .tox .tox-dialog__body-content > *:first-child { margin-top: 0; } + .tox .tox-dialog__body-content > *:last-child { margin-bottom: 0; } + .tox .tox-dialog__body-content > *:only-child { margin-bottom: 0; margin-top: 0; } + .tox .tox-dialog__body-content a { color: #207ab7; cursor: pointer; text-decoration: none; } + .tox .tox-dialog__body-content a:hover, .tox .tox-dialog__body-content a:focus { color: #185d8c; text-decoration: none; } + .tox .tox-dialog__body-content a:active { color: #185d8c; text-decoration: none; } + .tox .tox-dialog__body-content svg { fill: #fff; } + .tox .tox-dialog__body-content ul { display: block; list-style-type: disc; margin-bottom: 16px; -webkit-margin-end: 0; - margin-inline-end: 0; + margin-inline-end: 0; -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; -webkit-padding-start: 2.5rem; - padding-inline-start: 2.5rem; + padding-inline-start: 2.5rem; } + .tox .tox-dialog__body-content .tox-form__group h1 { color: #fff; font-size: 20px; @@ -1315,6 +1565,7 @@ button::-moz-focus-inner { margin-top: 2rem; text-transform: none; } + .tox .tox-dialog__body-content .tox-form__group h2 { color: #fff; font-size: 16px; @@ -1325,38 +1576,47 @@ button::-moz-focus-inner { margin-top: 2rem; text-transform: none; } + .tox .tox-dialog__body-content .tox-form__group p { margin-bottom: 16px; } + .tox .tox-dialog__body-content .tox-form__group h1:first-child, .tox .tox-dialog__body-content .tox-form__group h2:first-child, .tox .tox-dialog__body-content .tox-form__group p:first-child { margin-top: 0; } + .tox .tox-dialog__body-content .tox-form__group h1:last-child, .tox .tox-dialog__body-content .tox-form__group h2:last-child, .tox .tox-dialog__body-content .tox-form__group p:last-child { margin-bottom: 0; } + .tox .tox-dialog__body-content .tox-form__group h1:only-child, .tox .tox-dialog__body-content .tox-form__group h2:only-child, .tox .tox-dialog__body-content .tox-form__group p:only-child { margin-bottom: 0; margin-top: 0; } + .tox .tox-dialog--width-lg { height: 650px; max-width: 1200px; } + .tox .tox-dialog--width-md { max-width: 800px; } + .tox .tox-dialog--width-md .tox-dialog__body-content { overflow: auto; } + .tox .tox-dialog__body-content--centered { text-align: center; } + .tox .tox-dialog__footer { align-items: center; background-color: #2b3b4e; @@ -1365,10 +1625,12 @@ button::-moz-focus-inner { justify-content: space-between; padding: 8px 16px; } + .tox .tox-dialog__footer-start, .tox .tox-dialog__footer-end { display: flex; } + .tox .tox-dialog__busy-spinner { align-items: center; background-color: rgba(34, 47, 62, 0.75); @@ -1381,104 +1643,129 @@ button::-moz-focus-inner { top: 0; z-index: 3; } + .tox .tox-dialog__table { border-collapse: collapse; width: 100%; } + .tox .tox-dialog__table thead th { font-weight: bold; padding-bottom: 8px; } + .tox .tox-dialog__table tbody tr { border-bottom: 1px solid #000000; } + .tox .tox-dialog__table tbody tr:last-child { border-bottom: none; } + .tox .tox-dialog__table td { padding-bottom: 8px; padding-top: 8px; } + .tox .tox-dialog__popups { position: absolute; width: 100%; z-index: 1100; } + .tox .tox-dialog__body-iframe { display: flex; flex: 1; flex-direction: column; -ms-flex-preferred-size: auto; } + .tox .tox-dialog__body-iframe .tox-navobj { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) { flex: 1; -ms-flex-preferred-size: auto; height: 100%; } + .tox .tox-dialog-dock-fadeout { opacity: 0; visibility: hidden; } + .tox .tox-dialog-dock-fadein { opacity: 1; visibility: visible; } + .tox .tox-dialog-dock-transition { transition: visibility 0s linear 0.3s, opacity 0.3s ease; } + .tox .tox-dialog-dock-transition.tox-dialog-dock-fadein { transition-delay: 0s; } + .tox.tox-platform-ie { /* IE11 CSS styles go here */ } + .tox.tox-platform-ie .tox-dialog-wrap { position: -ms-device-fixed; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav { margin-right: 0; } } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) { margin-left: 8px; } } + .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *, .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * { margin-left: 8px; } + .tox[dir=rtl] .tox-dialog__body { text-align: right; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav { margin-left: 0; } } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) { margin-right: 8px; } } + .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *, .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * { margin-right: 8px; } + body.tox-dialog__disable-scroll { overflow: hidden; } + .tox .tox-dropzone-container { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-dropzone { align-items: center; background: #fff; @@ -1491,10 +1778,12 @@ body.tox-dialog__disable-scroll { min-height: 100px; padding: 10px; } + .tox .tox-dropzone p { color: rgba(255, 255, 255, 0.5); margin: 0 0 16px 0; } + .tox .tox-edit-area { display: flex; flex: 1; @@ -1502,6 +1791,7 @@ body.tox-dialog__disable-scroll { overflow: hidden; position: relative; } + .tox .tox-edit-area__iframe { background-color: #fff; border: 0; @@ -1512,103 +1802,130 @@ body.tox-dialog__disable-scroll { position: absolute; width: 100%; } + .tox.tox-inline-edit-area { border: 1px dotted #000000; } + .tox .tox-editor-container { display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; } + .tox .tox-editor-header { z-index: 1; } + .tox:not(.tox-tinymce-inline) .tox-editor-header { box-shadow: none; transition: box-shadow 0.5s; } + .tox.tox-tinymce--toolbar-bottom .tox-editor-header, .tox.tox-tinymce-inline .tox-editor-header { margin-bottom: -1px; } + .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header { background-color: transparent; box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); } + .tox-editor-dock-fadeout { opacity: 0; visibility: hidden; } + .tox-editor-dock-fadein { opacity: 1; visibility: visible; } + .tox-editor-dock-transition { transition: visibility 0s linear 0.25s, opacity 0.25s ease; } + .tox-editor-dock-transition.tox-editor-dock-fadein { transition-delay: 0s; } + .tox .tox-control-wrap { flex: 1; position: relative; } + .tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid, .tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown, .tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid { display: none; } + .tox .tox-control-wrap svg { display: block; } + .tox .tox-control-wrap__status-icon-wrap { position: absolute; top: 50%; transform: translateY(-50%); } + .tox .tox-control-wrap__status-icon-invalid svg { fill: #c00; } + .tox .tox-control-wrap__status-icon-unknown svg { fill: orange; } + .tox .tox-control-wrap__status-icon-valid svg { fill: green; } + .tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield { padding-right: 32px; } + .tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap { right: 4px; } + .tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield { padding-left: 32px; } + .tox[dir=rtl] .tox-control-wrap__status-icon-wrap { left: 4px; } + .tox .tox-autocompleter { max-width: 25em; } + .tox .tox-autocompleter .tox-menu { max-width: 25em; } + .tox .tox-autocompleter .tox-autocompleter-highlight { font-weight: bold; } + .tox .tox-color-input { display: flex; position: relative; z-index: 1; } + .tox .tox-color-input .tox-textfield { z-index: -1; } + .tox .tox-color-input span { border-color: rgba(42, 55, 70, 0.2); border-radius: 3px; @@ -1621,11 +1938,13 @@ body.tox-dialog__disable-scroll { top: 6px; width: 24px; } + .tox .tox-color-input span:hover:not([aria-disabled=true]), .tox .tox-color-input span:focus:not([aria-disabled=true]) { border-color: #207ab7; cursor: pointer; } + .tox .tox-color-input span::before { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.25) 75%); background-position: 0 0, 0 6px, 6px -6px, -6px 0; @@ -1641,27 +1960,35 @@ body.tox-dialog__disable-scroll { width: 24px; z-index: -1; } + .tox .tox-color-input span[aria-disabled=true] { cursor: not-allowed; } + .tox:not([dir=rtl]) .tox-color-input { /* stylelint-disable-next-line no-descending-specificity */ } + .tox:not([dir=rtl]) .tox-color-input .tox-textfield { padding-left: 36px; } + .tox:not([dir=rtl]) .tox-color-input span { left: 6px; } + .tox[dir="rtl"] .tox-color-input { /* stylelint-disable-next-line no-descending-specificity */ } + .tox[dir="rtl"] .tox-color-input .tox-textfield { padding-right: 36px; } + .tox[dir="rtl"] .tox-color-input span { right: 6px; } + .tox .tox-label, .tox .tox-toolbar-label { color: rgba(255, 255, 255, 0.5); @@ -1674,91 +2001,112 @@ body.tox-dialog__disable-scroll { text-transform: none; white-space: nowrap; } + .tox .tox-toolbar-label { padding: 0 8px; } + .tox[dir=rtl] .tox-label { padding: 0 0 0 8px; } + .tox .tox-form { display: flex; flex: 1; flex-direction: column; -ms-flex-preferred-size: auto; } + .tox .tox-form__group { box-sizing: border-box; margin-bottom: 4px; } + .tox .tox-form-group--maximize { flex: 1; } + .tox .tox-form__group--error { color: #c00; } + .tox .tox-form__group--collection { display: flex; } + .tox .tox-form__grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } + .tox .tox-form__grid--2col > .tox-form__group { width: calc(50% - (8px / 2)); } + .tox .tox-form__grid--3col > .tox-form__group { width: calc(100% / 3 - (8px / 2)); } + .tox .tox-form__grid--4col > .tox-form__group { width: calc(25% - (8px / 2)); } + .tox .tox-form__controls-h-stack { align-items: center; display: flex; } + .tox .tox-form__group--inline { align-items: center; display: flex; } + .tox .tox-form__group--stretched { display: flex; flex: 1; flex-direction: column; -ms-flex-preferred-size: auto; } + .tox .tox-form__group--stretched .tox-textarea { flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-form__group--stretched .tox-navobj { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-form__group--stretched .tox-navobj :nth-child(2) { flex: 1; -ms-flex-preferred-size: auto; height: 100%; } + .tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) { margin-left: 4px; } + .tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) { margin-right: 4px; } + .tox .tox-lock.tox-locked .tox-lock-icon__unlock, .tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock { display: none; } + .tox .tox-textfield, .tox .tox-toolbar-textfield, .tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; background-color: #2b3b4e; border-color: #000000; border-radius: 3px; @@ -1777,12 +2125,14 @@ body.tox-dialog__disable-scroll { resize: none; width: 100%; } + .tox .tox-textfield[disabled], .tox .tox-textarea[disabled] { background-color: #222f3e; color: rgba(255, 255, 255, 0.85); cursor: not-allowed; } + .tox .tox-textfield:focus, .tox .tox-listboxfield .tox-listbox--select:focus, .tox .tox-textarea:focus { @@ -1791,12 +2141,14 @@ body.tox-dialog__disable-scroll { box-shadow: none; outline: none; } + .tox .tox-toolbar-textfield { border-width: 0; margin-bottom: 3px; margin-top: 2px; max-width: 250px; } + .tox .tox-naked-btn { background-color: transparent; border: 0; @@ -1808,57 +2160,70 @@ body.tox-dialog__disable-scroll { margin: 0; padding: 0; } + .tox .tox-naked-btn svg { display: block; fill: #fff; } + .tox:not([dir=rtl]) .tox-toolbar-textfield + * { margin-left: 4px; } + .tox[dir=rtl] .tox-toolbar-textfield + * { margin-right: 4px; } + .tox .tox-listboxfield { cursor: pointer; position: relative; } + .tox .tox-listboxfield .tox-listbox--select[disabled] { background-color: #19232e; color: rgba(255, 255, 255, 0.85); cursor: not-allowed; } + .tox .tox-listbox__select-label { cursor: default; flex: 1; margin: 0 4px; } + .tox .tox-listbox__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; } + .tox .tox-listbox__select-chevron svg { fill: #fff; } + .tox .tox-listboxfield .tox-listbox--select { align-items: center; display: flex; } + .tox:not([dir=rtl]) .tox-listboxfield svg { right: 8px; } + .tox[dir=rtl] .tox-listboxfield svg { left: 8px; } + .tox .tox-selectfield { cursor: pointer; position: relative; } + .tox .tox-selectfield select { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; background-color: #2b3b4e; border-color: #000000; border-radius: 3px; @@ -1877,46 +2242,56 @@ body.tox-dialog__disable-scroll { resize: none; width: 100%; } + .tox .tox-selectfield select[disabled] { background-color: #19232e; color: rgba(255, 255, 255, 0.85); cursor: not-allowed; } + .tox .tox-selectfield select::-ms-expand { display: none; } + .tox .tox-selectfield select:focus { background-color: #2b3b4e; border-color: #207ab7; box-shadow: none; outline: none; } + .tox .tox-selectfield svg { pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); } + .tox:not([dir=rtl]) .tox-selectfield select[size="0"], .tox:not([dir=rtl]) .tox-selectfield select[size="1"] { padding-right: 24px; } + .tox:not([dir=rtl]) .tox-selectfield svg { right: 8px; } + .tox[dir=rtl] .tox-selectfield select[size="0"], .tox[dir=rtl] .tox-selectfield select[size="1"] { padding-left: 24px; } + .tox[dir=rtl] .tox-selectfield svg { left: 8px; } + .tox .tox-textarea { -webkit-appearance: textarea; - -moz-appearance: textarea; - appearance: textarea; + -moz-appearance: textarea; + appearance: textarea; white-space: pre-wrap; } + .tox-fullscreen { border: 0; height: 100%; @@ -1924,39 +2299,47 @@ body.tox-dialog__disable-scroll { margin: 0; overflow: hidden; -ms-scroll-chaining: none; - overscroll-behavior: none; + overscroll-behavior: none; padding: 0; position: fixed; top: 0; touch-action: pinch-zoom; width: 100%; } + .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle { display: none; } + .tox.tox-tinymce.tox-fullscreen { background-color: transparent; z-index: 1200; } + .tox-shadowhost.tox-fullscreen { z-index: 1200; } + .tox-fullscreen .tox.tox-tinymce-aux, .tox-fullscreen ~ .tox.tox-tinymce-aux { z-index: 1201; } + .tox .tox-help__more-link { list-style: none; margin-top: 1em; } + .tox .tox-image-tools { width: 100%; } + .tox .tox-image-tools__toolbar { align-items: center; display: flex; justify-content: center; } + .tox .tox-image-tools__image { background-color: #666; height: 380px; @@ -1964,17 +2347,21 @@ body.tox-dialog__disable-scroll { position: relative; width: 100%; } + .tox .tox-image-tools__image, .tox .tox-image-tools__image + .tox-image-tools__toolbar { margin-top: 8px; } + .tox .tox-image-tools__image-bg { background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==); } + .tox .tox-image-tools__toolbar > .tox-spacer { flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-croprect-block { background: black; filter: alpha(opacity=50); @@ -1982,6 +2369,7 @@ body.tox-dialog__disable-scroll { position: absolute; zoom: 1; } + .tox .tox-croprect-handle { border: 2px solid white; height: 20px; @@ -1990,11 +2378,13 @@ body.tox-dialog__disable-scroll { top: 0; width: 20px; } + .tox .tox-croprect-handle-move { border: 0; cursor: move; position: absolute; } + .tox .tox-croprect-handle-nw { border-width: 2px 0 0 2px; cursor: nw-resize; @@ -2002,6 +2392,7 @@ body.tox-dialog__disable-scroll { margin: -2px 0 0 -2px; top: 100px; } + .tox .tox-croprect-handle-ne { border-width: 2px 2px 0 0; cursor: ne-resize; @@ -2009,6 +2400,7 @@ body.tox-dialog__disable-scroll { margin: -2px 0 0 -20px; top: 100px; } + .tox .tox-croprect-handle-sw { border-width: 0 0 2px 2px; cursor: sw-resize; @@ -2016,6 +2408,7 @@ body.tox-dialog__disable-scroll { margin: -20px 2px 0 -2px; top: 200px; } + .tox .tox-croprect-handle-se { border-width: 0 2px 2px 0; cursor: se-resize; @@ -2023,29 +2416,37 @@ body.tox-dialog__disable-scroll { margin: -20px 0 0 -20px; top: 200px; } + .tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) { margin-left: 8px; } + .tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider { margin-left: 32px; } + .tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button { margin-left: 32px; } + .tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) { margin-right: 8px; } + .tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider { margin-right: 32px; } + .tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button { margin-right: 32px; } + .tox .tox-insert-table-picker { display: flex; flex-wrap: wrap; width: 170px; } + .tox .tox-insert-table-picker > div { border-color: #000000; border-style: solid; @@ -2054,13 +2455,16 @@ body.tox-dialog__disable-scroll { height: 17px; width: 17px; } + .tox .tox-collection--list .tox-collection__group .tox-insert-table-picker { margin: -4px 0; } + .tox .tox-insert-table-picker .tox-insert-table-picker__selected { background-color: rgba(32, 122, 183, 0.5); border-color: rgba(32, 122, 183, 0.5); } + .tox .tox-insert-table-picker__label { color: #fff; display: block; @@ -2069,22 +2473,28 @@ body.tox-dialog__disable-scroll { text-align: center; width: 100%; } + .tox:not([dir=rtl]) { /* stylelint-disable-next-line no-descending-specificity */ } + .tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) { border-right: 0; } + .tox[dir=rtl] { /* stylelint-disable-next-line no-descending-specificity */ } + .tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) { border-right: 0; } + .tox { /* stylelint-disable */ /* stylelint-enable */ } + .tox .tox-menu { background-color: #2b3b4e; border: 1px solid #000000; @@ -2095,15 +2505,19 @@ body.tox-dialog__disable-scroll { vertical-align: top; z-index: 1150; } + .tox .tox-menu.tox-collection.tox-collection--list { padding: 0; } + .tox .tox-menu.tox-collection.tox-collection--toolbar { padding: 4px; } + .tox .tox-menu.tox-collection.tox-collection--grid { padding: 4px; } + .tox .tox-menu__label h1, .tox .tox-menu__label h2, .tox .tox-menu__label h3, @@ -2115,6 +2529,7 @@ body.tox-dialog__disable-scroll { .tox .tox-menu__label code { margin: 0; } + .tox .tox-menubar { background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e; background-color: #222f3e; @@ -2124,9 +2539,11 @@ body.tox-dialog__disable-scroll { flex-wrap: wrap; padding: 0 4px 0 4px; } + .tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar { border-top: 1px solid #000000; } + /* Deprecated. Remove in next major release */ .tox .tox-mbtn { align-items: center; @@ -2149,6 +2566,7 @@ body.tox-dialog__disable-scroll { text-transform: none; width: auto; } + .tox .tox-mbtn[disabled] { background-color: transparent; border: 0; @@ -2156,32 +2574,38 @@ body.tox-dialog__disable-scroll { color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } + .tox .tox-mbtn:focus:not(:disabled) { background: #4a5562; border: 0; box-shadow: none; color: #fff; } + .tox .tox-mbtn--active { background: #757d87; border: 0; box-shadow: none; color: #fff; } + .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) { background: #4a5562; border: 0; box-shadow: none; color: #fff; } + .tox .tox-mbtn__select-label { cursor: default; font-weight: normal; margin: 0 4px; } + .tox .tox-mbtn[disabled] .tox-mbtn__select-label { cursor: not-allowed; } + .tox .tox-mbtn__select-chevron { align-items: center; display: flex; @@ -2189,6 +2613,7 @@ body.tox-dialog__disable-scroll { width: 16px; display: none; } + .tox .tox-notification { border-radius: 3px; border-style: solid; @@ -2200,159 +2625,189 @@ body.tox-dialog__disable-scroll { font-size: 14px; font-weight: normal; -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); - grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); + grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); margin-top: 4px; opacity: 0; padding: 4px; transition: transform 100ms ease-in, opacity 150ms ease-in; } + .tox .tox-notification p { font-size: 14px; font-weight: normal; } + .tox .tox-notification a { text-decoration: underline; } + .tox .tox-notification--in { opacity: 1; } + .tox .tox-notification--success { background-color: #e4eeda; border-color: #d7e6c8; color: #fff; } + .tox .tox-notification--success p { color: #fff; } + .tox .tox-notification--success a { color: #547831; } + .tox .tox-notification--success svg { fill: #fff; } + .tox .tox-notification--error { background-color: #f8dede; border-color: #f2bfbf; color: #fff; } + .tox .tox-notification--error p { color: #fff; } + .tox .tox-notification--error a { color: #c00; } + .tox .tox-notification--error svg { fill: #fff; } + .tox .tox-notification--warn, .tox .tox-notification--warning { background-color: #fffaea; border-color: #ffe89d; color: #fff; } + .tox .tox-notification--warn p, .tox .tox-notification--warning p { color: #fff; } + .tox .tox-notification--warn a, .tox .tox-notification--warning a { color: #fff; } + .tox .tox-notification--warn svg, .tox .tox-notification--warning svg { fill: #fff; } + .tox .tox-notification--info { background-color: #d9edf7; border-color: #779ecb; color: #fff; } + .tox .tox-notification--info p { color: #fff; } + .tox .tox-notification--info a { color: #fff; } + .tox .tox-notification--info svg { fill: #fff; } + .tox .tox-notification__body { -ms-grid-row-align: center; - align-self: center; + align-self: center; color: #fff; font-size: 14px; -ms-grid-column-span: 1; grid-column-end: 3; -ms-grid-column: 2; - grid-column-start: 2; + grid-column-start: 2; -ms-grid-row-span: 1; grid-row-end: 2; -ms-grid-row: 1; - grid-row-start: 1; + grid-row-start: 1; text-align: center; white-space: normal; word-break: break-all; word-break: break-word; } + .tox .tox-notification__body > * { margin: 0; } + .tox .tox-notification__body > * + * { margin-top: 1rem; } + .tox .tox-notification__icon { -ms-grid-row-align: center; - align-self: center; + align-self: center; -ms-grid-column-span: 1; grid-column-end: 2; -ms-grid-column: 1; - grid-column-start: 1; + grid-column-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; -ms-grid-row: 1; - grid-row-start: 1; + grid-row-start: 1; -ms-grid-column-align: end; - justify-self: end; + justify-self: end; } + .tox .tox-notification__icon svg { display: block; } + .tox .tox-notification__dismiss { -ms-grid-row-align: start; - align-self: start; + align-self: start; -ms-grid-column-span: 1; grid-column-end: 4; -ms-grid-column: 3; - grid-column-start: 3; + grid-column-start: 3; -ms-grid-row-span: 1; grid-row-end: 2; -ms-grid-row: 1; - grid-row-start: 1; + grid-row-start: 1; -ms-grid-column-align: end; - justify-self: end; + justify-self: end; } + .tox .tox-notification .tox-progress-bar { -ms-grid-column-span: 3; grid-column-end: 4; -ms-grid-column: 1; - grid-column-start: 1; + grid-column-start: 1; -ms-grid-row-span: 1; grid-row-end: 3; -ms-grid-row: 2; - grid-row-start: 2; + grid-row-start: 2; -ms-grid-column-align: center; - justify-self: center; + justify-self: center; } + .tox .tox-pop { display: inline-block; position: relative; } + .tox .tox-pop--resizing { transition: width 0.1s ease; } + .tox .tox-pop--resizing .tox-toolbar { flex-wrap: nowrap; } + .tox .tox-pop__dialog { background-color: #222f3e; border: 1px solid #000000; @@ -2361,13 +2816,16 @@ body.tox-dialog__disable-scroll { min-width: 0; overflow: hidden; } + .tox .tox-pop__dialog > *:not(.tox-toolbar) { margin: 4px 4px 4px 8px; } + .tox .tox-pop__dialog .tox-toolbar { background-color: transparent; margin-bottom: -1px; } + .tox .tox-pop::before, .tox .tox-pop::after { border-style: solid; @@ -2377,79 +2835,94 @@ body.tox-dialog__disable-scroll { position: absolute; width: 0; } + .tox .tox-pop.tox-pop--bottom::before, .tox .tox-pop.tox-pop--bottom::after { left: 50%; top: 100%; } + .tox .tox-pop.tox-pop--bottom::after { border-color: #222f3e transparent transparent transparent; border-width: 8px; margin-left: -8px; margin-top: -1px; } + .tox .tox-pop.tox-pop--bottom::before { border-color: #000000 transparent transparent transparent; border-width: 9px; margin-left: -9px; } + .tox .tox-pop.tox-pop--top::before, .tox .tox-pop.tox-pop--top::after { left: 50%; top: 0; transform: translateY(-100%); } + .tox .tox-pop.tox-pop--top::after { border-color: transparent transparent #222f3e transparent; border-width: 8px; margin-left: -8px; margin-top: 1px; } + .tox .tox-pop.tox-pop--top::before { border-color: transparent transparent #000000 transparent; border-width: 9px; margin-left: -9px; } + .tox .tox-pop.tox-pop--left::before, .tox .tox-pop.tox-pop--left::after { left: 0; top: calc(50% - 1px); transform: translateY(-50%); } + .tox .tox-pop.tox-pop--left::after { border-color: transparent #222f3e transparent transparent; border-width: 8px; margin-left: -15px; } + .tox .tox-pop.tox-pop--left::before { border-color: transparent #000000 transparent transparent; border-width: 10px; margin-left: -19px; } + .tox .tox-pop.tox-pop--right::before, .tox .tox-pop.tox-pop--right::after { left: 100%; top: calc(50% + 1px); transform: translateY(-50%); } + .tox .tox-pop.tox-pop--right::after { border-color: transparent transparent transparent #222f3e; border-width: 8px; margin-left: -1px; } + .tox .tox-pop.tox-pop--right::before { border-color: transparent transparent transparent #000000; border-width: 10px; margin-left: -1px; } + .tox .tox-pop.tox-pop--align-left::before, .tox .tox-pop.tox-pop--align-left::after { left: 20px; } + .tox .tox-pop.tox-pop--align-right::before, .tox .tox-pop.tox-pop--align-right::after { left: calc(100% - 20px); } + .tox .tox-sidebar-wrap { display: flex; flex-direction: row; @@ -2457,32 +2930,40 @@ body.tox-dialog__disable-scroll { -ms-flex-preferred-size: 0; min-height: 0; } + .tox .tox-sidebar { background-color: #222f3e; display: flex; flex-direction: row; justify-content: flex-end; } + .tox .tox-sidebar__slider { display: flex; overflow: hidden; } + .tox .tox-sidebar__pane-container { display: flex; } + .tox .tox-sidebar__pane { display: flex; } + .tox .tox-sidebar--sliding-closed { opacity: 0; } + .tox .tox-sidebar--sliding-open { opacity: 1; } + .tox .tox-sidebar--sliding-growing, .tox .tox-sidebar--sliding-shrinking { transition: width 0.5s ease, opacity 0.5s ease; } + .tox .tox-selector { background-color: #4099ff; border-color: #4099ff; @@ -2494,10 +2975,12 @@ body.tox-dialog__disable-scroll { position: absolute; width: 10px; } + .tox.tox-platform-touch .tox-selector { height: 12px; width: 12px; } + .tox .tox-slider { align-items: center; display: flex; @@ -2507,6 +2990,7 @@ body.tox-dialog__disable-scroll { justify-content: center; position: relative; } + .tox .tox-slider__rail { background-color: transparent; border: 1px solid #000000; @@ -2515,6 +2999,7 @@ body.tox-dialog__disable-scroll { min-width: 120px; width: 100%; } + .tox .tox-slider__handle { background-color: #207ab7; border: 2px solid #185d8c; @@ -2527,12 +3012,15 @@ body.tox-dialog__disable-scroll { transform: translateX(-50%) translateY(-50%); width: 14px; } + .tox .tox-source-code { overflow: auto; } + .tox .tox-spinner { display: flex; } + .tox .tox-spinner > div { animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both; background-color: rgba(255, 255, 255, 0.5); @@ -2540,12 +3028,15 @@ body.tox-dialog__disable-scroll { height: 8px; width: 8px; } + .tox .tox-spinner > div:nth-child(1) { animation-delay: -0.32s; } + .tox .tox-spinner > div:nth-child(2) { animation-delay: -0.16s; } + @keyframes tam-bouncing-dots { 0%, 80%, @@ -2556,12 +3047,15 @@ body.tox-dialog__disable-scroll { transform: scale(1); } } + .tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) { margin-left: 4px; } + .tox[dir=rtl] .tox-spinner > div:not(:first-child) { margin-right: 4px; } + .tox .tox-statusbar { align-items: center; background-color: #222f3e; @@ -2577,12 +3071,14 @@ body.tox-dialog__disable-scroll { position: relative; text-transform: uppercase; } + .tox .tox-statusbar__text-container { display: flex; flex: 1 1 auto; justify-content: flex-end; overflow: hidden; } + .tox .tox-statusbar__path { display: flex; flex: 1 1 auto; @@ -2591,20 +3087,24 @@ body.tox-dialog__disable-scroll { text-overflow: ellipsis; white-space: nowrap; } + .tox .tox-statusbar__path > * { display: inline; white-space: nowrap; } + .tox .tox-statusbar__wordcount { flex: 0 0 auto; margin-left: 1ch; } + .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount { color: #fff; text-decoration: none; } + .tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]), @@ -2614,6 +3114,7 @@ body.tox-dialog__disable-scroll { cursor: pointer; text-decoration: underline; } + .tox .tox-statusbar__resize-handle { align-items: flex-end; align-self: stretch; @@ -2625,30 +3126,38 @@ body.tox-dialog__disable-scroll { margin-right: -8px; padding-left: 1ch; } + .tox .tox-statusbar__resize-handle svg { display: block; fill: #fff; } + .tox .tox-statusbar__resize-handle:focus svg { background-color: #4a5562; border-radius: 1px; box-shadow: 0 0 0 2px #4a5562; } + .tox:not([dir=rtl]) .tox-statusbar__path > * { margin-right: 4px; } + .tox:not([dir=rtl]) .tox-statusbar__branding { margin-left: 1ch; } + .tox[dir=rtl] .tox-statusbar { flex-direction: row-reverse; } + .tox[dir=rtl] .tox-statusbar__path > * { margin-left: 4px; } + .tox .tox-throbber { z-index: 1299; } + .tox .tox-throbber__busy-spinner { align-items: center; background-color: rgba(34, 47, 62, 0.6); @@ -2660,6 +3169,7 @@ body.tox-dialog__disable-scroll { right: 0; top: 0; } + .tox .tox-tbtn { align-items: center; background: transparent; @@ -2681,38 +3191,46 @@ body.tox-dialog__disable-scroll { text-transform: none; width: 34px; } + .tox .tox-tbtn svg { display: block; fill: #fff; } + .tox .tox-tbtn.tox-tbtn-more { padding-left: 5px; padding-right: 5px; width: inherit; } + .tox .tox-tbtn:focus { background: #4a5562; border: 0; box-shadow: none; } + .tox .tox-tbtn:hover { background: #4a5562; border: 0; box-shadow: none; color: #fff; } + .tox .tox-tbtn:hover svg { fill: #fff; } + .tox .tox-tbtn:active { background: #757d87; border: 0; box-shadow: none; color: #fff; } + .tox .tox-tbtn:active svg { fill: #fff; } + .tox .tox-tbtn--disabled, .tox .tox-tbtn--disabled:hover, .tox .tox-tbtn:disabled, @@ -2723,6 +3241,7 @@ body.tox-dialog__disable-scroll { color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } + .tox .tox-tbtn--disabled svg, .tox .tox-tbtn--disabled:hover svg, .tox .tox-tbtn:disabled svg, @@ -2730,6 +3249,7 @@ body.tox-dialog__disable-scroll { /* stylelint-disable-line no-descending-specificity */ fill: rgba(255, 255, 255, 0.5); } + .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: #757d87; @@ -2737,43 +3257,53 @@ body.tox-dialog__disable-scroll { box-shadow: none; color: #fff; } + .tox .tox-tbtn--enabled > *, .tox .tox-tbtn--enabled:hover > * { transform: none; } + .tox .tox-tbtn--enabled svg, .tox .tox-tbtn--enabled:hover svg { /* stylelint-disable-line no-descending-specificity */ fill: #fff; } + .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) { color: #fff; } + .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg { fill: #fff; } + .tox .tox-tbtn:active > * { transform: none; } + .tox .tox-tbtn--md { height: 51px; width: 51px; } + .tox .tox-tbtn--lg { flex-direction: column; height: 68px; width: 68px; } + .tox .tox-tbtn--return { -ms-grid-row-align: stretch; - align-self: stretch; + align-self: stretch; height: unset; width: 16px; } + .tox .tox-tbtn--labeled { padding: 0 4px; width: unset; } + .tox .tox-tbtn__vlabel { display: block; font-size: 10px; @@ -2782,31 +3312,37 @@ body.tox-dialog__disable-scroll { margin-bottom: 4px; white-space: nowrap; } + .tox .tox-tbtn--select { margin: 2px 0 3px 0; padding: 0 4px; width: auto; } + .tox .tox-tbtn__select-label { cursor: default; font-weight: normal; margin: 0 4px; } + .tox .tox-tbtn__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; } + .tox .tox-tbtn__select-chevron svg { fill: rgba(255, 255, 255, 0.5); } + .tox .tox-tbtn--bespoke .tox-tbtn__select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7em; } + .tox .tox-split-button { border: 0; border-radius: 3px; @@ -2815,32 +3351,41 @@ body.tox-dialog__disable-scroll { margin: 2px 0 3px 0; overflow: hidden; } + .tox .tox-split-button:hover { box-shadow: 0 0 0 1px #4a5562 inset; } + .tox .tox-split-button:focus { background: #4a5562; box-shadow: none; color: #fff; } + .tox .tox-split-button > * { border-radius: 0; } + .tox .tox-split-button__chevron { width: 16px; } + .tox .tox-split-button__chevron svg { fill: rgba(255, 255, 255, 0.5); } + .tox .tox-split-button .tox-tbtn { margin: 0; } + .tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child { width: 30px; } + .tox.tox-platform-touch .tox-split-button__chevron { width: 20px; } + .tox .tox-split-button.tox-tbtn--disabled:hover, .tox .tox-split-button.tox-tbtn--disabled:focus, .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover, @@ -2849,9 +3394,11 @@ body.tox-dialog__disable-scroll { box-shadow: none; color: rgba(255, 255, 255, 0.5); } + .tox .tox-toolbar-overlord { background-color: #222f3e; } + .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow { @@ -2863,6 +3410,7 @@ body.tox-dialog__disable-scroll { flex-wrap: wrap; padding: 0 0; } + .tox .tox-toolbar__overflow.tox-toolbar__overflow--closed { height: 0; opacity: 0; @@ -2870,40 +3418,50 @@ body.tox-dialog__disable-scroll { padding-top: 0; visibility: hidden; } + .tox .tox-toolbar__overflow--growing { transition: height 0.3s ease, opacity 0.2s linear 0.1s; } + .tox .tox-toolbar__overflow--shrinking { transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s; } + .tox .tox-menubar + .tox-toolbar, .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary { border-top: 1px solid #000000; margin-top: -1px; } + .tox .tox-toolbar--scrolling { flex-wrap: nowrap; overflow-x: auto; } + .tox .tox-pop .tox-toolbar { border-width: 0; } + .tox .tox-toolbar--no-divider { background-image: none; } + .tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child, .tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary { border-top: 1px solid #000000; } + .tox.tox-tinymce-aux .tox-toolbar__overflow { background-color: #222f3e; border: 1px solid #000000; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } + .tox[dir=rtl] .tox-tbtn__icon-rtl svg { transform: rotateY(180deg); } + .tox .tox-toolbar__group { align-items: center; display: flex; @@ -2911,24 +3469,30 @@ body.tox-dialog__disable-scroll { margin: 0 0; padding: 0 4px 0 4px; } + .tox .tox-toolbar__group--pull-right { margin-left: auto; } + .tox .tox-toolbar--scrolling .tox-toolbar__group { flex-shrink: 0; flex-wrap: nowrap; } + .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) { border-right: 1px solid #000000; } + .tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) { border-left: 1px solid #000000; } + .tox .tox-tooltip { display: inline-block; padding: 8px; position: relative; } + .tox .tox-tooltip__body { background-color: #3d546f; border-radius: 3px; @@ -2940,9 +3504,11 @@ body.tox-dialog__disable-scroll { padding: 4px 8px; text-transform: none; } + .tox .tox-tooltip__arrow { position: absolute; } + .tox .tox-tooltip--down .tox-tooltip__arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; @@ -2952,6 +3518,7 @@ body.tox-dialog__disable-scroll { position: absolute; transform: translateX(-50%); } + .tox .tox-tooltip--up .tox-tooltip__arrow { border-bottom: 8px solid #3d546f; border-left: 8px solid transparent; @@ -2961,6 +3528,7 @@ body.tox-dialog__disable-scroll { top: 0; transform: translateX(-50%); } + .tox .tox-tooltip--right .tox-tooltip__arrow { border-bottom: 8px solid transparent; border-left: 8px solid #3d546f; @@ -2970,6 +3538,7 @@ body.tox-dialog__disable-scroll { top: 50%; transform: translateY(-50%); } + .tox .tox-tooltip--left .tox-tooltip__arrow { border-bottom: 8px solid transparent; border-right: 8px solid #3d546f; @@ -2979,21 +3548,26 @@ body.tox-dialog__disable-scroll { top: 50%; transform: translateY(-50%); } + .tox .tox-well { border: 1px solid #000000; border-radius: 3px; padding: 8px; width: 100%; } + .tox .tox-well > *:first-child { margin-top: 0; } + .tox .tox-well > *:last-child { margin-bottom: 0; } + .tox .tox-well > *:only-child { margin: 0; } + .tox .tox-custom-editor { border: 1px solid #000000; border-radius: 3px; @@ -3001,10 +3575,12 @@ body.tox-dialog__disable-scroll { flex: 1; position: relative; } + /* stylelint-disable */ .tox { /* stylelint-enable */ } + .tox .tox-dialog-loading::before { background-color: rgba(0, 0, 0, 0.5); content: ""; @@ -3013,22 +3589,27 @@ body.tox-dialog__disable-scroll { width: 100%; z-index: 1000; } + .tox .tox-tab { cursor: pointer; } + .tox .tox-dialog__content-js { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-dialog__body-content .tox-collection { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-image-tools-edit-panel { height: 60px; } + .tox .tox-image-tools__sidebar { height: 60px; } diff --git a/frontend/public/tinymce/skins/ui/oxide-dark/skin.mobile.css b/frontend/public/tinymce/skins/ui/oxide-dark/skin.mobile.css index 875721a27d..efcd1bb63a 100644 --- a/frontend/public/tinymce/skins/ui/oxide-dark/skin.mobile.css +++ b/frontend/public/tinymce/skins/ui/oxide-dark/skin.mobile.css @@ -9,6 +9,7 @@ all: initial; display: block; } + .tinymce-mobile-outer-container * { border: 0; box-sizing: initial; @@ -23,97 +24,127 @@ text-shadow: none; white-space: nowrap; } + .tinymce-mobile-icon-arrow-back::before { content: "\e5cd"; } + .tinymce-mobile-icon-image::before { content: "\e412"; } + .tinymce-mobile-icon-cancel-circle::before { content: "\e5c9"; } + .tinymce-mobile-icon-full-dot::before { content: "\e061"; } + .tinymce-mobile-icon-align-center::before { content: "\e234"; } + .tinymce-mobile-icon-align-left::before { content: "\e236"; } + .tinymce-mobile-icon-align-right::before { content: "\e237"; } + .tinymce-mobile-icon-bold::before { content: "\e238"; } + .tinymce-mobile-icon-italic::before { content: "\e23f"; } + .tinymce-mobile-icon-unordered-list::before { content: "\e241"; } + .tinymce-mobile-icon-ordered-list::before { content: "\e242"; } + .tinymce-mobile-icon-font-size::before { content: "\e245"; } + .tinymce-mobile-icon-underline::before { content: "\e249"; } + .tinymce-mobile-icon-link::before { content: "\e157"; } + .tinymce-mobile-icon-unlink::before { content: "\eca2"; } + .tinymce-mobile-icon-color::before { content: "\e891"; } + .tinymce-mobile-icon-previous::before { content: "\e314"; } + .tinymce-mobile-icon-next::before { content: "\e315"; } + .tinymce-mobile-icon-large-font::before, .tinymce-mobile-icon-style-formats::before { content: "\e264"; } + .tinymce-mobile-icon-undo::before { content: "\e166"; } + .tinymce-mobile-icon-redo::before { content: "\e15a"; } + .tinymce-mobile-icon-removeformat::before { content: "\e239"; } + .tinymce-mobile-icon-small-font::before { content: "\e906"; } + .tinymce-mobile-icon-readonly-back::before, .tinymce-mobile-format-matches::after { content: "\e5ca"; } + .tinymce-mobile-icon-small-heading::before { content: "small"; } + .tinymce-mobile-icon-large-heading::before { content: "large"; } + .tinymce-mobile-icon-small-heading::before, .tinymce-mobile-icon-large-heading::before { font-family: sans-serif; font-size: 80%; } + .tinymce-mobile-mask-edit-icon::before { content: "\e254"; } + .tinymce-mobile-icon-back::before { content: "\e5c4"; } + .tinymce-mobile-icon-heading::before { /* TODO: Translate */ content: "Headings"; @@ -121,18 +152,22 @@ font-size: 80%; font-weight: bold; } + .tinymce-mobile-icon-h1::before { content: "H1"; font-weight: bold; } + .tinymce-mobile-icon-h2::before { content: "H2"; font-weight: bold; } + .tinymce-mobile-icon-h3::before { content: "H3"; font-weight: bold; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask { align-items: center; display: flex; @@ -143,6 +178,7 @@ top: 0; width: 100%; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container { align-items: center; border-radius: 50%; @@ -152,6 +188,7 @@ font-size: 1em; justify-content: space-between; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item { align-items: center; display: flex; @@ -160,6 +197,7 @@ height: 2.1em; width: 2.1em; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section { align-items: center; display: flex; @@ -167,11 +205,13 @@ flex-direction: column; font-size: 1em; } -@media only screen and (min-device-width:700px) { + +@media only screen and (min-device-width: 700px) { .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section { font-size: 1.2em; } } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon { align-items: center; display: flex; @@ -182,13 +222,16 @@ background-color: white; color: #207ab7; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before { content: "\e900"; font-family: 'tinymce-mobile', sans-serif; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon { z-index: 2; } + .tinymce-mobile-android-container.tinymce-mobile-android-maximized { background: #ffffff; border: none; @@ -200,30 +243,37 @@ right: 0; top: 0; } + .tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) { position: relative; } + .tinymce-mobile-android-container .tinymce-mobile-editor-socket { display: flex; flex-grow: 1; } + .tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe { display: flex !important; flex-grow: 1; height: auto !important; } + .tinymce-mobile-android-scroll-reload { overflow: hidden; } + :not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar { margin-top: 23px; } + .tinymce-mobile-toolstrip { background: #fff; display: flex; flex: 0 0 auto; z-index: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar { align-items: center; background-color: #fff; @@ -234,28 +284,34 @@ width: 100%; /* Make it no larger than the toolstrip, so that it needs to scroll */ } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group { align-items: center; display: flex; height: 100%; flex-shrink: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div { align-items: center; display: flex; height: 100%; flex: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container { background: #f44336; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group { flex-grow: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item { padding-left: 0.5em; padding-right: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button { align-items: center; display: flex; @@ -263,18 +319,22 @@ margin-left: 2px; margin-right: 2px; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #c8cbcf; color: #cccccc; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type { background: #207ab7; color: #eceff1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar { /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */ } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group { align-items: center; display: flex; @@ -285,6 +345,7 @@ /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */ /* For widgets like the colour picker, use the whole height */ } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog { display: flex; min-height: 1.5em; @@ -294,29 +355,34 @@ position: relative; width: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain { display: flex; height: 100%; transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s; width: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen { display: flex; flex: 0 0 auto; justify-content: space-between; width: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input { font-family: Sans-serif; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container { display: flex; flex-grow: 1; position: relative; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x { -ms-grid-row-align: center; - align-self: center; + align-self: center; background: inherit; border: none; border-radius: 50%; @@ -328,14 +394,17 @@ position: absolute; right: 0; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x { display: none; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next { align-items: center; display: flex; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before { align-items: center; @@ -345,10 +414,12 @@ padding-left: 0.5em; padding-right: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before { visibility: hidden; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item { color: #cccccc; font-size: 10px; @@ -356,19 +427,23 @@ margin: 0 2px; padding-top: 3px; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active { color: #c8cbcf; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before { margin-left: 0.5em; margin-right: 0.9em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before { margin-left: 0.9em; margin-right: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider { display: flex; flex: 1; @@ -377,12 +452,14 @@ padding: 0.28em 0; position: relative; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container { align-items: center; display: flex; flex-grow: 1; height: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line { background: #cccccc; display: flex; @@ -391,16 +468,19 @@ margin-bottom: 0.3em; margin-top: 0.3em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container { padding-left: 2em; padding-right: 2em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container { align-items: center; display: flex; flex-grow: 1; height: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient { background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%); display: flex; @@ -409,6 +489,7 @@ margin-bottom: 0.3em; margin-top: 0.3em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black { /* Not part of theming */ background: black; @@ -417,6 +498,7 @@ margin-top: 0.3em; width: 1.2em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white { /* Not part of theming */ background: white; @@ -425,6 +507,7 @@ margin-top: 0.3em; width: 1.2em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb { /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is @@ -448,9 +531,11 @@ transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1); width: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active { border: 0.5em solid rgba(136, 136, 136, 0.39); } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div { align-items: center; @@ -458,20 +543,25 @@ height: 100%; flex: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper { flex-direction: column; justify-content: center; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item { align-items: center; display: flex; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) { height: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container { display: flex; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input { background: #ffffff; border: none; @@ -483,14 +573,17 @@ padding-left: 5px; padding-top: 0.1em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #888; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder { /* WebKit, Blink, Edge */ color: #888; } + /* dropup */ .tinymce-mobile-dropup { background: white; @@ -498,32 +591,40 @@ overflow: hidden; width: 100%; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking { transition: height 0.3s ease-out; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-growing { transition: height 0.3s ease-in; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-closed { flex-grow: 0; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) { flex-grow: 1; } + /* TODO min-height for device size and orientation */ .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) { min-height: 200px; } + @media only screen and (orientation: landscape) { .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) { min-height: 200px; } } -@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { + +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) { .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) { min-height: 150px; } } + /* styles menu */ .tinymce-mobile-styles-menu { font-family: sans-serif; @@ -532,6 +633,7 @@ position: relative; width: 100%; } + .tinymce-mobile-styles-menu [role="menu"] { display: flex; flex-direction: column; @@ -539,9 +641,11 @@ position: absolute; width: 100%; } + .tinymce-mobile-styles-menu [role="menu"].transitioning { transition: transform 0.5s ease-in-out; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-item { border-bottom: 1px solid #ddd; color: #455a64; @@ -550,11 +654,13 @@ padding: 1em 1em; position: relative; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before { color: #455a64; content: "\e314"; font-family: 'tinymce-mobile', sans-serif; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after { color: #455a64; content: "\e315"; @@ -564,6 +670,7 @@ position: absolute; right: 0; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after { font-family: 'tinymce-mobile', sans-serif; padding-left: 1em; @@ -571,6 +678,7 @@ position: absolute; right: 0; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-separator, .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser { align-items: center; @@ -582,53 +690,64 @@ padding-left: 1em; padding-right: 1em; } + .tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state], .tinymce-mobile-styles-menu [data-transitioning-state="before"] { transform: translate(-100%); } + .tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state], .tinymce-mobile-styles-menu [data-transitioning-state="current"] { transform: translate(0%); } + .tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state], .tinymce-mobile-styles-menu [data-transitioning-state="after"] { transform: translate(100%); } + @font-face { font-family: 'tinymce-mobile'; font-style: normal; font-weight: normal; src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff'); } + @media (min-device-width: 700px) { .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input { font-size: 25px; } } + @media (max-device-width: 700px) { .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input { font-size: 18px; } } + .tinymce-mobile-icon { font-family: 'tinymce-mobile', sans-serif; } + .mixin-flex-and-centre { align-items: center; display: flex; justify-content: center; } + .mixin-flex-bar { align-items: center; display: flex; height: 100%; } + .tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe { background-color: #fff; width: 100%; } + .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon { /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */ background-color: #207ab7; @@ -644,21 +763,26 @@ display: flex; justify-content: center; } -@media only screen and (min-device-width:700px) { + +@media only screen and (min-device-width: 700px) { .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon { font-size: 1.2em; } } + .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket { height: 300px; overflow: hidden; } + .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe { height: 100%; } + .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip { display: none; } + /* Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets increased and the whole body becomes scrollable. It's important! @@ -666,7 +790,8 @@ input[type="file"]::-webkit-file-upload-button { display: none; } -@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { + +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) { .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon { bottom: 50%; } diff --git a/frontend/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css b/frontend/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css index 715978b5cb..16f4d30554 100644 --- a/frontend/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css +++ b/frontend/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css @@ -7,6 +7,7 @@ body.tox-dialog__disable-scroll { overflow: hidden; } + .tox-fullscreen { border: 0; height: 100%; @@ -14,23 +15,27 @@ body.tox-dialog__disable-scroll { margin: 0; overflow: hidden; -ms-scroll-chaining: none; - overscroll-behavior: none; + overscroll-behavior: none; padding: 0; position: fixed; top: 0; touch-action: pinch-zoom; width: 100%; } + .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle { display: none; } + .tox.tox-tinymce.tox-fullscreen { background-color: transparent; z-index: 1200; } + .tox-shadowhost.tox-fullscreen { z-index: 1200; } + .tox-fullscreen .tox.tox-tinymce-aux, .tox-fullscreen ~ .tox.tox-tinymce-aux { z-index: 1201; diff --git a/frontend/public/tinymce/skins/ui/oxide/content.css b/frontend/public/tinymce/skins/ui/oxide/content.css index efae400b10..2365440e98 100644 --- a/frontend/public/tinymce/skins/ui/oxide/content.css +++ b/frontend/public/tinymce/skins/ui/oxide/content.css @@ -15,22 +15,27 @@ -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; - user-select: all; + user-select: all; width: 8px !important; } + .mce-content-body .mce-item-anchor[data-mce-selected] { outline-offset: 1px; } + .tox-comments-visible .tox-comment { background-color: #fff0b7; } + .tox-comments-visible .tox-comment--active { background-color: #ffe168; } + .tox-checklist > li:not(.tox-checklist--hidden) { list-style: none; margin: 0.25em 0; } + .tox-checklist > li:not(.tox-checklist--hidden)::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); cursor: pointer; @@ -40,13 +45,16 @@ position: absolute; width: 1em; } + .tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); } + [dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before { margin-left: 0; margin-right: -1.5em; } + /* stylelint-disable */ /* http://prismjs.com/ */ /** @@ -73,6 +81,7 @@ pre[class*="language-"] { -ms-hyphens: none; hyphens: none; } + pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, @@ -80,6 +89,7 @@ code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } + pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, @@ -87,40 +97,48 @@ code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } + @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } + /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; } + :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } + /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } + .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } + .token.punctuation { color: #999; } + .namespace { opacity: 0.7; } + .token.property, .token.tag, .token.boolean, @@ -130,6 +148,7 @@ pre[class*="language-"] { .token.deleted { color: #905; } + .token.selector, .token.attr-name, .token.string, @@ -138,6 +157,7 @@ pre[class*="language-"] { .token.inserted { color: #690; } + .token.operator, .token.entity, .token.url, @@ -146,43 +166,53 @@ pre[class*="language-"] { color: #9a6e3a; background: hsla(0, 0%, 100%, 0.5); } + .token.atrule, .token.attr-value, .token.keyword { color: #07a; } + .token.function, .token.class-name { color: #DD4A68; } + .token.regex, .token.important, .token.variable { color: #e90; } + .token.important, .token.bold { font-weight: bold; } + .token.italic { font-style: italic; } + .token.entity { cursor: help; } + /* stylelint-enable */ .mce-content-body { overflow-wrap: break-word; word-wrap: break-word; } + .mce-content-body .mce-visual-caret { background-color: black; background-color: currentColor; position: absolute; } + .mce-content-body .mce-visual-caret-hidden { display: none; } + .mce-content-body *[data-mce-caret] { left: -1000px; margin: 0; @@ -191,31 +221,39 @@ pre[class*="language-"] { right: auto; top: 0; } + .mce-content-body .mce-offscreen-selection { left: -2000000px; max-width: 1000000px; position: absolute; } + .mce-content-body *[contentEditable=false] { cursor: default; } + .mce-content-body *[contentEditable=true] { cursor: text; } + .tox-cursor-format-painter { cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default; } + .mce-content-body figure.align-left { float: left; } + .mce-content-body figure.align-right { float: right; } + .mce-content-body figure.image.align-center { display: table; margin-left: auto; margin-right: auto; } + .mce-preview-object { border: 1px solid gray; display: inline-block; @@ -223,6 +261,7 @@ pre[class*="language-"] { margin: 0 2px 0 2px; position: relative; } + .mce-preview-object .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -231,13 +270,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-preview-object[data-mce-selected="2"] .mce-shim { display: none; } + .mce-object { background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center; border: 1px dashed #aaa; } + .mce-pagebreak { border: 1px dashed #aaa; cursor: default; @@ -247,11 +289,13 @@ pre[class*="language-"] { page-break-before: always; width: 100%; } + @media print { .mce-pagebreak { border: 0; } } + .tiny-pageembed .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -260,13 +304,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .tiny-pageembed[data-mce-selected="2"] .mce-shim { display: none; } + .tiny-pageembed { display: inline-block; position: relative; } + .tiny-pageembed--21by9, .tiny-pageembed--16by9, .tiny-pageembed--4by3, @@ -277,18 +324,23 @@ pre[class*="language-"] { position: relative; width: 100%; } + .tiny-pageembed--21by9 { padding-top: 42.857143%; } + .tiny-pageembed--16by9 { padding-top: 56.25%; } + .tiny-pageembed--4by3 { padding-top: 75%; } + .tiny-pageembed--1by1 { padding-top: 100%; } + .tiny-pageembed--21by9 iframe, .tiny-pageembed--16by9 iframe, .tiny-pageembed--4by3 iframe, @@ -300,20 +352,25 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-content-body[data-mce-placeholder] { position: relative; } + .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { color: rgba(34, 47, 62, 0.7); content: attr(data-mce-placeholder); position: absolute; } + .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before { left: 1px; } + .mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before { right: 1px; } + .mce-content-body div.mce-resizehandle { background-color: #4099ff; border-color: #4099ff; @@ -325,24 +382,31 @@ pre[class*="language-"] { width: 10px; z-index: 10000; } + .mce-content-body div.mce-resizehandle:hover { background-color: #4099ff; } + .mce-content-body div.mce-resizehandle:nth-of-type(1) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(2) { cursor: nesw-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(3) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(4) { cursor: nesw-resize; } + .mce-content-body .mce-resize-backdrop { z-index: 10000; } + .mce-content-body .mce-clonedresizable { cursor: default; opacity: 0.5; @@ -350,10 +414,12 @@ pre[class*="language-"] { position: absolute; z-index: 10001; } + .mce-content-body .mce-clonedresizable.mce-resizetable-columns th, .mce-content-body .mce-clonedresizable.mce-resizetable-columns td { border: 0; } + .mce-content-body .mce-resize-helper { background: #555; background: rgba(0, 0, 0, 0.75); @@ -370,9 +436,11 @@ pre[class*="language-"] { white-space: nowrap; z-index: 10002; } + .tox-rtc-user-selection { position: relative; } + .tox-rtc-user-cursor { bottom: 0; cursor: default; @@ -380,6 +448,7 @@ pre[class*="language-"] { top: 0; width: 2px; } + .tox-rtc-user-cursor::before { background-color: inherit; border-radius: 50%; @@ -391,6 +460,7 @@ pre[class*="language-"] { top: -3px; width: 8px; } + .tox-rtc-user-cursor:hover::after { background-color: inherit; border-radius: 100px; @@ -409,52 +479,66 @@ pre[class*="language-"] { white-space: nowrap; z-index: 1000; } + .tox-rtc-user-selection--1 .tox-rtc-user-cursor { background-color: #2dc26b; } + .tox-rtc-user-selection--2 .tox-rtc-user-cursor { background-color: #e03e2d; } + .tox-rtc-user-selection--3 .tox-rtc-user-cursor { background-color: #f1c40f; } + .tox-rtc-user-selection--4 .tox-rtc-user-cursor { background-color: #3598db; } + .tox-rtc-user-selection--5 .tox-rtc-user-cursor { background-color: #b96ad9; } + .tox-rtc-user-selection--6 .tox-rtc-user-cursor { background-color: #e67e23; } + .tox-rtc-user-selection--7 .tox-rtc-user-cursor { background-color: #aaa69d; } + .tox-rtc-user-selection--8 .tox-rtc-user-cursor { background-color: #f368e0; } + .tox-rtc-remote-image { background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center; border: 1px solid #ccc; min-height: 240px; min-width: 320px; } + .mce-match-marker { background: #aaa; color: #fff; } + .mce-match-marker-selected { background: #39f; color: #fff; } + .mce-match-marker-selected::-moz-selection { background: #39f; color: #fff; } + .mce-match-marker-selected::selection { background: #39f; color: #fff; } + .mce-content-body img[data-mce-selected], .mce-content-body video[data-mce-selected], .mce-content-body audio[data-mce-selected], @@ -463,51 +547,63 @@ pre[class*="language-"] { .mce-content-body table[data-mce-selected] { outline: 3px solid #b4d7ff; } + .mce-content-body hr[data-mce-selected] { outline: 3px solid #b4d7ff; outline-offset: 1px; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:focus { outline: 3px solid #b4d7ff; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:hover { outline: 3px solid #b4d7ff; } + .mce-content-body *[contentEditable=false][data-mce-selected] { cursor: not-allowed; outline: 3px solid #b4d7ff; } + .mce-content-body.mce-content-readonly *[contentEditable=true]:focus, .mce-content-body.mce-content-readonly *[contentEditable=true]:hover { outline: none; } + .mce-content-body *[data-mce-selected="inline-boundary"] { background-color: #b4d7ff; } + .mce-content-body .mce-edit-focus { outline: 3px solid #b4d7ff; } + .mce-content-body td[data-mce-selected], .mce-content-body th[data-mce-selected] { position: relative; } + .mce-content-body td[data-mce-selected]::-moz-selection, .mce-content-body th[data-mce-selected]::-moz-selection { background: none; } + .mce-content-body td[data-mce-selected]::selection, .mce-content-body th[data-mce-selected]::selection { background: none; } + .mce-content-body td[data-mce-selected] *, .mce-content-body th[data-mce-selected] * { outline: none; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { background-color: rgba(180, 215, 255, 0.7); @@ -520,18 +616,22 @@ pre[class*="language-"] { right: -1px; top: -1px; } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { border-color: rgba(0, 84, 180, 0.7); } } + .mce-content-body img::-moz-selection { background: none; } + .mce-content-body img::selection { background: none; } + .ephox-snooker-resizer-bar { background-color: #b4d7ff; opacity: 0; @@ -540,15 +640,19 @@ pre[class*="language-"] { -ms-user-select: none; user-select: none; } + .ephox-snooker-resizer-cols { cursor: col-resize; } + .ephox-snooker-resizer-rows { cursor: row-resize; } + .ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging { opacity: 1; } + .mce-spellchecker-word { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -557,6 +661,7 @@ pre[class*="language-"] { cursor: default; height: 2rem; } + .mce-spellchecker-grammar { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -564,15 +669,19 @@ pre[class*="language-"] { background-size: auto 6px; cursor: default; } + .mce-toc { border: 1px solid gray; } + .mce-toc h2 { margin: 4px; } + .mce-toc li { list-style-type: none; } + table[style*="border-width: 0px"], .mce-item-table:not([border]), .mce-item-table[border="0"], @@ -587,6 +696,7 @@ table[style*="border-width: 0px"] caption, .mce-item-table[border="0"] caption { border: 1px dashed #bbb; } + .mce-visualblocks p, .mce-visualblocks h1, .mce-visualblocks h2, @@ -612,66 +722,87 @@ table[style*="border-width: 0px"] caption, margin-left: 3px; padding-top: 10px; } + .mce-visualblocks p { background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7); } + .mce-visualblocks h1 { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==); } + .mce-visualblocks h2 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==); } + .mce-visualblocks h3 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7); } + .mce-visualblocks h4 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==); } + .mce-visualblocks h5 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==); } + .mce-visualblocks h6 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==); } + .mce-visualblocks div:not([data-mce-bogus]) { background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7); } + .mce-visualblocks section { background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=); } + .mce-visualblocks article { background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7); } + .mce-visualblocks blockquote { background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7); } + .mce-visualblocks address { background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=); } + .mce-visualblocks pre { background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==); } + .mce-visualblocks figure { background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7); } + .mce-visualblocks figcaption { border: 1px dashed #bbb; } + .mce-visualblocks hgroup { background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7); } + .mce-visualblocks aside { background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=); } + .mce-visualblocks ul { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==); } + .mce-visualblocks ol { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==); } + .mce-visualblocks dl { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==); } + .mce-visualblocks:not([dir=rtl]) p, .mce-visualblocks:not([dir=rtl]) h1, .mce-visualblocks:not([dir=rtl]) h2, @@ -694,6 +825,7 @@ table[style*="border-width: 0px"] caption, .mce-visualblocks:not([dir=rtl]) dl { margin-left: 3px; } + .mce-visualblocks[dir=rtl] p, .mce-visualblocks[dir=rtl] h1, .mce-visualblocks[dir=rtl] h2, @@ -717,16 +849,20 @@ table[style*="border-width: 0px"] caption, background-position-x: right; margin-right: 3px; } + .mce-nbsp, .mce-shy { background: #aaa; } + .mce-shy::after { content: '-'; } + body { font-family: sans-serif; } + table { border-collapse: collapse; } diff --git a/frontend/public/tinymce/skins/ui/oxide/content.inline.css b/frontend/public/tinymce/skins/ui/oxide/content.inline.css index df6ed08b58..dcffbcae42 100644 --- a/frontend/public/tinymce/skins/ui/oxide/content.inline.css +++ b/frontend/public/tinymce/skins/ui/oxide/content.inline.css @@ -15,22 +15,27 @@ -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; - user-select: all; + user-select: all; width: 8px !important; } + .mce-content-body .mce-item-anchor[data-mce-selected] { outline-offset: 1px; } + .tox-comments-visible .tox-comment { background-color: #fff0b7; } + .tox-comments-visible .tox-comment--active { background-color: #ffe168; } + .tox-checklist > li:not(.tox-checklist--hidden) { list-style: none; margin: 0.25em 0; } + .tox-checklist > li:not(.tox-checklist--hidden)::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); cursor: pointer; @@ -40,13 +45,16 @@ position: absolute; width: 1em; } + .tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); } + [dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before { margin-left: 0; margin-right: -1.5em; } + /* stylelint-disable */ /* http://prismjs.com/ */ /** @@ -73,6 +81,7 @@ pre[class*="language-"] { -ms-hyphens: none; hyphens: none; } + pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, @@ -80,6 +89,7 @@ code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } + pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, @@ -87,40 +97,48 @@ code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } + @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } + /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; } + :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } + /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } + .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } + .token.punctuation { color: #999; } + .namespace { opacity: 0.7; } + .token.property, .token.tag, .token.boolean, @@ -130,6 +148,7 @@ pre[class*="language-"] { .token.deleted { color: #905; } + .token.selector, .token.attr-name, .token.string, @@ -138,6 +157,7 @@ pre[class*="language-"] { .token.inserted { color: #690; } + .token.operator, .token.entity, .token.url, @@ -146,43 +166,53 @@ pre[class*="language-"] { color: #9a6e3a; background: hsla(0, 0%, 100%, 0.5); } + .token.atrule, .token.attr-value, .token.keyword { color: #07a; } + .token.function, .token.class-name { color: #DD4A68; } + .token.regex, .token.important, .token.variable { color: #e90; } + .token.important, .token.bold { font-weight: bold; } + .token.italic { font-style: italic; } + .token.entity { cursor: help; } + /* stylelint-enable */ .mce-content-body { overflow-wrap: break-word; word-wrap: break-word; } + .mce-content-body .mce-visual-caret { background-color: black; background-color: currentColor; position: absolute; } + .mce-content-body .mce-visual-caret-hidden { display: none; } + .mce-content-body *[data-mce-caret] { left: -1000px; margin: 0; @@ -191,31 +221,39 @@ pre[class*="language-"] { right: auto; top: 0; } + .mce-content-body .mce-offscreen-selection { left: -2000000px; max-width: 1000000px; position: absolute; } + .mce-content-body *[contentEditable=false] { cursor: default; } + .mce-content-body *[contentEditable=true] { cursor: text; } + .tox-cursor-format-painter { cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default; } + .mce-content-body figure.align-left { float: left; } + .mce-content-body figure.align-right { float: right; } + .mce-content-body figure.image.align-center { display: table; margin-left: auto; margin-right: auto; } + .mce-preview-object { border: 1px solid gray; display: inline-block; @@ -223,6 +261,7 @@ pre[class*="language-"] { margin: 0 2px 0 2px; position: relative; } + .mce-preview-object .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -231,13 +270,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-preview-object[data-mce-selected="2"] .mce-shim { display: none; } + .mce-object { background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center; border: 1px dashed #aaa; } + .mce-pagebreak { border: 1px dashed #aaa; cursor: default; @@ -247,11 +289,13 @@ pre[class*="language-"] { page-break-before: always; width: 100%; } + @media print { .mce-pagebreak { border: 0; } } + .tiny-pageembed .mce-shim { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); height: 100%; @@ -260,13 +304,16 @@ pre[class*="language-"] { top: 0; width: 100%; } + .tiny-pageembed[data-mce-selected="2"] .mce-shim { display: none; } + .tiny-pageembed { display: inline-block; position: relative; } + .tiny-pageembed--21by9, .tiny-pageembed--16by9, .tiny-pageembed--4by3, @@ -277,18 +324,23 @@ pre[class*="language-"] { position: relative; width: 100%; } + .tiny-pageembed--21by9 { padding-top: 42.857143%; } + .tiny-pageembed--16by9 { padding-top: 56.25%; } + .tiny-pageembed--4by3 { padding-top: 75%; } + .tiny-pageembed--1by1 { padding-top: 100%; } + .tiny-pageembed--21by9 iframe, .tiny-pageembed--16by9 iframe, .tiny-pageembed--4by3 iframe, @@ -300,20 +352,25 @@ pre[class*="language-"] { top: 0; width: 100%; } + .mce-content-body[data-mce-placeholder] { position: relative; } + .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { color: rgba(34, 47, 62, 0.7); content: attr(data-mce-placeholder); position: absolute; } + .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before { left: 1px; } + .mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before { right: 1px; } + .mce-content-body div.mce-resizehandle { background-color: #4099ff; border-color: #4099ff; @@ -325,24 +382,31 @@ pre[class*="language-"] { width: 10px; z-index: 10000; } + .mce-content-body div.mce-resizehandle:hover { background-color: #4099ff; } + .mce-content-body div.mce-resizehandle:nth-of-type(1) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(2) { cursor: nesw-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(3) { cursor: nwse-resize; } + .mce-content-body div.mce-resizehandle:nth-of-type(4) { cursor: nesw-resize; } + .mce-content-body .mce-resize-backdrop { z-index: 10000; } + .mce-content-body .mce-clonedresizable { cursor: default; opacity: 0.5; @@ -350,10 +414,12 @@ pre[class*="language-"] { position: absolute; z-index: 10001; } + .mce-content-body .mce-clonedresizable.mce-resizetable-columns th, .mce-content-body .mce-clonedresizable.mce-resizetable-columns td { border: 0; } + .mce-content-body .mce-resize-helper { background: #555; background: rgba(0, 0, 0, 0.75); @@ -370,9 +436,11 @@ pre[class*="language-"] { white-space: nowrap; z-index: 10002; } + .tox-rtc-user-selection { position: relative; } + .tox-rtc-user-cursor { bottom: 0; cursor: default; @@ -380,6 +448,7 @@ pre[class*="language-"] { top: 0; width: 2px; } + .tox-rtc-user-cursor::before { background-color: inherit; border-radius: 50%; @@ -391,6 +460,7 @@ pre[class*="language-"] { top: -3px; width: 8px; } + .tox-rtc-user-cursor:hover::after { background-color: inherit; border-radius: 100px; @@ -409,52 +479,66 @@ pre[class*="language-"] { white-space: nowrap; z-index: 1000; } + .tox-rtc-user-selection--1 .tox-rtc-user-cursor { background-color: #2dc26b; } + .tox-rtc-user-selection--2 .tox-rtc-user-cursor { background-color: #e03e2d; } + .tox-rtc-user-selection--3 .tox-rtc-user-cursor { background-color: #f1c40f; } + .tox-rtc-user-selection--4 .tox-rtc-user-cursor { background-color: #3598db; } + .tox-rtc-user-selection--5 .tox-rtc-user-cursor { background-color: #b96ad9; } + .tox-rtc-user-selection--6 .tox-rtc-user-cursor { background-color: #e67e23; } + .tox-rtc-user-selection--7 .tox-rtc-user-cursor { background-color: #aaa69d; } + .tox-rtc-user-selection--8 .tox-rtc-user-cursor { background-color: #f368e0; } + .tox-rtc-remote-image { background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center; border: 1px solid #ccc; min-height: 240px; min-width: 320px; } + .mce-match-marker { background: #aaa; color: #fff; } + .mce-match-marker-selected { background: #39f; color: #fff; } + .mce-match-marker-selected::-moz-selection { background: #39f; color: #fff; } + .mce-match-marker-selected::selection { background: #39f; color: #fff; } + .mce-content-body img[data-mce-selected], .mce-content-body video[data-mce-selected], .mce-content-body audio[data-mce-selected], @@ -463,51 +547,63 @@ pre[class*="language-"] { .mce-content-body table[data-mce-selected] { outline: 3px solid #b4d7ff; } + .mce-content-body hr[data-mce-selected] { outline: 3px solid #b4d7ff; outline-offset: 1px; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:focus { outline: 3px solid #b4d7ff; } + .mce-content-body *[contentEditable=false] *[contentEditable=true]:hover { outline: 3px solid #b4d7ff; } + .mce-content-body *[contentEditable=false][data-mce-selected] { cursor: not-allowed; outline: 3px solid #b4d7ff; } + .mce-content-body.mce-content-readonly *[contentEditable=true]:focus, .mce-content-body.mce-content-readonly *[contentEditable=true]:hover { outline: none; } + .mce-content-body *[data-mce-selected="inline-boundary"] { background-color: #b4d7ff; } + .mce-content-body .mce-edit-focus { outline: 3px solid #b4d7ff; } + .mce-content-body td[data-mce-selected], .mce-content-body th[data-mce-selected] { position: relative; } + .mce-content-body td[data-mce-selected]::-moz-selection, .mce-content-body th[data-mce-selected]::-moz-selection { background: none; } + .mce-content-body td[data-mce-selected]::selection, .mce-content-body th[data-mce-selected]::selection { background: none; } + .mce-content-body td[data-mce-selected] *, .mce-content-body th[data-mce-selected] * { outline: none; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { background-color: rgba(180, 215, 255, 0.7); @@ -520,18 +616,22 @@ pre[class*="language-"] { right: -1px; top: -1px; } + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .mce-content-body td[data-mce-selected]::after, .mce-content-body th[data-mce-selected]::after { border-color: rgba(0, 84, 180, 0.7); } } + .mce-content-body img::-moz-selection { background: none; } + .mce-content-body img::selection { background: none; } + .ephox-snooker-resizer-bar { background-color: #b4d7ff; opacity: 0; @@ -540,15 +640,19 @@ pre[class*="language-"] { -ms-user-select: none; user-select: none; } + .ephox-snooker-resizer-cols { cursor: col-resize; } + .ephox-snooker-resizer-rows { cursor: row-resize; } + .ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging { opacity: 1; } + .mce-spellchecker-word { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -557,6 +661,7 @@ pre[class*="language-"] { cursor: default; height: 2rem; } + .mce-spellchecker-grammar { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A"); background-position: 0 calc(100% + 1px); @@ -564,15 +669,19 @@ pre[class*="language-"] { background-size: auto 6px; cursor: default; } + .mce-toc { border: 1px solid gray; } + .mce-toc h2 { margin: 4px; } + .mce-toc li { list-style-type: none; } + table[style*="border-width: 0px"], .mce-item-table:not([border]), .mce-item-table[border="0"], @@ -587,6 +696,7 @@ table[style*="border-width: 0px"] caption, .mce-item-table[border="0"] caption { border: 1px dashed #bbb; } + .mce-visualblocks p, .mce-visualblocks h1, .mce-visualblocks h2, @@ -612,66 +722,87 @@ table[style*="border-width: 0px"] caption, margin-left: 3px; padding-top: 10px; } + .mce-visualblocks p { background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7); } + .mce-visualblocks h1 { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==); } + .mce-visualblocks h2 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==); } + .mce-visualblocks h3 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7); } + .mce-visualblocks h4 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==); } + .mce-visualblocks h5 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==); } + .mce-visualblocks h6 { background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==); } + .mce-visualblocks div:not([data-mce-bogus]) { background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7); } + .mce-visualblocks section { background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=); } + .mce-visualblocks article { background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7); } + .mce-visualblocks blockquote { background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7); } + .mce-visualblocks address { background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=); } + .mce-visualblocks pre { background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==); } + .mce-visualblocks figure { background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7); } + .mce-visualblocks figcaption { border: 1px dashed #bbb; } + .mce-visualblocks hgroup { background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7); } + .mce-visualblocks aside { background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=); } + .mce-visualblocks ul { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==); } + .mce-visualblocks ol { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==); } + .mce-visualblocks dl { background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==); } + .mce-visualblocks:not([dir=rtl]) p, .mce-visualblocks:not([dir=rtl]) h1, .mce-visualblocks:not([dir=rtl]) h2, @@ -694,6 +825,7 @@ table[style*="border-width: 0px"] caption, .mce-visualblocks:not([dir=rtl]) dl { margin-left: 3px; } + .mce-visualblocks[dir=rtl] p, .mce-visualblocks[dir=rtl] h1, .mce-visualblocks[dir=rtl] h2, @@ -717,10 +849,12 @@ table[style*="border-width: 0px"] caption, background-position-x: right; margin-right: 3px; } + .mce-nbsp, .mce-shy { background: #aaa; } + .mce-shy::after { content: '-'; } diff --git a/frontend/public/tinymce/skins/ui/oxide/content.mobile.css b/frontend/public/tinymce/skins/ui/oxide/content.mobile.css index 4bdb8babcb..68f5f0ffe1 100644 --- a/frontend/public/tinymce/skins/ui/oxide/content.mobile.css +++ b/frontend/public/tinymce/skins/ui/oxide/content.mobile.css @@ -11,19 +11,24 @@ opacity: 0.5; position: absolute; } + body { -webkit-text-size-adjust: none; } + body img { /* this is related to the content margin */ max-width: 96vw; } + body table img { max-width: 95%; } + body { font-family: sans-serif; } + table { border-collapse: collapse; } diff --git a/frontend/public/tinymce/skins/ui/oxide/skin.css b/frontend/public/tinymce/skins/ui/oxide/skin.css index 4b47a7583d..e1c084d363 100644 --- a/frontend/public/tinymce/skins/ui/oxide/skin.css +++ b/frontend/public/tinymce/skins/ui/oxide/skin.css @@ -21,6 +21,7 @@ vertical-align: initial; white-space: normal; } + .tox *:not(svg):not(rect) { box-sizing: inherit; color: inherit; @@ -39,6 +40,7 @@ vertical-align: inherit; white-space: inherit; } + .tox *:not(svg):not(rect) { /* stylelint-disable-line no-duplicate-selectors */ background: transparent; @@ -53,14 +55,17 @@ position: static; width: auto; } + .tox:not([dir=rtl]) { direction: ltr; text-align: left; } + .tox[dir=rtl] { direction: rtl; text-align: right; } + .tox-tinymce { border: 1px solid #cccccc; border-radius: 0; @@ -73,32 +78,39 @@ position: relative; visibility: inherit !important; } + .tox-tinymce-inline { border: none; box-shadow: none; } + .tox-tinymce-inline .tox-editor-header { background-color: transparent; border: 1px solid #cccccc; border-radius: 0; box-shadow: none; } + .tox-tinymce-aux { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; z-index: 1300; } + .tox-tinymce *:focus, .tox-tinymce-aux *:focus { outline: none; } + button::-moz-focus-inner { border: 0; } + .tox .accessibility-issue__header { align-items: center; display: flex; margin-bottom: 4px; } + .tox .accessibility-issue__description { align-items: stretch; border: 1px solid #cccccc; @@ -106,127 +118,163 @@ button::-moz-focus-inner { display: flex; justify-content: space-between; } + .tox .accessibility-issue__description > div { padding-bottom: 4px; } + .tox .accessibility-issue__description > div > div { align-items: center; display: flex; margin-bottom: 4px; } + .tox .accessibility-issue__description > *:last-child:not(:only-child) { border-color: #cccccc; border-style: solid; } + .tox .accessibility-issue__repair { margin-top: 16px; } + .tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description { background-color: rgba(32, 122, 183, 0.1); border-color: rgba(32, 122, 183, 0.4); color: #222f3e; } + .tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child { border-color: rgba(32, 122, 183, 0.4); } + .tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 { color: #207ab7; } + .tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg { fill: #207ab7; } + .tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon { color: #207ab7; } + .tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description { background-color: rgba(255, 165, 0, 0.1); border-color: rgba(255, 165, 0, 0.5); color: #222f3e; } + .tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child { border-color: rgba(255, 165, 0, 0.5); } + .tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 { color: #cc8500; } + .tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg { fill: #cc8500; } + .tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon { color: #cc8500; } + .tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description { background-color: rgba(204, 0, 0, 0.1); border-color: rgba(204, 0, 0, 0.4); color: #222f3e; } + .tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child { border-color: rgba(204, 0, 0, 0.4); } + .tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 { color: #c00; } + .tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg { fill: #c00; } + .tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon { color: #c00; } + .tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description { background-color: rgba(120, 171, 70, 0.1); border-color: rgba(120, 171, 70, 0.4); color: #222f3e; } + .tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child { border-color: rgba(120, 171, 70, 0.4); } + .tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 { color: #78AB46; } + .tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg { fill: #78AB46; } + .tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon { color: #78AB46; } + .tox .tox-dialog__body-content .accessibility-issue__header h1, .tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 { margin-top: 0; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button { margin-left: 4px; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) { margin-left: auto; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description { padding: 4px 4px 4px 8px; } + .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child { border-left-width: 1px; padding-left: 4px; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button { margin-right: 4px; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) { margin-right: auto; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description { padding: 4px 8px 4px 4px; } + .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child { border-right-width: 1px; padding-right: 4px; } + .tox .tox-anchorbar { display: flex; flex: 0 0 auto; } + .tox .tox-bar { display: flex; flex: 0 0 auto; } + .tox .tox-button { background-color: #207ab7; background-image: none; @@ -255,6 +303,7 @@ button::-moz-focus-inner { text-transform: none; white-space: nowrap; } + .tox .tox-button[disabled] { background-color: #207ab7; background-image: none; @@ -263,6 +312,7 @@ button::-moz-focus-inner { color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } + .tox .tox-button:focus:not(:disabled) { background-color: #1c6ca1; background-image: none; @@ -270,6 +320,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button:hover:not(:disabled) { background-color: #1c6ca1; background-image: none; @@ -277,6 +328,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button:active:not(:disabled) { background-color: #185d8c; background-image: none; @@ -284,6 +336,7 @@ button::-moz-focus-inner { box-shadow: none; color: #fff; } + .tox .tox-button--secondary { background-color: #f0f0f0; background-image: none; @@ -304,6 +357,7 @@ button::-moz-focus-inner { text-decoration: none; text-transform: none; } + .tox .tox-button--secondary[disabled] { background-color: #f0f0f0; background-image: none; @@ -311,6 +365,7 @@ button::-moz-focus-inner { box-shadow: none; color: rgba(34, 47, 62, 0.5); } + .tox .tox-button--secondary:focus:not(:disabled) { background-color: #e3e3e3; background-image: none; @@ -318,6 +373,7 @@ button::-moz-focus-inner { box-shadow: none; color: #222f3e; } + .tox .tox-button--secondary:hover:not(:disabled) { background-color: #e3e3e3; background-image: none; @@ -325,6 +381,7 @@ button::-moz-focus-inner { box-shadow: none; color: #222f3e; } + .tox .tox-button--secondary:active:not(:disabled) { background-color: #d6d6d6; background-image: none; @@ -332,17 +389,20 @@ button::-moz-focus-inner { box-shadow: none; color: #222f3e; } + .tox .tox-button--icon, .tox .tox-button.tox-button--icon, .tox .tox-button.tox-button--secondary.tox-button--icon { padding: 4px; } + .tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg { display: block; fill: currentColor; } + .tox .tox-button-link { background: 0; border: none; @@ -357,45 +417,54 @@ button::-moz-focus-inner { padding: 0; white-space: nowrap; } + .tox .tox-button-link--sm { font-size: 14px; } + .tox .tox-button--naked { background-color: transparent; border-color: transparent; box-shadow: unset; color: #222f3e; } + .tox .tox-button--naked[disabled] { background-color: #f0f0f0; border-color: #f0f0f0; box-shadow: none; color: rgba(34, 47, 62, 0.5); } + .tox .tox-button--naked:hover:not(:disabled) { background-color: #e3e3e3; border-color: #e3e3e3; box-shadow: none; color: #222f3e; } + .tox .tox-button--naked:focus:not(:disabled) { background-color: #e3e3e3; border-color: #e3e3e3; box-shadow: none; color: #222f3e; } + .tox .tox-button--naked:active:not(:disabled) { background-color: #d6d6d6; border-color: #d6d6d6; box-shadow: none; color: #222f3e; } + .tox .tox-button--naked .tox-icon svg { fill: currentColor; } + .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) { color: #222f3e; } + .tox .tox-checkbox { align-items: center; border-radius: 3px; @@ -404,6 +473,7 @@ button::-moz-focus-inner { height: 36px; min-width: 36px; } + .tox .tox-checkbox__input { /* Hide from view but visible to screen readers */ height: 1px; @@ -412,6 +482,7 @@ button::-moz-focus-inner { top: auto; width: 1px; } + .tox .tox-checkbox__icons { align-items: center; border-radius: 3px; @@ -423,73 +494,94 @@ button::-moz-focus-inner { padding: calc(4px - 1px); width: 24px; } + .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: block; fill: rgba(34, 47, 62, 0.3); } + .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { display: none; fill: #207ab7; } + .tox .tox-checkbox__icons .tox-checkbox-icon__checked svg { display: none; fill: #207ab7; } + .tox .tox-checkbox--disabled { color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } + .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg { fill: rgba(34, 47, 62, 0.5); } + .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { fill: rgba(34, 47, 62, 0.5); } + .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { fill: rgba(34, 47, 62, 0.5); } + .tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: none; } + .tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg { display: block; } + .tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: none; } + .tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { display: block; } + .tox input.tox-checkbox__input:focus + .tox-checkbox__icons { border-radius: 3px; box-shadow: inset 0 0 0 1px #207ab7; padding: calc(4px - 1px); } + .tox:not([dir=rtl]) .tox-checkbox__label { margin-left: 4px; } + .tox:not([dir=rtl]) .tox-checkbox__input { left: -10000px; } + .tox:not([dir=rtl]) .tox-bar .tox-checkbox { margin-left: 4px; } + .tox[dir=rtl] .tox-checkbox__label { margin-right: 4px; } + .tox[dir=rtl] .tox-checkbox__input { right: -10000px; } + .tox[dir=rtl] .tox-bar .tox-checkbox { margin-right: 4px; } + .tox { /* stylelint-disable-next-line no-descending-specificity */ } + .tox .tox-collection--toolbar .tox-collection__group { display: flex; padding: 0; } + .tox .tox-collection--grid .tox-collection__group { display: flex; flex-wrap: wrap; @@ -498,6 +590,7 @@ button::-moz-focus-inner { overflow-y: auto; padding: 0; } + .tox .tox-collection--list .tox-collection__group { border-bottom-width: 0; border-color: #cccccc; @@ -507,9 +600,11 @@ button::-moz-focus-inner { border-top-width: 1px; padding: 4px 0; } + .tox .tox-collection--list .tox-collection__group:first-child { border-top-width: 0; } + .tox .tox-collection__group-heading { background-color: #e6e6e6; color: rgba(34, 47, 62, 0.7); @@ -523,10 +618,11 @@ button::-moz-focus-inner { text-transform: none; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .tox .tox-collection__item { align-items: center; color: #222f3e; @@ -534,54 +630,67 @@ button::-moz-focus-inner { display: flex; -webkit-touch-callout: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .tox .tox-collection--list .tox-collection__item { padding: 4px 8px; } + .tox .tox-collection--toolbar .tox-collection__item { border-radius: 3px; padding: 4px; } + .tox .tox-collection--grid .tox-collection__item { border-radius: 3px; padding: 4px; } + .tox .tox-collection--list .tox-collection__item--enabled { background-color: #fff; color: #222f3e; } + .tox .tox-collection--list .tox-collection__item--active { background-color: #dee0e2; } + .tox .tox-collection--toolbar .tox-collection__item--enabled { background-color: #c8cbcf; color: #222f3e; } + .tox .tox-collection--toolbar .tox-collection__item--active { background-color: #dee0e2; } + .tox .tox-collection--grid .tox-collection__item--enabled { background-color: #c8cbcf; color: #222f3e; } + .tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) { background-color: #dee0e2; color: #222f3e; } + .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #222f3e; } + .tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #222f3e; } + .tox .tox-collection__item--state-disabled { background-color: transparent; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } + .tox .tox-collection__item-icon, .tox .tox-collection__item-checkmark { align-items: center; @@ -590,14 +699,17 @@ button::-moz-focus-inner { justify-content: center; width: 24px; } + .tox .tox-collection__item-icon svg, .tox .tox-collection__item-checkmark svg { fill: currentColor; } + .tox .tox-collection--toolbar-lg .tox-collection__item-icon { height: 48px; width: 48px; } + .tox .tox-collection__item-label { color: currentColor; display: inline-block; @@ -610,6 +722,7 @@ button::-moz-focus-inner { text-transform: none; word-break: break-all; } + .tox .tox-collection__item-accessory { color: rgba(34, 47, 62, 0.7); display: inline-block; @@ -618,25 +731,31 @@ button::-moz-focus-inner { line-height: 24px; text-transform: none; } + .tox .tox-collection__item-caret { align-items: center; display: flex; min-height: 24px; } + .tox .tox-collection__item-caret::after { content: ''; font-size: 0; min-height: inherit; } + .tox .tox-collection__item-caret svg { fill: #222f3e; } + .tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg { display: none; } + .tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark { display: none; } + .tox .tox-collection--horizontal { background-color: #fff; border: 1px solid #cccccc; @@ -650,6 +769,7 @@ button::-moz-focus-inner { overflow-x: auto; padding: 0; } + .tox .tox-collection--horizontal .tox-collection__group { align-items: center; display: flex; @@ -657,125 +777,159 @@ button::-moz-focus-inner { margin: 0; padding: 0 4px; } + .tox .tox-collection--horizontal .tox-collection__item { height: 34px; margin: 2px 0 3px 0; padding: 0 4px; } + .tox .tox-collection--horizontal .tox-collection__item-label { white-space: nowrap; } + .tox .tox-collection--horizontal .tox-collection__item-caret { margin-left: 4px; } + .tox .tox-collection__item-container { display: flex; } + .tox .tox-collection__item-container--row { align-items: center; flex: 1 1 auto; flex-direction: row; } + .tox .tox-collection__item-container--row.tox-collection__item-container--align-left { margin-right: auto; } + .tox .tox-collection__item-container--row.tox-collection__item-container--align-right { justify-content: flex-end; margin-left: auto; } + .tox .tox-collection__item-container--row.tox-collection__item-container--valign-top { align-items: flex-start; margin-bottom: auto; } + .tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle { align-items: center; } + .tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom { align-items: flex-end; margin-top: auto; } + .tox .tox-collection__item-container--column { -ms-grid-row-align: center; - align-self: center; + align-self: center; flex: 1 1 auto; flex-direction: column; } + .tox .tox-collection__item-container--column.tox-collection__item-container--align-left { align-items: flex-start; } + .tox .tox-collection__item-container--column.tox-collection__item-container--align-right { align-items: flex-end; } + .tox .tox-collection__item-container--column.tox-collection__item-container--valign-top { align-self: flex-start; } + .tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle { -ms-grid-row-align: center; - align-self: center; + align-self: center; } + .tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom { align-self: flex-end; } + .tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-right: 1px solid #cccccc; } + .tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) { margin-left: 8px; } + .tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child { margin-left: 4px; } + .tox:not([dir=rtl]) .tox-collection__item-accessory { margin-left: 16px; text-align: right; } + .tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret { margin-left: 16px; } + .tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-left: 1px solid #cccccc; } + .tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) { margin-right: 8px; } + .tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child { margin-right: 4px; } + .tox[dir=rtl] .tox-collection__item-icon-rtl { /* stylelint-disable-next-line no-descending-specificity */ } + .tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg { transform: rotateY(180deg); } + .tox[dir=rtl] .tox-collection__item-accessory { margin-right: 16px; text-align: left; } + .tox[dir=rtl] .tox-collection .tox-collection__item-caret { margin-right: 16px; transform: rotateY(180deg); } + .tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret { margin-right: 4px; } + .tox .tox-color-picker-container { display: flex; flex-direction: row; height: 225px; margin: 0; } + .tox .tox-sv-palette { box-sizing: border-box; display: flex; height: 100%; } + .tox .tox-sv-palette-spectrum { height: 100%; } + .tox .tox-sv-palette, .tox .tox-sv-palette-spectrum { width: 225px; } + .tox .tox-sv-palette-thumb { background: none; border: 1px solid black; @@ -785,6 +939,7 @@ button::-moz-focus-inner { position: absolute; width: 12px; } + .tox .tox-sv-palette-inner-thumb { border: 1px solid white; border-radius: 50%; @@ -792,20 +947,24 @@ button::-moz-focus-inner { position: absolute; width: 10px; } + .tox .tox-hue-slider { box-sizing: border-box; height: 100%; width: 25px; } + .tox .tox-hue-slider-spectrum { background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00); height: 100%; width: 100%; } + .tox .tox-hue-slider, .tox .tox-hue-slider-spectrum { width: 20px; } + .tox .tox-hue-slider-thumb { background: white; border: 1px solid black; @@ -813,11 +972,13 @@ button::-moz-focus-inner { height: 4px; width: 100%; } + .tox .tox-rgb-form { display: flex; flex-direction: column; justify-content: space-between; } + .tox .tox-rgb-form div { align-items: center; display: flex; @@ -825,72 +986,91 @@ button::-moz-focus-inner { margin-bottom: 5px; width: inherit; } + .tox .tox-rgb-form input { width: 6em; } + .tox .tox-rgb-form input.tox-invalid { /* Need !important to override Chrome's focus styling unfortunately */ border: 1px solid red !important; } + .tox .tox-rgb-form .tox-rgba-preview { border: 1px solid black; flex-grow: 2; margin-bottom: 0; } + .tox:not([dir=rtl]) .tox-sv-palette { margin-right: 15px; } + .tox:not([dir=rtl]) .tox-hue-slider { margin-right: 15px; } + .tox:not([dir=rtl]) .tox-hue-slider-thumb { margin-left: -1px; } + .tox:not([dir=rtl]) .tox-rgb-form label { margin-right: 0.5em; } + .tox[dir=rtl] .tox-sv-palette { margin-left: 15px; } + .tox[dir=rtl] .tox-hue-slider { margin-left: 15px; } + .tox[dir=rtl] .tox-hue-slider-thumb { margin-right: -1px; } + .tox[dir=rtl] .tox-rgb-form label { margin-left: 0.5em; } + .tox .tox-toolbar .tox-swatches, .tox .tox-toolbar__primary .tox-swatches, .tox .tox-toolbar__overflow .tox-swatches { margin: 2px 0 3px 4px; } + .tox .tox-collection--list .tox-collection__group .tox-swatches-menu { border: 0; margin: -4px 0; } + .tox .tox-swatches__row { display: flex; } + .tox .tox-swatch { height: 30px; transition: transform 0.15s, box-shadow 0.15s; width: 30px; } + .tox .tox-swatch:hover, .tox .tox-swatch:focus { box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset; transform: scale(0.8); } + .tox .tox-swatch--remove { align-items: center; display: flex; justify-content: center; } + .tox .tox-swatch--remove svg path { stroke: #e74c3c; } + .tox .tox-swatches__picker-btn { align-items: center; background-color: transparent; @@ -903,26 +1083,33 @@ button::-moz-focus-inner { padding: 0; width: 30px; } + .tox .tox-swatches__picker-btn svg { height: 24px; width: 24px; } + .tox .tox-swatches__picker-btn:hover { background: #dee0e2; } + .tox:not([dir=rtl]) .tox-swatches__picker-btn { margin-left: auto; } + .tox[dir=rtl] .tox-swatches__picker-btn { margin-right: auto; } + .tox .tox-comment-thread { background: #fff; position: relative; } + .tox .tox-comment-thread > *:not(:first-child) { margin-top: 8px; } + .tox .tox-comment { background: #fff; border: 1px solid #cccccc; @@ -931,16 +1118,19 @@ button::-moz-focus-inner { padding: 8px 8px 16px 8px; position: relative; } + .tox .tox-comment__header { align-items: center; color: #222f3e; display: flex; justify-content: space-between; } + .tox .tox-comment__date { color: rgba(34, 47, 62, 0.7); font-size: 12px; } + .tox .tox-comment__body { color: #222f3e; font-size: 14px; @@ -951,26 +1141,32 @@ button::-moz-focus-inner { position: relative; text-transform: initial; } + .tox .tox-comment__body textarea { resize: none; white-space: normal; width: 100%; } + .tox .tox-comment__expander { padding-top: 8px; } + .tox .tox-comment__expander p { color: rgba(34, 47, 62, 0.7); font-size: 14px; font-style: normal; } + .tox .tox-comment__body p { margin: 0; } + .tox .tox-comment__buttonspacing { padding-top: 16px; text-align: center; } + .tox .tox-comment-thread__overlay::after { background: #fff; bottom: 0; @@ -983,6 +1179,7 @@ button::-moz-focus-inner { top: 0; z-index: 5; } + .tox .tox-comment__reply { display: flex; flex-shrink: 0; @@ -990,16 +1187,19 @@ button::-moz-focus-inner { justify-content: flex-end; margin-top: 8px; } + .tox .tox-comment__reply > *:first-child { margin-bottom: 8px; width: 100%; } + .tox .tox-comment__edit { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; } + .tox .tox-comment__gradient::after { background: linear-gradient(rgba(255, 255, 255, 0), #fff); bottom: 0; @@ -1010,6 +1210,7 @@ button::-moz-focus-inner { position: absolute; width: 100%; } + .tox .tox-comment__overlay { background: #fff; bottom: 0; @@ -1024,6 +1225,7 @@ button::-moz-focus-inner { top: 0; z-index: 5; } + .tox .tox-comment__loading-text { align-items: center; color: #222f3e; @@ -1031,9 +1233,11 @@ button::-moz-focus-inner { flex-direction: column; position: relative; } + .tox .tox-comment__loading-text > div { padding-bottom: 16px; } + .tox .tox-comment__overlaytext { bottom: 0; flex-direction: column; @@ -1045,15 +1249,18 @@ button::-moz-focus-inner { top: 0; z-index: 10; } + .tox .tox-comment__overlaytext p { background-color: #fff; box-shadow: 0 0 8px 8px #fff; color: #222f3e; text-align: center; } + .tox .tox-comment__overlaytext div:nth-of-type(2) { font-size: 0.8em; } + .tox .tox-comment__busy-spinner { align-items: center; background-color: #fff; @@ -1066,38 +1273,47 @@ button::-moz-focus-inner { top: 0; z-index: 20; } + .tox .tox-comment__scroll { display: flex; flex-direction: column; flex-shrink: 1; overflow: auto; } + .tox .tox-conversations { margin: 8px; } + .tox:not([dir=rtl]) .tox-comment__edit { margin-left: 8px; } + .tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child, .tox:not([dir=rtl]) .tox-comment__edit > *:last-child, .tox:not([dir=rtl]) .tox-comment__reply > *:last-child { margin-left: 8px; } + .tox[dir=rtl] .tox-comment__edit { margin-right: 8px; } + .tox[dir=rtl] .tox-comment__buttonspacing > *:last-child, .tox[dir=rtl] .tox-comment__edit > *:last-child, .tox[dir=rtl] .tox-comment__reply > *:last-child { margin-right: 8px; } + .tox .tox-user { align-items: center; display: flex; } + .tox .tox-user__avatar svg { fill: rgba(34, 47, 62, 0.7); } + .tox .tox-user__name { color: rgba(34, 47, 62, 0.7); font-size: 12px; @@ -1105,18 +1321,23 @@ button::-moz-focus-inner { font-weight: bold; text-transform: uppercase; } + .tox:not([dir=rtl]) .tox-user__avatar svg { margin-right: 8px; } + .tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name { margin-left: 8px; } + .tox[dir=rtl] .tox-user__avatar svg { margin-left: 8px; } + .tox[dir=rtl] .tox-user__avatar + .tox-user__name { margin-right: 8px; } + .tox .tox-dialog-wrap { align-items: center; bottom: 0; @@ -1128,6 +1349,7 @@ button::-moz-focus-inner { top: 0; z-index: 1100; } + .tox .tox-dialog-wrap__backdrop { background-color: rgba(255, 255, 255, 0.75); bottom: 0; @@ -1137,9 +1359,11 @@ button::-moz-focus-inner { top: 0; z-index: 1; } + .tox .tox-dialog-wrap__backdrop--opaque { background-color: #fff; } + .tox .tox-dialog { background-color: #fff; border-color: #cccccc; @@ -1156,16 +1380,19 @@ button::-moz-focus-inner { width: 95vw; z-index: 2; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog { align-self: flex-start; margin: 8px auto; width: calc(100vw - 16px); } } + .tox .tox-dialog-inline { z-index: 1100; } + .tox .tox-dialog__header { align-items: center; background-color: #fff; @@ -1177,9 +1404,11 @@ button::-moz-focus-inner { padding: 8px 16px 0 16px; position: relative; } + .tox .tox-dialog__header .tox-button { z-index: 1; } + .tox .tox-dialog__draghandle { cursor: grab; height: 100%; @@ -1188,12 +1417,15 @@ button::-moz-focus-inner { top: 0; width: 100%; } + .tox .tox-dialog__draghandle:active { cursor: grabbing; } + .tox .tox-dialog__dismiss { margin-left: auto; } + .tox .tox-dialog__title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 20px; @@ -1203,6 +1435,7 @@ button::-moz-focus-inner { margin: 0; text-transform: none; } + .tox .tox-dialog__body { color: #222f3e; display: flex; @@ -1216,18 +1449,21 @@ button::-moz-focus-inner { text-align: left; text-transform: none; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog__body { flex-direction: column; } } + .tox .tox-dialog__body-nav { align-items: flex-start; display: flex; flex-direction: column; padding: 16px 16px; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog__body-nav { flex-direction: row; -webkit-overflow-scrolling: touch; @@ -1235,6 +1471,7 @@ button::-moz-focus-inner { padding-bottom: 0; } } + .tox .tox-dialog__body-nav-item { border-bottom: 2px solid transparent; color: rgba(34, 47, 62, 0.7); @@ -1245,13 +1482,16 @@ button::-moz-focus-inner { text-decoration: none; white-space: nowrap; } + .tox .tox-dialog__body-nav-item:focus { background-color: rgba(32, 122, 183, 0.1); } + .tox .tox-dialog__body-nav-item--active { border-bottom: 2px solid #207ab7; color: #207ab7; } + .tox .tox-dialog__body-content { box-sizing: border-box; display: flex; @@ -1263,48 +1503,58 @@ button::-moz-focus-inner { -webkit-overflow-scrolling: touch; padding: 16px 16px; } + .tox .tox-dialog__body-content > * { margin-bottom: 0; margin-top: 16px; } + .tox .tox-dialog__body-content > *:first-child { margin-top: 0; } + .tox .tox-dialog__body-content > *:last-child { margin-bottom: 0; } + .tox .tox-dialog__body-content > *:only-child { margin-bottom: 0; margin-top: 0; } + .tox .tox-dialog__body-content a { color: #207ab7; cursor: pointer; text-decoration: none; } + .tox .tox-dialog__body-content a:hover, .tox .tox-dialog__body-content a:focus { color: #185d8c; text-decoration: none; } + .tox .tox-dialog__body-content a:active { color: #185d8c; text-decoration: none; } + .tox .tox-dialog__body-content svg { fill: #222f3e; } + .tox .tox-dialog__body-content ul { display: block; list-style-type: disc; margin-bottom: 16px; -webkit-margin-end: 0; - margin-inline-end: 0; + margin-inline-end: 0; -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; -webkit-padding-start: 2.5rem; - padding-inline-start: 2.5rem; + padding-inline-start: 2.5rem; } + .tox .tox-dialog__body-content .tox-form__group h1 { color: #222f3e; font-size: 20px; @@ -1315,6 +1565,7 @@ button::-moz-focus-inner { margin-top: 2rem; text-transform: none; } + .tox .tox-dialog__body-content .tox-form__group h2 { color: #222f3e; font-size: 16px; @@ -1325,38 +1576,47 @@ button::-moz-focus-inner { margin-top: 2rem; text-transform: none; } + .tox .tox-dialog__body-content .tox-form__group p { margin-bottom: 16px; } + .tox .tox-dialog__body-content .tox-form__group h1:first-child, .tox .tox-dialog__body-content .tox-form__group h2:first-child, .tox .tox-dialog__body-content .tox-form__group p:first-child { margin-top: 0; } + .tox .tox-dialog__body-content .tox-form__group h1:last-child, .tox .tox-dialog__body-content .tox-form__group h2:last-child, .tox .tox-dialog__body-content .tox-form__group p:last-child { margin-bottom: 0; } + .tox .tox-dialog__body-content .tox-form__group h1:only-child, .tox .tox-dialog__body-content .tox-form__group h2:only-child, .tox .tox-dialog__body-content .tox-form__group p:only-child { margin-bottom: 0; margin-top: 0; } + .tox .tox-dialog--width-lg { height: 650px; max-width: 1200px; } + .tox .tox-dialog--width-md { max-width: 800px; } + .tox .tox-dialog--width-md .tox-dialog__body-content { overflow: auto; } + .tox .tox-dialog__body-content--centered { text-align: center; } + .tox .tox-dialog__footer { align-items: center; background-color: #fff; @@ -1365,10 +1625,12 @@ button::-moz-focus-inner { justify-content: space-between; padding: 8px 16px; } + .tox .tox-dialog__footer-start, .tox .tox-dialog__footer-end { display: flex; } + .tox .tox-dialog__busy-spinner { align-items: center; background-color: rgba(255, 255, 255, 0.75); @@ -1381,104 +1643,129 @@ button::-moz-focus-inner { top: 0; z-index: 3; } + .tox .tox-dialog__table { border-collapse: collapse; width: 100%; } + .tox .tox-dialog__table thead th { font-weight: bold; padding-bottom: 8px; } + .tox .tox-dialog__table tbody tr { border-bottom: 1px solid #cccccc; } + .tox .tox-dialog__table tbody tr:last-child { border-bottom: none; } + .tox .tox-dialog__table td { padding-bottom: 8px; padding-top: 8px; } + .tox .tox-dialog__popups { position: absolute; width: 100%; z-index: 1100; } + .tox .tox-dialog__body-iframe { display: flex; flex: 1; flex-direction: column; -ms-flex-preferred-size: auto; } + .tox .tox-dialog__body-iframe .tox-navobj { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) { flex: 1; -ms-flex-preferred-size: auto; height: 100%; } + .tox .tox-dialog-dock-fadeout { opacity: 0; visibility: hidden; } + .tox .tox-dialog-dock-fadein { opacity: 1; visibility: visible; } + .tox .tox-dialog-dock-transition { transition: visibility 0s linear 0.3s, opacity 0.3s ease; } + .tox .tox-dialog-dock-transition.tox-dialog-dock-fadein { transition-delay: 0s; } + .tox.tox-platform-ie { /* IE11 CSS styles go here */ } + .tox.tox-platform-ie .tox-dialog-wrap { position: -ms-device-fixed; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav { margin-right: 0; } } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) { margin-left: 8px; } } + .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *, .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * { margin-left: 8px; } + .tox[dir=rtl] .tox-dialog__body { text-align: right; } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav { margin-left: 0; } } -@media only screen and (max-width:767px) { + +@media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) { margin-right: 8px; } } + .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *, .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * { margin-right: 8px; } + body.tox-dialog__disable-scroll { overflow: hidden; } + .tox .tox-dropzone-container { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-dropzone { align-items: center; background: #fff; @@ -1491,10 +1778,12 @@ body.tox-dialog__disable-scroll { min-height: 100px; padding: 10px; } + .tox .tox-dropzone p { color: rgba(34, 47, 62, 0.7); margin: 0 0 16px 0; } + .tox .tox-edit-area { display: flex; flex: 1; @@ -1502,6 +1791,7 @@ body.tox-dialog__disable-scroll { overflow: hidden; position: relative; } + .tox .tox-edit-area__iframe { background-color: #fff; border: 0; @@ -1512,103 +1802,130 @@ body.tox-dialog__disable-scroll { position: absolute; width: 100%; } + .tox.tox-inline-edit-area { border: 1px dotted #cccccc; } + .tox .tox-editor-container { display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; } + .tox .tox-editor-header { z-index: 1; } + .tox:not(.tox-tinymce-inline) .tox-editor-header { box-shadow: none; transition: box-shadow 0.5s; } + .tox.tox-tinymce--toolbar-bottom .tox-editor-header, .tox.tox-tinymce-inline .tox-editor-header { margin-bottom: -1px; } + .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header { background-color: transparent; box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); } + .tox-editor-dock-fadeout { opacity: 0; visibility: hidden; } + .tox-editor-dock-fadein { opacity: 1; visibility: visible; } + .tox-editor-dock-transition { transition: visibility 0s linear 0.25s, opacity 0.25s ease; } + .tox-editor-dock-transition.tox-editor-dock-fadein { transition-delay: 0s; } + .tox .tox-control-wrap { flex: 1; position: relative; } + .tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid, .tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown, .tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid { display: none; } + .tox .tox-control-wrap svg { display: block; } + .tox .tox-control-wrap__status-icon-wrap { position: absolute; top: 50%; transform: translateY(-50%); } + .tox .tox-control-wrap__status-icon-invalid svg { fill: #c00; } + .tox .tox-control-wrap__status-icon-unknown svg { fill: orange; } + .tox .tox-control-wrap__status-icon-valid svg { fill: green; } + .tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield { padding-right: 32px; } + .tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap { right: 4px; } + .tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield { padding-left: 32px; } + .tox[dir=rtl] .tox-control-wrap__status-icon-wrap { left: 4px; } + .tox .tox-autocompleter { max-width: 25em; } + .tox .tox-autocompleter .tox-menu { max-width: 25em; } + .tox .tox-autocompleter .tox-autocompleter-highlight { font-weight: bold; } + .tox .tox-color-input { display: flex; position: relative; z-index: 1; } + .tox .tox-color-input .tox-textfield { z-index: -1; } + .tox .tox-color-input span { border-color: rgba(34, 47, 62, 0.2); border-radius: 3px; @@ -1621,11 +1938,13 @@ body.tox-dialog__disable-scroll { top: 6px; width: 24px; } + .tox .tox-color-input span:hover:not([aria-disabled=true]), .tox .tox-color-input span:focus:not([aria-disabled=true]) { border-color: #207ab7; cursor: pointer; } + .tox .tox-color-input span::before { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%); background-position: 0 0, 0 6px, 6px -6px, -6px 0; @@ -1641,27 +1960,35 @@ body.tox-dialog__disable-scroll { width: 24px; z-index: -1; } + .tox .tox-color-input span[aria-disabled=true] { cursor: not-allowed; } + .tox:not([dir=rtl]) .tox-color-input { /* stylelint-disable-next-line no-descending-specificity */ } + .tox:not([dir=rtl]) .tox-color-input .tox-textfield { padding-left: 36px; } + .tox:not([dir=rtl]) .tox-color-input span { left: 6px; } + .tox[dir="rtl"] .tox-color-input { /* stylelint-disable-next-line no-descending-specificity */ } + .tox[dir="rtl"] .tox-color-input .tox-textfield { padding-right: 36px; } + .tox[dir="rtl"] .tox-color-input span { right: 6px; } + .tox .tox-label, .tox .tox-toolbar-label { color: rgba(34, 47, 62, 0.7); @@ -1674,91 +2001,112 @@ body.tox-dialog__disable-scroll { text-transform: none; white-space: nowrap; } + .tox .tox-toolbar-label { padding: 0 8px; } + .tox[dir=rtl] .tox-label { padding: 0 0 0 8px; } + .tox .tox-form { display: flex; flex: 1; flex-direction: column; -ms-flex-preferred-size: auto; } + .tox .tox-form__group { box-sizing: border-box; margin-bottom: 4px; } + .tox .tox-form-group--maximize { flex: 1; } + .tox .tox-form__group--error { color: #c00; } + .tox .tox-form__group--collection { display: flex; } + .tox .tox-form__grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } + .tox .tox-form__grid--2col > .tox-form__group { width: calc(50% - (8px / 2)); } + .tox .tox-form__grid--3col > .tox-form__group { width: calc(100% / 3 - (8px / 2)); } + .tox .tox-form__grid--4col > .tox-form__group { width: calc(25% - (8px / 2)); } + .tox .tox-form__controls-h-stack { align-items: center; display: flex; } + .tox .tox-form__group--inline { align-items: center; display: flex; } + .tox .tox-form__group--stretched { display: flex; flex: 1; flex-direction: column; -ms-flex-preferred-size: auto; } + .tox .tox-form__group--stretched .tox-textarea { flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-form__group--stretched .tox-navobj { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-form__group--stretched .tox-navobj :nth-child(2) { flex: 1; -ms-flex-preferred-size: auto; height: 100%; } + .tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) { margin-left: 4px; } + .tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) { margin-right: 4px; } + .tox .tox-lock.tox-locked .tox-lock-icon__unlock, .tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock { display: none; } + .tox .tox-textfield, .tox .tox-toolbar-textfield, .tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; background-color: #fff; border-color: #cccccc; border-radius: 3px; @@ -1777,12 +2125,14 @@ body.tox-dialog__disable-scroll { resize: none; width: 100%; } + .tox .tox-textfield[disabled], .tox .tox-textarea[disabled] { background-color: #f2f2f2; color: rgba(34, 47, 62, 0.85); cursor: not-allowed; } + .tox .tox-textfield:focus, .tox .tox-listboxfield .tox-listbox--select:focus, .tox .tox-textarea:focus { @@ -1791,12 +2141,14 @@ body.tox-dialog__disable-scroll { box-shadow: none; outline: none; } + .tox .tox-toolbar-textfield { border-width: 0; margin-bottom: 3px; margin-top: 2px; max-width: 250px; } + .tox .tox-naked-btn { background-color: transparent; border: 0; @@ -1808,57 +2160,70 @@ body.tox-dialog__disable-scroll { margin: 0; padding: 0; } + .tox .tox-naked-btn svg { display: block; fill: #222f3e; } + .tox:not([dir=rtl]) .tox-toolbar-textfield + * { margin-left: 4px; } + .tox[dir=rtl] .tox-toolbar-textfield + * { margin-right: 4px; } + .tox .tox-listboxfield { cursor: pointer; position: relative; } + .tox .tox-listboxfield .tox-listbox--select[disabled] { background-color: #f2f2f2; color: rgba(34, 47, 62, 0.85); cursor: not-allowed; } + .tox .tox-listbox__select-label { cursor: default; flex: 1; margin: 0 4px; } + .tox .tox-listbox__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; } + .tox .tox-listbox__select-chevron svg { fill: #222f3e; } + .tox .tox-listboxfield .tox-listbox--select { align-items: center; display: flex; } + .tox:not([dir=rtl]) .tox-listboxfield svg { right: 8px; } + .tox[dir=rtl] .tox-listboxfield svg { left: 8px; } + .tox .tox-selectfield { cursor: pointer; position: relative; } + .tox .tox-selectfield select { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; background-color: #fff; border-color: #cccccc; border-radius: 3px; @@ -1877,46 +2242,56 @@ body.tox-dialog__disable-scroll { resize: none; width: 100%; } + .tox .tox-selectfield select[disabled] { background-color: #f2f2f2; color: rgba(34, 47, 62, 0.85); cursor: not-allowed; } + .tox .tox-selectfield select::-ms-expand { display: none; } + .tox .tox-selectfield select:focus { background-color: #fff; border-color: #207ab7; box-shadow: none; outline: none; } + .tox .tox-selectfield svg { pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); } + .tox:not([dir=rtl]) .tox-selectfield select[size="0"], .tox:not([dir=rtl]) .tox-selectfield select[size="1"] { padding-right: 24px; } + .tox:not([dir=rtl]) .tox-selectfield svg { right: 8px; } + .tox[dir=rtl] .tox-selectfield select[size="0"], .tox[dir=rtl] .tox-selectfield select[size="1"] { padding-left: 24px; } + .tox[dir=rtl] .tox-selectfield svg { left: 8px; } + .tox .tox-textarea { -webkit-appearance: textarea; - -moz-appearance: textarea; - appearance: textarea; + -moz-appearance: textarea; + appearance: textarea; white-space: pre-wrap; } + .tox-fullscreen { border: 0; height: 100%; @@ -1924,39 +2299,47 @@ body.tox-dialog__disable-scroll { margin: 0; overflow: hidden; -ms-scroll-chaining: none; - overscroll-behavior: none; + overscroll-behavior: none; padding: 0; position: fixed; top: 0; touch-action: pinch-zoom; width: 100%; } + .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle { display: none; } + .tox.tox-tinymce.tox-fullscreen { background-color: transparent; z-index: 1200; } + .tox-shadowhost.tox-fullscreen { z-index: 1200; } + .tox-fullscreen .tox.tox-tinymce-aux, .tox-fullscreen ~ .tox.tox-tinymce-aux { z-index: 1201; } + .tox .tox-help__more-link { list-style: none; margin-top: 1em; } + .tox .tox-image-tools { width: 100%; } + .tox .tox-image-tools__toolbar { align-items: center; display: flex; justify-content: center; } + .tox .tox-image-tools__image { background-color: #666; height: 380px; @@ -1964,17 +2347,21 @@ body.tox-dialog__disable-scroll { position: relative; width: 100%; } + .tox .tox-image-tools__image, .tox .tox-image-tools__image + .tox-image-tools__toolbar { margin-top: 8px; } + .tox .tox-image-tools__image-bg { background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==); } + .tox .tox-image-tools__toolbar > .tox-spacer { flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-croprect-block { background: black; filter: alpha(opacity=50); @@ -1982,6 +2369,7 @@ body.tox-dialog__disable-scroll { position: absolute; zoom: 1; } + .tox .tox-croprect-handle { border: 2px solid white; height: 20px; @@ -1990,11 +2378,13 @@ body.tox-dialog__disable-scroll { top: 0; width: 20px; } + .tox .tox-croprect-handle-move { border: 0; cursor: move; position: absolute; } + .tox .tox-croprect-handle-nw { border-width: 2px 0 0 2px; cursor: nw-resize; @@ -2002,6 +2392,7 @@ body.tox-dialog__disable-scroll { margin: -2px 0 0 -2px; top: 100px; } + .tox .tox-croprect-handle-ne { border-width: 2px 2px 0 0; cursor: ne-resize; @@ -2009,6 +2400,7 @@ body.tox-dialog__disable-scroll { margin: -2px 0 0 -20px; top: 100px; } + .tox .tox-croprect-handle-sw { border-width: 0 0 2px 2px; cursor: sw-resize; @@ -2016,6 +2408,7 @@ body.tox-dialog__disable-scroll { margin: -20px 2px 0 -2px; top: 200px; } + .tox .tox-croprect-handle-se { border-width: 0 2px 2px 0; cursor: se-resize; @@ -2023,29 +2416,37 @@ body.tox-dialog__disable-scroll { margin: -20px 0 0 -20px; top: 200px; } + .tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) { margin-left: 8px; } + .tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider { margin-left: 32px; } + .tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button { margin-left: 32px; } + .tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) { margin-right: 8px; } + .tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider { margin-right: 32px; } + .tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button { margin-right: 32px; } + .tox .tox-insert-table-picker { display: flex; flex-wrap: wrap; width: 170px; } + .tox .tox-insert-table-picker > div { border-color: #cccccc; border-style: solid; @@ -2054,13 +2455,16 @@ body.tox-dialog__disable-scroll { height: 17px; width: 17px; } + .tox .tox-collection--list .tox-collection__group .tox-insert-table-picker { margin: -4px 0; } + .tox .tox-insert-table-picker .tox-insert-table-picker__selected { background-color: rgba(32, 122, 183, 0.5); border-color: rgba(32, 122, 183, 0.5); } + .tox .tox-insert-table-picker__label { color: rgba(34, 47, 62, 0.7); display: block; @@ -2069,22 +2473,28 @@ body.tox-dialog__disable-scroll { text-align: center; width: 100%; } + .tox:not([dir=rtl]) { /* stylelint-disable-next-line no-descending-specificity */ } + .tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) { border-right: 0; } + .tox[dir=rtl] { /* stylelint-disable-next-line no-descending-specificity */ } + .tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) { border-right: 0; } + .tox { /* stylelint-disable */ /* stylelint-enable */ } + .tox .tox-menu { background-color: #fff; border: 1px solid #cccccc; @@ -2095,15 +2505,19 @@ body.tox-dialog__disable-scroll { vertical-align: top; z-index: 1150; } + .tox .tox-menu.tox-collection.tox-collection--list { padding: 0; } + .tox .tox-menu.tox-collection.tox-collection--toolbar { padding: 4px; } + .tox .tox-menu.tox-collection.tox-collection--grid { padding: 4px; } + .tox .tox-menu__label h1, .tox .tox-menu__label h2, .tox .tox-menu__label h3, @@ -2115,6 +2529,7 @@ body.tox-dialog__disable-scroll { .tox .tox-menu__label code { margin: 0; } + .tox .tox-menubar { background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff; background-color: #fff; @@ -2124,9 +2539,11 @@ body.tox-dialog__disable-scroll { flex-wrap: wrap; padding: 0 4px 0 4px; } + .tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar { border-top: 1px solid #cccccc; } + /* Deprecated. Remove in next major release */ .tox .tox-mbtn { align-items: center; @@ -2149,6 +2566,7 @@ body.tox-dialog__disable-scroll { text-transform: none; width: auto; } + .tox .tox-mbtn[disabled] { background-color: transparent; border: 0; @@ -2156,32 +2574,38 @@ body.tox-dialog__disable-scroll { color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } + .tox .tox-mbtn:focus:not(:disabled) { background: #dee0e2; border: 0; box-shadow: none; color: #222f3e; } + .tox .tox-mbtn--active { background: #c8cbcf; border: 0; box-shadow: none; color: #222f3e; } + .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) { background: #dee0e2; border: 0; box-shadow: none; color: #222f3e; } + .tox .tox-mbtn__select-label { cursor: default; font-weight: normal; margin: 0 4px; } + .tox .tox-mbtn[disabled] .tox-mbtn__select-label { cursor: not-allowed; } + .tox .tox-mbtn__select-chevron { align-items: center; display: flex; @@ -2189,6 +2613,7 @@ body.tox-dialog__disable-scroll { width: 16px; display: none; } + .tox .tox-notification { border-radius: 3px; border-style: solid; @@ -2200,159 +2625,189 @@ body.tox-dialog__disable-scroll { font-size: 14px; font-weight: normal; -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); - grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); + grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); margin-top: 4px; opacity: 0; padding: 4px; transition: transform 100ms ease-in, opacity 150ms ease-in; } + .tox .tox-notification p { font-size: 14px; font-weight: normal; } + .tox .tox-notification a { text-decoration: underline; } + .tox .tox-notification--in { opacity: 1; } + .tox .tox-notification--success { background-color: #e4eeda; border-color: #d7e6c8; color: #222f3e; } + .tox .tox-notification--success p { color: #222f3e; } + .tox .tox-notification--success a { color: #547831; } + .tox .tox-notification--success svg { fill: #222f3e; } + .tox .tox-notification--error { background-color: #f8dede; border-color: #f2bfbf; color: #222f3e; } + .tox .tox-notification--error p { color: #222f3e; } + .tox .tox-notification--error a { color: #c00; } + .tox .tox-notification--error svg { fill: #222f3e; } + .tox .tox-notification--warn, .tox .tox-notification--warning { background-color: #fffaea; border-color: #ffe89d; color: #222f3e; } + .tox .tox-notification--warn p, .tox .tox-notification--warning p { color: #222f3e; } + .tox .tox-notification--warn a, .tox .tox-notification--warning a { color: #222f3e; } + .tox .tox-notification--warn svg, .tox .tox-notification--warning svg { fill: #222f3e; } + .tox .tox-notification--info { background-color: #d9edf7; border-color: #779ecb; color: #222f3e; } + .tox .tox-notification--info p { color: #222f3e; } + .tox .tox-notification--info a { color: #222f3e; } + .tox .tox-notification--info svg { fill: #222f3e; } + .tox .tox-notification__body { -ms-grid-row-align: center; - align-self: center; + align-self: center; color: #222f3e; font-size: 14px; -ms-grid-column-span: 1; grid-column-end: 3; -ms-grid-column: 2; - grid-column-start: 2; + grid-column-start: 2; -ms-grid-row-span: 1; grid-row-end: 2; -ms-grid-row: 1; - grid-row-start: 1; + grid-row-start: 1; text-align: center; white-space: normal; word-break: break-all; word-break: break-word; } + .tox .tox-notification__body > * { margin: 0; } + .tox .tox-notification__body > * + * { margin-top: 1rem; } + .tox .tox-notification__icon { -ms-grid-row-align: center; - align-self: center; + align-self: center; -ms-grid-column-span: 1; grid-column-end: 2; -ms-grid-column: 1; - grid-column-start: 1; + grid-column-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; -ms-grid-row: 1; - grid-row-start: 1; + grid-row-start: 1; -ms-grid-column-align: end; - justify-self: end; + justify-self: end; } + .tox .tox-notification__icon svg { display: block; } + .tox .tox-notification__dismiss { -ms-grid-row-align: start; - align-self: start; + align-self: start; -ms-grid-column-span: 1; grid-column-end: 4; -ms-grid-column: 3; - grid-column-start: 3; + grid-column-start: 3; -ms-grid-row-span: 1; grid-row-end: 2; -ms-grid-row: 1; - grid-row-start: 1; + grid-row-start: 1; -ms-grid-column-align: end; - justify-self: end; + justify-self: end; } + .tox .tox-notification .tox-progress-bar { -ms-grid-column-span: 3; grid-column-end: 4; -ms-grid-column: 1; - grid-column-start: 1; + grid-column-start: 1; -ms-grid-row-span: 1; grid-row-end: 3; -ms-grid-row: 2; - grid-row-start: 2; + grid-row-start: 2; -ms-grid-column-align: center; - justify-self: center; + justify-self: center; } + .tox .tox-pop { display: inline-block; position: relative; } + .tox .tox-pop--resizing { transition: width 0.1s ease; } + .tox .tox-pop--resizing .tox-toolbar { flex-wrap: nowrap; } + .tox .tox-pop__dialog { background-color: #fff; border: 1px solid #cccccc; @@ -2361,13 +2816,16 @@ body.tox-dialog__disable-scroll { min-width: 0; overflow: hidden; } + .tox .tox-pop__dialog > *:not(.tox-toolbar) { margin: 4px 4px 4px 8px; } + .tox .tox-pop__dialog .tox-toolbar { background-color: transparent; margin-bottom: -1px; } + .tox .tox-pop::before, .tox .tox-pop::after { border-style: solid; @@ -2377,79 +2835,94 @@ body.tox-dialog__disable-scroll { position: absolute; width: 0; } + .tox .tox-pop.tox-pop--bottom::before, .tox .tox-pop.tox-pop--bottom::after { left: 50%; top: 100%; } + .tox .tox-pop.tox-pop--bottom::after { border-color: #fff transparent transparent transparent; border-width: 8px; margin-left: -8px; margin-top: -1px; } + .tox .tox-pop.tox-pop--bottom::before { border-color: #cccccc transparent transparent transparent; border-width: 9px; margin-left: -9px; } + .tox .tox-pop.tox-pop--top::before, .tox .tox-pop.tox-pop--top::after { left: 50%; top: 0; transform: translateY(-100%); } + .tox .tox-pop.tox-pop--top::after { border-color: transparent transparent #fff transparent; border-width: 8px; margin-left: -8px; margin-top: 1px; } + .tox .tox-pop.tox-pop--top::before { border-color: transparent transparent #cccccc transparent; border-width: 9px; margin-left: -9px; } + .tox .tox-pop.tox-pop--left::before, .tox .tox-pop.tox-pop--left::after { left: 0; top: calc(50% - 1px); transform: translateY(-50%); } + .tox .tox-pop.tox-pop--left::after { border-color: transparent #fff transparent transparent; border-width: 8px; margin-left: -15px; } + .tox .tox-pop.tox-pop--left::before { border-color: transparent #cccccc transparent transparent; border-width: 10px; margin-left: -19px; } + .tox .tox-pop.tox-pop--right::before, .tox .tox-pop.tox-pop--right::after { left: 100%; top: calc(50% + 1px); transform: translateY(-50%); } + .tox .tox-pop.tox-pop--right::after { border-color: transparent transparent transparent #fff; border-width: 8px; margin-left: -1px; } + .tox .tox-pop.tox-pop--right::before { border-color: transparent transparent transparent #cccccc; border-width: 10px; margin-left: -1px; } + .tox .tox-pop.tox-pop--align-left::before, .tox .tox-pop.tox-pop--align-left::after { left: 20px; } + .tox .tox-pop.tox-pop--align-right::before, .tox .tox-pop.tox-pop--align-right::after { left: calc(100% - 20px); } + .tox .tox-sidebar-wrap { display: flex; flex-direction: row; @@ -2457,32 +2930,40 @@ body.tox-dialog__disable-scroll { -ms-flex-preferred-size: 0; min-height: 0; } + .tox .tox-sidebar { background-color: #fff; display: flex; flex-direction: row; justify-content: flex-end; } + .tox .tox-sidebar__slider { display: flex; overflow: hidden; } + .tox .tox-sidebar__pane-container { display: flex; } + .tox .tox-sidebar__pane { display: flex; } + .tox .tox-sidebar--sliding-closed { opacity: 0; } + .tox .tox-sidebar--sliding-open { opacity: 1; } + .tox .tox-sidebar--sliding-growing, .tox .tox-sidebar--sliding-shrinking { transition: width 0.5s ease, opacity 0.5s ease; } + .tox .tox-selector { background-color: #4099ff; border-color: #4099ff; @@ -2494,10 +2975,12 @@ body.tox-dialog__disable-scroll { position: absolute; width: 10px; } + .tox.tox-platform-touch .tox-selector { height: 12px; width: 12px; } + .tox .tox-slider { align-items: center; display: flex; @@ -2507,6 +2990,7 @@ body.tox-dialog__disable-scroll { justify-content: center; position: relative; } + .tox .tox-slider__rail { background-color: transparent; border: 1px solid #cccccc; @@ -2515,6 +2999,7 @@ body.tox-dialog__disable-scroll { min-width: 120px; width: 100%; } + .tox .tox-slider__handle { background-color: #207ab7; border: 2px solid #185d8c; @@ -2527,12 +3012,15 @@ body.tox-dialog__disable-scroll { transform: translateX(-50%) translateY(-50%); width: 14px; } + .tox .tox-source-code { overflow: auto; } + .tox .tox-spinner { display: flex; } + .tox .tox-spinner > div { animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both; background-color: rgba(34, 47, 62, 0.7); @@ -2540,12 +3028,15 @@ body.tox-dialog__disable-scroll { height: 8px; width: 8px; } + .tox .tox-spinner > div:nth-child(1) { animation-delay: -0.32s; } + .tox .tox-spinner > div:nth-child(2) { animation-delay: -0.16s; } + @keyframes tam-bouncing-dots { 0%, 80%, @@ -2556,12 +3047,15 @@ body.tox-dialog__disable-scroll { transform: scale(1); } } + .tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) { margin-left: 4px; } + .tox[dir=rtl] .tox-spinner > div:not(:first-child) { margin-right: 4px; } + .tox .tox-statusbar { align-items: center; background-color: #fff; @@ -2577,12 +3071,14 @@ body.tox-dialog__disable-scroll { position: relative; text-transform: uppercase; } + .tox .tox-statusbar__text-container { display: flex; flex: 1 1 auto; justify-content: flex-end; overflow: hidden; } + .tox .tox-statusbar__path { display: flex; flex: 1 1 auto; @@ -2591,20 +3087,24 @@ body.tox-dialog__disable-scroll { text-overflow: ellipsis; white-space: nowrap; } + .tox .tox-statusbar__path > * { display: inline; white-space: nowrap; } + .tox .tox-statusbar__wordcount { flex: 0 0 auto; margin-left: 1ch; } + .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount { color: rgba(34, 47, 62, 0.7); text-decoration: none; } + .tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]), @@ -2614,6 +3114,7 @@ body.tox-dialog__disable-scroll { cursor: pointer; text-decoration: underline; } + .tox .tox-statusbar__resize-handle { align-items: flex-end; align-self: stretch; @@ -2625,30 +3126,38 @@ body.tox-dialog__disable-scroll { margin-right: -8px; padding-left: 1ch; } + .tox .tox-statusbar__resize-handle svg { display: block; fill: rgba(34, 47, 62, 0.7); } + .tox .tox-statusbar__resize-handle:focus svg { background-color: #dee0e2; border-radius: 1px; box-shadow: 0 0 0 2px #dee0e2; } + .tox:not([dir=rtl]) .tox-statusbar__path > * { margin-right: 4px; } + .tox:not([dir=rtl]) .tox-statusbar__branding { margin-left: 1ch; } + .tox[dir=rtl] .tox-statusbar { flex-direction: row-reverse; } + .tox[dir=rtl] .tox-statusbar__path > * { margin-left: 4px; } + .tox .tox-throbber { z-index: 1299; } + .tox .tox-throbber__busy-spinner { align-items: center; background-color: rgba(255, 255, 255, 0.6); @@ -2660,6 +3169,7 @@ body.tox-dialog__disable-scroll { right: 0; top: 0; } + .tox .tox-tbtn { align-items: center; background: transparent; @@ -2681,38 +3191,46 @@ body.tox-dialog__disable-scroll { text-transform: none; width: 34px; } + .tox .tox-tbtn svg { display: block; fill: #222f3e; } + .tox .tox-tbtn.tox-tbtn-more { padding-left: 5px; padding-right: 5px; width: inherit; } + .tox .tox-tbtn:focus { background: #dee0e2; border: 0; box-shadow: none; } + .tox .tox-tbtn:hover { background: #dee0e2; border: 0; box-shadow: none; color: #222f3e; } + .tox .tox-tbtn:hover svg { fill: #222f3e; } + .tox .tox-tbtn:active { background: #c8cbcf; border: 0; box-shadow: none; color: #222f3e; } + .tox .tox-tbtn:active svg { fill: #222f3e; } + .tox .tox-tbtn--disabled, .tox .tox-tbtn--disabled:hover, .tox .tox-tbtn:disabled, @@ -2723,6 +3241,7 @@ body.tox-dialog__disable-scroll { color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } + .tox .tox-tbtn--disabled svg, .tox .tox-tbtn--disabled:hover svg, .tox .tox-tbtn:disabled svg, @@ -2730,6 +3249,7 @@ body.tox-dialog__disable-scroll { /* stylelint-disable-line no-descending-specificity */ fill: rgba(34, 47, 62, 0.5); } + .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: #c8cbcf; @@ -2737,43 +3257,53 @@ body.tox-dialog__disable-scroll { box-shadow: none; color: #222f3e; } + .tox .tox-tbtn--enabled > *, .tox .tox-tbtn--enabled:hover > * { transform: none; } + .tox .tox-tbtn--enabled svg, .tox .tox-tbtn--enabled:hover svg { /* stylelint-disable-line no-descending-specificity */ fill: #222f3e; } + .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) { color: #222f3e; } + .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg { fill: #222f3e; } + .tox .tox-tbtn:active > * { transform: none; } + .tox .tox-tbtn--md { height: 51px; width: 51px; } + .tox .tox-tbtn--lg { flex-direction: column; height: 68px; width: 68px; } + .tox .tox-tbtn--return { -ms-grid-row-align: stretch; - align-self: stretch; + align-self: stretch; height: unset; width: 16px; } + .tox .tox-tbtn--labeled { padding: 0 4px; width: unset; } + .tox .tox-tbtn__vlabel { display: block; font-size: 10px; @@ -2782,31 +3312,37 @@ body.tox-dialog__disable-scroll { margin-bottom: 4px; white-space: nowrap; } + .tox .tox-tbtn--select { margin: 2px 0 3px 0; padding: 0 4px; width: auto; } + .tox .tox-tbtn__select-label { cursor: default; font-weight: normal; margin: 0 4px; } + .tox .tox-tbtn__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; } + .tox .tox-tbtn__select-chevron svg { fill: rgba(34, 47, 62, 0.5); } + .tox .tox-tbtn--bespoke .tox-tbtn__select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7em; } + .tox .tox-split-button { border: 0; border-radius: 3px; @@ -2815,32 +3351,41 @@ body.tox-dialog__disable-scroll { margin: 2px 0 3px 0; overflow: hidden; } + .tox .tox-split-button:hover { box-shadow: 0 0 0 1px #dee0e2 inset; } + .tox .tox-split-button:focus { background: #dee0e2; box-shadow: none; color: #222f3e; } + .tox .tox-split-button > * { border-radius: 0; } + .tox .tox-split-button__chevron { width: 16px; } + .tox .tox-split-button__chevron svg { fill: rgba(34, 47, 62, 0.5); } + .tox .tox-split-button .tox-tbtn { margin: 0; } + .tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child { width: 30px; } + .tox.tox-platform-touch .tox-split-button__chevron { width: 20px; } + .tox .tox-split-button.tox-tbtn--disabled:hover, .tox .tox-split-button.tox-tbtn--disabled:focus, .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover, @@ -2849,9 +3394,11 @@ body.tox-dialog__disable-scroll { box-shadow: none; color: rgba(34, 47, 62, 0.5); } + .tox .tox-toolbar-overlord { background-color: #fff; } + .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow { @@ -2863,6 +3410,7 @@ body.tox-dialog__disable-scroll { flex-wrap: wrap; padding: 0 0; } + .tox .tox-toolbar__overflow.tox-toolbar__overflow--closed { height: 0; opacity: 0; @@ -2870,40 +3418,50 @@ body.tox-dialog__disable-scroll { padding-top: 0; visibility: hidden; } + .tox .tox-toolbar__overflow--growing { transition: height 0.3s ease, opacity 0.2s linear 0.1s; } + .tox .tox-toolbar__overflow--shrinking { transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s; } + .tox .tox-menubar + .tox-toolbar, .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary { border-top: 1px solid #cccccc; margin-top: -1px; } + .tox .tox-toolbar--scrolling { flex-wrap: nowrap; overflow-x: auto; } + .tox .tox-pop .tox-toolbar { border-width: 0; } + .tox .tox-toolbar--no-divider { background-image: none; } + .tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child, .tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary { border-top: 1px solid #cccccc; } + .tox.tox-tinymce-aux .tox-toolbar__overflow { background-color: #fff; border: 1px solid #cccccc; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } + .tox[dir=rtl] .tox-tbtn__icon-rtl svg { transform: rotateY(180deg); } + .tox .tox-toolbar__group { align-items: center; display: flex; @@ -2911,24 +3469,30 @@ body.tox-dialog__disable-scroll { margin: 0 0; padding: 0 4px 0 4px; } + .tox .tox-toolbar__group--pull-right { margin-left: auto; } + .tox .tox-toolbar--scrolling .tox-toolbar__group { flex-shrink: 0; flex-wrap: nowrap; } + .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) { border-right: 1px solid #cccccc; } + .tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) { border-left: 1px solid #cccccc; } + .tox .tox-tooltip { display: inline-block; padding: 8px; position: relative; } + .tox .tox-tooltip__body { background-color: #222f3e; border-radius: 3px; @@ -2940,9 +3504,11 @@ body.tox-dialog__disable-scroll { padding: 4px 8px; text-transform: none; } + .tox .tox-tooltip__arrow { position: absolute; } + .tox .tox-tooltip--down .tox-tooltip__arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; @@ -2952,6 +3518,7 @@ body.tox-dialog__disable-scroll { position: absolute; transform: translateX(-50%); } + .tox .tox-tooltip--up .tox-tooltip__arrow { border-bottom: 8px solid #222f3e; border-left: 8px solid transparent; @@ -2961,6 +3528,7 @@ body.tox-dialog__disable-scroll { top: 0; transform: translateX(-50%); } + .tox .tox-tooltip--right .tox-tooltip__arrow { border-bottom: 8px solid transparent; border-left: 8px solid #222f3e; @@ -2970,6 +3538,7 @@ body.tox-dialog__disable-scroll { top: 50%; transform: translateY(-50%); } + .tox .tox-tooltip--left .tox-tooltip__arrow { border-bottom: 8px solid transparent; border-right: 8px solid #222f3e; @@ -2979,21 +3548,26 @@ body.tox-dialog__disable-scroll { top: 50%; transform: translateY(-50%); } + .tox .tox-well { border: 1px solid #cccccc; border-radius: 3px; padding: 8px; width: 100%; } + .tox .tox-well > *:first-child { margin-top: 0; } + .tox .tox-well > *:last-child { margin-bottom: 0; } + .tox .tox-well > *:only-child { margin: 0; } + .tox .tox-custom-editor { border: 1px solid #cccccc; border-radius: 3px; @@ -3001,10 +3575,12 @@ body.tox-dialog__disable-scroll { flex: 1; position: relative; } + /* stylelint-disable */ .tox { /* stylelint-enable */ } + .tox .tox-dialog-loading::before { background-color: rgba(0, 0, 0, 0.5); content: ""; @@ -3013,22 +3589,27 @@ body.tox-dialog__disable-scroll { width: 100%; z-index: 1000; } + .tox .tox-tab { cursor: pointer; } + .tox .tox-dialog__content-js { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-dialog__body-content .tox-collection { display: flex; flex: 1; -ms-flex-preferred-size: auto; } + .tox .tox-image-tools-edit-panel { height: 60px; } + .tox .tox-image-tools__sidebar { height: 60px; } diff --git a/frontend/public/tinymce/skins/ui/oxide/skin.mobile.css b/frontend/public/tinymce/skins/ui/oxide/skin.mobile.css index 875721a27d..efcd1bb63a 100644 --- a/frontend/public/tinymce/skins/ui/oxide/skin.mobile.css +++ b/frontend/public/tinymce/skins/ui/oxide/skin.mobile.css @@ -9,6 +9,7 @@ all: initial; display: block; } + .tinymce-mobile-outer-container * { border: 0; box-sizing: initial; @@ -23,97 +24,127 @@ text-shadow: none; white-space: nowrap; } + .tinymce-mobile-icon-arrow-back::before { content: "\e5cd"; } + .tinymce-mobile-icon-image::before { content: "\e412"; } + .tinymce-mobile-icon-cancel-circle::before { content: "\e5c9"; } + .tinymce-mobile-icon-full-dot::before { content: "\e061"; } + .tinymce-mobile-icon-align-center::before { content: "\e234"; } + .tinymce-mobile-icon-align-left::before { content: "\e236"; } + .tinymce-mobile-icon-align-right::before { content: "\e237"; } + .tinymce-mobile-icon-bold::before { content: "\e238"; } + .tinymce-mobile-icon-italic::before { content: "\e23f"; } + .tinymce-mobile-icon-unordered-list::before { content: "\e241"; } + .tinymce-mobile-icon-ordered-list::before { content: "\e242"; } + .tinymce-mobile-icon-font-size::before { content: "\e245"; } + .tinymce-mobile-icon-underline::before { content: "\e249"; } + .tinymce-mobile-icon-link::before { content: "\e157"; } + .tinymce-mobile-icon-unlink::before { content: "\eca2"; } + .tinymce-mobile-icon-color::before { content: "\e891"; } + .tinymce-mobile-icon-previous::before { content: "\e314"; } + .tinymce-mobile-icon-next::before { content: "\e315"; } + .tinymce-mobile-icon-large-font::before, .tinymce-mobile-icon-style-formats::before { content: "\e264"; } + .tinymce-mobile-icon-undo::before { content: "\e166"; } + .tinymce-mobile-icon-redo::before { content: "\e15a"; } + .tinymce-mobile-icon-removeformat::before { content: "\e239"; } + .tinymce-mobile-icon-small-font::before { content: "\e906"; } + .tinymce-mobile-icon-readonly-back::before, .tinymce-mobile-format-matches::after { content: "\e5ca"; } + .tinymce-mobile-icon-small-heading::before { content: "small"; } + .tinymce-mobile-icon-large-heading::before { content: "large"; } + .tinymce-mobile-icon-small-heading::before, .tinymce-mobile-icon-large-heading::before { font-family: sans-serif; font-size: 80%; } + .tinymce-mobile-mask-edit-icon::before { content: "\e254"; } + .tinymce-mobile-icon-back::before { content: "\e5c4"; } + .tinymce-mobile-icon-heading::before { /* TODO: Translate */ content: "Headings"; @@ -121,18 +152,22 @@ font-size: 80%; font-weight: bold; } + .tinymce-mobile-icon-h1::before { content: "H1"; font-weight: bold; } + .tinymce-mobile-icon-h2::before { content: "H2"; font-weight: bold; } + .tinymce-mobile-icon-h3::before { content: "H3"; font-weight: bold; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask { align-items: center; display: flex; @@ -143,6 +178,7 @@ top: 0; width: 100%; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container { align-items: center; border-radius: 50%; @@ -152,6 +188,7 @@ font-size: 1em; justify-content: space-between; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item { align-items: center; display: flex; @@ -160,6 +197,7 @@ height: 2.1em; width: 2.1em; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section { align-items: center; display: flex; @@ -167,11 +205,13 @@ flex-direction: column; font-size: 1em; } -@media only screen and (min-device-width:700px) { + +@media only screen and (min-device-width: 700px) { .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section { font-size: 1.2em; } } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon { align-items: center; display: flex; @@ -182,13 +222,16 @@ background-color: white; color: #207ab7; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before { content: "\e900"; font-family: 'tinymce-mobile', sans-serif; } + .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon { z-index: 2; } + .tinymce-mobile-android-container.tinymce-mobile-android-maximized { background: #ffffff; border: none; @@ -200,30 +243,37 @@ right: 0; top: 0; } + .tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) { position: relative; } + .tinymce-mobile-android-container .tinymce-mobile-editor-socket { display: flex; flex-grow: 1; } + .tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe { display: flex !important; flex-grow: 1; height: auto !important; } + .tinymce-mobile-android-scroll-reload { overflow: hidden; } + :not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar { margin-top: 23px; } + .tinymce-mobile-toolstrip { background: #fff; display: flex; flex: 0 0 auto; z-index: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar { align-items: center; background-color: #fff; @@ -234,28 +284,34 @@ width: 100%; /* Make it no larger than the toolstrip, so that it needs to scroll */ } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group { align-items: center; display: flex; height: 100%; flex-shrink: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div { align-items: center; display: flex; height: 100%; flex: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container { background: #f44336; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group { flex-grow: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item { padding-left: 0.5em; padding-right: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button { align-items: center; display: flex; @@ -263,18 +319,22 @@ margin-left: 2px; margin-right: 2px; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #c8cbcf; color: #cccccc; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type { background: #207ab7; color: #eceff1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar { /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */ } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group { align-items: center; display: flex; @@ -285,6 +345,7 @@ /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */ /* For widgets like the colour picker, use the whole height */ } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog { display: flex; min-height: 1.5em; @@ -294,29 +355,34 @@ position: relative; width: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain { display: flex; height: 100%; transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s; width: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen { display: flex; flex: 0 0 auto; justify-content: space-between; width: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input { font-family: Sans-serif; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container { display: flex; flex-grow: 1; position: relative; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x { -ms-grid-row-align: center; - align-self: center; + align-self: center; background: inherit; border: none; border-radius: 50%; @@ -328,14 +394,17 @@ position: absolute; right: 0; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x { display: none; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next { align-items: center; display: flex; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before { align-items: center; @@ -345,10 +414,12 @@ padding-left: 0.5em; padding-right: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before { visibility: hidden; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item { color: #cccccc; font-size: 10px; @@ -356,19 +427,23 @@ margin: 0 2px; padding-top: 3px; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active { color: #c8cbcf; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before { margin-left: 0.5em; margin-right: 0.9em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before { margin-left: 0.9em; margin-right: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider { display: flex; flex: 1; @@ -377,12 +452,14 @@ padding: 0.28em 0; position: relative; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container { align-items: center; display: flex; flex-grow: 1; height: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line { background: #cccccc; display: flex; @@ -391,16 +468,19 @@ margin-bottom: 0.3em; margin-top: 0.3em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container { padding-left: 2em; padding-right: 2em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container { align-items: center; display: flex; flex-grow: 1; height: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient { background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%); display: flex; @@ -409,6 +489,7 @@ margin-bottom: 0.3em; margin-top: 0.3em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black { /* Not part of theming */ background: black; @@ -417,6 +498,7 @@ margin-top: 0.3em; width: 1.2em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white { /* Not part of theming */ background: white; @@ -425,6 +507,7 @@ margin-top: 0.3em; width: 1.2em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb { /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is @@ -448,9 +531,11 @@ transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1); width: 0.5em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active { border: 0.5em solid rgba(136, 136, 136, 0.39); } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper, .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div { align-items: center; @@ -458,20 +543,25 @@ height: 100%; flex: 1; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper { flex-direction: column; justify-content: center; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item { align-items: center; display: flex; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) { height: 100%; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container { display: flex; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input { background: #ffffff; border: none; @@ -483,14 +573,17 @@ padding-left: 5px; padding-top: 0.1em; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #888; } + .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder { /* WebKit, Blink, Edge */ color: #888; } + /* dropup */ .tinymce-mobile-dropup { background: white; @@ -498,32 +591,40 @@ overflow: hidden; width: 100%; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking { transition: height 0.3s ease-out; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-growing { transition: height 0.3s ease-in; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-closed { flex-grow: 0; } + .tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) { flex-grow: 1; } + /* TODO min-height for device size and orientation */ .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) { min-height: 200px; } + @media only screen and (orientation: landscape) { .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) { min-height: 200px; } } -@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { + +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) { .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) { min-height: 150px; } } + /* styles menu */ .tinymce-mobile-styles-menu { font-family: sans-serif; @@ -532,6 +633,7 @@ position: relative; width: 100%; } + .tinymce-mobile-styles-menu [role="menu"] { display: flex; flex-direction: column; @@ -539,9 +641,11 @@ position: absolute; width: 100%; } + .tinymce-mobile-styles-menu [role="menu"].transitioning { transition: transform 0.5s ease-in-out; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-item { border-bottom: 1px solid #ddd; color: #455a64; @@ -550,11 +654,13 @@ padding: 1em 1em; position: relative; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before { color: #455a64; content: "\e314"; font-family: 'tinymce-mobile', sans-serif; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after { color: #455a64; content: "\e315"; @@ -564,6 +670,7 @@ position: absolute; right: 0; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after { font-family: 'tinymce-mobile', sans-serif; padding-left: 1em; @@ -571,6 +678,7 @@ position: absolute; right: 0; } + .tinymce-mobile-styles-menu .tinymce-mobile-styles-separator, .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser { align-items: center; @@ -582,53 +690,64 @@ padding-left: 1em; padding-right: 1em; } + .tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state], .tinymce-mobile-styles-menu [data-transitioning-state="before"] { transform: translate(-100%); } + .tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state], .tinymce-mobile-styles-menu [data-transitioning-state="current"] { transform: translate(0%); } + .tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state], .tinymce-mobile-styles-menu [data-transitioning-state="after"] { transform: translate(100%); } + @font-face { font-family: 'tinymce-mobile'; font-style: normal; font-weight: normal; src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff'); } + @media (min-device-width: 700px) { .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input { font-size: 25px; } } + @media (max-device-width: 700px) { .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input { font-size: 18px; } } + .tinymce-mobile-icon { font-family: 'tinymce-mobile', sans-serif; } + .mixin-flex-and-centre { align-items: center; display: flex; justify-content: center; } + .mixin-flex-bar { align-items: center; display: flex; height: 100%; } + .tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe { background-color: #fff; width: 100%; } + .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon { /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */ background-color: #207ab7; @@ -644,21 +763,26 @@ display: flex; justify-content: center; } -@media only screen and (min-device-width:700px) { + +@media only screen and (min-device-width: 700px) { .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon { font-size: 1.2em; } } + .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket { height: 300px; overflow: hidden; } + .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe { height: 100%; } + .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip { display: none; } + /* Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets increased and the whole body becomes scrollable. It's important! @@ -666,7 +790,8 @@ input[type="file"]::-webkit-file-upload-button { display: none; } -@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { + +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) { .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon { bottom: 50%; } diff --git a/frontend/public/tinymce/skins/ui/oxide/skin.shadowdom.css b/frontend/public/tinymce/skins/ui/oxide/skin.shadowdom.css index 715978b5cb..16f4d30554 100644 --- a/frontend/public/tinymce/skins/ui/oxide/skin.shadowdom.css +++ b/frontend/public/tinymce/skins/ui/oxide/skin.shadowdom.css @@ -7,6 +7,7 @@ body.tox-dialog__disable-scroll { overflow: hidden; } + .tox-fullscreen { border: 0; height: 100%; @@ -14,23 +15,27 @@ body.tox-dialog__disable-scroll { margin: 0; overflow: hidden; -ms-scroll-chaining: none; - overscroll-behavior: none; + overscroll-behavior: none; padding: 0; position: fixed; top: 0; touch-action: pinch-zoom; width: 100%; } + .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle { display: none; } + .tox.tox-tinymce.tox-fullscreen { background-color: transparent; z-index: 1200; } + .tox-shadowhost.tox-fullscreen { z-index: 1200; } + .tox-fullscreen .tox.tox-tinymce-aux, .tox-fullscreen ~ .tox.tox-tinymce-aux { z-index: 1201; diff --git a/frontend/src/components/canvas/styles/animate.css b/frontend/src/components/canvas/styles/animate.css index 142dccf569..a2ba95975d 100644 --- a/frontend/src/components/canvas/styles/animate.css +++ b/frontend/src/components/canvas/styles/animate.css @@ -1901,43 +1901,35 @@ @-webkit-keyframes flip { from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { - -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; @@ -1946,43 +1938,35 @@ @keyframes flip { from { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, -360deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -190deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) - rotate3d(0, 1, 0, -170deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { - -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { - -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) - rotate3d(0, 1, 0, 0deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; @@ -3611,4 +3595,4 @@ .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; -} \ No newline at end of file +} diff --git a/frontend/src/components/canvas/styles/reset.css b/frontend/src/components/canvas/styles/reset.css index f799db2c2f..3c0d4df5fc 100644 --- a/frontend/src/components/canvas/styles/reset.css +++ b/frontend/src/components/canvas/styles/reset.css @@ -21,26 +21,32 @@ address, aside, pre, canvas { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } + body { - overflow: hidden; + overflow: hidden; } + li { - list-style: none; + list-style: none; } + #app { - /*overflow: hidden;*/ + /*overflow: hidden;*/ } + .el-tabs { - height: 100%; + height: 100%; } + .el-tabs__content { - height: calc(100% - 55px); - overflow: auto; + height: calc(100% - 55px); + overflow: auto; } + .el-tabs__nav-scroll { - padding-left: 20px; + padding-left: 20px; } diff --git a/frontend/src/styles/deicon/demo.css b/frontend/src/styles/deicon/demo.css index a67054a0a0..b7af3aa35d 100644 --- a/frontend/src/styles/deicon/demo.css +++ b/frontend/src/styles/deicon/demo.css @@ -3,9 +3,9 @@ font-family: "iconfont logo"; src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); } .logo { @@ -215,35 +215,35 @@ margin: 1em 0; } -.markdown>p, -.markdown>blockquote, -.markdown>.highlight, -.markdown>ol, -.markdown>ul { +.markdown > p, +.markdown > blockquote, +.markdown > .highlight, +.markdown > ol, +.markdown > ul { width: 80%; } -.markdown ul>li { +.markdown ul > li { list-style: circle; } -.markdown>ul li, -.markdown blockquote ul>li { +.markdown > ul li, +.markdown blockquote ul > li { margin-left: 20px; padding-left: 4px; } -.markdown>ul li p, -.markdown>ol li p { +.markdown > ul li p, +.markdown > ol li p { margin: 0.6em 0; } -.markdown ol>li { +.markdown ol > li { list-style: decimal; } -.markdown>ol li, -.markdown blockquote ol>li { +.markdown > ol li, +.markdown blockquote ol > li { margin-left: 20px; padding-left: 4px; } @@ -260,7 +260,7 @@ font-weight: 600; } -.markdown>table { +.markdown > table { border-collapse: collapse; border-spacing: 0px; empty-cells: show; @@ -269,20 +269,20 @@ margin-bottom: 24px; } -.markdown>table th { +.markdown > table th { white-space: nowrap; color: #333; font-weight: 600; } -.markdown>table th, -.markdown>table td { +.markdown > table th, +.markdown > table td { border: 1px solid #e9e9e9; padding: 8px 16px; text-align: left; } -.markdown>table th { +.markdown > table th { background: #F7F7F7; } @@ -318,8 +318,8 @@ display: inline-block; } -.markdown>br, -.markdown>p>br { +.markdown > br, +.markdown > p > br { clear: both; } @@ -453,13 +453,13 @@ pre[class*="language-"] { overflow: auto; } -:not(pre)>code[class*="language-"], +:not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } /* Inline code */ -:not(pre)>code[class*="language-"] { +:not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; diff --git a/frontend/src/styles/deicon/iconfont.css b/frontend/src/styles/deicon/iconfont.css index 6d6a92a945..368265f0dc 100644 --- a/frontend/src/styles/deicon/iconfont.css +++ b/frontend/src/styles/deicon/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2459092 */ src: url('iconfont.woff2?t=1627282547459') format('woff2'), - url('iconfont.woff?t=1627282547459') format('woff'), - url('iconfont.ttf?t=1627282547459') format('truetype'); + url('iconfont.woff?t=1627282547459') format('woff'), + url('iconfont.ttf?t=1627282547459') format('truetype'); } .iconfont { diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 5abf277bb0..424329d78f 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -7,7 +7,8 @@ @import './topbar.scss'; @import "~fit2cloud-ui/src/styles/index.scss"; @import './vdrr/common-temp.scss'; -@import '~umy-ui/lib/theme-chalk/index.css';// 引入样式 +@import '~umy-ui/lib/theme-chalk/index.css'; +// 引入样式 @import './deicon/iconfont.css'; // @import '../metersphere/common/css/index.css'; @@ -75,11 +76,12 @@ div:focus { .de-dialog { width: 30% !important; - .el-dialog__header{ + .el-dialog__header { background-color: #f4f4f5; padding: 10px 20px !important; } - .el-dialog__body{ + + .el-dialog__body { padding: 1px 20px !important; } } @@ -88,7 +90,7 @@ div:focus { min-width: 500px !important; width: 50% !important; - .el-dialog__header{ + .el-dialog__header { // background-color: #f4f4f5; padding: 10px 20px !important; @@ -96,7 +98,8 @@ div:focus { top: 15px !important; } } - .el-dialog__body{ + + .el-dialog__body { padding: 1px 15px !important; } } @@ -104,7 +107,7 @@ div:focus { .de-style-dialog { width: 600px !important; - .el-dialog__header{ + .el-dialog__header { // background-color: #f4f4f5; padding: 10px 20px !important; @@ -112,45 +115,51 @@ div:focus { top: 15px !important; } } - .el-dialog__body{ + + .el-dialog__body { padding: 1px 15px !important; } } .preview-dialog { - padding: 0px!important; - .el-dialog--center{ - padding: 0px!important; + padding: 0px !important; + + .el-dialog--center { + padding: 0px !important; } - .el-dialog__header{ - display:none!important; + .el-dialog__header { + display: none !important; } - .el-dialog__body{ - padding: 0px!important; - height: 100vh!important; + + .el-dialog__body { + padding: 0px !important; + height: 100vh !important; } } .de-search-header { - .el-tabs__header{ + .el-tabs__header { display: none !important;; } } -.de-input{ +.de-input { margin-bottom: 14px; margin-top: 10px; - .el-input{ + + .el-input { .el-input__inner { line-height: 30px !important; height: 30px !important; border-right: none; } } - .el-input__inner:focus{ + + .el-input__inner:focus { border-color: #E6E6E6 !important; } + .el-input-group__append { background-color: #ffffff; } @@ -158,6 +167,7 @@ div:focus { .filter-card-class { width: 100%; + .el-card__header { padding: 5px 0 !important; border-bottom: none !important; @@ -176,12 +186,13 @@ div:focus { } .de-filter-data-table { - .el-table__body-wrapper >table>{ + .el-table__body-wrapper > table > { tbody { .el-table__row { :hover { cursor: pointer; } + td { border: none !important; } @@ -189,26 +200,31 @@ div:focus { } } } + .de-msg-data-table { - .el-table__body-wrapper >table>{ + .el-table__body-wrapper > table > { tbody { .el-table__row { :hover { cursor: pointer; } } + td { padding: 3px 0 !important; } } } } + .de-filter-data-table::before { height: 0px !important; } + .de-msg-data-table::before { height: 0px !important; } + .custom-component-class { width: 100%; @@ -221,80 +237,92 @@ div:focus { } } -%field-icon{ +%field-icon { font-size: 13px; margin: 0 2px 0 0; } -.field-icon-text{ + +.field-icon-text { @extend %field-icon; color: #688fd8; } -.field-icon-time{ + +.field-icon-time { @extend %field-icon; color: #faaa39; } -.field-icon-value{ + +.field-icon-value { @extend %field-icon; color: #37b4aa; } -.field-icon-location{ + +.field-icon-location { @extend %field-icon; color: #F56C6C; } -.field-icon-sort{ + +.field-icon-sort { font-size: 10px; @extend %field-icon; color: #999999; margin: 0 2px 1px 0; } -.ds-icon-scene{ + +.ds-icon-scene { width: 13px; height: 13px; margin-right: 5px; color: #0a7be0; } -.ds-icon-db{ + +.ds-icon-db { width: 14px; height: 14px; color: #3685f2; margin: 0 2px 0 0; } -.ds-icon-sql{ + +.ds-icon-sql { width: 14px; height: 14px; color: #faaa39; margin: 0 2px 0 0; } -.ds-icon-excel{ + +.ds-icon-excel { width: 14px; height: 14px; color: #13cd66; margin: 0 2px 0 0; } -.ds-icon-custom{ + +.ds-icon-custom { width: 14px; height: 14px; color: #23beef; margin: 0 2px 0 0; } -.showRightPanel{ - .el-popper{ - position: fixed!important; + +.showRightPanel { + .el-popper { + position: fixed !important; } } -.login-logo-icon{ + +.login-logo-icon { width: auto; height: 60px; } -.top-nav-logo-icon{ +.top-nav-logo-icon { width: 140px; height: 45px; padding-top: 10px; } .m-colorPicker .box { - bottom:20px; + bottom: 20px; } @@ -308,6 +336,7 @@ div:focus { background: #d7d9e3; border-radius: 4px; } + ::-webkit-scrollbar { width: 5px; height: 5px; diff --git a/frontend/src/styles/sidebar.scss b/frontend/src/styles/sidebar.scss index 7f92d75481..3f50428ac0 100644 --- a/frontend/src/styles/sidebar.scss +++ b/frontend/src/styles/sidebar.scss @@ -8,9 +8,11 @@ margin-top: $topBarHeight; position: relative; } + .sidebarHide { - margin-left: 0!important; + margin-left: 0 !important; } + .sidebar-container { transition: width 0.28s; // width: $sideBarWidth !important; @@ -84,11 +86,11 @@ } } - .is-active>.el-submenu__title { + .is-active > .el-submenu__title { color: $menuActiveText !important; } - & .nest-menu .el-submenu>.el-submenu__title, + & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { min-width: $sideBarWidth !important; background-color: $subMenuBg !important; @@ -124,7 +126,7 @@ .el-submenu { overflow: hidden; - &>.el-submenu__title { + & > .el-submenu__title { padding: 0 !important; .svg-icon { @@ -139,8 +141,8 @@ .el-menu--collapse { .el-submenu { - &>.el-submenu__title { - &>span { + & > .el-submenu__title { + & > span { height: 0; width: 0; overflow: hidden; @@ -187,13 +189,13 @@ // when menu collapsed .el-menu--vertical { - &>.el-menu { + & > .el-menu { .svg-icon { margin-right: 16px; } } - .nest-menu .el-submenu>.el-submenu__title, + .nest-menu .el-submenu > .el-submenu__title, .el-menu-item { &:hover { // you can use $subMenuHover @@ -202,7 +204,7 @@ } // the scroll bar appears when the subMenu is too long - >.el-menu--popup { + > .el-menu--popup { max-height: 100vh; overflow-y: auto; diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss index da842372c0..9c23b41b86 100644 --- a/frontend/src/styles/topbar.scss +++ b/frontend/src/styles/topbar.scss @@ -17,34 +17,40 @@ font-size: 24px; font-weight: bold; // color: rgb(191, 203, 217); - color: rgba(255,255,255,0.87); + color: rgba(255, 255, 255, 0.87); float: left; - img{ + + img { width: auto; max-height: 45px; } } + .el-menu { float: left; - border: none!important; + border: none !important; // background-color: #304156; // background-color: $--color-primary; .nav-item { display: inline-block; + .el-menu-item:not(.is-active) { // color: rgb(191, 203, 217); color: $menuText; + &:hover { background-color: $menuHover !important; // color: $subMenuActiveText !important; } + &:focus { background-color: $subMenuHover !important; color: $subMenuActiveText !important; } } + .is-active { background-color: $subMenuHover !important; color: $subMenuActiveText !important; @@ -85,19 +91,23 @@ .avatar-container { margin-right: 30px; + .avatar-wrapper { margin-top: 5px; position: relative; + .user-avatar { cursor: pointer; width: 40px; height: 40px; border-radius: 10px; } + .de-user-avatar { cursor: pointer; height: 40px; border-radius: 10px; + span { color: #ffffff; } diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss index 0f4300f328..99112a505d 100644 --- a/frontend/src/styles/variables.scss +++ b/frontend/src/styles/variables.scss @@ -26,20 +26,20 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts"; @import "~fit2cloud-ui/src/styles/common/variables"; // sidebar -$menuText:#1e212a; -$menuActiveText:#0a7be0; -$topMenuActiveText:#f4f4f5; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 +$menuText: #1e212a; +$menuActiveText: #0a7be0; +$topMenuActiveText: #f4f4f5; +$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951 // $menuBg:#304156; -$menuBg:#ffffff; +$menuBg: #ffffff; // $menuHover:#263445; $menuHover: rgba(158, 158, 158, 0.2); -$subMenuBg:#ffffff; +$subMenuBg: #ffffff; // $subMenuHover:#001528; -$subMenuHover:#0a7be0; -$colorBg:rgba(10,123,224,.1); +$subMenuHover: #0a7be0; +$colorBg: rgba(10, 123, 224, .1); $sideBarWidth: 210px; $topBarHeight: 56px;