本WIKI编辑权限开放,正由 恋与深空Evol攻略组 搭建基础框架ing,期待更多猎人加入WIKI建设!
反馈留言 • 收藏方法 • 加入我们
全站通知:
Widget:属性计算器/css
刷
历
编
跳到导航
跳到搜索
<style>
@media (max-width: 768px) { #app { margin: 0 -50; } } #app { position: relative; padding: 0 10px 10px 10px; font-size: 20px; color: #322d32; }
.gradient-line{ width: calc(100% - 20px); /* 自动匹配宽度 */ height: 3px; background: linear-gradient(to right, transparent, #A8A9B0, transparent); /* 两端渐变效果 */ margin: 0; } .tab-container{ margin-left: calc((100% - 600px) / 2); margin-right: calc((100% - 600px) / 2); width: 600px; text-align: center; } .tab button{ margin:0 5px; } .memory-box { background-image: url('https://patchwiki.biligame.com/images/lysk/b/b9/c0jiev3641quav9mhmhmpum5kyoxnid.png'); background-position-x: 10%; background-position-y: 10%; background-repeat: no-repeat; background-size: cover; /*background: linear-gradient(150deg, rgba(217, 216, 221, 1) 0%, rgba(120, 120, 120, 0) 32%, rgba(255, 255, 255, 0.9) 100%);*/ border-radius: 5px; position: relative; margin-bottom:10px; margin-top: 10px; width: 100%; padding:10px; } .memory-box img{ width: 100%; height: 100%; } .core-box { background-image: url('https://patchwiki.biligame.com/images/lysk/b/b9/c0jiev3641quav9mhmhmpum5kyoxnid.png'); background-position-x: 10%; background-position-y: 10%; background-repeat: no-repeat; background-size: cover; /*background: linear-gradient(150deg, rgba(217, 216, 221, 1) 0%, rgba(120, 120, 120, 0) 32%, rgba(255, 255, 255, 0.9) 100%);*/ border-radius: 5px; position: relative; margin-bottom: 10px; padding: 10px 20px 10px 20px; width: 100%; } .black-care .flex-row-c { white-space: nowrap; } .memory-input { display: flex; margin-left:10px; } .button-box { position: relative; width: 60px; cursor: pointer; }
.button-box img { width: 100%; display: block; margin-bottom: -10px; } .button-box .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6f6e74; pointer-events: none; }
td{ margin-left: 10px; vertical-align: top; /* 垂直方向顶头 */ } input { border: 0; border-radius: 5px; max-width: 100px; } .level-input{ text-align: center; width: 60px; height: 25px; padding-top: 0; padding-bottom: 0; font-size: 18px; color: white; background: url('https://patchwiki.biligame.com/images/lysk/9/9f/4iicl3uii5shqgbplombryaw02r1w4f.png'); background-position: center; background-size: contain; background-repeat: no-repeat; border: none;
} select { margin: 0; height: 100%; position: relative; /*background-color: #00000033;*/ background-color: transparent; border-radius: 20px; border: 1.5px solid #322d32 ; font-size: 18px; color: #322d32; text-align: center; vertical-align: middle; } .flex-container { display: flex; align-items: center; gap: 5px; } .core-box td span { display: block; /* 使每个span占据一整行 */ white-space: nowrap; } .core-header{ background-image: url('https://patchwiki.biligame.com/images/lysk/3/39/hv3uusv633k4cjyxufi125jzmp7pfmu.png'); background-size: cover; background-repeat: no-repeat; border: none; color: #322d32; /* 文本颜色 */ padding: 0 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 20; /* 字体大小 */ margin: 4px 2px; transition: all 0.3s; /* 平滑过渡效果 */ }
.level-input-container { position: relative; display: inline-block; /* 保持元素在行内显示,避免换行 */ width: 60px; margin-bottom: -15px; }
.level-input-container img { width: 100%; height: auto; /* 保持图片的原始宽高比 */ display: block; /* 避免底部出现空白 */ } .overlay-core { position: absolute; top: -15%; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #6f6e74; /* 文字颜色 */ pointer-events: none; }
.core-input{ margin-top: 10px; width: 100px;
} .left-align{ text-align: left; margin-left: 10px; }
.memory-image { width: 100px; height: 100px; object-fit: cover; display: block; margin: auto; } .image-button-cell { width: 100px; height: 100px; vertical-align: middle; }
.memory-box td { padding: 5px; text-align: left; vertical-align: middle; white-space: nowrap; } .filter-box{ background-color: rgb(217,216,221); max-height: 600px; overflow-y: auto; border-radius: 10px; text-align: center; } .filter-box table{ margin: 10px; width: calc(100% - 20px); }
/* 确保每行最多显示五个图片 */ .filter-box tr { display: flex; flex-wrap: wrap; justify-content: start; } .attributes-container { display: flex; /* 水平布局 */ flex-direction: row; }
.divider { height: 2px; background-color: #8D8F9B; width: 100%; margin-left: 20px; } .content-container { display: flex; flex-direction: column; /* 垂直堆叠 */ } .header-container { display: flex; align-items: center; /* 垂直居中对齐 */ width: 100%; font-size:22px; white-space: nowrap; margin-bottom: 10px; color: #322d32; }
.header-container img{ height: 20px; width: 20px; background-size: cover; margin-top: -4px; margin-left: 4px; margin-right: 10px; }
.select-wrapper { position: relative; /* 设置相对定位 */ display: inline-block; }
.select-custom { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 20px; width: 80%; cursor: pointer; font-size: 20px; } .select-custom-table { -webkit-appearance: none; /* 移除默认下拉箭头 */ -moz-appearance: none; appearance: none; padding-right: 18px; width: 100%; /* 保证`select`填充整个容器 */ cursor: pointer; font-size: 18px; border: none; height: 100%; box-sizing: border-box; border: none; }
.select-arrow { position: absolute; top: 0; left: 70px;; width: 20px; height: 100%; background: url('https://patchwiki.biligame.com/images/lysk/7/70/6xkyttrb1tculuaxrcf5h4v9k6id9dh.png') no-repeat center center; /* 设置背景图像 */ pointer-events: none; } .select-arrow-table { position: absolute; top: 2px; /* 定位到容器顶部 */ left: 70px;; /* 定位到容器右边 */ width: 20px; /* 箭头宽度 */ height: 100%; /* 和`select`一样高 */ background: url('https://patchwiki.biligame.com/images/lysk/f/f8/eoe3ucajuzdm371hdx9zot7fgpynzav.png') no-repeat center center; /* 设置背景图像 */ pointer-events: none;
}
.select-arrow-long { position: absolute; top: 5px; left: 120px;; width: 20px; height: 100%; background: url('https://patchwiki.biligame.com/images/lysk/7/70/6xkyttrb1tculuaxrcf5h4v9k6id9dh.png') no-repeat center center; /* 设置背景图像 */ pointer-events: none; } .select-arrow-short { position: absolute; top: 1px; left: 50px;; width: 20px; height: 100%; background: url('https://patchwiki.biligame.com/images/lysk/7/70/6xkyttrb1tculuaxrcf5h4v9k6id9dh.png') no-repeat center center; /* 设置背景图像 */ pointer-events: none; } /* 用于定位和大小控制 */ .checkbox-container { position: relative; display: inline-block; width: 20px; /* 图片大小 */ height: 20px; }
/* checkbox,透明度设置为0 */ .custom-checkbox { opacity: 0; position: absolute; z-index: -1; /* 确保标签在前面 */ }
.checkbox-label { background-image: url('https://patchwiki.biligame.com/images/lysk/4/48/hnop2x6b0ea3491iw4mw74vquvhtw6f.png'); /* 默认未选中的图片 */ display: inline-block; width: 100%; height: 100%; cursor: pointer; /* 模仿原生控件的光标效果 */ background-size: cover; /* 确保图片覆盖整个容器 */ margin-bottom: -2px; }
/* 当 checkbox 被选中时,改变背景图 */ .custom-checkbox:checked + .checkbox-label { background-image: url('https://patchwiki.biligame.com/images/lysk/e/ea/b5u53pd974g2vwcotl63tnrb570pszb.png'); /* 选中的图片 */ }
.underline { border-bottom: 2px solid #ACADB4; }
.filter-box table{ border-collapse: separate; /* 用于在td之间添加间隔 */ border-spacing: 0; /* 移除默认的间距 */ min-width: 600px; } tr.rightline td { position: relative; /* 确保 td 内部可以绝对定位元素 */ }
tr.rightline td::after{ position: absolute; content: ; top: 21%; width: 1.5px; height: 55%; background-color: #AEAFB6; margin-left:17px; }
.rightline td{ margin-left: 0; }
.image-cell { position: relative; }
.image-container { position: relative; width: 100%; height: auto; display: inline-block; }
.image-overlay { position: absolute; top: -10%; left: -10%; right: 0; bottom: 0; background-image: url('https://patchwiki.biligame.com/images/lysk/a/af/1y385o0ewqa50kfvwaavo5k252zte6x.png'); display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ text-align: center; } .selected { background-image:url('https://patchwiki.biligame.com/images/lysk/4/43/3o2qqv407gi0m1y3b8hg8ev4sia9ovf.png'); color: white; /* 选中状态的文本颜色 */ background-repeat: no-repeat; background-position: center -2px; }
.selected-chart{ background-image: url('https://patchwiki.biligame.com/images/lysk/6/64/2utgdc9ducahv2dzpa89tzawbij9xpw.png'); background-size: cover; background-position: center; color: white; } .selected-chart::after{ position: absolute; border-right:2px solid white; } .filter-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ z-index: 100; /* 确保覆盖层在表格之上 */ } .filter-box { position: relative; z-index: 101; /* 确保表格在覆盖层之上 */ }
.chart-icon{ vertical-align: middle; height: 50%; width: auto; } .tab button{ position: relative; background-position: center; /* 使背景图居中 */ background-size: cover; /* 覆盖整个按钮,保持图像的比例 */ background-repeat: no-repeat; /* 不重复背景图 */ width: 80px; /* 根据需要调整宽度 */ height: 80px; /* 根据需要调整高度 */ border: none; /* 去除边框 */ cursor: pointer;
} .tab button::after { content: ; position: absolute; width: 90px; height: 90px; border: none; top: -5px; left: -5px; right: 0; bottom: 0; background-image: url('https://patchwiki.biligame.com/images/lysk/a/af/1y385o0ewqa50kfvwaavo5k252zte6x.png'); z-index: 1; background-size: cover; /* 背景图覆盖整个按钮 */ background-repeat: no-repeat; /* 不重复背景图 */ background-origin: content-box; } .no-border{ border:none; }
td,th{ min-width: 100px; }
table input{ background-color: transparent; } /* 移除select元素的默认聚焦轮廓 */ select:focus { outline: none; }
/* 可选:如果select元素有阴影,也可以移除 */ select:focus { box-shadow: none; } /* 隐藏 Chrome, Safari, Edge, IE 的箭头 */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* 隐藏 Firefox 的箭头 */ input[type="number"] { -moz-appearance: textfield; }
.number-input { display: flex; align-items: center; }
.number-input input[type="number"] { /* 输入框样式 */ border: 1px solid #ccc; padding: 8px; text-align: center; width: 80px; /* 根据需要调整 */ }
input:focus { outline: none; box-shadow: none; } .ul-container { list-style-type: none; /* 移除列表点 */ padding: 0; /* 移除默认的内边距 */ display: flex; /* 使用 Flexbox 布局 */ flex-wrap: wrap; /* 允许内容换行 */ justify-content: space-between; /* 分布空间 */ }
.li-item { width: 48%; /* 每个列表项占据一半的宽度,留一点空间避免换行问题 */ margin-bottom: 10px; /* 为列表项添加一些底部间距 */ } .content-container { background-image: url('https://patchwiki.biligame.com/images/lysk/b/b9/c0jiev3641quav9mhmhmpum5kyoxnid.png'); background-position-x: 10%; background-repeat: no-repeat; background-size: cover; /*background: linear-gradient(150deg, rgba(217, 216, 221, 1) 0%, rgba(120, 120, 120, 0) 32%, rgba(255, 255, 255, 0.9) 100%);*/ border-radius: 5px; position: relative; margin-bottom: 10px; margin-top: 10px; padding: 10px 20px 10px 20px; width: 100%; } .team-container{ background-position-x: 20%; } .team-Ties{ background-image: url('https://patchwiki.biligame.com/images/lysk/6/6f/4m9m4ec0yfjvgs5s8jc38xishpwkhlq.png'); background-repeat: no-repeat; background-size: cover; } .divider-main{ background: linear-gradient(to right, transparent, #737684, transparent); /* 两端渐变效果 */ width: 100%; height: 3px; } .divider-seg { width: 530px; /* 自动匹配宽度 */ height: 3px; margin: 0; display: flex; margin-left: calc((100% - 530px) / 2); margin-right: calc((100% - 530px) / 2); } .divider-segment { flex: 1; } .divider-segment { margin-right: 6px; /* 为除最后一个外的所有分割线添加右侧间隔 */ }
.divider-segment:last-child { margin-right: -3px; /* 移除最后一个分割线元素的右侧间隔 */ }
.divider-segment.active { background-color: #EFD9BF; /* 选中页签时的分割线颜色 */ }
</style>