diff options
Diffstat (limited to 'themes')
| -rw-r--r-- | themes/compact.css | 692 | ||||
| -rw-r--r-- | themes/compact_night.css | 704 | ||||
| -rw-r--r-- | themes/light.css | 692 | ||||
| -rw-r--r-- | themes/light/cdm.less | 357 | ||||
| -rw-r--r-- | themes/light/defines.less | 12 | ||||
| -rw-r--r-- | themes/light/dijit_basic.less | 46 | ||||
| -rw-r--r-- | themes/light/prefs.less | 31 | ||||
| -rw-r--r-- | themes/light/tt-rss.less | 571 | ||||
| -rw-r--r-- | themes/light/utility.less | 2 | ||||
| -rw-r--r-- | themes/light/zoom.less | 19 | ||||
| -rw-r--r-- | themes/night.css | 704 | ||||
| -rw-r--r-- | themes/night_base.less | 6 | ||||
| -rw-r--r-- | themes/night_blue.css | 704 |
13 files changed, 2414 insertions, 2126 deletions
diff --git a/themes/compact.css b/themes/compact.css index 5a3a00cfe..ef4464ed3 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -15,67 +15,77 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; + + li { + margin : 0; + padding : 0; + } + }*/ } 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; + color: #555; + border: 0 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%; @@ -217,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; @@ -225,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; @@ -252,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; @@ -287,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; */ } @@ -312,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 { @@ -371,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; @@ -423,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; @@ -436,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 { @@ -527,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; } @@ -540,14 +491,15 @@ 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; - 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); @@ -559,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; @@ -587,6 +529,20 @@ 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; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando { left: -3px; height: 22px; @@ -635,54 +591,146 @@ 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: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)); + padding: 8px; + 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 + + .grid-span-row is manually expanded RROWs + */ +} +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *.grid-span-row, +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: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: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: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: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: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[is-vfeed="0"] .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: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: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: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:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, +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 a { + 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[data-is-vfeed="false"] .header .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .icon-feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .icon-feed { + display: none; +} +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; + color: #555; + font-size: 11px; + font-style: italic; } -body.ttrss_main #headlines-frame div.feed-title { +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; @@ -690,13 +738,13 @@ 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, 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 { @@ -710,7 +758,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; @@ -725,6 +773,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search { margin-left: 4px; } +@media (max-width: 768px) { + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate { + display: none; + } +} body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right { display: flex; align-items: center; @@ -739,20 +793,26 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { margin-right: 4px; color: #257aa7; } -@media (max-width: 992px) { +@media (max-width: 768px) { body.ttrss_main #toolbar-frame #toolbar #selected_prompt { display: none; } } +@media (max-width: 576px) { + body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown, + body.ttrss_main #toolbar-frame #toolbar .catchup-button { + display: none; + } +} body.ttrss_main #header { - border-width: 0px; 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, @@ -771,9 +831,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; @@ -786,59 +845,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 #headlines-frame.auto_catchup #headlines-spacer { - height: 100%; -} -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; 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 { @@ -874,9 +885,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; @@ -934,6 +942,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -970,10 +983,15 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { + cursor: pointer; + color: #777; } -body.ttrss_main i.icon-score { +body.ttrss_main .icon-grid-span { + display: none; +} +body.ttrss_main .icon-feed { cursor: pointer; } body.ttrss_main .panel { @@ -1004,6 +1022,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; } @@ -1013,11 +1037,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; @@ -1058,6 +1110,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, @@ -1107,41 +1169,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 .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; @@ -1155,16 +1182,13 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} -.cdm i.material-icons { - color: #777; -} -.cdm .header { - position: sticky; - top: 0; - z-index: 3; +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header, .cdm .footer { @@ -1175,13 +1199,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 > * { @@ -1204,7 +1231,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; @@ -1213,6 +1240,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; @@ -1221,30 +1272,37 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #777; +} .cdm .footer .left { flex-grow: 2; } .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } +.cdm .intermediate iframe, +.cdm .content-inner iframe { + max-width: 98%; + width: auto; + height: auto; +} .cdm .intermediate img, .cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; max-width: 98%; + width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1257,10 +1315,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; @@ -1268,61 +1326,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 { - background: white; +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; } -div.cdm.expanded.active div.header a.title { +.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%; @@ -1331,17 +1371,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; @@ -1379,10 +1408,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; @@ -1390,32 +1419,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[stuck], -div.cdm.expanded .header[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; @@ -1503,14 +1532,6 @@ body.ttrss_prefs fieldset.prefs .help-text { body.ttrss_prefs fieldset.prefs .help-text-bottom { margin-top: 10px; } -body.ttrss_prefs fieldset.plugin label.description { - width: 550px; - margin-right: 150px; - display: inline-block; -} -body.ttrss_prefs fieldset.plugin label.description .dijitCheckBox { - margin-right: 10px; -} body.ttrss_prefs table th { text-align: left; } @@ -1538,17 +1559,26 @@ body.ttrss_prefs ul.prefs-plugin-list li > * { body.ttrss_prefs ul.prefs-plugin-list li label.checkbox { display: flex; align-items: center; - min-width: 300px; cursor: pointer; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox.system { cursor: auto; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 300px; flex-grow: 2; display: inline-block; text-align: right; font-weight: bold; + margin-right: 20px; +} +@media (max-width: 992px) { + body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 200px ! important; + } + body.ttrss_prefs ul.prefs-plugin-list li .version { + display: none; + } } body.ttrss_prefs ul.prefs-plugin-list li .actions { flex-grow: 2; @@ -1603,6 +1633,9 @@ body.ttrss_prefs .event-log tr .errstr { word-break: break-all; white-space: pre-wrap; } +body.ttrss_prefs .event-log tr .filename { + word-break: break-all; +} body.ttrss_prefs .event-log tr .filename, body.ttrss_prefs .event-log tr .login, body.ttrss_prefs .event-log tr .timestamp { @@ -1787,7 +1820,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; @@ -1810,12 +1844,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; @@ -1825,6 +1860,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; @@ -1874,6 +1913,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 { @@ -1948,11 +1988,11 @@ body.ttrss_zoom div.post .attachments { display: none; } body.ttrss_zoom div.post div.header { - padding-bottom: 10px; - border: 0px solid #ddd; + padding-bottom: 8px; + border: 0 solid #ddd; border-bottom-width: 1px; background: white; - font-size: 12px; + font-size: 13px; color: #555; } body.ttrss_zoom div.post div.header .row { @@ -1962,32 +2002,36 @@ 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 div.header .row h1 { + margin-top: 0; + margin-bottom: 8px; +} +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; + padding-top: 8px; } -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; + padding-left: 8px; 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 { - margin: 5px 0px 5px 0px; - padding: 10px; +body.ttrss_zoom div.post .content pre { + padding: 8px; color: #555; font-family: monospace; font-size: 12px; diff --git a/themes/compact_night.css b/themes/compact_night.css index c9f9b12a8..0edf5ca1c 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -15,67 +15,77 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; + + li { + margin : 0; + padding : 0; + } + }*/ } 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; + color: #ccc; + border: 0 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: #777; + 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%; @@ -217,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; @@ -225,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; + 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; @@ -252,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; @@ -287,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; */ } @@ -312,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 { @@ -371,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; @@ -423,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; @@ -436,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 { @@ -527,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; } @@ -540,14 +491,15 @@ 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; - 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); @@ -559,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; @@ -587,6 +529,20 @@ 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; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando { left: -3px; height: 22px; @@ -635,54 +591,146 @@ 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: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)); + padding: 8px; + 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 + + .grid-span-row is manually expanded RROWs + */ +} +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *.grid-span-row, +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: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: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: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: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: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[is-vfeed="0"] .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: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: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: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:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, +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 a { + 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[data-is-vfeed="false"] .header .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .icon-feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .icon-feed { + display: none; +} +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 div.feed-title { +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; @@ -690,13 +738,13 @@ 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, 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 { @@ -710,7 +758,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; @@ -725,6 +773,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search { margin-left: 4px; } +@media (max-width: 768px) { + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate { + display: none; + } +} body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right { display: flex; align-items: center; @@ -739,20 +793,26 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { margin-right: 4px; color: #b87d2c; } -@media (max-width: 992px) { +@media (max-width: 768px) { body.ttrss_main #toolbar-frame #toolbar #selected_prompt { display: none; } } +@media (max-width: 576px) { + body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown, + body.ttrss_main #toolbar-frame #toolbar .catchup-button { + display: none; + } +} body.ttrss_main #header { - border-width: 0px; 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, @@ -771,9 +831,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; @@ -786,59 +845,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 #headlines-frame.auto_catchup #headlines-spacer { - height: 100%; -} -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; 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 { @@ -874,9 +885,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; @@ -934,6 +942,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -970,10 +983,15 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { + cursor: pointer; + color: #999; } -body.ttrss_main i.icon-score { +body.ttrss_main .icon-grid-span { + display: none; +} +body.ttrss_main .icon-feed { cursor: pointer; } body.ttrss_main .panel { @@ -1004,6 +1022,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; } @@ -1013,11 +1037,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; @@ -1058,6 +1110,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, @@ -1107,41 +1169,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 .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; @@ -1155,16 +1182,13 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} -.cdm i.material-icons { - color: #777; -} -.cdm .header { - position: sticky; - top: 0; - z-index: 3; +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header, .cdm .footer { @@ -1175,13 +1199,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 > * { @@ -1204,7 +1231,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; @@ -1213,6 +1240,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; @@ -1221,30 +1272,37 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #999; +} .cdm .footer .left { flex-grow: 2; } .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } +.cdm .intermediate iframe, +.cdm .content-inner iframe { + max-width: 98%; + width: auto; + height: auto; +} .cdm .intermediate img, .cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; max-width: 98%; + width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1257,10 +1315,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; @@ -1268,61 +1326,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 { - background: white; +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; } -div.cdm.expanded.active div.header a.title { +.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%; @@ -1331,17 +1371,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; @@ -1379,10 +1408,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; @@ -1390,32 +1419,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[stuck], -div.cdm.expanded .header[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; @@ -1503,14 +1532,6 @@ body.ttrss_prefs fieldset.prefs .help-text { body.ttrss_prefs fieldset.prefs .help-text-bottom { margin-top: 10px; } -body.ttrss_prefs fieldset.plugin label.description { - width: 550px; - margin-right: 150px; - display: inline-block; -} -body.ttrss_prefs fieldset.plugin label.description .dijitCheckBox { - margin-right: 10px; -} body.ttrss_prefs table th { text-align: left; } @@ -1538,17 +1559,26 @@ body.ttrss_prefs ul.prefs-plugin-list li > * { body.ttrss_prefs ul.prefs-plugin-list li label.checkbox { display: flex; align-items: center; - min-width: 300px; cursor: pointer; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox.system { cursor: auto; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 300px; flex-grow: 2; display: inline-block; text-align: right; font-weight: bold; + margin-right: 20px; +} +@media (max-width: 992px) { + body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 200px ! important; + } + body.ttrss_prefs ul.prefs-plugin-list li .version { + display: none; + } } body.ttrss_prefs ul.prefs-plugin-list li .actions { flex-grow: 2; @@ -1603,6 +1633,9 @@ body.ttrss_prefs .event-log tr .errstr { word-break: break-all; white-space: pre-wrap; } +body.ttrss_prefs .event-log tr .filename { + word-break: break-all; +} body.ttrss_prefs .event-log tr .filename, body.ttrss_prefs .event-log tr .login, body.ttrss_prefs .event-log tr .timestamp { @@ -1689,7 +1722,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; @@ -1712,12 +1746,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; @@ -1727,6 +1762,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; @@ -1776,6 +1815,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 { @@ -1939,11 +1979,11 @@ body.ttrss_zoom div.post .attachments { display: none; } body.ttrss_zoom div.post div.header { - padding-bottom: 10px; - border: 0px solid #222; + padding-bottom: 8px; + border: 0 solid #222; border-bottom-width: 1px; background: #333; - font-size: 12px; + font-size: 13px; color: #ccc; } body.ttrss_zoom div.post div.header .row { @@ -1953,32 +1993,36 @@ 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 div.header .row h1 { + margin-top: 0; + margin-bottom: 8px; +} +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; + padding-top: 8px; } -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; + padding-left: 8px; 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 { - margin: 5px 0px 5px 0px; - padding: 10px; +body.ttrss_zoom div.post .content pre { + padding: 8px; color: #ccc; font-family: monospace; font-size: 12px; @@ -2042,6 +2086,11 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox { color: #999999; } +body.flat.ttrss_main #headlines-frame { + /*.cdm.expanded { + background: @default-bg; + }*/ +} body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread), body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) { background: #333; @@ -2050,9 +2099,6 @@ body.flat.ttrss_main #headlines-frame .hl.Unread:not(.active):not(.Selected), body.flat.ttrss_main #headlines-frame .cdm.expandable.Unread:not(.active):not(.Selected) { background: #222; } -body.flat.ttrss_main #headlines-frame .cdm.expanded { - background: #333; -} body.flat.ttrss_main #headlines-frame .hl.Unread .title, body.flat.ttrss_main #headlines-frame .cdm.Unread .title { color: #e6e6e6; diff --git a/themes/light.css b/themes/light.css index 9a4ac98c0..821619446 100644 --- a/themes/light.css +++ b/themes/light.css @@ -15,67 +15,77 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; + + li { + margin : 0; + padding : 0; + } + }*/ } 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; + color: #555; + border: 0 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%; @@ -217,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; @@ -225,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; @@ -252,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; @@ -287,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; */ } @@ -312,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 { @@ -371,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; @@ -423,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; @@ -436,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 { @@ -527,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; } @@ -540,14 +491,15 @@ 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; - 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); @@ -559,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; @@ -587,6 +529,20 @@ 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; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando { left: -3px; height: 22px; @@ -635,54 +591,146 @@ 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: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)); + padding: 8px; + 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 + + .grid-span-row is manually expanded RROWs + */ +} +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *.grid-span-row, +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: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: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: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: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: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[is-vfeed="0"] .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: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: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: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:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, +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 a { + 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[data-is-vfeed="false"] .header .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .icon-feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .icon-feed { + display: none; +} +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; + color: #555; + font-size: 11px; + font-style: italic; } -body.ttrss_main #headlines-frame div.feed-title { +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; @@ -690,13 +738,13 @@ 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, 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 { @@ -710,7 +758,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; @@ -725,6 +773,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search { margin-left: 4px; } +@media (max-width: 768px) { + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate { + display: none; + } +} body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right { display: flex; align-items: center; @@ -739,20 +793,26 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { margin-right: 4px; color: #257aa7; } -@media (max-width: 992px) { +@media (max-width: 768px) { body.ttrss_main #toolbar-frame #toolbar #selected_prompt { display: none; } } +@media (max-width: 576px) { + body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown, + body.ttrss_main #toolbar-frame #toolbar .catchup-button { + display: none; + } +} body.ttrss_main #header { - border-width: 0px; 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, @@ -771,9 +831,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; @@ -786,59 +845,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 #headlines-frame.auto_catchup #headlines-spacer { - height: 100%; -} -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; 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 { @@ -874,9 +885,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; @@ -934,6 +942,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -970,10 +983,15 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { + cursor: pointer; + color: #777; } -body.ttrss_main i.icon-score { +body.ttrss_main .icon-grid-span { + display: none; +} +body.ttrss_main .icon-feed { cursor: pointer; } body.ttrss_main .panel { @@ -1004,6 +1022,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; } @@ -1013,11 +1037,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; @@ -1058,6 +1110,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, @@ -1107,41 +1169,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 .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; @@ -1155,16 +1182,13 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} -.cdm i.material-icons { - color: #777; -} -.cdm .header { - position: sticky; - top: 0; - z-index: 3; +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header, .cdm .footer { @@ -1175,13 +1199,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 > * { @@ -1204,7 +1231,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; @@ -1213,6 +1240,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; @@ -1221,30 +1272,37 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #777; +} .cdm .footer .left { flex-grow: 2; } .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } +.cdm .intermediate iframe, +.cdm .content-inner iframe { + max-width: 98%; + width: auto; + height: auto; +} .cdm .intermediate img, .cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; max-width: 98%; + width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1257,10 +1315,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; @@ -1268,61 +1326,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 { - background: white; +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; } -div.cdm.expanded.active div.header a.title { +.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%; @@ -1331,17 +1371,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; @@ -1379,10 +1408,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; @@ -1390,32 +1419,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[stuck], -div.cdm.expanded .header[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; @@ -1503,14 +1532,6 @@ body.ttrss_prefs fieldset.prefs .help-text { body.ttrss_prefs fieldset.prefs .help-text-bottom { margin-top: 10px; } -body.ttrss_prefs fieldset.plugin label.description { - width: 550px; - margin-right: 150px; - display: inline-block; -} -body.ttrss_prefs fieldset.plugin label.description .dijitCheckBox { - margin-right: 10px; -} body.ttrss_prefs table th { text-align: left; } @@ -1538,17 +1559,26 @@ body.ttrss_prefs ul.prefs-plugin-list li > * { body.ttrss_prefs ul.prefs-plugin-list li label.checkbox { display: flex; align-items: center; - min-width: 300px; cursor: pointer; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox.system { cursor: auto; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 300px; flex-grow: 2; display: inline-block; text-align: right; font-weight: bold; + margin-right: 20px; +} +@media (max-width: 992px) { + body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 200px ! important; + } + body.ttrss_prefs ul.prefs-plugin-list li .version { + display: none; + } } body.ttrss_prefs ul.prefs-plugin-list li .actions { flex-grow: 2; @@ -1603,6 +1633,9 @@ body.ttrss_prefs .event-log tr .errstr { word-break: break-all; white-space: pre-wrap; } +body.ttrss_prefs .event-log tr .filename { + word-break: break-all; +} body.ttrss_prefs .event-log tr .filename, body.ttrss_prefs .event-log tr .login, body.ttrss_prefs .event-log tr .timestamp { @@ -1787,7 +1820,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; @@ -1810,12 +1844,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; @@ -1825,6 +1860,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; @@ -1874,6 +1913,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 { @@ -1948,11 +1988,11 @@ body.ttrss_zoom div.post .attachments { display: none; } body.ttrss_zoom div.post div.header { - padding-bottom: 10px; - border: 0px solid #ddd; + padding-bottom: 8px; + border: 0 solid #ddd; border-bottom-width: 1px; background: white; - font-size: 12px; + font-size: 13px; color: #555; } body.ttrss_zoom div.post div.header .row { @@ -1962,32 +2002,36 @@ 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 div.header .row h1 { + margin-top: 0; + margin-bottom: 8px; +} +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; + padding-top: 8px; } -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; + padding-left: 8px; 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 { - margin: 5px 0px 5px 0px; - padding: 10px; +body.ttrss_zoom div.post .content pre { + padding: 8px; color: #555; font-family: monospace; font-size: 12px; diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 3a5b602f2..4bb1c6064 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -1,13 +1,7 @@ .cdm { - i.material-icons { + /*i.material-icons { color : @color-icon; - } - - .header { - position: sticky; - top : 0; - z-index: 3; - } + }*/ .header, .footer { display : flex; @@ -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 { @@ -70,6 +94,10 @@ clear : both; align-items : center; + i.material-icons { + color : @color-icon; + } + .left { flex-grow : 2; } @@ -78,6 +106,7 @@ .intermediate { margin-top : 10px; margin-left : 10px; + line-height : 1.5; } .content-inner { @@ -86,112 +115,100 @@ font-size : 16px; } + .intermediate iframe, + .content-inner iframe { + max-width : 98%; + width : auto; + height : auto; + } + .intermediate img, .intermediate video, .content-inner img, .content-inner video { border-width : 0px; max-width : 98%; + width : auto; height : auto; } -} - -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ - - .collapse, .excerpt { - display : none; - } - .titleWrap { - white-space : normal; - } - - .footer { - border: 0px solid @border-default; - border-bottom-width: 1px; - } + &.expanded { - > hr { - margin-top : 0px; - margin-bottom : 0px; - } + .collapse, .excerpt { + display : none; + } -} + .titleWrap { + white-space : normal; + } -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; -} + .footer { + border: 0px solid @border-default; + border-bottom-width: 1px; + } -div.cdm.expanded.active { - background : white; -} + > hr { + margin-top : 0; + margin-bottom : 0; + } -div.cdm.expanded.active div.header a.title { - color : @color-link; -} + .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.Unread div.header a.title { - color : black; -} + &.active, + &.Unread { + .content { + color : black; + } + } -div.cdm.expanded div.content { - color : @default-text; -} + &.active { + .header .title { + color : @color-link; + } + } -div.cdm.expanded.Unread div.content { - color : black; -} + &.Unread { + .header .title { + color : black; + } + } -div.cdm.active div.content { - color : black; -} + .content { + color : @default-text; + } + } -div.cdm.vgrlf .feed { - display : none; -} + &.vgrlf .feed { + display : none; + } -.cdm { - div.feed-title { + .feed-title { border: 0px solid @color-link; border-bottom-width: 1px; padding: 5px 3px 5px 5px; - } - 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; - } + a.title { + color: @default-text; + font-weight: bold; + } - div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; - } + a { + color: @default-text; + } - div.header div.feed, div.header div.feed a { - vertical-align: middle; - color: @default-text; - font-weight: normal; - font-style: italic; - font-size: 11px; + a:hover { + color: @color-link; + } } - div.content-inner div.embed-responsive { + .content-inner .embed-responsive { overflow : hidden; padding-bottom : @embed-responsive-padding; position : relative; @@ -207,115 +224,99 @@ div.cdm.vgrlf .feed { } } - div.header span.author { - white-space : nowrap; - color : @default-text; - font-size : 11px; - font-weight : normal; - } - - .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; - } + &.expandable { + background-color : @color-panel-bg; + border: 0px solid @border-default; + border-bottom-width: 1px; - div.header span.titleWrap { - white-space : nowrap; - text-overflow : ellipsis; - overflow : hidden; - } + > hr { + display : none; + } - .excerpt { - white-space : nowrap; - font-size : 11px; - color : #999; - font-weight : normal; - cursor : pointer; - } + 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; + } -.cdm.expandable:not(.active) { - user-select : none; -} + &:not(.active) { + user-select : none; + } -.cdm.expandable.Unread { - background : white; -} + &.Unread { + background : white; + } -.cdm.expandable.Selected:not(.active) { - background : desaturate(@color-accent, 25%); + &.Selected:not(.active) { + background : desaturate(@color-accent, 25%); - a, - .header a.title, - span { - color : white; - } -} + a, + .header a.title, + span { + color : white; + } + } -.cdm.expandable.active { - background : white ! important; -} + &.active { + background : white ! important; + } -div.cdm.expandable.active div.header span.titleWrap { - white-space : normal; -} + &.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; -} + .header a.title { + font-weight : 600; + color : @default-text; + font-size : @font-size-content; + 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; -} + &.Unread div.header a.title { + color : black; + } -div.cdm.expandable.active { - .collapse i.material-icons { - color : @color-accent; - cursor : pointer; - } + &.active { + .collapse i.material-icons { + color : @color-accent; + cursor : pointer; + } - .excerpt { - display: none; - } + .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.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; + &:not(.active) { + cursor : pointer; - .content, .collapse { - display : none; + .content, .collapse { + display : none; + } + } } -} -div.cdm { &.expandable.active, &.expanded { - .header[stuck] { + .header[data-is-stuck] { box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1); border: 0 solid @border-default; border-bottom-width: 1px; diff --git a/themes/light/defines.less b/themes/light/defines.less index dd3f62251..db86ee0c0 100644 --- a/themes/light/defines.less +++ b/themes/light/defines.less @@ -14,8 +14,20 @@ @border-default : #ddd; @default-text: #555; @color-icon: #777; +@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; +@font-size-content: 14px; + +@breakpoint-sm: 576px; +@breakpoint-md: 768px; +@breakpoint-lg: 992px; +@breakpoint-xl: 1200px; @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/prefs.less b/themes/light/prefs.less index 15345bcb4..587adfcf6 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; @@ -94,18 +94,6 @@ body.ttrss_prefs { } } - fieldset.plugin { - label.description { - width : 550px; - margin-right : 150px; - display : inline-block; - - .dijitCheckBox { - margin-right : 10px; - } - } - } - table { th { text-align : left; @@ -140,7 +128,6 @@ body.ttrss_prefs { label.checkbox { display : flex; align-items : center; - min-width : 300px; cursor : pointer; &.system { @@ -148,10 +135,22 @@ body.ttrss_prefs { } .name { + min-width : 300px; flex-grow: 2; display: inline-block; text-align: right; font-weight : bold; + margin-right : 20px; + } + } + + @media (max-width: @breakpoint-lg) { + label.checkbox .name { + min-width : 200px ! important; + } + + .version { + display : none; } } @@ -219,6 +218,10 @@ body.ttrss_prefs { white-space : pre-wrap; } + .filename { + word-break: break-all; + } + .filename, .login, .timestamp { color : @default-text; } diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 36b73b4f4..c262ce9af 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -2,21 +2,21 @@ 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 { outline: none; } - div.post { - padding : 0px; - font-size : 13px; + .post { + padding : 0; + font-size : @font-size-toolbar; - div.header { + .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,61 +261,57 @@ 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 : 11px; + 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; - font-size : 11px; + font-size : @font-size-small; font-style : italic; font-weight : normal; color : @default-text; - } - span.feed a:hover { - color : @color-accent; + &:hover { + color : @color-accent; + } } - span.updated { + .updated { color : @default-text; text-align : right; - font-size : 11px; + 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; - } + &.vgrlf .feed { + display : none; + } - .hl.Unread div.title a { - color : black; - } + &.Unread { + background : white; + } - .hl.active div.title a { - color : @color-accent; - /* text-shadow : 1px 1px 2px #fff; */ - } + &.Unread .title a { + color : black; + } - .hl.active { - background : @color-accent ! important; - } + &.active .title a { + color : @color-accent; + /* text-shadow : 1px 1px 2px #fff; */ + } - .hl.active, - .hl.Selected { - color : white; - background : desaturate(@color-accent, 25%); + &.active { + background : @color-accent ! important; + } - a, - .feed a, - .hl-content a.title, - span { + &.active, + &.Selected { color : white; - } - } + background : desaturate(@color-accent, 25%); - .hl.Grayed { - color : #909090; + a, + .feed a, + .hl-content a.title, + span { + color : white; + } + } } #content-insert blockquote, @@ -413,7 +409,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; @@ -423,56 +419,19 @@ body.ttrss_main { i.marked-pic, i.pub-pic { cursor : pointer; - color : #ccc; - } - - div.errorExplained { - border : 1px solid @border-default; - margin : 5px 0px 5px 0px; - padding : 5px; + color : @color-hl-icon; } - 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; - - li { - display : flex; - align-items : center; - - > * { - margin : 2px; - } - } - } - - - .browseFeedList span.subscribers { - color : #808080; - } - - ul.compact { - list-style-type : none; - margin : 0px; - padding : 0px; + margin : 0; + padding : 0; li { - margin : 0px; - padding : 0px; + margin : 0; + padding : 0; } - } - - .noborder { - border-width : 0px; - } + }*/ #overlay { background : @default-bg; @@ -489,32 +448,15 @@ body.ttrss_main { margin : 1em; } - div.loadingPrompt { - padding : 1em; - text-align : center; - font-weight : bold; - } - div.whiteBox { 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; } - 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; + } } } @@ -600,7 +542,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; @@ -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; @@ -622,19 +558,20 @@ 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 { - 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); @@ -646,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 : 9px; + 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; @@ -674,6 +600,23 @@ 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 + .dijitTreeRow[data-feed-id="-3"][data-is-cat="false"] .counterNode.unread { + background-color: darken(@color-checked, 15%); + border-color: darken(@color-checked, 25%); } .dijitTreeNode .loadingExpando { @@ -735,50 +678,165 @@ body.ttrss_main { font-weight : bold; color : @color-accent; } - } } - #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; - #headlines-frame[is-vfeed="0"] .header .feed { - display : none; + > * { + /* 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 + + .grid-span-row is manually expanded RROWs + */ + &.grid-span-row, + &: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 { + a { + 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 { - border: 0px solid @color-link; - border-bottom-width: 1px; - padding: 5px 8px; + &[data-is-vfeed="false"] { + .header, + .hl { + .feed, .icon-feed { + display : none; + } + } } - div.feed-title a.title { - color: @default-text; - font-weight: bold; + &[data-auto-catchup="true"] #headlines-spacer { + height : 100vh; } - div.feed-title a { - color: @default-text; + .dijitCheckBox { + margin-right : 4px; } - div.feed-title a:hover { - color: @color-link; + &[data-is-wide-screen="true"] { + .title { + overflow: visible; + white-space: normal; + } + + .hl .feed { + display: none; + } + } + + #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; + + a.title { + color: @default-text; + font-weight: bold; + } + + a { + color: @default-text; + + &:hover { + color: @color-link; + } + } } span.hlMenuAttach { -webkit-touch-callout: none; -webkit-user-select: none; + user-select: none; } } @@ -787,15 +845,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; @@ -803,13 +861,13 @@ body.ttrss_main { flex-direction : row; flex-wrap : nowrap; color : @default-text; - font-size : 12px; + font-size : @font-size-toolbar; align-items : center; .dijitSelect, .dijitDropDownButton .dijitButtonNode, .dijitComboButton .dijitButtonNode { - border : 0px; + border : 0; } i.net-alert, .left i.icon-error { @@ -826,7 +884,7 @@ body.ttrss_main { } #toolbar-headlines { - font-size : 12px; + font-size : @font-size-toolbar; background: transparent; padding-right : 4px; flex-grow : 2; @@ -840,6 +898,12 @@ body.ttrss_main { .feed_title, .cancel_search { margin-left : 4px; } + + @media (max-width: @breakpoint-md) { + .feed_title, i.icon-syndicate { + display : none; + } + } } .right { @@ -860,23 +924,31 @@ body.ttrss_main { color : @color-accent; } - @media (max-width: 992px) { + @media (max-width: @breakpoint-md) { #selected_prompt { display : none; } } + + @media (max-width: @breakpoint-sm) { + .select-articles-dropdown, + .catchup-button { + display : none; + } + } + } } #header { - border-width : 0px; 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 { @@ -899,9 +971,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; @@ -915,64 +986,10 @@ body.ttrss_main { display : inline-block; } - .player { - display : inline-block; - color : @default-text; - font-size : 11px; - 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; - } - - #headlines-frame.auto_catchup #headlines-spacer { - height : 100%; - } - - #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; 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 { @@ -1018,10 +1035,6 @@ body.ttrss_main { color : #cc90cc; } - #headlines-frame .dijitCheckBox { - margin-right : 4px; - } - #feedEditDlg img.feedIcon { border : 1px solid #ccc; padding : 5px; @@ -1110,6 +1123,7 @@ body.ttrss_main { border: 1px solid @color-published; border-radius: 4px; } + #feed_current_unread { margin-left : 8px; font-weight : bold; @@ -1148,11 +1162,21 @@ body.ttrss_main { color : #500; } - .score-neutral i.icon-score { + /*.score-neutral i.icon-score { opacity : 0.5; + }*/ + + i.icon-score, i.icon-grid-span { + cursor : pointer; + color : @color-icon; + } + + // only shown in grid mode + .icon-grid-span { + display : none; } - i.icon-score { + .icon-feed { cursor : pointer; } @@ -1192,6 +1216,14 @@ body.ttrss_main { text-align : center; } + .text-right { + text-align : right; + } + + .text-left { + text-align : left; + } + #prefFilterTestResultList { .preview { margin : 8px; @@ -1212,7 +1244,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; @@ -1254,6 +1285,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; @@ -1300,15 +1339,7 @@ body.ttrss_main, body.ttrss_utility { border-bottom-width: 1px; } - .text-muted { - color : @default-text; - } - - .small { - font-size : 11px; - } - - div.autocomplete { + /*div.autocomplete { position : absolute; width : 250px; background-color : @default-bg; @@ -1333,7 +1364,7 @@ body.ttrss_main, body.ttrss_utility { padding : 2px; cursor : pointer; } - } + }*/ } @@ -1354,7 +1385,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/light/zoom.less b/themes/light/zoom.less index e599bc447..3318482c2 100644 --- a/themes/light/zoom.less +++ b/themes/light/zoom.less @@ -12,11 +12,11 @@ body.ttrss_zoom { } div.header { - padding-bottom : 10px; - border: 0px solid @border-default; + padding-bottom : 8px; + border: 0 solid @border-default; border-bottom-width: 1px; background : @default-bg; - font-size : 12px; + font-size : @font-size-toolbar; color : @default-text; .row { @@ -25,14 +25,20 @@ body.ttrss_zoom { flex-wrap : nowrap; align-items : center; justify-content : space-between; + + h1 { + margin-top : 0; + margin-bottom : 8px; + } } } - div.content { + .content { font-size : 15px; line-height : 1.5; border-width : 0; padding : 0; + padding-top : 8px; img, video { max-width : 760px; @@ -42,7 +48,7 @@ body.ttrss_zoom { blockquote { margin : 5px 0px 5px 0px; color : @default-text; - padding-left : 10px; + padding-left : 8px; border: 0px solid @border-default; border-left-width: 4px; } @@ -54,8 +60,7 @@ body.ttrss_zoom { } pre { - margin : 5px 0px 5px 0px; - padding : 10px; + padding : 8px; color : @default-text; font-family : monospace; font-size : 12px; diff --git a/themes/night.css b/themes/night.css index 22eb17e9f..39a50b9fa 100644 --- a/themes/night.css +++ b/themes/night.css @@ -16,67 +16,77 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; + + li { + margin : 0; + padding : 0; + } + }*/ } 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; + color: #ccc; + border: 0 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: #777; + 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%; @@ -218,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; @@ -226,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: #777; + 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; @@ -253,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; @@ -288,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; */ } @@ -313,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 { @@ -372,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; @@ -424,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; @@ -437,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 { @@ -528,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; } @@ -541,14 +492,15 @@ 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; - 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); @@ -560,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; @@ -588,6 +530,20 @@ 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; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando { left: -3px; height: 22px; @@ -636,54 +592,146 @@ 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: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)); + padding: 8px; + 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 + + .grid-span-row is manually expanded RROWs + */ +} +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *.grid-span-row, +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: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: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: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: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: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[is-vfeed="0"] .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: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: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: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:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, +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 a { + 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[data-is-vfeed="false"] .header .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .icon-feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .icon-feed { + display: none; +} +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 div.feed-title { +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; @@ -691,13 +739,13 @@ 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, 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 { @@ -711,7 +759,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; @@ -726,6 +774,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search { margin-left: 4px; } +@media (max-width: 768px) { + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate { + display: none; + } +} body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right { display: flex; align-items: center; @@ -740,20 +794,26 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { margin-right: 4px; color: #b87d2c; } -@media (max-width: 992px) { +@media (max-width: 768px) { body.ttrss_main #toolbar-frame #toolbar #selected_prompt { display: none; } } +@media (max-width: 576px) { + body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown, + body.ttrss_main #toolbar-frame #toolbar .catchup-button { + display: none; + } +} body.ttrss_main #header { - border-width: 0px; 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, @@ -772,9 +832,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; @@ -787,59 +846,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 #headlines-frame.auto_catchup #headlines-spacer { - height: 100%; -} -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; 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 { @@ -875,9 +886,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; @@ -935,6 +943,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -971,10 +984,15 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { + cursor: pointer; + color: #999; } -body.ttrss_main i.icon-score { +body.ttrss_main .icon-grid-span { + display: none; +} +body.ttrss_main .icon-feed { cursor: pointer; } body.ttrss_main .panel { @@ -1005,6 +1023,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; } @@ -1014,11 +1038,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; @@ -1059,6 +1111,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, @@ -1108,41 +1170,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 .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; @@ -1156,16 +1183,13 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} -.cdm i.material-icons { - color: #777; -} -.cdm .header { - position: sticky; - top: 0; - z-index: 3; +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header, .cdm .footer { @@ -1176,13 +1200,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 > * { @@ -1205,7 +1232,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; @@ -1214,6 +1241,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; @@ -1222,30 +1273,37 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #999; +} .cdm .footer .left { flex-grow: 2; } .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } +.cdm .intermediate iframe, +.cdm .content-inner iframe { + max-width: 98%; + width: auto; + height: auto; +} .cdm .intermediate img, .cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; max-width: 98%; + width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1258,10 +1316,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; @@ -1269,61 +1327,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 { - background: white; +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; } -div.cdm.expanded.active div.header a.title { +.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%; @@ -1332,17 +1372,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; @@ -1380,10 +1409,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; @@ -1391,32 +1420,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[stuck], -div.cdm.expanded .header[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; @@ -1504,14 +1533,6 @@ body.ttrss_prefs fieldset.prefs .help-text { body.ttrss_prefs fieldset.prefs .help-text-bottom { margin-top: 10px; } -body.ttrss_prefs fieldset.plugin label.description { - width: 550px; - margin-right: 150px; - display: inline-block; -} -body.ttrss_prefs fieldset.plugin label.description .dijitCheckBox { - margin-right: 10px; -} body.ttrss_prefs table th { text-align: left; } @@ -1539,17 +1560,26 @@ body.ttrss_prefs ul.prefs-plugin-list li > * { body.ttrss_prefs ul.prefs-plugin-list li label.checkbox { display: flex; align-items: center; - min-width: 300px; cursor: pointer; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox.system { cursor: auto; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 300px; flex-grow: 2; display: inline-block; text-align: right; font-weight: bold; + margin-right: 20px; +} +@media (max-width: 992px) { + body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 200px ! important; + } + body.ttrss_prefs ul.prefs-plugin-list li .version { + display: none; + } } body.ttrss_prefs ul.prefs-plugin-list li .actions { flex-grow: 2; @@ -1604,6 +1634,9 @@ body.ttrss_prefs .event-log tr .errstr { word-break: break-all; white-space: pre-wrap; } +body.ttrss_prefs .event-log tr .filename { + word-break: break-all; +} body.ttrss_prefs .event-log tr .filename, body.ttrss_prefs .event-log tr .login, body.ttrss_prefs .event-log tr .timestamp { @@ -1690,7 +1723,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; @@ -1713,12 +1747,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; @@ -1728,6 +1763,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; @@ -1777,6 +1816,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 { @@ -1940,11 +1980,11 @@ body.ttrss_zoom div.post .attachments { display: none; } body.ttrss_zoom div.post div.header { - padding-bottom: 10px; - border: 0px solid #222; + padding-bottom: 8px; + border: 0 solid #222; border-bottom-width: 1px; background: #333; - font-size: 12px; + font-size: 13px; color: #ccc; } body.ttrss_zoom div.post div.header .row { @@ -1954,32 +1994,36 @@ 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 div.header .row h1 { + margin-top: 0; + margin-bottom: 8px; +} +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; + padding-top: 8px; } -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; + padding-left: 8px; 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 { - margin: 5px 0px 5px 0px; - padding: 10px; +body.ttrss_zoom div.post .content pre { + padding: 8px; color: #ccc; font-family: monospace; font-size: 12px; @@ -2043,6 +2087,11 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox { color: #999999; } +body.flat.ttrss_main #headlines-frame { + /*.cdm.expanded { + background: @default-bg; + }*/ +} body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread), body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) { background: #333; @@ -2051,9 +2100,6 @@ body.flat.ttrss_main #headlines-frame .hl.Unread:not(.active):not(.Selected), body.flat.ttrss_main #headlines-frame .cdm.expandable.Unread:not(.active):not(.Selected) { background: #222; } -body.flat.ttrss_main #headlines-frame .cdm.expanded { - background: #333; -} body.flat.ttrss_main #headlines-frame .hl.Unread .title, body.flat.ttrss_main #headlines-frame .cdm.Unread .title { color: #e6e6e6; diff --git a/themes/night_base.less b/themes/night_base.less index 76ea04a7f..78056d710 100644 --- a/themes/night_base.less +++ b/themes/night_base.less @@ -9,7 +9,7 @@ @default-fg: @default-text; @border-default: #222; @default-bg : #333; - +@color-icon: #999; @border-light : #666; @default-text: #ccc; @@ -102,9 +102,9 @@ body.flat.ttrss_main { background : @color-panel-bg; } - .cdm.expanded { + /*.cdm.expanded { background: @default-bg; - } + }*/ .hl.Unread .title, .cdm.Unread .title { diff --git a/themes/night_blue.css b/themes/night_blue.css index 8a3d7f8a5..031456b01 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -16,67 +16,77 @@ body.ttrss_main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; + /*ul.compact { + list-style-type : none; + margin : 0; + padding : 0; + + li { + margin : 0; + padding : 0; + } + }*/ } 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; + color: #ccc; + border: 0 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: #777; + 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%; @@ -218,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; @@ -226,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: #777; + 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; @@ -253,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; @@ -288,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; */ } @@ -313,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 { @@ -372,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; @@ -424,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; @@ -437,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 { @@ -528,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; } @@ -541,14 +492,15 @@ 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; - 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); @@ -560,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; @@ -588,6 +530,20 @@ 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; +} body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando { left: -3px; height: 22px; @@ -636,54 +592,146 @@ 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: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)); + padding: 8px; + 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 + + .grid-span-row is manually expanded RROWs + */ +} +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] > *.grid-span-row, +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: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: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: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: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: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[is-vfeed="0"] .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: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: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: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:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, +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 a { + 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[data-is-vfeed="false"] .header .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .header .icon-feed, +body.ttrss_main #headlines-frame[data-is-vfeed="false"] .hl .icon-feed { + display: none; +} +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 div.feed-title { +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; @@ -691,13 +739,13 @@ 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, 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 { @@ -711,7 +759,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; @@ -726,6 +774,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search { margin-left: 4px; } +@media (max-width: 768px) { + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title, + body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate { + display: none; + } +} body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right { display: flex; align-items: center; @@ -740,20 +794,26 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt { margin-right: 4px; color: #257aa7; } -@media (max-width: 992px) { +@media (max-width: 768px) { body.ttrss_main #toolbar-frame #toolbar #selected_prompt { display: none; } } +@media (max-width: 576px) { + body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown, + body.ttrss_main #toolbar-frame #toolbar .catchup-button { + display: none; + } +} body.ttrss_main #header { - border-width: 0px; 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, @@ -772,9 +832,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; @@ -787,59 +846,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 #headlines-frame.auto_catchup #headlines-spacer { - height: 100%; -} -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; 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 { @@ -875,9 +886,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; @@ -935,6 +943,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -971,10 +984,15 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; +body.ttrss_main i.icon-score, +body.ttrss_main i.icon-grid-span { + cursor: pointer; + color: #999; } -body.ttrss_main i.icon-score { +body.ttrss_main .icon-grid-span { + display: none; +} +body.ttrss_main .icon-feed { cursor: pointer; } body.ttrss_main .panel { @@ -1005,6 +1023,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; } @@ -1014,11 +1038,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; @@ -1059,6 +1111,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, @@ -1108,41 +1170,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 .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; @@ -1156,16 +1183,13 @@ body.ttrss_utility div.autocomplete ul li { ::-webkit-scrollbar-track { background-color: #eee; } -video::-webkit-media-controls-overlay-play-button { - display: none; -} -.cdm i.material-icons { - color: #777; -} -.cdm .header { - position: sticky; - top: 0; - z-index: 3; +/*video::-webkit-media-controls-overlay-play-button { + display: none; +}*/ +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header, .cdm .footer { @@ -1176,13 +1200,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 > * { @@ -1205,7 +1232,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; @@ -1214,6 +1241,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; @@ -1222,30 +1273,37 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #999; +} .cdm .footer .left { flex-grow: 2; } .cdm .intermediate { margin-top: 10px; margin-left: 10px; + line-height: 1.5; } .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } +.cdm .intermediate iframe, +.cdm .content-inner iframe { + max-width: 98%; + width: auto; + height: auto; +} .cdm .intermediate img, .cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; max-width: 98%; + width: auto; height: auto; } -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ -} .cdm.expanded .collapse, .cdm.expanded .excerpt { display: none; @@ -1258,10 +1316,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; @@ -1269,61 +1327,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 { - background: white; +.cdm.expanded.active .content, +.cdm.expanded.Unread .content { + color: black; } -div.cdm.expanded.active div.header a.title { +.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%; @@ -1332,17 +1372,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; @@ -1380,10 +1409,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; @@ -1391,32 +1420,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[stuck], -div.cdm.expanded .header[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; @@ -1504,14 +1533,6 @@ body.ttrss_prefs fieldset.prefs .help-text { body.ttrss_prefs fieldset.prefs .help-text-bottom { margin-top: 10px; } -body.ttrss_prefs fieldset.plugin label.description { - width: 550px; - margin-right: 150px; - display: inline-block; -} -body.ttrss_prefs fieldset.plugin label.description .dijitCheckBox { - margin-right: 10px; -} body.ttrss_prefs table th { text-align: left; } @@ -1539,17 +1560,26 @@ body.ttrss_prefs ul.prefs-plugin-list li > * { body.ttrss_prefs ul.prefs-plugin-list li label.checkbox { display: flex; align-items: center; - min-width: 300px; cursor: pointer; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox.system { cursor: auto; } body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 300px; flex-grow: 2; display: inline-block; text-align: right; font-weight: bold; + margin-right: 20px; +} +@media (max-width: 992px) { + body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name { + min-width: 200px ! important; + } + body.ttrss_prefs ul.prefs-plugin-list li .version { + display: none; + } } body.ttrss_prefs ul.prefs-plugin-list li .actions { flex-grow: 2; @@ -1604,6 +1634,9 @@ body.ttrss_prefs .event-log tr .errstr { word-break: break-all; white-space: pre-wrap; } +body.ttrss_prefs .event-log tr .filename { + word-break: break-all; +} body.ttrss_prefs .event-log tr .filename, body.ttrss_prefs .event-log tr .login, body.ttrss_prefs .event-log tr .timestamp { @@ -1690,7 +1723,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; @@ -1713,12 +1747,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; @@ -1728,6 +1763,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; @@ -1777,6 +1816,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 { @@ -1940,11 +1980,11 @@ body.ttrss_zoom div.post .attachments { display: none; } body.ttrss_zoom div.post div.header { - padding-bottom: 10px; - border: 0px solid #222; + padding-bottom: 8px; + border: 0 solid #222; border-bottom-width: 1px; background: #333; - font-size: 12px; + font-size: 13px; color: #ccc; } body.ttrss_zoom div.post div.header .row { @@ -1954,32 +1994,36 @@ 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 div.header .row h1 { + margin-top: 0; + margin-bottom: 8px; +} +body.ttrss_zoom div.post .content { font-size: 15px; line-height: 1.5; border-width: 0; padding: 0; + padding-top: 8px; } -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; + padding-left: 8px; 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 { - margin: 5px 0px 5px 0px; - padding: 10px; +body.ttrss_zoom div.post .content pre { + padding: 8px; color: #ccc; font-family: monospace; font-size: 12px; @@ -2043,6 +2087,11 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox { color: #999999; } +body.flat.ttrss_main #headlines-frame { + /*.cdm.expanded { + background: @default-bg; + }*/ +} body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread), body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) { background: #333; @@ -2051,9 +2100,6 @@ body.flat.ttrss_main #headlines-frame .hl.Unread:not(.active):not(.Selected), body.flat.ttrss_main #headlines-frame .cdm.expandable.Unread:not(.active):not(.Selected) { background: #222; } -body.flat.ttrss_main #headlines-frame .cdm.expanded { - background: #333; -} body.flat.ttrss_main #headlines-frame .hl.Unread .title, body.flat.ttrss_main #headlines-frame .cdm.Unread .title { color: #e6e6e6; |