Browse Source

rebuild flat theme with dark base color and rebase night.css on it

Andrew Dolgov 11 months ago
parent
commit
b786713560
10 changed files with 2355 additions and 614 deletions
  1. 130 128
      css/default.css
  2. 1 1
      css/default.css.map
  3. 4 1
      css/default.less
  4. 1 4
      css/defines.less
  5. 36 44
      css/dijit.less
  6. 22 0
      css/dijit_light.less
  7. 1 0
      lib/flat-ttrss/flat_combined_dark.css
  8. 1987 164
      themes/night.css
  9. 1 1
      themes/night.css.map
  10. 172 271
      themes/night.less

+ 130 - 128
css/default.css

@@ -1543,101 +1543,6 @@ body.ttrss_prefs hr {
   border-color: #ecf4ff;
   max-width: 100%;
 }
-.flat li {
-  padding: 2px;
-}
-.flat .filterRules span.inverse,
-.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;
-}
-.flat #filterDlg_Matches span.filterRule {
-  color: green;
-}
-.flat .dijitToolbar {
-  font-size: 13px;
-  padding: 0px;
-}
-.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;
-}
-.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 .dijitTreeRow .dijitTreeExpando {
-  position: relative;
-  top: -2px;
-}
-.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
-  color: #257aa7;
-}
-.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
-  color: white;
-}
-.flat .dijitTree .labelParam {
-  float: right;
-  margin-right: 1em;
-}
-.flat .dijitTree .labelParam.filterDisabled,
-.flat .dijitTree .dijitTreeLabel.filterDisabled {
-  text-decoration: line-through;
-}
-.flat .dijitTree .feedParam {
-  color: #555555;
-  float: right;
-  margin-right: 1em;
-}
-.flat .dijitTree .filterRules {
-  display: block;
-  color: #ccc;
-  font-size: 12px;
-  margin-left: 100px;
-  line-height: normal;
-}
-.flat .dijitTree .dijitTreeRowSelected .filterRules span {
-  color: white;
-}
-.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;
-}
 body.ttrss_utility.sanity_failed {
   background: #900;
 }
@@ -1879,6 +1784,136 @@ body#sharepopup form {
 body#sharepopup input {
   width: 100%;
 }
+.flat li {
+  padding: 2px;
+}
+.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.dijitCheckBoxChecked {
+  background-color: #69C671;
+}
+.flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel {
+  padding: 4px 8px;
+  font-size: 13px;
+}
+.flat .dijitMenu .dijitMenuItem td {
+  padding: 0px;
+}
+.flat .dijitCheckBox:before {
+  font-family: "flat-icon";
+  content: "\f00c";
+  color: white;
+}
+.flat .dijitTree .dijitFolderClosed,
+.flat .dijitTree .dijitFolderOpened {
+  display: none;
+}
+.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
+  position: relative;
+  top: -2px;
+}
+.flat .dijitTree .labelParam {
+  float: right;
+  margin-right: 1em;
+}
+.flat .dijitTree .labelParam.filterDisabled,
+.flat .dijitTree .dijitTreeLabel.filterDisabled {
+  text-decoration: line-through;
+}
+.flat .dijitTree .feedParam {
+  color: #555555;
+  float: right;
+  margin-right: 1em;
+}
+.flat .dijitTree .filterRules {
+  display: block;
+  color: #ccc;
+  font-size: 12px;
+  margin-left: 100px;
+  line-height: normal;
+}
+.flat .dijitTree .dijitTreeContainer {
+  max-width: 100%;
+}
+.flat .dijitTree .dijitTreeRow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
[email protected] {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../lib/iconfont/MaterialIcons-Regular.eot);
+  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../lib/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../lib/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../lib/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+  
+  /* For IE6-8 */
+}
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 18px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  color: #777;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  vertical-align: middle;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+.flat .filterRules span.inverse,
+.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 .dijitTab:not(.dijitTabChecked) {
+  background: #f5f5f5;
+}
+.flat .dijitCheckBox {
+  background: #ccc;
+}
+.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
+  color: #257aa7;
+}
+.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
+  color: white;
+}
+.flat .dijitTree .dijitTreeRowSelected .filterRules span {
+  color: white;
+}
+.flat .dijitTree .dijitTreeNode .dijitTreeRow {
+  padding: 4px 0px 4px;
+  border-width: 1px;
+  color: #333;
+}
 body.ttrss_zoom {
   margin-left: auto;
   margin-right: auto;
@@ -1976,37 +2011,4 @@ body.ttrss_zoom div.post div.content pre {
   max-width: 98%;
   overflow: auto;
 }
[email protected] {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../lib/iconfont/MaterialIcons-Regular.eot);
-  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../lib/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../lib/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../lib/iconfont/MaterialIcons-Regular.ttf) format('truetype');
-  
-  /* For IE6-8 */
-}
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 18px;
-  /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  color: #777;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  vertical-align: middle;
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}
 /*# sourceMappingURL=default.css.map */

File diff suppressed because it is too large
+ 1 - 1
css/default.css.map


+ 4 - 1
css/default.less

@@ -1 +1,4 @@
[email protected] "defines.less";
[email protected] "defines.less";
[email protected] "dijit_light.less";
[email protected] "zoom.less";
[email protected] "../lib/flat-ttrss/flat_combined.css";

+ 1 - 4
css/defines.less

@@ -24,11 +24,8 @@ body.ttrss_prefs,
 @import "tt-rss.less";
 @import "cdm.less";
 @import "prefs.less";
[email protected] "dijit.less";
 @import "utility.less";
[email protected] "zoom.less";
-
[email protected] "../lib/flat-ttrss/flat_combined.css";
[email protected] "dijit_basic.less";
 
 @font-face {
   font-family: 'Material Icons';

+ 36 - 44
css/dijit.less

@@ -1,7 +1,16 @@
 .flat {
 
 	li {
-		padding : 2px;
+		padding: 2px;
+	}
+
+	.filterRules span {
+		display: block;
+		color: green;
+	}
+
+	#filterDlg_Matches span.filterRule {
+		color: green;
 	}
 
 	.filterRules span.inverse,
@@ -9,54 +18,40 @@
 		color: red;
 	}
 
-	.dijitDialog .dijitDialogPaneContent {
-		background : @color-panel-bg;
+	.dijitToolbar {
+		font-size: 13px;
+		padding: 0px;
 	}
 
 	.dijitAccordionContainer {
 		box-shadow : 0px 0px 8px rgba(0,0,0,0.1);
 	}
 
-	.filterRules span {
-		display: block;
-		color: green;
-	}
-
-	#filterDlg_Matches span.filterRule {
-		color: green;
+	.dijitDialog .dijitDialogPaneContent {
+		background : @bg-panel;
 	}
 
-	.dijitToolbar {
-		font-size : 13px;
-		padding : 0px;
+	.dijitTab:not(.dijitTabChecked) {
+		background : @bg-panel;
 	}
 
-	.dijitTab:not(.dijitTabChecked) {
-		background : @color-panel-bg;
+	.dijitCheckBox.dijitCheckBoxChecked {
+		background-color : #69C671;
 	}
 
 	.dijitMenu .dijitMenuItem .dijitMenuItemLabel {
-		padding : 4px 8px;
-		font-size : 13px;
+		padding: 4px 8px;
+		font-size: 13px;
 	}
 
 	.dijitMenu .dijitMenuItem td {
-		padding : 0px;
-	}
-
-	.dijitCheckBox {
-		border : 0px;
-		background : #ccc;
+		padding: 0px;
 	}
 
 	.dijitCheckBox:before {
 		font-family: "flat-icon";
-		content : "\f00c";
-		color : white;
-	}
-
-	.dijitCheckBox.dijitCheckBoxChecked {
-		background-color : #69C671;
+		content: "\f00c";
+		color: white;
 	}
 
 	.dijitTree {
@@ -65,19 +60,24 @@
 			display : none;
 		}
 
-		.dijitTreeRow .dijitTreeExpando {
-			position : relative;
-			top : -2px;
-		}
+		.dijitTreeRowSelected {
+			.filterRules span {
+				color : white;
+			}
 
-		.dijitTreeRowSelected .dijitTreeExpando {
-			color : @color-accent;
+			.dijitTreeExpando {
+				color : @color-accent;
+			}
 		}
 
 		.dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
 			color : white;
 		}
 
+		.dijitTreeRow .dijitTreeExpando {
+			position : relative;
+			top : -2px;
+		}
 		.labelParam {
 			float: right;
 			margin-right: 1em;
@@ -102,9 +102,6 @@
 			line-height : normal;
 		}
 
-		.dijitTreeRowSelected .filterRules span {
-			color : white;
-		}
 
 		.dijitTreeContainer {
 			max-width : 100%;
@@ -115,10 +112,5 @@
 			text-overflow: ellipsis;
 		}
 
-		.dijitTreeNode .dijitTreeRow {
-			padding : 4px 0px 4px;
-			border-width : 1px;
-			color : #333;
-		}
 	}
-}
+}

+ 22 - 0
css/dijit_light.less

@@ -0,0 +1,22 @@
+.flat {
+
+	.dijitDialog .dijitDialogPaneContent {
+		background : @color-panel-bg;
+	}
+
+	.dijitTab:not(.dijitTabChecked) {
+		background : @color-panel-bg;
+	}
+
+	.dijitCheckBox {
+		background : #ccc;
+	}
+
+	.dijitTree {
+		.dijitTreeNode .dijitTreeRow {
+			padding : 4px 0px 4px;
+			border-width : 1px;
+			color : #333;
+		}
+	}
+}

File diff suppressed because it is too large
+ 1 - 0
lib/flat-ttrss/flat_combined_dark.css


File diff suppressed because it is too large
+ 1987 - 164
themes/night.css


File diff suppressed because it is too large
+ 1 - 1
themes/night.css.map


+ 172 - 271
themes/night.less

@@ -1,276 +1,177 @@
[email protected] "../css/default.css";
-
-:root {
-  --bg-main : #333;
-  --border-main : #666;
-  --border-dark : #222;
-  --bg-panel : #222;
-  --fg-main: #999;
-  --fg-light : #ccc;
-  --bg-active: #2a89bc;
[email protected] "../css/defines.less";
[email protected] "../lib/flat-ttrss/flat_combined_dark.css";
+
[email protected] : #333;
[email protected] : #666;
[email protected] : #222;
[email protected] : #222;
[email protected]: #ccc;
[email protected] : #ccc;
[email protected]: #2a89bc;
+
+body.flat.ttrss_main.ttrss_prefs {
+	#main, #footer {
+		background: @bg-panel;
+	}
+
+	#footer a {
+		color : #fff;
+	}
 }
 
-/* main layout overrides */
-
-body.flat.ttrss_main.ttrss_index {
-
-  #feeds-holder {
-    background : var(--bg-panel);
-    box-shadow : inset -1px 0px 2px -1px var(--border-main);
-  }
-
-  #headlines-frame,
-  div.whiteBox {
-    border-color : var(--border-main);
-  }
-
-  #main,
-  #overlay {
-    background : var(--bg-main);
-    color : var(--fg-main);
-  }
-
-  #content-insert {
-    background : var(--bg-main);
-  }
-
-  #content-insert_splitter {
-    border-color : var(--border-main);
-    background : var(--bg-panel);
-  }
-
-  #feeds-holder_splitter {
-    border-color : var(--border-main);
-    background : var(--bg-main);
-  }
-
-  /* misc */
-
-  .insensitive {
-    color : var(--fg-light);
-  }
-
-  hr,
-  h1,
-  h2,
-  h3 {
-    border-color : var(--border-dark);
-  }
-
-  code {
-    color : #c90 ! important;
-  }
-
-  pre {
-    color : var(--fg-main);
-    background : var(--bg-panel) ! important;
-  }
-
-  /* feeds */
-
-  #feeds-holder {
-    #feedTree .dijitTreeRow {
-      color : var(--fg-light) ! important;
-    }
-
-    #feedTree.dijitTree .dijitTreeRowHover {
-      background : var(--bg-panel);
-      border-color : var(--border-main) transparent;
-    }
-
-    #feedTree.dijitTree .dijitTreeRowSelected {
-      background : var(--bg-main);
-      border-color : var(--bg-main) transparent;
-    }
-
-    #feedTree .dijitTreeRowSelected .dijitTreeLabel {
-      text-shadow : none;
-    }
-
-    #feedTree .counterNode.aux {
-      background : var(--bg-panel);
-      color : var(--fg-main);
-      border-color : var(--bg-main);
-    }
-
-  }
-
-  /* headlines */
-
-  #headlines-frame {
-    background : var(--bg-main);
-    color : var(--fg-light);
-
-    i.material-icons,
-    .dijitCheckBox {
-      opacity : 0.7;
-    }
-
-    .hl {
-      border-color : var(--border-dark);
-    }
-
-    .hl:not(.Selected):not(.active) .title a {
-      color : var(--fg-main);
-    }
-
-    .hl.Unread:not(.Selected):not(.active) .title a {
-      color : var(--fg-light);
-    }
-
-  }
-
-  /* toolbar */
-
-  #toolbar-frame #toolbar {
-    background : var(--bg-panel);
-    border-color : var(--border-dark);
-
-    .dijitButtonText {
-      color : var(--fg-light);
-    }
-
-    .dijitSelect,
-    .dijitDropDownButton .dijitButtonNode,
-    .dijitComboButton .dijitButtonNode,
-    .dijitSelect .dijitButtonText {
-      background : var(--bg-panel);
-    }
-  }
-
-  .hl .feed a,
-  .cdm .feed a {
-    color : white;
-  }
-
-
-  .post .header {
-    background : var(--bg-panel);
-    border-color : var(--border-main);
-  }
-
-  .post .content,
-  .cdm .content-inner {
-    color : var(--fg-main);
-  }
-
-  .post .content img,
-  .cdm .content-inner img,
-  .post .content video,
-  .cdm .content-inner video {
-    transition : opacity 0.5s linear, filter 0.5s linear;
-  }
-
-  .post .content img:not(:hover),
-  .cdm .content-inner img:not(:hover),
-  .post .content video:not(:hover),
-  .cdm .content-inner video:not(:hover) {
-    opacity : 0.5;
-    filter: grayscale(80%);
-  }
-
-  div.cdm div.footer {
-    border-color : var(--border-dark);
-    color : var(--fg-light);
-  }
-
-  div.cdm .header a.title {
-    color : var(--fg-main);
-  }
-
-  div.cdm.Unread .header a.title {
-    color : var(--fg-light);
-  }
-
-  .cdm.expandable.active .header a.title,
-  .cdm.expanded.active .header a.title {
-    color : #2a89bc;
-  }
-
-  #headlines-frame .cdm {
-    border-color : var(--border-dark);
-  }
-
-  #headlines-frame .cdm .header .author {
-    color : var(--fg-main);
-  }
-
-  #headlines-frame .cdm.expandable {
-    background : var(--bg-main) ! important;
-  }
-
-  #headlines-frame .cdm.expandable.Selected {
-    background : var(--bg-active) ! important;
-  }
-
-  #headlines-frame .cdm.expandable.active {
-    background : var(--bg-main);
-  }
-
-  #headlines-frame .cdm.expanded.active {
-    background : var(--bg-main);
-  }
-
-  #content-insert blockquote,
-  #headlines-frame blockquote,
-  .dijitContentPane blockquote {
-    color : var(--fg-main);
-    border-color : var(--border-main);
-  }
-
-  .dijitInputField.dijitButtonText {
-    background : var(--bg-main);
-  }
-
-  .cdm .footer img {
-    opacity : 0.6;
-  }
-
-  #floatingTitle {
-    background : var(--bg-panel);
-    border-color : var(--border-main);
-  }
-
-  #floatingTitle * {
-    color : var(--fg-light) ! important;
-  }
-
-  /* other dijits */
-
-  .dijitMenu,
-  .dijitMenuTable,
-  .dijitMenu .dijitMenuItem td {
-    border-color : var(--bg-panel);
-    background : var(--bg-panel);
-    color : var(--fg-main);
-  }
-
-  .dijitMenu .dijitMenuItemSelected,
-  .dijitMenu .dijitMenuItemSelected td {
-    background : black;
-    color : white;
-  }
-
-  .dijitMenu .dijitMenuSeparator * {
-    border-bottom-color : var(--border-dark) ! important;
-  }
-
-  .article-note {
-    background : var(--bg-panel);
-    border-color : #9a8c59;
-  }
-
-  ::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--border-main);
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: var(--bg-panel);
-  }
+body.flat.ttrss_main {
+	color : @fg-main;
+
+	#main, #overlay {
+		color : @fg-main;
+		background: @bg-main;
+	}
+
+	#toolbar-frame #toolbar {
+		background : @bg-panel;
+		border-color : @border-dark;
+		color : @fg-light;
+	}
+
+	#feeds-holder {
+		background : @bg-panel;
+		box-shadow : inset -1px 0px 2px -1px @border-main;
+
+		#feedTree {
+			.counterNode.aux {
+				background: @bg-panel;
+				color: @fg-main;
+				border-color: @bg-main;
+			}
+
+			.dijitTreeRowSelected {
+				background : @bg-main;
+				border-color : @bg-main transparent;
+				color : @fg-light;
+			}
+
+			.dijitTreeRowSelected .dijitTreeLabel {
+				text-shadow : none;
+			}
+		}
+	}
+
+	#headlines-frame {
+		.hl:not(.active):not(.Selected),
+		.cdm:not(.Selected) {
+			background: @bg-main;
+		}
+
+		.hl, .cdm {
+			border-color : @border-dark;
+			color : @fg-main;
+
+			.title {
+				color : darken(@fg-main, 30%);
+			}
+
+			.feed a {
+				color : @fg-light;
+			}
+
+			.content {
+				color : @fg-main;
+			}
+		}
+
+		.cdm .footer {
+			border-color : @bg-panel;
+			color : @fg-main;
+		}
+
+		.hl.Unread .title,
+		.cdm.Unread .title {
+			color : @fg-light;
+		}
+
+		i.material-icons,
+		.dijitCheckBox {
+			opacity : 0.7;
+		}
+
+		.cdm.expandable.active {
+			background : darken(@bg-main, 5%) ! important;
+		}
+
+	}
+
+	#content-insert {
+		.post {
+			.header {
+				background : @bg-panel;
+				border-color: @border-dark;
+			}
+		}
+	}
+
+	.insensitive {
+		color : @fg-light;
+	}
+
+	.dijitAccordionInnerContainerSelected .dijitAccordionTitle {
+		color : white;
+	}
+
+	textarea {
+		color : @fg-light;
+	}
+
+	code {
+		color : #c90 ! important;
+	}
+
+	#headlines-frame blockquote,
+	#content-insert blockquote {
+		color : @fg-main;
+		border-color : @color-accent;
+	}
+
+	pre {
+		color : @fg-main;
+		background : @bg-panel ! important;
+	}
+
+	ul#filterDlg_Matches, ul#filterDlg_Actions {
+		background: @bg-panel;
+		border-color : @border-main;
+	}
+
+	.post .content img,
+	.cdm .content-inner img,
+	.post .content video,
+	.cdm .content-inner video {
+		transition : opacity 0.5s linear, filter 0.5s linear;
+	}
+
+	.post .content img:not(:hover),
+	.cdm .content-inner img:not(:hover),
+	.post .content video:not(:hover),
+	.cdm .content-inner video:not(:hover) {
+		opacity : 0.5;
+		filter: grayscale(80%);
+	}
+
+	.article-note {
+		background : @bg-panel;
+		border-color : #9a8c59;
+	}
+
+	::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: @border-main;
+	}
+
+	::-webkit-scrollbar-track {
+		background-color: @bg-panel;
+	}
 
 }