LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Disable prettier for load-screen.scss

Browse source
This commit is contained in:
ポール ウェッブ 2019-05-17 11:00:45 -05:00 • committed by Sean Yesmunt
parent 17be6711af
commit cca2ec6852
2 changed files with 54 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.prettierignore Normal file
View file

@ -0,0 +1 @@
src/ui/scss/component/_load-screen.scss

71
src/ui/scss/component/_load-screen.scss
View file

@ -9,28 +9,62 @@
overflow: hidden; overflow: hidden;
css-doodle { css-doodle {
width: 100%; width: 100%; height: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
--color: @p (var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
--rule: ( --rule: (
: doodle {@grid: 30x1 / 18vmin; --deg: @p (-180deg, 180deg) ;}: container {perspective: 30vmin;}: before, :doodle {
: after {@place-cell: @r (100%) @r (100%) ; @shape: star; @size: @r (6px) ; background-color: var(--color) ; @grid: 30x1 / 18vmin;
content: '' ;} @place-cell: center; @size: 100%; animation: scale-up 12s linear infinite; animation-delay: calc( --deg: @p(-180deg, 180deg);
-12s / @size () * @i () }
) ; background-image: @m100 (
radial-gradient(var(--color) 50%, transparent 0) @r (-20%, 120%) @r (-20%, 100%) / 1px 1px no-repeat :container {
) ; box-shadow: @m2 (0 0 50px var(--color)) ; will-change: transform, perspective: 30vmin;
opacity; @keyframes scale-up {0%, }
95.01%,
100% {opacity: 0; transform: translateZ(0) rotate(0) ;} 10% {opacity: 1;} 95% {transform: translateZ(35vmin) rotateZ( :before,
@var (--deg) :after {
) ;}} @place-cell: @r(100%) @r(100%);
); @shape: star;
@size: @r(6px);
background-color: var(--color);
content: '';
}
@place-cell: center;
@size: 100%;
animation: scale-up 12s linear infinite;
animation-delay: calc(-12s / @size() * @i());
background-image: @m100(
radial-gradient(var(--color) 50%, transparent 0)
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px
no-repeat
);
box-shadow: @m2(0 0 50px var(--color));
will-change: transform, opacity;
@keyframes scale-up {
0%,
95.01%,
100% {
opacity: 0;
transform: translateZ(0) rotate(0);
}
10% {
opacity: 1;
}
95% {
transform: translateZ(35vmin) rotateZ(@var(--deg));
}
}
)
} }
} }
@ -76,8 +110,7 @@
.load-screen__overlay { .load-screen__overlay {
@include center; @include center;
width: 100vw; width: 100vw; height: 100vh;
height: 100vh;
color: $lbry-white; color: $lbry-white;
flex-direction: column; flex-direction: column;
@ -109,6 +142,8 @@
} }
} }
.load-screen--help { .load-screen--help {
font-size: 14px; font-size: 14px;
padding-top: $spacing-vertical; padding-top: $spacing-vertical;