全站通知：
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>
沪公网安备 31011002002714 号
