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

1 files changed, 20 insertions, 133 deletions

diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index 734c92e7e..71ef96094 100644
--- a/themes/light/cdm.less
+++ b/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;