icedream
/
rekt-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add subtle out-of-sync opacity manipulation for smoke effect.
gitea/icedream/rekt-theme/master This commit looks good Details

header/meta/overlay
Icedream 2018-07-16 01:25:26 +02:00
parent 88d93f3f70
commit 9dfd022dfb
Signed by: icedream
GPG Key ID: 1573F6D8EFE4D0CF
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_variables.scss
View File

@ -20,7 +20,8 @@ $icedream-nav-bg-fade: true !default;
$icedream-fog-bg: true !default; $icedream-fog-bg: true !default;
$icedream-fog-bg-blur: false !default; $icedream-fog-bg-blur: false !default;
$icedream-fog-bg-animated: true !default; $icedream-fog-bg-animated: true !default;
$icedream-fog-bg-animation-length: 30s !default; $icedream-fog-bg-pulse-animation-length: 68s !default;
$icedream-fog-bg-slide-animation-length: 25s !default;
$icedream-station-fill-background-color: rgba(255, 255, 255, .1); $icedream-station-fill-background-color: rgba(255, 255, 255, .1);
$rekt-tab-count: 4 !default; $rekt-tab-count: 4 !default;

20
src/main/_smoke.scss
View File

@ -30,9 +30,27 @@
@if $icedream-fog-bg-animated { @if $icedream-fog-bg-animated {
background-repeat: repeat-x; background-repeat: repeat-x;
background-size: 100% 100%; background-size: 100% 100%;
animation: icedream-bg-slide linear $icedream-fog-bg-animation-length infinite; animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite,
icedream-bg-pulse ease-in-out $icedream-fog-bg-pulse-animation-length infinite;
transform: scale(2, 1) translateX(0); transform: scale(2, 1) translateX(0);
transform-origin: left; transform-origin: left;
@keyframes icedream-bg-pulse {
0% {
opacity: .3;
}
22% {
opacity: .2;
}
54% {
opacity: .35;
}
77% {
opacity: .16;
}
100% {
opacity: .3;
}
}
@keyframes icedream-bg-slide { @keyframes icedream-bg-slide {
to { to {
transform: scale(2, 1) translateX(-50%); transform: scale(2, 1) translateX(-50%);