franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Animate spot logo

Browse Source
This commit is contained in:
Franzz
2021-02-18 22:12:10 +01:00
parent 3d5450319d
commit 4c4c913ed2
5 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
masks/project.html
View File

@@ -7,7 +7,7 @@
<div id="settings-panel"> <div id="settings-panel">
<div class="settings-header"> <div class="settings-header">
<div class="logo"><img src="images/logo_black.png" /></div> <div class="logo"><img src="images/logo_black.png" /></div>
<div id="last_update"><p><img src="images/spot-logo-only.svg" /><abbr></abbr></p></div> <div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
</div> </div>
<div class="settings-sections"> <div class="settings-sections">
<div id="settings-sections-scrollbox"> <div id="settings-sections-scrollbox">

43
style/_common.scss
View File

@@ -1,19 +1,19 @@
/* Animations */ /* Animations */
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@-moz-keyframes fadeIn { @-moz-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@-ms-keyframes fadeIn { @-ms-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@-o-keyframes fadeIn { @-o-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@mixin animate($anim) { @mixin animate($anim) {
@@ -25,7 +25,7 @@
} }
.flicker { .flicker {
@include animate(fadeIn 0.5s infinite alternate); @include animate(fadeIn 0.5s infinite alternate);
} }
@mixin rounded($radius) { @mixin rounded($radius) {
@@ -41,6 +41,25 @@
-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity)); -webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
} }
@keyframes spotlogo {
0% {
transform: scale(1);
}
1.25% {
transform: scale(1.2);
}
2.5% {
transform: scale(1);
transform:rotate(0deg);
}
5% {
transform:rotate(360deg);
}
100% {
transform:rotate(360deg);
}
}
/* Common objects */ /* Common objects */
body, textarea, input, button { body, textarea, input, button {
@@ -79,4 +98,4 @@ input, textarea, button {
color: green; color: green;
} }
} }
} }

9
style/_mask_project.scss
View File

@@ -574,10 +574,13 @@ $legend-color: $post-color;
cursor: pointer; cursor: pointer;
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
img { span {
width: 12px;
vertical-align: middle;
margin-right: 0.5em; margin-right: 0.5em;
img {
width: 12px;
vertical-align: middle;
animation: spotlogo 20s infinite;
}
} }
abbr { abbr {

4
style/spot.css
View File

File diff suppressed because one or more lines are too long

2
style/spot.css.map
View File

File diff suppressed because one or more lines are too long