ttrss/themes/night.less

@import "../css/defines.less";
@import "../lib/flat-ttrss/flat_combined_dark.css";

@bg-main : #333;
@border-main : #666;
@border-dark : #222;
@bg-panel : #222;
@fg-main: #ccc;
@fg-insensitive: darken(@fg-main, 20%);
@fg-light : lighten(@fg-main, 10%);
@bg-active: #2a89bc;

body.flat.ttrss_main.ttrss_prefs {
	#main, #footer {
		background: @bg-panel;
	}

	#footer a {
		color : #fff;
	}

	td.filename,
	div.prefHelp {
		color : @fg-insensitive;
	}
}

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;
			}
		}
	}

	#floatingTitle {
		background-color : @bg-main;
		border-color : @border-dark;

		.feed a {
			color : @fg-light;
		}

		i.material-icons {
			opacity : 0.7;
		}
	}

	div#floatingTitle.Unread a.title {
		color : @fg-light;
	}

	#headlines-frame {
		.whiteBox {
			border-color : @border-dark;
		}

		.hl:not(.active):not(.Selected):not(.Unread),
		.cdm.expandable:not(.active):not(.Selected):not(.Unread) {
			background : @bg-main;
		}

		.hl.Unread:not(.active):not(.Selected),
		.cdm.expandable.Unread:not(.active):not(.Selected) {
			background : @bg-panel;
		}

		.cdm.expanded {
			background: @bg-main;
		}

		.hl.Unread .title,
		.cdm.Unread .title {
			color : @fg-light;
		}

		.cdm.expanded.active .title {
			color : @color-accent;
		}

		.cdm.expandable.active {
			background : @bg-panel ! important;
		}

		.hl, .cdm {
			border-color : @border-dark;
			color : @fg-main;

			.title {
				color : @fg-main;
			}

			.author {
				color : @fg-insensitive;
			}

			.updated, .content {
				color : @fg-main;
			}

			.feed a {
				color : @fg-light;
			}
		}

		.cdm .footer {
			border-color : @bg-panel;
			color : @fg-main;
		}

		i.material-icons,
		.dijitCheckBox {
			opacity : 0.7;
		}

	}

	#content-insert {
		.post {
			.header {
				background : @bg-panel;
				border-color: @border-dark;
			}
		}
	}

	.dijitCheckBox:not(.dijitChecked)::before {
		color : @fg-insensitive;
		background: @bg-panel;
	}

	.insensitive {
		color : @fg-insensitive;
	}

	.dijitAccordionInnerContainerSelected .dijitAccordionTitle {
		color : white;
	}

	.dijitDialog .dijitDialogPaneContent {
		background : @bg-panel;
	}

	.dijitTab:not(.dijitTabChecked) {
		background : @bg-panel;
	}

	.dijitTab.dijitTabChecked.dijitTabHover {
		color : @fg-light;
	}

	label.dijitButton {
		border: 1px solid @border-main;
	}

	label.dijitButton:hover {
		border-color : lighten(@border-dark, 5%);
		background-color: @bg-main;
	}

	textarea {
		color : @fg-light;
	}

	code {
		color : #c90 ! important;
	}

	.panel {
		background-color : @bg-panel;
		border-color : @border-main;
	}

	.dijitDialog .panel {
		background-color : @bg-main;
	}

	#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.2s linear, filter 0.2s 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;
	}

}