Postal/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-06-29 23:36:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved theme styling and results in better Nextcloud integration

Browse Source
This commit is contained in:
the-djmaze
2022-11-03 12:45:10 +01:00
parent 719847c43e
commit 39a827aa2e
9 changed files with 136 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev/Styles/Admin/Layout.less
View File

@@ -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;

1
dev/Styles/Main.less
View File

@@ -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;

2
dev/Styles/Ui.less
View File

@@ -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;
}

3
dev/Styles/User/Layout.less
View File

@@ -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 {

2
dev/Styles/User/Settings.less
View File

@@ -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;

130
integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css
View File

@@ -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);
}

49
integrations/nextcloud/snappymail/css/embed.css
View File

@@ -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;

27
snappymail/v/0.0.0/themes/example.css
View File

@@ -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;

2
vendors/bootstrap/less/dropdowns.less vendored
View File

@@ -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;
}