Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
3.0 kB · 136 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137/* KidLisp Editor - Branding & Logo */
/* ============================================ KIDLISP LOGO ============================================ */
.baby-colors { font-weight: bold; font-family: var(--font-fun); font-size: 20px; line-height: 32px; display: flex; align-items: center; height: 100%;}
.baby-colors span { display: inline-block; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); letter-spacing: 0.05em;}
.baby-colors .com-part { color: #70D6FF; text-shadow: none;}
@media (prefers-color-scheme: dark) { .baby-colors .com-part { color: #70D6FF; }}
/* ============================================ CONNECTIVITY INDICATOR (the dot) ============================================ */
.baby-colors .connectivity-dot { transition: color 0.3s ease, text-shadow 0.3s ease;}
.baby-colors .connectivity-dot.disconnected { color: #ff4444; text-shadow: 1px 1px 0px rgba(255, 68, 68, 0.3);}
.baby-colors .connectivity-dot.connecting { color: #ff8800; text-shadow: 1px 1px 0px rgba(255, 136, 0, 0.3); animation: connectingPulse 1s ease-in-out infinite;}
.baby-colors .connectivity-dot.waiting { color: #ffdd00; text-shadow: 1px 1px 0px rgba(255, 221, 0, 0.3);}
.baby-colors .connectivity-dot.connected { color: #00ff88; text-shadow: 1px 1px 0px rgba(0, 255, 136, 0.3);}
.baby-colors .connectivity-dot.receiving { animation: receivingBlink 0.2s ease-in-out 2;}
@keyframes connectingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }}
@keyframes receivingBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; transform: scale(1.2); }}
/* ============================================ PREVIEW TITLE (Aesthetic.Computer) ============================================ */
#preview-title { font-family: var(--font-display); font-weight: bold; font-size: 16px; color: rgb(88, 78, 108); margin-left: 0px; display: inline-block; line-height: 32px;}
@media (prefers-color-scheme: dark) { #preview-title { color: rgb(188, 168, 218); }}
[data-theme="dark"] #preview-title { color: rgb(188, 168, 218); }
#preview-title .bounce-dot { font-weight: 900; font-size: 1.2em; text-shadow: 1px 0 0 currentColor; margin: 0 1px; color: var(--ac-purple);}
/* Code display in preview title */#preview-title .code-display { font-family: var(--font-mono); font-weight: normal; letter-spacing: 0.05em;}
@keyframes scramble { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; }}
#preview-title .code-display.generating { animation: scramble 0.3s ease-in-out 3;}
#preview-title .bounce-dot.generating { animation: bounce 0.6s ease-in-out infinite;}
/* ============================================ BOUNCE ANIMATION ============================================ */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); }}
.bounce-dot { display: inline-block; animation: bounce 1.2s ease-in-out 3; font-weight: bold;}