feedlish.less

// Reference the default theme, but don't inline it:
// - CON: changing variables here wont affect default.css/less (must be overwritten by adding rules)
// - PRO: if default.css changes, we don't need to rebuild (as long as the changes are compatible)
@import (reference) "../themes/light.less";
@import "../themes/light.css";

//
// Less CSS Variables
//

// Colors:

// Change colors. !! Affects only feedlish, not default.less/css since we
// @import the .css !!
@default-bg: #fff;
@default-fg: #444; // prefer @default-fg to @default-text
@default-text: @default-fg;
@color-panel-bg: darken(@default-bg, 8%);
//@color-accent: ; // default blue is fine

// Color of feed tree icons
@feedlish-feedtree-icons-color: mix(@default-fg, @color-panel-bg, 30%);

// Headlines foreground and background colors.
// Computed from @default-fg and @color-accent by default.
// - Unread
@feedlish-headline-fg: @default-fg;
@feedlish-headline-bg: @default-bg;
// - Read
@feedlish-headline-read-fg: lighten(@default-fg, 30%);
// - Selected
@feedlish-headline-selected-bg: @feedlish-headline-active-bg;
// - Active
@feedlish-headline-active-bg: darken(@default-bg, 6%);
@feedlish-headline-active-fg: @feedlish-headline-fg;
// - Mouse hover
@feedlish-headline-hover-bg: darken(@feedlish-headline-bg, 3%);
// - Combined-mode expanded article background
@feedlish-headline-cdm-article-bg: mix(@default-bg, @feedlish-headline-active-bg, 70%);

// Adjustments:

// Headline row height
@feedlish-headline-row-height: 34px;

// Headline feed name fixed width (0 to hide)
@feedlish-headline-feed-name-width: 120px;
// .. in wide mode (0 to hide)
@feedlish-headline-feed-name-width-wide: 80px;

// Article content width
@feedlish-article-width: 60em;

// Inner padding of panels/frames
@feedlish-panels-padding: 16px;

// In combined-mode, align article text to title
@feedlish-cdm-align-article-to-title: true;

//
// Global
//

// Normalize text color: use @default-fg
body.ttrss_main, div.cdm.active div.content {
	color: @default-fg;
}
// Fill gaps
html { background: @default-bg; }

// Normalize background color: use @default-bg
.flat .dijitContentPane,
body.ttrss_main #toolbar-frame #toolbar {
	background-color: @default-bg;
}

// Fix the default favicon size (to match other favicons)
i.material-icons.icon-no-feed {
	width: 16px !important;
	height: 16px !important;
	padding: 0 !important;
	margin: 0px 4px  !important;
}

// Disable most of animations/transitions
// FIXME: it doesn't remove the feed tree fold/unfold animation
* { transition: none !important; }

// Icon helper. See codepoint at /tt-rss/lib/iconfont/codepoints
.feedlish-material-icon(@codepoint) {
	width: 16px; // same size as flat-icon size
	height: 16px;
	margin: 0;
	&::before {
		font-family: 'Material Icons';
		font-size: 18px;
		line-height: 1;
		font-style: normal;
		font-weight: normal;
		content: @codepoint;
	}
}

// Hide some borders
// !! USELESS since we @import the .css !!
@border-default: @color-panel-bg;

// Scrollbars not blue (Chrome)
::-webkit-scrollbar-thumb {
	background-color: mix(@default-fg, @default-bg, 40%);
}

// Fade visited links
body.ttrss_main a:visited {
	color: mix(desaturate(@color-link, 40%), @default-bg, 90%);
}

body.ttrss_main {

	// Default splitters color
	.dijitSplitter, .dijitSplitterV {
		background-color: darken(@color-panel-bg, 4%);
	}

	//
	// Feed Tree Frame
	//

	// Feed tree splitter
	#feeds-holder_splitter {
		// Move it inside the feed tree panel (instead of in-between panels)
		width: 5x;
		margin-left: -5px;
		// Make it Transparent
		opacity: 0;
		&:hover { opacity: 0.5; }
	}

	// Remove the border between the feed tree and headlines panel
	#feeds-holder { box-shadow: none; }

	// Tweak feed tree
	#feeds-holder #feedTree {

		// Scroll bar on the left
		direction: rtl;
		> * { direction: ltr; }

		// Left and Right margin
		.dijitTreeRow.Is_Cat::before { content: " "; margin-left: @feedlish-panels-padding + 7px; }
		.dijitTreeRow { padding-right: @feedlish-panels-padding; }

		// Top and Bottom margin
		&::before { content: " "; display: block; height: @feedlish-panels-padding; clear: both; }
		&::after { content: " "; display: block; height: @feedlish-panels-padding; clear: both; }

		// "Specials" group
		> .dijitTreeContainer > .dijitTreeNode > .dijitTreeNodeContainer > .dijitTreeNode:first-child {
			// Remove Specials indentation
			> .dijitTreeNodeContainer .dijitTreeRow {
				padding-left: 0px !important;
			}

			// Margin after Specials group
			& { margin-bottom: @feedlish-panels-padding; }
		}

		.dijitTreeNode .dijitTreeRow {
			// Remove border around rows
			& {
				border: none !important;
			}

			// Simpler counter (unread)
			.counterNode,
			&[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread // fresh
			{
				border: none;
				background: none;
				color: @default-fg;
			}
			// Simpler counter (read)
			.counterNode.aux {
				border: none;
				background: none;
				color: mix(@default-fg, @color-panel-bg, 30%);
			}

			// Right-align counter
			.counterNode {
				text-align: right
			}

			// Change arrow icons
			.dijitTreeExpandoClosed { .feedlish-material-icon("\e315"); }
			.dijitTreeExpandoOpened { .feedlish-material-icon("\e313"); }

			// Change icons colors
			.icon.material-icons:not(.icon-label), .dijitTreeExpando {
				color: @feedlish-feedtree-icons-color !important;
			}

			// Lighten loading GIFs
			.loadingExpando, .loadingNode { opacity: 0.4; }
		}
	}

	//
	// Toolbar Frame
	//

	// Paddings
	#toolbar-frame #toolbar { padding: @feedlish-panels-padding; }
	// Icon
	#toolbar-headlines .left i { margin: 0 8px 0 2px; }

	// Remove italic from "N article selected" in toolbar
	#toolbar-frame #toolbar #selected_prompt {
		font-style: normal;
	}

	// Remove toolbar border
	#toolbar-frame #toolbar { border: none; }

	//
	// Headlines Frame
	//

	// Headline row:
	#headlines-frame div[id^="RROW"] {

		// (internal) Make sub rule relative to headlines (eg: .collapse i)
		&.hl, & .header { position: relative; }

		// Change headline elements order:
		&.hl, & .header {
			// - Score and feed icon
			> .right { order: 1; }
			// - Feed Name
			> .feed { order: 2; }
			// - Title
			> .title, > .titleWrap { order: 3; }
			// - Date
			> .feed + * { order: 4; }
			// - Buttons select/share/star
			> .left { order: 5; }
		}

		// Change order again, but move only the score icon to the right (not the feed icon)
		.right .icon-score {
			position: absolute;
			right: 80px + @feedlish-panels-padding;
		}
		&.hl, & .header { > .left { margin-left: 28px; } } // space before buttons

		// Show buttons (and score) only when hover or something's active
		&.hl, & .header { > .left { display: none; } }
		.icon-score { display: none; }
		&:hover, &.marked, &.published, &.active, &.Selected, &:not(.score-neutral) {
			&.hl, & .header { > .left { display: flex; } }
			.icon-score { display: block; }
		}

		// Fix vertical alignments, all at once
		&.hl > *, & .header > *,	// non-cdm/cdm headline top elements
		.hl-content,				// non-cdm title elements
		span[class^="HLLCTR"] {		// labels container
			line-height: @feedlish-headline-row-height;
			> * {
				line-height: normal;
				vertical-align: middle;
			}
			// Dangerous! But only way I found to make containers respecting
			// their elements' height...
			font-size: 0;
		}
		// ... e.g. need to restore font-size:
		.header .updated { font-size: 11px; }

		// Tweak title:
		div.title, span.titleWrap {

			// Tweak label look
			.label {
				font-size: 11px !important;
				padding: 2px 6px;
				border-radius: 99px;
				font-weight: normal;
				height: 14px;
				line-height: 16px;
			}

			// Keep the same font size when combined expanded or not
			a { font-size: 14px !important; }

			// Remove hover underline
			a:hover { text-decoration: none; }

		} // Tweak title

		// Fix white text colors in headlines
		.feed a, .updated {
			color: @default-fg !important;
		}

		// Headline colors
		.feedlish-set-headline-fg(@c) {
			a.title { color: @c; }
			a.title span,		// non-cdm preview
			a.title ~ span {	// cdm preview and author
				 color: lighten(@c, 10%);
			}
		}
		.feedlish-set-headline-bg(@c) {
			&.hl, & .header { background-color: @c !important; }
		}
		// - Default (Unread)
		&/*.Unread*/ { .feedlish-set-headline-bg(@feedlish-headline-bg); .feedlish-set-headline-fg(@feedlish-headline-fg); }
		// - Read
		&:not(.Unread) { .feedlish-set-headline-fg(@feedlish-headline-read-fg); .feedlish-set-headline-bg(@feedlish-headline-bg); }
		// - Mouse hover
		&:hover { .feedlish-set-headline-bg(@feedlish-headline-hover-bg); }
		// - Selected
		&.Selected { .feedlish-set-headline-bg(@feedlish-headline-selected-bg); }
		// - Active
		&.active { .feedlish-set-headline-fg(@feedlish-headline-active-fg); .feedlish-set-headline-bg(@feedlish-headline-active-bg); }
		// Remove interfering background
		&.cdm { background: none !important; }
		// Combined-mode expanded article
		&.cdm.active {
			border-bottom: 5px solid @feedlish-headline-active-bg;
			background: @feedlish-headline-cdm-article-bg !important;
		}

		// Do not wrap title (except when expanded)
		&.hl, &:not(.active) .header {
			div.title, .titleWrap {
				overflow: hidden;
				> span {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			a.title { white-space: nowrap; }
		}

		// Set row height
		&.hl, & .header { min-height: @feedlish-headline-row-height; }

		// Tweak elements padding
		&.hl, & .header {
			padding-left: @feedlish-panels-padding;
			> * { padding: 0 10px 0 0; }
			padding-right: @feedlish-panels-padding - 10px;
		}
		div.title .hl-content, .titleWrap {
			> *:not(:empty) { padding-right: 10px; }
			.preview:empty { padding: 0; }
		}

		// Fix, cursor pointer was set on the wrong element (misleading)
		&.cdm { cursor: initial; }
		&.cdm .titleWrap { cursor: pointer; }

		// Feed name look
		.feed a, &.cdm .feed {
			font-size: 11px;
			padding: 1px 6px;
			border-radius: 99px;
			height: 14px;
			line-height: 16px;
			font-style: normal;
		}

		// Make left of the title clickable
		// FIXME: ugly hack
		div.title, span.titleWrap {
			margin-left: -1000px;
			padding-left: 1000px;
			z-index: 0;
		}
		// ... but keep feed icon and name clickable
		.right, a { z-index: 20; }

		// Make the whole row clickable to collapse the article except directly
		// on the title.
		// FIXME: this is an ugly hack
		&.cdm {
			// Make parent 0 width
			.collapse { margin: 0; width: 0; }
			// Stretch the collapse button over the whole row
			.collapse i {
				opacity: 0; // invisible collapse button
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				height: 100%;
				z-index: 10; // keep links/button on top
			}
			.right > span, .left, a {
				z-index: 20; // keep links/button on top
				position: relative; // (needed this to work !?)
			}
			// Underline to indicate it'll open the link and not collapse
			&.active a.title:hover {
				text-decoration: underline;
			}
		}

	} // Headline row

	// Feed name fixed width
	.feed {
		min-width: @feedlish-headline-feed-name-width !important;
		max-width: @feedlish-headline-feed-name-width !important;
		display: if(@feedlish-headline-feed-name-width = 0, none, inline-flex);
	}
	.feed a, .cdm .feed {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cdm .feed {
		margin: 0 10px 0 0;
	}
	// .. in wide mode
	div#headlines-frame.wide .hl .feed {
		min-width: @feedlish-headline-feed-name-width-wide !important;
		max-width: @feedlish-headline-feed-name-width-wide !important;
		display: if(@feedlish-headline-feed-name-width-wide = 0, none, inline-flex);
	}

	// Fix buttons not showing in wide mode
	div#headlines-frame.wide .title {
		overflow: hidden;
	}

	// Remove headlines separator borders
	.hl, div#headlines-frame div.cdm.expandable { border: none; }
	// Remove borders of "Loading, please wait" or "No articles found to display"
	div.whiteBox { border: none; }

	// "Click to open next unread feed"
	& {
		// Remove italic
		#headlines-spacer { font-style: normal; }
		// NOT "auto mark articles as read"
		#headlines-frame:not(.auto_catchup) #headlines-spacer {
			a { padding: 20px 0 20px 0; }
			a:hover { background: @feedlish-headline-hover-bg; }
		}
		// "auto mark articles as read"
		#headlines-frame.auto_catchup #headlines-spacer {
			a { height: 100%; }
			a::before { content: " "; display: block; height: 20px; } // spacing
		}
	}

	// Re-align loading icon
	.loading img { vertical-align: middle; }

	//
	// Article content
	//

	// Post panel padding
	#content-insert .post > div {
		padding-left: @feedlish-panels-padding;
		padding-right: @feedlish-panels-padding;
	}

	// Article width (max column)
	.content { max-width: @feedlish-article-width; }

	// In combined-mode
	div.cdm.expandable {
		// Reduce article content font size a bit
		.content-inner { font-size: 15px; }

		// Default article paddings
		.content { padding: 0 20px 0 20px; }

		// Left padding to align article to title
		.content when (@feedlish-cdm-align-article-to-title = true) {
			padding-left: @feedlish-headline-feed-name-width + @feedlish-panels-padding + 35px;
		}

	} // Combined-mode

} // ttrss_main

// Local less customization in a separate file (needs rebuild)
@import (optional) "./custom.less";

// Local css customization, will be imported at the top of `feedlish.css`.
@import "tt-rss-feedlish-theme/custom.css";