dtScreen/src/styles/base.css

/* ==========================================
   基础重置与全局变量
========================================== */

@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('../assets/fonts/YouSheBiaoTiHei_Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #050b1e;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { 
  box-sizing: border-box; 
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

:root {
  --title-font-family: 'YouSheBiaoTiHei';
  --c-primary: #2bdcff;
  --c-border: #3D72B8;
  --c-btn: #06378E;
  --radius: 8px;
  --fs-title: clamp(18px, 1.4vw, 28px);
  --fs-base: clamp(12px, 0.95vw, 16px);
}

/* ==========================================
   全局工具类 (Utility Classes)
========================================== */
/* 通用地图底层容器样式 */
.map-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 通用按钮样式清除 */
.btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

/* 忽略按钮：低调的文字按钮 */
.btn-ignore {
    background-color: #0D2244;
    color: #ffffff;
}

.btn-ignore:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* 查看按钮：科技感蓝色渐变边框按钮 */
.btn-view {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.3) 100%);
    box-shadow: inset 0 0 8px rgba(24, 144, 255, 0.2);
}

.btn-view:hover {
    background: linear-gradient(180deg, rgba(24, 144, 255, 0.2) 0%, rgba(24, 144, 255, 0.5) 100%);
    box-shadow: inset 0 0 12px rgba(24, 144, 255, 0.4);
    border-color: #32F6F8;
}

.menu-scroll-view {
  height: 700px !important;
  overflow: auto;
  background: rgba(17,36,70,0.9);
  border: none;
  outline: 2px solid #3760A9;
  outline-offset: -2px;
}

/* ==========================================
   全局滚动条美化 (大屏科技感风格)
========================================== */
::-webkit-scrollbar {
  width: 0px;  /* 如果你想显示滚动条，可以改为 6px 或 8px */
  height: 0px; 
}

::-webkit-scrollbar-track {
  background: rgba(15, 34, 67, 0.3);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); 
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(31, 206, 251, 0.2) 0%, rgba(0, 229, 255, 0.6) 100%);
  border: 1px solid rgba(31, 206, 251, 0.4); 
  border-radius: 4px; /* 建议加个圆角更美观 */
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(31, 206, 251, 0.5) 0%, rgba(0, 229, 255, 0.9) 100%);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.8); 
  border-color: rgba(31, 206, 251, 0.8);
}

::-webkit-scrollbar-button {
  display: none; 
}

::-webkit-scrollbar-corner {
  background: transparent; 
}