Better squigly line animation for CWs
This commit is contained in:
parent
c70e3a2484
commit
be279bd8e3
3 changed files with 15 additions and 36 deletions
|
@ -2328,26 +2328,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
|
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
@keyframes scroll {
|
|
||||||
from {
|
|
||||||
background-position-x: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-position-x: 500%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: var(--squigly);
|
background-image: var(--squigly);
|
||||||
background-position: center 35px;
|
background-position: 0 37px;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: -20px 0 0;
|
margin: -22px 0 0;
|
||||||
padding: 25px 0 5px;
|
padding: 27px 0 5px;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
|
transition: background-position 1s;
|
||||||
}
|
}
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover {
|
||||||
animation: scroll linear 50s infinite;
|
background-position-x: 10%;
|
||||||
}
|
}
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
|
|
|
@ -2328,26 +2328,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
|
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
@keyframes scroll {
|
|
||||||
from {
|
|
||||||
background-position-x: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-position-x: 500%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: var(--squigly);
|
background-image: var(--squigly);
|
||||||
background-position: center 35px;
|
background-position: 0 37px;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: -20px 0 0;
|
margin: -22px 0 0;
|
||||||
padding: 25px 0 5px;
|
padding: 27px 0 5px;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
|
transition: background-position 1s;
|
||||||
}
|
}
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover {
|
||||||
animation: scroll linear 50s infinite;
|
background-position-x: 10%;
|
||||||
}
|
}
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
|
|
|
@ -2329,26 +2329,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
|
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
@keyframes scroll {
|
|
||||||
from {
|
|
||||||
background-position-x: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-position-x: 500%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: var(--squigly);
|
background-image: var(--squigly);
|
||||||
background-position: center 35px;
|
background-position: 0 37px;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: -20px 0 0;
|
margin: -22px 0 0;
|
||||||
padding: 25px 0 5px;
|
padding: 27px 0 5px;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
|
transition: background-position 1s;
|
||||||
}
|
}
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover {
|
||||||
animation: scroll linear 50s infinite;
|
background-position-x: 10%;
|
||||||
}
|
}
|
||||||
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
|
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
|
|
Loading…
Reference in a new issue