moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PlaceholderStatus: display wiping animation over post

This commit is contained in:
Alex Gleason 2021-10-11 15:52:16 -05:00
parent f9c19e43b4
commit 1db4cd60d4
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/styles/basics.scss
View File

@ -206,6 +206,32 @@ noscript {
} }
.placeholder-status { .placeholder-status {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
90deg,
hsla(var(--foreground-color_hsl), 0) 0%,
hsla(var(--foreground-color_hsl), 0) 25%,
var(--foreground-color) 50%,
hsla(var(--foreground-color_hsl), 0) 70%,
hsla(var(--foreground-color_hsl), 0) 100%
);
background-size: 200%;
animation: placeholder-pulse 2s infinite;
z-index: 1;
opacity: 0.9;
}
.status__display-name strong, .status__display-name strong,
.status__content { .status__content {
letter-spacing: -1px; letter-spacing: -1px;
@ -213,3 +239,8 @@ noscript {
opacity: 0.1; opacity: 0.1;
} }
} }
@keyframes placeholder-pulse {
0% { background-position-x: 200%; }
100% { background-position-x: 0; }
}

10
app/styles/themes.scss
View File

@ -31,6 +31,7 @@ body,
--accent-color: hsl(var(--accent-color_hsl)); --accent-color: hsl(var(--accent-color_hsl));
--primary-text-color: hsl(var(--primary-text-color_hsl)); --primary-text-color: hsl(var(--primary-text-color_hsl));
--background-color: hsl(var(--background-color_hsl)); --background-color: hsl(var(--background-color_hsl));
--foreground-color: hsl(var(--foreground-color_hsl));
--warning-color: hsla(var(--warning-color_hsl)); --warning-color: hsla(var(--warning-color_hsl));
// Meta-variables // Meta-variables
@ -38,6 +39,7 @@ body,
--accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l); --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
--primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l); --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l); --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
--foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
--warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l); --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
--accent-color_h: calc(var(--brand-color_h) - 15); --accent-color_h: calc(var(--brand-color_h) - 15);
--accent-color_s: 86%; --accent-color_s: 86%;
@ -59,7 +61,6 @@ body,
.theme-mode-light { .theme-mode-light {
// Primary variables // Primary variables
--foreground-color: #fff;
--highlight-text-color: hsl( --highlight-text-color: hsl(
var(--brand-color_h), var(--brand-color_h),
var(--brand-color_s), var(--brand-color_s),
@ -74,6 +75,9 @@ body,
--background-color_h: 0; --background-color_h: 0;
--background-color_s: 0%; --background-color_s: 0%;
--background-color_l: 94.9%; --background-color_l: 94.9%;
--foreground-color_h: 0;
--foreground-color_s: 0%;
--foreground-color_l: 100%;
--warning-color_h: 0; --warning-color_h: 0;
--warning-color_s: 100%; --warning-color_s: 100%;
--warning-color_l: 66%; --warning-color_l: 66%;
@ -88,7 +92,6 @@ body,
.theme-mode-dark { .theme-mode-dark {
// Primary variables // Primary variables
--foreground-color: #222;
--highlight-text-color: hsl( --highlight-text-color: hsl(
var(--brand-color_h), var(--brand-color_h),
var(--brand-color_s), var(--brand-color_s),
@ -103,6 +106,9 @@ body,
--background-color_h: 0; --background-color_h: 0;
--background-color_s: 0%; --background-color_s: 0%;
--background-color_l: 20%; --background-color_l: 20%;
--foreground-color_h: 0;
--foreground-color_s: 0%;
--foreground-color_l: 13%;
--warning-color_h: 0; --warning-color_h: 0;
--warning-color_s: 100%; --warning-color_s: 100%;
--warning-color_l: 66%; --warning-color_l: 66%;