Style for timeline posts background

epicyon-profile.css

@@ -71,6 +71,7 @@
     --gallery-font-size-mobile: 35px;
     --button-corner-radius: 15px;
     --timeline-border-radius: 30px;
+    --timeline-posts-background-color: #282c37;
     --icons-side: right;
     --title-color: #999;
     --focus-color: white;
@@ -383,6 +384,10 @@ a:focus {
     width: 10%;
 }
 
+.timeline-posts {
+    background-color: var(--timeline-posts-background-color);
+}
+
 .container img.timelineicon:hover {
     filter: brightness(var(--icon-brightness-change));
 }
@@ -1010,12 +1015,14 @@ div.container {
     .timeline-banner {
         vertical-align: top;
         object-fit: cover;
-        width: 98vw;
+        width: 100%;
         max-height: var(--banner-height);
     }
     .timeline {
         border: 0;
-        width: 98vw;
+        width: 100%;
+        table-layout: fixed;
+        overflow: hidden;
     }
     .col-left a:link {
         background: var(--column-left-color);

theme/blue/theme.json

@@ -17,6 +17,7 @@
     "gallery-font-size": "35px",
     "gallery-font-size-mobile": "55px",
     "main-bg-color": "#002365",
+    "timeline-posts-background-color": "#002365",
     "header-bg-color": "#002365",
     "column-left-color": "#002365",
     "text-entry-background": "#002365",

theme/hacker/theme.json

@@ -6,6 +6,7 @@
     "publish-button-at-top": "False",
     "focus-color": "green",
     "main-bg-color": "black",
+    "timeline-posts-background-color": "black",
     "header-bg-color": "black",
     "column-left-color": "black",
     "link-bg-color": "black",

theme/henge/theme.json

@@ -14,6 +14,7 @@
     "font-size4": "24px",
     "font-size5": "22px",
     "main-bg-color": "#383335",
+    "timeline-posts-background-color": "#383335",
     "header-bg-color": "#383335",
     "column-left-color": "#383335",
     "text-entry-background": "#383335",

theme/indymediaclassic/theme.json

@@ -27,6 +27,7 @@
     "font-size4": "24px",
     "font-size5": "22px",
     "main-bg-color": "black",
+    "timeline-posts-background-color": "black",
     "header-bg-color": "black",
     "column-left-header-color": "#fff",
     "column-left-header-background": "#555",

theme/indymediamodern/theme.json

@@ -79,7 +79,8 @@
     "font-size-publish-button": "14px",
     "rgba(0, 0, 0, 0.5)": "rgba(0, 0, 0, 0.0)",
     "column-left-color": "#efefef",
-    "main-bg-color": "white",
+    "main-bg-color": "#efefef",
+    "timeline-posts-background-color": "white",
     "main-bg-color-dm": "white",
     "link-bg-color": "#efefef",
     "main-bg-color-reply": "white",

theme/lcd/theme.json

@@ -8,6 +8,7 @@
     "column-left-header-background": "#9fb42b",
     "column-left-header-color": "#33390d",
     "main-bg-color": "#9fb42b",
+    "timeline-posts-background-color": "#9fb42b",
     "header-bg-color": "#9fb42b",
     "column-left-color": "#33390d",
     "column-left-fg-color": "#9fb42b",

theme/light/theme.json

@@ -22,6 +22,7 @@
     "rgba(0, 0, 0, 0.5)": "rgba(0, 0, 0, 0.0)",
     "column-left-color": "#e6ebf0",
     "main-bg-color": "#e6ebf0",
+    "timeline-posts-background-color": "#e6ebf0",
     "header-bg-color": "#e6ebf0",
     "main-bg-color-dm": "#e3dbf0",
     "link-bg-color": "#e6ebf0",

theme/night/theme.json

@@ -20,6 +20,7 @@
     "font-size4": "24px",
     "font-size5": "22px",
     "main-bg-color": "#0f0d10",
+    "timeline-posts-background-color": "#0f0d10",
     "header-bg-color": "#0f0d10",
     "column-left-color": "#0f0d10",
     "text-entry-background": "#0f0d10",

theme/purple/theme.json

@@ -13,6 +13,7 @@
     "font-size4": "24px",
     "font-size5": "22px",
     "main-bg-color": "#1f152d",
+    "timeline-posts-background-color": "#1f152d",
     "header-bg-color": "#1f152d",
     "column-left-color": "#1f152d",
     "link-bg-color": "#1f152d",

theme/rc3/theme.json

@@ -41,6 +41,7 @@
     "font-size5": "12px",
     "font-size-likes": "10px",    
     "main-bg-color": "#100e23",
+    "timeline-posts-background-color": "#100e23",
     "header-bg-color": "#100e23",
     "column-left-color": "#0f0d10",
     "text-entry-background": "#0f0d10",

theme/solidaric/theme.json

@@ -29,6 +29,7 @@
     "font-size5": "22px",
     "rgba(0, 0, 0, 0.5)": "rgba(0, 0, 0, 0.0)",
     "main-bg-color": "white",
+    "timeline-posts-background-color": "white",
     "header-bg-color": "white",
     "column-left-color": "white",
     "main-bg-color-dm": "white",

theme/starlight/theme.json

@@ -16,6 +16,7 @@
     "font-size4": "24px",
     "font-size5": "22px",
     "main-bg-color": "#0f0d10",
+    "timeline-posts-background-color": "#0f0d10",
     "header-bg-color": "#0f0d10",
     "column-left-color": "#0f0d10",
     "text-entry-background": "#0f0d10",

theme/zen/theme.json

@@ -8,6 +8,7 @@
     "banner-height-mobile": "10vh",
     "newswire-date-color": "yellow",
     "main-bg-color": "#5c4e41",
+    "timeline-posts-background-color": "#5c4e41",
     "header-bg-color": "#5c4e41",
     "column-left-color": "#5c4e41",
     "text-entry-background": "#5c4e41",

webapp_timeline.py

@@ -426,6 +426,8 @@ def htmlTimeline(cssCache: {}, defaultTimeline: str,
                                   calendarImage, followApprovals,
                                   iconsAsButtons)
 
+    tlStr += '  <div class="timeline-posts">\n'
+
     # second row of buttons for moderator actions
     if moderator and boxName == 'moderation':
         tlStr += \
@@ -597,6 +599,9 @@ def htmlTimeline(cssCache: {}, defaultTimeline: str,
             translate['Page down'] + '"></a>\n' + \
             '      </center>\n'
 
+    # end of timeline-posts
+    tlStr += '  </div>\n'
+
     # end of column-center
     tlStr += '  </td>\n'