:root {
  // 间距
  --spacing: 8px;
  --spacing2: 16px;
  --spacing3: 24px;
  --spacing20: 20px;
  --spacing36: 36px;

// 颜色
  --color-white: #fff; //白

--color-black: #000; //黑

--color-layer-bg: #1d2026; //图层背景色

--color-title-bg: #fff; //块级标题色

--color-menu-bg: #1a1c21; //菜单背景色

--color-card-bg: #111214; //卡片背景色

--color-card-title-bg: #1c1f24; //卡片标题背景色

--color-content-bg: #fff; //内容背景色

--color-content-border: #f8f8f8; //表单边框色

--color-board-bg: #181b20; //画板底色

--color-board-icon-active: #454d5e; //icon激活背景色

--color-board-box-bg: #f7f7f7; //画板背景色

--color-form-bg: #fff; //表单项背景色

--color-scale-bg: #fefefe; //缩放背景色

--color-main: #526cfd; //交互主色

--color-font: #333; //字体颜色

--color-title-icon: #333; //标题的字体颜色

--color-icon: #333; //图标颜色

--color-scrollbar-track: rgba(0, 0, 0, 0); //滚动槽颜色

--color-scrollbar-thumb: #d8d8d8; //滚动条滑块颜色

--color-scrollbar-thumb-hover: #a8a8a8; //滚动条滑块颜色-hover

--color-scrollbar-corner: rgba(32, 35, 41, .2); //滚动槽边角颜色

--color-context-menu-bg: #fff; //右键菜单底色

--color-context-menu-arrow: #1c1e1f; //右键菜单箭头颜色

--color-hover-icon: rgba(82, 108, 253, .2); //滑过层级icon背景色，右键菜单项hover颜色

--color-input-suffix: #485059; //input后缀字体颜色

--color-input-border: #eee; //input边框颜色

--color-position-border: #060607; //位置的边框颜色

--color-menu-list-disabled: gba(0, 0, 0, .25); //菜单的禁止状态的颜色

--report-color-menu-list-disabled: #b7b7b7; //菜单的禁止状态的颜色

--color-stories-border: #e7e7e7; //故事集边框颜色

--color-stories-tabs-bg: #f6f7f9; //故事集tab切换的背景颜色

--color-guides-line: #526cfd; //参考线颜色

--color-guides-text: #526cfd; //参考线坐标文字颜色

--color-guides-icon: #c0c9d2; //参考线开关

--color-stories-font: #656565; // 缩放颜色

--color-stories-fontB7: #b7b7b7; //故事集的字体颜色

--color-stories-tree-active: #ececec; //选中树的颜色

--color-stroies-tabs-bg: #d8d8d8; //故事集tab切换的背景颜色

--coloe-collapse-arrow: #afafaf; //折叠面板的icon的颜色

--color-moveable-line: #b7b7b7; //moveable外框

--color-moveable-control: #656565; //moveable锚点外框

--color-stroies-page-bg: #f5f5f5; //故事集页面栏背景

--color-stroies-rgb65: rgba(0, 0, 0, .65); //故事集页面栏index的颜色

--color-stroies-page-btn: #eef0ff; //添加页面按钮颜色

--color-stroies-collapse-header: #afafaf; //折叠面板箭头的颜色

--color-zoom-select-bg: #dadada; // 缩放选择背景色

--color-operation-select-bg: #e9e9e9; // 悬浮菜单背景色

--color-no-page-bg: #eee; //没配置页画布区域的背景颜色

--color-card-boder: #f0f0f1; //卡片的变宽

--color-loading-bg: rgba(255, 255, 255, .4); //loading加载的背景颜色

--color-zindex-text-color: #e3e3e3; //层级按钮的颜色

--color-zindex-click-color: #3a4cd6; //点击层级按钮的颜色

--color-zindex-hover-color: #7394ff; //滑过层级按钮的颜色

--color-font-border: rgba(0, 0, 0, .3); //颜色的边框

--color-zoom-icon: #000; //缩放icon的颜色

--color-select-wrap-hover: #f5f5f5; //缩放比例select的滑过的颜色

--color-select-wrap-active: #eef0ff; //缩放比例select的点击的颜色

--color-select-wrap-font-color: #333; //缩放比例的字体颜色

--color-component-bg: #fff; //元件列表和故事集的工具栏详情的背景颜色 

--color-component-select: #fff; //select的颜色

--color-component-select-font-color: #656565; //select的字体颜色

--color-component-select-border: #e3e3e3; //select的边框颜色

--color-component-select-menu: #fff; //select的下拉菜单的背景

--color-title-wrap: #656565; //容器的title颜色

--color-select-active-font: #526cfd; //select选中字体的颜色

--color-layerlist-hover-color: #f5f5ff; //图层列表的滑过元件的颜色

--color-setting-collapse-header: #fff; //折叠面板的头部的背景颜色

--color-setting-collapse-header-font: #333; //折叠面板的头部的字体颜色

--color-select-font: #b7b7b7; //select的字体颜色

--color-box-menu-hover: rgba(0, 0, 0, .0400); //画布中右键菜单的滑过颜色

--color-box-menu-active: #e9e9e9; //画布中右键菜单的点击

--color-silder-bg: #526cfd; //silder的背景颜色

--color-collapse-border: #e3e3e3; //折叠面板的边框

--color-page-add-hover: #d1d6ff; //添加按钮的滑过颜色

--color-page-add-active: #bdc4ff; //添加按钮的滑过颜色

--color-component-input-border: #e3e3e3; //工具栏详情select框的颜色；

--color-setting-btn-font: #526cfd; //按钮的字体颜色

--color-zindex-boder: #e3e3e3; //边框颜色

--color-setting-icons: #fff; //icon背景颜色

--color-setting-icons-hover: #e7e7e7; //icon背景颜色滑过

--color-setting-icons-active: #e9e9e9; //icon背景颜色滑过

--color-select-setting-font: #b7b7b7; //样式设置的select的颜色

--color-compoent-card-boder: #f0f0f1; //卡片的边框颜色

--color-cover-font: #526cfd; //清空截图字体颜色

--color-tab-active-bg: #fff; //tab切换选中的背景颜色

--color-tab-boder: transparent; //tab切换边框颜色

--color-component-border: #e3e3e3; //边框的颜色

--color-update-btn: #f5f5f5; // 上传btn

--color-update-btn-hover: #e1e1e1; // 上传btn hover

--color-update-btn-border: transparent; // 字体大小

--color-popconfirm-font-color: #333;//同步弹框文字的颜色

--color-btn: #e3e3e3; //二次确认弹框的btn的边框颜色

--color-popconfirm--btn-font-color: #656565;//同步弹框按钮文字的颜色

--color-checkbox-background: #fff;//checkbox的背景颜色

--color-checkbox-border: #e3e3e3;//边框的背景颜色

--color-resize-prompt-message: rgba(82,108,253,.9);//resize提示信息的背景颜色

--color-label-line: #e3e3e3;//label的边框颜色

--font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-24: 24px;

// 圆角
  --border-radius-2: 2px;
  --border-radius-4: 4px;

//字体粗细
  --font-weight-400: 400;
  --font-weight-600: 600;

  .zl-ls-wrap {
    .zl-icon {
      width: 1em;
      height: 1em;

      fill: currentColor;
    }
  }

  body {
    font-size: var(--font-size-12);

    a:hover {
      color: var(--color-main);
    }
  }
}

:root[theme='black'] {
  // 颜色
  --color-white: #fff; //白

--color-black: #000; //黑

--color-layer-bg: #1d2026; //图层背景色

--color-title-bg: #202329; //块级标题色

--color-menu-bg: #1a1c21; //菜单背景色

--color-card-bg: #111214; //卡片背景色

--color-card-title-bg: #1c1f24; //卡片标题背景色

--color-content-bg: #13141a; //内容背景色

--color-content-border: #f8f8f8; //表单边框色

--color-board-bg: #181b20; //画板底色

--color-board-icon-active: #454d5e; //icon激活背景色

--color-board-box-bg: #0e1013; //画板背景色

--color-form-bg: #0f1114; //表单项背景色

--color-scale-bg: #1e1f21; //缩放背景色

--color-main: #526cfd; //交互主色

--color-font: #aab3bc; //字体颜色

--color-title-icon: #c0c9d2; //图标颜色

--color-scrollbar-track: rgba(32, 35, 41, .2); //滚动槽颜色

--color-scrollbar-thumb: #454d5e; //滚动条滑块颜色

--color-scrollbar-thumb-hover: #a8a8a8; //滚动条滑块颜色-hover

--color-scrollbar-corner: rgba(32, 35, 41, .2); //滚动槽边角颜色

--color-context-menu-bg: #20242c; //右键菜单底色

--color-context-menu-arrow: #1c1e1f; //右键菜单箭头颜色

--color-hover-icon: rgba(82, 108, 253, .2); //滑过层级icon背景色，右键菜单项hover颜色

--color-input-suffix: #485059; //input后缀字体颜色

--color-input-border: #1c2229; //input边框颜色

--color-position-border: #060607; //位置的边框颜色

--color-menu-list-disabled: #494b5a; //菜单的禁止状态的颜色

--report-color-menu-list-disabled: #494b5a; //菜单的禁止状态的颜色

--color-stories-border: #000; //故事集边框颜色

--color-stories-font: #c0c9d2; // 缩放颜色

--color-stories-tabs-bg: #0e1013; //故事集tab切换的背景颜色

--color-guides-line: #526cfd; //参考线颜色

--color-guides-text: #526cfd; //参考线坐标文字颜色

--color-guides-icon: #c0c9d2; //参考线开关

--color-stories-fontB7: #b7b7b7; //故事集的字体颜色

--color-stories-tree-active: #ececec; //选中树的颜色

--color-stroies-tabs-bg: #d8d8d8; //故事集tab切换的背景颜色

--color-moveable-line: #b7b7b7; //moveable外框

--color-moveable-control: #656565; //moveable锚点外框

--color-stroies-page-bg: #2b313d; //故事集页面栏背景

--color-stroies-rgb65: rgba(0, 0, 0, .65); //故事集页面栏index的颜色

--color-stroies-page-btn: #3d4657; //添加页面按钮颜色

--color-select-active-font: #fff; //select选中字体的颜色

--color-stroies-collapse-header: #afafaf; //折叠面板箭头的颜色

--color-zoom-select-bg: #202329; // 缩放选择背景色

--color-operation-select-bg: #e9e9e9; // 悬浮菜单背景色

--color-no-page-bg: #191c21; //没配置页画布区域的背景颜色

--color-card-boder: #f0f0f1; //卡片的变宽

--color-loading-bg: rgba(255, 255, 255, .4); //loading加载的背景颜色

--color-layer-icon-title: #14161a; //图层列表的icon的背景颜色

--color-zoom-icon: #c0c9d2; //缩放icon的颜色

--color-select-wrap-hover: #2b313d; //缩放比例select的滑过的颜色

--color-select-wrap-active: #3d4657; //缩放比例select的点击的颜色

--color-select-wrap-font-color: #c0c9d2; //缩放比例的字体颜色;

--color-component-bg: #14161a; //元件列表和故事集的工具栏详情的背景颜色 

--color-component-select: #0f1114; //select的颜色

--color-component-select-font-color: #c0c9d2; //select的字体颜色

--color-component-select-border: #1c2229; //select的边框颜色

--color-component-select-menu: #202329; // select的下拉菜单的背景颜色

--color-layerlist-hover-color: #282f51; //图层列表的滑过元件的颜色

--color-title-wrap: #c0c9d2; //容器的title颜色

--color-setting-collapse-header: #1a1c23; //折叠面板的头部的背景颜色

--color-setting-collapse-header-font: #fff; //折叠面板的头部的字体颜色

--color-select-font: #c0c9d2; //select的字体颜色

--color-box-menu-hover: #2b313d; //画布中右键菜单的滑过颜色

--color-box-menu-active: #3b4252; //画布中右键菜单的点击

--color-silder-bg: #5167e5; //silder的背景颜色

--color-collapse-border: #000; //折叠面板的边框

--color-component-input-border: #3d4a58; //工具栏详情select框的颜色；

--color-component-select-icon: #c0c9d2; //工具栏详情icon框的颜色；

--color-setting-btn-font: #7a94ff; //按钮的颜色

--color-zindex-boder: #1c2229; //边框颜色

--color-card-list: #252930; //元件列表的边框颜色

--color-setting-icons: #13141a; //icon背景颜色

--color-setting-icons-hover: #3d4148; //icon背景颜色滑过

--color-setting-icons-active: #656e76; //icon背景颜色

--color-select-setting-font: #5d6773; //样式设置的select的颜色

--color-compoent-card-boder: #3b424d; //卡片的边框颜色

--color-cover-font: #c0c9d2; //清空截图字体颜色

--color-tab-active-bg: #2b313d; //tab切换选中的背景颜色

--color-tab-boder: #242933; //tab切换边框

--color-component-border: #242933; //边框的颜色

--color-icon: #333; //图标颜色

--color-btn: #454765; //二次确认弹框的btn的边框颜色

--color-update-btn: #20242c; // 上传btn

--color-update-btn-hover: #2a313e; // 上传btn hover

--color-update-btn-border: 1px solid transparent;//边框

--color-popconfirm-font-color: #bdc9d3; //同步弹框文字的颜色

--color-popconfirm--btn-font-color: #bec9d3;//同步弹框按钮文字的颜色

--color-checkbox-background: transparent;//checkbox的背景颜色

--color-checkbox-border: #e3e3e3;//边框的背景颜色

--color-resize-prompt-message: rgba(82,108,253,.9);//resize提示信息的背景颜色

--popover-background: #20212c;//popover背景颜色

--popover-gis-border: #151515;//gis图层popover边框颜色

--border-color-transparent: rgba(0, 0, 0, .3);//色块边框颜色

--input-number-addon: #5b6774;//inputNumber前缀icon的颜色

--color-label-line: #000;//label的边框颜色
}