From 755072de9180880122b4629e49fa4d1fa4ca5e2a Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Thu, 11 Mar 2021 14:32:15 +0300 Subject: [PATCH] css cleanup, combined mode, fonts --- js/Headlines.js | 7 +- themes/compact.css | 381 +++++++++++++++++++-------------- themes/compact_night.css | 381 +++++++++++++++++++-------------- themes/light.css | 381 +++++++++++++++++++-------------- themes/light/cdm.less | 387 +++++++++++++++++----------------- themes/light/defines.less | 5 + themes/light/dijit_basic.less | 46 ++-- themes/light/tt-rss.less | 217 ++++++++++++------- themes/light/zoom.less | 4 +- themes/night.css | 381 +++++++++++++++++++-------------- themes/night_blue.css | 381 +++++++++++++++++++-------------- 11 files changed, 1475 insertions(+), 1096 deletions(-) diff --git a/js/Headlines.js b/js/Headlines.js index 65cd2480c..403f3f52c 100755 --- a/js/Headlines.js +++ b/js/Headlines.js @@ -388,6 +388,8 @@ const Headlines = { container.addClassName(App.isCombinedMode() ? "cdm" : "normal"); container.setAttribute("data-enable-grid", App.getInitParam("cdm_enable_grid") ? "true" : "false"); container.setAttribute("data-headlines-count", parseInt(headlines_count)); + container.setAttribute("data-is-cdm", App.isCombinedMode() ? "true" : "false"); + container.setAttribute("data-is-cdm-expanded", App.getInitParam("cdm_expanded")); // for floating title because it's placed outside of headlines-frame App.byId("main").removeClassName("expandable"); @@ -462,11 +464,6 @@ const Headlines = { this.vgroup_last_feed = hl.feed_id; } - const container = App.byId("headlines-frame"); - - container.setAttribute("data-is-cdm", App.isCombinedMode() ? "true" : "false"); - container.setAttribute("data-is-cdm-expanded", App.getInitParam("cdm_expanded")); - if (App.isCombinedMode()) { row_class += App.getInitParam("cdm_expanded") ? " expanded" : " expandable"; diff --git a/themes/compact.css b/themes/compact.css index 92f9000e7..cec955555 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -15,67 +15,132 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + display : grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); + background-color: @color-panel-bg; + grid-gap : 8px; + padding : 8px; + + #headlines-spacer, .whiteBox, .feed-title { + grid-column : 1 e("/") -1; + } + + .cdm.expanded { + // 2 because #headlines-spacer is the actual last child + &:nth-last-child(2):nth-child(odd) { + grid-column : 1 e("/") -1; + } + + .header, .content { + background : @default-bg; + border : 1px solid @border-default; + overflow : hidden; + } + + .content { + border-top-width : 0; + padding : 0 4px 4px 4px; + } + + .header[data-is-stuck] { + top : -8px; + border-bottom-width: 1px; + } + + .header { + border-bottom-width : 0; + padding : 4px; + + .icon-grid-span { + display : inline; + } + + .feed { + display : none; + } + } + + .footer { + border : 0; + padding : 4px; + + .left, .right { + white-space: nowrap; + } + + .left { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content-inner, .intermediate { + word-break: break-all; + } + } + }*/ } body.ttrss_main :focus { outline: none; } -body.ttrss_main div.post { - padding: 0px; +body.ttrss_main .post { + padding: 0; font-size: 13px; } -body.ttrss_main div.post div.header { +body.ttrss_main .post .header { padding: 5px; color: #909090; border: 0px solid #ddd; border-bottom-width: 1px; background: #f5f5f5; } -body.ttrss_main div.post div.header .left, -body.ttrss_main div.post div.header .right { +body.ttrss_main .post .header .left, +body.ttrss_main .post .header .right { display: flex; } -body.ttrss_main div.post div.header .row { +body.ttrss_main .post .header .row { display: flex; margin-bottom: 4px; flex-wrap: nowrap; align-items: center; justify-content: space-between; } -body.ttrss_main div.post div.header .comments { +body.ttrss_main .post .header .comments { flex-grow: 2; } -body.ttrss_main div.post div.header .date { +body.ttrss_main .post .header .date { white-space: nowrap; } -body.ttrss_main div.post div.header img, -body.ttrss_main div.post div.header i.material-icons { +body.ttrss_main .post .header img, +body.ttrss_main .post .header i.material-icons { margin: 0px 4px; vertical-align: middle; color: #777; } -body.ttrss_main div.post div.header .title { +body.ttrss_main .post .header .title { flex-grow: 2; font-size: 15px; 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; } -body.ttrss_main div.post div.content { +body.ttrss_main .post div.content { padding: 10px; font-size: 16px; } -body.ttrss_main div.post div.content img, -body.ttrss_main div.post div.content video { +body.ttrss_main .post div.content img, +body.ttrss_main .post div.content video { border-width: 0px; max-width: 98%; height: auto; } -body.ttrss_main div.post div.content div.embed-responsive { +body.ttrss_main .post div.content div.embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -body.ttrss_main div.post div.content div.embed-responsive iframe { +body.ttrss_main .post div.content div.embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -540,10 +605,11 @@ body.ttrss_main .exception-contents textarea { height: 200px; font-size: 11px; } +body.ttrss_main #headlines-wrap-inner, body.ttrss_main #content-wrap { - padding: 0px; - border-width: 0px; - margin: 0px; + padding: 0; + border: 0; + margin: 0; } body.ttrss_main #feeds-holder { padding: 0px; @@ -639,109 +705,122 @@ body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore { font-weight: bold; color: #257aa7; } -body.ttrss_main #headlines-wrap-inner { - padding: 0px; - margin: 0px; - border-width: 0px; -} -body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { - display: none; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); - background-color: #f5f5f5; - grid-gap: 8px; padding: 8px; + grid-gap: 8px; + background-color: #f5f5f5; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(2):nth-child(odd), +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(1) { grid-column: 1 / -1; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded:nth-last-child(2):nth-child(odd) { - grid-column: 1 / -1; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { background: white; border: 1px solid #ddd; overflow: hidden; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { border-top-width: 0; padding: 0 4px 4px 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { border-bottom-width: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { display: inline; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { border: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { white-space: nowrap; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { word-break: break-all; } body.ttrss_main #headlines-frame { - padding: 0px; - border: 0px #ddd; - margin-top: 0px; + padding: 0; + border: 0; + margin-top: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); + transform: translateZ(0); -webkit-backface-visibility: hidden; + backface-visibility: hidden; } -body.ttrss_main #headlines-frame div.feed-title { +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { + display: none; +} +body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { + height: 100vh; +} +body.ttrss_main #headlines-frame #headlines-spacer { + margin-left: 1px; + text-align: center; + color: #555; + font-size: 11px; + font-style: italic; +} +body.ttrss_main #headlines-frame #headlines-spacer a, +body.ttrss_main #headlines-frame #headlines-spacer span { + color: #555; + padding: 10px; + display: block; +} +body.ttrss_main #headlines-frame #headlines-spacer a:hover { + color: #257aa7; +} +body.ttrss_main #headlines-frame .feed-title { border: 0px solid #257aa7; border-bottom-width: 1px; padding: 5px 8px; } -body.ttrss_main #headlines-frame div.feed-title a.title { +body.ttrss_main #headlines-frame .feed-title a.title { color: #555; font-weight: bold; } -body.ttrss_main #headlines-frame div.feed-title a { +body.ttrss_main #headlines-frame .feed-title a { color: #555; } -body.ttrss_main #headlines-frame div.feed-title a:hover { +body.ttrss_main #headlines-frame .feed-title a:hover { color: #257aa7; } body.ttrss_main #headlines-frame span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } body.ttrss_main #toolbar-frame_splitter { display: none; } body.ttrss_main #toolbar-frame { - padding: 0px; - margin: 0px; - border-width: 0px; + padding: 0; + margin: 0; + border: 0; white-space: nowrap; - font-size: 12px; + font-size: 13px; } body.ttrss_main #toolbar-frame #toolbar { background: white; - border: 0px solid #ddd; + border: 0 solid #ddd; border-bottom-width: 1px; padding-left: 4px; height: 32px; @@ -749,7 +828,7 @@ body.ttrss_main #toolbar-frame #toolbar { flex-direction: row; flex-wrap: nowrap; color: #555; - font-size: 12px; + font-size: 13px; align-items: center; } body.ttrss_main #toolbar-frame #toolbar .dijitSelect, @@ -769,7 +848,7 @@ body.ttrss_main #toolbar-frame #toolbar i { margin: 0 4px; } body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines { - font-size: 12px; + font-size: 13px; background: transparent; padding-right: 4px; flex-grow: 2; @@ -804,7 +883,7 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border-width: 0px; + border: 0; text-align: right; color: #555; padding: 5px 5px 0px 0px; @@ -830,9 +909,8 @@ body.ttrss_main #header i { margin: 0 4px; } body.ttrss_main #content-insert { - padding: 0px; - border-color: #ddd; - border-width: 0px; + padding: 0; + border: 0; line-height: 1.5; overflow: auto; -webkit-overflow-scrolling: touch; @@ -865,25 +943,6 @@ body.ttrss_main .player:hover { background: #f5f5f5; cursor: pointer; } -body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { - height: 100vh; -} -body.ttrss_main #headlines-spacer { - margin-left: 1px; - text-align: center; - color: #555; - font-size: 11px; - font-style: italic; -} -body.ttrss_main #headlines-spacer a, -body.ttrss_main #headlines-spacer span { - color: #555; - padding: 10px; - display: block; -} -body.ttrss_main #headlines-spacer a:hover { - color: #257aa7; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; @@ -1177,6 +1236,8 @@ body.ttrss_main .text-muted, body.ttrss_utility .text-muted { color: #555; } +body.ttrss_main .text-small, +body.ttrss_utility .text-small, body.ttrss_main .small, body.ttrss_utility .small { font-size: 11px; @@ -1229,11 +1290,6 @@ video::-webkit-media-controls-overlay-play-button { color : @color-icon; }*/ } -.cdm .header { - position: sticky; - top: 0; - z-index: 3; -} .cdm .header, .cdm .footer { display: flex; @@ -1243,13 +1299,16 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header img, .cdm .footer img, .cdm .footer i.material-icons { - margin: 0px 4px; + margin: 0 4px; vertical-align: middle; } .cdm .header-sticky-guard { height: 0; } .cdm .header { + position: sticky; + top: 0; + z-index: 3; align-items: center; } .cdm .header > * { @@ -1272,7 +1331,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header .titleWrap { flex-grow: 2; } -.cdm .header span.updated { +.cdm .header .updated { color: #555; font-weight: normal; font-size: 11px; @@ -1281,6 +1340,30 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header input { margin: 0px 4px; } +.cdm .header .feed { + float: right; + font-weight: normal; + font-style: italic; +} +.cdm .header .feed a { + border-radius: 4px; + display: inline-block; + padding: 1px 4px 1px 4px; +} +.cdm .header .feed, +.cdm .header .feed a { + vertical-align: middle; + color: #555; + font-weight: normal; + font-style: italic; + font-size: 11px; +} +.cdm .header .author { + white-space: nowrap; + color: #555; + font-size: 11px; + font-weight: normal; +} .cdm .footer { height: 30px; padding-left: 5px; @@ -1298,6 +1381,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; @@ -1319,10 +1403,6 @@ video::-webkit-media-controls-overlay-play-button { width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1335,10 +1415,10 @@ video::-webkit-media-controls-overlay-play-button { border-bottom-width: 1px; } .cdm.expanded > hr { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } -div.cdm.expanded div.header a.title { +.cdm.expanded .header a.title { font-size: 16px; color: #999; font-weight: 600; @@ -1346,58 +1426,43 @@ div.cdm.expanded div.header a.title { 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.cdm.expanded.active div.header a.title { +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; +} +.cdm.expanded.active .header .title { color: #257aa7; } -div.cdm.expanded.Unread div.header a.title { +.cdm.expanded.Unread .header .title { color: black; } -div.cdm.expanded div.content { +.cdm.expanded .content { color: #555; } -div.cdm.expanded.Unread div.content { - color: black; -} -div.cdm.active div.content { - color: black; -} -div.cdm.vgrlf .feed { +.cdm.vgrlf .feed { display: none; } -.cdm div.feed-title { +.cdm .feed-title { border: 0px solid #257aa7; border-bottom-width: 1px; padding: 5px 3px 5px 5px; } -.cdm div.feed-title a.title { +.cdm .feed-title a.title { color: #555; font-weight: bold; } -.cdm div.feed-title a { +.cdm .feed-title a { color: #555; } -.cdm div.feed-title a:hover { +.cdm .feed-title a:hover { color: #257aa7; } -.cdm div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; -} -.cdm div.header div.feed, -.cdm div.header div.feed a { - vertical-align: middle; - color: #555; - font-weight: normal; - font-style: italic; - font-size: 11px; -} -.cdm div.content-inner div.embed-responsive { +.cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm div.content-inner div.embed-responsive iframe { +.cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -1406,17 +1471,6 @@ div.cdm.vgrlf .feed { top: 0; width: 100%; } -.cdm div.header span.author { - white-space: nowrap; - color: #555; - font-size: 11px; - font-weight: normal; -} -.cdm .feed a { - border-radius: 4px; - display: inline-block; - padding: 1px 4px 1px 4px; -} .cdm.expandable { background-color: #f5f5f5; border: 0px solid #ddd; @@ -1454,10 +1508,10 @@ div.cdm.vgrlf .feed { .cdm.expandable.active { background: white ! important; } -div.cdm.expandable.active div.header span.titleWrap { +.cdm.expandable.active div.header span.titleWrap { white-space: normal; } -div.cdm.expandable div.header a.title { +.cdm.expandable .header a.title { font-weight: 600; color: #555; font-size: 14px; @@ -1465,32 +1519,32 @@ div.cdm.expandable div.header a.title { 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.cdm.expandable.Unread div.header a.title { +.cdm.expandable.Unread div.header a.title { color: black; } -div.cdm.expandable.active .collapse i.material-icons { +.cdm.expandable.active .collapse i.material-icons { color: #257aa7; cursor: pointer; } -div.cdm.expandable.active .excerpt { +.cdm.expandable.active .excerpt { display: none; } -div.cdm.expandable.active div.header a.title { +.cdm.expandable.active div.header a.title { color: #257aa7; font-size: 16px; 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.cdm.expandable:not(.active) { +.cdm.expandable:not(.active) { cursor: pointer; } -div.cdm.expandable:not(.active) .content, -div.cdm.expandable:not(.active) .collapse { +.cdm.expandable:not(.active) .content, +.cdm.expandable:not(.active) .collapse { display: none; } -div.cdm.expandable.active .header[data-is-stuck], -div.cdm.expanded .header[data-is-stuck] { +.cdm.expandable.active .header[data-is-stuck], +.cdm.expanded .header[data-is-stuck] { box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); border: 0 solid #ddd; border-bottom-width: 1px; @@ -1865,7 +1919,8 @@ body.ttrss_utility.share_popup .content { } .flat .dijitToolbar { font-size: 13px; - padding: 0px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 0; } .flat .dijitToolbar .dijitTextBox .dijitInputContainer .dijitInputInner { line-height: 10px; @@ -1888,12 +1943,13 @@ body.ttrss_utility.share_popup .content { .flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel { padding: 4px 8px; font-size: 13px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } .flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { color: #2e99d1; } .flat .dijitMenu .dijitMenuItem td { - padding: 0px; + padding: 0; } .flat .dijitCheckBox { margin: 1px; @@ -1903,6 +1959,10 @@ body.ttrss_utility.share_popup .content { content: "\f00c"; color: white; } +.flat .dijitTab, +.flat .dijitAccordionTitle { + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; +} .flat .dijitTab i.material-icons, .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons { color: #257aa7; @@ -1952,6 +2012,7 @@ body.ttrss_utility.share_popup .content { .flat .dijitTree .dijitTreeRow { overflow: hidden; -moz-user-select: none; + user-select: none; text-overflow: ellipsis; } .flat label.dijitButton { @@ -2030,7 +2091,7 @@ body.ttrss_zoom div.post div.header { border: 0px solid #ddd; border-bottom-width: 1px; background: white; - font-size: 12px; + font-size: 13px; color: #555; } body.ttrss_zoom div.post div.header .row { @@ -2040,30 +2101,30 @@ body.ttrss_zoom div.post div.header .row { align-items: center; justify-content: space-between; } -body.ttrss_zoom div.post div.content { +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; } -body.ttrss_zoom div.post div.content img, -body.ttrss_zoom div.post div.content video { +body.ttrss_zoom div.post .content img, +body.ttrss_zoom div.post .content video { max-width: 760px; height: auto; } -body.ttrss_zoom div.post div.content blockquote { +body.ttrss_zoom div.post .content blockquote { margin: 5px 0px 5px 0px; color: #555; padding-left: 10px; border: 0px solid #ddd; border-left-width: 4px; } -body.ttrss_zoom div.post div.content code { +body.ttrss_zoom div.post .content code { color: #009900; font-family: monospace; font-size: 12px; } -body.ttrss_zoom div.post div.content pre { +body.ttrss_zoom div.post .content pre { margin: 5px 0px 5px 0px; padding: 10px; color: #555; diff --git a/themes/compact_night.css b/themes/compact_night.css index 1c118be1a..f16965d1a 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -15,67 +15,132 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + display : grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); + background-color: @color-panel-bg; + grid-gap : 8px; + padding : 8px; + + #headlines-spacer, .whiteBox, .feed-title { + grid-column : 1 e("/") -1; + } + + .cdm.expanded { + // 2 because #headlines-spacer is the actual last child + &:nth-last-child(2):nth-child(odd) { + grid-column : 1 e("/") -1; + } + + .header, .content { + background : @default-bg; + border : 1px solid @border-default; + overflow : hidden; + } + + .content { + border-top-width : 0; + padding : 0 4px 4px 4px; + } + + .header[data-is-stuck] { + top : -8px; + border-bottom-width: 1px; + } + + .header { + border-bottom-width : 0; + padding : 4px; + + .icon-grid-span { + display : inline; + } + + .feed { + display : none; + } + } + + .footer { + border : 0; + padding : 4px; + + .left, .right { + white-space: nowrap; + } + + .left { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content-inner, .intermediate { + word-break: break-all; + } + } + }*/ } body.ttrss_main :focus { outline: none; } -body.ttrss_main div.post { - padding: 0px; +body.ttrss_main .post { + padding: 0; font-size: 13px; } -body.ttrss_main div.post div.header { +body.ttrss_main .post .header { padding: 5px; color: #909090; border: 0px solid #222; border-bottom-width: 1px; background: #222; } -body.ttrss_main div.post div.header .left, -body.ttrss_main div.post div.header .right { +body.ttrss_main .post .header .left, +body.ttrss_main .post .header .right { display: flex; } -body.ttrss_main div.post div.header .row { +body.ttrss_main .post .header .row { display: flex; margin-bottom: 4px; flex-wrap: nowrap; align-items: center; justify-content: space-between; } -body.ttrss_main div.post div.header .comments { +body.ttrss_main .post .header .comments { flex-grow: 2; } -body.ttrss_main div.post div.header .date { +body.ttrss_main .post .header .date { white-space: nowrap; } -body.ttrss_main div.post div.header img, -body.ttrss_main div.post div.header i.material-icons { +body.ttrss_main .post .header img, +body.ttrss_main .post .header i.material-icons { margin: 0px 4px; vertical-align: middle; color: #999; } -body.ttrss_main div.post div.header .title { +body.ttrss_main .post .header .title { flex-grow: 2; font-size: 15px; 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; } -body.ttrss_main div.post div.content { +body.ttrss_main .post div.content { padding: 10px; font-size: 16px; } -body.ttrss_main div.post div.content img, -body.ttrss_main div.post div.content video { +body.ttrss_main .post div.content img, +body.ttrss_main .post div.content video { border-width: 0px; max-width: 98%; height: auto; } -body.ttrss_main div.post div.content div.embed-responsive { +body.ttrss_main .post div.content div.embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -body.ttrss_main div.post div.content div.embed-responsive iframe { +body.ttrss_main .post div.content div.embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -540,10 +605,11 @@ body.ttrss_main .exception-contents textarea { height: 200px; font-size: 11px; } +body.ttrss_main #headlines-wrap-inner, body.ttrss_main #content-wrap { - padding: 0px; - border-width: 0px; - margin: 0px; + padding: 0; + border: 0; + margin: 0; } body.ttrss_main #feeds-holder { padding: 0px; @@ -639,109 +705,122 @@ body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore { font-weight: bold; color: #b87d2c; } -body.ttrss_main #headlines-wrap-inner { - padding: 0px; - margin: 0px; - border-width: 0px; -} -body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { - display: none; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); - background-color: #222; - grid-gap: 8px; padding: 8px; + grid-gap: 8px; + background-color: #222; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(2):nth-child(odd), +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(1) { grid-column: 1 / -1; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded:nth-last-child(2):nth-child(odd) { - grid-column: 1 / -1; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { background: #333; border: 1px solid #222; overflow: hidden; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { border-top-width: 0; padding: 0 4px 4px 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { border-bottom-width: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { display: inline; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { border: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { white-space: nowrap; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { word-break: break-all; } body.ttrss_main #headlines-frame { - padding: 0px; - border: 0px #222; - margin-top: 0px; + padding: 0; + border: 0; + margin-top: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); + transform: translateZ(0); -webkit-backface-visibility: hidden; + backface-visibility: hidden; } -body.ttrss_main #headlines-frame div.feed-title { +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { + display: none; +} +body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { + height: 100vh; +} +body.ttrss_main #headlines-frame #headlines-spacer { + margin-left: 1px; + text-align: center; + color: #ccc; + font-size: 11px; + font-style: italic; +} +body.ttrss_main #headlines-frame #headlines-spacer a, +body.ttrss_main #headlines-frame #headlines-spacer span { + color: #ccc; + padding: 10px; + display: block; +} +body.ttrss_main #headlines-frame #headlines-spacer a:hover { + color: #b87d2c; +} +body.ttrss_main #headlines-frame .feed-title { border: 0px solid #b87d2c; border-bottom-width: 1px; padding: 5px 8px; } -body.ttrss_main #headlines-frame div.feed-title a.title { +body.ttrss_main #headlines-frame .feed-title a.title { color: #ccc; font-weight: bold; } -body.ttrss_main #headlines-frame div.feed-title a { +body.ttrss_main #headlines-frame .feed-title a { color: #ccc; } -body.ttrss_main #headlines-frame div.feed-title a:hover { +body.ttrss_main #headlines-frame .feed-title a:hover { color: #b87d2c; } body.ttrss_main #headlines-frame span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } body.ttrss_main #toolbar-frame_splitter { display: none; } body.ttrss_main #toolbar-frame { - padding: 0px; - margin: 0px; - border-width: 0px; + padding: 0; + margin: 0; + border: 0; white-space: nowrap; - font-size: 12px; + font-size: 13px; } body.ttrss_main #toolbar-frame #toolbar { background: white; - border: 0px solid #222; + border: 0 solid #222; border-bottom-width: 1px; padding-left: 4px; height: 32px; @@ -749,7 +828,7 @@ body.ttrss_main #toolbar-frame #toolbar { flex-direction: row; flex-wrap: nowrap; color: #ccc; - font-size: 12px; + font-size: 13px; align-items: center; } body.ttrss_main #toolbar-frame #toolbar .dijitSelect, @@ -769,7 +848,7 @@ body.ttrss_main #toolbar-frame #toolbar i { margin: 0 4px; } body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines { - font-size: 12px; + font-size: 13px; background: transparent; padding-right: 4px; flex-grow: 2; @@ -804,7 +883,7 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border-width: 0px; + border: 0; text-align: right; color: #ccc; padding: 5px 5px 0px 0px; @@ -830,9 +909,8 @@ body.ttrss_main #header i { margin: 0 4px; } body.ttrss_main #content-insert { - padding: 0px; - border-color: #222; - border-width: 0px; + padding: 0; + border: 0; line-height: 1.5; overflow: auto; -webkit-overflow-scrolling: touch; @@ -865,25 +943,6 @@ body.ttrss_main .player:hover { background: #222; cursor: pointer; } -body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { - height: 100vh; -} -body.ttrss_main #headlines-spacer { - margin-left: 1px; - text-align: center; - color: #ccc; - font-size: 11px; - font-style: italic; -} -body.ttrss_main #headlines-spacer a, -body.ttrss_main #headlines-spacer span { - color: #ccc; - padding: 10px; - display: block; -} -body.ttrss_main #headlines-spacer a:hover { - color: #b87d2c; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; @@ -1177,6 +1236,8 @@ body.ttrss_main .text-muted, body.ttrss_utility .text-muted { color: #ccc; } +body.ttrss_main .text-small, +body.ttrss_utility .text-small, body.ttrss_main .small, body.ttrss_utility .small { font-size: 11px; @@ -1229,11 +1290,6 @@ video::-webkit-media-controls-overlay-play-button { color : @color-icon; }*/ } -.cdm .header { - position: sticky; - top: 0; - z-index: 3; -} .cdm .header, .cdm .footer { display: flex; @@ -1243,13 +1299,16 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header img, .cdm .footer img, .cdm .footer i.material-icons { - margin: 0px 4px; + margin: 0 4px; vertical-align: middle; } .cdm .header-sticky-guard { height: 0; } .cdm .header { + position: sticky; + top: 0; + z-index: 3; align-items: center; } .cdm .header > * { @@ -1272,7 +1331,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header .titleWrap { flex-grow: 2; } -.cdm .header span.updated { +.cdm .header .updated { color: #ccc; font-weight: normal; font-size: 11px; @@ -1281,6 +1340,30 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header input { margin: 0px 4px; } +.cdm .header .feed { + float: right; + font-weight: normal; + font-style: italic; +} +.cdm .header .feed a { + border-radius: 4px; + display: inline-block; + padding: 1px 4px 1px 4px; +} +.cdm .header .feed, +.cdm .header .feed a { + vertical-align: middle; + color: #ccc; + font-weight: normal; + font-style: italic; + font-size: 11px; +} +.cdm .header .author { + white-space: nowrap; + color: #ccc; + font-size: 11px; + font-weight: normal; +} .cdm .footer { height: 30px; padding-left: 5px; @@ -1298,6 +1381,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; @@ -1319,10 +1403,6 @@ video::-webkit-media-controls-overlay-play-button { width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1335,10 +1415,10 @@ video::-webkit-media-controls-overlay-play-button { border-bottom-width: 1px; } .cdm.expanded > hr { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } -div.cdm.expanded div.header a.title { +.cdm.expanded .header a.title { font-size: 16px; color: #999; font-weight: 600; @@ -1346,58 +1426,43 @@ div.cdm.expanded div.header a.title { 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.cdm.expanded.active div.header a.title { +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; +} +.cdm.expanded.active .header .title { color: #b87d2c; } -div.cdm.expanded.Unread div.header a.title { +.cdm.expanded.Unread .header .title { color: black; } -div.cdm.expanded div.content { +.cdm.expanded .content { color: #ccc; } -div.cdm.expanded.Unread div.content { - color: black; -} -div.cdm.active div.content { - color: black; -} -div.cdm.vgrlf .feed { +.cdm.vgrlf .feed { display: none; } -.cdm div.feed-title { +.cdm .feed-title { border: 0px solid #b87d2c; border-bottom-width: 1px; padding: 5px 3px 5px 5px; } -.cdm div.feed-title a.title { +.cdm .feed-title a.title { color: #ccc; font-weight: bold; } -.cdm div.feed-title a { +.cdm .feed-title a { color: #ccc; } -.cdm div.feed-title a:hover { +.cdm .feed-title a:hover { color: #b87d2c; } -.cdm div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; -} -.cdm div.header div.feed, -.cdm div.header div.feed a { - vertical-align: middle; - color: #ccc; - font-weight: normal; - font-style: italic; - font-size: 11px; -} -.cdm div.content-inner div.embed-responsive { +.cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm div.content-inner div.embed-responsive iframe { +.cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -1406,17 +1471,6 @@ div.cdm.vgrlf .feed { top: 0; width: 100%; } -.cdm div.header span.author { - white-space: nowrap; - color: #ccc; - font-size: 11px; - font-weight: normal; -} -.cdm .feed a { - border-radius: 4px; - display: inline-block; - padding: 1px 4px 1px 4px; -} .cdm.expandable { background-color: #222; border: 0px solid #222; @@ -1454,10 +1508,10 @@ div.cdm.vgrlf .feed { .cdm.expandable.active { background: white ! important; } -div.cdm.expandable.active div.header span.titleWrap { +.cdm.expandable.active div.header span.titleWrap { white-space: normal; } -div.cdm.expandable div.header a.title { +.cdm.expandable .header a.title { font-weight: 600; color: #ccc; font-size: 14px; @@ -1465,32 +1519,32 @@ div.cdm.expandable div.header a.title { 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.cdm.expandable.Unread div.header a.title { +.cdm.expandable.Unread div.header a.title { color: black; } -div.cdm.expandable.active .collapse i.material-icons { +.cdm.expandable.active .collapse i.material-icons { color: #b87d2c; cursor: pointer; } -div.cdm.expandable.active .excerpt { +.cdm.expandable.active .excerpt { display: none; } -div.cdm.expandable.active div.header a.title { +.cdm.expandable.active div.header a.title { color: #b87d2c; font-size: 16px; 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.cdm.expandable:not(.active) { +.cdm.expandable:not(.active) { cursor: pointer; } -div.cdm.expandable:not(.active) .content, -div.cdm.expandable:not(.active) .collapse { +.cdm.expandable:not(.active) .content, +.cdm.expandable:not(.active) .collapse { display: none; } -div.cdm.expandable.active .header[data-is-stuck], -div.cdm.expanded .header[data-is-stuck] { +.cdm.expandable.active .header[data-is-stuck], +.cdm.expanded .header[data-is-stuck] { box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); border: 0 solid #222; border-bottom-width: 1px; @@ -1767,7 +1821,8 @@ body.ttrss_utility fieldset > label.checkbox { } .flat .dijitToolbar { font-size: 13px; - padding: 0px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 0; } .flat .dijitToolbar .dijitTextBox .dijitInputContainer .dijitInputInner { line-height: 10px; @@ -1790,12 +1845,13 @@ body.ttrss_utility fieldset > label.checkbox { .flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel { padding: 4px 8px; font-size: 13px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } .flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { color: #d29745; } .flat .dijitMenu .dijitMenuItem td { - padding: 0px; + padding: 0; } .flat .dijitCheckBox { margin: 1px; @@ -1805,6 +1861,10 @@ body.ttrss_utility fieldset > label.checkbox { content: "\f00c"; color: white; } +.flat .dijitTab, +.flat .dijitAccordionTitle { + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; +} .flat .dijitTab i.material-icons, .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons { color: #b87d2c; @@ -1854,6 +1914,7 @@ body.ttrss_utility fieldset > label.checkbox { .flat .dijitTree .dijitTreeRow { overflow: hidden; -moz-user-select: none; + user-select: none; text-overflow: ellipsis; } .flat label.dijitButton { @@ -2021,7 +2082,7 @@ body.ttrss_zoom div.post div.header { border: 0px solid #222; border-bottom-width: 1px; background: #333; - font-size: 12px; + font-size: 13px; color: #ccc; } body.ttrss_zoom div.post div.header .row { @@ -2031,30 +2092,30 @@ body.ttrss_zoom div.post div.header .row { align-items: center; justify-content: space-between; } -body.ttrss_zoom div.post div.content { +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; } -body.ttrss_zoom div.post div.content img, -body.ttrss_zoom div.post div.content video { +body.ttrss_zoom div.post .content img, +body.ttrss_zoom div.post .content video { max-width: 760px; height: auto; } -body.ttrss_zoom div.post div.content blockquote { +body.ttrss_zoom div.post .content blockquote { margin: 5px 0px 5px 0px; color: #ccc; padding-left: 10px; border: 0px solid #222; border-left-width: 4px; } -body.ttrss_zoom div.post div.content code { +body.ttrss_zoom div.post .content code { color: #009900; font-family: monospace; font-size: 12px; } -body.ttrss_zoom div.post div.content pre { +body.ttrss_zoom div.post .content pre { margin: 5px 0px 5px 0px; padding: 10px; color: #ccc; diff --git a/themes/light.css b/themes/light.css index 04e58c776..befd2e259 100644 --- a/themes/light.css +++ b/themes/light.css @@ -15,67 +15,132 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + display : grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); + background-color: @color-panel-bg; + grid-gap : 8px; + padding : 8px; + + #headlines-spacer, .whiteBox, .feed-title { + grid-column : 1 e("/") -1; + } + + .cdm.expanded { + // 2 because #headlines-spacer is the actual last child + &:nth-last-child(2):nth-child(odd) { + grid-column : 1 e("/") -1; + } + + .header, .content { + background : @default-bg; + border : 1px solid @border-default; + overflow : hidden; + } + + .content { + border-top-width : 0; + padding : 0 4px 4px 4px; + } + + .header[data-is-stuck] { + top : -8px; + border-bottom-width: 1px; + } + + .header { + border-bottom-width : 0; + padding : 4px; + + .icon-grid-span { + display : inline; + } + + .feed { + display : none; + } + } + + .footer { + border : 0; + padding : 4px; + + .left, .right { + white-space: nowrap; + } + + .left { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content-inner, .intermediate { + word-break: break-all; + } + } + }*/ } body.ttrss_main :focus { outline: none; } -body.ttrss_main div.post { - padding: 0px; +body.ttrss_main .post { + padding: 0; font-size: 13px; } -body.ttrss_main div.post div.header { +body.ttrss_main .post .header { padding: 5px; color: #909090; border: 0px solid #ddd; border-bottom-width: 1px; background: #f5f5f5; } -body.ttrss_main div.post div.header .left, -body.ttrss_main div.post div.header .right { +body.ttrss_main .post .header .left, +body.ttrss_main .post .header .right { display: flex; } -body.ttrss_main div.post div.header .row { +body.ttrss_main .post .header .row { display: flex; margin-bottom: 4px; flex-wrap: nowrap; align-items: center; justify-content: space-between; } -body.ttrss_main div.post div.header .comments { +body.ttrss_main .post .header .comments { flex-grow: 2; } -body.ttrss_main div.post div.header .date { +body.ttrss_main .post .header .date { white-space: nowrap; } -body.ttrss_main div.post div.header img, -body.ttrss_main div.post div.header i.material-icons { +body.ttrss_main .post .header img, +body.ttrss_main .post .header i.material-icons { margin: 0px 4px; vertical-align: middle; color: #777; } -body.ttrss_main div.post div.header .title { +body.ttrss_main .post .header .title { flex-grow: 2; font-size: 15px; 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; } -body.ttrss_main div.post div.content { +body.ttrss_main .post div.content { padding: 10px; font-size: 16px; } -body.ttrss_main div.post div.content img, -body.ttrss_main div.post div.content video { +body.ttrss_main .post div.content img, +body.ttrss_main .post div.content video { border-width: 0px; max-width: 98%; height: auto; } -body.ttrss_main div.post div.content div.embed-responsive { +body.ttrss_main .post div.content div.embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -body.ttrss_main div.post div.content div.embed-responsive iframe { +body.ttrss_main .post div.content div.embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -540,10 +605,11 @@ body.ttrss_main .exception-contents textarea { height: 200px; font-size: 11px; } +body.ttrss_main #headlines-wrap-inner, body.ttrss_main #content-wrap { - padding: 0px; - border-width: 0px; - margin: 0px; + padding: 0; + border: 0; + margin: 0; } body.ttrss_main #feeds-holder { padding: 0px; @@ -639,109 +705,122 @@ body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore { font-weight: bold; color: #257aa7; } -body.ttrss_main #headlines-wrap-inner { - padding: 0px; - margin: 0px; - border-width: 0px; -} -body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { - display: none; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); - background-color: #f5f5f5; - grid-gap: 8px; padding: 8px; + grid-gap: 8px; + background-color: #f5f5f5; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(2):nth-child(odd), +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(1) { grid-column: 1 / -1; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded:nth-last-child(2):nth-child(odd) { - grid-column: 1 / -1; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { background: white; border: 1px solid #ddd; overflow: hidden; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { border-top-width: 0; padding: 0 4px 4px 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { border-bottom-width: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { display: inline; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { border: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { white-space: nowrap; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { word-break: break-all; } body.ttrss_main #headlines-frame { - padding: 0px; - border: 0px #ddd; - margin-top: 0px; + padding: 0; + border: 0; + margin-top: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); + transform: translateZ(0); -webkit-backface-visibility: hidden; + backface-visibility: hidden; } -body.ttrss_main #headlines-frame div.feed-title { +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { + display: none; +} +body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { + height: 100vh; +} +body.ttrss_main #headlines-frame #headlines-spacer { + margin-left: 1px; + text-align: center; + color: #555; + font-size: 11px; + font-style: italic; +} +body.ttrss_main #headlines-frame #headlines-spacer a, +body.ttrss_main #headlines-frame #headlines-spacer span { + color: #555; + padding: 10px; + display: block; +} +body.ttrss_main #headlines-frame #headlines-spacer a:hover { + color: #257aa7; +} +body.ttrss_main #headlines-frame .feed-title { border: 0px solid #257aa7; border-bottom-width: 1px; padding: 5px 8px; } -body.ttrss_main #headlines-frame div.feed-title a.title { +body.ttrss_main #headlines-frame .feed-title a.title { color: #555; font-weight: bold; } -body.ttrss_main #headlines-frame div.feed-title a { +body.ttrss_main #headlines-frame .feed-title a { color: #555; } -body.ttrss_main #headlines-frame div.feed-title a:hover { +body.ttrss_main #headlines-frame .feed-title a:hover { color: #257aa7; } body.ttrss_main #headlines-frame span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } body.ttrss_main #toolbar-frame_splitter { display: none; } body.ttrss_main #toolbar-frame { - padding: 0px; - margin: 0px; - border-width: 0px; + padding: 0; + margin: 0; + border: 0; white-space: nowrap; - font-size: 12px; + font-size: 13px; } body.ttrss_main #toolbar-frame #toolbar { background: white; - border: 0px solid #ddd; + border: 0 solid #ddd; border-bottom-width: 1px; padding-left: 4px; height: 32px; @@ -749,7 +828,7 @@ body.ttrss_main #toolbar-frame #toolbar { flex-direction: row; flex-wrap: nowrap; color: #555; - font-size: 12px; + font-size: 13px; align-items: center; } body.ttrss_main #toolbar-frame #toolbar .dijitSelect, @@ -769,7 +848,7 @@ body.ttrss_main #toolbar-frame #toolbar i { margin: 0 4px; } body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines { - font-size: 12px; + font-size: 13px; background: transparent; padding-right: 4px; flex-grow: 2; @@ -804,7 +883,7 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border-width: 0px; + border: 0; text-align: right; color: #555; padding: 5px 5px 0px 0px; @@ -830,9 +909,8 @@ body.ttrss_main #header i { margin: 0 4px; } body.ttrss_main #content-insert { - padding: 0px; - border-color: #ddd; - border-width: 0px; + padding: 0; + border: 0; line-height: 1.5; overflow: auto; -webkit-overflow-scrolling: touch; @@ -865,25 +943,6 @@ body.ttrss_main .player:hover { background: #f5f5f5; cursor: pointer; } -body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { - height: 100vh; -} -body.ttrss_main #headlines-spacer { - margin-left: 1px; - text-align: center; - color: #555; - font-size: 11px; - font-style: italic; -} -body.ttrss_main #headlines-spacer a, -body.ttrss_main #headlines-spacer span { - color: #555; - padding: 10px; - display: block; -} -body.ttrss_main #headlines-spacer a:hover { - color: #257aa7; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; @@ -1177,6 +1236,8 @@ body.ttrss_main .text-muted, body.ttrss_utility .text-muted { color: #555; } +body.ttrss_main .text-small, +body.ttrss_utility .text-small, body.ttrss_main .small, body.ttrss_utility .small { font-size: 11px; @@ -1229,11 +1290,6 @@ video::-webkit-media-controls-overlay-play-button { color : @color-icon; }*/ } -.cdm .header { - position: sticky; - top: 0; - z-index: 3; -} .cdm .header, .cdm .footer { display: flex; @@ -1243,13 +1299,16 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header img, .cdm .footer img, .cdm .footer i.material-icons { - margin: 0px 4px; + margin: 0 4px; vertical-align: middle; } .cdm .header-sticky-guard { height: 0; } .cdm .header { + position: sticky; + top: 0; + z-index: 3; align-items: center; } .cdm .header > * { @@ -1272,7 +1331,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header .titleWrap { flex-grow: 2; } -.cdm .header span.updated { +.cdm .header .updated { color: #555; font-weight: normal; font-size: 11px; @@ -1281,6 +1340,30 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header input { margin: 0px 4px; } +.cdm .header .feed { + float: right; + font-weight: normal; + font-style: italic; +} +.cdm .header .feed a { + border-radius: 4px; + display: inline-block; + padding: 1px 4px 1px 4px; +} +.cdm .header .feed, +.cdm .header .feed a { + vertical-align: middle; + color: #555; + font-weight: normal; + font-style: italic; + font-size: 11px; +} +.cdm .header .author { + white-space: nowrap; + color: #555; + font-size: 11px; + font-weight: normal; +} .cdm .footer { height: 30px; padding-left: 5px; @@ -1298,6 +1381,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; @@ -1319,10 +1403,6 @@ video::-webkit-media-controls-overlay-play-button { width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1335,10 +1415,10 @@ video::-webkit-media-controls-overlay-play-button { border-bottom-width: 1px; } .cdm.expanded > hr { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } -div.cdm.expanded div.header a.title { +.cdm.expanded .header a.title { font-size: 16px; color: #999; font-weight: 600; @@ -1346,58 +1426,43 @@ div.cdm.expanded div.header a.title { 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.cdm.expanded.active div.header a.title { +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; +} +.cdm.expanded.active .header .title { color: #257aa7; } -div.cdm.expanded.Unread div.header a.title { +.cdm.expanded.Unread .header .title { color: black; } -div.cdm.expanded div.content { +.cdm.expanded .content { color: #555; } -div.cdm.expanded.Unread div.content { - color: black; -} -div.cdm.active div.content { - color: black; -} -div.cdm.vgrlf .feed { +.cdm.vgrlf .feed { display: none; } -.cdm div.feed-title { +.cdm .feed-title { border: 0px solid #257aa7; border-bottom-width: 1px; padding: 5px 3px 5px 5px; } -.cdm div.feed-title a.title { +.cdm .feed-title a.title { color: #555; font-weight: bold; } -.cdm div.feed-title a { +.cdm .feed-title a { color: #555; } -.cdm div.feed-title a:hover { +.cdm .feed-title a:hover { color: #257aa7; } -.cdm div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; -} -.cdm div.header div.feed, -.cdm div.header div.feed a { - vertical-align: middle; - color: #555; - font-weight: normal; - font-style: italic; - font-size: 11px; -} -.cdm div.content-inner div.embed-responsive { +.cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm div.content-inner div.embed-responsive iframe { +.cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -1406,17 +1471,6 @@ div.cdm.vgrlf .feed { top: 0; width: 100%; } -.cdm div.header span.author { - white-space: nowrap; - color: #555; - font-size: 11px; - font-weight: normal; -} -.cdm .feed a { - border-radius: 4px; - display: inline-block; - padding: 1px 4px 1px 4px; -} .cdm.expandable { background-color: #f5f5f5; border: 0px solid #ddd; @@ -1454,10 +1508,10 @@ div.cdm.vgrlf .feed { .cdm.expandable.active { background: white ! important; } -div.cdm.expandable.active div.header span.titleWrap { +.cdm.expandable.active div.header span.titleWrap { white-space: normal; } -div.cdm.expandable div.header a.title { +.cdm.expandable .header a.title { font-weight: 600; color: #555; font-size: 14px; @@ -1465,32 +1519,32 @@ div.cdm.expandable div.header a.title { 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.cdm.expandable.Unread div.header a.title { +.cdm.expandable.Unread div.header a.title { color: black; } -div.cdm.expandable.active .collapse i.material-icons { +.cdm.expandable.active .collapse i.material-icons { color: #257aa7; cursor: pointer; } -div.cdm.expandable.active .excerpt { +.cdm.expandable.active .excerpt { display: none; } -div.cdm.expandable.active div.header a.title { +.cdm.expandable.active div.header a.title { color: #257aa7; font-size: 16px; 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.cdm.expandable:not(.active) { +.cdm.expandable:not(.active) { cursor: pointer; } -div.cdm.expandable:not(.active) .content, -div.cdm.expandable:not(.active) .collapse { +.cdm.expandable:not(.active) .content, +.cdm.expandable:not(.active) .collapse { display: none; } -div.cdm.expandable.active .header[data-is-stuck], -div.cdm.expanded .header[data-is-stuck] { +.cdm.expandable.active .header[data-is-stuck], +.cdm.expanded .header[data-is-stuck] { box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); border: 0 solid #ddd; border-bottom-width: 1px; @@ -1865,7 +1919,8 @@ body.ttrss_utility.share_popup .content { } .flat .dijitToolbar { font-size: 13px; - padding: 0px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 0; } .flat .dijitToolbar .dijitTextBox .dijitInputContainer .dijitInputInner { line-height: 10px; @@ -1888,12 +1943,13 @@ body.ttrss_utility.share_popup .content { .flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel { padding: 4px 8px; font-size: 13px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } .flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { color: #2e99d1; } .flat .dijitMenu .dijitMenuItem td { - padding: 0px; + padding: 0; } .flat .dijitCheckBox { margin: 1px; @@ -1903,6 +1959,10 @@ body.ttrss_utility.share_popup .content { content: "\f00c"; color: white; } +.flat .dijitTab, +.flat .dijitAccordionTitle { + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; +} .flat .dijitTab i.material-icons, .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons { color: #257aa7; @@ -1952,6 +2012,7 @@ body.ttrss_utility.share_popup .content { .flat .dijitTree .dijitTreeRow { overflow: hidden; -moz-user-select: none; + user-select: none; text-overflow: ellipsis; } .flat label.dijitButton { @@ -2030,7 +2091,7 @@ body.ttrss_zoom div.post div.header { border: 0px solid #ddd; border-bottom-width: 1px; background: white; - font-size: 12px; + font-size: 13px; color: #555; } body.ttrss_zoom div.post div.header .row { @@ -2040,30 +2101,30 @@ body.ttrss_zoom div.post div.header .row { align-items: center; justify-content: space-between; } -body.ttrss_zoom div.post div.content { +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; } -body.ttrss_zoom div.post div.content img, -body.ttrss_zoom div.post div.content video { +body.ttrss_zoom div.post .content img, +body.ttrss_zoom div.post .content video { max-width: 760px; height: auto; } -body.ttrss_zoom div.post div.content blockquote { +body.ttrss_zoom div.post .content blockquote { margin: 5px 0px 5px 0px; color: #555; padding-left: 10px; border: 0px solid #ddd; border-left-width: 4px; } -body.ttrss_zoom div.post div.content code { +body.ttrss_zoom div.post .content code { color: #009900; font-family: monospace; font-size: 12px; } -body.ttrss_zoom div.post div.content pre { +body.ttrss_zoom div.post .content pre { margin: 5px 0px 5px 0px; padding: 10px; color: #555; diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 760fa44c7..9ba4ed78e 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -3,12 +3,6 @@ color : @color-icon; }*/ - .header { - position: sticky; - top : 0; - z-index: 3; - } - .header, .footer { display : flex; flex-direction : row; @@ -17,7 +11,7 @@ .header img, .footer img, .footer i.material-icons { - margin : 0px 4px; + margin : 0 4px; vertical-align: middle; } @@ -26,6 +20,9 @@ } .header { + position: sticky; + top : 0; + z-index: 3; align-items : center; > * { @@ -50,16 +47,43 @@ flex-grow : 2; } - span.updated { + .updated { color : @default-text; font-weight : normal; - font-size : 11px; + font-size : @font-size-small; white-space : nowrap; } input { margin : 0px 4px; } + + .feed { + float: right; + font-weight: normal; + font-style: italic; + + a { + border-radius : 4px; + display : inline-block; + padding : 1px 4px 1px 4px; + } + } + + .feed, .feed a { + vertical-align: middle; + color: @default-text; + font-weight: normal; + font-style: italic; + font-size: @font-size-small; + } + + .author { + white-space : nowrap; + color : @default-text; + font-size : @font-size-small; + font-weight : normal; + } } .footer { @@ -82,6 +106,7 @@ .intermediate { margin-top : 10px; margin-left : 10px; + line-height : 1.5; } .content-inner { @@ -106,100 +131,84 @@ width : auto; height : auto; } -} -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ + &.expanded { - .collapse, .excerpt { + .collapse, .excerpt { + display : none; + } + + .titleWrap { + white-space : normal; + } + + .footer { + border: 0px solid @border-default; + border-bottom-width: 1px; + } + + > hr { + margin-top : 0; + margin-bottom : 0; + } + + .header a.title { + font-size : 16px; + color : #999; + font-weight : 600; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; + } + + &.active, + &.Unread { + .content { + color : black; + } + } + + &.active { + .header .title { + color : @color-link; + } + } + + &.Unread { + .header .title { + color : black; + } + } + + .content { + color : @default-text; + } + } + + &.vgrlf .feed { display : none; } - .titleWrap { - white-space : normal; - } - - .footer { - border: 0px solid @border-default; - border-bottom-width: 1px; - } - - > hr { - margin-top : 0px; - margin-bottom : 0px; - } - -} - -div.cdm.expanded div.header a.title { - font-size : 16px; - color : #999; - font-weight : 600; - transition : color 0.2s, background 0.2s; - text-rendering: optimizelegibility; - font-family : @fonts-ui-bold; -} - -div.cdm.expanded.active div.header a.title { - color : @color-link; -} - -div.cdm.expanded.Unread div.header a.title { - color : black; -} - -div.cdm.expanded div.content { - color : @default-text; -} - -div.cdm.expanded.Unread div.content { - color : black; -} - -div.cdm.active div.content { - color : black; -} - -div.cdm.vgrlf .feed { - display : none; -} - -.cdm { - div.feed-title { + .feed-title { border: 0px solid @color-link; border-bottom-width: 1px; padding: 5px 3px 5px 5px; + + a.title { + color: @default-text; + font-weight: bold; + } + + a { + color: @default-text; + } + + a:hover { + color: @color-link; + } } - div.feed-title a.title { - color: @default-text; - font-weight: bold; - } - - div.feed-title a { - color: @default-text; - } - - div.feed-title a:hover { - color: @color-link; - } - - div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; - } - - div.header div.feed, div.header div.feed a { - vertical-align: middle; - color: @default-text; - font-weight: normal; - font-style: italic; - font-size: 11px; - } - - div.content-inner div.embed-responsive { + .content-inner .embed-responsive { overflow : hidden; padding-bottom : @embed-responsive-padding; position : relative; @@ -215,112 +224,96 @@ div.cdm.vgrlf .feed { } } - div.header span.author { - white-space : nowrap; - color : @default-text; - font-size : 11px; - font-weight : normal; + &.expandable { + background-color : @color-panel-bg; + border: 0px solid @border-default; + border-bottom-width: 1px; + + > hr { + display : none; + } + + div.header span.titleWrap { + white-space : nowrap; + text-overflow : ellipsis; + overflow : hidden; + } + + .excerpt { + white-space : nowrap; + font-size : @font-size-small; + color : #999; + font-weight : normal; + cursor : pointer; + } + + &:not(.active) { + user-select : none; + } + + &.Unread { + background : white; + } + + &.Selected:not(.active) { + background : desaturate(@color-accent, 25%); + + a, + .header a.title, + span { + color : white; + } + } + + &.active { + background : white ! important; + } + + &.active div.header span.titleWrap { + white-space : normal; + } + + .header a.title { + font-weight : 600; + color : @default-text; + font-size : 14px; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; + } + + &.Unread div.header a.title { + color : black; + } + + &.active { + .collapse i.material-icons { + color : @color-accent; + cursor : pointer; + } + + .excerpt { + display: none; + } + + div.header a.title { + color: @color-link; + font-size: 16px; + font-weight: 600; + text-rendering: optimizelegibility; + font-family: @fonts-ui-bold; + } + } + + &:not(.active) { + cursor : pointer; + + .content, .collapse { + display : none; + } + } } - .feed a { - border-radius : 4px; - display : inline-block; - padding : 1px 4px 1px 4px; - } -} - -.cdm.expandable { - background-color : @color-panel-bg; - border: 0px solid @border-default; - border-bottom-width: 1px; - - > hr { - display : none; - } - - div.header span.titleWrap { - white-space : nowrap; - text-overflow : ellipsis; - overflow : hidden; - } - - .excerpt { - white-space : nowrap; - font-size : 11px; - color : #999; - font-weight : normal; - cursor : pointer; - } - -} - -.cdm.expandable:not(.active) { - user-select : none; -} - -.cdm.expandable.Unread { - background : white; -} - -.cdm.expandable.Selected:not(.active) { - background : desaturate(@color-accent, 25%); - - a, - .header a.title, - span { - color : white; - } -} - -.cdm.expandable.active { - background : white ! important; -} - -div.cdm.expandable.active div.header span.titleWrap { - white-space : normal; -} - -div.cdm.expandable div.header a.title { - font-weight : 600; - color : @default-text; - font-size : 14px; - transition : color 0.2s, background 0.2s; - text-rendering: optimizelegibility; - font-family : @fonts-ui-bold; -} - -div.cdm.expandable.Unread div.header a.title { - color : black; -} - -div.cdm.expandable.active { - .collapse i.material-icons { - color : @color-accent; - cursor : pointer; - } - - .excerpt { - display: none; - } - - div.header a.title { - color: @color-link; - font-size: 16px; - font-weight: 600; - text-rendering: optimizelegibility; - font-family: @fonts-ui-bold; - } -} - -div.cdm.expandable:not(.active) { - cursor : pointer; - - .content, .collapse { - display : none; - } -} - -div.cdm { &.expandable.active, &.expanded { .header[data-is-stuck] { diff --git a/themes/light/defines.less b/themes/light/defines.less index 0786775ad..488b3f623 100644 --- a/themes/light/defines.less +++ b/themes/light/defines.less @@ -17,6 +17,11 @@ @color-hl-icon: #ccc; @color-tooltip-fg: @color-panel-bg; @color-tooltip-bg: darken(@color-accent, 10%); +@cdm-grid-padding: 8px; +@cdm-grid-col-width: 600px; +@font-size-tiny: 9px; +@font-size-small: 11px; +@font-size-toolbar: 13px; @embed-responsive-padding: 56.25%; // Use 56.25% for 16:9 aspect ratio, 75% for 4:3. diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less index da1138986..4f2faadcb 100644 --- a/themes/light/dijit_basic.less +++ b/themes/light/dijit_basic.less @@ -38,8 +38,9 @@ } .dijitToolbar { - font-size: 13px; - padding: 0px; + font-size: @font-size-toolbar; + font-family: @fonts-ui; + padding: 0; .dijitTextBox .dijitInputContainer { .dijitInputInner { @@ -67,27 +68,35 @@ border-color : darken(@color-checked, 10%); } - .dijitMenu .dijitMenuItem .dijitMenuItemLabel { - padding: 4px 8px; - font-size: 13px; - } + .dijitMenu { + .dijitMenuItem .dijitMenuItemLabel { + padding: 4px 8px; + font-size: @font-size-toolbar; + font-family: @fonts-ui; + } - .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { - color : lighten(@color-accent, 10%); - } + .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { + color : lighten(@color-accent, 10%); + } - .dijitMenu .dijitMenuItem td { - padding: 0px; + .dijitMenuItem td { + padding: 0; + } } .dijitCheckBox { margin : 1px; + + &:before { + font-family: "flat-icon"; + content: "\f00c"; + color: white; + } } - .dijitCheckBox:before { - font-family: "flat-icon"; - content: "\f00c"; - color: white; + .dijitTab, + .dijitAccordionTitle { + font-family: @fonts-ui; } .dijitTab, @@ -157,6 +166,7 @@ .dijitTreeRow { overflow: hidden; -moz-user-select: none; + user-select: none; text-overflow: ellipsis; } @@ -169,10 +179,10 @@ cursor : pointer; position: relative; top : 1px; - } - label.dijitButton:hover { - background-color : @color-panel-bg; + &:hover { + background-color : @color-panel-bg; + } } .dijitTree { diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index cc9a66bd6..8e7bce410 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -9,11 +9,11 @@ body.ttrss_main { outline: none; } - div.post { - padding : 0px; + .post { + padding : 0; font-size : 13px; - div.header { + .header { padding : 5px; color : #909090; border: 0px solid @border-default; @@ -273,7 +273,7 @@ body.ttrss_main { span.author { white-space : nowrap; color : @default-text; - font-size : 11px; + font-size : @font-size-small; font-weight : normal; } @@ -285,7 +285,7 @@ body.ttrss_main { border-radius : 4px; display : inline-block; padding : 1px 4px; - font-size : 11px; + font-size : @font-size-small; font-style : italic; font-weight : normal; color : @default-text; @@ -298,7 +298,7 @@ body.ttrss_main { span.updated { color : @default-text; text-align : right; - font-size : 11px; + font-size : @font-size-small; padding-left : 10px; } @@ -413,7 +413,7 @@ body.ttrss_main { display : inline-block; vertical-align: middle; background-color : #fff7d5; - font-size : 9px; + font-size : @font-size-tiny; color : @default-fg; font-weight : normal; margin-left : 2px; @@ -499,7 +499,7 @@ body.ttrss_main { margin-left : 1px; text-align : center; padding : 1em 1em 0px 1em; - font-size : 11px; + font-size : @font-size-small; border: 0px solid @border-default; border-bottom-width: 1px; } @@ -600,7 +600,7 @@ body.ttrss_main { position : absolute; left : 5px; bottom : 5px; - font-size : 11px; + font-size : @font-size-small; color : @default-text; font-weight : bold; background-color : @default-bg; @@ -622,14 +622,15 @@ body.ttrss_main { textarea { width : 99%; height : 200px; - font-size : 11px; + font-size : @font-size-small; } } + #headlines-wrap-inner, #content-wrap { - padding : 0px; - border-width : 0px; - margin : 0px; + padding : 0; + border : 0; + margin : 0; } #feeds-holder { @@ -660,7 +661,7 @@ body.ttrss_main { .counterNode { font-weight : bold; display : none; - font-size : 9px; + font-size : @font-size-tiny; text-align : center; border : 1px solid lighten(@color-accent, 5%);; color : white; @@ -745,17 +746,78 @@ body.ttrss_main { } } - #headlines-wrap-inner { - padding : 0px; - margin : 0px; - border-width : 0px; + #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + display : grid; + grid-template-columns: repeat(auto-fit, minmax(@cdm-grid-col-width, 1fr)); + padding : @cdm-grid-padding; + grid-gap : @cdm-grid-padding; + background-color: @color-panel-bg; + + > * { + // 2 = because #headlines-spacer is the actual last child + // only if odd to deal with 1) single article and 2) not break any previous rows + // 1 = spacer + // + // this is outside of .cdm selector because of #headlines-spacer etc + &:nth-last-child(2):nth-child(odd), + &:nth-last-child(1) { + grid-column : 1 e("/") -1; + } + } + + .cdm.expanded { + + .header, .content { + background : @default-bg; + border : 1px solid @border-default; + overflow : hidden; + } + + .content { + border-top-width : 0; + padding : 0 4px 4px 4px; + } + + .header[data-is-stuck] { + top : -@cdm-grid-padding; + border-bottom-width: 1px; + } + + .header { + border-bottom-width : 0; + padding : 4px; + + .icon-grid-span { + display : inline; + } + + .feed { + display : none; + } + } + + .footer { + border : 0; + padding : 4px; + + .left, .right { + white-space: nowrap; + } + + .left { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content-inner, + .intermediate { + word-break: break-all; + } + } } - #headlines-frame[data-is-vfeed="false"] .header .feed { - display : none; - } - - #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { display : grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); background-color: @color-panel-bg; @@ -819,38 +881,68 @@ body.ttrss_main { word-break: break-all; } } - } + }*/ #headlines-frame { - padding : 0px; - border: 0px @border-default; - margin-top : 0px; + padding : 0; + border: 0; + margin-top : 0; + -webkit-overflow-scrolling : touch; -webkit-transform: translateZ(0); + transform: translateZ(0); -webkit-backface-visibility: hidden; + backface-visibility: hidden; - div.feed-title { + &[data-is-vfeed="false"] .header .feed { + display : none; + } + + &[data-auto-catchup="true"] #headlines-spacer { + height : 100vh; + } + + #headlines-spacer { + margin-left : 1px; + text-align : center; + color : @default-text; + font-size : @font-size-small; + font-style : italic; + + a, span { + color : @default-text; + padding : 10px; + display : block; + } + + a:hover { + color : @color-accent; + } + } + + .feed-title { border: 0px solid @color-link; border-bottom-width: 1px; padding: 5px 8px; - } - div.feed-title a.title { - color: @default-text; - font-weight: bold; - } + a.title { + color: @default-text; + font-weight: bold; + } - div.feed-title a { - color: @default-text; - } + a { + color: @default-text; + } - div.feed-title a:hover { - color: @color-link; + a:hover { + color: @color-link; + } } span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } } @@ -859,15 +951,15 @@ body.ttrss_main { } #toolbar-frame { - padding : 0px; - margin : 0px; - border-width : 0px; + padding : 0; + margin : 0; + border : 0; white-space: nowrap; - font-size : 12px; + font-size : @font-size-toolbar; #toolbar { background : white; - border: 0px solid @border-default; + border: 0 solid @border-default; border-bottom-width: 1px; padding-left : 4px; height : 32px; @@ -875,7 +967,7 @@ body.ttrss_main { flex-direction : row; flex-wrap : nowrap; color : @default-text; - font-size : 12px; + font-size : @font-size-toolbar; align-items : center; .dijitSelect, @@ -898,7 +990,7 @@ body.ttrss_main { } #toolbar-headlines { - font-size : 12px; + font-size : @font-size-toolbar; background: transparent; padding-right : 4px; flex-grow : 2; @@ -941,7 +1033,7 @@ body.ttrss_main { } #header { - border-width : 0px; + border : 0; text-align : right; color : @default-text; padding : 5px 5px 0px 0px; @@ -971,9 +1063,8 @@ body.ttrss_main { } #content-insert { - padding : 0px; - border-color : @border-default; - border-width : 0px; + padding : 0; + border : 0; line-height: 1.5; overflow : auto; -webkit-overflow-scrolling : touch; @@ -990,7 +1081,7 @@ body.ttrss_main { .player { display : inline-block; color : @default-text; - font-size : 11px; + font-size : @font-size-small; font-family : sans-serif; border : 1px solid @default-text; padding : 0px 4px 0px 4px; @@ -1010,28 +1101,6 @@ body.ttrss_main { cursor : pointer; } - #headlines-frame[data-auto-catchup="true"] #headlines-spacer { - height : 100vh; - } - - #headlines-spacer { - margin-left : 1px; - text-align : center; - color : @default-text; - font-size : 11px; - font-style : italic; - - a, span { - color : @default-text; - padding : 10px; - display : block; - } - - a:hover { - color : @color-accent; - } - } - ul#filterDlg_Matches, ul#filterDlg_Actions { list-style-type : none; margin : 0; @@ -1382,8 +1451,8 @@ body.ttrss_main, body.ttrss_utility { color : @default-text; } - .small { - font-size : 11px; + .text-small, .small { + font-size : @font-size-small; } div.autocomplete { diff --git a/themes/light/zoom.less b/themes/light/zoom.less index e599bc447..fd39e5b76 100644 --- a/themes/light/zoom.less +++ b/themes/light/zoom.less @@ -16,7 +16,7 @@ body.ttrss_zoom { border: 0px solid @border-default; border-bottom-width: 1px; background : @default-bg; - font-size : 12px; + font-size : @font-size-toolbar; color : @default-text; .row { @@ -28,7 +28,7 @@ body.ttrss_zoom { } } - div.content { + .content { font-size : 15px; line-height : 1.5; border-width : 0; diff --git a/themes/night.css b/themes/night.css index 4814ed5e2..cb5463bb0 100644 --- a/themes/night.css +++ b/themes/night.css @@ -16,67 +16,132 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + display : grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); + background-color: @color-panel-bg; + grid-gap : 8px; + padding : 8px; + + #headlines-spacer, .whiteBox, .feed-title { + grid-column : 1 e("/") -1; + } + + .cdm.expanded { + // 2 because #headlines-spacer is the actual last child + &:nth-last-child(2):nth-child(odd) { + grid-column : 1 e("/") -1; + } + + .header, .content { + background : @default-bg; + border : 1px solid @border-default; + overflow : hidden; + } + + .content { + border-top-width : 0; + padding : 0 4px 4px 4px; + } + + .header[data-is-stuck] { + top : -8px; + border-bottom-width: 1px; + } + + .header { + border-bottom-width : 0; + padding : 4px; + + .icon-grid-span { + display : inline; + } + + .feed { + display : none; + } + } + + .footer { + border : 0; + padding : 4px; + + .left, .right { + white-space: nowrap; + } + + .left { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content-inner, .intermediate { + word-break: break-all; + } + } + }*/ } body.ttrss_main :focus { outline: none; } -body.ttrss_main div.post { - padding: 0px; +body.ttrss_main .post { + padding: 0; font-size: 13px; } -body.ttrss_main div.post div.header { +body.ttrss_main .post .header { padding: 5px; color: #909090; border: 0px solid #222; border-bottom-width: 1px; background: #222; } -body.ttrss_main div.post div.header .left, -body.ttrss_main div.post div.header .right { +body.ttrss_main .post .header .left, +body.ttrss_main .post .header .right { display: flex; } -body.ttrss_main div.post div.header .row { +body.ttrss_main .post .header .row { display: flex; margin-bottom: 4px; flex-wrap: nowrap; align-items: center; justify-content: space-between; } -body.ttrss_main div.post div.header .comments { +body.ttrss_main .post .header .comments { flex-grow: 2; } -body.ttrss_main div.post div.header .date { +body.ttrss_main .post .header .date { white-space: nowrap; } -body.ttrss_main div.post div.header img, -body.ttrss_main div.post div.header i.material-icons { +body.ttrss_main .post .header img, +body.ttrss_main .post .header i.material-icons { margin: 0px 4px; vertical-align: middle; color: #999; } -body.ttrss_main div.post div.header .title { +body.ttrss_main .post .header .title { flex-grow: 2; font-size: 15px; 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; } -body.ttrss_main div.post div.content { +body.ttrss_main .post div.content { padding: 10px; font-size: 16px; } -body.ttrss_main div.post div.content img, -body.ttrss_main div.post div.content video { +body.ttrss_main .post div.content img, +body.ttrss_main .post div.content video { border-width: 0px; max-width: 98%; height: auto; } -body.ttrss_main div.post div.content div.embed-responsive { +body.ttrss_main .post div.content div.embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -body.ttrss_main div.post div.content div.embed-responsive iframe { +body.ttrss_main .post div.content div.embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -541,10 +606,11 @@ body.ttrss_main .exception-contents textarea { height: 200px; font-size: 11px; } +body.ttrss_main #headlines-wrap-inner, body.ttrss_main #content-wrap { - padding: 0px; - border-width: 0px; - margin: 0px; + padding: 0; + border: 0; + margin: 0; } body.ttrss_main #feeds-holder { padding: 0px; @@ -640,109 +706,122 @@ body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore { font-weight: bold; color: #b87d2c; } -body.ttrss_main #headlines-wrap-inner { - padding: 0px; - margin: 0px; - border-width: 0px; -} -body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { - display: none; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); - background-color: #222; - grid-gap: 8px; padding: 8px; + grid-gap: 8px; + background-color: #222; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(2):nth-child(odd), +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(1) { grid-column: 1 / -1; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded:nth-last-child(2):nth-child(odd) { - grid-column: 1 / -1; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { background: #333; border: 1px solid #222; overflow: hidden; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { border-top-width: 0; padding: 0 4px 4px 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { border-bottom-width: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { display: inline; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { border: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { white-space: nowrap; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { word-break: break-all; } body.ttrss_main #headlines-frame { - padding: 0px; - border: 0px #222; - margin-top: 0px; + padding: 0; + border: 0; + margin-top: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); + transform: translateZ(0); -webkit-backface-visibility: hidden; + backface-visibility: hidden; } -body.ttrss_main #headlines-frame div.feed-title { +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { + display: none; +} +body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { + height: 100vh; +} +body.ttrss_main #headlines-frame #headlines-spacer { + margin-left: 1px; + text-align: center; + color: #ccc; + font-size: 11px; + font-style: italic; +} +body.ttrss_main #headlines-frame #headlines-spacer a, +body.ttrss_main #headlines-frame #headlines-spacer span { + color: #ccc; + padding: 10px; + display: block; +} +body.ttrss_main #headlines-frame #headlines-spacer a:hover { + color: #b87d2c; +} +body.ttrss_main #headlines-frame .feed-title { border: 0px solid #b87d2c; border-bottom-width: 1px; padding: 5px 8px; } -body.ttrss_main #headlines-frame div.feed-title a.title { +body.ttrss_main #headlines-frame .feed-title a.title { color: #ccc; font-weight: bold; } -body.ttrss_main #headlines-frame div.feed-title a { +body.ttrss_main #headlines-frame .feed-title a { color: #ccc; } -body.ttrss_main #headlines-frame div.feed-title a:hover { +body.ttrss_main #headlines-frame .feed-title a:hover { color: #b87d2c; } body.ttrss_main #headlines-frame span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } body.ttrss_main #toolbar-frame_splitter { display: none; } body.ttrss_main #toolbar-frame { - padding: 0px; - margin: 0px; - border-width: 0px; + padding: 0; + margin: 0; + border: 0; white-space: nowrap; - font-size: 12px; + font-size: 13px; } body.ttrss_main #toolbar-frame #toolbar { background: white; - border: 0px solid #222; + border: 0 solid #222; border-bottom-width: 1px; padding-left: 4px; height: 32px; @@ -750,7 +829,7 @@ body.ttrss_main #toolbar-frame #toolbar { flex-direction: row; flex-wrap: nowrap; color: #ccc; - font-size: 12px; + font-size: 13px; align-items: center; } body.ttrss_main #toolbar-frame #toolbar .dijitSelect, @@ -770,7 +849,7 @@ body.ttrss_main #toolbar-frame #toolbar i { margin: 0 4px; } body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines { - font-size: 12px; + font-size: 13px; background: transparent; padding-right: 4px; flex-grow: 2; @@ -805,7 +884,7 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border-width: 0px; + border: 0; text-align: right; color: #ccc; padding: 5px 5px 0px 0px; @@ -831,9 +910,8 @@ body.ttrss_main #header i { margin: 0 4px; } body.ttrss_main #content-insert { - padding: 0px; - border-color: #222; - border-width: 0px; + padding: 0; + border: 0; line-height: 1.5; overflow: auto; -webkit-overflow-scrolling: touch; @@ -866,25 +944,6 @@ body.ttrss_main .player:hover { background: #222; cursor: pointer; } -body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { - height: 100vh; -} -body.ttrss_main #headlines-spacer { - margin-left: 1px; - text-align: center; - color: #ccc; - font-size: 11px; - font-style: italic; -} -body.ttrss_main #headlines-spacer a, -body.ttrss_main #headlines-spacer span { - color: #ccc; - padding: 10px; - display: block; -} -body.ttrss_main #headlines-spacer a:hover { - color: #b87d2c; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; @@ -1178,6 +1237,8 @@ body.ttrss_main .text-muted, body.ttrss_utility .text-muted { color: #ccc; } +body.ttrss_main .text-small, +body.ttrss_utility .text-small, body.ttrss_main .small, body.ttrss_utility .small { font-size: 11px; @@ -1230,11 +1291,6 @@ video::-webkit-media-controls-overlay-play-button { color : @color-icon; }*/ } -.cdm .header { - position: sticky; - top: 0; - z-index: 3; -} .cdm .header, .cdm .footer { display: flex; @@ -1244,13 +1300,16 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header img, .cdm .footer img, .cdm .footer i.material-icons { - margin: 0px 4px; + margin: 0 4px; vertical-align: middle; } .cdm .header-sticky-guard { height: 0; } .cdm .header { + position: sticky; + top: 0; + z-index: 3; align-items: center; } .cdm .header > * { @@ -1273,7 +1332,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header .titleWrap { flex-grow: 2; } -.cdm .header span.updated { +.cdm .header .updated { color: #ccc; font-weight: normal; font-size: 11px; @@ -1282,6 +1341,30 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header input { margin: 0px 4px; } +.cdm .header .feed { + float: right; + font-weight: normal; + font-style: italic; +} +.cdm .header .feed a { + border-radius: 4px; + display: inline-block; + padding: 1px 4px 1px 4px; +} +.cdm .header .feed, +.cdm .header .feed a { + vertical-align: middle; + color: #ccc; + font-weight: normal; + font-style: italic; + font-size: 11px; +} +.cdm .header .author { + white-space: nowrap; + color: #ccc; + font-size: 11px; + font-weight: normal; +} .cdm .footer { height: 30px; padding-left: 5px; @@ -1299,6 +1382,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; @@ -1320,10 +1404,6 @@ video::-webkit-media-controls-overlay-play-button { width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1336,10 +1416,10 @@ video::-webkit-media-controls-overlay-play-button { border-bottom-width: 1px; } .cdm.expanded > hr { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } -div.cdm.expanded div.header a.title { +.cdm.expanded .header a.title { font-size: 16px; color: #999; font-weight: 600; @@ -1347,58 +1427,43 @@ div.cdm.expanded div.header a.title { 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.cdm.expanded.active div.header a.title { +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; +} +.cdm.expanded.active .header .title { color: #b87d2c; } -div.cdm.expanded.Unread div.header a.title { +.cdm.expanded.Unread .header .title { color: black; } -div.cdm.expanded div.content { +.cdm.expanded .content { color: #ccc; } -div.cdm.expanded.Unread div.content { - color: black; -} -div.cdm.active div.content { - color: black; -} -div.cdm.vgrlf .feed { +.cdm.vgrlf .feed { display: none; } -.cdm div.feed-title { +.cdm .feed-title { border: 0px solid #b87d2c; border-bottom-width: 1px; padding: 5px 3px 5px 5px; } -.cdm div.feed-title a.title { +.cdm .feed-title a.title { color: #ccc; font-weight: bold; } -.cdm div.feed-title a { +.cdm .feed-title a { color: #ccc; } -.cdm div.feed-title a:hover { +.cdm .feed-title a:hover { color: #b87d2c; } -.cdm div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; -} -.cdm div.header div.feed, -.cdm div.header div.feed a { - vertical-align: middle; - color: #ccc; - font-weight: normal; - font-style: italic; - font-size: 11px; -} -.cdm div.content-inner div.embed-responsive { +.cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm div.content-inner div.embed-responsive iframe { +.cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -1407,17 +1472,6 @@ div.cdm.vgrlf .feed { top: 0; width: 100%; } -.cdm div.header span.author { - white-space: nowrap; - color: #ccc; - font-size: 11px; - font-weight: normal; -} -.cdm .feed a { - border-radius: 4px; - display: inline-block; - padding: 1px 4px 1px 4px; -} .cdm.expandable { background-color: #222; border: 0px solid #222; @@ -1455,10 +1509,10 @@ div.cdm.vgrlf .feed { .cdm.expandable.active { background: white ! important; } -div.cdm.expandable.active div.header span.titleWrap { +.cdm.expandable.active div.header span.titleWrap { white-space: normal; } -div.cdm.expandable div.header a.title { +.cdm.expandable .header a.title { font-weight: 600; color: #ccc; font-size: 14px; @@ -1466,32 +1520,32 @@ div.cdm.expandable div.header a.title { 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.cdm.expandable.Unread div.header a.title { +.cdm.expandable.Unread div.header a.title { color: black; } -div.cdm.expandable.active .collapse i.material-icons { +.cdm.expandable.active .collapse i.material-icons { color: #b87d2c; cursor: pointer; } -div.cdm.expandable.active .excerpt { +.cdm.expandable.active .excerpt { display: none; } -div.cdm.expandable.active div.header a.title { +.cdm.expandable.active div.header a.title { color: #b87d2c; font-size: 16px; 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.cdm.expandable:not(.active) { +.cdm.expandable:not(.active) { cursor: pointer; } -div.cdm.expandable:not(.active) .content, -div.cdm.expandable:not(.active) .collapse { +.cdm.expandable:not(.active) .content, +.cdm.expandable:not(.active) .collapse { display: none; } -div.cdm.expandable.active .header[data-is-stuck], -div.cdm.expanded .header[data-is-stuck] { +.cdm.expandable.active .header[data-is-stuck], +.cdm.expanded .header[data-is-stuck] { box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); border: 0 solid #222; border-bottom-width: 1px; @@ -1768,7 +1822,8 @@ body.ttrss_utility fieldset > label.checkbox { } .flat .dijitToolbar { font-size: 13px; - padding: 0px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 0; } .flat .dijitToolbar .dijitTextBox .dijitInputContainer .dijitInputInner { line-height: 10px; @@ -1791,12 +1846,13 @@ body.ttrss_utility fieldset > label.checkbox { .flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel { padding: 4px 8px; font-size: 13px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } .flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { color: #d29745; } .flat .dijitMenu .dijitMenuItem td { - padding: 0px; + padding: 0; } .flat .dijitCheckBox { margin: 1px; @@ -1806,6 +1862,10 @@ body.ttrss_utility fieldset > label.checkbox { content: "\f00c"; color: white; } +.flat .dijitTab, +.flat .dijitAccordionTitle { + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; +} .flat .dijitTab i.material-icons, .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons { color: #b87d2c; @@ -1855,6 +1915,7 @@ body.ttrss_utility fieldset > label.checkbox { .flat .dijitTree .dijitTreeRow { overflow: hidden; -moz-user-select: none; + user-select: none; text-overflow: ellipsis; } .flat label.dijitButton { @@ -2022,7 +2083,7 @@ body.ttrss_zoom div.post div.header { border: 0px solid #222; border-bottom-width: 1px; background: #333; - font-size: 12px; + font-size: 13px; color: #ccc; } body.ttrss_zoom div.post div.header .row { @@ -2032,30 +2093,30 @@ body.ttrss_zoom div.post div.header .row { align-items: center; justify-content: space-between; } -body.ttrss_zoom div.post div.content { +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; } -body.ttrss_zoom div.post div.content img, -body.ttrss_zoom div.post div.content video { +body.ttrss_zoom div.post .content img, +body.ttrss_zoom div.post .content video { max-width: 760px; height: auto; } -body.ttrss_zoom div.post div.content blockquote { +body.ttrss_zoom div.post .content blockquote { margin: 5px 0px 5px 0px; color: #ccc; padding-left: 10px; border: 0px solid #222; border-left-width: 4px; } -body.ttrss_zoom div.post div.content code { +body.ttrss_zoom div.post .content code { color: #009900; font-family: monospace; font-size: 12px; } -body.ttrss_zoom div.post div.content pre { +body.ttrss_zoom div.post .content pre { margin: 5px 0px 5px 0px; padding: 10px; color: #ccc; diff --git a/themes/night_blue.css b/themes/night_blue.css index 9520f5ca6..570fbbff5 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -16,67 +16,132 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { + display : grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); + background-color: @color-panel-bg; + grid-gap : 8px; + padding : 8px; + + #headlines-spacer, .whiteBox, .feed-title { + grid-column : 1 e("/") -1; + } + + .cdm.expanded { + // 2 because #headlines-spacer is the actual last child + &:nth-last-child(2):nth-child(odd) { + grid-column : 1 e("/") -1; + } + + .header, .content { + background : @default-bg; + border : 1px solid @border-default; + overflow : hidden; + } + + .content { + border-top-width : 0; + padding : 0 4px 4px 4px; + } + + .header[data-is-stuck] { + top : -8px; + border-bottom-width: 1px; + } + + .header { + border-bottom-width : 0; + padding : 4px; + + .icon-grid-span { + display : inline; + } + + .feed { + display : none; + } + } + + .footer { + border : 0; + padding : 4px; + + .left, .right { + white-space: nowrap; + } + + .left { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content-inner, .intermediate { + word-break: break-all; + } + } + }*/ } body.ttrss_main :focus { outline: none; } -body.ttrss_main div.post { - padding: 0px; +body.ttrss_main .post { + padding: 0; font-size: 13px; } -body.ttrss_main div.post div.header { +body.ttrss_main .post .header { padding: 5px; color: #909090; border: 0px solid #222; border-bottom-width: 1px; background: #222; } -body.ttrss_main div.post div.header .left, -body.ttrss_main div.post div.header .right { +body.ttrss_main .post .header .left, +body.ttrss_main .post .header .right { display: flex; } -body.ttrss_main div.post div.header .row { +body.ttrss_main .post .header .row { display: flex; margin-bottom: 4px; flex-wrap: nowrap; align-items: center; justify-content: space-between; } -body.ttrss_main div.post div.header .comments { +body.ttrss_main .post .header .comments { flex-grow: 2; } -body.ttrss_main div.post div.header .date { +body.ttrss_main .post .header .date { white-space: nowrap; } -body.ttrss_main div.post div.header img, -body.ttrss_main div.post div.header i.material-icons { +body.ttrss_main .post .header img, +body.ttrss_main .post .header i.material-icons { margin: 0px 4px; vertical-align: middle; color: #999; } -body.ttrss_main div.post div.header .title { +body.ttrss_main .post .header .title { flex-grow: 2; font-size: 15px; 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; } -body.ttrss_main div.post div.content { +body.ttrss_main .post div.content { padding: 10px; font-size: 16px; } -body.ttrss_main div.post div.content img, -body.ttrss_main div.post div.content video { +body.ttrss_main .post div.content img, +body.ttrss_main .post div.content video { border-width: 0px; max-width: 98%; height: auto; } -body.ttrss_main div.post div.content div.embed-responsive { +body.ttrss_main .post div.content div.embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -body.ttrss_main div.post div.content div.embed-responsive iframe { +body.ttrss_main .post div.content div.embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -541,10 +606,11 @@ body.ttrss_main .exception-contents textarea { height: 200px; font-size: 11px; } +body.ttrss_main #headlines-wrap-inner, body.ttrss_main #content-wrap { - padding: 0px; - border-width: 0px; - margin: 0px; + padding: 0; + border: 0; + margin: 0; } body.ttrss_main #feeds-holder { padding: 0px; @@ -640,109 +706,122 @@ body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore { font-weight: bold; color: #257aa7; } -body.ttrss_main #headlines-wrap-inner { - padding: 0px; - margin: 0px; - border-width: 0px; -} -body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { - display: none; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); - background-color: #222; - grid-gap: 8px; padding: 8px; + grid-gap: 8px; + background-color: #222; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] #headlines-spacer, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .whiteBox, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .feed-title { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(2):nth-child(odd), +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *:nth-last-child(1) { grid-column: 1 / -1; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded:nth-last-child(2):nth-child(odd) { - grid-column: 1 / -1; -} -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { background: #333; border: 1px solid #222; overflow: hidden; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content { border-top-width: 0; padding: 0 4px 4px 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header { border-bottom-width: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .icon-grid-span { display: inline; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header .feed { display: none; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer { border: 0; padding: 4px; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .right { white-space: nowrap; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .footer .left { overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, -body.ttrss_main #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner, +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate { word-break: break-all; } body.ttrss_main #headlines-frame { - padding: 0px; - border: 0px #222; - margin-top: 0px; + padding: 0; + border: 0; + margin-top: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); + transform: translateZ(0); -webkit-backface-visibility: hidden; + backface-visibility: hidden; } -body.ttrss_main #headlines-frame div.feed-title { +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { + display: none; +} +body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { + height: 100vh; +} +body.ttrss_main #headlines-frame #headlines-spacer { + margin-left: 1px; + text-align: center; + color: #ccc; + font-size: 11px; + font-style: italic; +} +body.ttrss_main #headlines-frame #headlines-spacer a, +body.ttrss_main #headlines-frame #headlines-spacer span { + color: #ccc; + padding: 10px; + display: block; +} +body.ttrss_main #headlines-frame #headlines-spacer a:hover { + color: #257aa7; +} +body.ttrss_main #headlines-frame .feed-title { border: 0px solid #257aa7; border-bottom-width: 1px; padding: 5px 8px; } -body.ttrss_main #headlines-frame div.feed-title a.title { +body.ttrss_main #headlines-frame .feed-title a.title { color: #ccc; font-weight: bold; } -body.ttrss_main #headlines-frame div.feed-title a { +body.ttrss_main #headlines-frame .feed-title a { color: #ccc; } -body.ttrss_main #headlines-frame div.feed-title a:hover { +body.ttrss_main #headlines-frame .feed-title a:hover { color: #257aa7; } body.ttrss_main #headlines-frame span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } body.ttrss_main #toolbar-frame_splitter { display: none; } body.ttrss_main #toolbar-frame { - padding: 0px; - margin: 0px; - border-width: 0px; + padding: 0; + margin: 0; + border: 0; white-space: nowrap; - font-size: 12px; + font-size: 13px; } body.ttrss_main #toolbar-frame #toolbar { background: white; - border: 0px solid #222; + border: 0 solid #222; border-bottom-width: 1px; padding-left: 4px; height: 32px; @@ -750,7 +829,7 @@ body.ttrss_main #toolbar-frame #toolbar { flex-direction: row; flex-wrap: nowrap; color: #ccc; - font-size: 12px; + font-size: 13px; align-items: center; } body.ttrss_main #toolbar-frame #toolbar .dijitSelect, @@ -770,7 +849,7 @@ body.ttrss_main #toolbar-frame #toolbar i { margin: 0 4px; } body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines { - font-size: 12px; + font-size: 13px; background: transparent; padding-right: 4px; flex-grow: 2; @@ -805,7 +884,7 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border-width: 0px; + border: 0; text-align: right; color: #ccc; padding: 5px 5px 0px 0px; @@ -831,9 +910,8 @@ body.ttrss_main #header i { margin: 0 4px; } body.ttrss_main #content-insert { - padding: 0px; - border-color: #222; - border-width: 0px; + padding: 0; + border: 0; line-height: 1.5; overflow: auto; -webkit-overflow-scrolling: touch; @@ -866,25 +944,6 @@ body.ttrss_main .player:hover { background: #222; cursor: pointer; } -body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { - height: 100vh; -} -body.ttrss_main #headlines-spacer { - margin-left: 1px; - text-align: center; - color: #ccc; - font-size: 11px; - font-style: italic; -} -body.ttrss_main #headlines-spacer a, -body.ttrss_main #headlines-spacer span { - color: #ccc; - padding: 10px; - display: block; -} -body.ttrss_main #headlines-spacer a:hover { - color: #257aa7; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; @@ -1178,6 +1237,8 @@ body.ttrss_main .text-muted, body.ttrss_utility .text-muted { color: #ccc; } +body.ttrss_main .text-small, +body.ttrss_utility .text-small, body.ttrss_main .small, body.ttrss_utility .small { font-size: 11px; @@ -1230,11 +1291,6 @@ video::-webkit-media-controls-overlay-play-button { color : @color-icon; }*/ } -.cdm .header { - position: sticky; - top: 0; - z-index: 3; -} .cdm .header, .cdm .footer { display: flex; @@ -1244,13 +1300,16 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header img, .cdm .footer img, .cdm .footer i.material-icons { - margin: 0px 4px; + margin: 0 4px; vertical-align: middle; } .cdm .header-sticky-guard { height: 0; } .cdm .header { + position: sticky; + top: 0; + z-index: 3; align-items: center; } .cdm .header > * { @@ -1273,7 +1332,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header .titleWrap { flex-grow: 2; } -.cdm .header span.updated { +.cdm .header .updated { color: #ccc; font-weight: normal; font-size: 11px; @@ -1282,6 +1341,30 @@ video::-webkit-media-controls-overlay-play-button { .cdm .header input { margin: 0px 4px; } +.cdm .header .feed { + float: right; + font-weight: normal; + font-style: italic; +} +.cdm .header .feed a { + border-radius: 4px; + display: inline-block; + padding: 1px 4px 1px 4px; +} +.cdm .header .feed, +.cdm .header .feed a { + vertical-align: middle; + color: #ccc; + font-weight: normal; + font-style: italic; + font-size: 11px; +} +.cdm .header .author { + white-space: nowrap; + color: #ccc; + font-size: 11px; + font-weight: normal; +} .cdm .footer { height: 30px; padding-left: 5px; @@ -1299,6 +1382,7 @@ video::-webkit-media-controls-overlay-play-button { .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; @@ -1320,10 +1404,6 @@ video::-webkit-media-controls-overlay-play-button { width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1336,10 +1416,10 @@ video::-webkit-media-controls-overlay-play-button { border-bottom-width: 1px; } .cdm.expanded > hr { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } -div.cdm.expanded div.header a.title { +.cdm.expanded .header a.title { font-size: 16px; color: #999; font-weight: 600; @@ -1347,58 +1427,43 @@ div.cdm.expanded div.header a.title { 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.cdm.expanded.active div.header a.title { +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; +} +.cdm.expanded.active .header .title { color: #257aa7; } -div.cdm.expanded.Unread div.header a.title { +.cdm.expanded.Unread .header .title { color: black; } -div.cdm.expanded div.content { +.cdm.expanded .content { color: #ccc; } -div.cdm.expanded.Unread div.content { - color: black; -} -div.cdm.active div.content { - color: black; -} -div.cdm.vgrlf .feed { +.cdm.vgrlf .feed { display: none; } -.cdm div.feed-title { +.cdm .feed-title { border: 0px solid #257aa7; border-bottom-width: 1px; padding: 5px 3px 5px 5px; } -.cdm div.feed-title a.title { +.cdm .feed-title a.title { color: #ccc; font-weight: bold; } -.cdm div.feed-title a { +.cdm .feed-title a { color: #ccc; } -.cdm div.feed-title a:hover { +.cdm .feed-title a:hover { color: #257aa7; } -.cdm div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; -} -.cdm div.header div.feed, -.cdm div.header div.feed a { - vertical-align: middle; - color: #ccc; - font-weight: normal; - font-style: italic; - font-size: 11px; -} -.cdm div.content-inner div.embed-responsive { +.cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm div.content-inner div.embed-responsive iframe { +.cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; height: 100%; @@ -1407,17 +1472,6 @@ div.cdm.vgrlf .feed { top: 0; width: 100%; } -.cdm div.header span.author { - white-space: nowrap; - color: #ccc; - font-size: 11px; - font-weight: normal; -} -.cdm .feed a { - border-radius: 4px; - display: inline-block; - padding: 1px 4px 1px 4px; -} .cdm.expandable { background-color: #222; border: 0px solid #222; @@ -1455,10 +1509,10 @@ div.cdm.vgrlf .feed { .cdm.expandable.active { background: white ! important; } -div.cdm.expandable.active div.header span.titleWrap { +.cdm.expandable.active div.header span.titleWrap { white-space: normal; } -div.cdm.expandable div.header a.title { +.cdm.expandable .header a.title { font-weight: 600; color: #ccc; font-size: 14px; @@ -1466,32 +1520,32 @@ div.cdm.expandable div.header a.title { 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.cdm.expandable.Unread div.header a.title { +.cdm.expandable.Unread div.header a.title { color: black; } -div.cdm.expandable.active .collapse i.material-icons { +.cdm.expandable.active .collapse i.material-icons { color: #257aa7; cursor: pointer; } -div.cdm.expandable.active .excerpt { +.cdm.expandable.active .excerpt { display: none; } -div.cdm.expandable.active div.header a.title { +.cdm.expandable.active div.header a.title { color: #257aa7; font-size: 16px; 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.cdm.expandable:not(.active) { +.cdm.expandable:not(.active) { cursor: pointer; } -div.cdm.expandable:not(.active) .content, -div.cdm.expandable:not(.active) .collapse { +.cdm.expandable:not(.active) .content, +.cdm.expandable:not(.active) .collapse { display: none; } -div.cdm.expandable.active .header[data-is-stuck], -div.cdm.expanded .header[data-is-stuck] { +.cdm.expandable.active .header[data-is-stuck], +.cdm.expanded .header[data-is-stuck] { box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); border: 0 solid #222; border-bottom-width: 1px; @@ -1768,7 +1822,8 @@ body.ttrss_utility fieldset > label.checkbox { } .flat .dijitToolbar { font-size: 13px; - padding: 0px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 0; } .flat .dijitToolbar .dijitTextBox .dijitInputContainer .dijitInputInner { line-height: 10px; @@ -1791,12 +1846,13 @@ body.ttrss_utility fieldset > label.checkbox { .flat .dijitMenu .dijitMenuItem .dijitMenuItemLabel { padding: 4px 8px; font-size: 13px; + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } .flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { color: #2e99d1; } .flat .dijitMenu .dijitMenuItem td { - padding: 0px; + padding: 0; } .flat .dijitCheckBox { margin: 1px; @@ -1806,6 +1862,10 @@ body.ttrss_utility fieldset > label.checkbox { content: "\f00c"; color: white; } +.flat .dijitTab, +.flat .dijitAccordionTitle { + font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; +} .flat .dijitTab i.material-icons, .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons { color: #257aa7; @@ -1855,6 +1915,7 @@ body.ttrss_utility fieldset > label.checkbox { .flat .dijitTree .dijitTreeRow { overflow: hidden; -moz-user-select: none; + user-select: none; text-overflow: ellipsis; } .flat label.dijitButton { @@ -2022,7 +2083,7 @@ body.ttrss_zoom div.post div.header { border: 0px solid #222; border-bottom-width: 1px; background: #333; - font-size: 12px; + font-size: 13px; color: #ccc; } body.ttrss_zoom div.post div.header .row { @@ -2032,30 +2093,30 @@ body.ttrss_zoom div.post div.header .row { align-items: center; justify-content: space-between; } -body.ttrss_zoom div.post div.content { +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; } -body.ttrss_zoom div.post div.content img, -body.ttrss_zoom div.post div.content video { +body.ttrss_zoom div.post .content img, +body.ttrss_zoom div.post .content video { max-width: 760px; height: auto; } -body.ttrss_zoom div.post div.content blockquote { +body.ttrss_zoom div.post .content blockquote { margin: 5px 0px 5px 0px; color: #ccc; padding-left: 10px; border: 0px solid #222; border-left-width: 4px; } -body.ttrss_zoom div.post div.content code { +body.ttrss_zoom div.post .content code { color: #009900; font-family: monospace; font-size: 12px; } -body.ttrss_zoom div.post div.content pre { +body.ttrss_zoom div.post .content pre { margin: 5px 0px 5px 0px; padding: 10px; color: #ccc;