Spaces:
Sleeping
Sleeping
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| :root { | |
| --ink: #101820; | |
| --panel: rgba(15, 28, 38, 0.78); | |
| --panel-strong: rgba(9, 18, 25, 0.92); | |
| --line: rgba(255, 255, 255, 0.12); | |
| --muted: rgba(229, 241, 244, 0.68); | |
| --text: #f5fbfc; | |
| --cyan: #27e0c1; | |
| --amber: #ffb45c; | |
| --danger: #ff6b6b; | |
| font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| color: var(--text); | |
| background: var(--ink); | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| min-height: 100vh; | |
| } | |
| button, | |
| input, | |
| textarea { | |
| font: inherit; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| .entry-shell, | |
| .chat-shell { | |
| min-height: 100vh; | |
| overflow: hidden; | |
| position: relative; | |
| background: | |
| radial-gradient(circle at 18% 18%, rgba(39, 224, 193, 0.24), transparent 28%), | |
| radial-gradient(circle at 80% 12%, rgba(255, 180, 92, 0.26), transparent 24%), | |
| radial-gradient(circle at 52% 82%, rgba(114, 137, 255, 0.14), transparent 30%), | |
| linear-gradient(135deg, #081018 0%, #101820 45%, #162630 100%); | |
| } | |
| .entry-shell::before, | |
| .chat-shell::before { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); | |
| background-size: 44px 44px; | |
| content: ""; | |
| inset: 0; | |
| mask-image: linear-gradient(to bottom, black, transparent 85%); | |
| position: absolute; | |
| } | |
| .entry-hero { | |
| align-items: center; | |
| display: grid; | |
| gap: 48px; | |
| grid-template-columns: minmax(0, 1fr) 420px; | |
| margin: 0 auto; | |
| max-width: 1180px; | |
| min-height: 100vh; | |
| padding: 64px 32px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .entry-copy h1 { | |
| font-size: clamp(48px, 6vw, 82px); | |
| letter-spacing: -0.07em; | |
| line-height: 0.96; | |
| margin: 20px 0; | |
| max-width: 720px; | |
| } | |
| .entry-copy p { | |
| color: var(--muted); | |
| font-size: 18px; | |
| max-width: 650px; | |
| } | |
| .eyebrow { | |
| align-items: center; | |
| color: var(--cyan); | |
| display: inline-flex; | |
| font-size: 13px; | |
| font-weight: 700; | |
| gap: 8px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .entry-card { | |
| backdrop-filter: blur(22px); | |
| background: | |
| linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.045)), | |
| radial-gradient(circle at 18% 0%, rgba(39, 224, 193, 0.16), transparent 36%); | |
| border: 1px solid var(--line); | |
| border-radius: 32px; | |
| box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38); | |
| overflow: hidden; | |
| padding: 30px; | |
| position: relative; | |
| } | |
| .entry-card::before { | |
| background: linear-gradient(90deg, var(--cyan), var(--amber)); | |
| content: ""; | |
| height: 3px; | |
| inset: 0 0 auto; | |
| opacity: 0.86; | |
| position: absolute; | |
| } | |
| .card-heading { | |
| align-items: center; | |
| display: flex; | |
| gap: 14px; | |
| margin-bottom: 26px; | |
| } | |
| .card-heading svg { | |
| color: var(--amber); | |
| } | |
| .card-heading h2 { | |
| font-size: 24px; | |
| margin: 0; | |
| } | |
| .card-heading p { | |
| color: var(--muted); | |
| margin: 0; | |
| } | |
| .fine-print { | |
| border-top: 1px solid rgba(255, 255, 255, 0.09); | |
| color: var(--muted); | |
| margin: 18px 0 0; | |
| padding-top: 14px; | |
| } | |
| .field-label { | |
| color: var(--muted); | |
| display: block; | |
| font-size: 13px; | |
| margin-bottom: 8px; | |
| } | |
| input, | |
| textarea { | |
| background: rgba(8, 16, 24, 0.72); | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| color: var(--text); | |
| outline: none; | |
| transition: border-color 160ms ease, box-shadow 160ms ease; | |
| width: 100%; | |
| } | |
| input { | |
| height: 56px; | |
| padding: 0 18px; | |
| } | |
| .input-with-icon { | |
| align-items: center; | |
| display: flex; | |
| margin-bottom: 16px; | |
| position: relative; | |
| } | |
| .input-with-icon svg { | |
| color: var(--muted); | |
| left: 16px; | |
| pointer-events: none; | |
| position: absolute; | |
| } | |
| .input-with-icon input { | |
| padding-left: 46px; | |
| } | |
| textarea { | |
| min-height: 72px; | |
| padding: 16px; | |
| resize: none; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| border-color: rgba(39, 224, 193, 0.78); | |
| box-shadow: 0 0 0 4px rgba(39, 224, 193, 0.12); | |
| } | |
| .form-error, | |
| .error-banner { | |
| color: var(--danger); | |
| font-size: 13px; | |
| } | |
| .primary-button, | |
| .ghost-button, | |
| .send-button { | |
| align-items: center; | |
| border: 0; | |
| border-radius: 18px; | |
| display: inline-flex; | |
| font-weight: 800; | |
| gap: 8px; | |
| justify-content: center; | |
| transition: transform 160ms ease, opacity 160ms ease, background 160ms ease; | |
| } | |
| .primary-button { | |
| background: linear-gradient(135deg, var(--cyan), #8bf5e7); | |
| color: #06110f; | |
| height: 56px; | |
| margin-top: 18px; | |
| width: 100%; | |
| } | |
| .primary-button:hover, | |
| .ghost-button:hover, | |
| .send-button:hover, | |
| .sticker-button:hover { | |
| transform: translateY(-1px); | |
| } | |
| .ghost-button { | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid var(--line); | |
| color: var(--text); | |
| } | |
| .orb { | |
| border-radius: 999px; | |
| filter: blur(28px); | |
| height: 210px; | |
| opacity: 0.35; | |
| position: absolute; | |
| width: 210px; | |
| } | |
| .orb-cyan { | |
| background: var(--cyan); | |
| left: -20px; | |
| top: 20%; | |
| } | |
| .orb-amber { | |
| background: var(--amber); | |
| right: 80px; | |
| top: 12%; | |
| } | |
| .chat-frame { | |
| display: flex; | |
| flex-direction: column; | |
| height: calc(100vh - 48px); | |
| margin: 24px auto; | |
| max-width: 1240px; | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .chat-header, | |
| .chat-layout, | |
| .conversation-panel, | |
| .user-sidebar, | |
| .room-tools { | |
| border: 1px solid var(--line); | |
| box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24); | |
| } | |
| .chat-header { | |
| align-items: center; | |
| background: var(--panel); | |
| border-radius: 28px 28px 0 0; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 22px 24px; | |
| } | |
| .chat-header h1 { | |
| font-size: 28px; | |
| letter-spacing: -0.04em; | |
| margin: 6px 0 0; | |
| } | |
| .header-actions { | |
| align-items: center; | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .connection-badge, | |
| .current-name { | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| display: inline-flex; | |
| gap: 7px; | |
| min-height: 36px; | |
| padding: 0 13px; | |
| } | |
| .connection-badge.connected { | |
| color: var(--cyan); | |
| } | |
| .connection-badge.disconnected { | |
| color: var(--danger); | |
| } | |
| .ghost-button { | |
| min-height: 38px; | |
| padding: 0 14px; | |
| } | |
| .chat-layout { | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 0 0 28px 28px; | |
| display: grid; | |
| flex: 1; | |
| grid-template-columns: 260px minmax(0, 1fr) 320px; | |
| min-height: 0; | |
| } | |
| .user-sidebar { | |
| background: var(--panel-strong); | |
| border-width: 0 1px 0 0; | |
| padding: 22px; | |
| } | |
| .sidebar-title { | |
| align-items: center; | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 18px; | |
| } | |
| .sidebar-title strong { | |
| color: var(--cyan); | |
| margin-left: auto; | |
| } | |
| .user-list { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .user-pill { | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.07); | |
| border: 1px solid transparent; | |
| border-radius: 16px; | |
| color: var(--muted); | |
| display: flex; | |
| gap: 10px; | |
| min-height: 46px; | |
| padding: 0 13px; | |
| } | |
| .user-pill svg { | |
| color: var(--cyan); | |
| } | |
| .user-pill.current { | |
| border-color: rgba(39, 224, 193, 0.45); | |
| color: var(--text); | |
| } | |
| .user-pill em { | |
| color: var(--amber); | |
| font-size: 12px; | |
| font-style: normal; | |
| margin-left: auto; | |
| } | |
| .conversation-panel { | |
| background: rgba(8, 16, 24, 0.48); | |
| border-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .room-tools { | |
| background: var(--panel-strong); | |
| border-width: 0 0 0 1px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 18px; | |
| } | |
| .tool-card { | |
| background: | |
| linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)), | |
| rgba(255, 255, 255, 0.035); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 22px; | |
| padding: 16px; | |
| } | |
| .tool-heading { | |
| align-items: center; | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| } | |
| .tool-heading.compact { | |
| justify-content: space-between; | |
| } | |
| .tool-heading svg { | |
| color: var(--amber); | |
| } | |
| .tool-heading h2 { | |
| font-size: 16px; | |
| margin: 0; | |
| } | |
| .tool-heading p, | |
| .tool-note { | |
| color: var(--muted); | |
| font-size: 12px; | |
| margin: 2px 0 0; | |
| } | |
| .random-actions { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .random-actions button, | |
| .rps-actions button { | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| color: var(--text); | |
| display: flex; | |
| justify-content: space-between; | |
| min-height: 50px; | |
| padding: 0 13px; | |
| transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; | |
| } | |
| .rps-actions { | |
| display: grid; | |
| gap: 8px; | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .rps-actions button { | |
| font-size: 13px; | |
| justify-content: center; | |
| min-height: 44px; | |
| padding: 0 8px; | |
| } | |
| .random-actions button:hover, | |
| .rps-actions button:hover, | |
| .board-action:hover, | |
| .gomoku-cell:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| } | |
| .random-actions button:hover, | |
| .rps-actions button:hover { | |
| background: rgba(39, 224, 193, 0.12); | |
| border-color: rgba(39, 224, 193, 0.32); | |
| } | |
| .random-actions strong { | |
| color: var(--cyan); | |
| font-size: 12px; | |
| } | |
| .gomoku-actions { | |
| align-items: center; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .board-action { | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 12px; | |
| color: var(--text); | |
| display: inline-flex; | |
| gap: 5px; | |
| height: 34px; | |
| justify-content: center; | |
| padding: 0 10px; | |
| transition: transform 160ms ease, background 160ms ease; | |
| } | |
| .board-action.icon-only { | |
| padding: 0; | |
| width: 34px; | |
| } | |
| .gomoku-board { | |
| aspect-ratio: 1; | |
| background: | |
| linear-gradient(90deg, rgba(16, 24, 32, 0.44) 1px, transparent 1px), | |
| linear-gradient(rgba(16, 24, 32, 0.44) 1px, transparent 1px), | |
| linear-gradient(135deg, #e7bc73, #b47a39); | |
| background-size: calc(100% / 15) calc(100% / 15); | |
| border: 1px solid rgba(255, 255, 255, 0.16); | |
| border-radius: 16px; | |
| display: grid; | |
| gap: 1px; | |
| grid-template-columns: repeat(15, 1fr); | |
| margin-top: 12px; | |
| overflow: hidden; | |
| padding: 6px; | |
| } | |
| .gomoku-cell { | |
| align-items: center; | |
| background: transparent; | |
| border: 0; | |
| border-radius: 999px; | |
| display: inline-flex; | |
| justify-content: center; | |
| min-width: 0; | |
| padding: 0; | |
| } | |
| .gomoku-cell span { | |
| border-radius: 999px; | |
| display: block; | |
| height: 72%; | |
| width: 72%; | |
| } | |
| .gomoku-cell.black span { | |
| background: radial-gradient(circle at 30% 26%, #777, #050505 62%); | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); | |
| } | |
| .gomoku-cell.white span { | |
| background: radial-gradient(circle at 32% 28%, #fff, #d9d9d9 68%); | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); | |
| } | |
| .gomoku-players { | |
| display: grid; | |
| gap: 8px; | |
| grid-template-columns: 1fr 1fr; | |
| margin-top: 12px; | |
| } | |
| .gomoku-players span { | |
| background: rgba(255, 255, 255, 0.07); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| overflow: hidden; | |
| padding: 8px 9px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .tool-note { | |
| line-height: 1.45; | |
| margin-top: 10px; | |
| } | |
| .error-banner { | |
| background: rgba(255, 107, 107, 0.1); | |
| border-bottom: 1px solid rgba(255, 107, 107, 0.18); | |
| padding: 10px 18px; | |
| } | |
| .message-list { | |
| display: flex; | |
| flex: 1; | |
| flex-direction: column; | |
| gap: 14px; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 24px; | |
| } | |
| .message-row { | |
| align-self: flex-start; | |
| max-width: min(680px, 78%); | |
| } | |
| .message-row.mine { | |
| align-self: flex-end; | |
| } | |
| .message-meta { | |
| color: var(--muted); | |
| display: flex; | |
| font-size: 12px; | |
| gap: 10px; | |
| margin: 0 0 6px 4px; | |
| } | |
| .message-row p { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid var(--line); | |
| border-radius: 18px 18px 18px 5px; | |
| margin: 0; | |
| padding: 13px 15px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .message-row.mine p { | |
| background: linear-gradient(135deg, rgba(39, 224, 193, 0.95), rgba(139, 245, 231, 0.92)); | |
| border-color: transparent; | |
| border-radius: 18px 18px 5px 18px; | |
| color: #06110f; | |
| } | |
| .message-row.sticker-message p, | |
| .message-row.mine.sticker-message p { | |
| backdrop-filter: blur(12px); | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 22px; | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); | |
| color: var(--text); | |
| font-size: 44px; | |
| line-height: 1; | |
| padding: 14px 16px; | |
| } | |
| .system-message { | |
| align-self: center; | |
| background: rgba(255, 180, 92, 0.12); | |
| border: 1px solid rgba(255, 180, 92, 0.2); | |
| border-radius: 999px; | |
| color: #ffd5a5; | |
| font-size: 12px; | |
| padding: 6px 12px; | |
| } | |
| .empty-messages { | |
| align-items: center; | |
| color: var(--muted); | |
| display: flex; | |
| flex: 1; | |
| flex-direction: column; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| .empty-messages strong { | |
| color: var(--text); | |
| font-size: 24px; | |
| } | |
| .composer { | |
| background: | |
| linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)), | |
| rgba(8, 16, 24, 0.5); | |
| border-top: 1px solid var(--line); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| padding: 18px; | |
| } | |
| .sticker-toolbar { | |
| align-items: center; | |
| display: flex; | |
| gap: 12px; | |
| min-width: 0; | |
| } | |
| .sticker-toolbar > span { | |
| align-items: center; | |
| color: var(--muted); | |
| display: inline-flex; | |
| flex: 0 0 auto; | |
| font-size: 13px; | |
| font-weight: 700; | |
| gap: 6px; | |
| } | |
| .sticker-list { | |
| display: flex; | |
| gap: 8px; | |
| min-width: 0; | |
| overflow-x: auto; | |
| padding: 2px 2px 4px; | |
| } | |
| .sticker-button { | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 14px; | |
| color: var(--text); | |
| display: inline-flex; | |
| flex: 0 0 auto; | |
| font-size: 22px; | |
| height: 42px; | |
| justify-content: center; | |
| transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; | |
| width: 46px; | |
| } | |
| .sticker-button:hover { | |
| background: rgba(39, 224, 193, 0.14); | |
| border-color: rgba(39, 224, 193, 0.42); | |
| } | |
| .composer-row { | |
| align-items: flex-end; | |
| display: grid; | |
| gap: 12px; | |
| grid-template-columns: minmax(0, 1fr) 112px; | |
| } | |
| .send-button { | |
| background: var(--amber); | |
| color: #1f1305; | |
| min-height: 54px; | |
| } | |
| .send-button:disabled, | |
| .sticker-button:disabled, | |
| .composer textarea:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.48; | |
| } | |
| .mobile-users { | |
| display: none; | |
| } | |
| @media (max-width: 860px) { | |
| .entry-hero { | |
| grid-template-columns: 1fr; | |
| padding: 40px 18px; | |
| } | |
| .entry-copy h1 { | |
| font-size: 44px; | |
| } | |
| .chat-frame { | |
| height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .chat-header { | |
| align-items: flex-start; | |
| border-radius: 0; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .header-actions { | |
| flex-wrap: wrap; | |
| } | |
| .chat-layout { | |
| border-radius: 0; | |
| grid-template-columns: 1fr; | |
| overflow-y: auto; | |
| } | |
| .user-sidebar { | |
| display: none; | |
| } | |
| .room-tools { | |
| border-width: 1px 0 0; | |
| overflow: visible; | |
| } | |
| .gomoku-board { | |
| max-width: 320px; | |
| } | |
| .mobile-users { | |
| background: var(--panel-strong); | |
| border-bottom: 1px solid var(--line); | |
| display: block; | |
| padding: 10px 18px; | |
| } | |
| .message-row { | |
| max-width: 92%; | |
| } | |
| .composer-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .sticker-toolbar { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| } | |
| } | |