diff --git a/images/backgroundColor.svg b/images/backgroundColor.svg new file mode 100644 index 0000000000000000000000000000000000000000..0b60d4844c4524c5b7e32c16dd51e58e92cbb898 --- /dev/null +++ b/images/backgroundColor.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/bold.svg b/images/bold.svg new file mode 100644 index 0000000000000000000000000000000000000000..eb6bcf2cfb1d4c4690ead7b8f5e7454b553a7d2f --- /dev/null +++ b/images/bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/downicon-dark.svg b/images/downicon-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..78bbc73302eedd3807367df5810b27638dbadeb5 --- /dev/null +++ b/images/downicon-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/dropicon-dark.svg b/images/dropicon-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..2dbde222c5e5d4f68e9f27772f02fd95241b055d --- /dev/null +++ b/images/dropicon-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/dropicon.svg b/images/dropicon.svg new file mode 100644 index 0000000000000000000000000000000000000000..cd0b176632270ea838aa990dcb30ee4e6a3592e6 --- /dev/null +++ b/images/dropicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/indentDecrease.svg b/images/indentDecrease.svg new file mode 100644 index 0000000000000000000000000000000000000000..ff400de8d74c10109252b4eb2b10112b0e241525 --- /dev/null +++ b/images/indentDecrease.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/indentIncrease.svg b/images/indentIncrease.svg new file mode 100644 index 0000000000000000000000000000000000000000..03b7d6f1400d3e903003c6fa0ba5300593814130 --- /dev/null +++ b/images/indentIncrease.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/italic.svg b/images/italic.svg new file mode 100644 index 0000000000000000000000000000000000000000..7fa17a1e45d5cf714894dae00843ebfca63948e6 --- /dev/null +++ b/images/italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/li.svg b/images/li.svg new file mode 100644 index 0000000000000000000000000000000000000000..dabee8b29de327b41d20c6e01c95e60082188e5e --- /dev/null +++ b/images/li.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/link.svg b/images/link.svg new file mode 100644 index 0000000000000000000000000000000000000000..63c60274875a59490ae538b20de3679a3fa6dc71 --- /dev/null +++ b/images/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/quote.svg b/images/quote.svg new file mode 100644 index 0000000000000000000000000000000000000000..3aafe3b635b46923f0b810076e833232262864f3 --- /dev/null +++ b/images/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/redo.svg b/images/redo.svg new file mode 100644 index 0000000000000000000000000000000000000000..77a42b43758080d2c674735cc21f8c792515bdff --- /dev/null +++ b/images/redo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/source.svg b/images/source.svg new file mode 100644 index 0000000000000000000000000000000000000000..74c79d13f8aeb6f3f26d6ed523fcf83a85381800 --- /dev/null +++ b/images/source.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/strike.svg b/images/strike.svg new file mode 100644 index 0000000000000000000000000000000000000000..3f1c2a49161168886cc3f01a4ec7ff9344275ef3 --- /dev/null +++ b/images/strike.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/sub.svg b/images/sub.svg new file mode 100644 index 0000000000000000000000000000000000000000..6b92860763be918493bfe7f991ead6036576b1b2 --- /dev/null +++ b/images/sub.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/sup.svg b/images/sup.svg new file mode 100644 index 0000000000000000000000000000000000000000..77fe6f7e3d541b166d771ba968e69358601e3658 --- /dev/null +++ b/images/sup.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/textColor.svg b/images/textColor.svg new file mode 100644 index 0000000000000000000000000000000000000000..c03007912fd26fbb8e968955a727d2a44e056a89 --- /dev/null +++ b/images/textColor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/ul.svg b/images/ul.svg new file mode 100644 index 0000000000000000000000000000000000000000..78404fd9a33cfe251cc4f1903c85d0c7138afcd8 --- /dev/null +++ b/images/ul.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/underline.svg b/images/underline.svg new file mode 100644 index 0000000000000000000000000000000000000000..0524f1a972cd60a6dc745a9a61cae76e37b3f043 --- /dev/null +++ b/images/underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/undo.svg b/images/undo.svg new file mode 100644 index 0000000000000000000000000000000000000000..876043f607008f3f2ef22d6fd702a17152fc98e8 --- /dev/null +++ b/images/undo.svg @@ -0,0 +1,3 @@ + + + diff --git a/style.css b/style.css index 8fe7b92a5174c977af9f9c70718810c6fa028829..829b907253653ab2130ae89a11d785f159339012 100644 --- a/style.css +++ b/style.css @@ -176,6 +176,7 @@ --attachnextcloud-files: url('/themes/Murena/snappymail/images/attachnextcloud-files.svg'); --toolbar-folder: url('/themes/Murena/snappymail/images/toolbar-folder.svg'); --toolbar-photo: url('/themes/Murena/snappymail/images/toolbar-photo.svg'); + --link: url('/themes/Murena/snappymail/images/link.svg'); --search: url('/themes/Murena/snappymail/images/search.svg'); --info: url('/themes/Murena/snappymail/images/info.svg'); --tag: url('/themes/Murena/snappymail/images/tag.svg'); @@ -192,6 +193,23 @@ --folder: url('/themes/Murena/snappymail/images/folder.svg'); --contactmail: url('/themes/Murena/snappymail/images/contactsmail.svg'); --contact: url('/themes/Murena/snappymail/images/contact.svg'); + --undo: url('/themes/Murena/snappymail/images/undo.svg'); + --redo: url('/themes/Murena/snappymail/images/redo.svg'); + --source: url('/themes/Murena/snappymail/images/source.svg'); + --ul: url('/themes/Murena/snappymail/images/ul.svg'); + --li: url('/themes/Murena/snappymail/images/li.svg'); + --quote: url('/themes/Murena/snappymail/images/quote.svg'); + --indentDecrease: url('/themes/Murena/snappymail/images/indentDecrease.svg'); + --indentIncrease: url('/themes/Murena/snappymail/images/indentIncrease.svg'); + --sub: url('/themes/Murena/snappymail/images/sub.svg'); + --sup: url('/themes/Murena/snappymail/images/sup.svg'); + --strike: url('/themes/Murena/snappymail/images/strike.svg'); + --underline: url('/themes/Murena/snappymail/images/underline.svg'); + --italic: url('/themes/Murena/snappymail/images/italic.svg'); + --bold: url('/themes/Murena/snappymail/images/bold.svg'); + --backgroundColor: url('/themes/Murena/snappymail/images/backgroundColor.svg'); + --textColor: url('/themes/Murena/snappymail/images/textColor.svg'); + --dropicon: url('/themes/Murena/snappymail/images/dropicon.svg'); --svg-color: rgb(0, 0, 0); --svg-color-second: rgba(255, 255, 255, 1); --svg-color-third: #333333; @@ -340,6 +358,7 @@ body[data-themes="dark"] , body[data-themes="dark-highcontrast"] { --attachment: url('/themes/Murena/snappymail/images/attachment-dark.svg'); --file-text: url('/themes/Murena/snappymail/images/file-text-dark.svg'); --profiledownarrow: url('/themes/Murena/snappymail/images/profiledownarrow-dark.svg'); + --dropicon: url('/themes/Murena/snappymail/images/dropicon-dark.svg'); --svg-color: rgba(255, 255, 255); --svg-color-second: rgba(18, 18, 18, 1); --svg-color-third: rgba(255, 255, 255, 0.87); @@ -489,6 +508,7 @@ body[data-themes="dark"] , body[data-themes="dark-highcontrast"] { --attachment: url('/themes/Murena/snappymail/images/attachment-dark.svg'); --file-text: url('/themes/Murena/snappymail/images/file-text-dark.svg'); --profiledownarrow: url('/themes/Murena/snappymail/images/profiledownarrow-dark.svg'); + --dropicon: url('/themes/Murena/snappymail/images/dropicon-dark.svg'); --svg-color: rgba(255, 255, 255); --svg-color-second: rgba(18, 18, 18, 1); --svg-color-third: rgba(255, 255, 255, 0.87); @@ -2332,6 +2352,7 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app #V-PopupsCompose .b-header { background: var(--color-compose-background); padding-left: 0; + position: relative; } #rl-app #V-PopupsCompose .b-header table { border-collapse: unset; @@ -2416,12 +2437,15 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { border-radius: 4px; height: 33px; line-height: 33px; - padding: 0 12px; + padding: 0 11px; } #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn:nth-child(1) { width: 85px; vertical-align: baseline; padding: 0 24px; + height: 36px; + line-height: 36px; + } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2) { width: 71px; @@ -2429,20 +2453,35 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn { vertical-align: baseline; - background: var(--input-bg-clr, --color-primary-element-text-one) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+') right center / 1em no-repeat border-box; - background-position: right 6px center; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: var(--dropicon) no-repeat; + background-position: right center; + padding-right: 20px; + height: 36px; + line-height: 32px; } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2) { margin-left: 3px; - background: var(--input-bg-clr, --color-primary-element-text-one) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+') right center / 1em no-repeat border-box; - background-position: right 6px center; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: var(--dropicon) no-repeat; + background-position: right center; + padding-right: 20px; } #rl-app #V-PopupsCompose #squire-toolgroup-colors .btn, #rl-app #V-PopupsCompose #squire-toolgroup-inline .btn, #rl-app #V-PopupsCompose #squire-toolgroup-block .btn, #rl-app #V-PopupsCompose #squire-toolgroup-targets .btn, #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn { - padding: 4px 6px; + vertical-align: top; + padding: 0 6px; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + height: 35px; } #rl-app #V-PopupsCompose .pull-right .minimize-custom, #rl-app #V-PopupsCompose .pull-right .close { @@ -2457,12 +2496,15 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { padding-left: 10px; } #rl-app .squire-toolbar { - border-bottom: 1px solid var(--border-color, #ddd); - height: 46px; + height: 45px; box-sizing: content-box; - padding-top: 6px; + margin-top: 6px; padding-bottom: 0; padding-left: 16px; + display: flex; + align-items: center; + margin-bottom: 10px; + border:none; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show { background: var(--color-main-dropdown); @@ -3255,6 +3297,8 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { height: 36px; line-height: 36px; vertical-align: bottom; + display: flex; + align-items: center; } #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors .btn, @@ -3264,6 +3308,10 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes .btn { font-weight: 400; vertical-align: unset; + align-self: center; + line-height: 36px; + height: 36px; + width:30px; } #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="ul"] { height: 36px; @@ -3279,7 +3327,7 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { background-color: var(--svg-color); fill-opacity: var(--svg-opacity); height: 36px; - width: 20px; + width: 30px; color: transparent; content: ""; } @@ -3293,7 +3341,21 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { background-color: var(--svg-color); fill-opacity: var(--svg-opacity); height: 36px; - width: 20px; + width: 30px; + color: transparent; + content: ""; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(1) { + mask-image: var(--link); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--link); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity: var(--svg-opacity); + height: 36px; + width: 30px; color: transparent; content: ""; } @@ -3801,7 +3863,7 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { line-height: 56px !important; } #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic:nth-child(1) { - background-image: var(--attachment); + background-image: var(--attachfiles); background-position: center center; background-repeat: no-repeat; padding-top: 5px; @@ -3842,7 +3904,10 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { } #rl-app .squire-wysiwyg { margin-top: 0; - border: none; + border-top: 1px solid var(--color-border-second); + border-right: none; + border-bottom: none; + border-left: none; } #rl-app label[data-i18n="GLOBAL/TO"], #rl-app #V-PopupsCompose .b-header td[data-i18n="GLOBAL/FROM"], @@ -3920,6 +3985,16 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app #V-PopupsCompose .b-header table tr:nth-child(1) td { border-bottom: transparent; } + #rl-app #V-PopupsCompose .b-header table tr td:nth-child(1) { + position: relative; + } + #rl-app #V-PopupsCompose .b-header table tr td:nth-child(1)::after { + content: ":"; + position: absolute; + padding-left: 1px; + bottom: 9px; + color:var(--color-text-dark-second); + } #rl-app #V-MailMessageView .messageView .messageItemHeader .close { display: none; } @@ -4178,6 +4253,35 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app #messageItem .bodyText a { color: #087BF9 !important; } + body[data-themes="light"] #rl-app #messageItem, + body[data-themes="light"] #rl-app #messageItem table, + body[data-themes="light"] #rl-app #messageItem h1, + body[data-themes="light"] #rl-app #messageItem h2, + body[data-themes="light"] #rl-app #messageItem h3, + body[data-themes="light"] #rl-app #messageItem h4, + body[data-themes="light"] #rl-app #messageItem p, + body[data-themes="light"] #rl-app #messageItem span, + body[data-themes="light"] #rl-app #messageItem div, + body[data-themes="light"] #rl-app #messageItem li, + body[data-themes="light"]#rl-app #messageItem font, + body[data-themes="light"] #rl-app #messageItem tr, + body[data-themes="light"] #rl-app #messageItem td, + body[data-themes="light-highcontrast"] #rl-app #messageItem, + body[data-themes="light-highcontrast"] #rl-app #messageItem table, + body[data-themes="light-highcontrast"] #rl-app #messageItem h1, + body[data-themes="light-highcontrast"] #rl-app #messageItem h2, + body[data-themes="light-highcontrast"] #rl-app #messageItem h3, + body[data-themes="light-highcontrast"] #rl-app #messageItem h4, + body[data-themes="light-highcontrast"] #rl-app #messageItem p, + body[data-themes="light-highcontrast"] #rl-app #messageItem span, + body[data-themes="light-highcontrast"] #rl-app #messageItem div, + body[data-themes="light-highcontrast"] #rl-app #messageItem li, + body[data-themes="light-highcontrast"]#rl-app #messageItem font, + body[data-themes="light-highcontrast"] #rl-app #messageItem tr, + body[data-themes="light-highcontrast"] #rl-app #messageItem td { + background: var(--color-background-mailbody) !important; + color: var(--color-main-text) !important; + } } #rl-app #rl-popups #V-PopupsContacts label[data-i18n="CONTACTS/TAB_BUSINESS"], #rl-app #rl-popups #V-PopupsContacts label[data-i18n="CONTACTS/TAB_CRYPTO"], @@ -4231,11 +4335,269 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { background-color: var(--color-main-background); } #rl-popups .modal-body .tabs>[id^=tab]:checked+label{ - background-color: var(--color-background-composeheader); + background-color: var(--color-background-black); border-color: var(--color-border-second); opacity: 1; z-index: 1; + width:38px; } #rl-popups .modal-body .tabs>label{ margin: 0 2px 1px 0; } + #rl-app #V-PopupsCompose .b-header.g-ui-user-select-none .btn-group:nth-of-type(3) { + position: absolute; + bottom: -32px; + right: 9px; + z-index: 999; + } + #rl-app #V-PopupsCompose .tabs .icon-file-text { + vertical-align: middle; + height: 19px; + display: block; + background-image: var(--file-text); + background-position: center center; + background-repeat: no-repeat; + } + + #rl-app #V-PopupsCompose .tabs .icon-file-text::before { + content: ""; + } + #rl-app #V-PopupsCompose .tabs span[data-i18n="GLOBAL/TEXT"] { + display: none; + } + #rl-app #V-PopupsCompose .tabs .icon-attachment { + vertical-align: middle; + height: 19px; + display: block; + background-image: var(--attachment); + background-position: center center; + background-repeat: no-repeat; + margin-left:0px; + } + #rl-app #V-PopupsCompose .tabs .icon-attachment::before { + content: ""; + } + #rl-app #V-PopupsCompose .tabs span[data-i18n="GLOBAL/ATTACHMENTS"] { + display: none; + } + #rl-app #V-PopupsCompose .tabs{ + position: relative; + background: var(--color-compose-background); + } + #rl-app #V-PopupsCompose .tabs label:nth-of-type(2){ + position: absolute; + left: 54px; + top: 0px; + border: 1px solid var(--color-border-second); + width:38px; + height:32px; + border-radius: 0 4px 4px 0; + } + #rl-app #V-PopupsCompose .tabs label:nth-of-type(3){ + position: absolute; + left: 92px; + top: 0px; + border: 1px solid var(--color-border-second); + width:38px; + height:32px; + border-radius: 0 4px 4px 0; + } + #rl-app #V-PopupsCompose .tabs label:nth-of-type(1) { + border-radius: 4px 0px 0px 4px; + border: 1px solid var(--color-border-second); + width: 38px; + margin-left:16px; + height:32px; + } + #rl-app #V-PopupsCompose .tabs label[for="tab-mailvelope"] span{ + display: none; + } + #rl-app #V-PopupsCompose .b-header td:first-child{ + text-align:left; + } + + + #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn[data-action="undo"], + #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn[data-action="redo"] { + padding-bottom: 5px; + display: flex; + align-items: center; + } + #rl-app #V-PopupsCompose #squire-toolgroup-font{ + display: flex; + align-items: center; + } + + #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn[data-action="undo"] { + mask-image: var(--undo); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--undo); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn[data-action="redo"] { + mask-image: var(--redo); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--redo); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + + background-color: var(--svg-color); + color: transparent; + } + #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn[data-action="source"] { + mask-image: var(--source); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--source); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="indentDecrease"]{ + mask-image: var(--indentDecrease); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--indentDecrease); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="indentIncrease"]{ + mask-image: var(--indentIncrease); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--indentIncrease); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="quote"]{ + mask-image: var(--quote); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--quote); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="ol"]{ + mask-image: var(--li); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--li); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="ul"]{ + mask-image: var(--ul); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--ul); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="sup"]{ + mask-image: var(--sup); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--sup); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="sub"]{ + mask-image: var(--sub); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--sub); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="strike"]{ + mask-image: var(--strike); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--strike); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="underline"] s{ + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="underline"]{ + mask-image: var(--underline); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--underline); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="underline"] u{ + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="italic"]{ + mask-image: var(--italic); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--italic); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn[data-action="bold"]{ + mask-image: var(--bold); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--bold); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #V-PopupsCompose #squire-toolgroup-colors .btn[data-action="backgroundColor"]{ + mask-image: var(--backgroundColor); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--backgroundColor); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #V-PopupsCompose #squire-toolgroup-colors .btn[data-action="textColor"]{ + mask-image: var(--textColor); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--textColor); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + color: transparent; + } + #rl-app #V-PopupsCompose .squire-mode-plain .btn-group:not(#squire-toolgroup-mode), + .squire-mode-plain .squire-wysiwyg, + .squire-mode-source .squire-wysiwyg, + .squire-mode-wysiwyg .squire-plain { + display: none !important; + }