From 39a827aa2e4fb11ea7cbea488b768ac2bee1012b Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Thu, 3 Nov 2022 12:45:10 +0100 Subject: [PATCH] Improved theme styling and results in better Nextcloud integration --- dev/Styles/Admin/Layout.less | 2 +- dev/Styles/Main.less | 1 + dev/Styles/Ui.less | 2 +- dev/Styles/User/Layout.less | 3 +- dev/Styles/User/Settings.less | 2 +- .../app/themes/Nextcloud/styles.css | 130 ++++++++++-------- .../nextcloud/snappymail/css/embed.css | 49 ++++++- snappymail/v/0.0.0/themes/example.css | 27 ++-- vendors/bootstrap/less/dropdowns.less | 2 +- 9 files changed, 136 insertions(+), 82 deletions(-) diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less index 71ab17ea7..9a34dbdbd 100644 --- a/dev/Styles/Admin/Layout.less +++ b/dev/Styles/Admin/Layout.less @@ -69,7 +69,7 @@ } #rl-settings-subscreen { - background-color: #fff; + background-color: var(--settings-bg-clr, #fff); border: 1px solid @rlMainDarkColor; border-radius: @rlMainBorderRadius; box-shadow: @rlMainShadow; diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index 7e69a7a06..06a42d382 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -62,6 +62,7 @@ dialog { border: 1px solid rgba(0,0,0,.3); border-radius: 6px; box-shadow: 0 5px 80px rgba(0,0,0,0.3); + color: var(--dialog-clr, #333); display: flex; flex-direction: column; margin: 10px auto; diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index 74276b35a..f9d68d308 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -126,7 +126,7 @@ tr:hover .drag-handle { } .tabs > [id^="tab"]:checked + label { background-color: var(--tab-active-bg-clr, #fff); - border-color: rgba(128,128,128,.5) rgba(128,128,128,.5) transparent rgba(128,128,128,.5); + border-color: var(--border-color, #ddd) var(--border-color, #ddd) transparent var(--border-color, #ddd); opacity: 1; z-index: 1; } diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index 71db08b84..5ad0bb41f 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -161,8 +161,9 @@ html.rl-side-preview-pane { .btn.btn-transparent { background: none !important; border-color: transparent !important; - text-shadow: none !important; box-shadow: none !important; + color: inherit; + text-shadow: none !important; opacity: .6; &:hover { diff --git a/dev/Styles/User/Settings.less b/dev/Styles/User/Settings.less index aaca64723..ff84ce277 100644 --- a/dev/Styles/User/Settings.less +++ b/dev/Styles/User/Settings.less @@ -74,7 +74,7 @@ box-sizing: border-box; height: calc(100% - 50px - @rlLowMargin - @rlLowMargin); - background-color: #fff; + background-color: var(--settings-bg-clr, #fff); border: 1px solid @rlMainDarkColor; box-shadow: @rlMainShadow; border-radius: @rlMainBorderRadius; diff --git a/integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css b/integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css index a0dac8ec4..7a2b3a402 100644 --- a/integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css +++ b/integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css @@ -1,4 +1,3 @@ - :root { /* Nextcloud --color-main-text: #222; @@ -40,35 +39,54 @@ --border-radius-pill: 100px; --default-font-size: 15px; --default-line-height: 24px; - --animation-quick: 100ms; - --animation-slow: 300ms; */ --fontSans: var(--font-face); /* MAIN */ - --main-color: var(--color-main-text, #333); - --main-bg-color: var(--color-main-background, transparent); + --main-color: var(--color-main-text); + --main-bg-color: var(--color-main-background); --main-bg-image: none; + --main-bg-size: auto; + --main-bg-repeat: repeat; + --main-font-size: 14px; + --link-color: #369; + --border-color: #ddd; + --hr-color: #eee; + + --warning-clr: var(--color-warning); + --warning-bg-clr: #fcf8e3; + --warning-border-clr: #fbeed5; + + --error-clr: #b94a48; + --error-bg-clr: #f2dede; + --error-border-clr: #eed3d7; + + --info-clr: #3a87ad; + --info-bg-clr: #d9edf7; + --info-border-clr: #bce8f1; /* LOADING */ - --loading-color: #000; + --loading-color: var(--color-main-text); + --loading-text-shadow: none; /* 0px 1px 0px rgba(0, 0, 0, 0.5); */ /* LOGIN */ - --login-color: var(--color-main-text, #eee); - --login-bg-color: var(--color-background-darker, rgba(0,0,0,0.5)); - --login-box-shadow: none; + --login-color: var(--color-main-text); + --login-bg-color: var(--color-background-darker); + --login-box-shadow: var(--color-box-shadow); --login-border: none; - --login-border-radius: var(--border-radius-large, 7px); + --login-border-radius: var(--border-radius-large); + + --spinner-color: #fff; /* MENU */ - --dropdown-menu-color: var(--color-main-text, #333); - --dropdown-menu-bg-color: var(--color-main-background, #fff); - --dropdown-menu-hover-bg-color: var(--color-background-hover, #757575); - --dropdown-menu-hover-color: var(--color-main-text, #eee); - --dropdown-menu-disable-color: #999; + --dropdown-menu-color: var(--color-main-text); + --dropdown-menu-bg-color: var(--color-main-background); + --dropdown-menu-hover-bg-color: var(--color-background-hover); + --dropdown-menu-hover-color: var(--color-main-text); + --dropdown-menu-disabled-color: #999; /* FOLDERS */ - --folders-color: var(--color-main-text, #333); + --folders-color: var(--color-main-text); --folders-disabled-color: #999; --folders-selected-color: var(--color-primary); --folders-selected-bg-color: var(--color-background-darker); @@ -78,9 +96,12 @@ --folders-hover-bg-color: var(--color-background-hover); --folders-drop-color: var(--color-primary-hover); --folders-drop-bg-color: var(--color-background-hover); + --unread-count-color: #fff; + --unread-count-bg-color: #333; /* SETTINGS */ - --settings-menu-color: #333; + --settings-bg-clr: transparent; + --settings-menu-color: var(--color-main-text); --settings-menu-selected-color: #eee; --settings-menu-selected-bg-color: rgba(0,0,0,0.5); --settings-menu-hover-color: #eee; @@ -88,6 +109,34 @@ /* MESSAGE LIST */ --message-list-toolbar-bg-color: #eee; + + /* MESSAGE */ + --message-bg-color: #fff; + + /* DIALOGS */ + --dialog-clr: var(--color-main-text); + --dialog-bg-clr: var(--color-main-background); + + /* FORMS */ + --btn-clr: var(--color-primary-text); + --btn-bg-clr: var(--color-primary-element); + --btn-border-clr: var(--color-border); + --btn-success-bg-clr: #84AB04; + --btn-danger-bg-clr: #ee5f5b; + + --input-clr: var(--color-main-text); + --input-bg-clr: var(--color-main-background); + --input-border-clr: var(--color-border-dark); + --input-border-radius: var(--border-radius); + --input-focus-border-clr: var(--color-primary-element); + + /* TABLES */ + --tr-hover-bg-clr: var(--color-background-hover); + --tr-odd-bg-clr: var(--color-background-darker); /* when striped */ + + /* TABS */ + --tab-active-bg-clr: var(--color-main-background); + --tab-hover-border-clr: var(--color-background-hover); } .thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar { @@ -97,10 +146,11 @@ color: var(--main-color); text-shadow: none; } -#V-PopupsCompose header { - background-color: #0082c9; - background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%); - color: #fff; + +#rl-app dialog header { + background-color: var(--color-primary-element); + background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); + color: var(--color-primary-text); } .messageList, .messageView { @@ -126,39 +176,7 @@ box-shadow: 0 2px 8px var(--color-box-shadow); } -#V-MailMessageView, -.b-folders .b-content { - bottom: 5px; - top: 50px; -} - -.messageListItem * { - cursor: pointer; -} - -/** - * hampoelz - * https://github.com/the-djmaze/snappymail/issues/96#issuecomment-1279783076 - */ - -.messageList { - margin: 0 5px; -} - -a.selectable { - margin: 2px; - height: 38px !important; - line-height: 38px !important; - border-radius: var(--border-radius-pill); -} - -a.selectable::after { - display: block; - margin: 0 !important; - top: 50%; - transform: translateY(-50%); -} - -.btn { - border: initial !important; +#rl-app button.btn:not(.button-vue) { + color: var(--color-primary-text); + background-color: var(--color-primary-element); } diff --git a/integrations/nextcloud/snappymail/css/embed.css b/integrations/nextcloud/snappymail/css/embed.css index 90e46ed69..9109a3b0c 100644 --- a/integrations/nextcloud/snappymail/css/embed.css +++ b/integrations/nextcloud/snappymail/css/embed.css @@ -54,7 +54,7 @@ This stylesheet is used when SnappyMail runs in embed mode. padding: 3px; } -button.btn:not(.button-vue) { +#rl-app button.btn:not(.button-vue) { min-height: auto; height: auto; margin: 0; @@ -82,12 +82,6 @@ button.btn:not(.button-vue) { min-height: 200px; } -#V-PopupsCompose header { - background-color: var(--color-primary); - background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); - color: #fff; -} - #rl-app tbody tr:hover { background-color: inherit; } @@ -100,6 +94,47 @@ body > header ul { margin: 0; } +#rl-app h3 { + color: inherit; +} + +#V-MailMessageView, +.b-folders .b-content { + bottom: 5px; + top: 50px; +} + +.messageListItem * { + cursor: pointer; +} + +/** + * hampoelz + * https://github.com/the-djmaze/snappymail/issues/96#issuecomment-1279783076 + */ + +.messageList { + margin: 0 5px; +} + +a.selectable { + margin: 2px; + height: 38px !important; + line-height: 38px !important; + border-radius: var(--border-radius-pill); +} + +a.selectable::after { + display: block; + margin: 0 !important; + top: 50%; + transform: translateY(-50%); +} + +.btn { + border: initial !important; +} + @media print { #body-user #header { display: none; diff --git a/snappymail/v/0.0.0/themes/example.css b/snappymail/v/0.0.0/themes/example.css index 0364666d7..b64463bd4 100644 --- a/snappymail/v/0.0.0/themes/example.css +++ b/snappymail/v/0.0.0/themes/example.css @@ -1,6 +1,6 @@ :root { -/* MAIN */ + /* MAIN */ --main-color: #333; --main-bg-color: #e3e3e3; --main-bg-image: none; /* url("images/background.png"); */ @@ -23,29 +23,27 @@ --info-bg-clr: #d9edf7; --info-border-clr: #bce8f1; -/* LOADING */ + /* LOADING */ --loading-color: #000; --loading-text-shadow: none; /* 0px 1px 0px rgba(0, 0, 0, 0.5); */ -/* LOGIN */ + /* LOGIN */ --login-color: #555; --login-bg-color: #eee; --login-box-shadow: none; /* 0px 2px 10px rgba(0,0,0,0.5) */ --login-border: 1px solid #ccc; --login-border-radius: 7px; - --login-gradient-start: none; /* #f4f4f4 */ - --login-gradient-end: none; /* #dfdfdf */ --spinner-color: #fff; -/* MENU */ + /* MENU */ --dropdown-menu-color: #333; --dropdown-menu-bg-color: #fff; --dropdown-menu-hover-bg-color: #444; --dropdown-menu-hover-color: #eee; --dropdown-menu-disabled-color: #999; -/* FOLDERS */ + /* FOLDERS */ --folders-color: #333; --folders-disabled-color: #666; --folders-selected-color: #eee; @@ -59,23 +57,24 @@ --unread-count-color: #fff; --unread-count-bg-color: #333; -/* SETTINGS */ + /* SETTINGS */ + --settings-bg-clr: #fff; --settings-menu-color: #333; --settings-menu-selected-color: #eee; --settings-menu-selected-bg-color: #333; --settings-menu-hover-color: #eee; --settings-menu-hover-bg-color: #333; -/* MESSAGE LIST */ + /* MESSAGE LIST */ --message-list-toolbar-bg-color: #eee; -/* MESSAGE */ + /* MESSAGE */ --message-bg-color: #fff; -/* DIALOGS */ + /* DIALOGS */ --dialog-bg-clr: #fff; -/* FORMS */ + /* FORMS */ --btn-clr: #333; --btn-bg-clr: #fff; --btn-border-clr: #fff; @@ -88,11 +87,11 @@ --input-border-radius: 3px; --input-focus-border-clr: #999; -/* TABLES */ + /* TABLES */ --tr-hover-bg-clr: #f5f5f5; --tr-odd-bg-clr: #f9f9f9; /* when striped */ -/* TABS */ + /* TABS */ --tab-active-bg-clr: #fff; --tab-hover-border-clr: #eee; diff --git a/vendors/bootstrap/less/dropdowns.less b/vendors/bootstrap/less/dropdowns.less index 7599f5bdc..fb41ab315 100644 --- a/vendors/bootstrap/less/dropdowns.less +++ b/vendors/bootstrap/less/dropdowns.less @@ -60,7 +60,7 @@ // Gray out text and ensure the hover state remains gray .dropdown-menu .disabled > a, .dropdown-menu .disabled > a:hover { - color: #999; + color: var(--dropdown-menu-disabled-color, #999); cursor: not-allowed; opacity: 0.5; }