remove cdm tiles; update cdm stylesheet as to stop reading on yellow

6 files changed, 93 insertions, 27 deletions

diff --git a/cdm.css b/cdm.css
index 7ab3471ca..6f253cc5a 100644
--- a/cdm.css
+++ b/cdm.css
@@ -63,17 +63,67 @@ div.cdmContentInner img {
 }
 
 div.cdmFooter {
-	background-color : #f0f0f0;
-	background-image : url("images/cdm_footer_tile.png");
 	padding : 5px;
 	font-weight : normal;
 	color : gray;
 	clear : both;
 }
 
-.Selected div.cdmFooter {
-	background-color : #FFE587;
-	background-image : url("images/cdm_footer_selected.png");
+div.cdm {
+	border-width : 0px 1px 1px 0px;
+	border-collapse : collapse;
+	border-bottom-color : #c0c0c0;
+	border-right-color : #c0c0c0;
+	border-style : solid;
+	background : #f0f0f0;
+}
+
+div.cdm.expanded div.cdmHeader {
+	background : #e0e0e0;
+}
+
+div.cdm.Unread {
+	background : #fafafa;
+}
+
+div.cdm.Unread div.cdmHeader {
+	background : #ecf4ff;
+}
+
+div.cdm.Selected {
+	background : #fff7d5;
+}
+
+div.cdm.expanded.Selected div.cdmHeader {
+	background : #FFEA9E;
+}
+
+div.cdm.expandable.Selected div.cdmHeader {
+	background : #fff7d5;
+}
+
+div.cdm.expandable.active.Selected div.cdmHeader,
+div.cdm.expanded.active.Selected div.cdmHeader {
+	background : #ecf4ff;
+}
+
+div.cdm.active {
+	border-right-color : #88b0f0;
+	border-bottom-color : #88b0f0;
+	background : white ! important;
+}
+
+div.cdm.active div.cdmHeader {
+	background : #ecf4ff;
+}
+
+div.cdm.active div.cdmHeader a.title {
+	color : #4684ff;
+	font-weight : bold;
+}
+
+div.cdm.active div.cdmContent {
+	background : white;
 }
 
 span.cdmExcerpt {
@@ -120,7 +170,7 @@ div.cdmHeader span.hlFeed {
 	font-style : italic;
 }
 
-div.cdm.expanded .cdmHeader {
+/* div.cdm.expanded .cdmHeader {
 	background : #E0E0E0;
 }
 
@@ -144,6 +194,18 @@ div.cdm.expanded.even, div.cdm.expanded.odd {
 	background : #f9f9f9;
 }
 
+div.cdm.odd.active, div.cdm.even.active {
+	background : white;
+}
+
+div.cdm.active .cdmHeader {
+	background : #ecf4ff;
+}
+
+div.cdm.active .cdmFooter {
+	background : white;
+} */
+
 div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
 	vertical-align : middle;
 	color : gray;
diff --git a/classes/feeds.php b/classes/feeds.php
index 51103e8d1..ddf48c4c5 100644
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -447,7 +447,7 @@ class Feeds extends Handler_Protected {
 					$mouseover_attrs = "onmouseover='postMouseIn(event, $id)'
 						onmouseout='postMouseOut($id)'";
 
-					$reply['content'] .= "<div class='$class' id='RROW-$id' $label_row_style $mouseover_attrs>";
+					$reply['content'] .= "<div class='hl $class' id='RROW-$id' $label_row_style $mouseover_attrs>";
 
 					$reply['content'] .= "<div class='hlLeft'>";
 
@@ -548,7 +548,7 @@ class Feeds extends Handler_Protected {
 					$mouseover_attrs = "onmouseover='postMouseIn(event, $id)'
 						onmouseout='postMouseOut($id)'";
 
-					$expanded_class = $expand_cdm ? "expanded" : "";
+					$expanded_class = $expand_cdm ? "expanded" : "expandable";
 
 					$reply['content'] .= "<div class=\"cdm $expanded_class $class\"
 						id=\"RROW-$id\" $mouseover_attrs'>";
diff --git a/images/cdm_footer_selected.png b/images/cdm_footer_selected.png
deleted file mode 100644
index def21426b..000000000
--- a/images/cdm_footer_selected.png
+++ /dev/null
diff --git a/images/cdm_footer_tile.png b/images/cdm_footer_tile.png
deleted file mode 100644
index 4410afed9..000000000
--- a/images/cdm_footer_tile.png
+++ /dev/null
diff --git a/js/viewfeed.js b/js/viewfeed.js
index a2ea853d6..2434a8211 100644
--- a/js/viewfeed.js
+++ b/js/viewfeed.js
@@ -1646,14 +1646,18 @@ function cdmClicked(event, id) {
 				return cdmExpandArticle(id);
 			} else {
 
+				var elem = $("RROW-" + getActiveArticleId());
+
+				if (elem) elem.removeClassName("active");
+
 				selectArticles("none");
 				toggleSelected(id);
 
 				var elem = $("RROW-" + id);
 				var article_is_unread = elem.hasClassName("Unread");
 
-				if (elem)
-					elem.removeClassName("Unread");
+				elem.removeClassName("Unread");
+				elem.addClassName("active");
 
 				setActiveArticleId(id);
 
diff --git a/tt-rss.css b/tt-rss.css
index 607664eed..894076386 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -176,37 +176,37 @@ a:hover {
 	cursor : pointer;
 }
 
-.Selected {
-	background-color : #fff7d5 ! important;
+.hl.Selected {
+	background-color : #fff7d5;
 }
 
-.Unread div.hlTitle {
+.hl.Unread div.hlTitle {
 	font-weight : bold;
 }
 
-.even.Unread.Selected {
-	background : #fff7d5 ! important;
+.hl.even.Unread.Selected {
+	background : #fff7d5;
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
 	border-color : #e7d796;
 }
 
-.odd.Unread.Selected {
-	background : #fff7d5 ! important;
+.hl.odd.Unread.Selected {
+	background : #fff7d5;
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
 	border-color : #e7d796;
 }
 
-.even.Selected {
-	background : #fff7d5 ! important;
+.hl.even.Selected {
+	background : #fff7d5;
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
 	border-color : #e7d796;
 	border-collapse : collapse;
 }
 
-.odd.Selected {
+.hl.odd.Selected {
 	background : #fff7d5 ! important;
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
@@ -214,7 +214,7 @@ a:hover {
 	border-collapse : collapse;
 }
 
-.even.Grayed {
+.hl.even.Grayed {
 	background : #f0f0f0;
 	color : #909090;
 	border-width : 0px 0px 1px 0px;
@@ -223,11 +223,11 @@ a:hover {
 	border-collapse : collapse;
 }
 
-.odd.Grayed {
+.hl.odd.Grayed {
 	color : #909090;
 }
 
-.even {
+.hl.even {
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
 	border-color : #c0c0c0;
@@ -235,14 +235,14 @@ a:hover {
 	border-collapse : collapse;
 }
 
-.odd {
+.hl.odd {
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
 	border-color : #c0c0c0;
 	border-collapse : collapse;
 }
 
-.even.Unread {
+.hl.even.Unread {
 	background : #f0f0f0;
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
@@ -250,7 +250,7 @@ a:hover {
 	border-collapse : collapse;
 }
 
-.odd.Unread {
+.hl.odd.Unread {
 	border-width : 0px 0px 1px 0px;
 	border-style : solid;
 	border-color : #c0c0c0;
@@ -356,7 +356,7 @@ span.feed_error {
 div#headlines-toolbar {
 	border-width : 0px 0px 1px 0px;
 	background-color : #f0f0f0;
-	border-color : #88b0f0 #88b0f0 #ecf4ff #88b0f0;
+	border-color : #c0c0c0;
 	font-size : 11px;
 	font-family : "Segoe UI", Tahoma, sans-serif;
 	color : gray;