Skip to content

Commit c08ecdd

Browse files
gbdinizgbdiniz
committed
style: Entry animations
1 parent f4b6885 commit c08ecdd

4 files changed

Lines changed: 59 additions & 9 deletions

File tree

‎frontend/assets/css/theme.css‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,21 @@
3030
50% { background-position: 100% 50%; }
3131
}
3232

33+
@keyframes fade-in-down {
34+
from { opacity: 0; transform: translateY(-14px); }
35+
to { opacity: 1; transform: translateY(0); }
36+
}
37+
38+
@keyframes fade-in-up {
39+
from { opacity: 0; transform: translateY(18px); }
40+
to { opacity: 1; transform: translateY(0); }
41+
}
42+
43+
@keyframes fade-in {
44+
from { opacity: 0; }
45+
to { opacity: 1; }
46+
}
47+
3348
html,
3449
body {
3550
height: 100%;
@@ -60,6 +75,7 @@ body {
6075
gap: 12px;
6176
padding: 8px 24px 0;
6277
background: transparent;
78+
animation: fade-in-down 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
6379
}
6480

6581
.context-pin-badge {
@@ -252,10 +268,11 @@ body {
252268

253269
/* ===== Input Area ===== */
254270
.input-area {
255-
padding: 16px 24px;
271+
padding: 10px;
256272
/* border-top: 1px solid var(--border); */
257273
background: var(--surface);
258274
transition: box-shadow 0.2s ease;
275+
animation: fade-in-up 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
259276
}
260277

261278
.input-area.input-area--silo {
@@ -265,7 +282,7 @@ body {
265282
.silo-pill {
266283
font-size: 11px;
267284
font-weight: 600;
268-
color: var(--accent);
285+
color: var(--color-neutral-300);
269286
margin-bottom: 6px;
270287
letter-spacing: 0.02em;
271288
}
@@ -387,6 +404,11 @@ body {
387404
gap: 12px;
388405
color: var(--text-muted);
389406
text-align: center;
407+
animation: fade-in 1s ease 0.1s both;
408+
}
409+
410+
.empty-state#logo {
411+
animation: fade-in 0.7s ease 0.1s both;
390412
}
391413

392414
.empty-state-icon {
@@ -397,6 +419,7 @@ body {
397419
font-size: 2.2rem;
398420
font-weight: 600;
399421
color: var(--text);
422+
animation: fade-in-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
400423
}
401424

402425
.empty-state-sub {
@@ -426,8 +449,14 @@ body {
426449
text-align: left;
427450
backdrop-filter: blur(6px);
428451
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
452+
animation: fade-in-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
429453
}
430454

455+
.suggestion-card:nth-child(1) { animation-delay: 0.32s; }
456+
.suggestion-card:nth-child(2) { animation-delay: 0.42s; }
457+
.suggestion-card:nth-child(3) { animation-delay: 0.52s; }
458+
.suggestion-card:nth-child(4) { animation-delay: 0.62s; }
459+
431460
.suggestion-card:hover {
432461
background: rgba(91, 136, 178, 0.15);
433462
border-color: var(--accent);
@@ -531,12 +560,22 @@ body {
531560
.chat-box {
532561
padding: 16px;
533562
}
534-
563+
/*
535564
.input-area {
536-
padding: 12px 16px 12px 16px;
537-
}
565+
padding:8px;
566+
} */
538567

539568
.message {
540569
max-width: 94%;
541570
}
542571
}
572+
573+
@media (prefers-reduced-motion: reduce) {
574+
.header,
575+
.empty-state,
576+
.empty-state-title,
577+
.suggestion-card,
578+
.input-area {
579+
animation: none;
580+
}
581+
}

‎frontend/assets/images/logo.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎frontend/src/ui.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function init() {
5959
inputArea.classList.add("input-area--silo", SILO_CLASS_PREFIX + suffix);
6060
siloPill.hidden = false;
6161
const name = siloDisplayName(input.value);
62-
siloPill.textContent = name ? `Silo: ${name}` : "";
62+
siloPill.textContent = name ? `Contexto: ${name}` : "";
6363
} else if (siloPill) {
6464
siloPill.hidden = true;
6565
siloPill.textContent = "";

‎templates/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</head>
2020

2121
<body>
22-
<div class="app">
22+
<div class="app overflow-hidden">
2323

2424
<header class="header">
2525
<div class="context-pin-badge" id="context-pin-badge" hidden aria-live="polite"></div>
@@ -28,6 +28,8 @@
2828

2929
<main class="chat-box" id="chat" role="log" aria-live="polite" aria-label="Histórico de mensagens">
3030
<div class="empty-state" id="empty-state">
31+
<img id="logo" src="/assets/images/logo.svg" alt="">
32+
3133
<!-- <div class="empty-state-icon">🗂️</div> -->
3234
<div class="empty-state-title">Opa, sou o Kernel! O que precisa hoje?</div>
3335

@@ -40,8 +42,8 @@
4042
</div>
4143
</main>
4244

43-
<footer class="input-area rounded-full mb-3">
44-
<div class="silo-pill" id="silo-pill" hidden aria-live="polite"></div>
45+
<footer class="input-area rounded-4xl mb-3">
46+
<div class="silo-pill min-h-8 flex items-center px-6 bg-neutral-600 rounded-t-3xl rounded-b-sm" id="silo-pill" hidden aria-live="polite"></div>
4547
<!-- <div class="input-hint">
4648
<span>Enter</span> envia · <span>Shift+Enter</span> nova linha ·
4749
<span>/python</span> · <span>/visualizacao-sql</span> · <span>/projeto-bloco</span> ·

0 commit comments

Comments
 (0)