diff --git a/images/archieve-color.svg b/images/archieve-color.svg deleted file mode 100644 index b10d2b17140ce1b39e27bd45c24fb44dbca2f9c7..0000000000000000000000000000000000000000 --- a/images/archieve-color.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/images/archieve.svg b/images/archieve.svg index a88009249e0fc02788bf23d17ae8424bb63778b4..1ddf0fb295799b177565629876cf79647c9dc17a 100644 --- a/images/archieve.svg +++ b/images/archieve.svg @@ -1,4 +1,4 @@ - + diff --git a/images/archievetop-color.svg b/images/archievetop-color.svg deleted file mode 100644 index 156c76dda2c01e28e353b763372ac54cbfbdebe6..0000000000000000000000000000000000000000 --- a/images/archievetop-color.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/images/attachfiles-dark.svg b/images/attachfiles-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..3d91772d5caa15322fecd36970267c4aa374a4cc --- /dev/null +++ b/images/attachfiles-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/attachfiles.svg b/images/attachfiles.svg new file mode 100644 index 0000000000000000000000000000000000000000..b8a5318a365bba2f9e1143789e6645815bc752df --- /dev/null +++ b/images/attachfiles.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/attachment-dark.svg b/images/attachment-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..7dbb645165c5128af40204859c3daec1a3d87973 --- /dev/null +++ b/images/attachment-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/attachment.svg b/images/attachment.svg new file mode 100644 index 0000000000000000000000000000000000000000..e79aae977ebc667f73c34d67c555db1514786250 --- /dev/null +++ b/images/attachment.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/attachnextcloud-files-dark.svg b/images/attachnextcloud-files-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..ddb411a6ccfa77b8c7430ac2c4914858927757fe --- /dev/null +++ b/images/attachnextcloud-files-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/create-folder-color.svg b/images/create-folder-color.svg deleted file mode 100644 index ebccd67aeef9c8f45be12be91c096fc3ecc48797..0000000000000000000000000000000000000000 --- a/images/create-folder-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/createfolder-color.svg b/images/createfolder-color.svg index 7a65e434b95f894448e86456aba9878af3d979c4..ebccd67aeef9c8f45be12be91c096fc3ecc48797 100644 --- a/images/createfolder-color.svg +++ b/images/createfolder-color.svg @@ -1,3 +1,3 @@ - - + + diff --git a/images/createfolder.svg b/images/createfolder.svg index 856a30578950a3de9ed512251ce8445a8e827e51..191d880c5257c82db3c2b545cd57b5700c502484 100644 --- a/images/createfolder.svg +++ b/images/createfolder.svg @@ -1,3 +1,3 @@ - + diff --git a/images/draft-color.svg b/images/draft-color.svg deleted file mode 100644 index 1d1c5bc15e3d3b135e1286166dd6809e9af5894d..0000000000000000000000000000000000000000 --- a/images/draft-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/draft.svg b/images/draft.svg index 912b788e82b519e8cc3107612b65581ffb86093b..7419e9421a2d3dc3b301119d2e7b0cf010b12ab7 100644 --- a/images/draft.svg +++ b/images/draft.svg @@ -1,3 +1,3 @@ - + diff --git a/images/file-text-dark.svg b/images/file-text-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..cf4812c648686215abcc31d5e80340e4764d4847 --- /dev/null +++ b/images/file-text-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/file-text.svg b/images/file-text.svg new file mode 100644 index 0000000000000000000000000000000000000000..0fd4d15709c97c437b520e4d0a76c141cd5ecdd1 --- /dev/null +++ b/images/file-text.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/folder.svg b/images/folder.svg index ba866d21f432fedcefc44028156231e97209ad0e..b22f30f0555696988e030081d25412c35489702b 100644 --- a/images/folder.svg +++ b/images/folder.svg @@ -1,3 +1,3 @@ - + diff --git a/images/help-dark.svg b/images/help-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..adef24a706ed2b808e349098a3f35d81585e8325 --- /dev/null +++ b/images/help-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/hide-my-email-dark.svg b/images/hide-my-email-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..033adc7fa032269fd173d54d25e576ab51c765c6 --- /dev/null +++ b/images/hide-my-email-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/inbox-color.svg b/images/inbox-color.svg deleted file mode 100644 index e579be5fa27a109b8f9c44ea00a30b6e9f9d9800..0000000000000000000000000000000000000000 --- a/images/inbox-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/inbox.png b/images/inbox.png deleted file mode 100644 index 2e59c426d924b32a37345173e34dd75d41895fcc..0000000000000000000000000000000000000000 Binary files a/images/inbox.png and /dev/null differ diff --git a/images/inbox.svg b/images/inbox.svg index 47ee2e2505fcae6dcf1f8115adfac11bcf8d411d..3d65197343f3cf79ab4407b9137d3be00c73345e 100644 --- a/images/inbox.svg +++ b/images/inbox.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/images/info-dark.svg b/images/info-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..1b8e2788a709f6fc2a2cec1725b86f2619d78bae --- /dev/null +++ b/images/info-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/language.svg b/images/language.svg index fd5ecb2217889f829fb6ade3636f578b0ee2cba5..eb4ba5cd3765a86cc93118dde1a2a1c438c2ef7e 100644 --- a/images/language.svg +++ b/images/language.svg @@ -1,3 +1,3 @@ - + diff --git a/images/loading.svg b/images/loading.svg index 7828cd01a1a80a6d1190a0658b8ab9afc20d819d..bc3723bf0ad3971c05ee23b584507da2fcd9c319 100644 --- a/images/loading.svg +++ b/images/loading.svg @@ -1,3 +1,3 @@ - + diff --git a/images/mobile-dark.svg b/images/mobile-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..8173102a3aacd24885c61a5676cbce5862abb3a8 --- /dev/null +++ b/images/mobile-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/more-color.svg b/images/more-color.svg deleted file mode 100644 index 5fcb8b2e528597b6105914cbf56a81dbcd927c75..0000000000000000000000000000000000000000 --- a/images/more-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/more.svg b/images/more.svg index 16ccb7232fa031f51ad97c7d811226ad5a1838a1..b2de8211b95f4937c73732619e9214bc4f3a48c5 100644 --- a/images/more.svg +++ b/images/more.svg @@ -1,3 +1,3 @@ - + diff --git a/images/notspam.svg b/images/notspam.svg new file mode 100644 index 0000000000000000000000000000000000000000..647ee1a9632d8ad3d4a1162087c1bea810acbee7 --- /dev/null +++ b/images/notspam.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/search-dark.svg b/images/search-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..bab3a0692542a136fa114a2aceb85344dd60c490 --- /dev/null +++ b/images/search-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/send-icon.svg b/images/send-icon.svg index 031edb7b0ce4ea07eb82365ce6a64f25b5810014..e81a9c6969f62671d631b26c26f8471857148591 100644 --- a/images/send-icon.svg +++ b/images/send-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/images/sent-color.svg b/images/sent-color.svg deleted file mode 100644 index a82c14b9a44b64b3f70673ef07e00238c0a23f76..0000000000000000000000000000000000000000 --- a/images/sent-color.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/images/sent.svg b/images/sent.svg index 9aeb7d78de105b2cab44a36b02e94e08dd087acd..cf1c423c835846207d2ba68ec13737cb05e2a175 100644 --- a/images/sent.svg +++ b/images/sent.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file diff --git a/images/setting-dark.svg b/images/setting-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..0652e14d804b2438bf0ddf0a5965912ce04a46bd --- /dev/null +++ b/images/setting-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/sort-dark.svg b/images/sort-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..5c3644369806d92ba67966db0a23255d9d8a9428 --- /dev/null +++ b/images/sort-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/sort.svg b/images/sort.svg index de79f400eba7288bc301947a211c7f3c00527d74..a0fee2e6152ccdfb2b8c13e430935d809fe153b1 100644 --- a/images/sort.svg +++ b/images/sort.svg @@ -1,3 +1,3 @@ - + diff --git a/images/spam-color.svg b/images/spam-color.svg deleted file mode 100644 index 74a57ed6d1499f50a3c6ddc6eea1d7f24f00e6a7..0000000000000000000000000000000000000000 --- a/images/spam-color.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/images/spam.svg b/images/spam.svg index d81abdd1c2b6d23da0349d62c93a8f0186e87b75..70c7598c46dfa905ddc4b85cfd78168f6ec75bf4 100644 --- a/images/spam.svg +++ b/images/spam.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/images/trash-color.svg b/images/trash-color.svg deleted file mode 100644 index e1c19aa4cb27c0108a949a8d67171d97400930c2..0000000000000000000000000000000000000000 --- a/images/trash-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/trash.svg b/images/trash.svg index 50b553ed13f04a6045c29ee8b61adb6249bf105a..45510f36ce9268b88e5738b7134a182ee4d6bf86 100644 --- a/images/trash.svg +++ b/images/trash.svg @@ -1,3 +1,3 @@ - + diff --git a/style.css b/style.css index 8f44b11e2a2d4baa6af666326d0f8d8afcd93158..33ca62a9d4774b245c2f508b44694b621137f735 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,7 @@ --main-bg-repeat: repeat; --main-font-size: 14px; --color-main-background: #ffffff; + --color-compose-background: #ffffff; --color-main-background-not-plain: #0082c9; --color-main-background-rgb: 255,255,255; --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); @@ -38,8 +39,10 @@ --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; --color-background-hover: #f5f5f5; --color-background-dark: #ededed; + --color-main-dropdown: #ffffff; --color-background-grey: rgba(0, 0, 0, 0.87); --color-background-black: rgba(0, 0, 0, 0.12); + --color-background-save: rgba(0, 0, 0, 0.12); --color-background-darker: #dbdbdb; --color-placeholder-light: #e6e6e6; --color-placeholder-dark: #cccccc; @@ -49,13 +52,16 @@ --color-background-blue: rgba(8, 123, 249, 0.08); --color-background-purple: rgba(176, 52, 240, 0.07); --color-background-light-second: #f9f9f9; + --color-background-compose-error:#FFFFFF; --color-main-text: #222222; + --color-main-text-alert: #222222; --color-text-maxcontrast: #767676; --color-text-maxcontrast-default: #767676; --color-text-maxcontrast-background-blur: #646464; --color-text-light: #222222; --color-text-lighter: #767676; --color-text-dark-second: rgba(0, 0, 0, 0.38); + --color-text-selection: #ffffff; --color-scrollbar: rgba(34,34,34, .15); --color-error: #e9322d; --color-error-second: #F8432E; @@ -75,6 +81,7 @@ --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); --color-box-shadow-second: rgba(0,0,0, 0.02); --color-border: #ededed; + --color-border-compose: #ededed; --color-border-grey: #e6e6e6; --color-border-input: #e6e8e9; --color-border-dark: #dbdbdb; @@ -109,6 +116,11 @@ --color-primary: #087BF9; --color-primary-default: #0082c9; --color-primary-text: #ffffff; + --color-background-composeheader: #ffffff; + --color-primary-text-checkbox: #ffffff; + --color-createfolder-text: #ffffff; + --color-mail-text: rgba(0, 0, 0, 0.87); + --color-compose-text: #ffffff; --color-primary-hover: #3282ae; --color-primary-light: #e5eff4; --color-primary-light-second:rgba(248, 67, 46, 0.08); @@ -117,6 +129,7 @@ --color-primary-text-dark: #ededed; --color-primary-element: #087BF9; --color-primary-element-text: #ffffff; + --color-primary-element-login: #ffffff; --color-primary-element-hover: #3282ae; --color-primary-element-light: #e5eff4; --color-primary-element-light-text: #00273d; @@ -124,9 +137,61 @@ --color-primary-element-light-grey-hover: #f2f1f1; --color-primary-element-text-dark: #ededed; --color-primary-element-text-grey: #333333; + --color-primary-element-text-checkbox:#333333; --color-primary-element-text-blue: #087BF9; - --color-primary-element-text-black: #000000; + --color-primary-element-text-one: #000000; + --color-primary-element-text-maillist: rgba(0, 0, 0, 0.87); + --color-primary-element-text-maillist-subject: rgba(0, 0, 0, 0.6); + --color-primary-element-text-maillist-time: rgba(0, 0, 0, 0.38); + --color-background-save:rgba(0,0,0,0.12); + --background-email: rgba(0, 0, 0, 0.04); + --color-email-text: rgba(0, 0, 0, 0.6); + --color-mainitemheader-background:#ffffff; --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); + --spinner-icon: url('/themes/Murena/snappymail/images/loading.svg'); + --inbox:url('/themes/Murena/snappymail/images/inbox.svg'); + --createfolder:url('/themes/Murena/snappymail/images/createfolder.svg'); + --archieve:url('/themes/Murena/snappymail/images/archieve.svg'); + --spam:url('/themes/Murena/snappymail/images/spam.svg'); + --trash:url('/themes/Murena/snappymail/images/trash.svg'); + --more:url('/themes/Murena/snappymail/images/more.svg'); + --sort:url('/themes/Murena/snappymail/images/sort.svg'); + --sent:url('/themes/Murena/snappymail/images/sent.svg'); + --draft:url('/themes/Murena/snappymail/images/draft.svg'); + --setting:url('/themes/Murena/snappymail/images/setting.svg'); + --back:url('/themes/Murena/snappymail/images/back.svg'); + --editnote:url('/themes/Murena/snappymail/images/editnote.svg'); + --profilesetting:url('/themes/Murena/snappymail/images/profilesetting.svg'); + --profiledownarrow:url('/themes/Murena/snappymail/images/profiledownarrow.svg'); + --profiletick:url('/themes/Murena/snappymail/images/profiletick.svg'); + --plus:url('/themes/Murena/snappymail/images/plus.svg'); + --hide-my-email:url('/themes/Murena/snappymail/images/hide-my-email.svg'); + --help:url('/themes/Murena/snappymail/images/help.svg'); + --mobile:url('/themes/Murena/snappymail/images/mobile.svg'); + --cross: url('/themes/Murena/snappymail/images/cross.svg'); + --minimize: url('/themes/Murena/snappymail/images/minimize.svg'); + --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'); + --search:url('/themes/Murena/snappymail/images/search.svg'); + --info: url('/themes/Murena/snappymail/images/info.svg'); + --tag: url('/themes/Murena/snappymail/images/tag.svg'); + --notspam: url('/themes/Murena/snappymail/images/notspam.svg'); + --downicon:url('/themes/Murena/snappymail/images/downicon.svg'); + --back-to-inbox: url('/themes/Murena/snappymail/images/back-to-inbox.svg'); + --tick: url('/themes/Murena/snappymail/images/tick-btn.svg'); + --cross:url('/themes/Murena/snappymail/images/cross-btn.svg'); + --language:url('/themes/Murena/snappymail/images/language.svg'); + --sendicon: url('/themes/Murena/snappymail/images/send-icon.svg'); + --attachfiles: url('/themes/Murena/snappymail/images/attachfiles.svg'); + --attachment: url('/themes/Murena/snappymail/images/attachment.svg'); + --file-text: url('/themes/Murena/snappymail/images/file-text.svg'); + --folder: url('/themes/Murena/snappymail/images/folder.svg'); + --svg-color:rgb(0,0,0); + --svg-color-second:rgba(255, 255, 255, 1); + --svg-color-third:#333333; + --svg-opacity:0.6; + --svg-color-blue:#087BF9; } body.theme--dark { @@ -137,6 +202,7 @@ body.theme--dark { --main-bg-repeat: repeat; --main-font-size: 14px; --color-main-background: #171717; + --color-compose-background: #272727; --color-main-background-not-plain: #0082c9; --color-main-background-rgb: 23,23,23; --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); @@ -145,8 +211,10 @@ body.theme--dark { --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; --color-background-hover: #212121; --color-background-dark: #292929; - --color-background-grey: rgba(0, 0, 0, 0.87); + --color-main-dropdown: #383838; + --color-background-grey: rgba(255, 255, 255, 1); --color-background-black:rgba(0, 0, 0, 0.12); + --color-background-save:rgba(0, 0, 0, 0.24); --color-background-darker: #3b3b3b; --color-placeholder-light: #313131; --color-placeholder-dark: #4a4a4a; @@ -155,14 +223,17 @@ body.theme--dark { --color-background-green: rgba(68, 176, 76, 0.08); --color-background-blue: rgba(8, 123, 249, 0.08); --color-background-purple: rgba(176, 52, 240, 0.07); - --color-background-light-second: #f9f9f9; + --color-background-light-second: #3A3A3A; + --color-background-compose-error:#131313; --color-main-text: #D8D8D8; + --color-main-text-alert: #000000; --color-text-maxcontrast: #8c8c8c; --color-text-maxcontrast-default: #8c8c8c; --color-text-maxcontrast-background-blur: #919191; --color-text-light: #bfbfbf; --color-text-lighter: #a5a5a5; - --color-text-dark-second: rgba(0, 0, 0, 0.38); + --color-text-dark-second: rgba(255,255,255, 0.38); + --color-text-selection: #ffffff; --color-scrollbar: #3d3d3d; --color-error: #e9322d; --color-error-second: #F8432E; @@ -182,15 +253,16 @@ body.theme--dark { --color-box-shadow: #000000; --color-box-shadow-second: rgba(0,0,0, 0.02); --color-border: #292929; - --color-border-grey: #e6e6e6; - --color-border-input: #e6e8e9; + --color-border-compose: rgba(255, 255, 255, 0.08); + --color-border-grey: #383838; + --color-border-input: #797979; --color-border-dark: #3b3b3b; - --color-border-second: #e0e0e0; + --color-border-second: rgba(255, 255, 255, 0.12); --color-border-red: #F8432E; --color-border-orange: #FF7A00; --color-border-green: #44B04C; --color-border-purple: #B034F0; - --color-border-light-second: #DCDCDC; + --color-border-light-second: #383838; --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --default-font-size: 15px; --animation-quick: 100ms; @@ -215,7 +287,13 @@ body.theme--dark { --background-invert-if-bright: no; --color-primary: #087BF9; --color-primary-default: #0082c9; - --color-primary-text: #ffffff; + --color-primary-text: rgba(255, 255, 255, 0.04); + --color-background-composeheader: #383838; + --color-primary-text-checkbox: #000000; + --color-createfolder-text: #121212; + --color-mail-text: #ffffff; + --color-primary-element-login: #ffffff; + --color-compose-text:transparent; --color-primary-hover: #04537f; --color-primary-light: #141e24; --color-primary-light-second:rgba(248, 67, 46, 0.08); @@ -223,18 +301,35 @@ body.theme--dark { --color-primary-light-hover: #1d272d; --color-primary-text-dark: hsl(0, 0%, 93%); --color-primary-element: #087BF9; - --color-primary-element-text: #ffffff; + --color-primary-element-text: #121212; --color-primary-element-hover: #04537f; --color-primary-element-light: #141e24; --color-primary-element-light-text: #99c0d6; --color-primary-element-light-hover: #1d272d; - --color-primary-element-light-grey-hover: #f2f1f1; + --color-primary-element-light-grey-hover: #141e24; --color-primary-element-text-dark: #ededed; - --color-primary-element-text-grey: #333333; + --color-primary-element-text-grey: rgba(255, 255, 255, 0.87); + --color-primary-element-text-checkbox:#333333; --color-primary-element-text-blue: #087BF9; - --color-primary-element-text-black: #000000; + --color-primary-element-text-one: #ffffff; + --color-primary-element-text-maillist: #ffffff; + --color-primary-element-text-maillist-subject: rgba(255, 255, 255, 0.74); + --color-primary-element-text-maillist-time: rgba(255, 255, 255, 0.38); + --color-background-save:rgba(0, 0, 0, 0.24); + --background-email: : rgba(255, 255, 255, 0.04); + --color-email-text: : rgba(255, 255, 255, 0.06); + --color-mainitemheader-background:#272727; --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); - + --search:url('/themes/Murena/snappymail/images/search-dark.svg'); + --attachnextcloud-files:url('/themes/Murena/snappymail/images/attachnextcloud-files-dark.svg'); + --attachfiles: url('/themes/Murena/snappymail/images/attachfiles-dark.svg'); + --attachment: url('/themes/Murena/snappymail/images/attachment-dark.svg'); + --file-text: url('/themes/Murena/snappymail/images/file-text-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); + --svg-opacity:0.74; + --svg-color-blue:#087BF9; } @@ -283,7 +378,7 @@ html.rl-left-panel-disabled #rl-app #rl-left{ #rl-app .messageList, #rl-app .messageView { - margin: 0 5px; + margin: 0 5px 0 0; border: none; box-shadow: none !important; background: var(--color-main-background); @@ -316,7 +411,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-folders .b-content { top: 60px; - bottom: 162px; + bottom: 60px; } #rl-app .b-folders .b-content.show-on-panel-disabled { @@ -358,7 +453,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .alert { text-shadow: unset; border: unset; - color: var(--color-main-text); + color: var(--color-main-text-alert); background-color: rgba(var(--color-warning-rgb), 0.1); border-inline-start: 4px solid var(--color-warning); border-radius: var(--border-radius); @@ -488,12 +583,17 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { line-height: 56px; } #rl-app .b-folders hr { - border-bottom: 1px solid var(--color-border-grey); + border-bottom:none; } #rl-app .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1){ - background-image: url('/themes/Murena/snappymail/images/back.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--back); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--back); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity: var(--svg-opacity); height:34px; padding-left: 20px; padding-right: 19px; @@ -502,9 +602,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { color: transparent; } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add{ - background-image: url('/themes/Murena/snappymail/images/createfolder.svg'); - background-position: center right; - background-repeat: no-repeat; + mask-image: var(--createfolder); + mask-position: center right; + mask-repeat: no-repeat; + -webkit-mask-image: var(--createfolder); + -webkit-mask-position: center right; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); height:34px; padding-left: 20px; padding-right: 19px; @@ -517,9 +623,14 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled a.btn:nth-child(2){ - background-image: url('/themes/Murena/snappymail/images/setting.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--setting); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--setting); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:34px; padding-left: 20px; padding-right: 19px; @@ -647,10 +758,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/inbox.svg'); + mask-image: var(--inbox); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--inbox); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -658,10 +775,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/inbox-color.svg'); + mask-image: var(--inbox); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--inbox); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -669,10 +791,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/sent.svg'); + mask-image: var(--sent); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--sent); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -680,7 +808,14 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/sent-color.svg'); + mask-image: var(--sent); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--sent); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; background-position: left center; background-repeat: no-repeat; @@ -691,10 +826,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/draft.svg'); + mask-image: var(--draft); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--draft); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -702,10 +843,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/draft-color.svg'); + mask-image: var(--draft); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--draft); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -713,10 +859,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/spam.svg'); + mask-image: var(--spam); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spam); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -724,7 +876,14 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/spam-color.svg'); + mask-image: var(--spam); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spam); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; background-position: left center; background-repeat: no-repeat; @@ -735,21 +894,33 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/trash-color.svg'); + mask-image: var(--trash); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; padding-right: 19px; + } #rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/trash.svg'); + mask-image: var(--trash); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -757,10 +928,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/archieve-color.svg'); + mask-image: var(--archieve); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--archieve); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -768,10 +944,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/archieve.svg'); + mask-image: var(--archieve); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--archieve); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -779,10 +961,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-user li a.selectable.selected::before { - background-image: url('/themes/Murena/snappymail/images/folder-color.svg'); + mask-image: var(--folder); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--folder); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-blue); + opacity:1; content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -790,10 +977,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-folders .b-folders-user li a.selectable::before { - background-image: url('/themes/Murena/snappymail/images/folder.svg'); + mask-image: var(--folder); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--folder); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity:var(--svg-opacity); content: ""; - background-position: left center; - background-repeat: no-repeat; height: 24px; width: 24px; padding-left: 20px; @@ -826,9 +1018,13 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app #rl-content .btn.buttonCompose::before { content:""; - background-image: url('/themes/Murena/snappymail/images/editnote.svg'); - background-position: left center; - background-repeat: no-repeat; + mask-image: var(--editnote); + mask-position: left center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--editnote); + -webkit-mask-position: left center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-second); padding-left: 20px; height:20px; image-rendering: -webkit-optimize-contrast; @@ -848,7 +1044,10 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { background-color: var(--color-primary-element-text-blue); border-color: var(--color-primary-element-text-blue) !important; } - +#rl-app .btn.btn-success.buttonEdit.fontastic { + color: var(--color-main-text); + background-color:transparent; +} #rl-app .btn.btn-success:hover, #rl-app .btn.btn-success:focus { background-color: var(--color-primary-element-text-blue); @@ -869,7 +1068,6 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { min-width: -moz-fit-content; min-width: -webkit-fill-available; min-width: fit-content; - font-size: var(--default-font-size); border-radius: var(--border-radius-pill); } @@ -960,17 +1158,27 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f border-bottom: 1px solid var(--color-border-grey); } #rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(1) { - background-image: url('/themes/Murena/snappymail/images/loading.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--spinner-icon); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spinner-icon); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:20px; padding-left: 20px; padding-right: 19px; } #rl-app #V-MailMessageList .btn-toolbar a.btn:nth-child(1) .icon-spinner{ - background-image: url('/themes/Murena/snappymail/images/loading.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--spinner-icon); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spinner-icon); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity:var(--svg-opacity); width: 24px; height: 36px; content: ""; @@ -993,11 +1201,12 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f } #rl-app #V-MailMessageList input.inputSearch { padding-left:36px; - background-image: url('/themes/Murena/snappymail/images/search.svg'); + background-image: var(--search); background-position: 10px center; background-repeat: no-repeat; - height:40px; + height: 40px; border-radius: 52px; + fill-opacity:var(--svg-opacity); } /* * inputs @@ -1128,7 +1337,7 @@ select option { #rl-app .e-checkbox.material-design>div { box-sizing: border-box; - margin-right: 4px; + margin-right: 8px; margin-left: -2px; } @@ -1209,9 +1418,14 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { } #rl-app .messageList .btn.buttonMoreSearch { - background-image: url('/themes/Murena/snappymail/images/downicon.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--downicon); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--downicon); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:20px; width:20px; color:transparent; @@ -1274,22 +1488,19 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { font-weight: 500; font-size: 16px; line-height: 24px; - color: var(--color-primary-element-text-black); - opacity: 0.8; + color: var(--color-primary-element-text-maillist); } #rl-app .messageListItem .subjectParent.actionHandle { font-weight: 400; font-size: 14px; line-height: 20px; - color: var(--color-primary-element-text-black); - opacity: 0.6; + color: var(--color-primary-element-text-maillist-subject); } #rl-app .messageListItem time.actionHandle { font-weight: 400; font-size: 12px; line-height: 16px; - color:var(--color-primary-element-text-black); - opacity: 0.3; + color:var(--color-primary-element-text-maillist-time); } #rl-app .messageListItem .fromPic{ display: none; @@ -1402,10 +1613,6 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { * message view */ - #rl-app #V-MailMessageView { - bottom: 0; -} - html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar { /* TODO Improve mobile experience */ } @@ -1478,6 +1685,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app .messageView .messageAssignedTags { margin: 0 5px; + flex:none; } #rl-app .messageView .messageAssignedTags span { @@ -1501,8 +1709,12 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app #messageItem .showImages:hover { background-color: var(--color-primary-light-hover); } +#rl-app .messageView .messageItemHeader{ + background-color: var(--color-mainitemheader-background); + border-color: var(--color-border); + color: var(--color-main-text); +} -#rl-app .messageView .messageItemHeader, #rl-app #messageItem .attachmentsPlace { background-color: unset; border-color: var(--color-border); @@ -1667,7 +1879,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app .dropdown-menu { - background-color: var(--color-main-background); + background-color: var(--color-main-dropdown); box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.2); border-radius: 4px; color: var(--color-main-text); @@ -1734,8 +1946,8 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #V-SystemDropDown .accountPlace { - background: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.6); + background: var(--background-email); + color: var(--color-email-text); text-shadow: none; font-weight: 400; font-size: 14px; @@ -1756,18 +1968,27 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app #V-SystemDropDown #top-system-dropdown-id .fontastic:nth-child(1) { - color:transparent; - background-image: url('/themes/Murena/snappymail/images/profilesetting.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--profilesetting); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--profilesetting); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity: var(--svg-opacity); font-size:20px; } #rl-app #V-SystemDropDown #top-system-dropdown-id:after { color:transparent; - background-image: url('/themes/Murena/snappymail/images/profiledownarrow.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--profiledownarrow); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--profiledownarrow); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity: var(--svg-opacity); padding-left:10px; } @@ -1912,10 +2133,13 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app ::selection { - background-color: var(--color-primary-element); - color: var(--color-primary-text); + background-color: var(--color-primary-element) !important; + color: var(--color-text-selection) !important; +} +::selection { + background-color: var(--color-primary-element) !important; + color: var(--color-text-selection) !important; } - /* TODO: Improve popup layout and theming */ /* * Popups @@ -1931,14 +2155,14 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #V-PopupsCompose .b-header { - background:var(--color-main-background); + background:var(--color-compose-background); padding-left: 0px; } #rl-app #V-PopupsCompose .b-header table{ border-collapse: unset; } #rl-app #V-PopupsCompose .b-header table td{ - border-bottom: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border-compose); } #rl-app #V-PopupsCompose .b-header input[type=text],#rl-app #V-PopupsCompose .b-header .emailaddresses { border:none; @@ -1954,9 +2178,15 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar vertical-align: middle; height: 19px; display: block; + background-image: var(--file-text); + background-position: center center; + background-repeat: no-repeat; } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) .icon-file-text::before { + content:""; + } #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(2) { - background: var(--color-main-background); + background: var(--color-compose-background); border: 1px solid var(--color-border-second) !important; border-radius: 0px 4px 4px 0px; height:32px; @@ -1965,15 +2195,23 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar line-height: 16px; vertical-align: middle; display: block; + background-image: var(--attachfiles); + background-position: center center; + background-repeat: no-repeat; } + + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(2) .icon-attachment::before { + content:""; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn.active { background: rgba(0, 0, 0, 0.12); } #rl-app #V-PopupsCompose .squire-plain, #rl-app .squire-wysiwyg ,#rl-app .squire-toolbar{ - background:var(--color-main-background); + background:var(--color-compose-background); } #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic { - background: var(--color-main-background); + background: var(--color-compose-background); border: 1px solid var(--color-border-second) !important; border-radius: 4px 0px 0px 4px; height:35px; @@ -1981,11 +2219,11 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar width:41px; } #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic:nth-child(2) { - background-image: url('/themes/Murena/snappymail/images/attachnextcloud-files.svg'); + background-image: var(--attachnextcloud-files); background-position: center center; background-repeat: no-repeat; - height:32px; - min-height:32px; + height: 32px; + min-height: 32px; color:transparent; border-radius: 0px 4px 4px 0px; } @@ -2013,12 +2251,12 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn{ vertical-align: baseline; - background: var(--input-bg-clr,#fff) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+) right center/1em no-repeat border-box; + 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; } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2){ margin-left:3px; - background: var(--input-bg-clr,#fff) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+) right center/1em no-repeat border-box; + 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; } #rl-app #V-PopupsCompose #squire-toolgroup-colors .btn, @@ -2048,7 +2286,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar padding-left: 16px; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show{ - background: var(--color-main-background); + background: var(--color-main-dropdown); box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.2); border-radius: 4px; } @@ -2076,9 +2314,14 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .dividerbar a[data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/plus.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--plus); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--plus); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity: var(--svg-opacity); height:24px; width:24px; color:transparent; @@ -2094,54 +2337,83 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="HIDE_MY_EMAIL/TAB_NAME"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/hide-my-email.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--hide-my-email); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--hide-my-email); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); height:24px; width:24px; color:transparent; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/setting.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--setting); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--setting); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:24px; width:24px; color:transparent; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="TITLES/SETTINGS"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/setting.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--setting); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--setting); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:24px; width:24px; color:transparent; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="GLOBAL/HELP"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/help.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--help); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--help); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:24px; width:24px; color:transparent; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="TOP_TOOLBAR/BUTTON_HELP"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/help.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--help); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--help); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:24px; width:24px; color:transparent; } #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="MOBILE/BUTTON_MOBILE_VERSION"]::before { content: ""; - background-image: url('/themes/Murena/snappymail/images/mobile.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--mobile); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--mobile); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height:24px; width:24px; color:transparent; @@ -2155,14 +2427,14 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app dialog > header, #rl-app dialog > footer, #rl-app .squire-toolbar { - border-color: var(--color-border); + border-color: var(--color-border-compose); } #rl-app #V-PopupsCompose header{ - background-color: var(--color-primary-text); + background-color: var(--color-background-composeheader); padding-left:16px; } #rl-app #V-PopupsCompose header .button-save{ - background: var(--color-background-black); + background: var(--color-background-save); height: auto; padding: 0 14px 0 7px; } @@ -2175,82 +2447,132 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar display:none; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(1) a.btn.disabled { - background-image: url('/themes/Murena/snappymail/images/createfolder.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--createfolder); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--createfolder); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: 0.3; height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(1) a.btn { - background-image: url('/themes/Murena/snappymail/images/createfolder.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--createfolder); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--createfolder); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: var(--svg-opacity); height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.disabled:nth-child(1) { - background-image: url('/themes/Murena/snappymail/images/archieve.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--archieve); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--archieve); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: 0.3; height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn:nth-child(1) { - background-image: url('/themes/Murena/snappymail/images/archieve.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--archieve); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--archieve); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: var(--svg-opacity); height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic.disabled:nth-child(2) { - background-image: url('/themes/Murena/snappymail/images/spam.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--spam); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spam); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: 0.3; height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic:nth-child(2) { - background-image: url('/themes/Murena/snappymail/images/spam.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--spam); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spam); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: var(--svg-opacity); height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic.disabled:nth-child(4) { - background-image: url('/themes/Murena/snappymail/images/trash.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--trash); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: 0.3; height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic:nth-child(4) { - background-image: url('/themes/Murena/snappymail/images/trash.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--trash); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity: var(--svg-opacity); height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(3) #more-list-dropdown-id,#rl-app #more-view-dropdown-id { - background-image: url('/themes/Murena/snappymail/images/more.svg') !important; - background-position: center center !important; - background-repeat: no-repeat !important; + mask-image: var(--more) !important; + mask-position: center center !important; + mask-repeat: no-repeat !important; + -webkit-mask-image: var(--more) !important; + -webkit-mask-position: center center !important; + -webkit-mask-repeat: no-repeat !important; + background-color: var(--svg-color) !important; + opacity: var(--svg-opacity); height:18px; color:transparent; width: 50px; } #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(4) #sort-list-dropdown-id { - background-image: url('/themes/Murena/snappymail/images/sort.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--sort) !important; + mask-position: center center !important; + mask-repeat: no-repeat !important; + -webkit-mask-image: var(--sort) !important; + -webkit-mask-position: center center !important; + -webkit-mask-repeat: no-repeat !important; + background-color: var(--svg-color); + opacity: var(--svg-opacity); height:18px; color:transparent; order: 1; @@ -2260,7 +2582,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar height:34px; padding:0 0 0 5px; border-radius:3px; - background: var(--color-primary-text); + background: var(--color-compose-text); } #rl-app #rl-content #V-Settings-Folders .btn .icon-folder-add{ background-image: url('/themes/Murena/snappymail/images/createfolder-color.svg'); @@ -2277,7 +2599,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar flex-shrink: 1; width: 200px; min-width: 150px; - color: var(--color-primary-text); + color: var(--color-createfolder-text); width: 173px; height: 32px; background-color: var(--color-primary); @@ -2367,27 +2689,41 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app #rl-right .dropdown-menu.show li:nth-child(10) a::before { - background-image: url('/themes/Murena/snappymail/images/createfolder.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--createfolder); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--createfolder); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); height: 20px; width: 20px; color: transparent; } #rl-app #rl-right .dropdown-menu.show li:nth-child(11) a::before, #rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(1) a::before { - background-image: url('/themes/Murena/snappymail/images/archieve.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--archieve); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--archieve); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 20px; width: 20px; color: transparent; } #rl-app #rl-right .dropdown-menu.show li:nth-child(12) a::before, #rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(2) a::before { - background-image: url('/themes/Murena/snappymail/images/spam.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--spam); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--spam); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 20px; width: 20px; color: transparent; @@ -2396,9 +2732,14 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app #rl-right .dropdown-menu.show li:nth-child(14) a::before, #rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(4) a::before, #rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(5) a::before { - background-image: url('/themes/Murena/snappymail/images/trash.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--trash); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 20px; width: 20px; color: transparent; @@ -2414,7 +2755,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar line-height: 24px; letter-spacing: 0.5px; text-decoration: underline; - color: var(--color-primary-element-text-black); + color: var(--color-primary-element-text-one); opacity: 0.8; text-transform: uppercase; } @@ -2426,9 +2767,13 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar padding:0 12px 0 5px; } #rl-app .messageTags #tags-dropdown-id { - background-image: url('/themes/Murena/snappymail/images/tag.svg') !important; - background-position: center center !important; - background-repeat: no-repeat !important; + mask-image: var(--tag) !important; + mask-position: center center !important; + mask-repeat: no-repeat !important; + -webkit-mask-image: var(--tag) !important; + -webkit-mask-position: center center !important; + -webkit-mask-repeat: no-repeat !important; + background-color: var(--svg-color) !important; height: 20px; width: 20px; color: transparent; @@ -2463,13 +2808,18 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar font-weight: 500; font-size: 16px; line-height: 24px; - color: var(--color-primary-element-text-black); + color: var(--color-primary-element-text-one); opacity:0.8; } #rl-app #V-MailMessageView .messageView span.infoParent{ - background-image: url('/themes/Murena/snappymail/images/info.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--info); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--info); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 25px; width: 15px; color: transparent; @@ -2488,7 +2838,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar width: 40px; color: transparent; } -#rl-app .messageView .b-content .b-message-view-checked-helper { +#rl-app .messageView .b-message-view-checked-helper { color: var(--color-primary-element-text-blue); opacity: 1; display: inline-grid; @@ -2506,6 +2856,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-content .LoginView form{ background-color: var(--color-main-background); + border:none; } #rl-content .LoginView .descWrapper{ @@ -2513,7 +2864,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar font-size: 32px; line-height: 48px; text-align: center; - color: var(--color-primary-element-text-grey); + color: var(--color-primary-element-text-login); padding: 64px 44px 0px 44px; } #rl-content .LoginView form .buttonLogin{ @@ -2525,7 +2876,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar font-weight: 400; font-size: 16px; line-height: 24px; - color: var(--color-primary-element-text); + color: var(--color-primary-element-text-login); text-transform: capitalize; } #rl-content .LoginView form .controls span.fontastic{ @@ -2534,15 +2885,24 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-content #V-Login input{ padding-left:20px; border-color: var(--color-border-input); + border-radius: 8px; + height:48px; } -#rl-content #V-Login .language-buttons .language-button,#rl-content #V-Login .e-checkbox .fontastic,#rl-content #V-Login .e-checkbox span{ +#rl-content #V-Login .language-buttons .language-button,#rl-content #V-Login .e-checkbox span{ + color: var(--color-primary-element-text-grey); +} +#rl-content #V-Login .e-checkbox .fontastic{ color: var(--color-primary-element-text-grey); } #rl-content #V-Login .language-buttons .language-button{ - background-image: url('/themes/Murena/snappymail/images/language.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--language); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--language); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-third); height: 20px; width: 20px; color: transparent; @@ -2597,9 +2957,12 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar color: var(--color-text-dark-second); font-weight: 400; font-size: 24px; + margin-top: 15px; + border-top: 1px solid var(--color-border-grey); + border-radius: 0px; } .dropdown-menu.show li{ - color: var(--color-primary-element-text-black); + color: var(--color-primary-element-text-one); opacity:0.8; font-size: 14px; } @@ -2698,18 +3061,28 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar vertical-align: top; } #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(3){ - background-image: url('/themes/Murena/snappymail/images/toolbar-folder.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--toolbar-folder); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--toolbar-folder); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 36px; width: 20px; color: transparent; content:""; } #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(2){ - background-image: url('/themes/Murena/snappymail/images/toolbar-photo.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--toolbar-photo); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--toolbar-photo); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 36px; width: 20px; color: transparent; @@ -2722,9 +3095,13 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar padding: 0 14px; } #rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-success .icon-paper-plane{ - background-image: url('/themes/Murena/snappymail/images/send-icon.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--sendicon); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--sendicon); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-second); display: inline-block; line-height: 36px; height: 36px; @@ -2751,9 +3128,14 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar background: var(--color-primary-text); } #rl-app #rl-popups #V-PopupsCompose .pull-right .close{ - background-image: url('/themes/Murena/snappymail/images/cross.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--cross); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--cross); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + opacity:var(--svg-opacity); height: 20px; width: 20px; color: transparent; @@ -2763,9 +3145,14 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar vertical-align: bottom; } #rl-app #rl-popups #V-PopupsCompose .pull-right .minimize-custom{ - background-image: url('/themes/Murena/snappymail/images/minimize.svg'); - background-position: 10px 20px; - background-repeat: no-repeat; + mask-image: var(--minimize); + mask-position: 10px 20px; + mask-repeat: no-repeat; + -webkit-mask-image: var(--minimize); + -webkit-mask-position: 10px 20px; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); height: 30px; width: 20px; color: transparent; @@ -2786,7 +3173,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar content:""; } #rl-app #V-PopupsCompose header .pull-right .btn-group.dropdown a.btn{ - color: var(--color-primary-element-text-black); + color: var(--color-primary-element-text-one); opacity:0.6; } #rl-app #rl-popups #V-PopupsCompose .btn-group:nth-of-type(1) button.btn.active{ @@ -2798,6 +3185,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app #rl-popups #V-PopupsCompose .b-header.g-ui-user-select-none .error-to::before { border: 1px solid var(--color-error-second); color: var(--color-error-second); + background-color: var(--color-background-compose-error); font-weight: 400; font-size: 14px; padding: 10px; @@ -2809,7 +3197,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar font-size: 14px; } -#rl-app #V-MailMessageView .messageView .b-content .b-message-view-checked-helper{ +#rl-app #V-MailMessageView .messageView .b-message-view-checked-helper{ font-weight: 400; font-size: 32px; } @@ -2910,7 +3298,7 @@ html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.font #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn, #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar #contacts-more-dropdown-id{ background: transparent; - color:var( --color-primary-element-text-black); + color:var( --color-primary-element-text-one); opacity: 0.8; } #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(1){ @@ -2963,9 +3351,13 @@ html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.font } #rl-app #V-Settings-General .form-horizontal .legend:nth-child(1), #rl-app #V-SettingsMenu .b-footer{ - border-top: 1px solid var(--border-color,#ddd); + border-top: 1px solid var(--color-border-compose); border-bottom: none; } +#rl-app .b-folders .b-footer { + border-top: 1px solid var(--color-border-compose); +} + #rl-app #V-Settings-General .form-horizontal .legend{ border-bottom: none; } @@ -2985,9 +3377,13 @@ html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.font font-weight: 400; } #rl-app #V-SettingsPane .btn-toolbar .btn:nth-child(1)::before{ - background-image: url('/themes/Murena/snappymail/images/back-to-inbox.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--back-to-inbox); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--back-to-inbox); + -webkit-mask-position:center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color-second); height: 20px; width: 20px; color: transparent; @@ -3055,9 +3451,34 @@ html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.font padding-left:24px; } #rl-app #V-Settings-Accounts span.delete.fontastic{ - background-image: url('/themes/Murena/snappymail/images/delete-black.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--trash); + mask-position:center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: center center; + -webkit-mask-repeat:no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); + height: 20px; + width: 20px; + color: transparent; + content:""; + border: none; + text-shadow: none; + vertical-align: middle; + opacity: 0.8; +} +#rl-app #V-SettingsPane td[data-i18n="[title]SETTINGS_FOLDERS/HELP_DELETE_FOLDER"] span.e-action.fontastic{ + mask-image: var(--trash); + mask-position:center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--trash); + -webkit-mask-position: center center; + -webkit-mask-repeat:no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); height: 20px; width: 20px; color: transparent; @@ -3090,8 +3511,8 @@ html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.font } #rl-app #V-MailMessageView{ - top:56px; - border-top:1px solid var(--color-border-grey); + top:41px; + border:0; } #rl-app #V-SystemDropDown{ border-right: 1px solid var(--color-border-grey); @@ -3121,9 +3542,13 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { height: 70px; } #rl-app footer button.btn.buttonYes::before { - background-image: url('/themes/Murena/snappymail/images/tick-btn.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--tick); + mask-position:center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--tick); + -webkit-mask-position: center center; + -webkit-mask-repeat:no-repeat; + background-color: var(--svg-color-second); height:14px; width:10px; padding-left: 12px; @@ -3132,9 +3557,13 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { border: none; } #rl-app footer button.btn.buttonNo::before { - background-image: url('/themes/Murena/snappymail/images/cross-btn.svg'); - background-position: center center; - background-repeat: no-repeat; + mask-image: var(--cross); + mask-position:center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--cross); + -webkit-mask-position: center center; + -webkit-mask-repeat:no-repeat; + background-color: var(--svg-color-second); height:14px; width:10px; padding-left: 12px; @@ -3144,7 +3573,7 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { } #rl-app .messageListItem.checked .checkboxMessage{ background: var( --color-primary-element); - color: var(--color-primary-text); + color: var(--color-primary-text-checkbox); border:unset; } #rl-app .b-folders li a.selectable{ @@ -3152,6 +3581,9 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { 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-position: center center; + background-repeat: no-repeat; padding-top:5px; border-radius: 4px 0px 0px 4px; font-size: 14px; @@ -3159,6 +3591,7 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { min-height: 32px; line-height: 20px; vertical-align: middle; + color:transparent; } #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes .btn[data-action="source"] { height: auto; @@ -3223,6 +3656,9 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { #rl-app #V-SettingsPane #rl-settings-subscreen #V-Settings-Accounts .e-component.e-checkbox.material-design{ margin: 0 0 8px 12px; } +#rl-app #V-SettingsPane ul li img{ + display: none; +} #rl-app .control-group label[data-i18n="GLOBAL/TO"]{ text-align: right; color: var(--color-text-light); @@ -3234,3 +3670,135 @@ html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { height: 27px; } +#rl-app .b-folders{ + padding-right:0px; +} +#rl-app .messageView .messageItemHeader{ + margin-top: 15px; + border-top: 1px solid var(--color-border-grey); + border-radius: 0px; +} +#rl-app #V-Settings-HMESettings .inputBox { + white-space: nowrap; + background: var(--color-primary-text); + padding: 9px 0px; + width: 350px; + border: 2px solid var(--color-border-dark); + border-radius: 3px; +} +#rl-app #V-Settings-HMESettings .btncopy{ + background: transparent; +} +#rl-app .e-checkbox.material-design>div { + position: relative; + width: 18px; + height: 18px; + vertical-align: top; +} +#rl-app #V-PopupsCompose .b-header table tr:nth-child(1) td{ + border-bottom:transparent; +} +#rl-app #V-MailMessageView .messageView .messageItemHeader .close{ + display:none; +} +#rl-app .messageView #messageItem .bodyText{ + color:var(--color-mail-text); +} +#rl-app .messageView .messageItemHeader .informationShort a{ + color: var(--color-main-text); +} +#rl-app #rl-popups .btn.buttonAddAccount i { + vertical-align: middle; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group a.btn[data-i18n="[title]GLOBAL/NOT_SPAM"] { + mask-image: var(--notspam); + mask-position: center center; + mask-repeat: no-repeat; + -webkit-mask-image: var(--notspam); + -webkit-mask-position:center center; + -webkit-mask-repeat: no-repeat; + background-color: var(--svg-color); + fill-opacity:var(--svg-opacity); + opacity:var(--svg-opacity); + height:18px; + color:transparent; + width: 50px; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group a.btn[data-i18n="[title]GLOBAL/NOT_SPAM"] i { + display:none; +} +#rl-app .g-ui-link { + color:var(--color-primary-element-text-blue); + } + + #rl-app #V-Settings-Folders .btn{ + vertical-align: middle; + line-height: 20px; + } +.rl-side-preview-pane #rl-app #V-MailMessageList .messageList{ + overflow: hidden; + } + #rl-content .LoginView form .buttonLogin:active{ + background: var(--color-primary-element-text-blue); + } + #rl-app .LoginView form.submitting::after { + content: ''; + position: absolute; + width: 60px; + height: 60px; + top: 50%; + left: 50%; + margin-top: -30px; + margin-left: -30px; + border: 8px solid transparent; + border-top-color: none; + animation: loginRotation 1s infinite ease-in-out; + border-radius: 50%; + z-index: 1052; + background-image: url('/themes/Murena/snappymail/images/loading-color.svg'); + background-position: center center; + background-repeat: no-repeat; +} +#rl-content #V-Login .e-checkbox .fontastic{ + background: var( --color-primary-element); + color: var(--color-primary-text-checkbox); + border:unset; +} +#rl-app footer .btn.buttonCreate .icon-folder-add { + mask-image: var(--createfolder); + mask-position: center right; + mask-repeat: no-repeat; + -webkit-mask-image: var(--createfolder); + -webkit-mask-position: center right; + -webkit-mask-repeat: no-repeat; + background-color: var(--color-createfolder-text); + height: 20px; + width: 25px; + line-height: 20px; + font-size: 0; + color: transparent; + vertical-align: bottom; +} +#rl-app #messageItem .messageItemHeader { + margin-top: 0px; +} +#rl-app #V-PopupsCompose header .pull-right a.btn[data-i18n="[title]GLOBAL/BCC"], +#rl-app #V-PopupsCompose header .pull-right a.btn[data-i18n="[title]GLOBAL/CC"], +#rl-app #V-PopupsCompose header .pull-right .btn-group.dropdown a.btn.dropdown-toggle.fontastic { + width:50px; +} +#rl-app #rl-popups #V-PopupsCompose .pull-right .minimize-custom[data-i18n="[title]COMPOSE/BUTTON_MINIMIZE"]{ + text-align: center; + margin-left: 20px; +} +#rl-app #rl-loading #rl-loading-desc{ + display:none; +} +#rl-app .messageView .messageTags{ + display: block; + text-align: right; +} + +#rl-app .b-folders li a{ + color:unset; +} \ No newline at end of file