all themes (#4663)

29 files changed, 224 insertions, 67 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 7d098c2be..7b6efda44 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -974,11 +974,20 @@ kbd {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
 	color: var(--font-color-dark);
+	background-color: var(--background-color-dark);
 	border-bottom: 10px solid var(--background-color-dark);
 }
 
+#stream.reader .flux:hover {
+	background: inherit !important;
+}
+
+#stream.reader .flux .content {
+	background-color: var(--background-color-middle);
+	border-color: var(--border-color-dark);
+}
+
 #stream.reader .flux.current.active {
 	background: var(--background-color-middle);
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 67fc7cb32..c461a2896 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -974,11 +974,20 @@ kbd {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
 	color: var(--font-color-dark);
+	background-color: var(--background-color-dark);
 	border-bottom: 10px solid var(--background-color-dark);
 }
 
+#stream.reader .flux:hover {
+	background: inherit !important;
+}
+
+#stream.reader .flux .content {
+	background-color: var(--background-color-middle);
+	border-color: var(--border-color-dark);
+}
+
 #stream.reader .flux.current.active {
 	background: var(--background-color-middle);
 }
diff --git a/p/themes/Ansum/_reader-view.scss b/p/themes/Ansum/_reader-view.scss
index 3390985b0..81046aa89 100644
--- a/p/themes/Ansum/_reader-view.scss
+++ b/p/themes/Ansum/_reader-view.scss
@@ -2,15 +2,21 @@
 
 /*=== READER VIEW */
 /*================*/
-#stream.reader .flux {
-	padding: 0 0 50px;
-	background: variables.$grey-light;
-	color: variables.$main-font-color;
-	border: none;
-}
+#stream.reader {
+	.flux {
+		background: variables.$grey-light;
+		color: variables.$main-font-color;
+		border: none;
+
+		.content {
+			background-color: variables.$white;
+			border: none;
 
-#stream.reader .flux .author {
-	margin: 0 0 10px;
-	color: variables.$grey-medium-dark;
-	font-size: 90%;
+			.author {
+				margin: 0 0 10px;
+				color: variables.$grey-medium-dark;
+				font-size: 90%;
+			}
+		}
+	}
 }
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index c04a16937..ad48d4f8f 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1104,13 +1104,15 @@ main.prompt {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: #f5f0ec;
 	color: #363330;
 	border: none;
 }
-
-#stream.reader .flux .author {
+#stream.reader .flux .content {
+	background-color: #fff;
+	border: none;
+}
+#stream.reader .flux .content .author {
 	margin: 0 0 10px;
 	color: #ba9;
 	font-size: 90%;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 623897993..2052a1598 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1104,13 +1104,15 @@ main.prompt {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: #f5f0ec;
 	color: #363330;
 	border: none;
 }
-
-#stream.reader .flux .author {
+#stream.reader .flux .content {
+	background-color: #fff;
+	border: none;
+}
+#stream.reader .flux .content .author {
 	margin: 0 0 10px;
 	color: #ba9;
 	font-size: 90%;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 4f290c97c..31e283209 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -1024,12 +1024,20 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #f0f0f0;
+	background: #f9f7f4;
 	color: #333;
 	border: none;
 }
 
+#stream.reader .flux_content {
+	background: none;
+}
+
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #666;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 247b20aac..8537af83c 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -1024,12 +1024,20 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #f0f0f0;
+	background: #f9f7f4;
 	color: #333;
 	border: none;
 }
 
+#stream.reader .flux_content {
+	background: none;
+}
+
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #666;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 6ec739803..751834798 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -904,8 +904,12 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #111;
+	background: #1c1c1c;
+	border: none;
+}
+
+#stream.reader .flux .content {
+	background-color: #111;
 	border: none;
 }
 
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index fcd76c4af..9522cb3c7 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -904,8 +904,12 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #111;
+	background: #1c1c1c;
+	border: none;
+}
+
+#stream.reader .flux .content {
+	background-color: #111;
 	border: none;
 }
 
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index d7541f99f..ac6585c6f 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -925,12 +925,16 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #ecf0f1;
+	background: #fafafa;
 	color: #34495e;
 	border: none;
 }
 
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ecf0f1;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #999;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 0cf0dbdc1..dc57e6d24 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -925,12 +925,16 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #ecf0f1;
+	background: #fafafa;
 	color: #34495e;
 	border: none;
 }
 
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ecf0f1;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #999;
diff --git a/p/themes/Mapco/_reader-view.scss b/p/themes/Mapco/_reader-view.scss
index 3390985b0..81046aa89 100644
--- a/p/themes/Mapco/_reader-view.scss
+++ b/p/themes/Mapco/_reader-view.scss
@@ -2,15 +2,21 @@
 
 /*=== READER VIEW */
 /*================*/
-#stream.reader .flux {
-	padding: 0 0 50px;
-	background: variables.$grey-light;
-	color: variables.$main-font-color;
-	border: none;
-}
+#stream.reader {
+	.flux {
+		background: variables.$grey-light;
+		color: variables.$main-font-color;
+		border: none;
+
+		.content {
+			background-color: variables.$white;
+			border: none;
 
-#stream.reader .flux .author {
-	margin: 0 0 10px;
-	color: variables.$grey-medium-dark;
-	font-size: 90%;
+			.author {
+				margin: 0 0 10px;
+				color: variables.$grey-medium-dark;
+				font-size: 90%;
+			}
+		}
+	}
 }
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 6ecb32b00..06d612a8d 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1133,13 +1133,15 @@ main.prompt {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: #eff0f2;
 	color: #303136;
 	border: none;
 }
-
-#stream.reader .flux .author {
+#stream.reader .flux .content {
+	background-color: #fff;
+	border: none;
+}
+#stream.reader .flux .content .author {
 	margin: 0 0 10px;
 	color: #a6a7ae;
 	font-size: 90%;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 7335484be..804483193 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1133,13 +1133,15 @@ main.prompt {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: #eff0f2;
 	color: #303136;
 	border: none;
 }
-
-#stream.reader .flux .author {
+#stream.reader .flux .content {
+	background-color: #fff;
+	border: none;
+}
+#stream.reader .flux .content .author {
 	margin: 0 0 10px;
 	color: #a6a7ae;
 	font-size: 90%;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 5da5bd1f2..fcad17acc 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -1060,7 +1060,13 @@ input.extend {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
+	background: #242933;
+	border: none;
+}
+
+#stream.reader .flux .content {
+	background-color: #2e3440;
+	border: none;
 }
 
 #stream.reader .flux .author {
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 1d91bb08d..fe2fe4de8 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -1060,7 +1060,13 @@ input.extend {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
+	background: #242933;
+	border: none;
+}
+
+#stream.reader .flux .content {
+	background-color: #2e3440;
+	border: none;
 }
 
 #stream.reader .flux .author {
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 73fbe1719..83e0822a2 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -908,16 +908,14 @@ a.btn,
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 25px 0 25px;
 	background: #f0f0f0;
 	color: #333;
 	border: none;
 }
 
 #stream.reader .flux .content {
-	padding: 3rem;
 	background-color: #fff;
-	border: 1px solid #ddd;
+	border-color: #ddd;
 }
 
 #stream.reader .flux .author {
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 878c4ba9a..9efd136ad 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -908,16 +908,14 @@ a.btn,
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 25px 0 25px;
 	background: #f0f0f0;
 	color: #333;
 	border: none;
 }
 
 #stream.reader .flux .content {
-	padding: 3rem;
 	background-color: #fff;
-	border: 1px solid #ddd;
+	border-color: #ddd;
 }
 
 #stream.reader .flux .author {
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index c80f6581c..14266cc79 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -902,12 +902,16 @@ a.signin {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #f0f0f0;
+	background: #fafafa;
 	color: #41444f;
 	border: none;
 }
 
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #666;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index ae16105b9..2a9daf39f 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -902,12 +902,16 @@ a.signin {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #f0f0f0;
+	background: #fafafa;
 	color: #41444f;
 	border: none;
 }
 
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #666;
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 6473a1329..9672a25d5 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -999,12 +999,23 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #f0f0f0;
+	background: #ede7de;
 	color: #333;
 	border: none;
 }
 
+#stream.reader .flux_content {
+	background: none;
+	border-radius: 0;
+}
+
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
+	border-radius: 10px;
+	box-shadow: 0 -1px rgba(255,255,255,0.28) inset;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #666;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index d87523ec2..716316660 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -999,12 +999,23 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
-	background: #f0f0f0;
+	background: #ede7de;
 	color: #333;
 	border: none;
 }
 
+#stream.reader .flux_content {
+	background: none;
+	border-radius: 0;
+}
+
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
+	border-radius: 10px;
+	box-shadow: 0 -1px rgba(255,255,255,0.28) inset;
+}
+
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #666;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index b25d980ae..08c9b380d 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -1238,11 +1238,16 @@ button.as-link {
 }
 
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: #fcfcfc;
 	color: #22303d;
 	border: none;
 }
+#stream.reader .flux::after {
+	border: none;
+}
+#stream.reader .flux .content {
+	border-color: #e3e3e3;
+}
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #969696;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 6497de09b..f486cd030 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -1238,11 +1238,16 @@ button.as-link {
 }
 
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: #fcfcfc;
 	color: #22303d;
 	border: none;
 }
+#stream.reader .flux::after {
+	border: none;
+}
+#stream.reader .flux .content {
+	border-color: #e3e3e3;
+}
 #stream.reader .flux .author {
 	margin: 0 0 10px;
 	color: #969696;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 420de3a14..c690e13c2 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -1538,11 +1538,18 @@ button.as-link {
 }
 
 #stream.reader .flux {
-	padding: 0 0 50px;
 	background: $color_light;
 	color: $color_aside;
 	border: none;
 
+	&::after {
+		border: none;
+	}
+
+	.content {
+		border-color: #e3e3e3;
+	}
+
 	.author {
 		margin: 0 0 10px;
 		color: color.adjust( $color_light, $lightness: -40% );
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 5edf0257e..7ce91c584 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -725,7 +725,13 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
+	background-color: #f0f0f0;
+	color: #333;
+}
+
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
 }
 
 #stream.reader .flux .author {
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 8ef5e2a21..380afb972 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -725,7 +725,13 @@ a.btn {
 /*=== READER VIEW */
 /*================*/
 #stream.reader .flux {
-	padding: 0 0 50px;
+	background-color: #f0f0f0;
+	color: #333;
+}
+
+#stream.reader .flux .content {
+	background-color: #fff;
+	border-color: #ddd;
 }
 
 #stream.reader .flux .author {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 56a314664..1ce760690 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1875,6 +1875,16 @@ input:checked + .slide-container .properties {
 	display: none;
 }
 
+.reader .flux {
+	padding: 1rem 0 2rem;
+}
+
+.reader .flux .content {
+	padding: 3rem;
+	background-color: var(--frss-background-color);
+	border: 1px solid var(--frss-border-color);
+}
+
 #loglist-wrapper {
 	overflow-x: auto;
 }
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 9aa043ccd..d5aeb3429 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1875,6 +1875,16 @@ input:checked + .slide-container .properties {
 	display: none;
 }
 
+.reader .flux {
+	padding: 1rem 0 2rem;
+}
+
+.reader .flux .content {
+	padding: 3rem;
+	background-color: var(--frss-background-color);
+	border: 1px solid var(--frss-border-color);
+}
+
 #loglist-wrapper {
 	overflow-x: auto;
 }