diff --git a/world.html b/world.html index 6272fa1..0e171cc 100644 --- a/world.html +++ b/world.html @@ -185,25 +185,27 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa /* 场景悬浮工具条:浮于场景画面、紧贴顶部栏下方 */ #sceneToolbar{ position:fixed; top:calc(58px + env(safe-area-inset-top) + 12px); right:max(18px, env(safe-area-inset-right)); z-index:90; - display:grid; grid-template-columns:repeat(3,46px); grid-auto-rows:46px; gap:10px; pointer-events:auto; + display:grid; grid-template-columns:repeat(3,64px); grid-auto-rows:72px; gap:10px; pointer-events:auto; padding:11px; border-radius:16px; background:rgba(12,18,32,.78); border:1px solid rgba(139,92,246,.35); backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); transition:padding .2s, border-radius .2s; } -/* 折叠态:只显示汉堡按钮(单列) */ -#sceneToolbar.collapsed{ grid-template-columns:46px; grid-auto-rows:46px; } -#sceneToolbar.collapsed .top-icon:not(#btnToolbarToggle){ display:none; } +/* 折叠态:显示汉堡按钮 + 5 个核心按钮(任务/包裹/好友/排行榜/成就),2 列布局 */ +#sceneToolbar.collapsed{ grid-template-columns:repeat(2,64px); grid-auto-rows:72px; } +#sceneToolbar.collapsed .top-icon:not(.toolbar-core):not(#btnToolbarToggle){ display:none; } .top-icon{ - position:relative; width:46px; height:46px; border-radius:13px; flex-shrink:0; - display:flex; align-items:center; justify-content:center; + position:relative; width:64px; height:64px; border-radius:13px; flex-shrink:0; + display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.13); - color:#e6f0fb; font-size:22px; cursor:pointer; transition:.18s; pointer-events:auto; + color:#e6f0fb; font-size:20px; cursor:pointer; transition:.18s; pointer-events:auto; text-shadow:0 1px 3px rgba(0,0,0,.45); } .top-icon:hover{background:linear-gradient(135deg, rgba(139,92,246,.28), rgba(74,175,255,.22)); border-color:rgba(139,92,246,.55); color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(80,120,255,.35);} .top-icon:active{transform:translateY(0);} -.top-icon img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));pointer-events:none;} +.top-icon img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));pointer-events:none;} +.top-icon svg{width:28px;height:28px;object-fit:contain;pointer-events:none;} +.top-icon-label{font-size:10px;color:#b0c4de;line-height:1;text-align:center;white-space:nowrap;pointer-events:none;} .top-icon-badge{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; font-size:11px; font-weight:800; color:#fff; background:#ef4444; border-radius:999px; @@ -211,7 +213,6 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa } .top-icon-badge[hidden]{display:none !important;} .top-icon.active{outline:2px solid rgba(255,255,255,.75); box-shadow:0 0 18px rgba(140,180,255,.6); border-color:rgba(139,92,246,.7);} -.top-icon svg{width:56%;height:56%;object-fit:contain;pointer-events:none;} .toolbar-toggle{ background:rgba(139,92,246,.2); border-color:rgba(139,92,246,.5); color:#c4b5fd; } .toolbar-toggle:hover{ background:linear-gradient(135deg, rgba(139,92,246,.4), rgba(74,175,255,.3)); border-color:rgba(139,92,246,.7); color:#fff; } @@ -759,18 +760,24 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa #navControls{bottom:calc(96px + env(safe-area-inset-bottom));right:14px; grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:6px;} #navControls button{width:60px;height:60px;font-size:24px;border-radius:15px;} - #sceneToolbar{right:12px;gap:7px;padding:9px 10px;grid-template-columns:repeat(3,40px);grid-auto-rows:40px;} - #sceneToolbar.collapsed{grid-template-columns:40px;grid-auto-rows:40px;} - #sceneToolbar .top-icon{width:40px;height:40px;font-size:19px;} + #sceneToolbar{right:12px;gap:7px;padding:9px 10px;grid-template-columns:repeat(3,52px);grid-auto-rows:58px;} + #sceneToolbar.collapsed{grid-template-columns:repeat(2,52px);grid-auto-rows:58px;} + #sceneToolbar .top-icon{width:52px;height:52px;font-size:17px;} + #sceneToolbar .top-icon img, + #sceneToolbar .top-icon svg{width:22px;height:22px;} + #sceneToolbar .top-icon-label{font-size:9px;} } @media (max-width:420px){ #topBar .title .worldNameWrap{display:none;} #bottomBar .bb-btn{padding:7px 9px;font-size:11px;} #worldExpBarWrap{width:280px;gap:5px;} #worldExpBarWrap .we-title{display:none;} - #sceneToolbar{right:8px;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(3,34px);grid-auto-rows:34px;} - #sceneToolbar.collapsed{grid-template-columns:34px;grid-auto-rows:34px;} - #sceneToolbar .top-icon{width:34px;height:34px;font-size:16px;} + #sceneToolbar{right:8px;gap:5px;padding:7px 8px;top:calc(58px + env(safe-area-inset-top) + 6px);grid-template-columns:repeat(3,46px);grid-auto-rows:52px;} + #sceneToolbar.collapsed{grid-template-columns:repeat(2,46px);grid-auto-rows:52px;} + #sceneToolbar .top-icon{width:46px;height:46px;font-size:15px;} + #sceneToolbar .top-icon img, + #sceneToolbar .top-icon svg{width:20px;height:20px;} + #sceneToolbar .top-icon-label{font-size:8px;} } /* ===== 我的天赋面板(顶栏 🌟 按钮 → 居中 modal) ===== */ @@ -953,23 +960,77 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +