delta-force-guide-web/src/index.css

@layer theme, base, antd, components, utilities;

@import 'tailwindcss';

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#root {
  width: 100%;
}

.mod-codes-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .mod-codes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mod-codes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .mod-codes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nav-item {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, #22ffa7, transparent);
  transition: height 0.2s ease-in-out;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;

}

.nav-item:hover::after {
  height: 30%;
}

/* 激活状态效果 */
.nav-item.active::after {
  height: 30%;
}

/* 可选：激活+悬停效果 */
.nav-item.active:hover::after {
  opacity: 0.35;
}

.custom-btn-outlined {
  --ant-color-solid: #10E28C;
  /* 边框和文字颜色 */
  --ant-color-solid-hover: #2ee59d;
  --ant-color-solid-active: #0cb878;
}


.hex-bg {
  background-color: #1E1E1E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.3' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='fadeDown' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2339ff14' stop-opacity='1' /%3E%3Cstop offset='100%25' stop-color='%2339ff14' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23fadeDown)' stroke-width='0.5'%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546041,-0.85081805,0.85081805,0.52546041,-203.01888079,130.22116071)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.65208214,130.43446239)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.04868859,141.09544261)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.68192833,141.30866893)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.2853524,130.6476887)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3151986,141.52187999)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-190.86530846,152.18286021)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.49857872,152.39608653)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-203.44526451,151.88976939)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,152.72932323)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-197.30770653,163.1089619)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-184.99694603,163.40205272)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-172.3930642,163.69517406)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-165.94457787,130.86648448)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-178.84158104,174.24726756)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-166.23769921,174.68691905)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-160.08231896,163.69518931)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='matrix(0.52546006,-0.85081827,0.85081827,0.52546006,-159.78921288,141.71168407)'/%3E%3Cpath d='M225 131.704L230.452 134.852 230.452 141.148 225 144.296 219.548 141.148 219.548 134.852Z' transform='m
  background-size: 350px 350px;
  background-position: right -90px top -40px;
  background-repeat: no-repeat;
  margin: 0;

}

.nav-item:hover,
.nav-item.active {
  color: white;
}


/* LeftMiddleRightBox.css */
.lmr-container {
  display: flex;
  width: 100%;
  /* 可根据需要调整 */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background: '#555555';
  color: 'white';
  padding: '4px 12px';
  border-radius: '4px';
  font-size: '14px';
  font-weight: '500';
  letter-spacing: '0.5px';
}

/* 公共列样式：平均分配宽度，带有视觉区分 */
.lmr-left,
.lmr-middle,
.lmr-right {
  padding: 20px;
  transition: all 0.2s ease;
  height: 100%;
}

/* 为左右中区域添加微妙的背景色差异，便于区分 */
.lmr-left {
  flex: 1;
  background-color: '#555555';
  color: 'white';
  padding: '4px 12px';
  border-radius: '4px';
  font-size: '14px';
  font-weight: '500';
  letter-spacing: '0.5px';
  margin: auto;
}

.lmr-middle {
  flex: 3;
  background-color: '#555555';
  color: 'white';
  padding: '4px 12px';
  border-radius: '4px';
  font-size: '14px';
  font-weight: '500';
  letter-spacing: '0.5px';
}

.lmr-right {
  flex: 2;
  background-color: '#555555';
  color: 'white';
  padding: '4px 12px';
  border-radius: '4px';
  font-size: '14px';
  font-weight: '500';
  letter-spacing: '0.5px';
}

.content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
  border-radius: 12px;
  padding: 16px;
}


/* 响应式：小屏幕下自动转为垂直排列 */
@media (max-width: 768px) {
  .lmr-container {
    flex-direction: column;
    min-height: auto;
  }

  .lmr-left,
  .lmr-middle,
  .lmr-right {
    border-right: none;

  }

  .lmr-right {
    border-bottom: none;
  }

  .content-placeholder {
    min-height: 100px;
  }
}

.css-var-_r_1_.ant-collapse{
  --ant-collapse-header-bg:#1e1e1e;
  width: 90%;
  border: 0;
  margin-left: auto;
  margin-right: auto;
}

.ant-collapse-body{
  background: #1e1e1e;
}