mirror of
https://git.tt-rss.org/git/tt-rss.git
synced 2025-12-13 08:25:55 +00:00
remove floating title, use position: sticky for cdm headers instead
This commit is contained in:
Andrew Dolgov
@@ -926,12 +926,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;
|
||||
@@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm i.material-icons {
|
||||
color: #777;
|
||||
}
|
||||
.cdm .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.cdm .header,
|
||||
.cdm .footer {
|
||||
display: flex;
|
||||
@@ -1137,6 +1139,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;
|
||||
}
|
||||
@@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm .header input {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
.cdm .header[stuck] {
|
||||
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
border: 0 solid #ddd;
|
||||
border-bottom-width: 1px;
|
||||
background: white ! important;
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.cdm .footer {
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
@@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
div.cdm.expanded div.header {
|
||||
div.cdm.expanded .header:not([stuck]) {
|
||||
background: transparent ! important;
|
||||
}
|
||||
div.cdm.expanded div.header a.title {
|
||||
@@ -1287,115 +1300,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;
|
||||
@@ -1956,7 +1860,6 @@ body.ttrss_main.ttrss_index.flat div[id*=RROW] i.material-icons {
|
||||
}
|
||||
body.ttrss_main.ttrss_index.flat .hl,
|
||||
body.ttrss_main.ttrss_index.flat .post .header .title,
|
||||
body.ttrss_main.ttrss_index.flat #floatingTitle a.title,
|
||||
body.ttrss_main.ttrss_index.flat .cdm .title {
|
||||
font-size: 13px ! important;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -22,7 +22,6 @@ body.ttrss_main.ttrss_index.flat {
|
||||
|
||||
.hl,
|
||||
.post .header .title,
|
||||
#floatingTitle a.title,
|
||||
.cdm .title {
|
||||
font-size : 13px ! important;
|
||||
}
|
||||
|
||||
@@ -926,12 +926,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;
|
||||
@@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm i.material-icons {
|
||||
color: #777;
|
||||
}
|
||||
.cdm .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.cdm .header,
|
||||
.cdm .footer {
|
||||
display: flex;
|
||||
@@ -1137,6 +1139,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;
|
||||
}
|
||||
@@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm .header input {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
.cdm .header[stuck] {
|
||||
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
border: 0 solid #222;
|
||||
border-bottom-width: 1px;
|
||||
background: #333 ! important;
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.cdm .footer {
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
@@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
div.cdm.expanded div.header {
|
||||
div.cdm.expanded .header:not([stuck]) {
|
||||
background: transparent ! important;
|
||||
}
|
||||
div.cdm.expanded div.header a.title {
|
||||
@@ -1287,115 +1300,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 #222;
|
||||
border-bottom-width: 1px;
|
||||
background: white;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
align-items: center;
|
||||
}
|
||||
div#floatingTitle > * {
|
||||
white-space: nowrap;
|
||||
padding: 4px;
|
||||
}
|
||||
div#floatingTitle .left,
|
||||
div#floatingTitle .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
div#floatingTitle .left i.material-icons,
|
||||
div#floatingTitle .right i.material-icons {
|
||||
margin-left: 2px;
|
||||
font-size: 21px;
|
||||
padding: 2px;
|
||||
user-select: none;
|
||||
}
|
||||
div#floatingTitle .left i.icon-anchor,
|
||||
div#floatingTitle .right i.icon-anchor {
|
||||
margin-left: 0px;
|
||||
margin-right: 1px;
|
||||
padding: 0px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
div#floatingTitle .excerpt {
|
||||
display: none;
|
||||
}
|
||||
div#floatingTitle .collapse i.material-icons {
|
||||
color: #b87d2c;
|
||||
cursor: pointer;
|
||||
}
|
||||
div#floatingTitle span.author {
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
div#floatingTitle a.title {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizelegibility;
|
||||
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
div#floatingTitle div.feed {
|
||||
padding-right: 10px;
|
||||
color: #ccc;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div#floatingTitle div.feed a {
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
padding: 1px 4px 1px 4px;
|
||||
}
|
||||
div#floatingTitle span.updated {
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
}
|
||||
div#floatingTitle div.feed a {
|
||||
color: #ccc;
|
||||
}
|
||||
div#floatingTitle span.titleWrap {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
div#floatingTitle .feed-title > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div#floatingTitle .feed-title a.title {
|
||||
width: 100%;
|
||||
}
|
||||
div#floatingTitle .feed-title a.catchup {
|
||||
text-align: right;
|
||||
color: #ccc;
|
||||
padding-right: 10px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div#floatingTitle .feed-title a.catchup:hover {
|
||||
color: #b87d2c;
|
||||
}
|
||||
div#floatingTitle.Unread a.title {
|
||||
color: black;
|
||||
}
|
||||
.cdm.expandable {
|
||||
background-color: #222;
|
||||
border: 0px solid #222;
|
||||
@@ -2001,18 +1905,6 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab
|
||||
body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
|
||||
color: #999999;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle {
|
||||
background-color: #333;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle .feed a {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle i.material-icons {
|
||||
opacity: 0.7;
|
||||
}
|
||||
body.flat.ttrss_main div#floatingTitle.Unread a.title {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread),
|
||||
body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
|
||||
background: #333;
|
||||
@@ -2203,7 +2095,6 @@ body.ttrss_main.ttrss_index.flat div[id*=RROW] i.material-icons {
|
||||
}
|
||||
body.ttrss_main.ttrss_index.flat .hl,
|
||||
body.ttrss_main.ttrss_index.flat .post .header .title,
|
||||
body.ttrss_main.ttrss_index.flat #floatingTitle a.title,
|
||||
body.ttrss_main.ttrss_index.flat .cdm .title {
|
||||
font-size: 13px ! important;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
128
themes/light.css
128
themes/light.css
@@ -926,12 +926,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;
|
||||
@@ -1125,6 +1123,10 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm i.material-icons {
|
||||
color: #777;
|
||||
}
|
||||
.cdm .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.cdm .header,
|
||||
.cdm .footer {
|
||||
display: flex;
|
||||
@@ -1137,6 +1139,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;
|
||||
}
|
||||
@@ -1169,6 +1174,14 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm .header input {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
.cdm .header[stuck] {
|
||||
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
border: 0 solid #ddd;
|
||||
border-bottom-width: 1px;
|
||||
background: white ! important;
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.cdm .footer {
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
@@ -1216,7 +1229,7 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
div.cdm.expanded div.header {
|
||||
div.cdm.expanded .header:not([stuck]) {
|
||||
background: transparent ! important;
|
||||
}
|
||||
div.cdm.expanded div.header a.title {
|
||||
@@ -1287,115 +1300,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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -3,6 +3,11 @@
|
||||
color : @color-icon;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top : 0;
|
||||
}
|
||||
|
||||
.header, .footer {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
@@ -15,6 +20,10 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-sticky-guard {
|
||||
height : 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
align-items : center;
|
||||
|
||||
@@ -52,6 +61,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header[stuck] {
|
||||
box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1);
|
||||
border: 0 solid @border-default;
|
||||
border-bottom-width: 1px;
|
||||
background : @default-bg ! important;
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height : 30px;
|
||||
padding-left : 5px;
|
||||
@@ -110,8 +128,8 @@
|
||||
|
||||
}
|
||||
|
||||
div.cdm.expanded div.header {
|
||||
background : transparent ! important;
|
||||
div.cdm.expanded .header:not([stuck]) {
|
||||
background: transparent ! important;
|
||||
}
|
||||
|
||||
div.cdm.expanded div.header a.title {
|
||||
@@ -199,137 +217,6 @@ div.cdm.vgrlf .feed {
|
||||
}
|
||||
}
|
||||
|
||||
#main:not(.expandable) div#floatingTitle {
|
||||
.collapse {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
|
||||
div#floatingTitle {
|
||||
position : absolute;
|
||||
z-index : 5;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
left : 0px;
|
||||
border: 0px solid @border-default;
|
||||
border-bottom-width: 1px;
|
||||
background : white;
|
||||
color : @default-text;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
flex-wrap : nowrap;
|
||||
box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
white-space : nowrap;
|
||||
padding : 4px;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
|
||||
i.material-icons {
|
||||
margin-left : 2px;
|
||||
font-size : 21px;
|
||||
padding : 2px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
i.icon-anchor {
|
||||
margin-left : 0px;
|
||||
margin-right : 1px; // replaces checkbox which is a bit wider
|
||||
padding : 0px;
|
||||
color : #ccc;
|
||||
cursor : pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
display : none;
|
||||
}
|
||||
|
||||
.collapse i.material-icons {
|
||||
color : @color-accent;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
span.author {
|
||||
color : @default-text;
|
||||
font-size : 11px;
|
||||
font-weight : normal;
|
||||
}
|
||||
|
||||
a.title {
|
||||
font-size : 16px;
|
||||
color : #999;
|
||||
transition : color 0.2s, background 0.2s;
|
||||
font-weight : 600;
|
||||
text-rendering: optimizelegibility;
|
||||
font-family : @fonts-ui-bold;
|
||||
}
|
||||
|
||||
div.feed {
|
||||
padding-right : 10px;
|
||||
color : @default-text;
|
||||
font-weight : normal;
|
||||
font-style : italic;
|
||||
font-size : 11px;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
div.feed a {
|
||||
border-radius : 4px;
|
||||
display : inline-block;
|
||||
padding : 1px 4px 1px 4px;
|
||||
}
|
||||
|
||||
span.updated {
|
||||
padding-right : 10px;
|
||||
white-space : nowrap;
|
||||
color : @default-text;
|
||||
font-size : 11px;
|
||||
}
|
||||
|
||||
div.feed a {
|
||||
color : @default-text;
|
||||
}
|
||||
|
||||
span.titleWrap {
|
||||
width : 100%;
|
||||
white-space : normal;
|
||||
}
|
||||
|
||||
.feed-title {
|
||||
> * {
|
||||
display : table-cell;
|
||||
vertical-align : middle;
|
||||
}
|
||||
|
||||
a.title {
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
a.catchup {
|
||||
text-align : right;
|
||||
color : @default-text;
|
||||
padding-right : 10px;
|
||||
font-size : 11px;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
a.catchup:hover {
|
||||
color : @color-link;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
div#floatingTitle.Unread a.title {
|
||||
color : black;
|
||||
}
|
||||
|
||||
.cdm.expandable {
|
||||
background-color : @color-panel-bg;
|
||||
border: 0px solid @border-default;
|
||||
|
||||
@@ -1108,13 +1108,11 @@ body.ttrss_main {
|
||||
opacity : 0.5;
|
||||
}
|
||||
|
||||
#floatingTitle.marked i.marked-pic,
|
||||
.cdm.marked .left i.marked-pic,
|
||||
.hl.marked .left i.marked-pic {
|
||||
color : @color-marked;
|
||||
}
|
||||
|
||||
#floatingTitle.published i.pub-pic,
|
||||
.cdm.published .left i.pub-pic,
|
||||
.hl.published .left i.pub-pic {
|
||||
color : @color-published;
|
||||
|
||||
140
themes/night.css
140
themes/night.css
@@ -927,12 +927,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;
|
||||
@@ -1126,6 +1124,10 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm i.material-icons {
|
||||
color: #777;
|
||||
}
|
||||
.cdm .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.cdm .header,
|
||||
.cdm .footer {
|
||||
display: flex;
|
||||
@@ -1138,6 +1140,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;
|
||||
}
|
||||
@@ -1170,6 +1175,14 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm .header input {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
.cdm .header[stuck] {
|
||||
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
border: 0 solid #222;
|
||||
border-bottom-width: 1px;
|
||||
background: #333 ! important;
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.cdm .footer {
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
@@ -1217,7 +1230,7 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
div.cdm.expanded div.header {
|
||||
div.cdm.expanded .header:not([stuck]) {
|
||||
background: transparent ! important;
|
||||
}
|
||||
div.cdm.expanded div.header a.title {
|
||||
@@ -1288,115 +1301,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 #222;
|
||||
border-bottom-width: 1px;
|
||||
background: white;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
align-items: center;
|
||||
}
|
||||
div#floatingTitle > * {
|
||||
white-space: nowrap;
|
||||
padding: 4px;
|
||||
}
|
||||
div#floatingTitle .left,
|
||||
div#floatingTitle .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
div#floatingTitle .left i.material-icons,
|
||||
div#floatingTitle .right i.material-icons {
|
||||
margin-left: 2px;
|
||||
font-size: 21px;
|
||||
padding: 2px;
|
||||
user-select: none;
|
||||
}
|
||||
div#floatingTitle .left i.icon-anchor,
|
||||
div#floatingTitle .right i.icon-anchor {
|
||||
margin-left: 0px;
|
||||
margin-right: 1px;
|
||||
padding: 0px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
div#floatingTitle .excerpt {
|
||||
display: none;
|
||||
}
|
||||
div#floatingTitle .collapse i.material-icons {
|
||||
color: #b87d2c;
|
||||
cursor: pointer;
|
||||
}
|
||||
div#floatingTitle span.author {
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
div#floatingTitle a.title {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizelegibility;
|
||||
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
div#floatingTitle div.feed {
|
||||
padding-right: 10px;
|
||||
color: #ccc;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div#floatingTitle div.feed a {
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
padding: 1px 4px 1px 4px;
|
||||
}
|
||||
div#floatingTitle span.updated {
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
}
|
||||
div#floatingTitle div.feed a {
|
||||
color: #ccc;
|
||||
}
|
||||
div#floatingTitle span.titleWrap {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
div#floatingTitle .feed-title > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div#floatingTitle .feed-title a.title {
|
||||
width: 100%;
|
||||
}
|
||||
div#floatingTitle .feed-title a.catchup {
|
||||
text-align: right;
|
||||
color: #ccc;
|
||||
padding-right: 10px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div#floatingTitle .feed-title a.catchup:hover {
|
||||
color: #b87d2c;
|
||||
}
|
||||
div#floatingTitle.Unread a.title {
|
||||
color: black;
|
||||
}
|
||||
.cdm.expandable {
|
||||
background-color: #222;
|
||||
border: 0px solid #222;
|
||||
@@ -2002,18 +1906,6 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab
|
||||
body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
|
||||
color: #999999;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle {
|
||||
background-color: #333;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle .feed a {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle i.material-icons {
|
||||
opacity: 0.7;
|
||||
}
|
||||
body.flat.ttrss_main div#floatingTitle.Unread a.title {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread),
|
||||
body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
|
||||
background: #333;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -91,22 +91,6 @@ body.flat.ttrss_main {
|
||||
}
|
||||
}
|
||||
|
||||
#floatingTitle {
|
||||
background-color : @default-bg;
|
||||
|
||||
.feed a {
|
||||
color : @fg-light;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
opacity : 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
div#floatingTitle.Unread a.title {
|
||||
color : @fg-light;
|
||||
}
|
||||
|
||||
#headlines-frame {
|
||||
.hl:not(.active):not(.Selected):not(.Unread),
|
||||
.cdm.expandable:not(.active):not(.Selected):not(.Unread) {
|
||||
|
||||
@@ -927,12 +927,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;
|
||||
@@ -1126,6 +1124,10 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm i.material-icons {
|
||||
color: #777;
|
||||
}
|
||||
.cdm .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.cdm .header,
|
||||
.cdm .footer {
|
||||
display: flex;
|
||||
@@ -1138,6 +1140,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;
|
||||
}
|
||||
@@ -1170,6 +1175,14 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
.cdm .header input {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
.cdm .header[stuck] {
|
||||
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
border: 0 solid #222;
|
||||
border-bottom-width: 1px;
|
||||
background: #333 ! important;
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.cdm .footer {
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
@@ -1217,7 +1230,7 @@ video::-webkit-media-controls-overlay-play-button {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
div.cdm.expanded div.header {
|
||||
div.cdm.expanded .header:not([stuck]) {
|
||||
background: transparent ! important;
|
||||
}
|
||||
div.cdm.expanded div.header a.title {
|
||||
@@ -1288,115 +1301,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 #222;
|
||||
border-bottom-width: 1px;
|
||||
background: white;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
|
||||
align-items: center;
|
||||
}
|
||||
div#floatingTitle > * {
|
||||
white-space: nowrap;
|
||||
padding: 4px;
|
||||
}
|
||||
div#floatingTitle .left,
|
||||
div#floatingTitle .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
div#floatingTitle .left i.material-icons,
|
||||
div#floatingTitle .right i.material-icons {
|
||||
margin-left: 2px;
|
||||
font-size: 21px;
|
||||
padding: 2px;
|
||||
user-select: none;
|
||||
}
|
||||
div#floatingTitle .left i.icon-anchor,
|
||||
div#floatingTitle .right i.icon-anchor {
|
||||
margin-left: 0px;
|
||||
margin-right: 1px;
|
||||
padding: 0px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
div#floatingTitle .excerpt {
|
||||
display: none;
|
||||
}
|
||||
div#floatingTitle .collapse i.material-icons {
|
||||
color: #257aa7;
|
||||
cursor: pointer;
|
||||
}
|
||||
div#floatingTitle span.author {
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
div#floatingTitle a.title {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizelegibility;
|
||||
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
div#floatingTitle div.feed {
|
||||
padding-right: 10px;
|
||||
color: #ccc;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div#floatingTitle div.feed a {
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
padding: 1px 4px 1px 4px;
|
||||
}
|
||||
div#floatingTitle span.updated {
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
}
|
||||
div#floatingTitle div.feed a {
|
||||
color: #ccc;
|
||||
}
|
||||
div#floatingTitle span.titleWrap {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
div#floatingTitle .feed-title > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div#floatingTitle .feed-title a.title {
|
||||
width: 100%;
|
||||
}
|
||||
div#floatingTitle .feed-title a.catchup {
|
||||
text-align: right;
|
||||
color: #ccc;
|
||||
padding-right: 10px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
div#floatingTitle .feed-title a.catchup:hover {
|
||||
color: #257aa7;
|
||||
}
|
||||
div#floatingTitle.Unread a.title {
|
||||
color: black;
|
||||
}
|
||||
.cdm.expandable {
|
||||
background-color: #222;
|
||||
border: 0px solid #222;
|
||||
@@ -2002,18 +1906,6 @@ body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected .dijitTreeLab
|
||||
body.flat.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
|
||||
color: #999999;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle {
|
||||
background-color: #333;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle .feed a {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
body.flat.ttrss_main #floatingTitle i.material-icons {
|
||||
opacity: 0.7;
|
||||
}
|
||||
body.flat.ttrss_main div#floatingTitle.Unread a.title {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
body.flat.ttrss_main #headlines-frame .hl:not(.active):not(.Selected):not(.Unread),
|
||||
body.flat.ttrss_main #headlines-frame .cdm.expandable:not(.active):not(.Selected):not(.Unread) {
|
||||
background: #333;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user