BinaryNinja/tvapp2
4
1
Fork 0
mirror of https://github.com/TheBinaryNinja/tvapp2.git synced 2026-06-04 03:55:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: update health animation

Browse Source
This commit is contained in:
Aetherx
2025-04-10 03:39:28 -07:00
parent 568c3fc219
commit 70e349d7e3
2 changed files with 36 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
tvapp2/www/css/tvapp2.min.css vendored
View File

@@ -4,13 +4,13 @@
.table .table
{ {
--bs-table-bg: #1b1b1b; --bs-table-bg: #1b1b1b;
--bs-table-border-color: #313131; --bs-table-border-color: #313131;
} }
.table-striped > tbody > tr:nth-of-type(2n+1) > * .table-striped > tbody > tr:nth-of-type(2n+1) > *
{ {
--bs-table-bg-type: #242424; --bs-table-bg-type: #242424;
} }
/* /*
@@ -19,37 +19,37 @@
.tooltip-inner .tooltip-inner
{ {
background-color: #3061a1; background-color: #3061a1;
box-shadow: 0px 0px 4px black; box-shadow: 0px 0px 4px black;
opacity: 1; opacity: 1;
color: #FFF; color: #FFF;
} }
.tooltip.bs-tooltip-right .tooltip-arrow::before .tooltip.bs-tooltip-right .tooltip-arrow::before
{ {
border-right-color: #3061a1 !important; border-right-color: #3061a1 !important;
} }
.tooltip.bs-tooltip-left .tooltip-arrow::before .tooltip.bs-tooltip-left .tooltip-arrow::before
{ {
border-left-color: #3061a1 !important; border-left-color: #3061a1 !important;
} }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before .tooltip.bs-tooltip-bottom .tooltip-arrow::before
{ {
border-bottom-color: #3061a1 !important; border-bottom-color: #3061a1 !important;
} }
.tooltip.bs-tooltip-top .tooltip-arrow::before .tooltip.bs-tooltip-top .tooltip-arrow::before
{ {
border-top-color: #3061a1 !important; border-top-color: #3061a1 !important;
} }
body body
{ {
background-color: #f8f9fa; background-color: #f8f9fa;
padding-bottom: 20px; padding-bottom: 20px;
overflow: auto; overflow: auto;
} }
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)
@@ -104,20 +104,20 @@ body
@keyframes spin-scale @keyframes spin-scale
{ {
to { to {
transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1);
} }
from { from {
transform: rotate(360deg) scale(1.5, 1.5); transform: rotate(360deg) scale(1.5, 1.5);
} }
} }
@keyframes spin @keyframes spin
{ {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@@ -347,8 +347,8 @@ p
.navbar-social svg .navbar-social svg
{ {
font-size: clamp(0.7em, 2vw, 1.1em); font-size: clamp(0.7em, 2vw, 1.0em);
margin-left: 10px; margin-left: 10px;
} }
.logo .logo
@@ -401,12 +401,12 @@ p
.spin .spin
{ {
transition-property: transform; transition-property: transform;
transition-duration: 0.5s; transition-duration: 0.5s;
animation-name: spin; animation-name: spin;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
} }
.table thead th a .table thead th a
@@ -630,78 +630,36 @@ code
{ {
0% 0%
{ {
transform: scale( .75); transform: scale(1.2);
} }
20% 20%
{ {
transform: scale( 1); transform: scale(1.5);
} }
40% 40%
{ {
transform: scale( .75); transform: scale(1.2);
} }
60% 60%
{ {
transform: scale( 1); transform: scale(1.5);
} }
80% 80%
{ {
transform: scale( .75); transform: scale(1.2);
} }
100% 100%
{ {
transform: scale( .75); transform: scale(1.2);
} }
} }
#heart .heart
{ {
position: relative; position: relative;
width: 100px; animation: heartbeat 1s infinite;
height: 90px;
animation: heartbeat 1s infinite;
} }
#heart:before,
#heart:after
{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after
{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
@-webkit-keyframes fadeOut { @-webkit-keyframes fadeOut {
0% { 0% {
opacity: 1; opacity: 1;

2
tvapp2/www/index.html
View File

@@ -21,8 +21,8 @@
<a class="header-name" href="<%= appUrlGithub %>">TVApp2 for Docker</a> <a class="header-name" href="<%= appUrlGithub %>">TVApp2 for Docker</a>
</div> </div>
<div class="navbar-social"> <div class="navbar-social">
<a href=""><i id="action-health" data-bs-toggle="tooltip" title="Health" class="heart logo health fa-duotone fa-solid fa-heart" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
<a href="javascript:runResync();"><i id="action-resync" data-bs-toggle="tooltip" title="Resync" class="restart fa-solid fa-rotate" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a> <a href="javascript:runResync();"><i id="action-resync" data-bs-toggle="tooltip" title="Resync" class="restart fa-solid fa-rotate" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
<a href=""><i id="action-health" data-bs-toggle="tooltip" title="Health" class="logo health fa-duotone fa-solid fa-heart" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
<a href="<%= appUrlDocs %>"><i data-bs-toggle="tooltip" title="Documentation" class="logo fa-duotone fa-solid fa-book-open-cover" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a> <a href="<%= appUrlDocs %>"><i data-bs-toggle="tooltip" title="Documentation" class="logo fa-duotone fa-solid fa-book-open-cover" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
<a href="<%= appUrlGithub %>"><i data-bs-toggle="tooltip" title="Github" class="logo fa-logos fa-github" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a> <a href="<%= appUrlGithub %>"><i data-bs-toggle="tooltip" title="Github" class="logo fa-logos fa-github" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
<a href="<%= appUrlDiscord %>"><i data-bs-toggle="tooltip" title="Discord" class="logo fa-logos fa-discord" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a> <a href="<%= appUrlDiscord %>"><i data-bs-toggle="tooltip" title="Discord" class="logo fa-logos fa-discord" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>