root
7ca855f19c
- 演示登录、内存令牌、单 Promise 刷新与路由守卫\n- 投瓶、捞瓶、首次回复、会话与实时聊天\n- 独立管理员登录与审核/举报工作台\n- Socket 认证续期、断线补齐与账号切换清理\n- PWA 离线壳、深海主题与移动端无障碍
546 lines
9.0 KiB
CSS
546 lines
9.0 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=ZCOOL+XiaoWei&display=swap");
|
|
:root {
|
|
font-family: "Noto Sans SC", system-ui, sans-serif;
|
|
color: #effcff;
|
|
background: #020b13;
|
|
--deep: #061b2b;
|
|
--panel: rgba(13, 48, 63, 0.72);
|
|
--line: rgba(139, 224, 218, 0.18);
|
|
--aqua: #76e4d5;
|
|
--sand: #f1c27d;
|
|
--muted: #91abb7;
|
|
--danger: #ff8f91;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
background: #020b13;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
background: radial-gradient(
|
|
circle at 50% 0,
|
|
#0b4050 0,
|
|
#061b2b 38%,
|
|
#020b13 100%
|
|
);
|
|
line-height: 1.55;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(
|
|
circle,
|
|
rgba(118, 228, 213, 0.22) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: 42px 42px;
|
|
mask-image: linear-gradient(#000, transparent 80%);
|
|
}
|
|
button,
|
|
input,
|
|
textarea,
|
|
select,
|
|
a {
|
|
font: inherit;
|
|
}
|
|
button,
|
|
input,
|
|
textarea,
|
|
select,
|
|
.primary,
|
|
.secondary,
|
|
.danger,
|
|
.icon-link,
|
|
.avatar {
|
|
min-height: 44px;
|
|
}
|
|
button,
|
|
a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible {
|
|
outline: 3px solid var(--sand);
|
|
outline-offset: 3px;
|
|
}
|
|
.app-shell {
|
|
position: relative;
|
|
width: min(100%, 430px);
|
|
min-height: 100dvh;
|
|
margin: auto;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(6, 27, 43, 0.18),
|
|
rgba(2, 11, 19, 0.88)
|
|
);
|
|
box-shadow: 0 0 70px #000;
|
|
padding-bottom: 84px;
|
|
overflow: hidden;
|
|
}
|
|
main {
|
|
min-height: calc(100dvh - 84px);
|
|
}
|
|
.page,
|
|
.list,
|
|
.settings {
|
|
padding: 1rem 1.1rem;
|
|
}
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.8rem;
|
|
padding: max(1rem, env(safe-area-inset-top)) 1.1rem 1rem;
|
|
}
|
|
.topbar h1 {
|
|
font:
|
|
500 1.4rem "ZCOOL XiaoWei",
|
|
serif;
|
|
margin: 0;
|
|
}
|
|
.topbar small,
|
|
.eyebrow {
|
|
letter-spacing: 0.18em;
|
|
color: var(--aqua);
|
|
font-size: 0.68rem;
|
|
}
|
|
.icon-link,
|
|
.avatar {
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 44px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
.avatar {
|
|
font-weight: 700;
|
|
}
|
|
.glass {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
backdrop-filter: blur(18px);
|
|
border-radius: 22px;
|
|
padding: 1.1rem;
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.login {
|
|
padding: 8vh 1.1rem 2rem;
|
|
}
|
|
.hero {
|
|
padding: 2rem 0.3rem;
|
|
}
|
|
.hero h1,
|
|
.page h2,
|
|
.sea h2 {
|
|
font:
|
|
500 2.1rem/1.25 "ZCOOL XiaoWei",
|
|
serif;
|
|
}
|
|
.hero h1 em {
|
|
color: var(--sand);
|
|
font-style: normal;
|
|
}
|
|
.hero > p:last-child,
|
|
.muted,
|
|
.quota-note {
|
|
color: var(--muted);
|
|
}
|
|
.orb {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: rgba(118, 228, 213, 0.12);
|
|
color: var(--aqua);
|
|
box-shadow: 0 0 40px rgba(118, 228, 213, 0.25);
|
|
}
|
|
label {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
color: #cce0e6;
|
|
margin-bottom: 1rem;
|
|
}
|
|
input,
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
color: #fff;
|
|
background: rgba(0, 10, 18, 0.56);
|
|
border: 1px solid var(--line);
|
|
border-radius: 13px;
|
|
padding: 0.72rem 0.85rem;
|
|
resize: vertical;
|
|
}
|
|
textarea::placeholder,
|
|
input::placeholder {
|
|
color: #77919d;
|
|
}
|
|
.primary,
|
|
.secondary,
|
|
.danger {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 14px;
|
|
padding: 0.7rem 1rem;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.primary {
|
|
color: #032128;
|
|
background: linear-gradient(135deg, var(--aqua), #b8f3db);
|
|
}
|
|
.secondary {
|
|
color: var(--aqua);
|
|
background: rgba(118, 228, 213, 0.1);
|
|
border: 1px solid rgba(118, 228, 213, 0.3);
|
|
}
|
|
.danger {
|
|
color: #311016;
|
|
background: var(--danger);
|
|
}
|
|
button:disabled {
|
|
opacity: 0.48;
|
|
}
|
|
.text {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--aqua);
|
|
padding: 0.5rem;
|
|
}
|
|
.error {
|
|
color: #ffd0d0;
|
|
background: rgba(255, 80, 90, 0.12);
|
|
border-radius: 12px;
|
|
padding: 0.7rem;
|
|
}
|
|
.demo {
|
|
color: var(--sand);
|
|
font-size: 0.9rem;
|
|
}
|
|
.sea {
|
|
position: relative;
|
|
padding: 1.5rem 1.1rem 2rem;
|
|
}
|
|
.moon {
|
|
position: absolute;
|
|
right: -35px;
|
|
top: -20px;
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle at 35% 35%,
|
|
#b8f3db,
|
|
#178998 58%,
|
|
transparent 61%
|
|
);
|
|
opacity: 0.22;
|
|
}
|
|
.actions {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin: 2rem 0;
|
|
}
|
|
.action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
padding: 1.25rem;
|
|
border-radius: 22px;
|
|
border: 1px solid var(--line);
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(118, 228, 213, 0.18),
|
|
rgba(5, 24, 38, 0.7)
|
|
);
|
|
}
|
|
.action b {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 18px;
|
|
background: rgba(118, 228, 213, 0.16);
|
|
font-size: 1.7rem;
|
|
color: var(--aqua);
|
|
}
|
|
.action span {
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
}
|
|
.action small {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-weight: 400;
|
|
}
|
|
.quote {
|
|
margin: 0 1.1rem;
|
|
text-align: center;
|
|
color: #c9e0e6;
|
|
}
|
|
.quota-note {
|
|
font-size: 0.78rem;
|
|
}
|
|
.between,
|
|
.button-row,
|
|
.author,
|
|
.toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.8rem;
|
|
}
|
|
.button-row > * {
|
|
width: auto;
|
|
flex: 1;
|
|
}
|
|
.success,
|
|
.empty-ocean {
|
|
margin: 4rem 1.1rem;
|
|
text-align: center;
|
|
}
|
|
.success > b,
|
|
.bottle {
|
|
font-size: 3rem;
|
|
color: var(--aqua);
|
|
}
|
|
.bottle-card blockquote {
|
|
font:
|
|
500 1.5rem/1.6 "ZCOOL XiaoWei",
|
|
serif;
|
|
margin: 2rem 0.2rem;
|
|
}
|
|
.author {
|
|
justify-content: flex-start;
|
|
}
|
|
.author i {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
}
|
|
.author small {
|
|
display: block;
|
|
color: var(--muted);
|
|
}
|
|
.list {
|
|
display: grid;
|
|
gap: 0.8rem;
|
|
}
|
|
.conversation {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 0.3rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.conversation p {
|
|
margin: 0.3rem 0;
|
|
color: var(--muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 260px;
|
|
}
|
|
.conversation time {
|
|
grid-column: 1;
|
|
font-size: 0.7rem;
|
|
color: var(--muted);
|
|
}
|
|
.badge,
|
|
.pill {
|
|
border-radius: 99px;
|
|
background: rgba(118, 228, 213, 0.15);
|
|
color: var(--aqua);
|
|
padding: 0.22rem 0.55rem;
|
|
font-size: 0.72rem;
|
|
}
|
|
.chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100dvh - 10px);
|
|
}
|
|
.messages {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
}
|
|
.bubble {
|
|
max-width: 82%;
|
|
margin: 0.7rem 0;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 18px 18px 18px 5px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
}
|
|
.bubble p {
|
|
margin: 0;
|
|
}
|
|
.bubble small {
|
|
color: var(--muted);
|
|
}
|
|
.bubble.sending {
|
|
opacity: 0.65;
|
|
}
|
|
.bubble.failed {
|
|
border-color: var(--danger);
|
|
}
|
|
.composer {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
|
|
background: #061b2b;
|
|
}
|
|
.composer textarea {
|
|
min-height: 48px;
|
|
}
|
|
.composer button {
|
|
min-width: 48px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: var(--aqua);
|
|
font-size: 1.5rem;
|
|
}
|
|
.dot {
|
|
font-size: 0.7rem;
|
|
color: var(--muted);
|
|
}
|
|
.dot.on {
|
|
color: var(--aqua);
|
|
}
|
|
.chat-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
}
|
|
.chat-actions .text {
|
|
min-width: 44px;
|
|
}
|
|
.report-dialog {
|
|
position: absolute;
|
|
z-index: 12;
|
|
top: 18%;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
width: auto;
|
|
margin: 0;
|
|
color: #fff;
|
|
background: #0b2d3b;
|
|
}
|
|
.report-dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.65);
|
|
}
|
|
.bottle-row p {
|
|
font-family: "ZCOOL XiaoWei", serif;
|
|
font-size: 1.12rem;
|
|
}
|
|
.bottle-row time,
|
|
.bottle-row small {
|
|
color: var(--muted);
|
|
}
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
background: #020b13;
|
|
padding: 0.6rem;
|
|
border-radius: 10px;
|
|
color: #9fc3cc;
|
|
}
|
|
.segmented {
|
|
display: flex;
|
|
padding: 0 1rem 1rem;
|
|
gap: 0.3rem;
|
|
}
|
|
.segmented button {
|
|
flex: 1;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
color: #fff;
|
|
border-radius: 12px;
|
|
}
|
|
.offline {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
text-align: center;
|
|
background: #f1c27d;
|
|
color: #2b1b05;
|
|
padding: 0.35rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.tabs {
|
|
position: fixed;
|
|
z-index: 8;
|
|
bottom: 0;
|
|
width: min(100%, 430px);
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
padding: 0.55rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom));
|
|
background: rgba(3, 17, 28, 0.94);
|
|
backdrop-filter: blur(18px);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.tabs a {
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font-size: 0.78rem;
|
|
}
|
|
.tabs a[aria-current="page"] {
|
|
color: var(--aqua);
|
|
}
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
code {
|
|
color: var(--sand);
|
|
}
|
|
@media (min-width: 700px) {
|
|
body {
|
|
padding: 2rem 0;
|
|
}
|
|
.app-shell {
|
|
min-height: calc(100dvh - 4rem);
|
|
border-radius: 32px;
|
|
}
|
|
.tabs {
|
|
bottom: 2rem;
|
|
border-radius: 0 0 32px 32px;
|
|
}
|
|
.chat {
|
|
height: calc(100dvh - 4rem);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.orb,
|
|
.bottle {
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
50% {
|
|
transform: translateY(-8px);
|
|
}
|
|
}
|
|
}
|