hanfuit
ee3e8d0ced
- #hd 与 #tabs 合并成 #topbar，标签在左、连接状态在右，内容区多出 22px - 赞助页改为关于页：介绍卡片 + 赞助我们/团队公众号组合面板，三张二维码同一行 - 二维码占位修复（img 在脚本前已 404，补 complete/naturalWidth 兜底） - 标签支持 #home/#char/#item/#about 直达 - 内容区底部 62→71，修正被日志栏遮住 9px 的问题
166 lines
6.5 KiB
CSS
166 lines
6.5 KiB
CSS
/* IE11 兼容：不用 CSS 变量、不用 flex、不用 grid。深色底 + 高对比文字。 */
|
||
html, body {
|
||
margin: 0; padding: 0; height: 100%;
|
||
background: #14161c; color: #d8dbe2;
|
||
font: 12px/1.5 "Microsoft YaHei", "SimSun", Tahoma, sans-serif;
|
||
overflow: hidden;
|
||
}
|
||
/* 顶部一行：左边页面切换，右边连接状态（绿点 + 文字） */
|
||
#topbar {
|
||
height: 32px; padding-left: 4px;
|
||
background: #191c24; border-bottom: 1px solid #2b3040;
|
||
overflow: hidden;
|
||
}
|
||
#tabs { float: left; }
|
||
#hd-s {
|
||
float: right; height: 31px; line-height: 31px;
|
||
padding: 0 12px; color: #8d94a6;
|
||
border-left: 1px solid #262b36;
|
||
}
|
||
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; margin-right: 6px; }
|
||
.dot.on { background: #4ec46a; }
|
||
.dot.off { background: #b04a4a; }
|
||
|
||
.tab {
|
||
display: block; float: left; padding: 0 14px;
|
||
height: 29px; line-height: 29px;
|
||
color: #98a0b3;
|
||
text-decoration: none; border-bottom: 2px solid transparent;
|
||
}
|
||
.tab:hover { color: #d8dbe2; }
|
||
.tab.on { color: #e8c979; border-bottom-color: #e8c979; background: #20242e; }
|
||
|
||
#body { position: absolute; top: 33px; bottom: 71px; left: 0; right: 0; overflow: auto; }
|
||
.pane { display: none; padding: 10px; }
|
||
.pane.on { display: block; }
|
||
|
||
table.kv { width: 100%; border-collapse: collapse; }
|
||
table.kv th {
|
||
text-align: left; width: 84px; color: #8d94a6; font-weight: normal;
|
||
padding: 4px 0; border-bottom: 1px solid #232734;
|
||
}
|
||
table.kv td { padding: 4px 0; border-bottom: 1px solid #232734; color: #dfe3ea; }
|
||
|
||
.sec {
|
||
margin: 12px 0 6px; color: #e8c979; font-size: 11px;
|
||
border-left: 3px solid #e8c979; padding-left: 6px; letter-spacing: 1px;
|
||
}
|
||
.cur {
|
||
padding: 8px; background: #1c2029; border: 1px solid #2b3040;
|
||
color: #9fd8a8;
|
||
}
|
||
.row { margin: 6px 0; }
|
||
.inp {
|
||
background: #0f1116; border: 1px solid #2f3547; color: #dfe3ea;
|
||
padding: 4px 6px; font: 12px "Microsoft YaHei", Tahoma, sans-serif;
|
||
width: 240px; outline: none;
|
||
/* 内嵌 IE 控件里输入法默认是关的，这里强制激活，否则只能打英文 */
|
||
ime-mode: active;
|
||
}
|
||
.inp:focus { border-color: #e8c979; ime-mode: active; }
|
||
input[type="text"], textarea { ime-mode: active; }
|
||
/* 搜索框用 textarea：MSHTML 里它的 IME 走编辑引擎，比 input 更容易触发候选框。
|
||
单行用法，所以要自己压高度、禁掉拉伸和平滚动条。 */
|
||
.inp.ta {
|
||
height: 26px; line-height: 18px; resize: none; overflow: hidden;
|
||
padding: 3px 6px; vertical-align: middle;
|
||
}
|
||
.inp.sm { width: 110px; }
|
||
.inp.xs { width: 60px; }
|
||
.inp.xs2 { width: 84px; }
|
||
select.inp { padding: 3px 2px; }
|
||
.inp[disabled] { opacity: .4; }
|
||
.lb { display: inline-block; width: 56px; color: #8d94a6; }
|
||
.btn {
|
||
background: #262c3a; border: 1px solid #39415a; color: #d8dbe2;
|
||
padding: 5px 12px; cursor: pointer; font: 12px "Microsoft YaHei", Tahoma, sans-serif;
|
||
margin-right: 6px;
|
||
}
|
||
.btn:hover { background: #303849; border-color: #4d5877; }
|
||
.btn.pri { background: #6b4f18; border-color: #a3781f; color: #ffe6ae; }
|
||
.btn.pri:hover { background: #7d5d1e; }
|
||
.btn[disabled] { opacity: .45; cursor: default; }
|
||
|
||
.list {
|
||
margin-top: 8px; max-height: 190px; overflow: auto;
|
||
border: 1px solid #2b3040; background: #101319;
|
||
}
|
||
/* 物品列表固定 6 行高度：行数再多也只占这一块，靠滚动 + 翻页看更多 */
|
||
.list.fixed { height: 156px; max-height: 156px; }
|
||
.li {
|
||
padding: 3px 8px; line-height: 20px; border-bottom: 1px solid #1c212b; cursor: pointer;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.li:hover { background: #1b2130; }
|
||
.li.on { background: #2a3550; color: #ffe6ae; }
|
||
.li .nm { color: #dfe3ea; }
|
||
.li .meta { color: #7c8496; font-size: 11px; margin-left: 6px; }
|
||
.empty { padding: 12px; color: #666e80; text-align: center; }
|
||
.dim { color: #7c8496; }
|
||
.pager { margin: 6px 0 2px; }
|
||
.btn.sm { padding: 3px 10px; font-size: 11px; }
|
||
.pg { color: #8d94a6; font-size: 11px; margin: 0 8px; }
|
||
|
||
#log {
|
||
position: absolute; bottom: 0; left: 0; right: 0; height: 62px;
|
||
background: #0d0f14; border-top: 1px solid #2b3040;
|
||
padding: 4px 8px; overflow: auto; font: 11px/1.45 Consolas, monospace;
|
||
color: #8d94a6;
|
||
}
|
||
#log .ok { color: #6fcf87; }
|
||
#log .err { color: #e07070; }
|
||
#log .tip { color: #e8c979; }
|
||
.hint { color: #666e80; font-size: 11px; margin-top: 6px; }
|
||
|
||
/* 背包页：刚发进去那一行的「新」标记 */
|
||
.li .new {
|
||
font-style: normal; font-size: 11px; padding: 0 4px; margin-left: 4px;
|
||
background: #e8c979; color: #1a1e27; border-radius: 2px;
|
||
}
|
||
|
||
/* 关于页：整体是一列居中内容（介绍卡片 + 组合面板），宽度固定 534 */
|
||
/* 关于页整块在可视区里垂直居中：绝对定位 + translateY（IE11 支持 transform） */
|
||
#pane-about.on { display: block; position: relative; height: 100%; box-sizing: border-box; }
|
||
#pane-about .about-inner {
|
||
position: absolute; top: 50%; left: 10px; right: 10px;
|
||
-ms-transform: translateY(-50%); transform: translateY(-50%);
|
||
}
|
||
.about-card {
|
||
width: 534px; margin: 0 auto; padding: 10px 12px; box-sizing: border-box;
|
||
background: #1a1e27; border: 1px solid #2b3040;
|
||
}
|
||
.about-name { color: #e8c979; font-size: 14px; letter-spacing: 1px; }
|
||
.about-line { color: #8d94a6; margin-top: 4px; }
|
||
|
||
.box { margin-top: 12px; border: 1px solid #2b3040; background: #171b23; }
|
||
/* 两个分组框合成一个整体面板：外框统一，中间一条竖线分隔 */
|
||
.cols {
|
||
width: 534px; margin: 12px auto 0;
|
||
border: 1px solid #2b3040; background: #171b23; overflow: hidden;
|
||
}
|
||
.cols .box { margin-top: 0; min-height: 264px; float: left; border: 0; background: transparent; box-sizing: border-box; }
|
||
.cols .box-l { width: 353px; }
|
||
.cols .box-r { width: 179px; border-left: 1px solid #3f4759; background: #14171d; }
|
||
.box-hd {
|
||
height: 26px; line-height: 26px; padding: 0 10px;
|
||
background: #1d2230; border-bottom: 1px solid #2b3040;
|
||
color: #e8c979; letter-spacing: 1px;
|
||
}
|
||
.box-bd { padding: 10px; overflow: hidden; }
|
||
.box-note { clear: both; color: #666e80; font-size: 11px; padding-top: 8px; }
|
||
|
||
.qr-card {
|
||
float: left; width: 158px; margin: 0 8px 0 0; box-sizing: border-box;
|
||
background: #1a1e27; border: 1px solid #2b3040; padding: 8px;
|
||
}
|
||
.qr-title { color: #e8c979; letter-spacing: 1px; margin-bottom: 8px; }
|
||
.qr-box {
|
||
width: 140px; height: 140px; position: relative; overflow: hidden; box-sizing: border-box;
|
||
background: #0f1116; border: 1px dashed #3a4154; padding: 3px; text-align: center;
|
||
}
|
||
.qr-box img { display: block; width: 132px; height: 132px; background: #fff; }
|
||
.qr-miss { display: none; padding-top: 44px; color: #666e80; line-height: 1.8; }
|
||
.qr-box.miss .qr-miss { display: block; }
|
||
.qr-path { color: #4c5365; font-size: 11px; margin-top: 2px; }
|
||
|