all themes (#4663)

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);
 }

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);
 }

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%;
+			}
+		}
+	}
 }

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%;

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%;

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;

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;

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;
 }
 

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;
 }
 

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;

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;

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%;
+			}
+		}
+	}
 }

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%;

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%;

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 {

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 {

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 {

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 {

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;

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;

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;

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;

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;

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;

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% );

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 {

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 {

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;
 }

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;
 }