2 lines
137 KiB
CSS
2 lines
137 KiB
CSS
|
@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Space+Grotesk:wght@600;700&display=swap";.sb-app{display:flex;flex-direction:column;height:100%;overflow:hidden;font-family:var(--font-body)}.topbar{display:flex;align-items:center;padding:0 var(--space-5);height:var(--header-h, 52px);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);z-index:10;flex-shrink:0;gap:var(--space-4)}.topbar-left{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}.sb-app-logo{width:28px;height:28px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.sb-app-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em}.clock-wrap{flex:1;display:flex;justify-content:center}.clock{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.9}.clock-seconds{font-size:var(--text-base);color:var(--text-tertiary);font-weight:var(--weight-medium)}.topbar-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.channel-dropdown{position:relative;flex-shrink:0}.channel-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--surface-glass);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.channel-btn:hover{background:var(--surface-glass-hover);border-color:var(--surface-glass-border-hover)}.channel-btn.open{border-color:var(--accent)}.channel-btn .cb-icon{font-size:16px;color:var(--text-secondary)}.channel-btn .chevron{font-size:12px;color:var(--text-tertiary);transition:transform var(--duration-fast);margin-left:2px}.channel-btn.open .chevron{transform:rotate(180deg)}.channel-status{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}.channel-dropdown__trigger{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--surface-glass);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.channel-dropdown__trigger.open{border-color:var(--accent)}.channel-dropdown__trigger .channel-arrow{font-size:12px;color:var(--text-tertiary);transition:transform var(--duration-fast);margin-left:2px}.channel-dropdown__trigger.open .channel-arrow{transform:rotate(180deg)}.channel-menu,.channel-dropdown__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1);z-index:100;animation:ctx-in .1s var(--ease-out)}.channel-dropdown__item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-xs);cursor:pointer;font-size:var(--text-sm);color:var(--text-secondary);transition:background var(--duration-fast)}.channel-dropdown__item.selected{color:var(--accent-text);background:var(--accent-soft)}.channel-menu-header{padding:var(--space-2) var(--space-2) var(--space-1);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}.channel-option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast)}.channel-option:hover{background:var(--surface-glass-hover);color:v
|