* {
box-sizing:border-box;
}
body {
font-family:"微软雅黑",sans-serif;
margin:0;
padding:0;
background:#f7f8fa;
color:#2c2c2c;
}
h1 {
font-size:20px;
margin:12px 0;
text-align:center;
color:#3a6f9e;
}
h2 {
font-size:15px;
margin:8px 0;
color:#3a6f9e;
}
textarea, input, select {
width:100%;
padding:10px;
margin:6px 0;
box-sizing:border-box;
font-size:15px;
font-family:inherit;
border:1px solid #ccc;
border-radius:8px;
outline:none;
}
textarea {
min-height:70px;
resize:vertical;
}
textarea:focus, input:focus, select:focus {
border-color:#5389b8;
}
button {
background-color:#5389b8;
color:#fff;
border:none;
cursor:pointer;
padding:10px;
margin:6px 0;
border-radius:8px;
font-family:inherit;
font-size:15px;
box-sizing:border-box;
transition:background-color 0.15s;
}
button:hover {
background-color:#3a6f9e;
}
button.small {
width:auto;
padding:5px 12px;
font-size:13px;
margin:0;
}
button.danger {
background-color:#c43b3b;
}
button.danger:hover {
background-color:#a02c2c;
}
button.ghost {
background:#fff;
color:#5389b8;
border:1px solid #c3ddf4;
}
button.ghost:hover {
background:#e5eef8;
color:#3a6f9e;
}
.topnav {
position:sticky;
top:0;
z-index:900;
background:#5389b8;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.topnav-inner {
max-width:680px;
margin:0 auto;
display:flex;
align-items:center;
padding:0 16px;
height:56px;
box-sizing:border-box;
}
.topnav-logo {
font-size:17px;
font-weight:bold;
color:#fff;
letter-spacing:1px;
flex-shrink:0;
}
.topnav-tabs {
display:flex;
gap:4px;
margin-left:auto;
}
.topnav-tabs a {
display:inline-block;
width:auto;
padding:8px 16px;
font-size:14px;
background:transparent;
color:rgba(255,255,255,0.8);
border-radius:20px;
font-weight:bold;
text-decoration:none;
transition:background-color 0.15s, color 0.15s;
}
.topnav-tabs a:hover {
background:rgba(255,255,255,0.15);
color:#fff;
}
.topnav-tabs a.active {
background:#fff;
color:#5389b8;
}
.nav-badge {
display:none;
margin-left:6px;
background:#e05a5a;
color:#fff;
font-size:10px;
font-weight:bold;
padding:1px 6px;
border-radius:10px;
vertical-align:middle;
line-height:1.4;
}
.nav-badge.on {
display:inline-block;
}
.content {
padding:0 12px 16px 12px;
max-width:680px;
margin:0 auto;
}
.panel {
padding:12px;
border:1px solid #eee;
border-radius:12px;
margin:12px 0;
background:#fff;
}
.auth-area {
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
padding:20px;
box-sizing:border-box;
background:#f7f8fa;
}
.auth-card {
width:100%;
max-width:400px;
padding:28px 24px;
background:#fff;
border-radius:20px;
border:1px solid #e5eef8;
box-shadow:0 8px 32px rgba(83,137,184,0.12);
position:relative;
}
.auth-card h1 {
text-align:center;
color:#5389b8;
font-size:22px;
margin:0 0 20px 0;
}
.field-label {
font-size:13px;
color:#5389b8;
font-weight:bold;
margin-top:10px;
display:block;
}
.keep-row {
display:flex;
align-items:center;
gap:8px;
margin:12px 0;
font-size:14px;
color:#3a6f9e;
}
.keep-row input[type="checkbox"] {
width:18px;
height:18px;
margin:0;
accent-color:#5389b8;
cursor:pointer;
}
.keep-row label {
cursor:pointer;
user-select:none;
}
.switch-link {
position:absolute;
right:16px;
bottom:-42px;
font-size:14px;
color:#5389b8;
cursor:pointer;
text-decoration:underline;
user-select:none;
}
.switch-link:hover {
color:#3a6f9e;
}
.auth-msg {
text-align:center;
font-size:13px;
color:#c43b3b;
min-height:18px;
margin:8px 0 0 0;
}
.tag-row {
display:flex;
gap:8px;
align-items:stretch;
}
.tag-row .rich-input {
flex:1;
min-width:0;
}
.tag-btn {
width:46px;
min-width:46px;
padding:0;
margin:6px 0;
font-size:22px;
font-weight:bold;
line-height:1;
background:#e5eef8;
color:#5389b8;
border:1px solid #c3ddf4;
border-radius:8px;
cursor:pointer;
flex-shrink:0;
font-family:inherit;
transition:background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.tag-btn:hover {
background:#5389b8;
color:#fff;
border-color:#5389b8;
}
.tag-btn.on {
background:#5389b8;
color:#fff;
border-color:#5389b8;
box-shadow:0 0 0 3px rgba(83,137,184,0.25);
}
.rich-input {
width:100%;
padding:10px;
margin:6px 0;
box-sizing:border-box;
font-size:15px;
font-family:inherit;
border:1px solid #ccc;
border-radius:8px;
background:#fff;
outline:none;
white-space:pre-wrap;
word-break:break-word;
overflow-y:auto;
min-height:70px;
max-height:400px;
color:#2c2c2c;
line-height:1.5;
}
.rich-input:focus {
border-color:#5389b8;
}
.rich-input:empty:before {
content:attr(data-placeholder);
color:#aaa;
pointer-events:none;
}
.rich-input.single {
min-height:0;
height:auto;
max-height:none;
padding:10px;
overflow:hidden;
}
.rich-input.locked {
cursor:pointer;
background:#fafcfe;
}
.rich-input.locked:focus {
border-color:#ccc;
}
.rich-input.editing {
background:#fff;
box-shadow:0 0 0 3px rgba(83,137,184,0.15);
}
.tag-chip {
color:#5389b8;
font-weight:bold;
}
.feed {
display:flex;
gap:10px;
align-items:flex-start;
width:100%;
padding-top:4px;
}
.feed-col {
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:10px;
}
.feed-empty {
text-align:center;
color:#999;
font-size:14px;
padding:60px 20px;
line-height:1.8;
width:100%;
}
.card {
background:#fff;
border-radius:12px;
overflow:hidden;
cursor:pointer;
transition:transform 0.15s, box-shadow 0.15s;
box-shadow:0 1px 3px rgba(0,0,0,0.04);
break-inside:avoid;
}
.card:hover {
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(83,137,184,0.15);
}
.card-cover-wrap {
position:relative;
width:100%;
overflow:hidden;
background:#f0f0f0;
}
.card-cover {
width:100%;
display:block;
object-fit:cover;
}
.card-text-cover {
width:100%;
padding:24px 14px;
box-sizing:border-box;
background:linear-gradient(135deg,#e8f2fc 0%,#d6e8fa 100%);
color:#3a6f9e;
font-size:14px;
font-weight:bold;
line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-word;
}
.card-poll-cover {
width:100%;
padding:20px 14px;
box-sizing:border-box;
background:linear-gradient(135deg,#fff8ec 0%,#ffefd2 100%);
color:#a06600;
font-size:14px;
line-height:1.5;
}
.card-poll-cover .poll-label {
font-size:11px;
font-weight:bold;
color:#f0ad4e;
margin-bottom:4px;
}
.card-poll-cover .poll-title {
font-size:14px;
font-weight:bold;
color:#a06600;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-word;
}
.card-poll-cover .poll-count {
font-size:11px;
color:#c89030;
margin-top:6px;
}
.card-body {
padding:8px 10px 10px 10px;
}
.card-title {
font-size:13px;
color:#2c2c2c;
line-height:1.5;
margin:0 0 6px 0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-word;
}
.card-meta {
display:flex;
align-items:center;
gap:6px;
font-size:11px;
color:#999;
}
.card-avatar {
width:18px;
height:18px;
border-radius:50%;
background:#5389b8;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:9px;
font-weight:bold;
flex-shrink:0;
overflow:hidden;
}
.card-avatar img {
width:100%;
height:100%;
object-fit:cover;
}
.card-author {
max-width:80px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.card-stats {
margin-left:auto;
display:flex;
gap:8px;
align-items:center;
}
.card-stat {
display:flex;
align-items:center;
gap:2px;
cursor:pointer;
user-select:none;
}
.card-stat:hover {
color:#5389b8;
}
.card-stat.liked {
color:#e05a5a;
}
.detail-post {
margin-top:12px;
padding:14px;
border:1px solid #e5eef8;
border-radius:12px;
background:#fff;
box-shadow:0 4px 16px rgba(83,137,184,0.08);
}
.detail-post h3 {
font-size:15px;
margin:0 0 8px 0;
color:#3a6f9e;
}
.detail-post h3 a {
color:#3a6f9e;
text-decoration:none;
cursor:pointer;
}
.detail-post h3 a:hover {
text-decoration:underline;
}
.post-body {
margin:0 0 10px 0;
white-space:pre-wrap;
word-break:break-word;
font-size:15px;
line-height:1.7;
color:#2c2c2c;
}
.actions {
display:flex;
gap:8px;
font-size:13px;
flex-wrap:wrap;
align-items:center;
}
.meta {
font-size:12px;
color:#888;
}
.comment {
margin-top:8px;
padding:8px 10px;
background:#f6faff;
border-radius:8px;
font-size:13px;
}
.comment.depth-1 {
margin-left:24px;
background:#eef6ff;
}
.comment .author {
color:#3a6f9e;
font-weight:bold;
cursor:pointer;
}
.comment .author:hover {
text-decoration:underline;
}
.comment .reply-to {
font-size:12px;
color:#888;
margin-bottom:4px;
}
.comment-body {
white-space:pre-wrap;
word-break:break-word;
}
.follow-state {
font-size:12px;
color:#5389b8;
margin-left:6px;
}
.media-grid {
display:flex;
flex-wrap:wrap;
gap:6px;
margin:8px 0;
}
.media-item {
position:relative;
}
.media-item img {
max-width:260px;
max-height:240px;
border-radius:8px;
display:block;
}
.media-save {
position:absolute;
top:4px;
right:4px;
padding:2px 8px;
font-size:11px;
background:rgba(0,0,0,0.6);
color:#fff;
text-decoration:none;
border-radius:6px;
}
.media-preview-item {
position:relative;
width:80px;
height:80px;
border-radius:8px;
overflow:hidden;
background:#eee;
}
.media-preview-item img {
width:100%;
height:100%;
object-fit:cover;
}
.media-preview-rm {
position:absolute;
top:2px;
right:2px;
width:20px;
height:20px;
padding:0;
font-size:14px;
background:#c43b3b;
color:#fff;
border:none;
border-radius:50%;
cursor:pointer;
line-height:1;
}
.poll-box {
margin:10px 0;
padding:14px;
background:#f6faff;
border-radius:12px;
border-left:3px solid #5389b8;
}
.poll-title {
font-size:16px;
font-weight:bold;
color:#3a6f9e;
margin:0 0 12px 0;
word-break:break-word;
line-height:1.5;
}
.poll-option {
position:relative;
margin-bottom:8px;
padding:10px 14px;
border:1px solid #e5eef8;
border-radius:10px;
cursor:pointer;
overflow:hidden;
background:#fff;
transition:border-color 0.15s;
}
.poll-option:hover {
border-color:#5389b8;
}
.poll-option.voted {
cursor:default;
}
.poll-option.voted:hover {
border-color:#e5eef8;
}
.poll-option.mine {
border-color:#5389b8;
}
.poll-option.mine:hover {
border-color:#5389b8;
}
.poll-bar {
position:absolute;
left:0;
top:0;
bottom:0;
background:#e5eef8;
z-index:0;
transition:width 0.3s;
}
.poll-option.mine .poll-bar {
background:#c3ddf4;
}
.poll-content {
position:relative;
z-index:1;
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
font-size:14px;
color:#2c2c2c;
}
.poll-content .poll-text {
flex:1;
word-break:break-word;
}
.poll-content .poll-stat {
font-size:12px;
color:#888;
flex-shrink:0;
}
.poll-option.mine .poll-text {
font-weight:bold;
color:#5389b8;
}
.poll-meta {
font-size:12px;
color:#888;
margin-top:6px;
}
.modal {
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
z-index:9999;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
}
.modal.on {
display:flex;
}
.modal-box {
background:#fff;
border-radius:16px;
padding:20px;
max-width:560px;
width:100%;
max-height:85vh;
overflow:auto;
}
.modal-box h2 {
margin-top:0;
}
.modal-close {
position:absolute;
top:10px;
right:10px;
width:32px;
height:32px;
background:rgba(0,0,0,0.4);
color:#fff;
border:none;
border-radius:50%;
cursor:pointer;
font-size:18px;
line-height:1;
padding:0;
}
.modal-close:hover {
background:rgba(0,0,0,0.6);
}
.fab {
position:fixed;
bottom:24px;
right:24px;
width:56px;
height:56px;
border-radius:50%;
background:#5389b8;
color:#fff;
font-size:28px;
font-weight:bold;
border:none;
cursor:pointer;
box-shadow:0 4px 16px rgba(83,137,184,0.4);
z-index:800;
display:flex;
justify-content:center;
align-items:center;
transition:transform 0.15s, background-color 0.15s;
}
.fab:hover {
background-color:#3a6f9e;
transform:scale(1.05);
}
.footer-links {
text-align:center;
padding:20px 16px;
color:#999;
font-size:12px;
line-height:1.8;
}
.footer-links a {
color:#5389b8;
text-decoration:none;
cursor:pointer;
margin:0 6px;
}
.footer-links a:hover {
text-decoration:underline;
}
.chat-header {
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
border-bottom:1px solid #e5eef8;
background:#fff;
}
.chat-header h2 {
margin:0;
flex:1;
font-size:16px;
color:#3a6f9e;
}
.chat-back {
width:auto;
padding:6px 14px;
font-size:13px;
margin:0;
background:#999;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
}
.chat-back:hover {
background:#777;
}
.chat-conv-list {
padding:0;
background:#fff;
}
.chat-conv-item {
display:flex;
gap:12px;
padding:14px 16px;
border-bottom:1px solid #f0f0f0;
background:#fff;
cursor:pointer;
align-items:center;
}
.chat-conv-item:hover {
background:#f8fbff;
}
.chat-conv-avatar {
width:44px;
height:44px;
border-radius:50%;
background:#5389b8;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:18px;
font-weight:bold;
flex-shrink:0;
overflow:hidden;
}
.chat-conv-avatar img {
width:100%;
height:100%;
object-fit:cover;
}
.chat-conv-info {
flex:1;
min-width:0;
}
.chat-conv-name {
font-weight:bold;
color:#3a6f9e;
font-size:15px;
margin-bottom:3px;
}
.chat-conv-last {
font-size:13px;
color:#888;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.chat-conv-right {
display:flex;
flex-direction:column;
align-items:flex-end;
gap:4px;
flex-shrink:0;
}
.chat-conv-time {
font-size:11px;
color:#aaa;
}
.chat-conv-unread {
background:#e05a5a;
color:#fff;
font-size:11px;
font-weight:bold;
padding:2px 8px;
border-radius:10px;
}
.chat-msgs {
display:flex;
flex-direction:column;
gap:12px;
padding:16px;
background:#f6faff;
min-height:60vh;
box-sizing:border-box;
}
.chat-msg {
display:flex;
gap:8px;
align-items:flex-end;
max-width:100%;
}
.chat-msg.mine {
flex-direction:row-reverse;
}
.chat-msg-bubble {
max-width:72%;
padding:10px 14px;
border-radius:16px;
font-size:14px;
line-height:1.5;
word-break:break-word;
white-space:pre-wrap;
background:#fff;
color:#2c2c2c;
border:1px solid #e5eef8;
}
.chat-msg.mine .chat-msg-bubble {
background:#5389b8;
color:#fff;
border-color:#5389b8;
}
.chat-msg-time {
font-size:11px;
color:#aaa;
}
.chat-input-bar {
display:flex;
gap:8px;
padding:12px 16px;
border-top:1px solid #eee;
background:#fafafa;
}
.chat-input-bar input {
flex:1;
margin:0;
}
.chat-input-bar button {
width:auto;
padding:10px 20px;
background:#5389b8;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
font-family:inherit;
font-size:15px;
}
.chat-input-bar button:hover {
background:#3a6f9e;
}
.chat-empty {
text-align:center;
color:#999;
padding:48px 20px;
font-size:14px;
}
.chat-status {
padding:6px 16px;
font-size:12px;
color:#888;
background:#fafafa;
min-height:18px;
}
.legal-section {
margin-bottom:18px;
padding-bottom:14px;
border-bottom:1px dashed #e5eef8;
}
.legal-section:last-child {
border-bottom:none;
}
.legal-section h3 {
color:#5389b8;
font-size:15px;
margin:0 0 8px 0;
}
.legal-section p {
color:#3d3d3d;
font-size:14px;
line-height:1.8;
margin:0 0 8px 0;
}
.legal-section ul {
color:#3d3d3d;
font-size:14px;
line-height:1.8;
margin:0;
padding-left:20px;
}
.legal-section li {
margin-bottom:4px;
}
.legal-time {
text-align:center;
color:#999;
font-size:12px;
margin:0 0 14px 0;
}