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
+24 -21
View File
@@ -65,29 +65,32 @@
<button class="tag-filter" data-tag="estudos">📚 Estudos</button>
</div>
<!-- Botão: Minhas Observações -->
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
<span>Minhas Observações</span>
</button>
<!-- 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 -->
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
<span>Minhas Observações</span>
</button>
<!-- Botão: Emitir Relatório -->
<button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
<span>Emitir Relatório</span>
</button>
<!-- Botão: Emitir Relatório -->
<button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
<span>Emitir Relatório</span>
</button>
<!-- Botão: Modelos de Relatório -->
<button class="btn-observacoes" id="btnModelosRelatorio">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span>Modelos de Relatório</span>
</button>
<!-- Botão: Modelos de Relatório -->
<button class="btn-observacoes" id="btnModelosRelatorio">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span>Modelos de Relatório</span>
</button>
</div>
<!-- Histórico de Conversas -->
<div class="chat-history" id="chatHistory">
public/style.css
+25 -17
View File
@@ -2865,33 +2865,41 @@ code {
font-weight: 500;
}
/* Botão Minhas Observações na sidebar */
/* Botão Minhas Observações na sidebar em estilo tag/pill */
.btn-observacoes {
display: flex;
display: inline-flex;
align-items: center;
gap: 10px;
width: calc(100% - 40px);
margin: 0 auto 8px;
padding: 12px 16px;
background: var(--bg-secondary, #1a1a1a);
border: 1px solid var(--border-light, #262626);
border-radius: 12px;
color: var(--text-secondary, #a3a3a3);
font-size: 0.9rem;
gap: 4px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-light);
border-radius: 20px;
color: var(--text-secondary);
font-size: 11.5px;
font-weight: 500;
padding: 5px 10px;
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 {
background: var(--brand-green, #10a37f);
color: white;
border-color: var(--brand-green, #10a37f);
background-color: var(--bg-accent);
color: var(--text-primary);
border-color: var(--border-light);
}
#btnEmitirRelatorio:hover {
background: var(--brand-green) !important;
color: white !important;
border-color: var(--brand-green) !important;
}
.btn-observacoes svg {
width: 20px;
height: 20px;
width: 13px;
height: 13px;
flex-shrink: 0;
}