fix: Article hover that changes the background (#4874)

This commit is contained in:
maTh
2022-11-20 14:35:02 +01:00
committed by GitHub
parent 0ad8e6b418
commit 47883d3086
23 changed files with 45 additions and 41 deletions

View File

@@ -742,7 +742,7 @@ kbd {
border-left-style: solid;
}
.flux:hover {
.flux .flux_header:hover {
background: var(--background-color-hover) !important;
}

View File

@@ -742,7 +742,7 @@ kbd {
border-right-style: solid;
}
.flux:hover {
.flux .flux_header:hover {
background: var(--background-color-hover) !important;
}

View File

@@ -11,11 +11,13 @@
@include mixins.transition(all, 0.15s, ease-in-out);
&:hover {
background: variables.$grey-lighter;
&:not(.current):hover .item.title {
.flux_header {
&:hover {
background: variables.$grey-lighter;
&:not(.current):hover .item.title {
background: variables.$grey-lighter;
}
}
}

View File

@@ -977,10 +977,10 @@ main.prompt {
background: #fff;
transition: all 0.15s ease-in-out;
}
.flux:hover {
.flux .flux_header:hover {
background: #fcfaf8;
}
.flux:hover:not(.current):hover .item.title {
.flux .flux_header:hover:not(.current):hover .item.title {
background: #fcfaf8;
}
.flux.current {

View File

@@ -977,10 +977,10 @@ main.prompt {
background: #fff;
transition: all 0.15s ease-in-out;
}
.flux:hover {
.flux .flux_header:hover {
background: #fcfaf8;
}
.flux:hover:not(.current):hover .item.title {
.flux .flux_header:hover:not(.current):hover .item.title {
background: #fcfaf8;
}
.flux.current {

View File

@@ -802,7 +802,7 @@ a.btn {
background: #f9f7f4;
}
.flux:hover {
.flux .flux_header:hover {
background: #f9f7f4;
}

View File

@@ -802,7 +802,7 @@ a.btn {
background: #f9f7f4;
}
.flux:hover {
.flux .flux_header:hover {
background: #f9f7f4;
}

View File

@@ -717,7 +717,7 @@ a.btn {
border-left: 2px solid #2f2f2f;
}
.flux:hover {
.flux .flux_header:hover {
background: #111;
}

View File

@@ -717,7 +717,7 @@ a.btn {
border-right: 2px solid #2f2f2f;
}
.flux:hover {
.flux .flux_header:hover {
background: #111;
}

View File

@@ -728,7 +728,7 @@ a.btn {
border-left: 2px solid #ecf0f1;
}
.flux:hover {
.flux .flux_header:hover {
background: #fff;
}

View File

@@ -728,7 +728,7 @@ a.btn {
border-right: 2px solid #ecf0f1;
}
.flux:hover {
.flux .flux_header:hover {
background: #fff;
}

View File

@@ -10,11 +10,13 @@
@include mixins.transition(all, 0.15s, ease-in-out);
&:hover {
background: variables.$grey-lighter;
&:not(.current):hover .item.title {
.flux_header {
&:hover {
background: variables.$grey-lighter;
&:not(.current):hover .item.title {
background: variables.$grey-lighter;
}
}
}

View File

@@ -995,10 +995,10 @@ main.prompt {
background: #fff;
transition: all 0.15s ease-in-out;
}
.flux:hover {
.flux .flux_header:hover {
background: #f9fafb;
}
.flux:hover:not(.current):hover .item.title {
.flux .flux_header:hover:not(.current):hover .item.title {
background: #f9fafb;
}
.flux.current {

View File

@@ -995,10 +995,10 @@ main.prompt {
background: #fff;
transition: all 0.15s ease-in-out;
}
.flux:hover {
.flux .flux_header:hover {
background: #f9fafb;
}
.flux:hover:not(.current):hover .item.title {
.flux .flux_header:hover:not(.current):hover .item.title {
background: #f9fafb;
}
.flux.current {

View File

@@ -828,15 +828,15 @@ a:hover .icon {
border-left: 2px solid transparent;
}
.flux:hover:not(.active) {
.flux .flux_header:hover {
background-color: var(--background-color-hover) !important;
}
.flux:not(.current):hover .item.title {
.flux .flux_header:not(.current):hover .item.title {
background: inherit;
}
.flux.current {
.flux.current .flux_header {
background-color: var(--background-color-light);
border-left: 2px solid var(--contrast-border-color-active);
}
@@ -845,7 +845,7 @@ a:hover .icon {
border-left: 2px solid var(--unread-article-border-color);
}
.flux.not_read:not(.current) {
.flux.not_read .flux_header {
background-color: var(--unread-article-background-color);
}

View File

@@ -828,15 +828,15 @@ a:hover .icon {
border-right: 2px solid transparent;
}
.flux:hover:not(.active) {
.flux .flux_header:hover {
background-color: var(--background-color-hover) !important;
}
.flux:not(.current):hover .item.title {
.flux .flux_header:not(.current):hover .item.title {
background: inherit;
}
.flux.current {
.flux.current .flux_header {
background-color: var(--background-color-light);
border-right: 2px solid var(--contrast-border-color-active);
}
@@ -845,7 +845,7 @@ a:hover .icon {
border-right: 2px solid var(--unread-article-border-color);
}
.flux.not_read:not(.current) {
.flux.not_read .flux_header {
background-color: var(--unread-article-background-color);
}

View File

@@ -742,7 +742,7 @@ a.signin {
border-left: 3px solid #5cb85c;
}
.flux:hover {
.flux .flux_header:hover {
background: #fff;
}

View File

@@ -742,7 +742,7 @@ a.signin {
border-right: 3px solid #5cb85c;
}
.flux:hover {
.flux .flux_header:hover {
background: #fff;
}

View File

@@ -780,7 +780,7 @@ a.btn {
background: #ede7de;
}
.flux:hover {
.flux .flux_header:hover {
background: #f9f7f4;
}

View File

@@ -780,7 +780,7 @@ a.btn {
background: #ede7de;
}
.flux:hover {
.flux .flux_header:hover {
background: #f9f7f4;
}

View File

@@ -754,11 +754,11 @@ form th {
width: 90%;
border-top: 1px solid var(--color-border-light-darker);
}
.flux:hover,
.flux .flux_header:hover,
.flux .current {
background-color: var(--color-background-hover);
}
.flux:hover: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);
}

View File

@@ -754,11 +754,11 @@ form th {
width: 90%;
border-top: 1px solid var(--color-border-light-darker);
}
.flux:hover,
.flux .flux_header:hover,
.flux .current {
background-color: var(--color-background-hover);
}
.flux:hover: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);
}

View File

@@ -971,7 +971,7 @@ form {
border-top: 1px solid var(--color-border-light-darker);
}
&:hover,
.flux_header:hover,
.current {
background-color: var(--color-background-hover);