mirror of https://github.com/FreshRSS/FreshRSS.git
Fix: overflow expanding title in entry header (#6373)
* change HTML structure * CSS
This commit is contained in:
parent
7b92266855
commit
aac3b21a8b
|
@ -51,8 +51,8 @@
|
|||
endif;
|
||||
?></li><?php
|
||||
endif; ?>
|
||||
|
||||
<li class="item title<?= (($topline_thumbnail !== 'none') || $topline_summary) ? ' multiline' : '' ?>" dir="auto"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>" class="item-element"><?= $this->entry->title() ?><?php
|
||||
<li class="item titleAuthorSummaryDate">
|
||||
<span class="item-element title<?= (($topline_thumbnail !== 'none') || $topline_summary) ? ' multiline' : '' ?>" dir="auto"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>"><?= $this->entry->title() ?><?php
|
||||
if ($topline_display_authors):
|
||||
?><span class="author"><?php
|
||||
$authors = $this->entry->authors();
|
||||
|
@ -65,11 +65,13 @@
|
|||
}
|
||||
?></span><?php
|
||||
endif;
|
||||
if ($topline_summary):
|
||||
?><div class="summary"><?= trim(mb_substr(strip_tags($this->entry->content(false)), 0, 500, 'UTF-8')) ?></div><?php
|
||||
endif;
|
||||
?></a></li>
|
||||
<?php if ($topline_date) { ?><li class="item date"><time datetime="<?= $this->entry->machineReadableDate() ?>" class="item-element"><?= $this->entry->date() ?></time> </li><?php } ?>
|
||||
?></a></span>
|
||||
<?php
|
||||
if ($topline_summary):
|
||||
?><div class="summary"><?= trim(mb_substr(strip_tags($this->entry->content(false)), 0, 500, 'UTF-8')) ?></div><?php
|
||||
endif; ?>
|
||||
<?php if ($topline_date) { ?><span class="item-element date"><time datetime="<?= $this->entry->machineReadableDate() ?>"><?= $this->entry->date() ?></time> </span><?php } ?>
|
||||
</li>
|
||||
<?php if ($topline_link) { ?><li class="item link"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>" class="item-element" title="<?=
|
||||
_t('conf.shortcut.see_on_website') ?>"><?= _i('link') ?></a></li><?php } ?>
|
||||
</ul>
|
||||
|
|
|
@ -1081,7 +1081,7 @@ function init_stream(stream) {
|
|||
return true;
|
||||
}
|
||||
|
||||
el = ev.target.closest('.item.title > a');
|
||||
el = ev.target.closest('.item .title > a');
|
||||
if (el) { // Allow default control/command-click behaviour such as open in background-tab
|
||||
return ev.ctrlKey || ev.metaKey;
|
||||
}
|
||||
|
@ -1189,7 +1189,7 @@ function init_stream(stream) {
|
|||
return;
|
||||
}
|
||||
|
||||
let el = ev.target.closest('.item.title > a');
|
||||
let el = ev.target.closest('.item .title > a');
|
||||
if (el) {
|
||||
if (ev.which == 1) {
|
||||
if (ev.ctrlKey) { // Control+click
|
||||
|
|
|
@ -747,11 +747,11 @@ kbd {
|
|||
background: var(--background-color-dark);
|
||||
}
|
||||
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
background: inherit;
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background: var(--background-color-hover);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
background: var(--background-color-hover);
|
||||
}
|
||||
|
||||
|
@ -759,11 +759,11 @@ kbd {
|
|||
background: var(--background-color-hover);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--font-color-light);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .author {
|
||||
.flux .flux_header .item .title .author {
|
||||
color: var(--font-color-dark);
|
||||
}
|
||||
|
||||
|
|
|
@ -747,11 +747,11 @@ kbd {
|
|||
background: var(--background-color-dark);
|
||||
}
|
||||
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
background: inherit;
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background: var(--background-color-hover);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
background: var(--background-color-hover);
|
||||
}
|
||||
|
||||
|
@ -759,11 +759,11 @@ kbd {
|
|||
background: var(--background-color-hover);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--font-color-light);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .author {
|
||||
.flux .flux_header .item .title .author {
|
||||
color: var(--font-color-dark);
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
&:hover {
|
||||
background: variables.$grey-lighter;
|
||||
|
||||
&:not(.current):hover .item.title {
|
||||
&:not(.current):hover .item .title {
|
||||
background: variables.$grey-lighter;
|
||||
}
|
||||
}
|
||||
|
@ -33,13 +33,13 @@
|
|||
&.not_read:not(.current) {
|
||||
background: variables.$unread-bg;
|
||||
|
||||
&:hover .item.title {
|
||||
&:hover .item .title {
|
||||
background: variables.$unread-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item.title {
|
||||
.item .title {
|
||||
a {
|
||||
color: variables.$unread-font-color;
|
||||
}
|
||||
|
@ -65,7 +65,7 @@
|
|||
&.favorite:not(.current) {
|
||||
background: variables.$fav-light;
|
||||
|
||||
&:hover .item.title {
|
||||
&:hover .item .title {
|
||||
background: variables.$fav-light;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -989,7 +989,7 @@ main.prompt {
|
|||
.flux .flux_header:hover {
|
||||
background: #fcfaf8;
|
||||
}
|
||||
.flux .flux_header:hover:not(.current):hover .item.title {
|
||||
.flux .flux_header:hover:not(.current):hover .item .title {
|
||||
background: #fcfaf8;
|
||||
}
|
||||
.flux.current {
|
||||
|
@ -1002,10 +1002,10 @@ main.prompt {
|
|||
.flux.not_read:not(.current) {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read .item.title a {
|
||||
.flux.not_read .item .title a {
|
||||
color: #161a38;
|
||||
}
|
||||
.flux.not_read .item.website a {
|
||||
|
@ -1021,7 +1021,7 @@ main.prompt {
|
|||
.flux.favorite:not(.current) {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux.favorite:not(.current):hover .item.title {
|
||||
.flux.favorite:not(.current):hover .item .title {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux .website a {
|
||||
|
|
|
@ -989,7 +989,7 @@ main.prompt {
|
|||
.flux .flux_header:hover {
|
||||
background: #fcfaf8;
|
||||
}
|
||||
.flux .flux_header:hover:not(.current):hover .item.title {
|
||||
.flux .flux_header:hover:not(.current):hover .item .title {
|
||||
background: #fcfaf8;
|
||||
}
|
||||
.flux.current {
|
||||
|
@ -1002,10 +1002,10 @@ main.prompt {
|
|||
.flux.not_read:not(.current) {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read .item.title a {
|
||||
.flux.not_read .item .title a {
|
||||
color: #161a38;
|
||||
}
|
||||
.flux.not_read .item.website a {
|
||||
|
@ -1021,7 +1021,7 @@ main.prompt {
|
|||
.flux.favorite:not(.current) {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux.favorite:not(.current):hover .item.title {
|
||||
.flux.favorite:not(.current):hover .item .title {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux .website a {
|
||||
|
|
|
@ -452,7 +452,7 @@ button.as-link[disabled] {
|
|||
background-color: var(--dark-background-color1);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--dark-font-color8);
|
||||
}
|
||||
|
||||
|
@ -460,7 +460,7 @@ button.as-link[disabled] {
|
|||
color: var(--dark-font-color6);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
background-color: var(--dark-background-color1);
|
||||
}
|
||||
|
||||
|
|
|
@ -452,7 +452,7 @@ button.as-link[disabled] {
|
|||
background-color: var(--dark-background-color1);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--dark-font-color8);
|
||||
}
|
||||
|
||||
|
@ -460,7 +460,7 @@ button.as-link[disabled] {
|
|||
color: var(--dark-font-color6);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
background-color: var(--dark-background-color1);
|
||||
}
|
||||
|
||||
|
|
|
@ -693,6 +693,7 @@ th {
|
|||
border-left: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .flux_header .title,
|
||||
.flux .flux_header:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
|
@ -693,6 +693,7 @@ th {
|
|||
border-right: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .flux_header .title,
|
||||
.flux .flux_header:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
&:hover {
|
||||
background: variables.$grey-lighter;
|
||||
|
||||
&:not(.current):hover .item.title {
|
||||
&:not(.current):hover .item .title {
|
||||
background: variables.$grey-lighter;
|
||||
}
|
||||
}
|
||||
|
@ -28,13 +28,13 @@
|
|||
&.not_read:not(.current) {
|
||||
background: variables.$unread-bg;
|
||||
|
||||
&:hover .item.title {
|
||||
&:hover .item .title {
|
||||
background: variables.$unread-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item.title {
|
||||
.item .title {
|
||||
a {
|
||||
color: variables.$unread-font-color;
|
||||
}
|
||||
|
@ -61,7 +61,7 @@
|
|||
&.favorite:not(.current) {
|
||||
background: variables.$fav-light;
|
||||
|
||||
&:hover .item.title {
|
||||
&:hover .item .title {
|
||||
background: variables.$fav-light;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1007,7 +1007,7 @@ main.prompt {
|
|||
.flux .flux_header:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.flux .flux_header:hover:not(.current):hover .item.title {
|
||||
.flux .flux_header:hover:not(.current):hover .item .title {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.flux.current {
|
||||
|
@ -1017,10 +1017,10 @@ main.prompt {
|
|||
.flux.not_read:not(.current) {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read .item.title a {
|
||||
.flux.not_read .item .title a {
|
||||
color: #36c;
|
||||
}
|
||||
.flux.not_read .item.website a {
|
||||
|
@ -1036,7 +1036,7 @@ main.prompt {
|
|||
.flux.favorite:not(.current) {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux.favorite:not(.current):hover .item.title {
|
||||
.flux.favorite:not(.current):hover .item .title {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux .website a {
|
||||
|
|
|
@ -1007,7 +1007,7 @@ main.prompt {
|
|||
.flux .flux_header:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.flux .flux_header:hover:not(.current):hover .item.title {
|
||||
.flux .flux_header:hover:not(.current):hover .item .title {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.flux.current {
|
||||
|
@ -1017,10 +1017,10 @@ main.prompt {
|
|||
.flux.not_read:not(.current) {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background: #f2f6f8;
|
||||
}
|
||||
.flux.not_read .item.title a {
|
||||
.flux.not_read .item .title a {
|
||||
color: #36c;
|
||||
}
|
||||
.flux.not_read .item.website a {
|
||||
|
@ -1036,7 +1036,7 @@ main.prompt {
|
|||
.flux.favorite:not(.current) {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux.favorite:not(.current):hover .item.title {
|
||||
.flux.favorite:not(.current):hover .item .title {
|
||||
background: #fff6da;
|
||||
}
|
||||
.flux .website a {
|
||||
|
|
|
@ -809,23 +809,23 @@ li.item.active {
|
|||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
background: var(--accent-bg);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .summary {
|
||||
.flux .flux_header .item .title .summary {
|
||||
color: var(--text-accent);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .author {
|
||||
.flux .flux_header .item .title .author {
|
||||
color: var(--text-accent);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
|
@ -809,23 +809,23 @@ li.item.active {
|
|||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
background: var(--accent-bg);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .summary {
|
||||
.flux .flux_header .item .title .summary {
|
||||
color: var(--text-accent);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .author {
|
||||
.flux .flux_header .item .title .author {
|
||||
color: var(--text-accent);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
|
@ -837,6 +837,7 @@ a:hover .icon {
|
|||
}
|
||||
|
||||
.flux .flux_header:not(.current):hover .flux_header,
|
||||
.flux:not(.current):hover .flux_header .title,
|
||||
.flux.current .flux_header {
|
||||
background-color: var(--background-color-hover);
|
||||
}
|
||||
|
@ -849,6 +850,7 @@ a:hover .icon {
|
|||
background-color: var(--unread-article-background-color);
|
||||
}
|
||||
|
||||
.flux.not_read:not(.current):hover .flux_header .title,
|
||||
.flux.not_read:not(.current):hover .flux_header,
|
||||
.flux.not_read.current .flux_header {
|
||||
background-color: var(--unread-article-background-color-hover);
|
||||
|
@ -862,6 +864,7 @@ a:hover .icon {
|
|||
background-color: var(--favorite-article-background-color);
|
||||
}
|
||||
|
||||
.flux.favorite:not(.current):hover .flux_header .title,
|
||||
.flux.favorite:not(.current):hover .flux_header,
|
||||
.flux.favorite.current .flux_header {
|
||||
background-color: var(--favorite-article-background-color-hover);
|
||||
|
@ -873,7 +876,7 @@ a:hover .icon {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flux .item.date {
|
||||
.flux .item .date {
|
||||
color: var(--font-color-grey);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
|
|
@ -837,6 +837,7 @@ a:hover .icon {
|
|||
}
|
||||
|
||||
.flux .flux_header:not(.current):hover .flux_header,
|
||||
.flux:not(.current):hover .flux_header .title,
|
||||
.flux.current .flux_header {
|
||||
background-color: var(--background-color-hover);
|
||||
}
|
||||
|
@ -849,6 +850,7 @@ a:hover .icon {
|
|||
background-color: var(--unread-article-background-color);
|
||||
}
|
||||
|
||||
.flux.not_read:not(.current):hover .flux_header .title,
|
||||
.flux.not_read:not(.current):hover .flux_header,
|
||||
.flux.not_read.current .flux_header {
|
||||
background-color: var(--unread-article-background-color-hover);
|
||||
|
@ -862,6 +864,7 @@ a:hover .icon {
|
|||
background-color: var(--favorite-article-background-color);
|
||||
}
|
||||
|
||||
.flux.favorite:not(.current):hover .flux_header .title,
|
||||
.flux.favorite:not(.current):hover .flux_header,
|
||||
.flux.favorite.current .flux_header {
|
||||
background-color: var(--favorite-article-background-color-hover);
|
||||
|
@ -873,7 +876,7 @@ a:hover .icon {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flux .item.date {
|
||||
.flux .item .date {
|
||||
color: var(--font-color-grey);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
|
|
@ -798,6 +798,7 @@ a.signin {
|
|||
}
|
||||
|
||||
.flux .flux_header:hover,
|
||||
.flux:not(.current):hover .flux_header .title,
|
||||
.flux.current .flux_header {
|
||||
background-color: var(--background-color-grey-hover);
|
||||
}
|
||||
|
@ -815,8 +816,8 @@ a.signin {
|
|||
border-left: 2px solid var(--border-left-article-unread);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a,
|
||||
.flux.not_read:not(.current):hover .flux_header .item.title {
|
||||
.flux .flux_header .item .title a,
|
||||
.flux.not_read:not(.current):hover .flux_header .item .title {
|
||||
color: var(--font-color-link-title);
|
||||
}
|
||||
|
||||
|
@ -828,6 +829,7 @@ a.signin {
|
|||
background-color: var(--background-color-favorite);
|
||||
}
|
||||
|
||||
.flux.favorite:not(.current):hover .flux_header .title,
|
||||
.flux.favorite:not(.current) .flux_header:hover,
|
||||
.flux.favorite.current .flux_header {
|
||||
background-color: var(--background-color-favorite-hover);
|
||||
|
|
|
@ -798,6 +798,7 @@ a.signin {
|
|||
}
|
||||
|
||||
.flux .flux_header:hover,
|
||||
.flux:not(.current):hover .flux_header .title,
|
||||
.flux.current .flux_header {
|
||||
background-color: var(--background-color-grey-hover);
|
||||
}
|
||||
|
@ -815,8 +816,8 @@ a.signin {
|
|||
border-right: 2px solid var(--border-left-article-unread);
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a,
|
||||
.flux.not_read:not(.current):hover .flux_header .item.title {
|
||||
.flux .flux_header .item .title a,
|
||||
.flux.not_read:not(.current):hover .flux_header .item .title {
|
||||
color: var(--font-color-link-title);
|
||||
}
|
||||
|
||||
|
@ -828,6 +829,7 @@ a.signin {
|
|||
background-color: var(--background-color-favorite);
|
||||
}
|
||||
|
||||
.flux.favorite:not(.current):hover .flux_header .title,
|
||||
.flux.favorite:not(.current) .flux_header:hover,
|
||||
.flux.favorite.current .flux_header {
|
||||
background-color: var(--background-color-favorite-hover);
|
||||
|
|
|
@ -751,20 +751,20 @@ form th {
|
|||
.flux .current {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
.flux .flux_header:hover:not(.current):hover .item.title,
|
||||
.flux .current:not(.current):hover .item.title {
|
||||
.flux .flux_header:hover:not(.current):hover .item .title,
|
||||
.flux .current:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
.flux.favorite:not(.current) {
|
||||
background-color: var(--color-background-stared);
|
||||
}
|
||||
.flux.favorite:not(.current):hover .item.title {
|
||||
.flux.favorite:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-stared);
|
||||
}
|
||||
.flux.not_read:not(.current) {
|
||||
background-color: var(--color-background-unread);
|
||||
}
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-unread);
|
||||
}
|
||||
.flux .item.date {
|
||||
|
@ -909,7 +909,7 @@ a.signin {
|
|||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
body:not(.formLogin, .register) .header .item.title {
|
||||
body:not(.formLogin, .register) .header .item .title {
|
||||
display: none;
|
||||
}
|
||||
.form-group .group-name {
|
||||
|
@ -948,7 +948,7 @@ a.signin {
|
|||
width: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
top: auto !important;
|
||||
}
|
||||
.aside {
|
||||
|
|
|
@ -751,20 +751,20 @@ form th {
|
|||
.flux .current {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
.flux .flux_header:hover:not(.current):hover .item.title,
|
||||
.flux .current:not(.current):hover .item.title {
|
||||
.flux .flux_header:hover:not(.current):hover .item .title,
|
||||
.flux .current:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
.flux.favorite:not(.current) {
|
||||
background-color: var(--color-background-stared);
|
||||
}
|
||||
.flux.favorite:not(.current):hover .item.title {
|
||||
.flux.favorite:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-stared);
|
||||
}
|
||||
.flux.not_read:not(.current) {
|
||||
background-color: var(--color-background-unread);
|
||||
}
|
||||
.flux.not_read:not(.current):hover .item.title {
|
||||
.flux.not_read:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-unread);
|
||||
}
|
||||
.flux .item.date {
|
||||
|
@ -909,7 +909,7 @@ a.signin {
|
|||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
body:not(.formLogin, .register) .header .item.title {
|
||||
body:not(.formLogin, .register) .header .item .title {
|
||||
display: none;
|
||||
}
|
||||
.form-group .group-name {
|
||||
|
@ -948,7 +948,7 @@ a.signin {
|
|||
width: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
top: auto !important;
|
||||
}
|
||||
.aside {
|
||||
|
|
|
@ -969,7 +969,7 @@ form {
|
|||
.current {
|
||||
background-color: var(--color-background-hover);
|
||||
|
||||
&:not(.current):hover .item.title {
|
||||
&:not(.current):hover .item .title {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
@ -977,7 +977,7 @@ form {
|
|||
&.favorite:not(.current) {
|
||||
background-color: var(--color-background-stared);
|
||||
|
||||
&:hover .item.title {
|
||||
&:hover .item .title {
|
||||
background-color: var(--color-background-stared);
|
||||
}
|
||||
}
|
||||
|
@ -985,7 +985,7 @@ form {
|
|||
&.not_read:not(.current) {
|
||||
background-color: var(--color-background-unread);
|
||||
|
||||
&:hover .item.title {
|
||||
&:hover .item .title {
|
||||
background-color: var(--color-background-unread);
|
||||
}
|
||||
}
|
||||
|
@ -1166,7 +1166,7 @@ a.signin {
|
|||
@media (max-width: 840px) {
|
||||
body:not(.formLogin, .register) {
|
||||
.header {
|
||||
.item.title {
|
||||
.item .title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -1218,7 +1218,7 @@ a.signin {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .item .title {
|
||||
top: auto !important;
|
||||
}
|
||||
|
||||
|
|
|
@ -1263,47 +1263,42 @@ input[type="search"] {
|
|||
width: 200px;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .websitenone .item.title {
|
||||
max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px));
|
||||
}
|
||||
|
||||
.flux .websiteicon .item.website {
|
||||
width: calc(2 * var(--frss-padding-flux-items) + 16px);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .websiteicon .item.title {
|
||||
max-width: calc(100% - 4 * (2 * var(--frss-padding-flux-items) + 16px));
|
||||
}
|
||||
|
||||
.flux .websitename .item.website {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .websitename .item.title {
|
||||
max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px) - 150px);
|
||||
}
|
||||
|
||||
.website a:hover .favicon,
|
||||
a.website:hover .favicon {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.flux.not_read .item.title,
|
||||
.flux.current .item.title {
|
||||
.flux.not_read .item .title,
|
||||
.flux.current .item .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
|
||||
padding-right: 0.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .flux_header .item .date {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item .title {
|
||||
background-color: inherit;
|
||||
max-width: calc(100% - 320px);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title.multiline {
|
||||
position: initial;
|
||||
.flux .item:has(.multiline) {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--frss-font-color-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -1355,7 +1350,27 @@ a.website:hover .favicon {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .summary {
|
||||
|
||||
.flux .flux_header .item.titleAuthorSummaryDate {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .title:has(~.date) {
|
||||
padding-right: 155px;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .summary {
|
||||
display: -webkit-box;
|
||||
color: var(--frss-font-color-grey-dark);
|
||||
font-size: 0.9rem;
|
||||
|
@ -1365,18 +1380,28 @@ a.website:hover .favicon {
|
|||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: break-spaces;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .author {
|
||||
.flux .flux_header .item .summary:has(~.date) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .title .author {
|
||||
padding-left: 1rem;
|
||||
color: var(--frss-font-color-grey-dark);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.date {
|
||||
.flux .flux_header .item .date {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 155px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flux .flux_header .item > a {
|
||||
|
|
|
@ -1263,47 +1263,42 @@ input[type="search"] {
|
|||
width: 200px;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .websitenone .item.title {
|
||||
max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px));
|
||||
}
|
||||
|
||||
.flux .websiteicon .item.website {
|
||||
width: calc(2 * var(--frss-padding-flux-items) + 16px);
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .websiteicon .item.title {
|
||||
max-width: calc(100% - 4 * (2 * var(--frss-padding-flux-items) + 16px));
|
||||
}
|
||||
|
||||
.flux .websitename .item.website {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .websitename .item.title {
|
||||
max-width: calc(100% - 3 * (2 * var(--frss-padding-flux-items) + 16px) - 150px);
|
||||
}
|
||||
|
||||
.website a:hover .favicon,
|
||||
a.website:hover .favicon {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.flux.not_read .item.title,
|
||||
.flux.current .item.title {
|
||||
.flux.not_read .item .title,
|
||||
.flux.current .item .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
|
||||
padding-left: 0.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .flux_header .item .date {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item .title {
|
||||
background-color: inherit;
|
||||
max-width: calc(100% - 320px);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title.multiline {
|
||||
position: initial;
|
||||
.flux .item:has(.multiline) {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title a {
|
||||
.flux .flux_header .item .title a {
|
||||
color: var(--frss-font-color-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -1355,7 +1350,27 @@ a.website:hover .favicon {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .summary {
|
||||
|
||||
.flux .flux_header .item.titleAuthorSummaryDate {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .title:has(~.date) {
|
||||
padding-left: 155px;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .summary {
|
||||
display: -webkit-box;
|
||||
color: var(--frss-font-color-grey-dark);
|
||||
font-size: 0.9rem;
|
||||
|
@ -1365,18 +1380,28 @@ a.website:hover .favicon {
|
|||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: break-spaces;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.title .author {
|
||||
.flux .flux_header .item .summary:has(~.date) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.flux .flux_header .item .title .author {
|
||||
padding-right: 1rem;
|
||||
color: var(--frss-font-color-grey-dark);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.flux .flux_header .item.date {
|
||||
.flux .flux_header .item .date {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 155px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flux .flux_header .item > a {
|
||||
|
|
Loading…
Reference in New Issue