/* ============================================================ 用户前台统一暗色（房卡棋牌）主题 与游戏大厅 lobby 风格一致，全局重皮 Bootstrap4 + 复用组件 通过 header.html 全局引入；app_* 游戏页有自己的 不受影响 ============================================================ */ :root { --lobby-bg: #0f1622; --lobby-card: #1b2536; --lobby-card2: #222e44; --lobby-line: #2c3a52; --lobby-gold: #f5c451; --lobby-green: #1f9d63; --lobby-blue: #3b82f6; --lobby-text: #e8edf6; --lobby-sub: #9aa7bd; --lobby-danger: #e5484d; } /* ---------- 基础 ---------- */ html, body { background: var(--lobby-bg); color: var(--lobby-text); -webkit-text-size-adjust: 100%; } body, body.bg-light { background: var(--lobby-bg) !important; color: var(--lobby-text); -webkit-font-smoothing: antialiased; } a { color: #74a9ff; } a:hover { color: #9cc2ff; } a.text-decoration-none { color: var(--lobby-sub); } .text-secondary, .text-muted { color: var(--lobby-sub) !important; } .text-primary { color: #74a9ff !important; } hr, .border-bottom, .border-top, .border { border-color: var(--lobby-line) !important; } .container { padding-left: 14px; padding-right: 14px; max-width: 960px; } /* ---------- 导航栏 ---------- */ .navbar, .navbar.navbar-light.bg-white, .navbar.bg-white { background: linear-gradient(135deg, #15402e 0%, #143057 100%) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); border: 0; } .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-nav .nav-link, .navbar .dropdown-toggle.text-secondary { color: #e8edf6 !important; } .navbar .nav-link:hover { color: var(--lobby-gold) !important; } .navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, .3); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* ---------- 卡片 ---------- */ .card, .card.bg-white, .bg-white, .bg-light { background: var(--lobby-card) !important; color: var(--lobby-text); border: 1px solid var(--lobby-line) !important; border-radius: 14px; } .card.shadow-sm, .shadow-sm { box-shadow: 0 3px 12px rgba(0, 0, 0, .28) !important; } .card .card-body { color: var(--lobby-text); } /* ---------- 表格 ---------- */ .table { color: var(--lobby-text); } .table thead th { color: var(--lobby-sub); border-bottom: 1px solid var(--lobby-line); border-top: 0; font-weight: 600; } .table td, .table th { border-top: 1px solid var(--lobby-line); vertical-align: middle; } .table-hover tbody tr:hover { background: rgba(255, 255, 255, .04); color: var(--lobby-text); } .table-responsive { -webkit-overflow-scrolling: touch; } /* ---------- 表单控件 ---------- */ .form-control, select.form-control, textarea.form-control, .custom-select { background: var(--lobby-bg); border: 1px solid var(--lobby-line); color: var(--lobby-text); border-radius: 10px; } .form-control:focus, select.form-control:focus { background: var(--lobby-bg); color: var(--lobby-text); border-color: var(--lobby-blue); box-shadow: 0 0 0 .15rem rgba(59, 130, 246, .25); } .form-control::-webkit-input-placeholder { color: #5d6b82; } .form-control::placeholder { color: #5d6b82; } .form-control.is-invalid { border-color: var(--lobby-danger); } select.form-control option { background: var(--lobby-card); color: var(--lobby-text); } label { color: var(--lobby-sub); } /* 浏览器自动填充修正 */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--lobby-text); -webkit-box-shadow: 0 0 0 1000px var(--lobby-bg) inset; caret-color: var(--lobby-text); transition: background-color 5000s ease-in-out 0s; } /* ---------- 按钮 ---------- */ .btn { border-radius: 10px; } .btn-primary { background: var(--lobby-blue); border-color: var(--lobby-blue); } .btn-primary:hover, .btn-primary:focus { background: #2f6fd6; border-color: #2f6fd6; } .btn-success { background: linear-gradient(135deg, #1f9d63, #16c57a); border-color: transparent; } .btn-danger { background: var(--lobby-danger); border-color: var(--lobby-danger); } .btn-secondary { background: var(--lobby-card2); border-color: var(--lobby-line); color: var(--lobby-text); } .btn-outline-primary { color: #74a9ff; border-color: #3f5170; } .btn-outline-primary:hover { background: var(--lobby-blue); border-color: var(--lobby-blue); color: #fff; } .btn-outline-secondary { color: var(--lobby-sub); border-color: var(--lobby-line); } .btn-outline-secondary:hover { background: var(--lobby-card2); color: var(--lobby-text); border-color: var(--lobby-line); } .btn-outline-success { color: #45d18a; border-color: #2f6b4d; } .btn-outline-success:hover { background: var(--lobby-green); border-color: var(--lobby-green); color: #fff; } .btn-outline-danger { color: #ff8a8d; border-color: #6b2f31; } .btn-outline-danger:hover { background: var(--lobby-danger); border-color: var(--lobby-danger); color: #fff; } .btn-outline-warning { color: var(--lobby-gold); border-color: #6b5a2f; } .btn-outline-warning:hover { background: var(--lobby-gold); border-color: var(--lobby-gold); color: #3a2a06; } .btn-outline-dark { color: var(--lobby-sub); border-color: var(--lobby-line); } .btn-outline-dark:hover { background: var(--lobby-card2); color: var(--lobby-text); border-color: var(--lobby-line); } /* ---------- 徽章 ---------- */ .badge-warning { background: rgba(245, 196, 81, .18); color: var(--lobby-gold); } .badge-secondary { background: rgba(154, 167, 189, .15); color: var(--lobby-sub); } .badge-dark { background: rgba(154, 167, 189, .12); color: var(--lobby-sub); } /* ---------- 下拉菜单 ---------- */ .dropdown-menu { background: var(--lobby-card); border: 1px solid var(--lobby-line); } .dropdown-item { color: var(--lobby-text); } .dropdown-item:hover, .dropdown-item:focus { background: var(--lobby-card2); color: var(--lobby-gold); } .dropdown-divider { border-color: var(--lobby-line); } /* ---------- 弹窗 ---------- */ .modal-content { background: var(--lobby-card); color: var(--lobby-text); border: 1px solid var(--lobby-line); border-radius: 14px; } .modal-content .form-control { background: var(--lobby-bg); border-color: var(--lobby-line); color: var(--lobby-text); } .modal-content .close { color: var(--lobby-text); text-shadow: none; opacity: .8; } .modal-content label { color: var(--lobby-sub); } .modal-header, .modal-footer { border-color: var(--lobby-line); } .input-group-text { background: var(--lobby-card2); border-color: var(--lobby-line); color: var(--lobby-sub); } /* ---------- 提示框 ---------- */ .alert-warning { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .3); color: var(--lobby-gold); } .alert-success { background: rgba(31, 157, 99, .14); border-color: rgba(31, 157, 99, .3); color: #45d18a; } .alert-danger { background: rgba(229, 72, 77, .14); border-color: rgba(229, 72, 77, .3); color: #ff8a8d; } /* ============================================================ 复用组件（与 lobby 一致） ============================================================ */ .blk { background: var(--lobby-card); border: 1px solid var(--lobby-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .blk-title { font-size: 13px; color: var(--lobby-sub); margin-bottom: 10px; font-weight: 600; } .kv { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lobby-line); font-size: 14px; } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--lobby-sub); } .kv .v { font-weight: 600; } .kv .v.gold { color: var(--lobby-gold); } .mini-btn { border: 1px solid var(--lobby-line); background: var(--lobby-card2); color: var(--lobby-text); border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; text-decoration: none; display: inline-block; } .mini-btn:hover { color: var(--lobby-gold); text-decoration: none; } .mini-btn.primary { background: var(--lobby-blue); border-color: var(--lobby-blue); color: #fff; } .mini-btn.primary:hover { color: #fff; } .mini-btn.gold { background: var(--lobby-gold); border-color: var(--lobby-gold); color: #3a2a06; } .mini-btn.gold:hover { color: #3a2a06; } .badge-role { font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 600; } .badge-role.owner { background: rgba(245, 196, 81, .18); color: var(--lobby-gold); } .badge-role.member { background: rgba(154, 167, 189, .15); color: var(--lobby-sub); } .lobby-input { width: 100%; background: var(--lobby-bg); border: 1px solid var(--lobby-line); border-radius: 10px; color: var(--lobby-text); padding: 11px 12px; font-size: 14px; } .link-grid { display: flex; gap: 10px; } .link-grid a { flex: 1; text-align: center; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--lobby-card2); color: var(--lobby-text); border: 1px solid var(--lobby-line); } .link-grid a.danger { color: #ff8a8d; } /* ---------- 登录/注册/找回 卡片 ---------- */ .auth-wrap { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 24px 14px; } .auth-card { width: 100%; max-width: 380px; background: linear-gradient(160deg, var(--lobby-card) 0%, var(--lobby-card2) 100%); border: 1px solid var(--lobby-line); border-radius: 16px; padding: 26px 22px; box-shadow: 0 8px 28px rgba(0, 0, 0, .4); } .auth-card h3 { text-align: center; margin-bottom: 22px; font-weight: 700; color: var(--lobby-text); } .auth-card .form-control { height: calc(2.4rem + 2px); } .auth-card .btn-primary.btn-block { background: linear-gradient(135deg, #1f9d63, #16c57a); border: 0; font-weight: 700; padding: 11px; } /* ---------- 侧边栏 ---------- */ .user-sidebar .card { background: var(--lobby-card) !important; border: 1px solid var(--lobby-line) !important; } .user-sidebar .nav-pills .nav-link { color: var(--lobby-text); border-left: 2px solid transparent; padding-left: 1.8rem !important; border-radius: 0; } .user-sidebar .nav-pills .nav-link:hover { background: rgba(255, 255, 255, .04); color: var(--lobby-gold); } .user-sidebar .nav-pills .nav-link.active { color: var(--lobby-gold); background: rgba(245, 196, 81, .1); border-left: 2px solid var(--lobby-gold); } /* 文本工具色覆盖（部分页面硬编码） */ .text-monospace { color: inherit; } /* ============================================================ 通用移动端子页面骨架（与 lobby 风格一致） 顶部返回栏 + 居中标题，无底部 Tab；用于 Template::topbar() ============================================================ */ .app-page { max-width: 540px; margin: 0 auto; min-height: 100vh; position: relative; background: linear-gradient(180deg, #16203a 0%, var(--lobby-bg) 240px); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); -webkit-tap-highlight-color: transparent; } .app-topbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; min-height: 52px; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; background: linear-gradient(135deg, #15402e 0%, #143057 100%); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .app-topbar .tb-back { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #e8edf6; font-size: 22px; line-height: 1; text-decoration: none; border-radius: 10px; cursor: pointer; } .app-topbar .tb-back:active { background: rgba(255, 255, 255, .1); } .app-topbar .tb-title { flex: 1 1 auto; text-align: center; font-size: 16px; font-weight: 600; color: #e8edf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } .app-topbar .tb-right { flex: 0 0 auto; min-width: 38px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; } .app-main { padding: 12px; } /* 紧凑列表行 */ .app-list { display: flex; flex-direction: column; } .list-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--lobby-line); } .list-row:last-child { border-bottom: 0; } .list-row .lr-main { flex: 1 1 auto; min-width: 0; } .list-row .lr-title { font-size: 14px; font-weight: 600; color: var(--lobby-text); display: flex; align-items: center; gap: 6px; } .list-row .lr-sub { font-size: 12px; color: var(--lobby-sub); margin-top: 3px; } .list-row .lr-right { flex: 0 0 auto; text-align: right; } .list-row .lr-amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .list-row .lr-amt.up { color: #6ee97b; } .list-row .lr-amt.down { color: #ff8a8d; } .app-empty { text-align: center; color: var(--lobby-sub); padding: 50px 20px; font-size: 14px; } /* 行内分段筛选（替代下拉，移动端更顺手） */ .seg-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-bottom: 4px; scrollbar-width: none; } .seg-chips::-webkit-scrollbar { display: none; } .seg-chips .chip { flex: 0 0 auto; padding: 7px 15px; border-radius: 18px; background: var(--lobby-card); color: var(--lobby-sub); font-size: 13px; border: 1px solid var(--lobby-line); cursor: pointer; white-space: nowrap; } .seg-chips .chip.active { background: var(--lobby-gold); color: #3a2a06; border-color: var(--lobby-gold); font-weight: 700; } .report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .report-grid .rp-cell { text-align: center; background: var(--lobby-bg); border: 1px solid var(--lobby-line); border-radius: 10px; padding: 12px 4px; } .report-grid .rp-num { font-size: 18px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .report-grid .rp-num.up { color: #6ee97b; } .report-grid .rp-num.down { color: #ff8a8d; } .report-grid .rp-num.gold { color: var(--lobby-gold); } .report-grid .rp-lbl { font-size: 11px; color: var(--lobby-sub); margin-top: 4px; }