Website
/
GravTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace Animated Image with own, pure CSS impl.

main
Anonymous Contributor 2023-09-12 08:19:29 +02:00
parent 36762661bf
commit ea3846e33b
2 changed files with 40 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/animated-image.css Normal file
View File

@ -0,0 +1,34 @@
.animated-image {
display: grid;
position: absolute;
align-items: center;
text-align: center;
overflow: hidden;
}
.animated-image > * {
grid-column: 1;
grid-row: 1;
position: relative;
transition: all 0.5s;
}
.animated-image img {
top: 0;
z-index: 50;
}
.animated-image a {
top: 100%;
text-decoration: none;
color: rgb(243, 243, 243);
font-weight: bold;
}
.animated-image:hover img {
top: -100% !important;
}
.animated-image:hover a {
top: 0;
}

50
templates/partials/base.html.twig
View File

@ -30,6 +30,7 @@
{% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_03/custom.css', 40) %} {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_03/custom.css', 40) %}
{% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_05/custom.css', 40) %} {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_05/custom.css', 40) %}
{% do assets.addCss('theme://css/navbar.css', 50) %} {% do assets.addCss('theme://css/navbar.css', 50) %}
{% do assets.addCss('theme://css/animated-image.css', 50) %}
{% endblock %} {% endblock %}
{% block custom_stylesheets %}{% endblock %} {% block custom_stylesheets %}{% endblock %}
@ -74,58 +75,19 @@
{% block footer %} {% block footer %}
<footer id="imFooter"> <footer id="imFooter">
<div id="imFooterObjects"> <div id="imFooterObjects">
<div class="template-object-wrapper animated-image">
<img loading="lazy" alt="4Creative Discord Button" style="position: relative; left: 0px; top: 0px; user-select: none" unselectable="on" src="{{ media['image://4Creative-Discord-Button.png'].url|e }}">
<a href="https://discord.com/invite/ZfPtWAr" data-description="Link zu unserem Discord Kanal (Einladung)">Unser Discord Kanal</a>
</div>
<div id="imFooter_imTextObject_02_wrapper" class="template-object-wrapper"> <div id="imFooter_imTextObject_02_wrapper" class="template-object-wrapper">
<div id="imFooter_imTextObject_02"> <div id="imFooter_imTextObject_02">
<div data-index="0" class="text-tab-content grid-prop current-tab " <div data-index="0" class="text-tab-content grid-prop current-tab" id="imFooter_imTextObject_02_tab0" style="opacity: 1">
id="imFooter_imTextObject_02_tab0" style="opacity: 1; ">
<div class="text-inner"> <div class="text-inner">
<div data-line-height="1.15" class="lh1-15 imTARight"><span class="fs14lh1-15 cf1">(c) 2020-{{ "now"|date('Y') }} &nbsp;</span><span class="fs14lh1-15 cf1">by </span><span class="fs14lh1-15 cf1"><b>4Creative</b></span></div> <div data-line-height="1.15" class="lh1-15 imTARight"><span class="fs14lh1-15 cf1">(c) 2020-{{ "now"|date('Y') }} &nbsp;</span><span class="fs14lh1-15 cf1">by </span><span class="fs14lh1-15 cf1"><b>4Creative</b></span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="imFooter_pluginAppObj_03_wrapper" class="template-object-wrapper">
<!-- Animated Image v.31 -->
<div id="imFooter_pluginAppObj_03">
<div id="iandt_imFooter_pluginAppObj_03">
<div class="wrapper move-bottom">
<div class="sides-container">
<div class="side front">
<div class="text-container">
<div class='center-all'></div>
</div>
</div>
<div class="side back">
<div class="text-container">
<div class="center-all">
<script>
function decode_html(encoded, newlineTag) {
encoded = replaceAll("&amp;gt;", ">", encoded);
encoded = replaceAll("&amp;lt;", "<", encoded);
encoded = replaceAll("&quot;", "\"", encoded);
encoded = replaceAll("&amp;", "&", encoded);
encoded = replaceAll("&lt;br /&gt;", "", encoded);
return encoded;
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
</script>
<div id="imFooter_pluginAppObj_03_link_btn" class='btn'>
<script>$('#imFooter_pluginAppObj_03_link_btn').append(decode_html("&amp;lt;a href=&quot;http://discord.gg/ZfPtWAr&quot; target=&quot;_blank&quot; onmouseover=&quot;x5engine.imTip.Show(this, { text: \'Link zu unserem Discord Kanal (Einladung)\', width: 180});&quot;&amp;gt;Unser Discord Kanal&amp;lt;/a&amp;gt;"));</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
animatedimage_imFooter_pluginAppObj_03();
</script>
</div>
</div>
<div id="imFooter_imObjectImage_04_wrapper" class="template-object-wrapper"> <div id="imFooter_imObjectImage_04_wrapper" class="template-object-wrapper">
<div id="imFooter_imObjectImage_04"> <div id="imFooter_imObjectImage_04">
<img loading="lazy" alt="4Creative Logo" style="width: 60px; height: 60px; position: relative; left: 0px; top: 0px; user-select: none;" width="60" height="60" unselectable="on" src="{{ media['image://4Creative-logo-small.png'].url|e }}"> <img loading="lazy" alt="4Creative Logo" style="width: 60px; height: 60px; position: relative; left: 0px; top: 0px; user-select: none;" width="60" height="60" unselectable="on" src="{{ media['image://4Creative-logo-small.png'].url|e }}">