Final fixes: Update emoji grid styling and remove black bars

This commit is contained in:
EP
2025-03-11 17:09:03 -04:00
parent 7db95bbd84
commit 632ef4c246
4 changed files with 11 additions and 53 deletions
+2 -32
View File
@@ -208,7 +208,7 @@ textarea {
border-radius: 6px;
padding: 12px;
border: 1px solid var(--input-border);
box-shadow: none !important;
box-shadow: none;
}
.emoji-library-header {
@@ -316,10 +316,9 @@ textarea {
border-radius: 10px;
background-color: var(--secondary-bg);
padding: 0;
box-shadow: none !important;
box-shadow: none;
position: relative;
overflow: hidden;
border: 1px solid var(--input-border) !important;
}
.emoji-library:before {
@@ -331,7 +330,6 @@ textarea {
height: 4px;
background: linear-gradient(to right, var(--unicode-color), var(--special-color), var(--encoding-color));
z-index: 1;
box-shadow: none !important;
}
.emoji-grid-wrapper {
@@ -362,8 +360,6 @@ textarea {
border-bottom: none !important;
border-top: none !important;
border-right: none !important;
position: relative;
z-index: 10;
}
.emoji-grid-note i {
@@ -1391,29 +1387,3 @@ button:hover {
text-align: left;
}
}
/* Fix for black bar in emoji grid */
.emoji-library *,
.emoji-grid-container *,
.emoji-grid * {
box-shadow: none !important;
border-bottom: none !important;
}
.emoji-library::after,
.emoji-library::before,
.emoji-grid-container::after,
.emoji-grid-container::before,
.emoji-grid::after,
.emoji-grid::before {
box-shadow: none !important;
border: none !important;
background-image: none !important;
}
/* Force remove any black bars */
#emoji-grid-container::before,
#emoji-grid-container::after {
display: none !important;
content: none !important;
}
+5 -6
View File
@@ -6,7 +6,6 @@
<title>Parseltongue 2.0 - LLM Payload Crafter</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/notification.css">
<link rel="stylesheet" href="css/no-black-bar.css">
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- Font Awesome for icons -->
@@ -82,16 +81,16 @@
</div>
<!-- Emoji Library Section -->
<div class="emoji-library" style="box-shadow: none !important; border: 1px solid var(--input-border) !important; background-image: none !important;">
<div class="emoji-library-header" style="box-shadow: none !important; border: none !important; background-image: none !important;">
<div class="emoji-library">
<div class="emoji-library-header">
<div class="emoji-library-title">
<h3><i class="fas fa-icons"></i> Choose an Emoji</h3>
</div>
</div>
<!-- Emoji grid container - this MUST have id="emoji-grid-container" -->
<div id="emoji-grid-container" class="emoji-grid-container" style="box-shadow: none !important; border: none !important; background-image: none !important;">
<div id="emoji-grid-container" class="emoji-grid-container">
<!-- Dynamic content will be inserted here by JavaScript -->
<div class="emoji-grid" style="box-shadow: none !important; border: none !important; background-image: none !important;">
<div class="emoji-grid">
<!-- Common emojis as fallback -->
<button class="emoji-button" onclick="app.selectEmoji('😀')">😀</button>
<button class="emoji-button" onclick="app.selectEmoji('😂')">😂</button>
@@ -105,7 +104,7 @@
<button class="emoji-button" onclick="app.selectEmoji('🐍')">🐍</button>
</div>
</div>
<div class="emoji-library-footer" v-if="selectedEmoji" style="box-shadow: none !important; border: none !important; background-image: none !important;">
<div class="emoji-library-footer" v-if="selectedEmoji">
<div class="selected-emoji-info">
<span class="selected-emoji">{{ selectedEmoji }}</span>
<span class="selected-emoji-label">Last selected</span>
+4 -10
View File
@@ -901,19 +901,13 @@ window.app = new Vue({
return;
}
// Force container to be completely visible and remove black bars
container.style.cssText = 'display: block !important; visibility: visible !important; min-height: 300px; box-shadow: none !important; border: none !important; background-image: none !important;';
// Force container to be completely visible
container.style.cssText = 'display: block !important; visibility: visible !important; min-height: 300px;';
// Make sure parent containers are visible too and have no black bars
// Make sure parent containers are visible too
const emojiLibrary = document.querySelector('.emoji-library');
if (emojiLibrary) {
emojiLibrary.style.cssText = 'display: block !important; visibility: visible !important; box-shadow: none !important; border: 1px solid var(--input-border) !important; background-image: none !important;';
}
// Remove any black bars from emoji library header
const emojiLibraryHeader = document.querySelector('.emoji-library-header');
if (emojiLibraryHeader) {
emojiLibraryHeader.style.cssText = 'box-shadow: none !important; border: none !important; background-image: none !important;';
emojiLibrary.style.cssText = 'display: block !important; visibility: visible !important;';
}
// Clear any existing content to avoid duplication
-5
View File
@@ -455,14 +455,10 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
// Clear container
container.innerHTML = '';
// Apply styles to container to prevent black bars
container.style.cssText = 'box-shadow: none !important; border: none !important; background-image: none !important;';
// Create grid note
const gridNote = document.createElement('div');
gridNote.className = 'emoji-grid-note';
gridNote.innerHTML = '<i class="fas fa-magic"></i> Click any emoji to automatically copy your hidden message';
gridNote.style.cssText = 'box-shadow: none !important; border-bottom: none !important; border-top: none !important; border-right: none !important; background-image: none !important;';
container.appendChild(gridNote);
// Create category tabs
@@ -486,7 +482,6 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
// Create emoji grid with enforced styling
const gridContainer = document.createElement('div');
gridContainer.className = 'emoji-grid';
gridContainer.style.cssText = 'box-shadow: none !important; border-bottom: none !important; border-top: none !important; background-image: none !important;';
// Combine all emojis for a larger selection
const allEmojis = [...window.emojiLibrary.EMOJI_LIST, ...window.emojiLibrary.ADDITIONAL_EMOJIS];