Browse Source

remove floating title, use position: sticky for cdm headers instead

Andrew Dolgov 2 months ago
parent
commit
7adbc95acc

+ 0 - 1
index.php

@@ -256,7 +256,6 @@
         </div> <!-- toolbar -->
         </div> <!-- toolbar pane -->
         <div id="headlines-wrap-inner" dojoType="dijit.layout.BorderContainer" region="center">
-            <div id="floatingTitle" style="display : none"></div>
             <div id="headlines-frame" dojoType="dijit.layout.ContentPane" tabindex="0"
                     region="center">
                 <div id="headlinesInnerContainer">

+ 0 - 2
js/Article.js

@@ -319,8 +319,6 @@ define(["dojo/_base/declare"], function (declare) {
 				}
 
 				ctr.scrollTop = e.offsetTop;
-
-				Element.hide("floatingTitle");
 			}
 		},
 		setActive: function (id) {

+ 23 - 78
js/Headlines.js

@@ -8,6 +8,24 @@ define(["dojo/_base/declare"], function (declare) {
 		headlines: [],
 		current_first_id: 0,
 		_scroll_reset_timeout: false,
+		intersection_observer: new IntersectionObserver(
+			(entries, observer) => {
+				entries.forEach((entry) => {
+					const header = entry.target.nextElementSibling;
+
+					if (entry.intersectionRatio == 0) {
+						header.setAttribute("stuck", "1");
+
+					} else if (entry.intersectionRatio == 1) {
+						header.removeAttribute("stuck");
+					}
+
+					//console.log(entry.target, header, entry.intersectionRatio);
+
+				});
+			},
+			{threshold: [0, 1], root: document.querySelector("#headlines-frame")}
+		),
 		row_observer: new MutationObserver((mutations) => {
 			const modified = [];
 
@@ -40,7 +58,6 @@ define(["dojo/_base/declare"], function (declare) {
 			});
 
 			Headlines.updateSelectedPrompt();
-			Headlines.updateFloatingTitle(true);
 
 			if ('requestIdleCallback' in window)
 				window.requestIdleCallback(() => {
@@ -272,9 +289,6 @@ define(["dojo/_base/declare"], function (declare) {
 			try {
 				Headlines.unpackVisible();
 
-				if (App.isCombinedMode())
-					Headlines.updateFloatingTitle();
-
 				if (!Feeds.infscroll_disabled && !Feeds.infscroll_in_progress) {
 					const hsp = $("headlines-spacer");
 					const container = $("headlines-frame");
@@ -311,61 +325,6 @@ define(["dojo/_base/declare"], function (declare) {
 				console.warn("scrollHandler", e);
 			}
 		},
-		updateFloatingTitle: function (status_only) {
-			if (!App.isCombinedMode()/* || !App.getInitParam("cdm_expanded")*/) return;
-
-			const safety_offset = 120; /* px, needed for firefox */
-			const hf = $("headlines-frame");
-			const elems = $$("#headlines-frame > div[id*=RROW]");
-			const ft = $("floatingTitle");
-
-			for (let i = 0; i < elems.length; i++) {
-				const row = elems[i];
-
-				if (row && row.offsetTop + row.offsetHeight > hf.scrollTop + safety_offset) {
-
-					const header = row.select(".header")[0];
-					const id = row.getAttribute("data-article-id");
-
-					if (status_only || id != ft.getAttribute("data-article-id")) {
-						if (id != ft.getAttribute("data-article-id")) {
-
-							ft.setAttribute("data-article-id", id);
-							ft.innerHTML = header.innerHTML;
-
-							ft.select(".dijitCheckBox")[0].outerHTML = "<i class=\"material-icons icon-anchor\" onclick=\"Article.cdmMoveToId(" + id + ")\">expand_more</i>";
-
-							this.initFloatingMenu();
-
-						}
-
-						if (row.hasClassName("Unread"))
-							ft.addClassName("Unread");
-						else
-							ft.removeClassName("Unread");
-
-						if (row.hasClassName("marked"))
-							ft.addClassName("marked");
-						else
-							ft.removeClassName("marked");
-
-						if (row.hasClassName("published"))
-							ft.addClassName("published");
-						else
-							ft.removeClassName("published");
-
-						PluginHost.run(PluginHost.HOOK_FLOATING_TITLE, row);
-					}
-
-					if (hf.scrollTop - row.offsetTop <= header.offsetHeight + safety_offset)
-						ft.fade({duration: 0.2});
-					else
-						ft.appear({duration: 0.2});
-
-					return;
-				}
-			}
-		},
 		unpackVisible: function () {
 			if (!App.isCombinedMode() || !App.getInitParam("cdm_expanded")) return;
 
@@ -426,6 +385,8 @@ define(["dojo/_base/declare"], function (declare) {
 
 				}
 			});
+
+			$$(".cdm .header-sticky-guard").each((e) => { this.intersection_observer.observe(e) });
 		},
 		render: function (headlines, hl) {
 			let row = null;
@@ -467,7 +428,7 @@ define(["dojo/_base/declare"], function (declare) {
 							data-article-title="${escapeHtml(hl.title)}"
 							onmouseover="Article.mouseIn(${hl.id})"
 							onmouseout="Article.mouseOut(${hl.id})">
-							
+							<div class="header-sticky-guard"></div>
 							<div class="header">
 								<div class="left">
 									<input dojoType="dijit.form.CheckBox" type="checkbox" onclick="Headlines.onRowChecked(this)" class='rchk'>
@@ -624,10 +585,6 @@ define(["dojo/_base/declare"], function (declare) {
 						$("headlines-frame").removeClassName("smooth-scroll");
 						$("headlines-frame").scrollTop = 0;
 						$("headlines-frame").addClassName("smooth-scroll");
-
-						Element.hide("floatingTitle");
-						$("floatingTitle").setAttribute("data-article-id", 0);
-						$("floatingTitle").innerHTML = "";
 					} catch (e) {
 						console.warn(e);
 					}
@@ -738,6 +695,8 @@ define(["dojo/_base/declare"], function (declare) {
 					}
 				}
 
+				$$(".cdm .header-sticky-guard").each((e) => { this.intersection_observer.observe(e) });
+
 			} else {
 				console.error("Invalid object received: " + transport.responseText);
 				dijit.byId("headlines-frame").attr('content', "<div class='whiteBox'>" +
@@ -1276,20 +1235,6 @@ define(["dojo/_base/declare"], function (declare) {
 				container.scrollTop = row.offsetTop + row.offsetHeight - viewport;
 			}
 		},
-		initFloatingMenu: function () {
-			if (!dijit.byId("floatingMenu")) {
-
-				const menu = new dijit.Menu({
-					id: "floatingMenu",
-					selector: ".hlMenuAttach",
-					targetNodeIds: ["floatingTitle"]
-				});
-
-				this.headlinesMenuCommon(menu);
-
-				menu.startup();
-			}
-		},
 		headlinesMenuCommon: function (menu) {
 
 			menu.addChild(new dijit.MenuItem({

+ 16 - 113
themes/compact.css

@@ -926,12 +926,10 @@ body.ttrss_main i.icon-no-feed {
 body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
   opacity: 0.5;
 }
-body.ttrss_main #floatingTitle.marked i.marked-pic,
 body.ttrss_main .cdm.marked .left i.marked-pic,
 body.ttrss_main .hl.marked .left i.marked-pic {
   color: #ffc069;
 }
-body.ttrss_main #floatingTitle.published i.pub-pic,
 body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
@@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm i.material-icons {
   color: #777;
 }
+.cdm .header {
+  position: sticky;
+  top: 0;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1137,6 +1139,9 @@ video::-webkit-media-controls-overlay-play-button {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header-sticky-guard {
+  height: 0;
+}
 .cdm .header {
   align-items: center;
 }
@@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm .header input {
   margin: 0px 4px;
 }
+.cdm .header[stuck] {
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  border: 0 solid #ddd;
+  border-bottom-width: 1px;
+  background: white ! important;
+  opacity: 0.9;
+  backdrop-filter: blur(6px);
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
@@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-div.cdm.expanded div.header {
+div.cdm.expanded .header:not([stuck]) {
   background: transparent ! important;
 }
 div.cdm.expanded div.header a.title {
@@ -1287,115 +1300,6 @@ div.cdm.vgrlf .feed {
   display: inline-block;
   padding: 1px 4px 1px 4px;
 }
-#main:not(.expandable) div#floatingTitle .collapse {
-  display: none;
-}
-div#floatingTitle {
-  position: absolute;
-  z-index: 5;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  border: 0px solid #ddd;
-  border-bottom-width: 1px;
-  background: white;
-  color: #555;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
-  align-items: center;
-}
-div#floatingTitle > * {
-  white-space: nowrap;
-  padding: 4px;
-}
-div#floatingTitle .left,
-div#floatingTitle .right {
-  display: flex;
-  align-items: center;
-}
-div#floatingTitle .left i.material-icons,
-div#floatingTitle .right i.material-icons {
-  margin-left: 2px;
-  font-size: 21px;
-  padding: 2px;
-  user-select: none;
-}
-div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.icon-anchor {
-  margin-left: 0px;
-  margin-right: 1px;
-  padding: 0px;
-  color: #ccc;
-  cursor: pointer;
-}
-div#floatingTitle .excerpt {
-  display: none;
-}
-div#floatingTitle .collapse i.material-icons {
-  color: #257aa7;
-  cursor: pointer;
-}
-div#floatingTitle span.author {
-  color: #555;
-  font-size: 11px;
-  font-weight: normal;
-}
-div#floatingTitle a.title {
-  font-size: 16px;
-  color: #999;
-  transition: color 0.2s, background 0.2s;
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-div#floatingTitle div.feed {
-  padding-right: 10px;
-  color: #555;
-  font-weight: normal;
-  font-style: italic;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle div.feed a {
-  border-radius: 4px;
-  display: inline-block;
-  padding: 1px 4px 1px 4px;
-}
-div#floatingTitle span.updated {
-  padding-right: 10px;
-  white-space: nowrap;
-  color: #555;
-  font-size: 11px;
-}
-div#floatingTitle div.feed a {
-  color: #555;
-}
-div#floatingTitle span.titleWrap {
-  width: 100%;
-  white-space: normal;
-}
-div#floatingTitle .feed-title > * {
-  display: table-cell;
-  vertical-align: middle;
-}
-div#floatingTitle .feed-title a.title {
-  width: 100%;
-}
-div#floatingTitle .feed-title a.catchup {
-  text-align: right;
-  color: #555;
-  padding-right: 10px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle .feed-title a.catchup:hover {
-  color: #257aa7;
-}
-div#floatingTitle.Unread a.title {
-  color: black;
-}
 .cdm.expandable {
   background-color: #f5f5f5;
   border: 0px solid #ddd;
@@ -1956,7 +1860,6 @@ body.ttrss_main.ttrss_index.flat div[id*=RROW] i.material-icons {
 }
 body.ttrss_main.ttrss_index.flat .hl,
 body.ttrss_main.ttrss_index.flat .post .header .title,
-body.ttrss_main.ttrss_index.flat #floatingTitle a.title,
 body.ttrss_main.ttrss_index.flat .cdm .title {
   font-size: 13px ! important;
 }

File diff suppressed because it is too large
+ 0 - 0
themes/compact.css.map


+ 0 - 1
themes/compact_base.less

@@ -22,7 +22,6 @@ body.ttrss_main.ttrss_index.flat {
 
   .hl,
   .post .header .title,
-  #floatingTitle a.title,
   .cdm .title {
     font-size : 13px ! important;
   }

+ 16 - 125
themes/compact_night.css

@@ -926,12 +926,10 @@ body.ttrss_main i.icon-no-feed {
 body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
   opacity: 0.5;
 }
-body.ttrss_main #floatingTitle.marked i.marked-pic,
 body.ttrss_main .cdm.marked .left i.marked-pic,
 body.ttrss_main .hl.marked .left i.marked-pic {
   color: #ffc069;
 }
-body.ttrss_main #floatingTitle.published i.pub-pic,
 body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
@@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm i.material-icons {
   color: #777;
 }
+.cdm .header {
+  position: sticky;
+  top: 0;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1137,6 +1139,9 @@ video::-webkit-media-controls-overlay-play-button {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header-sticky-guard {
+  height: 0;
+}
 .cdm .header {
   align-items: center;
 }
@@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm .header input {
   margin: 0px 4px;
 }
+.cdm .header[stuck] {
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  border: 0 solid #222;
+  border-bottom-width: 1px;
+  background: #333 ! important;
+  opacity: 0.9;
+  backdrop-filter: blur(6px);
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
@@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-div.cdm.expanded div.header {
+div.cdm.expanded .header:not([stuck]) {
   background: transparent ! important;
 }
 div.cdm.expanded div.header a.title {
@@ -1287,115 +1300,6 @@ div.cdm.vgrlf .feed {
   display: inline-block;
   padding: 1px 4px 1px 4px;
 }
-#main:not(.expandable) div#floatingTitle .collapse {
-  display: none;
-}
-div#floatingTitle {
-  position: absolute;
-  z-index: 5;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  border: 0px solid #222;
-  border-bottom-width: 1px;
-  background: white;
-  color: #ccc;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
-  align-items: center;
-}
-div#floatingTitle > * {
-  white-space: nowrap;
-  padding: 4px;
-}
-div#floatingTitle .left,
-div#floatingTitle .right {
-  display: flex;
-  align-items: center;
-}
-div#floatingTitle .left i.material-icons,
-div#floatingTitle .right i.material-icons {
-  margin-left: 2px;
-  font-size: 21px;
-  padding: 2px;
-  user-select: none;
-}
-div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.icon-anchor {
-  margin-left: 0px;
-  margin-right: 1px;
-  padding: 0px;
-  color: #ccc;
-  cursor: pointer;
-}
-div#floatingTitle .excerpt {
-  display: none;
-}
-div#floatingTitle .collapse i.material-icons {
-  color: #b87d2c;
-  cursor: pointer;
-}
-div#floatingTitle span.author {
-  color: #ccc;
-  font-size: 11px;
-  font-weight: normal;
-}
-div#floatingTitle a.title {
-  font-size: 16px;
-  color: #999;
-  transition: color 0.2s, background 0.2s;
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-div#floatingTitle div.feed {
-  padding-right: 10px;
-  color: #ccc;
-  font-weight: normal;
-  font-style: italic;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle div.feed a {
-  border-radius: 4px;
-  display: inline-block;
-  padding: 1px 4px 1px 4px;
-}
-div#floatingTitle span.updated {
-  padding-right: 10px;
-  white-space: nowrap;
-  color: #ccc;
-  font-size: 11px;
-}
-div#floatingTitle div.feed a {
-  color: #ccc;
-}
-div#floatingTitle span.titleWrap {
-  width: 100%;
-  white-space: normal;
-}
-div#floatingTitle .feed-title > * {
-  display: table-cell;
-  vertical-align: middle;
-}
-div#floatingTitle .feed-title a.title {
-  width: 100%;
-}
-div#floatingTitle .feed-title a.catchup {
-  text-align: right;
-  color: #ccc;
-  padding-right: 10px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle .feed-title a.catchup:hover {
-  color: #b87d2c;
-}
-div#floatingTitle.Unread a.title {
-  color: black;
-}
 .cdm.expandable {
   background-color: #222;
   border: 0px solid #222;
@@ -2001,18 +1905,6 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab
 body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
   color: #999999;
 }
-body.flat.ttrss_main #floatingTitle {
-  background-color: #333;
-}
-body.flat.ttrss_main #floatingTitle .feed a {
-  color: #e6e6e6;
-}
-body.flat.ttrss_main #floatingTitle i.material-icons {
-  opacity: 0.7;
-}
-body.flat.ttrss_main div#floatingTitle.Unread a.title {
-  color: #e6e6e6;
-}
 body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread),
 body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
   background: #333;
@@ -2203,7 +2095,6 @@ body.ttrss_main.ttrss_index.flat div[id*=RROW] i.material-icons {
 }
 body.ttrss_main.ttrss_index.flat .hl,
 body.ttrss_main.ttrss_index.flat .post .header .title,
-body.ttrss_main.ttrss_index.flat #floatingTitle a.title,
 body.ttrss_main.ttrss_index.flat .cdm .title {
   font-size: 13px ! important;
 }

File diff suppressed because it is too large
+ 0 - 0
themes/compact_night.css.map


+ 16 - 112
themes/light.css

@@ -926,12 +926,10 @@ body.ttrss_main i.icon-no-feed {
 body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
   opacity: 0.5;
 }
-body.ttrss_main #floatingTitle.marked i.marked-pic,
 body.ttrss_main .cdm.marked .left i.marked-pic,
 body.ttrss_main .hl.marked .left i.marked-pic {
   color: #ffc069;
 }
-body.ttrss_main #floatingTitle.published i.pub-pic,
 body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
@@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm i.material-icons {
   color: #777;
 }
+.cdm .header {
+  position: sticky;
+  top: 0;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1137,6 +1139,9 @@ video::-webkit-media-controls-overlay-play-button {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header-sticky-guard {
+  height: 0;
+}
 .cdm .header {
   align-items: center;
 }
@@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm .header input {
   margin: 0px 4px;
 }
+.cdm .header[stuck] {
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  border: 0 solid #ddd;
+  border-bottom-width: 1px;
+  background: white ! important;
+  opacity: 0.9;
+  backdrop-filter: blur(6px);
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
@@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-div.cdm.expanded div.header {
+div.cdm.expanded .header:not([stuck]) {
   background: transparent ! important;
 }
 div.cdm.expanded div.header a.title {
@@ -1287,115 +1300,6 @@ div.cdm.vgrlf .feed {
   display: inline-block;
   padding: 1px 4px 1px 4px;
 }
-#main:not(.expandable) div#floatingTitle .collapse {
-  display: none;
-}
-div#floatingTitle {
-  position: absolute;
-  z-index: 5;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  border: 0px solid #ddd;
-  border-bottom-width: 1px;
-  background: white;
-  color: #555;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
-  align-items: center;
-}
-div#floatingTitle > * {
-  white-space: nowrap;
-  padding: 4px;
-}
-div#floatingTitle .left,
-div#floatingTitle .right {
-  display: flex;
-  align-items: center;
-}
-div#floatingTitle .left i.material-icons,
-div#floatingTitle .right i.material-icons {
-  margin-left: 2px;
-  font-size: 21px;
-  padding: 2px;
-  user-select: none;
-}
-div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.icon-anchor {
-  margin-left: 0px;
-  margin-right: 1px;
-  padding: 0px;
-  color: #ccc;
-  cursor: pointer;
-}
-div#floatingTitle .excerpt {
-  display: none;
-}
-div#floatingTitle .collapse i.material-icons {
-  color: #257aa7;
-  cursor: pointer;
-}
-div#floatingTitle span.author {
-  color: #555;
-  font-size: 11px;
-  font-weight: normal;
-}
-div#floatingTitle a.title {
-  font-size: 16px;
-  color: #999;
-  transition: color 0.2s, background 0.2s;
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-div#floatingTitle div.feed {
-  padding-right: 10px;
-  color: #555;
-  font-weight: normal;
-  font-style: italic;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle div.feed a {
-  border-radius: 4px;
-  display: inline-block;
-  padding: 1px 4px 1px 4px;
-}
-div#floatingTitle span.updated {
-  padding-right: 10px;
-  white-space: nowrap;
-  color: #555;
-  font-size: 11px;
-}
-div#floatingTitle div.feed a {
-  color: #555;
-}
-div#floatingTitle span.titleWrap {
-  width: 100%;
-  white-space: normal;
-}
-div#floatingTitle .feed-title > * {
-  display: table-cell;
-  vertical-align: middle;
-}
-div#floatingTitle .feed-title a.title {
-  width: 100%;
-}
-div#floatingTitle .feed-title a.catchup {
-  text-align: right;
-  color: #555;
-  padding-right: 10px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle .feed-title a.catchup:hover {
-  color: #257aa7;
-}
-div#floatingTitle.Unread a.title {
-  color: black;
-}
 .cdm.expandable {
   background-color: #f5f5f5;
   border: 0px solid #ddd;

File diff suppressed because it is too large
+ 0 - 0
themes/light.css.map


+ 20 - 133
themes/light/cdm.less

@@ -3,6 +3,11 @@
 		color : @color-icon;
 	}
 
+	.header {
+		position: sticky;
+		top : 0;
+	}
+
 	.header, .footer {
 		display : flex;
 		flex-direction : row;
@@ -15,6 +20,10 @@
 		vertical-align: middle;
 	}
 
+	.header-sticky-guard {
+		height : 0;
+	}
+
 	.header {
 		align-items : center;
 
@@ -52,6 +61,15 @@
 		}
 	}
 
+	.header[stuck] {
+		box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1);
+		border: 0 solid @border-default;
+		border-bottom-width: 1px;
+		background : @default-bg ! important;
+		opacity: 0.9;
+		backdrop-filter: blur(6px);
+	}
+
 	.footer {
 		height : 30px;
 		padding-left : 5px;
@@ -110,8 +128,8 @@
 
 }
 
-div.cdm.expanded div.header {
-	background : transparent ! important;
+div.cdm.expanded .header:not([stuck]) {
+	background: transparent ! important;
 }
 
 div.cdm.expanded div.header a.title {
@@ -199,137 +217,6 @@ div.cdm.vgrlf .feed {
 	}
 }
 
-#main:not(.expandable) div#floatingTitle {
-	.collapse {
-		display : none;
-	}
-}
-
-div#floatingTitle {
-	position : absolute;
-	z-index : 5;
-	top : 0px;
-	right : 0px;
-	left : 0px;
-	border: 0px solid @border-default;
-	border-bottom-width: 1px;
-	background : white;
-	color : @default-text;
-	display : flex;
-	flex-direction : row;
-	flex-wrap : nowrap;
-	box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
-	align-items: center;
-
-	> * {
-		white-space : nowrap;
-		padding : 4px;
-	}
-
-	.left, .right {
-		display : flex;
-		align-items : center;
-
-		i.material-icons {
-			margin-left : 2px;
-			font-size : 21px;
-			padding : 2px;
-			user-select: none;
-		}
-
-		i.icon-anchor {
-			margin-left : 0px;
-			margin-right : 1px; // replaces checkbox which is a bit wider
-			padding : 0px;
-			color : #ccc;
-			cursor : pointer;
-		}
-	}
-
-	.excerpt {
-		display : none;
-	}
-
-	.collapse i.material-icons {
-		color : @color-accent;
-		cursor : pointer;
-	}
-
-	span.author {
-		color : @default-text;
-		font-size : 11px;
-		font-weight : normal;
-	}
-
-	a.title {
-		font-size : 16px;
-		color : #999;
-		transition : color 0.2s, background 0.2s;
-		font-weight : 600;
-		text-rendering: optimizelegibility;
-		font-family : @fonts-ui-bold;
-	}
-
-	div.feed {
-		padding-right : 10px;
-		color : @default-text;
-		font-weight : normal;
-		font-style : italic;
-		font-size : 11px;
-		white-space : nowrap;
-	}
-
-	div.feed a {
-		border-radius : 4px;
-		display : inline-block;
-		padding : 1px 4px 1px 4px;
-	}
-
-	span.updated {
-		padding-right : 10px;
-		white-space : nowrap;
-		color : @default-text;
-		font-size : 11px;
-	}
-
-	div.feed a {
-		color : @default-text;
-	}
-
-	span.titleWrap {
-		width : 100%;
-		white-space : normal;
-	}
-
-	.feed-title {
-		> * {
-			display : table-cell;
-			vertical-align : middle;
-		}
-
-		a.title {
-			width : 100%;
-		}
-
-		a.catchup {
-			text-align : right;
-			color : @default-text;
-			padding-right : 10px;
-			font-size : 11px;
-			white-space : nowrap;
-		}
-
-		a.catchup:hover {
-			color : @color-link;
-		}
-
-	}
-}
-
-div#floatingTitle.Unread a.title {
-	color : black;
-}
-
 .cdm.expandable {
 	background-color : @color-panel-bg;
 	border: 0px solid @border-default;

+ 0 - 2
themes/light/tt-rss.less

@@ -1108,13 +1108,11 @@ body.ttrss_main {
 		opacity : 0.5;
 	}
 
-	#floatingTitle.marked i.marked-pic,
 	.cdm.marked .left i.marked-pic,
 	.hl.marked .left i.marked-pic {
 		color : @color-marked;
 	}
 
-	#floatingTitle.published i.pub-pic,
 	.cdm.published .left i.pub-pic,
 	.hl.published .left i.pub-pic {
 		color : @color-published;

+ 16 - 124
themes/night.css

@@ -927,12 +927,10 @@ body.ttrss_main i.icon-no-feed {
 body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
   opacity: 0.5;
 }
-body.ttrss_main #floatingTitle.marked i.marked-pic,
 body.ttrss_main .cdm.marked .left i.marked-pic,
 body.ttrss_main .hl.marked .left i.marked-pic {
   color: #ffc069;
 }
-body.ttrss_main #floatingTitle.published i.pub-pic,
 body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
@@ -1126,6 +1124,10 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm i.material-icons {
   color: #777;
 }
+.cdm .header {
+  position: sticky;
+  top: 0;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1138,6 +1140,9 @@ video::-webkit-media-controls-overlay-play-button {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header-sticky-guard {
+  height: 0;
+}
 .cdm .header {
   align-items: center;
 }
@@ -1170,6 +1175,14 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm .header input {
   margin: 0px 4px;
 }
+.cdm .header[stuck] {
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  border: 0 solid #222;
+  border-bottom-width: 1px;
+  background: #333 ! important;
+  opacity: 0.9;
+  backdrop-filter: blur(6px);
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
@@ -1217,7 +1230,7 @@ video::-webkit-media-controls-overlay-play-button {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-div.cdm.expanded div.header {
+div.cdm.expanded .header:not([stuck]) {
   background: transparent ! important;
 }
 div.cdm.expanded div.header a.title {
@@ -1288,115 +1301,6 @@ div.cdm.vgrlf .feed {
   display: inline-block;
   padding: 1px 4px 1px 4px;
 }
-#main:not(.expandable) div#floatingTitle .collapse {
-  display: none;
-}
-div#floatingTitle {
-  position: absolute;
-  z-index: 5;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  border: 0px solid #222;
-  border-bottom-width: 1px;
-  background: white;
-  color: #ccc;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
-  align-items: center;
-}
-div#floatingTitle > * {
-  white-space: nowrap;
-  padding: 4px;
-}
-div#floatingTitle .left,
-div#floatingTitle .right {
-  display: flex;
-  align-items: center;
-}
-div#floatingTitle .left i.material-icons,
-div#floatingTitle .right i.material-icons {
-  margin-left: 2px;
-  font-size: 21px;
-  padding: 2px;
-  user-select: none;
-}
-div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.icon-anchor {
-  margin-left: 0px;
-  margin-right: 1px;
-  padding: 0px;
-  color: #ccc;
-  cursor: pointer;
-}
-div#floatingTitle .excerpt {
-  display: none;
-}
-div#floatingTitle .collapse i.material-icons {
-  color: #b87d2c;
-  cursor: pointer;
-}
-div#floatingTitle span.author {
-  color: #ccc;
-  font-size: 11px;
-  font-weight: normal;
-}
-div#floatingTitle a.title {
-  font-size: 16px;
-  color: #999;
-  transition: color 0.2s, background 0.2s;
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-div#floatingTitle div.feed {
-  padding-right: 10px;
-  color: #ccc;
-  font-weight: normal;
-  font-style: italic;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle div.feed a {
-  border-radius: 4px;
-  display: inline-block;
-  padding: 1px 4px 1px 4px;
-}
-div#floatingTitle span.updated {
-  padding-right: 10px;
-  white-space: nowrap;
-  color: #ccc;
-  font-size: 11px;
-}
-div#floatingTitle div.feed a {
-  color: #ccc;
-}
-div#floatingTitle span.titleWrap {
-  width: 100%;
-  white-space: normal;
-}
-div#floatingTitle .feed-title > * {
-  display: table-cell;
-  vertical-align: middle;
-}
-div#floatingTitle .feed-title a.title {
-  width: 100%;
-}
-div#floatingTitle .feed-title a.catchup {
-  text-align: right;
-  color: #ccc;
-  padding-right: 10px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle .feed-title a.catchup:hover {
-  color: #b87d2c;
-}
-div#floatingTitle.Unread a.title {
-  color: black;
-}
 .cdm.expandable {
   background-color: #222;
   border: 0px solid #222;
@@ -2002,18 +1906,6 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab
 body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
   color: #999999;
 }
-body.flat.ttrss_main #floatingTitle {
-  background-color: #333;
-}
-body.flat.ttrss_main #floatingTitle .feed a {
-  color: #e6e6e6;
-}
-body.flat.ttrss_main #floatingTitle i.material-icons {
-  opacity: 0.7;
-}
-body.flat.ttrss_main div#floatingTitle.Unread a.title {
-  color: #e6e6e6;
-}
 body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread),
 body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
   background: #333;

File diff suppressed because it is too large
+ 0 - 0
themes/night.css.map


+ 0 - 16
themes/night_base.less

@@ -91,22 +91,6 @@ body.flat.ttrss_main {
 		}
 	}
 
-	#floatingTitle {
-		background-color : @default-bg;
-
-		.feed a {
-			color : @fg-light;
-		}
-
-		i.material-icons {
-			opacity : 0.7;
-		}
-	}
-
-	div#floatingTitle.Unread a.title {
-		color : @fg-light;
-	}
-
 	#headlines-frame {
 		.hl:not(.active):not(.Selected):not(.Unread),
 		.cdm.expandable:not(.active):not(.Selected):not(.Unread) {

+ 16 - 124
themes/night_blue.css

@@ -927,12 +927,10 @@ body.ttrss_main i.icon-no-feed {
 body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
   opacity: 0.5;
 }
-body.ttrss_main #floatingTitle.marked i.marked-pic,
 body.ttrss_main .cdm.marked .left i.marked-pic,
 body.ttrss_main .hl.marked .left i.marked-pic {
   color: #ffc069;
 }
-body.ttrss_main #floatingTitle.published i.pub-pic,
 body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
@@ -1126,6 +1124,10 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm i.material-icons {
   color: #777;
 }
+.cdm .header {
+  position: sticky;
+  top: 0;
+}
 .cdm .header,
 .cdm .footer {
   display: flex;
@@ -1138,6 +1140,9 @@ video::-webkit-media-controls-overlay-play-button {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header-sticky-guard {
+  height: 0;
+}
 .cdm .header {
   align-items: center;
 }
@@ -1170,6 +1175,14 @@ video::-webkit-media-controls-overlay-play-button {
 .cdm .header input {
   margin: 0px 4px;
 }
+.cdm .header[stuck] {
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  border: 0 solid #222;
+  border-bottom-width: 1px;
+  background: #333 ! important;
+  opacity: 0.9;
+  backdrop-filter: blur(6px);
+}
 .cdm .footer {
   height: 30px;
   padding-left: 5px;
@@ -1217,7 +1230,7 @@ video::-webkit-media-controls-overlay-play-button {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-div.cdm.expanded div.header {
+div.cdm.expanded .header:not([stuck]) {
   background: transparent ! important;
 }
 div.cdm.expanded div.header a.title {
@@ -1288,115 +1301,6 @@ div.cdm.vgrlf .feed {
   display: inline-block;
   padding: 1px 4px 1px 4px;
 }
-#main:not(.expandable) div#floatingTitle .collapse {
-  display: none;
-}
-div#floatingTitle {
-  position: absolute;
-  z-index: 5;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  border: 0px solid #222;
-  border-bottom-width: 1px;
-  background: white;
-  color: #ccc;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
-  align-items: center;
-}
-div#floatingTitle > * {
-  white-space: nowrap;
-  padding: 4px;
-}
-div#floatingTitle .left,
-div#floatingTitle .right {
-  display: flex;
-  align-items: center;
-}
-div#floatingTitle .left i.material-icons,
-div#floatingTitle .right i.material-icons {
-  margin-left: 2px;
-  font-size: 21px;
-  padding: 2px;
-  user-select: none;
-}
-div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.icon-anchor {
-  margin-left: 0px;
-  margin-right: 1px;
-  padding: 0px;
-  color: #ccc;
-  cursor: pointer;
-}
-div#floatingTitle .excerpt {
-  display: none;
-}
-div#floatingTitle .collapse i.material-icons {
-  color: #257aa7;
-  cursor: pointer;
-}
-div#floatingTitle span.author {
-  color: #ccc;
-  font-size: 11px;
-  font-weight: normal;
-}
-div#floatingTitle a.title {
-  font-size: 16px;
-  color: #999;
-  transition: color 0.2s, background 0.2s;
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-div#floatingTitle div.feed {
-  padding-right: 10px;
-  color: #ccc;
-  font-weight: normal;
-  font-style: italic;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle div.feed a {
-  border-radius: 4px;
-  display: inline-block;
-  padding: 1px 4px 1px 4px;
-}
-div#floatingTitle span.updated {
-  padding-right: 10px;
-  white-space: nowrap;
-  color: #ccc;
-  font-size: 11px;
-}
-div#floatingTitle div.feed a {
-  color: #ccc;
-}
-div#floatingTitle span.titleWrap {
-  width: 100%;
-  white-space: normal;
-}
-div#floatingTitle .feed-title > * {
-  display: table-cell;
-  vertical-align: middle;
-}
-div#floatingTitle .feed-title a.title {
-  width: 100%;
-}
-div#floatingTitle .feed-title a.catchup {
-  text-align: right;
-  color: #ccc;
-  padding-right: 10px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-div#floatingTitle .feed-title a.catchup:hover {
-  color: #257aa7;
-}
-div#floatingTitle.Unread a.title {
-  color: black;
-}
 .cdm.expandable {
   background-color: #222;
   border: 0px solid #222;
@@ -2002,18 +1906,6 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab
 body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
   color: #999999;
 }
-body.flat.ttrss_main #floatingTitle {
-  background-color: #333;
-}
-body.flat.ttrss_main #floatingTitle .feed a {
-  color: #e6e6e6;
-}
-body.flat.ttrss_main #floatingTitle i.material-icons {
-  opacity: 0.7;
-}
-body.flat.ttrss_main div#floatingTitle.Unread a.title {
-  color: #e6e6e6;
-}
 body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread),
 body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
   background: #333;

File diff suppressed because it is too large
+ 0 - 0
themes/night_blue.css.map


Some files were not shown because too many files changed in this diff