Allow themes in mobile mode

Cleanup themes and drop the template.less
2024-09-20 07:35:55 +08:00 · 2021-02-06 23:37:53 +01:00 · 2021-02-06 23:37:53 +01:00 · 48424e213b
parent 4f1fc5f44b
commit 48424e213b
34 changed files with 722 additions and 741 deletions
--- a/README.md
+++ b/README.md
@ -90,8 +90,8 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 * Replaced *Ajax with *Fetch classes because we use the Fetch API, not jQuery.ajax
 * Replaced knockoutjs 3.4 with a modified 3.5.1
 * Replaced knockout-sortable with native HTML5 drag&drop
-* Replaced simplestatemanager with @media
-* Replaced inputosaurus to native
+* Replaced simplestatemanager with CSS @media
+* Replaced inputosaurus with own code
 * Replaced keymaster with own shortcuts handler
 * Removed pikaday
 * Removed underscore
@ -113,23 +113,23 @@ RainLoop 1.15 vs SnappyMail

 |js/*           	|RainLoop 	|Snappy   	|
 |---------------	|--------:	|--------:	|
-|admin.js        	|2.158.025	|  119.262	|
-|app.js          	|4.215.733	|  526.403	|
-|boot.js         	|  672.433	|    4.842	|
-|libs.js         	|  647.679	|  232.286	|
+|admin.js        	|2.158.025	|  119.231	|
+|app.js          	|4.215.733	|  535.140	|
+|boot.js         	|  672.433	|    4.713	|
+|libs.js         	|  647.679	|  227.645	|
 |polyfills.js    	|  325.908	|        0	|
 |serviceworker.js	|        0	|      285	|
-|TOTAL           	|8.019.778	|  883.078	|
+|TOTAL           	|8.019.778	|  887.014	|

 |js/min/*       	|RainLoop 	|Snappy   	|RL gzip	|SM gzip	|RL brotli	|SM brotli	|
 |---------------	|--------:	|--------:	|------:	|------:	|--------:	|--------:	|
-|admin.min.js    	|  255.514	|   60.784	| 73.899	| 17.359	| 60.674 	| 15.396	|
-|app.min.js      	|  516.000	|  254.960	|140.430	| 73.405	|110.657 	| 61.490	|
-|boot.min.js     	|   66.456	|    2.630	| 22.553	|  1.375	| 20.043 	|  1.189	|
-|libs.min.js     	|  574.626	|  128.347	|177.280	| 46.608	|151.855 	| 41.481	|
+|admin.min.js    	|  255.514	|   61.142	| 73.899	| 17.432	| 60.674 	| 15.454	|
+|app.min.js      	|  516.000	|  261.321	|140.430	| 75.153	|110.657 	| 63.151	|
+|boot.min.js     	|   66.456	|    2.521	| 22.553	|  1.356	| 20.043 	|  1.165	|
+|libs.min.js     	|  574.626	|  120.243	|177.280	| 44.101	|151.855 	| 39.263	|
 |polyfills.min.js	|   32.608	|        0	| 11.315	|      0	| 10.072 	|      0	|
-|TOTAL           	|1.445.204	|  446.721	|425.477	|138.747	|353.301 	|119.556	|
-|TOTAL (no admin)	|1.189.690	|  385.937	|351.061	|121.388	|292.627 	|104.160	|
+|TOTAL           	|1.445.204	|  445.227	|425.477	|138.042	|353.301 	|119.033	|
+|TOTAL (no admin)	|1.189.690	|  384.085	|351.061	|120.610	|292.627 	|103.579	|

 For a user its around 65% smaller and faster than traditional RainLoop.

@ -137,6 +137,8 @@ For a user its around 65% smaller and faster than traditional RainLoop.

 * Solve jQuery removed "features" with native css code
 * Cleanup unused css
+* Themes work in mobile mode
+* Bugfix invalid/conflicting css rules
 * Removed html.no-css
 * Removed dev/Styles/Cmd.less
 * Removed dev/Styles/Scroll.less
@ -153,14 +155,15 @@ For a user its around 65% smaller and faster than traditional RainLoop.
 * Removed vendors/jquery-nanoscroller/nanoscroller.css
 * Removed vendors/jquery-letterfx/jquery-letterfx.min.css
 * Removed vendors/Progress.js/minified/progressjs.min.css
+* Removed gulp-autoprefixer


 |css/*       	|RainLoop	|Snappy   	|RL gzip	|SM gzip	|SM brotli	|
 |------------	|-------:	|-------:	|------:	|------:	|--------:	|
-|app.css     	| 340.334	| 167.876	| 46,959	| 26.292	| 22.129	|
-|app.min.css 	| 274.791	| 136.861	| 39.618	| 23.066	| 19.978	|
-|boot.css    	|       	|   2.534	|       	|    837	|    668	|
-|boot.min.css	|       	|   2.055	|       	|    732	|    560	|
+|app.css     	| 340.334	| 158.923	| 46,959	| 25.624	| 21.575	|
+|app.min.css 	| 274.791	| 130.398	| 39.618	| 22.404	| 19.536	|
+|boot.css    	|       	|   1.820	|       	|    786	|    626	|
+|boot.min.css	|       	|   1.476	|       	|    698	|    548	|


 ### Squire vs CKEditor
--- a/dev/App/Abstract.js
+++ b/dev/App/Abstract.js
@ -121,7 +121,7 @@ export class AbstractApp {
 		initOnStartOrLangChange();

 		if (mobile) {
-			$htmlCL.add('rl-mobile');
+			$htmlCL.toggle('rl-mobile', mobile);
 			leftPanelDisabled(true);
 		} else {
 			window.addEventListener('resize', () => leftPanelDisabled(767 >= window.innerWidth));
--- a/dev/Styles/@Boot.css
+++ b/dev/Styles/@Boot.css
@ -11,7 +11,7 @@ body {
 }

 #rl-loading, #rl-loading-error {
-	color: var(--loading-color);
+	color: var(--loading-color, #000);
 	text-shadow: var(--loading-text-shadow);
 	font-size: 30px;
 	line-height: 130%;
@ -30,7 +30,7 @@ body {

 .e-spinner .e-bounce {
 	animation: bouncedelay 1.4s infinite ease-in-out;
-	background-color: var(--loading-color, #333);
+	background-color: var(--loading-color, #000);
 	border-radius: 100%;
 	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 	display: inline-block;
--- a/dev/Styles/Admin.less
+++ b/dev/Styles/Admin.less
@ -43,7 +43,7 @@
 		cursor: default;

 		background-color: transparent;
-		color: var(--settings-menu-disabled-color, #888);
+		color: var(--settings-menu-disabled-color, #666);

 		padding: 4px 10px;

@ -53,17 +53,17 @@

 	.e-item.selectable .e-link {
 		cursor: pointer;
-		color: var(--settings-menu-color);
+		color: var(--settings-menu-color, #333);
 	}

 	.e-item.selectable {
 		&:hover .e-link{
-			background-color: var(--settings-menu-hover-bg-color, #555);
-			color: var(--settings-menu-hover-color, #fff);
+			background-color: var(--settings-menu-hover-bg-color, #333);
+			color: var(--settings-menu-hover-color, #eee);
 		}
 		&.selected .e-link {
-			background-color: var(--settings-menu-selected-bg-color, #555);
-			color: var(--settings-menu-selected-color, #fff);
+			background-color: var(--settings-menu-selected-bg-color, #333);
+			color: var(--settings-menu-selected-color, #eee);
 		}
 	}
 }
--- a/dev/Styles/FolderList.less
+++ b/dev/Styles/FolderList.less
@ -86,7 +86,7 @@
 			line-height: 34px;
 			background-color: transparent;
 			vertical-align: middle;
-			color: var(--folders-disabled-color, grey);
+			color: var(--folders-disabled-color, #666);
 			cursor: not-allowed;
 			font-size: 14px;

@ -130,17 +130,17 @@

 			&.selectable {

-				color: var(--folders-color, #000);
+				color: var(--folders-color, #333);
 				cursor: pointer;

 				&:hover {
-					background-color: var(--folders-hover-bg-color, #555);
-					color: var(--folders-hover-color, #fff);
+					background-color: var(--folders-hover-bg-color, #333);
+					color: var(--folders-hover-color, #eee);
 				}

 				&.droppableHover {
-					background-color: var(--folders-drop-bg-color, #555);
-					color: var(--folders-drop-color, #fff);
+					background-color: var(--folders-drop-bg-color, #333);
+					color: var(--folders-drop-color, #eee);
 				}

 				&.droppableHover * {
@ -148,13 +148,13 @@
 				}

 				&.focused {
-					background-color: var(--folders-focused-bg-color, #555);
-					color: var(--folders-focused-color, #fff);
+					background-color: var(--folders-focused-bg-color, #333);
+					color: var(--folders-focused-color, #eee);
 				}

 				&.selected {
-					background-color: var(--folders-selected-bg-color, #555);
-					color: var(--folders-selected-color, #fff);
+					background-color: var(--folders-selected-bg-color, #333);
+					color: var(--folders-selected-color, #eee);
 				}
 			}

--- a/dev/Styles/Layout.less
+++ b/dev/Styles/Layout.less
@ -384,7 +384,7 @@ html.rl-bottom-preview-pane {
 			left: 0;
 			right: 5px;
 			box-shadow: none;
-			background-color: var(--message-bg-color);
+			background-color: var(--message-bg-color, #fff);
 		}
 	}
 }
--- a/dev/Styles/Login.less
+++ b/dev/Styles/Login.less
@ -26,7 +26,7 @@

 			.desc {
 				font-size: 30px;
-				color: var(--loading-color);
+				color: var(--loading-color, #000);
 				text-shadow: var(--loading-text-shadow);
 			}
 		}
@ -34,7 +34,7 @@
 		.loginForm {
 			background-color: var(--login-bg-color, rgba(0, 0, 0, .5));
 			border: var(--login-border, 1px solid rgba(255, 255, 255, .2));
-			border-radius: var(--login-border-radius);
+			border-radius: var(--login-border-radius, 7px);
 			box-shadow: var(--login-box-shadow);
 			margin: 0;
 		}
@ -206,7 +206,7 @@
 		right: 0;
 		bottom: 0;
 		background: var(---spinner-bg, rgba(0,0,0,.3));
-		border-radius: var(--login-border-radius);
+		border-radius: var(--login-border-radius, 7px);
 		z-index: 1051;
 		border-radius: 8px;
 	}
--- a/dev/Styles/Main.less
+++ b/dev/Styles/Main.less
@ -15,9 +15,8 @@ html, body {

 body {
 	background-color: var(--main-bg-color, #e3e3e3);
-	background-image: var(--main-bg-image);
 	background-size: var(--main-bg-size);
-	color: var(--main-color, #000);
+	color: var(--main-color, #333);

 	-webkit-touch-callout: none;

@ -28,6 +27,15 @@ body {
 	right: 0;
 }

+/*
+.rl-mobile / .no-mobile
+*/
+@media screen and (min-width: 1000px) {
+	body {
+		background-image: var(--main-bg-image);
+	}
+}
+
 textarea {
 	resize: none;
 }
@ -39,9 +47,6 @@ option:disabled {

 *, select:focus {
 	outline: none;
-}
-
-html.mobile *, html.rl-mobile * {
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 }

--- a/dev/Styles/Settings.less
+++ b/dev/Styles/Settings.less
@ -52,7 +52,7 @@
 		cursor: default;

 		background-color: transparent;
-		color: var(--settings-menu-disabled-color, #888);
+		color: var(--settings-menu-disabled-color, #666);

 		padding: 4px 10px;

@ -62,17 +62,17 @@

 	.e-item.selectable .e-link {
 		cursor: pointer;
-		color: var(--settings-menu-color);
+		color: var(--settings-menu-color, #333);
 	}

 	.e-item.selectable {
 		&:hover .e-link{
-			background-color: var(--settings-menu-hover-bg-color, #555);
-			color: var(--settings-menu-hover-color, #fff);
+			background-color: var(--settings-menu-hover-bg-color, #333);
+			color: var(--settings-menu-hover-color, #eee);
 		}
 		&.selected .e-link {
-			background-color: var(--settings-menu-selected-bg-color, #555);
-			color: var(--settings-menu-selected-color, #fff);
+			background-color: var(--settings-menu-selected-bg-color, #333);
+			color: var(--settings-menu-selected-color, #eee);
 		}
 	}
 }
--- a/dev/Styles/Ui.less
+++ b/dev/Styles/Ui.less
@ -31,19 +31,19 @@
 	.e-link {
 		text-decoration: none;
 		cursor: pointer;
-		color: var(--dropdown-menu-color);
-		background-color: var(--dropdown-menu-background-color);
+		color: var(--dropdown-menu-color, #333);
+		background-color: var(--dropdown-menu-bg-color, #fff);
 	}

 	.e-item.selected > .e-link {
-		background-color: var(--dropdown-menu-selected-background-color, #eee)  !important;
+		background-color: var(--dropdown-menu-selected-bg-color, #eee)  !important;
 	}

 	.e-item:not(.disabled) > .e-link:focus,
 	.e-item:not(.disabled) > .e-link:hover {
-		background-color: var(--dropdown-menu-hover-background-color, #555);
+		background-color: var(--dropdown-menu-hover-bg-color, #444);
 		background-image: none;
-		color: var(--dropdown-menu-hover-color, #fff);
+		color: var(--dropdown-menu-hover-color, #eee);
 	}

 	.e-item.disabled > .e-link {
--- a/dev/boot.js
+++ b/dev/boot.js
@ -4,7 +4,6 @@
 const
 	doc = document,
 	eId = id => doc.getElementById(id),
-	htmlCL = doc.documentElement.classList,
 	app = eId('rl-app'),
 	options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {},

@ -171,8 +170,6 @@ Storage('local');
 // init section
 setInterval(setTimestamp, 60000); // 1m

-htmlCL.add(options.mobileDevice ? 'mobile' : 'no-mobile');
-
 [eId('app-css'),eId('app-theme-link')].forEach(css => css.href = css.dataset.href);

 loadScript('./?/'
--- a/snappymail/v/0.0.0/app/libraries/RainLoop/Actions.php
+++ b/snappymail/v/0.0.0/app/libraries/RainLoop/Actions.php
@ -1016,7 +1016,7 @@ class Actions
 			'folderSpecLimit' => (int)$oConfig->Get('labs', 'folders_spec_limit', 50),
 			'faviconStatus' => (bool)$oConfig->Get('labs', 'favicon_status', true),
 			'listPermanentFiltered' => '' !== \trim(Api::Config()->Get('labs', 'imap_message_list_permanent_filter', '')),
-			'themes' => $this->GetThemes($bMobile, false),
+			'themes' => $this->GetThemes(),
 			'languages' => $this->GetLanguages(false),
 			'languagesAdmin' => $this->GetLanguages(true),
 			'attachmentsActions' => $aAttachmentsActions
@ -1097,7 +1097,7 @@ class Actions
 			'ParentEmail' => '',
 			'InterfaceAnimation' => true,
 			'UserBackgroundName' => '',
-			'UserBackgroundHash' => '',
+			'UserBackgroundHash' => ''
 		);

 		if (0 < \strlen($sAuthAccountHash)) {
@ -1282,7 +1282,7 @@ class Actions
 			}
 		}

-		$sTheme = $this->ValidateTheme($sTheme, $bMobile);
+		$sTheme = $this->ValidateTheme($sTheme);
 		$sStaticCache = $this->StaticCache();

 		$aResult['Theme'] = $sTheme;
@ -2082,7 +2082,7 @@ class Actions
 				$aResult[] = Enumerations\Capa::TEMPLATES;
 			}

-			if ($oConfig->Get('webmail', 'allow_themes', false) && !$bMobile) {
+			if ($oConfig->Get('webmail', 'allow_themes', false)) {
 				$aResult[] = Enumerations\Capa::THEMES;
 			}

@ -2233,14 +2233,10 @@ class Actions
 		return './?/Css/0/' . ($bAdmin ? 'Admin' : 'User') . '/-/' . $sTheme . '/-/' . $this->StaticCache() . '/Hash/-/';
 	}

-	public function ValidateTheme(string $sTheme, bool $bMobile = false): string
+	public function ValidateTheme(string $sTheme): string
 	{
-		if ($bMobile) {
-			return 'Mobile';
-		}
-
-		return \in_array($sTheme, $this->GetThemes($bMobile)) ?
-			$sTheme : $this->Config()->Get('themes', 'default', $bMobile ? 'Mobile' : 'Default');
+		return \in_array($sTheme, $this->GetThemes()) ?
+			$sTheme : $this->Config()->Get('themes', 'default', 'Default');
 	}

 	public function ValidateLanguage(string $sLanguage, string $sDefault = '', bool $bAdmin = false, bool $bAllowEmptyResult = false): string
@ -2296,22 +2292,16 @@ class Actions
 	/**
 	 * @staticvar array $aCache
 	 */
-	public function GetThemes(bool $bMobile = false, bool $bIncludeMobile = true): array
+	public function GetThemes(): array
 	{
-		if ($bMobile) {
-			return array('Mobile');
-		}
-
-		static $aCache = array('full' => null, 'mobile' => null);
-		if ($bIncludeMobile && \is_array($aCache['full'])) {
-			return $aCache['full'];
-		} else if ($bIncludeMobile && \is_array($aCache['mobile'])) {
-			return $aCache['mobile'];
+		static $aCache = array();
+		if ($aCache) {
+			return $aCache;
 		}

 		$bClear = false;
 		$bDefault = false;
-		$sList = array();
+		$aCache = array();
 		$sDir = APP_VERSION_ROOT_PATH . 'themes';
 		if (\is_dir($sDir)) {
 			$rDirH = \opendir($sDir);
@ -2322,8 +2312,8 @@ class Actions
 							$bDefault = true;
 						} else if ('Clear' === $sFile) {
 							$bClear = true;
-						} else if ($bIncludeMobile || 'Mobile' !== $sFile) {
-							$sList[] = $sFile;
+						} else {
+							$aCache[] = $sFile;
 						}
 					}
 				}
@ -2337,7 +2327,7 @@ class Actions
 			if ($rDirH) {
 				while (($sFile = \readdir($rDirH)) !== false) {
 					if ('.' !== $sFile[0] && \is_dir($sDir . '/' . $sFile) && \file_exists($sDir . '/' . $sFile . '/styles.less')) {
-						$sList[] = $sFile . '@custom';
+						$aCache[] = $sFile . '@custom';
 					}
 				}

@ -2345,19 +2335,18 @@ class Actions
 			}
 		}

-		$sList = \array_unique($sList);
-		\sort($sList);
+		$aCache = \array_unique($aCache);
+		\sort($aCache);

 		if ($bDefault) {
-			\array_unshift($sList, 'Default');
+			\array_unshift($aCache, 'Default');
 		}

 		if ($bClear) {
-			\array_push($sList, 'Clear');
+			\array_push($aCache, 'Clear');
 		}

-		$aCache[$bIncludeMobile ? 'full' : 'mobile'] = $sList;
-		return $sList;
+		return $aCache;
 	}

 	/**
@ -2445,7 +2434,7 @@ class Actions
 		\header('Location: ' . $sUrl);
 	}

-	public function GetLanguageAndTheme(bool $bAdmin = false, bool $bMobile = false): array
+	public function GetLanguageAndTheme(bool $bAdmin = false): array
 	{
 		$sTheme = $this->Config()->Get('webmail', 'theme', 'Default');

@ -2470,7 +2459,7 @@ class Actions
 		}

 		$sLanguage = $this->ValidateLanguage($sLanguage, '', $bAdmin);
-		$sTheme = $this->ValidateTheme($sTheme, $bMobile);
+		$sTheme = $this->ValidateTheme($sTheme);

 		return array($sLanguage, $sTheme);
 	}
--- a/snappymail/v/0.0.0/app/libraries/RainLoop/Service.php
+++ b/snappymail/v/0.0.0/app/libraries/RainLoop/Service.php
@ -267,17 +267,17 @@ class Service
 			'{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr',
 			'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'),
 			'{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot.min.css'),
-			'{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8')
+			'{{BaseCssClass}}' => ($bMobileDevice ? 'mobile' : 'no-mobile') . ($bMobile ? ' rl-mobile' : ''),
+			'{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8'),
+			'{{RainloopBootData}}' => \json_encode(array(
+				'admin' => $bAdmin,
+				'language' => $sLanguage,
+				'theme' => $sTheme,
+				'mobile' => $bMobile,
+				'mobileDevice' => $bMobileDevice
+			))
 		);

-		$aTemplateParameters['{{RainloopBootData}}'] = \json_encode(array(
-			'admin' => $bAdmin,
-			'language' => $sLanguage,
-			'theme' => $sTheme,
-			'mobile' => $bMobile,
-			'mobileDevice' => $bMobileDevice
-		));
-
 		$aTemplateParameters['{{BaseHash}}'] = \md5(
 			\implode('~', array(
 				$bAdmin ? '1' : '0',
--- a/snappymail/v/0.0.0/app/libraries/RainLoop/ServiceActions.php
+++ b/snappymail/v/0.0.0/app/libraries/RainLoop/ServiceActions.php
@ -625,18 +625,13 @@ class ServiceActions

 					$sThemeFile = ($bCustomTheme ? APP_INDEX_ROOT_PATH : APP_VERSION_ROOT_PATH).'themes/'.$sRealTheme.'/styles.less';

-					$sThemeValuesFile = APP_VERSION_ROOT_PATH.'app/templates/Themes/values.less';
-					$sThemeTemplateFile = APP_VERSION_ROOT_PATH.'app/templates/Themes/template.less';
-
-					if (\is_file($sThemeFile) && \is_file($sThemeTemplateFile) && \is_file($sThemeValuesFile))
+					if (\is_file($sThemeFile))
 					{
 						$aResult[] = '@base: "'
 							. ($bCustomTheme ? Utils::WebPath() : Utils::WebVersionPath())
 							. 'themes/'.$sRealTheme.'/";';

-						$aResult[] = \file_get_contents($sThemeValuesFile);
 						$aResult[] = \file_get_contents($sThemeFile);
-						$aResult[] = \file_get_contents($sThemeTemplateFile);
 					}

 					$aResult[] = $this->Plugins()->CompileCss($bAdmin);
--- a/snappymail/v/0.0.0/app/templates/Index.html
+++ b/snappymail/v/0.0.0/app/templates/Index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="rl-started-trigger" dir="{{BaseDir}}">
+<html class="rl-started-trigger {{BaseCssClass}}" dir="{{BaseDir}}">

 <head>
 	<noscript>
--- a/snappymail/v/0.0.0/app/templates/Themes/template.less
+++ b/snappymail/v/0.0.0/app/templates/Themes/template.less
@ -1,69 +0,0 @@
-
-// mixins +++
-.thm-linear-gradient-mixin(@start, @end) when (iscolor(@start)) and (iscolor(@end)) {
-    background-image: linear-gradient(to bottom, @start, @end) !important;
-    background-repeat: repeat-x !important;
-}
-
-.thm-main-bg-image(@value) when (isstring(@value)) {
-	--main-bg-image: url("@{base}@{value}");
-}
-.thm-main-bg-image(@value) when not (isstring(@value)) {
-	--main-bg-image: @value;
-}
-// --- mixins
-
-:root {
-	--main-bg-color: @main-background-color;
-	--main-bg-size: @main-background-size;
-	.thm-main-bg-image(@main-background-image);
-	--main-color: @main-color;
-
-	--loading-color: @loading-color;
-	--loading-text-shadow: @loading-text-shadow;
-
-	--login-bg-color: @login-background-color;
-	--login-border: @login-border;
-	--login-border-radius: @login-border-radius;
-	--login-box-shadow: @login-box-shadow;
-	--login-color: @login-color;
-	--login-switch-color: @powered-color;
-
-	--spinner-bg: @spinner-background;
-	--spinner-color: @spinner-color;
-
-	--folders-color: @folders-color;
-	--folders-disabled-color: @folders-disabled-color;
-	--folders-hover-color: @folders-hover-color;
-	--folders-hover-bg-color: @folders-hover-background-color;
-	--folders-selected-color: @folders-selected-color;
-	--folders-selected-bg-color: @folders-selected-background-color;
-	--folders-focused-color: @folders-focused-color;
-	--folders-focused-bg-color: @folders-focused-background-color;
-	--folders-drop-color: @folders-drop-color;
-	--folders-drop-bg-color: @folders-drop-background-color;
-
-	--dropdown-menu-color: @dropdown-menu-color;
-	--dropdown-menu-background-color: @dropdown-menu-background-color;
-	--dropdown-menu-selected-background-color: @dropdown-menu-selected-background-color;
-	--dropdown-menu-hover-color: @dropdown-menu-hover-color;
-	--dropdown-menu-hover-background-color: @dropdown-menu-hover-background-color;
-
-	--message-list-toolbar-bg-color: @message-list-toolbar-background-color;
-	--message-bg-color: @message-background-color;
-
-	--settings-menu-color: @settings-menu-color;
-	--settings-menu-disabled-color: @settings-menu-disabled-color;
-	--settings-menu-hover-bg-color: @settings-menu-hover-background-color;
-	--settings-menu-hover-color: settings-menu-hover-color;
-	--settings-menu-selected-bg-color: @settings-menu-selected-background-color;
-	--settings-menu-selected-color: @settings-menu-selected-color;
-}
-
-.loginForm {
-	.thm-linear-gradient-mixin(@login-gradient-start, @login-gradient-end);
-}
-
-.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
-	.thm-linear-gradient-mixin(@message-list-toolbar-gradient-start, @message-list-toolbar-gradient-end);
-}
--- a/snappymail/v/0.0.0/app/templates/Themes/values.less
+++ b/snappymail/v/0.0.0/app/templates/Themes/values.less
@ -1,59 +0,0 @@
-
-// MAIN
-@main-color: #333;
-@main-background-color: #e3e3e3;
-@main-background-image: none;	// "images/background.png"
-@main-background-size: inherit;
-
-// LOADING
-@loading-color: #000;			// #ddd
-@loading-text-shadow: none;		// 0px 1px 0px rgba(0, 0, 0, 0.5);
-
-// LOGIN
-@login-color: #555;
-@login-background-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
-@powered-color: #333;
-
-@spinner-background: rgba(0,0,0,.3);
-@spinner-color: #fff;
-
-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #444;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disabled-color: #999;
-@dropdown-menu-selected-background-color: #eee;
-
-// FOLDERS
-@folders-color: #333;
-@folders-disabled-color: #666;
-@folders-selected-color: #eee;
-@folders-selected-background-color: #333;
-@folders-focused-color: #eee;
-@folders-focused-background-color: #333;
-@folders-hover-color: #eee;
-@folders-hover-background-color: false;
-@folders-drop-color: #eee;
-@folders-drop-background-color: #333;
-
-// SETTINGS
-@settings-menu-color: #333;
-@settings-menu-disabled-color: #666;
-@settings-menu-selected-color: #eee;
-@settings-menu-selected-background-color: #333;
-@settings-menu-hover-color: #eee;
-@settings-menu-hover-background-color: #333;
-
-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: none;		// #f4f4f4
-@message-list-toolbar-gradient-end: none;		// #dfdfdf
-
-// MESSAGE
-@message-background-color: #fff;
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsGeneral.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsGeneral.html
@ -29,7 +29,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="control-group hide-on-mobile">
+		<div class="control-group">
 			<label class="control-label">
 			   <span class="i18n" data-i18n="SETTINGS_GENERAL/LABEL_LAYOUT"></span>
 			</label>
--- a/snappymail/v/0.0.0/themes/A/styles.less
+++ b/snappymail/v/0.0.0/themes/A/styles.less
@ -1,48 +1,53 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #48525C;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #48525C;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #fff;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #fff;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.8);
-@login-box-shadow: none;
-@login-border: none;
-@login-border-radius: 7px;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.8);
+	--login-box-shadow: none;
+	--login-border: none;
+	--login-border-radius: 7px;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #48525C;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #48525C;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Blurred/styles.less
+++ b/snappymail/v/0.0.0/themes/Blurred/styles.less
@ -1,50 +1,55 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #563c55;
-@main-background-image: "images/background.jpg";
-@main-background-size: cover;
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #563c55;
+	--main-bg-image: url("@{base}images/background.jpg");
+	--main-bg-size: cover;

-// LOADING
-@loading-color: #ddd;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #ddd;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #ddd;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #ddd;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #48525C;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #48525C;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(255,255,255,0.3);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(255,255,255,0.3);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(255,255,255,0.3);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(255,255,255,0.3);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(255,255,255,0.3);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(255,255,255,0.3);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(255,255,255,0.3);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(255,255,255,0.3);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(255,255,255,0.3);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(255,255,255,0.3);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(255,255,255,0.3);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Clear/styles.less
+++ b/snappymail/v/0.0.0/themes/Clear/styles.less
@ -1,3 +1,5 @@

-@spinner-background: rgba(255,255,255,.4);
-@spinner-color: #666;
+:root {
+	--spinner-background: rgba(255,255,255,.4);
+	--spinner-color: #666;
+}
--- a/snappymail/v/0.0.0/themes/DarkShine/styles.less
+++ b/snappymail/v/0.0.0/themes/DarkShine/styles.less
@ -1,50 +1,55 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #AD455C;
-@main-background-image: "images/background.jpg";
-@main-background-size: cover;
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #AD455C;
+	--main-bg-image: url("@{base}images/background.jpg");
+	--main-bg-size: cover;

-// LOADING
-@loading-color: #ddd;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #ddd;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #ddd;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #ddd;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #48525C;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #48525C;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(255,255,255,0.3);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(255,255,255,0.3);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(255,255,255,0.3);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(255,255,255,0.3);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(255,255,255,0.3);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(255,255,255,0.3);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(255,255,255,0.3);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(255,255,255,0.3);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(255,255,255,0.3);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(255,255,255,0.3);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(255,255,255,0.3);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Default/styles.less
+++ b/snappymail/v/0.0.0/themes/Default/styles.less
@ -1,49 +1,54 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #48525C;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #48525C;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #ddd;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #ddd;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #ddd;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #ddd;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #48525C;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #48525C;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Linen/styles.less
+++ b/snappymail/v/0.0.0/themes/Linen/styles.less
@ -1,47 +1,52 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #eee;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #eee;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #000;
+	// LOADING
+	--loading-color: #000;

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: none;
-@login-border: none;
-@login-border-radius: 7px;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: none;
+	--login-border: none;
+	--login-border-radius: 7px;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #757575;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #757575;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #333;
-@folders-disabled-color: #999;
-@folders-selected-color: #eee;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #eee;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #eee;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #eee;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #333;
+	--folders-disabled-color: #999;
+	--folders-selected-color: #eee;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #eee;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #eee;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #eee;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #333;
-@settings-menu-disabled-color: #999;
-@settings-menu-selected-color: #eee;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #eee;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #333;
+	--settings-menu-disabled-color: #999;
+	--settings-menu-selected-color: #eee;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #eee;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Love/styles.less
+++ b/snappymail/v/0.0.0/themes/Love/styles.less
@ -1,49 +1,54 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #B3274E;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #B3274E;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #fff;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #fff;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #ddd;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #ddd;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #490915;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #490915;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(0,0,0,0.3);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(0,0,0,0.3);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(0,0,0,0.3);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(0,0,0,0.3);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(0,0,0,0.3);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(0,0,0,0.3);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(0,0,0,0.3);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(0,0,0,0.3);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Mobile/images/preview.png
+++ b/snappymail/v/0.0.0/themes/Mobile/images/preview.png
--- a/snappymail/v/0.0.0/themes/Mobile/styles.less
+++ b/snappymail/v/0.0.0/themes/Mobile/styles.less
@ -1,3 +0,0 @@
-
-@spinner-background: rgba(255,255,255,.4);
-@spinner-color: #666;
--- a/snappymail/v/0.0.0/themes/Snow/styles.less
+++ b/snappymail/v/0.0.0/themes/Snow/styles.less
@ -1,49 +1,54 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #48525C;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #48525C;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #fff;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #fff;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.6);
-@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #fff;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.6);
+	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #fff;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #48525C;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #48525C;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Squares/styles.less
+++ b/snappymail/v/0.0.0/themes/Squares/styles.less
@ -1,49 +1,54 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #eee;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #eee;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #000;
+	// LOADING
+	--loading-color: #000;

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: none;
-@login-border: none;
-@login-border-radius: 7px;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: none;
+	--login-border: none;
+	--login-border-radius: 7px;

-@spinner-background: rgba(0,0,0,.2);
+	--spinner-background: rgba(0,0,0,.2);

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #757575;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #757575;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #333;
-@folders-disabled-color: #999;
-@folders-selected-color: #eee;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #eee;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #eee;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #eee;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #333;
+	--folders-disabled-color: #999;
+	--folders-selected-color: #eee;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #eee;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #eee;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #eee;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #333;
-@settings-menu-disabled-color: #999;
-@settings-menu-selected-color: #eee;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #eee;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #333;
+	--settings-menu-disabled-color: #999;
+	--settings-menu-selected-color: #eee;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #eee;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/SquaresDark/styles.less
+++ b/snappymail/v/0.0.0/themes/SquaresDark/styles.less
@ -1,49 +1,54 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #48525C;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #48525C;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #ddd;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #ddd;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #ddd;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #ddd;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #48525C;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #48525C;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #aaa;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #aaa;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #aaa;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #aaa;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Stripes/styles.less
+++ b/snappymail/v/0.0.0/themes/Stripes/styles.less
@ -1,48 +1,53 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #010101;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #010101;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #fff;
-@loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+	// LOADING
+	--loading-color: #fff;
+	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);

-// LOGIN
-@login-color: #333;
-@login-background-color: rgba(255,255,255,0.5);
-@login-border: none;
-@login-border-radius: 7px;
-@powered-color: #ddd;
+	// LOGIN
+	--login-color: #333;
+	--login-bg-color: rgba(255,255,255,0.5);
+	--login-border: none;
+	--login-border-radius: 7px;
+	--login-switch-color: #ddd;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #010101;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #010101;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #fff;
-@folders-disabled-color: #999;
-@folders-selected-color: #fff;
-@folders-selected-background-color: rgba(255,255,255,0.3);
-@folders-focused-color: #fff;
-@folders-focused-background-color: rgba(255,255,255,0.5);
-@folders-hover-color: #fff;
-@folders-hover-background-color: rgba(255,255,255,0.3);
-@folders-drop-color: #fff;
-@folders-drop-background-color: rgba(255,255,255,0.3);
+	// FOLDERS
+	--folders-color: #fff;
+	--folders-disabled-color: #999;
+	--folders-selected-color: #fff;
+	--folders-selected-bg-color: rgba(255,255,255,0.3);
+	--folders-focused-color: #fff;
+	--folders-focused-bg-color: rgba(255,255,255,0.5);
+	--folders-hover-color: #fff;
+	--folders-hover-bg-color: rgba(255,255,255,0.3);
+	--folders-drop-color: #fff;
+	--folders-drop-bg-color: rgba(255,255,255,0.3);

-// SETTINGS
-@settings-menu-color: #fff;
-@settings-menu-disabled-color: #999;
-@settings-menu-selected-color: #fff;
-@settings-menu-selected-background-color: rgba(255,255,255,0.3);
-@settings-menu-hover-color: #fff;
-@settings-menu-hover-background-color: rgba(255,255,255,0.3);
+	// SETTINGS
+	--settings-menu-color: #fff;
+	--settings-menu-disabled-color: #999;
+	--settings-menu-selected-color: #fff;
+	--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
+	--settings-menu-hover-color: #fff;
+	--settings-menu-hover-bg-color: rgba(255,255,255,0.3);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Wood/styles.less
+++ b/snappymail/v/0.0.0/themes/Wood/styles.less
@ -1,50 +1,55 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #F4D59F;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #F4D59F;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #000;
-@loading-text-shadow: none;
+	// LOADING
+	--loading-color: #000;
+	--loading-text-shadow: none;

-// LOGIN
-@login-color: #333;
-@login-background-color: rgba(255,255,255,0.7);
-@login-border: none;
-@login-border-radius: 7px;
+	// LOGIN
+	--login-color: #333;
+	--login-bg-color: rgba(255,255,255,0.7);
+	--login-border: none;
+	--login-border-radius: 7px;

-@spinner-background: rgba(255,255,255,.4);
-@spinner-color: #666;
+	--spinner-background: rgba(255,255,255,.4);
+	--spinner-color: #666;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #F4D59F;
-@dropdown-menu-hover-color: #333;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #F4D59F;
+	--dropdown-menu-hover-color: #333;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #333;
-@folders-disabled-color: #999;
-@folders-selected-color: #333;
-@folders-selected-background-color: rgba(255,255,255,0.5);
-@folders-focused-color: #333;
-@folders-focused-background-color: rgba(255,255,255,0.7);
-@folders-hover-color: #333;
-@folders-hover-background-color: rgba(255,255,255,0.5);
-@folders-drop-color: #333;
-@folders-drop-background-color: rgba(255,255,255,0.5);
+	// FOLDERS
+	--folders-color: #333;
+	--folders-disabled-color: #999;
+	--folders-selected-color: #333;
+	--folders-selected-bg-color: rgba(255,255,255,0.5);
+	--folders-focused-color: #333;
+	--folders-focused-bg-color: rgba(255,255,255,0.7);
+	--folders-hover-color: #333;
+	--folders-hover-bg-color: rgba(255,255,255,0.5);
+	--folders-drop-color: #333;
+	--folders-drop-bg-color: rgba(255,255,255,0.5);

-// SETTINGS
-@settings-menu-color: #333;
-@settings-menu-disabled-color: #999;
-@settings-menu-selected-color: #333;
-@settings-menu-selected-background-color: rgba(255,255,255,0.5);
-@settings-menu-hover-color: #333;
-@settings-menu-hover-background-color: rgba(255,255,255,0.5);
+	// SETTINGS
+	--settings-menu-color: #333;
+	--settings-menu-disabled-color: #999;
+	--settings-menu-selected-color: #333;
+	--settings-menu-selected-bg-color: rgba(255,255,255,0.5);
+	--settings-menu-hover-color: #333;
+	--settings-menu-hover-bg-color: rgba(255,255,255,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/Xv/styles.less
+++ b/snappymail/v/0.0.0/themes/Xv/styles.less
@ -1,47 +1,52 @@

-// MAIN
-@main-color: #333;
-@main-background-color: #eee;
-@main-background-image: "images/background.jpg";
+:root {
+	// MAIN
+	--main-color: #333;
+	--main-bg-color: #eee;
+	--main-bg-image: url("@{base}images/background.jpg");

-// LOADING
-@loading-color: #000;
+	// LOADING
+	--loading-color: #000;

-// LOGIN
-@login-color: #eee;
-@login-background-color: rgba(0,0,0,0.5);
-@login-box-shadow: none;
-@login-border: none;
-@login-border-radius: 7px;
+	// LOGIN
+	--login-color: #eee;
+	--login-bg-color: rgba(0,0,0,0.5);
+	--login-box-shadow: none;
+	--login-border: none;
+	--login-border-radius: 7px;

-// MENU
-@dropdown-menu-color: #333;
-@dropdown-menu-background-color: #fff;
-@dropdown-menu-hover-background-color: #757575;
-@dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+	// MENU
+	--dropdown-menu-color: #333;
+	--dropdown-menu-bg-color: #fff;
+	--dropdown-menu-hover-bg-color: #757575;
+	--dropdown-menu-hover-color: #eee;
+	--dropdown-menu-disable-color: #999;

-// FOLDERS
-@folders-color: #333;
-@folders-disabled-color: #999;
-@folders-selected-color: #eee;
-@folders-selected-background-color: rgba(0,0,0,0.5);
-@folders-focused-color: #eee;
-@folders-focused-background-color: rgba(0,0,0,0.7);
-@folders-hover-color: #eee;
-@folders-hover-background-color: rgba(0,0,0,0.5);
-@folders-drop-color: #eee;
-@folders-drop-background-color: rgba(0,0,0,0.5);
+	// FOLDERS
+	--folders-color: #333;
+	--folders-disabled-color: #999;
+	--folders-selected-color: #eee;
+	--folders-selected-bg-color: rgba(0,0,0,0.5);
+	--folders-focused-color: #eee;
+	--folders-focused-bg-color: rgba(0,0,0,0.7);
+	--folders-hover-color: #eee;
+	--folders-hover-bg-color: rgba(0,0,0,0.5);
+	--folders-drop-color: #eee;
+	--folders-drop-bg-color: rgba(0,0,0,0.5);

-// SETTINGS
-@settings-menu-color: #333;
-@settings-menu-disabled-color: #999;
-@settings-menu-selected-color: #eee;
-@settings-menu-selected-background-color: rgba(0,0,0,0.5);
-@settings-menu-hover-color: #eee;
-@settings-menu-hover-background-color: rgba(0,0,0,0.5);
+	// SETTINGS
+	--settings-menu-color: #333;
+	--settings-menu-disabled-color: #999;
+	--settings-menu-selected-color: #eee;
+	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
+	--settings-menu-hover-color: #eee;
+	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);

-// MESSAGE LIST
-@message-list-toolbar-background-color: #eee;
-@message-list-toolbar-gradient-start: #f4f4f4;
-@message-list-toolbar-gradient-end: #dfdfdf;
+	// MESSAGE LIST
+	--message-list-toolbar-bg-color: #eee;
+}
+
+.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
+    background-image: linear-gradient(to bottom, #f4f4f4, #dfdfdf) !important;
+    background-repeat: repeat-x !important;
+}
--- a/snappymail/v/0.0.0/themes/example.css
+++ b/snappymail/v/0.0.0/themes/example.css
@ -0,0 +1,61 @@
+
+:root {
+// MAIN
+	--main-color: #333;
+	--main-bg-color: #e3e3e3;
+	--main-bg-image: none;	// "images/background.png"
+	--main-bg-size: inherit;
+
+// LOADING
+	--loading-color: #000;			// #ddd
+	--loading-text-shadow: none;		// 0px 1px 0px rgba(0, 0, 0, 0.5);
+
+// 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
+	--login-switch-color: #333;
+
+	--spinner-background: rgba(0,0,0,.3);
+	--spinner-color: #fff;
+
+// 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;
+	--dropdown-menu-selected-bg-color: #eee;
+
+// FOLDERS
+	--folders-color: #333;
+	--folders-disabled-color: #666;
+	--folders-selected-color: #eee;
+	--folders-selected-bg-color: #333;
+	--folders-focused-color: #eee;
+	--folders-focused-bg-color: #333;
+	--folders-hover-color: #eee;
+	--folders-hover-bg-color: false;
+	--folders-drop-color: #eee;
+	--folders-drop-bg-color: #333;
+
+// SETTINGS
+	--settings-menu-color: #333;
+	--settings-menu-disabled-color: #666;
+	--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-toolbar-bg-color: #eee;
+	--message-list-toolbar-gradient-start: none;		// #f4f4f4
+	--message-list-toolbar-gradient-end: none;		// #dfdfdf
+
+// MESSAGE
+	--message-bg-color: #fff;
+}