Improved theme styling and results in better Nextcloud integration

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;

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;

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

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 {

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;

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-color: var(--color-main-text);
-	--main-bg-color: var(--color-main-background, transparent);
+	--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-color: var(--color-main-text);
-	--login-bg-color: var(--color-background-darker, rgba(0,0,0,0.5));
+	--login-bg-color: var(--color-background-darker);
-	--login-box-shadow: none;
+	--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-color: var(--color-main-text);
-	--dropdown-menu-bg-color: var(--color-main-background, #fff);
+	--dropdown-menu-bg-color: var(--color-main-background);
-	--dropdown-menu-hover-bg-color: var(--color-background-hover, #757575);
+	--dropdown-menu-hover-bg-color: var(--color-background-hover);
-	--dropdown-menu-hover-color: var(--color-main-text, #eee);
+	--dropdown-menu-hover-color: var(--color-main-text);
-	--dropdown-menu-disable-color: #999;
+	--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;
+#rl-app dialog header {
-	background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
+	background-color: var(--color-primary-element);
-	color: #fff;
+	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,
+#rl-app button.btn:not(.button-vue) {
-.b-folders .b-content {
+	color: var(--color-primary-text);
-	bottom: 5px;
+	background-color: var(--color-primary-element);
-	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;
 }

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;

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;
 

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