this repo has no description
Fine-tuning status actions styles
+23
-18
+23
-18
src/components/status.css
+23
-18
src/components/status.css
···
1927
1927
transform-origin: right center;
1928
1928
transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out;
1929
1929
1930
+
.timeline.contextual .replies[data-comments-level='4'] & {
1931
+
top: 0;
1932
+
}
1933
+
1930
1934
@media (hover: hover) {
1931
1935
transition: border-color 0.3s ease-out;
1932
1936
}
···
1966
1970
border-color: var(--outline-hover-color);
1967
1971
}
1968
1972
1973
+
.status:focus &,
1969
1974
&.open {
1970
1975
opacity: 1;
1971
1976
pointer-events: auto;
···
1975
1980
& {
1976
1981
border-color: var(--outline-hover-color);
1977
1982
}
1978
-
.status:has(&):focus & {
1979
-
opacity: 1;
1980
-
pointer-events: auto;
1981
-
transform: translateX(0);
1982
-
}
1983
-
.status-focus:has(&):has(.status:focus) {
1984
-
transition: background-color 0.1s ease-out 0.3s;
1985
-
background-color: var(--bg-faded-blur-color);
1986
-
}
1987
1983
}
1988
1984
@media (pointer: fine), (hover: hover) {
1989
-
.status:has(&):hover & {
1985
+
.status:hover & {
1990
1986
opacity: 1;
1991
1987
pointer-events: auto;
1992
1988
transform: translateX(0);
1993
1989
}
1994
-
.status:has(&):hover {
1995
-
/* background-color: var(--bg-faded-blur-color); */
1996
-
background-image: linear-gradient(
1997
-
-140deg,
1998
-
var(--bg-faded-color),
1999
-
transparent 75%
2000
-
);
2001
-
}
2002
1990
}
2003
1991
2004
1992
&.open {
···
2010
1998
2011
1999
button:not(.more-button) {
2012
2000
opacity: 0.3;
2001
+
}
2002
+
}
2003
+
}
2004
+
.timeline.contextual .descendant .status {
2005
+
--bg-gradient: linear-gradient(
2006
+
-140deg,
2007
+
var(--bg-faded-color),
2008
+
transparent 75%
2009
+
);
2010
+
2011
+
&:focus {
2012
+
background-image: var(--bg-gradient);
2013
+
}
2014
+
2015
+
@media (pointer: fine), (hover: hover) {
2016
+
&:hover {
2017
+
background-image: var(--bg-gradient);
2013
2018
}
2014
2019
}
2015
2020
}