Browse Source

initial work for flat modern theme

Andrew Dolgov 11 months ago
parent
commit
2ab097b2e5
100 changed files with 11968 additions and 198 deletions
  1. 22 56
      classes/feeds.php
  2. 47 64
      css/default.css
  3. 15 20
      css/dijit.less
  4. 2 1
      css/prefs.less
  5. 46 55
      css/tt-rss.less
  6. 1 1
      index.php
  7. 1 1
      js/PrefLabelTree.js
  8. 37 0
      lib/flat-ttrss/README.md
  9. 216 0
      lib/flat-ttrss/dijit/Calendar.css
  10. 247 0
      lib/flat-ttrss/dijit/Calendar.styl
  11. 6 0
      lib/flat-ttrss/dijit/Calendar_rtl.css
  12. 17 0
      lib/flat-ttrss/dijit/Calendar_rtl.styl
  13. 66 0
      lib/flat-ttrss/dijit/ColorPalette.css
  14. 69 0
      lib/flat-ttrss/dijit/ColorPalette.styl
  15. 4 0
      lib/flat-ttrss/dijit/ColorPalette_rtl.css
  16. 10 0
      lib/flat-ttrss/dijit/ColorPalette_rtl.styl
  17. 87 0
      lib/flat-ttrss/dijit/Common.css
  18. 104 0
      lib/flat-ttrss/dijit/Common.styl
  19. 274 0
      lib/flat-ttrss/dijit/Dialog.css
  20. 308 0
      lib/flat-ttrss/dijit/Dialog.styl
  21. 8 0
      lib/flat-ttrss/dijit/Dialog_rtl.css
  22. 17 0
      lib/flat-ttrss/dijit/Dialog_rtl.styl
  23. 53 0
      lib/flat-ttrss/dijit/Editor.css
  24. 69 0
      lib/flat-ttrss/dijit/Editor.styl
  25. 0 0
      lib/flat-ttrss/dijit/Editor_rtl.css
  26. 8 0
      lib/flat-ttrss/dijit/Editor_rtl.styl
  27. 23 0
      lib/flat-ttrss/dijit/InlineEditBox.css
  28. 31 0
      lib/flat-ttrss/dijit/InlineEditBox.styl
  29. 157 0
      lib/flat-ttrss/dijit/Menu.css
  30. 191 0
      lib/flat-ttrss/dijit/Menu.styl
  31. 9 0
      lib/flat-ttrss/dijit/Menu_rtl.css
  32. 20 0
      lib/flat-ttrss/dijit/Menu_rtl.styl
  33. 110 0
      lib/flat-ttrss/dijit/ProgressBar.css
  34. 70 0
      lib/flat-ttrss/dijit/ProgressBar.styl
  35. 60 0
      lib/flat-ttrss/dijit/TimePicker.css
  36. 71 0
      lib/flat-ttrss/dijit/TimePicker.styl
  37. 118 0
      lib/flat-ttrss/dijit/TitlePane.css
  38. 110 0
      lib/flat-ttrss/dijit/TitlePane.styl
  39. 7 0
      lib/flat-ttrss/dijit/TitlePane_rtl.css
  40. 18 0
      lib/flat-ttrss/dijit/TitlePane_rtl.styl
  41. 137 0
      lib/flat-ttrss/dijit/Toolbar.css
  42. 145 0
      lib/flat-ttrss/dijit/Toolbar.styl
  43. 11 0
      lib/flat-ttrss/dijit/Toolbar_rtl.css
  44. 20 0
      lib/flat-ttrss/dijit/Toolbar_rtl.styl
  45. 181 0
      lib/flat-ttrss/dijit/Tree.css
  46. 122 0
      lib/flat-ttrss/dijit/Tree.styl
  47. 9 0
      lib/flat-ttrss/dijit/Tree_rtl.css
  48. 16 0
      lib/flat-ttrss/dijit/Tree_rtl.styl
  49. 361 0
      lib/flat-ttrss/dijit/dijit_variables.styl
  50. 646 0
      lib/flat-ttrss/dijit/form/Button.css
  51. 165 0
      lib/flat-ttrss/dijit/form/Button.styl
  52. 15 0
      lib/flat-ttrss/dijit/form/Button_rtl.css
  53. 27 0
      lib/flat-ttrss/dijit/form/Button_rtl.styl
  54. 131 0
      lib/flat-ttrss/dijit/form/Checkbox.css
  55. 137 0
      lib/flat-ttrss/dijit/form/Checkbox.styl
  56. 125 0
      lib/flat-ttrss/dijit/form/NumberSpinner.css
  57. 124 0
      lib/flat-ttrss/dijit/form/NumberSpinner.styl
  58. 4 0
      lib/flat-ttrss/dijit/form/NumberSpinner_rtl.css
  59. 10 0
      lib/flat-ttrss/dijit/form/NumberSpinner_rtl.styl
  60. 157 0
      lib/flat-ttrss/dijit/form/RadioButton.css
  61. 136 0
      lib/flat-ttrss/dijit/form/RadioButton.styl
  62. 167 0
      lib/flat-ttrss/dijit/form/Select.css
  63. 164 0
      lib/flat-ttrss/dijit/form/Select.styl
  64. 15 0
      lib/flat-ttrss/dijit/form/Select_rtl.css
  65. 27 0
      lib/flat-ttrss/dijit/form/Select_rtl.styl
  66. 300 0
      lib/flat-ttrss/dijit/form/Slider.css
  67. 345 0
      lib/flat-ttrss/dijit/form/Slider.styl
  68. 32 0
      lib/flat-ttrss/dijit/form/Slider_rtl.css
  69. 39 0
      lib/flat-ttrss/dijit/form/Slider_rtl.styl
  70. 275 0
      lib/flat-ttrss/dijit/form/TextBox.css
  71. 104 0
      lib/flat-ttrss/dijit/form/TextBox.styl
  72. 21 0
      lib/flat-ttrss/dijit/form/TextBox_rtl.css
  73. 30 0
      lib/flat-ttrss/dijit/form/TextBox_rtl.styl
  74. 212 0
      lib/flat-ttrss/dijit/form/dijit_form_variables.styl
  75. BIN
      lib/flat-ttrss/dijit/images/loadingAnimation.gif
  76. BIN
      lib/flat-ttrss/dijit/images/progressBarStrips.png
  77. 169 0
      lib/flat-ttrss/dijit/layout/AccordionContainer.css
  78. 160 0
      lib/flat-ttrss/dijit/layout/AccordionContainer.styl
  79. 4 0
      lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.css
  80. 12 0
      lib/flat-ttrss/dijit/layout/AccordionContainer_rtl.styl
  81. 97 0
      lib/flat-ttrss/dijit/layout/BorderContainer.css
  82. 117 0
      lib/flat-ttrss/dijit/layout/BorderContainer.styl
  83. 36 0
      lib/flat-ttrss/dijit/layout/ContentPane.css
  84. 45 0
      lib/flat-ttrss/dijit/layout/ContentPane.styl
  85. 359 0
      lib/flat-ttrss/dijit/layout/TabContainer.css
  86. 446 0
      lib/flat-ttrss/dijit/layout/TabContainer.styl
  87. 13 0
      lib/flat-ttrss/dijit/layout/TabContainer_rtl.css
  88. 23 0
      lib/flat-ttrss/dijit/layout/TabContainer_rtl.styl
  89. 135 0
      lib/flat-ttrss/dijit/layout/dijit_layout_variables.styl
  90. 37 0
      lib/flat-ttrss/flat.css
  91. 1690 0
      lib/flat-ttrss/flat_dijit.css
  92. 177 0
      lib/flat-ttrss/flat_dijit_rtl.css
  93. 26 0
      lib/flat-ttrss/flat_rtl.css
  94. 639 0
      lib/flat-ttrss/icons/flat-icons.css
  95. 522 0
      lib/flat-ttrss/icons/flat-icons.styl
  96. BIN
      lib/flat-ttrss/icons/fonts/flat-icon.eot
  97. 122 0
      lib/flat-ttrss/icons/fonts/flat-icon.svg
  98. BIN
      lib/flat-ttrss/icons/fonts/flat-icon.ttf
  99. BIN
      lib/flat-ttrss/icons/fonts/flat-icon.woff
  100. 0 0
      lib/flat-ttrss/icons/images/loadingAnimation.gif

+ 22 - 56
classes/feeds.php

@@ -15,22 +15,6 @@ class Feeds extends Handler_Protected {
 			$feed_id, $is_cat, $search,
 			$error, $feed_last_updated) {
 
-		$catchup_sel_link = "Headlines.catchupSelection()";
-
-		$archive_sel_link = "Headlines.archiveSelection()";
-		$delete_sel_link = "Headlines.deleteSelection()";
-
-		$sel_all_link = "Headlines.select('all')";
-		$sel_unread_link = "Headlines.select('unread')";
-		$sel_none_link = "Headlines.select('none')";
-		$sel_inv_link = "Headlines.select('invert')";
-
-		$tog_unread_link = "Headlines.selectionToggleUnread()";
-		$tog_marked_link = "Headlines.selectionToggleMarked()";
-		$tog_published_link = "Headlines.selectionTogglePublished()";
-
-		$set_score_link = "Article.selectionSetScore()";
-
 		if ($is_cat) $cat_q = "&is_cat=$is_cat";
 
 		if ($search) {
@@ -39,23 +23,20 @@ class Feeds extends Handler_Protected {
 			$search_q = "";
 		}
 
-		$reply = "<span class=\"holder\">";
+		$reply = "";
 
 		$rss_link = htmlspecialchars(get_self_url_prefix() .
 			"/public.php?op=rss&id=$feed_id$cat_q$search_q");
 
-		// right part
-
 		$error_class = $error ? "error" : "";
 
-		$reply .= "<span class='r'>
-			<a href=\"#\"
+		$reply .= "<span class='left'>";
+
+		$reply .= "<a href=\"#\"
 				title=\"".__("Show as feed")."\"
 				onclick=\"App.displayDlg('".__("Show as feed")."','generatedFeed', '$feed_id:$is_cat:$rss_link')\">
-				<img class=\"noborder\" src=\"images/pub_set.png\"></a>";
-
+				<img src=\"images/pub_set.png\"></a>";
 
-#		$reply .= "<span>";
 		$reply .= "<span id='feed_title' class='$error_class'>";
 
 		if ($feed_site_url) {
@@ -75,52 +56,37 @@ class Feeds extends Handler_Protected {
 			$reply .= strip_tags($feed_title);
 		}
 
-		$reply .= "</span>";
-
-		$reply .= "</span>";
-
-#		$reply .= "</span>";
-
-		// left part
+		$reply .= "</span></span>";
 
-		$reply .= "<span class=\"main\">";
+		$reply .= "<span class=\"right\">";
 		$reply .= "<span id='selected_prompt'></span>";
-
-		/*$reply .= "<span class=\"sel_links\">
-			<a href=\"#\" onclick=\"$sel_all_link\">".__('All')."</a>,
-			<a href=\"#\" onclick=\"$sel_unread_link\">".__('Unread')."</a>,
-			<a href=\"#\" onclick=\"$sel_inv_link\">".__('Invert')."</a>,
-			<a href=\"#\" onclick=\"$sel_none_link\">".__('None')."</a></li>";
-
-		$reply .= "</span> "; */
-
+		$reply .= "&nbsp;";
 		$reply .= "<select dojoType=\"dijit.form.Select\"
 			onchange=\"Headlines.onActionChanged(this)\">";
 
 		$reply .= "<option value=\"0\" disabled='1'>".__('Select...')."</option>";
 
-		$reply .= "<option value=\"$sel_all_link\">".__('All')."</option>";
-		$reply .= "<option value=\"$sel_unread_link\">".__('Unread')."</option>";
-		$reply .= "<option value=\"$sel_inv_link\">".__('Invert')."</option>";
-		$reply .= "<option value=\"$sel_none_link\">".__('None')."</option>";
+		$reply .= "<option value=\"Headlines.select('all')\">".__('All')."</option>";
+		$reply .= "<option value=\"Headlines.select('unread')\">".__('Unread')."</option>";
+		$reply .= "<option value=\"Headlines.select('invert')\">".__('Invert')."</option>";
+		$reply .= "<option value=\"Headlines.select('none')\">".__('None')."</option>";
 
 		$reply .= "<option value=\"0\" disabled=\"1\">".__('Selection toggle:')."</option>";
 
-		$reply .= "<option value=\"$tog_unread_link\">".__('Unread')."</option>
-			<option value=\"$tog_marked_link\">".__('Starred')."</option>
-			<option value=\"$tog_published_link\">".__('Published')."</option>";
+		$reply .= "<option value=\"Headlines.selectionToggleUnread()\">".__('Unread')."</option>
+			<option value=\"Headlines.selectionToggleMarked()\">".__('Starred')."</option>
+			<option value=\"Headlines.selectionTogglePublished()\">".__('Published')."</option>";
 
 		$reply .= "<option value=\"0\" disabled=\"1\">".__('Selection:')."</option>";
 
-		$reply .= "<option value=\"$catchup_sel_link\">".__('Mark as read')."</option>";
-		$reply .= "<option value=\"$set_score_link\">".__('Set score')."</option>";
+		$reply .= "<option value=\"Headlines.catchupSelection()\">".__('Mark as read')."</option>";
+		$reply .= "<option value=\"Article.selectionSetScore()\">".__('Set score')."</option>";
 
-		if ($feed_id != "0") {
-			$reply .= "<option value=\"$archive_sel_link\">".__('Archive')."</option>";
+		if ($feed_id == 0 && !$is_cat) {
+			$reply .= "<option value=\"Headlines.archiveSelection()\">".__('Move back')."</option>";
+			$reply .= "<option value=\"Headlines.deleteSelection()\">".__('Delete')."</option>";
 		} else {
-			$reply .= "<option value=\"$archive_sel_link\">".__('Move back')."</option>";
-			$reply .= "<option value=\"$delete_sel_link\">".__('Delete')."</option>";
-
+			$reply .= "<option value=\"Headlines.archiveSelection()\">".__('Archive')."</option>";
 		}
 
 		if (PluginHost::getInstance()->get_plugin("mail")) {
@@ -148,7 +114,7 @@ class Feeds extends Handler_Protected {
 			 $reply .= $p->hook_headline_toolbar_button($feed_id, $is_cat);
 		}
 
-		$reply .= "</span></span>";
+		$reply .= "</span>";
 
 		return $reply;
 	}

+ 47 - 64
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;

+ 15 - 20
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;
 		}
-
 	}
 }
 

+ 2 - 1
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;
 	}

+ 46 - 55
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 {

+ 1 - 1
index.php

@@ -61,7 +61,7 @@
 		var __ttrss_version = "<?php echo VERSION ?>"
 	</script>
 
-	<?php echo stylesheet_tag("lib/dijit-themes/flat/flat.css"); ?>
+	<?php echo stylesheet_tag("lib/flat-ttrss/flat.css"); ?>
 
 	<?php if ($_SESSION["uid"]) {
 		$theme = get_pref("USER_CSS_THEME", false, false);

+ 1 - 1
js/PrefLabelTree.js

@@ -64,7 +64,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
 			const dialog = new dijit.Dialog({
 				id: "labelEditDlg",
 				title: __("Label Editor"),
-				style: "width: 600px",
+				style: "width: 650px",
 				setLabelColor: function (id, fg, bg) {
 
 					let kind = '';

+ 37 - 0
lib/flat-ttrss/README.md

@@ -0,0 +1,37 @@
+### Flat Theme
+
+A flat theme for Dojo Dijit.
+
+![Image of Dojo flat theme](https://cloud.githubusercontent.com/assets/4641297/9564775/6cae1f44-4e65-11e5-8415-5c8b5b68875a.png)
+
+**To Do:**
+
+1. Fix any outlying dijits using opacity for disabled.
+2. TitlePane and Accordion headers should have a separate mixin function from buttons.
+3. Alternate color classes TitlePane headers.
+4. Alternate color classes for AccordionContainer (active pane header).
+5. Alternate color classes for Sliders; and remove transparency for disabled.
+
+**Icons:**
+
+All icons are Material Design icons by Google ([LICENSE](https://github.com/google/material-design-icons/blob/master/LICENSE)), and were generated using the [IcoMoon App](https://icomoon.io/app).
+
+Icons, along with class names, `.dijitIcon*` aliases and hex codes, can be viewed in Flat Theme Test app.
+
+This theme includes the `selection.json` file, which can be loaded into the IcoMoon App for editing. This icon font includes all the icons needed for icons used in dijits (close in Dialog, etc) and all aliased `.dijitIcon*` and `.dijitEditorIcon*` classes. The hex codes should be maintained as is.
+
+The test app uses the `selection.json` to create the icons tests. The test app includes a globally exposed method `createIconClasses()`, which will create and download a text file containing the icon classes and dijit aliases, which can then be added to `flat-icons.sty` when changes are made to the icon set.
+
+NOTE: This icon set is incomplete. Many of the `.dijitIcon*` and `.dijitEditorIcon*` icons do not have suitable icons in the Google icon set. These icons have a placeholder and have been assigned hex codes. Instead of using icons which do not quite fit the use, or from different icon sets, SVGs for these icons need to be created and added to the font. The SVGs need to be created on a 24 x 24 grid and generally be of the same design as the other icons.
+
+**Issues:**
+
+1. Toggle button doesn't maintain width when unchecked.
+2. For input dijits with alternate color and required/validate, the border should also change via `.dijitTextBoxError` and equivalents. Alternate color styles are overriding.
+3. Hover and selected calendar days with background 50% border radius looks a bit off on some days.
+4. `.dijitIcon` class can cause issues when using certain icon fonts.
+
+**Improvements:**
+
+1. Consider typography, complimentary styling for native elements, helper classes, etc; and some components like Bootstrap.
+2. Alternate colors for text input dijits, checkboxes, radio buttons, sliders, title pane, tooltips.

+ 216 - 0
lib/flat-ttrss/dijit/Calendar.css

@@ -0,0 +1,216 @@
+/* Calendar
+ *
+ * Styling Calendar mainly includes:
+ *
+ * 1. Calendar container
+ * 		.dijitCalendar - main container
+ * 		.dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
+ *
+ * 2. Month
+ * 		.dijitCalendarMonthContainer
+ * 		.dijitCalendarMonthLabel
+ *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
+ *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
+ *
+ * 3. Date
+ * 		.dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
+ * 		.dijitCalendarDateTemplate - date label wrapper
+ * 		.dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
+ *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
+ * 		.dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
+ * 		.dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
+ *
+ * 4. Year
+ * 		.dijitCalendarYearContainer
+ * 		.dijitCalendarYearLabel
+ * 		.dijitCalendarPreviousYear /.dijitCalendarNextYear
+ *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
+ *
+ * 5. Dropdown Month Menu
+ * 		.dijitCalendarMonthMenu - menu container
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
+ */
+.flat .dijitCalendar {
+  background-color: #fff;
+  text-align: center;
+  padding: 4px;
+  border: 1px solid #ccc;
+  border-collapse: separate;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitCalendarMonthContainer th {
+  text-align: center;
+  line-height: 20px;
+  vertical-align: middle;
+  margin: 4px 0;
+}
+.flat .dijitCalendarArrow {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  font-size: 24px;
+  border: 1px solid transparent;
+  padding: 4px;
+}
+.flat .dijitCalendarDecrease,
+.flat .dijitCalendarIncrease {
+  display: none;
+}
+.flat .dijitCalendarDecrementArrow {
+  float: left;
+  padding-left: 2px;
+}
+.flat .dijitCalendarDecrementArrow:before {
+  content: "\f000";
+}
+.flat .dijitCalendarIncrementArrow {
+  float: right;
+  padding-right: 2px;
+}
+.flat .dijitCalendarIncrementArrow:before {
+  content: "\f001";
+}
+.flat .dijitCalendarArrowHover .dijitCalendarIncrementControl,
+.flat .dijitCalendarArrow:hover .dijitCalendarIncrementControl,
+.flat .dijitCalendarNextYearHover,
+.flat .dijitCalendarNextYear:hover,
+.flat .dijitCalendarPreviousYearHover,
+.flat .dijitCalendarPreviousYear:hover {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #ccc;
+  padding: 4px;
+  border-radius: 4px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  padding: 4px;
+}
+.flat .dijitCalendarArrowActive .dijitCalendarIncrementControl,
+.flat .dijitCalendarArrow:active .dijitCalendarIncrementControl,
+.flat .dijitCalendarNextYearActive,
+.flat .dijitCalendarNextYear:active,
+.flat .dijitCalendarPreviousYearActive,
+.flat .dijitCalendarPreviousYear:active {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitA11ySideArrow {
+/* text +/- labels instead of arrow icons, for high contrast mode */
+  display: none;
+}
+.flat .dijitCalendarContainer th,
+.flat .dijitCalendarContainer td {
+  padding: 4px;
+}
+.flat .dijitCalendarDayLabelTemplate {
+  text-align: center;
+  border-bottom: #ccc;
+}
+.flat .dijitCalendarDayLabel {
+  font-weight: bold;
+  text-align: center;
+}
+.flat .dijitCalendarDateTemplate {
+  font-size: 0.9em;
+  letter-spacing: 0.05em;
+  text-align: center;
+}
+.flat .dijitCalendarDateTemplate .dijitCalendarDateLabel {
+  text-decoration: none;
+  display: block;
+  padding: 2px 4px;
+  border: 0 none;
+  border-radius: 50%;
+}
+.flat .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
+.flat .dijitCalendarNextMonth .dijitCalendarDateLabel {
+  color: #c2c2c2;
+}
+.flat .dijitCalendarCurrentDate .dijitCalendarDateLabel {
+  border-color: #257aa7;
+}
+.flat .dijitCalendarHoveredDate .dijitCalendarDateLabel,
+.flat .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
+  background-color: #f2f2f2;
+}
+.flat .dijitCalendarActiveDate .dijitCalendarDateLabel,
+.flat .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
+  background-color: #e6e6e6;
+}
+.flat .dijitCalendarSelectedDate .dijitCalendarDateLabel,
+.flat .dijitCalendarSelectedDate.dijitCalendarHoveredDate .dijitCalendarDateLabel {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitCalendarDisabledDate .dijitCalendarDateLabel {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitCalendarYearContainer {
+  vertical-align: middle;
+}
+.flat .dijitCalendarYearLabel {
+  padding: 4px 0 0 0;
+  margin: 0;
+  font-size: 1.15em;
+}
+.flat .dijitCalendarYearLabel span {
+  vertical-align: middle;
+}
+.flat .dijitCalendarSelectedYear,
+.flat .dijitCalendarNextYear,
+.flat .dijitCalendarPreviousYear {
+  padding: 4px;
+}
+.flat .dijitCalendarSelectedYear {
+  color: #257aa7;
+}
+.flat .dijitCalendarNextYear,
+.flat .dijitCalendarPreviousYear {
+  color: #257aa7;
+  font-size: 0.9em;
+  line-height: 20px;
+  border: 1px solid transparent;
+}
+.flat .dijitCalendarSelectedYear {
+  padding: 0 4px;
+}
+.flat .dijitCalendar .dijitDropDownButton {
+  margin: 0;
+}
+.flat .dijitCalendarMonthMenu {
+  padding: 8px 0;
+}
+.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
+  padding: 4px;
+}
+.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
+  color: #fff;
+  background-color: #257aa7;
+}

+ 247 - 0
lib/flat-ttrss/dijit/Calendar.styl

@@ -0,0 +1,247 @@
+/* Calendar
+ *
+ * Styling Calendar mainly includes:
+ *
+ * 1. Calendar container
+ * 		.dijitCalendar - main container
+ * 		.dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
+ *
+ * 2. Month
+ * 		.dijitCalendarMonthContainer
+ * 		.dijitCalendarMonthLabel
+ *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
+ *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
+ *
+ * 3. Date
+ * 		.dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
+ * 		.dijitCalendarDateTemplate - date label wrapper
+ * 		.dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
+ *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
+ * 		.dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
+ * 		.dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
+ *
+ * 4. Year
+ * 		.dijitCalendarYearContainer
+ * 		.dijitCalendarYearLabel
+ * 		.dijitCalendarPreviousYear /.dijitCalendarNextYear
+ *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
+ *
+ * 5. Dropdown Month Menu
+ * 		.dijitCalendarMonthMenu - menu container
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
+ */
+
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitCalendar {
+		background-color: $calendar-background-color;
+		text-align:center;
+		padding: $calendar-padding;
+		border: 1px solid $calendar-border-color;
+		border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
+		border-radius: $calendar-border-radius;
+		box-shadow: $calendar-box-shadow;
+	}
+
+	.dijitCalendarMonthContainer th {
+		text-align:center;
+		line-height: $line-height;
+		vertical-align:middle;
+		margin: $calendar-padding 0;
+	}
+
+	/* next/previous month arrows */
+
+	.dijitCalendarArrow {
+		_icon-core-style();
+		cursor: pointer;
+		font-size: $calendar-icon-size;
+		border: 1px solid transparent;
+		padding: $padding;
+	}
+
+	// Since the arrow icons are pulled from the font, the `img` tags are not needed.
+	.dijitCalendarDecrease,
+	.dijitCalendarIncrease {
+		display: none;
+	}
+
+	.dijitCalendarDecrementArrow {
+		float: left;
+		padding-left: ($padding / 2);
+
+		&:before {
+			content: $calendar-icon-decrease;
+		}
+	}
+
+	.dijitCalendarIncrementArrow {
+		float: right;
+		padding-right: ($padding / 2);
+
+		&:before {
+			content: $calendar-icon-increase;
+		}
+	}
+
+	.dijitCalendarArrowHover .dijitCalendarIncrementControl,
+	.dijitCalendarArrow:hover .dijitCalendarIncrementControl,
+	.dijitCalendarNextYearHover, .dijitCalendarNextYear:hover,
+	.dijitCalendarPreviousYearHover, .dijitCalendarPreviousYear:hover  {
+		button-style();
+		padding: $padding;
+	}
+
+	.dijitCalendarArrowActive .dijitCalendarIncrementControl,
+	.dijitCalendarArrow:active .dijitCalendarIncrementControl,
+	.dijitCalendarNextYearActive, .dijitCalendarNextYear:active
+	.dijitCalendarPreviousYearActive, .dijitCalendarPreviousYear:active  {
+		button-active-style();
+	}
+
+	.dijitA11ySideArrow {
+		/* text +/- labels instead of arrow icons, for high contrast mode */
+		display: none;
+	}
+
+	.dijitCalendarContainer {
+		th, td {
+			padding: $calendar-day-cell-padding;
+		}
+	}
+
+	/* day */
+
+	.dijitCalendarDayLabelTemplate {
+		text-align: center;
+		border-bottom: $border-color;
+	}
+
+	.dijitCalendarDayLabel {
+		font-weight: $calendar-day-cell-font-weight;
+		text-align: center;
+	}
+
+	/* date */
+
+	.dijitCalendarDateTemplate {
+		font-size: $calendar-date-font-size;
+		letter-spacing: .05em;
+		text-align:center;
+
+		.dijitCalendarDateLabel {
+			text-decoration: none;
+			display: block;
+			padding: $calendar-date-cell-padding;
+			border: 0 none;
+			border-radius: $calendar-date-cell-border-radius;
+		}
+	}
+
+	.dijitCalendarPreviousMonth,
+	.dijitCalendarNextMonth {
+		.dijitCalendarDateLabel {
+			color: $calendar-date-cell-prev-next-month-text-color;
+		}
+	}
+
+	.dijitCalendarCurrentDate {
+		.dijitCalendarDateLabel {
+			border-color: $calendar-date-cell-current-border-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitCalendarHoveredDate .dijitCalendarDateLabel,
+	.dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
+		background-color: $calendar-date-cell-hovered-background-color;
+	}
+
+	/* active */
+
+	.dijitCalendarActiveDate .dijitCalendarDateLabel,
+	.dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
+		background-color: $calendar-date-cell-active-background-color;
+	}
+
+	/* selected */
+
+	.dijitCalendarSelectedDate,
+	.dijitCalendarSelectedDate.dijitCalendarHoveredDate {
+		 .dijitCalendarDateLabel {
+			color:$calendar-date-cell-selected-text-color;
+			background-color: $calendar-date-cell-selected-background-color;
+		}
+	}
+
+	/* disabled */
+
+	.dijitCalendarDisabledDate .dijitCalendarDateLabel {
+		opacity: $disabled-opacity;
+	}
+
+	/* year */
+
+	.dijitCalendarYearContainer {
+		vertical-align:middle;
+	}
+
+	.dijitCalendarYearLabel {
+		padding: $calendar-year-cell-padding 0 0 0;
+		margin: 0;
+		font-size: $calendar-year-font-size;
+
+		span {
+			vertical-align:middle;
+		}
+	}
+
+	.dijitCalendarSelectedYear,
+	.dijitCalendarNextYear,
+	.dijitCalendarPreviousYear {
+		padding: $padding;
+	}
+
+	.dijitCalendarSelectedYear {
+		color: $calendar-year-prev-current-year-text-color;
+	}
+
+	.dijitCalendarNextYear,
+	.dijitCalendarPreviousYear {
+		color: $calendar-year-prev-next-year-text-color;
+		font-size: $calendar-year-prev-next-year-font-size;
+		line-height: $line-height;
+		border: 1px solid transparent;
+	}
+
+	.dijitCalendarSelectedYear {
+		padding: 0 $calendar-year-cell-padding;
+	}
+
+	/* month dropdown */
+
+	.dijitCalendar .dijitDropDownButton {
+		margin: 0;
+
+		.dijitButtonNode {
+		}
+	}
+
+	.dijitCalendarMonthMenu {
+		padding: $calendar-month-dropdown-menu-padding 0;
+
+		.dijitCalendarMonthLabel {
+			padding: $calendar-month-dropdown-menu-item-padding;
+		}
+
+		.dijitCalendarMonthLabelHover {
+			color: $calendar-month-dropdown-menu-item-hovered-text-color;
+			background-color: $calendar-month-dropdown-menu-item-hovered-background-color;
+		}
+	}
+
+}

+ 6 - 0
lib/flat-ttrss/dijit/Calendar_rtl.css

@@ -0,0 +1,6 @@
+.flat .dijitCalendarRtl .dijitCalendarDecrease:before {
+  content: "\f001";
+}
+.flat .dijitCalendarRtl .dijitCalendarIncrease:before {
+  content: "\f000";
+}

+ 17 - 0
lib/flat-ttrss/dijit/Calendar_rtl.styl

@@ -0,0 +1,17 @@
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitCalendarRtl .dijitCalendarDecrease {
+		&:before {
+			content: $calendar-icon-increase;
+		}
+	}
+
+	.dijitCalendarRtl .dijitCalendarIncrease {
+		&:before {
+			content: $calendar-icon-decrease;
+		}
+	}
+	
+}

+ 66 - 0
lib/flat-ttrss/dijit/ColorPalette.css

@@ -0,0 +1,66 @@
+/* ColorPalette
+ * 
+ * Styling of the ColorPalette consists of the following:
+ * 
+ * 1. the whole color palette
+ *		.dijitColorPalette - for outline, border, and background color of the whole color palette
+ *		Note: outline does not work for IE
+ *
+ * 2. the color swatch 
+ *		.dijitColorPalette .dijitPaletteImg
+ *		transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+ *		displays border around a color swatch
+ *
+ * 3. hovered swatch
+ * 		.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
+ *		the hovered state of the color swatch - adds border
+ * 	
+ * 4. active and selected swatch
+ * 		.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
+ *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
+ *		adds border for active or selected state
+ */
+.flat .dijitColorPalette {
+  border: 1px solid #ccc;
+  background-color: #fff;
+  border-radius: 4px;
+/* swatch */
+}
+.flat .dijitColorPalette .dijitPaletteTable {
+  padding: 4px;
+}
+.flat .dijitColorPalette .dijitColorPaletteSwatch {
+  height: 15px;
+  width: 15px;
+  border-radius: 2px;
+}
+.flat .dijitColorPalette .dijitPaletteImg {
+/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+			 * displays border around a color swatch
+			 * overrides border color in dijit.css */
+  border: 1px solid transparent;
+  line-height: normal;
+}
+.flat .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg {
+  border-color: #ccc;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 2px;
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
+.flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
+.flat .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+  border: 1px solid #257aa7;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  border-radius: 2px;
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}

+ 69 - 0
lib/flat-ttrss/dijit/ColorPalette.styl

@@ -0,0 +1,69 @@
+/* ColorPalette
+ * 
+ * Styling of the ColorPalette consists of the following:
+ * 
+ * 1. the whole color palette
+ *		.dijitColorPalette - for outline, border, and background color of the whole color palette
+ *		Note: outline does not work for IE
+ *
+ * 2. the color swatch 
+ *		.dijitColorPalette .dijitPaletteImg
+ *		transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+ *		displays border around a color swatch
+ *
+ * 3. hovered swatch
+ * 		.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
+ *		the hovered state of the color swatch - adds border
+ * 	
+ * 4. active and selected swatch
+ * 		.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
+ *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
+ *		adds border for active or selected state
+ */
+
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitColorPalette {
+		border: 1px solid $colorpalette-border-color;
+		background-color: $colorpalette-background-color;
+		border-radius: $colorpalette-border-radius;
+
+		.dijitPaletteTable {
+			padding: $colorpalette-padding;
+		}
+
+		/* swatch */
+
+		.dijitColorPaletteSwatch {
+			height: $colorpalette-swatch-height;
+			width: $colorpalette-swatch-width;
+			border-radius:$colorpalette-swatch-radius;
+		}
+
+		.dijitPaletteImg {
+			/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+			 * displays border around a color swatch
+			 * overrides border color in dijit.css */
+			border: 1px solid $colorpalette-swatch-border-color;
+			line-height: normal;
+		}
+
+		.dijitPaletteCell:hover .dijitPaletteImg {
+			border-color: $colorpalette-swatch-hover-border-color;
+			box-shadow: $colorpalette-swatch-hover-box-shadow;
+			border-radius: $colorpalette-swatch-radius;
+			transform: scale(1.2);
+		}
+
+		.dijitPaletteCell:active .dijitPaletteImg,
+		.dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+			border: 1px solid $colorpalette-swatch-selected-border-color;
+			box-shadow: $colorpalette-swatch-selected-box-shadow;
+			border-radius: $colorpalette-swatch-radius;
+			transform: scale(1.2);
+		}
+	}
+	
+}

+ 4 - 0
lib/flat-ttrss/dijit/ColorPalette_rtl.css

@@ -0,0 +1,4 @@
+.flat .dijitColorPaletteRtl .dijitColorPaletteUnder {
+  left: auto;
+  right: 0;
+}

+ 10 - 0
lib/flat-ttrss/dijit/ColorPalette_rtl.styl

@@ -0,0 +1,10 @@
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitColorPaletteRtl .dijitColorPaletteUnder {
+		left: auto;
+		right: 0;
+	}
+	
+}

+ 87 - 0
lib/flat-ttrss/dijit/Common.css

@@ -0,0 +1,87 @@
+.dijitPopup {
+  border-radius: 4px;
+}
+/* ----- Drag and Drop ----- */
+.dojoDndItem {
+  border: 1px solid transparent;
+  cursor: pointer;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -webkit-transition-property: background-color, border-color, opacity;
+  -moz-transition-property: background-color, border-color, opacity;
+  -o-transition-property: background-color, border-color, opacity;
+  -ms-transition-property: background-color, border-color, opacity;
+  transition-property: background-color, border-color, opacity;
+}
+/* hover */
+.dojoDndItemOver {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.dojoDndItemAnchor {
+  background-color: transparent;
+  border: 1px dashed #257aa7;
+  border-radius: 4px;
+}
+/* selected */
+.dojoDndItemBefore {
+  background: transparent;
+  padding-top: 2px;
+  border-top: 1px solid #257aa7;
+}
+.dojoDndItemAfter {
+  background: transparent;
+  padding-bottom: 2px;
+  border-bottom: 1px solid #257aa7;
+}
+/* Avatar */
+table.dojoDndAvatar {
+  display: block;
+}
+.dojoDndAvatarHeader td {
+  display: none;
+}
+.dojoDndAvatarHeader:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: table-cell;
+}
+/* cannot drop */
+.dojoDndMove .dojoDndAvatarHeader:before {
+  color: #dd2c00;
+  content: "\f01c";
+}
+.dojoDndCopy .dojoDndAvatarHeader:before {
+  color: #dd2c00;
+  content: "\f01c";
+}
+/* can drop */
+.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before {
+  color: #43a047;
+  content: "\f008";
+}
+.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before {
+  color: #43a047;
+  content: "\f008";
+}
+.dojoDndAvatarItem {
+  border-radius: 4px;
+}
+.dojoDndAvatarItem td > * {
+  padding: 4px 8px;
+  list-style-type: none;
+  background-color: #fff;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}

+ 104 - 0
lib/flat-ttrss/dijit/Common.styl

@@ -0,0 +1,104 @@
[email protected] 'dijit_variables';
+
+.dijitPopup {
+	border-radius: $popup-border-radius;
+}
+
+/* ----- Drag and Drop ----- */
+
+.dojoDndItem {
+	border: 1px solid $dnd-item-border-color;
+	cursor: pointer;
+	transition-duration: .25s;
+	transition-property: background-color, border-color, opacity;
+}
+
+/* hover */
+
+.dojoDndItemOver {
+	background-color: $dnd-hover-background-color;
+	border-radius: $dnd-hover-border-radius;
+}
+
+.dojoDndItemAnchor {
+	background-color: $dnd-anchor-background-color;
+	border: 1px dashed $dnd-anchor-border-color;
+	border-radius: $dnd-anchor-border-radius;
+}
+
+/* selected */
+
+.dojoDndItemSelected {
+}
+
+.dojoDndItemBefore {
+	background: transparent;
+	padding-top: 2px;
+	border-top: 1px solid $dnd-avatar-item-insert-indicator-color;
+}
+
+.dojoDndItemAfter {
+	background: transparent;
+	padding-bottom: 2px;
+	border-bottom: 1px solid $dnd-avatar-item-insert-indicator-color;
+}
+
+/* Avatar */
+
+table.dojoDndAvatar {
+	display: block;
+}
+
+.dojoDndAvatarHeader {
+	td	{ 
+		display: none;
+	}
+	&:before {
+		_icon-core-style();
+		display: table-cell;
+	}
+}
+
+/* cannot drop */
+
+.dojoDndMove .dojoDndAvatarHeader {
+	&:before {
+		color: $error;
+		content: $dnd-icon-no-drop;
+	}
+}
+
+.dojoDndCopy .dojoDndAvatarHeader {
+	&:before {
+		color: $error;
+		content: $dnd-icon-no-drop;
+	}
+}
+
+/* can drop */
+
+.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{
+	&:before {
+		color: $success;
+		content: $dnd-icon-drop;
+	}
+}
+
+.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{
+	&:before {
+		color: $success;
+		content: $dnd-icon-drop;
+	}
+}
+
+.dojoDndAvatarItem {
+	border-radius: $dnd-avatar-item-border-radius;
+	td {
+		> * {
+			padding: $dnd-avatar-item-padding;
+			list-style-type: none;
+			background-color: $dnd-avatar-item-background-color;
+			box-shadow: $dnd-avatar-item-box-shadow;
+		}
+	}
+}

+ 274 - 0
lib/flat-ttrss/dijit/Dialog.css

@@ -0,0 +1,274 @@
+/* Dialog 
+ * 
+ * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
+ * 
+ * Dialog:
+ * 1. Dialog (default styling): 
+ * 		.dijitDialog - styles for dialog's bounding box
+ *
+ * 2. Dialog title 
+ * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
+ * 		.dijitDialogTitle - the text container in dialog title
+ * 
+ * 3. Dialog content 
+ * 		.dijitDialogPaneContent - main container for content area and action bar
+ * 		.dijitDialogPaneContentArea - styles for content container
+ * 
+ * 4. Dialog action bar 
+ * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
+ * 
+ * 5. Dialog underlay 
+ * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
+ * 
+ * 
+ * Tooltip & TooltipDialog:
+ * 1. tooltip content container: 
+ * 		.dijitTooltipContainer - tooltip content container
+ *
+ * 2. tooltip connector: 
+ * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
+ */
+.flat .dijitDialog {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitDialogPaneContent {
+  background-color: #fff;
+  border-radius: 0 0 4px 4px;
+  padding: 8px;
+  position: relative;
+}
+.flat .dijitDialogPaneActionBar {
+/* the bar at bottom with OK/Cancel buttons */
+  padding-top: 8px;
+  text-align: right;
+  position: relative;
+}
+.flat .dijitDialogPaneActionBar .dijitButton {
+  float: none;
+}
+.flat .dijitTooltipDialog .dijitDialogPaneActionBar {
+  border-radius: 0 0 4px 4px;
+  margin: 8px 0 0;
+}
+.flat .dijitDialogTitleBar {
+/* outer container for the titlebar of the dialog */
+  line-height: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 12px;
+  border-radius: 4px 4px 0 0;
+}
+.flat .dijitDialogTitle {
+/* typography and styling of the dialog title */
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.flat .dijitDialogCloseIcon {
+/* the default close icon for the dialog */
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitDialogCloseIcon:before {
+  content: "\f00e";
+  font-size: 20px;
+}
+.flat .dijitDialogCloseIcon .closeText {
+  display: none;
+}
+.flat .dijitDialogCloseIconHover,
+.flat .dijitDialogCloseIconActive {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitDialogUnderlay {
+  background: #000;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitTooltip,
+.flat .dijitTooltipDialog {
+/* the outermost dom node, holding the connector and container */
+  background: transparent; /* make the area on the sides of the arrow transparent */
+}
+.flat .dijitTooltipContainer {
+  background-color: #424242;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.flat .dijitTooltip .dijitTooltipContainer {
+  color: #fff;
+  border: 0 none;
+}
+.flat .dijitTooltipConnector {
+/* the arrow */
+  z-index: 2;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipABRight .dijitTooltipConnector {
+/* above or below tooltip, but the arrow appears on the right,
+			and the right edges of target and tooltip are aligned rather than the left */
+  left: auto !important;
+  right: 8px;
+}
+.flat .dijitTooltipBelow {
+/* leave room for arrow above content */
+  padding-top: 4px;
+}
+.flat .dijitTooltipBelow .dijitTooltipConnector {
+/* the arrow piece for tooltips below an element */
+  top: 0;
+  left: 8px;
+  border-bottom: 4px solid #424242;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 0;
+}
+.flat .dijitTooltipAbove {
+/* leave room for arrow below content */
+  padding-bottom: 4px;
+}
+.flat .dijitTooltipAbove .dijitTooltipConnector {
+/* the arrow piece for tooltips above an element */
+  bottom: 0;
+  left: 8px;
+  border-top: 4px solid #424242;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 0;
+}
+.flat .dijitTooltipLeft {
+  padding-right: 4px;
+}
+.flat .dijitTooltipLeft .dijitTooltipConnector {
+/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+  right: 0;
+  border-left: 4px solid #424242;
+  border-bottom: 4px solid transparent;
+  border-top: 4px solid transparent;
+  border-right: 0;
+}
+.flat .dijitTooltipRight {
+  padding-left: 4px;
+}
+.flat .dijitTooltipRight .dijitTooltipConnector {
+/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+  left: 0;
+  border-bottom: 4px solid transparent;
+  border-top: 4px solid transparent;
+  border-right: 4px solid #424242;
+}
+.flat .dijitTooltipDialog .dijitTooltipContainer {
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow {
+  padding-top: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove {
+  padding-bottom: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft {
+  padding-right: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight {
+  padding-left: 6px;
+}
+.flat .dijitTooltipDialog .dijitTooltipConnector {
+  height: 0;
+  width: 0;
+  position: absolute;
+  z-index: 2;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipDialog .dijitTooltipConnector:after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector {
+  border-color: #ccc transparent transparent;
+  border-width: 7px 7px 0; /* one extra pixel is added as the border of the arrows */
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector:after {
+  border-color: #fff transparent transparent;
+  border-width: 6px 6px 0;
+  border-style: solid;
+  left: -6px;
+  top: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector {
+  border-color: transparent transparent #ccc;
+  border-width: 0 7px 7px;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector:after {
+  border-color: transparent transparent #fff;
+  border-width: 0 6px 6px;
+  border-style: solid;
+  left: -6px;
+  bottom: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector {
+  border-color: transparent transparent transparent #ccc;
+  border-width: 7px 0 7px 7px;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector:after {
+  border-color: transparent transparent transparent #fff;
+  border-width: 6px 0 6px 6px;
+  border-style: solid;
+  top: -6px;
+  left: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector {
+  border-color: transparent #ccc transparent transparent;
+  border-width: 7px 7px 7px 0;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector:after {
+  border-color: transparent #fff transparent transparent;
+  border-width: 6px 6px 6px 0;
+  border-style: solid;
+  top: -6px;
+  right: -7px;
+}

+ 308 - 0
lib/flat-ttrss/dijit/Dialog.styl

@@ -0,0 +1,308 @@
+/* Dialog 
+ * 
+ * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
+ * 
+ * Dialog:
+ * 1. Dialog (default styling): 
+ * 		.dijitDialog - styles for dialog's bounding box
+ *
+ * 2. Dialog title 
+ * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
+ * 		.dijitDialogTitle - the text container in dialog title
+ * 
+ * 3. Dialog content 
+ * 		.dijitDialogPaneContent - main container for content area and action bar
+ * 		.dijitDialogPaneContentArea - styles for content container
+ * 
+ * 4. Dialog action bar 
+ * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
+ * 
+ * 5. Dialog underlay 
+ * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
+ * 
+ * 
+ * Tooltip & TooltipDialog:
+ * 1. tooltip content container: 
+ * 		.dijitTooltipContainer - tooltip content container
+ *
+ * 2. tooltip connector: 
+ * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
+ */
+
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+		
+	/* ----- Dialog ----- */
+	
+	.dijitDialog {
+		background-color: $dialog-background-color;
+		border: 1px solid $dialog-border-color;
+		border-radius: $dialog-border-radius;
+		box-shadow: $dialog-box-shadow;
+	}
+
+	/* content pane */
+
+	.dijitDialogPaneContent {
+		background-color: $dialog-content-bg-color;
+		border-radius: 0 0 $dialog-border-radius $dialog-border-radius;
+		padding: $dialog-padding;
+		position: relative;
+	}
+
+	/* action bar */
+
+	.dijitDialogPaneActionBar {
+		/* the bar at bottom with OK/Cancel buttons */
+		padding-top: $dialog-padding;
+		text-align: right;
+		position: relative;
+		.dijitButton {
+			float: none;
+		}
+	}
+
+	/* action bar within a TooltipDialog */
+	.dijitTooltipDialog .dijitDialogPaneActionBar {
+		border-radius: 0 0 $dialog-border-radius $dialog-border-radius
+		margin: $dialog-padding  0 0;
+	}
+
+	/* title bar */
+
+	.dijitDialogTitleBar {
+		/* outer container for the titlebar of the dialog */
+		line-height: $line-height;
+		border-bottom: 1px solid $dialog-titlebar-border-color;
+		padding: $dialog-padding $dialog-padding * 1.5;
+		border-radius: $dialog-border-radius $dialog-border-radius 0 0;
+	}
+
+	.dijitDialogTitle {
+		/* typography and styling of the dialog title */
+		font-size: $dialog-titlebar-font-size;
+		font-weight: bold;
+	}
+
+	/* close button */
+	
+	.dijitDialogCloseIcon {
+		/* the default close icon for the dialog */
+		width: $dialog-close-icon-size;
+		height: @width;
+		line-height: @height;
+		text-align: center;
+		position: absolute;
+		top: ($line-height + $dialog-padding * 2 - 20px ) * 0.5;
+		right: $dialog-padding * 1.5;
+		_icon-core-style();
+		opacity: 0.65;
+		
+		&:before {
+			content: $dialog-close-icon;
+			font-size: $dialog-close-icon-size;
+		}
+
+		.closeText {
+			display: none;
+		}
+	}
+
+	.dijitDialogCloseIconHover,
+	.dijitDialogCloseIconActive {
+		opacity: 1;
+	}
+
+	/* underlay */
+		
+	.dijitDialogUnderlay {
+		background: $dialog-underlay-color;
+		opacity: $dialog-underlay-opacity;
+	}
+
+	/* ----- Tooltip and TooltipDialog ----- */
+
+	.dijitTooltip,
+	.dijitTooltipDialog {
+		/* the outermost dom node, holding the connector and container */
+		background: transparent; /* make the area on the sides of the arrow transparent */
+	}
+
+	.dijitTooltipContainer {
+		background-color: $tooltip-background-color;
+		opacity: $tooltip-opacity;
+		padding: $tooltip-padding $tooltip-padding * 2;
+		border-radius: $tooltip-border-radius;
+	} 
+
+	.dijitTooltip .dijitTooltipContainer {
+		color: $tooltip-text-color;
+		border: $tooltip-border;
+	}
+
+	.dijitTooltipConnector {
+		/* the arrow */
+		z-index: 2;
+		width:auto;
+		height:auto;
+		opacity: $tooltip-opacity;
+	}
+
+	.dijitTooltipABRight .dijitTooltipConnector {
+		/* above or below tooltip, but the arrow appears on the right,
+			and the right edges of target and tooltip are aligned rather than the left */
+		left: auto !important;
+		right: $tooltip-padding * 2;
+	}
+
+	.dijitTooltipBelow {
+		/* leave room for arrow above content */
+		padding-top: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips below an element */
+			top: 0;
+			left: $tooltip-padding * 2;
+			border-bottom: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-left: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid transparent;
+			border-top: 0;
+		}
+	}
+
+	.dijitTooltipAbove {
+		/* leave room for arrow below content */
+		padding-bottom: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips above an element */
+			bottom: 0;
+			left: $tooltip-padding * 2;
+			border-top: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-left: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid transparent;
+			border-bottom: 0;
+		}
+	}
+
+	.dijitTooltipLeft {
+		padding-right: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+			right: 0;
+			border-left: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-bottom: $tooltip-arrow-thickness solid transparent;
+			border-top: $tooltip-arrow-thickness solid transparent;
+			border-right: 0;
+		}
+	}
+
+	.dijitTooltipRight {
+		padding-left: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+			left: 0;
+			border-bottom: $tooltip-arrow-thickness solid transparent;
+			border-top: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+		}
+	}
+
+	/* ----- TooltipDialog ----- */
+
+	.dijitTooltipDialog {
+		.dijitTooltipContainer {
+			background: $dialog-background-color;
+			border: 1px solid $dialog-border-color;
+			border-radius: $dialog-border-radius;
+			box-shadow: $dialog-box-shadow;
+			opacity:1;
+		}
+		&.dijitTooltipBelow {
+			padding-top: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipAbove {
+			padding-bottom: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipLeft {
+			padding-right: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipRight {
+			padding-left: $dialog-arrow-thickness;
+		}
+
+		/* The tooltip dialog's connector itself serves as the "border" of the arrows,*/
+		/* then using :after to overlay the connector to "fill" the arrows with the same color as the container. */
+		.dijitTooltipConnector {
+			height: 0;
+			width: 0;
+			position: absolute;
+			z-index: 2;
+			opacity: 1;
+
+			&:after {
+				content: "";
+				height: 0;
+				width: 0;
+				position: absolute;
+			}
+		}
+
+		&.dijitTooltipAbove .dijitTooltipConnector {
+			border-color: $dialog-arrow-border-color transparent transparent;
+			border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; /* one extra pixel is added as the border of the arrows */;
+			border-style: solid;
+
+			&:after {
+				border-color: $dialog-arrow-background-color transparent transparent;
+				border-width: $dialog-arrow-thickness $dialog-arrow-thickness 0;
+				border-style: solid;
+				left: - $dialog-arrow-thickness;
+				top: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipBelow .dijitTooltipConnector {
+			border-color: transparent transparent $dialog-arrow-border-color;
+			border-width: 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent transparent $dialog-arrow-background-color;
+				border-width: 0 $dialog-arrow-thickness $dialog-arrow-thickness;
+				border-style: solid;
+				left: - $dialog-arrow-thickness;
+				bottom: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipLeft .dijitTooltipConnector {
+			border-color: transparent transparent transparent $dialog-arrow-border-color;
+			border-width: $dialog-arrow-thickness + 1px 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent transparent transparent $dialog-arrow-background-color;
+				border-width: $dialog-arrow-thickness 0 $dialog-arrow-thickness $dialog-arrow-thickness;
+				border-style: solid;
+				top: - $dialog-arrow-thickness;
+				left: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipRight .dijitTooltipConnector {
+			border-color: transparent $dialog-arrow-border-color transparent transparent;
+			border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent $dialog-arrow-background-color transparent transparent;
+				border-width: $dialog-arrow-thickness $dialog-arrow-thickness $dialog-arrow-thickness 0;
+				border-style: solid;
+				top: - $dialog-arrow-thickness;
+				right: - $dialog-arrow-thickness - 1px;
+			}
+		}
+	}
+	
+}

+ 8 - 0
lib/flat-ttrss/dijit/Dialog_rtl.css

@@ -0,0 +1,8 @@
+.flat .dijitDialogRtl .dijitDialogCloseIcon {
+  right: auto;
+  left: 12px;
+}
+.flat .dijitDialogRtl .dijitDialogPaneActionBar,
+.flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar {
+  text-align: left;
+}

+ 17 - 0
lib/flat-ttrss/dijit/Dialog_rtl.styl

@@ -0,0 +1,17 @@
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitDialogRtl .dijitDialogCloseIcon {
+		right: auto;
+		left: $dialog-padding * 1.5;
+	}
+
+	.dijitDialogRtl,
+	.dijitTooltipDialogRtl {
+		.dijitDialogPaneActionBar {
+			text-align: left;
+		}
+	}
+
+}

+ 53 - 0
lib/flat-ttrss/dijit/Editor.css

@@ -0,0 +1,53 @@
+/* Editor 
+ * 
+ * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
+ * 
+ * 1. Editor iframe container (default styling): 
+ * 		.dijitEditorIFrameContainer - normal state styles: background-color, border, padding
+ *
+ * 2. hovered Editor iframe container (ie, mouse hover on editor)
+ * 		.dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
+ * 
+ * 3. focused Editor iframe container (ie, mouse focus on the editor pane)
+ * 		.dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
+ * 
+ * 3. disabled Editor iframe container 
+ * 		.dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
+ */
+.flat .dijitEditor {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+.flat .dijitEditor .dijitEditorIFrameContainer {
+  border: 1px solid transparent;
+  border-top: 1px solid #ccc;
+  padding: 4px 8px;
+  -webkit-transition: border 0.2s linear 0s;
+  -moz-transition: border 0.2s linear 0s;
+  -o-transition: border 0.2s linear 0s;
+  -ms-transition: border 0.2s linear 0s;
+  transition: border 0.2s linear 0s;
+}
+.flat .dijitEditorHover .dijitEditorIFrameContainer,
+.flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame {
+  border: 1px solid #257aa7;
+}
+.flat .dijitEditorFocused .dijitEditorIFrameContainer {
+  border: 1px solid #257aa7;
+}
+.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {
+  border: 1px solid #257aa7;
+}
+.flat .dijitEditorDisabled {
+  border: 1px solid #ccc;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitEditorDisabled .dijitEditorIFrame,
+.flat .dijitEditorDisabled .dijitEditorIFrameContainer,
+.flat .dijitEditorDisabled .dijitEditorIFrameContainer .dijitEditorIFrame {
+  background-color: #f5f5f5;
+  border: 1px solid transparent;
+}

+ 69 - 0
lib/flat-ttrss/dijit/Editor.styl

@@ -0,0 +1,69 @@
+/* Editor 
+ * 
+ * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
+ * 
+ * 1. Editor iframe container (default styling): 
+ * 		.dijitEditorIFrameContainer - normal state styles: background-color, border, padding
+ *
+ * 2. hovered Editor iframe container (ie, mouse hover on editor)
+ * 		.dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
+ * 
+ * 3. focused Editor iframe container (ie, mouse focus on the editor pane)
+ * 		.dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
+ * 
+ * 3. disabled Editor iframe container 
+ * 		.dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
+ */
+
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitEditor {
+		background-color: $editor-background-color;
+		border: 1px solid $editor-border-color;
+		border-radius: $editor-border-radius;
+
+		.dijitEditorIFrameContainer {
+			border: 1px solid $editor-iframe-border-color;
+			border-top: 1px solid $editor-border-color;
+			padding: $editor-iframe-padding;
+			transition: border 0.2s linear 0s;
+		}
+	}
+
+	/* Hover */
+
+	.dijitEditorHover {
+		.dijitEditorIFrameContainer,
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			border: 1px solid $editor-iframe-hover-border-color;
+		}
+	}
+
+	/* Focused */
+
+	.dijitEditorFocused {
+		.dijitEditorIFrameContainer {
+			border: 1px solid $editor-iframe-focused-border-color;
+		}
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			border: 1px solid $editor-iframe-focused-border-color;
+		}
+	}
+
+	/* Disabled */
+
+	.dijitEditorDisabled {
+		border: 1px solid $editor-disabled-border-color;
+		opacity: $disabled-opacity;
+
+		.dijitEditorIFrame,
+		.dijitEditorIFrameContainer,
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			background-color: $editor-iframe-disabled-background-color;
+			border: 1px solid $editor-iframe-disabled-border-color;
+		}
+	}
+	
+}

+ 0 - 0
lib/flat-ttrss/dijit/Editor_rtl.css


+ 8 - 0
lib/flat-ttrss/dijit/Editor_rtl.styl

@@ -0,0 +1,8 @@
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitEditorRtl {
+	}
+
+}

+ 23 - 0
lib/flat-ttrss/dijit/InlineEditBox.css

@@ -0,0 +1,23 @@
+/* InlineEditBox
+ * 
+ * Styling InlineEditBox mainly includes:
+ * 
+ * 1. Normal state
+ * 		.dijitInlineEditBoxDisplayMode  - for border
+ * 
+ * 2. Hover state
+ * 		.dijitInlineEditBoxDisplayModeHover - for border and background color
+ */
+.flat .dijitInlineEditBoxDisplayMode {
+  border: 1px dashed transparent;
+  padding: 4px 6px;
+}
+.flat .dijitInlineEditBoxDisplayModeHover {
+  background-color: transparent;
+  border: 1px dashed #257aa7;
+}
+.flat .dijitInlineEditBoxDisplayModeDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}

+ 31 - 0
lib/flat-ttrss/dijit/InlineEditBox.styl

@@ -0,0 +1,31 @@
+/* InlineEditBox
+ * 
+ * Styling InlineEditBox mainly includes:
+ * 
+ * 1. Normal state
+ * 		.dijitInlineEditBoxDisplayMode  - for border
+ * 
+ * 2. Hover state
+ * 		.dijitInlineEditBoxDisplayModeHover - for border and background color
+ */
+
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+			
+	.dijitInlineEditBoxDisplayMode {
+		border: 1px dashed $inlineeditbox-border-color;
+		padding: $inlineeditbox-padding;
+		border-radius: $inlineeditbox-border-radius;
+	}
+
+	.dijitInlineEditBoxDisplayModeHover {
+		background-color: $inlineeditbox-hover-background-color;
+		border: 1px dashed $inlineeditbox-hover-border-color;
+	}
+
+	.dijitInlineEditBoxDisplayModeDisabled {
+		opacity: $disabled-opacity;
+	}
+
+}

+ 157 - 0
lib/flat-ttrss/dijit/Menu.css

@@ -0,0 +1,157 @@
+/* Menu 
+
+There are three areas of styling for the Menu:  
+ 
+ 1. The menu 
+ 	There are three types of menus:
+ 	i) Context Menu
+ 	ii) Drop down Menu
+ 	iii) Navigation Menu
+ 	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
+ 	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
+  .dijitMenuTable - for padding - also affects Select widget 	
+  	
+ 2. The menu bar
+ 	.dijitMenuBar - for border, margins, padding, background-color of the menu bar
+ 	.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
+ 	
+ 3. Menu items - items in the menu.  
+ 	.dijitMenuItem - for color
+ 	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
+	td.dijitMenuItemIconCell - for padding around a  menu item's icon
+	td.dijitMenuItemLabel - for padding around a menu item's label	
+	.dijitMenuSeparatorTop - for border, top border, of the separator
+	.dijitMenuSeparatorBottom - for bottom margin of the separator
+	
+	Styles specific to ComboBox and FilteringSelect widgets: 
+	.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
+	.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
+
+*/
+.flat .dijitMenu {
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin: 0;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitMenuTable,
+.flat .dijitComboBoxMenu {
+  padding: 8px 0;
+}
+.flat .dijitComboBoxMenu {
+  margin-left: 0;
+  background-image: none;
+}
+.flat .dijitMenuTable {
+/* this prevents jiggling upon hover of a menu item */
+  border-collapse: separate;
+  border-spacing: 0 0;
+}
+.flat .dijitMenuItem,
+.flat .dijitMenuItem td {
+  line-height: 20px;
+  padding: 8px;
+  white-space: nowrap;
+}
+.flat .dijitMenuItemHover td,
+.flat .dijitMenuItemHover {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitMenuItemActive td,
+.flat .dijitMenuItemActive {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitMenuItemSelected td,
+.flat .dijitMenuItemSelected {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitMenuItemDisabled {
+  color: #9e9e9e;
+}
+.flat .dijitMenuItemDisabled.dijitMenuItemSelected td,
+.flat .dijitMenuItemDisabled.dijitMenuItemSelected {
+  color: #f2f2f2;
+  background: #5cafdb;
+}
+.flat .dijitMenuSeparatorTop {
+  height: auto;
+  margin-top: 1px; /* prevents spacing above/below separator */
+  border-bottom: 1px solid #ccc;
+}
+.flat .dijitMenuSeparatorBottom {
+  height: auto;
+  margin-bottom: 1px;
+  border-top: 1px solid transparent;
+}
+.flat td.dijitMenuItemIconCell {
+  padding: 4px;
+  margin: 0 0 0 4px;
+  text-align: center;
+}
+.flat .dijitMenuExpand {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitMenuExpand:before {
+  content: "\f001";
+}
+.flat .dijitCheckedMenuItemIconChar {
+  display: none;
+}
+.flat .dijitMenuPreviousButton,
+.flat .dijitMenuNextButton {
+  font-style: italic;
+}
+.flat .dijitMenuBar {
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+.flat .dijitMenuBar .dijitMenuItem {
+  padding: 8px 12px;
+  margin: 0;
+}
+.flat .dijitMenuBar .dijitMenuItemHover {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitMenuBar .dijitMenuItemActive {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitMenuBar .dijitMenuItemSelected,
+.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
+.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {
+  color: #fff;
+  background-color: #257aa7;
+}
+.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected {
+  color: #f2f2f2;
+  background: #5cafdb;
+}
+.flat .dijitMenuPopup {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat .dijitMenuPopup .dijitMenu {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat .dijitMenuPopup .dijitMenuItem,
+.flat .dijitMenuPopup .dijitMenuItem td {
+  padding: 8px;
+}

+ 191 - 0
lib/flat-ttrss/dijit/Menu.styl

@@ -0,0 +1,191 @@
+/* Menu 
+
+There are three areas of styling for the Menu:  
+ 
+ 1. The menu 
+ 	There are three types of menus:
+ 	i) Context Menu
+ 	ii) Drop down Menu
+ 	iii) Navigation Menu
+ 	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
+ 	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
+  .dijitMenuTable - for padding - also affects Select widget 	
+  	
+ 2. The menu bar
+ 	.dijitMenuBar - for border, margins, padding, background-color of the menu bar
+ 	.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
+ 	
+ 3. Menu items - items in the menu.  
+ 	.dijitMenuItem - for color
+ 	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
+	td.dijitMenuItemIconCell - for padding around a  menu item's icon
+	td.dijitMenuItemLabel - for padding around a menu item's label	
+	.dijitMenuSeparatorTop - for border, top border, of the separator
+	.dijitMenuSeparatorBottom - for bottom margin of the separator
+	
+	Styles specific to ComboBox and FilteringSelect widgets: 
+	.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
+	.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
+
+*/
+
[email protected] 'dijit_variables';
+
+.{$theme-name} {
+	/* ----- Menu (Common) ----- */
+	.dijitMenu {
+		background: $menu-background-color;
+		border: 1px solid $menu-border-color;
+		border-radius: $menu-border-radius;
+		margin: 0;
+		box-shadow: $popup-box-shadow;
+	}
+
+	.dijitMenuTable,
+	.dijitComboBoxMenu {
+		padding: $menu-padding 0;
+	}
+
+	.dijitComboBoxMenu {
+		margin-left:0;
+		background-image: none;
+	}
+
+	.dijitMenuTable {
+		/* this prevents jiggling upon hover of a menu item */
+		border-collapse: separate;
+		border-spacing: 0 0;
+	}
+
+	/* ---- MenuItem ---- */
+	.dijitMenuItem,
+	.dijitMenuItem td {
+		line-height: $line-height;
+		padding: $menu-item-padding;
+		white-space: nowrap;
+	}
+
+	// hover
+	.dijitMenuItemHover td,
+	.dijitMenuItemHover {
+		color: $menu-item-hovered-text-color;
+		background-color: $menu-item-hovered-background-color;
+	}
+
+	// active
+	.dijitMenuItemActive td,
+	.dijitMenuItemActive {
+		color: $menu-item-active-text-color;
+		background-color: $menu-item-active-background-color;
+	}
+
+	// selected
+	.dijitMenuItemSelected td,
+	.dijitMenuItemSelected {
+		color: $menu-item-selected-text-color;
+		background-color: $menu-item-selected-background-color;
+	}
+	
+	// disabled
+	.dijitMenuItemDisabled {
+		color: $menu-item-disabled-text-color;
+	}
+	
+	.dijitMenuItemDisabled.dijitMenuItemSelected td,
+	.dijitMenuItemDisabled.dijitMenuItemSelected {
+		color: $menu-item-disabled-hovered-text-color;
+		background: $menu-item-disabled-hovered-background-color;
+	}
+
+	/* ---- MenuItemSeparator ---- */
+	.dijitMenuSeparatorTop {
+		height: auto
+		margin-top: 1px; /* prevents spacing above/below separator */
+		border-bottom: 1px solid $menu-item-separator-top-color;
+	}
+
+	.dijitMenuSeparatorBottom {
+		height: auto;
+		margin-bottom:1px;
+		border-top: 1px solid $menu-item-separator-bottom-color;
+	}
+
+	/* ---- MenuItem icons ---- */
+	td.dijitMenuItemIconCell {
+		padding: $menu-item-icon-padding;
+		margin: 0 0 0 $menu-item-icon-margin;
+		text-align: center;
+	}
+
+	// popup menu icon
+	.dijitMenuExpand {
+		_icon-core-style();
+		&:before {
+			content: $menu-item-icon;
+		}
+	}
+
+	// checked icon
+	.dijitCheckedMenuItemIconChar {
+		display: none;
+	}
+
+	.dijitMenuPreviousButton, .dijitMenuNextButton {
+		font-style: italic;
+	}
+
+	/* ----- Menu Bar ----- */
+	.dijitMenuBar {
+		margin: 0;
+		padding: 0;
+		background-color: $menubar-background-color;
+
+		.dijitMenuItem {  
+			padding: $menubar-item-padding;
+			margin: 0;	
+		}
+		
+		// hover
+		.dijitMenuItemHover {
+			color: $menubar-item-hover-color;
+			background-color: $menubar-item-hover-background-color;
+		}
+
+		// active
+		.dijitMenuItemActive {
+			color: $menubar-item-active-color;
+			background-color: $menubar-item-active-background-color;
+		}
+		
+		// selected
+		.dijitMenuItemSelected,
+		.dijitMenuItemHover.dijitMenuItemSelected,
+		.dijitMenuItemActive.dijitMenuItemSelected {
+			color: $menubar-item-selected-text-color;
+			background-color: $menubar-item-selected-background-color;
+		}
+		
+		// disabled
+		.dijitMenuItemDisabled.dijitMenuItemSelected,
+		.dijitMenuItemDisabled.dijitMenuItemSelected {
+			color: $menu-item-disabled-hovered-text-color;
+			background: $menu-item-disabled-hovered-background-color;
+		}
+	}
+
+	/* ---- MenuBar Dropdown ---- */
+	.dijitMenuPopup {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+
+		.dijitMenu {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+		.dijitMenuItem, 
+		.dijitMenuItem td {
+			padding: $menubar-popup-item-padding;
+		}
+	}
+}

+ 9 - 0
lib/flat-ttrss/dijit/Menu_rtl.css

@@ -0,0 +1,9 @@
+.flat .dijitMenuBarRtl {
+  text-align: right;
+}
+.flat .dijitMenuItemRtl {
+  text-align: right;
+}
+.flat .dijitMenuItemRtl .dijitMenuExpand:before {
+  content: "\f000";
+}

+ 20 - 0
lib/flat-ttrss/dijit/Menu_rtl.styl

@@ -0,0 +1,20 @@
[email protected] 'dijit_variables';
+
+
+.{$theme-name} {
+
+	.dijitMenuBarRtl {
+		text-align: right;
+	}
+
+	.dijitMenuItemRtl {
+		text-align: right;
+		
+		.dijitMenuExpand {
+			&:before {
+				content: $menu-item-icon-rtl;
+			}
+		}
+	}
+	
+}

+ 110 - 0
lib/flat-ttrss/dijit/ProgressBar.css

@@ -0,0 +1,110 @@
+/* ProgressBar
+ * 
+ * Styling of the ProgressBar consists of the following:
+ * 
+ * 1. the base progress bar
+ *		.dijitProgressBar -	sets margins for the progress bar
+ *
+ * 2. the empty bar
+ *		.dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
+ *		Also sets border color for whole bar
+ *
+ * 3. tile mode
+ * 		.dijitProgressBarTile
+ *		inner container for finished portion when in 'tile' (image) mode 
+ * 	
+ * 4. full bar mode
+ * 		.dijitProgressBarFull
+ *		adds border to right side of the filled portion of bar
+ *
+ * 5. text for label of  bar
+ *		.dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
+ * 	
+ * 6. indeterminate mode
+ *		.dijitProgressBarIndeterminate .dijitProgressBarTile 
+ * 		sets animated gif for the progress bar in 'indeterminate' mode
+ */
+.flat .dijitProgressBar {
+  background-color: #e0e0e0;
+  border: 0 none;
+  border-radius: 4px;
+}
+.flat .dijitProgressBarTile {
+  background: url("images/progressBarStrips.png") repeat-x top;
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -moz-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  -ms-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite;
+}
+.flat .dijitProgressBarFull {
+  background-color: #257aa7;
+  -webkit-transition-property: width;
+  -moz-transition-property: width;
+  -o-transition-property: width;
+  -ms-transition-property: width;
+  transition-property: width;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  height: 100%;
+}
+.flat .dijitProgressBar.alt-primary .dijitProgressBarFull {
+  background-color: #1e88e5;
+}
+.flat .dijitProgressBar.alt-success .dijitProgressBarFull {
+  background-color: #43a047;
+}
+.flat .dijitProgressBar.alt-info .dijitProgressBarFull {
+  background-color: #03a9f4;
+}
+.flat .dijitProgressBar.alt-warning .dijitProgressBarFull {
+  background-color: #fb8c00;
+}
+.flat .dijitProgressBar.alt-danger .dijitProgressBarFull {
+  background-color: #e53935;
+}
+.flat .dijitProgressBar.alt-inverse .dijitProgressBarFull {
+  background-color: #616161;
+}
+.flat .dijitProgressBarLabel {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+  color: #fff;
+  font-size: 1em;
+  text-shadow: 0.1em 0.1em 1px #424242;
+}
[email protected] progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
[email protected] progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
[email protected] progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }