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

1 files changed, 16 insertions, 113 deletions

diff --git a/themes/compact.css b/themes/compact.css
index 336966162..07af6c847 100644
--- a/themes/compact.css
+++ b/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;
 }