diff --git a/Stream Tool/Overlays/Simple Elements/README.md b/Stream Tool/Overlays/Simple Elements/README.md new file mode 100644 index 00000000..f019b573 --- /dev/null +++ b/Stream Tool/Overlays/Simple Elements/README.md @@ -0,0 +1,10 @@ +# Simple Elements + +This is a collection of elements from the example overlays, so that you can add them to existing scenes in your streaming software if you already have them. Like other overlays, just drag the html file into OBS. + +Currently this only has an element for the party, with the aim to add others in future. + + +## Pokemon Party + +The layout will adjust based on the width of your browser source. So 1920 width will have a single row of all 6 pokemon, 960 width will have two rows of 3, 320 width will have a vertical party, etc. \ No newline at end of file diff --git a/Stream Tool/Overlays/Simple Elements/Resources/party.css b/Stream Tool/Overlays/Simple Elements/Resources/party.css new file mode 100755 index 00000000..92a53f1f --- /dev/null +++ b/Stream Tool/Overlays/Simple Elements/Resources/party.css @@ -0,0 +1,363 @@ +@font-face { + font-family: "FontBold"; + src: url('../../../Resources/Fonts/RobotoCondensed-Bold.ttf'); +} +@font-face { + font-family: "FontMain"; + src: url('../../../Resources/Fonts/RobotoCondensed-SemiBold.ttf'); +} +@font-face { + font-family: "FontMedium"; + src: url('../../../Resources/Fonts/RobotoCondensed-Medium.ttf'); +} + +* { + box-sizing: border-box; +} + +html, body { + padding: 0; + margin: 0; + font-family: "FontMain"; +} + +#content { + width: 100%; + height: 100%; +} + +.absol { + position: absolute; +} + + +/* Non-Trainer battle pokemon Section */ + +#partyPokes { + position: absolute; + left: 0px; + top: 20px; + height: 260px; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 15px; + color: #f8f8f8; +} + + +.pokeDiv { + --healthy: #337E11; + --warning: #7e7c11; + --danger: #7e1111; + --Par: var(--warning); + --Poi: #56117e; + --Fro: #1a8fa3; + --Bur: #7e4611; + --Sle: grey; + --activeColor: var(--healthy); + position: relative; + height: 120px; + width: 300px; + border: thick double var(--activeColor); + overflow: visible; + border-radius: 30% / 100% 100% 100% 100%; + transition: opacity .25s, margin-left .6s; +} +.pokeFai, .pokeDed { + --activeColor: var(--danger) !important; + filter: grayscale(.8) brightness(.8) !important; +} +.pokePar { + --activeColor: var(--warning) !important; +} +.pokePoi { + --activeColor: var(--Poi) !important; +} +.pokeFro { + --activeColor: var(--Fro) !important; +} +.pokeBur { + --activeColor: var(--Bur) !important; +} +.pokeSle { + --activeColor: var(--Sle) !important; +} +.pokeDivInCombat { + .pokeDivMask { + .pokeHpDiv { + transform: translateY(0px); + } + } + .pokeTexts { + transform: translateY(0px); + } +} +.pokeDivOutOfCombat { + .pokeDivMask { + .pokeHpDiv { + transform: translateY(25px); + } + } + .pokeTexts { + transform: translateY(8px); + } +} + + +.pokeTexts { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 20px; + text-shadow: 0px 0px 5px black; + transition: transform .5s; +} + +.pokeDivMask { + position: absolute; + width: 100%; + height: 100%; + border-radius: 27% / 100% 100% 100% 100%; + overflow: hidden; +} + +.pokeLvlDiv { + display: flex; +} + +.pokeLvlBefore { + background-color: var(--activeColor); + width: 26px; +} +.pokeLvlTexts { + display: flex; + gap: 3px; + background-color: var(--activeColor); + padding: 2px 0px 2px 5px; + align-items: center; + font-size: 16px; +} +.pokeLvlAfter { + background-color: var(--activeColor); + width: 20px; + border-bottom-right-radius: 100%; +} + + +.pokeNick { + font-size: 30px; +} + +.pokeSubText { + display: flex; + gap: 6px; + font-size: 22px; + font-style: oblique 15deg; + padding-left: 5px; + margin-top: -3px; +} + + +.pokeHpDiv { + display: flex; + position: absolute; + bottom: 0px; + width: 100%; + --bacColor: #363636; + transition: transform .5s; +} +.pokeHpBefore { + background-color: var(--bacColor); + width: 26px; + flex-shrink: 0; +} +.pokeHpText { + display: flex; + justify-content: center; + width: 55px; + background-color: var(--bacColor); + padding: 2px 0px 1px 5px; + z-index: 2; + flex-shrink: 0; + text-wrap: nowrap; + color: #b6b6b6; + font-size: 16px; +} +.pokeHpAfter { + background-color: var(--bacColor); + width: 24px; + margin-left: -17px; + border-top-right-radius: 50%; + z-index: 1; + flex-shrink: 0; +} + +.pokeHpBar { + background-color: var(--bacColor); + width: 50%; + height: 11px; + transform: translateY(12px); + border-radius: 10% / 0 100% 0 0; + border: 4px solid var(--bacColor); + border-right: 6px solid var(--bacColor); + border-left: none; + overflow: hidden; +} +.hpBar { + position: absolute; + width: 100%; + height: 100%; +} +.pokeHpBarTotal { + background-color: grey; +} +.pokeHpBarCurrent { + background-color: var(--activeColor); + filter: brightness(1.7); +} + + +.pokeImgDiv { + position: absolute; + right: 30px; + display: flex; + justify-content: right; + align-items: center; + clip-path: inset(-100px -100px 0px -100px); + width: 200px; + height: 100%; +} +.pokeImg { + transform: scale(2); + image-rendering: pixelated; +} + + +/** Other */ + +.flipBack { + transform: scaleX(-1); +} + +#connErrorDiv { + display: none; + width: 100%; + height: 80px; + position: absolute; + bottom: 0; + background: linear-gradient(to top, black, rgba(0, 0, 0, 0)); + justify-content: center; + align-items: center; + text-align: center; + font-size: 28px; + color: lightcoral; + text-shadow: 0px 0px 5px black; +} + + +/* Animations! */ +@keyframes slideOut { + from { + opacity: 1; + transform: translateX(0px); + } + to { + opacity: 0; + transform: translateX(-40px); + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-40px); + } + to { + opacity: 1; + transform: translateX(0px); + } +} + +@keyframes hidePokes { + from { + opacity: 1; + transform: translateY(0px); + } + to { + opacity: 0; + transform: translateY(30px); + } +} +@keyframes showPokes { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} + +@keyframes iDontFeelSoGood { + from {opacity: 1;} + to {opacity: 0;} +} + +@keyframes shake { + 0% { transform: translate(1px, 1px); filter: brightness(1.3); } + 10% { transform: translate(1px, -2px); } + 20% { transform: translate(-1px, 0px); } + 30% { transform: translate(1px, 1px); } + 40% { transform: translate(2px, -1px); } + 50% { transform: translate(0px, 1px); } + 60% { transform: translate(-1px, 0px); } + 70% { transform: translate(1px, 1px); filter: brightness(1); } + 80% { transform: translate(-1px, -1px); } + 90% { transform: translate(1px, 0px); } + 100% { transform: translate(0px, -1px); } +} + +@keyframes megaAnim { + 0% {filter: brightness(1);} + 85% {filter: brightness(15);} + 100% {filter: brightness(1);} +} + + +@keyframes trainerIntroFull { + 0% {transform: translateY(20px);} + 35% {transform: translateY(20px);} + 45% {transform: translateY(0px);} +} +@keyframes trainerIntroTopBar { + 0% {transform: translateX(-100%);} + 15% {transform: translateX(0%);} + 85% {transform: translateX(0%);} + 100% {transform: translateX(100%);} +} +@keyframes trainerIntroBotBar { + 0% {transform: translateX(100%);} + 15% {transform: translateX(0%);} + 85% {transform: translateX(0%);} + 100% {transform: translateX(-100%);} +} +@keyframes trainerIntroTexts { + 0% {transform: translateX(40px); opacity: 0;} + 5% {transform: translateX(40px); opacity: 0;} + 15% {transform: translateX(0px); opacity: 1;} + 85% {transform: translateX(0px); opacity: 1;} + 95% {transform: translateX(-40px); opacity: 0;} + 100% {transform: translateX(-40px); opacity: 0;} +} + +@keyframes trainerIntroCount { + 0% {opacity: 0;} + 35% {opacity: 0;} + 45% {opacity: 1;} + 90% {opacity: 1;} + 100% {opacity: 0;} +} diff --git a/Stream Tool/Overlays/Simple Elements/party.html b/Stream Tool/Overlays/Simple Elements/party.html new file mode 100755 index 00000000..1e9fbc6b --- /dev/null +++ b/Stream Tool/Overlays/Simple Elements/party.html @@ -0,0 +1,275 @@ + + + + + Pokemon 3x2 Overlay + + + + + + +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ Can't connect with GUI, attempting to reconnect every 5 seconds... +
+ + +