Fix BlueLagoon and Screwdriver hover title (#2884)

#fix https://github.com/FreshRSS/FreshRSS/issues/2755
Follow-up of
https://github.com/FreshRSS/FreshRSS/pull/2882#issuecomment-611136775

https://stackoverflow.com/questions/2837057/what-has-bigger-priority-opacity-or-z-index-in-browsers

4 files changed, 28 insertions, 56 deletions

diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 7e9fdf40a..1384e06b5 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -890,10 +890,6 @@ a.btn {
 	text-shadow: 0 0 2px #ccc;
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	opacity: 0.85;
-}
-
 .flux.favorite {
 	background: #fff6da;
 }
@@ -913,26 +909,23 @@ a.btn {
 	box-shadow: 0 -1px #fff inset, 0 2px #ccc;
 }
 
-.flux .item.title {
-	opacity: 0.35;
+.flux .item.title a {
+	color: #b4b3b1;
 }
 
-.flux.favorite .item.title {
-	opacity: 1;
+.flux.not_read .item.title a,
+.flux.favorite .item.title a {
+	color: #333;
 }
 
-.flux.not_read .item.title {
-	opacity: 1;
+.flux.not_read:not(.current):hover .item.title a {
+	color: #50504f;
 }
 
 .flux.current .item.title a {
 	color: #0f0f0f;
 }
 
-.flux .item.title a {
-	color: #333;
-}
-
 .flux_header {
 	font-size: 0.8rem;
 	border-top: 1px solid #ddd;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index b8f526003..9c22f8b19 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -890,10 +890,6 @@ a.btn {
 	text-shadow: 0 0 2px #ccc;
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	opacity: 0.85;
-}
-
 .flux.favorite {
 	background: #fff6da;
 }
@@ -913,26 +909,23 @@ a.btn {
 	box-shadow: 0 -1px #fff inset, 0 2px #ccc;
 }
 
-.flux .item.title {
-	opacity: 0.35;
+.flux .item.title a {
+	color: #b4b3b1;
 }
 
-.flux.favorite .item.title {
-	opacity: 1;
+.flux.not_read .item.title a,
+.flux.favorite .item.title a {
+	color: #333;
 }
 
-.flux.not_read .item.title {
-	opacity: 1;
+.flux.not_read:not(.current):hover .item.title a {
+	color: #50504f;
 }
 
 .flux.current .item.title a {
 	color: #0f0f0f;
 }
 
-.flux .item.title a {
-	color: #333;
-}
-
 .flux_header {
 	font-size: 0.8rem;
 	border-top: 1px solid #ddd;
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index d397f473d..99fe48839 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -880,10 +880,6 @@ a.btn {
 	text-shadow: 0 0 2px #ccc;
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	opacity: 0.85;
-}
-
 .flux.favorite {
 	background: #fff6da;
 }
@@ -904,26 +900,23 @@ a.btn {
 	box-shadow: 0 -1px #fff inset, 0 2px #ccc;
 }
 
-.flux .item.title {
-	opacity: 0.35;
+.flux .item.title a {
+	color: #aca8a3;
 }
 
-.flux.favorite .item.title {
-	opacity: 1;
+.flux.not_read .item.title a,
+.flux.favorite .item.title a {
+	color: #333;
 }
 
-.flux.not_read .item.title {
-	opacity: 1;
+.flux.not_read:not(.current):hover .item.title a {
+	color: #50504f;
 }
 
 .flux.current .item.title a {
 	color: #0f0f0f;
 }
 
-.flux .item.title a {
-	color: #333;
-}
-
 .flux_header {
 	font-size: 0.8rem;
 	border-top: 1px solid #ddd;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 48b1ab564..39c870bce 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -880,10 +880,6 @@ a.btn {
 	text-shadow: 0 0 2px #ccc;
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	opacity: 0.85;
-}
-
 .flux.favorite {
 	background: #fff6da;
 }
@@ -904,26 +900,23 @@ a.btn {
 	box-shadow: 0 -1px #fff inset, 0 2px #ccc;
 }
 
-.flux .item.title {
-	opacity: 0.35;
+.flux .item.title a {
+	color: #aca8a3;
 }
 
-.flux.favorite .item.title {
-	opacity: 1;
+.flux.not_read .item.title a,
+.flux.favorite .item.title a {
+	color: #333;
 }
 
-.flux.not_read .item.title {
-	opacity: 1;
+.flux.not_read:not(.current):hover .item.title a {
+	color: #50504f;
 }
 
 .flux.current .item.title a {
 	color: #0f0f0f;
 }
 
-.flux .item.title a {
-	color: #333;
-}
-
 .flux_header {
 	font-size: 0.8rem;
 	border-top: 1px solid #ddd;