X-Git-Url: https://git.wh0rd.org/?a=blobdiff_plain;f=css%2Fcdm.less;h=fc8120700d25759444b0e230673f220231569ab8;hb=HEAD;hp=a0790f6c1643894134014b2982d249a2eab87e40;hpb=9563e3bcd662b87ea6779714b51afb61571dd32d;p=tt-rss.git

diff --git a/css/cdm.less b/css/cdm.less
index a0790f6c..fc812070 100644
--- a/css/cdm.less
+++ b/css/cdm.less
@@ -1,27 +1,27 @@
 .cdm {
 	margin-right : 4px;
 
-	.cdmHeader, .cdmFooter {
+	.header, .footer {
 		display : table;
 	}
 
-	.cdmHeader img, .cdmHeader input, .cdmFooter img {
+	.header img, .header input, .footer img {
 		vertical-align : middle;
 	}
 
-	.cdmHeader > div, .cdmFooter > div {
+	.header > div, .footer > div {
 		white-space : nowrap;
 	}
 
-	.cdmHeader > span, .cdmFooter > span.left {
+	.header > span, .footer > span.left {
 		width : 100%;
 	}
 
-	.cdmHeader img, .cdmFooter img {
+	.header img, .footer img {
 		margin : 0px 4px;
 	}
 
-	.cdmHeader {
+	.header {
 		> * {
 			display : table-cell;
 			padding : 5px;
@@ -55,7 +55,7 @@
 		}
 	}
 
-	.cdmFooter {
+	.footer {
 		height : 30px;
 		padding-left : 5px;
 		font-weight : normal;
@@ -68,11 +68,11 @@
 		}
 	}
 
-	.cdmIntermediate {
+	.intermediate {
 		margin : 10px;
 	}
 
-	.cdmContentInner {
+	.content-inner {
 		margin : 10px;
 		line-height : 1.5;
 		font-size : 16px;
@@ -89,10 +89,10 @@
 
 	}
 
-	.cdmIntermediate img,
-	.cdmIntermediate video,
-	.cdmContentInner img,
-	.cdmContentInner video {
+	.intermediate img,
+	.intermediate video,
+	.content-inner img,
+	.content-inner video {
 		border-width : 0px;
 		max-width : 98%;
 		height : auto;
@@ -103,7 +103,11 @@
 	margin-top : 4px;
 	margin-bottom : 4px;
 
-	.cdmFooter {
+	.collapse {
+		display : none;
+	}
+
+	.footer {
 		border: 0px solid #ddd;
 		border-bottom-width: 1px;
 	}
@@ -115,11 +119,11 @@
 
 }
 
-div.cdm.expanded div.cdmHeader {
+div.cdm.expanded div.header {
 	background : transparent ! important;
 }
 
-div.cdm.expanded div.cdmHeader a.title {
+div.cdm.expanded div.header a.title {
 	font-size : 16px;
 	color : #999;
 	font-weight : 600;
@@ -132,95 +136,89 @@ div.cdm.expanded.active {
 	background : white;
 }
 
-div.cdm.expanded.active div.cdmHeader a.title {
+div.cdm.expanded.active div.header a.title {
 	color : @color-link;
 }
 
-div.cdm.expanded.Unread div.cdmHeader a.title {
+div.cdm.expanded.Unread div.header a.title {
 	color : black;
 }
 
-div.cdm.expanded div.cdmContent {
+div.cdm.expanded div.content {
 	color : @default-text;
 }
 
-div.cdm.expanded.Unread div.cdmContent {
+div.cdm.expanded.Unread div.content {
 	color : black;
 }
 
-div.cdm.active div.cdmContent {
+div.cdm.active div.content {
 	color : black;
 }
 
-span.cdmExcerpt {
-	white-space : nowrap;
-	font-size : 11px;
-	color : #999;
-	font-weight : normal;
-	cursor : pointer;
-}
-
-div.cdmContent div.postEnclosures {
-	margin-top : 1em;
-	color : @default-text;
-}
+.cdm {
+	div.content div.postEnclosures {
+		margin-top: 1em;
+		color: @default-text;
+	}
 
-div.cdmFeedTitle {
-	border: 0px solid @color-link;
-	border-bottom-width: 1px;
-	padding : 5px 3px 5px 5px;
-}
+	div.feed-title {
+		border: 0px solid @color-link;
+		border-bottom-width: 1px;
+		padding: 5px 3px 5px 5px;
+	}
 
-div.cdmFeedTitle a.title {
-	color : @default-text;
-	font-weight : bold;
-}
+	div.feed-title a.title {
+		color: @default-text;
+		font-weight: bold;
+	}
 
-div.cdmFeedTitle a {
-	color : @default-text;
-}
+	div.feed-title a {
+		color: @default-text;
+	}
 
-div.cdmFeedTitle a:hover {
-	color : @color-link;
-}
+	div.feed-title a:hover {
+		color: @color-link;
+	}
 
-div.cdmHeader span.hlFeed {
-	float : right;
-	font-weight : normal;
-	font-style : italic;
-}
+	div.header span.feed {
+		float: right;
+		font-weight: normal;
+		font-style: italic;
+	}
 
-div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
-	vertical-align : middle;
-	color : @default-text;
-	font-weight : normal;
-	font-style : italic;
-	font-size : 11px;
-}
+	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.cdm .hlFeed a {
-	border-radius : 4px;
-	display : inline-block;
-	padding : 1px 4px 1px 4px;
-}
+	div.content-inner p {
+		/*max-width : 650px;*/
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		hyphens: auto;
+	}
 
-div.cdmContentInner p {
-	/*max-width : 650px;*/
-	-webkit-hyphens: auto;
-	-moz-hyphens: auto;
-	hyphens: auto;
-}
+	div.content-inner iframe {
+		min-width : 50%;
+		max-width : 98%;
+	}
 
-div.cdmContentInner iframe {
-	min-width : 50%;
-	max-width : 98%;
-}
+	div.header span.author {
+		white-space : nowrap;
+		color : @default-text;
+		font-size : 11px;
+		font-weight : normal;
+	}
 
-div.cdmHeader 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;
+	}
 }
 
 div#floatingTitle {
@@ -266,7 +264,7 @@ div#floatingTitle {
 		margin-left : 0px;
 	}
 
-	div.hlFeed {
+	div.feed {
 		padding-right : 10px;
 		color : @default-text;
 		font-weight : normal;
@@ -275,7 +273,7 @@ div#floatingTitle {
 		white-space : nowrap;
 	}
 
-	div.hlFeed a {
+	div.feed a {
 		border-radius : 4px;
 		display : inline-block;
 		padding : 1px 4px 1px 4px;
@@ -288,7 +286,7 @@ div#floatingTitle {
 		font-size : 11px;
 	}
 
-	div.hlFeed a {
+	div.feed a {
 		color : @default-text;
 	}
 
@@ -298,62 +296,128 @@ div#floatingTitle {
 	}
 
 	.dijit,
-	img.hlScorePic {
+	img.score-pic {
 		display : none;
 	}
 
+	.feed-title {
+		> * {
+			display : table-cell;
+			vertical-align : middle;
+		}
+
+		a.title {
+			width : 100%;
+		}
+
+		a.catchup {
+			text-align : right;
+			color : @default-text;
+			padding-right : 10px;
+			font-size : 11px;
+			white-space : nowrap;
+		}
+
+		a.catchup:hover {
+			color : @color-link;
+		}
+
+	}
 }
 
 div#floatingTitle.Unread a.title {
 	color : black;
 }
 
-.cdm.high .cdmHeader {
+.cdm.high .header {
 	a.title.high,
-	.cdmExcerpt,
+	.excerpt,
 	span.author {
 		color : #00aa00;
 	}
 }
 
-.cdm.Unread.high .cdmHeader {
+.cdm.Unread.high .header {
 	a.title.high,
-	.cdmExcerpt,
+	.excerpt,
 	span.author {
 		color : #00dd00;
 	}
 }
 
-.cdm .cdmHeader a.title.low,
-.cdm.low .cdmHeader .cdmExcerpt,
-.cdm.Unread .cdmHeader a.title.low,
-.cdm.Unread.low .cdmHeader .cdmExcerpt,
-.cdm.low .cdmHeader span.author {
+.cdm .header a.title.low,
+.cdm.low .header .excerpt,
+.cdm.Unread .header a.title.low,
+.cdm.Unread.low .header .excerpt,
+.cdm.low .header span.author {
 	color : #909090;
 	text-decoration : line-through;
 }
 
-.cdmFeedTitle {
-
-	> * {
-		display : table-cell;
-		vertical-align : middle;
-	}
+.cdm.expandable {
+	background-color : #f0f0f0;
+	border: 0px solid #ddd;
+	border-bottom-width: 1px;
 
-	a.title {
-		width : 100%;
+	> hr {
+		display : none;
 	}
 
-	a.catchup {
-		text-align : right;
-		color : @default-text;
-		padding-right : 10px;
-		font-size : 11px;
+	div.header span.titleWrap {
 		white-space : nowrap;
+		text-overflow : ellipsis;
+		overflow : hidden;
+		max-width : 500px;
 	}
+}
 
-	a.catchup:hover {
-		color : @color-link;
+.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 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;
+	}
+}
\ No newline at end of file