diff --git a/images/cross-btn.svg b/images/cross-btn.svg new file mode 100644 index 0000000000000000000000000000000000000000..a05ca5d60ede899de506e2e42e337227c7ee1053 --- /dev/null +++ b/images/cross-btn.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/editnote.png b/images/editnote.png deleted file mode 100644 index 1aad7b39bd986f0e0d9203cfafd54be39c6278bc..0000000000000000000000000000000000000000 Binary files a/images/editnote.png and /dev/null differ diff --git a/images/editnote.svg b/images/editnote.svg new file mode 100644 index 0000000000000000000000000000000000000000..0e2ba86ff261644b9e8a8bd2c2efb909ff748c76 --- /dev/null +++ b/images/editnote.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/tick-btn.svg b/images/tick-btn.svg new file mode 100644 index 0000000000000000000000000000000000000000..8e7cd716656bb5684ff9b14b853025b968ed774c --- /dev/null +++ b/images/tick-btn.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles.css b/styles.css index ea1ecc5986a72b3b968423cad350d52d3c346a8f..7952e2f1434e9bc57d28318accd513151fdbe970 100644 --- a/styles.css +++ b/styles.css @@ -21,7 +21,14 @@ */ /* 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; + --main-bg-size: auto; + --main-bg-repeat: repeat; + --main-font-size: 14px; --color-main-background: #ffffff; --color-main-background-not-plain: #0082c9; --color-main-background-rgb: 255,255,255; @@ -31,6 +38,7 @@ --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-background-grey: rgba(0, 0, 0, 0.87); --color-background-black: rgba(0, 0, 0, 0.12); --color-background-darker: #dbdbdb; --color-placeholder-light: #e6e6e6; @@ -77,7 +85,7 @@ --color-border-purple: #B034F0; --color-border-light-second: #DCDCDC; --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --default-font-size: 15px; + --default-font-size: 16px; --animation-quick: 100ms; --animation-slow: 300ms; --border-radius: 3px; @@ -113,6 +121,7 @@ --color-primary-element-light: #e5eff4; --color-primary-element-light-text: #00273d; --color-primary-element-light-hover: #dbe4e9; + --color-primary-element-light-grey-hover: #f2f1f1; --color-primary-element-text-dark: #ededed; --color-primary-element-text-grey: #333333; --color-primary-element-text-blue: #087BF9; @@ -120,106 +129,115 @@ --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); } -@media (prefers-color-scheme: dark) { - :root { - --color-main-background: #171717; - --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); - --filter-background-blur: blur(25px); - --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; - --color-background-hover: #212121; - --color-background-dark: #292929; - --color-background-black:rgba(0, 0, 0, 0.12); - --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-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-main-text: #D8D8D8; - --color-text-maxcontrast: #8c8c8c; - --color-text-maxcontrast-default: #8c8c8c; - --color-text-maxcontrast-background-blur: #919191; - --color-text-light: #bfbfbf; - --color-text-lighter: #a5a5a5; - --color-text-dark-second: rgba(0, 0, 0, 0.38); - --color-scrollbar: #3d3d3d; - --color-error: #e9322d; - --color-error-second: #F8432E; - --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-hover: #efb832; - --color-success: #46ba61; - --color-success-second: #44B04C; - --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: #000000; - --color-box-shadow-second: rgba(0,0,0, 0.02); - --color-border: #292929; - --color-border-grey: #e6e6e6; - --color-border-input: #e6e8e9; - --color-border-dark: #3b3b3b; - --color-border-second: #e0e0e0; - --color-border-red: #F8432E; - --color-border-orange: #FF7A00; - --color-border-green: #44B04C; - --color-border-purple: #B034F0; - --color-border-light-second: #DCDCDC; - --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --default-font-size: 15px; - --animation-quick: 100ms; - --animation-slow: 300ms; - --border-radius: 3px; - --border-radius-large: 10px; - --border-radius-pill: 100px; - --default-clickable-area: 44px; - --default-line-height: 24px; - --default-grid-baseline: 4px; - --header-height: 50px; - --navigation-width: 300px; - --sidebar-min-width: 300px; - --sidebar-max-width: 500px; - --list-min-width: 200px; - --list-max-width: 300px; - --header-menu-item-height: 44px; - --header-menu-profile-item-height: 66px; - --breakpoint-mobile: 1024px; - --primary-invert-if-bright: no; - --background-invert-if-dark: invert(100%); - --background-invert-if-bright: no; - --color-primary: #087BF9; - --color-primary-default: #0082c9; - --color-primary-text: #ffffff; - --color-primary-hover: #04537f; - --color-primary-light: #141e24; - --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%); - --color-primary-element: #087BF9; - --color-primary-element-text: #ffffff; - --color-primary-element-hover: #04537f; - --color-primary-element-light: #141e24; - --color-primary-element-light-text: #99c0d6; - --color-primary-element-light-hover: #1d272d; - --color-primary-element-text-dark: #ededed; - --color-primary-element-text-grey: #333333; - --color-primary-element-text-blue: #087BF9; - --color-primary-element-text-black: #000000; - --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); - } +body.theme--dark { + --main-color: var(--color-main-text); + --main-bg-color: var(--color-main-background); + --main-bg-image: none; + --main-bg-size: auto; + --main-bg-repeat: repeat; + --main-font-size: 14px; + --color-main-background: #171717; + --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); + --filter-background-blur: blur(25px); + --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --color-background-hover: #212121; + --color-background-dark: #292929; + --color-background-grey: rgba(0, 0, 0, 0.87); + --color-background-black:rgba(0, 0, 0, 0.12); + --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-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-main-text: #D8D8D8; + --color-text-maxcontrast: #8c8c8c; + --color-text-maxcontrast-default: #8c8c8c; + --color-text-maxcontrast-background-blur: #919191; + --color-text-light: #bfbfbf; + --color-text-lighter: #a5a5a5; + --color-text-dark-second: rgba(0, 0, 0, 0.38); + --color-scrollbar: #3d3d3d; + --color-error: #e9322d; + --color-error-second: #F8432E; + --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-hover: #efb832; + --color-success: #46ba61; + --color-success-second: #44B04C; + --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: #000000; + --color-box-shadow-second: rgba(0,0,0, 0.02); + --color-border: #292929; + --color-border-grey: #e6e6e6; + --color-border-input: #e6e8e9; + --color-border-dark: #3b3b3b; + --color-border-second: #e0e0e0; + --color-border-red: #F8432E; + --color-border-orange: #FF7A00; + --color-border-green: #44B04C; + --color-border-purple: #B034F0; + --color-border-light-second: #DCDCDC; + --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --default-font-size: 15px; + --animation-quick: 100ms; + --animation-slow: 300ms; + --border-radius: 3px; + --border-radius-large: 10px; + --border-radius-pill: 100px; + --default-clickable-area: 44px; + --default-line-height: 24px; + --default-grid-baseline: 4px; + --header-height: 50px; + --navigation-width: 300px; + --sidebar-min-width: 300px; + --sidebar-max-width: 500px; + --list-min-width: 200px; + --list-max-width: 300px; + --header-menu-item-height: 44px; + --header-menu-profile-item-height: 66px; + --breakpoint-mobile: 1024px; + --primary-invert-if-bright: no; + --background-invert-if-dark: invert(100%); + --background-invert-if-bright: no; + --color-primary: #087BF9; + --color-primary-default: #0082c9; + --color-primary-text: #ffffff; + --color-primary-hover: #04537f; + --color-primary-light: #141e24; + --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%); + --color-primary-element: #087BF9; + --color-primary-element-text: #ffffff; + --color-primary-element-hover: #04537f; + --color-primary-element-light: #141e24; + --color-primary-element-light-text: #99c0d6; + --color-primary-element-light-hover: #1d272d; + --color-primary-element-light-grey-hover: #f2f1f1; + --color-primary-element-text-dark: #ededed; + --color-primary-element-text-grey: #333333; + --color-primary-element-text-blue: #087BF9; + --color-primary-element-text-black: #000000; + --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); + } + + :root { --link-color: var(--color-primary-light-text); } @@ -259,6 +277,7 @@ html.rl-left-panel-disabled #rl-app #rl-left{ opacity: 1; background-color: unset; border-right: solid 1px var(--color-border); + margin-top: 58px; } #rl-app .messageList, @@ -270,10 +289,12 @@ html.rl-left-panel-disabled #rl-app #rl-left{ } #rl-app .b-folders .b-toolbar { - height: unset; + height: 58px; display: flex; flex-direction: row; padding: 8px; + 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 { @@ -399,6 +420,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { border-radius: var(--border-radius-pill); color: unset; border: none; + font-weight: 400; } #rl-app #V-AdminMenu nav a, @@ -413,7 +435,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: unset; + color: var(--color-primary-element);; background-color: var(--color-background-blue); border-radius: unset; } @@ -451,8 +473,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { color: var(--color-primary-element-text-grey); } #rl-app .b-folders hr { - border-top: solid var(--color-main-text); - border-radius: var(--border-radius-pill); + border: 1px solid var(--color-main-text); opacity: .1; } #rl-app .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1){ @@ -536,12 +557,13 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { height: 36px; box-sizing: border-box !important; padding: 8px 14px; - line-height: 20px; + line-height: 24px; color: var(--color-main-text); 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; } #rl-app .btn-toolbar .btn { background-color: transparent; @@ -612,58 +634,156 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable::before { background-image: url('images/inbox.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 18px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable.selected::before { background-image: url('images/inbox-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 18px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable::before { background-image: url('images/sent.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 18px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable.selected::before { background-image: url('images/sent-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 18px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable::before { background-image: url('images/draft.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 20px; + width: 16px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable.selected::before { background-image: url('images/draft-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 20px; + width: 16px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable::before { background-image: url('images/spam.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 18px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable.selected::before { background-image: url('images/spam-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 18px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable.selected::before { background-image: url('images/trash-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 14px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable::before { background-image: url('images/trash.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 18px; + width: 14px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable.selected::before { background-image: url('images/archieve-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable::before { background-image: url('images/archieve.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-user li a.selectable.selected::before { background-image: url('images/folder-color.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 16px; + width: 20px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-user li a.selectable::before { background-image: url('images/folder.svg'); + content: ""; + background-position: left center; + background-repeat: no-repeat; + height: 16px; + width: 20px; + padding-left: 20px; + padding-right: 19px; } #rl-app .b-folders .b-folders-user li a.selectable .e-collapsed-sign{ display:none; @@ -692,11 +812,12 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app #rl-content .btn.buttonCompose::before { content:""; - background-image: url('images/editnote.png'); + background-image: url('images/editnote.svg'); background-position: left center; background-repeat: no-repeat; padding-left: 20px; - height:18px; + height:20px; + image-rendering: -webkit-optimize-contrast; } #rl-app #rl-content .b-folders-system li .flag-icon{ display:none; @@ -818,9 +939,7 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f border-top: 1px solid var(--color-border-grey); } #rl-app #V-MailMessageList .btn-toolbar { - text-align: center; - border-left: 1px solid var(--color-border-grey); - border-right: 1px solid var(--color-border-grey); + text-align: right; border-bottom: 1px solid var(--color-border-grey); } #rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(1) { @@ -1200,17 +1319,19 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { background-color: var(--color-main-background); border-left-color: var(--color-main-background); } - +#rl-app .messageListItem{ + border-bottom: 1px solid var(--color-border-grey); +} #rl-app .messageListItem:hover, #rl-app .messageListItem.focused:hover { background-color: var(--color-main-background-translucent); - border-left-color: var(--color-primary-light-hover); + border-left-color: transparent; } #rl-app .messageListItem.selected, #rl-app .messageListItem.selected:hover { - background-color: var(--color-primary-light) !important; - border-left-color: var(--color-primary-light) !important; + background-color: var(--color-background-blue) !important; + border-left-color: transparent !important; } #rl-app .messageListItem.unseen, @@ -1245,18 +1366,18 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app .messageListItem.checked { background-color: unset; - border-left-color: var(--color-primary-light-text); + border-left-color: transparent; } #rl-app .messageListItem.checked.focused { background-color: inherit; - border-left-color: var(--color-primary-element-light-text); + border-left-color:transparent; } #rl-app .messageListItem.checked:hover, #rl-app .messageListItem.checked.focused:hover { - background-color: var(--color-main-background-translucent); - border-left-color: inherit; + background-color: transparent; + border-left-color: transparent; } /* @@ -1435,11 +1556,26 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar --msgflag-\\flagged-color: #ffca32; } -#rl-app .msgflag-\$label5:not(.focused) { border-color: var(--msgflag-\$label5-color); } -#rl-app .msgflag-\$label4:not(.focused) { border-color: var(--msgflag-\$label4-color); } -#rl-app .msgflag-\$label3:not(.focused) { border-color: var(--msgflag-\$label3-color); } -#rl-app .msgflag-\$label2:not(.focused) { border-color: var(--msgflag-\$label2-color); } -#rl-app .msgflag-\$label1:not(.focused) { border-color: var(--msgflag-\$label1-color); } +#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; } @@ -1447,11 +1583,26 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #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); } -#rl-app .msgflag-\$label4:not(.focused):hover { border-color: var(--msgflag-\$label4-color-hover); } -#rl-app .msgflag-\$label3:not(.focused):hover { border-color: var(--msgflag-\$label3-color-hover); } -#rl-app .msgflag-\$label2:not(.focused):hover { border-color: var(--msgflag-\$label2-color-hover); } -#rl-app .msgflag-\$label1:not(.focused):hover { border-color: var(--msgflag-\$label1-color-hover); } +#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, @@ -1499,10 +1650,11 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app .dropdown-menu { background-color: var(--color-main-background); - filter: drop-shadow(0 1px 5px var(--color-box-shadow)); - border-radius: var(--border-radius-large); + 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 a { @@ -1519,13 +1671,12 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app .dropdown-menu li.disabled > a:hover, #rl-app .dropdown-menu li.disabled > a:focus, #rl-app .dropdown-menu li.disabled > a:active { - opacity: .5; - filter: saturate(0.7); + 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-light); + background-color: var( --color-primary-element-light-grey-hover); color: unset; opacity: unset; } @@ -1582,6 +1733,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar border-radius: 8px; height:32px; min-height: 32px; + padding: 5px; } @@ -1778,11 +1930,16 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar background: var(--color-main-background); border: 1px solid var(--color-border-second) !important; border-radius: 4px 0px 0px 4px; + height:35px; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(1) .icon-file-text { + vertical-align: middle; } #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn:nth-child(2) { background: var(--color-main-background); border: 1px solid var(--color-border-second) !important; border-radius: 0px 4px 4px 0px; + height:35px; } #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn.active { background: rgba(0, 0, 0, 0.12); @@ -1795,6 +1952,8 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar 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: url('images/attachnextcloud-files.svg'); @@ -1822,9 +1981,13 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn{ vertical-align: baseline; + background: var(--input-bg-clr,#fff) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+) right center/1em no-repeat border-box; + background-position: right 6px center; } #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2){ margin-left:3px; + background: var(--input-bg-clr,#fff) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMTBweCcgd2lkdGg9JzE1cHgnPjx0ZXh0IHg9JzAnIHk9JzEwJyBmaWxsPSdyZ2IoODUsODUsODUpJz7ilr48L3RleHQ+PC9zdmc+) right center/1em no-repeat border-box; + background-position: right 6px center; } #rl-app #V-PopupsCompose #squire-toolgroup-colors .btn, #rl-app #V-PopupsCompose #squire-toolgroup-inline .btn, @@ -1859,7 +2022,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar margin-top:9px; padding-top:9px; } -#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .email-title::before { +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .email-title[data-icon="✔"]::before { background-image: url('images/profiletick.svg'); background-position: center center; background-repeat: no-repeat; @@ -2255,12 +2418,12 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-content .LoginView{ - width: 512px; + 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); @@ -2276,7 +2439,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-content .LoginView form .buttonLogin{ padding: 12px 16px; - width: 424px; + max-width: 424px; height: 48px; background: var(--color-primary-element-text-blue); border-radius: 6px; @@ -2448,12 +2611,16 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #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"]{ + vertical-align: middle; } #rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(3){ background-image: url('images/toolbar-folder.svg'); background-position: center center; background-repeat: no-repeat; - height: 20px; + height: 28px; width: 20px; color: transparent; content:""; @@ -2462,7 +2629,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar background-image: url('images/toolbar-photo.svg'); background-position: center center; background-repeat: no-repeat; - height: 20px; + height: 28px; width: 20px; color: transparent; content:""; @@ -2539,6 +2706,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #rl-popups #V-PopupsCompose .btn-group:nth-of-type(1) button.btn.active{ background:var(--color-border-second); + height: 35px; } #rl-app #rl-popups #V-PopupsCompose .b-header.g-ui-user-select-none .error-to::before { border: 1px solid var(--color-error-second); @@ -2833,3 +3001,44 @@ html.rl-left-panel-disabled #rl-left .b-footer.btn-toolbar .btn-group a.btn.font #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 { + background-image: url('images/tick-btn.svg'); + background-position: center center; + background-repeat: no-repeat; + height:10px; + width:10px; + padding-left: 12px; + content: ""; + color: transparent; + border: none; +} +#rl-app footer button.btn.buttonNo::before { + background-image: url('images/cross-btn.svg'); + background-position: center center; + background-repeat: no-repeat; + height:10px; + width:10px; + padding-left: 12px; + content: ""; + color: transparent; + border: none; +}