various CSS updates for flat theme

4 files changed, 246 insertions, 124 deletions

diff --git a/css/default.css b/css/default.css
index daa19a0d0..2783de5ae 100644
--- a/css/default.css
+++ b/css/default.css
@@ -20,14 +20,7 @@ body.ttrss_main {
 		border-top-width : 1px;
 		border-style : solid;
 	} */
-  /* ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox {
-		margin-right : 5px;
-	} */
-  /* #headlines-frame .dijitCheckBox {
-		border-width : 0px;
-		opacity : 0.5;
-	}
-
+  /*
 	#headlines-frame .dijitCheckBoxHover,
 	#headlines-frame .dijitCheckBoxChecked {
 		opacity : 1;
@@ -441,12 +434,11 @@ body.ttrss_main #main-toolbar > *,
 body.ttrss_main #main-toolbar table *,
 body.ttrss_main #main-toolbar .actionChooser * {
   text-rendering: optimizelegibility;
-  font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
 }
 body.ttrss_main #main-toolbar #headlines-toolbar {
   padding-right: 4px;
-  width: 100%;
+  width: 80%;
 }
 body.ttrss_main #main-toolbar #headlines-toolbar span.holder {
   display: table;
@@ -726,47 +718,12 @@ body.ttrss_main #feeds-holder {
   background: #f5f5f5;
   box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1);
   -webkit-overflow-scrolling: touch;
-  /* #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
-			font-weight : bold;
-		}
-
-		#feedTree .dijitTreeRow.Error .dijitTreeLabel {
-			color : red;
-		}
-
-		#feedTree .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
-			color : #909090;
-		}
-
-		#feedTree.dijitTree .dijitTreeNode .dijitTreeRowSelected {
-			box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
-			border-right-color : white;
-		}
-
-		#feedTree.dijitTree .dijitTreeContainer {
-			max-width : 100%;
-		}
-
-		#feedTree.dijitTree .dijitTreeRow {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		#feedTree.dijitTree .dijitTreeNode .dijitTreeRow {
-			padding : 4px 0px 4px;
-			border-width : 1px;
-			color : #333;
-		}
-
-		#feedTree.dijitTree img.tinyFeedIcon {
-			position : relative;
-			top : -2px;
-		} */
 }
 body.ttrss_main #feeds-holder #feedTree {
   height: 100%;
   overflow-x: hidden;
   text-rendering: optimizelegibility;
+  font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 body.ttrss_main #feeds-holder #feedTree .counterNode.aux {
   background: #f0f0f0;
@@ -795,7 +752,28 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
   left: -3px;
   height: 22px;
   position: relative;
-  top: -3px;
+  top: -6px;
+}
+body.ttrss_main #feeds-holder #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
+  font-weight: bold;
+}
+body.ttrss_main #feeds-holder #feedTree .dijitTreeRow.Error .dijitTreeLabel {
+  color: red;
+}
+body.ttrss_main #feeds-holder #feedTree .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
+  color: #909090;
+}
+body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
+  border: 1px solid transparent;
+}
+body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected {
+  box-shadow: -1px 0px 2px -1px rgba(0, 0, 0, 0.1);
+  border-color: #ccc transparent;
+  background: white;
+}
+body.ttrss_main #feeds-holder #feedTree img.tinyFeedIcon {
+  position: relative;
+  top: -2px;
 }
 body.ttrss_main #headlines-wrap-inner {
   padding: 0px;
@@ -928,7 +906,10 @@ body.ttrss_main ul#filterDlg_Actions {
 body.ttrss_main ul#filterDlg_Matches li,
 body.ttrss_main ul#filterDlg_Actions li {
   cursor: pointer;
-  padding: 0px 0px 0px 5px;
+}
+body.ttrss_main ul#filterDlg_Matches li .dijitCheckBox,
+body.ttrss_main ul#filterDlg_Actions li .dijitCheckBox {
+  margin-right: 4px;
 }
 body.ttrss_main ul.helpKbList {
   max-height: 300px;
@@ -965,6 +946,9 @@ body.ttrss_main span.highlight {
   background-color: #ffff00;
   color: #cc90cc;
 }
+body.ttrss_main #headlines-frame .dijitCheckBox {
+  margin-right: 4px;
+}
 body.ttrss_main #editTagsDlg {
   overflow: visible;
 }
@@ -1408,10 +1392,22 @@ div.cdm.expandable:not(.active) .collapse {
 body.ttrss_prefs {
   background-color: #f5f5f5;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
+  font-size: 14px;
   /* div#pref-tabs .dijitContentPane {
 		font-size : 14px;
 	} */
+  /* div#pref-tabs {
+		box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
+		margin : 0px 5px 0px 5px;
+	} */
+  /* div#pref-tabs .dijitContentPane {
+		h1:first-of-type,
+		h2:first-of-type,
+		h3:first-of-type,
+		h4:first-of-type {
+			margin-top: 0px;
+		}
+	} */
   /* preferences */
   /* table.prefPrefsList h3 {
 		margin-top : 0.5em;
@@ -1431,15 +1427,10 @@ body.ttrss_prefs #header img {
   vertical-align: middle;
   cursor: pointer;
 }
-body.ttrss_prefs div#pref-tabs {
-  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
-  margin: 0px 5px 0px 5px;
-}
-body.ttrss_prefs div#pref-tabs .dijitContentPane h1:first-of-type,
-body.ttrss_prefs div#pref-tabs .dijitContentPane h2:first-of-type,
-body.ttrss_prefs div#pref-tabs .dijitContentPane h3:first-of-type,
-body.ttrss_prefs div#pref-tabs .dijitContentPane h4:first-of-type {
-  margin-top: 0px;
+body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon,
+body.ttrss_prefs .dijitTree#labelTree .dijitTreeIcon,
+body.ttrss_prefs .dijitTree#filterTree .dijitTreeIcon {
+  display: none;
 }
 body.ttrss_prefs #pref-filter-wrap,
 body.ttrss_prefs #pref-filter-header,
@@ -1533,23 +1524,74 @@ body.ttrss_prefs hr {
   border-color: #ecf4ff;
   max-width: 100%;
 }
-.flat .dijitTree .filterRules span.inverse,
+.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;
+}
+.flat .filterRules span.inverse,
 .flat #filterDlg_Matches span.filterRule.inverse {
   color: red;
 }
+.flat .filterRules span {
+  display: block;
+  color: green;
+}
+.flat #filterDlg_Matches span.filterRule {
+  color: green;
+}
 .flat .dijitToolbar {
   font-size: 13px;
+  padding: 0px;
+}
+.flat .dijitTab:not(.dijitTabChecked) {
+  background: #f5f5f5;
+}
+.flat .dijitCheckBox {
+  border: 0px;
+  background: #ccc;
+}
+.flat .dijitCheckBox:before {
+  font-family: "flat-icon";
+  content: "\f00c";
+  color: white;
+}
+.flat .dijitCheckBox.dijitCheckBoxChecked {
+  background-color: #69C671;
 }
 .flat .dijitTree .dijitFolderClosed,
 .flat .dijitTree .dijitFolderOpened {
   display: none;
 }
-.flat .dijitTree .filterRules span {
-  display: block;
-  color: green;
+.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
+  position: relative;
+  top: -2px;
 }
-.flat .dijitTree #filterDlg_Matches span.filterRule {
-  color: green;
+.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
+  color: #257aa7;
+}
+.flat .dijitTree .dijitTreeNode .dijitTreeRowSelected {
+  background: white;
 }
 .flat .dijitTree .labelParam {
   float: right;
@@ -1567,6 +1609,18 @@ body.ttrss_prefs hr {
   margin-left: 100px;
   line-height: normal;
 }
+.flat .dijitTree .dijitTreeContainer {
+  max-width: 100%;
+}
+.flat .dijitTree .dijitTreeRow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flat .dijitTree .dijitTreeNode .dijitTreeRow {
+  padding: 4px 0px 4px;
+  border-width: 1px;
+  color: #333;
+}
 /* Tree */
 .claro {
   /*.dijitTree .dijitTreeRow {
diff --git a/css/dijit.less b/css/dijit.less
index b27609ca3..149131475 100644
--- a/css/dijit.less
+++ b/css/dijit.less
@@ -1,11 +1,66 @@
 .flat {
-	.dijitTree .filterRules span.inverse,
+
+	li {
+		padding : 2px;
+	}
+
+	.filterRules span.inverse,
 	#filterDlg_Matches span.filterRule.inverse {
 		color: red;
 	}
 
+	.filterRules span {
+		display: block;
+		color: green;
+	}
+
+	#filterDlg_Matches span.filterRule {
+		color: green;
+	}
+
 	.dijitToolbar {
 		font-size : 13px;
+		padding : 0px;
+	}
+
+	.dijitTab:not(.dijitTabChecked) {
+		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 : "";
+	}
+
+	.dijitCheckBox.dijitCheckBoxChecked {
+		border-color: #69C671;
+		background-image: url("../images/tick.png");
+		opacity: 1;
+	} */
+
+	.dijitCheckBox {
+		border : 0px;
+		background : #ccc;
+	}
+
+	.dijitCheckBox:before {
+		font-family: "flat-icon";
+		content : "\f00c";
+		color : white;
+	}
+
+	.dijitCheckBox.dijitCheckBoxChecked {
+		background-color : #69C671;
 	}
 
 	.dijitTree {
@@ -14,13 +69,17 @@
 			display: none;
 		}
 
-		.filterRules span {
-			display: block;
-			color: green;
+		.dijitTreeRow .dijitTreeExpando {
+			position : relative;
+			top : -2px;
+		}
+
+		.dijitTreeRowSelected .dijitTreeExpando {
+			color : @color-accent;
 		}
 
-		#filterDlg_Matches span.filterRule {
-			color: green;
+		.dijitTreeNode .dijitTreeRowSelected {
+			background : white;
 		}
 
 		.labelParam {
@@ -42,6 +101,21 @@
 			line-height : normal;
 		}
 
+		.dijitTreeContainer {
+			max-width : 100%;
+		}
+
+		.dijitTreeRow {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.dijitTreeNode .dijitTreeRow {
+			padding : 4px 0px 4px;
+			border-width : 1px;
+			color : #333;
+		}
+
 	}
 }
 
diff --git a/css/prefs.less b/css/prefs.less
index f1b403429..e9b9ec46d 100644
--- a/css/prefs.less
+++ b/css/prefs.less
@@ -1,7 +1,7 @@
 body.ttrss_prefs {
 	background-color : #f5f5f5;
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 13px;
+	font-size: 14px;
 
 	#footer, #header {
 		background-color : #f5f5f5;
@@ -18,24 +18,29 @@ body.ttrss_prefs {
 		cursor : pointer;
 	}
 
+	.dijitTree#filterTree .dijitTreeIcon,
+	.dijitTree#labelTree .dijitTreeIcon,
+	.dijitTree#filterTree .dijitTreeIcon {
+		display : none;
+	}
 
 	/* div#pref-tabs .dijitContentPane {
 		font-size : 14px;
 	} */
 
-	div#pref-tabs {
+	/* div#pref-tabs {
 		box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 		margin : 0px 5px 0px 5px;
-	}
+	} */
 
-	div#pref-tabs .dijitContentPane {
+	/* div#pref-tabs .dijitContentPane {
 		h1:first-of-type,
 		h2:first-of-type,
 		h3:first-of-type,
 		h4:first-of-type {
 			margin-top: 0px;
 		}
-	}
+	} */
 
 	#pref-filter-wrap, #pref-filter-header, #pref-filter-content,
 	#pref-label-wrap, #pref-label-header, #pref-label-content,
diff --git a/css/tt-rss.less b/css/tt-rss.less
index 035a0e376..51666b21f 100755
--- a/css/tt-rss.less
+++ b/css/tt-rss.less
@@ -473,14 +473,14 @@ body.ttrss_main {
 		table *,
 		.actionChooser * {
 			text-rendering: optimizelegibility;
-			font-family : @fonts-ui;
+			//font-family : @fonts-ui;
 			font-size : 12px;
 
 		}
 
 		#headlines-toolbar {
 			padding-right : 4px;
-			width : 100%;
+			width : 80%;
 
 			span.holder {
 				display : table;
@@ -813,48 +813,11 @@ body.ttrss_main {
 		box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1);
 		-webkit-overflow-scrolling : touch;
 
-		/* #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
-			font-weight : bold;
-		}
-
-		#feedTree .dijitTreeRow.Error .dijitTreeLabel {
-			color : red;
-		}
-
-		#feedTree .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
-			color : #909090;
-		}
-
-		#feedTree.dijitTree .dijitTreeNode .dijitTreeRowSelected {
-			box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
-			border-right-color : white;
-		}
-
-		#feedTree.dijitTree .dijitTreeContainer {
-			max-width : 100%;
-		}
-
-		#feedTree.dijitTree .dijitTreeRow {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		#feedTree.dijitTree .dijitTreeNode .dijitTreeRow {
-			padding : 4px 0px 4px;
-			border-width : 1px;
-			color : #333;
-		}
-
-		#feedTree.dijitTree img.tinyFeedIcon {
-			position : relative;
-			top : -2px;
-		} */
-
 		#feedTree {
 			height : 100%;
 			overflow-x : hidden;
 			text-rendering: optimizelegibility;
-			//font-family : @fonts-ui;
+			font-family : @fonts-ui;
 
 			.counterNode.aux {
 				background : #f0f0f0;
@@ -885,7 +848,34 @@ body.ttrss_main {
 				left : -3px;
 				height : 22px;
 				position : relative;
-				top : -3px;
+				top : -6px;
+			}
+
+			.dijitTreeRow .dijitTreeLabel.Unread {
+				font-weight : bold;
+			}
+
+			.dijitTreeRow.Error .dijitTreeLabel {
+				color : red;
+			}
+
+			.dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
+				color : #909090;
+			}
+
+			.dijitTreeNode .dijitTreeRow {
+				border : 1px solid transparent;
+			}
+
+			.dijitTreeNode .dijitTreeRowSelected {
+				box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
+				border-color : #ccc transparent;
+				background : white;
+			}
+
+			img.tinyFeedIcon {
+				position : relative;
+				top : -2px;
 			}
 
 		}
@@ -1045,7 +1035,10 @@ body.ttrss_main {
 
 	ul#filterDlg_Matches li, ul#filterDlg_Actions li {
 		cursor : pointer;
-		padding : 0px 0px 0px 5px;
+	}
+
+	ul#filterDlg_Matches li .dijitCheckBox, ul#filterDlg_Actions li .dijitCheckBox {
+		margin-right: 4px;
 	}
 
 	ul.helpKbList {
@@ -1085,10 +1078,6 @@ body.ttrss_main {
 		width : 410px;
 	}
 
-	/* ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox {
-		margin-right : 5px;
-	} */
-
 	span.highlight {
 		background-color : #ffff00;
 		color : #cc90cc;
@@ -1098,11 +1087,11 @@ body.ttrss_main {
 
 	}
 
-	/* #headlines-frame .dijitCheckBox {
-		border-width : 0px;
-		opacity : 0.5;
+	#headlines-frame .dijitCheckBox {
+		margin-right : 4px;
 	}
 
+	/*
 	#headlines-frame .dijitCheckBoxHover,
 	#headlines-frame .dijitCheckBoxChecked {
 		opacity : 1;