diff --git a/js/App.js b/js/App.js index e2da5433b..a9d796968 100644 --- a/js/App.js +++ b/js/App.js @@ -872,41 +872,44 @@ const App = { }, setWidescreen: function(wide) { const article_id = Article.getActive(); + const headlines_frame = App.byId("headlines-frame"); + const content_insert = dijit.byId("content-insert"); + + // TODO: setStyle stuff should probably be handled by CSS if (wide) { dijit.byId("headlines-wrap-inner").attr("design", 'sidebar'); - dijit.byId("content-insert").attr("region", "trailing"); + content_insert.attr("region", "trailing"); - dijit.byId("content-insert").domNode.setStyle({width: '50%', + content_insert.domNode.setStyle({width: '50%', height: 'auto', borderTopWidth: '0px' }); if (parseInt(Cookie.get("ttrss_ci_width")) > 0) { - dijit.byId("content-insert").domNode.setStyle( + content_insert.domNode.setStyle( {width: Cookie.get("ttrss_ci_width") + "px" }); } - App.byId("headlines-frame").setStyle({ borderBottomWidth: '0px' }); - App.byId("headlines-frame").addClassName("wide"); + headlines_frame.setStyle({ borderBottomWidth: '0px' }); } else { - dijit.byId("content-insert").attr("region", "bottom"); + content_insert.attr("region", "bottom"); - dijit.byId("content-insert").domNode.setStyle({width: 'auto', + content_insert.domNode.setStyle({width: 'auto', height: '50%', borderTopWidth: '0px'}); if (parseInt(Cookie.get("ttrss_ci_height")) > 0) { - dijit.byId("content-insert").domNode.setStyle( + content_insert.domNode.setStyle( {height: Cookie.get("ttrss_ci_height") + "px" }); } - App.byId("headlines-frame").setStyle({ borderBottomWidth: '1px' }); - App.byId("headlines-frame").removeClassName("wide"); - + headlines_frame.setStyle({ borderBottomWidth: '1px' }); } + headlines_frame.setAttribute("data-is-wide-screen", wide ? "true" : "false"); + Article.close(); if (article_id) Article.view(article_id); diff --git a/themes/compact.css b/themes/compact.css index cec955555..3f3ecd846 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -15,69 +15,14 @@ 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; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; - #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; - } + li { + margin : 0; + padding : 0; } }*/ } @@ -90,8 +35,8 @@ body.ttrss_main .post { } body.ttrss_main .post .header { padding: 5px; - color: #909090; - border: 0px solid #ddd; + color: #555; + border: 0 solid #ddd; border-bottom-width: 1px; background: #f5f5f5; } @@ -282,6 +227,10 @@ body.ttrss_main .hl .right { display: flex; align-items: center; } +body.ttrss_main .hl .left img, +body.ttrss_main .hl .right img { + margin: 0 4px; +} body.ttrss_main .hl .left i.material-icons, body.ttrss_main .hl .right i.material-icons { margin-left: 2px; @@ -290,25 +239,28 @@ body.ttrss_main .hl .right i.material-icons { user-select: none; font-size: 21px; } +body.ttrss_main .hl .left input { + margin: 0 4px; +} +body.ttrss_main .hl .right { + text-align: right; +} body.ttrss_main .hl .right i.material-icons { color: #777; } -body.ttrss_main .hl div.title { +body.ttrss_main .hl .title { cursor: pointer; flex-grow: 2; overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main .hl span.author { +body.ttrss_main .hl .author { white-space: nowrap; color: #555; font-size: 11px; font-weight: normal; } -body.ttrss_main .hl div.right { - text-align: right; -} -body.ttrss_main .hl span.feed a { +body.ttrss_main .hl .feed a { border-radius: 4px; display: inline-block; padding: 1px 4px; @@ -317,25 +269,18 @@ body.ttrss_main .hl span.feed a { font-weight: normal; color: #555; } -body.ttrss_main .hl span.feed a:hover { +body.ttrss_main .hl .feed a:hover { color: #257aa7; } -body.ttrss_main .hl span.updated { +body.ttrss_main .hl .updated { color: #555; text-align: right; font-size: 11px; padding-left: 10px; } -body.ttrss_main .hl span.updated div { +body.ttrss_main .hl .updated div { display: inline-block; } -body.ttrss_main .hl div.left input { - margin: 0px 4px; -} -body.ttrss_main .hl div.left img, -body.ttrss_main .hl div.right img { - margin: 0px 4px; -} body.ttrss_main .hl div.title a { font-weight: 600; text-rendering: optimizelegibility; @@ -352,10 +297,10 @@ body.ttrss_main .hl.vgrlf .feed { body.ttrss_main .hl.Unread { background: white; } -body.ttrss_main .hl.Unread div.title a { +body.ttrss_main .hl.Unread .title a { color: black; } -body.ttrss_main .hl.active div.title a { +body.ttrss_main .hl.active .title a { color: #257aa7; /* text-shadow : 1px 1px 2px #fff; */ } @@ -377,9 +322,6 @@ body.ttrss_main .hl.active span, body.ttrss_main .hl.Selected span { color: white; } -body.ttrss_main .hl.Grayed { - color: #909090; -} body.ttrss_main #content-insert blockquote, body.ttrss_main #headlines-frame blockquote, body.ttrss_main .dijitContentPane blockquote { @@ -436,45 +378,6 @@ body.ttrss_main i.pub-pic { cursor: pointer; color: #ccc; } -body.ttrss_main div.errorExplained { - border: 1px solid #ddd; - margin: 5px 0px 5px 0px; - padding: 5px; -} -body.ttrss_main ul.browseFeedList { - height: 300px; - width: 100%; - overflow: auto; - border-width: 0px 1px 1px 1px; - border-color: #ddd; - border-style: solid; - margin: 0px 0px 5px 0px; - background-color: white; - list-style-type: none; - padding: 0px; -} -body.ttrss_main ul.browseFeedList li { - display: flex; - align-items: center; -} -body.ttrss_main ul.browseFeedList li > * { - margin: 2px; -} -body.ttrss_main .browseFeedList span.subscribers { - color: #808080; -} -body.ttrss_main ul.compact { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main ul.compact li { - margin: 0px; - padding: 0px; -} -body.ttrss_main .noborder { - border-width: 0px; -} body.ttrss_main #overlay { background: white; left: 0; @@ -488,11 +391,6 @@ body.ttrss_main #overlay_inner { font-weight: bold; margin: 1em; } -body.ttrss_main div.loadingPrompt { - padding: 1em; - text-align: center; - font-weight: bold; -} body.ttrss_main div.whiteBox { margin-left: 1px; text-align: center; @@ -501,13 +399,6 @@ body.ttrss_main div.whiteBox { border: 0px solid #ddd; border-bottom-width: 1px; } -body.ttrss_main div#headlines-frame.wide .title { - overflow: visible; - white-space: normal; -} -body.ttrss_main div#headlines-frame.wide .hl .feed { - display: none; -} body.ttrss_main .dijitDialog header, body.ttrss_main .dijitDialog .dlgSec, body.ttrss_main .dijitDialog .dlgSecHoriz { @@ -592,11 +483,6 @@ body.ttrss_main div#cmdline { padding: 3px 5px 3px 5px; z-index: 5; } -body.ttrss_main #feed_browser_spinner { - vertical-align: middle; - height: 18px; - width: 18px; -} body.ttrss_main .exception-contents h3 { color: red; } @@ -612,8 +498,8 @@ body.ttrss_main #content-wrap { margin: 0; } body.ttrss_main #feeds-holder { - padding: 0px; - border: 0px solid #ddd; + padding: 0; + border: 0 solid #ddd; overflow: hidden; background: #f5f5f5; box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); @@ -625,16 +511,6 @@ body.ttrss_main #feeds-holder #feedTree { text-rendering: optimizelegibility; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } -body.ttrss_main #feeds-holder #feedTree .counterNode.aux, -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - background: #f5f5f5; - color: #6f6f6f; - border-color: #dcdcdc; -} -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - border-color: #257aa7; - background: #ffffff; -} body.ttrss_main #feeds-holder #feedTree .counterNode { font-weight: bold; display: none; @@ -653,6 +529,16 @@ body.ttrss_main #feeds-holder #feedTree .counterNode { min-width: 23px; height: 14px; } +body.ttrss_main #feeds-holder #feedTree .counterNode.aux, +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + background: #f5f5f5; + color: #6f6f6f; + border-color: #dcdcdc; +} +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + border-color: #257aa7; + background: #ffffff; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeRow[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread { background-color: #3ea447; border-color: #307f37; @@ -712,6 +598,13 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr grid-gap: 8px; background-color: #f5f5f5; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > * { + /* 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 + */ +} 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; @@ -772,6 +665,16 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { height: 100vh; } +body.ttrss_main #headlines-frame .dijitCheckBox { + margin-right: 4px; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .title { + overflow: visible; + white-space: normal; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .hl .feed { + display: none; +} body.ttrss_main #headlines-frame #headlines-spacer { margin-left: 1px; text-align: center; @@ -834,7 +737,7 @@ body.ttrss_main #toolbar-frame #toolbar { body.ttrss_main #toolbar-frame #toolbar .dijitSelect, body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode, body.ttrss_main #toolbar-frame #toolbar .dijitComboButton .dijitButtonNode { - border: 0px; + border: 0; } body.ttrss_main #toolbar-frame #toolbar i.net-alert, body.ttrss_main #toolbar-frame #toolbar .left i.icon-error { @@ -883,14 +786,14 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border: 0; text-align: right; color: #555; - padding: 5px 5px 0px 0px; - margin: 0px; + padding: 5px 5px 0 0px; position: absolute; - right: 0px; - top: 0px; + border: 0; + margin: 0; + right: 0; + top: 0; z-index: 5; } body.ttrss_main #header i.net-alert, @@ -923,40 +826,11 @@ body.ttrss_main img.icon { vertical-align: middle; display: inline-block; } -body.ttrss_main .player { - display: inline-block; - color: #555; - font-size: 11px; - font-family: sans-serif; - border: 1px solid #555; - padding: 0px 4px 0px 4px; - margin: 0px 2px 0px 2px; - width: 50px; - text-align: center; - background: white; -} -body.ttrss_main .player.playing { - color: #00c000; - border-color: #00c000; -} -body.ttrss_main .player:hover { - background: #f5f5f5; - cursor: pointer; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; margin: 0; padding: 0; - /*max-height : 100px; - overflow : auto; - border-style : solid; - border-color : @border-default; - border-width : 1px 1px 1px 1px; - background-color : @default-bg; - margin : 0px 0px 5px 0px; - padding : 4px; - min-height : 16px;*/ } body.ttrss_main ul#filterDlg_Matches li, body.ttrss_main ul#filterDlg_Actions li { @@ -992,9 +866,6 @@ body.ttrss_main span.highlight { background-color: #ffff00; color: #cc90cc; } -body.ttrss_main #headlines-frame .dijitCheckBox { - margin-right: 4px; -} body.ttrss_main #feedEditDlg img.feedIcon { border: 1px solid #ccc; padding: 5px; @@ -1129,6 +1000,12 @@ body.ttrss_main ul.list-unstyled { body.ttrss_main .text-center { text-align: center; } +body.ttrss_main .text-right { + text-align: right; +} +body.ttrss_main .text-left { + text-align: left; +} body.ttrss_main #prefFilterTestResultList .preview { margin: 8px; } @@ -1138,11 +1015,39 @@ body.ttrss_main #prefFilterTestResultList .title { body.ttrss_main #prefFilterTestResultList .feed { color: #257aa7; } +body.ttrss_main, +body.ttrss_utility { + /*div.autocomplete { + position : absolute; + width : 250px; + background-color : @default-bg; + border :1px solid @border-default; + margin : 0px; + padding : 0px; + + ul { + list-style-type : none; + margin : 0px; + padding : 0px; + } + + ul li.selected { + background-color : darken(@default-bg, 10%); + } + + ul li { + list-style-type : none; + display : block; + margin : 0; + padding : 2px; + cursor : pointer; + } + }*/ +} body.ttrss_main .alert, body.ttrss_utility .alert { padding: 8px 35px 8px 14px; margin-bottom: 10px; - /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; @@ -1183,6 +1088,16 @@ body.ttrss_main .text-warning, body.ttrss_utility .text-warning { color: #a47e3c; } +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; +} body.ttrss_main .alert, body.ttrss_utility .alert, body.ttrss_main .alert h4, @@ -1232,43 +1147,6 @@ body.ttrss_utility hr { border: 0px solid #ccc; border-bottom-width: 1px; } -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; -} -body.ttrss_main div.autocomplete, -body.ttrss_utility div.autocomplete { - position: absolute; - width: 250px; - background-color: white; - border: 1px solid #ddd; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul, -body.ttrss_utility div.autocomplete ul { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul li.selected, -body.ttrss_utility div.autocomplete ul li.selected { - background-color: #e6e6e6; -} -body.ttrss_main div.autocomplete ul li, -body.ttrss_utility div.autocomplete ul li { - list-style-type: none; - display: block; - margin: 0; - padding: 2px; - cursor: pointer; -} ::selection { background: #257aa7; color: white; @@ -1282,9 +1160,9 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ .cdm { /*i.material-icons { color : @color-icon; diff --git a/themes/compact_night.css b/themes/compact_night.css index f16965d1a..22be462c7 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -15,69 +15,14 @@ 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; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; - #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; - } + li { + margin : 0; + padding : 0; } }*/ } @@ -90,8 +35,8 @@ body.ttrss_main .post { } body.ttrss_main .post .header { padding: 5px; - color: #909090; - border: 0px solid #222; + color: #ccc; + border: 0 solid #222; border-bottom-width: 1px; background: #222; } @@ -282,6 +227,10 @@ body.ttrss_main .hl .right { display: flex; align-items: center; } +body.ttrss_main .hl .left img, +body.ttrss_main .hl .right img { + margin: 0 4px; +} body.ttrss_main .hl .left i.material-icons, body.ttrss_main .hl .right i.material-icons { margin-left: 2px; @@ -290,25 +239,28 @@ body.ttrss_main .hl .right i.material-icons { user-select: none; font-size: 21px; } +body.ttrss_main .hl .left input { + margin: 0 4px; +} +body.ttrss_main .hl .right { + text-align: right; +} body.ttrss_main .hl .right i.material-icons { color: #999; } -body.ttrss_main .hl div.title { +body.ttrss_main .hl .title { cursor: pointer; flex-grow: 2; overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main .hl span.author { +body.ttrss_main .hl .author { white-space: nowrap; color: #ccc; font-size: 11px; font-weight: normal; } -body.ttrss_main .hl div.right { - text-align: right; -} -body.ttrss_main .hl span.feed a { +body.ttrss_main .hl .feed a { border-radius: 4px; display: inline-block; padding: 1px 4px; @@ -317,25 +269,18 @@ body.ttrss_main .hl span.feed a { font-weight: normal; color: #ccc; } -body.ttrss_main .hl span.feed a:hover { +body.ttrss_main .hl .feed a:hover { color: #b87d2c; } -body.ttrss_main .hl span.updated { +body.ttrss_main .hl .updated { color: #ccc; text-align: right; font-size: 11px; padding-left: 10px; } -body.ttrss_main .hl span.updated div { +body.ttrss_main .hl .updated div { display: inline-block; } -body.ttrss_main .hl div.left input { - margin: 0px 4px; -} -body.ttrss_main .hl div.left img, -body.ttrss_main .hl div.right img { - margin: 0px 4px; -} body.ttrss_main .hl div.title a { font-weight: 600; text-rendering: optimizelegibility; @@ -352,10 +297,10 @@ body.ttrss_main .hl.vgrlf .feed { body.ttrss_main .hl.Unread { background: white; } -body.ttrss_main .hl.Unread div.title a { +body.ttrss_main .hl.Unread .title a { color: black; } -body.ttrss_main .hl.active div.title a { +body.ttrss_main .hl.active .title a { color: #b87d2c; /* text-shadow : 1px 1px 2px #fff; */ } @@ -377,9 +322,6 @@ body.ttrss_main .hl.active span, body.ttrss_main .hl.Selected span { color: white; } -body.ttrss_main .hl.Grayed { - color: #909090; -} body.ttrss_main #content-insert blockquote, body.ttrss_main #headlines-frame blockquote, body.ttrss_main .dijitContentPane blockquote { @@ -436,45 +378,6 @@ body.ttrss_main i.pub-pic { cursor: pointer; color: #ccc; } -body.ttrss_main div.errorExplained { - border: 1px solid #222; - margin: 5px 0px 5px 0px; - padding: 5px; -} -body.ttrss_main ul.browseFeedList { - height: 300px; - width: 100%; - overflow: auto; - border-width: 0px 1px 1px 1px; - border-color: #222; - border-style: solid; - margin: 0px 0px 5px 0px; - background-color: white; - list-style-type: none; - padding: 0px; -} -body.ttrss_main ul.browseFeedList li { - display: flex; - align-items: center; -} -body.ttrss_main ul.browseFeedList li > * { - margin: 2px; -} -body.ttrss_main .browseFeedList span.subscribers { - color: #808080; -} -body.ttrss_main ul.compact { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main ul.compact li { - margin: 0px; - padding: 0px; -} -body.ttrss_main .noborder { - border-width: 0px; -} body.ttrss_main #overlay { background: #333; left: 0; @@ -488,11 +391,6 @@ body.ttrss_main #overlay_inner { font-weight: bold; margin: 1em; } -body.ttrss_main div.loadingPrompt { - padding: 1em; - text-align: center; - font-weight: bold; -} body.ttrss_main div.whiteBox { margin-left: 1px; text-align: center; @@ -501,13 +399,6 @@ body.ttrss_main div.whiteBox { border: 0px solid #222; border-bottom-width: 1px; } -body.ttrss_main div#headlines-frame.wide .title { - overflow: visible; - white-space: normal; -} -body.ttrss_main div#headlines-frame.wide .hl .feed { - display: none; -} body.ttrss_main .dijitDialog header, body.ttrss_main .dijitDialog .dlgSec, body.ttrss_main .dijitDialog .dlgSecHoriz { @@ -592,11 +483,6 @@ body.ttrss_main div#cmdline { padding: 3px 5px 3px 5px; z-index: 5; } -body.ttrss_main #feed_browser_spinner { - vertical-align: middle; - height: 18px; - width: 18px; -} body.ttrss_main .exception-contents h3 { color: red; } @@ -612,8 +498,8 @@ body.ttrss_main #content-wrap { margin: 0; } body.ttrss_main #feeds-holder { - padding: 0px; - border: 0px solid #222; + padding: 0; + border: 0 solid #222; overflow: hidden; background: #222; box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); @@ -625,16 +511,6 @@ body.ttrss_main #feeds-holder #feedTree { text-rendering: optimizelegibility; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } -body.ttrss_main #feeds-holder #feedTree .counterNode.aux, -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - background: #222; - color: #e6e6e6; - border-color: #080808; -} -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - border-color: #b87d2c; - background: #ffffff; -} body.ttrss_main #feeds-holder #feedTree .counterNode { font-weight: bold; display: none; @@ -653,6 +529,16 @@ body.ttrss_main #feeds-holder #feedTree .counterNode { min-width: 23px; height: 14px; } +body.ttrss_main #feeds-holder #feedTree .counterNode.aux, +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + background: #222; + color: #e6e6e6; + border-color: #080808; +} +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + border-color: #b87d2c; + background: #ffffff; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeRow[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread { background-color: #3ea447; border-color: #307f37; @@ -712,6 +598,13 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr grid-gap: 8px; background-color: #222; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > * { + /* 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 + */ +} 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; @@ -772,6 +665,16 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { height: 100vh; } +body.ttrss_main #headlines-frame .dijitCheckBox { + margin-right: 4px; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .title { + overflow: visible; + white-space: normal; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .hl .feed { + display: none; +} body.ttrss_main #headlines-frame #headlines-spacer { margin-left: 1px; text-align: center; @@ -834,7 +737,7 @@ body.ttrss_main #toolbar-frame #toolbar { body.ttrss_main #toolbar-frame #toolbar .dijitSelect, body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode, body.ttrss_main #toolbar-frame #toolbar .dijitComboButton .dijitButtonNode { - border: 0px; + border: 0; } body.ttrss_main #toolbar-frame #toolbar i.net-alert, body.ttrss_main #toolbar-frame #toolbar .left i.icon-error { @@ -883,14 +786,14 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border: 0; text-align: right; color: #ccc; - padding: 5px 5px 0px 0px; - margin: 0px; + padding: 5px 5px 0 0px; position: absolute; - right: 0px; - top: 0px; + border: 0; + margin: 0; + right: 0; + top: 0; z-index: 5; } body.ttrss_main #header i.net-alert, @@ -923,40 +826,11 @@ body.ttrss_main img.icon { vertical-align: middle; display: inline-block; } -body.ttrss_main .player { - display: inline-block; - color: #ccc; - font-size: 11px; - font-family: sans-serif; - border: 1px solid #ccc; - padding: 0px 4px 0px 4px; - margin: 0px 2px 0px 2px; - width: 50px; - text-align: center; - background: #333; -} -body.ttrss_main .player.playing { - color: #00c000; - border-color: #00c000; -} -body.ttrss_main .player:hover { - background: #222; - cursor: pointer; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; margin: 0; padding: 0; - /*max-height : 100px; - overflow : auto; - border-style : solid; - border-color : @border-default; - border-width : 1px 1px 1px 1px; - background-color : @default-bg; - margin : 0px 0px 5px 0px; - padding : 4px; - min-height : 16px;*/ } body.ttrss_main ul#filterDlg_Matches li, body.ttrss_main ul#filterDlg_Actions li { @@ -992,9 +866,6 @@ body.ttrss_main span.highlight { background-color: #ffff00; color: #cc90cc; } -body.ttrss_main #headlines-frame .dijitCheckBox { - margin-right: 4px; -} body.ttrss_main #feedEditDlg img.feedIcon { border: 1px solid #ccc; padding: 5px; @@ -1129,6 +1000,12 @@ body.ttrss_main ul.list-unstyled { body.ttrss_main .text-center { text-align: center; } +body.ttrss_main .text-right { + text-align: right; +} +body.ttrss_main .text-left { + text-align: left; +} body.ttrss_main #prefFilterTestResultList .preview { margin: 8px; } @@ -1138,11 +1015,39 @@ body.ttrss_main #prefFilterTestResultList .title { body.ttrss_main #prefFilterTestResultList .feed { color: #b87d2c; } +body.ttrss_main, +body.ttrss_utility { + /*div.autocomplete { + position : absolute; + width : 250px; + background-color : @default-bg; + border :1px solid @border-default; + margin : 0px; + padding : 0px; + + ul { + list-style-type : none; + margin : 0px; + padding : 0px; + } + + ul li.selected { + background-color : darken(@default-bg, 10%); + } + + ul li { + list-style-type : none; + display : block; + margin : 0; + padding : 2px; + cursor : pointer; + } + }*/ +} body.ttrss_main .alert, body.ttrss_utility .alert { padding: 8px 35px 8px 14px; margin-bottom: 10px; - /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; @@ -1183,6 +1088,16 @@ body.ttrss_main .text-warning, body.ttrss_utility .text-warning { color: #a47e3c; } +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; +} body.ttrss_main .alert, body.ttrss_utility .alert, body.ttrss_main .alert h4, @@ -1232,43 +1147,6 @@ body.ttrss_utility hr { border: 0px solid #ccc; border-bottom-width: 1px; } -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; -} -body.ttrss_main div.autocomplete, -body.ttrss_utility div.autocomplete { - position: absolute; - width: 250px; - background-color: #333; - border: 1px solid #222; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul, -body.ttrss_utility div.autocomplete ul { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul li.selected, -body.ttrss_utility div.autocomplete ul li.selected { - background-color: #1a1a1a; -} -body.ttrss_main div.autocomplete ul li, -body.ttrss_utility div.autocomplete ul li { - list-style-type: none; - display: block; - margin: 0; - padding: 2px; - cursor: pointer; -} ::selection { background: #b87d2c; color: #333; @@ -1282,9 +1160,9 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ .cdm { /*i.material-icons { color : @color-icon; diff --git a/themes/light.css b/themes/light.css index befd2e259..59c17a457 100644 --- a/themes/light.css +++ b/themes/light.css @@ -15,69 +15,14 @@ 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; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; - #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; - } + li { + margin : 0; + padding : 0; } }*/ } @@ -90,8 +35,8 @@ body.ttrss_main .post { } body.ttrss_main .post .header { padding: 5px; - color: #909090; - border: 0px solid #ddd; + color: #555; + border: 0 solid #ddd; border-bottom-width: 1px; background: #f5f5f5; } @@ -282,6 +227,10 @@ body.ttrss_main .hl .right { display: flex; align-items: center; } +body.ttrss_main .hl .left img, +body.ttrss_main .hl .right img { + margin: 0 4px; +} body.ttrss_main .hl .left i.material-icons, body.ttrss_main .hl .right i.material-icons { margin-left: 2px; @@ -290,25 +239,28 @@ body.ttrss_main .hl .right i.material-icons { user-select: none; font-size: 21px; } +body.ttrss_main .hl .left input { + margin: 0 4px; +} +body.ttrss_main .hl .right { + text-align: right; +} body.ttrss_main .hl .right i.material-icons { color: #777; } -body.ttrss_main .hl div.title { +body.ttrss_main .hl .title { cursor: pointer; flex-grow: 2; overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main .hl span.author { +body.ttrss_main .hl .author { white-space: nowrap; color: #555; font-size: 11px; font-weight: normal; } -body.ttrss_main .hl div.right { - text-align: right; -} -body.ttrss_main .hl span.feed a { +body.ttrss_main .hl .feed a { border-radius: 4px; display: inline-block; padding: 1px 4px; @@ -317,25 +269,18 @@ body.ttrss_main .hl span.feed a { font-weight: normal; color: #555; } -body.ttrss_main .hl span.feed a:hover { +body.ttrss_main .hl .feed a:hover { color: #257aa7; } -body.ttrss_main .hl span.updated { +body.ttrss_main .hl .updated { color: #555; text-align: right; font-size: 11px; padding-left: 10px; } -body.ttrss_main .hl span.updated div { +body.ttrss_main .hl .updated div { display: inline-block; } -body.ttrss_main .hl div.left input { - margin: 0px 4px; -} -body.ttrss_main .hl div.left img, -body.ttrss_main .hl div.right img { - margin: 0px 4px; -} body.ttrss_main .hl div.title a { font-weight: 600; text-rendering: optimizelegibility; @@ -352,10 +297,10 @@ body.ttrss_main .hl.vgrlf .feed { body.ttrss_main .hl.Unread { background: white; } -body.ttrss_main .hl.Unread div.title a { +body.ttrss_main .hl.Unread .title a { color: black; } -body.ttrss_main .hl.active div.title a { +body.ttrss_main .hl.active .title a { color: #257aa7; /* text-shadow : 1px 1px 2px #fff; */ } @@ -377,9 +322,6 @@ body.ttrss_main .hl.active span, body.ttrss_main .hl.Selected span { color: white; } -body.ttrss_main .hl.Grayed { - color: #909090; -} body.ttrss_main #content-insert blockquote, body.ttrss_main #headlines-frame blockquote, body.ttrss_main .dijitContentPane blockquote { @@ -436,45 +378,6 @@ body.ttrss_main i.pub-pic { cursor: pointer; color: #ccc; } -body.ttrss_main div.errorExplained { - border: 1px solid #ddd; - margin: 5px 0px 5px 0px; - padding: 5px; -} -body.ttrss_main ul.browseFeedList { - height: 300px; - width: 100%; - overflow: auto; - border-width: 0px 1px 1px 1px; - border-color: #ddd; - border-style: solid; - margin: 0px 0px 5px 0px; - background-color: white; - list-style-type: none; - padding: 0px; -} -body.ttrss_main ul.browseFeedList li { - display: flex; - align-items: center; -} -body.ttrss_main ul.browseFeedList li > * { - margin: 2px; -} -body.ttrss_main .browseFeedList span.subscribers { - color: #808080; -} -body.ttrss_main ul.compact { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main ul.compact li { - margin: 0px; - padding: 0px; -} -body.ttrss_main .noborder { - border-width: 0px; -} body.ttrss_main #overlay { background: white; left: 0; @@ -488,11 +391,6 @@ body.ttrss_main #overlay_inner { font-weight: bold; margin: 1em; } -body.ttrss_main div.loadingPrompt { - padding: 1em; - text-align: center; - font-weight: bold; -} body.ttrss_main div.whiteBox { margin-left: 1px; text-align: center; @@ -501,13 +399,6 @@ body.ttrss_main div.whiteBox { border: 0px solid #ddd; border-bottom-width: 1px; } -body.ttrss_main div#headlines-frame.wide .title { - overflow: visible; - white-space: normal; -} -body.ttrss_main div#headlines-frame.wide .hl .feed { - display: none; -} body.ttrss_main .dijitDialog header, body.ttrss_main .dijitDialog .dlgSec, body.ttrss_main .dijitDialog .dlgSecHoriz { @@ -592,11 +483,6 @@ body.ttrss_main div#cmdline { padding: 3px 5px 3px 5px; z-index: 5; } -body.ttrss_main #feed_browser_spinner { - vertical-align: middle; - height: 18px; - width: 18px; -} body.ttrss_main .exception-contents h3 { color: red; } @@ -612,8 +498,8 @@ body.ttrss_main #content-wrap { margin: 0; } body.ttrss_main #feeds-holder { - padding: 0px; - border: 0px solid #ddd; + padding: 0; + border: 0 solid #ddd; overflow: hidden; background: #f5f5f5; box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); @@ -625,16 +511,6 @@ body.ttrss_main #feeds-holder #feedTree { text-rendering: optimizelegibility; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } -body.ttrss_main #feeds-holder #feedTree .counterNode.aux, -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - background: #f5f5f5; - color: #6f6f6f; - border-color: #dcdcdc; -} -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - border-color: #257aa7; - background: #ffffff; -} body.ttrss_main #feeds-holder #feedTree .counterNode { font-weight: bold; display: none; @@ -653,6 +529,16 @@ body.ttrss_main #feeds-holder #feedTree .counterNode { min-width: 23px; height: 14px; } +body.ttrss_main #feeds-holder #feedTree .counterNode.aux, +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + background: #f5f5f5; + color: #6f6f6f; + border-color: #dcdcdc; +} +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + border-color: #257aa7; + background: #ffffff; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeRow[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread { background-color: #3ea447; border-color: #307f37; @@ -712,6 +598,13 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr grid-gap: 8px; background-color: #f5f5f5; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > * { + /* 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 + */ +} 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; @@ -772,6 +665,16 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { height: 100vh; } +body.ttrss_main #headlines-frame .dijitCheckBox { + margin-right: 4px; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .title { + overflow: visible; + white-space: normal; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .hl .feed { + display: none; +} body.ttrss_main #headlines-frame #headlines-spacer { margin-left: 1px; text-align: center; @@ -834,7 +737,7 @@ body.ttrss_main #toolbar-frame #toolbar { body.ttrss_main #toolbar-frame #toolbar .dijitSelect, body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode, body.ttrss_main #toolbar-frame #toolbar .dijitComboButton .dijitButtonNode { - border: 0px; + border: 0; } body.ttrss_main #toolbar-frame #toolbar i.net-alert, body.ttrss_main #toolbar-frame #toolbar .left i.icon-error { @@ -883,14 +786,14 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border: 0; text-align: right; color: #555; - padding: 5px 5px 0px 0px; - margin: 0px; + padding: 5px 5px 0 0px; position: absolute; - right: 0px; - top: 0px; + border: 0; + margin: 0; + right: 0; + top: 0; z-index: 5; } body.ttrss_main #header i.net-alert, @@ -923,40 +826,11 @@ body.ttrss_main img.icon { vertical-align: middle; display: inline-block; } -body.ttrss_main .player { - display: inline-block; - color: #555; - font-size: 11px; - font-family: sans-serif; - border: 1px solid #555; - padding: 0px 4px 0px 4px; - margin: 0px 2px 0px 2px; - width: 50px; - text-align: center; - background: white; -} -body.ttrss_main .player.playing { - color: #00c000; - border-color: #00c000; -} -body.ttrss_main .player:hover { - background: #f5f5f5; - cursor: pointer; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; margin: 0; padding: 0; - /*max-height : 100px; - overflow : auto; - border-style : solid; - border-color : @border-default; - border-width : 1px 1px 1px 1px; - background-color : @default-bg; - margin : 0px 0px 5px 0px; - padding : 4px; - min-height : 16px;*/ } body.ttrss_main ul#filterDlg_Matches li, body.ttrss_main ul#filterDlg_Actions li { @@ -992,9 +866,6 @@ body.ttrss_main span.highlight { background-color: #ffff00; color: #cc90cc; } -body.ttrss_main #headlines-frame .dijitCheckBox { - margin-right: 4px; -} body.ttrss_main #feedEditDlg img.feedIcon { border: 1px solid #ccc; padding: 5px; @@ -1129,6 +1000,12 @@ body.ttrss_main ul.list-unstyled { body.ttrss_main .text-center { text-align: center; } +body.ttrss_main .text-right { + text-align: right; +} +body.ttrss_main .text-left { + text-align: left; +} body.ttrss_main #prefFilterTestResultList .preview { margin: 8px; } @@ -1138,11 +1015,39 @@ body.ttrss_main #prefFilterTestResultList .title { body.ttrss_main #prefFilterTestResultList .feed { color: #257aa7; } +body.ttrss_main, +body.ttrss_utility { + /*div.autocomplete { + position : absolute; + width : 250px; + background-color : @default-bg; + border :1px solid @border-default; + margin : 0px; + padding : 0px; + + ul { + list-style-type : none; + margin : 0px; + padding : 0px; + } + + ul li.selected { + background-color : darken(@default-bg, 10%); + } + + ul li { + list-style-type : none; + display : block; + margin : 0; + padding : 2px; + cursor : pointer; + } + }*/ +} body.ttrss_main .alert, body.ttrss_utility .alert { padding: 8px 35px 8px 14px; margin-bottom: 10px; - /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; @@ -1183,6 +1088,16 @@ body.ttrss_main .text-warning, body.ttrss_utility .text-warning { color: #a47e3c; } +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; +} body.ttrss_main .alert, body.ttrss_utility .alert, body.ttrss_main .alert h4, @@ -1232,43 +1147,6 @@ body.ttrss_utility hr { border: 0px solid #ccc; border-bottom-width: 1px; } -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; -} -body.ttrss_main div.autocomplete, -body.ttrss_utility div.autocomplete { - position: absolute; - width: 250px; - background-color: white; - border: 1px solid #ddd; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul, -body.ttrss_utility div.autocomplete ul { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul li.selected, -body.ttrss_utility div.autocomplete ul li.selected { - background-color: #e6e6e6; -} -body.ttrss_main div.autocomplete ul li, -body.ttrss_utility div.autocomplete ul li { - list-style-type: none; - display: block; - margin: 0; - padding: 2px; - cursor: pointer; -} ::selection { background: #257aa7; color: white; @@ -1282,9 +1160,9 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ .cdm { /*i.material-icons { color : @color-icon; diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 9ba4ed78e..4bb1c6064 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -276,7 +276,7 @@ .header a.title { font-weight : 600; color : @default-text; - font-size : 14px; + font-size : @font-size-content; transition : color 0.2s, background 0.2s; text-rendering: optimizelegibility; font-family : @fonts-ui-bold; diff --git a/themes/light/defines.less b/themes/light/defines.less index 488b3f623..338c71d79 100644 --- a/themes/light/defines.less +++ b/themes/light/defines.less @@ -22,6 +22,7 @@ @font-size-tiny: 9px; @font-size-small: 11px; @font-size-toolbar: 13px; +@font-size-content: 14px; @embed-responsive-padding: 56.25%; // Use 56.25% for 16:9 aspect ratio, 75% for 4:3. diff --git a/themes/light/prefs.less b/themes/light/prefs.less index afe4ff2d1..0ac0bed52 100644 --- a/themes/light/prefs.less +++ b/themes/light/prefs.less @@ -1,7 +1,7 @@ body.ttrss_prefs { background-color : @color-panel-bg; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; + font-size: @font-size-content; h1, h2, h3, h4 { font-family : @fonts-ui-bold; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 8e7bce410..7fc9ebe01 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -2,7 +2,7 @@ body.ttrss_main { background : @default-bg; color : @default-fg; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; + font-size: @font-size-content; overflow : hidden; :focus { @@ -11,12 +11,12 @@ body.ttrss_main { .post { padding : 0; - font-size : 13px; + font-size : @font-size-toolbar; .header { padding : 5px; - color : #909090; - border: 0px solid @border-default; + color : @default-text; + border: 0 solid @border-default; border-bottom-width: 1px; background: @color-panel-bg; @@ -160,7 +160,7 @@ body.ttrss_main { border-width : 1px; border-style : solid; position : fixed; - font-size : 14px; + font-size : @font-size-content; z-index : 99; display : flex; opacity: 0; @@ -248,6 +248,10 @@ body.ttrss_main { display : flex; align-items : center; + img { + margin : 0 4px; + } + i.material-icons { margin-left : 2px; padding : 2px; @@ -257,31 +261,35 @@ body.ttrss_main { } } + .left { + input { + margin : 0 4px; + } + } + .right { + text-align : right; + i.material-icons { color : @color-icon; } } - div.title { + .title { cursor : pointer; flex-grow : 2; overflow : hidden; text-overflow : ellipsis; } - span.author { + .author { white-space : nowrap; color : @default-text; font-size : @font-size-small; font-weight : normal; } - div.right { - text-align : right; - } - - span.feed a { + .feed a { border-radius : 4px; display : inline-block; padding : 1px 4px; @@ -289,29 +297,21 @@ body.ttrss_main { font-style : italic; font-weight : normal; color : @default-text; + + &:hover { + color : @color-accent; + } } - span.feed a:hover { - color : @color-accent; - } - - span.updated { + .updated { color : @default-text; text-align : right; font-size : @font-size-small; padding-left : 10px; - } - span.updated div { - display : inline-block; - } - - div.left input { - margin : 0px 4px; - } - - div.left img, div.right img { - margin : 0px 4px; + div { + display : inline-block; + } } div.title a { @@ -324,44 +324,40 @@ body.ttrss_main { a.title.high, span.hl-content.high .preview { color : #00aa00; } - } - .hl.vgrlf .feed { - display : none; - } - - .hl.Unread { - background : white; - } - - .hl.Unread div.title a { - color : black; - } - - .hl.active div.title a { - color : @color-accent; - /* text-shadow : 1px 1px 2px #fff; */ - } - - .hl.active { - background : @color-accent ! important; - } - - .hl.active, - .hl.Selected { - color : white; - background : desaturate(@color-accent, 25%); - - a, - .feed a, - .hl-content a.title, - span { - color : white; + &.vgrlf .feed { + display : none; } - } - .hl.Grayed { - color : #909090; + &.Unread { + background : white; + } + + &.Unread .title a { + color : black; + } + + &.active .title a { + color : @color-accent; + /* text-shadow : 1px 1px 2px #fff; */ + } + + &.active { + background : @color-accent ! important; + } + + &.active, + &.Selected { + color : white; + background : desaturate(@color-accent, 25%); + + a, + .feed a, + .hl-content a.title, + span { + color : white; + } + } } #content-insert blockquote, @@ -426,53 +422,16 @@ body.ttrss_main { color : @color-hl-icon; } - div.errorExplained { - border : 1px solid @border-default; - margin : 5px 0px 5px 0px; - padding : 5px; - } - - ul.browseFeedList { - height : 300px; - width : 100%; - overflow : auto; - border-width : 0px 1px 1px 1px; - border-color : @border-default; - border-style : solid; - margin : 0px 0px 5px 0px; - background-color : white; + /*ul.compact { list-style-type : none; - padding : 0px; + margin : 0; + padding : 0; li { - display : flex; - align-items : center; - - > * { - margin : 2px; - } + margin : 0; + padding : 0; } - } - - - .browseFeedList span.subscribers { - color : #808080; - } - - ul.compact { - list-style-type : none; - margin : 0px; - padding : 0px; - - li { - margin : 0px; - padding : 0px; - } - } - - .noborder { - border-width : 0px; - } + }*/ #overlay { background : @default-bg; @@ -489,12 +448,6 @@ body.ttrss_main { margin : 1em; } - div.loadingPrompt { - padding : 1em; - text-align : center; - font-weight : bold; - } - div.whiteBox { margin-left : 1px; text-align : center; @@ -504,17 +457,6 @@ body.ttrss_main { border-bottom-width: 1px; } - div#headlines-frame.wide { - .title { - overflow: visible; - white-space: normal; - } - - .hl .feed { - display: none; - } - } - .dijitDialog { header, .dlgSec, .dlgSecHoriz { @@ -564,14 +506,14 @@ body.ttrss_main { fieldset { border-width : 0px; padding : 5px 0px; - } - fieldset.narrow { - padding : 2px 0px; - } + &.narrow { + padding : 2px 0px; + } - fieldset.align-right { - text-align : right; + &.align-right { + text-align : right; + } } } @@ -609,12 +551,6 @@ body.ttrss_main { z-index : 5; } - #feed_browser_spinner { - vertical-align : middle; - height : 18px; - width : 18px; - } - .exception-contents { h3 { color : red; @@ -634,8 +570,8 @@ body.ttrss_main { } #feeds-holder { - padding : 0px; - border: 0px solid @border-default; + padding : 0; + border: 0 solid @border-default; overflow : hidden; background : @color-panel-bg; box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1); @@ -647,23 +583,12 @@ body.ttrss_main { text-rendering: optimizelegibility; font-family : @fonts-ui; - .counterNode.aux, .counterNode.marked { - background : @color-panel-bg; - color : lighten(@default-text, 10%); - border-color : darken(@color-panel-bg, 10%); - } - - .counterNode.marked { - border-color : @color-accent-marked; - background : lighten(@color-accent-marked, 60%); - } - .counterNode { font-weight : bold; display : none; font-size : @font-size-tiny; text-align : center; - border : 1px solid lighten(@color-accent, 5%);; + border : 1px solid lighten(@color-accent, 5%); color : white; background : lighten(@color-accent, 5%); border-radius : 4px; @@ -675,6 +600,17 @@ body.ttrss_main { margin-top : 2px; min-width : 23px; height : 14px; + + &.aux, &.marked { + background : @color-panel-bg; + color : lighten(@default-text, 10%); + border-color : darken(@color-panel-bg, 10%); + } + + &.marked { + border-color : @color-accent-marked; + background : lighten(@color-accent-marked, 60%); + } } // fresh @@ -742,7 +678,6 @@ body.ttrss_main { font-weight : bold; color : @color-accent; } - } } @@ -754,11 +689,11 @@ body.ttrss_main { 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 + /* 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; @@ -766,7 +701,6 @@ body.ttrss_main { } .cdm.expanded { - .header, .content { background : @default-bg; border : 1px solid @border-default; @@ -817,72 +751,6 @@ body.ttrss_main { } } - /*#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; - } - } - }*/ - #headlines-frame { padding : 0; border: 0; @@ -902,6 +770,21 @@ body.ttrss_main { height : 100vh; } + .dijitCheckBox { + margin-right : 4px; + } + + &[data-is-wide-screen="true"] { + .title { + overflow: visible; + white-space: normal; + } + + .hl .feed { + display: none; + } + } + #headlines-spacer { margin-left : 1px; text-align : center; @@ -932,10 +815,10 @@ body.ttrss_main { a { color: @default-text; - } - a:hover { - color: @color-link; + &:hover { + color: @color-link; + } } } @@ -973,7 +856,7 @@ body.ttrss_main { .dijitSelect, .dijitDropDownButton .dijitButtonNode, .dijitComboButton .dijitButtonNode { - border : 0px; + border : 0; } i.net-alert, .left i.icon-error { @@ -1033,14 +916,14 @@ body.ttrss_main { } #header { - border : 0; text-align : right; color : @default-text; - padding : 5px 5px 0px 0px; - margin : 0px; + padding : 5px 5px 0 0px; position : absolute; - right : 0px; - top : 0px; + border : 0; + margin : 0; + right : 0; + top : 0; z-index : 5; i.net-alert, .left i.icon-error { @@ -1078,42 +961,10 @@ body.ttrss_main { display : inline-block; } - .player { - display : inline-block; - color : @default-text; - font-size : @font-size-small; - font-family : sans-serif; - border : 1px solid @default-text; - padding : 0px 4px 0px 4px; - margin : 0px 2px 0px 2px; - width : 50px; - text-align : center; - background : @default-bg; - } - - .player.playing { - color : #00c000; - border-color : #00c000; - } - - .player:hover { - background : @color-panel-bg; - cursor : pointer; - } - ul#filterDlg_Matches, ul#filterDlg_Actions { list-style-type : none; margin : 0; padding: 0; - /*max-height : 100px; - overflow : auto; - border-style : solid; - border-color : @border-default; - border-width : 1px 1px 1px 1px; - background-color : @default-bg; - margin : 0px 0px 5px 0px; - padding : 4px; - min-height : 16px;*/ } ul#filterDlg_Matches li, ul#filterDlg_Actions li { @@ -1159,10 +1010,6 @@ body.ttrss_main { color : #cc90cc; } - #headlines-frame .dijitCheckBox { - margin-right : 4px; - } - #feedEditDlg img.feedIcon { border : 1px solid #ccc; padding : 5px; @@ -1251,6 +1098,7 @@ body.ttrss_main { border: 1px solid @color-published; border-radius: 4px; } + #feed_current_unread { margin-left : 8px; font-weight : bold; @@ -1339,6 +1187,14 @@ body.ttrss_main { text-align : center; } + .text-right { + text-align : right; + } + + .text-left { + text-align : left; + } + #prefFilterTestResultList { .preview { margin : 8px; @@ -1359,7 +1215,6 @@ body.ttrss_main, body.ttrss_utility { .alert { padding: 8px 35px 8px 14px; margin-bottom: 10px; - /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; @@ -1401,6 +1256,14 @@ body.ttrss_main, body.ttrss_utility { color: darken(#c09853, 10%); } + .text-muted { + color : @default-text; + } + + .text-small, .small { + font-size : @font-size-small; + } + .alert, .alert h4 { color: #c09853; @@ -1447,15 +1310,7 @@ body.ttrss_main, body.ttrss_utility { border-bottom-width: 1px; } - .text-muted { - color : @default-text; - } - - .text-small, .small { - font-size : @font-size-small; - } - - div.autocomplete { + /*div.autocomplete { position : absolute; width : 250px; background-color : @default-bg; @@ -1480,7 +1335,7 @@ body.ttrss_main, body.ttrss_utility { padding : 2px; cursor : pointer; } - } + }*/ } @@ -1501,7 +1356,7 @@ body.ttrss_main, body.ttrss_utility { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { +/*video::-webkit-media-controls-overlay-play-button { display: none; -} +}*/ diff --git a/themes/light/utility.less b/themes/light/utility.less index 1c30c77ab..c88e89ba9 100644 --- a/themes/light/utility.less +++ b/themes/light/utility.less @@ -6,7 +6,7 @@ body.ttrss_utility { background : @color-panel-bg; color : @default-fg; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; + font-size: @font-size-content; margin : 4em; .content { diff --git a/themes/night.css b/themes/night.css index cb5463bb0..2207450ed 100644 --- a/themes/night.css +++ b/themes/night.css @@ -16,69 +16,14 @@ 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; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; - #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; - } + li { + margin : 0; + padding : 0; } }*/ } @@ -91,8 +36,8 @@ body.ttrss_main .post { } body.ttrss_main .post .header { padding: 5px; - color: #909090; - border: 0px solid #222; + color: #ccc; + border: 0 solid #222; border-bottom-width: 1px; background: #222; } @@ -283,6 +228,10 @@ body.ttrss_main .hl .right { display: flex; align-items: center; } +body.ttrss_main .hl .left img, +body.ttrss_main .hl .right img { + margin: 0 4px; +} body.ttrss_main .hl .left i.material-icons, body.ttrss_main .hl .right i.material-icons { margin-left: 2px; @@ -291,25 +240,28 @@ body.ttrss_main .hl .right i.material-icons { user-select: none; font-size: 21px; } +body.ttrss_main .hl .left input { + margin: 0 4px; +} +body.ttrss_main .hl .right { + text-align: right; +} body.ttrss_main .hl .right i.material-icons { color: #999; } -body.ttrss_main .hl div.title { +body.ttrss_main .hl .title { cursor: pointer; flex-grow: 2; overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main .hl span.author { +body.ttrss_main .hl .author { white-space: nowrap; color: #ccc; font-size: 11px; font-weight: normal; } -body.ttrss_main .hl div.right { - text-align: right; -} -body.ttrss_main .hl span.feed a { +body.ttrss_main .hl .feed a { border-radius: 4px; display: inline-block; padding: 1px 4px; @@ -318,25 +270,18 @@ body.ttrss_main .hl span.feed a { font-weight: normal; color: #ccc; } -body.ttrss_main .hl span.feed a:hover { +body.ttrss_main .hl .feed a:hover { color: #b87d2c; } -body.ttrss_main .hl span.updated { +body.ttrss_main .hl .updated { color: #ccc; text-align: right; font-size: 11px; padding-left: 10px; } -body.ttrss_main .hl span.updated div { +body.ttrss_main .hl .updated div { display: inline-block; } -body.ttrss_main .hl div.left input { - margin: 0px 4px; -} -body.ttrss_main .hl div.left img, -body.ttrss_main .hl div.right img { - margin: 0px 4px; -} body.ttrss_main .hl div.title a { font-weight: 600; text-rendering: optimizelegibility; @@ -353,10 +298,10 @@ body.ttrss_main .hl.vgrlf .feed { body.ttrss_main .hl.Unread { background: white; } -body.ttrss_main .hl.Unread div.title a { +body.ttrss_main .hl.Unread .title a { color: black; } -body.ttrss_main .hl.active div.title a { +body.ttrss_main .hl.active .title a { color: #b87d2c; /* text-shadow : 1px 1px 2px #fff; */ } @@ -378,9 +323,6 @@ body.ttrss_main .hl.active span, body.ttrss_main .hl.Selected span { color: white; } -body.ttrss_main .hl.Grayed { - color: #909090; -} body.ttrss_main #content-insert blockquote, body.ttrss_main #headlines-frame blockquote, body.ttrss_main .dijitContentPane blockquote { @@ -437,45 +379,6 @@ body.ttrss_main i.pub-pic { cursor: pointer; color: #ccc; } -body.ttrss_main div.errorExplained { - border: 1px solid #222; - margin: 5px 0px 5px 0px; - padding: 5px; -} -body.ttrss_main ul.browseFeedList { - height: 300px; - width: 100%; - overflow: auto; - border-width: 0px 1px 1px 1px; - border-color: #222; - border-style: solid; - margin: 0px 0px 5px 0px; - background-color: white; - list-style-type: none; - padding: 0px; -} -body.ttrss_main ul.browseFeedList li { - display: flex; - align-items: center; -} -body.ttrss_main ul.browseFeedList li > * { - margin: 2px; -} -body.ttrss_main .browseFeedList span.subscribers { - color: #808080; -} -body.ttrss_main ul.compact { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main ul.compact li { - margin: 0px; - padding: 0px; -} -body.ttrss_main .noborder { - border-width: 0px; -} body.ttrss_main #overlay { background: #333; left: 0; @@ -489,11 +392,6 @@ body.ttrss_main #overlay_inner { font-weight: bold; margin: 1em; } -body.ttrss_main div.loadingPrompt { - padding: 1em; - text-align: center; - font-weight: bold; -} body.ttrss_main div.whiteBox { margin-left: 1px; text-align: center; @@ -502,13 +400,6 @@ body.ttrss_main div.whiteBox { border: 0px solid #222; border-bottom-width: 1px; } -body.ttrss_main div#headlines-frame.wide .title { - overflow: visible; - white-space: normal; -} -body.ttrss_main div#headlines-frame.wide .hl .feed { - display: none; -} body.ttrss_main .dijitDialog header, body.ttrss_main .dijitDialog .dlgSec, body.ttrss_main .dijitDialog .dlgSecHoriz { @@ -593,11 +484,6 @@ body.ttrss_main div#cmdline { padding: 3px 5px 3px 5px; z-index: 5; } -body.ttrss_main #feed_browser_spinner { - vertical-align: middle; - height: 18px; - width: 18px; -} body.ttrss_main .exception-contents h3 { color: red; } @@ -613,8 +499,8 @@ body.ttrss_main #content-wrap { margin: 0; } body.ttrss_main #feeds-holder { - padding: 0px; - border: 0px solid #222; + padding: 0; + border: 0 solid #222; overflow: hidden; background: #222; box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); @@ -626,16 +512,6 @@ body.ttrss_main #feeds-holder #feedTree { text-rendering: optimizelegibility; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } -body.ttrss_main #feeds-holder #feedTree .counterNode.aux, -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - background: #222; - color: #e6e6e6; - border-color: #080808; -} -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - border-color: #b87d2c; - background: #ffffff; -} body.ttrss_main #feeds-holder #feedTree .counterNode { font-weight: bold; display: none; @@ -654,6 +530,16 @@ body.ttrss_main #feeds-holder #feedTree .counterNode { min-width: 23px; height: 14px; } +body.ttrss_main #feeds-holder #feedTree .counterNode.aux, +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + background: #222; + color: #e6e6e6; + border-color: #080808; +} +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + border-color: #b87d2c; + background: #ffffff; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeRow[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread { background-color: #3ea447; border-color: #307f37; @@ -713,6 +599,13 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr grid-gap: 8px; background-color: #222; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > * { + /* 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 + */ +} 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; @@ -773,6 +666,16 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { height: 100vh; } +body.ttrss_main #headlines-frame .dijitCheckBox { + margin-right: 4px; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .title { + overflow: visible; + white-space: normal; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .hl .feed { + display: none; +} body.ttrss_main #headlines-frame #headlines-spacer { margin-left: 1px; text-align: center; @@ -835,7 +738,7 @@ body.ttrss_main #toolbar-frame #toolbar { body.ttrss_main #toolbar-frame #toolbar .dijitSelect, body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode, body.ttrss_main #toolbar-frame #toolbar .dijitComboButton .dijitButtonNode { - border: 0px; + border: 0; } body.ttrss_main #toolbar-frame #toolbar i.net-alert, body.ttrss_main #toolbar-frame #toolbar .left i.icon-error { @@ -884,14 +787,14 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border: 0; text-align: right; color: #ccc; - padding: 5px 5px 0px 0px; - margin: 0px; + padding: 5px 5px 0 0px; position: absolute; - right: 0px; - top: 0px; + border: 0; + margin: 0; + right: 0; + top: 0; z-index: 5; } body.ttrss_main #header i.net-alert, @@ -924,40 +827,11 @@ body.ttrss_main img.icon { vertical-align: middle; display: inline-block; } -body.ttrss_main .player { - display: inline-block; - color: #ccc; - font-size: 11px; - font-family: sans-serif; - border: 1px solid #ccc; - padding: 0px 4px 0px 4px; - margin: 0px 2px 0px 2px; - width: 50px; - text-align: center; - background: #333; -} -body.ttrss_main .player.playing { - color: #00c000; - border-color: #00c000; -} -body.ttrss_main .player:hover { - background: #222; - cursor: pointer; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; margin: 0; padding: 0; - /*max-height : 100px; - overflow : auto; - border-style : solid; - border-color : @border-default; - border-width : 1px 1px 1px 1px; - background-color : @default-bg; - margin : 0px 0px 5px 0px; - padding : 4px; - min-height : 16px;*/ } body.ttrss_main ul#filterDlg_Matches li, body.ttrss_main ul#filterDlg_Actions li { @@ -993,9 +867,6 @@ body.ttrss_main span.highlight { background-color: #ffff00; color: #cc90cc; } -body.ttrss_main #headlines-frame .dijitCheckBox { - margin-right: 4px; -} body.ttrss_main #feedEditDlg img.feedIcon { border: 1px solid #ccc; padding: 5px; @@ -1130,6 +1001,12 @@ body.ttrss_main ul.list-unstyled { body.ttrss_main .text-center { text-align: center; } +body.ttrss_main .text-right { + text-align: right; +} +body.ttrss_main .text-left { + text-align: left; +} body.ttrss_main #prefFilterTestResultList .preview { margin: 8px; } @@ -1139,11 +1016,39 @@ body.ttrss_main #prefFilterTestResultList .title { body.ttrss_main #prefFilterTestResultList .feed { color: #b87d2c; } +body.ttrss_main, +body.ttrss_utility { + /*div.autocomplete { + position : absolute; + width : 250px; + background-color : @default-bg; + border :1px solid @border-default; + margin : 0px; + padding : 0px; + + ul { + list-style-type : none; + margin : 0px; + padding : 0px; + } + + ul li.selected { + background-color : darken(@default-bg, 10%); + } + + ul li { + list-style-type : none; + display : block; + margin : 0; + padding : 2px; + cursor : pointer; + } + }*/ +} body.ttrss_main .alert, body.ttrss_utility .alert { padding: 8px 35px 8px 14px; margin-bottom: 10px; - /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; @@ -1184,6 +1089,16 @@ body.ttrss_main .text-warning, body.ttrss_utility .text-warning { color: #a47e3c; } +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; +} body.ttrss_main .alert, body.ttrss_utility .alert, body.ttrss_main .alert h4, @@ -1233,43 +1148,6 @@ body.ttrss_utility hr { border: 0px solid #ccc; border-bottom-width: 1px; } -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; -} -body.ttrss_main div.autocomplete, -body.ttrss_utility div.autocomplete { - position: absolute; - width: 250px; - background-color: #333; - border: 1px solid #222; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul, -body.ttrss_utility div.autocomplete ul { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul li.selected, -body.ttrss_utility div.autocomplete ul li.selected { - background-color: #1a1a1a; -} -body.ttrss_main div.autocomplete ul li, -body.ttrss_utility div.autocomplete ul li { - list-style-type: none; - display: block; - margin: 0; - padding: 2px; - cursor: pointer; -} ::selection { background: #b87d2c; color: #333; @@ -1283,9 +1161,9 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ .cdm { /*i.material-icons { color : @color-icon; diff --git a/themes/night_blue.css b/themes/night_blue.css index 570fbbff5..9d2b4fa38 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -16,69 +16,14 @@ 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; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; - #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; - } + li { + margin : 0; + padding : 0; } }*/ } @@ -91,8 +36,8 @@ body.ttrss_main .post { } body.ttrss_main .post .header { padding: 5px; - color: #909090; - border: 0px solid #222; + color: #ccc; + border: 0 solid #222; border-bottom-width: 1px; background: #222; } @@ -283,6 +228,10 @@ body.ttrss_main .hl .right { display: flex; align-items: center; } +body.ttrss_main .hl .left img, +body.ttrss_main .hl .right img { + margin: 0 4px; +} body.ttrss_main .hl .left i.material-icons, body.ttrss_main .hl .right i.material-icons { margin-left: 2px; @@ -291,25 +240,28 @@ body.ttrss_main .hl .right i.material-icons { user-select: none; font-size: 21px; } +body.ttrss_main .hl .left input { + margin: 0 4px; +} +body.ttrss_main .hl .right { + text-align: right; +} body.ttrss_main .hl .right i.material-icons { color: #999; } -body.ttrss_main .hl div.title { +body.ttrss_main .hl .title { cursor: pointer; flex-grow: 2; overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main .hl span.author { +body.ttrss_main .hl .author { white-space: nowrap; color: #ccc; font-size: 11px; font-weight: normal; } -body.ttrss_main .hl div.right { - text-align: right; -} -body.ttrss_main .hl span.feed a { +body.ttrss_main .hl .feed a { border-radius: 4px; display: inline-block; padding: 1px 4px; @@ -318,25 +270,18 @@ body.ttrss_main .hl span.feed a { font-weight: normal; color: #ccc; } -body.ttrss_main .hl span.feed a:hover { +body.ttrss_main .hl .feed a:hover { color: #257aa7; } -body.ttrss_main .hl span.updated { +body.ttrss_main .hl .updated { color: #ccc; text-align: right; font-size: 11px; padding-left: 10px; } -body.ttrss_main .hl span.updated div { +body.ttrss_main .hl .updated div { display: inline-block; } -body.ttrss_main .hl div.left input { - margin: 0px 4px; -} -body.ttrss_main .hl div.left img, -body.ttrss_main .hl div.right img { - margin: 0px 4px; -} body.ttrss_main .hl div.title a { font-weight: 600; text-rendering: optimizelegibility; @@ -353,10 +298,10 @@ body.ttrss_main .hl.vgrlf .feed { body.ttrss_main .hl.Unread { background: white; } -body.ttrss_main .hl.Unread div.title a { +body.ttrss_main .hl.Unread .title a { color: black; } -body.ttrss_main .hl.active div.title a { +body.ttrss_main .hl.active .title a { color: #257aa7; /* text-shadow : 1px 1px 2px #fff; */ } @@ -378,9 +323,6 @@ body.ttrss_main .hl.active span, body.ttrss_main .hl.Selected span { color: white; } -body.ttrss_main .hl.Grayed { - color: #909090; -} body.ttrss_main #content-insert blockquote, body.ttrss_main #headlines-frame blockquote, body.ttrss_main .dijitContentPane blockquote { @@ -437,45 +379,6 @@ body.ttrss_main i.pub-pic { cursor: pointer; color: #ccc; } -body.ttrss_main div.errorExplained { - border: 1px solid #222; - margin: 5px 0px 5px 0px; - padding: 5px; -} -body.ttrss_main ul.browseFeedList { - height: 300px; - width: 100%; - overflow: auto; - border-width: 0px 1px 1px 1px; - border-color: #222; - border-style: solid; - margin: 0px 0px 5px 0px; - background-color: white; - list-style-type: none; - padding: 0px; -} -body.ttrss_main ul.browseFeedList li { - display: flex; - align-items: center; -} -body.ttrss_main ul.browseFeedList li > * { - margin: 2px; -} -body.ttrss_main .browseFeedList span.subscribers { - color: #808080; -} -body.ttrss_main ul.compact { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main ul.compact li { - margin: 0px; - padding: 0px; -} -body.ttrss_main .noborder { - border-width: 0px; -} body.ttrss_main #overlay { background: #333; left: 0; @@ -489,11 +392,6 @@ body.ttrss_main #overlay_inner { font-weight: bold; margin: 1em; } -body.ttrss_main div.loadingPrompt { - padding: 1em; - text-align: center; - font-weight: bold; -} body.ttrss_main div.whiteBox { margin-left: 1px; text-align: center; @@ -502,13 +400,6 @@ body.ttrss_main div.whiteBox { border: 0px solid #222; border-bottom-width: 1px; } -body.ttrss_main div#headlines-frame.wide .title { - overflow: visible; - white-space: normal; -} -body.ttrss_main div#headlines-frame.wide .hl .feed { - display: none; -} body.ttrss_main .dijitDialog header, body.ttrss_main .dijitDialog .dlgSec, body.ttrss_main .dijitDialog .dlgSecHoriz { @@ -593,11 +484,6 @@ body.ttrss_main div#cmdline { padding: 3px 5px 3px 5px; z-index: 5; } -body.ttrss_main #feed_browser_spinner { - vertical-align: middle; - height: 18px; - width: 18px; -} body.ttrss_main .exception-contents h3 { color: red; } @@ -613,8 +499,8 @@ body.ttrss_main #content-wrap { margin: 0; } body.ttrss_main #feeds-holder { - padding: 0px; - border: 0px solid #222; + padding: 0; + border: 0 solid #222; overflow: hidden; background: #222; box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); @@ -626,16 +512,6 @@ body.ttrss_main #feeds-holder #feedTree { text-rendering: optimizelegibility; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } -body.ttrss_main #feeds-holder #feedTree .counterNode.aux, -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - background: #222; - color: #e6e6e6; - border-color: #080808; -} -body.ttrss_main #feeds-holder #feedTree .counterNode.marked { - border-color: #257aa7; - background: #ffffff; -} body.ttrss_main #feeds-holder #feedTree .counterNode { font-weight: bold; display: none; @@ -654,6 +530,16 @@ body.ttrss_main #feeds-holder #feedTree .counterNode { min-width: 23px; height: 14px; } +body.ttrss_main #feeds-holder #feedTree .counterNode.aux, +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + background: #222; + color: #e6e6e6; + border-color: #080808; +} +body.ttrss_main #feeds-holder #feedTree .counterNode.marked { + border-color: #257aa7; + background: #ffffff; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeRow[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread { background-color: #3ea447; border-color: #307f37; @@ -713,6 +599,13 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr grid-gap: 8px; background-color: #222; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > * { + /* 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 + */ +} 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; @@ -773,6 +666,16 @@ body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .feed { body.ttrss_main #headlines-frame[data-auto-catchup="true"] #headlines-spacer { height: 100vh; } +body.ttrss_main #headlines-frame .dijitCheckBox { + margin-right: 4px; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .title { + overflow: visible; + white-space: normal; +} +body.ttrss_main #headlines-frame[data-is-wide-screen="true"] .hl .feed { + display: none; +} body.ttrss_main #headlines-frame #headlines-spacer { margin-left: 1px; text-align: center; @@ -835,7 +738,7 @@ body.ttrss_main #toolbar-frame #toolbar { body.ttrss_main #toolbar-frame #toolbar .dijitSelect, body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode, body.ttrss_main #toolbar-frame #toolbar .dijitComboButton .dijitButtonNode { - border: 0px; + border: 0; } body.ttrss_main #toolbar-frame #toolbar i.net-alert, body.ttrss_main #toolbar-frame #toolbar .left i.icon-error { @@ -884,14 +787,14 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { } } body.ttrss_main #header { - border: 0; text-align: right; color: #ccc; - padding: 5px 5px 0px 0px; - margin: 0px; + padding: 5px 5px 0 0px; position: absolute; - right: 0px; - top: 0px; + border: 0; + margin: 0; + right: 0; + top: 0; z-index: 5; } body.ttrss_main #header i.net-alert, @@ -924,40 +827,11 @@ body.ttrss_main img.icon { vertical-align: middle; display: inline-block; } -body.ttrss_main .player { - display: inline-block; - color: #ccc; - font-size: 11px; - font-family: sans-serif; - border: 1px solid #ccc; - padding: 0px 4px 0px 4px; - margin: 0px 2px 0px 2px; - width: 50px; - text-align: center; - background: #333; -} -body.ttrss_main .player.playing { - color: #00c000; - border-color: #00c000; -} -body.ttrss_main .player:hover { - background: #222; - cursor: pointer; -} body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Actions { list-style-type: none; margin: 0; padding: 0; - /*max-height : 100px; - overflow : auto; - border-style : solid; - border-color : @border-default; - border-width : 1px 1px 1px 1px; - background-color : @default-bg; - margin : 0px 0px 5px 0px; - padding : 4px; - min-height : 16px;*/ } body.ttrss_main ul#filterDlg_Matches li, body.ttrss_main ul#filterDlg_Actions li { @@ -993,9 +867,6 @@ body.ttrss_main span.highlight { background-color: #ffff00; color: #cc90cc; } -body.ttrss_main #headlines-frame .dijitCheckBox { - margin-right: 4px; -} body.ttrss_main #feedEditDlg img.feedIcon { border: 1px solid #ccc; padding: 5px; @@ -1130,6 +1001,12 @@ body.ttrss_main ul.list-unstyled { body.ttrss_main .text-center { text-align: center; } +body.ttrss_main .text-right { + text-align: right; +} +body.ttrss_main .text-left { + text-align: left; +} body.ttrss_main #prefFilterTestResultList .preview { margin: 8px; } @@ -1139,11 +1016,39 @@ body.ttrss_main #prefFilterTestResultList .title { body.ttrss_main #prefFilterTestResultList .feed { color: #257aa7; } +body.ttrss_main, +body.ttrss_utility { + /*div.autocomplete { + position : absolute; + width : 250px; + background-color : @default-bg; + border :1px solid @border-default; + margin : 0px; + padding : 0px; + + ul { + list-style-type : none; + margin : 0px; + padding : 0px; + } + + ul li.selected { + background-color : darken(@default-bg, 10%); + } + + ul li { + list-style-type : none; + display : block; + margin : 0; + padding : 2px; + cursor : pointer; + } + }*/ +} body.ttrss_main .alert, body.ttrss_utility .alert { padding: 8px 35px 8px 14px; margin-bottom: 10px; - /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */ background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; @@ -1184,6 +1089,16 @@ body.ttrss_main .text-warning, body.ttrss_utility .text-warning { color: #a47e3c; } +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; +} body.ttrss_main .alert, body.ttrss_utility .alert, body.ttrss_main .alert h4, @@ -1233,43 +1148,6 @@ body.ttrss_utility hr { border: 0px solid #ccc; border-bottom-width: 1px; } -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; -} -body.ttrss_main div.autocomplete, -body.ttrss_utility div.autocomplete { - position: absolute; - width: 250px; - background-color: #333; - border: 1px solid #222; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul, -body.ttrss_utility div.autocomplete ul { - list-style-type: none; - margin: 0px; - padding: 0px; -} -body.ttrss_main div.autocomplete ul li.selected, -body.ttrss_utility div.autocomplete ul li.selected { - background-color: #1a1a1a; -} -body.ttrss_main div.autocomplete ul li, -body.ttrss_utility div.autocomplete ul li { - list-style-type: none; - display: block; - margin: 0; - padding: 2px; - cursor: pointer; -} ::selection { background: #257aa7; color: #333; @@ -1283,9 +1161,9 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ .cdm { /*i.material-icons { color : @color-icon;