Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
8.6 kB · 378 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379/* KidLisp Editor - UI Components */
/* ============================================ TABS ============================================ */
.tab { padding: 0 16px; cursor: pointer; border-right: 1px solid var(--border-color); height: 100%; display: flex; align-items: center; background: var(--bg-secondary); color: var(--text-tertiary); transition: all 0.2s;}
@media (hover: hover) { .tab:hover { filter: brightness(1.1); } #examples-tab:hover { background: rgba(59, 130, 246, 0.35); } #keeps-tab:hover { background: rgba(205, 92, 155, 0.35); } #reference-tab:hover { background: rgba(34, 197, 94, 0.35); }}
.tab.active { color: var(--text-primary); border-bottom: 1px solid var(--bg-primary); margin-bottom: -1px; position: relative; z-index: 1; font-weight: 600;}
/* Color-coded tabs */#examples-tab { background: var(--tab-examples-bg); color: #1e40af;}#examples-tab.active { background: var(--tab-examples-active); color: #1e3a8a;}
#keeps-tab { background: var(--tab-keeps-bg); color: #9d174d;}#keeps-tab.active { background: var(--tab-keeps-active); color: #831843;}
#reference-tab { background: var(--tab-reference-bg); color: #166534;}#reference-tab.active { background: var(--tab-reference-active); color: #14532d;}
/* ============================================ DROPDOWNS (Generic) ============================================ */
/* Shared dropdown styles */[data-dropdown] { position: relative;}
[data-dropdown-menu] { display: none; position: absolute; top: 100%; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 99999; padding: 4px 0; margin-top: 4px;}
[data-dropdown].open [data-dropdown-menu] { display: block;}
/* ============================================ LANGUAGE DROPDOWN ============================================ */
.language-tab { border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); display: flex; align-items: center; gap: 6px; cursor: pointer; position: relative; overflow: visible;}
@media (hover: hover) { .language-tab:hover { background: var(--bg-primary); color: var(--text-primary); }}
.lang-flag { font-size: 14px; }.lang-text { font-size: 12px; min-width: 50px; }.lang-arrow { font-size: 12px; opacity: 0.6; }
.language-dropdown { position: absolute; top: 100%; right: 0; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 99999; min-width: 120px; margin-top: 2px;}
.lang-option { padding: 8px 12px; cursor: pointer; font-size: 12px; transition: all 0.2s;}
@media (hover: hover) { .lang-option:hover { background: rgba(205, 92, 155, 0.1); color: var(--ac-purple); }}
.lang-option:first-child { border-radius: 4px 4px 0 0; }.lang-option:last-child { border-radius: 0 0 4px 4px; }
.language-tab.cycling .lang-flag,.language-tab.cycling .lang-text { animation: langFade 0.3s ease-in-out;}
@keyframes langFade { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; }}
/* ============================================ PLATFORM SELECTOR ============================================ */
.platform-selector { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; position: relative;}
.platform-selector:hover { background: rgba(0, 0, 0, 0.1);}
@media (prefers-color-scheme: dark) { .platform-selector:hover { background: rgba(255, 255, 255, 0.1); }}
[data-theme="dark"] .platform-selector:hover { background: rgba(255, 255, 255, 0.1);}
.platform-icon { font-size: 14px; }.platform-arrow { font-size: 8px; color: var(--text-tertiary); margin-left: 2px; }
.platform-dropdown { position: fixed; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 220px; z-index: 99999; padding: 4px 0; /* Use visibility + opacity for smooth open without flash */ visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease;}
.platform-selector.open .platform-dropdown { visibility: visible; opacity: 1; pointer-events: auto;}
.platform-option { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; transition: background 0.15s;}
.platform-option:hover { background: var(--bg-secondary); }.platform-option.active { background: rgba(205, 92, 155, 0.15); }.platform-option.active:hover { background: rgba(205, 92, 155, 0.25); }
.platform-opt-icon { font-size: 16px; width: 24px; text-align: center; }.platform-opt-name { font-size: 13px; color: var(--text-primary); flex: 1; }
.platform-status { font-size: 9px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-weight: bold;}
.platform-option.coming-soon { opacity: 0.5; }.platform-option.coming-soon .platform-status { background: rgba(59, 130, 246, 0.2); color: rgb(59, 130, 246);}
.platform-option.experimental { opacity: 0.4; }.platform-option.experimental .platform-status { background: rgba(234, 179, 8, 0.2); color: rgb(180, 140, 0);}
@media (prefers-color-scheme: dark) { .platform-option.coming-soon .platform-status { color: rgb(147, 197, 253); } .platform-option.experimental .platform-status { color: rgb(253, 224, 71); }}
[data-theme="dark"] .platform-option.coming-soon .platform-status { color: rgb(147, 197, 253); }[data-theme="dark"] .platform-option.experimental .platform-status { color: rgb(253, 224, 71); }
.platform-divider { height: 1px; background: var(--border-color); margin: 4px 0;}
/* ============================================ USER MENU (Header) ============================================ */
.header-login-btn { margin-left: auto; padding: 4px 12px; background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%); color: white; border: none; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.2s;}
.header-login-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(205, 92, 155, 0.3);}
.header-user-menu { margin-left: auto; position: relative; display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 10px; border-radius: 4px; transition: background 0.2s;}
.header-user-menu:hover { background: var(--bg-tertiary); }
.header-user-handle { font-size: 12px; color: var(--text-secondary); }.header-menu-arrow { font-size: 8px; color: var(--text-tertiary); }
.header-user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 100px; z-index: 10000;}
.header-user-menu.open .header-user-dropdown { display: block;}
.header-logout-btn { width: 100%; padding: 8px 12px; background: none; border: none; text-align: left; font-size: 12px; color: var(--text-primary); cursor: pointer;}
.header-logout-btn:hover { background: var(--bg-tertiary); }
/* ============================================ THEME TOGGLE ============================================ */
#theme-toggle { width: 32px; height: 32px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: opacity 0.2s; padding: 0; opacity: 0.6; user-select: none; -webkit-tap-highlight-color: transparent;}
@media (hover: hover) { #theme-toggle:hover { opacity: 1; }}
#theme-toggle:active { opacity: 0.4; }
/* ============================================ TOAST NOTIFICATIONS ============================================ */
.kidlisp-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; color: white; font-family: var(--font-mono); font-size: 14px; z-index: 10000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease;}
.toast-info { background: #8b5cf6; }.toast-warning { background: #f59e0b; }.toast-error { background: #ef4444; }.toast-success { background: #22c55e; }