/* 会议模块样式：会议页签下的列表与各入口页，以及全屏会议室。 兼容 wap（单列）与 web（侧栏+主区）两种模式。 */ .meeting-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto; background: #f5f6f7; } .meeting-pane.hidden { display: none; } .meeting-home, .meeting-page { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 20px; } .meeting-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .meeting-profile { display: flex; align-items: center; gap: 10px; min-width: 0; } .meeting-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #d9e6ff; color: #2a5db0; font-weight: 700; overflow: hidden; } .meeting-avatar.small { width: 32px; height: 32px; font-size: 13px; } .meeting-avatar img { width: 100%; height: 100%; object-fit: cover; } .meeting-profile-name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-personal-entry { border: 0; background: transparent; color: #5b6b7f; font-size: 13px; cursor: pointer; } .meeting-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .meeting-action { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 0; border-radius: 12px; background: #fff; font-size: 13px; color: #303a45; cursor: pointer; } .meeting-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; font-size: 22px; color: #fff; background: #2f7ff0; } .meeting-action-icon.quick { background: #3a8bff; } .meeting-action-icon.schedule { background: #2bb673; } .meeting-list-head { display: flex; align-items: center; justify-content: space-between; color: #8b95a1; font-size: 12px; } .meeting-link-btn { border: 0; background: transparent; color: #2f7ff0; font-size: 13px; cursor: pointer; } .meeting-list { display: flex; flex-direction: column; gap: 10px; } .meeting-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 12px; background: #fff; } .meeting-card-main { min-width: 0; } .meeting-card-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-card-sub { margin-top: 4px; color: #8b95a1; font-size: 12px; } .meeting-card-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .meeting-status { padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #eef2f6; color: #6b7785; } .meeting-status-active { background: #e6f6ed; color: #1a8f52; } .meeting-card-enter, .meeting-card-cancel { border: 0; border-radius: 14px; padding: 6px 12px; font-size: 12px; cursor: pointer; } .meeting-card-enter { background: #2f7ff0; color: #fff; } .meeting-card-cancel { background: #f2f4f7; color: #6b7785; } .meeting-empty { padding: 48px 0; text-align: center; color: #9aa4b0; font-size: 14px; } .meeting-empty-icon { font-size: 34px; margin-bottom: 8px; } .meeting-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .meeting-page-head h3 { margin: 0; font-size: 16px; } .meeting-back, .meeting-done { border: 0; background: transparent; color: #2f7ff0; font-size: 15px; cursor: pointer; } .meeting-hint { color: #8b95a1; font-size: 12px; line-height: 1.6; } .meeting-form { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; } .meeting-field, .meeting-switch-row, .meeting-field-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid #f0f2f5; } .meeting-field:last-child, .meeting-switch-row:last-child { border-bottom: 0; } .meeting-field-label { flex: 0 0 86px; color: #303a45; font-size: 15px; } .meeting-field input, .meeting-field select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: #222; outline: none; } .meeting-field-value { margin-left: auto; color: #8b95a1; font-size: 14px; } .meeting-switch-row span { flex: 1; font-size: 15px; } .meeting-switch { appearance: none; width: 46px; height: 26px; border-radius: 13px; background: #d8dde3; position: relative; outline: none; cursor: pointer; transition: background .2s; } .meeting-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; } .meeting-switch:checked { background: #2f7ff0; } .meeting-switch:checked::after { transform: translateX(20px); } .meeting-gap { height: 10px; background: #f5f6f7; } .meeting-primary { margin-top: auto; padding: 13px; border: 0; border-radius: 10px; background: #2f7ff0; color: #fff; font-size: 16px; cursor: pointer; } .meeting-primary.inline { margin-top: 0; padding: 9px 18px; font-size: 14px; } .meeting-secondary { padding: 9px 16px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; color: #303a45; font-size: 14px; cursor: pointer; } .meeting-page-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; } .meeting-personal-card { padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #eaf1ff, #f7faff); } .meeting-personal-title { display: flex; align-items: center; gap: 10px; } .meeting-personal-title input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 700; outline: none; } .meeting-personal-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: #5b6b7f; font-size: 13px; } .meeting-friend-list { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; max-height: 55vh; overflow-y: auto; } .meeting-friend { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f0f2f5; } .meeting-friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 与 App 的会前表单一致：列表独立滚动，操作区不随名单滚走。 */ .meeting-pane .hidden { display: none; } .meeting-invite-page { flex: 1; min-height: 0; height: 100%; box-sizing: border-box; overflow: hidden; } .meeting-invite-page > :not(.meeting-friend-list) { flex-shrink: 0; } .meeting-invite-page .meeting-friend-list { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } .meeting-friend { flex-shrink: 0; min-height: 48px; box-sizing: border-box; } .meeting-avatar { flex-shrink: 0; } .meeting-invite-bulk { display: flex; flex-wrap: wrap; gap: 12px; } .meeting-invite-page #meetingInviteSearch { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid #ded8c9; border-radius: 12px; padding: 10px 12px; background: #fff; color: #403721; font: inherit; } .meeting-invite-page #meetingInviteSearch:focus { outline: 2px solid #ae8a41; outline-offset: 1px; } .meeting-link-btn:disabled { opacity: .4; cursor: default; } .meeting-recent { padding: 8px 14px 12px; border-bottom: 1px solid #e8e3d8; } .meeting-recent-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: #81704d; font-size: 12px; } .meeting-recent-head button { border: 0; background: transparent; color: #94783d; cursor: pointer; padding: 8px 0; } .meeting-recent-list { display: flex; flex-direction: column; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; } .meeting-recent-list button { flex: none; min-height: 40px; border: 0; background: transparent; text-align: start; padding: 10px 4px; color: inherit; cursor: pointer; } .meeting-recent-list button:hover { background: #f7f1e3; } .meeting-password-dialog { width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 24px; border-radius: 18px; background: #fff; color: #403721; } .meeting-password-dialog h3 { margin: 0 0 18px; } .meeting-password-field { display: flex; flex-direction: column; gap: 10px; } .meeting-password-field input { min-width: 0; width: 100%; box-sizing: border-box; border: 1px solid #d8cbaa; border-radius: 10px; padding: 12px; font: inherit; } .meeting-password-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; } .meeting-password-error { color: #b64040; min-height: 20px; font-size: 13px; } .meeting-password-dialog button:disabled { opacity: .45; cursor: default; } /* 会前沿用新版 App 金色强调色；会中保留深色视频舞台。 */ .meeting-pane { background: #f6f4ec; color: #403721; } .meeting-pane .meeting-action-icon, .meeting-pane .meeting-card-enter, .meeting-pane .meeting-primary, .meeting-pane .meeting-switch:checked { background: #ae8a41; } .meeting-pane .meeting-back, .meeting-pane .meeting-done, .meeting-pane .meeting-link-btn { color: #94783d; } .meeting-pane .meeting-personal-card { background: linear-gradient(135deg, #eee4c7, #faf7ed); } .meeting-pane .meeting-invite-tabs .active { background: #ae8a41; } .meeting-toast { position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 12px); padding: 10px 16px; border-radius: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; z-index: 4000; } .meeting-toast.show { opacity: 1; transform: translate(-50%, 0); } .meeting-toast.error { background: rgba(190, 48, 48, .9); } /* ---------- 会议室 ---------- */ .meeting-room { position: fixed; inset: 0 0 auto; height: 100dvh; box-sizing: border-box; z-index: 3000; display: flex; flex-direction: column; background: #16191d; color: #fff; } .meeting-room.minimized { inset: auto 12px 92px auto; width: 190px; height: 130px; border-radius: 12px; overflow: hidden; } .meeting-room-top { flex-shrink: 0; min-height: 56px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #1f2329; } .meeting-room-title { min-width: 0; display: flex; flex-direction: column; align-items: center; font-size: 15px; } .meeting-room-title > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .meeting-room-title small { color: #9aa4b0; font-size: 11px; } .meeting-recording-status { flex:none; display:flex; align-items:center; justify-content:center; gap:7px; min-height:30px; padding:4px 14px; color:#b4c1cf; font-size:12px; background:#1f2329; } .meeting-recording-status svg { width:18px; height:18px; flex:none; } .meeting-recording-status i { width:7px; height:7px; border-radius:50%; background:#ff7676; flex:none; } .meeting-recording-status.warning { color:#ffcb7c; } .meeting-recording-status span { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .meeting-recording-notice { margin:10px 20px 24px; color:#748092; font-size:12px; line-height:1.65; } .meeting-primary[aria-busy="true"], .meeting-card-enter[aria-busy="true"] { opacity:.7; cursor:progress; } .meeting-primary[aria-busy="true"]::after, .meeting-card-enter[aria-busy="true"]::after { content:'…'; margin-inline-start:6px; } .meeting-room-icon { border: 0; background: transparent; color: #cfd6dd; font-size: 18px; cursor: pointer; } .meeting-room-leave { border: 0; border-radius: 14px; padding: 6px 14px; background: #e5484d; color: #fff; font-size: 13px; cursor: pointer; } .meeting-room-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; background: #2b3138; color: #ffd479; font-size: 13px; } .meeting-room-start { border: 0; border-radius: 12px; padding: 5px 12px; background: #2f7ff0; color: #fff; font-size: 12px; cursor: pointer; } /* 舞台与聊天各占自己的布局空间，小窗只在舞台内定位。 */ .meeting-room-body { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; } .meeting-room-main { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; } .meeting-room-stage { position: relative; isolation: isolate; flex: 1; min-height: 0; min-width: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 8px; padding: 16px; box-sizing: border-box; overflow: hidden; } .meeting-room-stage > .meeting-tile { flex: none; width: var(--meeting-tile-width); height: var(--meeting-tile-height); } .meeting-room-stage.focus > .meeting-tile:not(:first-child) { position: absolute; right: 16px; top: 16px; width: min(24%, 144px); height: auto; aspect-ratio: 16/9; z-index: 1; box-shadow: 0 2px 10px #0004; } .meeting-room-stage.focus > .meeting-tile:first-child { position: absolute; inset: 4px; width: auto; height: auto; } .meeting-room-stage.focus .meeting-tile-pin { display: none; } .meeting-tile { position: relative; min-height: 0; border-radius: 8px; background: #23282e; overflow: hidden; } .meeting-tile.speaking { outline: 2px solid #2bb673; outline-offset: -2px; } .meeting-tile-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .meeting-tile-video { width: 100%; height: 100%; object-fit: contain; } .meeting-tile-avatar { display: flex; align-items: center; justify-content: center; width: auto; height: 40%; max-height: 72px; aspect-ratio: 1; border-radius: 50%; background: #39414a; color: #dbe3ea; font-size: 26px; overflow: hidden; } .meeting-tile-avatar img { width: 100%; height: 100%; object-fit: cover; } .meeting-tile-label { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.45); font-size: 12px; max-width: calc(100% - 16px); box-sizing: border-box; } .meeting-tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-tile-mic { flex: none; display: inline-flex; align-items: center; } /* 正在说话：三根跳动的音柱，与直播 .cohost-speaking-indicator 同一套做法。 */ .meeting-speak-bars { display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; width: 14px; height: 12px; flex: none; opacity: .38; } .meeting-speak-bars span { width: 3px; height: 4px; border-radius: 999px; background: currentColor; } .meeting-speak-bars.active { opacity: 1; } .meeting-speak-bars.active span:nth-child(1) { animation: meetingSpeakBars .9s ease-in-out infinite; } .meeting-speak-bars.active span:nth-child(2) { animation: meetingSpeakBars .9s ease-in-out .18s infinite; } .meeting-speak-bars.active span:nth-child(3) { animation: meetingSpeakBars .9s ease-in-out .36s infinite; } @keyframes meetingSpeakBars { 0%, 100% { height: 4px; opacity: .62; } 50% { height: 12px; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .meeting-speak-bars.active span { animation: none; height: 9px; } } .meeting-room-stage.focus > .meeting-tile:not(:first-child) .meeting-tile-label { left: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 2px 4px; font-size: 10px; } .meeting-room-stage.focus > .meeting-tile:not(:first-child) .meeting-tile-avatar { font-size: 14px; } @media (max-width: 899px) { .meeting-room-stage.focus > .meeting-tile:not(:first-child) .meeting-tile-pin { display: none; } } .meeting-tile-mic.off { color: #ff8a8a; } .meeting-tile-hostmute { color: #ffb020; } .meeting-tile-pin { position: absolute; right: 8px; top: 8px; border: 0; border-radius: 10px; padding: 3px 8px; background: rgba(0,0,0,.45); color: #dbe3ea; font-size: 11px; cursor: pointer; } .meeting-room-views { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; } .meeting-view-dot { display: grid; place-items: center; width: 36px; height: 28px; border: 0; background: transparent; cursor: pointer; } .meeting-view-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4a545f; } .meeting-view-dot.active::after { background: #fff; } .meeting-room-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px 6px calc(10px + env(safe-area-inset-bottom)); background: #1f2329; } .meeting-room-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: #dbe3ea; font-size: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* 开/关只用一种表达（0923）：关着的按钮只有图标变红（带斜杠），文字始终是中性色；开着的不另外上色。 以前麦克风关了连字一起红、摄像头开着却是蓝色，同一排按钮用两套颜色说开关。 */ .meeting-room-btn.off .meeting-room-btn-icon { color: #ff6b6b; } .meeting-room-btn:active { background: rgba(255,255,255,.08); } /* 开麦/开摄像头在等服务器：图标淡一点，表示点上了、正在处理 */ .meeting-room-btn[aria-busy="true"] .meeting-room-btn-icon { opacity: .5; transition: opacity .15s; } .meeting-mic-level { fill: #30d158; stroke: none; } .meeting-room-btn-icon { font-size: 20px; } /* 宽屏侧栏、窄屏上下分区均有确定高度，空聊天也保留完整阅读区域。 */ .meeting-room-sheet { position: relative; flex: 0 0 clamp(340px, 30vw, 400px); min-height: 0; min-width: 0; display: flex; flex-direction: column; background: #fff; color: #222; overflow: hidden; z-index: 2; border-left: 1px solid #e8eaed; } .meeting-room-sheet.hidden { display: none; } .meeting-sheet-head { flex-shrink: 0; min-height: 52px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 4px 16px; font-weight: 600; border-bottom: 1px solid #f0f2f5; } .meeting-sheet-head > span { flex: 1; min-width: 0; } .meeting-sheet-close, .meeting-chat-expand { width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer; border: 0; background: transparent; font-size: 20px; color: #8b95a1; cursor: pointer; } .meeting-sheet-tabs { display: flex; gap: 8px; padding: 10px 14px; } .meeting-sheet-tabs button, .meeting-sheet-tabs span { flex: 1; padding: 7px; border: 0; border-radius: 8px; background: #f2f4f7; color: #5b6b7f; font-size: 13px; text-align: center; cursor: pointer; } .meeting-sheet-tabs .active { background: #2f7ff0; color: #fff; } .meeting-sheet-list { flex: 1; min-height: 0; overflow-y: auto; } .meeting-member-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f5f6f7; } .meeting-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .meeting-member-state { color: #9aa4b0; font-size: 12px; } .meeting-member-icons { display: flex; gap: 6px; color: #5b6b7f; } .meeting-member-icons .off { color: #c0c6cc; } .meeting-member-action { border: 0; border-radius: 12px; padding: 5px 10px; background: #2f7ff0; color: #fff; font-size: 12px; cursor: pointer; } .meeting-member-action.ghost { background: #f2f4f7; color: #5b6b7f; } .meeting-sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #f0f2f5; } .meeting-chat-list { flex: 1; overscroll-behavior: contain; min-height: 0; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } .meeting-chat-msg { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; max-width: 80%; } .meeting-chat-msg.self { align-self: flex-end; align-items: flex-end; } .meeting-chat-name { color: #9aa4b0; font-size: 11px; } .meeting-chat-text { white-space: pre-wrap; padding: 7px 10px; border-radius: 8px; background: #f2f4f7; font-size: 14px; overflow-wrap: anywhere; } .meeting-chat-msg.self .meeting-chat-text { background: #d8ecd9; } .meeting-chat-composer { position: relative; flex-shrink: 0; background: inherit; } .meeting-chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #f0f2f5; } .meeting-chat-input textarea { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #e3e6ea; border-radius: 18px; font: inherit; font-size: 14px; line-height: 1.5; resize: none; min-height: 68px; max-height: 120px; box-sizing: border-box; outline: none; } @media (min-width: 900px) { .meeting-room-bar { grid-template-columns: repeat(5, 130px); justify-content: center; } } @media (prefers-color-scheme: dark) { .meeting-pane { background: #16181b; } .meeting-action, .meeting-card, .meeting-form, .meeting-friend-list { background: #202327; color: #e6e9ec; } .meeting-field, .meeting-switch-row, .meeting-field-row, .meeting-friend { border-bottom-color: #2a2e33; } .meeting-field input, .meeting-field select, .meeting-personal-title input { color: #e6e9ec; } .meeting-personal-card { background: linear-gradient(135deg, #1e2733, #202327); } .meeting-room-sheet { background: #202327; color: #e6e9ec; } .meeting-member-row { border-bottom-color: #2a2e33; } .meeting-chat-text { background: #2a2e33; color: #e6e9ec; } .meeting-chat-msg.self .meeting-chat-text { background: #24463a; } .meeting-chat-input textarea { background: #2a2e33; border-color: #343a41; color: #e6e9ec; } } .meeting-room-deadline{padding:4px 12px;text-align:center;color:#c5cad2;font-size:12px;background:#20252c}.meeting-detail{padding:24px;line-height:1.8}.meeting-detail h2{font-size:22px}.meeting-member-row{flex-wrap:wrap;row-gap:6px}.meeting-room-start{cursor:pointer}.meeting-room-views button{min-width:32px;min-height:24px;border-radius:12px}.meeting-tile-video{background:#14181f}.meeting-chat-input input{min-width:0}.meeting-card-main[role=button]{cursor:pointer} /* 邀请入口沿用表单行的视觉样式，并保留键盘焦点反馈。 */ button.meeting-field { appearance: none; width: 100%; border: 0; border-bottom: 1px solid #f0f2f5; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } button.meeting-field:focus-visible { outline: 2px solid #2f80ed; outline-offset: -3px; } .meeting-field-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 换端确认：本人已在其他设备的会议里，问一次要不要切换过来。 */ .meeting-takeover-mask { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(15, 23, 42, .45); } .meeting-takeover { width: 100%; max-width: 420px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(15, 23, 42, .22); } .meeting-takeover-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .meeting-takeover-head h3 { flex: 1; margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; color: #303a45; } .meeting-takeover-cancel { flex: none; padding: 7px 14px; border: 1px solid #e4e8ee; border-radius: 999px; background: transparent; font-size: 14px; color: #5b6b7f; cursor: pointer; } .meeting-takeover-action { display: flex; width: 100%; align-items: center; gap: 14px; padding: 16px; border: 0; border-radius: 12px; background: #eef4ff; text-align: left; cursor: pointer; } .meeting-takeover-action:focus-visible { outline: 2px solid #2f7ff0; outline-offset: 2px; } .meeting-takeover-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fff; font-size: 19px; color: #2f7ff0; } .meeting-takeover-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .meeting-takeover-copy strong { font-size: 15px; font-weight: 600; color: #303a45; } .meeting-takeover-copy em { font-style: normal; font-size: 13px; color: #8b95a1; } @media (prefers-color-scheme: dark) { .meeting-takeover { background: #202327; } .meeting-takeover-head h3, .meeting-takeover-copy strong { color: #e6e9ec; } .meeting-takeover-cancel { border-color: #343a41; color: #c5cad2; } .meeting-takeover-action { background: #24303f; } .meeting-takeover-icon { background: #202327; } } /* 邀请页：好友 / 群聊 两个页签 */ .meeting-invite-tabs { display: flex; gap: 8px; padding: 10px 16px 0; } .meeting-invite-tabs button { flex: 1; padding: 8px 0; border: 0; border-radius: 10px; background: #eef2f6; color: #5b6b7f; font-size: 14px; cursor: pointer; } .meeting-invite-tabs button.active { background: #2f7ff0; color: #fff; font-weight: 600; } /* 会议卡片左滑删除：按设计稿，滑开后右侧露出红色「删除会议」 */ /* touch-action: pan-y 告诉浏览器横向手势由我们自己处理： 不声明的话，横滑会被判成滚动，事件直接被取消，App 内嵌 WebView 里尤其明显。 */ .meeting-swipe { position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; } .meeting-swipe .meeting-card { position: relative; z-index: 1; transition: transform .18s ease; } .meeting-swipe.open .meeting-card { transform: translateX(-96px); } .meeting-swipe-delete { position: absolute; top: 0; right: 0; width: 96px; height: 100%; border: 0; background: #f5222d; color: #fff; font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .18s ease; } .meeting-swipe.open .meeting-swipe-delete { opacity: 1; } @media (hover: hover) and (pointer: fine) { .meeting-swipe:hover .meeting-card { transform: translateX(-96px); } .meeting-swipe:hover .meeting-swipe-delete { opacity: 1; } } @media (prefers-color-scheme: dark) { .meeting-invite-tabs button { background: #2a2e33; color: #c5cad2; } .meeting-invite-tabs button.active { background: #2f7ff0; color: #fff; } } /* ---- 会中聊天与邀请（按设计稿） ---- */ .meeting-room.wide .meeting-chat-expand { display: none; } @media (max-width: 899px) { .meeting-room-body { flex-direction: column; } .meeting-room.with-sheet .meeting-room-main { flex: 0 0 28%; min-height: 112px; } .meeting-room.with-sheet .meeting-room-sheet { flex: 1; border: 0; border-radius: 14px 14px 0 0; } .meeting-room.with-sheet .meeting-room-bar, .meeting-room.with-sheet .meeting-room-views, .meeting-room.with-sheet .meeting-room-deadline { display: none; } .meeting-room.with-sheet.chat-expanded .meeting-room-main { display: none; } .meeting-room.with-sheet .meeting-tile-pin { padding: 2px 5px; font-size: 10px; } .meeting-room.with-sheet .meeting-tile-label { left: 3px; bottom: 3px; padding: 2px 4px; font-size: 10px; max-width: calc(100% - 6px); box-sizing: border-box; } .meeting-room.with-sheet .meeting-tile-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .meeting-room.with-sheet .meeting-tile-avatar { font-size: 14px; } } /* 发送至 */ .meeting-chat-to { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.06); } .meeting-chat-to-label { font-size: 13px; color: #8b95a1; flex: none; } .meeting-chat-to-btn { min-width: 0; max-width: calc(100% - 96px); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: inherit; font-size: 13px; cursor: pointer; } .meeting-chat-to-btn > span:not(.meeting-chat-to-icon):not(.meeting-chat-to-caret) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-chat-to-icon { font-size: 15px; } .meeting-chat-to-caret { font-size: 11px; opacity: .7; } .meeting-chat-to-menu { position: absolute; left: 12px; right: 12px; bottom: 44px; z-index: 5; border-radius: 12px; background: #fff; color: #303a45; box-shadow: 0 12px 32px rgba(15,23,42,.28); overflow: hidden; } .meeting-chat-to-search { padding: 8px; border-bottom: 1px solid #f0f2f5; } .meeting-chat-to-search input { width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: #f2f4f7; font-size: 13px; } .meeting-chat-to-list { max-height: 220px; overflow: auto; } .meeting-chat-to-row { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 12px; border: 0; background: transparent; font-size: 14px; color: inherit; cursor: pointer; text-align: left; } .meeting-chat-to-row:hover { background: #f5f6f7; } .meeting-chat-to-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-chat-to-tick { color: #2f7ff0; font-weight: 700; } /* 私聊标注 */ .meeting-chat-name em { font-style: normal; color: #246ddd; } .meeting-chat-msg.private .meeting-chat-text { border: 1px solid #a7c7ff; } /* 表情 */ .meeting-chat-emoji { margin-left: auto; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; font-size: 18px; cursor: pointer; } .meeting-emoji-panel { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); z-index: 6; border: 1px solid #e5e8ee; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px #0002; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; max-height: 150px; overflow: auto; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.06); } .meeting-emoji { border: 0; background: transparent; font-size: 20px; line-height: 1.5; cursor: pointer; } .meeting-emoji:hover { background: rgba(255,255,255,.1); border-radius: 6px; } /* 邀请 */ .meeting-invite-copy { padding: 12px 14px; max-height: 300px; overflow: auto; } .meeting-invite-copy pre { margin: 0; white-space: pre-wrap; word-break: break-all; font: inherit; font-size: 13px; line-height: 1.7; } /* 音频与其他操作使用同一套线性图标；移动端直接开关，不显示设备菜单。 */ .meeting-control-icon { display: block; width: 24px; height: 24px; flex: none; } .meeting-control-slash { stroke: #e5484d; stroke-width: 2; } .meeting-room-btn.off .meeting-control-slash { stroke: currentColor; } .meeting-room-btn-icon { display: flex; align-items: center; justify-content: center; height: 26px; } .meeting-room-btn { min-width: 0; min-height: 52px; justify-content: center; border-radius: 8px; padding: 5px 3px; } .meeting-room-btn-wrap { position: relative; display: flex; align-items: stretch; justify-content: center; min-width: 0; } .meeting-room-btn-wrap > .meeting-room-btn { flex: 1; } /* 能不能选设备由脚本判断（手机浏览器列不出扬声器时根本不渲染）， 这里不再按屏幕宽窄藏起来，否则窄窗口的桌面浏览器也选不了。 */ .meeting-room-btn-more { display: grid; place-items: center; position: absolute; left: min(calc(50% + 11px), calc(100% - 24px)); top: 3px; width: 24px; height: 26px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #9aa4b0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .meeting-room-btn-more .meeting-control-icon { width: 14px; height: 14px; } .meeting-room-btn-more:active, .meeting-room-btn-more[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; } .meeting-room-btn:focus-visible, .meeting-room-btn-more:focus-visible, .meeting-device-row:focus-visible { outline: 2px solid #2f7ff0; outline-offset: -2px; } .meeting-audio-menu { display: block; position: fixed; left: 16px; bottom: 96px; width: 316px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100dvh - 170px)); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #2a2f36; color: #e8edf3; box-shadow: 0 6px 24px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.24); z-index: 20; text-align: left; } .meeting-audio-menu.hidden { display: none; } .meeting-room.wide .meeting-room-sheet.hidden { display: none; } /* 全员视图的翻页：100 人会议里一页只放 9–12 格，其余分页， 不在当前页的视频会被退订（真的不发流），这是能撑住大会议的前提。 */ .meeting-page-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; } .meeting-page-btn { min-width: 28px; height: 24px; border: 0; border-radius: 6px; background: rgba(255,255,255,.14); color: #dbe3ea; font-size: 15px; line-height: 1; cursor: pointer; } .meeting-page-btn:disabled { opacity: .35; cursor: default; } .meeting-page-num { font-size: 12px; color: #9aa4b0; min-width: 34px; text-align: center; } /* 设备菜单条目：能不能选设备由脚本判断，样式不能再按屏宽分叉—— 这几条原先锁在 900px 段里，手机上整段不生效，按钮退化成浏览器默认的 行内块按钮，挤成两列还换行。默认按深色操作条配色。 */ .meeting-device-section + .meeting-device-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); } .meeting-device-group { padding: 8px 12px 6px; font-family: inherit; font-size: 13px; line-height: 20px; color: #9aa4b0; } .meeting-device-row { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-family: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; } .meeting-device-row.selected { background: rgba(47,127,240,.18); color: #8cc0ff; } .meeting-device-row:active { background: rgba(255,255,255,.08); } .meeting-device-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-device-tick { flex: none; width: 18px; font-size: 16px; color: #4aa3ff; text-align: center; } @media (min-width: 900px) { .meeting-room-bar { grid-template-columns: repeat(5, minmax(0, 88px)); gap: 8px; padding: 8px 16px; background: #fff; border-top: 1px solid #e8eaed; } .meeting-room-btn { color: #353c47; font-size: 12px; gap: 4px; } .meeting-room-btn.off .meeting-room-btn-icon { color: #e5484d; } .meeting-room-btn:active { background: #e9ecf0; } .meeting-room-btn-more { color: #5f6670; } .meeting-room-btn-more:active, .meeting-room-btn-more[aria-expanded="true"] { background: #e3e6ea; color: #24292f; } /* 桌面操作条是白色，菜单跟着回到浅色；选中色与勾选色随之调整。 */ .meeting-audio-menu { border-color: #e8eaed; background: #fff; color: #24292f; box-shadow: 0 6px 24px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08); } .meeting-device-section + .meeting-device-section { border-top-color: #eceef0; } .meeting-device-group { color: #8a9099; } .meeting-device-row:hover { background: #f0f1f3; } .meeting-device-row.selected { background: #eef4ff; color: #1b62d6; } .meeting-device-tick { color: #2f7ff0; } } @media (min-width: 900px) and (hover: hover) { .meeting-room-btn:hover { background: #f0f2f5; } .meeting-room-btn-more:hover { background: #e3e6ea; color: #24292f; } } /* 聊天气泡里的会议邀请：链接换成「参与会议」按钮 */ .meeting-invite-card { margin-top: 8px; } .meeting-invite-join { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 0; border-radius: 999px; background: #2f7ff0; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } .meeting-invite-join:active { background: #2668c8; } .meeting-invite-join::before { content: '📹'; font-size: 15px; } .meeting-room-bar, .meeting-room-views, .meeting-room-deadline, .meeting-room-banner { flex-shrink: 0; } .meeting-room button:disabled { opacity: .45; cursor: default; } .meeting-room textarea:focus-visible, .meeting-chat-to-btn:focus-visible, .meeting-chat-emoji:focus-visible { outline: 2px solid #2f7ff0; outline-offset: 1px; } @media (prefers-color-scheme: dark) { .meeting-emoji-panel { background: #252a31; border-color: #424c59; } .meeting-chat-name em { color: #8cbaff; } .meeting-room-sheet { border-color: #343a41; } } /* 发言席位排队（声网频道同时 host 上限 17）。 排队条压在控制栏上方，和「正在录制」的提示条同一视觉层级。 */ .meeting-speak-queue { flex:none; display:flex; align-items:center; justify-content:center; gap:10px; min-height:30px; padding:4px 14px; background:#1f2329; color:#ffcb7c; font-size:12px; } .meeting-speak-cancel { border:1px solid rgba(255,203,124,.5); background:transparent; color:#ffcb7c; border-radius:12px; padding:2px 10px; font-size:12px; cursor:pointer; } .meeting-member-queued { flex:none; margin-right:6px; padding:1px 7px; border-radius:9px; background:rgba(255,203,124,.16); color:#d79b3b; font-size:11px; } /* 声网不像 LiveKit 直接给一个