night theme: dim images unless hovered over

4 files changed, 46 insertions, 66 deletions

diff --git a/themes/compact_night.css b/themes/compact_night.css
index 07e61fafa..c9e986115 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -1892,23 +1892,6 @@ body.flat.ttrss_main.ttrss_prefs div.prefHelp {
 body.flat.ttrss_main.ttrss_prefs hr {
   border-color: #666;
 }
-body.flat.ttrss_main {
-  /*
-	.post .content img,
-	.cdm .content-inner img,
-	.post .content video,
-	.cdm .content-inner video {
-		transition : opacity 0.2s linear, filter 0.2s linear;
-	}
-
-	.post .content img:not(:hover),
-	.cdm .content-inner img:not(:hover),
-	.post .content video:not(:hover),
-	.cdm .content-inner video:not(:hover) {
-		opacity : 0.5;
-		filter: grayscale(80%);
-	} */
-}
 body.flat.ttrss_main img[src*='indicator_white.gif'] {
   filter: invert(1);
 }
@@ -2089,6 +2072,18 @@ body.flat.ttrss_main ul#filterDlg_Actions {
   background: #222;
   border-color: #666;
 }
+body.flat.ttrss_main .post .content img,
+body.flat.ttrss_main .cdm .content-inner img,
+body.flat.ttrss_main .post .content video,
+body.flat.ttrss_main .cdm .content-inner video {
+  transition: filter 0.25s linear;
+}
+body.flat.ttrss_main .post .content img:not(:hover),
+body.flat.ttrss_main .cdm .content-inner img:not(:hover),
+body.flat.ttrss_main .post .content video:not(:hover),
+body.flat.ttrss_main .cdm .content-inner video:not(:hover) {
+  filter: saturate(0.9) brightness(0.8);
+}
 body.flat.ttrss_main .article-note {
   background: #b87d2c;
   border-color: #b87d2c;
diff --git a/themes/night.css b/themes/night.css
index 6870ab634..c126dc774 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -1893,23 +1893,6 @@ body.flat.ttrss_main.ttrss_prefs div.prefHelp {
 body.flat.ttrss_main.ttrss_prefs hr {
   border-color: #666;
 }
-body.flat.ttrss_main {
-  /*
-	.post .content img,
-	.cdm .content-inner img,
-	.post .content video,
-	.cdm .content-inner video {
-		transition : opacity 0.2s linear, filter 0.2s linear;
-	}
-
-	.post .content img:not(:hover),
-	.cdm .content-inner img:not(:hover),
-	.post .content video:not(:hover),
-	.cdm .content-inner video:not(:hover) {
-		opacity : 0.5;
-		filter: grayscale(80%);
-	} */
-}
 body.flat.ttrss_main img[src*='indicator_white.gif'] {
   filter: invert(1);
 }
@@ -2090,6 +2073,18 @@ body.flat.ttrss_main ul#filterDlg_Actions {
   background: #222;
   border-color: #666;
 }
+body.flat.ttrss_main .post .content img,
+body.flat.ttrss_main .cdm .content-inner img,
+body.flat.ttrss_main .post .content video,
+body.flat.ttrss_main .cdm .content-inner video {
+  transition: filter 0.25s linear;
+}
+body.flat.ttrss_main .post .content img:not(:hover),
+body.flat.ttrss_main .cdm .content-inner img:not(:hover),
+body.flat.ttrss_main .post .content video:not(:hover),
+body.flat.ttrss_main .cdm .content-inner video:not(:hover) {
+  filter: saturate(0.9) brightness(0.8);
+}
 body.flat.ttrss_main .article-note {
   background: #b87d2c;
   border-color: #b87d2c;
diff --git a/themes/night_base.less b/themes/night_base.less
index e1dad7528..5207088a9 100644
--- a/themes/night_base.less
+++ b/themes/night_base.less
@@ -271,21 +271,16 @@ body.flat.ttrss_main {
 		border-color : @border-light;
 	}
 
-	/*
-	.post .content img,
-	.cdm .content-inner img,
-	.post .content video,
-	.cdm .content-inner video {
-		transition : opacity 0.2s linear, filter 0.2s linear;
-	}
-
-	.post .content img:not(:hover),
-	.cdm .content-inner img:not(:hover),
-	.post .content video:not(:hover),
-	.cdm .content-inner video:not(:hover) {
-		opacity : 0.5;
-		filter: grayscale(80%);
-	} */
+	.post .content,
+	.cdm .content-inner {
+		img, video {
+			transition : filter 0.25s linear;
+		}
+
+		img:not(:hover), video:not(:hover) {
+			filter: saturate(0.9) brightness(0.8);
+		}
+	}
 
 	.article-note {
 		background : @color-accent;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index d66bcea5f..0ea7bed66 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -1893,23 +1893,6 @@ body.flat.ttrss_main.ttrss_prefs div.prefHelp {
 body.flat.ttrss_main.ttrss_prefs hr {
   border-color: #666;
 }
-body.flat.ttrss_main {
-  /*
-	.post .content img,
-	.cdm .content-inner img,
-	.post .content video,
-	.cdm .content-inner video {
-		transition : opacity 0.2s linear, filter 0.2s linear;
-	}
-
-	.post .content img:not(:hover),
-	.cdm .content-inner img:not(:hover),
-	.post .content video:not(:hover),
-	.cdm .content-inner video:not(:hover) {
-		opacity : 0.5;
-		filter: grayscale(80%);
-	} */
-}
 body.flat.ttrss_main img[src*='indicator_white.gif'] {
   filter: invert(1);
 }
@@ -2090,6 +2073,18 @@ body.flat.ttrss_main ul#filterDlg_Actions {
   background: #222;
   border-color: #666;
 }
+body.flat.ttrss_main .post .content img,
+body.flat.ttrss_main .cdm .content-inner img,
+body.flat.ttrss_main .post .content video,
+body.flat.ttrss_main .cdm .content-inner video {
+  transition: filter 0.25s linear;
+}
+body.flat.ttrss_main .post .content img:not(:hover),
+body.flat.ttrss_main .cdm .content-inner img:not(:hover),
+body.flat.ttrss_main .post .content video:not(:hover),
+body.flat.ttrss_main .cdm .content-inner video:not(:hover) {
+  filter: saturate(0.9) brightness(0.8);
+}
 body.flat.ttrss_main .article-note {
   background: #257aa7;
   border-color: #257aa7;