mirror of
https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git
synced 2025-06-14 16:19:59 +00:00
Sudo-JHare
ca8668e5e5
Hapi Config Page. retrieve bundles from server split bundles to resources. new upload page, and Package Registry CACHE
223 lines
12 KiB
CSS
223 lines
12 KiB
CSS
/* /app/static/css/fire-animation.css */
|
|
|
|
/* Removed html, body, stage styles */
|
|
|
|
.minifire-container { /* Add a wrapper for positioning/sizing */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
height: 130px; /* Overall height of the animation area */
|
|
overflow: hidden; /* Hide parts extending beyond the container */
|
|
background-color: #270537; /* Optional: Add a background */
|
|
border-radius: 4px;
|
|
border: 1px solid #444;
|
|
margin-top: 0.5rem; /* Space above animation */
|
|
}
|
|
|
|
.minifire-campfire {
|
|
position: relative;
|
|
/* Base size significantly reduced (original was 600px) */
|
|
width: 150px;
|
|
height: 150px;
|
|
transform-origin: bottom center;
|
|
/* Scale down slightly more if needed, adjusted positioning based on origin */
|
|
transform: scale(0.8) translateY(15px); /* Pushes it down slightly */
|
|
}
|
|
|
|
/* --- Scaled Down Logs --- */
|
|
.minifire-log {
|
|
position: absolute;
|
|
width: 60px; /* 238/4 */
|
|
height: 18px; /* 70/4 */
|
|
border-radius: 8px; /* 32/4 */
|
|
background: #781e20;
|
|
overflow: hidden;
|
|
opacity: 0.99;
|
|
transform-origin: center center;
|
|
box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.15); /* Scaled shadow */
|
|
}
|
|
|
|
.minifire-log:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 9px; /* 35/4 */
|
|
width: 2px; /* 8/4 */
|
|
height: 2px; /* 8/4 */
|
|
border-radius: 8px; /* 32/4 */
|
|
background: #b35050;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 3;
|
|
/* Scaled box-shadows */
|
|
box-shadow: 0 0 0 0.5px #781e20, /* 2.5/4 -> 0.6 -> 0.5 */
|
|
0 0 0 2.5px #b35050, /* 10.5/4 -> 2.6 -> 2.5 */
|
|
0 0 0 3.5px #781e20, /* 13/4 -> 3.25 -> 3.5 */
|
|
0 0 0 5.5px #b35050, /* 21/4 -> 5.25 -> 5.5 */
|
|
0 0 0 6px #781e20, /* 23.5/4 -> 5.9 -> 6 */
|
|
0 0 0 8px #b35050; /* 31.5/4 -> 7.9 -> 8 */
|
|
}
|
|
|
|
.minifire-streak {
|
|
position: absolute;
|
|
height: 1px; /* Min height */
|
|
border-radius: 5px; /* 20/4 */
|
|
background: #b35050;
|
|
}
|
|
/* Scaled streaks */
|
|
.minifire-streak:nth-child(1) { top: 3px; width: 23px; } /* 10/4, 90/4 */
|
|
.minifire-streak:nth-child(2) { top: 3px; left: 25px; width: 20px; } /* 10/4, 100/4, 80/4 */
|
|
.minifire-streak:nth-child(3) { top: 3px; left: 48px; width: 8px; } /* 10/4, 190/4, 30/4 */
|
|
.minifire-streak:nth-child(4) { top: 6px; width: 33px; } /* 22/4, 132/4 */
|
|
.minifire-streak:nth-child(5) { top: 6px; left: 36px; width: 12px; } /* 22/4, 142/4, 48/4 */
|
|
.minifire-streak:nth-child(6) { top: 6px; left: 50px; width: 7px; } /* 22/4, 200/4, 28/4 */
|
|
.minifire-streak:nth-child(7) { top: 9px; left: 19px; width: 40px; } /* 34/4, 74/4, 160/4 */
|
|
.minifire-streak:nth-child(8) { top: 12px; left: 28px; width: 10px; } /* 46/4, 110/4, 40/4 */
|
|
.minifire-streak:nth-child(9) { top: 12px; left: 43px; width: 14px; } /* 46/4, 170/4, 54/4 */
|
|
.minifire-streak:nth-child(10) { top: 15px; left: 23px; width: 28px; } /* 58/4, 90/4, 110/4 */
|
|
|
|
/* Scaled Log Positions (Relative to 150px campfire) */
|
|
.minifire-log:nth-child(1) { bottom: 25px; left: 25px; transform: rotate(150deg) scaleX(0.75); z-index: 20; } /* 100/4, 100/4 */
|
|
.minifire-log:nth-child(2) { bottom: 30px; left: 35px; transform: rotate(110deg) scaleX(0.75); z-index: 10; } /* 120/4, 140/4 */
|
|
.minifire-log:nth-child(3) { bottom: 25px; left: 17px; transform: rotate(-10deg) scaleX(0.75); } /* 98/4, 68/4 */
|
|
.minifire-log:nth-child(4) { bottom: 20px; left: 55px; transform: rotate(-120deg) scaleX(0.75); z-index: 26; } /* 80/4, 220/4 */
|
|
.minifire-log:nth-child(5) { bottom: 19px; left: 53px; transform: rotate(-30deg) scaleX(0.75); z-index: 25; } /* 75/4, 210/4 */
|
|
.minifire-log:nth-child(6) { bottom: 23px; left: 70px; transform: rotate(35deg) scaleX(0.85); z-index: 30; } /* 92/4, 280/4 */
|
|
.minifire-log:nth-child(7) { bottom: 18px; left: 75px; transform: rotate(-30deg) scaleX(0.75); z-index: 20; } /* 70/4, 300/4 */
|
|
|
|
/* --- Scaled Down Sticks --- */
|
|
.minifire-stick {
|
|
position: absolute;
|
|
width: 17px; /* 68/4 */
|
|
height: 5px; /* 20/4 */
|
|
border-radius: 3px; /* 10/4 */
|
|
box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.1);
|
|
background: #781e20;
|
|
transform-origin: center center;
|
|
}
|
|
.minifire-stick:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 7px; /* 30/4 -> 7.5 */
|
|
width: 1.5px; /* 6/4 */
|
|
height: 5px; /* 20/4 */
|
|
background: #781e20;
|
|
border-radius: 3px; /* 10/4 */
|
|
transform: translateY(50%) rotate(32deg);
|
|
}
|
|
.minifire-stick:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 5px; /* 20/4 */
|
|
height: 5px; /* 20/4 */
|
|
background: #b35050;
|
|
border-radius: 3px; /* 10/4 */
|
|
}
|
|
/* Scaled Stick Positions */
|
|
.minifire-stick:nth-child(1) { left: 40px; bottom: 41px; transform: rotate(-152deg) scaleX(0.8); z-index: 12; } /* 158/4, 164/4 */
|
|
.minifire-stick:nth-child(2) { left: 45px; bottom: 8px; transform: rotate(20deg) scaleX(0.9); } /* 180/4, 30/4 */
|
|
.minifire-stick:nth-child(3) { left: 100px; bottom: 10px; transform: rotate(170deg) scaleX(0.9); } /* 400/4, 38/4 */
|
|
.minifire-stick:nth-child(3):before { display: none; }
|
|
.minifire-stick:nth-child(4) { left: 93px; bottom: 38px; transform: rotate(80deg) scaleX(0.9); z-index: 20; } /* 370/4, 150/4 */
|
|
.minifire-stick:nth-child(4):before { display: none; }
|
|
|
|
/* --- Scaled Down Fire --- */
|
|
.minifire-fire .minifire-flame {
|
|
position: absolute;
|
|
transform-origin: bottom center;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Red Flames */
|
|
.minifire-fire__red .minifire-flame {
|
|
width: 12px; /* 48/4 */
|
|
border-radius: 12px; /* 48/4 */
|
|
background: #e20f00;
|
|
box-shadow: 0 0 20px 5px rgba(226,15,0,0.4); /* Scaled shadow */
|
|
}
|
|
/* Scaled positions/heights */
|
|
.minifire-fire__red .minifire-flame:nth-child(1) { left: 35px; height: 40px; bottom: 25px; animation: minifire-fire 2s 0.15s ease-in-out infinite alternate; } /* 138/4, 160/4, 100/4 */
|
|
.minifire-fire__red .minifire-flame:nth-child(2) { left: 47px; height: 60px; bottom: 25px; animation: minifire-fire 2s 0.35s ease-in-out infinite alternate; } /* 186/4, 240/4, 100/4 */
|
|
.minifire-fire__red .minifire-flame:nth-child(3) { left: 59px; height: 75px; bottom: 25px; animation: minifire-fire 2s 0.1s ease-in-out infinite alternate; } /* 234/4, 300/4, 100/4 */
|
|
.minifire-fire__red .minifire-flame:nth-child(4) { left: 71px; height: 90px; bottom: 25px; animation: minifire-fire 2s 0s ease-in-out infinite alternate; } /* 282/4, 360/4, 100/4 */
|
|
.minifire-fire__red .minifire-flame:nth-child(5) { left: 83px; height: 78px; bottom: 25px; animation: minifire-fire 2s 0.45s ease-in-out infinite alternate; } /* 330/4, 310/4, 100/4 */
|
|
.minifire-fire__red .minifire-flame:nth-child(6) { left: 95px; height: 58px; bottom: 25px; animation: minifire-fire 2s 0.3s ease-in-out infinite alternate; } /* 378/4, 232/4, 100/4 */
|
|
.minifire-fire__red .minifire-flame:nth-child(7) { left: 107px; height: 35px; bottom: 25px; animation: minifire-fire 2s 0.1s ease-in-out infinite alternate; } /* 426/4, 140/4, 100/4 */
|
|
|
|
/* Orange Flames */
|
|
.minifire-fire__orange .minifire-flame {
|
|
width: 12px; border-radius: 12px; background: #ff9c00;
|
|
box-shadow: 0 0 20px 5px rgba(255,156,0,0.4);
|
|
}
|
|
.minifire-fire__orange .minifire-flame:nth-child(1) { left: 35px; height: 35px; bottom: 25px; animation: minifire-fire 2s 0.05s ease-in-out infinite alternate; }
|
|
.minifire-fire__orange .minifire-flame:nth-child(2) { left: 47px; height: 53px; bottom: 25px; animation: minifire-fire 2s 0.1s ease-in-out infinite alternate; }
|
|
.minifire-fire__orange .minifire-flame:nth-child(3) { left: 59px; height: 63px; bottom: 25px; animation: minifire-fire 2s 0.35s ease-in-out infinite alternate; }
|
|
.minifire-fire__orange .minifire-flame:nth-child(4) { left: 71px; height: 75px; bottom: 25px; animation: minifire-fire 2s 0.4s ease-in-out infinite alternate; }
|
|
.minifire-fire__orange .minifire-flame:nth-child(5) { left: 83px; height: 65px; bottom: 25px; animation: minifire-fire 2s 0.5s ease-in-out infinite alternate; }
|
|
.minifire-fire__orange .minifire-flame:nth-child(6) { left: 95px; height: 51px; bottom: 25px; animation: minifire-fire 2s 0.35s ease-in-out infinite alternate; }
|
|
.minifire-fire__orange .minifire-flame:nth-child(7) { left: 107px; height: 28px; bottom: 25px; animation: minifire-fire 2s 0.1s ease-in-out infinite alternate; }
|
|
|
|
/* Yellow Flames */
|
|
.minifire-fire__yellow .minifire-flame {
|
|
width: 12px; border-radius: 12px; background: #ffeb6e;
|
|
box-shadow: 0 0 20px 5px rgba(255,235,110,0.4);
|
|
}
|
|
.minifire-fire__yellow .minifire-flame:nth-child(1) { left: 47px; height: 35px; bottom: 25px; animation: minifire-fire 2s 0.6s ease-in-out infinite alternate; }
|
|
.minifire-fire__yellow .minifire-flame:nth-child(2) { left: 59px; height: 43px; bottom: 30px; animation: minifire-fire 2s 0.4s ease-in-out infinite alternate; } /* Adjusted bottom slightly */
|
|
.minifire-fire__yellow .minifire-flame:nth-child(3) { left: 71px; height: 60px; bottom: 25px; animation: minifire-fire 2s 0.38s ease-in-out infinite alternate; }
|
|
.minifire-fire__yellow .minifire-flame:nth-child(4) { left: 83px; height: 50px; bottom: 25px; animation: minifire-fire 2s 0.22s ease-in-out infinite alternate; }
|
|
.minifire-fire__yellow .minifire-flame:nth-child(5) { left: 95px; height: 36px; bottom: 25px; animation: minifire-fire 2s 0.18s ease-in-out infinite alternate; }
|
|
|
|
/* White Flames */
|
|
.minifire-fire__white .minifire-flame {
|
|
width: 12px; border-radius: 12px; background: #fef1d9;
|
|
box-shadow: 0 0 20px 5px rgba(254,241,217,0.4);
|
|
}
|
|
.minifire-fire__white .minifire-flame:nth-child(1) { left: 39px; width: 8px; height: 25px; bottom: 25px; animation: minifire-fire 2s 0.22s ease-in-out infinite alternate; } /* Scaled width too */
|
|
.minifire-fire__white .minifire-flame:nth-child(2) { left: 45px; width: 8px; height: 30px; bottom: 25px; animation: minifire-fire 2s 0.42s ease-in-out infinite alternate; }
|
|
.minifire-fire__white .minifire-flame:nth-child(3) { left: 59px; height: 43px; bottom: 25px; animation: minifire-fire 2s 0.32s ease-in-out infinite alternate; }
|
|
.minifire-fire__white .minifire-flame:nth-child(4) { left: 71px; height: 53px; bottom: 25px; animation: minifire-fire 2s 0.8s ease-in-out infinite alternate; }
|
|
.minifire-fire__white .minifire-flame:nth-child(5) { left: 83px; height: 43px; bottom: 25px; animation: minifire-fire 2s 0.85s ease-in-out infinite alternate; }
|
|
.minifire-fire__white .minifire-flame:nth-child(6) { left: 95px; width: 8px; height: 28px; bottom: 25px; animation: minifire-fire 2s 0.64s ease-in-out infinite alternate; }
|
|
.minifire-fire__white .minifire-flame:nth-child(7) { left: 102px; width: 8px; height: 25px; bottom: 25px; animation: minifire-fire 2s 0.32s ease-in-out infinite alternate; }
|
|
|
|
/* --- Scaled Down Sparks --- */
|
|
.minifire-spark {
|
|
position: absolute;
|
|
width: 1.5px; /* 6/4 */
|
|
height: 5px; /* 20/4 */
|
|
background: #fef1d9;
|
|
border-radius: 5px; /* 18/4 -> 4.5 */
|
|
z-index: 50;
|
|
transform-origin: bottom center;
|
|
transform: scaleY(0);
|
|
}
|
|
/* Scaled spark positions/animations */
|
|
.minifire-spark:nth-child(1) { left: 40px; bottom: 53px; animation: minifire-spark 1s 0.4s linear infinite; } /* 160/4, 212/4 */
|
|
.minifire-spark:nth-child(2) { left: 45px; bottom: 60px; animation: minifire-spark 1s 1s linear infinite; } /* 180/4, 240/4 */
|
|
.minifire-spark:nth-child(3) { left: 52px; bottom: 80px; animation: minifire-spark 1s 0.8s linear infinite; } /* 208/4, 320/4 */
|
|
.minifire-spark:nth-child(4) { left: 78px; bottom: 100px; animation: minifire-spark 1s 2s linear infinite; } /* 310/4, 400/4 */
|
|
.minifire-spark:nth-child(5) { left: 90px; bottom: 95px; animation: minifire-spark 1s 0.75s linear infinite; } /* 360/4, 380/4 */
|
|
.minifire-spark:nth-child(6) { left: 98px; bottom: 80px; animation: minifire-spark 1s 0.65s linear infinite; } /* 390/4, 320/4 */
|
|
.minifire-spark:nth-child(7) { left: 100px; bottom: 70px; animation: minifire-spark 1s 1s linear infinite; } /* 400/4, 280/4 */
|
|
.minifire-spark:nth-child(8) { left: 108px; bottom: 53px; animation: minifire-spark 1s 1.4s linear infinite; } /* 430/4, 210/4 */
|
|
|
|
/* --- Keyframes (Rename to avoid conflicts) --- */
|
|
/* Use the same keyframe logic, just rename them */
|
|
@keyframes minifire-fire {
|
|
0% { transform: scaleY(1); } 28% { transform: scaleY(0.7); } 38% { transform: scaleY(0.8); } 50% { transform: scaleY(0.6); } 70% { transform: scaleY(0.95); } 82% { transform: scaleY(0.58); } 100% { transform: scaleY(1); }
|
|
}
|
|
@keyframes minifire-spark {
|
|
0%, 35% { transform: scaleY(0) translateY(0); opacity: 0; }
|
|
50% { transform: scaleY(1) translateY(0); opacity: 1; }
|
|
/* Adjusted translateY for smaller scale */
|
|
70% { transform: scaleY(1) translateY(-3px); opacity: 1; } /* 10/4 -> 2.5 -> 3 */
|
|
75% { transform: scaleY(1) translateY(-3px); opacity: 0; }
|
|
100% { transform: scaleY(0) translateY(0); opacity: 0; }
|
|
} |