admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transforma botões de relatório e observações em formato de tag/pill alinhados na sidebar

Browse Source
This commit is contained in:
admtracksteel
2026-05-28 19:26:43 +00:00
parent 22d2e306d4
commit 2195b35288
2 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+3
View File
@@ -65,6 +65,8 @@
<button class="tag-filter" data-tag="estudos">📚 Estudos</button> <button class="tag-filter" data-tag="estudos">📚 Estudos</button>
</div> </div>
<!-- Botões de ação extras em formato de tag/pill -->
<div class="sidebar-actions" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 10px; border-bottom: 1px solid var(--border-light);">
<!-- Botão: Minhas Observações --> <!-- Botão: Minhas Observações -->
<button class="btn-observacoes" id="btnObservacoes"> <button class="btn-observacoes" id="btnObservacoes">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
@@ -88,6 +90,7 @@
</svg> </svg>
<span>Modelos de Relatório</span> <span>Modelos de Relatório</span>
</button> </button>
</div>
<!-- Histórico de Conversas --> <!-- Histórico de Conversas -->
<div class="chat-history" id="chatHistory"> <div class="chat-history" id="chatHistory">
public/style.css
+25 -17
View File
@@ -2865,33 +2865,41 @@ code {
font-weight: 500; font-weight: 500;
} }
/* Botão Minhas Observações na sidebar */ /* Botão Minhas Observações na sidebar em estilo tag/pill */
.btn-observacoes { .btn-observacoes {
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 4px;
width: calc(100% - 40px); background-color: var(--bg-tertiary);
margin: 0 auto 8px; border: 1px solid var(--border-light);
padding: 12px 16px; border-radius: 20px;
background: var(--bg-secondary, #1a1a1a); color: var(--text-secondary);
border: 1px solid var(--border-light, #262626); font-size: 11.5px;
border-radius: 12px;
color: var(--text-secondary, #a3a3a3);
font-size: 0.9rem;
font-weight: 500; font-weight: 500;
padding: 5px 10px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; white-space: nowrap;
transition: all var(--transition-fast);
font-family: var(--font-sans);
width: auto;
margin: 0;
} }
.btn-observacoes:hover { .btn-observacoes:hover {
background: var(--brand-green, #10a37f); background-color: var(--bg-accent);
color: white; color: var(--text-primary);
border-color: var(--brand-green, #10a37f); border-color: var(--border-light);
}
#btnEmitirRelatorio:hover {
background: var(--brand-green) !important;
color: white !important;
border-color: var(--brand-green) !important;
} }
.btn-observacoes svg { .btn-observacoes svg {
width: 20px; width: 13px;
height: 20px; height: 13px;
flex-shrink: 0; flex-shrink: 0;
} }