diff --git a/images/info.svg b/images/info.svg index f0b26b63ad35e7fc43bf3280b1481b8adf8901ad..b4dcf45aa1c28692f5638873cda409a154d398bd 100644 --- a/images/info.svg +++ b/images/info.svg @@ -1,3 +1,3 @@ - + diff --git a/images/loading-dark.svg b/images/loading-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..51354fe66835bc35e6e23cc6337d54228a732658 --- /dev/null +++ b/images/loading-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/loading.svg b/images/loading.svg index bc3723bf0ad3971c05ee23b584507da2fcd9c319..e40d65ddf1fabc90bcab9dacdf7cf492ba51d057 100644 --- a/images/loading.svg +++ b/images/loading.svg @@ -1,3 +1,3 @@ - + diff --git a/images/profiledownarrow-dark.svg b/images/profiledownarrow-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..a1eb7490ee8b6d671127be15701eb4d059c7146d --- /dev/null +++ b/images/profiledownarrow-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/profiledownarrow.svg b/images/profiledownarrow.svg index 0381d362c68120cc4b3ab892cdeae9d394d6c974..dbe94082d44154f13dbb092e38b629740320d537 100644 --- a/images/profiledownarrow.svg +++ b/images/profiledownarrow.svg @@ -1,3 +1,3 @@ - + diff --git a/style.css b/style.css index 302aa093105c07cf18b093762b6155cdb2e05d9b..72134c32e980738c4c85eadb323cde6e2be90861 100644 --- a/style.css +++ b/style.css @@ -2,12 +2,10 @@ * Nextcloud - SnappyMail mail plugin * * @author Rene Hampƶlz (@hampoelz), SnappyMail, Nextcloud Team - */ - -/* + *//* * app layout changes, background & color */ - /** +/** * Nextcloud - SnappyMail mail plugin * * @author Nextcloud Team @@ -20,9 +18,8 @@ * this file will serve as a template for customization. */ -/* Default Nextcloud (v25) theme variables and colors */ - -:root { +/* Default Nextcloud (v25) theme variables and colors */:root +{ --main-color: var(--color-main-text); --main-bg-color: var(--color-main-background); --main-bg-image: none; @@ -32,11 +29,11 @@ --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); - --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); + --color-main-background-rgb: 255, 255, 255; + --color-main-background-translucent: rgba(var(--color-main-background-rgb), 0.97); + --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.8); --filter-background-blur: blur(25px); - --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --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; @@ -47,12 +44,13 @@ --color-placeholder-light: #e6e6e6; --color-placeholder-dark: #cccccc; --color-background-red: rgba(248, 67, 46, 0.08); - --color-background-orange: rgba(255, 122, 0, 0.08); + --color-background-orange: rgba(255, 122, 0, 0.08); --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-compose-error:#FFFFFF; + --color-background-compose-error: #FFFFFF; + --color-background-thread:rgba(33, 33, 33, 0.08); --color-main-text: #222222; --color-main-text-alert: #222222; --color-text-maxcontrast: #767676; @@ -62,24 +60,26 @@ --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-primary-element-text-login: #ffffff; + --color-primary-element-text-loginheader: ##333333; + --color-scrollbar: rgba(34, 34, 34, 0.15); --color-error: #e9322d; --color-error-second: #F8432E; - --color-error-rgb: 233,50,45; + --color-error-rgb: 233, 50, 45; --color-error-hover: #ed5a56; --color-warning: #eca700; --color-warning-light: #fdf6e6; - --color-warning-rgb: 236,167,0; + --color-warning-rgb: 236, 167, 0; --color-warning-hover: #efb832; --color-success: #46ba61; --color-success-second: #44B04C; - --color-success-rgb: 70,186,97; + --color-success-rgb: 70, 186, 97; --color-success-hover: #6ac780; --color-loading-light: #cccccc; --color-loading-dark: #444444; - --color-box-shadow-rgb: 77,77,77; + --color-box-shadow-rgb: 77, 77, 77; --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); - --color-box-shadow-second: rgba(0,0,0, 0.02); + --color-box-shadow-second: rgba(0, 0, 0, 0.02); --color-border: #ededed; --color-border-compose: #ededed; --color-border-grey: #e6e6e6; @@ -120,10 +120,11 @@ --color-primary-text-checkbox: #ffffff; --color-createfolder-text: #ffffff; --color-mail-text: rgba(0, 0, 0, 0.87); + --color-thread-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); + --color-primary-light-second: rgba(248, 67, 46, 0.08); --color-primary-light-text: #00273d; --color-primary-light-hover: #dbe4e9; --color-primary-text-dark: #ededed; @@ -137,61 +138,62 @@ --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-checkbox: #333333; --color-primary-element-text-blue: #087BF9; --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); + --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; + --color-email-text-to: 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'); + --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'); + --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'); + --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'); + --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'); + --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; + --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 { @@ -204,27 +206,28 @@ body.theme--dark { --color-main-background: #121212; --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); - --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); + --color-main-background-rgb: 23, 23, 23; + --color-main-background-translucent: rgba(var(--color-main-background-rgb), 0.97); + --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.8); --filter-background-blur: blur(25px); - --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --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-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-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; --color-background-red: rgba(248, 67, 46, 0.08); - --color-background-orange: rgba(255, 122, 0, 0.08); + --color-background-orange: rgba(255, 122, 0, 0.08); --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: #3A3A3A; - --color-background-compose-error:#131313; + --color-background-compose-error: #131313; + --color-background-thread:rgba(255, 255, 255, 0.38); --color-main-text: #D8D8D8; --color-main-text-alert: #000000; --color-text-maxcontrast: #8c8c8c; @@ -232,26 +235,28 @@ body.theme--dark { --color-text-maxcontrast-background-blur: #919191; --color-text-light: #bfbfbf; --color-text-lighter: #a5a5a5; - --color-text-dark-second: rgba(255,255,255, 0.38); + --color-text-dark-second: rgba(255, 255, 255, 0.38); --color-text-selection: #ffffff; + --color-primary-element-text-login: #ffffff; + --color-primary-element-text-loginheader: rgba(255, 255, 255, 0.87); --color-scrollbar: #3d3d3d; --color-error: #e9322d; --color-error-second: #F8432E; - --color-error-rgb: 233,50,45; + --color-error-rgb: 233, 50, 45; --color-error-hover: #ed5a56; --color-warning: #eca700; --color-warning-light: #fdf6e6; - --color-warning-rgb: 236,167,0; + --color-warning-rgb: 236, 167, 0; --color-warning-hover: #efb832; --color-success: #46ba61; --color-success-second: #44B04C; - --color-success-rgb: 70,186,97; + --color-success-rgb: 70, 186, 97; --color-success-hover: #6ac780; --color-loading-light: #777; --color-loading-dark: #CCC; - --color-box-shadow-rgb: 0,0,0; + --color-box-shadow-rgb: 0, 0, 0; --color-box-shadow: #000000; - --color-box-shadow-second: rgba(0,0,0, 0.02); + --color-box-shadow-second: rgba(0, 0, 0, 0.02); --color-border: #292929; --color-border-compose: rgba(255, 255, 255, 0.08); --color-border-grey: #383838; @@ -292,11 +297,12 @@ body.theme--dark { --color-primary-text-checkbox: #000000; --color-createfolder-text: #121212; --color-mail-text: #ffffff; + --color-thread-text:#000000; --color-primary-element-login: #ffffff; - --color-compose-text:transparent; + --color-compose-text: transparent; --color-primary-hover: #04537f; --color-primary-light: #141e24; - --color-primary-light-second:rgba(248, 67, 46, 0.08); + --color-primary-light-second: rgba(248, 67, 46, 0.08); --color-primary-light-text: #99c0d6; --color-primary-light-hover: #1d272d; --color-primary-text-dark: hsl(0, 0%, 93%); @@ -309,31 +315,34 @@ body.theme--dark { --color-primary-element-light-grey-hover: #141e24; --color-primary-element-text-dark: #ededed; --color-primary-element-text-grey: rgba(255, 255, 255, 0.87); - --color-primary-element-text-checkbox:#333333; + --color-primary-element-text-checkbox: #333333; --color-primary-element-text-blue: #087BF9; --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); + --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; + --color-email-text-to: rgba(255, 255, 255, 0.74); + --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'); + --spinner-icon: url('/themes/Murena/snappymail/images/loading-dark.svg'); + --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; + --profiledownarrow: url('/themes/Murena/snappymail/images/profiledownarrow-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; } - :root { +:root { --link-color: var(--color-primary-light-text); } @@ -351,15 +360,15 @@ body.theme--dark { } #rl-app #rl-left, -#rl-app #V-AdminPane>.b-toolbar { +#rl-app #V-AdminPane > .b-toolbar { width: 300px; } -#rl-app #rl-left{ - min-width:225px !important; - overflow:hidden; +#rl-app #rl-left { + min-width: 225px !important; + overflow: hidden; } -html.rl-left-panel-disabled #rl-app #rl-left{ - min-width:60px !important; +html.rl-left-panel-disabled #rl-app #rl-left { + min-width: 60px !important; } #rl-app #rl-right { background-color: var(--color-main-background); @@ -389,15 +398,15 @@ html.rl-left-panel-disabled #rl-app #rl-left{ display: flex; flex-direction: row; padding: 10px 8px 10px 17px; - border-top:1px solid var(--color-border-grey); - border-bottom:1px solid var(--color-border-grey); + border-top: 1px solid var(--color-border-grey); + border-bottom: 1px solid var(--color-border-grey); } html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { flex-direction: column; } -@media screen and (min-width: 1000px) { +@media screen and(min-width: 1000px) { #rl-app .b-folders .btn.buttonContacts { transition: none; } @@ -498,7 +507,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { * side panel */ -#rl-app #V-AdminPane>.b-toolbar { +#rl-app #V-AdminPane > .b-toolbar { top: 0; left: 0; padding-top: calc(var(--default-grid-baseline) * 2) !important; @@ -531,7 +540,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app #V-AdminMenu nav a.selected, #rl-app #V-SettingsMenu nav a.selected, #rl-app .b-folders li a.selectable.selected { - color: var(--color-primary-element);; + color: var(--color-primary-element); background-color: var(--color-background-blue); border-radius: unset; } @@ -548,7 +557,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-folders .b-folders-system a[data-unread]::after { display: block; - margin: 0 ; + margin: 0; top: 50%; transform: translateY(-50%); @@ -560,32 +569,32 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { padding-right: 15px; } -#rl-app .b-folders .b-folders-system a[data-unread].selectable.selected::after{ +#rl-app .b-folders .b-folders-system a[data-unread].selectable.selected::after { background-color: transparent; color: var(--color-primary-element); font-weight: 700; font-size: 14px; - padding: 0px 15px 0 4px; + padding: 0 15px 0 4px; height: 56px; vertical-align: middle; display: inline-block; line-height: 56px; } -#rl-app .b-folders .b-folders-system a[data-unread].selectable::after{ +#rl-app .b-folders .b-folders-system a[data-unread].selectable::after { background-color: transparent; color: var(--color-primary-element-text-grey); font-weight: 700; font-size: 14px; - padding: 0px 15px 0 4px; + padding: 0 15px 0 4px; height: 56px; vertical-align: middle; display: inline-block; line-height: 56px; } #rl-app .b-folders hr { - border-bottom:none; + border-bottom: none; } -#rl-app .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1){ +#rl-app .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1) { mask-image: var(--back); mask-position: center center; mask-repeat: no-repeat; @@ -594,14 +603,14 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); fill-opacity: var(--svg-opacity); - height:34px; + height: 34px; padding-left: 20px; padding-right: 19px; line-height: 0; font-size: 0; color: transparent; } -#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add{ +#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add { mask-image: var(--createfolder); mask-position: center right; mask-repeat: no-repeat; @@ -611,18 +620,18 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { background-color: var(--svg-color); fill-opacity: var(--svg-opacity); opacity: var(--svg-opacity); - height:34px; + height: 34px; line-height: 0; font-size: 0; color: transparent; margin-right: 39px; } -#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add:before{ - content:""; +#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add:before { + content: ""; } -#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled a.btn:nth-child(2){ +#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled a.btn:nth-child(2) { mask-image: var(--setting); mask-position: center center; mask-repeat: no-repeat; @@ -630,9 +639,9 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - height:34px; - width:34px; + fill-opacity: var(--svg-opacity); + height: 34px; + width: 34px; line-height: 0; font-size: 0; color: transparent; @@ -645,7 +654,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-footer.btn-toolbar.hide-mobile, #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled { - display:inline-block; + display: inline-block; align-content: stretch; justify-content: flex-start; height: unset; @@ -667,23 +676,23 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { /* * buttons */ - #rl-app #rl-popups .btn.buttonAdvSearch, +#rl-app #rl-popups .btn.buttonAdvSearch, #rl-app #rl-popups .btn.buttonAddAccount, #rl-app #rl-popups .btn.buttonAddIdentity { color: var(--color-primary-element-text); - background: var(--color-primary-element-text-blue); - border: 1px solid var(--color-border-dark) ; + background: var(--color-primary-element-text-blue); + border: 1px solid var(--color-border-dark); border-radius: 6px; - } - #rl-app .btn { +} +#rl-app .btn { min-height: 36px; height: 36px; box-sizing: border-box !important; padding: 8px 14px; line-height: 24px; color: var(--color-main-text); - background: var(--color-primary-element-text-blue); - border: 1px solid var(--color-border-dark) ; + background: var(--color-primary-element-text-blue); + border: 1px solid var(--color-border-dark); border-radius: 6px; font-size: var(--default-font-size); font-weight: 400; @@ -701,10 +710,14 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { border: unset !important; } -#rl-app .btn.disabled, .btn[disabled], -#rl-app .btn.disabled:hover, .btn[disabled]:hover, -#rl-app .btn.disabled:focus, .btn[disabled]:focus, -#rl-app .btn.disabled:active, .btn[disabled]:active { +#rl-app .btn.disabled, +.btn[disabled], +#rl-app .btn.disabled:hover, +.btn[disabled]:hover, +#rl-app .btn.disabled:focus, +.btn[disabled]:focus, +#rl-app .btn.disabled:active, +.btn[disabled]:active { outline: none; opacity: .5; filter: saturate(0.7); @@ -724,7 +737,11 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { color: var(--color-text-light); } -#rl-app .btn, .btn.active, .btn:active, .btn.disabled, .btn[disabled] { +#rl-app .btn, +.btn.active, +.btn:active, +.btn.disabled, +.btn[disabled] { text-shadow: none; box-shadow: none; } @@ -734,28 +751,28 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { max-width: 100%; width: 100%; } -#rl-app #rl-left,#rl-app #rl-right,#rl-app .messageList, #rl-app .messageView{ - background-color:var(--color-main-background); +#rl-app #rl-left, +#rl-app #rl-right, +#rl-app .messageList, +#rl-app .messageView { + background-color: var(--color-main-background); } -#rl-app .b-folders li a.selectable.selected -{ - border-radius:0; +#rl-app .b-folders li a.selectable.selected { + border-radius: 0; } -#rl-app .b-folders li a.selectable::before -{ - content:""; +#rl-app .b-folders li a.selectable::before { + content: ""; background-position: left center; background-repeat: no-repeat; - height:20px; - padding-left: 20px; - padding-right: 19px; + height: 20px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system -{ +#rl-app .b-folders .b-folders-system { font-weight: 400; } -#rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable::before { mask-image: var(--inbox); mask-position: center center; mask-repeat: no-repeat; @@ -763,16 +780,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - opacity:var(--svg-opacity); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable.selected::before { mask-image: var(--inbox); mask-position: left center; mask-repeat: no-repeat; @@ -780,15 +797,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable::before { mask-image: var(--sent); mask-position: left center; mask-repeat: no-repeat; @@ -796,16 +813,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - opacity:var(--svg-opacity); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable.selected::before { mask-image: var(--sent); mask-position: left center; mask-repeat: no-repeat; @@ -813,17 +830,17 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; background-position: left center; background-repeat: no-repeat; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable::before { mask-image: var(--draft); mask-position: left center; mask-repeat: no-repeat; @@ -831,16 +848,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - opacity:var(--svg-opacity); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable.selected::before { mask-image: var(--draft); mask-position: left center; mask-repeat: no-repeat; @@ -848,15 +865,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable::before { mask-image: var(--spam); mask-position: left center; mask-repeat: no-repeat; @@ -864,16 +881,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - opacity:var(--svg-opacity); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable.selected::before { mask-image: var(--spam); mask-position: left center; mask-repeat: no-repeat; @@ -881,17 +898,17 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; background-position: left center; background-repeat: no-repeat; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable.selected::before { mask-image: var(--trash); mask-position: left center; mask-repeat: no-repeat; @@ -899,16 +916,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable::before { mask-image: var(--trash); mask-position: left center; mask-repeat: no-repeat; @@ -916,16 +933,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - opacity:var(--svg-opacity); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable.selected::before { mask-image: var(--archieve); mask-position: left center; mask-repeat: no-repeat; @@ -933,15 +950,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable::before -{ +#rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable::before { mask-image: var(--archieve); mask-position: left center; mask-repeat: no-repeat; @@ -949,16 +966,16 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - fill-opacity:var(--svg-opacity); - opacity:var(--svg-opacity); + fill-opacity: var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-user li a.selectable.selected::before -{ +#rl-app .b-folders .b-folders-user li a.selectable.selected::before { mask-image: var(--folder); mask-position: left center; mask-repeat: no-repeat; @@ -966,15 +983,15 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-blue); - opacity:1; + opacity: 1; content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-user li a.selectable::before -{ +#rl-app .b-folders .b-folders-user li a.selectable::before { mask-image: var(--folder); mask-position: left center; mask-repeat: no-repeat; @@ -982,39 +999,41 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; background-color: var(--svg-color); - opacity:var(--svg-opacity); + opacity: var(--svg-opacity); content: ""; height: 24px; width: 24px; - padding-left: 20px; - padding-right: 19px; + padding-left: 24px; + padding-right: 0; + margin-right: 15px; } -#rl-app .b-folders .b-folders-user li a.selectable .e-collapsed-sign{ - display:none; +#rl-app .b-folders .b-folders-user li a.selectable .e-collapsed-sign { + display: none; } -#rl-app #V-SettingsMenu nav.b-content, .b-folders .b-content{ - padding:0; +#rl-app #V-SettingsMenu nav.b-content, +.b-folders .b-content { + padding: 0; } .rl-side-preview-pane #rl-app #V-MailMessageList { min-width: 360px; overflow: hidden; } -#rl-app #rl-content .btn.buttonCompose{ +#rl-app #rl-content .btn.buttonCompose { box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 150px; - background: var(--color-primary-element-text-blue); + background: var(--color-primary-element-text-blue); border-radius: 6px; flex: none; order: 0; flex-grow: 0; - font-weight:400; + font-weight: 400; } #rl-app #rl-content .btn.buttonCompose::before { - content:""; + content: ""; mask-image: var(--editnote); mask-position: left center; mask-repeat: no-repeat; @@ -1023,17 +1042,17 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { -webkit-mask-repeat: no-repeat; background-color: var(--svg-color-second); padding-left: 20px; - height:20px; + height: 20px; image-rendering: -webkit-optimize-contrast; - } - #rl-app #rl-content .btn.buttonCompose .buttonComposeText { +} +#rl-app #rl-content .btn.buttonCompose .buttonComposeText { padding-bottom: 2px; - } -#rl-app #rl-content .b-folders-system li .flag-icon{ - display:none; } -#rl-app #rl-content .btn.buttonCompose .icon-paper-plane{ - display:none +#rl-app #rl-content .b-folders-system li .flag-icon { + display: none; +} +#rl-app #rl-content .btn.buttonCompose .icon-paper-plane { + display: none } #rl-app .btn.btn-success { @@ -1043,7 +1062,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .btn.btn-success.buttonEdit.fontastic { color: var(--color-main-text); - background-color:transparent; + background-color: transparent; } #rl-app .btn.btn-success:hover, #rl-app .btn.btn-success:focus { @@ -1094,7 +1113,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic { - background-color:var(--color-main-background); + background-color: var(--color-main-background); } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after { @@ -1155,27 +1174,17 @@ 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) { - 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; + background-image: var(--spinner-icon); + background-position: center center; + background-repeat: no-repeat; + height: 20px; padding-left: 20px; padding-right: 19px; } -#rl-app #V-MailMessageList .btn-toolbar a.btn:nth-child(1) .icon-spinner{ - 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); +#rl-app #V-MailMessageList .btn-toolbar a.btn:nth-child(1) .icon-spinner { + background-image: var(--spinner-icon); + background-position: center center; + background-repeat: no-repeat; width: 24px; height: 36px; content: ""; @@ -1187,24 +1196,25 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f display: none; }*/ -#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(2) .icon-copy,#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(2) .fontastic { +#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(2) .icon-copy, +#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(2) .fontastic { display: none; } /* * inputs */ - #rl-app input.inputSearch { - border-radius:52px; - } - #rl-app #V-MailMessageList input.inputSearch { - padding-left:36px; +#rl-app input.inputSearch { + border-radius: 52px; +} +#rl-app #V-MailMessageList input.inputSearch { + padding-left: 36px; background-image: var(--search); background-position: 10px center; background-repeat: no-repeat; height: 40px; border-radius: 52px; - fill-opacity:var(--svg-opacity); - } + fill-opacity: var(--svg-opacity); +} /* * inputs */ @@ -1244,7 +1254,8 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f */ #rl-app .emailaddresses, -#rl-app .select, #rl-app select { +#rl-app .select, +#rl-app select { padding: 8px 12px; font-size: var(--default-font-size); color: var(--color-main-text); @@ -1260,9 +1271,12 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f #rl-app .emailaddresses:hover, #rl-app .emailaddresses:active, #rl-app .emailaddresses:focus, -#rl-app .select:hover, #rl-app select:hover, -#rl-app .select:active, #rl-app select:active, -#rl-app .select:focus, #rl-app select:focus { +#rl-app .select:hover, +#rl-app select:hover, +#rl-app .select:active, +#rl-app select:active, +#rl-app .select:focus, +#rl-app select:focus { border-color: var(--color-primary-element); } @@ -1281,7 +1295,7 @@ select option { flex-wrap: wrap; gap: 5px; /* max-height: padding*2 [top & bottom] + gap*(lines + 1) + li-height*lines [= li-height + li-padding*2 + li-border*2 ] */ - max-height: calc(8px*2 + 5px*3 + 26px*2); + max-height: calc(8px * 2 + 5px*3 + 26px*2); height: auto; width: 100%; } @@ -1301,10 +1315,6 @@ select option { background-color: unset; } -#rl-app .emailaddresses li a { - /* TODO */ -} - /* * checkboxes */ @@ -1325,20 +1335,20 @@ select option { #rl-app .e-component.e-checkbox.material-design:hover, #rl-app .e-component.e-checkbox.material-design:focus-within { - background-color:var(--color-background-blue); + background-color: var(--color-background-blue); } #rl-app .e-component.e-checkbox.material-design:focus { outline: none; } -#rl-app .e-checkbox.material-design>div { +#rl-app .e-checkbox.material-design > div { box-sizing: border-box; margin-right: 8px; margin-left: -2px; } -#rl-app .e-checkbox.material-design>div>div { +#rl-app .e-checkbox.material-design > div > div { width: 100%; height: 100%; border: 2px solid var(--color-primary-element); @@ -1346,11 +1356,11 @@ select option { box-sizing: border-box; } -#rl-app .e-checkbox.material-design>div>div.checked { +#rl-app .e-checkbox.material-design > div > div.checked { top: 0; left: 0; animation: none; - --svg-checked: url("data:image/svg+xml,"); + --svg-checked: url("data:image/svg+xml, "); -webkit-mask-image: var(--svg-checked); mask-image: var(--svg-checked); background: var(--color-primary-element); @@ -1422,16 +1432,16 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { -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; + fill-opacity: var(--svg-opacity); + height: 20px; + width: 20px; + color: transparent; border-radius: var(--border-radius-large); margin: 0 0 0 8px; line-height: 20px !important; } -#rl-app .btn.buttonMoreSearch{ +#rl-app .btn.buttonMoreSearch { background: var(--color-main-background); } @@ -1466,15 +1476,6 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { font-size: 16px; line-height: 24px; } - -#rl-app .messageList .b-content .listDragOver { - /* ! does not work */ -} - -#rl-app .messageList .b-content .listError { - /* ? cant reproduce */ -} - #rl-app .messageList .b-content .listDragOver, #rl-app .messageList .b-content .listEmptyMessage, #rl-app .messageList .b-content .listError, @@ -1497,9 +1498,9 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { font-weight: 400; font-size: 12px; line-height: 16px; - color:var(--color-primary-element-text-maillist-time); + color: var(--color-primary-element-text-maillist-time); } -#rl-app .messageListItem .fromPic{ +#rl-app .messageListItem .fromPic { display: none; } #rl-app .messageListItem .checkboxMessage { @@ -1517,19 +1518,34 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { } #rl-app .messageListItem .threads-len { - color: var(--color-text-light); - border-color: var(--color-text-light); + color: var(--color-thread-text); + font-weight: 600; + font-size: 12px; + line-height: 16px; + border-color: transparent;; padding: 0 4px; + margin-right: 5px; + vertical-align: middle; + line-height: 24px; + background: var(--color-background-thread); + border-radius: 24px; + width: 24px; + height: 24px; + text-align: center; +} +#rl-app .messageListItem .threads-len::after { + content: ""; } #rl-app .messageListItem .threads-len:hover, #rl-app .messageListItem .threads-len:focus { - background-color: var(--color-background-darker); - border-color: unset; + background: var(--color-background-thread); + border-color: transparent; } #rl-app .messageListItem .threads-len:active { - background-color: var(--color-primary-light-hover); + background: var(--color-background-thread); + border-color: transparent; } #rl-app .messageListItem { @@ -1544,9 +1560,9 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { background-color: var(--color-main-background); border-left-color: var(--color-main-background); } -#rl-app .messageListItem{ +#rl-app .messageListItem { border-bottom: 1px solid var(--color-border-grey); - position:relative; + position: relative; } #rl-app .messageListItem:hover, #rl-app .messageListItem.focused:hover { @@ -1597,7 +1613,7 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app .messageListItem.checked.focused { background-color: inherit; - border-left-color:transparent; + border-left-color: transparent; } #rl-app .messageListItem.checked:hover, @@ -1606,22 +1622,11 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { border-left-color: transparent; } -/* - * message view - */ - -html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar { - /* TODO Improve mobile experience */ -} - #rl-app .messageView .b-message-view-desc, #rl-app .messageView .b-message-view-checked-helper { color: var(--color-text-lighter); } -#rl-app .messageView .b-message-view-desc.error { - /* ? cant reproduce */ -} #rl-app meter::-webkit-meter-bar { background-color: var(--color-border-dark); @@ -1669,20 +1674,20 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar border-radius: var(--border-radius-large); text-shadow: none; margin: 10px; - color:var(--color-primary); + color: var(--color-primary); } -#rl-app #V-MailMessageView .b-message-view-backdrop .backdrop-message::before{ +#rl-app #V-MailMessageView .b-message-view-backdrop .backdrop-message::before { background-image: url('/themes/Murena/snappymail/images/createfolder-color.svg'); background-position: center center; background-repeat: no-repeat; height: 18px; color: transparent; - content:""; + content: ""; } #rl-app .messageView .messageAssignedTags { margin: 0 5px; - flex:none; + flex: none; } #rl-app .messageView .messageAssignedTags span { @@ -1706,7 +1711,7 @@ 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{ +#rl-app .messageView .messageItemHeader { background-color: var(--color-mainitemheader-background); border-color: var(--color-border); color: var(--color-main-text); @@ -1762,248 +1767,255 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app #messageItem .attachmentsControls .icon-file-archive, #rl-app #messageItem .attachmentsControls .fontastic { color: var(--color-main-text); -} - -/* + }/* * message flags - */ + */:root + { + --msgflag-\$label1-color: #ae2c35; + --msgflag-\$label1-color-hover: #e13a45; + --msgflag-\$label2-color: #cc9827; + --msgflag-\$label2-color-hover: #ffbf31; + --msgflag-\$label3-color: #005235; + --msgflag-\$label3-color-hover: #008557; + --msgflag-\$label4-color: #005cc4; + --msgflag-\$label4-color-hover: #0074f8; + --msgflag-\$label5-color: #5631c0; + --msgflag-\$label5-color-hover: #6d3ff3; + + --msgflag-\\flagged-color: #ffca32; + } -:root { - --msgflag-\$label1-color: #ae2c35; - --msgflag-\$label1-color-hover: #e13a45; - --msgflag-\$label2-color: #cc9827; - --msgflag-\$label2-color-hover: #ffbf31; - --msgflag-\$label3-color: #005235; - --msgflag-\$label3-color-hover: #008557; - --msgflag-\$label4-color: #005cc4; - --msgflag-\$label4-color-hover: #0074f8; - --msgflag-\$label5-color: #5631c0; - --msgflag-\$label5-color-hover: #6d3ff3; - - --msgflag-\\flagged-color: #ffca32; -} - -#rl-app .msgflag-\$label5:not(.focused) { - border-color: var(--msgflag-\$label5-color); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label4:not(.focused) { - border-color: var(--msgflag-\$label4-color); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label3:not(.focused) { - border-color: var(--msgflag-\$label3-color); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label2:not(.focused) { - border-color: var(--msgflag-\$label2-color); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label1:not(.focused) { - border-color: var(--msgflag-\$label1-color); - border-bottom: 1px solid var(--color-border-grey); -} + #rl-app .msgflag-\$label5:not(.focused) { + border-color: var(--msgflag-\$label5-color); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label4:not(.focused) { + border-color: var(--msgflag-\$label4-color); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label3:not(.focused) { + border-color: var(--msgflag-\$label3-color); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label2:not(.focused) { + border-color: var(--msgflag-\$label2-color); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label1:not(.focused) { + border-color: var(--msgflag-\$label1-color); + border-bottom: 1px solid var(--color-border-grey); + } -#rl-app .msgflag-\$label5.focused:not(.selected) { border-color: var(--msgflag-\$label5-color) !important; } -#rl-app .msgflag-\$label4.focused:not(.selected) { border-color: var(--msgflag-\$label4-color) !important; } -#rl-app .msgflag-\$label3.focused:not(.selected) { border-color: var(--msgflag-\$label3-color) !important; } -#rl-app .msgflag-\$label2.focused:not(.selected) { border-color: var(--msgflag-\$label2-color) !important; } -#rl-app .msgflag-\$label1.focused:not(.selected) { border-color: var(--msgflag-\$label1-color) !important; } + #rl-app .msgflag-\$label5.focused:not(.selected) { + border-color: var(--msgflag-\$label5-color) !important; + } + #rl-app .msgflag-\$label4.focused:not(.selected) { + border-color: var(--msgflag-\$label4-color) !important; + } + #rl-app .msgflag-\$label3.focused:not(.selected) { + border-color: var(--msgflag-\$label3-color) !important; + } + #rl-app .msgflag-\$label2.focused:not(.selected) { + border-color: var(--msgflag-\$label2-color) !important; + } + #rl-app .msgflag-\$label1.focused:not(.selected) { + border-color: var(--msgflag-\$label1-color) !important; + } -#rl-app .msgflag-\$label5:not(.focused):hover { - border-color: var(--msgflag-\$label5-color-hover); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label4:not(.focused):hover { - border-color: var(--msgflag-\$label4-color-hover); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label3:not(.focused):hover { - border-color: var(--msgflag-\$label3-color-hover); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label2:not(.focused):hover { - border-color: var(--msgflag-\$label2-color-hover); - border-bottom: 1px solid var(--color-border-grey); -} -#rl-app .msgflag-\$label1:not(.focused):hover { - border-color: var(--msgflag-\$label1-color-hover); - border-bottom: 1px solid var(--color-border-grey); -} + #rl-app .msgflag-\$label5:not(.focused):hover { + border-color: var(--msgflag-\$label5-color-hover); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label4:not(.focused):hover { + border-color: var(--msgflag-\$label4-color-hover); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label3:not(.focused):hover { + border-color: var(--msgflag-\$label3-color-hover); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label2:not(.focused):hover { + border-color: var(--msgflag-\$label2-color-hover); + border-bottom: 1px solid var(--color-border-grey); + } + #rl-app .msgflag-\$label1:not(.focused):hover { + border-color: var(--msgflag-\$label1-color-hover); + border-bottom: 1px solid var(--color-border-grey); + } -#rl-app .msgflag-\$label1:not(.focused), #rl-app .msgflag-\$label1 .checkboxMessage, -#rl-app .msgflag-\$label2:not(.focused), #rl-app .msgflag-\$label2 .checkboxMessage, -#rl-app .msgflag-\$label3:not(.focused), #rl-app .msgflag-\$label3 .checkboxMessage, -#rl-app .msgflag-\$label4:not(.focused), #rl-app .msgflag-\$label4 .checkboxMessage, -#rl-app .msgflag-\$label5:not(.focused), #rl-app .msgflag-\$label5 .checkboxMessage { - background-color: unset; - color: unset; -} + #rl-app .msgflag-\$label1:not(.focused), + #rl-app .msgflag-\$label1 .checkboxMessage, + #rl-app .msgflag-\$label2:not(.focused), + #rl-app .msgflag-\$label2 .checkboxMessage, + #rl-app .msgflag-\$label3:not(.focused), + #rl-app .msgflag-\$label3 .checkboxMessage, + #rl-app .msgflag-\$label4:not(.focused), + #rl-app .msgflag-\$label4 .checkboxMessage, + #rl-app .msgflag-\$label5:not(.focused), + #rl-app .msgflag-\$label5 .checkboxMessage { + background-color: unset; + color: unset; + } -#rl-app .messageListItem.msgflag-\$label1:hover, -#rl-app .messageListItem.msgflag-\$label2:hover, -#rl-app .messageListItem.msgflag-\$label3:hover, -#rl-app .messageListItem.msgflag-\$label4:hover, -#rl-app .messageListItem.msgflag-\$label5:hover { - background-color: var(--color-main-background-translucent); -} + #rl-app .messageListItem.msgflag-\$label1:hover, + #rl-app .messageListItem.msgflag-\$label2:hover, + #rl-app .messageListItem.msgflag-\$label3:hover, + #rl-app .messageListItem.msgflag-\$label4:hover, + #rl-app .messageListItem.msgflag-\$label5:hover { + background-color: var(--color-main-background-translucent); + } -#rl-app a.msgflag-\$label1, -#rl-app a.msgflag-\$label2, -#rl-app a.msgflag-\$label3, -#rl-app a.msgflag-\$label4, -#rl-app a.msgflag-\$label5 { - border-left: solid 5px; -} + #rl-app a.msgflag-\$label1, + #rl-app a.msgflag-\$label2, + #rl-app a.msgflag-\$label3, + #rl-app a.msgflag-\$label4, + #rl-app a.msgflag-\$label5 { + border-left: solid 5px; + } -#rl-app .btn-group.show .dropdown-menu div li a[class^='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5), -#rl-app .btn-group.show .dropdown-menu div li a[class*='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5) { - border-left: solid 5px transparent; -} + #rl-app .btn-group.show .dropdown-menu div li a[class^='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5), + #rl-app .btn-group.show .dropdown-menu div li a[class*='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5) { + border-left: solid 5px transparent; + } -#rl-app .b-folders .is-flagged .flag-icon::after, -#rl-app .messageListItem.hasFlaggedSubMessage .flagParent::after, -#rl-app .messageListItem.msgflag-\\flagged .flagParent::after { - color: var(--msgflag-\\flagged-color); -} + #rl-app .b-folders .is-flagged .flag-icon::after, + #rl-app .messageListItem.hasFlaggedSubMessage .flagParent::after, + #rl-app .messageListItem.msgflag-\\flagged .flagParent::after { + color: #FFC300; + } -/* + /* * dropdown menus */ -#rl-app .dropdown.show { - box-shadow: none; -} + #rl-app .dropdown.show { + box-shadow: none; + } -#rl-app .dropdown-menu { - 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); - padding: 4px; - border: unset; -} + #rl-app .dropdown-menu { + background-color: var(--color-main-dropdown); + box-shadow: 0 8px 10px rgba(0, 0, 0, 0.14), 0 3px 14px rgba(0, 0, 0, 0.12), 0 5px 5px rgba(0, 0, 0, 0.2); + border-radius: 4px; + color: var(--color-main-text); + padding: 4px; + border: unset; + } -#rl-app .dropdown-menu a { - background-color: unset; - color: unset; - height: 24px; - line-height: 24px; - border-radius: 3px; - margin: 2px; - box-sizing: content-box; -} + #rl-app .dropdown-menu a { + background-color: unset; + color: unset; + height: 24px; + line-height: 24px; + border-radius: 3px; + margin: 2px; + box-sizing: content-box; + } -#rl-app .dropdown-menu li.disabled > a, -#rl-app .dropdown-menu li.disabled > a:hover, -#rl-app .dropdown-menu li.disabled > a:focus, -#rl-app .dropdown-menu li.disabled > a:active { - color: var(--color-background-grey); -} + #rl-app .dropdown-menu li.disabled > a, + #rl-app .dropdown-menu li.disabled > a:hover, + #rl-app .dropdown-menu li.disabled > a:focus, + #rl-app .dropdown-menu li.disabled > a:active { + color: var(--color-background-grey); + } -#rl-app .dropdown-menu li:not(.disabled) > a:hover, -#rl-app .dropdown-menu li:not(.disabled) > a:focus { - background-color: var( --color-primary-element-light-grey-hover); - color: unset; - opacity: unset; -} + #rl-app .dropdown-menu li:not(.disabled) > a:hover, + #rl-app .dropdown-menu li:not(.disabled) > a:focus { + background-color: var(--color-primary-element-light-grey-hover); + color: unset; + opacity: unset; + } -#rl-app .dropdown-menu li:not(.disabled) > a:active { - background-color: var(--color-primary-light); -} + #rl-app .dropdown-menu li:not(.disabled) > a:active { + background-color: var(--color-primary-light); + } -#rl-app .dropdown-menu *+.dividerbar { - border-color: var(--color-border); -} + #rl-app .dropdown-menu *+.dividerbar { + border-color: var(--color-border); + } -#rl-app .dropdown-menu ::-webkit-scrollbar-track-piece { - background-color: inherit; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; -} + #rl-app .dropdown-menu ::-webkit-scrollbar-track-piece { + background-color: inherit; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + } -/* + /* * account selector */ -#rl-app .btn-toolbar.g-ui-user-select-none { - border: solid 1px var(--color-border-dark); - border-radius: var(--border-radius-large); - height: 36px; - padding: 2px; - display: flex; - flex-direction: row; - align-items: center; - box-sizing: content-box; - background-color:var(--color-primary-text); -} + #rl-app .btn-toolbar.g-ui-user-select-none { + border: solid 1px var(--color-border-dark); + border-radius: var(--border-radius-large); + height: 36px; + padding: 2px; + display: flex; + flex-direction: row; + align-items: center; + box-sizing: content-box; + background-color: var(--color-primary-text); + } -#rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none { - border:none; + #rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none { + border: none; -} -#rl-app #V-SystemDropDown .accountPlace { - background: var(--background-email); - color: var(--color-email-text); - text-shadow: none; - font-weight: 400; - font-size: 14px; - height:32px; -} -#rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none .btn-group.dropdown{ - height: 32px; - margin-left: 8px; -} + } + #rl-app #V-SystemDropDown .accountPlace { + background: var(--background-email); + color: var(--color-email-text); + text-shadow: none; + font-weight: 400; + font-size: 14px; + height: 32px; + } + #rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none .btn-group.dropdown { + height: 32px; + margin-left: 8px; + } -#rl-app #V-SystemDropDown .btn-toolbar #top-system-dropdown-id{ - background: var(--color-background-black); - border-radius: 8px; - height:32px; - min-height: 32px; - padding: 2px 5px 5px 10px; -} + #rl-app #V-SystemDropDown .btn-toolbar #top-system-dropdown-id { + background: var(--color-background-black); + border-radius: 8px; + height: 32px; + min-height: 32px; + padding: 2px 5px 5px 10px; + } -#rl-app #V-SystemDropDown #top-system-dropdown-id .fontastic:nth-child(1) { - color:transparent; - 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; - 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; -} + #rl-app #V-SystemDropDown #top-system-dropdown-id .fontastic:nth-child(1) { + color: transparent; + 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: var(--profiledownarrow); + background-position: center center; + background-repeat: no-repeat; + padding-left: 10px; + } -#rl-app #V-SystemDropDown #top-system-dropdown-id:hover, -#rl-app #V-SystemDropDown #top-system-dropdown-id:focus { - background-color: var(--color-background-dark); -} + #rl-app #V-SystemDropDown #top-system-dropdown-id:hover, + #rl-app #V-SystemDropDown #top-system-dropdown-id:focus { + background-color: var(--color-background-dark); + } -#rl-app #V-SystemDropDown #top-system-dropdown-id:active { - background-color: var(--color-background-dark); -} + #rl-app #V-SystemDropDown #top-system-dropdown-id:active { + background-color: var(--color-background-dark); + } -/* TODO: darken mails only with NC dark theme (needs some more js) */ -/* + /* TODO: darken mails only with NC dark theme (needs some more js) */ + /* * dark mails */ -/* @media (prefers-color-scheme: dark) { + /* @media (prefers-color-scheme: dark) { #rl-app .bodyText, .bodyText img { filter: invert(95%) hue-rotate(180deg); } @@ -2013,1804 +2025,1885 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } } */ -/* TODO: Improve settings layout and theming */ -/* + /* TODO: Improve settings layout and theming */ + /* * settings */ -#rl-app #rl-settings-subscreen { - background-color: unset; - box-shadow: none; - border: none; -} + #rl-app #rl-settings-subscreen { + background-color: unset; + box-shadow: none; + border: none; + } -#rl-app #V-SettingsPane #rl-settings-subscreen { - margin: 58px 0px 8px 0px; - height: calc(100% - 58px - 8px); -} + #rl-app #V-SettingsPane #rl-settings-subscreen { + margin: 58px 0 8px; + height: calc(100% - 58px - 8px); + } -#rl-app #V-SettingsPane .btn-toolbar { - padding: 8px; -} + #rl-app #V-SettingsPane .btn-toolbar { + padding: 8px; + } -#rl-app .legend, -#rl-app #V-AdminPane hr, -#rl-app #V-SettingsPane hr { - color: unset; - border-color: var(--color-border); -} + #rl-app .legend, + #rl-app #V-AdminPane hr, + #rl-app #V-SettingsPane hr { + color: unset; + border-color: var(--color-border); + } -#rl-app .form-horizontal .control-group { - display: flex; - align-items: center; -} + #rl-app .form-horizontal .control-group { + display: flex; + align-items: center; + } -#rl-app .table-bordered, -#rl-app .table td, -#rl-app .table th { - border-color: var(--color-border-dark); -} + #rl-app .table-bordered, + #rl-app .table td, + #rl-app .table th { + border-color: var(--color-border-dark); + } -#rl-app .table-hover tbody tr:hover td, -#rl-app .table-hover tbody tr:hover th { - background-color: var(--color-main-background-translucent); -} + #rl-app .table-hover tbody tr:hover td, + #rl-app .table-hover tbody tr:hover th { + background-color: var(--color-main-background-translucent); + } -#rl-app #V-Settings-Themes figure, -#rl-app #V-Settings-Themes img { - border-radius: var(--border-radius-large); -} + #rl-app #V-Settings-Themes figure, + #rl-app #V-Settings-Themes img { + border-radius: var(--border-radius-large); + } -#rl-app #V-Settings-Themes figure:not(.selected):hover { - background-color: var(--color-main-background-translucent); - border-color: transparent; -} + #rl-app #V-Settings-Themes figure:not(.selected):hover { + background-color: var(--color-main-background-translucent); + border-color: transparent; + } -#rl-app #V-Settings-Themes figure:not(.selected):active { - background-color: var(--color-primary-light); -} + #rl-app #V-Settings-Themes figure:not(.selected):active { + background-color: var(--color-primary-light); + } -#rl-app #V-Settings-Themes figure:not(.selected):focus { - outline: none; -} + #rl-app #V-Settings-Themes figure:not(.selected):focus { + outline: none; + } -#rl-app #V-Settings-Themes figure.selected { - background-color: var(--color-primary-light); - border-color: transparent; -} + #rl-app #V-Settings-Themes figure.selected { + background-color: var(--color-primary-light); + border-color: transparent; + } -/* hide additional theme settings, as these are made via Nextcloud theming */ -#rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal { - display: none !important; -} + /* hide additional theme settings, as these are made via Nextcloud theming */ + #rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal { + display: none !important; + } -/* + /* * admin settings */ -#rl-app #V-AdminPane #rl-settings-subscreen { - margin: 8px 0px; - height: calc(100% - 8px - 8px); -} + #rl-app #V-AdminPane #rl-settings-subscreen { + margin: 8px 0; + height: calc(100% - 8px - 8px); + } -#rl-app #V-Settings-Config th { - background-color: var(--color-background-dark); -} + #rl-app #V-Settings-Config th { + background-color: var(--color-background-dark); + } -#rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] { - align-self: self-start; -} + #rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] { + align-self: self-start; + } -#rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] ~ div .alert.alert-info { - margin-left: -130px; -} + #rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] ~ div .alert.alert-info { + margin-left: -130px; + } -#rl-app #V-Settings-Domains .btn[data-i18n="GLOBAL/TEST"] { - margin-left: 1rem; -} + #rl-app #V-Settings-Domains .btn[data-i18n="GLOBAL/TEST"] { + margin-left: 1rem; + } -/* + /* * scrollbar */ -#rl-app ::-webkit-scrollbar { - width: 12px; - height: 12px; -} + #rl-app ::-webkit-scrollbar { + width: 12px; + height: 12px; + } -#rl-app ::-webkit-scrollbar-thumb { - background: var(--color-scrollbar); - border-radius: var(--border-radius-large); - border: 2px solid transparent; - background-clip: content-box; -} + #rl-app ::-webkit-scrollbar-thumb { + background: var(--color-scrollbar); + border-radius: var(--border-radius-large); + border: 2px solid transparent; + background-clip: content-box; + } -#rl-app ::-webkit-scrollbar-track-piece { - background-color: transparent; -} + #rl-app ::-webkit-scrollbar-track-piece { + background-color: transparent; + } -#rl-app ::selection { - 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 */ -/* + #rl-app ::selection { + 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 */ -#rl-app dialog { - background: var(--color-main-background); - color: var(--color-main-text); - border-radius: var(--border-radius-large); - filter: drop-shadow(0 1px 5px var(--color-box-shadow)); - box-shadow: none; - border-color: var(--color-border); -} + #rl-app dialog { + background: var(--color-main-background); + color: var(--color-main-text); + border-radius: var(--border-radius-large); + filter: drop-shadow(0 1px 5px var(--color-box-shadow)); + box-shadow: none; + border-color: var(--color-border); + } -#rl-app #V-PopupsCompose .b-header { - 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-compose); -} -#rl-app #V-PopupsCompose .b-header input[type=text],#rl-app #V-PopupsCompose .b-header .emailaddresses { - border:none; - border-radius:unset; - box-shadow:none; -} -#rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) { - background: var(--color-main-background); - border: 1px solid var(--color-border-second) !important; - height:35px; - } - #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) .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 .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-compose-background); - border: 1px solid var(--color-border-second) !important; - border-radius: 0px 4px 4px 0px; - height:32px; - } - #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(2) .icon-attachment { - line-height: 16px; - vertical-align: middle; - display: block; - background-image: var(--attachfiles); - background-position: center center; - background-repeat: no-repeat; - } + #rl-app #V-PopupsCompose .b-header { + background: var(--color-compose-background); + padding-left: 0; + } + #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-compose); + } + #rl-app #V-PopupsCompose .b-header input[type=text], + #rl-app #V-PopupsCompose .b-header .emailaddresses { + border: none; + border-radius: unset; + box-shadow: none; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) { + background: var(--color-main-background); + border: 1px solid var(--color-border-second) !important; + height: 35px; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) .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 .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-compose-background); + border: 1px solid var(--color-border-second) !important; + border-radius: 0 4px 4px 0; + height: 32px; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(2) .icon-attachment { + 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: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-compose-background); - } - #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic { - background: var(--color-compose-background); - border: 1px solid var(--color-border-second) !important; - border-radius: 4px 0px 0px 4px; - height:35px; - margin-top:10px; - width:41px; - } -#rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic:nth-child(2) { - background-image: var(--attachnextcloud-files); - background-position: center center; - background-repeat: no-repeat; - height: 32px; - min-height: 32px; - color:transparent; - border-radius: 0px 4px 4px 0px; - } - #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn, - #rl-app #V-PopupsCompose #squire-toolgroup-font .btn, - #rl-app #V-PopupsCompose #squire-toolgroup-colors , - #rl-app #V-PopupsCompose #squire-toolgroup-inline, - #rl-app #V-PopupsCompose #squire-toolgroup-block, - #rl-app #V-PopupsCompose #squire-toolgroup-targets, - #rl-app #V-PopupsCompose #squire-toolgroup-changes{ - border: 1px solid var(--color-border-second) !important; - border-radius: 4px; - height:33px; - line-height: 33px; - padding: 0px 12px; - } - #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn:nth-child(1){ - width:85px; - vertical-align: baseline; - padding: 0px 24px; - } -#rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2){ - width:71px; - vertical-align: baseline; - } -#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; - } - #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; - } - #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; - } - #rl-app #V-PopupsCompose .pull-right .minimize-custom, - #rl-app #V-PopupsCompose .pull-right .close -{ - color: var(--color-primary-element-text-grey); - border-color:var(--color-primary-element-text-grey); - } - #rl-app #advancedsearchform .control-group input, #rl-app #advancedsearchform .control-group select, #rl-app #advancedsearchform .control-group .e-component.e-checkbox.material-design{ - height:34px; - border-radius:3px; - padding-left: 10px; - } -#rl-app .squire-toolbar { - border-bottom: 1px solid var(--border-color,#ddd); - height: 50px; - box-sizing: content-box; - padding-top:0px; - padding-bottom:0px; - padding-left: 16px; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show{ - 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; -} - -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li{ - height:35px; - margin-top:9px; - padding-top:9px; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .email-title[data-icon="āœ”"]::before { - background-image: url('/themes/Murena/snappymail/images/profiletick.svg'); - background-position: center center; - background-repeat: no-repeat; - height:24px; - width:24px; - color:transparent; - visibility: visible; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a.email-title::before{ - width: 24px; - visibility: hidden; -} -#rl-app #rl-right #V-SystemDropDown a[data-unread]::after { - display:none; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .dividerbar a[data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"]::before { - content: ""; - 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; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="GLOBAL/CONTACTS"]::before { - content: ""; - background-image: url('/themes/Murena/snappymail/images/contactsmall.svg'); - background-position: center center; - background-repeat: no-repeat; - height:24px; - width:24px; - color:transparent; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="HIDE_MY_EMAIL/TAB_NAME"]::before { - content: ""; - 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: ""; - 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: ""; - 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: ""; - 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: ""; - 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: ""; - 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; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:has(a[data-i18n="GLOBAL/LOGOUT"]){ - display:none; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="GLOBAL/LOGOUT"] { - display:none; - } -#rl-app dialog > header, -#rl-app dialog > footer, -#rl-app .squire-toolbar { - border-color: var(--color-border-compose); -} -#rl-app #V-PopupsCompose header{ - background-color: var(--color-background-composeheader); - padding-left:16px; -} -#rl-app #V-PopupsCompose header .button-save{ - background: var(--color-background-save); - height: auto; - padding: 0 14px 0 7px; -} -#rl-app #V-PopupsCompose header .close, -#rl-app #V-PopupsCompose header .minimize-custom { - box-sizing: content-box; -} + #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-compose-background); + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic { + background: var(--color-compose-background); + border: 1px solid var(--color-border-second) !important; + border-radius: 4px 0 0 4px; + height: 35px; + margin-top: 10px; + width: 41px; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic:nth-child(2) { + background-image: var(--attachnextcloud-files); + background-position: center center; + background-repeat: no-repeat; + height: 32px; + min-height: 32px; + color: transparent; + border-radius: 0 4px 4px 0; + } + #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-font .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-colors, + #rl-app #V-PopupsCompose #squire-toolgroup-inline, + #rl-app #V-PopupsCompose #squire-toolgroup-block, + #rl-app #V-PopupsCompose #squire-toolgroup-targets, + #rl-app #V-PopupsCompose #squire-toolgroup-changes { + border: 1px solid var(--color-border-second) !important; + border-radius: 4px; + height: 33px; + line-height: 33px; + padding: 0 12px; + } + #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn:nth-child(1) { + width: 85px; + vertical-align: baseline; + padding: 0 24px; + } + #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2) { + width: 71px; + vertical-align: baseline; + } + #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; + } + #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; + } + #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; + } + #rl-app #V-PopupsCompose .pull-right .minimize-custom, + #rl-app #V-PopupsCompose .pull-right .close { + color: var(--color-primary-element-text-grey); + border-color: var(--color-primary-element-text-grey); + } + #rl-app #advancedsearchform .control-group input, + #rl-app #advancedsearchform .control-group select, + #rl-app #advancedsearchform .control-group .e-component.e-checkbox.material-design { + height: 34px; + border-radius: 3px; + padding-left: 10px; + } + #rl-app .squire-toolbar { + border-bottom: 1px solid var(--border-color, #ddd); + height: 50px; + box-sizing: content-box; + padding-top: 0; + padding-bottom: 0; + padding-left: 16px; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show { + background: var(--color-main-dropdown); + box-shadow: 0 8px 10px rgba(0, 0, 0, 0.14), 0 3px 14px rgba(0, 0, 0, 0.12), 0 5px 5px rgba(0, 0, 0, 0.2); + border-radius: 4px; + } -#rl-app #rl-right #V-MailMessageList .btn-toolbar .btn-group i.fontastic { - display:none; -} -#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(1) a.btn.disabled { - 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 { - 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) { - 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) { - 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) { - 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) { - 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) { - 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) { - 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 { - 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 { - 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; - width: 50px; -} -#rl-app #rl-content .select,#rl-app #rl-content input,#rl-app #rl-content select,#rl-app #rl-popups select,#rl-app #rl-popups input{ - height:34px; - padding:0 0 0 5px; - border-radius:3px; - 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'); - background-position: center center; - background-repeat: no-repeat; - height:20px; - width:20px; - line-height: 20px; - font-size: 0; - color: transparent; - vertical-align: bottom; -} -#rl-app footer .btn.buttonCreate, -#rl-app footer .btn.buttonCreate:active { - flex-shrink: 1; - width: 200px; - min-width: 150px; - color: var(--color-createfolder-text); - width: 173px; - height: 32px; - background-color: var(--color-primary); - border-radius: var(--border-radius-pill); - font-weight: bold; -} -#rl-app #V-MailFolderList .buttonContacts { - background-image: url('/themes/Murena/snappymail/images/contact.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 18px; - color:transparent; - padding: 4px 14px 4px 0px; - margin-left:20px; -} -#rl-app #rl-right .dropdown-menu.show li a { - text-align:left; -} -#rl-app .dropdown-menu.right-edge.show .msgflag-\$label1:not(.focused) { - border-color:var(--color-border-red); -} -#rl-app .dropdown-menu.right-edge.show .msgflag-\$label2:not(.focused) { - border-color:var(--color-border-orange); -} -#rl-app .dropdown-menu.right-edge.show .msgflag-\$label3:not(.focused) { - border-color:var(--color-border-green); -} -#rl-app .dropdown-menu.right-edge.show .msgflag-\$label4:not(.focused) { - border-color: var(--color-primary-element-text-blue); -} -#rl-app .dropdown-menu.right-edge.show .msgflag-\$label5:not(.focused) { - border-color: var(--color-border-purple); -} -#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label1:not(.selected) { - background: var(--color-background-red); - border: 1px solid var(--color-border-red); - border-radius: 16px; - color: var(--color-border-red); - font-weight: 400; - font-size: 12px; - line-height: normal; - padding: 2px 10px; -} -#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label2:not(.selected) { - background: var(--color-background-orange); - border: 1px solid var(--color-border-orange); - border-radius: 16px; - color:var(--color-border-orange); - font-weight: 400; - font-size: 12px; - line-height: normal; - padding: 2px 10px; -} - -#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label3:not(.selected) { - background: var(--color-background-green); - border: 1px solid var(--color-border-green); - border-radius: 16px; - color:var(--color-border-green); - font-weight: 400; - font-size: 12px; - line-height: normal; - padding: 2px 10px; -} + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li { + height: 35px; + margin-top: 9px; + padding-top: 9px; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .email-title[data-icon="āœ”"]::before { + background-image: url('/themes/Murena/snappymail/images/profiletick.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 24px; + width: 24px; + color: transparent; + visibility: visible; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a.email-title::before { + width: 24px; + visibility: hidden; + } + #rl-app #rl-right #V-SystemDropDown a[data-unread]::after { + display: none; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .dividerbar a[data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"]::before { + content: ""; + 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; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="GLOBAL/CONTACTS"]::before { + content: ""; + background-image: url('/themes/Murena/snappymail/images/contactsmall.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 24px; + width: 24px; + color: transparent; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="HIDE_MY_EMAIL/TAB_NAME"]::before { + content: ""; + 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: ""; + 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: ""; + 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: ""; + 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: ""; + 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: ""; + 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; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:has(a[data-i18n="GLOBAL/LOGOUT"]) { + display: none; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a[data-i18n="GLOBAL/LOGOUT"] { + display: none; + } + #rl-app dialog > header, + #rl-app dialog > footer, + #rl-app .squire-toolbar { + border-color: var(--color-border-compose); + } + #rl-app #V-PopupsCompose header { + background-color: var(--color-background-composeheader); + padding-left: 16px; + } + #rl-app #V-PopupsCompose header .button-save { + background: var(--color-background-save); + height: auto; + padding: 0 14px 0 7px; + } + #rl-app #V-PopupsCompose header .close, + #rl-app #V-PopupsCompose header .minimize-custom { + box-sizing: content-box; + } -#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label4:not(.selected) { - background: var(--color-background-blue); - border: 1px solid var(--color-primary-element-text-blue); - border-radius: 16px; - color: var(--color-primary-element-text-blue); - font-weight: 400; - font-size: 12px; - line-height: normal; - padding: 2px 10px; -} + #rl-app #rl-right #V-MailMessageList .btn-toolbar .btn-group i.fontastic { + display: none; + } + #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(1) a.btn.disabled { + 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 { + 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) { + 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) { + 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) { + 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) { + 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) { + 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) { + 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 { + 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 .messageView .messageAssignedTags span.focused.msgflag-\$label5:not(.selected) { - background:var(--color-background-purple); - border: 1px solid var(--color-border-purple); - border-radius: 16px; - color:var(--color-border-purple); - font-weight: 400; - font-size: 12px; - line-height: normal; - padding: 2px 10px; -} + #rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(4) #sort-list-dropdown-id { + 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; + width: 50px; + } + #rl-app #rl-content .select, + #rl-app #rl-content input, + #rl-app #rl-content select, + #rl-app #rl-popups select, + #rl-app #rl-popups input { + height: 34px; + padding: 0 0 0 5px; + border-radius: 3px; + 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'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + line-height: 20px; + font-size: 0; + color: transparent; + vertical-align: bottom; + } + #rl-app footer .btn.buttonCreate, + #rl-app footer .btn.buttonCreate:active { + flex-shrink: 1; + width: 200px; + min-width: 150px; + color: var(--color-createfolder-text); + width: 173px; + height: 32px; + background-color: var(--color-primary); + border-radius: var(--border-radius-pill); + font-weight: bold; + } + #rl-app #V-MailFolderList .buttonContacts { + background-image: url('/themes/Murena/snappymail/images/contact.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 18px; + color: transparent; + padding: 4px 14px 4px 0; + margin-left: 20px; + } + #rl-app #rl-right .dropdown-menu.show li a { + text-align: left; + } + #rl-app .dropdown-menu.right-edge.show .msgflag-\$label1:not(.focused) { + border-color: var(--color-border-red); + } + #rl-app .dropdown-menu.right-edge.show .msgflag-\$label2:not(.focused) { + border-color: var(--color-border-orange); + } + #rl-app .dropdown-menu.right-edge.show .msgflag-\$label3:not(.focused) { + border-color: var(--color-border-green); + } + #rl-app .dropdown-menu.right-edge.show .msgflag-\$label4:not(.focused) { + border-color: var(--color-primary-element-text-blue); + } + #rl-app .dropdown-menu.right-edge.show .msgflag-\$label5:not(.focused) { + border-color: var(--color-border-purple); + } + #rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label1:not(.selected) { + background: var(--color-background-red); + border: 1px solid var(--color-border-red); + border-radius: 16px; + color: var(--color-border-red); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; + } + #rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label2:not(.selected) { + background: var(--color-background-orange); + border: 1px solid var(--color-border-orange); + border-radius: 16px; + color: var(--color-border-orange); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; + } + #rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label3:not(.selected) { + background: var(--color-background-green); + border: 1px solid var(--color-border-green); + border-radius: 16px; + color: var(--color-border-green); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; + } -#rl-app #rl-right .dropdown-menu.show li:nth-child(10) a::before { - 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 { - 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 { - 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; -} -#rl-app #rl-right .dropdown-menu.show li:nth-child(13) a::before, -#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 { - 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; -} + #rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label4:not(.selected) { + background: var(--color-background-blue); + border: 1px solid var(--color-primary-element-text-blue); + border-radius: 16px; + color: var(--color-primary-element-text-blue); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; + } -#rl-app #V-Settings-Security button.btn,#rl-app #V-Settings-Accounts .btn { - color: var(--color-primary-text); -} -#rl-app #V-PopupsCompose header .pull-right a.btn{ - background: none; - font-weight: 400; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.5px; - text-decoration: underline; - color: var(--color-primary-element-text-one); - opacity: 0.8; - text-transform: uppercase; -} -#rl-app #V-PopupsCompose header .pull-right a.btn.fontastic,#rl-app #V-PopupsCompose header .pull-right a.btn-group.dropdown{ - text-decoration:none; - -} -#rl-app #V-PopupsCompose .emailaddresses{ - padding:0 12px 0 5px; -} -#rl-app .messageTags #tags-dropdown-id { - 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; -} -#rl-app #messageItem .bodySubHeader .showImages{ - background-color:var(--color-background-light-second); - box-shadow: 0px 2px 4px var(--color-box-shadow-second); - border-radius: 0; - border: 1px solid var(--color-background-light-second) !important; - margin:0px; - font-weight: 400; - font-size: 12px; - line-height: 16px; -} -#rl-app #messageItem .bodySubHeader .showImages::before{ - background-image: url('/themes/Murena/snappymail/images/noimage.svg') !important; - background-position: center center; - background-repeat: no-repeat; - height: 14px; - width: 14px; - color: transparent; -} -#rl-app #messageItem .b-text-part.html img[data-x-src]:not([src])::after{ - background-image: url('/themes/Murena/snappymail/images/noimage.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 14px; - width: 14px; - content:''; -} -#rl-app #V-MailMessageView .messageView .messageItemHeader .subject{ - font-weight: 500; - font-size: 16px; - line-height: 24px; - color: var(--color-primary-element-text-one); - opacity:0.8; -} -#rl-app #V-MailMessageView .messageView span.infoParent{ - 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; -} -#rl-app #V-MailMessageView .messageView span.flagParent{ - font-size:15px; -} -#rl-app #V-MailMessageView .messageView span.flagParent.g-ui-user-select-none.fontastic.flagOn{ - color: #ffca48; - } -#rl-app .messageView .b-message-view-checked-helper::after{ - background-image: url('/themes/Murena/snappymail/images/mailselected.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 32px; - width: 40px; - color: transparent; -} -#rl-app .messageView .b-message-view-checked-helper { - color: var(--color-primary-element-text-blue); - opacity: 1; - display: inline-grid; - position: absolute; - left: 50%; + #rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label5:not(.selected) { + background: var(--color-background-purple); + border: 1px solid var(--color-border-purple); + border-radius: 16px; + color: var(--color-border-purple); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; + } -} -#rl-content .LoginView{ - max-width: 512px; - height: 528px; - background-color: var(--color-main-background); - border: 1px solid var(--color-border-light-second); - border-radius: 8px; - width: 100%; -} -#rl-content .LoginView form{ - background-color: var(--color-main-background); - border:none; -} -#rl-content .LoginView .descWrapper{ - font-weight: 500; - font-size: 32px; - line-height: 48px; - text-align: center; - color: var(--color-primary-element-text-login); - padding: 64px 44px 0px 44px; -} -#rl-content .LoginView form .buttonLogin{ - padding: 12px 16px; - max-width: 424px; - height: 48px; - background: var(--color-primary-element-text-blue); - border-radius: 6px; - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: var(--color-primary-element-text-login); - text-transform: capitalize; -} -#rl-content .LoginView form .controls span.fontastic{ - display: none; -} -#rl-content #V-Login input{ - padding-left:20px; - border-color: var(--color-border-input); - border-radius: 8px; - height:48px; + #rl-app #rl-right .dropdown-menu.show li:nth-child(10) a::before { + 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 { + 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 { + 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; + } + #rl-app #rl-right .dropdown-menu.show li:nth-child(13) a::before, + #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 { + 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; + } -} -#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{ - 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; -} -#rl-app footer button.btn.buttonYes,#rl-app footer button.btn.buttonNo,#rl-popups .button-delete,#V-PopupsContacts .control-group .btn.fontastic { - color: var(--color-primary-element-text); - margin-right: 10px; - border-radius:6px; -} + #rl-app #V-Settings-Security button.btn, + #rl-app #V-Settings-Accounts .btn { + color: var(--color-primary-text); + } + #rl-app #V-PopupsCompose header .pull-right a.btn { + background: none; + font-weight: 400; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.5px; + text-decoration: underline; + color: var(--color-primary-element-text-one); + opacity: 0.8; + text-transform: uppercase; + } + #rl-app #V-PopupsCompose header .pull-right a.btn.fontastic, + #rl-app #V-PopupsCompose header .pull-right a.btn-group.dropdown { + text-decoration: none; -#V-PopupsContacts .b-view-content-toolbar.btn-toolbar .btn.button-save-contact, -#V-PopupsContacts .b-view-content-toolbar.btn-toolbar #button-add-prop-dropdown-id{ - background: var(--color-primary-element-text); - border-radius: 6px; - color: var(--color-primary-element-text-blue); - border:1px solid var(--color-primary-element-text-blue) !important; - height:36px; -} -#rl-content .LoginView .descWrapper::before{ - background-image: url('/themes/Murena/snappymail/images/murena-mail.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 48px; - width: 58px; - color: transparent; - content:""; - display: inline-flex; - vertical-align: top; -} + } + #rl-app #V-PopupsCompose .emailaddresses { + padding: 0 12px 0 5px; + } + #rl-app .messageTags #tags-dropdown-id { + 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; + } + #rl-app #messageItem .bodySubHeader .showImages { + background-color: var(--color-background-light-second); + box-shadow: 0 2px 4px var(--color-box-shadow-second); + border-radius: 0; + border: 1px solid var(--color-background-light-second) !important; + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + #rl-app #messageItem .bodySubHeader .showImages::before { + background-image: url('/themes/Murena/snappymail/images/noimage.svg') !important; + background-position: center center; + background-repeat: no-repeat; + height: 14px; + width: 14px; + color: transparent; + } + #rl-app #messageItem .b-text-part.html img[data-x-src]:not([src])::after { + background-image: url('/themes/Murena/snappymail/images/noimage.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 14px; + width: 14px; + content: ''; + } + #rl-app #V-MailMessageView .messageView .messageItemHeader .subject { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: var(--color-primary-element-text-one); + } + #rl-app #V-MailMessageView .messageView span.infoParent { + 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); + opacity: 0.38; + height: 25px; + width: 15px; + color: transparent; + } + #rl-app #V-MailMessageView .messageView span.flagParent { + font-size: 14px; + } + #rl-app #V-MailMessageView .messageView span.flagParent.g-ui-user-select-none.fontastic.flagOn { + color: #FFC300; + } + #rl-app .messageView .b-message-view-checked-helper::after { + background-image: url('/themes/Murena/snappymail/images/mailselected.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 32px; + width: 40px; + color: transparent; + } + #rl-app .messageView .b-message-view-checked-helper { + color: var(--color-primary-element-text-blue); + opacity: 1; + display: inline-grid; + position: absolute; + left: 50%; -#rl-app #V-MailMessageList .messageListItem.unseen .senderParent::before{ - background-image: url('/themes/Murena/snappymail/images/greendot.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 10px; - width: 44px; - color: transparent; - content:""; - display: inline-flex; -} -#rl-app .senderParent.actionHandle::before{ - content: ""; - height: 10px; - width: 44px; - display: inline-flex; -} -#rl-app #V-MailMessageList .messageListItem .subjectParent.actionHandle{ - padding-left: 44px; -} + } + #rl-content .LoginView { + max-width: 512px; + height: 528px; + background-color: var(--color-main-background); + border: 1px solid var(--color-border-light-second); + border-radius: 8px; + width: 100%; + } + #rl-content .LoginView form { + background-color: var(--color-main-background); + border: none; + } -#rl-app #V-MailMessageView .messageView .b-message-view-desc{ - color: var(--color-text-dark-second); - font-weight: 400; - font-size: 24px; - margin-top: 14px; - border-top: 1px solid var(--color-border-grey); - border-radius: 0px; -} -.dropdown-menu.show li{ - color: var(--color-primary-element-text-one); - opacity:0.8; - font-size: 14px; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(1) a::before{ - background-image: url('/themes/Murena/snappymail/images/date-descending.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:"" -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(2) a::before{ - background-image: url('/themes/Murena/snappymail/images/date-ascending.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(3) a::before{ - background-image: url('/themes/Murena/snappymail/images/size-descending.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(4) a::before{ - background-image: url('/themes/Murena/snappymail/images/size-ascending.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(5) a::before{ - content:""; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(6) a::before{ - content:""; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(7) a::before{ - background-image: url('/themes/Murena/snappymail/images/from-a-z-descending.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; -} -#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(8) a::before{ - background-image: url('/themes/Murena/snappymail/images/from-a-z-ascending.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li{ - height: 48px; - margin-top: 0px; - padding-top: 0px; - vertical-align: middle; - padding-top: 10px; -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a{ - vertical-align: middle; - display: flex; - width:auto -} -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes{ - height: 36px; - line-height: 36px; - vertical-align: bottom; + #rl-content .LoginView .descWrapper { + font-weight: 500; + font-size: 32px; + line-height: 48px; + text-align: center; + color: var(--color-primary-element-text-loginheader); + padding: 64px 44px 0; + } + #rl-content .LoginView form .buttonLogin { + padding: 12px 16px; + max-width: 424px; + height: 48px; + background: var(--color-primary-element-text-blue); + border-radius: 6px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: var(--color-primary-element-text-login); + text-transform: capitalize; + } + #rl-content .LoginView form .controls span.fontastic { + display: none; + } + #rl-content #V-Login input { + padding-left: 20px; + border-color: var(--color-border-input); + border-radius: 8px; + height: 48px; -} -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors .btn, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn, -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes .btn{ - font-weight:400; - vertical-align: unset; -} -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="ul"]{ - height: 36px; - vertical-align: top; -} -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(3){ - 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){ - 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; - content:""; -} -#rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-success{ - background: var(--color-success-second); - border-radius: 6px; - height: auto; - padding: 0 14px; -} -#rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-success .icon-paper-plane{ - 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; - width: 14px; - color: transparent; - content:""; - border: none; - text-shadow: none; + } + #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 { + 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; + } + #rl-app footer button.btn.buttonYes, + #rl-app footer button.btn.buttonNo, + #rl-popups .button-delete, + #V-PopupsContacts .control-group .btn.fontastic { + color: var(--color-primary-element-text); + margin-right: 10px; + border-radius: 6px; + } -} -#rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-danger.button-delete{ - background-image: url('/themes/Murena/snappymail/images/delete-black.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; - border: none; - text-shadow: none; - vertical-align: middle; -} -#rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.button-delete{ - background: var(--color-primary-text); -} -#rl-app #rl-popups #V-PopupsCompose .pull-right .close{ - 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; - content:""; - border: none; - text-shadow: none; - vertical-align: bottom; -} -#rl-app #rl-popups #V-PopupsCompose .pull-right .minimize-custom{ - 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; - content: ""; - border: none; - text-shadow: none; - vertical-align: middle; - margin-left:0px; -} + #V-PopupsContacts .b-view-content-toolbar.btn-toolbar .btn.button-save-contact, + #V-PopupsContacts .b-view-content-toolbar.btn-toolbar #button-add-prop-dropdown-id { + background: var(--color-primary-element-text); + border-radius: 6px; + color: var(--color-primary-element-text-blue); + border: 1px solid var(--color-primary-element-text-blue) !important; + height: 36px; + } + #rl-content .LoginView .descWrapper::before { + background-image: url('/themes/Murena/snappymail/images/murena-mail.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 48px; + width: 58px; + color: transparent; + content: ""; + display: inline-flex; + vertical-align: top; + } -#rl-app #V-PopupsCompose header .pull-right a.btn:nth-child(3){ - background-image: url('/themes/Murena/snappymail/images/compose-contact.svg'); - background-position: center 11px; - background-repeat: no-repeat; - height: 18px; - width: 24px; - color: transparent; - content:""; -} -#rl-app #V-PopupsCompose header .pull-right .btn-group.dropdown a.btn{ - 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{ - background:var(--color-border-second); - height: 32px; - padding: unset; - width: 41px; -} -#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; - margin-right:10px; -} -#rl-app #rl-popups #V-PopupsCompose .b-header .error-to{ - color:var(--color-error-second); - font-weight: 400; - font-size: 14px; + #rl-app #V-MailMessageList .messageListItem.unseen .senderParent::before { + background-image: url('/themes/Murena/snappymail/images/greendot.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 10px; + width: 44px; + color: transparent; + content: ""; + display: inline-flex; + } + #rl-app .senderParent.actionHandle::before { + content: ""; + height: 10px; + width: 44px; + display: inline-flex; + } + #rl-app #V-MailMessageList .messageListItem .subjectParent.actionHandle { + padding-left: 44px; + } -} -#rl-app #V-MailMessageView .messageView .b-message-view-checked-helper{ - font-weight: 400; - font-size: 32px; -} -#rl-app #V-MailMessageList .dropdown-menu{ - left:-160px; - top:auto; -} -.rl-mobile #rl-app #V-MailMessageList .dropdown-menu{ - left:auto; - top:auto; -} -#rl-app .rl-left-panel-disabled #more-list-dropdown-id+.dropdown-menu { - position: absolute; + #rl-app #V-MailMessageView .messageView .b-message-view-desc { + 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: 0; + } + .dropdown-menu.show li { + color: var(--color-primary-element-text-one); + opacity: 0.8; + font-size: 14px; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(1) a::before { + background-image: url('/themes/Murena/snappymail/images/date-descending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: "" + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(2) a::before { + background-image: url('/themes/Murena/snappymail/images/date-ascending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(3) a::before { + background-image: url('/themes/Murena/snappymail/images/size-descending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(4) a::before { + background-image: url('/themes/Murena/snappymail/images/size-ascending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(5) a::before { + content: ""; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(6) a::before { + content: ""; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(7) a::before { + background-image: url('/themes/Murena/snappymail/images/from-a-z-descending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + } + #rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(8) a::before { + background-image: url('/themes/Murena/snappymail/images/from-a-z-ascending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li { + height: 48px; + margin-top: 0; + padding-top: 0; + vertical-align: middle; + padding-top: 10px; + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a { + vertical-align: middle; + display: flex; + width: auto + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes { + height: 36px; + line-height: 36px; + vertical-align: bottom; -} -#rl-app #V-Login .alert { - top: 0; - background-color: var(--color-warning-light); -} + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors .btn, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes .btn { + font-weight: 400; + vertical-align: unset; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn[data-action="ul"] { + height: 36px; + vertical-align: top; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(3) { + 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) { + 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; + content: ""; + } + #rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-success { + background: var(--color-success-second); + border-radius: 6px; + height: auto; + padding: 0 14px; + } + #rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-success .icon-paper-plane { + 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; + width: 14px; + color: transparent; + content: ""; + border: none; + text-shadow: none; -#rl-app #V-Login .alert .close{ - top: -24px; - right: -14px; -} -#rl-app .messageList .b-footer .e-quota{ - display:none -} -html.rl-left-panel-disabled #rl-left .b-folders .b-content { - top: 90px; -} -html.rl-left-panel-disabled #rl-left .b-folders li a.selectable::before{ - padding-right: 24px; -} -html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1){ - background-image: url('/themes/Murena/snappymail/images/back-outward.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 34px; - padding-left: 20px; - padding-right: 19px; - line-height: 0; - font-size: 0; - color: transparent; -} -#rl-app #V-MailMessageList .messageListItem.unseen { - background-color: unset; - border-left: 6px solid transparent; -} -#rl-app #V-MailMessageList .messageListItem.unseen .senderParent.actionHandle{ - font-weight: 500; - font-size: 16px; -} -#rl-app #V-MailMessageList .messageListItem .senderParent.actionHandle{ - font-weight: 400; - font-size: 16px; -} -#rl-app #area-toggle{ - margin-top:10px; -} + } + #rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-danger.button-delete { + background-image: url('/themes/Murena/snappymail/images/delete-black.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + border: none; + text-shadow: none; + vertical-align: middle; + } + #rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.button-delete { + background: var(--color-primary-text); + } + #rl-app #rl-popups #V-PopupsCompose .pull-right .close { + 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; + content: ""; + border: none; + text-shadow: none; + vertical-align: bottom; + } + #rl-app #rl-popups #V-PopupsCompose .pull-right .minimize-custom { + 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; + content: ""; + border: none; + text-shadow: none; + vertical-align: middle; + margin-left: 0; + } -#rl-app .rl-mobile .messageListItem .flagParent, #rl-app .rl-side-preview-pane .messageListItem .flagParent{ - display:none; -} -#rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button.button-vue{ - background-color: transparent; - color:var( --color-primary); - border: none; - text-decoration: underline; - font-style: 16px; -} -#rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button[name="share-public"]::before, -#rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button[name="share-internal"]::before{ - background-image: url('/themes/Murena/snappymail/images/public-attachment.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 25px; - line-height: 0; - font-size: 0; - color: transparent; - vertical-align: middle; -} -#rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button[name="select"]::before{ - background-image: url('/themes/Murena/snappymail/images/attach.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 22px; - padding-left: 20px; - padding-right: 10px; - line-height: 0; - font-size: 0; - color: transparent; - vertical-align: middle; -} -#rl-app #V-PopupsNextcloudFiles .close{ - opacity: 0.9; -} -#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-one); - opacity: 0.8; -} -#V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(1){ - background: var(--color-primary-element-text-blue); - border-radius: 6px; - color: var(--color-primary-element-text); - min-height: 32px; - height: 32px; - padding: 6px 14px; - opacity: 1; -} -#V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(2){ - background: var(--color-success-second); - border-radius: 6px; - color: var(--color-primary-element-text); - min-height: 32px; - height: 32px; - padding: 6px 14px; - opacity: 1; -} -#rl-app #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(3){ - background-image: url('/themes/Murena/snappymail/images/delete-black.svg'); - background-position: center center; - background-repeat: no-repeat; - height: 20px; - width: 20px; - color: transparent; - content:""; - border: none; - text-shadow: none; - vertical-align: middle; -} -#rl-app #V-PopupsContacts .b-list-toolbar .e-search{ - border-radius: 52px; - padding-left: 10px; -} -#rl-app #V-PopupsContacts .e-contact-item{ - border-left: none; -} -#rl-app #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .close{ - opacity: 0.8; -} -#rl-app #V-PopupsContacts .b-view-content .b-contact-view-desc{ - top: 50%; - position: relative; - padding-top:0px; -} -#rl-app #V-PopupsContacts .left{ - width:30%; -} -#rl-app #V-Settings-General .form-horizontal .legend:nth-child(1), -#rl-app #V-SettingsMenu .b-footer{ - 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-PopupsCompose header .pull-right a.btn:nth-child(3) { + background-image: url('/themes/Murena/snappymail/images/compose-contact.svg'); + background-position: center 11px; + background-repeat: no-repeat; + height: 18px; + width: 24px; + color: transparent; + content: ""; + } + #rl-app #V-PopupsCompose header .pull-right .btn-group.dropdown a.btn { + 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 { + background: var(--color-border-second); + height: 32px; + padding: unset; + width: 41px; + } + #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; + margin-right: 10px; + } + #rl-app #rl-popups #V-PopupsCompose .b-header .error-to { + color: var(--color-error-second); + font-weight: 400; + font-size: 14px; -#rl-app #V-Settings-General .form-horizontal .legend{ - border-bottom: none; -} -#rl-app #V-SettingsPane #rl-settings-subscreen{ - padding:0px; -} -#rl-app #V-SettingsPane .btn-toolbar .btn:nth-child(1){ - background: var(--color-primary); - border-radius: 6px; - color: var(--color-primary-element-text); - min-height: 32px; - height: 32px; - border-radius: 6px; - line-height: 20px; - padding: 6px 10px; - font-size: 16px; - font-weight: 400; -} - #rl-app #V-SettingsPane .btn-toolbar .btn:nth-child(1)::before{ - 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; - content:""; - border: none; - text-shadow: none; - line-height: 20px; - vertical-align: bottom; - } - #rl-app #V-Settings-Accounts .legend, - #rl-app #V-Settings-Accounts a, - #rl-app #V-Settings-Accounts .table.table-hover.list-table.identities-list, - #rl-app #V-Settings-Themes .legend, - #rl-app #V-Settings-Contacts .legend, - #rl-app #V-Settings-Filters .legend - { - padding-left: 20px; - } - #rl-app #V-Settings-Accounts .btn, - #rl-app #V-Settings-Security button.btn, - #rl-app #V-SettingsPane .btn { - background: var(--color-primary-element-text); - border-radius: 6px; - color: var(--color-primary); - border: 1px solid var(--color-primary) !important; - font-weight: 400; - font-size: 16px; - } - #rl-app #V-Settings-Accounts .btn .icon-user-add { - background-image: url('/themes/Murena/snappymail/images/account-blue.svg'); - background-position: center center; - background-repeat: no-repeat; - height:16px; - width:16px; - line-height: 0; - font-size: 0; - color: transparent; -} -#rl-app #V-Settings-Accounts .btn .icon-user-add:before { - content: ""; -} -#rl-app #rl-right #V-Settings-Accounts .table.table-hover.list-table.accounts-list tr td{ - font-size: 16px; - line-height: 24px; - padding: 16px 4px; -} -#rl-app #V-Settings-Accounts .btn, -#rl-app #V-Settings-Accounts .table.table-hover.list-table.accounts-list, -#rl-app #V-Settings-Accounts .table.table-hover.list-table.identities-list, -#rl-app #V-Settings-Security .btn, -#rl-app #V-Settings-Security .control-group, -#rl-app #V-Settings-Security details, -#rl-app #V-Settings-Folders .e-component.e-checkbox.material-design, -#rl-app #V-Settings-Folders .btn, -#rl-app #V-Settings-Folders .table.table-hover.list-table, -#rl-app #V-Settings-Filters .btn, -#rl-app #V-Settings-Filters .table.table-hover.list-table -{ - margin-left:24px; -} -#rl-app #V-Settings-General .legend, -#rl-app #V-Settings-Security .legend, -#rl-app #V-Settings-Folders .legend -{ - padding-left:24px; -} -#rl-app #V-Settings-Accounts span.delete.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; - 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; - content:""; - border: none; - text-shadow: none; - vertical-align: middle; - opacity: 0.8; -} -#rl-app #V-Settings-Folders .table td{ - opacity:0.8; - font-weight: 400; - font-size: 16px; -} -#rl-app #rl-loading .icon-spinner{ - background-image: url('/themes/Murena/snappymail/images/loading-color.svg'); - background-position: center center; - background-repeat: no-repeat; - height:32px; - width:32px; - padding-left: 20px; - padding-right: 19px; - content: ""; - color: transparent; - border: none; -} + } + #rl-app #V-MailMessageView .messageView .b-message-view-checked-helper { + font-weight: 400; + font-size: 32px; + } + #rl-app #V-MailMessageList .dropdown-menu { + left: -160px; + top: auto; + } + .rl-mobile #rl-app #V-MailMessageList .dropdown-menu { + left: auto; + top: auto; + } + #rl-app .rl-left-panel-disabled #more-list-dropdown-id+.dropdown-menu { + position: absolute; -#V-MailMessageView table th,#V-MailMessageView table td{ - border:none; -} + } + #rl-app #V-Login .alert { + top: 0; + background-color: var(--color-warning-light); + } -#rl-app #V-MailMessageView{ - top:41px; - border:0; -} -#rl-app #V-SystemDropDown{ - border-right: 1px solid var(--color-border-grey); - padding: 9px 7px; -} + #rl-app #V-Login .alert .close { + top: -24px; + right: -14px; + } + #rl-app .messageList .b-footer .e-quota { + display: none + } + html.rl-left-panel-disabled #rl-left .b-folders .b-content { + top: 90px; + } + html.rl-left-panel-disabled #rl-left .b-folders li a.selectable::before { + padding-right: 24px; + } + html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1) { + background-image: url('/themes/Murena/snappymail/images/back-outward.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 34px; + padding-left: 20px; + padding-right: 19px; + line-height: 0; + font-size: 0; + color: transparent; + } + #rl-app #V-MailMessageList .messageListItem.unseen { + background-color: unset; + border-left: 6px solid transparent; + } + #rl-app #V-MailMessageList .messageListItem.unseen .senderParent.actionHandle { + font-weight: 500; + font-size: 16px; + } + #rl-app #V-MailMessageList .messageListItem .senderParent.actionHandle { + font-weight: 400; + font-size: 16px; + } + #rl-app #area-toggle { + margin-top: 10px; + } -#rl-app #V-PopupsCompose .dropdown { - width: 20px; -} -#rl-app #V-PopupsCompose .pull-right .dropdown{ - width: 30px; -} -#rl-app .rl-side-preview-pane #V-MailMessageList .resizer{ - margin-top: 58px; -} -.rl-side-preview-pane #V-MailMessageList .resizer{ - margin-top: 58px; -} -html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { - display:block !important; -} -#rl-app #rl-popups #V-PopupsCompose .button-save i.fontastic { - display:none; -} -#rl-app dialog>footer{ - border-top:unset; - height: 70px; -} -#rl-app footer button.btn.buttonYes::before { - 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; - content: ""; - color: transparent; - border: none; -} -#rl-app footer button.btn.buttonNo::before { - 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; - content: ""; - color: transparent; - border: none; -} -#rl-app .messageListItem.checked .checkboxMessage{ - background: var( --color-primary-element); - color: var(--color-primary-text-checkbox); - border:unset; -} -#rl-app .b-folders li a.selectable{ - height: 56px !important; - 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; - height: 32px; - 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; -} -#rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1){ - border-radius: 4px 0px 0px 4px; -} -#rl-app .icon-attachment::before{ - vertical-align: middle; -} -#rl-app .icon-attachment::before{ - vertical-align: middle; -} -#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn,#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn{ - height:36px; -} -#rl-app .hide-mobile[data-i18n="COMPOSE/BUTTON_SEND"] { - display: inline-block; - height: auto; - line-height: 36px; - vertical-align: middle; -} -#rl-app .hide-mobile[data-i18n="GLOBAL/SAVE"] { - display: inline-block; - height: auto; - line-height: 36px; -} -#rl-app .squire-wysiwyg{ - margin-top:0px; - border:none; -} -#rl-app label[data-i18n="GLOBAL/TO"] , - #rl-app #V-PopupsCompose .b-header td[data-i18n="GLOBAL/FROM"], - #rl-app #V-PopupsCompose .b-header td[data-i18n="GLOBAL/SUBJECT"] -{ - text-align: left; - padding-left: 16px; - color:var( --color-text-dark-second); -} -#rl-app .squire-toolbar { - padding-left: 16px; -} -#rl-app #area-toggle { - padding-left: 16px; -} -#rl-app #V-PopupsCompose .emailaddresses .emailaddresses-input input -{ - padding-left: 0px; -} -#rl-app #V-PopupsCompose .emailaddresses .emailaddresses-input{ - margin: 0 0; -} + #rl-app .rl-mobile .messageListItem .flagParent, + #rl-app .rl-side-preview-pane .messageListItem .flagParent { + display: none; + } + #rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button.button-vue { + background-color: transparent; + color: var(--color-primary); + border: none; + text-decoration: underline; + font-style: 16px; + } + #rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button[name="share-public"]::before, + #rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button[name="share-internal"]::before { + background-image: url('/themes/Murena/snappymail/images/public-attachment.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 25px; + line-height: 0; + font-size: 0; + color: transparent; + vertical-align: middle; + } + #rl-app #V-PopupsNextcloudFiles #sm-nc-files-tree button[name="select"]::before { + background-image: url('/themes/Murena/snappymail/images/attach.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 22px; + padding-left: 20px; + padding-right: 10px; + line-height: 0; + font-size: 0; + color: transparent; + vertical-align: middle; + } + #rl-app #V-PopupsNextcloudFiles .close { + opacity: 0.9; + } + #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-one); + opacity: 0.8; + } + #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(1) { + background: var(--color-primary-element-text-blue); + border-radius: 6px; + color: var(--color-primary-element-text); + min-height: 32px; + height: 32px; + padding: 6px 14px; + opacity: 1; + } + #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(2) { + background: var(--color-success-second); + border-radius: 6px; + color: var(--color-primary-element-text); + min-height: 32px; + height: 32px; + padding: 6px 14px; + opacity: 1; + } + #rl-app #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn:nth-child(3) { + background-image: url('/themes/Murena/snappymail/images/delete-black.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content: ""; + border: none; + text-shadow: none; + vertical-align: middle; + } + #rl-app #V-PopupsContacts .b-list-toolbar .e-search { + border-radius: 52px; + padding-left: 10px; + } + #rl-app #V-PopupsContacts .e-contact-item { + border-left: none; + } + #rl-app #V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .close { + opacity: 0.8; + } + #rl-app #V-PopupsContacts .b-view-content .b-contact-view-desc { + top: 50%; + position: relative; + padding-top: 0; + } + #rl-app #V-PopupsContacts .left { + width: 30%; + } + #rl-app #V-Settings-General .form-horizontal .legend:nth-child(1), + #rl-app #V-SettingsMenu .b-footer { + 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 .btn[data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD"]{ - width: 50px; - text-align: center; - padding: 0; -} -#rl-app .e-paginator a.current{ - font-size:22px; -} -#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); -} -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a.email-title, -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a.email-title::before -{ - line-height: 27px; - height: 27px; -} + #rl-app #V-Settings-General .form-horizontal .legend { + border-bottom: none; + } + #rl-app #V-SettingsPane #rl-settings-subscreen { + padding: 0; + } + #rl-app #V-SettingsPane .btn-toolbar .btn:nth-child(1) { + background: var(--color-primary); + border-radius: 6px; + color: var(--color-primary-element-text); + min-height: 32px; + height: 32px; + border-radius: 6px; + line-height: 20px; + padding: 6px 10px; + font-size: 16px; + font-weight: 400; + } + #rl-app #V-SettingsPane .btn-toolbar .btn:nth-child(1)::before { + 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; + content: ""; + border: none; + text-shadow: none; + line-height: 20px; + vertical-align: bottom; + } + #rl-app #V-Settings-Accounts .legend, + #rl-app #V-Settings-Accounts a, + #rl-app #V-Settings-Accounts .table.table-hover.list-table.identities-list, + #rl-app #V-Settings-Themes .legend, + #rl-app #V-Settings-Contacts .legend, + #rl-app #V-Settings-Filters .legend { + padding-left: 20px; + } + #rl-app #V-Settings-Accounts .btn, + #rl-app #V-Settings-Security button.btn, + #rl-app #V-SettingsPane .btn { + background: var(--color-primary-element-text); + border-radius: 6px; + color: var(--color-primary); + border: 1px solid var(--color-primary) !important; + font-weight: 400; + font-size: 16px; + } + #rl-app #V-Settings-Accounts .btn .icon-user-add { + background-image: url('/themes/Murena/snappymail/images/account-blue.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 16px; + width: 16px; + line-height: 0; + font-size: 0; + color: transparent; + } + #rl-app #V-Settings-Accounts .btn .icon-user-add:before { + content: ""; + } + #rl-app #rl-right #V-Settings-Accounts .table.table-hover.list-table.accounts-list tr td { + font-size: 16px; + line-height: 24px; + padding: 16px 4px; + } + #rl-app #V-Settings-Accounts .btn, + #rl-app #V-Settings-Accounts .table.table-hover.list-table.accounts-list, + #rl-app #V-Settings-Accounts .table.table-hover.list-table.identities-list, + #rl-app #V-Settings-Security .btn, + #rl-app #V-Settings-Security .control-group, + #rl-app #V-Settings-Security details, + #rl-app #V-Settings-Folders .e-component.e-checkbox.material-design, + #rl-app #V-Settings-Folders .btn, + #rl-app #V-Settings-Folders .table.table-hover.list-table, + #rl-app #V-Settings-Filters .btn, + #rl-app #V-Settings-Filters .table.table-hover.list-table { + margin-left: 24px; + } + #rl-app #V-Settings-General .legend, + #rl-app #V-Settings-Security .legend, + #rl-app #V-Settings-Folders .legend { + padding-left: 24px; + } + #rl-app #V-Settings-Accounts span.delete.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; + 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; + content: ""; + border: none; + text-shadow: none; + vertical-align: middle; + opacity: 0.8; + } + #rl-app #V-Settings-Folders .table td { + opacity: 0.8; + font-weight: 400; + font-size: 16px; + } + #rl-app #rl-loading .icon-spinner { + background-image: url('/themes/Murena/snappymail/images/loading-color.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 32px; + width: 32px; + padding-left: 20px; + padding-right: 19px; + content: ""; + color: transparent; + border: none; + } -#rl-app .b-folders{ - padding-right:0px; -} -#rl-app .messageView .messageItemHeader{ - margin-top: 14px; - 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); - } + #V-MailMessageView table th, + #V-MailMessageView table td { + border: none; + } - #rl-app #V-Settings-Folders .btn{ - vertical-align: middle; - line-height: 20px; - } -.rl-side-preview-pane #rl-app #V-MailMessageList .messageList{ - overflow: hidden; - min-width:359px; - } - #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 #V-MailMessageView { + top: 41px; + border: 0; + } + #rl-app #V-SystemDropDown { + border-right: 1px solid var(--color-border-grey); + padding: 9px 7px; + } -#rl-app .b-folders li a{ - color:unset; -} -#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled { - float: right; - padding-right: 60px; - max-width: 150px; -} + #rl-app #V-PopupsCompose .dropdown { + width: 20px; + } + #rl-app #V-PopupsCompose .pull-right .dropdown { + width: 30px; + } + #rl-app .rl-side-preview-pane #V-MailMessageList .resizer { + margin-top: 58px; + } + .rl-side-preview-pane #V-MailMessageList .resizer { + margin-top: 58px; + } + html.rl-mobile .hide-mobile[data-i18n="GLOBAL/SAVE"] { + display: block !important; + } + #rl-app #rl-popups #V-PopupsCompose .button-save i.fontastic { + display: none; + } + #rl-app dialog > footer { + border-top: unset; + height: 70px; + } + #rl-app footer button.btn.buttonYes::before { + 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; + content: ""; + color: transparent; + border: none; + } + #rl-app footer button.btn.buttonNo::before { + 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; + content: ""; + color: transparent; + border: none; + } + #rl-app .messageListItem.checked .checkboxMessage { + background: var(--color-primary-element); + color: var(--color-primary-text-checkbox); + border: unset; + } + #rl-app .b-folders li a.selectable { + height: 56px !important; + 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 0 0 4px; + font-size: 14px; + height: 32px; + 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; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) { + border-radius: 4px 0 0 4px; + } + #rl-app .icon-attachment::before { + vertical-align: middle; + } + #rl-app .icon-attachment::before { + vertical-align: middle; + } + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn, + #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn { + height: 36px; + } + #rl-app .hide-mobile[data-i18n="COMPOSE/BUTTON_SEND"] { + display: inline-block; + height: auto; + line-height: 36px; + vertical-align: middle; + } + #rl-app .hide-mobile[data-i18n="GLOBAL/SAVE"] { + display: inline-block; + height: auto; + line-height: 36px; + } + #rl-app .squire-wysiwyg { + margin-top: 0; + border: none; + } + #rl-app label[data-i18n="GLOBAL/TO"], + #rl-app #V-PopupsCompose .b-header td[data-i18n="GLOBAL/FROM"], + #rl-app #V-PopupsCompose .b-header td[data-i18n="GLOBAL/SUBJECT"] { + text-align: left; + padding-left: 16px; + color: var(--color-text-dark-second); + } + #rl-app .squire-toolbar { + padding-left: 16px; + } + #rl-app #area-toggle { + padding-left: 16px; + } + #rl-app #V-PopupsCompose .emailaddresses .emailaddresses-input input { + padding-left: 0; + } + #rl-app #V-PopupsCompose .emailaddresses .emailaddresses-input { + margin: 0; + } -#rl-app #V-PopupsCompose .no-attachments-desc{ - color:var(--color-mail-text); -} -#rl-app #V-PopupsCompose .attachmentAreaParent{ - background-color:var(--color-background-light-second); - border-top:none; -} \ No newline at end of file + #rl-app .btn[data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD"] { + width: 50px; + text-align: center; + padding: 0; + } + #rl-app .e-paginator a.current { + font-size: 22px; + } + #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); + } + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a.email-title, + #rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a.email-title::before { + line-height: 27px; + height: 27px; + } + + #rl-app .b-folders { + padding-right: 0; + } + #rl-app .messageView .messageItemHeader { + margin-top: 15px; + border-top: 1px solid var(--color-border-grey); + border-radius: 0; + border-bottom: none; + padding-bottom: 0; + } + #rl-app #V-Settings-HMESettings .inputBox { + white-space: nowrap; + background: var(--color-primary-text); + padding: 9px 0; + 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; + min-width: 359px; + } + #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: 0; + border-top: none; + border-bottom: 1px solid var(--color-border-grey); + padding-top: 0; + } + #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; + } + #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled { + float: right; + padding-right: 60px; + max-width: 150px; + } + + #rl-app #V-PopupsCompose .no-attachments-desc { + color: var(--color-mail-text); + } + #rl-app #V-PopupsCompose .attachmentAreaParent { + background-color: var(--color-background-light-second); + border-top: none; + } + #rl-app #V-PopupsKeyboardShortcutsHelp .tabs>[id^=tab]:checked+label { + background-color: var(--tab-active-bg-clr, --color-border-second); + border-color: var(--border-color, --color-border-second) var(--border-color, --color-border-second) transparent var(--border-color, --color-border-second); + opacity: 1; + z-index: 1; + } + #rl-app #V-PopupsKeyboardShortcutsHelp .table-striped tbody tr:nth-child(odd) td, + #rl-app #V-PopupsKeyboardShortcutsHelp .table-striped tbody tr:nth-child(odd) th { + background-color: var(--tr-odd-bg-clr, ----color-compose-background); + } + #rl-app #V-PopupsKeyboardShortcutsHelp .tabs > label { + background-color: var(--tr-odd-bg-clr, ----color-compose-background); + border-color: var(--border-color, --color-border-second) var(--border-color, --color-border-second) transparent var(--border-color, --color-border-second); + } + #rl-app #accountform .alert { + background-color: var(--color-warning-light); + } + .alert .close { + position: relative; + top: -25px; + right: -15px; + line-height: 1.43em; + } + #rl-app .messageView .messageItemHeader .informationShort .from, + #rl-app .messageView .messageItemHeader .informationShort .from a { + font-weight: 500; + font-size: 16px; + line-height: 24px; + } + #rl-app .messageView .messageItemHeader .informationShortWrp .informationShort, + #rl-app .messageView .messageItemHeader .messageTags span[data-i18n="MESSAGE/TAGS"] { + font-weight: 400; + color: var(--color-email-text-to); + font-size: 14px; + line-height: 20px; + } + #rl-app .messageView .messageItemHeader .date { + font-weight: 400; + color: var(--color-text-dark-second); + font-size: 12px; + line-height: 16px + } + #rl-app .messageView .messageItemHeader .informationShort span[data-i18n="MESSAGE/SPAM_SCORE"] { + font-weight: 400; + color: var(--color-email-text); + font-size: 12px; + line-height: 16px; + } + #rl-app .messageView .b-message.selected.focused.withAttachments .messageItemHeader { + border-bottom: none; + padding-top: 0; + padding-bottom: 0; + } + #rl-app .messageView .b-message.selected.focused.withAttachments #messageItem .messageItemHeader { + border-top: none; + border-bottom: 1px solid var(--color-border-grey); + padding-top: 0; + padding-bottom: 0; + } + #rl-app .messageView .messageItemHeader .subjectParent { + padding-bottom: 16px; + } + #rl-app .messageView .message-fixed-button-toolbar { + top: 50px; + }