Copy CSS files to installation folder
This commit is contained in:
nileane
github-actions[bot]
parent
47eac567b5
commit
8a23601dc2
3 changed files with 342 additions and 315 deletions
|
|
@ -331,6 +331,108 @@ body.app-body {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keyframes */
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.6);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bounce-sml {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(.9);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bounce-vertical {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-40%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateY(20%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes launch {
|
||||||
|
0% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(200%, -150%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: translate(200%, -150%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
transform: translate(-20%, 20%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein-short {
|
||||||
|
from {
|
||||||
|
transform: translate(0, -10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slowin {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Rordered layout */
|
/* Rordered layout */
|
||||||
.app-body .columns-area__panels__pane--navigational {
|
.app-body .columns-area__panels__pane--navigational {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
@ -909,29 +1011,6 @@ body.app-body {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@keyframes fadein {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fadein-short {
|
|
||||||
from {
|
|
||||||
transform: translate(0, -10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 📝 Compose panel
|
/* 📝 Compose panel
|
||||||
---------------- */
|
---------------- */
|
||||||
.app-body .compose-form {
|
.app-body .compose-form {
|
||||||
|
|
@ -1206,20 +1285,6 @@ body.app-body {
|
||||||
background-image: var(--icon-send);
|
background-image: var(--icon-send);
|
||||||
background-color: var(--color-accent-bg);
|
background-color: var(--color-accent-bg);
|
||||||
}
|
}
|
||||||
@keyframes bounce-sml {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: scale(.9);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||||
animation: bounce-sml .3s ease-out 1;
|
animation: bounce-sml .3s ease-out 1;
|
||||||
}
|
}
|
||||||
|
|
@ -2009,20 +2074,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
> .icon-star {
|
> .icon-star {
|
||||||
animation: bounce .4s ease-out !important;
|
animation: bounce .4s ease-out !important;
|
||||||
}
|
}
|
||||||
@keyframes bounce {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.6);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: scale(.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
|
.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -2031,50 +2082,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.icon-button.active>.icon-retweet {
|
.icon-button.active>.icon-retweet {
|
||||||
animation: launch 1.2s ease-in !important;
|
animation: launch 1.2s ease-in !important;
|
||||||
}
|
}
|
||||||
@keyframes launch {
|
|
||||||
0% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
5% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(200%, -150%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translate(200%, -150%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
85% {
|
|
||||||
transform: translate(-20%, 20%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark,
|
.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark,
|
||||||
.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark {
|
.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark {
|
||||||
animation: bounce-vertical .4s ease-out !important;
|
animation: bounce-vertical .4s ease-out !important;
|
||||||
}
|
}
|
||||||
@keyframes bounce-vertical {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-40%);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translateY(20%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button,
|
.app-body .status__action-bar .icon-button,
|
||||||
.app-body .detailed-status__action-bar .icon-button {
|
.app-body .detailed-status__action-bar .icon-button {
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
|
|
@ -2358,8 +2369,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.app-body .media-gallery__preview {
|
.app-body .media-gallery__preview {
|
||||||
outline-color: rgba(255, 255, 255, .05);
|
outline-color: rgba(255, 255, 255, .05);
|
||||||
}
|
}
|
||||||
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
|
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview,
|
||||||
outline-color: rgba(255, 255, 255, .1);
|
.app-body .media-gallery__item-thumbnail img {
|
||||||
|
outline-color: rgba(255, 255, 255, .15);
|
||||||
|
}
|
||||||
|
.app-body .media-gallery__gifv::after,
|
||||||
|
.app-body .video-player::after {
|
||||||
|
border-color: rgba(255, 255, 255, .1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.app-body .spoiler-button__overlay__label,
|
.app-body .spoiler-button__overlay__label,
|
||||||
|
|
@ -3159,7 +3175,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
flex: 50vw;
|
flex: 50vw;
|
||||||
}
|
}
|
||||||
.app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active {
|
.app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active {
|
||||||
transform: scale(.9);
|
transform: scale(.8);
|
||||||
}
|
}
|
||||||
.app-body
|
.app-body
|
||||||
.navigation-panel:has(> *:nth-child(5):last-child)
|
.navigation-panel:has(> *:nth-child(5):last-child)
|
||||||
|
|
@ -3185,6 +3201,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
.app-body .column-link--transparent.active {
|
||||||
|
animation: bounce-sml .3s 1;
|
||||||
|
}
|
||||||
.app-body .column-link__icon {
|
.app-body .column-link__icon {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -4675,17 +4694,7 @@ a:is(.active,
|
||||||
.app-body .modal-root > div {
|
.app-body .modal-root > div {
|
||||||
animation: slowin .3s 1;
|
animation: slowin .3s 1;
|
||||||
}
|
}
|
||||||
@keyframes slowin {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Report modals */
|
/* Report modals */
|
||||||
|
|
|
||||||
|
|
@ -331,6 +331,108 @@ body.app-body {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keyframes */
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.6);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bounce-sml {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(.9);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bounce-vertical {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-40%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateY(20%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes launch {
|
||||||
|
0% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(200%, -150%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: translate(200%, -150%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
transform: translate(-20%, 20%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein-short {
|
||||||
|
from {
|
||||||
|
transform: translate(0, -10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slowin {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Rordered layout */
|
/* Rordered layout */
|
||||||
.app-body .columns-area__panels__pane--navigational {
|
.app-body .columns-area__panels__pane--navigational {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
@ -909,29 +1011,6 @@ body.app-body {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@keyframes fadein {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fadein-short {
|
|
||||||
from {
|
|
||||||
transform: translate(0, -10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 📝 Compose panel
|
/* 📝 Compose panel
|
||||||
---------------- */
|
---------------- */
|
||||||
.app-body .compose-form {
|
.app-body .compose-form {
|
||||||
|
|
@ -1206,20 +1285,6 @@ body.app-body {
|
||||||
background-image: var(--icon-send);
|
background-image: var(--icon-send);
|
||||||
background-color: var(--color-accent-bg);
|
background-color: var(--color-accent-bg);
|
||||||
}
|
}
|
||||||
@keyframes bounce-sml {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: scale(.9);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||||
animation: bounce-sml .3s ease-out 1;
|
animation: bounce-sml .3s ease-out 1;
|
||||||
}
|
}
|
||||||
|
|
@ -2009,20 +2074,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
> .icon-star {
|
> .icon-star {
|
||||||
animation: bounce .4s ease-out !important;
|
animation: bounce .4s ease-out !important;
|
||||||
}
|
}
|
||||||
@keyframes bounce {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.6);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: scale(.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
|
.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -2031,50 +2082,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.icon-button.active>.icon-retweet {
|
.icon-button.active>.icon-retweet {
|
||||||
animation: launch 1.2s ease-in !important;
|
animation: launch 1.2s ease-in !important;
|
||||||
}
|
}
|
||||||
@keyframes launch {
|
|
||||||
0% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
5% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(200%, -150%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translate(200%, -150%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
85% {
|
|
||||||
transform: translate(-20%, 20%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark,
|
.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark,
|
||||||
.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark {
|
.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark {
|
||||||
animation: bounce-vertical .4s ease-out !important;
|
animation: bounce-vertical .4s ease-out !important;
|
||||||
}
|
}
|
||||||
@keyframes bounce-vertical {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-40%);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translateY(20%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button,
|
.app-body .status__action-bar .icon-button,
|
||||||
.app-body .detailed-status__action-bar .icon-button {
|
.app-body .detailed-status__action-bar .icon-button {
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
|
|
@ -2358,8 +2369,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.app-body .media-gallery__preview {
|
.app-body .media-gallery__preview {
|
||||||
outline-color: rgba(255, 255, 255, .05);
|
outline-color: rgba(255, 255, 255, .05);
|
||||||
}
|
}
|
||||||
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
|
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview,
|
||||||
outline-color: rgba(255, 255, 255, .1);
|
.app-body .media-gallery__item-thumbnail img {
|
||||||
|
outline-color: rgba(255, 255, 255, .15);
|
||||||
|
}
|
||||||
|
.app-body .media-gallery__gifv::after,
|
||||||
|
.app-body .video-player::after {
|
||||||
|
border-color: rgba(255, 255, 255, .1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.app-body .spoiler-button__overlay__label,
|
.app-body .spoiler-button__overlay__label,
|
||||||
|
|
@ -3159,7 +3175,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
flex: 50vw;
|
flex: 50vw;
|
||||||
}
|
}
|
||||||
.app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active {
|
.app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active {
|
||||||
transform: scale(.9);
|
transform: scale(.8);
|
||||||
}
|
}
|
||||||
.app-body
|
.app-body
|
||||||
.navigation-panel:has(> *:nth-child(5):last-child)
|
.navigation-panel:has(> *:nth-child(5):last-child)
|
||||||
|
|
@ -3185,6 +3201,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
.app-body .column-link--transparent.active {
|
||||||
|
animation: bounce-sml .3s 1;
|
||||||
|
}
|
||||||
.app-body .column-link__icon {
|
.app-body .column-link__icon {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -4675,17 +4694,7 @@ a:is(.active,
|
||||||
.app-body .modal-root > div {
|
.app-body .modal-root > div {
|
||||||
animation: slowin .3s 1;
|
animation: slowin .3s 1;
|
||||||
}
|
}
|
||||||
@keyframes slowin {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Report modals */
|
/* Report modals */
|
||||||
|
|
|
||||||
|
|
@ -331,6 +331,108 @@ body.app-body {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keyframes */
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.6);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bounce-sml {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(.9);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bounce-vertical {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-40%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateY(20%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes launch {
|
||||||
|
0% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(200%, -150%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: translate(200%, -150%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
transform: translate(-20%, 20%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein-short {
|
||||||
|
from {
|
||||||
|
transform: translate(0, -10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slowin {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Rordered layout */
|
/* Rordered layout */
|
||||||
.app-body .columns-area__panels__pane--navigational {
|
.app-body .columns-area__panels__pane--navigational {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
@ -909,29 +1011,6 @@ body.app-body {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@keyframes fadein {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fadein-short {
|
|
||||||
from {
|
|
||||||
transform: translate(0, -10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 📝 Compose panel
|
/* 📝 Compose panel
|
||||||
---------------- */
|
---------------- */
|
||||||
.app-body .compose-form {
|
.app-body .compose-form {
|
||||||
|
|
@ -1206,20 +1285,6 @@ body.app-body {
|
||||||
background-image: var(--icon-send);
|
background-image: var(--icon-send);
|
||||||
background-color: var(--color-accent-bg);
|
background-color: var(--color-accent-bg);
|
||||||
}
|
}
|
||||||
@keyframes bounce-sml {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: scale(.9);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||||
animation: bounce-sml .3s ease-out 1;
|
animation: bounce-sml .3s ease-out 1;
|
||||||
}
|
}
|
||||||
|
|
@ -2009,20 +2074,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
> .icon-star {
|
> .icon-star {
|
||||||
animation: bounce .4s ease-out !important;
|
animation: bounce .4s ease-out !important;
|
||||||
}
|
}
|
||||||
@keyframes bounce {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.6);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: scale(.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
|
.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -2031,50 +2082,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.icon-button.active>.icon-retweet {
|
.icon-button.active>.icon-retweet {
|
||||||
animation: launch 1.2s ease-in !important;
|
animation: launch 1.2s ease-in !important;
|
||||||
}
|
}
|
||||||
@keyframes launch {
|
|
||||||
0% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
5% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(200%, -150%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translate(200%, -150%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
85% {
|
|
||||||
transform: translate(-20%, 20%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark,
|
.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark,
|
||||||
.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark {
|
.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark {
|
||||||
animation: bounce-vertical .4s ease-out !important;
|
animation: bounce-vertical .4s ease-out !important;
|
||||||
}
|
}
|
||||||
@keyframes bounce-vertical {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-40%);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translateY(20%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-body .status__action-bar .icon-button,
|
.app-body .status__action-bar .icon-button,
|
||||||
.app-body .detailed-status__action-bar .icon-button {
|
.app-body .detailed-status__action-bar .icon-button {
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
|
|
@ -2358,8 +2369,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
.app-body .media-gallery__preview {
|
.app-body .media-gallery__preview {
|
||||||
outline-color: rgba(255, 255, 255, .05);
|
outline-color: rgba(255, 255, 255, .05);
|
||||||
}
|
}
|
||||||
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
|
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview,
|
||||||
outline-color: rgba(255, 255, 255, .1);
|
.app-body .media-gallery__item-thumbnail img {
|
||||||
|
outline-color: rgba(255, 255, 255, .15);
|
||||||
|
}
|
||||||
|
.app-body .media-gallery__gifv::after,
|
||||||
|
.app-body .video-player::after {
|
||||||
|
border-color: rgba(255, 255, 255, .1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.app-body .spoiler-button__overlay__label,
|
.app-body .spoiler-button__overlay__label,
|
||||||
|
|
@ -3159,7 +3175,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
flex: 50vw;
|
flex: 50vw;
|
||||||
}
|
}
|
||||||
.app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active {
|
.app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active {
|
||||||
transform: scale(.9);
|
transform: scale(.8);
|
||||||
}
|
}
|
||||||
.app-body
|
.app-body
|
||||||
.navigation-panel:has(> *:nth-child(5):last-child)
|
.navigation-panel:has(> *:nth-child(5):last-child)
|
||||||
|
|
@ -3185,6 +3201,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
.app-body .column-link--transparent.active {
|
||||||
|
animation: bounce-sml .3s 1;
|
||||||
|
}
|
||||||
.app-body .column-link__icon {
|
.app-body .column-link__icon {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -4675,17 +4694,7 @@ a:is(.active,
|
||||||
.app-body .modal-root > div {
|
.app-body .modal-root > div {
|
||||||
animation: slowin .3s 1;
|
animation: slowin .3s 1;
|
||||||
}
|
}
|
||||||
@keyframes slowin {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Report modals */
|
/* Report modals */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue