Refactor: Remove inline styles and fix IDE warnings

This commit is contained in:
Marcos
2026-03-22 10:23:02 -03:00
parent f89793eb6b
commit 73fae4e294

View File

@@ -30,25 +30,16 @@
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
/* Scrollbar Fix for Firefox */
/* Scrollbar Fix for Firefox / Modern Browsers */
* {
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
@@ -650,6 +641,30 @@
font-size: 1.1rem;
letter-spacing: 0.2rem;
}
/* Utilities */
.hidden { display: none !important; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.opacity-60 { opacity: 0.6; }
.theme-icon { width: 18px; height: 18px; }
.recording-dot {
width: 8px;
height: 8px;
background: var(--danger);
border-radius: 50%;
display: inline-block;
animation: pulse 1s infinite;
}
.mic-active { color: var(--danger) !important; border-color: var(--danger) !important; }
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
@@ -662,7 +677,7 @@
<input type="password" id="web-pass-input" aria-label="Senha da VPS" autocomplete="current-password"
class="form-input login-input" placeholder="Senha da VPS"
onkeypress="if(event.key==='Enter') attemptLogin()">
<button type="button" class="btn btn-primary" style="width:100%; padding: 0.8rem;"
<button type="button" class="btn btn-primary w-full" style="padding: 0.8rem;"
onclick="attemptLogin()">Entrar no Dashboard</button>
<div id="login-error" style="color:var(--danger); font-size: 0.75rem; margin-top: 1rem; display: none;">
Senha incorreta. Tente novamente.</div>
@@ -680,12 +695,11 @@
<div class="header-actions">
<div class="status-badge" id="bot-status">Online</div>
<button type="button" class="theme-toggle" onclick="toggleTheme()" aria-label="Alternar tema">
<svg id="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: none;">
<svg id="icon-sun" class="theme-icon hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="5" />
<path
d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
</svg>
<svg id="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<svg id="icon-moon" class="theme-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
</button>
@@ -802,9 +816,7 @@
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
<path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" />
</svg>
<span id="recording-dot"
style="display:none; width:8px; height:8px; background:red; border-radius:50%; animation: pulse 1s infinite;">
</span>
<span id="recording-dot" class="recording-dot hidden"></span>
</button>
<button type="button" class="btn btn-primary" aria-label="Enviar" onclick="sendChat()">
@@ -830,7 +842,7 @@
<div class="insights-placeholder">
<div class="login-icon" role="img" aria-label="Gráfico de Insights">📊</div>
<p>Aguardando dados estruturados...</p>
<small style="display:block; margin-top:0.5rem; opacity:0.6;">Peça algo como "status dos containers" para ver o refinamento aqui.</small>
<small class="mt-2 opacity-60">Peça algo como "status dos containers" para ver o refinamento aqui.</small>
</div>
</div>
</div>
@@ -895,9 +907,16 @@
updateThemeIcon(!isDark);
}
function updateThemeIcon(isDark) {
document.getElementById('icon-sun').style.display = isDark ? 'block' : 'none';
document.getElementById('icon-moon').style.display = isDark ? 'none' : 'block';
function updateThemeIcon(isLight) {
const sun = document.getElementById('icon-sun');
const moon = document.getElementById('icon-moon');
if (isLight) {
sun.classList.remove('hidden');
moon.classList.add('hidden');
} else {
sun.classList.add('hidden');
moon.classList.remove('hidden');
}
}
const savedTheme = localStorage.getItem('theme');
@@ -1145,12 +1164,15 @@
function updateMicUI(active) {
const dot = document.getElementById('recording-dot');
const icon = document.getElementById('mic-icon');
const btn = document.getElementById('audio-btn');
dot.style.display = active ? 'inline-block' : 'none';
icon.style.color = active ? 'red' : 'inherit';
btn.style.borderColor = active ? 'red' : 'var(--border)';
if (active) {
dot.classList.remove('hidden');
btn.classList.add('mic-active');
} else {
dot.classList.add('hidden');
btn.classList.remove('mic-active');
}
}
async function uploadAudio(blob) {