Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fine-tuning status actions styles

Browse source
This commit is contained in:
Lim Chee Aun 2024-02-12 11:53:59 +08:00
parent 92f4371041
commit 3c31c56306
1 changed files with 23 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/status.css
View file

@ -1927,6 +1927,10 @@ a.card:is(:hover, :focus):visited {
transform-origin: right center; transform-origin: right center;
transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out; transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out;
.timeline.contextual .replies[data-comments-level='4'] & {
top: 0;
}
@media (hover: hover) { @media (hover: hover) {
transition: border-color 0.3s ease-out; transition: border-color 0.3s ease-out;
} }
@ -1966,6 +1970,7 @@ a.card:is(:hover, :focus):visited {
border-color: var(--outline-hover-color); border-color: var(--outline-hover-color);
} }
.status:focus &,
&.open { &.open {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
@ -1975,30 +1980,13 @@ a.card:is(:hover, :focus):visited {
& { & {
border-color: var(--outline-hover-color); border-color: var(--outline-hover-color);
} }
.status:has(&):focus & {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.status-focus:has(&):has(.status:focus) {
transition: background-color 0.1s ease-out 0.3s;
background-color: var(--bg-faded-blur-color);
}
} }
@media (pointer: fine), (hover: hover) { @media (pointer: fine), (hover: hover) {
.status:has(&):hover & { .status:hover & {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
transform: translateX(0); transform: translateX(0);
} }
.status:has(&):hover {
/* background-color: var(--bg-faded-blur-color); */
background-image: linear-gradient(
-140deg,
var(--bg-faded-color),
transparent 75%
);
}
} }
&.open { &.open {
@ -2013,6 +2001,23 @@ a.card:is(:hover, :focus):visited {
} }
} }
} }
.timeline.contextual .descendant .status {
--bg-gradient: linear-gradient(
-140deg,
var(--bg-faded-color),
transparent 75%
);
&:focus {
background-image: var(--bg-gradient);
}
@media (pointer: fine), (hover: hover) {
&:hover {
background-image: var(--bg-gradient);
}
}
}
/* BADGE */ /* BADGE */