369 lines
8.8 KiB
CSS
369 lines
8.8 KiB
CSS
/* 云顶之弈阵容推荐器样式 */
|
|
|
|
/* 滑块样式 */
|
|
.weight-slider {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
margin-top: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.noUi-connect {
|
|
background: #4f46e5; /* Indigo-600 */
|
|
}
|
|
|
|
.noUi-handle {
|
|
height: 16px !important;
|
|
width: 16px !important;
|
|
border-radius: 50%;
|
|
background: #4f46e5;
|
|
box-shadow: none;
|
|
border: 2px solid #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.noUi-handle:before,
|
|
.noUi-handle:after {
|
|
display: none;
|
|
}
|
|
|
|
/* 棋子卡片样式 */
|
|
.chess-card {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.375rem;
|
|
background-color: #f9fafb;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.chess-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* 悬停提示样式 */
|
|
.chess-item, .synergy-item {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
/* 活跃状态样式 */
|
|
.chess-item.tooltip-active, .synergy-item.tooltip-active {
|
|
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.4);
|
|
z-index: 5;
|
|
}
|
|
|
|
/* 增强提示框样式 */
|
|
#tft-tooltip {
|
|
transition: all 0.3s ease;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
|
transform-origin: top left;
|
|
animation: tooltipFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(79, 70, 229, 0.4) rgba(17, 24, 39, 0.2);
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
#tft-tooltip::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
#tft-tooltip::-webkit-scrollbar-track {
|
|
background: rgba(17, 24, 39, 0.1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#tft-tooltip::-webkit-scrollbar-thumb {
|
|
background-color: rgba(79, 70, 229, 0.4);
|
|
border-radius: 3px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
#tft-tooltip::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(79, 70, 229, 0.6);
|
|
}
|
|
|
|
/* 提示框内容淡入效果 */
|
|
#tft-tooltip .tooltip-content {
|
|
word-break: break-word;
|
|
opacity: 0;
|
|
animation: contentFadeIn 0.2s ease forwards;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
@keyframes contentFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes tooltipFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-5px) scale(0.97);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* 提示框中的费用标识 */
|
|
#tft-tooltip .cost-1 { border-left: 3px solid #94a3b8; } /* 1费 - 灰色 */
|
|
#tft-tooltip .cost-2 { border-left: 3px solid #65a30d; } /* 2费 - 绿色 */
|
|
#tft-tooltip .cost-3 { border-left: 3px solid #2563eb; } /* 3费 - 蓝色 */
|
|
#tft-tooltip .cost-4 { border-left: 3px solid #7e22ce; } /* 4费 - 紫色 */
|
|
#tft-tooltip .cost-5 { border-left: 3px solid #f59e0b; } /* 5费 - 金色 */
|
|
|
|
/* 提示框内交互元素样式 */
|
|
.chess-item-mini, .synergy-item-mini {
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.chess-item-mini:hover, .synergy-item-mini:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.chess-item-mini:hover::after, .synergy-item-mini:hover::after {
|
|
content: '查看详情';
|
|
position: absolute;
|
|
top: -18px;
|
|
right: 5px;
|
|
background: rgba(79, 70, 229, 0.9);
|
|
color: white;
|
|
font-size: 8px;
|
|
padding: 2px 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* 提示框中的各部分样式 */
|
|
#tft-tooltip .tooltip-content {
|
|
word-break: break-word;
|
|
padding-top: 5px;
|
|
padding-right: 36px; /* 为右侧关闭按钮留出空间 */
|
|
}
|
|
|
|
/* 关闭按钮样式 */
|
|
#tft-tooltip .tooltip-close-btn {
|
|
transition: all 0.2s ease;
|
|
opacity: 0.9;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#tft-tooltip .tooltip-close-btn:hover {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 特殊介绍文本样式 */
|
|
#tft-tooltip .skill-introduce,
|
|
#tft-tooltip .synergy-introduce {
|
|
border-left: 3px solid rgba(79, 70, 229, 0.7);
|
|
background-color: rgba(79, 70, 229, 0.1);
|
|
padding-left: 8px;
|
|
}
|
|
|
|
#tft-tooltip .loading-spinner {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 优化悬停标识 */
|
|
.chess-item::after, .synergy-item::after {
|
|
content: '?';
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: rgba(79, 70, 229, 0.9);
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
z-index: 10;
|
|
}
|
|
|
|
.chess-item:hover::after, .synergy-item:hover::after {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* 羁绊标签样式 */
|
|
.synergy-tag {
|
|
background-color: #e0e7ff;
|
|
color: #4338ca;
|
|
border-radius: 9999px;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 棋子标识 */
|
|
.chess-cost-1 { border-left: 3px solid #94a3b8; } /* 1费 - 灰色 */
|
|
.chess-cost-2 { border-left: 3px solid #65a30d; } /* 2费 - 绿色 */
|
|
.chess-cost-3 { border-left: 3px solid #2563eb; } /* 3费 - 蓝色 */
|
|
.chess-cost-4 { border-left: 3px solid #7e22ce; } /* 4费 - 紫色 */
|
|
.chess-cost-5 { border-left: 3px solid #f59e0b; } /* 5费 - 金色 */
|
|
|
|
/* 动画效果 */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.team-result {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.chess-list {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 激活状态样式 */
|
|
.synergy-weight-item.active,
|
|
.chess-weight-item.active {
|
|
background-color: #e0e7ff;
|
|
border-left: 3px solid #4f46e5;
|
|
padding-left: 5px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 移动设备上的提示框样式优化 */
|
|
@media (max-width: 768px) {
|
|
#tft-tooltip {
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(99, 102, 241, 0.5);
|
|
max-width: calc(100vw - 40px);
|
|
animation: mobileTooltipFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
max-height: 70vh;
|
|
/* 固定位置在屏幕中央 */
|
|
position: fixed;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%);
|
|
margin: 0 auto;
|
|
width: calc(100vw - 40px) !important;
|
|
}
|
|
|
|
#tft-tooltip .tooltip-close-btn {
|
|
width: 38px;
|
|
height: 38px;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
#tft-tooltip .tooltip-content {
|
|
margin-top: 10px;
|
|
padding-right: 20px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
/* 增大移动端触摸目标大小 */
|
|
.chess-item-mini, .synergy-item-mini {
|
|
padding: 12px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
/* 增加右侧间距，避免文本与按钮重叠 */
|
|
padding-right: 80px;
|
|
}
|
|
|
|
/* 移动端使用更明显的交互提示 */
|
|
.chess-item-mini::after, .synergy-item-mini::after {
|
|
content: '点击查看';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
color: white;
|
|
font-size: 10px;
|
|
background-color: rgba(79, 70, 229, 0.5);
|
|
padding: 3px 8px;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* 防止棋子费用与点击按钮重叠 */
|
|
.chess-item-mini .text-xs.px-1\.5.py-0\.5.bg-gray-600.rounded {
|
|
margin-right: 65px;
|
|
}
|
|
|
|
/* 防止羁绊类型与点击按钮重叠 */
|
|
.synergy-item-mini .bg-gray-600.text-xs.px-1\.5.py-0\.5.rounded {
|
|
margin-right: 65px;
|
|
}
|
|
|
|
/* 移动端提示框内部元素间距优化 */
|
|
#tft-tooltip .mb-2 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#tft-tooltip .mb-3 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
#tft-tooltip .p-2 {
|
|
padding: 10px;
|
|
}
|
|
|
|
/* 移动端动画效果 */
|
|
@keyframes mobileTooltipFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -45%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
/* 提示框内部滚动优化 */
|
|
#tft-tooltip::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
/* 移动端加载状态优化 */
|
|
#tft-tooltip .loading-spinner .animate-spin {
|
|
height: 45px;
|
|
width: 45px;
|
|
border-width: 3px;
|
|
}
|
|
|
|
#tft-tooltip .loading-spinner .text-xs {
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* 移动端表格布局优化 */
|
|
#tft-tooltip .grid.grid-cols-2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* 改进相关棋子列表显示 */
|
|
#tft-tooltip .grid.grid-cols-2.gap-1.mt-1 {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
} |