From 638755bef3426bc12249925f3a479ed34655a392 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Mon, 11 Dec 2023 23:08:14 +0100 Subject: [PATCH] Theme NextcloudV25+ spacing to tabs --- .../v/0.0.0/themes/NextcloudV25+/styles.css | 2072 ++++++++--------- 1 file changed, 1036 insertions(+), 1036 deletions(-) diff --git a/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css b/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css index 0d461398a..6ea6309ab 100644 --- a/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css +++ b/snappymail/v/0.0.0/themes/NextcloudV25+/styles.css @@ -11,145 +11,145 @@ /* #region theme */ :root { - --border-color: var(--nc-color-border); - --dialog-border-clr: var(--nc-color-border); + --border-color: var(--nc-color-border); + --dialog-border-clr: var(--nc-color-border); - --nc-vs-selected-bg: var(--vs-selected-bg, var(--nc-color-background-dark)); - --nc-vs-selected-color: var(--vs-selected-color, var(--nc-color-main-text)); - --nc-vs-border-radius: var(--vs-border-radius, var(--nc-border-radius-large)); - --nc-vs-controls-color: var(--vs-controls-color, var(--nc-color-text-maxcontrast)); - --nc-vs-line-height: var(--vs-line-height, var(--nc-default-line-height)); - --nc-vs-search-input-bg: var(--vs-search-input-bg, var(--nc-color-main-background)); - --nc-vs-search-input-color: var(--vs-search-input-color, var(--nc-color-main-text)); - --nc-vs-font-size: var(--vs-font-size, var(--nc-default-font-size)); + --nc-vs-selected-bg: var(--vs-selected-bg, var(--nc-color-background-dark)); + --nc-vs-selected-color: var(--vs-selected-color, var(--nc-color-main-text)); + --nc-vs-border-radius: var(--vs-border-radius, var(--nc-border-radius-large)); + --nc-vs-controls-color: var(--vs-controls-color, var(--nc-color-text-maxcontrast)); + --nc-vs-line-height: var(--vs-line-height, var(--nc-default-line-height)); + --nc-vs-search-input-bg: var(--vs-search-input-bg, var(--nc-color-main-background)); + --nc-vs-search-input-color: var(--vs-search-input-color, var(--nc-color-main-text)); + --nc-vs-font-size: var(--vs-font-size, var(--nc-default-font-size)); } :not([data-themes~="dark"]) { - --nc-color-main-background: var(--color-main-background, #ffffff); - --nc-color-main-background-rgb: var(--color-main-background-rgb, 255, 255, 255); - --nc-color-main-background-blur: var(--color-main-background-blur, rgba(var(--nc-color-main-background-rgb), .8)); - --nc-filter-background-blur: var(--filter-background-blur, blur(25px)); - --nc-color-background-hover: var(--color-background-hover, #f5f5f5); - --nc-color-background-dark: var(--color-background-dark, #ededed); - --nc-color-background-darker: var(--color-background-darker, #dbdbdb); - --nc-color-placeholder-light: var(--color-placeholder-light, #e6e6e6); - --nc-color-placeholder-dark: var(--color-placeholder-dark, #cccccc); - --nc-color-main-text: var(--color-main-text, #222222); - --nc-color-text-light: var(--color-text-light, #222222); - --nc-color-text-lighter: var(--color-text-lighter, #767676); - --nc-color-text-maxcontrast: var(--color-text-maxcontrast, #767676); - --nc-color-scrollbar: var(--color-scrollbar, rgba(34, 34, 34, .15)); - --nc-color-error: var(--color-error, #e9322d); - --nc-color-error-rgb: var(--color-error-rgb, 233, 50, 45); - --nc-color-error-hover: var(--color-error-hover, #ed5a56); - --nc-color-warning: var(--color-warning, #eca700); - --nc-color-warning-rgb: var(--color-warning-rgb, 236, 167, 0); - --nc-color-warning-hover: var(--color-warning-hover, #efb832); - --nc-color-success: var(--color-success, #46ba61); - --nc-color-success-rgb: var(--color-success-rgb, 70, 186, 97); - --nc-color-success-hover: var(--color-success-hover, #6ac780); - --nc-color-loading-light: var(--color-loading-light, #cccccc); - --nc-color-loading-dark: var(--color-loading-dark, #444444); - --nc-color-box-shadow-rgb: var(--color-box-shadow-rgb, 77, 77, 77); - --nc-color-box-shadow: var(--color-box-shadow, rgba(var(--nc-color-box-shadow-rgb), 0.5)); - --nc-color-border: var(--color-border, #ededed); - --nc-color-border-dark: var(--color-border-dark, #dbdbdb); - --nc-color-border-maxcontrast: var(--color-border-maxcontrast, #949494); - --nc-font-face: var(--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'); - --nc-default-font-size: var(--default-font-size, 15px); - --nc-default-line-height: var(--default-line-height, 24px); - --nc-animation-quick: var(--animation-quick, 100ms); - --nc-animation-slow: var(--animation-slow, 300ms); - --nc-border-radius: var(--border-radius, 3px); - --nc-border-radius-large: var(--border-radius-large, 10px); - --nc-border-radius-pill: var(--border-radius-pill, 100px); - --nc-default-grid-baseline: var(--default-grid-baseline, 4px); - --nc-navigation-width: var(--navigation-width, 300px); - --nc-sidebar-min-width: var(--sidebar-min-width, 300px); - --nc-sidebar-max-width: var(--sidebar-max-width, 500px); - --nc-list-min-width: var(--list-min-width, 200px); - --nc-list-max-width: var(--list-max-width, 300px); - --nc-breakpoint-mobile: var(--breakpoint-mobile, 1024px); - --nc-color-primary: var(--color-primary, #00639a); - --nc-color-primary-default: var(--color-primary-default, #0082c9); - --nc-color-primary-text: var(--color-primary-text, #ffffff); - --nc-color-primary-hover: var(--color-primary-hover, #3282ae); - --nc-color-primary-light: var(--color-primary-light, #e5eff4); - --nc-color-primary-light-text: var(--color-primary-light-text, #00273d); - --nc-color-primary-light-hover: var(--color-primary-light-hover, #dbe4e9); - --nc-color-primary-text-dark: var(--color-primary-text-dark, #ededed); - --nc-color-primary-element: var(--color-primary-element, #00639a); - --nc-color-primary-element-text: var(--color-primary-element-text, #ffffff); - --nc-color-primary-element-hover: var(--color-primary-element-hover, #3282ae); - --nc-color-primary-element-light: var(--color-primary-element-light, #e5eff4); - --nc-color-primary-element-light-text: var(--color-primary-element-light-text, #00273d); - --nc-color-primary-element-light-hover: var(--color-primary-element-light-hover, #dbe4e9); - --nc-color-primary-element-text-dark: var(--color-primary-element-text-dark, #ededed); + --nc-color-main-background: var(--color-main-background, #ffffff); + --nc-color-main-background-rgb: var(--color-main-background-rgb, 255, 255, 255); + --nc-color-main-background-blur: var(--color-main-background-blur, rgba(var(--nc-color-main-background-rgb), .8)); + --nc-filter-background-blur: var(--filter-background-blur, blur(25px)); + --nc-color-background-hover: var(--color-background-hover, #f5f5f5); + --nc-color-background-dark: var(--color-background-dark, #ededed); + --nc-color-background-darker: var(--color-background-darker, #dbdbdb); + --nc-color-placeholder-light: var(--color-placeholder-light, #e6e6e6); + --nc-color-placeholder-dark: var(--color-placeholder-dark, #cccccc); + --nc-color-main-text: var(--color-main-text, #222222); + --nc-color-text-light: var(--color-text-light, #222222); + --nc-color-text-lighter: var(--color-text-lighter, #767676); + --nc-color-text-maxcontrast: var(--color-text-maxcontrast, #767676); + --nc-color-scrollbar: var(--color-scrollbar, rgba(34, 34, 34, .15)); + --nc-color-error: var(--color-error, #e9322d); + --nc-color-error-rgb: var(--color-error-rgb, 233, 50, 45); + --nc-color-error-hover: var(--color-error-hover, #ed5a56); + --nc-color-warning: var(--color-warning, #eca700); + --nc-color-warning-rgb: var(--color-warning-rgb, 236, 167, 0); + --nc-color-warning-hover: var(--color-warning-hover, #efb832); + --nc-color-success: var(--color-success, #46ba61); + --nc-color-success-rgb: var(--color-success-rgb, 70, 186, 97); + --nc-color-success-hover: var(--color-success-hover, #6ac780); + --nc-color-loading-light: var(--color-loading-light, #cccccc); + --nc-color-loading-dark: var(--color-loading-dark, #444444); + --nc-color-box-shadow-rgb: var(--color-box-shadow-rgb, 77, 77, 77); + --nc-color-box-shadow: var(--color-box-shadow, rgba(var(--nc-color-box-shadow-rgb), 0.5)); + --nc-color-border: var(--color-border, #ededed); + --nc-color-border-dark: var(--color-border-dark, #dbdbdb); + --nc-color-border-maxcontrast: var(--color-border-maxcontrast, #949494); + --nc-font-face: var(--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'); + --nc-default-font-size: var(--default-font-size, 15px); + --nc-default-line-height: var(--default-line-height, 24px); + --nc-animation-quick: var(--animation-quick, 100ms); + --nc-animation-slow: var(--animation-slow, 300ms); + --nc-border-radius: var(--border-radius, 3px); + --nc-border-radius-large: var(--border-radius-large, 10px); + --nc-border-radius-pill: var(--border-radius-pill, 100px); + --nc-default-grid-baseline: var(--default-grid-baseline, 4px); + --nc-navigation-width: var(--navigation-width, 300px); + --nc-sidebar-min-width: var(--sidebar-min-width, 300px); + --nc-sidebar-max-width: var(--sidebar-max-width, 500px); + --nc-list-min-width: var(--list-min-width, 200px); + --nc-list-max-width: var(--list-max-width, 300px); + --nc-breakpoint-mobile: var(--breakpoint-mobile, 1024px); + --nc-color-primary: var(--color-primary, #00639a); + --nc-color-primary-default: var(--color-primary-default, #0082c9); + --nc-color-primary-text: var(--color-primary-text, #ffffff); + --nc-color-primary-hover: var(--color-primary-hover, #3282ae); + --nc-color-primary-light: var(--color-primary-light, #e5eff4); + --nc-color-primary-light-text: var(--color-primary-light-text, #00273d); + --nc-color-primary-light-hover: var(--color-primary-light-hover, #dbe4e9); + --nc-color-primary-text-dark: var(--color-primary-text-dark, #ededed); + --nc-color-primary-element: var(--color-primary-element, #00639a); + --nc-color-primary-element-text: var(--color-primary-element-text, #ffffff); + --nc-color-primary-element-hover: var(--color-primary-element-hover, #3282ae); + --nc-color-primary-element-light: var(--color-primary-element-light, #e5eff4); + --nc-color-primary-element-light-text: var(--color-primary-element-light-text, #00273d); + --nc-color-primary-element-light-hover: var(--color-primary-element-light-hover, #dbe4e9); + --nc-color-primary-element-text-dark: var(--color-primary-element-text-dark, #ededed); } @media (prefers-color-scheme: dark) { - :not([data-themes~="light"]) { - --nc-color-main-background: var(--color-main-background, #171717); - --nc-color-main-background-rgb: var(--color-main-background-rgb, 23, 23, 23); - --nc-color-main-background-blur: var(--color-main-background-blur, rgba(var(--nc-color-main-background-rgb), .8)); - --nc-filter-background-blur: var(--filter-background-blur, blur(25px)); - --nc-color-background-hover: var(--color-background-hover, #212121); - --nc-color-background-dark: var(--color-background-dark, #292929); - --nc-color-background-darker: var(--color-background-darker, #3b3b3b); - --nc-color-placeholder-light: var(--color-placeholder-light, #313131); - --nc-color-placeholder-dark: var(--color-placeholder-dark, #4a4a4a); - --nc-color-main-text: var(--color-main-text, #D8D8D8); - --nc-color-text-light: var(--color-text-light, #bfbfbf); - --nc-color-text-lighter: var(--color-text-lighter, #a5a5a5); - --nc-color-text-maxcontrast: var(--color-text-maxcontrast, #8c8c8c); - --nc-color-scrollbar: var(--color-scrollbar, #3d3d3d); - --nc-color-error: var(--color-error, #e9322d); - --nc-color-error-rgb: var(--color-error-rgb, 233, 50, 45); - --nc-color-error-hover: var(--color-error-hover, #ed5a56); - --nc-color-warning: var(--color-warning, #eca700); - --nc-color-warning-rgb: var(--color-warning-rgb, 236, 167, 0); - --nc-color-warning-hover: var(--color-warning-hover, #efb832); - --nc-color-success: var(--color-success, #46ba61); - --nc-color-success-rgb: var(--color-success-rgb, 70, 186, 97); - --nc-color-success-hover: var(--color-success-hover, #6ac780); - --nc-color-loading-light: var(--color-loading-light, #777); - --nc-color-loading-dark: var(--color-loading-dark, #CCC); - --nc-color-box-shadow-rgb: var(--color-box-shadow-rgb, 0, 0, 0); - --nc-color-box-shadow: var(--color-box-shadow, #000000); - --nc-color-border: var(--color-border, #292929); - --nc-color-border-dark: var(--color-border-dark, #3b3b3b); - --nc-color-border-maxcontrast: var(--color-border-maxcontrast, #646464); - --nc-font-face: var(--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'); - --nc-default-font-size: var(--default-font-size, 15px); - --nc-default-line-height: var(--default-line-height, 24px); - --nc-animation-quick: var(--animation-quick, 100ms); - --nc-animation-slow: var(--animation-slow, 300ms); - --nc-border-radius: var(--border-radius, 3px); - --nc-border-radius-large: var(--border-radius-large, 10px); - --nc-border-radius-pill: var(--border-radius-pill, 100px); - --nc-default-grid-baseline: var(--default-grid-baseline, 4px); - --nc-navigation-width: var(--navigation-width, 300px); - --nc-sidebar-min-width: var(--sidebar-min-width, 300px); - --nc-sidebar-max-width: var(--sidebar-max-width, 500px); - --nc-list-min-width: var(--list-min-width, 200px); - --nc-list-max-width: var(--list-max-width, 300px); - --nc-breakpoint-mobile: var(--breakpoint-mobile, 1024px); - --nc-color-primary: var(--color-primary, #00639a); - --nc-color-primary-default: var(--color-primary-default, #0082c9); - --nc-color-primary-text: var(--color-primary-text, #ffffff); - --nc-color-primary-hover: var(--color-primary-hover, #04537f); - --nc-color-primary-light: var(--color-primary-light, #141e24); - --nc-color-primary-light-text: var(--color-primary-light-text, #99c0d6); - --nc-color-primary-light-hover: var(--color-primary-light-hover, #1d272d); - --nc-color-primary-text-dark: var(--color-primary-text-dark, #ededed); - --nc-color-primary-element: var(--color-primary-element, #00639a); - --nc-color-primary-element-text: var(--color-primary-element-text, #ffffff); - --nc-color-primary-element-hover: var(--color-primary-element-hover, #04537f); - --nc-color-primary-element-light: var(--color-primary-element-light, #141e24); - --nc-color-primary-element-light-text: var(--color-primary-element-light-text, #99c0d6); - --nc-color-primary-element-light-hover: var(--color-primary-element-light-hover, #1d272d); - --nc-color-primary-element-text-dark: var(--color-primary-element-text-dark, #ededed); - } + :not([data-themes~="light"]) { + --nc-color-main-background: var(--color-main-background, #171717); + --nc-color-main-background-rgb: var(--color-main-background-rgb, 23, 23, 23); + --nc-color-main-background-blur: var(--color-main-background-blur, rgba(var(--nc-color-main-background-rgb), .8)); + --nc-filter-background-blur: var(--filter-background-blur, blur(25px)); + --nc-color-background-hover: var(--color-background-hover, #212121); + --nc-color-background-dark: var(--color-background-dark, #292929); + --nc-color-background-darker: var(--color-background-darker, #3b3b3b); + --nc-color-placeholder-light: var(--color-placeholder-light, #313131); + --nc-color-placeholder-dark: var(--color-placeholder-dark, #4a4a4a); + --nc-color-main-text: var(--color-main-text, #D8D8D8); + --nc-color-text-light: var(--color-text-light, #bfbfbf); + --nc-color-text-lighter: var(--color-text-lighter, #a5a5a5); + --nc-color-text-maxcontrast: var(--color-text-maxcontrast, #8c8c8c); + --nc-color-scrollbar: var(--color-scrollbar, #3d3d3d); + --nc-color-error: var(--color-error, #e9322d); + --nc-color-error-rgb: var(--color-error-rgb, 233, 50, 45); + --nc-color-error-hover: var(--color-error-hover, #ed5a56); + --nc-color-warning: var(--color-warning, #eca700); + --nc-color-warning-rgb: var(--color-warning-rgb, 236, 167, 0); + --nc-color-warning-hover: var(--color-warning-hover, #efb832); + --nc-color-success: var(--color-success, #46ba61); + --nc-color-success-rgb: var(--color-success-rgb, 70, 186, 97); + --nc-color-success-hover: var(--color-success-hover, #6ac780); + --nc-color-loading-light: var(--color-loading-light, #777); + --nc-color-loading-dark: var(--color-loading-dark, #CCC); + --nc-color-box-shadow-rgb: var(--color-box-shadow-rgb, 0, 0, 0); + --nc-color-box-shadow: var(--color-box-shadow, #000000); + --nc-color-border: var(--color-border, #292929); + --nc-color-border-dark: var(--color-border-dark, #3b3b3b); + --nc-color-border-maxcontrast: var(--color-border-maxcontrast, #646464); + --nc-font-face: var(--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'); + --nc-default-font-size: var(--default-font-size, 15px); + --nc-default-line-height: var(--default-line-height, 24px); + --nc-animation-quick: var(--animation-quick, 100ms); + --nc-animation-slow: var(--animation-slow, 300ms); + --nc-border-radius: var(--border-radius, 3px); + --nc-border-radius-large: var(--border-radius-large, 10px); + --nc-border-radius-pill: var(--border-radius-pill, 100px); + --nc-default-grid-baseline: var(--default-grid-baseline, 4px); + --nc-navigation-width: var(--navigation-width, 300px); + --nc-sidebar-min-width: var(--sidebar-min-width, 300px); + --nc-sidebar-max-width: var(--sidebar-max-width, 500px); + --nc-list-min-width: var(--list-min-width, 200px); + --nc-list-max-width: var(--list-max-width, 300px); + --nc-breakpoint-mobile: var(--breakpoint-mobile, 1024px); + --nc-color-primary: var(--color-primary, #00639a); + --nc-color-primary-default: var(--color-primary-default, #0082c9); + --nc-color-primary-text: var(--color-primary-text, #ffffff); + --nc-color-primary-hover: var(--color-primary-hover, #04537f); + --nc-color-primary-light: var(--color-primary-light, #141e24); + --nc-color-primary-light-text: var(--color-primary-light-text, #99c0d6); + --nc-color-primary-light-hover: var(--color-primary-light-hover, #1d272d); + --nc-color-primary-text-dark: var(--color-primary-text-dark, #ededed); + --nc-color-primary-element: var(--color-primary-element, #00639a); + --nc-color-primary-element-text: var(--color-primary-element-text, #ffffff); + --nc-color-primary-element-hover: var(--color-primary-element-hover, #04537f); + --nc-color-primary-element-light: var(--color-primary-element-light, #141e24); + --nc-color-primary-element-light-text: var(--color-primary-element-light-text, #99c0d6); + --nc-color-primary-element-light-hover: var(--color-primary-element-light-hover, #1d272d); + --nc-color-primary-element-text-dark: var(--color-primary-element-text-dark, #ededed); + } } /* #endregion */ @@ -159,23 +159,23 @@ /* #region icons */ #rl-app .iconcolor-green { - color: var(--nc-color-success) !important; + color: var(--nc-color-success) !important; } #rl-app .iconcolor-red { - color: var(--nc-color-error) !important; + color: var(--nc-color-error) !important; } #rl-app i.fontastic { - line-height: unset; + line-height: unset; } #rl-app [data-icon]::before { - vertical-align: -10%; + vertical-align: -10%; } #rl-app .drag-handle { - color: var(--nc-color-text-lighter); + color: var(--nc-color-text-lighter); } /* #endregion */ @@ -189,16 +189,16 @@ /* #region link */ :root { - --link-color: var(--nc-color-primary-element-light-text); + --link-color: var(--nc-color-primary-element-light-text); } #rl-app a[target="_blank"] { - color: var(--nc-color-primary-element-light-text); + color: var(--nc-color-primary-element-light-text); } #rl-app a[target="_blank"]:visited, #rl-app a[target="_blank"]:active { - color: var(--nc-color-primary-element); + color: var(--nc-color-primary-element); } /* #endregion */ @@ -206,20 +206,20 @@ /* #region scrollbar */ ::-webkit-scrollbar { - width: 12px; - height: 12px; + width: 12px; + height: 12px; } ::-webkit-scrollbar-thumb { - background: var(--nc-color-scrollbar); - border-radius: var(--nc-border-radius-large); - border: 2px solid transparent; - background-clip: content-box; + background: var(--nc-color-scrollbar); + border-radius: var(--nc-border-radius-large); + border: 2px solid transparent; + background-clip: content-box; } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track-piece { - background-color: transparent; + background-color: transparent; } /* #endregion */ @@ -227,24 +227,24 @@ /* #region resizer */ #rl-app .resizer { - opacity: 1; - background-color: unset; - border-right: solid 1px var(--nc-color-border); + opacity: 1; + background-color: unset; + border-right: solid 1px var(--nc-color-border); } ::-webkit-resizer { - border: 10px solid transparent; - border-radius: var(--nc-border-radius); - border-bottom-color: var(--nc-color-border-dark); + border: 10px solid transparent; + border-radius: var(--nc-border-radius); + border-bottom-color: var(--nc-color-border-dark); } ::-webkit-resizer { - border-right-color: var(--nc-color-border-dark); + border-right-color: var(--nc-color-border-dark); } [dir="rtl"] ::-webkit-resizer { - border-right-color: transparent; - border-left-color: var(--nc-color-border-dark); + border-right-color: transparent; + border-left-color: var(--nc-color-border-dark); } /* #endregion */ @@ -252,10 +252,10 @@ /* #region meter */ #rl-app meter::-webkit-meter-bar { - background-color: var(--nc-color-border-dark); - border-color: var(--nc-color-border-dark); - border-width: 2px; - height: 10px; + background-color: var(--nc-color-border-dark); + border-color: var(--nc-color-border-dark); + border-width: 2px; + height: 10px; } /* #endregion */ @@ -263,11 +263,11 @@ /* #region horizontal rule */ :root { - --hr-color: var(--nc-color-border-dark); + --hr-color: var(--nc-color-border-dark); } #rl-app hr { - border-color: var(--nc-color-border-dark); + border-color: var(--nc-color-border-dark); } /* #endregion */ @@ -276,21 +276,21 @@ #rl-app [data-rainloopErrorTip]::before, #rl-app .help-block span { - border: 1px solid var(--nc-color-border); - border-radius: var(--nc-border-radius); - box-shadow: 0 0 2px var(--nc-color-box-shadow); - background-color: var(--nc-color-background-dark); - font-size: 13px; - color: unset; - left: 10px; - right: unset; - padding: 5px; - margin: 7px; + border: 1px solid var(--nc-color-border); + border-radius: var(--nc-border-radius); + box-shadow: 0 0 2px var(--nc-color-box-shadow); + background-color: var(--nc-color-background-dark); + font-size: 13px; + color: unset; + left: 10px; + right: unset; + padding: 5px; + margin: 7px; } #rl-app [data-rainloopErrorTip]::before { - color: var(--nc-color-error); - font-weight: 700; + color: var(--nc-color-error); + font-weight: 700; } /* #endregion */ @@ -298,52 +298,52 @@ /* #region alert */ #rl-app .alert { - text-shadow: unset; - border: unset; - color: var(--nc-color-main-text); - background-color: rgba(var(--nc-color-warning-rgb), 0.1); - border-inline-start: 4px solid var(--nc-color-warning); - border-radius: var(--nc-border-radius); - margin: 1rem; - padding: 1rem; + text-shadow: unset; + border: unset; + color: var(--nc-color-main-text); + background-color: rgba(var(--nc-color-warning-rgb), 0.1); + border-inline-start: 4px solid var(--nc-color-warning); + border-radius: var(--nc-border-radius); + margin: 1rem; + padding: 1rem; } #rl-app .alert h4 { - font-weight: bold; - font-size: 20px; - margin-top: unset; - margin-bottom: 12px; - line-height: 30px; - color: var(--nc-color-text-light); + font-weight: bold; + font-size: 20px; + margin-top: unset; + margin-bottom: 12px; + line-height: 30px; + color: var(--nc-color-text-light); } #rl-app .alert.alert-info { - background-color: var(--nc-color-background-dark); - border-color: var(--nc-color-background-darker); + background-color: var(--nc-color-background-dark); + border-color: var(--nc-color-background-darker); } #rl-app .alert.alert-warning { - background-color: rgba(var(--nc-color-warning-rgb), 0.1); - border-color: var(--nc-color-warning); + background-color: rgba(var(--nc-color-warning-rgb), 0.1); + border-color: var(--nc-color-warning); } #rl-app .alert.alert-success { - background-color: rgba(var(--nc-color-success-rgb), 0.1); - border-color: var(--nc-color-success); + background-color: rgba(var(--nc-color-success-rgb), 0.1); + border-color: var(--nc-color-success); } #rl-app .alert.alert-error { - background-color: rgba(var(--nc-color-error-rgb), 0.1); - border-color: var(--nc-color-error); + background-color: rgba(var(--nc-color-error-rgb), 0.1); + border-color: var(--nc-color-error); } #rl-app .alert .close { - top: -0.6rem; - right: unset; + top: -0.6rem; + right: unset; } #rl-app .alert br { - display: none; + display: none; } /* #endregion */ @@ -353,18 +353,18 @@ #rl-app .btn, #rl-app button, #rl-app button.btn:not(.button-vue) { - min-height: 36px; - height: 36px; - box-sizing: border-box; - padding: 8px 14px; - line-height: 20px; - color: var(--nc-color-main-text); - background-color: var(--nc-color-background-dark); - border: 1px solid var(--nc-color-border-dark) !important; - border-radius: var(--nc-border-radius-pill); - font-size: var(--nc-default-font-size); - text-shadow: none; - box-shadow: none; + min-height: 36px; + height: 36px; + box-sizing: border-box; + padding: 8px 14px; + line-height: 20px; + color: var(--nc-color-main-text); + background-color: var(--nc-color-background-dark); + border: 1px solid var(--nc-color-border-dark) !important; + border-radius: var(--nc-border-radius-pill); + font-size: var(--nc-default-font-size); + text-shadow: none; + box-shadow: none; } #rl-app .btn:hover, @@ -378,66 +378,66 @@ #rl-app span.fontastic:hover, #rl-app span.fontastic:focus, #rl-app span.fontastic:active { - outline: none; - opacity: unset; + outline: none; + opacity: unset; } #rl-app .btn.fontastic, #rl-app button.fontastic { - border-radius: var(--nc-border-radius-large); + border-radius: var(--nc-border-radius-large); } #rl-app .btn.btn-thin, #rl-app button.btn-thin { - padding-right: 9px; - padding-left: 9px; + padding-right: 9px; + padding-left: 9px; } #rl-app .btn.btn-transparent, #rl-app button.btn-transparent { - background: unset !important; - border: unset !important; - opacity: 0.6; + background: unset !important; + border: unset !important; + opacity: 0.6; } #rl-app .btn.btn-warning, #rl-app button.btn-warning { - color: var(--nc-color-primary-element-text); - background-color: var(--nc-color-warning); - border-color: var(--nc-color-warning) !important; + color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-warning); + border-color: var(--nc-color-warning) !important; } #rl-app .btn.btn-warning:hover, #rl-app .btn.btn-warning:focus, #rl-app button.btn-warning:hover, #rl-app button.btn-warning:focus { - color: var(--nc-color-primary-element-text); - background-color: var(--nc-color-warning-hover); - border-color: var(--nc-color-warning-hover) !important; + color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-warning-hover); + border-color: var(--nc-color-warning-hover) !important; } #rl-app .btn.btn-danger, #rl-app button.btn-danger { - color: var(--nc-color-primary-element-text); - background-color: var(--nc-color-error); - border-color: var(--nc-color-error) !important; + color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-error); + border-color: var(--nc-color-error) !important; } #rl-app .btn.btn-danger:hover, #rl-app .btn.btn-danger:focus, #rl-app button.btn-danger:hover, #rl-app button.btn-danger:focus { - color: var(--nc-color-primary-element-text); - background-color: var(--nc-color-error-hover); - border-color: var(--nc-color-error-hover) !important; + color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-error-hover); + border-color: var(--nc-color-error-hover) !important; } #rl-app .btn.btn-success, #rl-app button.btn-success, #rl-app button.btn.buttonLogin { - color: var(--nc-color-primary-element-text); - background-color: var(--nc-color-primary-element); - border-color: var(--nc-color-primary-element) !important; + color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-primary-element); + border-color: var(--nc-color-primary-element) !important; } #rl-app .btn.btn-success:hover, @@ -446,23 +446,23 @@ #rl-app button.btn-success:focus, #rl-app button.btn.buttonLogin:hover, #rl-app button.btn.buttonLogin:focus { - color: var(--nc-color-primary-element-text); - background-color: var(--nc-color-primary-element-hover); - border-color: var(--nc-color-primary-element-hover) !important; + color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-primary-element-hover); + border-color: var(--nc-color-primary-element-hover) !important; } #rl-app span.fontastic { - padding: 6px; - height: fit-content; - border-radius: var(--nc-border-radius); + padding: 6px; + height: fit-content; + border-radius: var(--nc-border-radius); } #rl-app span.fontastic:hover { - background-color: var(--nc-color-background-hover); + background-color: var(--nc-color-background-hover); } #rl-app span.fontastic:active { - background-color: var(--nc-color-primary-light); + background-color: var(--nc-color-primary-light); } #rl-app .btn.disabled, .btn[disabled], @@ -477,8 +477,8 @@ #rl-app span.fontastic.disabled:hover, span.fontastic[disabled]:hover, #rl-app span.fontastic.disabled:focus, span.fontastic[disabled]:focus, #rl-app span.fontastic.disabled:active, span.fontastic[disabled]:active { - opacity: .5; - filter: saturate(0.7); + opacity: .5; + filter: saturate(0.7); } #rl-app .btn:not(.disabled, [disabled]):hover, @@ -487,7 +487,7 @@ #rl-app button:not(.disabled, [disabled]):focus, #rl-app span.fontastic:not(.disabled, [disabled]):hover, #rl-app span.fontastic:not(.disabled, [disabled]):focus { - border-color: var(--nc-color-primary-element) !important; + border-color: var(--nc-color-primary-element) !important; } #rl-app .btn:not(.disabled, [disabled]):active, @@ -496,8 +496,8 @@ #rl-app button:not(.disabled, [disabled]).active, #rl-app span.fontastic:not(.disabled, [disabled]):active, #rl-app span.fontastic:not(.disabled, [disabled]).active { - background-color: var(--nc-color-main-background); - color: var(--nc-color-text-light); + background-color: var(--nc-color-main-background); + color: var(--nc-color-text-light); } /* #endregion */ @@ -505,115 +505,115 @@ /* #region button group */ #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) { - margin-right: 0.5px; + margin-right: 0.5px; } /* fallback */ #rl-app .btn-group .btn:first-of-type { - margin-right: 0.5px; + margin-right: 0.5px; } #rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) { - margin-left: 0.5px; + margin-left: 0.5px; } /* fallback */ #rl-app .btn-group .btn:last-of-type { - margin-left: 0.5px; + margin-left: 0.5px; } #rl-app .btn-group .btn:nth-child(n+2 of :not([style*="display: none;"])):nth-last-child(n+2 of :not([style*="display: none;"])) { - border-radius: 0 !important; - margin-right: 0.5px; - margin-left: 0.5px; + border-radius: 0 !important; + margin-right: 0.5px; + margin-left: 0.5px; } /* fallback */ #rl-app .btn-group .btn:not(:first-of-type):not(:last-of-type) { - border-radius: 0; - margin: 0 0.5px; + border-radius: 0; + margin: 0 0.5px; } #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) { - border-radius: 0 !important; - border-top-left-radius: var(--nc-border-radius-pill) !important; - border-bottom-left-radius: var(--nc-border-radius-pill) !important; + border-radius: 0 !important; + border-top-left-radius: var(--nc-border-radius-pill) !important; + border-bottom-left-radius: var(--nc-border-radius-pill) !important; } /* fallback */ #rl-app .btn-group .btn:first-of-type, [dir="rtl"] #rl-app .btn-group .btn:last-of-type { - border-radius: 0; - border-top-left-radius: var(--nc-border-radius-pill); - border-bottom-left-radius: var(--nc-border-radius-pill); + border-radius: 0; + border-top-left-radius: var(--nc-border-radius-pill); + border-bottom-left-radius: var(--nc-border-radius-pill); } #rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) { - border-radius: 0 !important; - border-top-right-radius: var(--nc-border-radius-pill) !important; - border-bottom-right-radius: var(--nc-border-radius-pill) !important; + border-radius: 0 !important; + border-top-right-radius: var(--nc-border-radius-pill) !important; + border-bottom-right-radius: var(--nc-border-radius-pill) !important; } /* fallback */ #rl-app .btn-group .btn:last-of-type, [dir="rtl"] #rl-app .btn-group .btn:first-of-type { - border-radius: 0; - border-top-right-radius: var(--nc-border-radius-pill); - border-bottom-right-radius: var(--nc-border-radius-pill); + border-radius: 0; + border-top-right-radius: var(--nc-border-radius-pill); + border-bottom-right-radius: var(--nc-border-radius-pill); } #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) { - border-radius: var(--nc-border-radius-pill) !important; + border-radius: var(--nc-border-radius-pill) !important; } /* fallback */ #rl-app .btn-group .btn:first-of-type:last-of-type, [dir="rtl"] #rl-app .btn-group .btn:first-of-type:last-of-type { - border-radius: var(--nc-border-radius-pill) !important; + border-radius: var(--nc-border-radius-pill) !important; } #rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .btn-group .btn.fontastic:nth-last-child(1 of :not([style*="display: none;"])) { - border-radius: 0 !important; - border-top-left-radius: var(--nc-border-radius-large) !important; - border-bottom-left-radius: var(--nc-border-radius-large) !important; + border-radius: 0 !important; + border-top-left-radius: var(--nc-border-radius-large) !important; + border-bottom-left-radius: var(--nc-border-radius-large) !important; } /* fallback */ #rl-app .btn-group .btn.fontastic:first-of-type, [dir="rtl"] #rl-app .btn-group .btn.fontastic:last-of-type { - border-radius: 0; - border-top-left-radius: var(--nc-border-radius-large); - border-bottom-left-radius: var(--nc-border-radius-large); + border-radius: 0; + border-top-left-radius: var(--nc-border-radius-large); + border-bottom-left-radius: var(--nc-border-radius-large); } #rl-app .btn-group .btn.fontastic:nth-last-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])) { - border-radius: 0 !important; - border-top-right-radius: var(--nc-border-radius-large) !important; - border-bottom-right-radius: var(--nc-border-radius-large) !important; + border-radius: 0 !important; + border-top-right-radius: var(--nc-border-radius-large) !important; + border-bottom-right-radius: var(--nc-border-radius-large) !important; } /* fallback */ #rl-app .btn-group .btn.fontastic:last-of-type, [dir="rtl"] #rl-app .btn-group .btn.fontastic:first-of-type { - border-radius: 0; - border-top-right-radius: var(--nc-border-radius-large); - border-bottom-right-radius: var(--nc-border-radius-large); + border-radius: 0; + border-top-right-radius: var(--nc-border-radius-large); + border-bottom-right-radius: var(--nc-border-radius-large); } #rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) { - border-radius: var(--nc-border-radius-large) !important; + border-radius: var(--nc-border-radius-large) !important; } /* fallback */ #rl-app .btn-group .btn.fontastic:first-of-type:last-of-type, [dir="rtl"] #rl-app .btn-group .btn.fontastic:first-of-type:last-of-type { - border-radius: var(--nc-border-radius-large) !important; + border-radius: var(--nc-border-radius-large) !important; } /* #endregion */ @@ -624,15 +624,15 @@ #rl-app .select, #rl-app .emailaddresses, #rl-app input:not([type="checkbox"]) { - padding: 0 12px; - font-size: var(--nc-default-font-size); - color: var(--nc-color-main-text); - background-color: unset; - height: 36px; - border: 2px solid var(--nc-color-border-maxcontrast); - border-radius: var(--nc-border-radius-large); - line-height: 32px; - outline: none; + padding: 0 12px; + font-size: var(--nc-default-font-size); + color: var(--nc-color-main-text); + background-color: unset; + height: 36px; + border: 2px solid var(--nc-color-border-maxcontrast); + border-radius: var(--nc-border-radius-large); + line-height: 32px; + outline: none; } #rl-app select:hover, @@ -650,7 +650,7 @@ #rl-app input:not([type="checkbox"]):hover, #rl-app input:not([type="checkbox"]):active, #rl-app input:not([type="checkbox"]):focus { - border-color: var(--nc-color-primary-element); + border-color: var(--nc-color-primary-element); } /* #endregion */ @@ -658,37 +658,37 @@ /* #region input */ #rl-app input { - box-shadow: none; + box-shadow: none; } #rl-app input[type="search"]::-webkit-search-decoration, #rl-app input[type="search"]::-webkit-search-cancel-button, #rl-app input[type="search"]::-webkit-search-results-button, #rl-app input[type="search"]::-webkit-search-results-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } #rl-app input::-webkit-outer-spin-button, #rl-app input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; + -webkit-appearance: none; + margin: 0; } #rl-app input[type=number] { - appearance: textfield; - margin: 0; - /* ? margin: 0 5px 0 0; */ + appearance: textfield; + margin: 0; + /* ? margin: 0 5px 0 0; */ } #rl-app .search-input-wrp a { - position: absolute; - top: 2px; - right: 1px; - min-width: unset; - min-height: unset; - height: 32px; - font-size: 20px; - line-height: 30px; + position: absolute; + top: 2px; + right: 1px; + min-width: unset; + min-height: unset; + height: 32px; + font-size: 20px; + line-height: 30px; } /* #endregion */ @@ -696,67 +696,67 @@ /* #region checkbox */ #rl-app .e-checkbox.material-design { - width: fit-content !important; - width: -moz-fit-content !important; - display: flex; - position: relative; - align-items: center; - user-select: none; - height: 44px; - border-radius: 44px; - padding: 0 14px; - margin: 0; + width: fit-content !important; + width: -moz-fit-content !important; + display: flex; + position: relative; + align-items: center; + user-select: none; + height: 44px; + border-radius: 44px; + padding: 0 14px; + margin: 0; } #rl-app .e-checkbox.material-design:hover, #rl-app .e-checkbox.material-design:focus-within { - background-color: var(--nc-color-primary-light); - outline: none; + background-color: var(--nc-color-primary-light); + outline: none; } #rl-app .e-checkbox.material-design:focus { - outline: none; + outline: none; } #rl-app .e-checkbox input[type="checkbox"] { - display: none; + display: none; } input[type="checkbox"] { - background-color: transparent; - -webkit-appearance: none; - appearance: none; + background-color: transparent; + -webkit-appearance: none; + appearance: none; } #rl-app .e-checkbox.material-design>div { - position: relative; - width: 18px; - top: 2px; + position: relative; + width: 18px; + top: 2px; } #rl-app input[type="checkbox"], #rl-app .e-checkbox.material-design input+div { - position: unset; - height: 18px !important; - width: 18px !important; - min-width: 18px !important; - flex-shrink: 0 !important; - border: 2px solid var(--nc-color-primary-element); - border-radius: 2px; - box-sizing: border-box; - animation: none; - transform: unset; + position: unset; + height: 18px !important; + width: 18px !important; + min-width: 18px !important; + flex-shrink: 0 !important; + border: 2px solid var(--nc-color-primary-element); + border-radius: 2px; + box-sizing: border-box; + animation: none; + transform: unset; } #rl-app input[type="checkbox"]:checked, #rl-app .e-checkbox.material-design input:checked+div { - --nc-svg-checked: url("data:image/svg+xml,"); - -webkit-mask-image: var(--nc-svg-checked); - mask-image: var(--nc-svg-checked); - background: var(--nc-color-primary-element); - border-width: 0; - animation: none; - transform: unset; + --nc-svg-checked: url("data:image/svg+xml,"); + -webkit-mask-image: var(--nc-svg-checked); + mask-image: var(--nc-svg-checked); + background: var(--nc-color-primary-element); + border-width: 0; + animation: none; + transform: unset; } /* #endregion */ @@ -766,8 +766,8 @@ input[type="checkbox"] { #rl-app select option, #rl-app select::-webkit-scrollbar-corner, #rl-app select::-webkit-scrollbar-track-piece { - background-color: var(--nc-color-main-background); - color: var(--nc-color-main-text); + background-color: var(--nc-color-main-background); + color: var(--nc-color-main-text); } /* #endregion */ @@ -775,74 +775,74 @@ input[type="checkbox"] { /* #region select email address */ #rl-app .emailaddresses { - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 0 0 4px; - width: 100%; - height: auto; - min-height: 44px; - max-height: calc(44px*2); - line-height: var(--nc-vs-line-height); - background-color: var(--nc-vs-search-input-bg); - white-space: normal; + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 0 0 4px; + width: 100%; + height: auto; + min-height: 44px; + max-height: calc(44px*2); + line-height: var(--nc-vs-line-height); + background-color: var(--nc-vs-search-input-bg); + white-space: normal; } #rl-app .emailaddresses.emailaddresses-focused { - border: 2px solid var(--nc-color-primary-element); + border: 2px solid var(--nc-color-primary-element); } #rl-app .emailaddresses li { - margin: 4px 2px 0; + margin: 4px 2px 0; } #rl-app .emailaddresses li.emailaddresses-input>input[type="text"], #rl-app .emailaddresses li.emailaddresses-input>input[type="text"]:focus, #rl-app .emailaddresses li.emailaddresses-input>input[type="text"]:hover { - padding: 0 7px; - height: 36px; - max-width: 390px; - color: var(--nc-vs-search-input-color); - font-size: var(--nc-vs-font-size); - line-height: var(--nc-vs-line-height); + padding: 0 7px; + height: 36px; + max-width: 390px; + color: var(--nc-vs-search-input-color); + font-size: var(--nc-vs-font-size); + line-height: var(--nc-vs-line-height); } #rl-app .emailaddresses li[draggable] { - display: flex; - align-items: center; - padding: 0 0.5em; - min-height: 36px; - line-height: var(--nc-vs-line-height); - color: var(--nc-vs-selected-color); - border: 0; - border-radius: var(--nc-vs-border-radius); - background-color: var(--nc-vs-selected-bg); - box-shadow: none; + display: flex; + align-items: center; + padding: 0 0.5em; + min-height: 36px; + line-height: var(--nc-vs-line-height); + color: var(--nc-vs-selected-color); + border: 0; + border-radius: var(--nc-vs-border-radius); + background-color: var(--nc-vs-selected-bg); + box-shadow: none; } #rl-app .emailaddresses li[draggable]>span { - max-width: calc(100vw - 140px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + max-width: calc(100vw - 140px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } #rl-app .emailaddresses li[draggable]>a.ficon { - position: unset; - color: transparent; - text-shadow: 0 0 0 var(--nc-vs-controls-color); - background: none; - border: 0; - cursor: pointer; - display: inline-flex; - margin-left: 4px; - padding: 0; + position: unset; + color: transparent; + text-shadow: 0 0 0 var(--nc-vs-controls-color); + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin-left: 4px; + padding: 0; } @media screen and (max-width: 480px) { - #rl-app .emailaddresses li.emailaddresses-input>input[type="text"] { - max-width: calc(100vw - 116px) !important; - } + #rl-app .emailaddresses li.emailaddresses-input>input[type="text"] { + max-width: calc(100vw - 116px) !important; + } } /* #endregion */ @@ -850,24 +850,24 @@ input[type="checkbox"] { /* #region textarea */ #rl-app .squire-toolbar { - height: 50px; - padding: 5px; - box-sizing: content-box; - border: none; + height: 50px; + padding: 5px; + box-sizing: content-box; + border: none; } #rl-app textarea, #rl-app div[contenteditable], #rl-app .squire-wysiwyg, #rl-app .squire-plain { - padding: 8px 12px; - margin: unset; - font-size: var(--nc-default-font-size); - color: var(--nc-color-main-text); - background-color: unset; - outline: none; - border: 2px solid var(--nc-color-border-dark); - border-radius: var(--nc-border-radius-large); + padding: 8px 12px; + margin: unset; + font-size: var(--nc-default-font-size); + color: var(--nc-color-main-text); + background-color: unset; + outline: none; + border: 2px solid var(--nc-color-border-dark); + border-radius: var(--nc-border-radius-large); } #rl-app textarea:hover, @@ -882,7 +882,7 @@ input[type="checkbox"] { #rl-app .squire-plain:hover, #rl-app .squire-plain:active, #rl-app .squire-plain:focus { - border-color: var(--nc-color-primary-element); + border-color: var(--nc-color-primary-element); } /* #endregion */ @@ -890,62 +890,62 @@ input[type="checkbox"] { /* #region dropdown */ #rl-app .dropdown.show { - box-shadow: none; + box-shadow: none; } #rl-app .dropdown-menu { - background-color: var(--nc-color-main-background); - filter: drop-shadow(0 1px 5px var(--nc-color-box-shadow)); - border-radius: var(--nc-border-radius-large); - color: var(--nc-color-main-text); - padding: 4px; + background-color: var(--nc-color-main-background); + filter: drop-shadow(0 1px 5px var(--nc-color-box-shadow)); + border-radius: var(--nc-border-radius-large); + color: var(--nc-color-main-text); + padding: 4px; } #rl-app .dropdown-menu a { - background-color: unset; - color: unset; - height: 22px; - line-height: 22px; - border-radius: 3px; - margin: 2px; - box-sizing: content-box; - text-align: start; + background-color: unset; + color: unset; + height: 22px; + line-height: 22px; + border-radius: 3px; + margin: 2px; + box-sizing: content-box; + text-align: start; } #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 { - opacity: .5; - filter: saturate(0.7); + opacity: .5; + filter: saturate(0.7); } #rl-app .dropdown-menu li:not(.disabled)>a:hover, #rl-app .dropdown-menu li:not(.disabled)>a:focus { - background-color: var(--nc-color-background-hover); - color: unset; - opacity: unset; + background-color: var(--nc-color-background-hover); + color: unset; + opacity: unset; } #rl-app .dropdown-menu li:not(.disabled)>a:active { - background-color: var(--nc-color-primary-element-light); + background-color: var(--nc-color-primary-element-light); } #rl-app .dropdown-menu *+.dividerbar { - border-color: var(--nc-color-border); + border-color: var(--nc-color-border); } #rl-app .dropdown-menu::-webkit-scrollbar-track-piece { - background-color: inherit; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; + background-color: inherit; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; } .rl-left-panel-disabled #rl-app .dropdown-menu:not(.right-edge) { - position: fixed; - top: auto; - left: 5px; - right: auto; + position: fixed; + top: auto; + left: 5px; + right: auto; } /* #endregion */ @@ -953,41 +953,41 @@ input[type="checkbox"] { /* #region dropdown account */ #rl-app #V-SystemDropDown { - margin: 2px 5px 0 5px; + margin: 2px 5px 0 5px; } #rl-app #V-SystemDropDown .btn-toolbar { - border: solid 1px var(--nc-color-border-dark); - border-radius: var(--nc-border-radius-large); - height: 36px; - padding: 2px; - display: flex; - flex-direction: row; - align-items: center; - box-sizing: content-box; + border: solid 1px var(--nc-color-border-dark); + border-radius: var(--nc-border-radius-large); + height: 36px; + padding: 2px; + display: flex; + flex-direction: row; + align-items: center; + box-sizing: content-box; } #rl-app #V-SystemDropDown .accountPlace { - background: unset; - color: unset; - text-shadow: none; - border-color: var(--nc-color-border); + background: unset; + color: unset; + text-shadow: none; + border-color: var(--nc-color-border); } #rl-app #V-SystemDropDown #top-system-dropdown-id { - background-color: unset; - border: unset !important; - border-radius: var(--nc-border-radius-large) !important; - height: 20px; + background-color: unset; + border: unset !important; + border-radius: var(--nc-border-radius-large) !important; + height: 20px; } #rl-app #V-SystemDropDown #top-system-dropdown-id:hover, #rl-app #V-SystemDropDown #top-system-dropdown-id:focus { - background-color: var(--nc-color-background-hover); + background-color: var(--nc-color-background-hover); } #rl-app #V-SystemDropDown #top-system-dropdown-id:active { - background-color: var(--nc-color-background-dark); + background-color: var(--nc-color-background-dark); } /* #endregion */ @@ -995,36 +995,36 @@ input[type="checkbox"] { /* #region tab */ #rl-app .tabs>[id^=tab]:checked+label { - background-color: var(--nc-color-main-background); - border-color: var(--nc-color-primary-element); - border-bottom-color: transparent; + background-color: var(--nc-color-main-background); + border-color: var(--nc-color-primary-element); + border-bottom-color: transparent; } #rl-app .tabs>label { - margin: 0 2px -1px 2px; - border-radius: 0; - border-top-left-radius: var(--nc-border-radius); - border-top-right-radius: var(--nc-border-radius); - overflow-wrap: anywhere; + margin: 0 2px -1px 2px; + border-radius: 0; + border-top-left-radius: var(--nc-border-radius); + border-top-right-radius: var(--nc-border-radius); + overflow-wrap: anywhere; } #rl-app .tabs>label:hover { - border-color: transparent; - border-bottom-color: var(--nc-color-primary-element); - background-color: var(--nc-color-background-hover) + border-color: transparent; + border-bottom-color: var(--nc-color-primary-element); + background-color: var(--nc-color-background-hover) } #rl-app .tabs .tab-content { - border-top: solid 1px; - border-radius: 4px; - border-color: var(--nc-color-primary-element); + border-top: solid 1px; + border-radius: 4px; + border-color: var(--nc-color-primary-element); } @media screen and (max-width: 480px) { - #rl-app .tabs>label>i, - #rl-app .tabs>label::before { - display: none; - } + #rl-app .tabs>label>i, + #rl-app .tabs>label::before { + display: none; + } } /* #endregion */ @@ -1034,17 +1034,17 @@ input[type="checkbox"] { #rl-app .table td, #rl-app .table th, #rl-app .table-bordered { - border-color: var(--nc-color-border-dark); + border-color: var(--nc-color-border-dark); } #rl-app .table-hover tbody tr:hover td, #rl-app .table-hover tbody tr:hover th { - background-color: var(--nc-color-background-hover); + background-color: var(--nc-color-background-hover); } #rl-app .table-striped tbody tr:nth-child(odd) td, #rl-app .table-striped tbody tr:nth-child(odd) th { - background-color: var(--nc-color-background-dark); + background-color: var(--nc-color-background-dark); } /* #endregion */ @@ -1052,39 +1052,39 @@ input[type="checkbox"] { /* #region attachment */ #rl-app .attachmentItem { - background-color: var(--nc-color-background-dark); - border-radius: var(--nc-border-radius); - box-shadow: none; - padding: 2px; + background-color: var(--nc-color-background-dark); + border-radius: var(--nc-border-radius); + box-shadow: none; + padding: 2px; } #rl-app .attachmentItem:hover, #rl-app .attachmentItem:active { - background-color: var(--nc-color-background-darker); + background-color: var(--nc-color-background-darker); } #rl-app .attachmentItem:focus { - outline: none; + outline: none; } #rl-app .attachmentItem .iconProgress { - background-color: var(--nc-color-background-darker); + background-color: var(--nc-color-background-darker); } #rl-app .attachmentItem .iconBG { - font-weight: 700; - line-height: 48px; - font-size: unset; - text-shadow: unset; + font-weight: 700; + line-height: 48px; + font-size: unset; + text-shadow: unset; } #rl-app .attachmentItem .attachmentNameParent { - border-color: var(--nc-color-border-dark); + border-color: var(--nc-color-border-dark); } #rl-app .attachmentItem .iconMain, #rl-app .attachmentItem .iconPreview { - color: var(--nc-color-text-light); + color: var(--nc-color-text-light); } /* #endregion */ @@ -1100,63 +1100,63 @@ input[type="checkbox"] { /* #region app */ #rl-app { - color: var(--nc-color-main-text); - background-color: transparent; - font-family: var(--nc-font-face); - font-size: var(--nc-default-font-size); + color: var(--nc-color-main-text); + background-color: transparent; + font-family: var(--nc-font-face); + font-size: var(--nc-default-font-size); } #rl-app #rl-left { - background-color: var(--nc-color-main-background-blur, var(--nc-color-main-background)); - -webkit-backdrop-filter: var(--nc-filter-background-blur, none); - backdrop-filter: var(--nc-filter-background-blur, none); - border-color: var(--nc-color-border); - width: 300px; + background-color: var(--nc-color-main-background-blur, var(--nc-color-main-background)); + -webkit-backdrop-filter: var(--nc-filter-background-blur, none); + backdrop-filter: var(--nc-filter-background-blur, none); + border-color: var(--nc-color-border); + width: 300px; } html:not(.rl-left-panel-disabled) #rl-left { - max-width: var(--nc-sidebar-max-width); + max-width: var(--nc-sidebar-max-width); } html.rl-left-panel-disabled #rl-app #rl-left { - width: 65px !important; + width: 65px !important; } html.rl-mobile.rl-left-panel-disabled #rl-app #rl-left { - width: 0px !important; + width: 0px !important; } #rl-app #rl-right { - background-color: var(--nc-color-main-background); + background-color: var(--nc-color-main-background); } #rl-app::selection { - background-color: var(--nc-color-primary); - color: var(--nc-color-primary-text); + background-color: var(--nc-color-primary); + color: var(--nc-color-primary-text); } :not(#rl-app) ol, ul { - margin: unset; + margin: unset; } #rl-app .control-group { - margin-bottom: 0.5em; + margin-bottom: 0.5em; } #rl-app .form-horizontal .control-group { - display: flex; - align-items: center; - margin-left: 0; + display: flex; + align-items: center; + margin-left: 0; } #rl-app .form-horizontal .control-group { - margin-bottom: 1em; + margin-bottom: 1em; } @media screen and (max-width: 799px) { - #rl-app .form-horizontal .control-group>label { - text-align: right; - } + #rl-app .form-horizontal .control-group>label { + text-align: right; + } } /* #endregion */ @@ -1166,67 +1166,67 @@ html.rl-mobile.rl-left-panel-disabled #rl-app #rl-left { #rl-app #V-Login, #rl-app #rl-loading, #rl-app #rl-loading-error { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; - top: unset; - position: unset; - min-width: unset; - max-width: unset; - transform: unset; - text-shadow: none; - transition: none; + top: unset; + position: unset; + min-width: unset; + max-width: unset; + transform: unset; + text-shadow: none; + transition: none; - background-color: var(--nc-color-main-background-blur, var(--nc-color-main-background)); - -webkit-backdrop-filter: var(--nc-filter-background-blur, none); - backdrop-filter: var(--nc-filter-background-blur, none); + background-color: var(--nc-color-main-background-blur, var(--nc-color-main-background)); + -webkit-backdrop-filter: var(--nc-filter-background-blur, none); + backdrop-filter: var(--nc-filter-background-blur, none); - color: var(--nc-color-main-text); - width: 100%; - height: 100%; + color: var(--nc-color-main-text); + width: 100%; + height: 100%; } #rl-app .LoginView .descWrapper { - color: var(--nc-color-main-text); + color: var(--nc-color-main-text); } #rl-app .LoginView .alert { - position: unset; + position: unset; } #rl-app .LoginView form { - min-width: 250px; - max-width: 500px; - width: 90%; + min-width: 250px; + max-width: 500px; + width: 90%; - background-color: var(--nc-color-main-background); - border: unset; - border-radius: var(--nc-border-radius-large); - box-shadow: 0 0 10px var(--nc-color-box-shadow); - color: var(--nc-color-main-text); + background-color: var(--nc-color-main-background); + border: unset; + border-radius: var(--nc-border-radius-large); + box-shadow: 0 0 10px var(--nc-color-box-shadow); + color: var(--nc-color-main-text); } #rl-app .LoginView .controls>.fontastic:first-child { - padding: unset; - left: 10px; + padding: unset; + left: 10px; } #rl-app .LoginView .controls span.fontastic { - user-select: none; + user-select: none; } #rl-app .LoginView .controls span.fontastic:active, #rl-app .LoginView .controls span.fontastic:hover { - background: unset; + background: unset; } #rl-app #rl-loading[hidden], #rl-app #rl-loading-error[hidden], #rl-app .LoginView .alert[hidden] { - display: none; + display: none; } /* #endregion */ @@ -1234,71 +1234,71 @@ html.rl-mobile.rl-left-panel-disabled #rl-app #rl-left { /* #region side panel */ html.rl-left-panel-disabled #rl-app #rl-left:has(#V-SettingsMenu:not([hidden])) { - width: 250px !important; + width: 250px !important; } #rl-app #V-AdminPane>.b-toolbar, #rl-app #V-SettingsMenu>.b-toolbar { - top: 0; - left: 0; - height: auto !important; - padding-top: calc(var(--nc-default-grid-baseline) * 2) !important; - padding-bottom: calc(var(--nc-default-grid-baseline) * 2) !important; - font-weight: bold; + top: 0; + left: 0; + height: auto !important; + padding-top: calc(var(--nc-default-grid-baseline) * 2) !important; + padding-bottom: calc(var(--nc-default-grid-baseline) * 2) !important; + font-weight: bold; } #rl-app .b-folders .b-toolbar { - height: unset; - display: flex; - flex-direction: row; - padding: 8px; + height: unset; + display: flex; + flex-direction: row; + padding: 8px; } html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { - flex-direction: column; + flex-direction: column; } #rl-app .b-folders .b-toolbar .btn.buttonCompose, #rl-app .b-folders .b-toolbar .btn.buttonContacts, #rl-app .b-footer .btn { - box-sizing: border-box; - padding: 4px 14px; - line-height: 36px; - height: 44px; - min-width: fit-content; - width: stretch; - width: -moz-available; - width: -webkit-fill-available; - margin: 3px !important; + box-sizing: border-box; + padding: 4px 14px; + line-height: 36px; + height: 44px; + min-width: fit-content; + width: stretch; + width: -moz-available; + width: -webkit-fill-available; + margin: 3px !important; - font-size: var(--nc-default-font-size); + font-size: var(--nc-default-font-size); } #rl-app .b-folders .b-toolbar .btn.buttonCompose { - min-width: 16px; - max-width: 100%; - font-weight: bold; - box-sizing: content-box !important; + min-width: 16px; + max-width: 100%; + font-weight: bold; + box-sizing: content-box !important; } #rl-app .b-folders .b-toolbar .btn.buttonContacts { - width: 44px; - min-width: 44px; + width: 44px; + min-width: 44px; } #rl-app #V-AdminMenu nav, #rl-app #V-SettingsMenu nav, #rl-app .b-folders .b-content { - padding: calc(var(--nc-default-grid-baseline) * 2); + padding: calc(var(--nc-default-grid-baseline) * 2); } #rl-app .b-folders .b-content { - top: 60px; - bottom: 162px; + top: 60px; + bottom: 162px; } #rl-app .b-folders .b-content.show-on-panel-disabled { - bottom: 56px; + bottom: 56px; } #rl-app #V-AdminMenu nav a, @@ -1306,29 +1306,29 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app #V-SettingsMenu nav a, #rl-app #V-SettingsMenu>.b-toolbar, #rl-app .b-folders li a.selectable { - margin: 2px; - padding: 0 2em 0 15px; - height: 38px; - line-height: 38px !important; - border-radius: var(--nc-border-radius-pill); - color: unset; - border: none; + margin: 2px; + padding: 0 2em 0 15px; + height: 38px; + line-height: 38px !important; + border-radius: var(--nc-border-radius-pill); + color: unset; + border: none; } #rl-app #V-AdminMenu nav a, #rl-app #V-AdminPane>.b-toolbar, #rl-app #V-SettingsMenu nav a, #rl-app #V-SettingsMenu>.b-toolbar { - height: 44px; - min-height: 44px; - line-height: 44px !important; + height: 44px; + min-height: 44px; + line-height: 44px !important; } #rl-app #V-AdminMenu nav a.selected, #rl-app #V-SettingsMenu nav a.selected, #rl-app .b-folders li a.selectable.selected { - color: unset; - background-color: var(--nc-color-primary-light); + color: unset; + background-color: var(--nc-color-primary-light); } #rl-app #V-AdminMenu nav a:not(.selected):hover, @@ -1337,83 +1337,83 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app #V-SettingsMenu nav a:not(.selected):focus, #rl-app .b-folders li a.selectable:not(.selected):hover, #rl-app .b-folders li a.selectable:not(.selected):focus { - color: unset; - background-color: var(--nc-color-background-hover); + color: unset; + background-color: var(--nc-color-background-hover); } #rl-app .b-folders .b-folders-system a[data-unread]::after, #rl-app .b-folders .b-folders-user a[data-unread]::after { - display: block; - margin: 0; - padding: 2px 6px; - top: 50%; - transform: translateY(-50%); + display: block; + margin: 0; + padding: 2px 6px; + top: 50%; + transform: translateY(-50%); - color: var(--nc-color-primary-element); - background-color: var(--nc-color-primary-element-light); + color: var(--nc-color-primary-element); + background-color: var(--nc-color-primary-element-light); - font-size: 12px; - text-shadow: none; + font-size: 12px; + text-shadow: none; } html.rl-left-panel-disabled #rl-app .b-folders .b-folders-system a.selectable { - text-overflow: clip; + text-overflow: clip; } #rl-app .b-folders hr { - border-top: solid var(--nc-color-main-text); - border-radius: var(--nc-border-radius-pill); - opacity: .1; + border-top: solid var(--nc-color-main-text); + border-radius: var(--nc-border-radius-pill); + opacity: .1; } #rl-app .b-folders .search-input-wrp { - width: calc(100% - 20px); - margin: 5px 10px; - opacity: .7; + width: calc(100% - 20px); + margin: 5px 10px; + opacity: .7; } #rl-app .b-folders .search-input-wrp input { - width: 100%; + width: 100%; } #rl-app .b-footer.btn-toolbar.hide-mobile, #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled { - display: flex; - flex-direction: column; - align-content: stretch; - justify-content: flex-start; - height: unset; - box-sizing: border-box; + display: flex; + flex-direction: column; + align-content: stretch; + justify-content: flex-start; + height: unset; + box-sizing: border-box; } #rl-app .b-footer.btn-toolbar.hide-mobile, #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled { - margin: 0; - padding: 0; - bottom: 0; + margin: 0; + padding: 0; + bottom: 0; } #rl-app .b-footer.btn-toolbar { - overflow: unset; - padding: 3px; + overflow: unset; + padding: 3px; } #rl-app .b-footer.btn-toolbar .btn { - background: transparent; - border: unset !important; + background: transparent; + border: unset !important; } #rl-app .b-footer.btn-toolbar .btn { - text-align: left; - font-size: 22px; - user-select: none; + text-align: left; + font-size: 22px; + user-select: none; } #rl-app .b-footer.btn-toolbar .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])), #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])), [dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])):nth-last-child(1 of :not([style*="display: none;"])) { - border-radius: var(--nc-border-radius-pill) !important; + border-radius: var(--nc-border-radius-pill) !important; } /* fallback */ @@ -1421,81 +1421,81 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-folders-system a.selectable { #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic, [dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn, [dir="rtl"] #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic { - border-radius: var(--nc-border-radius-pill) !important; + border-radius: var(--nc-border-radius-pill) !important; } #rl-app .b-footer.btn-toolbar .btn:hover, #rl-app .b-footer.btn-toolbar .btn.fontastic:hover { - background-color: var(--nc-color-background-hover); + background-color: var(--nc-color-background-hover); } #rl-app .b-footer.btn-toolbar .btn:active, #rl-app .b-footer.btn-toolbar .btn.fontastic:active { - background-color: var(--nc-color-primary-light); + background-color: var(--nc-color-primary-light); } #rl-app .b-footer.btn-toolbar .btn:focus, #rl-app .b-footer.btn-toolbar .btn.fontastic:focus { - outline: none; + outline: none; } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn { - width: -webkit-fill-available; - width: -moz-available; - width: fill-available; - overflow: hidden; + width: -webkit-fill-available; + width: -moz-available; + width: fill-available; + overflow: hidden; } #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic { - background-color: var(--nc-color-main-background); + background-color: var(--nc-color-main-background); } #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after, [dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:before { - font-family: var(--nc-font-face); - font-size: var(--nc-default-font-size); - margin-left: 15px; + font-family: var(--nc-font-face); + font-size: var(--nc-default-font-size); + margin-left: 15px; } #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after { - position: absolute; + position: absolute; } [dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after { - position: unset; + position: unset; } #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after, [dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:before { - content: attr(title); - width: inherit; - overflow: hidden; - text-overflow: ellipsis; + content: attr(title); + width: inherit; + overflow: hidden; + text-overflow: ellipsis; } [dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after { - content: unset; + content: unset; } #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:before { - line-height: unset; + line-height: unset; } #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after { - content: attr(title); - width: inherit; - overflow: hidden; - text-overflow: ellipsis; + content: attr(title); + width: inherit; + overflow: hidden; + text-overflow: ellipsis; } html.rl-left-panel-disabled #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.fontastic:after, html.rl-left-panel-disabled #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after, html.rl-left-panel-disabled[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-toolbar .btn-group .btn.fontastic:before { - content: ''; + content: ''; } #rl-app #V-MailFolderList .b-footer .btn[data-bind*="toggleLeftPanel"] { - width: unset !important; + width: unset !important; } /* #endregion */ @@ -1504,23 +1504,23 @@ html.rl-left-panel-disabled[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-t #rl-app .messageList, #rl-app .messageView { - height: calc(100% - 65px); - margin: 0 5px; - border: none; - box-shadow: none !important; - background: var(--nc-color-main-background); + height: calc(100% - 65px); + margin: 0 5px; + border: none; + box-shadow: none !important; + background: var(--nc-color-main-background); } #rl-app #V-MailMessageList .btn-toolbar, #rl-app #V-MailMessageView .btn-toolbar { - padding: 10px; - margin-top: 5px; + padding: 10px; + margin-top: 5px; } /* fallback */ #rl-app #V-MailMessageList .btn-toolbar .btn-group .btn, #rl-app #V-MailMessageView .btn-toolbar .btn-group .btn { - border-radius: var(--nc-border-radius-large); + border-radius: var(--nc-border-radius-large); } /* #endregion */ @@ -1528,124 +1528,124 @@ html.rl-left-panel-disabled[dir="rtl"] #rl-app #V-MailFolderList .b-footer.btn-t /* #region message list */ #rl-app #V-MailMessageList { - overflow: unset; + overflow: unset; } #rl-app #V-MailMessageList .btn-toolbar { - background: var(--nc-color-primary-light); - border-radius: var(--nc-border-radius-large); - margin: 5px 5px 0 5px; - text-align: center; + background: var(--nc-color-primary-light); + border-radius: var(--nc-border-radius-large); + margin: 5px 5px 0 5px; + text-align: center; } #rl-app #V-MailMessageList .btn-toolbar .btn:not(.btn-success) { - background: var(--nc-color-main-background); + background: var(--nc-color-main-background); } html.rl-mobile #rl-app #V-MailMessageList .btn-toolbar { - text-align: start; + text-align: start; } #rl-app #V-MailMessageList .messageList { - min-width: 370px; + min-width: 370px; } html.sm-msgView-bottom #rl-app .messageList { - height: 35vh; + height: 35vh; } #rl-app .messageList .second-toolbar, #rl-app .messageList .b-footer { - border-color: var(--nc-color-border); - background: unset !important; + border-color: var(--nc-color-border); + background: unset !important; } #rl-app .messageList .second-toolbar { - align-items: center; + align-items: center; } #rl-app .messageList .b-footer { - padding-bottom: 10px; + padding-bottom: 10px; } #rl-app .messageList .inputSearch { - max-width: unset; + max-width: unset; } #rl-app .messageList .checkboxCheckAll { - margin: 0 12px; + margin: 0 12px; } #rl-app .messageList .checkboxCheckAll:hover, #rl-app .messageList .checkboxCheckAll:focus { - color: var(--nc-color-primary-element); + color: var(--nc-color-primary-element); } #rl-app .messageList .checkboxCheckAll:active { - color: var(--nc-color-primary-element-hover); + color: var(--nc-color-primary-element-hover); } html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { - display: none; + display: none; } #rl-app .messageList .btn.buttonMoreSearch { - background: unset; - border-radius: var(--nc-border-radius-large); - margin: 0 0 0 8px; - line-height: 20px !important; + background: unset; + border-radius: var(--nc-border-radius-large); + margin: 0 0 0 8px; + line-height: 20px !important; } #rl-app .messageList .checkboxCheckAll, #rl-app .messageList .btn.buttonMoreSearch { - font-size: var(--nc-default-font-size); - height: 28px; - line-height: 28px; + font-size: var(--nc-default-font-size); + height: 28px; + line-height: 28px; } #rl-app .messageList .b-content .listThreadUidDesc { - margin: 8px; - color: var(--nc-color-main-text); - background: unset; - border: solid 1px; - border-radius: var(--nc-border-radius-large); - border-color: var(--nc-color-border-dark); + margin: 8px; + color: var(--nc-color-main-text); + background: unset; + border: solid 1px; + border-radius: var(--nc-border-radius-large); + border-color: var(--nc-color-border-dark); } #rl-app .messageList .b-content .listThreadUidDesc:hover, #rl-app .messageList .b-content .listThreadUidDesc:focus { - background: var(--nc-color-background-hover); + background: var(--nc-color-background-hover); } #rl-app .messageList .b-content .listThreadUidDesc:active { - background-color: var(--nc-color-primary-element-light); + background-color: var(--nc-color-primary-element-light); } #rl-app .messageList .b-content .listSearchDesc { - border-color: var(--nc-color-border); + border-color: var(--nc-color-border); } #rl-app .messageList .b-content .listError { - color: var(--nc-color-error); + color: var(--nc-color-error); } #rl-app .messageList .b-content .listDragOver.dragOverEnter { - background-color: var(--nc-color-background-dark); - border-radius: var(--nc-border-radius); - margin: 5px; + background-color: var(--nc-color-background-dark); + border-radius: var(--nc-border-radius); + margin: 5px; } #rl-app .messageList .b-content .listDragOver, #rl-app .messageList .b-content .listEmptyMessage, #rl-app .messageList .b-content .listError, #rl-app .messageList .b-content .listLoading { - color: var(--nc-color-text-lighter); + color: var(--nc-color-text-lighter); } #rl-app .messageList .groupLabel { - background-color: var(--nc-color-background-dark); - border-radius: var(--nc-border-radius); - margin: 2px 0; + background-color: var(--nc-color-background-dark); + border-radius: var(--nc-border-radius); + margin: 2px 0; } /* #endregion */ @@ -1653,113 +1653,113 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { /* #region message list item */ #rl-app .messageListItem .checkboxMessage { - border-color: var(--nc-color-text-lighter); - color: var(--nc-color-text-lighter); + border-color: var(--nc-color-text-lighter); + color: var(--nc-color-text-lighter); } #rl-app .messageListItem .checkboxMessage:hover, #rl-app .messageListItem .checkboxMessage:focus { - background-color: var(--nc-color-background-darker); + background-color: var(--nc-color-background-darker); } #rl-app .messageListItem .checkboxMessage:active { - background-color: var(--nc-color-primary-light-hover); + background-color: var(--nc-color-primary-light-hover); } #rl-app .messageListItem .threads-len { - color: var(--nc-color-text-light); - border-color: var(--nc-color-text-light); - padding: 0 4px; - margin-right: 5px; + color: var(--nc-color-text-light); + border-color: var(--nc-color-text-light); + padding: 0 4px; + margin-right: 5px; } #rl-app .messageListItem .threads-len:hover, #rl-app .messageListItem .threads-len:focus { - background-color: var(--nc-color-background-darker); - border-color: unset; + background-color: var(--nc-color-background-darker); + border-color: unset; } #rl-app .messageListItem .threads-len:active { - background-color: var(--nc-color-primary-element-light-hover); + background-color: var(--nc-color-primary-element-light-hover); } #rl-app .messageListItem { - padding: 8px; - margin: 2px 0; - border-bottom: unset; - border-radius: var(--nc-border-radius); + padding: 8px; + margin: 2px 0; + border-bottom: unset; + border-radius: var(--nc-border-radius); } #rl-app .messageListItem, #rl-app .messageListItem.focused { - background-color: var(--nc-color-background); - border-color: var(--nc-color-border); + background-color: var(--nc-color-background); + border-color: var(--nc-color-border); } #rl-app .messageListItem:hover, #rl-app .messageListItem.focused:hover { - background-color: var(--nc-color-background-hover); - border-color: var(--nc-color-primary-light-hover); + background-color: var(--nc-color-background-hover); + border-color: var(--nc-color-primary-light-hover); } #rl-app .messageListItem.selected, #rl-app .messageListItem.selected:hover { - background-color: var(--nc-color-primary-light) !important; - border-color: var(--nc-color-primary-light-text) !important; + background-color: var(--nc-color-primary-light) !important; + border-color: var(--nc-color-primary-light-text) !important; } #rl-app .messageListItem.unseen { - background-color: unset; - border-color: var(--nc-color-primary); + background-color: unset; + border-color: var(--nc-color-primary); } #rl-app .messageListItem.unseen.focused, #rl-app .messageListItem.unseen.focused:hover { - background-color: var(--nc-color-primary-light); - border-color: var(--nc-color-primary); + background-color: var(--nc-color-primary-light); + border-color: var(--nc-color-primary); } #rl-app .messageListItem.unseen:hover { - background-color: var(--nc-color-background-hover); - border-color: var(--nc-color-primary-hover); + background-color: var(--nc-color-background-hover); + border-color: var(--nc-color-primary-hover); } #rl-app .messageListItem [data-unseen] { - border-color: var(--nc-color-primary-element); - background-color: var(--nc-color-primary-element-light); - border-width: 2px; - font-weight: 700; + border-color: var(--nc-color-primary-element); + background-color: var(--nc-color-primary-element-light); + border-width: 2px; + font-weight: 700; } #rl-app .messageListItem [data-unseen]:hover { - border-color: var(--nc-color-primary-element-hover); - background-color: var(--nc-color-primary-element-light-hover); + border-color: var(--nc-color-primary-element-hover); + background-color: var(--nc-color-primary-element-light-hover); } #rl-app .messageListItem.checked { - background-color: unset; - border-color: var(--nc-color-primary-light-text); + background-color: unset; + border-color: var(--nc-color-primary-light-text); } #rl-app .messageListItem.checked.focused { - background-color: inherit; - border-color: var(--nc-color-primary-light-text); + background-color: inherit; + border-color: var(--nc-color-primary-light-text); } #rl-app .messageListItem.checked:hover, #rl-app .messageListItem.checked.focused:hover { - background-color: var(--nc-color-background-hover); - border-color: inherit; + background-color: var(--nc-color-background-hover); + border-color: inherit; } #rl-app #messagesDragImage { - padding: 5px 5px 5px 10px; - color: var(--nc-color-text-lighter); - background-color: var(--nc-color-background-darker); - border-radius: var(--nc-border-radius); - box-shadow: 0 0 4px var(--nc-color-box-shadow); - height: unset; - min-width: unset; + padding: 5px 5px 5px 10px; + color: var(--nc-color-text-lighter); + background-color: var(--nc-color-background-darker); + border-radius: var(--nc-border-radius); + box-shadow: 0 0 4px var(--nc-color-box-shadow); + height: unset; + min-width: unset; } /* #endregion */ @@ -1767,154 +1767,154 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { /* #region message view */ #rl-app #V-MailMessageView { - bottom: 0; + bottom: 0; } html.sm-msgView-bottom #rl-app .messageView { - height: 100%; + height: 100%; } #rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit { - padding: 4px 8px; - min-height: 28px; - height: 28px; - opacity: 0.8; + padding: 4px 8px; + min-height: 28px; + height: 28px; + opacity: 0.8; } #rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:hover, #rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:focus, #rl-app .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:active { - opacity: unset; + opacity: unset; } #rl-app .messageView .b-message-view-desc, #rl-app .messageView .b-message-view-checked-helper { - color: var(--nc-color-text-lighter); + color: var(--nc-color-text-lighter); } #rl-app .messageView .b-message-view-desc.error { - color: var(--nc-color-error); + color: var(--nc-color-error); } #rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-optimum-value { - background-color: var(--nc-color-success); - border-radius: var(--nc-border-radius-pill); + background-color: var(--nc-color-success); + border-radius: var(--nc-border-radius-pill); } #rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-suboptimum-value { - background-color: var(--nc-color-warning); - border-radius: var(--nc-border-radius-pill); + background-color: var(--nc-color-warning); + border-radius: var(--nc-border-radius-pill); } #rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-even-less-good-value { - background-color: var(--nc-color-error); - border-radius: var(--nc-border-radius-pill); + background-color: var(--nc-color-error); + border-radius: var(--nc-border-radius-pill); } #rl-app .messageView .messageItemHeader .hasVirus { - background: unset; - border: solid 2px var(--nc-color-error); - border-radius: var(--nc-border-radius); - margin: 5px; + background: unset; + border: solid 2px var(--nc-color-error); + border-radius: var(--nc-border-radius); + margin: 5px; } #rl-app .messageView .messageItemHeader .subject { - line-height: 30px; - height: 30px; + line-height: 30px; + height: 30px; } #rl-app .messageView .openpgp-control.encrypted, #rl-app .messageView .openpgp-control.signed { - border-radius: var(--nc-border-radius); + border-radius: var(--nc-border-radius); } #rl-app #V-MailMessageView .b-message-view-backdrop { - background-color: var(--nc-color-main-background-blur); - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + background-color: var(--nc-color-main-background-blur); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } #rl-app #V-MailMessageView .b-message-view-backdrop .backdrop-message { - background-color: var(--nc-color-main-background); - border: solid 1px var(--nc-color-primary); - border-radius: var(--nc-border-radius-large); - text-shadow: none; - margin: 10px; - color: unset; + background-color: var(--nc-color-main-background); + border: solid 1px var(--nc-color-primary); + border-radius: var(--nc-border-radius-large); + text-shadow: none; + margin: 10px; + color: unset; } #rl-app .messageView .messageAssignedTags { - margin: 0 5px; + margin: 0 5px; } #rl-app .messageView .messageAssignedTags span { - border-radius: var(--nc-border-radius-pill); - background: unset; - padding: 2px 5px; + border-radius: var(--nc-border-radius-pill); + background: unset; + padding: 2px 5px; } #rl-app #messageItem .bodySubHeader { - background-color: unset; + background-color: unset; } #rl-app #messageItem .bodySubHeader>* { - border-color: var(--nc-color-border); + border-color: var(--nc-color-border); } .rl-left-panel-disabled #rl-app #messageItem .dropdown-menu { - position: absolute; + position: absolute; } #rl-app #messageItem .readReceipt, #rl-app #messageItem .showImages { - margin: 8px; - padding: 10px; - color: var(--nc-color-main-text); - border: solid 1px var(--nc-color-primary); - background-color: var(--nc-color-primary-light); - border-radius: var(--nc-border-radius-large); + margin: 8px; + padding: 10px; + color: var(--nc-color-main-text); + border: solid 1px var(--nc-color-primary); + background-color: var(--nc-color-primary-light); + border-radius: var(--nc-border-radius-large); } #rl-app #messageItem .showImages>.btn, #rl-app #messageItem .showImages>.btn-group { - margin: 2px; + margin: 2px; } #rl-app #messageItem .readReceipt:hover { - background-color: var(--nc-color-primary-light-hover); + background-color: var(--nc-color-primary-light-hover); } #rl-app .messageView .messageItemHeader, #rl-app #messageItem .attachmentsPlace { - background-color: unset; - border-color: var(--nc-color-border); - color: var(--nc-color-main-text); + background-color: unset; + border-color: var(--nc-color-border); + color: var(--nc-color-main-text); } #rl-app #messageItem .attachmentsPlace { - border-top: 1px solid var(--nc-color-border); - top: -1px; + border-top: 1px solid var(--nc-color-border); + top: -1px; } #rl-app #messageItem .attachmentsPlace .controls-handle { - -webkit-user-select: none; - user-select: none; + -webkit-user-select: none; + user-select: none; } #rl-app #messageItem .attachmentsControls { - background-color: unset; - border-color: var(--nc-color-border); - -webkit-user-select: none; - user-select: none; + background-color: unset; + border-color: var(--nc-color-border); + -webkit-user-select: none; + user-select: none; } #rl-app #messageItem .attachmentsControls .icon-file-archive, #rl-app #messageItem .attachmentsControls .fontastic { - color: var(--nc-color-main-text); + color: var(--nc-color-main-text); } #rl-app #messageItem .attachmentListSimple .attachmentName { - margin: 5px; + margin: 5px; } /* #endregion */ @@ -1922,62 +1922,62 @@ html.sm-msgView-bottom #rl-app .messageView { /* #region settings */ #rl-app #V-SettingsPane { - margin: 62px 0 8px 0; - height: calc(100% - 62px - 8px); - background-color: unset; - box-shadow: none; - border: none; + margin: 62px 0 8px 0; + height: calc(100% - 62px - 8px); + background-color: unset; + box-shadow: none; + border: none; } #rl-app #V-SettingsPane .btn-toolbar { - padding: 8px; + padding: 8px; } #rl-app .row { - margin-left: unset; + margin-left: unset; } #rl-app .legend, #rl-app #V-AdminPane hr, #rl-app #V-SettingsPane hr { - color: unset; - border-color: var(--nc-color-border); + color: unset; + border-color: var(--nc-color-border); } #rl-app #V-Settings-Themes figure, #rl-app #V-Settings-Themes img { - border-radius: var(--nc-border-radius-large); + border-radius: var(--nc-border-radius-large); } #rl-app #V-Settings-Themes figure:not(.selected):hover { - background-color: var(--nc-color-background-hover); - border-color: transparent; + background-color: var(--nc-color-background-hover); + border-color: transparent; } #rl-app #V-Settings-Themes figure:not(.selected):active { - background-color: var(--nc-color-primary-element-light); + background-color: var(--nc-color-primary-element-light); } #rl-app #V-Settings-Themes figure:not(.selected):focus { - outline: none; + outline: none; } #rl-app #V-Settings-Themes figure.selected { - background-color: var(--nc-color-primary-element); - border-color: transparent; - color: var(--nc-color-primary-element-text); + background-color: var(--nc-color-primary-element); + border-color: transparent; + color: var(--nc-color-primary-element-text); } /* hide additional theme settings, as these are made via Nextcloud theming */ /* fonts */ #rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal:nth-of-type(3) { - display: none !important; + display: none !important; } /* background */ #content.app-snappymail #rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal:nth-of-type(4) { - display: none !important; + display: none !important; } /* #endregion */ @@ -1985,72 +1985,72 @@ html.sm-msgView-bottom #rl-app .messageView { /* #region settings admin */ #rl-app #V-AdminPane { - margin: 8px 0px; - height: calc(100% - 2*8px); - background-color: unset; - box-shadow: none; - border: none; + margin: 8px 0px; + height: calc(100% - 2*8px); + background-color: unset; + box-shadow: none; + border: none; } #rl-app #V-AdminPane>.b-toolbar { - width: 300px; - text-shadow: none; + width: 300px; + text-shadow: none; } html.rl-mobile #rl-app #V-AdminPane { - margin: 60px 0px 8px 0px; - height: calc(100% - 60px - 8px); + margin: 60px 0px 8px 0px; + height: calc(100% - 60px - 8px); } html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { - width: unset; + width: unset; } #rl-app #V-Settings-Config th { - background-color: var(--nc-color-background-dark); + background-color: var(--nc-color-background-dark); } #rl-app #V-Settings-Config em { - word-break: break-word; + word-break: break-word; } #rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] { - align-self: self-start; + 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; + margin-left: -130px; } #rl-app #V-Settings-Domains .btn[data-i18n="GLOBAL/TEST"] { - margin-left: 1rem; + margin-left: 1rem; } @media screen and (max-width: 1024px) { - #rl-app #V-AdminPane table { - width: 100%; - } + #rl-app #V-AdminPane table { + width: 100%; + } - #rl-app #V-AdminPane [class*="span"] { - width: unset; - } + #rl-app #V-AdminPane [class*="span"] { + width: unset; + } } @media screen and (max-width: 480px) { - #rl-app #V-Settings-Config .table { - border-collapse: collapse; - } + #rl-app #V-Settings-Config .table { + border-collapse: collapse; + } - #rl-app #V-Settings-Config .table tr { - border-top: 10px solid transparent; - } + #rl-app #V-Settings-Config .table tr { + border-top: 10px solid transparent; + } - #rl-app #V-Settings-Config .table td, - #rl-app #V-Settings-Config .table th { - display: block; - border-style: solid; - border-width: 1px 0px; - } + #rl-app #V-Settings-Config .table td, + #rl-app #V-Settings-Config .table th { + display: block; + border-style: solid; + border-width: 1px 0px; + } } /* #endregion */ @@ -2058,74 +2058,74 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region popup */ #rl-app dialog { - background: var(--nc-color-main-background); - color: var(--nc-color-main-text); - border-radius: var(--nc-border-radius-large); - filter: drop-shadow(0 1px 5px var(--nc-color-box-shadow)); - box-shadow: none; - border-color: var(--nc-color-border); + background: var(--nc-color-main-background); + color: var(--nc-color-main-text); + border-radius: var(--nc-border-radius-large); + filter: drop-shadow(0 1px 5px var(--nc-color-box-shadow)); + box-shadow: none; + border-color: var(--nc-color-border); } #rl-app dialog>header, #rl-app dialog>footer { - border-color: var(--nc-color-border); + border-color: var(--nc-color-border); } #rl-app dialog>footer .btn+.btn, #rl-app dialog>footer button+button { - margin: 0 0 0 5px; + margin: 0 0 0 5px; } #rl-app #V-PopupsPlugin .help-block { - margin-left: 5px; + margin-left: 5px; } #rl-app #V-PopupsIdentity .e-signature-place { - border: none; + border: none; } #rl-app #V-PopupsLanguages label { - background-color: var(--nc-color-background-dark) !important; - border-color: var(--nc-color-border); - border-radius: var(--nc-border-radius); - padding: 8px 15px; + background-color: var(--nc-color-background-dark) !important; + border-color: var(--nc-color-border); + border-radius: var(--nc-border-radius); + padding: 8px 15px; } #rl-app #V-PopupsLanguages label:hover { - border-color: var(--nc-color-primary-element); - background-color: unset; + border-color: var(--nc-color-primary-element); + background-color: unset; } #rl-app #V-PopupsLanguages label.user { - background-color: var(--nc-color-main-background) !important; - color: var(--nc-color-text-light); + background-color: var(--nc-color-main-background) !important; + color: var(--nc-color-text-light); } #rl-app #V-PopupsLanguages label.selected { - background-color: var(--nc-color-primary-element-light) !important; - border-color: var(--nc-color-primary-element); + background-color: var(--nc-color-primary-element-light) !important; + border-color: var(--nc-color-primary-element); } @media screen and (max-width: 480px) { - #rl-app #V-PopupsAdvancedSearch .e-component.e-checkbox { - margin-left: -100%; - } + #rl-app #V-PopupsAdvancedSearch .e-component.e-checkbox { + margin-left: -100%; + } - #rl-app #V-PopupsLanguages label { - margin-left: 0; - margin-right: 0; - } + #rl-app #V-PopupsLanguages label { + margin-left: 0; + margin-right: 0; + } - #rl-app #V-PopupsKeyboardShortcutsHelp .modal-body, - #rl-app #V-PopupsDomain .modal-body { - padding-left: 0; - padding-right: 0; - overflow-x: hidden; - } + #rl-app #V-PopupsKeyboardShortcutsHelp .modal-body, + #rl-app #V-PopupsDomain .modal-body { + padding-left: 0; + padding-right: 0; + overflow-x: hidden; + } } #rl-app #V-PopupsOpenPgpImport textarea { - width: 100%; + width: 100%; } /* #endregion */ @@ -2136,109 +2136,109 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { #rl-app #V-PopupsContacts .b-list-toolbar, #rl-app #V-PopupsContacts .b-list-footer-toolbar, #rl-app #V-PopupsContacts .b-view-content-toolbar { - border-color: var(--nc-color-border); + border-color: var(--nc-color-border); } #rl-app #V-PopupsContacts .b-list-toolbar { - height: 55px; + height: 55px; } #rl-app #V-PopupsContacts .b-list-toolbar .e-search { - margin: 9px 5px; - width: calc(100% - 2*5px); + margin: 9px 5px; + width: calc(100% - 2*5px); } #rl-app #V-PopupsContacts .b-view-content { - margin-top: 20px; - height: calc(100% - 72px); - overflow: hidden; + margin-top: 20px; + height: calc(100% - 72px); + overflow: hidden; } #rl-app #V-PopupsContacts .b-list-content { - height: calc(100% - 35px - 72px); + height: calc(100% - 35px - 72px); } #rl-app #V-PopupsContacts .b-list-content .listClear { - box-shadow: none; + box-shadow: none; } #rl-app #V-PopupsContacts .tabs { - height: 100%; + height: 100%; } #rl-app #V-PopupsContacts .tab-content { - overflow: auto; + overflow: auto; } #rl-app #V-PopupsContacts .e-contact-item { - padding: 4px; - margin: 2px 4px; - max-height: unset; - border-bottom: 0 !important; - border-radius: var(--nc-border-radius); + padding: 4px; + margin: 2px 4px; + max-height: unset; + border-bottom: 0 !important; + border-radius: var(--nc-border-radius); } #rl-app #V-PopupsContacts .e-contact-item, #rl-app #V-PopupsContacts .e-contact-item.focused { - background-color: var(--nc-color-background); - border-color: var(--nc-color-border); + background-color: var(--nc-color-background); + border-color: var(--nc-color-border); } #rl-app #V-PopupsContacts .e-contact-item:hover, #rl-app #V-PopupsContacts .e-contact-item.focused:hover { - background-color: var(--nc-color-background-hover); - border-color: var(--nc-color-primary-light-hover); + background-color: var(--nc-color-background-hover); + border-color: var(--nc-color-primary-light-hover); } #rl-app #V-PopupsContacts .e-contact-item.selected, #rl-app #V-PopupsContacts .e-contact-item.selected:hover { - background-color: var(--nc-color-primary-light); - border-color: var(--nc-color-primary-light-text); + background-color: var(--nc-color-primary-light); + border-color: var(--nc-color-primary-light-text); } #rl-app #V-PopupsContacts .e-contact-item.checked { - background-color: unset; - border-color: var(--nc-color-primary-light-text); + background-color: unset; + border-color: var(--nc-color-primary-light-text); } #rl-app #V-PopupsContacts .e-contact-item.checked.focused { - background-color: inherit; - border-color: var(--nc-color-primary-light-text); + background-color: inherit; + border-color: var(--nc-color-primary-light-text); } #rl-app #V-PopupsContacts .e-contact-item.checked:hover, #rl-app #V-PopupsContacts .e-contact-item.checked.focused:hover { - background-color: var(--nc-color-background-hover); - border-color: inherit; + background-color: var(--nc-color-background-hover); + border-color: inherit; } @media screen and (max-width: 799px) { - #rl-app #V-PopupsContacts .modal-body { - flex-direction: column; - } + #rl-app #V-PopupsContacts .modal-body { + flex-direction: column; + } - #rl-app #V-PopupsContacts .left { - max-width: unset; - height: 40%; - } + #rl-app #V-PopupsContacts .left { + max-width: unset; + height: 40%; + } - #rl-app #V-PopupsContacts .b-list-footer-toolbar { - display: none; - } + #rl-app #V-PopupsContacts .b-list-footer-toolbar { + display: none; + } - #rl-app #V-PopupsContacts .b-list-content { - height: calc(100% - 55px); - border-bottom: 1px solid var(--nc-color-border); - } + #rl-app #V-PopupsContacts .b-list-content { + height: calc(100% - 55px); + border-bottom: 1px solid var(--nc-color-border); + } - #rl-app #V-PopupsContacts .right { - height: 60%; - border-left: unset; - } + #rl-app #V-PopupsContacts .right { + height: 60%; + border-left: unset; + } - #rl-app #V-PopupsContacts .control-group { - margin-right: 1em; - } + #rl-app #V-PopupsContacts .control-group { + margin-right: 1em; + } } /* #endregion */ @@ -2246,52 +2246,52 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region popup compose */ #rl-app #V-PopupsCompose header { - background-color: unset; - color: unset; + background-color: unset; + color: unset; } #rl-app #V-PopupsCompose header .close, #rl-app #V-PopupsCompose header .minimize-custom { - border-color: unset; + border-color: unset; } #rl-app #V-PopupsCompose .b-header { - background: unset; + background: unset; } #rl-app #V-PopupsCompose .b-header .error-to { - color: var(--nc-color-error); + color: var(--nc-color-error); } #rl-app #V-PopupsCompose .pull-right>.btn, #rl-app #V-PopupsCompose .pull-right>.btn-group { - margin-left: 3px; + margin-left: 3px; } #rl-app #V-PopupsCompose .no-attachments-desc { - text-shadow: unset; + text-shadow: unset; } #rl-app #V-PopupsCompose .attachmentAreaParent .attachmentItem:hover, #rl-app #V-PopupsCompose .attachmentAreaParent .attachmentItem:active { - background-color: var(--nc-color-background-dark); + background-color: var(--nc-color-background-dark); } #rl-app #V-PopupsCompose .b-attachment-place { - border-color: var(--nc-color-border); - background-color: var(--nc-color-background-dark); + border-color: var(--nc-color-border); + background-color: var(--nc-color-background-dark); } #rl-app #V-PopupsCompose .b-attachment-place.dragAndDropOver { - border-color: var(--nc-color-border); + border-color: var(--nc-color-border); } #rl-app #V-PopupsCompose .tabs label[for="tab-attachments"] b { - padding: 2px 6px; - border-radius: 1em; - color: var(--nc-color-primary-element); - background-color: var(--nc-color-primary-element-light); - font-size: 12px; + padding: 2px 6px; + border-radius: 1em; + color: var(--nc-color-primary-element); + background-color: var(--nc-color-primary-element-light); + font-size: 12px; } /* #endregion */ @@ -2299,94 +2299,94 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region popup nextcloud files */ #rl-app #V-PopupsCompose .btn[data-bind*="nextcloudAttach"] { - font-size: 0; + font-size: 0; } #rl-app #V-PopupsCompose .btn[data-bind*="nextcloudAttach"]::before { - display: block; - content: ""; - height: 100%; - width: 30px; - --nc-logo: url("data:image/svg+xml,"); - -webkit-mask-image: var(--nc-logo); - mask-image: var(--nc-logo); - -webkit-mask-position: center; - mask-position: center; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 30px; - mask-size: 30px; - background-color: var(--nc-color-main-text); + display: block; + content: ""; + height: 100%; + width: 30px; + --nc-logo: url("data:image/svg+xml,"); + -webkit-mask-image: var(--nc-logo); + mask-image: var(--nc-logo); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 30px; + mask-size: 30px; + background-color: var(--nc-color-main-text); } #rl-app #V-PopupsNextcloudFiles { - user-select: none; + user-select: none; } #rl-app #V-PopupsNextcloudFiles li { - line-height: unset; + line-height: unset; } #rl-app #V-PopupsNextcloudFiles li[data-icon], #rl-app #V-PopupsNextcloudFiles li:has(>button[name="create"]), #rl-app #V-PopupsNextcloudFiles li details summary { - padding: 5px 10px; - display: flex; - align-items: center !important; - overflow-wrap: anywhere; + padding: 5px 10px; + display: flex; + align-items: center !important; + overflow-wrap: anywhere; } #rl-app #V-PopupsNextcloudFiles li button, #rl-app #V-PopupsNextcloudFiles li input { - margin-left: auto !important; - align-self: center; + margin-left: auto !important; + align-self: center; } #rl-app #V-PopupsNextcloudFiles li input { - min-width: 100px; - flex-shrink: 1; + min-width: 100px; + flex-shrink: 1; } #rl-app #V-PopupsNextcloudFiles li button { - flex-shrink: 0; + flex-shrink: 0; } #rl-app #V-PopupsNextcloudFiles li button[name="create"] { - margin-left: 10px !important; + margin-left: 10px !important; } #rl-app #V-PopupsNextcloudFiles li:not(:last-child), #rl-app #V-PopupsNextcloudFiles li details[open]>summary { - border-bottom: 1px solid var(--nc-color-border); + border-bottom: 1px solid var(--nc-color-border); } #rl-app #V-PopupsNextcloudFiles li details[open]>summary { - background-color: var(--nc-color-primary-element-light); - border-bottom-color: var(--nc-color-primary-element-hover); + background-color: var(--nc-color-primary-element-light); + border-bottom-color: var(--nc-color-primary-element-hover); } #rl-app #V-PopupsNextcloudFiles li:hover { - background-color: unset; + background-color: unset; } #rl-app #V-PopupsNextcloudFiles li[data-icon]:hover, #rl-app #V-PopupsNextcloudFiles li details:not([open]):hover, #rl-app #V-PopupsNextcloudFiles li details[open]>summary:hover { - background-color: var(--nc-color-background-hover); + background-color: var(--nc-color-background-hover); } #rl-app #V-PopupsNextcloudFiles li details summary[data-icon] { - list-style-type: none; + list-style-type: none; } #rl-app #V-PopupsNextcloudFiles li details summary[data-icon]::before { - color: var(--nc-color-primary); - font-size: 20px; + color: var(--nc-color-primary); + font-size: 20px; } #rl-app #V-PopupsNextcloudFiles li[data-icon]::before, #rl-app #V-PopupsNextcloudFiles li details summary[data-icon]::before { - margin: 5px 10px 5px 0; + margin: 5px 10px 5px 0; } /* #endregion */ @@ -2394,15 +2394,15 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region popup nextcloud calendars */ #rl-app #V-PopupsNextcloudCalendars li { - padding: 5px; - display: flex; - align-items: center !important; - border-bottom: solid 1px var(--nc-color-border); + padding: 5px; + display: flex; + align-items: center !important; + border-bottom: solid 1px var(--nc-color-border); } #rl-app #V-PopupsNextcloudCalendars li button { - margin-left: auto !important; - align-self: center; + margin-left: auto !important; + align-self: center; } /* #endregion */ @@ -2418,9 +2418,9 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region avatars */ #rl-app .messageCheckbox .fromPic { - margin: -5px 0 -9px 8px; - height: 32px; - width: 32px; + margin: -5px 0 -9px 8px; + height: 32px; + width: 32px; } /* #endregion */ @@ -2434,18 +2434,18 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region 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-\$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; + --msgflag-\\flagged-color: #ffca32; } #rl-app .msgflag-\$label5:not(.focused) { border-color: var(--msgflag-\$label5-color); } @@ -2471,8 +2471,8 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { #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; + background-color: unset; + color: unset; } #rl-app .messageListItem.msgflag-\$label1:hover, @@ -2480,7 +2480,7 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { #rl-app .messageListItem.msgflag-\$label3:hover, #rl-app .messageListItem.msgflag-\$label4:hover, #rl-app .messageListItem.msgflag-\$label5:hover { - background-color: var(--nc-color-background-hover); + background-color: var(--nc-color-background-hover); } #rl-app a.msgflag-\$label1, @@ -2488,18 +2488,18 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { #rl-app a.msgflag-\$label3, #rl-app a.msgflag-\$label4, #rl-app a.msgflag-\$label5 { - border-left: solid 5px; + 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 gray; + border-left: solid 5px gray; } #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); + color: var(--msgflag-\\flagged-color); } /* #endregion */ @@ -2513,17 +2513,17 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region tablet layout */ @media screen and (min-width: 800px) and (max-width: 1024px) { - #rl-app #rl-left { - width: 250px; - } + #rl-app #rl-left { + width: 250px; + } - html:not(.rl-left-panel-disabled) #rl-left { - max-width: calc(var(--nc-sidebar-max-width) / 2); - } + html:not(.rl-left-panel-disabled) #rl-left { + max-width: calc(var(--nc-sidebar-max-width) / 2); + } - #rl-app #V-SystemDropDown .accountPlace { - display: none; - } + #rl-app #V-SystemDropDown .accountPlace { + display: none; + } } /* #endregion */ @@ -2535,15 +2535,15 @@ html.rl-mobile #rl-app #V-AdminPane>.b-toolbar { /* #region keyframes */ @keyframes highlight-folder-row { - 0% { - transform: scale(1) - } + 0% { + transform: scale(1) + } - 50% { - transform: scale(.95) - } + 50% { + transform: scale(.95) + } - 100% { - transform: scale(1) - } + 100% { + transform: scale(1) + } }