valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Andrew Dolgov 2020-05-13 06:51:46 +03:00
parent c275a0cd33
commit 7adbc95acc
17 changed files with 128 additions and 836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.php
View File

@ -256,7 +256,6 @@
</div> <!-- toolbar --> </div> <!-- toolbar -->
</div> <!-- toolbar pane --> </div> <!-- toolbar pane -->
<div id="headlines-wrap-inner" dojoType="dijit.layout.BorderContainer" region="center"> <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" <div id="headlines-frame" dojoType="dijit.layout.ContentPane" tabindex="0"
region="center"> region="center">
<div id="headlinesInnerContainer"> <div id="headlinesInnerContainer">

2
js/Article.js
View File

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

101
js/Headlines.js
View File

@ -8,6 +8,24 @@ define(["dojo/_base/declare"], function (declare) {
headlines: [], headlines: [],
current_first_id: 0, current_first_id: 0,
_scroll_reset_timeout: false, _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) => { row_observer: new MutationObserver((mutations) => {
const modified = []; const modified = [];
@ -40,7 +58,6 @@ define(["dojo/_base/declare"], function (declare) {
}); });
Headlines.updateSelectedPrompt(); Headlines.updateSelectedPrompt();
Headlines.updateFloatingTitle(true);
if ('requestIdleCallback' in window) if ('requestIdleCallback' in window)
window.requestIdleCallback(() => { window.requestIdleCallback(() => {
@ -272,9 +289,6 @@ define(["dojo/_base/declare"], function (declare) {
try { try {
Headlines.unpackVisible(); Headlines.unpackVisible();
if (App.isCombinedMode())
Headlines.updateFloatingTitle();
if (!Feeds.infscroll_disabled && !Feeds.infscroll_in_progress) { if (!Feeds.infscroll_disabled && !Feeds.infscroll_in_progress) {
const hsp = $("headlines-spacer"); const hsp = $("headlines-spacer");
const container = $("headlines-frame"); const container = $("headlines-frame");
@ -311,61 +325,6 @@ define(["dojo/_base/declare"], function (declare) {
console.warn("scrollHandler", e); 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 () { unpackVisible: function () {
if (!App.isCombinedMode() || !App.getInitParam("cdm_expanded")) return; 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) { render: function (headlines, hl) {
let row = null; let row = null;
@ -467,7 +428,7 @@ define(["dojo/_base/declare"], function (declare) {
data-article-title="${escapeHtml(hl.title)}" data-article-title="${escapeHtml(hl.title)}"
onmouseover="Article.mouseIn(${hl.id})" onmouseover="Article.mouseIn(${hl.id})"
onmouseout="Article.mouseOut(${hl.id})"> onmouseout="Article.mouseOut(${hl.id})">
<div class="header-sticky-guard"></div>
<div class="header"> <div class="header">
<div class="left"> <div class="left">
<input dojoType="dijit.form.CheckBox" type="checkbox" onclick="Headlines.onRowChecked(this)" class='rchk'> <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").removeClassName("smooth-scroll");
$("headlines-frame").scrollTop = 0; $("headlines-frame").scrollTop = 0;
$("headlines-frame").addClassName("smooth-scroll"); $("headlines-frame").addClassName("smooth-scroll");
Element.hide("floatingTitle");
$("floatingTitle").setAttribute("data-article-id", 0);
$("floatingTitle").innerHTML = "";
} catch (e) { } catch (e) {
console.warn(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 { } else {
console.error("Invalid object received: " + transport.responseText); console.error("Invalid object received: " + transport.responseText);
dijit.byId("headlines-frame").attr('content', "<div class='whiteBox'>" + 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; 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) { headlinesMenuCommon: function (menu) {
menu.addChild(new dijit.MenuItem({ menu.addChild(new dijit.MenuItem({

129
themes/compact.css
View File

@ -926,12 +926,10 @@ body.ttrss_main i.icon-no-feed {
body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
opacity: 0.5; opacity: 0.5;
} }
body.ttrss_main #floatingTitle.marked i.marked-pic,
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
color: #ffc069; color: #ffc069;
} }
body.ttrss_main #floatingTitle.published i.pub-pic,
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; color: #ff7c4b;
@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
.cdm i.material-icons { .cdm i.material-icons {
color: #777; color: #777;
} }
.cdm .header {
position: sticky;
top: 0;
}
.cdm .header, .cdm .header,
.cdm .footer { .cdm .footer {
display: flex; display: flex;
@ -1137,6 +1139,9 @@ video::-webkit-media-controls-overlay-play-button {
margin: 0px 4px; margin: 0px 4px;
vertical-align: middle; vertical-align: middle;
} }
.cdm .header-sticky-guard {
height: 0;
}
.cdm .header { .cdm .header {
align-items: center; align-items: center;
} }
@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
.cdm .header input { .cdm .header input {
margin: 0px 4px; 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 { .cdm .footer {
height: 30px; height: 30px;
padding-left: 5px; padding-left: 5px;
@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
div.cdm.expanded div.header { div.cdm.expanded .header:not([stuck]) {
background: transparent ! important; background: transparent ! important;
} }
div.cdm.expanded div.header a.title { div.cdm.expanded div.header a.title {
@ -1287,115 +1300,6 @@ div.cdm.vgrlf .feed {
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; 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 { .cdm.expandable {
background-color: #f5f5f5; background-color: #f5f5f5;
border: 0px solid #ddd; 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 .hl,
body.ttrss_main.ttrss_index.flat .post .header .title, 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 { body.ttrss_main.ttrss_index.flat .cdm .title {
font-size: 13px ! important; font-size: 13px ! important;
} }

2
themes/compact.css.map
View File

File diff suppressed because one or more lines are too long

1
themes/compact_base.less
View File

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

141
themes/compact_night.css
View File

@ -926,12 +926,10 @@ body.ttrss_main i.icon-no-feed {
body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
opacity: 0.5; opacity: 0.5;
} }
body.ttrss_main #floatingTitle.marked i.marked-pic,
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
color: #ffc069; color: #ffc069;
} }
body.ttrss_main #floatingTitle.published i.pub-pic,
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; color: #ff7c4b;
@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
.cdm i.material-icons { .cdm i.material-icons {
color: #777; color: #777;
} }
.cdm .header {
position: sticky;
top: 0;
}
.cdm .header, .cdm .header,
.cdm .footer { .cdm .footer {
display: flex; display: flex;
@ -1137,6 +1139,9 @@ video::-webkit-media-controls-overlay-play-button {
margin: 0px 4px; margin: 0px 4px;
vertical-align: middle; vertical-align: middle;
} }
.cdm .header-sticky-guard {
height: 0;
}
.cdm .header { .cdm .header {
align-items: center; align-items: center;
} }
@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
.cdm .header input { .cdm .header input {
margin: 0px 4px; 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 { .cdm .footer {
height: 30px; height: 30px;
padding-left: 5px; padding-left: 5px;
@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
div.cdm.expanded div.header { div.cdm.expanded .header:not([stuck]) {
background: transparent ! important; background: transparent ! important;
} }
div.cdm.expanded div.header a.title { div.cdm.expanded div.header a.title {
@ -1287,115 +1300,6 @@ div.cdm.vgrlf .feed {
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; 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 { .cdm.expandable {
background-color: #222; background-color: #222;
border: 0px solid #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 { body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
color: #999999; 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 .hl:not(.active):not(.Selected):not(.Unread),
body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) { body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
background: #333; 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 .hl,
body.ttrss_main.ttrss_index.flat .post .header .title, 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 { body.ttrss_main.ttrss_index.flat .cdm .title {
font-size: 13px ! important; font-size: 13px ! important;
} }

2
themes/compact_night.css.map
View File

File diff suppressed because one or more lines are too long

128
themes/light.css
View File

@ -926,12 +926,10 @@ body.ttrss_main i.icon-no-feed {
body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
opacity: 0.5; opacity: 0.5;
} }
body.ttrss_main #floatingTitle.marked i.marked-pic,
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
color: #ffc069; color: #ffc069;
} }
body.ttrss_main #floatingTitle.published i.pub-pic,
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; color: #ff7c4b;
@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
.cdm i.material-icons { .cdm i.material-icons {
color: #777; color: #777;
} }
.cdm .header {
position: sticky;
top: 0;
}
.cdm .header, .cdm .header,
.cdm .footer { .cdm .footer {
display: flex; display: flex;
@ -1137,6 +1139,9 @@ video::-webkit-media-controls-overlay-play-button {
margin: 0px 4px; margin: 0px 4px;
vertical-align: middle; vertical-align: middle;
} }
.cdm .header-sticky-guard {
height: 0;
}
.cdm .header { .cdm .header {
align-items: center; align-items: center;
} }
@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
.cdm .header input { .cdm .header input {
margin: 0px 4px; 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 { .cdm .footer {
height: 30px; height: 30px;
padding-left: 5px; padding-left: 5px;
@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
div.cdm.expanded div.header { div.cdm.expanded .header:not([stuck]) {
background: transparent ! important; background: transparent ! important;
} }
div.cdm.expanded div.header a.title { div.cdm.expanded div.header a.title {
@ -1287,115 +1300,6 @@ div.cdm.vgrlf .feed {
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; 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 { .cdm.expandable {
background-color: #f5f5f5; background-color: #f5f5f5;
border: 0px solid #ddd; border: 0px solid #ddd;

2
themes/light.css.map
View File

File diff suppressed because one or more lines are too long

151
themes/light/cdm.less
View File

@ -3,6 +3,11 @@
color : @color-icon; color : @color-icon;
} }
.header {
position: sticky;
top : 0;
}
.header, .footer { .header, .footer {
display : flex; display : flex;
flex-direction : row; flex-direction : row;
@ -15,6 +20,10 @@
vertical-align: middle; vertical-align: middle;
} }
.header-sticky-guard {
height : 0;
}
.header { .header {
align-items : center; 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 { .footer {
height : 30px; height : 30px;
padding-left : 5px; padding-left : 5px;
@ -110,7 +128,7 @@
} }
div.cdm.expanded div.header { div.cdm.expanded .header:not([stuck]) {
background: transparent ! important; background: transparent ! important;
} }
@ -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 { .cdm.expandable {
background-color : @color-panel-bg; background-color : @color-panel-bg;
border: 0px solid @border-default; border: 0px solid @border-default;

2
themes/light/tt-rss.less
View File

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

140
themes/night.css
View File

@ -927,12 +927,10 @@ body.ttrss_main i.icon-no-feed {
body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
opacity: 0.5; opacity: 0.5;
} }
body.ttrss_main #floatingTitle.marked i.marked-pic,
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
color: #ffc069; color: #ffc069;
} }
body.ttrss_main #floatingTitle.published i.pub-pic,
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; color: #ff7c4b;
@ -1126,6 +1124,10 @@ video::-webkit-media-controls-overlay-play-button {
.cdm i.material-icons { .cdm i.material-icons {
color: #777; color: #777;
} }
.cdm .header {
position: sticky;
top: 0;
}
.cdm .header, .cdm .header,
.cdm .footer { .cdm .footer {
display: flex; display: flex;
@ -1138,6 +1140,9 @@ video::-webkit-media-controls-overlay-play-button {
margin: 0px 4px; margin: 0px 4px;
vertical-align: middle; vertical-align: middle;
} }
.cdm .header-sticky-guard {
height: 0;
}
.cdm .header { .cdm .header {
align-items: center; align-items: center;
} }
@ -1170,6 +1175,14 @@ video::-webkit-media-controls-overlay-play-button {
.cdm .header input { .cdm .header input {
margin: 0px 4px; 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 { .cdm .footer {
height: 30px; height: 30px;
padding-left: 5px; padding-left: 5px;
@ -1217,7 +1230,7 @@ video::-webkit-media-controls-overlay-play-button {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
div.cdm.expanded div.header { div.cdm.expanded .header:not([stuck]) {
background: transparent ! important; background: transparent ! important;
} }
div.cdm.expanded div.header a.title { div.cdm.expanded div.header a.title {
@ -1288,115 +1301,6 @@ div.cdm.vgrlf .feed {
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; 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 { .cdm.expandable {
background-color: #222; background-color: #222;
border: 0px solid #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 { body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
color: #999999; 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 .hl:not(.active):not(.Selected):not(.Unread),
body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) { body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
background: #333; background: #333;

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long

16
themes/night_base.less
View File

@ -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 { #headlines-frame {
.hl:not(.active):not(.Selected):not(.Unread), .hl:not(.active):not(.Selected):not(.Unread),
.cdm.expandable:not(.active):not(.Selected):not(.Unread) { .cdm.expandable:not(.active):not(.Selected):not(.Unread) {

140
themes/night_blue.css
View File

@ -927,12 +927,10 @@ body.ttrss_main i.icon-no-feed {
body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
opacity: 0.5; opacity: 0.5;
} }
body.ttrss_main #floatingTitle.marked i.marked-pic,
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
color: #ffc069; color: #ffc069;
} }
body.ttrss_main #floatingTitle.published i.pub-pic,
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; color: #ff7c4b;
@ -1126,6 +1124,10 @@ video::-webkit-media-controls-overlay-play-button {
.cdm i.material-icons { .cdm i.material-icons {
color: #777; color: #777;
} }
.cdm .header {
position: sticky;
top: 0;
}
.cdm .header, .cdm .header,
.cdm .footer { .cdm .footer {
display: flex; display: flex;
@ -1138,6 +1140,9 @@ video::-webkit-media-controls-overlay-play-button {
margin: 0px 4px; margin: 0px 4px;
vertical-align: middle; vertical-align: middle;
} }
.cdm .header-sticky-guard {
height: 0;
}
.cdm .header { .cdm .header {
align-items: center; align-items: center;
} }
@ -1170,6 +1175,14 @@ video::-webkit-media-controls-overlay-play-button {
.cdm .header input { .cdm .header input {
margin: 0px 4px; 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 { .cdm .footer {
height: 30px; height: 30px;
padding-left: 5px; padding-left: 5px;
@ -1217,7 +1230,7 @@ video::-webkit-media-controls-overlay-play-button {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
div.cdm.expanded div.header { div.cdm.expanded .header:not([stuck]) {
background: transparent ! important; background: transparent ! important;
} }
div.cdm.expanded div.header a.title { div.cdm.expanded div.header a.title {
@ -1288,115 +1301,6 @@ div.cdm.vgrlf .feed {
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; 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 { .cdm.expandable {
background-color: #222; background-color: #222;
border: 0px solid #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 { body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
color: #999999; 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 .hl:not(.active):not(.Selected):not(.Unread),
body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) { body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
background: #333; background: #333;

2
themes/night_blue.css.map
View File

File diff suppressed because one or more lines are too long