jaakko/agentic-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Avatarit ja tyylit palautettu main-haarasta: glassmorphism-kortit, oikeat hahmot

Browse Source 
Avatarit: karhunpentu (Manageri), kipina (Koodari), pesukarhu (Data),
susi (QA), laiskiainen (DevOps), aikuinen_susi (Tarkkailija).

CSS: glassmorphism-taustat, hover-animaatio, active-glow,
pyöristetyt reunat, varjostukset. Sama tyyli kuin main-haarassa.

Huom: tyhjennä localStorage (kpn-agents) selainkonsolin kautta
jotta uudet oletusavatarit tulevat voimaan:
  localStorage.removeItem('kpn-agents')

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaakko Vanhala
2026-04-09 21:46:21 +03:00
parent 84d13153ed
commit eb57ee7b92
2 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
network-poc/frontend/src/styles/global.css
View File

@@ -125,16 +125,44 @@ body {
/* Agent avatars */
.agent-avatar {
cursor: pointer; text-align: center; transition: transform 0.15s;
opacity: 0.6;
background: linear-gradient(145deg, rgba(33,38,45,0.4) 0%, rgba(13,17,23,0.8) 100%);
backdrop-filter: blur(12px);
border: 1px solid rgba(240,246,252,0.1);
border-radius: 12px;
padding: 6px 6px 4px;
text-align: center;
width: 72px;
opacity: 0.8;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.agent-avatar:hover {
opacity: 0.85;
transform: translateY(-2px) scale(1.02);
border-color: rgba(240,246,252,0.3);
box-shadow: 0 8px 14px rgba(0,0,0,0.4);
}
.agent-avatar img {
width: 50px; height: 50px; border-radius: 12px;
margin-bottom: 4px; border: 2px solid rgba(240,246,252,0.1);
transition: all 0.4s ease; object-fit: cover;
}
.agent-avatar .avatar-name {
font-size: 10px; color: #8b949e; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.agent-avatar:hover { transform: scale(1.1); opacity: 0.9; }
.agent-avatar.active {
opacity: 1;
transform: translateY(-8px) scale(1.05);
border-color: var(--accent);
background: linear-gradient(145deg, rgba(88,166,255,0.15) 0%, rgba(13,17,23,0.9) 100%);
box-shadow: 0 16px 24px rgba(0,0,0,0.5), 0 0 20px rgba(88,166,255,0.3);
z-index: 2;
}
.agent-avatar.active img {
border-color: var(--accent) !important;
box-shadow: 0 0 8px rgba(88,166,255,0.3);
border-color: var(--accent);
box-shadow: 0 0 25px rgba(88,166,255,0.8);
}
/* Animations */