variables.css

@charset "UTF-8";
/* stylelint-disable */

:root {
  /* 
  * 红、绿、蓝色一般用于线条或 icon，如果要应用为文字则需要减少透明度10%，
  * 如蓝色文字 color(var(--blue) l(-10%)) ，l 表示 lightness
  */
  --blue: var(--customBlue, #23b8ff);
  --green: var(--customGreen, #08cb6a);
  --red: var(--customRed, #ff6923);
  --purple: var(--customPurple, #3461fe); /* 品牌紫色 */
  --primary: var(--customPrimary, #08cb6a); /* 品牌色 */

  --gray: var(--customGray, #777);
  --grayLight:var(--customGrayLight, #bbb);
  --grayBg: var(--customGrayBg, #eee);
  --grayBgLight:var(--customGrayBgLight, #f4f4f4);
  --grayLine: var(--customGrayLine, #ddd);

  --colorLink: var(--customColorLink, color(var(--primary) l(-10%)));
  --colorLinkHover: var(--customColorLinkHover, color(var(--colorLink) alpha(-10%)));
  --colorOverlay: var(--customColorOverlay, rgba(0, 0, 0, .5));
  --colorError: var(--customColorError, var(--red)); /* 和红色一致 */
  --colorSuccess: var(--customColorSuccess, var(--green)); /* 和绿色一致*/

  --zIndexHeader: var(--customZIndexHeader, 1000);
  --zIndexFooter: var(--customZIndexFooter, 2000);
  --zIndexPopup: var(--customZIndexPopup, 3000);
  --zIndexOverlay: var(--customZIndexOverlay, 4000); /* 默认高于header和footer部分 */
}
/* 该方式可能会被废弃，所以不用
** :root {
**   --ellipsis: {
**     overflow: hidden;
**     white-space: nowrap;
**     text-overflow: ellipsis;
**   };
**   --inline-block: {
**     display: inline-block;
**     vertical-align: middle;
**   };
**   --center-block: {
**     margin-left: auto;
**     margin-right: auto;
**   };
**   --word-break: {
**     white-space: normal;
**     word-wrap: break-word;
**     word-break: break-all;
**   };
**   --flex-center: {
**     display: flex;
**     align-items: center;
**     justify-content: center;
**   };
**   --disabled: {
**     cursor: default;
**     pointer-events: none;
**   };
**   --clearfix: {
**     &::before,
**     &::after {
**       content: "";
**       display: table;
**     }
**     &::after {
**       clear: both;
**     }
**   };
**   --text-justify: {
**     text-align: justify;
**     text-align-last: justify;
**     &::after {
**       content: "";
**       display: inline-block;
**       width: 100%;
**     }
**   };
** }
*/

@custom-media --iphonex (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3);