fix(themes): use has-date class for date-aware list layout (#8811)

Replace four :has(~.date) selectors with a has-date modifier class
on .flux_header, mirroring the existing has-thumbnail and has-summary
classes. The condition (whether the date is rendered) is known
server-side and can be exposed on the parent <ul> directly. Same
elements matched in modern browsers. The rules now also apply in
browsers without :has() support, fixing the date column overlapping
the title in SeaMonkey (#6776).

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
This commit is contained in:
polybjorn
2026-05-11 18:20:46 +00:00
committed by GitHub
parent 1020652787
commit 43b10f1d70
3 changed files with 11 additions and 8 deletions

View File

@@ -19,6 +19,9 @@
if ($topline_summary) {
$headerClasses[] = 'has-summary';
}
if ($topline_date) {
$headerClasses[] = 'has-date';
}
if ($this->feed === null || $this->entry === null) {
return;
}

View File

@@ -1504,7 +1504,7 @@ a.website:hover .favicon {
font-weight: bold;
}
.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
.flux:not(.current):hover .flux_header.has-date .item .title {
padding-right: 0.5rem;
z-index: 2;
}
@@ -1583,7 +1583,7 @@ a.website:hover .favicon {
text-decoration: none;
}
.flux .flux_header .item .title:has(~.date) {
.flux .flux_header.has-date .item .title {
padding-right: 155px;
}
@@ -1601,7 +1601,7 @@ a.website:hover .favicon {
margin-bottom: 0.5rem;
}
.flux .flux_header .item .summary:has(~.date) {
.flux .flux_header.has-date .item .summary {
max-width: 90%;
}
@@ -2574,7 +2574,7 @@ html.slider-active {
padding-right: 1rem;
}
.flux .flux_header .item .title:has(~.date) {
.flux .flux_header.has-date .item .title {
padding-right: 1rem;
}

View File

@@ -1504,7 +1504,7 @@ a.website:hover .favicon {
font-weight: bold;
}
.flux:not(.current):hover .flux_header .item .title:has(~ .date) {
.flux:not(.current):hover .flux_header.has-date .item .title {
padding-left: 0.5rem;
z-index: 2;
}
@@ -1583,7 +1583,7 @@ a.website:hover .favicon {
text-decoration: none;
}
.flux .flux_header .item .title:has(~.date) {
.flux .flux_header.has-date .item .title {
padding-left: 155px;
}
@@ -1601,7 +1601,7 @@ a.website:hover .favicon {
margin-bottom: 0.5rem;
}
.flux .flux_header .item .summary:has(~.date) {
.flux .flux_header.has-date .item .summary {
max-width: 90%;
}
@@ -2574,7 +2574,7 @@ html.slider-active {
padding-left: 1rem;
}
.flux .flux_header .item .title:has(~.date) {
.flux .flux_header.has-date .item .title {
padding-left: 1rem;
}