diff options
Diffstat (limited to 'themes/compact.css')
| -rw-r--r-- | themes/compact.css | 214 |
1 files changed, 65 insertions, 149 deletions
diff --git a/themes/compact.css b/themes/compact.css index 00d6e22c6..2d4d878e6 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -70,12 +70,19 @@ body.ttrss_main div.post div.content video { max-width: 98%; height: auto; } -body.ttrss_main div.post div.content p { - hyphens: auto; +body.ttrss_main div.post div.content div.embed-responsive { + overflow: hidden; + padding-bottom: 56.25%; + position: relative; } -body.ttrss_main div.post div.content iframe { - min-width: 50%; - max-width: 98%; +body.ttrss_main div.post div.content div.embed-responsive iframe { + border: 0; + bottom: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } body.ttrss_main .inline-player { display: flex; @@ -661,13 +668,6 @@ body.ttrss_main #headlines-frame div.feed-title a { body.ttrss_main #headlines-frame div.feed-title a:hover { color: #257aa7; } -body.ttrss_main #headlines-frame.smooth-scroll { - scroll-behavior: smooth; -} -body.ttrss_main #headlines-frame.forbid-smooth-scroll, -body.ttrss_main #content-insert.forbid-smooth-scroll { - scroll-behavior: auto; -} body.ttrss_main #toolbar-frame_splitter { display: none; } @@ -754,7 +754,6 @@ body.ttrss_main #content-insert { line-height: 1.5; overflow: auto; -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; } body.ttrss_main img.feed-icon, body.ttrss_main img.icon { @@ -865,6 +864,22 @@ body.ttrss_main #feedEditDlg img.feedIcon { height: auto; width: auto; } +body.ttrss_main .dijitTooltipContents { + background: #1c5c7d; + color: #f5f5f5; +} +body.ttrss_main .dijitTooltipRight .dijitTooltipConnector { + border-right-color: #1c5c7d; +} +body.ttrss_main .dijitTooltipLeft .dijitTooltipConnector { + border-left-color: #1c5c7d; +} +body.ttrss_main .dijitTooltipBelow .dijitTooltipConnector { + border-bottom-color: #1c5c7d; +} +body.ttrss_main .dijitTooltipAbove .dijitTooltipConnector { + border-top-color: #1c5c7d; +} body.ttrss_main .dijitDialog h1:first-of-type, body.ttrss_main .dijitDialog h2:first-of-type, body.ttrss_main .dijitDialog h3:first-of-type, @@ -877,10 +892,10 @@ body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Ma body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .counterNode.marked { display: inline-block; } -body.ttrss_main[view-mode="marked"][hide-read-feeds="true"][hide-read-shows-special="true"] #feeds-holder #feedTree .dijitTreeRow:not(.dijitTreeRowSelected):not(.AlwaysVisible):not(.Special):not(.Has_Marked) { +body.ttrss_main[view-mode="marked"][hide-read-feeds="true"][hide-read-shows-special="true"] #feeds-holder #feedTree .dijitTreeRow:not(.AlwaysVisible):not(.Special):not(.Has_Marked) { display: none; } -body.ttrss_main[view-mode="marked"][hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.dijitTreeRowSelected):not(.AlwaysVisible):not(.Has_Marked) { +body.ttrss_main[view-mode="marked"][hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.AlwaysVisible):not(.Has_Marked) { display: none; } body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Unread .counterNode.unread { @@ -889,10 +904,10 @@ body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow. body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Has_Aux:not(.Unread) .counterNode.aux { display: inline-block; } -body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="true"] #feeds-holder #feedTree .dijitTreeRow:not(.dijitTreeRowSelected):not(.Unread):not(.AlwaysVisible):not(.Special) { +body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="true"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible):not(.Special) { display: none; } -body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.dijitTreeRowSelected):not(.Unread):not(.AlwaysVisible) { +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 #toolbar-headlines i.icon-syndicate { @@ -917,12 +932,10 @@ body.ttrss_main i.icon-no-feed { body.ttrss_main .dijitTreeRow.UpdatesDisabled .dijitTreeLabel { opacity: 0.5; } -body.ttrss_main #floatingTitle.marked i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .hl.marked .left i.marked-pic { color: #ffc069; } -body.ttrss_main #floatingTitle.published i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .hl.published .left i.pub-pic { color: #ff7c4b; @@ -1116,6 +1129,11 @@ video::-webkit-media-controls-overlay-play-button { .cdm i.material-icons { color: #777; } +.cdm .header { + position: sticky; + top: 0; + z-index: 3; +} .cdm .header, .cdm .footer { display: flex; @@ -1128,6 +1146,9 @@ video::-webkit-media-controls-overlay-play-button { margin: 0px 4px; vertical-align: middle; } +.cdm .header-sticky-guard { + height: 0; +} .cdm .header { align-items: center; } @@ -1207,9 +1228,6 @@ video::-webkit-media-controls-overlay-play-button { margin-top: 0px; margin-bottom: 0px; } -div.cdm.expanded div.header { - background: transparent ! important; -} div.cdm.expanded div.header a.title { font-size: 16px; color: #999; @@ -1267,15 +1285,19 @@ div.cdm.vgrlf .feed { font-style: italic; font-size: 11px; } -.cdm div.content-inner p { - /*max-width : 650px;*/ - -webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; +.cdm div.content-inner div.embed-responsive { + overflow: hidden; + padding-bottom: 56.25%; + position: relative; } -.cdm div.content-inner iframe { - min-width: 50%; - max-width: 98%; +.cdm div.content-inner div.embed-responsive iframe { + border: 0; + bottom: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } .cdm div.header span.author { white-space: nowrap; @@ -1288,115 +1310,6 @@ div.cdm.vgrlf .feed { display: inline-block; padding: 1px 4px 1px 4px; } -#main:not(.expandable) div#floatingTitle .collapse { - display: none; -} -div#floatingTitle { - position: absolute; - z-index: 5; - top: 0px; - right: 0px; - left: 0px; - border: 0px solid #ddd; - border-bottom-width: 1px; - background: white; - color: #555; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1); - align-items: center; -} -div#floatingTitle > * { - white-space: nowrap; - padding: 4px; -} -div#floatingTitle .left, -div#floatingTitle .right { - display: flex; - align-items: center; -} -div#floatingTitle .left i.material-icons, -div#floatingTitle .right i.material-icons { - margin-left: 2px; - font-size: 21px; - padding: 2px; - user-select: none; -} -div#floatingTitle .left i.icon-anchor, -div#floatingTitle .right i.icon-anchor { - margin-left: 0px; - margin-right: 1px; - padding: 0px; - color: #ccc; - cursor: pointer; -} -div#floatingTitle .excerpt { - display: none; -} -div#floatingTitle .collapse i.material-icons { - color: #257aa7; - cursor: pointer; -} -div#floatingTitle span.author { - color: #555; - font-size: 11px; - font-weight: normal; -} -div#floatingTitle a.title { - font-size: 16px; - color: #999; - transition: color 0.2s, background 0.2s; - font-weight: 600; - text-rendering: optimizelegibility; - font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; -} -div#floatingTitle div.feed { - padding-right: 10px; - color: #555; - font-weight: normal; - font-style: italic; - font-size: 11px; - white-space: nowrap; -} -div#floatingTitle div.feed a { - border-radius: 4px; - display: inline-block; - padding: 1px 4px 1px 4px; -} -div#floatingTitle span.updated { - padding-right: 10px; - white-space: nowrap; - color: #555; - font-size: 11px; -} -div#floatingTitle div.feed a { - color: #555; -} -div#floatingTitle span.titleWrap { - width: 100%; - white-space: normal; -} -div#floatingTitle .feed-title > * { - display: table-cell; - vertical-align: middle; -} -div#floatingTitle .feed-title a.title { - width: 100%; -} -div#floatingTitle .feed-title a.catchup { - text-align: right; - color: #555; - padding-right: 10px; - font-size: 11px; - white-space: nowrap; -} -div#floatingTitle .feed-title a.catchup:hover { - color: #257aa7; -} -div#floatingTitle.Unread a.title { - color: black; -} .cdm.expandable { background-color: #f5f5f5; border: 0px solid #ddd; @@ -1469,6 +1382,15 @@ div.cdm.expandable:not(.active) .content, div.cdm.expandable:not(.active) .collapse { display: none; } +div.cdm.expandable.active .header[stuck], +div.cdm.expanded .header[stuck] { + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + border: 0 solid #ddd; + border-bottom-width: 1px; + background: white ! important; + opacity: 0.9; + backdrop-filter: blur(6px); +} body.ttrss_prefs { background-color: #f5f5f5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -1594,12 +1516,12 @@ body.ttrss_prefs .phpinfo td.v { font-family: monospace; word-break: break-all; } -body.ttrss_prefs #filterNewRuleDlg .invalid, -body.ttrss_main #filterNewRuleDlg .invalid { +body.ttrss_prefs #filterNewRuleDlg .dijitValidationTextAreaError, +body.ttrss_main #filterNewRuleDlg .dijitValidationTextAreaError { background: #ffc0c0; } -body.ttrss_prefs #filterNewRuleDlg .valid, -body.ttrss_main #filterNewRuleDlg .valid { +body.ttrss_prefs #filterNewRuleDlg .dijitValidationTextArea:not(.dijitValidationTextAreaError), +body.ttrss_main #filterNewRuleDlg .dijitValidationTextArea:not(.dijitValidationTextAreaError) { background: #c0ffc0; } body.ttrss_prefs fieldset, @@ -1906,11 +1828,6 @@ body.ttrss_zoom div.post div.header .row { align-items: center; justify-content: space-between; } -body.ttrss_zoom div.post p { - -webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; -} body.ttrss_zoom div.post div.content { font-size: 15px; line-height: 1.5; @@ -1962,7 +1879,6 @@ body.ttrss_main.ttrss_index.flat div[id*=RROW] i.material-icons { } body.ttrss_main.ttrss_index.flat .hl, body.ttrss_main.ttrss_index.flat .post .header .title, -body.ttrss_main.ttrss_index.flat #floatingTitle a.title, body.ttrss_main.ttrss_index.flat .cdm .title { font-size: 13px ! important; } |