Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #0f1115; | |
| --panel: #171a21; | |
| --border: #262b36; | |
| --text: #e6e8ec; | |
| --muted: #9aa3b2; | |
| --accent: #6366f1; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body, | |
| #root { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| } | |
| .app { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 16px; | |
| background: var(--panel); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .brand { | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| } | |
| .tag { | |
| font-size: 12px; | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| } | |
| .spacer { | |
| flex: 1; | |
| } | |
| .slidecount { | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .main { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 230px 1.2fr; | |
| min-height: 0; | |
| } | |
| .pane { | |
| min-height: 0; | |
| min-width: 0; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .editor-pane { | |
| border-right: 1px solid var(--border); | |
| } | |
| .editor { | |
| flex: 1; | |
| min-height: 0; | |
| overflow: auto; | |
| } | |
| .editor .cm-editor { | |
| height: 100%; | |
| } | |
| .editor .cm-scroller { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 13px; | |
| } | |
| .thumbs { | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| background: #0b0d11; | |
| border-right: 1px solid var(--border); | |
| } | |
| .preview-pane { | |
| background: #0b0d11; | |
| } | |
| .stage { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px; | |
| overflow: hidden; | |
| } | |
| .stage-host { | |
| background: #fff; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); | |
| overflow: hidden; | |
| } | |
| .connecting { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| } | |
| .spinner { | |
| width: 34px; | |
| height: 34px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .nav { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| padding: 10px; | |
| border-top: 1px solid var(--border); | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .nav button { | |
| background: var(--panel); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| width: 34px; | |
| height: 30px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| .nav button:disabled { | |
| opacity: 0.4; | |
| cursor: default; | |
| } | |
| /* --- presence / connection (M2) --- */ | |
| .conn { | |
| font-size: 11px; | |
| letter-spacing: 0.02em; | |
| } | |
| .conn-connected { | |
| color: #22c55e; | |
| } | |
| .conn-connecting { | |
| color: #eab308; | |
| } | |
| .conn-disconnected { | |
| color: #ef4444; | |
| } | |
| .presence { | |
| display: flex; | |
| gap: 4px; | |
| margin-right: 6px; | |
| } | |
| .avatar { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: #fff; | |
| text-transform: uppercase; | |
| border: 1px solid rgba(255, 255, 255, 0.25); | |
| object-fit: cover; | |
| } | |
| img.avatar { | |
| border-width: 2px; | |
| border-style: solid; | |
| } | |
| .logout { | |
| font-size: 12px; | |
| color: var(--muted); | |
| text-decoration: none; | |
| border: 1px solid var(--border); | |
| padding: 3px 8px; | |
| border-radius: 7px; | |
| } | |
| .logout:hover { | |
| color: var(--text); | |
| } | |
| /* --- splash / login (M4) --- */ | |
| .splash { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| text-align: center; | |
| padding: 24px; | |
| } | |
| .brand-lg { | |
| font-size: 34px; | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| } | |
| .muted { | |
| color: var(--muted); | |
| } | |
| .hf-btn { | |
| margin-top: 8px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #ffd21e; | |
| color: #1a1a1a; | |
| font-weight: 700; | |
| text-decoration: none; | |
| padding: 11px 18px; | |
| border-radius: 10px; | |
| font-size: 15px; | |
| } | |
| .hf-btn:hover { | |
| filter: brightness(0.96); | |
| } | |
| /* --- toolbar buttons / export (M5) --- */ | |
| .tool-btn { | |
| background: var(--panel); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .tool-btn:hover:not(:disabled) { | |
| border-color: var(--accent); | |
| } | |
| .tool-btn:disabled { | |
| opacity: 0.4; | |
| cursor: default; | |
| } | |
| .tool-btn.on { | |
| border-color: var(--accent); | |
| color: #fff; | |
| } | |
| .export-menu { | |
| position: relative; | |
| } | |
| .export-pop { | |
| position: absolute; | |
| top: 110%; | |
| left: 0; | |
| z-index: 20; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 4px; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 96px; | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| .export-pop button { | |
| background: none; | |
| border: none; | |
| color: var(--text); | |
| text-align: left; | |
| padding: 7px 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| } | |
| .export-pop button:hover, | |
| .export-pop a:hover { | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| .export-pop a { | |
| color: var(--text); | |
| text-decoration: none; | |
| padding: 7px 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| } | |
| /* identity / guest / sign-in */ | |
| .identity { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .identity .who { | |
| font-size: 12px; | |
| max-width: 120px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .guest-badge { | |
| font-size: 11px; | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| padding: 2px 8px; | |
| } | |
| .login-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 8px; | |
| } | |
| .brand { | |
| text-decoration: none; | |
| color: var(--text); | |
| } | |
| .deck-name { | |
| font-size: 13px; | |
| color: var(--muted); | |
| max-width: 220px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| border-left: 1px solid var(--border); | |
| padding-left: 10px; | |
| } | |
| /* home / dashboard */ | |
| .home-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| max-width: 760px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 40px 24px; | |
| } | |
| .home-title { | |
| font-size: 24px; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 18px; | |
| } | |
| .home-actions { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| margin-bottom: 22px; | |
| } | |
| .deck-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .deck-list a { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| text-decoration: none; | |
| color: var(--text); | |
| } | |
| .deck-list a:hover { | |
| border-color: var(--accent); | |
| } | |
| .deck-title { | |
| font-weight: 600; | |
| } | |
| .deck-id { | |
| font-size: 12px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| /* --- comment highlights in the editor --- */ | |
| .cm-comment { | |
| background: rgba(250, 204, 21, 0.26); | |
| border-bottom: 2px solid #facc15; | |
| } | |
| .cm-comment-resolved { | |
| background: rgba(148, 163, 184, 0.16); | |
| } | |
| /* --- comments panel --- */ | |
| .comments { | |
| border-left: 1px solid var(--border); | |
| background: var(--panel); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .comments-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 12px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .icon-btn { | |
| background: none; | |
| border: none; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .comments-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .comments-empty { | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .thread-card { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 10px; | |
| font-size: 13px; | |
| } | |
| .thread-card.active { | |
| border-color: var(--accent); | |
| } | |
| .thread-card.resolved { | |
| opacity: 0.7; | |
| } | |
| .thread-card.composing { | |
| border-color: var(--accent); | |
| } | |
| .quote { | |
| font-style: italic; | |
| color: var(--muted); | |
| border-left: 3px solid #facc15; | |
| padding-left: 8px; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| } | |
| .reply { | |
| margin-bottom: 8px; | |
| } | |
| .reply-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-bottom: 2px; | |
| } | |
| .reply-meta .dot { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| .reply-meta .author { | |
| font-weight: 600; | |
| } | |
| .reply-meta .muted { | |
| font-size: 11px; | |
| } | |
| .reply-text { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .reply-compose { | |
| margin: 6px 0; | |
| } | |
| .reply-input { | |
| width: 100%; | |
| background: var(--panel); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 7px; | |
| padding: 7px 9px; | |
| font: inherit; | |
| font-size: 13px; | |
| resize: vertical; | |
| box-sizing: border-box; | |
| } | |
| .reply-input.one-line { | |
| resize: none; | |
| } | |
| textarea.reply-input { | |
| min-height: 54px; | |
| } | |
| .thread-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #fff; | |
| border: none; | |
| border-radius: 7px; | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .btn-ghost { | |
| background: none; | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| border-radius: 7px; | |
| padding: 5px 10px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .btn-ghost:hover { | |
| color: var(--text); | |
| } | |
| .btn-ghost.danger:hover { | |
| color: #ef4444; | |
| border-color: #ef4444; | |
| } | |
| .you-tag { | |
| font-size: 11px; | |
| } | |
| .resolved-group summary { | |
| cursor: pointer; | |
| color: var(--muted); | |
| font-size: 12px; | |
| padding: 4px 0; | |
| } | |
| .resolved-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| /* remote cursors from y-codemirror.next */ | |
| .cm-ySelectionCaret { | |
| position: relative; | |
| border-left: 2px solid; | |
| margin-left: -1px; | |
| box-sizing: border-box; | |
| } | |
| .cm-ySelectionInfo { | |
| position: absolute; | |
| top: -1.4em; | |
| left: -2px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| line-height: 1; | |
| padding: 2px 4px; | |
| border-radius: 3px 3px 3px 0; | |
| color: #fff; | |
| white-space: nowrap; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| user-select: none; | |
| } | |
| .cm-ySelectionCaret:hover .cm-ySelectionInfo { | |
| opacity: 1; | |
| } | |