rDrama/files/templates/emoji_modal.html

<div id="form" class="d-none"></div>
<div class="modal fade" id="emojiModal" tabindex="-1" role="dialog" aria-labelledby="emojiModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered p-2 py-5 emoji-modal" role="document">
		<div class="modal-content" id="emojiTabs">
			<div class="modal-header">
				<div>
					<ul class="nav nav-pills py-2">
						<li class="nav-item">
							<a class="nav-link active emojitab" data-bs-toggle="tab" href="#emoji-tab-favorite">Favorite</a>
						</li>

						{% if SITE_NAME == 'ruqqus' %}
							<li class="nav-item">
								<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-ruqqie">Ruqqie</a>
							</li>
						{% endif %}

						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-marsey">Marsey</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-platy">Platy</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-wolf">Zombie Wolf</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-tay">Tay</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-classic">Classic</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-rage">Rage</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-wojak">Wojak</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-flags">Flags</a>
						</li>
						<li class="nav-item">
							<a class="nav-link emojitab" data-bs-toggle="tab" href="#emoji-tab-misc">Misc</a>
						</li>
					</ul>
				</div>
				<button class="close" data-bs-dismiss="modal" aria-label="Close">
					<i class="fal fa-times text-muted"></i>
				</button>
			</div>

			<div class="px-3"><input autocomplete="off" class="form-control px-2" type="text" id="emoji_search" placeholder="Search.."></div>

			<div style="overflow-y: scroll;">
				<div class="modal-body p-0" id="emoji-modal-body">
					<div id="emoji-tab-search"></div>
					<div id="no-emojis-found"></div>
					<div id="tab-content" class="tab-content">
						<div class="tab-pane fade show active" id="emoji-tab-favorite">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_favorite"></div>
						</div>

						{% if SITE_NAME == 'ruqqus' %}
							<div class="tab-pane fade" id="emoji-tab-ruqqie">
								<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_ruqqie"></div>
							</div>
						{% endif %}

						<div class="tab-pane fade" id="emoji-tab-marsey">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_marsey"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-platy">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_platy"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-wolf">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_wolf"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-tay">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_tay"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-classic">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_classic"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-rage">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_rage"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-wojak">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_wojak"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-flags">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_flags"></div>
						</div>
						<div class="tab-pane fade" id="emoji-tab-misc">
							<div class="d-flex flex-wrap py-3 pl-2" id="EMOJIS_misc"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script data-cfasync="false" src="/static/assets/js/emoji_modal.js?a=243"></script>

<style>
	a.emojitab {
		padding: 0.5rem 0.7rem !important;
		font-size: 13px !important;
	}

	.emoji2 {
		background: None!important;
		width:60px;
		overflow: hidden;
		border: none;
	}

	.emoji2:focus {
		border: 1px solid var(--primary) !important;
	}
</style>