/* ===================================================================== mobile.css — idleSteam 移动端适配 Phase 1（纯 CSS 响应式覆盖）作用域：仅 ≤960px 视口生效；桌面端完全不受影响。引入位置：Controls/Footer.ascx（末尾），保证层叠顺序最后、覆盖 common.css / style.css / style_inner.css 的桌面规则。说明：本项目核心玩法 Default.aspx 本就是 AJAX 驱动，无需改动后台。 ===================================================================== */ /* PC 端（所有视口默认）：#web_menu_div 中不显示帐号设置/退出登录。这两项由 Header.ascx 直接写入，仅移动端(@media 内)重新显示 */ #web_menu_div #marrla_btn_mb, #web_menu_div div[onclick*="logout.aspx"] { display: none; } @media screen and (max-width: 960px) { /* ---- 1. 容器流体化：解除固定 1000px 宽度 ---- */ #wrap { width: 100% !important; min-width: 0 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box; } /* ---- 2. 主区域由左右浮动改为纵向堆叠 ---- */ #maincontent { padding: 0 4px !important; } #mainheader { margin-left: 6px; margin-right: 6px; height: 84px; } #sidebar, #leftcontent, #rightcontent { float: none !important; width: 100% !important; padding: 10px 0 !important; box-sizing: border-box; } #sidebar_title { margin: 0px !important; padding-top: 0px !important; } #sidebar2 { float: none !important; width: 100% !important; padding: 10px 0 10px 10px !important; box-sizing: border-box; } #rightcontent { background: none !important; } #left_div, #right_div { width: 100% !important; border-right: none !important; box-sizing: border-box; } /* ---- 3. 顶部导航：横向滚动，避免换行挤占 ---- */ #topnav { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } #topnav ul { white-space: nowrap; } #topnav ul li { float: none !important; display: inline-block; padding-left: 10px !important; padding-right: 10px !important; } /* ---- 4. 基础字号与触摸目标（≥40px，避免误触） ---- */ body { font-size: 14px; line-height: 1.5; -webkit-text-size-adjust: 100%; padding-bottom: 58px !important; /* 预留底部固定菜单空间 */ } a, button, .btn, input, select, textarea { min-height: 26px; } .btn a, a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 12px; } input[type="text"], input[type="password"], select, textarea { font-size: 16px; } /* 防止 iOS 聚焦时自动缩放 */ /* ---- 5. 表格：允许横向滚动而非溢出屏幕 ---- */ table { max-width: 100%; } .tb_box, .table_box, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- 6. 图片流体化 ---- */ img { max-width: 100% !important; height: auto !important; } /* ---- 7. 移动端底部主菜单 #mb_menu（元素已在 Footer.ascx，这里补全布局） ---- */ #mb_menu { display: flex !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; z-index: 9999 !important; justify-content: space-around !important; align-items: center !important; padding: 6px 0 !important; border-top: 2px solid #ad92a3 !important; border-bottom: none !important; box-shadow: 0 -2px 10px rgba(173, 146, 163, .5) !important; background-color: #fbf4fd !important; text-shadow: 1px 1px 2px #ddd !important; box-sizing: border-box; } #mb_menu .flex { flex: 1 1 0 !important; font-size: 16px !important; } #mb_menu a { display: block !important; padding: 4px 0 !important; } /* ---- 8. 弹窗：接近全屏、关闭按钮易点 ---- */ .popup_cont, #equip_popup, #skill_popup, #card_popup { width: 92vw !important; max-width: 92vw !important; left: 4vw !important; box-sizing: border-box; } .popup_close, .hist_detail_close { font-size: 30px !important; padding: 0px 5px !important; } /* ===================================================== Phase 2：移动交互补全（配合 Scripts/mobile.js） ===================================================== */ /* ---- 9. 触屏基础：消除 300ms 点击延迟与双击缩放 ---- */ body, a, button, input, select, textarea, .menu_item, .web_menu, .btn { touch-action: manipulation; } /* ---- 10. 汉堡下拉菜单 #web_menu_div（tap 呼出，fixed 定位） ---- */ #web_menu_div { z-index: 10001 !important; min-width: 58vw !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important; } .web_menu { min-height: 44px; line-height: 44px; padding: 0 14px; display: flex; align-items: center; } /* ---- 11. 弹层限高可滚动（内容长时内部滚动，不顶出屏幕） ---- */ .pop_div, .popup_cont { max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #equip_popup, #skill_popup, #card_popup { max-height: 70vh; overflow-y: auto; } /* ---- 12. 战斗模式 hover 提示：保持气泡宽度而非被 92vw 撑满 ---- */ #poach_desc_div, #fight_desc_div, #offline_desc_div, #pillage_desc_div { width: auto !important; max-width: 86vw !important; left: 4vw !important; } /* ---- 13. jquery.dialog 模态框：限宽 + 按钮可点 ---- */ .xdsoft_dialog { max-width: 92vw !important; } .xdsoft_btn { min-height: 40px; padding: 0 16px; } .xdsoft_close { min-width: 40px; min-height: 40px; line-height: 40px; text-align: center; } /* ---- 14. 页面标题条：解除 #leftcontent .header 的 677px 固定宽 ---- */ /* (style.css / style_inner.css: width:677px 固定, 移动端横向撑破页面) */ #leftcontent .header { width: 100% !important; box-sizing: border-box; height: auto; min-height: 66px; margin-left: 0 !important; padding: 20px 10px 10px 12px !important; background-size: cover; /* 背景图随宽度缩放裁切, 不留白边 */ } /* ===================================================== Phase 3：高频页面信息架构重排 ===================================================== */ /* ---- 15. 固定宽度辅助类：允许收缩，永不超出容器 ---- */ /* common.css .w20~.w650 共 30+ 类；max-width 只在容器更小时生效，窄屏下自动收缩，不改变正常布局 */ .w20, .w25, .w30, .w35, .w40, .w50, .w60, .w65, .w70, .w80, .w90, .w100, .w120, .w130, .w140, .w150, .w160, .w170, .w180, .w190, .w200, .w210, .w230, .w250, .w280, .w300, .w320, .w355, .w370, .w380, .w400, .w430, .w450, .w500, .w650 { max-width: 100%; box-sizing: border-box; } /* 表单输入在窄屏下占满可用宽度，易于点按 */ input.w140, input.w150, input.w160, input.w170, input.w180, input.w190, input.w200, textarea.w140 { width: 100% !important; } /* ---- 16. 超宽数据表格：mobile.js 包裹 .mb_table_scroll 后横向滑动 ---- */ .mb_table_scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .mb_table_scroll table { max-width: none !important; min-width: 100%; } /* ---- 17. 页面头部重排（配合 mobile.js layoutHeader） ---- */ /* 第一行：logo(左) + webmenu 汉堡(右端) */ /* 第二行：logout / 宝石 / 金币 / 用户名 / 帐号设置 */ .mb_hide { display: none !important; } .mb_webmenu { float: right !important; margin: 4px 6px 0 0 !important; } .mb_webmenu #webmenu { font-size: 34px; } .mb_user_row { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; padding: 4px 6px 0; min-height: 32px; } .mb_user_row > div { float: none !important; margin: 0 !important; min-height: 32px; display: flex; align-items: center; } /* ---- 18. #web_menu_div 中的帐号设置/退出登录：仅移动端显示 ---- */ /* (这两项由 Header.ascx 直接写入; PC 端由文件顶部全局规则隐藏) */ #web_menu_div #marrla_btn_mb, #web_menu_div div[onclick*="logout.aspx"] { display: block !important; } /* ---- 19. 二级菜单行(.h45): 8 项一行显示（模拟/镶嵌/…/英雄） ---- */ /* 压缩字距与内边距 + flex 均分；nowrap+横滚兜底窄屏 */ .h45 { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-right: 6px !important; } .h45 > a { flex: 1 1 auto; text-align: center; } .menu_item { letter-spacing: 0px; width:auto; } /* ---- 20. 页面标题条隐藏 + 内容区收紧（Card/Consignment/Forge 等 28 页共用结构） ---- */ /* 隐藏页面大标题条(标题信息已在浏览器标题/导航中), 内容区按移动端收窄 */ .header.f16.color1 { display: none !important; } #contentwrap { margin: 0 !important; padding: 10px 4px 0 10px !important; box-sizing: border-box; } /* ---- 21. 模态弹层近全屏（经 ShowDiv 打开的 .popup_cont, JS 打 mb_modal_fs 类） ---- */ /* 上留20px / 下与底部菜单留20px(菜单约58px) / 左右各5px; X 仍在右上角; 主要内容垂直居中(内容超高时 margin:auto 自动回退为顶部对齐+滚动) */ .popup_cont.mb_modal_fs { position: fixed !important; top: 20px !important; bottom: 68px !important; left: 5px !important; right: 5px !important; width: auto !important; max-width: none !important; max-height: none !important; height: auto !important; margin: 0 !important; display: flex !important; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .popup_cont.mb_modal_fs > *:not(.popup_close) { margin: 34px 4px 34px 10px !important; } /* ---- 23. Item.aspx #enhanced_popup ---- */ /* 弹窗内联 min-width:600px 仍在, 窄屏必横向溢出 → 解除(仅移动端)。 (equip_list_div/item_list_div 的宽度覆盖已删: 两页布局已重构为 flex, 不再需要) */ #enhanced_popup { min-width: 0 !important; } #strategy_logo_div, #acc_setup_div, #logout_div { display: none; } #menu_btn_div { margin-left:50px; margin-top:0px; } }