bluenote/src/app.less

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './styles/_vars.less';
@import './styles/markdown.less';

/* 确保变量定义在全局作用域 */
/* 为 RootPortal 容器单独定义变量 */
:root, .taro-portal-container, page, view  {
  font-family: PingFangSC-Regular;
  --color-primary: #327BF9;
  --color-primary-rgb: 49, 124, 250;
  --color-primary-light: rgba(49, 124, 250, 0.1);
  --color-primary-dark: #1E6FF8;
  --color-text-primary: #262626;
  --color-bg-primary: #F4F9FF;
  --color-bg-gray: #F4F9FF;
  --color-gray-1: rgba(17, 17, 17, 0.03); // 未选中按钮背景
  --color-gray-2: rgba(17, 17, 17, 0.05); // 骨架图卡片模块
  --color-gray-3: rgba(17, 17, 17, 0.25); // 分割线，未编辑边框，禁用文本
  --color-gray-4: rgba(17, 17, 17, 0.45); // 辅助文本，输入文本，仅展示，暗文本
  --color-gray-5: rgba(17, 17, 17, 0.65); // 副标题，描述文本
  --color-gray-6: rgba(17, 17, 17, 0.85); // 正文
  --color-gray-7: rgba(17, 17, 17, 1); // 特殊标题，主标题，正文
  --gutter-size: 16px;
}


.taro-portal-container-ztop{
  z-index: 10000;
}

.w-full{
  box-sizing: border-box;
}
.pingfang-SC-Medium{
  font-family: PingFangSC-Medium;
}
.pingfang-SC-Semibold{
  font-family: PingFangSC-Semibold;
}
.global-color{
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.global-color-new{
  .global-color{
    color: yellowgreen;
  }
}

.primary-color{
  color: var(--color-primary, #317CFA);
}
.primary-color-dark{
  color: var(--color-primary-dark);
}
.text-primary-color{
  color: var(--color-primary, #317CFA);
}
.bg-primary-color {
  background-color: var(--color-bg-primary, #317CFA);
}
.warn-color{
  color: #EE4949;
}


.global-page-bg{
  height: 652px;
  background: var(--color-bg-gray);
}

.global-linear-gradient-bg{
  position: relative;
  height: 652px;
  background: linear-gradient(176.35deg, #E6F1FF 18.69%, rgba(255, 255, 255, 0) 113.37%);
  background-size: 100% 600px;
  background-repeat: no-repeat;
}

.global-gray-bg{
  background-color: var(--color-bg-gray);
}
.bg-primary-color{
  background-color: var(--color-bg-primary);
}


// text

.label-text{
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  line-height: 22px;
}


// buttons

.button-rounded-big{
  display: flex;
  height: 48px;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primary);
  border-radius: 8px;
  overflow: hidden;
  color: white;
}

.button-plain{
  .button-rounded-big();
  background-color: white;
}


.wemeta-button{
  .button-rounded-big();
  border-radius: 12px;
}


.button-rounded{
  display: flex;
  padding: 14px;
  align-items: center;
  word-break: keep-all;
  justify-content: center;
  border-radius: 8px;
  background-color: white;
  color: rgba(#000, .85);
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  transition: background-color .2s;
}

.button-rounded.actived{
  background-color: #000;
  color: #FFF;
}
.button-rounded.button-primary{
  color: white;
  font-size: 14px;
  background-color: var(--color-primary);
}

.button-rounded.button-primary-light{
  font-size: 14px;
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), .1);
}
.button-text-medium.button-primary{
  font-size: 12px;
}
.button-text-medium.button-primary-light{
  font-size: 12px;
}
.button-border-primary{
  border: 1px solid #327BF9;
}
.button-inline-flex{
  display: inline-flex;
  padding: 14px 32px;
}


.button-warn{
  .warn-color();
}


// /* 竖屏且宽度<390px */
// @media (orientation: portrait) and (max-width: 390px) {
//   .button-rounded.button-primary {

//   }
// }


// 社交媒体icon
.social-media-icon{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-size: 100%;
}
.social-media-link{
  .social-media-icon();
  background-image: url(@linkUrl);
}
.social-media-wechat{
  .social-media-icon();
  background-image: url(@wechatUrl);
}

.social-media-shiping{
  .social-media-icon();
  background-image: url(@shipingUrl);
}

.social-media-shipingVideo{
  .social-media-icon();
  background-image: url(@shipingVideoUrl);
}
.component-icon-tel{
  .social-media-icon();
  background-image: url(@tel);
}
.component-icon-address{
  .social-media-icon();
  background-image: url(@local);
}

// 空气按钮分享
.share-button{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: transparent;
}

.full-button-rounded{
  display: flex;
  width: 100%;
  padding: 17px 10px;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primary);
}

.popup-close-button{
  width: 36px;
  height: 36px;
  background: url(https://cdn.wehome.cn/cmn/png/116/META-H8UKVHWU-K4SOR0KW954A0B7Q6JXJ2-5SZANE1M-H8.png) no-repeat;
  background-size: 36px 36px;
}


// 空数据提示 ui
// 飞机
.data-empty, .data-empty-plane{
  width: 120px;
  height: 120px;
  background-image: url(https://cdn.wehome.cn/cmn/png/8/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-OWTHCUCM-WC.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
// 放大镜
.data-empty-search{
  background-image: url(https://cdn.wehome.cn/cmn/png/137/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-EZTHCUCM-YC.png);
}
// 空白写字板
.data-empty-whiteboard{
  background-image: url(https://cdn.wehome.cn/cmn/png/87/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-QYTHCUCM-XC.png);
}
// 三角牌感叹号
.data-empty-triangle{
  background-image: url(https://cdn.wehome.cn/cmn/png/63/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-NYTHCUCM-SC.png);
}
// 两个对话框
.data-empty-chat{
  background-image: url(https://cdn.wehome.cn/cmn/png/30/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-RYTHCUCM-TC.png);
}
// 破碎文件夹
.data-empty6{
  background-image: url(https://cdn.wehome.cn/cmn/png/82/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-Z5UHCUCM-UC.png);
}
// 空白文件盒
.data-empty-box{
  background-image: url(https://cdn.wehome.cn/cmn/png/69/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-36UHCUCM-ZC.png);
}




// 居正中
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

// ios 底部安全区

.bottom-bar{
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-bg-primary);
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}



//global text

.gradient-text{
  color: transparent; /* 文字透明以显示背景渐变 */
  display: inline-block; /* 确保渐变生效 */
  background: linear-gradient(279.56deg, #317CFA 13.29%, #FF2DF8 92.34%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradientMove 3s linear infinite;
}
@keyframes gradientMove {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

// 边框相关
.border-bottom1-gray{
  border-bottom: 1px solid rgba(#000, .05);
}
.border-top1-gray{
  border-top: 1px solid rgba(#000, .05);
}


// 灰底圆框
.rounded-card{
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background-color: rgba(#000, .03);
}
.rounded-card-actived{
  .rounded-card();
  background-color: rgba(var(--color-primary-rgb), .06);
  border: 1px solid var(--color-primary);
}

.rounded-container-header{
  width: 100%;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding-top: 20px;
  border-top-width: 1px;
  border-top: 1px solid #FFFFFF;
  backdrop-filter: blur(38px);
}


/* 保持和之前相同，仅需确保以下类名存在 */
.picker-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 3000;
  box-shadow: 0px -2px 20px #999;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.picker-item {
  text-align: center;
  line-height: 50px;
}

// 组件卡片空数据显示
.component-card-empty{
  width: 100%;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  background-color: rgba(240, 240, 240, 1);

  .component-card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
  }
  // 小蓝本灰色 logo
  .component-card-empty-figure{
    width: 68px;
    height: 24px;
    background: url(https://cdn.wehome.cn/cmn/png/67/META-H8UKVHWU-1JNUXQBKDFMDLDZZ7BUW3-68R2H1CM-ZU2.png) no-repeat;
    background-size: 100%;
  }
  .component-card-empty-tips{
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color:rgba(#000, .25);
  }
}

// 智能体内容容器毛玻璃效果，距顶部距离 240 ，留出空间显示形象, 最小高度 600px 以防止没有顶到底部
.blur-rounded-container{
  margin-top: 296px;
  width: 100%;
  min-height: calc(100vh - 240px);
  box-sizing: border-box;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  // background: rgba(#FFF, .45);
  backdrop-filter: blur(38px);
  background: linear-gradient( rgba(#fff, .45) 1%, rgba(#fff, 0) 100%);
}

.certification-container{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(#31BE59, .1);
  width: 20px;
  height: 16px;
  border-radius: 4px;
}