initial work for flat modern theme

4 files changed, 110 insertions, 140 deletions

diff --git a/css/default.css b/css/default.css
index 2783de5ae..3956d0fbb 100644
--- a/css/default.css
+++ b/css/default.css
@@ -424,43 +424,39 @@ body.ttrss_main .insensitive {
 body.ttrss_main .small {
   font-size: 11px;
 }
+body.ttrss_main #main-toolbar {
+  background: white;
+  border: 0px solid #ddd;
+  border-bottom-width: 1px;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  color: #555555;
+  font-size: 12px;
+}
 body.ttrss_main #main-toolbar > * {
-  white-space: nowrap;
-  display: table-cell;
-  color: #999;
-  overflow: hidden;
+  align-self: center;
 }
-body.ttrss_main #main-toolbar > *,
-body.ttrss_main #main-toolbar table *,
-body.ttrss_main #main-toolbar .actionChooser * {
-  text-rendering: optimizelegibility;
-  font-size: 12px;
+body.ttrss_main #main-toolbar .dijitSelect,
+body.ttrss_main #main-toolbar .dijitDropDownButton .dijitButtonNode,
+body.ttrss_main #main-toolbar .dijitComboButton .dijitButtonNode {
+  border: 0px;
 }
 body.ttrss_main #main-toolbar #headlines-toolbar {
   padding-right: 4px;
-  width: 80%;
-}
-body.ttrss_main #main-toolbar #headlines-toolbar span.holder {
-  display: table;
-  width: 100%;
-}
-body.ttrss_main #main-toolbar #headlines-toolbar span.holder > * {
-  display: table-cell;
-}
-body.ttrss_main #main-toolbar #headlines-toolbar .main {
-  text-align: right;
+  flex-grow: 2;
+  display: flex;
 }
-body.ttrss_main #main-toolbar #headlines-toolbar .main,
-body.ttrss_main #main-toolbar #headlines-toolbar .r {
-  line-height: 24px;
+body.ttrss_main #main-toolbar #headlines-toolbar .left {
+  flex-grow: 2;
 }
-body.ttrss_main #main-toolbar #headlines-toolbar span.r img {
-  margin-right: 4px;
+body.ttrss_main #main-toolbar #headlines-toolbar .left img {
+  vertical-align: middle;
+  margin-right: 8px;
   position: relative;
-  top: 3px;
-}
-body.ttrss_main #main-toolbar #headlines-toolbar span.r .error a {
-  color: red;
+  top: -2px;
 }
 body.ttrss_main #main-toolbar #selected_prompt {
   font-style: italic;
@@ -506,6 +502,7 @@ body.ttrss_main img[src*='mark_set.png'] {
   opacity: 1;
 }
 body.ttrss_main div.tagCloudContainer {
+  background: white;
   border: 1px solid #ddd;
   margin: 5px 0px 5px 0px;
   padding: 5px;
@@ -529,6 +526,7 @@ body.ttrss_main ul.feedErrorsList em {
 }
 body.ttrss_main ul.browseFeedList {
   height: 300px;
+  width: 100%;
   overflow: auto;
   border-width: 0px 1px 1px 1px;
   border-color: #ddd;
@@ -657,7 +655,8 @@ body.ttrss_main div.dlgSecSimple hr {
   border: 0px solid transparent;
   margin: 2px;
 }
-body.ttrss_main div.dlgButtons {
+body.ttrss_main .dijitDialog .dlgButtons {
+  margin-top: 4px;
   text-align: right;
   clear: both;
 }
@@ -669,7 +668,6 @@ body.ttrss_main span.labelColorIndicator {
   vertical-align: middle;
   font-size: 9px;
   display: inline-block;
-  border: 1px solid #ccc;
   background-color: #fff7d5;
   color: #063064;
   text-align: center;
@@ -768,7 +766,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected {
   box-shadow: -1px 0px 2px -1px rgba(0, 0, 0, 0.1);
-  border-color: #ccc transparent;
+  border-color: #ddd transparent;
   background: white;
 }
 body.ttrss_main #feeds-holder #feedTree img.tinyFeedIcon {
@@ -814,13 +812,6 @@ body.ttrss_main #toolbar {
   white-space: nowrap;
   font-size: 12px;
 }
-body.ttrss_main #main-toolbar {
-  background: white;
-  border: 0px solid #ddd;
-  border-bottom-width: 1px;
-  padding-left: 4px;
-  height: 26px;
-}
 body.ttrss_main #header {
   border-width: 0px;
   text-align: right;
@@ -898,10 +889,11 @@ body.ttrss_main ul#filterDlg_Actions {
   list-style-type: none;
   border-style: solid;
   border-color: #ddd;
-  border-width: 0px 1px 1px 1px;
+  border-width: 1px 1px 1px 1px;
   background-color: white;
   margin: 0px 0px 5px 0px;
-  padding: 0px;
+  padding: 4px;
+  min-height: 16px;
 }
 body.ttrss_main ul#filterDlg_Matches li,
 body.ttrss_main ul#filterDlg_Actions li {
@@ -1466,9 +1458,9 @@ body.ttrss_prefs div.inactiveFeedHolder {
   height: 300px;
   overflow: auto;
   border: 1px solid #ddd;
-  border-top-width: 0px;
   margin: 0px 0px 5px 0px;
   background-color: white;
+  padding: 4px;
 }
 body.ttrss_prefs div.filterTestHolder,
 body.ttrss_prefs div.prefFeedOPMLHolder {
@@ -1524,28 +1516,6 @@ body.ttrss_prefs hr {
   border-color: #ecf4ff;
   max-width: 100%;
 }
-.flat {
-  /* .dijitCheckBox {
-		background-image: url("../images/untick.png");
-		background-color: transparent;
-		width: 15px;
-		height: 15px;
-		margin: 1px;
-		opacity: 0.7;
-		background-position: center center;
-		transition: opacity 0.25s;
-		-webkit-transition: opacity 0.25s;
-		padding: 1px;
-		border-width : 0px;
-		content : "";
-	}
-
-	.dijitCheckBox.dijitCheckBoxChecked {
-		border-color: #69C671;
-		background-image: url("../images/tick.png");
-		opacity: 1;
-	} */
-}
 .flat li {
   padding: 2px;
 }
@@ -1553,6 +1523,12 @@ body.ttrss_prefs hr {
 .flat #filterDlg_Matches span.filterRule.inverse {
   color: red;
 }
+.flat .dijitDialog .dijitDialogPaneContent {
+  background: #f5f5f5;
+}
+.flat .dijitAccordionContainer {
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+}
 .flat .filterRules span {
   display: block;
   color: green;
@@ -1567,6 +1543,13 @@ body.ttrss_prefs hr {
 .flat .dijitTab:not(.dijitTabChecked) {
   background: #f5f5f5;
 }
+.flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel {
+  padding: 4px 8px;
+  font-size: 13px;
+}
+.flat .dijitMenu .dijitMenuItem td {
+  padding: 0px;
+}
 .flat .dijitCheckBox {
   border: 0px;
   background: #ccc;
diff --git a/css/dijit.less b/css/dijit.less
index 149131475..c777f9e26 100644
--- a/css/dijit.less
+++ b/css/dijit.less
@@ -9,6 +9,14 @@
 		color: red;
 	}
 
+	.dijitDialog .dijitDialogPaneContent {
+		background : #f5f5f5;
+	}
+
+	.dijitAccordionContainer {
+		box-shadow : 0px 0px 8px rgba(0,0,0,0.1);
+	}
+
 	.filterRules span {
 		display: block;
 		color: green;
@@ -27,26 +35,14 @@
 		background : #f5f5f5;
 	}
 
-	/* .dijitCheckBox {
-		background-image: url("../images/untick.png");
-		background-color: transparent;
-		width: 15px;
-		height: 15px;
-		margin: 1px;
-		opacity: 0.7;
-		background-position: center center;
-		transition: opacity 0.25s;
-		-webkit-transition: opacity 0.25s;
-		padding: 1px;
-		border-width : 0px;
-		content : "";
+	.dijitMenu .dijitMenuItem .dijitMenuItemLabel {
+		padding : 4px 8px;
+		font-size : 13px;
 	}
 
-	.dijitCheckBox.dijitCheckBoxChecked {
-		border-color: #69C671;
-		background-image: url("../images/tick.png");
-		opacity: 1;
-	} */
+	.dijitMenu .dijitMenuItem td {
+		padding : 0px;
+	}
 
 	.dijitCheckBox {
 		border : 0px;
@@ -66,7 +62,7 @@
 	.dijitTree {
 		.dijitFolderClosed,
 		.dijitFolderOpened {
-			display: none;
+			display : none;
 		}
 
 		.dijitTreeRow .dijitTreeExpando {
@@ -115,7 +111,6 @@
 			border-width : 1px;
 			color : #333;
 		}
-
 	}
 }
 
diff --git a/css/prefs.less b/css/prefs.less
index e9b9ec46d..708a299c2 100644
--- a/css/prefs.less
+++ b/css/prefs.less
@@ -72,10 +72,11 @@ body.ttrss_prefs {
 		height : 300px;
 		overflow : auto;
 		border: 1px solid #ddd;
-		border-top-width: 0px;
 		margin : 0px 0px 5px 0px;
 		background-color : white;
+		padding : 4px;
 	}
+
 	div.filterTestHolder, div.prefFeedOPMLHolder {
 		border-width : 1px;
 	}
diff --git a/css/tt-rss.less b/css/tt-rss.less
index 51666b21f..f41144b42 100755
--- a/css/tt-rss.less
+++ b/css/tt-rss.less
@@ -461,55 +461,46 @@ body.ttrss_main {
 	}
 
 	#main-toolbar {
+		background : white;
+		border: 0px solid #ddd;
+		border-bottom-width: 1px;
+		height : 32px;
+		line-height : 32px;
+		display : flex;
+		flex-direction : row;
+		flex-wrap : nowrap;
+		color : @default-text;
+		font-size : 12px;
 
 		> * {
-			white-space : nowrap;
-			display : table-cell;
-			color : #999;
-			overflow : hidden;
+			align-self : center;
 		}
 
-		> *,
-		table *,
-		.actionChooser * {
-			text-rendering: optimizelegibility;
-			//font-family : @fonts-ui;
-			font-size : 12px;
+		.dijitSelect,
+		.dijitDropDownButton .dijitButtonNode,
+		.dijitComboButton .dijitButtonNode {
+			border : 0px;
+		}
+
+		#main_toolbar_form {
 
 		}
 
 		#headlines-toolbar {
 			padding-right : 4px;
-			width : 80%;
-
-			span.holder {
-				display : table;
-				width : 100%;
-			}
-
-			span.holder > * {
-				display : table-cell;
-			}
-
-			.main {
-				text-align : right;
-			}
-
-			.main,
-			.r {
-				line-height : 24px;
-			}
-
-			span.r img {
-				margin-right : 4px;
-				position : relative;
-				top : 3px;
+			flex-grow : 2;
+			display : flex;
+
+			.left {
+				flex-grow: 2;
+
+				img {
+					vertical-align : middle;
+					margin-right : 8px;
+					position : relative;
+					top : -2px;
+				}
 			}
-
-			span.r .error a {
-				color : red;
-			}
-
 		}
 
 		#selected_prompt {
@@ -518,6 +509,10 @@ body.ttrss_main {
 			margin-right : 4px;
 		}
 
+		.actionChooser {
+
+		}
+
 		@media (max-width: 992px) {
 			#selected_prompt {
 				display : none;
@@ -562,6 +557,7 @@ body.ttrss_main {
 	}
 
 	div.tagCloudContainer {
+		background : white;
 		border : 1px solid #ddd;
 		margin : 5px 0px 5px 0px;
 		padding : 5px;
@@ -590,6 +586,7 @@ body.ttrss_main {
 
 	ul.browseFeedList {
 		height : 300px;
+		width : 100%;
 		overflow : auto;
 		border-width : 0px 1px 1px 1px;
 		border-color : #ddd;
@@ -742,9 +739,12 @@ body.ttrss_main {
 		margin : 2px;
 	}
 
-	div.dlgButtons {
-		text-align : right;
-		clear : both;
+	.dijitDialog {
+		.dlgButtons {
+			margin-top : 4px;
+			text-align: right;
+			clear: both;
+		}
 	}
 
 	span.labelColorIndicator {
@@ -755,7 +755,6 @@ body.ttrss_main {
 		vertical-align : middle;
 		font-size : 9px;
 		display : inline-block;
-		border : 1px solid #ccc;
 		background-color : #fff7d5;
 		color : #063064;
 		text-align : center;
@@ -869,7 +868,7 @@ body.ttrss_main {
 
 			.dijitTreeNode .dijitTreeRowSelected {
 				box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
-				border-color : #ccc transparent;
+				border-color : #ddd transparent;
 				background : white;
 			}
 
@@ -934,15 +933,6 @@ body.ttrss_main {
 		font-size : 12px;
 	}
 
-	#main-toolbar {
-		background : white;
-		border: 0px solid #ddd;
-		border-bottom-width: 1px;
-		padding-left : 4px;
-		height : 26px;
-
-	}
-
 	#header {
 		border-width : 0px;
 		text-align : right;
@@ -1027,10 +1017,11 @@ body.ttrss_main {
 		list-style-type : none;
 		border-style : solid;
 		border-color : #ddd;
-		border-width : 0px 1px 1px 1px;
+		border-width : 1px 1px 1px 1px;
 		background-color : white;
 		margin : 0px 0px 5px 0px;
-		padding : 0px;
+		padding : 4px;
+		min-height : 16px;
 	}
 
 	ul#filterDlg_Matches li, ul#filterDlg_Actions li {