tinytinyrss/themes/light/cdm.less

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

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

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

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

	.header {
		position: sticky;
		top : 0;
		z-index: 3;
		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;
		}

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

		input {
			margin : 0px 4px;
		}

		.feed {
			float: right;
			font-weight: normal;
			font-style: italic;

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

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

		.author {
			white-space : nowrap;
			color : @default-text;
			font-size : @font-size-small;
			font-weight : normal;
		}
	}

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

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

		.left {
			flex-grow : 2;
		}
	}

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

	.content-inner {
		iframe {
			max-width : 98%;
			width : auto;
			height : auto;
		}

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

	&.expanded {

		.collapse, .excerpt {
			display : none;
		}

		.titleWrap {
			white-space : normal;
		}

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

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

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

		&.active,
		&.Unread {
			.content {
				color : black;
			}
		}

		&.active {
			.header .title {
				color : @color-link;
			}
		}

		&.Unread {
			.header .title {
				color : black;
			}
		}

		.content {
			color : @default-text;
		}
	}

	&.vgrlf .feed {
		display : none;
	}

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

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

		a {
			color: @default-text;
		}

		a:hover {
			color: @color-link;
		}
	}

	.content-inner {
		.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%;
			}
		}
	}

	&.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 : @font-size-small;
			color : #999;
			font-weight : normal;
			cursor : pointer;
		}

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

		&.Unread {
			background : white;
		}

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

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

		&.active {
			background : white ! important;
		}

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

		.header a.title {
			font-weight : 600;
			color : @default-text;
			font-size : @font-size-content;
			transition : color 0.2s, background 0.2s;
			text-rendering: optimizelegibility;
			font-family : @fonts-ui;
		}

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

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

		&:not(.active) {
			cursor : pointer;

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

	&.expandable.active,
	&.expanded {
		.header[data-is-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);
		}
	}
}