tinytinyrss/themes/light/cdm.less

.cdm {
	i.material-icons {
		color : @color-icon;
	}

	img.flavor-image {
		width : 32px;
		height : 32px;
		margin : 8px ! important;
		border-radius : 50%;
		background-size : cover;
	}

	.header {
		position: sticky;
		top : 0;
		z-index: 3;
	}

	.header, .footer {
		display : flex;
		flex-direction : row;
		flex-wrap : nowrap;
	}

	.header img, .footer img,
	.footer i.material-icons {
		margin : 0px 4px;
		vertical-align: middle;
	}

	.header-sticky-guard {
		height : 0;
	}

	.header {
		align-items : center;

		> * {
			padding : 4px;
			white-space : nowrap;
		}

		.left, .right {
			display : flex;
			align-items : center;

			i.material-icons {
				margin-left : 2px;
				padding : 2px;
				transition : color 0.2s linear;
				user-select: none;
				font-size : 21px;
			}
		}

		.titleWrap {
			flex-grow : 2;
		}

		span.updated {
			color : @default-text;
			font-weight : normal;
			font-size : 11px;
			white-space : nowrap;
		}

		input {
			margin : 0px 4px;
		}
	}

	.footer {
		height : 30px;
		padding-left : 5px;
		font-weight : normal;
		color : @default-text;
		clear : both;
		align-items : center;

		.left {
			flex-grow : 2;
		}
	}

	.intermediate {
		margin-top : 10px;
		margin-left : 10px;
	}

	.content-inner {
		margin : 10px;
		line-height : 1.5;
		font-size : 16px;
	}

	.intermediate img,
	.intermediate video,
	.content-inner img,
	.content-inner video {
		border-width : 0px;
		max-width : 98%;
		height : auto;
	}
}

.cdm.expanded {
	/*margin-top : 4px;
	margin-bottom : 4px;*/

	.collapse, .excerpt {
		display : none;
	}

	.titleWrap {
		white-space : normal;
	}

	.footer {
		border: 0px solid @border-default;
		border-bottom-width: 1px;
	}

	> hr {
		margin-top : 0px;
		margin-bottom : 0px;
	}

}

div.cdm.expanded div.header a.title {
	font-size : 16px;
	color : #999;
	font-weight : 600;
	transition : color 0.2s, background 0.2s;
	text-rendering: optimizelegibility;
	font-family : @fonts-ui-bold;
}

div.cdm.expanded.active {
	background : white;
}

div.cdm.expanded.active div.header a.title {
	color : @color-link;
}

div.cdm.expanded.Unread div.header a.title {
	color : black;
}

div.cdm.expanded div.content {
	color : @default-text;
}

div.cdm.expanded.Unread div.content {
	color : black;
}

div.cdm.active div.content {
	color : black;
}

div.cdm.vgrlf .feed {
	display : none;
}

.cdm {
	div.feed-title {
		border: 0px solid @color-link;
		border-bottom-width: 1px;
		padding: 5px 3px 5px 5px;
	}

	div.feed-title a.title {
		color: @default-text;
		font-weight: bold;
	}

	div.feed-title a {
		color: @default-text;
	}

	div.feed-title a:hover {
		color: @color-link;
	}

	div.header span.feed {
		float: right;
		font-weight: normal;
		font-style: italic;
	}

	div.header div.feed, div.header div.feed a {
		vertical-align: middle;
		color: @default-text;
		font-weight: normal;
		font-style: italic;
		font-size: 11px;
	}

	div.content-inner div.embed-responsive {
		overflow : hidden;
		padding-bottom : @embed-responsive-padding;
		position : relative;

		iframe {
			border : 0;
			bottom : 0;
			height : 100%;
			left : 0;
			position : absolute;
			top : 0;
			width : 100%;
		}
	}

	div.header span.author {
		white-space : nowrap;
		color : @default-text;
		font-size : 11px;
		font-weight : normal;
	}

	.feed a {
		border-radius : 4px;
		display : inline-block;
		padding : 1px 4px 1px 4px;
	}
}

.cdm.expandable {
	background-color : @color-panel-bg;
	border: 0px solid @border-default;
	border-bottom-width: 1px;

	> hr {
		display : none;
	}

	div.header span.titleWrap {
		white-space : nowrap;
		text-overflow : ellipsis;
		overflow : hidden;
	}

	.excerpt {
		white-space : nowrap;
		font-size : 11px;
		color : #999;
		font-weight : normal;
		cursor : pointer;
	}

}

.cdm.expandable:not(.active) {
	user-select : none;
}

.cdm.expandable.Unread {
	background : white;
}

.cdm.expandable.Selected:not(.active) {
	background : desaturate(@color-accent, 25%);

	a,
	.header a.title,
	span {
		color : white;
	}
}

.cdm.expandable.active {
	background : white ! important;
}

div.cdm.expandable.active div.header span.titleWrap {
	white-space : normal;
}

div.cdm.expandable div.header a.title {
	font-weight : 600;
	color : @default-text;
	font-size : 14px;
	transition : color 0.2s, background 0.2s;
	text-rendering: optimizelegibility;
	font-family : @fonts-ui-bold;
}

div.cdm.expandable.Unread div.header a.title {
	color : black;
}

div.cdm.expandable.active {
	.collapse i.material-icons {
		color : @color-accent;
		cursor : pointer;
	}

	.excerpt {
		display: none;
	}

	div.header a.title {
		color: @color-link;
		font-size: 16px;
		font-weight: 600;
		text-rendering: optimizelegibility;
		font-family: @fonts-ui-bold;
	}
}

div.cdm.expandable:not(.active) {
	cursor : pointer;

	.content, .collapse {
		display : none;
	}
}

div.cdm {
	&.expandable.active,
	&.expanded {
		.header[stuck] {
			box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1);
			border: 0 solid @border-default;
			border-bottom-width: 1px;
			background : @default-bg ! important;
			opacity: 0.9;
			backdrop-filter: blur(6px);
		}
	}
}