Browse Source

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

Andrew Dolgov 4 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;
+	}
 
 }