diff --git a/nezha-fronted/index.html b/nezha-fronted/index.html index 0d2e6c1fa..182b1c1b6 100644 --- a/nezha-fronted/index.html +++ b/nezha-fronted/index.html @@ -35,9 +35,8 @@ - +
- diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue index 793aee4c0..810717713 100644 --- a/nezha-fronted/src/App.vue +++ b/nezha-fronted/src/App.vue @@ -35,15 +35,3 @@ export default { width: 100%; } - diff --git a/nezha-fronted/src/assets/css/THEME_README.md b/nezha-fronted/src/assets/css/THEME_README.md new file mode 100644 index 000000000..bf274f576 --- /dev/null +++ b/nezha-fronted/src/assets/css/THEME_README.md @@ -0,0 +1,30 @@ +# 主题功能说明 + +### 说明 + +- 对项目中的主题相关颜色进行归类、抽取变量 +- 代码中设置元素的颜色时，对主题相关色应使用变量，不应使用颜色值 +- 切换主题时，更改body标签上的class +- 主题色归类变更时，需维护此文件 + +### 主题色归类 + +#### 1.主色 +软件的主色，包括按钮、高亮、强调等时候的颜色 +`确定按钮(保存、确认、提交)`  `高亮字色`  `背景色` + +#### 2.背景色 +- 空白背景色，默认主题下是白色 +- 基础背景色，`表头`  `小标题`  `标签` + +#### 3.字色 +- 标题字色，`表头`  `标题`  `强调` +- 普通字色，`小标题`  `正文` `普通` +- 次要字色，`提示`  `说明` `次要` + +#### 4.边框色 +- 普通边框色，`输入框`  `下拉框`  `复选框` +- 浅边框色 + +#### 5.提示色 +`成功`  `警告`  `危险`  `普通`  `复选框` diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index b631510aa..4aa2f77be 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -7,6 +7,7 @@ height: 42px; animation: loading-rotate 2s linear infinite; display: none; + background-color: $--background-color-empty; } .el-loading-mask .el-loading-spinner{ background: url(~@/assets/img/loading.gif) no-repeat; @@ -26,66 +27,47 @@ left: unset !important; top: 30px; } -//.nz-dropdown::after { -// content: ''; -// display: block; -// width:0; -// height:0; -// overflow: hidden; -// font-size: 0; -// line-height: 0; -// border: 5px; -// border-style: dashed dashed solid dashed; -// border-color: transparent transparent #fff transparent; -// position: absolute; -// right: 3px; -// top: 44px; -// transform: translate(-50%, -54px); -//} -.el-checkbox__inner, .el-input__inner { - border-color: rgba(0,0,0,0.15) -} .nz-icon-copy { padding: 0 4px; - color: $--theme-color; + color: $--color-primary; background-color: #FDF5E9; - border-radius: $--primary-border-radius; + border-radius: $--border-radius-small; cursor: pointer; } .red { - color: $--danger-color !important; + color: $--color-danger !important; } .green { - color:$--success-color !important; + color:$--color-success !important; } .gray { - color: $--suspended-color !important; + color: $--color-suspended !important; } .monitorColor { - color: $--monitor-color !important; + color: $--color-monitor !important; } .dark-red { color: #aa0000 !important; } .orange { - color: var(--theme-color) !important; + color: $--color-primary !important; } .red-bg { - background-color: $--danger-color !important; + background-color: $--color-danger !important; } .green-bg { - background-color:$--success-color !important; + background-color:$--color-success !important; } .gray-bg { - background-color: $--suspended-color !important; + background-color: $--color-suspended !important; } .dark-red-bg { background-color: #aa0000 !important; } .orange-bg { - background-color: var(--theme-color) !important; + background-color: $--color-primary !important; } .timezone-area{ display: inline-block; @@ -95,7 +77,7 @@ float: left; margin-left: 10px; font-family: PingFangSC-Regular; - color: #333333; + color: $--color-text-primary; line-height: 20px; font-weight: 400; margin-top: 3px; @@ -111,7 +93,7 @@ font-size: 14px; margin-right: 10px; font-family: PingFangSC-Regular; - color: #333333; + color: $--color-text-primary; line-height: 20px; font-weight: 400; } @@ -146,7 +128,7 @@ vertical-align: middle; font-family: Roboto-Regular; font-size: 15px; - color: #333333; + color: $--color-text-primary; font-weight: 400; } .personal-dropdown__name { @@ -157,8 +139,18 @@ vertical-align: middle; font-family: Roboto-Regular; font-size: 14px; - color: #999999; + color: $--color-text-secondary; font-weight: 400; padding-bottom: 10px; } } +td .nz-icon-gear:before{ + color: $--color-text-regular; +} + +.el-dropdown-menu { + background-color: $--background-color-empty !important; + border-color: transparent; + box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color; + border-radius: 2px; +} diff --git a/nezha-fronted/src/assets/css/common/button.scss b/nezha-fronted/src/assets/css/common/button.scss new file mode 100644 index 000000000..ffd25b06b --- /dev/null +++ b/nezha-fronted/src/assets/css/common/button.scss @@ -0,0 +1,204 @@ +.nz-btn { + border-radius: $--button-border-radius; + cursor: pointer; + text-align: center; + box-sizing: border-box; + -webkit-appearance: none; + white-space: nowrap; + font-size: 14px; + line-height: 16px; + position: relative; +} +.to-top { + position: fixed; + right: 17px; + border-radius: 50%; + height: 40px; + width: 40px; + border: none; + cursor: pointer; + opacity: 0; + background-color: #aaa; + outline: none; + z-index: 100; + color: white; + transition: opacity .2s linear, top .2s linear; + transform: translateY(-50%); + bottom: 35px; +} +.to-top.to-top-is-hover, .nz-table .el-table__body-wrapper.ps--scrolling-y .to-top { + opacity: 0.5; +} +.to-top>i { + font-size: 20px; +} +.to-top:hover { + opacity: 1; + color: white; +} +.nz-btn.nz-btn-size-normal { + font-size: 12px; + height: 28px; + padding: 0 8px; +} +.nz-btn.nz-btn-size-small { + font-size: 12px; + padding: 2px 5px; +} +.nz-btn.nz-btn-size-small i { + font-size: 12px; +} +.nz-btn-size-large { + padding: 0 15px; + height: 28px; +} +.nz-btn.nz-btn-style-light { /* 浅色按钮 */ + background-image: $--background-color-empty; + border:0; + color: $--color-text-regular; + box-shadow: 0 0 1px 1px rgba(162,162,162,0.50); + letter-spacing: 0; +} +.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/ + background-color: $--background-color-empty; + color: #444; + border: 1px solid #dcdfe6; +} +.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标时是个正方形*/ + padding: 2px 5px; +} +.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/ + padding: 4px 6px; +} +.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) { + //background-image: $--background-color-empty-hover; +} +.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) { + background-color: $--border-color-base; +} + +.nz-btn.nz-btn-size-normal-new{ + height: 30px; + line-height: 30px; + text-align: center; + min-width: 74px; + padding: 0 10px; +} +.nz-btn.nz-btn-size-small-new{ + height: 24px; + line-height: 22px; + text-align: center; + min-width: 60px; + padding: 0 10px; +} +.nz-btn.nz-btn-size-mini-new{ + height: 22px; + line-height: 22px; + text-align: center; + min-width: 40px; + padding: 0 5px; +} +.nz-btn.nz-btn-style-normal { /* 新版橙色按钮 */ + background: $--color-primary; + color: white; + border: 1px solid $--color-primary; +} +.nz-btn.nz-btn-style-error-new { /* 新版红色色按钮 */ + background: #EF7C62; + color: white; + border: 1px solid #EF7C62; +} +.nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */ + background: $--background-color-empty; + border: 1px solid $--border-color-base; + color: $--color-text-regular; + letter-spacing: 0; +} +.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 新版橙色按钮hover */ + background: $--color-primary; + color: white; + border: 1px solid $--color-primary; +} +.nz-btn.nz-btn-style-error-new:hover:not(.nz-btn-disabled) { /* 新版红色按钮hover */ + background: #F38b73; + color: white; + border: 1px solid #F38b73; +} +.nz-btn.nz-btn-style-light-new:hover:not(.nz-btn-disabled) { /* 新版浅色按钮hover */ + border: 1px solid rgba(250,144,28,0.3); + color: $--color-text-regular; + letter-spacing: 0; +} +.nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 新版橙色按钮active' */ + background: $--color-primary; + color: white; + border-color: $--color-primary; +} +.nz-btn.nz-btn-style-error-new:active:not(.nz-btn-disabled) { /* 新版红色按钮active' */ + background: #EF7C62; + color: white; + border-color: #Eb6D51; +} +.nz-btn.nz-btn-style-light-new:active:not(.nz-btn-disabled) { /* 新版浅色按钮active*/ + border: 1px solid $--color-primary; + color: $--color-primary; + letter-spacing: 0; +} + +.nz-btn:focus { + outline: 0; +} +.nz-btn .nz-btn-text{ + font-weight: 500; + white-space: nowrap; +} +.nz-btn-disabled { + background-image: none; + opacity: .6; + cursor: default !important; +} +.nz-btn-group { + border-radius: 2px; + display: flex; +} +.nz-btn-group-size-small { + max-height: 24px; +} +.nz-btn-group .nz-btn:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.gray-filter { + filter: opacity(50%); +} +.nz-btn-group .nz-btn:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.nz-btn-group .nz-btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.nz-btn-group .nz-btn { + box-shadow: none; + vertical-align: top; +} +.nz-btn-group .nz-btn:not(:last-of-type) { + border-right: 1px solid rgba(162,162,162,0.50); +} +.nz-btn-group.nz-btn-group-light { + box-shadow: 0 0 1px 1px rgba(162,162,162,0.50); +} +.nz-btn-group .nz-input-group-middle input { + border-radius:0 !important; + border: none; + border-right: 1px solid rgba(162,162,162,0.50) !important; +} +.nz-btn-group .nz-input-group-left input { + border-radius: 4px 0 0 4px !important; + border: none; + border-right: 1px solid rgba(162,162,162,0.50) !important; +} +.nz-btn-group .nz-input-group-right input { + border-radius:0 4px 4px 0 !important; + border: none; +} diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss new file mode 100644 index 000000000..af1a7d49e --- /dev/null +++ b/nezha-fronted/src/assets/css/common/checkbox.scss @@ -0,0 +1,25 @@ +.el-checkbox__input.is-focus .el-checkbox__inner, +.el-checkbox__input .el-checkbox__inner:hover, +.el-checkbox__input.is-checked .el-checkbox__inner, +.el-checkbox__input.is-indeterminate .el-checkbox__inner { + border-color: $--color-primary; +} +.el-checkbox__input.is-checked .el-checkbox__inner { + background-color: $--color-primary !important; +} +.el-checkbox__inner { + width: 16px !important; + height: 16px !important; + background-color: $--checkbox-background-color !important; +} +.el-checkbox__inner::after { + top: 2px; + left: 5px; +} +.el-checkbox__input.is-indeterminate .el-checkbox__inner::before { + top: 6px !important; +} + +.el-checkbox__inner, .el-input__inner { + border-color: $--checkbox-border-color; +} diff --git a/nezha-fronted/src/assets/css/common/index.scss b/nezha-fronted/src/assets/css/common/index.scss new file mode 100644 index 000000000..cdf4594e5 --- /dev/null +++ b/nezha-fronted/src/assets/css/common/index.scss @@ -0,0 +1,4 @@ +@import './button.scss'; +@import './checkbox.scss'; +@import './tableCommon.scss'; +@import './rightBoxCommon.scss'; diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss index b54d70c41..46ffd1bd6 100644 --- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss +++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss @@ -24,7 +24,7 @@ align-items: center; height: 60px; padding: 0 20px; - border-bottom: 1px solid $--right-box-border-color; + border-bottom: 1px solid $--border-color-light; box-sizing: border-box; .header__title { @@ -120,8 +120,8 @@ } .el-input__inner, .el-textarea__inner { padding: 0 10px; - border-radius: $--primary-border-radius; - border: 1px solid $--right-box-border-color; + border-radius: $--border-radius-small; + border: 1px solid $--border-color-light; } .el-textarea__inner { padding: 5px 70px 4px 15px; @@ -139,10 +139,10 @@ } .el-input__inner:hover { - border-color: darken($--right-box-border-color, 10%); + border-color: darken($--border-color-light, 10%); } .el-input__inner:focus { - border-color: darken($--right-box-border-color, 20%); + border-color: darken($--border-color-light, 20%); } } .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus { @@ -164,8 +164,8 @@ .form__dotted-item { padding: 10px 10px 6px 10px; margin-bottom: 10px; - border: 1px dashed $--primary-border-color; - border-radius: $--primary-border-radius; + border: 1px dashed $--border-color-base; + border-radius: $--border-radius-small; .el-form-item { margin-bottom: 0; @@ -184,7 +184,7 @@ width: 300px; height: 28px; border: 1px solid var(--theme-color-light-71); - border-radius: $--primary-border-radius; + border-radius: $--border-radius-small; background-color: var(--theme-color-light-98); i { @@ -242,7 +242,7 @@ } .footer__btn--light { background-color: white; - border: 1px solid $--primary-border-color; + border: 1px solid $--border-color-base; color: #333; } .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { @@ -314,6 +314,7 @@ .right-box-select-top { margin-top: 0 !important; margin-bottom: 0 !important; + } .api-select.right-public-box-select-top.right-public-box-dropdown-top { .el-scrollbar__view.el-select-dropdown__list { diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss index 1e2a4dfa3..7fa45ae07 100644 --- a/nezha-fronted/src/assets/css/common/tableCommon.scss +++ b/nezha-fronted/src/assets/css/common/tableCommon.scss @@ -3,10 +3,10 @@ height: 100%; width: 100%; box-sizing: border-box; - background-color: #f6f6f6; + background-color: $--background-color-base; .main-list { - background-color: white; + background-color: $--background-color-empty; position: relative; display: flex; flex-direction: column; @@ -17,9 +17,9 @@ .main-container { padding: 10px; height: 100%; - background-color: #f6f6f6; + background-color: $--background-color-base; &>div { - background-color: white; + background-color: $--background-color-empty; } } .main-list.main-list-with-sub { @@ -43,8 +43,8 @@ align-items: center; padding: 0 70px 0 15px; height: 44px; - background-color: white; - border: 1px solid #E6EAED; + background-color: $--background-color-empty; + border: 1px solid $--border-color-light; box-sizing: border-box; } @@ -73,7 +73,7 @@ height: 32px; width: 36px; cursor: pointer; - border: 1px solid $--primary-border-color; + border: 1px solid $--border-color-base; outline: none; border-radius: $--button-border-radius; background-color: $--button-gray-background-color; @@ -87,7 +87,7 @@ .top-tool-btn.top-tool-btn--text { padding: 0 8px; width: unset; - color: #666; + color: $--color-text-regular; } .top-tool-btn:hover:not(.nz-btn-disabled) { background-color: $--button-gray-hover-background-color; @@ -133,15 +133,15 @@ .sub-list-tab { height: 100%; width: 120px; - color: #666666; + color: $--color-text-regular; font-size: 14px; text-align: center; box-sizing: border-box; line-height: 40px; &.sub-list-tab--active { - border-bottom: 2px solid $--theme-color; - color: #FA901C; + border-bottom: 2px solid $--color-primary; + color: $--color-primary; } } @@ -155,12 +155,12 @@ height: 9px; width: 100%; box-shadow: inset 0 1px 0 0 #BEBEBE; - background-color: #e6eaed; + background-color: $--background-color-1; position: absolute; z-index: 1; box-sizing: border-box; user-select: none; - color: #5f6368; + color: $--color-text-regular; cursor: ns-resize; } .sub-list-window-control { @@ -177,12 +177,12 @@ margin-right: 20px; } .window-control-btn>i { - color: #999999; + color: $--color-text-secondary; font-size: 14px; transition: all .2s; } .window-control-btn>i:hover { - color: $--theme-color; + color: $--color-primary; } } .mt-10.table-container.nz-table2 { @@ -191,8 +191,8 @@ position: fixed; right: 55px; height: 42px; - border-bottom: 1px solid $--right-box-border-color; - background-color: white; + border-bottom: 1px solid $--border-color-light; + background-color: $--background-color-empty; box-sizing: border-box; } } @@ -208,7 +208,7 @@ .el-table:not(.chart-table) { width: 100%; - border: 1px solid $--right-box-border-color; + border: 1px solid $--border-color-light; border-bottom: none; .caret-wrapper { @@ -227,12 +227,14 @@ td { padding: 8px 0; - border-bottom: 1px solid $--right-box-border-color; + border-bottom: 1px solid $--border-color-light; + } + tr { + background-color: $--table-row-background-color; } th { - border-color: $--right-box-border-color; + border-color: $--border-color-light; padding: 8px 0; - background: #F9F9F9; } .el-table__header th:first-of-type { border-left: none; @@ -241,19 +243,14 @@ position: fixed; right: 31px; height: 42px; - border-bottom: 1px solid $--right-box-border-color; - background-color: white; + border-bottom: 1px solid $--border-color-light; + background-color: $--background-color-empty; box-sizing: border-box; } thead { - color: #333; + color: $--color-text-primary; } - .el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td, - .el-table__body tr.hover-row.el-table__row--striped.current-row>td, - .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td { - background-color: var(--theme-color-light-96) !important; - } .table-operation-title { text-align: center; } @@ -269,13 +266,13 @@ transition: background-color linear .1s; } .table-operation-item.table-operation-item--disable{ - border: 1px solid $--primary-border-color; - background-color: #DEDEDE; + border: 1px solid $--border-color-base; + background-color: $--border-color-base; opacity: 0.6; outline: none; i { font-size: 14px; - color: #fff; + color: $--background-color-empty; } } &>.table-operation-item { @@ -300,10 +297,10 @@ .table-operation-item.table-operation-item--more { justify-content: center; align-items: center; - border: 1px solid $--primary-border-color; + border: 1px solid $--border-color-base; width: 30px; i { - color: #999; + color: $--color-text-secondary; font-size: 12px; } } @@ -313,16 +310,13 @@ /* start--覆盖el-table边框、gutter等样式 */ .el-table__body-wrapper { overflow: auto; + background-color: $--table-body-background-color; } .el-table__fixed-body-wrapper { top: 42px !important; } .el-table__body-wrapper, .el-table__fixed-body-wrapper { - box-shadow: 1px 0 $--right-box-border-color; - - .cell { - color: #333; - } + box-shadow: 1px 0 $--border-color-light; } .el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden { visibility: hidden; @@ -333,21 +327,21 @@ } /* 最后一列用box-shadow模拟边框 */ //.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(3) { - // //box-shadow: 1px 0 $--right-box-border-color; - // border-left: 1px solid $--right-box-border-color; + // //box-shadow: 1px 0 $--border-color-light; + // border-left: 1px solid $--border-color-light; //} //.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) { // border-right: none !important; - // box-shadow: 1px 0 $--right-box-border-color; + // box-shadow: 1px 0 $--border-color-light; //} .el-table__fixed-body-wrapper { td:not(.is-hidden) { - border-left: 1px solid $--right-box-border-color; + border-left: 1px solid $--border-color-light; } } .el-table__fixed-header-wrapper { th:not(.is-hidden) { - border-left: 1px solid $--right-box-border-color; + border-left: 1px solid $--border-color-light; } th:last-of-type { border-right: none !important; @@ -376,8 +370,8 @@ position: fixed; right: 31px; height: 42px; - border-bottom: 1px solid #E7EAED; - background-color: white; + border-bottom: 1px solid $--border-color-light; + background-color: $--background-color-empty; -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -418,7 +412,7 @@ span { font-size: 14px; - color: #666; + color: $--color-text-regular; } i { @@ -426,7 +420,7 @@ } } .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner { - border-color: #c7c7c7 !important; + border-color: $--border-color-base-focus !important; } .el-input__inner { height: 24px !important; @@ -434,7 +428,7 @@ } .el-tag { - background-color: white; + background-color: $--background-color-empty; i { color: white; top: 0; @@ -449,7 +443,7 @@ box-shadow: none; box-sizing: border-box; border-radius: 0; - border-color: #c7c7c7; + border-color: $--border-color-base-focus; .popper__arrow { display: none; @@ -466,7 +460,7 @@ position: absolute; top: -1px; height: 1px; - background-color: white; + background-color: $--background-color-empty; } .temp-form-box-input.el-input .el-input__inner { text-overflow: ellipsis; @@ -482,3 +476,19 @@ .fade-leave-active { transition: opacity 1s; } + + +/*table提示样式*/ +.el-tooltip__popper.is-light { + border: 1px solid #EBEEF5; + color: #606266; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.col-resize-area { + position: absolute; + top: 0; + right: 0; + width: 4px; + height: 100%; + cursor: col-resize; +} diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss similarity index 85% rename from nezha-fronted/src/components/charts/chart.scss rename to nezha-fronted/src/assets/css/components/charts/chart.scss index 8b943e11a..96a1fbc5e 100644 --- a/nezha-fronted/src/components/charts/chart.scss +++ b/nezha-fronted/src/assets/css/components/charts/chart.scss @@ -4,7 +4,7 @@ clear: both; } .clearfix{ - margin-bottom: 0px; + margin-bottom: 0; } .hidden{ visibility: hidden; @@ -43,11 +43,11 @@ cursor:pointer; } .legend-option-cell{ - white-space: nowrap;padding: 0px 5px 0px 5px; + white-space: nowrap;padding: 0 5px 0 5px; } .legend-container table tr:hover{ - background-color: #e6e6e6; + background-color: $--background-color-1; } .nz-icon-warning{ color: #e6a23c; @@ -59,7 +59,6 @@ .legend-item{ text-overflow:ellipsis; white-space:nowrap; - /*width:100%;*/ margin-right:10px; overflow-x:hidden; cursor:pointer; @@ -76,7 +75,7 @@ width: 200px; li { padding-left:15px !important; - padding-right:0px !important; + padding-right: 0 !important; width: calc(100% - 15px); text-align: left; i { @@ -88,7 +87,7 @@ height: 36px; li { padding-left:15px !important; - padding-right:0px !important; + padding-right: 0 !important; width:94px; text-align: left; i { @@ -134,7 +133,7 @@ .panel-info-corner--error .panel-info-corner-inner { border-left: 28px solid #e02f44; border-right: none; - border-bottom: 28px solid rgba(0,0,0,0); + border-bottom: 28px solid $--background-color-empty; } .panel-info-corner-inner { width: 0; @@ -145,7 +144,7 @@ } .chart-error-popper[x-placement^=top] .popper__arrow::after { border-top-color: #e02f44 !important; - bottom:0px !important; + bottom: 0 !important; } .chart-error-popper[x-placement^=bottom] .popper__arrow::after { border-bottom-color: #e02f44; @@ -163,7 +162,7 @@ } .chart-warring-popper[x-placement^=top] .popper__arrow::after { border-top-color: #e6a23c; - bottom:0px; + bottom: 0; } .chart-warring-popper[x-placement^=bottom] .popper__arrow::after { border-bottom-color: #e6a23c; @@ -183,7 +182,7 @@ .panel-info-corner--error .panel-info-corner-inner { border-left: 28px solid #e6a23c; border-right: none; - border-bottom: 28px solid rgba(0,0,0,0); + border-bottom: 28px solid $--background-color-empty; } .panel-info-corner-inner { width: 0; @@ -202,7 +201,7 @@ position: relative; } .resize-box { - border: 1px solid #E7EAED; + border: 1px solid $--border-color-light; position: absolute; box-sizing: border-box; width: 100%; @@ -255,17 +254,17 @@ .el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td { - background-color: #f9f9f9 !important; + background-color: lighten($--background-color-base, 10%) !important; } td { padding: 9px 0; - border-bottom: 1px solid $--right-box-border-color; + border-bottom: 1px solid $--border-color-light; } th { - border-color: $--right-box-border-color; + border-color: $--border-color-light; } thead { - color: #333; + color: $--color-text-primary; } } } @@ -301,13 +300,10 @@ .chart-container.chart-detail { height: 100%; position: relative; - background-color: white; + background-color: $--background-color-empty; .chartTitle:hover { - background-color:#efefef; + background-color: $--background-color-1; } - //.chartTitle:not(.drag-disabled) { - // cursor: move; - //} .chartTitle { text-align: center; width: 100%; @@ -326,7 +322,7 @@ .chart-title-text { font-size: 14px; line-height: 26px; - color: #52545c; + color: $--color-text-regular; display:flex; justify-content:center; align-items:center; @@ -361,9 +357,9 @@ } } .chart-sub-title { - background-color: #efefef; + background-color: $--background-color-1; font-size: 13px; - color: #505255; + color: $--color-text-regular; padding-left: 5px; height: 25px; line-height: 25px; @@ -382,7 +378,7 @@ >.content-item { font-size: 13px; line-height: 26px; - border-top: 1px solid rgb(235, 238, 245); + border-top: 1px solid $--border-color-light; display: flex; position: relative; flex-wrap: wrap; @@ -453,7 +449,7 @@ white-space: nowrap; } .content-item-key { - color: #666; + color: $--color-text-regular; width: 35%; height: 26px; text-overflow: ellipsis; @@ -470,7 +466,7 @@ box-sizing: border-box; } .item-value-sub:not(:last-of-type) { - border-bottom: 1px solid rgb(235, 238, 245); + border-bottom: 1px solid $--border-color-light; } .nz-table { th .cell { @@ -482,22 +478,22 @@ line-height: 26px; } .el-table__body { - background-color: white; + background-color: $--background-color-empty; } .el-table__body tr:last-of-type td { border: none; } .el-table__body tr td { - background-color: white; + background-color: $--background-color-empty; } .el-table__body tr:hover>td { - background-color: white; + background-color: $--background-color-empty; } } text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - border-left: 1px solid rgb(235, 238, 245); + border-left: 1px solid $--border-color-light; color: #1a1a1a; width: 65%; height: 99%; @@ -509,7 +505,7 @@ border-top: none; } >.content-item:last-of-type { - border-bottom: 1px solid rgb(235, 238, 245); + border-bottom: 1px solid $--border-color-light; } } } @@ -522,9 +518,9 @@ .line-chart-block, .chart-table, .chart-single-stat, .chart-url,.chart-text, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{ height: 100%; position: relative; - background-color: white; + background-color: $--background-color-empty; .chartTitle:hover { - background-color:#efefef; + background-color: $--background-color-1; } .chartTitle { text-align: center; @@ -549,7 +545,7 @@ justify-content:space-between; align-items:center; height: 39px; - color: #333333; + color: $--color-text-primary; font-weight: 400; .chart-title-text{ max-width:calc(100% - 20px); @@ -576,7 +572,7 @@ .line-area { box-sizing: border-box; - background: #FFF; + background: $--background-color-empty; min-height: 95px; padding-left:8px; padding-right:8px; @@ -628,7 +624,7 @@ } .line-area { box-sizing: border-box; - background: #FFF; + background: $--background-color-empty; height: 100%; span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/ display: block !important; @@ -641,12 +637,12 @@ } .element-top-border { padding-bottom: 5px; - border-top: 1px solid #dfe7f2; + border-top: 1px solid $--border-color-base; margin-top:-25px; } .element-bottom-border { - border-bottom: 1px solid #dfe7f2; + border-bottom: 1px solid $--border-color-base; margin-bottom:-20px; } .pt10{ @@ -678,8 +674,6 @@ .rich-text-screen-container .text-content{ padding: 15px; - //border: 1px rgba(205,205,205,0.77); - //box-shadow:-1px 1px 9px -1px rgba(205,205,205,0.77); height: calc(100% - 10px); } .rich-text-container .ql-container.ql-snow { @@ -691,15 +685,6 @@ .chart-text-preview .ql-container.ql-snow { border: unset !important; } -/*.page-shadow{ - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; - background-color: rgba(0,0,0,.1); - z-index: 100; -}*/ .chart-table ,.chart-preview-dialog { .nz-table .el-table__row .costom-value .cell{ padding: 1px 0; @@ -722,7 +707,7 @@ .top-tool-btn { height: 32px; width: 36px; - border: 1px solid $--primary-border-color; + border: 1px solid $--border-color-base; outline: none; border-radius: $--button-border-radius; background-color: $--button-gray-background-color; @@ -736,14 +721,14 @@ .top-tool-btn.top-tool-btn--text { padding: 0 8px; width: unset; - color: #666; + color: $--color-text-regular; } .top-tool-btn:hover:not(.nz-btn-disabled) { background-color: $--button-gray-hover-background-color; } .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus { background-color: $--button-gray-hover-background-color; - border: 1px solid #FBCEA4 !important; + border: 1px solid $--color-primary !important; i { color: $--button-gray-active-color; } @@ -766,6 +751,56 @@ text-align: left; z-index: 1000; border-radius: 5px; - background: #fff; - border: 1px solid #ebeef5; + background: $--background-color-empty; + border: 1px solid $--border-color-light; +} + +.center-content { + .content-static-url{ + font-weight: bold; + font-size: 24px; + } + .content-static-tip{ + font-size: 18px; + color: lightgrey; + } +} +.resize-box-group { + position: unset !important; + .chart-title .nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; + } + .chart-title .nz-icon-arrow-down.is-active{ + transform: rotate( + -90deg + ); + } + .collapse-content{ + font-size: 12px; + color: $--color-text-secondary; + } +} + +.vue-resizable-handle { + position: absolute; + width: 20px; + height: 20px; + bottom: 0; + right: 0; + cursor: se-resize; + box-sizing: border-box; + user-select: none; + z-index: 99; +} +.vue-resizable-handle:after { + border-right: 2px solid #acb6bf; + border-bottom: 2px solid #acb6bf; + content: ""; + position: absolute; + right: 3px; + bottom: 3px; + width: 5px; + height: 5px; + box-sizing: inherit; } diff --git a/nezha-fronted/src/components/cli/webSSH.scss b/nezha-fronted/src/assets/css/components/cli/webSSH.scss similarity index 63% rename from nezha-fronted/src/components/cli/webSSH.scss rename to nezha-fronted/src/assets/css/components/cli/webSSH.scss index 36d5a8b01..34709f782 100644 --- a/nezha-fronted/src/components/cli/webSSH.scss +++ b/nezha-fronted/src/assets/css/components/cli/webSSH.scss @@ -3,7 +3,7 @@ left: 0; position: fixed; bottom: 0; - background: #fff; + background: $--background-color-empty; z-index: 2000; height: 300px; @@ -15,7 +15,7 @@ -webkit-align-items: center; align-items: center; justify-content: center; - background-color: #eaeaea; + background-color: $--background-color-1; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; @@ -26,7 +26,7 @@ z-index: 2; font-size: 20px; line-height: 8px; - color: #5f6368; + color: $--color-text-regular; } .shell-iconfont { font-family: "cloudshell-scripts-iconfont"; @@ -38,7 +38,7 @@ .console-title-icon{ font-size:17px; - color: #909399; + color: $--color-text-secondary; position: absolute; top:8px; line-height:1 !important; @@ -46,42 +46,35 @@ .console-title-icon:hover:before, .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active, .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover { - color: $box-title-color; + color: $--color-text-primary; } .el-dialog { .el-dialog__body{ overflow-x:hidden !important;/*防止console窗口x轴出现滚动条*/ } - .el-dialog__header{ - - } } .el-tabs--border-card>.el-tabs__content { - padding: 0px !important; - } - - .el-tabs { - /*background-color: #F5F7FA;*/ + padding: 0 !important; } .el-tabs .el-tabs__header { - margin-left:0px; - margin-right:150px; - height:29px; + margin-left: 0; + margin-right: 150px; + height: 29px; } .el-tabs__nav-wrap{ - margin-bottom: 0px; + margin-bottom: 0; } .el-tabs__nav{ - height:30px; + height: 30px; } .el-tabs__item { - height:30px; + height: 30px; margin-top: -1px !important; line-height: 30px; font-size:14px !important; - font-weight:normal; + font-weight: normal; } .el-tabs__nav-prev { @@ -92,7 +85,7 @@ } .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active { - border-top: solid 2px $global-text-color-active; + border-top: solid 2px $--color-primary; height: 29px !important; } @@ -102,7 +95,7 @@ } .el-menu.el-menu--horizontal .el-submenu__title i:first-child:before{ - color: #909399; + color: $--color-text-secondary; font-size:22px; } .el-menu.el-menu--horizontal .el-submenu__title i:first-child:hover:before{ @@ -110,18 +103,12 @@ } .el-submenu__title:hover{ - background-color:#FFF !important; + background-color:$--background-color-empty !important; } .upload-body{ text-align: center; } - .footer:before{ - /*content: '';*/ - /*clear:both;*/ - /*display: block;*/ - /*height: 40px;*/ - } .nz-icon-728bianjiqi_zitidaxiao{ top:0 !important; } @@ -142,7 +129,7 @@ width: 60px; } .el-menu--horizontal .el-menu .el-menu-item.menuActive{ - color: #303133; + color: $--color-text-primary; } .smallFont{ font-size: 12px; @@ -168,12 +155,12 @@ height: 9px; width: 100%; box-shadow: inset 0 1px 0 0 #BEBEBE; - background-color: #e6eaed; + background-color: $--background-color-1; position: absolute; z-index: 1; box-sizing: border-box; user-select: none; - color: #5f6368; + color: $--color-text-regular; cursor: ns-resize; top: 0; } @@ -191,15 +178,78 @@ margin-right: 20px; } .window-control-btn>i { - color: #999999; + color: $--color-text-secondary; font-size: 14px; transition: all .2s; } .window-control-btn>i:hover { - color: $--theme-color; + color: $--color-primary; } } .sub-list{ background: #000 !important; } /* 上滑resize工具条--end */ +.config-dropdown.w260{ + width: 260px; +} +.popover-webshell{ + margin-top: 0 !important; + .popover-webshell-item{ + padding: 5px; + font-family: Roboto-Regular; + font-size: 14px; + color: $--color-text-regular; + font-weight: 400; + .nz-icon{ + margin-right: 5px; + font-size: 16px; + } + } + .popover-webshell-item:hover{ + background: $--background-color-base; + font-family: Roboto-Regular; + font-size: 14px; + color: $--color-primary; + font-weight: 400; + } + .popper__arrow{ + display: none; + } +} +div.sp-header{ + display: none; +} +.horizontal .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{ + border: none; +} +.horizontal .el-menu--popup .el-menu-item.is-active{ + background: $--background-color-empty; +} + +.ani-webSHH-height { + transition: height .25s ease-in; + .sub-list { + background: $--background-color-1; + } + .flex .el-form-item__content { + display: flex; + } + .nz-btn-style-normal-new { + margin-left: 10px; + margin-top: 2px; + } + .custom .el-form-item { + width: calc(50% - 30px); + display: inline-block; + } + .custom .el-form-item:nth-child(even) { + margin-left: 10px; + } + .el-select--small { + width: 100%; + } + .custom-footer { + box-shadow: none; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss new file mode 100644 index 000000000..ced39ae33 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss @@ -0,0 +1,65 @@ +.alert-label, .alert-labelUp { + position: fixed; + background-color: $--background-color-empty; + z-index: 3000; + padding: 10px; + border-radius: 4px; + box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); + + .alert-label-info{ + border: 1px solid $--border-color-light; + border-bottom: none; + font-size: 13px; + line-height: 26px; + } + .alert-label-box{ + display: flex; + justify-content:space-between; + border-bottom: 1px solid $--border-color-light; + } + .alert-label-title{ + text-align: left; + width: 110px; + border-right: 1px solid $--border-color-light; + color: $--color-text-regular; + padding: 0 3px 0 13px; + } + .alert-label-value{ + text-align: left; + width: 150px; + color: #1a1a1a; + padding: 0 3px 0 13px; + word-break: break-all; + } + .danger{ + background-color: $--color-danger; + color: white; + padding: 2px 5px; + border-radius: 4px; + } + .success{ + background-color: $--color-success; + color: white; + padding: 2px 5px; + border-radius: 4px; + } + .active-icon{ + margin-top: 0; + } +} +.alert-label::after, .alert-labelUp::after { + content: ''; + display: block; + width:0; + height:0; + overflow: hidden; + font-size: 0; + line-height: 0; + border: 5px; + border-style: dashed solid dashed dashed; + border-color: transparent #fff transparent transparent; + position: absolute; + top: 20px; + left: 0; + transform: translate(-100%, -50%); +} diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss new file mode 100644 index 000000000..e7ca43e66 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss @@ -0,0 +1,113 @@ +.alert-rule-tip { + position: fixed; + background-color: $--background-color-empty; + z-index: 3000; + padding: 10px; + border-radius: 4px; + box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); +} +.alert-rule-tip::after { + content: ''; + display: block; + width:0; + height:0; + overflow: hidden; + font-size: 0; + line-height: 0; + border: 5px; + border-style: dashed solid dashed dashed; + border-color: transparent #fff transparent transparent; + position: absolute; + top: 100px; + left: 0; + transform: translate(-100%, -50%); +} +.alert-rule-abs { + background-color: $--background-color-empty; + z-index: 3000; + padding: 10px; + border-radius: 4px; + box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); +} +.alert-rule-tip-Up { + position: fixed; + background-color: $--background-color-empty; + z-index: 3000; + padding: 10px; + border-radius: 4px; + box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); +} +.alert-rule-tip-Up::after { + content: ''; + display: block; + width:0; + height:0; + overflow: hidden; + font-size: 0; + line-height: 0; + border: 5px; + border-style: dashed solid dashed dashed; + border-color: transparent #fff transparent transparent; + position: absolute; + bottom: 95px; + left: 0; + transform: translate(-100%, -50%); +} +.alert-rule-abs-Up { + background-color: $--background-color-empty; + z-index: 3000; + padding: 10px; + border-radius: 4px; + box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); +} +.alert-rule-info{ + border: 1px solid $--border-color-light; + border-bottom: none; + font-size: 13px; + line-height: 26px; +} +.alert-rule-box{ + display: flex; + justify-content:space-between; + border-bottom: 1px solid $--border-color-light; +} +.alert-rule-title{ + text-align: left; + width: 110px; + border-right: 1px solid $--border-color-light; + color: $--color-text-regular; + padding: 0 3px 0 13px; +} +.alert-rule-value{ + text-align: left; + width: 150px; + color: #1a1a1a; + padding: 0 3px 0 13px; + word-wrap: break-word; + white-space: normal; + overflow: hidden; + i { + color: $--color-primary; + } +} +.severity .P1{ + background: #F5846A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.severity .P2{ + background: #F7A54A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.severity .P3{ + background: #F1C13D; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} diff --git a/nezha-fronted/src/assets/css/components/common/alert/selectAlertSilence.scss b/nezha-fronted/src/assets/css/components/common/alert/selectAlertSilence.scss new file mode 100644 index 000000000..e66b84bdd --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/alert/selectAlertSilence.scss @@ -0,0 +1,54 @@ +.movable { + .el-tree-node__content { + cursor: move; + .tree--node>span:first-of-type { + cursor: pointer; + } + .tree--node>span:last-of-type>span { + cursor: pointer; + } + } +} +.tree--node>span:last-of-type>span>i { + font-weight: normal !important; +} +.select-panel-tree { + height: 350px; + overflow: auto; +} +.select-panel-tree .el-tree-node__content { + height: 34px; + line-height: 34px; +} +.select-panel-tree .el-tree-node__content:hover { + color: $--color-primary; +} +.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { + background-color: $--background-color-base; + font-weight: bold; + color: $--color-primary; +} +.tree--node { + display: flex; + justify-content: space-between; + width: calc(100% - 28px); +} +.tree--operation { + opacity: 0; +} +.tree--node:hover .tree--operation { + opacity: 1; +} +.panel-dropdown-btn { + color: #60BEFF; +} +.panel-dropdown-btn:hover { + color: #409EFF; +} +.panel-dropdown-btn-delete { + color: #F98D9A; +} + +.panel-dropdown-btn-delete:hover { + color: #D96D7A; +} diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss new file mode 100644 index 000000000..13c55a5a6 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss @@ -0,0 +1,134 @@ +/* begin--二级顶部工具栏*/ +.sub-top-tools { + display: flex; + height: 32px; + align-items: center; + justify-content: space-between; + border-top: 1px solid $--border-color-base; + border-bottom: 1px solid $--border-color-light; + margin: 0 -6px; + padding-right: 80px; + background-color: $--color-primary; + margin-bottom: 10px; +} +.sub-top-tools>div { + margin-top: 2px; +} +.sub-top-tools .top-tool-search { + width: 260px; + margin: -1px 0 0 0; + .select_input input { + background-color: $--background-color-empty; + } +} +.bottom-data-list .sub-container { + padding: 10px; + height: calc(100% - 64px); + background-color: $--background-color-base; + overflow-y: auto; + &>div { + background-color: $--background-color-empty; + } + &>.nz-table2 { + height: 100%; + padding-top: 20px !important; + } +} +.sub-top-tools .top-tool-btn-txt .nz-icon{ + display: inline-block; + font-size: 12px; + margin-right: 6px; +} +.sub-top-tool-right { + display: flex; + align-content: center; +} +.has-sub-popper { + color: $--color-danger; +} +.sub-box { + height: 50%; + position: relative; +} +.sub-list { + height: calc(100% - 9px); + position: absolute; + width: 100%; + z-index: 1; + top: 9px; + + .sub-list__tabs { + height: 100%; + background-color: $--background-color-empty; + + &>div { + height: 100%; + background-color: $--background-color-base; + + &>.nz-table2 { + height: calc(100% - 92px); + padding: 20px 20px 0; + } + } + .chart-list{ + .nz-table2 { + box-sizing: border-box; + padding: 0; + } + } + } +} +.main-and-sub-transition { + transition: .4s height; +} + +.bottom-panel { + padding-top: 15px; + background-color: $--background-color-empty; + padding-bottom: 10px; + height: calc(100% - 30px); +} +.bottom-log { + padding: 15px; +} +.bottom-common { + padding: 20px; + height: 100%; + box-sizing: border-box; +} +.chart-temp{ + height: calc(100% - 20px); + overflow-y: auto; +} +.resize-modal { + width: calc(100% - 240px); + opacity: 0.6; + background-color: #f5f9ff; + border: 1px solid #a7d0f7; + box-sizing: border-box; + position: fixed; + cursor: ns-resize; + display: none; + z-index: 20; + vertical-align: bottom; + bottom: 0; +} +.bottom-box .sub-container{ + height: calc(100% - 64px); +} +.bottom-box .sub-container .nz-table2{ + height: calc(100% - 20px); +} +/* end--二级顶部工具栏*/ + +.log-no-data { + height: 300px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + color: $--color-text-secondary; +} +.symbol-select .el-input__inner { + padding-left: 8px; +} diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss new file mode 100644 index 000000000..34c78c6d6 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss @@ -0,0 +1,230 @@ +.panel-tab-new { + .panel { + height: 100%; + } + + .panel .el-table { + border-radius: 5px; + } + + .panel-list-width { + width:240px; + } + + .panel-dropdown-title { + line-height:24px; + padding-left:5px; + margin-left:10px; + margin-top: 3px; + text-align:left; + border-radius:4px; + width:120px; + height:24px; + border:solid 1px #d8dce1; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + } + .panel-list-title { + min-height:24px; + width:100px; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + } + + .panel-list-item { + width:190px; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + } + + .content-right-option { + cursor: pointer; + display: inline-block; + margin-right: 6px; + } + + .content-right-option .nz-icon-delete { + color: #F98D9A; + } + + .content-right-option .nz-icon-delete:hover { + color: #D96D7A; + } + + .content-right-option .nz-icon-view { + color: #60BEFF; + } + + .content-right-option .nz-icon-view:hover { + color: #409EFF; + } + + /* begin-chart list*/ + .table-list { + overflow-y: auto; + height: 100%; + padding: 20px 0; + box-sizing: border-box; + } + + .box-content { + position: relative; + } + + /* end-chart list*/ + /* begin--Panel-自定义可编辑的el-select下拉框样式*/ + .panel-dropdown-btn { + display: inline-block; + margin-left: 7px; + float: right; + color: #60BEFF; + font-size: 13px + } + + .panel-dropdown-btn:hover { + color: #409EFF; + } + + .panel-dropdown-btn-create { + display: inline-block; + float: left; + font-size: 13px; + color: #F98D9A; + width: 100%; + } + + .panel-dropdown-btn-create:hover { + color: #D96D7A; + } + + .panel-dropdown-btn-delete { + color: #F98D9A; + font-size: 13px + } + + .panel-dropdown-btn-delete:hover { + color: #D96D7A; + } + + .panel-dropdown-error-message { + color: #F98D9A; + } + + /* end--Panel-自定义可编辑的el-select下拉框样式*/ + .panel-select-width { + width: 150px; + } + + .panel-refresh-interval { + margin-right: 5px; + float: right; + } + + .panel-refresh-interval-select { + width: 95px; + } + + .panel-calendar { + float: right; + margin-right: 1px; + } + + .top-tools { + button { + background: $--background-color-empty; + outline: none; + border: 1px solid #ccc; + } + + button:hover { + background: $--background-color-empty; + } + } + + .nz-dashboard-dropdown { + height: 300px; + overflow-y: auto; + li { + /*padding: 0 20px !important;*/ + padding-left:20px !important; + padding-right:0px !important; + width:240px; + white-space:nowrap; + overflow-x:hidden; + text-overflow:ellipsis; + } + } + + .nz-dashboard-dropdown-bg { + background: $--color-primary; + color: #fff; + } + + .el-dropdown-link { + cursor: pointer; + font-weight: bold; + } + + .refresh { + display: flex; + background: $--background-color-empty; + border-radius: 4px; + align-items: center; + justify-content: center; + margin: 0 10px; + border: 1px solid #ccc; + + span { + display: inline-block; + padding: 1px 8px; + } + } + + .popover_ul li { + padding: 10px 3px; + cursor: pointer; + } + + .popover_ul li:hover { + background: #fafafa !important; + color: $--color-primary !important; + } + + .nz-dashboard-refresh { + border-right: 1px solid #ccc; + color: #F0BF84; + } +} +.nz-dashboard-dropdown { + z-index: 3001 !important; +} +.panel-calendar { + .el-range-editor--mini.el-input__inner { + height: 25px !important; + border-color: #d8d8d8; + } + + .el-range-editor--mini .el-range__close-icon { + line-height: 18px; + } + + .el-range-editor--mini .el-range__icon { + display: none; + } + + .el-range-editor--mini .el-range-separator { + line-height: 17px; + } + + .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner { + padding-right: 0; + vertical-align: top; + } + + .nz-dashboard-dropdown .nz-icon-edit { + font-size: 12px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogCMDTab.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogCMDTab.scss new file mode 100644 index 000000000..e40070a55 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogCMDTab.scss @@ -0,0 +1,101 @@ +.record-container { + height: calc(100% - 50px); + overflow: auto; + position: relative; +} +.record-container--record { + background-color: white; + width: calc(100% - 6px); + padding: 16px 15px 6px 15px; + border: 1px solid $--border-color-base; + box-sizing: border-box; + min-height: 100px; + + .record--title { + color: $--color-text-primary; + font-size: 14px; + font-weight: bold; + margin-bottom: 12px; + } + + .record--list { + display: grid; + gap: 6px 12px; + grid-template-columns: 150px auto; + font-size: 14px; + color: $--color-text-primary; + + .detail--time { + line-height: 22px; + grid-column: 1/span 1; + display: flex; + font-size: 12px; + align-items: flex-start; + + span { + background-color: $--background-color-1; + padding: 2px 10px; + } + } + + .detail--cmd { + line-height: 22px; + grid-column: 2/span 1; + display: flex; + + span { + padding: 2px 10px; + } + } + + .detail--cmd__green { + background-color: #B4FDB1; + } + .detail--cmd__red { + background-color: #FFD2C2; + } + } + + .record--more { + text-align: center; + margin-top: 15px; + + .more-btn { + color: $--color-text-secondary; + cursor: pointer; + + .nz-icon { + font-size: 14px; + } + } + } +} +.record-container--record-tip { + position: absolute; + right: 20px; + top: 17px; + + .record--title { + color: $--color-text-primary; + font-size: 14px; + font-weight: bold; + margin-bottom: 12px; + } + + .detail--cmd { + line-height: 22px; + font-size: 14px; + padding-left: 20px; + + span { + padding: 3px 10px; + } + } + + .detail--cmd__green { + background-color: #A7F29E; + } + .detail--cmd__red { + background-color: #FBe2DE; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogMonitorTab.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogMonitorTab.scss new file mode 100644 index 000000000..d4dc5a2df --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogMonitorTab.scss @@ -0,0 +1,67 @@ +.replay-tab { + height: 100%; +} + +.replay-container { + height: 100%; +} + +.record-console { + padding: 10px 4px 10px 10px; + background-color: black; + height: 100%; +} + +.terminal-replay-progress { + height: 20px; + padding: 3px 0; + position: relative; + width: 500px; +} + +#terminal-kill { + margin-bottom: 5px; +} + +.terminal-replay-progress-bar { + top: 50%; + transform: translateY(-50%); + + .el-progress-bar__inner { + transition: unset; + user-select: none; + } +} + +.replay-operate { + .nz-btn { + margin-right: 8px; + + .nz-icon { + font-size: 14px; + } + } +} + +.operate-skip { + margin: 0 12px !important; +} + +.time-box { + border: none; + border-radius: 16px; +} + +.progress-controller { + position: absolute; + height: 14px; + width: 14px; + border-radius: 50%; + background-color: #409eef; + top: 50%; + transform: translate(-7px, -50%); +} + +.progress-controller:hover { + background-color: #207ecf; +} diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogRecordTab.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogRecordTab.scss new file mode 100644 index 000000000..6ee9b8863 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogRecordTab.scss @@ -0,0 +1,54 @@ +.replay-tab { + height: 100%; +} +.replay-container { + height: calc(100% - 40px); +} +.record-console { + padding: 10px 4px 10px 10px; + background-color: black; + height: calc(100% - 65px) !important; +} +.terminal-replay-progress { + height: 20px; + padding: 3px 0; + position: relative; + width: 500px; +} +.terminal-replay-progress-bar { + top: 50%; + transform: translateY(-50%); + + .el-progress-bar__inner { + transition: unset; + user-select: none; + } +} +.replay-operate { + .nz-btn { + margin-right: 8px; + + .nz-icon { + font-size: 14px; + } + } +} +.operate-skip { + margin: 0 12px !important; +} +.time-box { + border: none; + border-radius: 16px; +} +.progress-controller { + position: absolute; + height: 14px; + width: 14px; + border-radius: 50%; + background-color: #409eef; + top: 50%; + transform: translate(-7px, -50%); +} +.progress-controller:hover { + background-color: #207ecf; +} diff --git a/nezha-fronted/src/assets/css/components/common/browserWindowZoom.scss b/nezha-fronted/src/assets/css/components/common/browserWindowZoom.scss new file mode 100644 index 000000000..a1d286097 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/browserWindowZoom.scss @@ -0,0 +1,57 @@ +.zoom { + .transition-box { + margin-bottom: 10px; + width: 200px; + height: 100px; + border-radius: 4px; + background-color: #409EFF; + text-align: center; + color: $--background-color-empty; + padding: 40px 20px; + box-sizing: border-box; + margin-right: 20px; + } + .zoom { + background: $--background-color-base; + border: 1px solid $--border-color-base; + border-radius: 2px; + width: 400px; + height: 108px; + position: absolute; + z-index: 1; + left: 50%; + top: 50px; + margin-left: -186px; + + span { + margin-top: 15px; + font-size: 14px; + color: $--color-text-regular; + line-height: 20px; + font-weight: 400; + width: 350px; + height: 40px; + margin-left: 40px; + display: inline-block; + } + + i { + position: absolute; + color: $--color-primary; + top: 15px; + left: 12px; + } + + .zoom-button { + margin-top: 10px; + margin-left: 39px; + border: 1px solid $--border-color-base; + border-radius: 4px; + background-color: $--background-color-base; + color: #000; + font-style: italic; + font-weight: 900; + padding: 4px 10px; + } + } +} diff --git a/nezha-fronted/src/assets/css/components/common/chartUnit.scss b/nezha-fronted/src/assets/css/components/common/chartUnit.scss new file mode 100644 index 000000000..53c65715a --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/chartUnit.scss @@ -0,0 +1,24 @@ +.chart-unit { + width: 100px; +} +.chart-unit.el-cascader .el-input.is-focus .el-input__inner { + border-color: #FBCEA4; +} +.chart-unit .el-input__suffix-inner { + color: #aaa; +} +.unit-pop-class .el-cascader-panel { + height: 200px; + background-color: $--background-color-empty; +} +.input-prepend { + height: 26px; + margin-top: 1px; + padding: 0 5px !important; + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; +} +.chart-unit .el-input__inner { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} diff --git a/nezha-fronted/src/components/common/detailView/detailView.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss similarity index 72% rename from nezha-fronted/src/components/common/detailView/detailView.scss rename to nezha-fronted/src/assets/css/components/common/detailView/detailView.scss index d03f6d3df..61796be3a 100644 --- a/nezha-fronted/src/components/common/detailView/detailView.scss +++ b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss @@ -1,3 +1,6 @@ +.active{ + color: $--color-primary; +} .nz-detail-view{ width: 100%; height: calc(100% - 60px); @@ -8,7 +11,7 @@ align-items: center; width: 100%; justify-content: center; - color: #909399; + color: $--color-text-secondary; font-size: 14px; } .nz-detail-view-left{ @@ -17,8 +20,8 @@ flex-direction: column; margin: 0 10px 10px 20px; height: calc(100% - 12px); - border: 1px solid #E7EAED; - /deep/ .data-detail { + border: 1px solid $--border-color-light; + .data-detail { flex: 1; height: calc(100% - 100px); } @@ -34,7 +37,7 @@ overflow: hidden; padding-right: 10px; } - /deep/ .el-pagination .btn-next, /deep/ .el-pagination .btn-prev { + .el-pagination .btn-next, .el-pagination .btn-prev { border: none; background: none; padding: 0; @@ -42,12 +45,12 @@ height: 100%; margin-top: 0; .el-icon{ - background: #fff; + background: $--background-color-empty; height: 100%; font-size: 22px; } } - /deep/ .jump-input { + .jump-input { width: 40px; vertical-align: middle; .el-input__inner { @@ -58,16 +61,18 @@ } } - /deep/ .jump-pages { + .jump-pages { padding-left: 9px; font-size: 14px; - color: #666666; + color: $--color-text-regular; vertical-align: middle; } } -.list-page div.main-container{ - height: calc(100% - 20px); - - width: calc(100% - 20px); +.detail-view { + .list-page div.main-container{ + height: calc(100% - 20px); + width: calc(100% - 20px); + } } + diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss new file mode 100644 index 000000000..ac5a916a2 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss @@ -0,0 +1,93 @@ +.detail-view-top-search { + .search-detail-box{ + display: inline-block; + margin-right: 20px; + transition: background-color .1s ease-out; + border-radius: 2px; + } + .search-detail-box:hover{ + background: #F9F9F9; + } + .search-detail-box.select-dropdown{ + background: #F9F9F9; + } + .detail-dropdown{ + padding: 0 10px; + height: 30px; + line-height: 30px; + border-radius: 2px; + } + .search-detail-title { + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + line-height: 14px; + font-weight: 600; + margin-right: 10px; + } + .search-value{ + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + line-height: 14px; + font-weight: 400; + } + .detail-top-search { + display: inline-block; + vertical-align: bottom; + overflow: hidden; + text-overflow:ellipsis; + white-space:nowrap; + max-width: 100px; + } +} +.detail-top-search-dropdown{ + max-height: 300px; + overflow-y: auto; + .el-dropdown-menu__item{ + background: $--background-color-empty !important; + padding: 0; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .el-checkbox{ + width: calc(100% - 20px); + height: 36px; + padding: 0 0 0 20px; + display: flex; + align-items: center; + .el-checkbox__label{ + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .el-checkbox:hover{ + color: $--color-primary; + background-color: $--background-color-base !important; + } + .children-title-name{ + width: calc(100% - 20px); + height: 36px; + padding-left: 20px; + font-size: 12px; + color: $--color-text-secondary; + line-height: 30px; + } + } + .el-dropdown-menu__item:not(.is-disabled):hover{ + color: $--color-text-secondary; + background: $--background-color-empty !important; + } +} +.clear-all-select{ + padding: 0 20px; + padding-left: 42px; + color: #0052cc; + font-size: 12px; +} +.clear-all-select:hover{ + text-decoration: underline; +} diff --git a/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss b/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss new file mode 100644 index 000000000..c0bad4e9e --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/detailView/list/common.scss @@ -0,0 +1,59 @@ +.order-box{ + display: flex; + height:40px; + padding: 0 15px; + line-height: 40px; + align-items: center; +} +.detail-row-box{ + height: calc(100% - 40px); + overflow: hidden; + overflow-y: auto; +} +.detail-row{ + width: 245px; + padding: 0 0 0 15px; + height: 60px; + border-bottom: 1px solid $--border-color-light; + cursor: pointer; +} +.detail-row:last-of-type{ + border-bottom: none +} +.detail-row-info{ + display: flex; + height: 100%; + width: calc(100% - 15px); + justify-content:center; + flex-direction: column; + > div{ + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .asset-manageIp{ + font-size: 16px; + color: $--color-text-primary; + font-weight: 400; + } + .asset-name { + padding-left: 22px; + width: calc(100% - 22px); + font-size: 14px; + color: $--color-text-secondary; + font-weight: 400; + } +} +.selected{ + background: #FFFBF6; +} +.colorEF7458{ + color: $--color-danger; +} +.color23BF9A{ + color: $--color-success; +} +.colorFA901C{ + color: $--color-warning; +} diff --git a/nezha-fronted/src/assets/css/components/common/detailView/view/detailRightTop.scss b/nezha-fronted/src/assets/css/components/common/detailView/view/detailRightTop.scss new file mode 100644 index 000000000..1a11a3835 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/detailView/view/detailRightTop.scss @@ -0,0 +1,29 @@ +.detail-title-box{ + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + justify-content: flex-start; + align-items: center; + height: 100%; + padding-left: 15px; + & > div{ + height: 100%; + line-height: 60px; + margin-right: 40px; + } + .detail-title-key{ + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + } + .detail-title-value{ + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + margin-left: 10px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss new file mode 100644 index 000000000..5916cd1d9 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss @@ -0,0 +1,73 @@ +.detail-view-sub-box { + .detail-view-right-top { + height: 60px; + background: $--background-color-empty; + border: 1px solid $--border-color-light; + margin-bottom: 10px + } + + .sub-box { + height: 100%; + flex-direction: column; + } + + .sub-list__tabs { + flex: 1; + background-color: $--background-color-empty; + height: calc(100% - 12px); + border: 1px solid $--border-color-light; + + & > div { + height: 100%; + + & > .nz-table2 { + height: calc(100% - 92px); + padding: 20px 20px 0; + } + } + + .chart-list { + .nz-table2 { + box-sizing: border-box; + padding: 0; + } + } + } + + .bottom-data-list .sub-container { + height: calc(100% - 45px); + position: relative; + padding: 0; + background-color: $--background-color-empty; + } + + .sub-box .top-tools.top-tools--sub { + border: none; + padding: 0 15px 0 0; + margin-right: 15px; + margin-left: 20px; + border-bottom: 1px solid $--border-color-light; + } + + .sub-box .list-width { + padding: 0; + } + + .sub-box .nz-table2 { + padding: 20px; + height: 100%; + } + + .sub-box .table-list { + padding: 0; + height: 100%; + } + + .sub-box .pagination-bottom { + bottom: -3px; + } + + .sub-box .sub-list-tab { + cursor: pointer; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/elementSet.scss b/nezha-fronted/src/assets/css/components/common/elementSet.scss new file mode 100644 index 000000000..7be92e6dd --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/elementSet.scss @@ -0,0 +1,67 @@ +.pop-custom { + padding: 0 12px 12px 12px; + border: 1px solid $--border-color-light; + box-shadow: $--pop-box-shadow; + position: absolute; + top: 60px; + right: 20px; + width: 200px; + color: $--color-text-regular; + background: $--background-color-empty; + border-radius: 4px; + z-index: 999999; +} +.pop-custom-top { + padding: 0 12px 12px 12px; + border: 1px solid $--border-color-light; + box-shadow: $--pop-box-shadow; + position: absolute; + top: 45px; + right: 20px; + width: 200px; + color: $--color-text-regular; + background: $--background-color-empty; + border-radius: 4px; + z-index: 999999; +} +.pop-custom-explore { + top: 33px; +} +.relative-position .pop-custom { + top: 33px; +} +.custom-labels { + margin-top: 12px; + width: 100%; + height: 300px; +} +.custom-labels i { + color: #04b330; + font-size: 14px; + position: absolute; + left: 5px; + top: 6px; +} +.custom-label { + padding: 2px 0 2px 25px; + position: relative; + cursor: default; + font-size: 14px; +} +.custom-title { + padding: 2px 0 2px 2px; +} +.custom-label-disabled { + cursor: not-allowed; + background: $--background-color-base; + opacity: 0.7; +} +.custom-bottom-btns { + margin-top: 7px; + display: flex; + justify-content: space-between; + align-items: center; +} +.unshow { + display: none; +} diff --git a/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss b/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss new file mode 100644 index 000000000..492ccd853 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss @@ -0,0 +1,108 @@ +.arrow-down { + transform: rotate(0); + transition: all linear .2s; +} +.arrow-down.arrow-up { + transform: rotate(180deg); +} +.nz-label-search { + line-height: 40px; + margin: 6px 0; + .el-input__inner { + width: 60px; + } +} +.search-box__container { + flex-direction: column; + justify-content: center; + box-sizing: border-box; + border: 1px solid $--border-color-light; + background-color: $--background-color-empty; + overflow-x: hidden; + overflow-y: auto; +} +.search-title { + width: 130px; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 600; + overflow: hidden; + height: 100%; + line-height: 40px; + padding-left: 20px; + box-sizing: border-box; + background: $--background-color-base; +} +.search-content-box--copy { + position: fixed; + visibility: hidden; +} +.search-content-box-height.search-content-box { + min-height: 31px; +} +.search-content-box,.search-content-box-height { + border-bottom: 1px solid $--border-color-base; + display: flex; + align-items: center; + flex-wrap: wrap; + position: relative; + padding: 0; + box-sizing: border-box; + + /deep/ .el-checkbox__label { + max-width: 150px; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + vertical-align: text-bottom; + } +} +.search-content-box { + background: $--background-color-base; + align-items: unset; +} +.search-content-box:last-of-type{ + border-bottom: none; +} +.search-items { + display: flex; + flex: 1; + flex-wrap: wrap; + box-sizing: border-box; + padding-left: 15px; + padding-right: 80px; + background: $--background-color-empty; + &.search-items--checkbox .el-skeleton { + height: 21px; + } + &.search-items--dropdown .el-skeleton { + height: 28px; + } + .el-checkbox{ + line-height: 40px; + } +} +.more.search-items{ + .el-checkbox{ + line-height: 40px; + } +} +.search-more { + position: absolute; + right: 4px; + height: 22px; + line-height: 22px; + padding: 0 8px; + font-size: 12px; + color: $--color-text-primary; + box-sizing: border-box; + border: 1px solid $--border-color-base; + border-radius: 2px; + cursor: pointer; + + i { + color: $--color-text-secondary; + font-size: 12px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/loading.scss b/nezha-fronted/src/assets/css/components/common/loading.scss new file mode 100644 index 000000000..c746db570 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/loading.scss @@ -0,0 +1,8 @@ +.el-loading-mask { + .loading-font { + color: #232f3e !important; + } + .el-loading-mask { + background-color: $--background-color-empty; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/login.scss b/nezha-fronted/src/assets/css/components/common/login.scss new file mode 100644 index 000000000..2b5d710fa --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/login.scss @@ -0,0 +1,295 @@ +.login { + .model { + height: 100%; + width: 100%; + background-color: rgba(130, 130, 135, 0.4); + position: absolute; + top: 0; + left: 0; + z-index: 1; + } + + .logo { + z-index: 2; + width: 392px; + img{ + width: 100%; + } + } + .login-main { + z-index: 2; + background: rgba(106,106,106,0.5); + border-radius: 8px; + padding: 55px 50px 0 50px; + } + .login-box { + z-index: 2; + width: 392px; + .login-label{ + font-size: 22px; + color: #FFFFFF; + font-weight: 500; + } + .login-label-foot{ + font-size: 14px; + color: #DEDEDE; + line-height: 20px; + font-weight: 500; + word-break: keep-all; + width: 90%; + } + } + + .login-box .login-input { + padding: 12px 0; + height: 46px; + position: relative; + } + .login-box .login-input .nz-icon { + position: absolute; + left: 18px; + top: 50%; + transform: translateY(-50%); + color: white; + font-size: 20px; + } + .login-box .login-input input { + height: 100%; + width: calc(100% - 60px); + background-color: rgba(0, 0, 0, 0.55); + padding-left: 60px; + font-size: 20px; + border: none; + outline: none; + color: white; + border-radius: 4px; + } + + .login-foot { + padding-top: 15px; + display: flex; + width: 392px; + justify-content: space-between; + position: relative; + } + + .login-btn { + color: white; + border-radius: 2px; + background-color: mix(white, #FA901C, 20%); + border: none; + outline: none; + height: 44px; + width: 100%; + cursor: pointer; + font-size: 14px; + transition: all linear .2s; + } + .login-btn:not(.nz-btn-disabled):hover { + background-color: mix(white, #FA901C, 30%); + } + + .login-foot-lang { + position: relative; + cursor: pointer; + background: rgba(0,0,0,0.25); + border-radius: 4px; + padding: 0 14px; + } + .login-foot-lang .nz-icon:not(.nz-icon-arrow-up):not(.nz-icon-arrow-down) { + font-size: 30px; + color: white; + margin-right: 30px; + line-height: 45px; + } + .login-foot-lang-list { + position: absolute; + height: 25px; + padding: 12px; + background-color: rgba(0, 0, 0, 0.55); + top: 70px; + right: 0; + border-radius: 4px; + } + .login-foot-lang-list .nz-icon { + font-size: 25px; + color: white; + cursor: pointer; + } + .login-foot .el-loading-spinner { + width: 36px; + height: 36px; + } + .login-foot-lang-list::before { + content: " "; + width: 0; + height: 0; + border-width: 10px; + border-style: solid; + border-color: transparent transparent rgba(0, 0, 0, 0.55) transparent; + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + } + .login-foot-buildOn{ + position: absolute; + bottom: 20px; + z-index: 100; + left: 50%; + transform: translateX(-50%); + a{ + font-size: 14px; + color: #eee; + text-shadow: 1px 1px 3px #333; + text-decoration: none; + } + } + .nz-icon-arrow-down, .nz-icon-arrow-up { + position: absolute; + font-size: 18px; + color: white; + top: 50%; + right: 8px; + transform: translateY(-50%); + } + .login-license{ + margin-top: 40px; + text-align: center; + line-height: 30px; + .license-warn{ + color: #d92926; + text-shadow: 1px 1px 3px #ddd; + } + .license-info { + margin-bottom: 10px; + color: white; + text-shadow: 1px 1px 3px #333; + white-space: nowrap; + } + .login-btn{ + height: 40px; + width: auto; + padding: 0 20px; + } + } + .login-dialog-title{ + background: #F9F9F9; + font-size: 14px; + color: #666666; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + padding: 10px; + margin-bottom: 10px; + word-break: keep-all; + } + .login-dialog-title2{ + background: rgba(246,248,250, 0.9); + border: 1px solid #E7EAED; + border-radius: 2px; + height: 248px; + padding: 15px; + position: relative; + .copy-value-content{ + position: absolute; + right: 5px; + top: 5px; + cursor: pointer; + } + .login-dialog-recover{ + height: calc(100% - 30px);overflow-y: auto + } + } + .enter-code{ + font-size: 14px; + color: #666666; + letter-spacing: 0; + font-weight: 400; + margin-bottom: 10px; + } + .qrCode-box{ + display: flex; + align-items: center; + } + .qrCode-content{ + padding: 4px; + margin-left: 10px; + } + .qrCode-text{ + width: 60%; + margin-left: 10px; + font-size: 14px; + color: #666666; + letter-spacing: 0; + font-weight: 400; + } + .qrCode-authKey{ + background: rgba(246,248,250,09); + border: 1px solid #E7EAED; + border-radius: 2px; + padding: 5px 12px; + font-size: 14px; + color: #333333; + letter-spacing: 0; + font-weight: 400; + margin-top: 12px; + } + .footer { + .footer__btn { + margin: 0 15px; + height: 30px; + min-width: 74px; + padding: 0 15px; + color: white; + background-color: #FA901C; + border: none; + border-radius: 4px; + outline: none; + box-sizing: border-box; + font-size: 14px; + cursor: pointer; + transition: background-color linear .2s, color linear .1s; + } + .footer__btn:hover:not(.footer__btn--disabled) { + background-color: mix(white, #FA901C, 20%); + } + .footer__btn--light { + background-color: white; + border: 1px solid #DEDEDE; + color: #333; + } + .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { + background-color: white; + border-color: mix(white, #FA901C, 50%); + color: #FA901C; + } + .footer__btn--disabled { + opacity: .6; + cursor: default; + } + } + .nz-dialog .el-dialog__body{ + padding-bottom: 0; + } + .verify-link{ + font-family: Roboto-Black; + font-size: 14px; + color: #3C92F1; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + cursor: pointer; + } + .verify-link:hover{ + border-bottom: 1px solid #3C92F1; + } + .circle{ + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background: #CECECE; + margin-right: 10px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/multipleTime.scss b/nezha-fronted/src/assets/css/components/common/multipleTime.scss new file mode 100644 index 000000000..dfbfa8e92 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/multipleTime.scss @@ -0,0 +1,110 @@ +.multiple-time-box { + .loading-font { + color: #232f3e !important; + } + .popper-z-index { + z-index: 3000 !important; + } + .nz-dashboard-dropdown-bg { + background: $--color-primary; + color: #fff; + } + .calendar-dropdown-title { + line-height: 28px; + padding-left: 5px; + margin-left: 0; + margin-top: -3px !important; + text-align: left; + border-radius: 2px; + min-width: 80px; + height: 28px; + border: solid 1px $--border-color-base; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .el-dropdown-link { + cursor: pointer; + } + .calendar-popover { + line-height: 22px; + text-align: center; + } + .panel-time-picker-hidden { + width: 0 !important; + padding: 0 !important; + border: 0 !important; + height: 0 !important; + overflow: hidden; + } + .time-picker-button { + padding: 0 1px !important; + height: 24px !important; + margin-top: 0 !important; + } + + .time-picker-left-button { + margin-right: 4px; + } + + .time-picker-right-button { + margin-left: 4px; + } + .calendar-popover-text { + } + .multiple-time-box { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 4px; + } + .compare-box .nz-icon-compare { + border-right: none; + } + .calendar { + border: none; + box-sizing: content-box; + line-height: unset; + height: 100%; + margin-left: -6px; + margin-right: 10px; + } + .nz-icon-compare { + background: $--background-color-empty; + border: 1px solid $--border-color-base; + border-radius: 2px; + padding: 6px 8px; + } + .multiple-time-datepicker-enter-active { + animation: bounce-in .5s; + } + .multiple-time-datepicker-leave-active { + animation: bounce-in .5s reverse; + } + @keyframes bounce-in { + 0% { + width: 0; + overflow: hidden; + } + 100% { + width: 125px; + overflow: hidden; + } + } +} +.panel-time-picker-popper[x-placement^=bottom] .popper__arrow { + left: 85% !important; +} + +.panel-time-picker-popper .el-date-table td.today span { + color: #232f3e !important; +} + +.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){ + display:none; +} + +.dropdown--suffix { + padding: 0 8px; + color: #aaa; +} diff --git a/nezha-fronted/src/assets/css/components/common/nezhaColor.scss b/nezha-fronted/src/assets/css/components/common/nezhaColor.scss new file mode 100644 index 000000000..055c94c33 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/nezhaColor.scss @@ -0,0 +1,97 @@ +.nz-color { + .vc-sketch-field--single, .vc-sketch-field .vc-input__label { + display: none; + } + .vc-sketch-color-wrap { + margin-left: 16px; + } + .vc-sketch-presets { + line-height: 24px; + } + .vc-sketch-presets-color { + margin: 0 7px 0 0; + } + .vue-color { + position: fixed; + z-index: 1; + } + + .color-content { + height: 0; + width: 0; + overflow: hidden; + position: absolute; + top: 15px; + left: 66px; + } + .color-tab { + height: 28px; + line-height: 28px; + border-radius: 5px 5px 0 0; + border: 1px solid $--border-color-light; + border-bottom: none; + background-color: $--background-color-empty; + display: flex; + justify-content: space-between; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + z-index: 2; + } + .color-tab div { + text-align: center; + flex: 1; + color: $--color-text-secondary; + transition: all .3s cubic-bezier(.645, .045, .355, 1); + background: $--background-color-1; + cursor: pointer; + border-top: 2px solid transparent; + } + .color-tab div:hover { + color: $--color-primary; + } + .color-tab .color-active { + background-color: $--background-color-empty; + font-size: 14px; + color: $--color-primary; + font-weight: 700; + border-color: $--color-primary; + } + + .color { + position: relative; + } + + .color-show { + border: 1px solid $--border-color-light; + border-radius: 5px; + display: flex; + align-items: center; + height: 30px; + } + + .color-show .color-text { + font-family: PingFangSC-Regular; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + } + + .color-show-left { + width: 18px; + height: 18px; + border: 1px solid $--border-color-light; + border-radius: 5px; + margin: 0 5px; + text-align: center; + } + + .color-arrows { + color: #C0C4CC; + position: absolute; + right: 12px; + } + + .color-arrows .nz-icon { + font-size: 12px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/nzTransfer.scss b/nezha-fronted/src/assets/css/components/common/nzTransfer.scss new file mode 100644 index 000000000..03808bc6c --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/nzTransfer.scss @@ -0,0 +1,96 @@ +.nz-transfer { + display: flex; + justify-content: space-between; + + .nz-transfer__box { + width: calc(50% - 7.5px); + border: 1px solid $--border-color-light; + border-radius: $--border-radius-small; + + .box__header { + display: flex; + align-items: center; + padding: 0 10px; + height: 52px; + color: $--color-text-regular; + box-sizing: border-box; + border-bottom: 1px solid $--border-color-light; + + input { + background-color: transparent !important; + } + } + + .box__table { + height: calc(100% - 94px); + border-bottom: 1px solid $--border-color-light; + + .el-table--border::after, .el-table--group::after, .el-table::before { + height: 0; + } + .el-table__row { + td { + border-color: $--border-color-light; + + &:first-of-type .cell { + text-overflow: unset; + } + } + } + } + + .box__footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 8px 1px; + height: 42px; + box-sizing: border-box; + + .jump-input { + width: 40px; + + .el-input__inner { + padding: 0 5px; + height: 24px; + line-height: 24px; + } + } + + .jump-pages { + padding-left: 9px; + font-size: 14px; + color: $--color-text-primary; + } + + .top-tool-btn { + height: 28px; + width: 28px; + line-height: 28px; + } + + .el-pagination { + display: flex; + align-items: center; + padding: 0; + + .btn-prev, .btn-next { + border: none; + background-color: transparent !important; + } + .btn-prev { + margin: 0 5px; + } + .btn-next { + margin: 0; + } + } + } + } +} +.hide-row { + display: none !important; +} +.error{ + border-color: #F56C6C !important; +} diff --git a/nezha-fronted/src/assets/css/components/common/pagination.scss b/nezha-fronted/src/assets/css/components/common/pagination.scss new file mode 100644 index 000000000..43a176cf7 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/pagination.scss @@ -0,0 +1,75 @@ +.pagination { + padding-top: 8px; + text-align: center; + max-height: 42px; +} +.pagination-top .pagination { + padding-top: 0; +} +.pagination .el-pagination { + max-height: 42px; + padding-right: 0; +} +.pagination-size-select .el-input--mini .el-input__inner{ + height: 20px; + line-height: 20px; + margin: 5px 0 5px 5px; +} +.pagination-size-select input{ + +} +.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev { + margin:5px 5px 0 5px; + padding: 0 4px; + font-size: 13px; + min-width: 20px; + height: 20px; + line-height: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + text-align: center; + border: 1px solid rgba(154,154,154,0.20); + border-radius: 2px; +} +.el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev { + line-height: 20px; +} +.el-pagination .el-pager .more::before { + line-height: 20px; +} +.el-pagination .el-pager .more { + background-color: $--background-color-base; +} +.btn-next, .btn-prev { + background-color: $--background-color-base !important; +} +.pagination input { + background-color: $--background-color-base !important; +} +.el-pager li.number{ + color: $--color-text-regular; + letter-spacing: 0; + font-weight:normal; + background-color: $--background-color-base; +} +.el-pager li.number.active{ + color: #FFFFFF; + letter-spacing: 0; +} + +.el-pagination .el-pager li.active { + background-color: $--color-primary; + border-radius: 2px; +} +.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover { + color: $--color-text-regular; + letter-spacing: 0; + font-weight:normal; +} +.el-pagination__sizes .el-input .el-input__inner,.el-pagination__editor.el-input .el-input__inner{ + height: 20px; + border-color: rgba(154,154,154,0.20); +} +.el-pagination__sizes .el-input .el-input__inner:hover{ + border-color: rgba(154,154,154,0.20); +} diff --git a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss new file mode 100644 index 000000000..e874011a1 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss @@ -0,0 +1,182 @@ +.guild-pop { + .el-dialog__header { + padding: 22px; + background-color: $--color-primary-light-1; + text-align: center; + + .el-dialog__title { + color: white; + font-size: 24px; + } + + .el-dialog__headerbtn { + top: 29px; + + i { + color: white; + font-size: 24px; + } + } + } + + .el-dialog__body { + display: flex; + flex-direction: column; + padding: 30px 30px 43px; + box-sizing: border-box; + + .guide-list { + display: flex; + position: relative; + width: 100%; + height: 170px; + + .guide-shadow { + position: absolute; + height: 100%; + width: 16.67%; + top: -1px; + left: 0; + transition: all linear .3s; + border-bottom: 3px solid #101B27; + background-color: $--background-color-base; + } + + .guide-shadow:after { + position: absolute; + z-index: 11; + content: ''; + border-style: solid; + transition-duration: .3s; + transition-property: bottom; + left: calc(50% - 6px); + bottom: -9px; + border-width: 6px 6px 0; + border-color: #424242 transparent transparent transparent; + } + + .guide-item { + flex: 1; + position: relative; + + &:not(:nth-of-type(2)):before { + top: 100px; + width: 50%; + height: 2px; + background-color: #d8d8d8; + position: absolute; + left: 0; + content: ""; + } + &:not(:last-of-type):after { + top: 100px; + width: 50%; + height: 2px; + background-color: #d8d8d8; + position: absolute; + right: 0; + content: ""; + } + + &.guide-item--active{ + .item__title { + color: #101B27; + font-weight: bold; + } + .item__icon { + border-color: #ABABAB; + background-color: $--background-color-empty; + cursor: pointer; + i { + color: #ABABAB; + } + } + .item__icon.item__icon--disabled { + cursor: not-allowed; + opacity: 0.4; + } + } + + .item__title { + padding-top: 20px; + color: $--color-text-regular; + text-align: center; + font-size: 16px; + transition: all linear .3s; + } + .item__icon { + position: relative; + top: 23px; + left: 50%; + transform: translateX(-50%); + height: 62px; + width: 62px; + border: 1px solid $--border-color-light; + border-radius: 50%; + box-sizing: border-box; + background-color: $--background-color-base; + transition: all linear .3s; + z-index: 1; + + i { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #BEBEBE; + font-size: 30px; + transition: all linear .3s; + } + } + } + } + .guide-desc { + display: flex; + flex-direction: column; + width: 100%; + height: 200px; + padding-bottom: 32px; + box-sizing: border-box; + border: 1px solid $--color-text-secondary; + + .desc-text { + flex: auto; + padding: 0 30px; + + display: flex; + align-items: center; + color: #101B27; + font-size: 18px; + word-break: keep-all; + } + + .guide__btn-group { + display: flex; + justify-content: center; + height: 46px; + + .guide__btn { + margin: 0 15px; + padding: 0 15px; + height: 100%; + color: white; + border: none; + border-radius: $--border-radius-small; + background-color: #666; + font-size: 18px; + outline: none; + cursor: pointer; + opacity: 1; + transition: all linear .2s; + } + .guide__btn:hover { + opacity: .9; + } + .guide__btn.guide__btn--disabled { + cursor: not-allowed; + opacity: 0.4; + } + } + } + } +} diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss new file mode 100644 index 000000000..632461712 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss @@ -0,0 +1,60 @@ +.movable { + .el-tree-node__content { + cursor: move; + .tree--node>span:first-of-type { + cursor: pointer; + } + .tree--node>span:last-of-type>span { + cursor: pointer; + } + } +} +.tree--node>span:last-of-type>span>i { + font-weight: normal !important; +} +.select-panel-tree { + height: 350px; + overflow: auto; +} +.select-panel-tree .el-tree-node__content { + height: 34px; + line-height: 34px; +} +.select-panel-tree .el-tree-node__content:hover { + color: $--color-primary; +} +.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { + background-color: $--background-color-base; + font-weight: bold; + color: $--color-primary; +} +.tree--node { + display: flex; + justify-content: space-between; + width: calc(100% - 28px); +} +.tree--node span:nth-of-type(1) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-word; +} +.tree--operation { + opacity: 0; +} +.tree--node:hover .tree--operation { + opacity: 1; +} +.panel-dropdown-btn { + color: #60BEFF; +} +.panel-dropdown-btn:hover { + color: #409EFF; +} +.panel-dropdown-btn-delete { + color: #F98D9A; +} + +.panel-dropdown-btn-delete:hover { + color: #D96D7A; +} diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetType.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetType.scss new file mode 100644 index 000000000..f64847a96 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetType.scss @@ -0,0 +1,62 @@ +.movable { + .el-tree-node__content { + cursor: move; + + .tree--node > span:first-of-type { + cursor: pointer; + } + + .tree--node > span:last-of-type > span { + cursor: pointer; + } + } +} +.tree--node > span:last-of-type > span > i { + font-weight: normal !important; +} +.select-panel-tree { + height: 350px; + overflow: auto; +} +.select-panel-tree .el-tree-node__content { + height: 34px; + line-height: 34px; +} +.select-panel-tree .el-tree-node__content:hover { + color: $--color-primary; +} +.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: $--background-color-base; + font-weight: bold; + color: $--color-primary; +} +.tree--node { + display: flex; + justify-content: space-between; + width: calc(100% - 28px); +} +.tree--operation { + opacity: 0; +} +.tree--node:hover .tree--operation { + opacity: 1; +} +.panel-dropdown-btn { + color: #60BEFF; +} +.panel-dropdown-btn:hover { + color: #409EFF; +} +.panel-dropdown-btn-delete { + color: #F98D9A; +} + +.panel-dropdown-btn-delete:hover { + color: #D96D7A; +} +.tree--node__disabled { + opacity: .6; +} +.tree--node__disabled:hover { + cursor: not-allowed; +} diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss new file mode 100644 index 000000000..254cf774d --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss @@ -0,0 +1,66 @@ +.movable { + .el-tree-node__content { + cursor: move; + + .tree--node > span:first-of-type { + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-word; + } + + .tree--node > span:last-of-type > span { + cursor: pointer; + } + } +} +.tree--node > span:last-of-type > span > i { + font-weight: normal !important; +} +.select-panel-tree { + height: 350px; + overflow: auto; +} +.select-panel-tree .el-tree-node__content { + height: 34px; + line-height: 34px; +} +.select-panel-tree .el-tree-node__content:hover { + color: $--color-primary; +} +.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: $--background-color-base; + font-weight: bold; + color: $--color-primary; +} +.tree--node { + display: flex; + justify-content: space-between; + width: calc(100% - 28px); +} +.tree--node span:nth-of-type(1) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-word; +} +.tree--operation { + opacity: 0; +} +.tree--node:hover .tree--operation { + opacity: 1; +} +.panel-dropdown-btn { + color: #60BEFF; +} +.panel-dropdown-btn:hover { + color: #409EFF; +} +.panel-dropdown-btn-delete { + color: #F98D9A; +} + +.panel-dropdown-btn-delete:hover { + color: #D96D7A; +} diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectWalk.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectWalk.scss new file mode 100644 index 000000000..d03d47fba --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/popBox/selectWalk.scss @@ -0,0 +1,50 @@ +.select-walk-tree { + height: 350px; + overflow-y: auto; +} +.select-walk-tree .el-tree-node__content { + height: 34px; + line-height: 34px; +} +.select-walk-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: $--background-color-base; + font-weight: bold; + color: $--color-primary; +} +.select-walk-tree .el-tree .el-checkbox { + display: none; +} +.nz-pop-select-walk { + padding: 0 !important; +} +.walk-active { + color: $--color-primary; +} +.walk-tree-item { + height: 34px; + line-height: 34px; +} +.walk-detail { + z-index: 10000 !important; +} + +.walk-pop { + position: fixed; + transform: translate(-100%, -100%); +} +.walk-pop::after { + content: ''; + display: block; + width: 0; + height: 0; + overflow: hidden; + font-size: 0; + line-height: 0; + border: 5px; + border-style: dashed dashed dashed solid; + border-color: transparent transparent transparent #fff; + position: absolute; + right: 0; + top: 50%; + transform: translate(10px, -50%); +} diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasContextMenu.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasContextMenu.scss new file mode 100644 index 000000000..f44e0e33e --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasContextMenu.scss @@ -0,0 +1,39 @@ +.menus { + color: #000; + background-color: $--background-color-empty; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + min-width: 1.8rem; + text-align: left; + padding: 0.08rem 0; + + & > div { + line-height: 2.2; + a { + color: $--color-text-primary; + display: block; + padding: 0 0.2rem; + text-decoration: none; + cursor: pointer; + + &:hover { + color: #1890ff; + } + + &.flex { + display: flex; + } + + &.disabled { + color: #ccc; + cursor: default; + } + } + } + + .line { + background-color: transparent !important; + padding: 0; + margin: 0.05rem 0; + border-top: 1px solid $--border-color-light; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss new file mode 100644 index 000000000..793d222d7 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss @@ -0,0 +1,621 @@ +.props-box label { + line-height: 32px; + width: 100px; + font-size: 14px; + text-align: right; +} + +.props-box .iconLabel { + line-height: 32px; + width: 24px; + font-size: 14px; + text-align: center; +} + +.props-box .el-tabs--card > .el-tabs__header { + background: #EEEEEE; + border: none; +} + +.props-box .el-tabs--card > .el-tabs__header .el-tabs__item.is-active { + background: $--background-color-empty; + font-size: 14px; + color: $--color-primary; + font-weight: 700; + border-bottom-color: $--background-color-empty; + border-top: 3px solid $--color-primary; +} + +.props-box .el-tabs--card > .el-tabs__header .el-tabs__item { + box-sizing: content-box; + height: 31px; + line-height: 31px; +} +.metric-selector-input-box { + width: calc(100% - 120px) !important; +} + +.query-row .input-box { + margin: 0; +} + +.legend-title { + width: 100px; + margin-right: 10px; + text-align: left; + padding-left: 0; + margin-left: 10px; + height: 32px; + line-height: 32px; + font-size: 14px; + color: $--color-text-regular; +} + +.project-title { + background: #eeeeee; + height: 36px; + line-height: 36px; + border-radius: 0; + padding-left: 10px; +} + +.project-content { + margin: 10px; + height: calc(100% - 50px); + overflow-y: auto; + + .project-content-title { + background: $--background-color-base; + padding-left: 10px; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + height: 32px; + line-height: 31px; + margin-bottom: 5px; + } + + .project-content-box { + display: flex; + flex-wrap: wrap; + margin-bottom: 15px; + } + + .half.project-content-item { + width: calc(50% - 15px); + height: 64px; + + label { + width: auto; + } + } + + .project-content-item { + padding-left: 10px; + display: inline-block; + position: relative; + width: 100%; + + label { + font-family: PingFangSC-Regular; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + } + + .h32 { + height: 32px; + } + } +} + +.project-content.node-content { + overflow-y: unset; + height: auto; + + .el-select-dropdown__wrap { + max-height: 190px; + } +} + +.pens-data { + .el-form-item { + margin-bottom: 10px; + } + + .half-form-item { + width: calc(50% - 5px); + display: inline-block; + } + + .half-form-item--end { + margin-left: 5px; + } + + .full-form-item { + width: 100%; + display: inline-block; + } + + .form-row-title { + height: 32px; + line-height: 32px; + background: $--background-color-base; + font-size: 14px; + padding: 0 10px; + + .el-form-item__content { + height: 100%; + line-height: 32px; + + > div { + width: 100%; + } + } + .title__label { + font-size: 12px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + margin-left: 10px; + } + } + + .el-form-item__content { + > div { + width: 100%; + } + } + + .el-form-item__label { + line-height: 0; + padding: 0; + } + + .element-item { + padding: 10px 10px 10px 0; + width: 100%; + margin-bottom: 10px; + margin-top: 10px; + } + + .right-box-form .element-item.form-row-item { + width: calc(100% - 120px); + padding: 20px 20px 20px 0; + } + + .form-row-item .nz-icon-minus-position .nz-icon-minus-medium { + background: rgba(236, 127, 102, 0.1); + padding: 2px 6px; + color: #EC7F66; + } + + .form-row-item .nz-icon-minus-position { + right: 6px; + } +} + +.sub-box { + padding: 0 10px; +} + +.props-box { + .metric-selector-title { + margin-left: 10px; + width: 98px !important; + } + + .query-row .input-box { + margin-right: 0 !important; + } + + .el-cascader-node { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .nz-cascade-temp { + box-sizing: border-box; + max-width: 170px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .metric-selector-title { + background: $--background-color-empty !important; + } + .el-collapse-item__arrow.el-icon-arrow-right{ + display: inline-block !important; + } + .el-select--mini { + width: 100%; + } + .el-tabs.el-tabs--card { + height: 100%; + + .el-tabs__content { + height: calc(100% - 55px) !important; + overflow-y: auto; + padding: 0 10px; + } + } + + .el-collapse { + background: $--background-color-empty; + border: none; + font-size: 14px; + } + + .el-collapse-item__header { + padding: 0 10px; + background-color: #eeeeee; + height: 32px; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + line-height: 14px; + } + + .el-collapse-item { + margin-bottom: 10px; + } + .el-collapse-item__wrap { + padding: 0 10px; + background-color: $--background-color-empty; + border: none; + } + + .el-collapse-item__content { + padding: 10px 0 0 0; + } + + .el-input-number__decrease, .el-input-number__increase { + visibility: hidden; + outline: none; + } + + .el-input-number:focus { + .el-input-number__decrease, .el-input-number__increase { + visibility: visible; + outline: none; + } + } + + .el-input-number:focus-within { + .el-input-number__decrease, .el-input-number__increase { + visibility: visible; + outline: none; + } + } +} + +.thresholds-box { + background: $--background-color-empty; + border-top: 1px solid $--border-color-light; + border-left: 1px solid $--border-color-light; + border-radius: 2px; + font-size: 12px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + + .thresholds-title { + font-size: 12px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 500; + } + + .thresholds-cell { + border-bottom: 1px solid $--border-color-light; + border-right: 1px solid $--border-color-light; + padding: 5px 5px; + height: 42px; + line-height: 32px; + + .el-input-group__prepend { + padding: 0 10px; + } + + .is-arrow-active { + color: $--color-primary; + } + + .nz-icon.nz-icon-arrow-up1 { + margin-right: -15px; + } + } +} + +.value-mapping-add { + background: $--color-primary-light-3; + margin-bottom: 10px; + height: 24px; + line-height: 24px; + color: $--color-primary; + box-sizing: border-box; +} + +.mb10 { + margin-bottom: 10px; +} + +.mt10 { + margin-top: 10px; +} + +.p10 { + padding: 10px; +} + +.pl0 { + padding-left: 0; +} + +.special-select .el-select.el-select--small { + width: 100%; +} + +.special-select .el-input.el-input--prefix.el-input--suffix, .line-width .el-input.el-input--prefix.el-input--suffix { + border: 1px solid $--border-color-base; + height: 28px; +} + +.special-select .el-input__inner, .line-width .el-input__inner { + display: none; +} + +.special-select .el-input__prefix, .line-width .el-input__prefix { + height: 28px; + line-height: 28px; + color: #899FB7; + width: 100%; +} + +.special-select .el-input__prefix > div { + width: 100%; + height: 100%; +} + +.props-box { + position: relative; + width: 100%; + height: calc(100% - 20px); + padding-bottom: 20px; + + .iconfont { + cursor: pointer; + } + + .iconfontSize16 { + font-size: 16px; + margin-right: 5px; + } + + .flex { + display: flex; + + .full { + flex: 1; + } + } + + .flex-warp { + flex-wrap: wrap; + } + + .props-pen-item { + width: 50%; + + .p10 { + position: relative; + } + + .gradient-to { + .el-select.el-select--small { + vertical-align: top; + width: calc(100% - 42px); + margin-left: 5px; + } + } + + .gradient-to-color { + display: inline-block; + width: calc(100% - 70px); + } + } + + .icon-item { + width: 75%; + height: 100%; + padding-left: 25%; + } + + .icon-item svg { + width: 100%; + height: 100%; + } + + .del-btn { + position: absolute; + top: 0; + right: 0; + border: none; + cursor: pointer; + z-index: 2; + } + + .del-btn:hover { + background: #D8D7D7 !important; + } + + .bottom { + font-size: 14px; + position: absolute; + bottom: 10px; + left: 10px; + } + + .el-input-number--small { + width: auto; + } +} + +.color-content { + height: 0; + width: 0; + overflow: hidden; + position: absolute; + top: 15px; + left: 66px; +} + +.thresholds-cell .color-content { + top: 32px; + left: 137px; +} + +.color-tab { + position: absolute; + top: 43px; + left: 0; + height: 28px; + border-radius: 5px 5px 0 0; + width: 312px; + border: 1px solid #EBEEF5; + border-bottom: none; + background-color: $--background-color-empty; + display: flex; + justify-content: space-between; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); + z-index: 1; +} + +.color-tab div { + text-align: center; + flex: 1; + color: #909399; + transition: all .3s cubic-bezier(.645, .045, .355, 1); + background: #E4E7ED; + cursor: pointer; + border-top: 2px solid transparent; +} + +.color-tab div:hover { + color: #409EFF; +} + +.color-tab .color-active { + background-color: $--background-color-empty; + font-size: 14px; + color: #FA901C; + font-weight: 700; + border-color: #FA901C;; +} + +.color { + position: relative; +} + +.color-show { + border: 1px solid $--border-color-light; + border-radius: 5px; + display: flex; + align-items: center; + width: 100%; + height: 30px; +} + +.color-show .color-text { + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; +} + +.color-show-left { + width: 18px; + height: 18px; + border: 1px solid $--border-color-light; + border-radius: 5px; + margin: 0 5px; +} + +.color-arrows { + color: #C0C4CC; + position: absolute; + right: 12px; +} + +.color-arrows .nz-icon { + font-size: 12px; +} + +.v-sub { + vertical-align: sub; +} + +.font12 { + font-size: 12px; +} + +.font20 { + font-size: 20px; +} + + +.can-clear.el-color-dropdown .el-color-dropdown__link-btn { + display: inline-block !important; + margin-right: 5px; +} + +.no-style-class.el-color-picker__panel { + border-radius: 0 0 5px 5px; + border-top: none; +} + +.icon-item { + width: 75%; + height: 100%; + padding-left: 25%; +} + +.icon-item svg { + width: 180px; + height: 100%; +} + +.el-color-predefine__color-selector:nth-child(10n+1) { + margin-left: 8px; +} + +.el-color-predefine__color-selector { + margin: 0 0 8px 8px; + width: 22px; + height: 22px; +} +.color-before-select { + width: 60px; + border-radius: 4px 0 0 4px; + background: $--border-color-light; +} +.color-before-select .el-input__inner { + background: rgb(245, 247, 250); +} + +.color-before-select .el-input__prefix { + left: 1px; + width: 30px; + height: 29px; + top: 1px; +} + +.color-before-select .el-select-dropdown__item { + text-align: center; +} diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss b/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss new file mode 100644 index 000000000..de344cd76 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss @@ -0,0 +1,300 @@ +.mc { + .right-box .list-page .main-container { + background: $--background-color-empty; + } + + .right-box-project-alert { + width: 850px; + padding-right: 30px; + } + + .right-box-title { + font-weight: bold; + padding-left: 20px; + position: absolute; + z-index: 1; + } + + .mc { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + z-index: 11; + } + + .top-tools { + float: right; + } + + .top-tools > div { + margin-top: 6px; + } + + .el-tooltip { + display: inline-block; + } + + .red, .green { + color: white; + padding: 2px 5px; + border-radius: 4px; + } + + .severity .P1 { + background: #F5846A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; + } + + .severity .P2 { + background: #F7A54A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; + } + + .severity .P3 { + background: #F1C13D; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; + } +} +/* end--table*/ +.expression-info{ + padding: 5px; + height: 100%; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + .expression-info-title{ + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 600; + line-height: 40px; + height: 40px; + border-bottom: 1px dashed $--border-color-base; + } + .expression-info-content{ + height: calc(100% - 60px); + overflow-y: auto; + padding:5px; + } + .info-title{ + overflow: hidden; + padding-right: 10px; + text-overflow: ellipsis; + line-height: 20px; + font-weight: 500; + word-break:keep-all; /* 不换行 */ + white-space:nowrap; /* 不换行 */ + } + .info-content{ + text-align: center; + } +} +.pop-data-info-content.info-content { + display: flex; + margin-right: 15px; + flex-direction: column; + justify-content: space-between; + + .info-box { + background: $--background-color-empty; + border: 1px solid $--border-color-light; + width: 334px; + margin-bottom: 15px; + box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 9px -1px rgba(205, 205, 205, 0.77); + } + .info-box-title { + background: $--background-color-1; + font-size: 14px; + color: $--color-text-primary; + height: 26px; + line-height: 26px; + padding-left: 12px; + font-weight: bold; + } + .info-box-content { + font-size: 12px; + color: $--color-text-primary; + } + .content-box { + padding: 0 12px; + height: 29px; + line-height: 24px; + } + .info-box-content .content-box:not(:last-child) { + border-bottom: 1px solid rgba(205, 205, 205, 0.77); + } + .content-title { + font-size: 12px; + color: $--color-text-primary; + width: 120px; + display: inline-block; + border-right: 1px solid rgba(205, 205, 205, 0.77); + padding: 3px 0; + } + .content-text { + width: 175px; + color: $--color-text-primary; + font-size: 12px; + display: inline-block; + padding: 3px 5px; + } + .module-type { + border: 1px solid #DCDCDC; + text-align: center; + width: 44px; + display: inline-block; + height: 20px; + margin: 0 auto; + line-height: 20px; + } + .module-type:first-child { + border-right-color: rgba(255, 140, 14, 0.54); + border-radius: 4px 0 0 4px; + margin-right: -4px; + border-right: none; + } + .module-type:last-child { + border-left-color: rgba(255, 140, 14, 0.54); + border-radius: 0 4px 4px 0; + z-index: -1; + } + .module-type-select { + border-color: rgba(255, 140, 14, 0.54); + color: rgba(255, 140, 14, 0.54); + } +} + +.main-content { + display: flex; + margin-right: 15px; + flex-direction: column; + justify-content: space-between; + + .tooltip--row { + position: relative; + height: 70px; + + .legend-value { + font-size: 12px; + color: $--color-text-primary; + position: absolute; + left: 150px; + top: 6px; + } + + .tooltip-chart { + height: 100%; + width: 100%; + } + } + + .tooltip-alert--title span:first-of-type { + font-weight: 600; + } + + .tooltip-alert--title span:last-of-type { + padding-left: 10px; + } + + .tooltip-alert--row:last-of-type { + margin-bottom: unset; + } + + .tooltip-alert--row { + padding: 0 10px; + margin-bottom: 10px; + height: 20px; + font-size: 12px; + display: flex; + + .row--label { + width: 40px; + border-radius: 4px 0 0 4px; + color: white; + text-align: center; + } + + .row--label__p1 { + background-color: #F2866E; + border-color: #F2866E; + } + + .row--label__p2 { + background-color: #F89984; + border-color: #F89984; + } + + .row--label__p3 { + background-color: #F7BA78; + border-color: #F7BA78; + } + + .row--value { + padding: 0 8px; + min-width: 40px; + border: 1px solid; + border-radius: 0 4px 4px 0; + text-align: center; + } + + .row--value__p1 { + color: #F2866E; + border-color: #F2866E; + } + + .row--value__p2 { + color: #F89984; + border-color: #F89984; + } + + .row--value__p3 { + color: #F7BA78; + border-color: #F7BA78; + } + } + .main-box { + background: $--background-color-empty; + border: 1px solid $--border-color-light; + width: 190px; + margin-bottom: 15px; + } + .main-box-title { + background: $--background-color-1; + font-size: 14px; + color: $--color-text-primary; + height: 26px; + line-height: 26px; + padding-left: 12px; + } + .main-box-content { + font-size: 12px; + color: $--color-text-primary; + padding: 12px; + } + .main-box-content .content-box:not(:last-child) { + margin-bottom: 5px; + } + .content-title { + color: $--color-text-regular; + } + .colorFFF { + color: #FFFFFF; + vertical-align: middle; + display: inline-block; + padding: 1px; + font-size: 10px; + margin-right: 5px; + line-height: 1; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss b/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss new file mode 100644 index 000000000..2901a44eb --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss @@ -0,0 +1,73 @@ +.tooltip-box { + background: $--background-color-empty; + box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.11); + border-radius: 4px; + padding: 10px; + max-height: 400px; + min-height: 200px; + height: 100%; + box-sizing: border-box; + + .tooltip-box-chart { + border: 1px solid $--border-color-light; + max-height: 400px; + min-height: 200px; + height: 100%; + display: flex; + overflow: hidden; + + .line-chart { + width: 300px; + flex: 1; + + .resize-box { + border: none; + } + } + + .chart-remark { + white-space: pre-wrap; + width: 110px; + font-size: 12px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + word-break: break-word; + padding-right: 5px; + height: calc(100% - 24px) !important; + margin-top: 24px; + padding-top: 5px; + line-height: 16px; + } + } + + .tooltip-box-info { + border: 1px solid $--border-color-light; + background: $--background-color-empty; + max-height: 400px; + min-height: 200px; + min-width: 186px; + max-width: 300px; + } + + .topology-chart-title { + text-align: left; + width: 100%; + line-height: 20px; + height: 24px; + padding: 5px 10px 0 10px; + box-sizing: border-box; + } + .topology-tool-tip .topology-chart-title { + margin-top: -23px; + border-bottom: 1px dashed $--border-color-base; + padding-left: 0; + margin-left: 10px; + padding: 0; + box-sizing: border-box; + width: 388px; + } + .topology-tool-tip .line-area { + margin-top: -15px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss b/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss new file mode 100644 index 000000000..dc6d83171 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss @@ -0,0 +1,173 @@ +.scale-number-popover { + width: 111px; + min-width: 111px; + + .el-popover { + width: 100%; + } +} +.scale-number-popover .scale-num-pop { + text-align: center; + font-size: 14px; + color: $--color-text-regular; + font-weight: 400; + width: 91px; + cursor: pointer; +} +.scale-number-popover .scale-num-pop.is-active { + color: $--color-primary; +} + +.tool-top { + border-radius: 2px; + display: inline-flex; + + .nz-icon { + font-size: 14px; + color: $--color-text-regular; + } + + .top-tool-item { + cursor: pointer; + background: $--background-color-empty; + border: 1px solid $--border-color-base; + border-radius: 2px; + padding: 8px 11px; + line-height: 14px; + margin-right: 10px; + } + .top-tool-item-scale { + margin-left: 40px; + padding: 0; + position: relative; + + .percent { + position: absolute; + top: 7px; + left: 68px; + font-size: 12px; + } + + .scale-number { + width: 91px; + display: flex; + height: 30px; + line-height: 30px; + position: relative; + padding: 0 10px; + justify-content: space-between; + + .scale-number-content { + width: 59px; + height: 100%; + text-align: center; + font-size: 12px; + display: block; + line-height: 28px; + } + + .scale-number-symbol { + background: $--background-color-1; + height: 16px; + width: 16px; + display: inline-block; + color: $--color-text-primary; + font-size: 14px; + line-height: 16px; + border-radius: 50%; + text-align: center; + margin-top: 6px; + } + } + + /deep/ .el-input--mini { + input { + border: none; + } + } + + /deep/ .el-input-number--mini { + width: 111px; + } + + /deep/ .el-input-number__decrease, /deep/ .el-input-number__increase { + border: none; + border-radius: 100%; + width: 16px; + height: 16px; + line-height: 16px; + margin-top: 6px; + } + + /deep/ .el-input-number__decrease { + margin-left: 5px; + } + + /deep/ .el-input-number__increase { + margin-right: 5px; + } + } + .top-tool-item-switch { + padding: 5px 11px; + + label { + vertical-align: middle; + } + } + .top-tool-item-disabled { + color: #CECECE; + opacity: 0.3; + } + .tool-item-active { + background: #1a1a1a; + color: #fff; + } + .mb10 { + margin-bottom: 10px; + } + + .mt10 { + margin-top: 10px; + } + .p10 { + padding: 10px; + } + .pl0 { + padding-left: 0; + } + .special-select { + vertical-align: middle; + } + .special-select .el-select.el-select--small { + width: 100%; + } + .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix { + border: 1px solid $--border-color-base; + height: 28px; + } + .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner { + display: none; + } + .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix { + height: 28px; + line-height: 28px; + color: #899FB7; + width: 100%; + } + .special-select /deep/ .el-input__prefix > div { + width: 100%; + height: 100%; + } + .props-pen-item { + display: inline-block; + width: 130px; + } + .icon-item { + width: 100%; + height: 100%; + } + .icon-item svg { + width: 100%; + height: 100%; + } +} diff --git a/nezha-fronted/src/components/common/project/chart.scss b/nezha-fronted/src/assets/css/components/common/project/chart.scss similarity index 98% rename from nezha-fronted/src/components/common/project/chart.scss rename to nezha-fronted/src/assets/css/components/common/project/chart.scss index 6b5d921f4..065ce2a75 100644 --- a/nezha-fronted/src/components/common/project/chart.scss +++ b/nezha-fronted/src/assets/css/components/common/project/chart.scss @@ -4,7 +4,7 @@ clear: both; } .clearfix{ - margin-bottom: 0px; + margin-bottom: 0; } .hidden{ visibility: hidden; @@ -30,7 +30,7 @@ font-size:12px; text-align:left; left: 10px; - bottom: 0px; + bottom: 0; line-height: 18px; position: absolute; padding-bottom:3px; @@ -57,7 +57,7 @@ height: 180px; li { padding-left:15px !important; - padding-right:0px !important; + padding-right:0 !important; width:140px; text-align: left; i { @@ -69,7 +69,7 @@ height: 36px; li { padding-left:15px !important; - padding-right:0px !important; + padding-right:0 !important; width:140px; text-align: left; i { @@ -144,7 +144,7 @@ } .chart-warring-popper[x-placement^=top] .popper__arrow::after { border-top-color: #e6a23c; - bottom:0px; + bottom:0; } .chart-warring-popper[x-placement^=bottom] .popper__arrow::after { border-bottom-color: #e6a23c; @@ -591,7 +591,7 @@ } .el-dialog__header{ - padding: 20px 20px 0px; + padding: 20px 20px 0; } } diff --git a/nezha-fronted/src/components/common/project/topology.scss b/nezha-fronted/src/assets/css/components/common/project/topology.scss similarity index 80% rename from nezha-fronted/src/components/common/project/topology.scss rename to nezha-fronted/src/assets/css/components/common/project/topology.scss index 8b61412f2..d3db0c6f9 100644 --- a/nezha-fronted/src/components/common/project/topology.scss +++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss @@ -1,34 +1,3 @@ -/deep/ .el-collapse-item__arrow.el-icon-arrow-right{ - display: none !important; -} -/deep/ .el-collapse-item .is-active .nz-icon-arrow-right{ - transform: rotate(90deg); - color: #FA901C; -} -/deep/ .el-collapse-item .title-delete{ - display: none; -} -/deep/ .el-collapse-item .nz-icon-arrow-right{ - transition: transform .3s; - color: #BEBEBE; - margin-right: 5px; -} -/deep/ .el-collapse-item:hover{ - .el-collapse-item__header{ - color: #FA901C; - } - .nz-icon-arrow-right{ - color: #FA901C; - } - .title-delete{ - display: block; - color: #FA901C; - } -} -.edit-topologyLine{ - background: rgba(196,196,196,0.4) !important; - box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27); -} .project-box{ @keyframes model-error-animation { 0% { @@ -63,7 +32,37 @@ width: 48px; line-height: 48px; } - + .el-collapse-item__arrow.el-icon-arrow-right{ + display: none !important; + } + .el-collapse-item .is-active .nz-icon-arrow-right{ + transform: rotate(90deg); + color: $--color-primary; + } + .el-collapse-item .title-delete{ + display: none; + } + .el-collapse-item .nz-icon-arrow-right{ + transition: transform .3s; + color: #BEBEBE; + margin-right: 5px; + } + .el-collapse-item:hover{ + .el-collapse-item__header{ + color: $--color-primary; + } + .nz-icon-arrow-right{ + color: $--color-primary; + } + .title-delete{ + display: block; + color: $--color-primary; + } + } + .edit-topologyLine{ + background: rgba(196,196,196,0.4) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27); + } .model-error.nz-icon-shuidi { color: #FADED7; animation: model-error-animation .6s infinite ease-in-out; @@ -103,15 +102,12 @@ @keyframes scaleTool-in { from { - top: 0px; - left: 0px; + top: 0; + left: 0; transform: scale(0.5); } } - .moduleIdRect{ - /*border: 4px dashed #FA901C;*/ - } .module-rect-top{ border-top: 4px dashed #ff8c0a; position: absolute; @@ -177,7 +173,7 @@ } .network-pop .no-selPop { - color: #999 !important; + color: $--color-text-secondary !important; } .network-pop .no-selPop .nz-icon-liubianxing { @@ -185,7 +181,7 @@ } .network-pop .no-selPop .nz-icon-chart { - color: #999; + color: $--color-text-secondary; } .network-info { @@ -207,15 +203,15 @@ .facade-top > div{ width: 18%; min-width: 315px; - background: #FFFFFF; + background: $--background-color-empty; margin-right: 9px; padding: 20px; - border: 1px solid #FFFFFF; + border: 1px solid $--background-color-empty; box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77); } .facade-top-title{ font-size: 16px; - color: #333333; + color: $--color-text-primary; font-weight: bold; padding: 5px 0; } @@ -237,7 +233,7 @@ justify-items: center; flex-direction: column; height: calc(100% - 30px); - align-items:flex-start; + align-items: flex-start; } .facade-top-right-content > div{ min-width: 84px; @@ -306,8 +302,8 @@ } .el-dropdown-title { - background: #FFFFFF; - border: 1px solid $--primary-border-color; + background: $--background-color-empty; + border: 1px solid $--border-color-base; border-radius: 2px; width: 66px; height: 28px; @@ -325,13 +321,13 @@ position: relative; border-radius: 2px; overflow: visible; - background: #fff; + background: $--background-color-empty; .pickTime{ margin-right: 10px; } .project-title { height: 55px; - padding-bottom: 0px; + padding-bottom: 0; } .drag-header { @@ -351,11 +347,6 @@ display: flex; height: calc(100% - 1px); width: 100%; - /* - height: calc(100% - 65px); - width: calc(100% - 10px); - margin: 5px; - */ position: relative; .tools { @@ -365,7 +356,7 @@ position: absolute; z-index: 1 !important; left: 20px; - background-color: #f9f9f9; + background-color: $--background-color-base; .title { float: left; @@ -385,9 +376,9 @@ z-index: 1 !important; right: 0; top: 0; - background: #FFFFFF; + background: $--background-color-empty; box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09); - border-radius: 0px; + border-radius: 0; } } .overview-page{ @@ -402,7 +393,7 @@ width: 100%; } -.special-select /deep/ .el-select-dropdown { +.special-select .el-select-dropdown { width: 130px !important; .el-select-dropdown__item { @@ -410,23 +401,23 @@ } } -.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix { +.special-select .el-input.el-input--prefix.el-input--suffix, .line-width .el-input.el-input--prefix.el-input--suffix { border: 1px solid #DCDFE6; height: 28px; } -.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner { +.special-select .el-input__inner, .line-width .el-input__inner { display: none; } -.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix { +.special-select .el-input__prefix, .line-width .el-input__prefix { height: 28px; line-height: 28px; color: #899FB7; width: 100%; } -.special-select /deep/ .el-input__prefix > div { +.special-select .el-input__prefix > div { width: 100%; height: 100%; } @@ -437,14 +428,14 @@ .upload-pic-label{ text-align: right; font-size: 14px; - color: #666666; + color: $--color-text-regular; letter-spacing: 0; font-weight: 400; height: 30px; line-height: 30px; padding-right: 8px; } - /deep/ .el-upload--text{ + .el-upload--text{ width: 100%; .el-upload-dragger{ width: 100%; @@ -456,30 +447,30 @@ height: 30px; text-align: center; font-size: 14px; - color: #666666; + color: $--color-text-regular; font-weight: 400; line-height: 30px; cursor: pointer; .el-icon-plus{ - color: #FA901C; + color: $--color-primary; } } .top-tool-btn{ height: 32px; width: 32px; - border: 1px solid $--primary-border-color; + border: 1px solid $--border-color-base; outline: none; border-radius: 2px; - background-color: #F9F9F9; + background-color: $--background-color-base; -webkit-transition: background-color linear .1s; transition: background-color linear .1s; padding: 0; } .top-tool-btn:hover{ - background-color: #fff; + background-color: $--background-color-empty; } .top-tool-btn:focus{ - background-color: #fff; + background-color: $--background-color-empty; border-color: #FBCEA4; } .top-tool-btn:focus .nz-icon{ @@ -491,7 +482,7 @@ right: 40px; height: 90px; width: 35px; - border: 1px solid #E7EAED; + border: 1px solid $--border-color-light; box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77); display: flex; flex-direction: column; @@ -499,7 +490,7 @@ width: 100%; height: 50%; opacity: 0.42; - background: #FFF; + background: $--background-color-empty; align-items: center; display: flex; justify-content: center; diff --git a/nezha-fronted/src/assets/css/components/common/project/topologyL5.scss b/nezha-fronted/src/assets/css/components/common/project/topologyL5.scss new file mode 100644 index 000000000..aef3b0f0e --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/project/topologyL5.scss @@ -0,0 +1,143 @@ +.el-dropdown-menu { + .project-topology-add-node { + .el-collapse-item__header { + padding: 0 10px; + background-color: $--background-color-empty; + height: 32px; + } + + .el-collapse-item__header.is-active { + background: $--background-color-base; + font-size: 14px; + color: $--color-primary; + font-weight: 700; + + .el-collapse-item__arrow { + color: $--color-text-regular; + } + } + + .el-collapse-item__wrap { + padding: 0 10px; + background-color: $--background-color-empty; + } + + .el-collapse-item__content { + padding: 12px 0; + display: flex; + flex-wrap: wrap; + } + + .el-card__body { + padding: 0; + height: 100%; + } + + .handle { + position: absolute; + z-index: 2; + } + + .buttons { + padding: 11px; + display: inline-block; + position: relative; + vertical-align: middle; + width: 26px; + + .delIcon { + position: absolute; + width: 16px; + height: 16px; + border-radius: 10px; + font-size: 16px; + line-height: 16px; + text-align: center; + right: 2px; + top: 2px; + color: $--color-primary; + display: none; + cursor: pointer; + } + + a { + display: inline-block; + color: $--color-text-primary; + width: 26px; + height: 26px; + text-align: center; + text-decoration: none !important; + cursor: pointer; + line-height: 26px; + + .iconfont { + font-size: 24px; + } + + img { + max-width: 26px; + max-height: 26px; + } + + &:hover { + color: #1890ff; + } + } + + .upload-icon-box { + .el-icon-plus { + font-size: 14px; + margin-bottom: 10px; + } + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + height: 100%; + } + } + .buttons{ + border: 1px solid transparent; + } + .buttons:hover { + border-color: $--color-primary; + .delIcon { + display: inline-block; + } + } + } + + .avatar-uploader { + line-height: 30px; + + .el-icon-plus { + font-size: 12px; + color: $--color-primary; + margin: 0 8px 0 15px; + } + + .el-upload--picture-card { + width: 100%; + height: 100%; + border: none; + color: #666; + font-size: 14px; + line-height: 30px; + text-align: left; + } + + .el-upload--picture-card:hover, .el-upload:focus { + color: $--color-text-regular; + } + } + + .avatar-uploader:active el-upload--picture-card { + color: #DB8B8B; + } + + .avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus { + color: #DB8B8B; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss new file mode 100644 index 000000000..d43deb051 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss @@ -0,0 +1,202 @@ +.right-box-add-endpoint { + .nz-icon.nz-icon-shanchu1 { + font-size: 14px; + } + + /* begin--子弹框*/ + .right-sub-box { + width: 170px; + height: 225px; + position: fixed; + z-index: 2; + padding: 0; + } + + .asset-and-endpoint{ + width: 100%; + display: flex; + height: 480px; + } + .right-box-asset-table{ + width: 37.5%; + margin-right: 2%; + background: $--background-color-empty; + border: 1px solid $--border-color-light; + border-radius: 2px; + position: relative; + } + .disabled-asset-table{ + position: absolute; + width: calc(100% - 2px); + height: calc(100% - 2px); + z-index: 2; + background: #999999; + left: 1px; + top: 1px; + opacity: 0.1; + } + .asset-allselect{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + .right-box-endpoint-table{ + width: 60%; + background: $--background-color-empty; + border: 1px solid $--border-color-light; + border-radius: 2px; + } + /* end--table*/ + + /* end--子弹框*/ + .search-box{ + width: calc(100% - 10px); + padding: 10px 5px; + border-bottom: 1px solid $--border-color-light; + display: flex; + } + .jump-input{ + width: 38px; + height: 24px; + } + .jump-pages{ + font-size: 14px; + color: $--color-text-primary; + text-align: left; + line-height: 24px !important; + height: 24px !important; + font-weight: 400; + margin-left: 5px; + min-width: auto !important; + } + .jump-input .el-input__inner{ + padding: 0 5px; + height: 24px; + line-height: 24px; + } + .table-bottom{ + display: flex; + justify-content: space-between; + align-items: center; + } + .el-pagination .btn-next, .el-pagination .btn-prev{ + margin-top: 3px; + } + .add-endpoint{ + display: inline-block; + background: $--background-color-base; + border: 1px solid $--border-color-base; + border-radius: 2px; + width: 28px; + height: 28px; + margin: 7px 7px 0 0; + text-align: center; + line-height: 28px; + } + .top-tool-btn{ + height: 32px; + width: 32px; + border: 1px solid $--border-color-base; + outline: none; + border-radius: 2px; + background-color: $--background-color-base; + -webkit-transition: background-color linear .1s; + transition: background-color linear .1s; + padding: 0; + } + .top-tool-btn:hover{ + background-color: $--background-color-empty; + } + .top-tool-btn:focus{ + background-color: $--background-color-empty; + border-color: #FBCEA4; + } + .top-tool-btn:focus .nz-icon{ + color: #FBCEA4; + } + .el-form-item__content .el-input-group { + vertical-align: unset; + } +} +.el-table__row.hide-row{ + display: none !important; +} +.right-box-add-endpoint { + .right-box-form>.el-form-item { + margin-left: 0; + } + .right-box-form-left.right-box-form .el-form-item .el-form-item__label { + width: 100px; + } + .asset-table .el-table td ,.asset-table .el-table th{ + padding: 3px 0 !important; + } +} + +.endpoint-asset-search .el-autocomplete>.el-input { + position: absolute; +} +.endpoint-asset-search .el-select { + width: 100px; +} +.endpoint-asset-search .el-cascader .el-input { + position: absolute; + height: 24px; + line-height: 24px; + + input { + height: 24px; + line-height: 24px; + } +} +.endpoints-box-endpoints-title { + color: black; + font-weight: 400; +} + +.right-box-endpoint-table .cell { + padding: 0 2px 0 10px; +} +.endpoints-box-endpoints .el-table .el-table__row td{ + padding: 5px 0; +} +.module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner, +.endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner { + cursor: pointer; + background-color: $--background-color-empty; + border-color: $--border-color-base; + color: $--color-text-regular; + transition: border-color .2s cubic-bezier(.645,.045,.355,1); +} +.module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, +.endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover { + border-color: #c0c4cc; +} + +.endpoints-box-endpoints .el-form-item { + margin-bottom: 0; +} +.endpoints-box-endpoints .el-form-item.is-error { + margin-bottom: 22px; +} +.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus, +.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus { + border-color: #F56C6C !important; +} + +.asset-tip { + display: table; + + .tip-row { + display: table-row; + + .tip-cell { + display: table-cell; + padding: 2px 4px; + } + } +} +.error{ + border-color: #F56C6C !important; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss new file mode 100644 index 000000000..bae4b6160 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss @@ -0,0 +1,59 @@ +.severity-circle{ + position: absolute; + left: 10px; + top: 0; +} +.severity-box{ + position: relative; +} +.severity-box /deep/ .el-select .el-input__inner{ + padding-left: 25px; +} +.half-form-item { + width: calc(50% - 5px); + display: inline-block; + .el-form-item__content,.el-select{ + width: 100%; + } +} +.right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{ + width: 100%; +} +/deep/ .rich-text-editor{ + line-height: 24px; +} +/deep/ .el-input-group__prepend{ + position: relative; + .hide-icon{ + width: 38px; + .el-input__inner{ + border: none; + text-align: center; + } + } +} +.alert-rule-split-title{ + background: $--background-color-base; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + line-height: 24px; + padding-left: 10px; + margin-bottom: 10px; + height: 24px; +} +/deep/ .el-form-item__content .el-input-group{ + vertical-align: middle; +} +.severity-item{ + color: $--color-text-secondary; + font-size: 12px; + max-width: 120px; + overflow: hidden; +} +.text-ellipsis{ + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss new file mode 100644 index 000000000..dde785655 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss @@ -0,0 +1,98 @@ +.range-time { + /deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group { + width: 100% + } + + /deep/ .el-radio-button { + width: 14.2% + } + + /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini { + width: 100%; + } + + .datepicker { + margin-top: 20px; + display: flex; + justify-content: space-between; + .datepicker-box{ + width: 48%; + flex: 1; + position: relative; + /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{ + width: 100%; + } + /deep/ .el-input__inner{ + text-align: center; + } + .datepicker-title{ + position: absolute; + left: 15px; + z-index: 1; + } + } + } +} +.matchers{ + /deep/ .el-input__prefix{ + left: 0; + } + /deep/ .el-form-item__error{ + left: 126px; + padding-top: 5px; + } + .matchers-type{ + display: flex; + justify-content: space-between; + margin-top: 20px; + .matchers-type-title{ + width: 125px; + background: $--border-color-light; + font-family: ArialMT; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + text-align: center; + } + /deep/ .matchers-type-title.el-select--small .el-input__inner{ + background:$--border-color-light; + font-family: ArialMT; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + text-align: center; + border: none; + } + .matchers-type-content{ + flex: 1; + } + } +} +/deep/ .silence-matchers-value{ + width: calc(100% - 100px); +} +/deep/ .silence-matchers-key{ + width: 100%; +} +.silence-matchers-regex{ + margin-left: 10px; +} +/deep/ .param-box-row-key{ + width: 36%; +} +/deep/ .param-box-row-value{ + width: 50%; +} +.module-add-label{ + display: inline-block; + width: 300px; + height: 18px; + background: #FFFCF9; + border: 1px solid #FFE0BD; + border-radius: 2px; + text-align: center; + line-height: 18px; + margin-right: 80px; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/asset/assetBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/asset/assetBox.scss new file mode 100644 index 000000000..d4c89c79d --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/asset/assetBox.scss @@ -0,0 +1,44 @@ +.placeholder-emphasize input::-webkit-input-placeholder { + color: $--color-text-regular !important; +} +.el-form__sub-title { + border: 1px solid $--border-color-light; + color: $--color-text-regular; + font-size: 14px; + padding: 0 10px; + line-height: 32px; + margin: 0 0 20px; + display: flex; + justify-content: space-between; + .el-switch { + line-height: 32px; + height: 32px; + } + .nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; + color: #BDBDBD; + font-size: 12px; + } + .nz-icon-arrow-down.is-active{ + transform: rotate( + -90deg + ); + } +} +.need-rotate.nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; +} +.need-rotate.nz-icon-arrow-down.is-active{ + transform: rotate( + -180deg + ); +} +.nz-btn-size-normal-new.nz-btn-style-light-new { + font-size: 12px; + color: #3C92F1; + i { + font-size: 12px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/assetStateBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/assetStateBox.scss new file mode 100644 index 000000000..85bcbff86 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/assetStateBox.scss @@ -0,0 +1,20 @@ +.right-box-asset-state { + .right-box-sub-title { + #add-notification { + border: none; + outline: none; + cursor: pointer; + + i { + font-size: 17px; + background-color: $--background-color-base; + } + } + } +} + +.notification-item { + .el-select { + width: 100px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/batchAddEndpoint.scss b/nezha-fronted/src/assets/css/components/common/rightBox/batchAddEndpoint.scss new file mode 100644 index 000000000..a8582d035 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/batchAddEndpoint.scss @@ -0,0 +1,34 @@ +.right-box-modify-endpoint { + .error { + border: 1px solid #F56C6C !important; + } + .right-box-sub-title { + width: calc(100% - 70px); + margin-left: 15px; + } + .el-table thead .cell { + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + line-height: 14px; + font-weight: 400; + padding: 5px; + } + .table-operation-items { + display: flex; + justify-content: space-around; + } + .el-table th { + padding: 7px 0; + } + .configs-endpoint { + border-radius: 4px; + padding: 2px 7px; + } + .configs-endpoint.metrics { + color: #3C92F1; + } + .configs-endpoint.logs { + color: #25BF9A; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss b/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss new file mode 100644 index 000000000..aa10817e8 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss @@ -0,0 +1,327 @@ +.right-box-batch-modify-endpoint { + .nz-icon.nz-icon-shanchu1 { + font-size: 14px; + } + + /* begin--子弹框*/ + .right-sub-box { + width: 170px; + height: 225px; + position: fixed; + z-index: 2; + padding: 0; + } + /* begin--搜索框*/ + .endpoint-asset-search { + position: relative; + margin: 0; + z-index: 11; + } + .endpoint-asset-search button { + height: 24px !important; + } + .endpoint-asset-search-dropdown { + position: absolute; + top: 25px; + background-color: #444; + border-radius: 2px; + width: 58px; + left: 0; + } + .endpoint-asset-search-dropdown-item { + text-align: center; + line-height: 22px; + height: 22px; + cursor: default; + color: white; + font-size: 12px; + } + .endpoint-asset-label-txt { + display: inline-block; + min-width: 19px; + text-align: center; + } + .endpoint-asset-search-dropdown-item:first-of-type { + border-radius: 4px 4px 0 0; + } + .endpoint-asset-search-dropdown-item:last-of-type { + border-radius: 0 0 4px 4px; + } + .endpoint-asset-search-dropdown-item:hover { + background-color: #222; + color: #ff9900; + } + .endpoint-asset-search-input { + display: inline-block; + width: 100px; + vertical-align: top; + } + .checkbox-mc{ + position: absolute; + top: 0; + left: 0; + width: 14px; + height: 14px; + z-index:1; + } + /* end--搜索框*/ + + /* begin--table*/ + .endpoint-sub-table { + padding-top: 13px; + height: calc(100% - 83px); + width: 320px; + } + .endpoint-sub-table-head { + line-height: 28px; + height: 30px; + width: 600px; + } + .endpoint-sub-table-row, .endpoint-sub-table-row-disabled { + line-height: 28px; + height: 30px; + color: $--color-text-regular; + position: relative; + width: 600px; + } + .endpoint-sub-table-row:hover { + background-color: #dadada; + cursor: default; + } + .endpoint-sub-table-row-active { + background-color: #dadada; + } + .endpoint-sub-table-row-selected { + background-color: $--color-text-regular; + color: white; + } + .endpoint-sub-table-col { + display: inline-block; + padding-left: 10px; + width: 100px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + .endpoint-sub-table-paginate-all { + position: absolute; + left: 10px; + bottom: 17px; + color: #5a5a5a; + } + .endpoint-sub-table-body { + font-size: 15px; + position: relative; + height: calc(100% - 37px); + } + .endpoint-sub-table-body-dialog { + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.7); + position: absolute; + z-index: 10; + top: 0; + } + .endpoints-clear-btn { + margin: 6px 0 0 7px; + } + .asset-and-endpoint{ + width: 100%; + display: flex; + height: 480px; + } + .right-box-asset-table{ + width: 37.5%; + margin-right: 2%; + background: $--background-color-empty; + border: 1px solid $--border-color-light; + border-radius: 2px; + position: relative; + } + .disabled-asset-table{ + position: absolute; + width: calc(100% - 2px); + height: calc(100% - 2px); + z-index: 2; + background: #999999; + left: 1px; + top: 1px; + opacity: 0.1; + } + .asset-allselect{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + .right-box-endpoint-table{ + + width: 100%; + background: $--background-color-empty; + border: 1px solid $--border-color-light; + border-radius: 2px; + } + /* end--table*/ + + /* end--子弹框*/ + .search-box{ + width: calc(100% - 10px); + padding: 10px 5px; + border-bottom: 1px solid $--border-color-light; + display: flex; + } + .new-search .search-input-all{ + width: auto; + flex: 1; + } + .jump-input{ + width: 38px; + height: 24px; + } + .jump-pages{ + font-size: 14px; + color: #333333; + text-align: left; + line-height: 24px !important; + height: 24px !important; + font-weight: 400; + margin-left: 5px; + min-width: auto !important; + } + .jump-input .el-input__inner{ + padding: 0 5px; + height: 24px; + line-height: 24px; + } + .table-bottom{ + display: flex; + justify-content: space-between; + align-items: center; + } + .el-pagination .btn-next, .el-pagination .btn-prev{ + margin-top: 3px; + } + .add-endpoint{ + display: inline-block; + background: $--background-color-base; + border: 1px solid $--border-color-base; + border-radius: 2px; + width: 28px; + height: 28px; + margin: 7px 7px 0 0; + text-align: center; + line-height: 28px; + } + .top-tool-btn{ + height: 32px; + width: 32px; + border: 1px solid $--border-color-base; + outline: none; + border-radius: 2px; + background-color: $--background-color-base; + -webkit-transition: background-color linear .1s; + transition: background-color linear .1s; + padding: 0; + } + .top-tool-btn:hover{ + background-color: #fff; + } + .top-tool-btn:focus{ + background-color: #fff; + border-color: #FBCEA4; + } + .top-tool-btn:focus .nz-icon{ + color: #FBCEA4; + } + .el-form-item__content .el-input-group { + vertical-align: unset; + } +} +.el-table__row.hide-row{ + display: none !important; +} +.right-box-modify-endpoint { + .right-box-form>.el-form-item { + margin-left: 0; + } + .right-box-form-left.right-box-form .el-form-item .el-form-item__label { + width: 100px; + } + .asset-table .el-table td ,.asset-table .el-table th{ + padding: 3px 0 !important; + } +} + +.endpoint-asset-search .el-autocomplete>.el-input { + position: absolute; +} +.endpoint-asset-search .el-select { + width: 100px; +} +.endpoint-asset-search .el-cascader .el-input { + position: absolute; + height: 24px; + line-height: 24px; + + input { + height: 24px; + line-height: 24px; + } +} +.endpoints-box-endpoints-title { + color: black; + font-weight: 400; +} + +.right-box-endpoint-table .cell { + padding: 0 2px 0 10px; +} +.endpoints-box-endpoints .el-table .el-table__row td{ + padding: 5px 0; +} +.module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner, +.endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner { + cursor: pointer; + background-color: white; + border-color: $--border-color-base; + color: $--color-text-regular; + transition: border-color .2s cubic-bezier(.645,.045,.355,1); +} +.module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, +.endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover { + border-color: #c0c4cc; +} + +.endpoints-box-endpoints .el-form-item { + margin-bottom: 0; +} +.endpoints-box-endpoints .el-form-item.is-error { + margin-bottom: 22px; +} +.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus, +.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus { + border-color: #F56C6C !important; +} + +.asset-tip { + display: table; + + .tip-row { + display: table-row; + + .tip-cell { + display: table-cell; + padding: 2px 4px; + } + } +} +.endpointConfigsTips{ + height: 200px; + overflow-y: auto; + overflow-x: hidden; +} +.copy-value-content{ + position: absolute; + right: 1px; + top: 4px; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss b/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss new file mode 100644 index 000000000..2937f2758 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss @@ -0,0 +1,229 @@ +.right-box-edit-endpoint { + .module-walk-box { + width: 100%; + border: 1px solid $--border-color-base; + border-radius: 4px; + min-height: 32px; + margin-bottom: 22px; + padding: 3px 0; + } + .module-walk-box i { + color: #C0C4CC; + } + .walk-box-item { + padding: 5px 15px; + display: flex; + justify-content: space-between; + align-items: center; + } + .walk-box-item-txt { + color: $--color-text-regular; + } + .walk-box-item-op span:first-of-type { + margin-right: 4px; + } + .walk-box-item-op span { + cursor: pointer; + } + .walk-box-op { + width: 18px; + margin: 5px 0 5px 15px; + cursor: pointer; + } + .el-cascader { + width: 100%; + } + .el-cascader__tags { + height: calc(100% - 10px); + width: 100%; + } + .right-box-module .el-cascader .el-input__inner { + height: 150px; + } + .right-box-form-tip{ + color: $--color-text-secondary; + line-height: 21px; + } + .half-form-item { + width: calc(50% - 5px); + display: inline-block; + padding: 0; + } + .half-form-item:nth-child(even){ + padding-left: 0; + } + .el-tabs__item{ + width: 90px; + padding: 0; + text-align: center; + } + .el-tabs__item.is-active{ + color: $--color-primary; + } + .el-tabs__active-bar{ + background-color: $--color-primary; + } + .el-radio-group{ + width: 100%; + } + .el-radio{ + width: 100%; + } + .el-autocomplete{ + width: 100%; + } + .need-rotate.nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; + } + .need-rotate.nz-icon-arrow-down.is-active{ + transform: rotate(-180deg); + } + .module-add-label{ + display: inline-block; + width: 16px; + height: 18px; + background: rgba(250,144,28,0.1); + border: 1px solid #FFE0BD; + border-radius: 2px; + text-align: center; + line-height: 18px; + } + .configs-copy-value{ + opacity: 0.9; + background: $--background-color-base; + border: 1px solid $--border-color-light; + border-radius: 2px; + height: 140px; + position: relative; + margin-top: 10px; + padding: 10px 0 10px 15px; + width:100%; + margin-left: 0; + pre{ + max-height: 300px; + min-height: 100px; + } + } + .configs-copy-value .copy-value-content{ + position: absolute; + right: 20px; + top: 14px; + cursor: pointer; + } + .ti-input{ + min-height: 30px; + overflow-x: hidden; + border-radius: 2px; + padding: 0 !important; + } + .ti-tag{ + background-color: $--background-color-base; + border-color: $--border-color-light; + color: $--color-text-secondary; + padding: 2px 4px!important;; + } + .el-form-item__content .el-input-group { + vertical-align: unset; + } + .special-tabs.el-tabs.el-tabs--top{ + border: 1px dashed $--border-color-base; + padding: 7px 10px; + margin-top: 10px; + position: relative; + } + .nz-icon-minus-medium { + position: absolute; + right: 20px; + top: 15px; + background: rgba(236,127,102,0.1); + padding: 2px 6px; + color: #EC7F66; + } + .endpoint-title{ + border: 1px solid $--border-color-light; + border-radius: 2px; + display: flex; + padding: 8px 10px; + justify-content: space-between; + } + .endpoint-title .endpoint-title-content{ + font-family: Roboto-Medium; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + text-align: right; + font-weight: 500; + .nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; + color: #BDBDBD; + font-size: 12px; + } + .nz-icon-arrow-down.is-active{ + transform: rotate( + -90deg + ); + } + } + .value-mapping-add { + background: rgba(250,144,28,0.1); + border: 1px solid #FFE0BD; + margin-bottom: 10px; + height: 24px; + line-height: 24px; + color: $--color-primary; + box-sizing: border-box; + } + #module-box-relabel .vue-tags-input{ + max-width: unset; + } + .is-error .vue-tags-input{ + border: 1px solid #F56C6C; + } + .right-box-module .el-cascader .el-input__inner { + height: 150px; + } + .pipeline-box{ + display: flex; + justify-content: space-between; + border-bottom: 1px solid $--border-color-light; + padding-bottom: 3px; + margin-bottom: 10px; + .pipeline-title{ + font-family: Roboto-Medium; + font-size: 14px; + color: $--color-primary; + letter-spacing: 0; + font-weight: 600; + text-transform: Capitalize; + } + } +} +.sub-label { + padding-right: 15px; + font-size: 14px; + color: $--color-text-regular; + text-align: left; + line-height: 30px; + padding-left: 15px; + font-weight: bold; + } +.sub-label-required::after { + content: '*'; + color: #F56C6C; + margin-left: 4px; +} +.module-box-type { + margin: 25px 0 10px -15px; +} +.walk-close-box { + margin-left: 6px; + width: 14px; +} +.walk-close { + font-size: 12px; +} +.config-dropdown.hide-element{ + border: none !important; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/locationCascader.scss b/nezha-fronted/src/assets/css/components/common/rightBox/locationCascader.scss new file mode 100644 index 000000000..24deeb462 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/locationCascader.scss @@ -0,0 +1,57 @@ +.location{ + position: relative; +} +.reverse{ + transform: rotate(-180deg); +} +.dropdown{ + position: absolute; + width: 616px; + padding:5px; + background-color: $--background-color-empty; + display: none; + z-index: 2020; + border-radius: 4px; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.dropdown-active{ + display: block !important; + height: 200px; +} +.location-container{ + height: 100%; + width: 100%; + display: flex; +} +.location-container .container-item{ + height: 100%; + flex: 1; + width: 0; + border-right: 1px solid $--border-color-light; + padding-left: 5px; +} +.container-item-content{ + display: flex; + justify-content: space-between; + padding:5px; +} +.container-item-content .container-item-content_label{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: $--color-text-regular; +} +.container-item-content .selected{ + font-weight: 700; + color:#ee9d3f; +} +.container-item-content .container-item-content_label:hover{ + color:#ee9d3f; +} + +.dropdown-empty{ + margin: 0; + text-align: center; + color: #999; + font-size: 14px; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/menuBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/menuBox.scss new file mode 100644 index 000000000..01a8ba741 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/menuBox.scss @@ -0,0 +1,17 @@ +.right-box-menu .el-input-number .el-input__inner { + text-align: left !important; +} +.right-box-menu { + .right-box-sub-title { + #add-permission { + border: none; + outline: none; + cursor: pointer; + + i { + font-size: 17px; + background-color: $--background-color-base; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss new file mode 100644 index 000000000..d6a9ef410 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss @@ -0,0 +1,237 @@ +.right-box-module { + .module-walk-box { + width: 100%; + border: 1px solid $--border-color-base; + border-radius: 4px; + min-height: 32px; + margin-bottom: 22px; + padding: 3px 0; + } + .module-walk-box i { + color: #C0C4CC; + } + .walk-box-item { + padding: 5px 15px; + display: flex; + justify-content: space-between; + align-items: center; + } + .walk-box-item-txt { + color: $--color-text-regular; + } + .walk-box-item-op span:first-of-type { + margin-right: 4px; + } + .walk-box-item-op span { + cursor: pointer; + } + .walk-box-op { + width: 18px; + margin: 5px 0 5px 15px; + cursor: pointer; + } + .el-cascader { + width: 100%; + } + .el-cascader__tags { + height: calc(100% - 10px); + width: 100%; + } + .right-box-module .el-cascader .el-input__inner { + height: 150px; + } + .right-box-form-tip{ + color: $--color-text-secondary; + line-height: 21px; + } + .half-form-item { + width: calc(50% - 5px); + display: inline-block; + padding: 0; + } + .half-form-item:nth-child(even){ + padding-left: 0; + } + .el-tabs__item{ + width: 90px; + padding: 0; + text-align: center; + } + .el-tabs__item.is-active{ + color: $--color-primary + } + .el-tabs__active-bar{ + background-color: $--color-primary + } + .el-radio-group{ + width: 100%; + } + .el-radio{ + width: 100%; + } + .el-autocomplete{ + width: 100%; + } + .need-rotate.nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; + } + .need-rotate.nz-icon-arrow-down.is-active{ + transform: rotate( + -180deg + ); + } + .module-add-label{ + display: inline-block; + width: 16px; + height: 18px; + background: rgba(250,144,28,0.1); + border: 1px solid #FFE0BD; + border-radius: 2px; + text-align: center; + line-height: 18px; + } + .configs-copy-value{ + opacity: 0.9; + background: $--background-color-base; + border: 1px solid $--border-color-light; + border-radius: 2px; + height: 140px; + position: relative; + margin-top: 10px; + padding: 10px 0px 10px 15px; + width:100%; + margin-left: 0px; + pre{ + max-height: 300px; + min-height: 100px; + } + } + .configs-copy-value .copy-value-content{ + position: absolute; + right: 20px; + top: 14px; + cursor: pointer; + } + .ti-input{ + min-height: 30px; + overflow-x: hidden; + border-radius: 2px; + padding: 0 !important; + } + .ti-tag{ + background-color: $--background-color-base; + border-color: $--border-color-light; + color: $--color-text-secondary; + padding: 2px 4px!important;; + } + .el-form-item__content .el-input-group { + vertical-align: unset; + } + .special-tabs.el-tabs.el-tabs--top{ + border: 1px dashed $--border-color-base; + padding: 7px 10px; + margin-top: 10px; + position: relative; + } + .nz-icon-minus-medium { + position: absolute; + right: 20px; + top: 15px; + background: rgba(236,127,102,0.1); + padding: 2px 6px; + color: #EC7F66; + } + .endpoint-title{ + border: 1px solid $--border-color-light; + border-radius: 2px; + display: flex; + padding: 8px 10px; + justify-content: space-between; + } + .endpoint-title .endpoint-title-content{ + font-family: Roboto-Medium; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + text-align: right; + font-weight: 500; + .nz-icon-arrow-down{ + display: inline-block; + transition: transform .3s; + color: #BDBDBD; + font-size: 12px; + } + .nz-icon-arrow-down.is-active{ + transform: rotate( + -90deg + ); + } + } + .value-mapping-add { + background: rgba(250,144,28,0.1); + border: 1px solid #FFE0BD; + margin-bottom: 10px; + height: 24px; + line-height: 24px; + color: $--color-primary; + box-sizing: border-box; + } + #module-box-relabel .vue-tags-input{ + max-width: unset; + } + .is-error .vue-tags-input{ + border: 1px solid #F56C6C; + } + .pipeline-box{ + display: flex; + justify-content: space-between; + border-bottom: 1px solid $--border-color-light; + padding-bottom: 3px; + margin-bottom: 10px; + .pipeline-title{ + font-family: Roboto-Medium; + font-size: 14px; + color: $--color-primary; + letter-spacing: 0; + font-weight: 600; + text-transform: Capitalize; + } + } +} +.sub-label { + padding-right: 15px; + font-size: 14px; + color: $--color-text-regular; + text-align: left; + line-height: 30px; + padding-left: 15px; + font-weight: bold; +} +.sub-label-required::after { + content: '*'; + color: #F56C6C; + margin-left: 4px; +} +.module-box-type { + margin: 25px 0 10px -15px; +} +.walk-close-box { + margin-left: 6px; + width: 14px; +} +.walk-close { + font-size: 12px; +} +.config-dropdown.hide-element{ + border: none!important; +} +.param-box-row-symbol { + color: $--color-text-regular; +} +.module-form__label { + padding-bottom: 6px; + font-size: 14px; + line-height: 16px; + color: $--color-text-regular; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/pipelineSelect.scss b/nezha-fronted/src/assets/css/components/common/rightBox/pipelineSelect.scss new file mode 100644 index 000000000..7fec1290a --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/pipelineSelect.scss @@ -0,0 +1,31 @@ +.pipeline{ + width: 178px !important; + .el-select-group__wrap:not(:last-of-type){ + padding-bottom: 0; + } + .el-select-group__title{ + padding-left: 10px; + line-height: 32px; + } + .el-select-dropdown__item{ + padding: 0 10px; + height: 32px; + line-height: 32px; + } + .el-select-group__wrap:not(:last-of-type)::after{ + bottom: -2px; + left: 10px; + right: 10px; + } + .el-select-dropdown__wrap{ + max-height: 300px; + } + .popper__arrow{ + display: none !important; + } +} +.right-box__select{ + position: absolute; + left: -55px; + top: 0; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/subBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/subBox.scss new file mode 100644 index 000000000..dded2831b --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/subBox.scss @@ -0,0 +1,66 @@ +.right-sub-box { + width: 170px; + height: 225px; + position: fixed; + z-index: 2; + padding: 0; + /* start--param*/ + .param-btn { + float: right; + height: 27px; + margin-top: -3px; + } + .param-btn-active { + background-color: #656565; + color: white; + border: 1px solid #656565; + } + .param-btn-active:hover, .param-btn-active:focus { + background-color: #656565; + color: white; + } + .param-btn-clear { + background-color: #D4D4D4; + border: 1px solid #D4D4D4; + color: white; + } + .param-btn-clear:hover, .param-btn-clear:focus { + background-color: #D4D4D4; + color: white; + } + + .param-box { + height: 200px; + overflow: auto; + border: none; + } + .param-box-row { + padding: 7px 10px 0 10px; + position: relative; + } + .param-box-row:last-of-type { + padding-bottom: 7px; + } + .param-box-row-key, .param-box-row-value { + display: inline-block; + width: 50px; + } + .param-box-row-eq { + display: inline-block; + width: 14px; + text-align: center; + height: 22px; + line-height: 22px; + color: #c4c7cF; + } + /* end--param*/ +} +.sub-box .add-btn{ + width: 100%; + text-align: center; + height: 25px; + line-height: 25px; + position: absolute; + bottom: 0; + left: 0; +} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/trafficSettingTab.scss b/nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/trafficSettingTab.scss new file mode 100644 index 000000000..716cb6dc8 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/trafficSettingTab.scss @@ -0,0 +1,153 @@ +.asset-config-tab { + min-height: 100px; + max-height: 400px; + border: 1px solid $--border-color-light; + border-radius: 2px; + position: relative; + margin-left: 15px; + margin-top: 18px; + padding: 18px 18px 26px 40px; + + .asset-item { + display: flex; + align-items: center; + margin-bottom: 18px; + + .asset-item--label { + color: $--color-text-regular; + padding-right: 20px; + line-height: 32px; + } + + .asset-item--input { + display: flex; + width: 100%; + padding-right: 10px; + + .right-box-row-with-btn { + width: 100%; + } + } + + .asset-item--btn { + height: 28px; + box-sizing: border-box; + line-height: 21px; + } + } + + .endpoints-box-endpoints { + width: calc(100% - 39px); + border: 1px solid $--border-color-light; + border-radius: 2px; + padding-bottom: 10px; + + table.el-table__body { + font-size: 16px; + } + } + .add-btn{ + text-align: center; + } + #snmp-advanced{ + border-top-left-radius: 0; + border-bottom-left-radius: 0; + height: 30px; + top: 1px; + left: -1px; + } + .el-table tr:last-child td{ + border-bottom: none; + } + .el-table .traffic-set-table-title{ + color: $--color-primary; + } +} +.asset-config-tab .right-box-form-minus-box { + background-color: #FEF3F0 !important; +} + +.asset-config-tab .right-box-form-minus-box .nz-icon { + color: #EF9A87 !important; +} + +.tab-tags{ + width: 100%; + height: 22px; +} +.tags-pop{ + width: 110px; + text-align: center; +} +.tab-tags-item{ + display: flex; + margin-bottom: 5px; + height: 20px; + line-height: 18px; + justify-content: center; +} +.tab-tags-item .tag-item-key{ + border:1px solid #409eff;; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + background-color: #409eff; + min-width: 40px; + padding: 0 8px; + color: white; +} +.tab-tags-item .tag-item-value{ + border:1px solid #409eff; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: $--background-color-empty; + min-width: 40px; + padding: 0 8px; +} +.tab-tags-item .tag-item-text{ + background-color: $--background-color-empty; + width: 20px; +} +.taffic-setting-tab .el-table__row:hover{ + .input__inner{ + border-color: #c0c4cc; + } +} +.input__inner{ + width: 120px; + height: 30px; + line-height: 30px; + padding-left: 15px; + border-radius: 2px; + border: 1px solid #DCDFE6; +} +.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus, +.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus { + border-color: #F56C6C !important; +} +.direction-checkbox .el-checkbox{ + margin-right: 10px; +} +.direction-checkbox .el-checkbox__label{ + padding-left: 0; +} +.not-allowed:hover{ + cursor: not-allowed; +} +.asset-config-tab .asset-input .el-input__inner{ + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +/*mib 移植*/ +.mib-browser-ad-search-item { + margin-bottom: 10px; +} +.mib-browser-ad-search .el-radio-group .el-radio-button__inner { + height: 24px; + line-height: 0; +} +.mib-browser-ad-search-label { + line-height: 24px; +} +.mib-browser-ad-search { + width: 450px; +} diff --git a/nezha-fronted/src/assets/css/components/common/searchInput.scss b/nezha-fronted/src/assets/css/components/common/searchInput.scss new file mode 100644 index 000000000..073ff2c3a --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/searchInput.scss @@ -0,0 +1,345 @@ +.search-btn { + height: 30px; + width: 32px; + border: none; + outline: none; + cursor: pointer; + border-left: 1px solid $--border-color-base; + background-color: lighten($--background-color-base, 10%); + + i { + color: $--color-text-regular; + font-size: 14px; + } +} +.search-btn:focus:not(.nz-btn-disabled) { + background-color: $--background-color-empty; + i { + color: $--color-primary; + } +} +.search-input-placeholder{ + font-size: 12px; + color: $--color-text-secondary; + position: absolute; + left: 7px; +} +.top-tools input { + background-color: $--background-color-empty; +} +.new-search{ + display: flex; + position: relative; + line-height: 25px; + border-radius: 2px; + border: 1px solid $--border-color-base; +} +.new-search .search-input-all{ + width: 226px !important; + min-width: 226px; + background-color: $--input-background-color; + color: rgba(0,0,0,.55); + height: 30px; + line-height: 30px; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + display: flex; + position: relative; + * { + background-color: $--input-background-color; + } +} +input { + background-color: $--background-color-base; +} +.search-input-all .btn-retract{ + padding: 0 4px; + text-align: center; +} +.search-input-all .search-history{ + padding: 0 7px; + height: 18px; + line-height: 18px; + text-align: center; + border-right: 1px solid $--border-color-light; + margin-top: 6px; + position: relative; +} +.search-input-all .input-center-box{ + flex: 1; + height: 100%; + overflow: hidden; +} +.search-input-all .clear-search{ + padding: 0 5px; + text-align: center; + font-size: 12px; +} +.dataBackG{ + background: darken($--background-color-base, 10%); +} +.none{ + display: none !important; +} +.search-text{ + display: inline-block; + margin-right: 20px; +} +.sreach_box{ + position: relative; + width: 80%; + height: 25px; + padding: 20px; + background: $--background-color-empty; + margin: 200px auto; +} +.keyring_sreach_right_btn{ + width: 18%; + height: 25px; + float: right; + line-height: 25px; + text-align: center; + border: 1px solid $--border-color-base; +} +.keyring_sreach_right_btn .right-btn-group{ + float: left; + width: 80%; + border-right: 1px solid $--border-color-base; + box-sizing: border-box; +} +.keyring_sreach_right_btn .right-btn-icon{ + float: left; + width: 19%; +} +.sreach_box .close_zhezhao{ + position: absolute; + right: 0; + top: -50px; + width: 24px; + height: 25px; + border-radius: 50%; + background: $--background-color-empty; + text-align: center; + line-height: 28px; + font-size: 12px; +} + +.localStorage_list_box{ + position: absolute; + left: 10px; + top: 36px; + width: auto; + min-width:250px; + max-width: 350px; + height: auto; + border: 1px solid $--border-color-base; + background: $--background-color-empty; + color: #2e2e2e; + text-align: left; + border-radius: 3px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + z-index: 9999; + font-size: 12px; +} +.localStorage_list_box .list_box_title{ + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + position: relative; + border-bottom: 1px solid $--border-color-base; + color: #2e2e2e; +} +.localStorage_list_box .list_box_title i{ + position: absolute; + right: 10px; + top: 0; +} +.localStorage_list_box .list_box_content{ + text-align: left; + padding: 5px 0; + box-sizing: border-box; + border-bottom: 1px solid $--border-color-base; +} +.localStorage_list_box ul li{ + padding: 5px 10px; + line-height: 20px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.localStorage_list_box ul li:hover{ + background: darken($--background-color-base, 10%); + cursor:pointer; +} + +.localStorage_list_box ul li span{ + color: #2e2e2e; +} +.localStorage_list_box ul li .value{ + font-weight: 600; + width: 350px; +} +.localStorage_list_box .list_box_clear{ + padding-left: 10px; + line-height: 40px; +} +.localStorage_list_box .list_box_clear:hover{ + background: darken($--background-color-base, 10%); + cursor:pointer; +} +.input-center-box .sreach_fixe_left{ + width: auto; + display: flex; + height: 100%; + min-width: 100%; +} +.sreach_list{ + display: flex; + justify-content:flex-start; + height: 100%; + padding-left: 10px; +} +.sreach_fixe_left .selectinfo_box{ + display: flex; + flex-shrink: 0; + width: auto; + height: auto; + margin: 3px 2px; + font-size: 12px; +} +.selectinfo_box .select_condition{ + float:left; + height: 13px; + padding: 3px; + background: $--background-color-base; + line-height: 13px; + color: rgba(0,0,0,.55); +} +.selectinfo_box .select_content{ + float: left; + line-height: 13px; + height: 13px; + padding: 3px; + background: darken($--background-color-base, 10%); + color: rgba(0,0,0,0.85); + display: flex; +} +.selectinfo_box .select_content .nz-icon-close{ + font-size: 12px; +} +.selectinfo_box .select_content>span { + max-width: 100px; + display: inline-block; + white-space: nowrap; + word-break: break-all; + text-overflow: ellipsis; + overflow: hidden; +} +.select_input{ + height: 100%; + flex: 1; + float: left; + width: 100px; +} +.select_input input{ + width: calc(100% - 1px); + height: 100%; + border: none; + float: left; + padding-left: 5px !important; + box-sizing: border-box; + outline: none; +} +.select_input input:focus { + border:none; + box-shadow:none; + outline: none; +} +.select_input .select_info_list{ + position: fixed; + width: auto; + max-height: 240px; + padding: 5px 0; + background: $--background-color-empty; + border: 1px solid $--border-color-light; + border-radius: 3px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + overflow-y: auto; + z-index: 9999; +} +.select_info_list ul li{ + padding: 5px 10px; + line-height: 20px; + text-overflow: ellipsis; + width: 150px; + word-break: break-all; + white-space: nowrap; + overflow: hidden; +} +.select_info_list ul li:hover{ + background: darken($--background-color-base, 10%); + cursor: pointer; +} +.sreach_input .input{ + flex: 1; + height: 100%; + padding-left: 10px !important; + box-sizing: border-box; + position: relative; +} +.sreach_input .input input{ + width: 100%; + height: 100%; + border: none; + padding: 0 !important; + float: left; +} +.sreach_box input:focus { + outline: none; + border-color: transparent; + box-shadow: none; +} +.sreach_input input::placeholder{ + color: rgba(0,0,0,0.55) +} +.input_list{ + position: fixed; + width: auto; + max-width: 400px; + max-height: 240px; + min-width: 300px; + background: $--background-color-empty; + border-radius: 3px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + z-index: 101; + overflow-y: auto; + font-size: 12px; +} +.input_list ul{ + padding: 4px 0; +} +.input_list ul li{ + padding: 4px 10px; + line-height: 16px; + height: 20px; +} +.input_list ul li:hover{ + background: darken($--background-color-base, 10%); + cursor:pointer; +} +.search-style-ind{ + background: darken($--background-color-base, 10%); + cursor:pointer; +} +.sreach_fixe>i{ + margin-right: 15px; +} +.is-disabled{ + color: #C0C4CC; + cursor: not-allowed !important; + background: $--background-color-empty !important; +} +li { + list-style: none; +} diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss new file mode 100644 index 000000000..b465bc6e9 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss @@ -0,0 +1,102 @@ +.pointer{ + background: $--color-primary; + border-radius: 2px; + border: none; + width: 40px; + height: 22px; + box-sizing: border-box; + text-align:center; + color: #fff; + font-size: 12px; + margin-right: 20px; +} +.alertLabelInfo{ + border: 1px solid $--border-color-light; + border-bottom: none; + font-size: 13px; + line-height: 26px; +} +.alertLabelBox{ + display: flex; + justify-content:space-between; + border-bottom: 1px solid $--border-color-light; +} +.alertLabelTitle{ + text-align: left; + width: 90px; + border-right: 1px solid $--border-color-light; + color: #666; + padding: 0 3px 0 13px; +} +.alertLabelValue{ + text-align: left; + width: 150px; + color: #1a1a1a; + padding: 0 3px 0 13px; +} +.danger{ + background-color: #d64f40; + color: white; + padding: 2px 5px; + border-radius: 4px; +} +.success{ + background-color: #50d050; + color: white; + padding: 2px 5px; + border-radius: 4px; +} +/deep/.active-icon{ + margin-top: 0; +} +.contentTable{ + height: calc(100% - 105px) +} +.contentProject{ + height: calc(100% - 60px); + margin-bottom: 15px; +} +.tabelH100{ + height: 100% !important; +} +/deep/.too-long-split{ + vertical-align: bottom; +} +/deep/.el-tooltip{ + display: inline-block; +} +/deep/.alert-clean-pop.el-popover{ + top: -30px !important; +} +.pointer{ + cursor: pointer; +} +.severity .P1{ + background: #F5846A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.severity .P2{ + background: #F7A54A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.severity .P3{ + background: #F1C13D; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.red,.green{ + color: white; + padding: 2px 5px; + border-radius: 4px; +} +/deep/ .nz-message .el-textarea textarea{ + height: 108px !important; +} diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss new file mode 100644 index 000000000..7d7ffbda4 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss @@ -0,0 +1,45 @@ +.severity .P1 { + background: #F5846A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.severity .P2 { + background: #F7A54A; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.severity .P3 { + background: #F1C13D; + border-radius: 2px; + font-size: 12px; + color: #FFFFFF; + padding: 2px 6px; +} +.schedEnableTitle { + padding: 15px 20px; +} +.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian { + font-size: 14px; + color: $--color-primary; + margin-right: 12px; +} +.schedEnableTitle .week-item { + width: 32px; + height: 22px; + line-height: 22px; + opacity: 0.9; + background: $--background-color-base; + border-radius: 2px; + display: inline-block; + font-size: 12px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + padding-left: 3px; + margin-right: 12px; + margin-bottom: 6px; +} diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertSilenceTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertSilenceTable.scss new file mode 100644 index 000000000..a560e7e86 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertSilenceTable.scss @@ -0,0 +1,30 @@ +.silence-active{ + background: #E3F2D9; + border-radius: 4px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: #0AB000; + line-height: 14px; + font-weight: 400; + padding: 0 5px; +} +.silence-pending{ + background: #FFECD9; + border-radius: 4px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: $--color-primary; + line-height: 20px; + font-weight: 400; + padding: 0 5px; +} +.silence-expired{ + background: #9e9c98; + border-radius: 4px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: #ffffff; + line-height: 14px; + font-weight: 400; + padding: 0 5px; +} diff --git a/nezha-fronted/src/assets/css/components/common/table/asset/assetTable.scss b/nezha-fronted/src/assets/css/components/common/table/asset/assetTable.scss new file mode 100644 index 000000000..b1c33d4b9 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/asset/assetTable.scss @@ -0,0 +1,32 @@ +.asset-table2 { + .el-table__row { + td { + position: relative; + } + } + .active-icon-content { + display: none; + position: absolute; + background: $--background-color-empty; + min-width: 150px; + border: 1px solid $--border-color-light; + padding: 12px; + z-index: 2000; + color: $--color-text-regular; + line-height: 1.4; + text-align: justify; + font-size: 14px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + left: 100%; + top: -60%; + width: auto; + white-space: nowrap; + transform: translateY(50%); + } + + .ping-info:hover { + .active-icon-content { + display: block; + } + } +} diff --git a/nezha-fronted/src/assets/css/components/common/table/settings/projectTable.scss b/nezha-fronted/src/assets/css/components/common/table/settings/projectTable.scss new file mode 100644 index 000000000..ec28d08aa --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/settings/projectTable.scss @@ -0,0 +1,22 @@ +.project-table { + .module-num{ + font-size: 14px; + font-weight: 400; + cursor: pointer; + padding: 0 3px; + .nz-icon-overview-module{ + color: rgb(122, 208, 188) + } + } + .alert-num{ + padding: 0 3px; + cursor: pointer; + border-radius: 2px; + } + .colorEF7458{ + color: #EF7458; + } + .color23BF9A{ + color: #23BF9A; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss b/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss new file mode 100644 index 000000000..4c7d0656a --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss @@ -0,0 +1,25 @@ +.user-table { + .flex-align-center { + display: flex; + align-items: center; + } + .el-tag.el-tag--mini { + border-radius: 10px; + font-size: 12px; + line-height: 12px; + height: 12px; + vertical-align: middle; + } + .user-name-top { + color: $--color-text-primary; + font-weight: 600; + font-size: 14px; + line-height: 14px; + vertical-align: middle; + } + .user-name-bottom { + color: $--color-text-secondary; + font-size: 14px; + line-height: 14px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss new file mode 100644 index 000000000..429052401 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss @@ -0,0 +1,29 @@ +.endpoint-query-tab { + .el-dialog__body { + height: calc(100% - 48px) !important; + padding-bottom: 0 !important; + width: calc(100% - 40px) !important; + } + + .query-page-option { + width: 100%; + background: $--background-color-empty; + margin-top: 10px; + } + + .pagination { + padding-top: 0; + } + + .top-tool-btn--text { + background: $--background-color-empty; + border-radius: 2px 0 0 2px; + outline: none; + height: 32px; + border: 1px solid $--border-color-base; + border-right: none; + line-height: 30px; + margin-right: -5px; + padding: 0 5px; + } +} diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss new file mode 100644 index 000000000..323632285 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss @@ -0,0 +1,72 @@ +.loading-font{ + color: #232f3e !important; +} +.popper-z-index{ + z-index: 3000 !important; +} +.calendar { + line-height: 40px; + height: 40px; + box-sizing: border-box; + border: 1px solid $--border-color-base; + border-radius: $--border-radius-small; +} +.calendar.calendar--small { + line-height: 32px; + height: 32px; + + .calendar-dropdown-title { + line-height: 30px; + } +} +.nz-dashboard-dropdown-bg { + background: $--color-primary; + color: #fff; +} +.calendar-dropdown-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.el-dropdown-link { + cursor: pointer; +} +.calendar-popover{ + line-height:22px; + text-align:center; +} +.panel-time-picker-hidden{ + width: 0 !important; + padding: 0 !important; + border: 0 !important; + visibility: hidden !important; +} +.time-picker-button{ + padding: 0 1px !important; + height:24px !important; + margin-top: 0 !important; +} + +.time-picker-left-button{ + margin-right: 4px; +} + +.time-picker-right-button{ + margin-left: 4px; +} +.panel-time-picker-popper[x-placement^=bottom] .popper__arrow { + left: 85% !important; +} + +.panel-time-picker-popper .el-date-table td.today span { + color: #232f3e !important; +} + +.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){ + display:none; +} + +.dropdown--suffix { + padding: 0 8px; + color: #aaa; +} diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss new file mode 100644 index 000000000..6851698ce --- /dev/null +++ b/nezha-fronted/src/assets/css/components/index.scss @@ -0,0 +1,85 @@ +@import './charts/chart.scss'; +@import './cli/webSSH.scss'; +@import './common/alert/alertLabel.scss'; +@import './common/alert/alertRuleInfo.scss'; +@import './common/alert/selectAlertSilence.scss'; +@import './common/bottomBox/bottomBox.scss'; +@import './common/bottomBox/panelTabNew.scss'; +@import './common/bottomBox/terminalLogCMDTab.scss'; +@import './common/bottomBox/terminalLogMonitorTab.scss'; +@import './common/bottomBox/terminalLogRecordTab.scss'; +@import './common/detailView/list/common.scss'; +@import './common/detailView/view/detailRightTop.scss'; +@import './common/detailView/view/detailViewRight.scss'; +@import './common/detailView/detailView.scss'; +@import './common/detailView/detailViewTopSearch.scss'; +@import './common/labelFilter/clickSearch.scss'; +@import './common/popBox/guide.scss'; +@import './common/popBox/selectAssetMetaGroup.scss'; +@import './common/popBox/selectAssetType.scss'; +@import './common/popBox/selectPanel.scss'; +@import './common/popBox/selectWalk.scss'; +@import './common/project/L5/popData/common.scss'; +@import './common/project/L5/CanvasContextMenu.scss'; +@import './common/project/L5/CanvasProps.scss'; +@import './common/project/L5/topologyTopTool.scss'; +@import './common/project/L5/topoTooltip.scss'; +@import './common/project/chart.scss'; +@import './common/project/topology.scss'; +@import './common/project/topologyL5.scss'; +@import './common/rightBox/asset/assetBox.scss'; +@import './common/rightBox/trafficSetting/subBox.scss'; +@import './common/rightBox/trafficSetting/trafficSettingTab.scss'; +@import './common/rightBox/addEndpointBox.scss'; +@import './common/rightBox/alertRuleBox.scss'; +@import './common/rightBox/alertSilenceBox.scss'; +@import './common/rightBox/assetStateBox.scss'; +@import './common/rightBox/batchAddEndpoint.scss'; +@import './common/rightBox/batchModifyEndpoint.scss'; +@import './common/rightBox/editEndpointBoxNew.scss'; +@import './common/rightBox/locationCascader.scss'; +@import './common/rightBox/menuBox.scss'; +@import './common/rightBox/moduleBox.scss'; +@import './common/table/alert/alertMessageTable.scss'; +@import './common/table/alert/alertRuleTable.scss'; +@import './common/table/alert/alertSilenceTable.scss'; +@import './common/table/asset/assetTable.scss'; +@import './common/table/settings/userTable.scss'; +@import './common/table/special/endpointQuery.scss'; +@import './common/browserWindowZoom.scss'; +@import './common/chartUnit.scss'; +@import './common/elementSet.scss'; +@import './common/loading.scss'; +@import './common/login.scss'; +@import './common/multipleTime.scss'; +@import './common/nezhaColor.scss'; +@import './common/nzTransfer.scss'; +@import './common/pagination.scss'; +@import './common/searchInput.scss'; +@import './common/timePicker.scss'; + +@import './layout/container.scss'; +@import './layout/header.scss'; +@import './layout/home.scss'; +@import './layout/leftMenu.scss'; + +@import './page/alert/alertMessage.scss'; +@import './page/alert/nzAlertTag.scss'; +@import './page/config/system/notifyMethodTab.scss'; +@import './page/config/about.scss'; +@import './page/config/agent.scss'; +@import './page/config/assetMeta.scss'; +@import './page/config/mibBrowser.scss'; +@import './page/config/operationRecord.scss'; +@import './page/config/profile.scss'; +@import './page/config/profileChangePin.scss'; +@import './page/config/setup.scss'; +@import './page/config/system.scss'; +@import './page/dashboard/explore/explore.scss'; +@import './page/dashboard/explore/logTab.scss'; +@import './page/dashboard/explore/promqlInput.scss'; +@import './page/dashboard/overview/chart.scss'; +@import './page/dashboard/overview/overview2.scss'; +@import './page/dashboard/chartBox.scss'; +@import './page/dashboard/panel.scss'; +@import './page/monitor/project/project.scss'; diff --git a/nezha-fronted/src/assets/css/components/layout/container.scss b/nezha-fronted/src/assets/css/components/layout/container.scss new file mode 100644 index 000000000..c29216eed --- /dev/null +++ b/nezha-fronted/src/assets/css/components/layout/container.scss @@ -0,0 +1,9 @@ +.container { + box-sizing: border-box; + height: calc(100% - 50px); + background-color: $--background-color-base; + width: 100%; + &>div { + height: 100%; + } +} diff --git a/nezha-fronted/src/assets/css/components/layout/header.scss b/nezha-fronted/src/assets/css/components/layout/header.scss new file mode 100644 index 000000000..05241076b --- /dev/null +++ b/nezha-fronted/src/assets/css/components/layout/header.scss @@ -0,0 +1,152 @@ +.header { + display: flex; + height: 50px; + background-color: $--background-color-empty; + .personal-avatar { + cursor: pointer; + span { + width: 32px; + height: 32px; + display: inline-block; + line-height: 32px; + background: rgba(60,146,241,0.10); + font-size: 14px; + color: #3C92F1; + letter-spacing: 0; + font-weight: 500; + text-transform: capitalize; + border-radius: 100%; + } + } + .header-menu { + display: flex; + justify-content: flex-end; + flex-grow: 1; + + .el-dropdown { + width: 60px; + text-align: center; + height: 36px; + line-height: 50px; + .el-dialog{ + width: 1000px; + height: 70px; + .el-dialog__header{ + background-color: $--color-primary; + .el-dialog__title{ + color: #fff; + } + .el-dialog__close{ + color: #fff; + line-height: 50px; + font-size: 30px; + } + } + } + + } + } + .header-menu--item { + color: $--color-text-regular; + cursor: pointer; + transition: color linear .2s; + i { + font-size: 18px; + } + } + .header-menu--item:hover { + color: $--color-text-primary; + } + .header-menu__item { + i { + font-size: 20px; + cursor: pointer; + } + } + .personal { + display: flex; + .el-dropdown { + margin: 0 20px; + height: 36px; + line-height: 50px; + text-align: center; + } + .login-user { + color: $--color-text-primary; + i { + color: $--color-text-secondary; + font-size: 12px; + } + } + } + .right-tip { + position: absolute; + left: 30px; + top: 10px; + padding: 0 6px; + line-height: 15px; + height: 15px; + background-color: #ba3939; + opacity: .9; + border-radius: 7px; + color: white; + font-size: 6px; + } + .left-menu--pin { + width: 20px; + font-size: 20px; + font-weight: 100; + color: $--color-text-secondary; + transition: all .4s; + height: 100%; + line-height: 50px; + margin-left: 10px; + i { + transform: rotateY(0); + transition: transform .4s; + cursor: pointer; + } + i.icon-reverse { + transform: rotateY(180deg); + } + } + .left-menu--pin-normal{ + } + .left-menu--pin-reverse{ + } +} +.link-title a { + color: inherit; + text-decoration: none; +} +.nz-breakcrumb { + padding-left: 15px; + line-height: 50px; + + .el-breadcrumb__item { + .el-breadcrumb__inner, .el-breadcrumb__separator { + color: $--color-text-secondary; + } + .el-breadcrumb__separator { + margin: 0 9px; + font-weight: 700; + } + } + .el-breadcrumb__item:last-of-type { + .el-breadcrumb__separator { + display: none; + } + } +} +.header-link-nodata{ + color: $--color-text-secondary; + padding: 20px; +} +#header-to-profile, #header-to-logout { + padding: 0 20px; + font-size: 14px; + color: $--color-text-regular; + &:hover { + color: $--color-primary-light-2; + } +} diff --git a/nezha-fronted/src/assets/css/components/layout/home.scss b/nezha-fronted/src/assets/css/components/layout/home.scss new file mode 100644 index 000000000..102a9cc15 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/layout/home.scss @@ -0,0 +1,22 @@ +.home { + display: flex; + transition: all .2s; + background-color: $--background-color-empty; + .body { + flex: 1; + display: flex; + flex-direction: column; + width: calc(100% - 240px); + transition: all .2s; + } +} +.temp-dom { + visibility: hidden; + font-size: 14px; + position: fixed; +} +.temp-dom--12 { + visibility: hidden; + font-size: 12px; + position: fixed; +} diff --git a/nezha-fronted/src/assets/css/components/layout/leftMenu.scss b/nezha-fronted/src/assets/css/components/layout/leftMenu.scss new file mode 100644 index 000000000..e53f2ff15 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/layout/leftMenu.scss @@ -0,0 +1,112 @@ +.left-menu { + display: flex; + flex-direction: column; + height: 100%; + background-color: $--left-menu-background-color-base; + + .el-menu-item .nz-icon, .el-submenu .nz-icon { + display: inline-block; + vertical-align: middle; + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px; + } + >.el-menu:not(.el-menu--collapse) { + width: 240px; + } + >.el-menu.menu-list { + height: calc(100% - 110px); + background-color: $--left-menu-background-color-base; + border-right: none; + overflow: auto; + .el-menu { + background-color: $--left-menu-background-color-base; + } + >.el-submenu.is-active .el-submenu__title { + background-color: $--left-menu-background-color-active !important; + } + .el-submenu.is-active>.el-submenu__title, .el-submenu.is-active>.el-submenu__title>i { + color: white !important; + } + .el-submenu.is-opened .el-menu-item:not(.is-active), .el-submenu.is-opened .el-submenu__title { + background-color: $--left-menu-background-color-open !important; + } + .is-opened.is-active{ + background-color: $--left-menu-background-color-open !important; + } + .el-submenu.is-active:not(.is-opened)>.el-submenu__title{ + border-left: 3px $--color-primary solid; + } + .el-menu-item.is-active { + background-color: $--left-menu-background-color-active !important; + border-left: 3px $--color-primary solid; + } + .el-menu-item, .el-submenu__title { + height: 46px; + line-height: 46px; + font-size: 14px; + position: relative; + border-left: 3px $--left-menu-background-color-active solid; + } + .el-submenu__icon-arrow { + position: absolute; + top: 16px; + right: 20px; + } + } + + /*---滚动条默认显示样式--*/ + >.el-menu::-webkit-scrollbar-thumb { + background-color: lighten($--background-color-base, .1); + border-radius: 2px; + border: none; + } + /*---鼠标点击滚动条显示样式--*/ + >.el-menu::-webkit-scrollbar-thumb:hover { + background-color: $--background-color-base; + border-radius: 2px; + } + /*---滚动条大小--*/ + >.el-menu::-webkit-scrollbar { + width: 6px; + height: 14px; + } + >.el-menu.header-logo { + border-right: none; + >.el-menu-item { + padding: 13px 0 0 18px !important; + height: 50px; + border-right: 1px solid $--left-menu-background-color-base; + box-sizing: border-box; + background-color: $--left-menu-background-color-open !important; + + .logo { + display: flex; + box-sizing: border-box; + + img { + box-shadow: 0 0 2px 0 rgba(0,0,0,0.50); + } + + .system-name { + padding-left: 5px; + color: white; + font-size: 12px; + letter-spacing: 0; + line-height: 34px; + font-weight: 400; + } + } + } + } +} +.el-menu--popup { + .el-menu-item { + height: 49px; + line-height: 49px; + } + .el-menu-item.is-active { + background-color: $--left-menu-background-color-active !important; + } +} diff --git a/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss b/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss new file mode 100644 index 000000000..9f7c30a38 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss @@ -0,0 +1,6 @@ +.active { + border-bottom: 3px solid $--color-primary; + color: $--color-text-primary; + cursor: default; + font-weight: bold; +} diff --git a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss new file mode 100644 index 000000000..c2a0e12d3 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss @@ -0,0 +1,76 @@ +.nz-alert-tag { + border: 1px solid; + height: 20px; + font-size: 12px; + line-height: 20px; + border-radius: 4px; + display: inline-block; + box-sizing: content-box; + .nz-alert-tag__label { + border-radius: 3px 0 0 3px; + padding: 0 4px; + min-width: 36px; + max-width: 100px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + word-break: break-all; + display: inline-block; + height: 21px; + box-sizing: content-box; + margin-left: -1px; + } + .nz-alert-tag__content { + border-radius: 0 3px 3px 0; + padding: 0 4px; + min-width: 36px; + max-width: 115px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + word-break: break-all; + display: inline-block; + } + .nz-alert-tag_normal { + border-color: #409eff; + .nz-alert-tag__label { + border-right: 1px solid #409eff; + background-color: #409eff; + color: white; + } + } + .nz-alert-tag_success { + border-color: #50d050; + .nz-alert-tag__label { + border-right: 1px solid #50d050; + background-color: #50d050; + color: white; + } + } + .nz-alert-tag_info { + border-color: #909399; + .nz-alert-tag__label { + border-right: 1px solid #909399; + background-color: #909399; + color: white; + } + } + .nz-alert-tag_danger { + border-color: #d64f40; + .nz-alert-tag__label { + border-right: 1px solid #d64f40; + background-color: #d64f40; + color: white; + } + } + .nz-alert-tag_warning { + border-color: #e6a23c; + .nz-alert-tag__label { + border-right: 1px solid #e6a23c; + background-color: #e6a23c; + color: white; + } + } +} diff --git a/nezha-fronted/src/assets/css/components/page/config/about.scss b/nezha-fronted/src/assets/css/components/page/config/about.scss new file mode 100644 index 000000000..e7cc37cfd --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/about.scss @@ -0,0 +1,71 @@ +.about { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + background-color: white; + border: 10px solid $--background-color-base; + box-sizing: border-box; + + .about-label { + color: $--color-text-secondary; + } + + .app-header { + display: flex; + min-width: 360px; + + .header-logo { + font-size: 0; + background-color: rgba(0, 0, 0, 0.9); + border-radius: 2px; + } + + .header-title { + padding-left: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .app-name { + font-weight: bold; + line-height: 50px; + font-size: 20px; + color: $--color-text-primary; + } + + .app-version { + font-size: 14px; + color: $--color-text-primary; + font-weight: 400; + } + } + } + + .app-component { + width: 360px; + margin-top: 35px; + + .component-title { + color: $--color-text-secondary; + height: 30px; + font-size: 14px; + line-height: 30px; + border-bottom: 1px solid $--color-text-secondary; + } + + .component-content { + padding-top: 8px; + } + + .app-component-row { + line-height: 28px; + display: flex; + color: $--color-text-primary; + font-size: 16px; + font-weight: 400; + justify-content: space-between; + } + } +} diff --git a/nezha-fronted/src/assets/css/components/page/config/agent.scss b/nezha-fronted/src/assets/css/components/page/config/agent.scss new file mode 100644 index 000000000..1120e21ab --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/agent.scss @@ -0,0 +1,44 @@ +.agent-dialog .agent-box{ + padding:10px; +} + +.agent-box >.right-box-form>.el-form-item.half-form-item{ + width: 220px; +} +.agent-box >.right-box-form>.el-form-item.half-form-item:nth-child(odd){ + width: 220px; +} + +.agent-box .download-url{ + margin-left: 12px !important; +} +.agent-box .download-url .url-copy i{ + font-size: 20px; +} +.agent-box .download-url pre code { + border: 1px solid $--border-color-base; + border-radius: 0; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + line-height: 40px; + padding: 5px 20px 5px 5px; + white-space: nowrap; + background-color: $--background-color-base; + color: $--color-text-primary; +} + +.agent-box .download-url code { + color: $--color-text-primary; +} +.download-url .el-input.is-disabled .el-input__inner{ + background-color: $--background-color-base;; + border-color: $--border-color-light; + color: $--color-text-primary; + cursor: text; +} +.download-url .el-input__suffix { + position: absolute; + -webkit-transition: all .3s; + height: 100%; + color: $--color-text-primary; + text-align: center; +} diff --git a/nezha-fronted/src/assets/css/components/page/config/assetMeta.scss b/nezha-fronted/src/assets/css/components/page/config/assetMeta.scss new file mode 100644 index 000000000..d8ec441ea --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/assetMeta.scss @@ -0,0 +1,74 @@ +.asset-meta { + .content { + display: flex; + height: calc(100% - 40px); + } + .asset-meta-group { + width: 200px; + height: calc(100% - 100px); + background-color: $--background-color-empty; + margin-right: 10px; + border: 1px solid $--border-color-base; + } + .asset-meta-table { + flex: 1; + } + .group-title { + background-color: $--background-color-1; + border-bottom: 1px solid $--background-color-empty; + display: flex; + justify-content: flex-end; + padding: 3px 5px; + } + .group-box { + height: 100%; + overflow-y: auto; + } + .el-tree-node.is-current > .el-tree-node__content { + background-color: $--background-color-base; + color: $--color-primary; + } + .el-tree-node.is-current > .el-tree-node__content .meta-group { + background-color: $--background-color-base; + color: $--color-primary; + } + .el-tree-node__content:hover .meta-group { + color: $--color-primary; + } + .meta-group { + color: $--color-text-regular; + display: flex; + justify-content: space-between; + width: 100%; + } + .meta-group .nz-icon-edit { + color: $--color-text-regular; + } + .meta-group .icon-box { + display: none; + } + .meta-group:hover .icon-box { + display: inline-block; + } + + .panel-select-header { + text-align: center; + } + .panel-select-tail { + border-top: 1px solid $--border-color-base; + + .panel-select-add { + line-height: 32px; + height: 32px; + display: inline-block; + cursor: pointer; + + i { + color: $--color-primary; + font-size: 12px; + font-weight: bold; + padding-left: 20px; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss new file mode 100644 index 000000000..ec0440eca --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss @@ -0,0 +1,219 @@ +.mib-browser-ad-search-item { + margin-bottom: 10px; +} +.mib-browser-ad-search .el-radio-group .el-radio-button__inner { + height: 24px; + line-height: 0; +} +.mib-browser-ad-search-label { + line-height: 24px; +} +.mib-browser-ad-search { + width: 450px; +} +.mib-browser-model-dropdown { + height: 300px; + overflow-y: auto; +} +.mib-browser { + .operation { + width: 90px; + } + #browser-advanced { + border-radius: 0; + border-right: 1px solid $--border-color-base-focus; + } + .mib-browser-btn-group { + position: relative; + } + .mib-browser-ad-tip { + position: absolute; + transform: translate(-100%, -100%); + top: 3px; + left: 114px; + width: 20px; + min-width: 0; + font-size: 12px; + text-align: center; + padding: 0; + color: $--border-color-base-focus; + height: 13px; + } + .mib-browser-ad-tip::after { + content: ''; + display: block; + width:0; + height:0; + overflow: hidden; + font-size: 0; + line-height: 0; + border: 4px; + border-style: solid dashed dashed dashed; + border-color: $--background-color-empty transparent transparent transparent; + position: absolute; + right: 0; + top: 50%; + transform: translate(-6px, 6px); + } + + .mib-browser-box { + display: flex; + height: calc(100% - 55px); + width: 100%; + border: 1px solid $--border-color-base; + border-radius: 4px; + box-sizing: border-box; + } + + .mib-browser-left { + height: 100%; + width: 28%; + } + .mib-browser-tree { + height: calc(69% - 40px); + background-color: $--background-color-empty; + border-radius: 4px 0 0 0; + font-size: 14px; + padding-bottom: 5px; + width: 100%; + overflow: auto; + } + .mib-browser-detail { + height: 31%; + width: 100%; + } + .el-scrollbar__wrap .el-scrollbar__view, .el-scrollbar__wrap, .el-tree { + height: 100%; + } + .tree-detail-resize { + height: 2px; + width: 100%; + background-color: $--background-color-base; + cursor: ns-resize; + border: 1px solid $--border-color-base; + border-left: none; + border-right: none; + } + .mib-browser-detail-row { + line-height: 25px; + background-color: $--background-color-empty; + border-bottom: 1px solid $--border-color-base; + font-size: 14px; + display: flex; + } + .mib-browser-detail-row:last-of-type { + border-bottom: none; + position: relative; + } + .mib-browser-detail-row:last-of-type div:last-of-type { + position: absolute; + left: calc(25% + 2px); + width: calc(75% - 20px); + height: 100%; + padding-right: 12px; + overflow: auto; + } + /*第一列宽25%*/ + .mib-browser-detail-row>div:first-of-type { + color: $--color-text-regular; + width: 25%; + word-break: break-all; + } + /*第一列宽75%*/ + .mib-browser-detail-row>div:last-of-type { + width: 75%; + border-left: 1px solid $--border-color-base; + word-break: break-all; + } + .mib-browser-detail-row:not(:last-of-type) { + border-bottom: 1px solid $--border-color-base; + height: 25px; + } + .mib-browser-detail-row:last-of-type { + min-height: calc(100% - 182px); + } + .mib-browser-detail-row>div { + padding-left: 5px; + } + .mib-browser-detail-description { + padding: 0 14px 0 0; + } + .mib-browser-right { + width: calc(72% - 4px); + height: 100%; + } + .left-right-resize { + width: 2px; + border: 1px solid $--border-color-base; + background-color: $--background-color-base; + cursor: ew-resize; + height: 100%; + border-top: none; + border-bottom: none; + } + .mib-browser-table { + height: calc(100% - 50px) !important; + width: calc(100% - 20px) !important; + padding: 10px; + .ant-table-scroll { + max-height: unset !important; + width: 100%; + height: 100%; + + .el-table { + height: calc(100% - 20px) !important; + width: calc(100% - 20px) !important; + } + .el-table__body-wrapper td { + padding: 2px 0 !important; + } + } + } + .mib-browser-table-title, .mib-browser-tree-title { + height: 30px; + line-height: 30px; + color: $--color-text-primary; + font-size: 16px; + border-bottom: 1px solid $--border-color-base; + padding: 0 5px 0 8px; + display: flex; + justify-content: space-between; + } + .mib-browser-table-op { + display: inline-block; + margin: 0 5px; + cursor: pointer; + color: $--color-text-regular; + } + .mib-browser-table-op.mib-browser-table-op-light { + color: #ccc; + cursor: default; + } + .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { + background-color: $--background-color-base; + font-weight: bold; + color: $--color-primary; + } + + .pagination-bottom { + display: none; + } +} + +.mib-browser-table.nz-table th .cell { + height: 28px; + line-height: 28px; +} +.mib-browser-table.nz-table td .cell { + height: 28px; + min-height: 28px; + line-height: 28px; +} +.mib-browser .el-dialog .el-dialog__footer { + margin-top: 0; +} +.mib-browser .el-button:focus, .mib-browser .el-button:hover { + color: unset; + border-color: unset; + background-color: unset; +} diff --git a/nezha-fronted/src/assets/css/components/page/config/operationRecord.scss b/nezha-fronted/src/assets/css/components/page/config/operationRecord.scss new file mode 100644 index 000000000..a3d4a1ac3 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/operationRecord.scss @@ -0,0 +1,34 @@ +.top-tool-left { + .profile-right__tabs-title { + display: flex; + justify-content: space-around; + align-items: flex-start; + padding-top: 19px; + .profile-right__tabs-active { + padding:0 10px; + font-size: 14px; + height: 30px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + cursor: pointer; + opacity: .6; + } + .is-active { + border-bottom: 2px solid $--color-primary; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: bold; + opacity: 1; + z-index: 1; + } + } + .profile-hr { + position: absolute; + top: 50px; + width: calc(100% - 40px); + height: 1px; + background-color: $--background-color-1; + } +} diff --git a/nezha-fronted/src/assets/css/components/page/config/profile.scss b/nezha-fronted/src/assets/css/components/page/config/profile.scss new file mode 100644 index 000000000..3dd65573b --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/profile.scss @@ -0,0 +1,344 @@ +.profile { + display: flex; + height: calc(100% - 10px); + .profile-left { + margin: 10px 0 10px 10px; + background: $--background-color-empty; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06); + border-radius: 2px; + height: calc(100% - 10px); + width: 360px; + overflow: auto; + position: relative; + .profile-left__header { + height: 200px; + width: calc(100% - 18px); + margin:0 0 50px 18px; + text-align: center; + display: flex; + justify-content: flex-start; + align-items: center; + .profile-left__header-avatar { + height: 80px; + width: 80px; + line-height: 80px; + margin-left: 20px; + span { + display: inline-block; + background: rgba(60,146,241,0.10); + text-transform: capitalize; + width: 100%; + height: 100%; + font-size: 30px; + color: #3C92F1; + letter-spacing: 0; + font-weight: 500; + border-radius: 100%; + } + } + .profile-left__header-username { + height: 80px; + padding-left: 15px; + text-align: left; + .name{ + display: inline-block; + max-width: 200px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + vertical-align: middle; + padding-top: 4px; + } + .MfaName{ + display: inline-block; + max-width: 158px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + vertical-align: middle; + padding-top: 4px; + } + div:nth-of-type(1) { + max-width: 200px; + font-size: 18px; + color: $--color-text-primary; + letter-spacing: 0; + line-height: 22px; + font-weight: 500; + padding: 9px 0 0 0; + } + div:nth-of-type(2) { + font-size: 18px; + color: $--color-text-regular; + letter-spacing: 0; + line-height: 22px; + font-weight: 400; + } + .profile-left__header-username__span { + display: inline-block; + text-align: center; + width: 42px; + height: 24px; + line-height: 25px; + margin-left: 10px; + background-color: #ecf5ff; + border-color: #d9ecff; + border-radius: 10px; + font-size: 14px; + color: #409EFF; + letter-spacing: 0; + font-weight: 400; + } + } + } + .profile-left__btn { + border: 1px solid $--border-color-base-focus; + border-radius: 4px; + background: $--background-color-empty; + min-width: 132px; + height: 36px; + position: absolute; + top: 175px; + left: 100px; + padding: 0 20px; + cursor: pointer; + span { + font-size: 14px; + color: $--color-text-primary; + text-align: left; + line-height: 22px; + font-weight: 400; + } + i { + color: $--color-text-regular; + margin-right: 5px; + font-size: 18px + } + } + .profile-left__center:nth-of-type(7) { + margin-bottom: 0; + } + .profile-left__center { + margin: 0 0 20px 26px; + display: flex; + justify-content: flex-start; + .profile-role { + color: #00C398; + } + .profile-email { + color: #0093F8; + } + .profile-mobile { + color: #EC7F66; + } + .profile-laiyuan { + color: #8871DB; + } + .profile-lang { + color: #6F7CD2; + } + .profile-left__center-title { + margin-top: 1px; + div:nth-of-type(1) { + padding-bottom: 5px; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + } + div:nth-of-type(2) { + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + } + } + } + .profile-left__button { + margin-left: 50px; + .profile-left__button-footer__btn { + margin: 0 10px; + height: 30px; + min-width: 74px; + padding: 0 15px; + border-radius: 4px; + } + .footer__btn { + background-color: $--color-primary; + color: white; + border: 1px solid transparent; + } + .footer__btns { + background-color: $--background-color-empty; + color: $--color-text-primary; + border: 1px solid #ccc; + } + .footer__btns:hover { + opacity: .6; + color: $--color-primary; + border: 1px solid $--color-primary; + } + .footer__btn:hover { + opacity: .6; + } + .is-disabled,.is-disabled:hover{ + color: #C0C4CC; + cursor: not-allowed; + background-image: none; + background-color: $--background-color-empty; + border-color: $--border-color-light; + } + } + .profile-left__bottom { + width: 320px; + margin: 0 10px 15px; + .profile-left__bottom-title { + width: 275px; + margin: auto; + padding: 0 0 30px 0; + div:nth-of-type(1) { + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + line-height: 25px; + font-weight: 400; + } + div:nth-of-type(2) { + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + line-height: 25px; + font-weight: 400; + } + } + } + } +} +.login-dialog-title{ + background-color: $--background-color-base; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + padding: 10px; + margin-bottom: 10px; + word-break: keep-all; +} +.login-dialog-title2{ + background: rgba(246,248,250, 0.9); + border: 1px solid $--border-color-light; + border-radius: 2px; + height: 248px; + padding: 15px; + position: relative; + .copy-value-content{ + position: absolute; + right: 5px; + top: 5px; + cursor: pointer; + } + .login-dialog-recover{ + height: calc(100% - 30px); + overflow-y: auto; + &>div { + color: $--color-text-secondary; + } + } +} +.enter-code{ + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; + margin-bottom: 10px; +} +.qrCode-box{ + display: flex; + align-items: center; +} +.qrCode-content{ + padding: 4px; + margin-left: 10px; +} +.qrCode-text{ + width: 60%; + margin-left: 10px; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 400; +} +.qrCode-authKey{ + background-color: $--background-color-base; + border: 1px solid $--border-color-light; + border-radius: 2px; + padding: 5px 12px; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + font-weight: 400; + margin-top: 12px; +} +/deep/ .nz-dialog .el-dialog__body{ + padding-bottom: 0; +} +.verify-link{ + font-size: 14px; + color: #3C92F1; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + cursor: pointer; +} +.verify-link:hover{ + border-bottom: 1px solid #3C92F1; +} +.circle{ + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background: #CECECE; + margin-right: 10px; +} +.footer { + .footer__btn { + margin: 0 15px; + height: 30px; + min-width: 74px; + padding: 0 15px; + color: white; + background-color: $--color-primary; + border: none; + border-radius: 4px; + outline: none; + box-sizing: border-box; + font-size: 14px; + cursor: pointer; + transition: background-color linear .2s, color linear .1s; + } + .footer__btn:hover:not(.footer__btn--disabled) { + background-color: $--color-primary-light-2; + } + .footer__btn--light { + background-color: $--background-color-empty; + border: 1px solid $--border-color-base; + color: $--color-text-primary; + } + .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { + background-color: $--background-color-empty; + border-color: $--color-primary-light-5; + color: $--color-primary; + } + .footer__btn--disabled { + opacity: .6; + cursor: default; + } +} +.profile-hr { + height: 1px; + background-color: $--border-color-light; + width: 320px; + margin: 40px auto +} diff --git a/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss b/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss new file mode 100644 index 000000000..e35a54c80 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss @@ -0,0 +1,63 @@ +.profile-change { + height: 100%; + padding: 10px 0 0 25px; + width: calc(100% - 50px); + overflow: hidden auto; + .profile-change__Pin { + min-width: 300px; + max-width: 600px; + width: calc(100% - 100px); + .profile-change__Pin-from { + .profile-change__Pin-input >>> .el-form-item__label{ + padding: 0 !important; + line-height: 32px; + height: 32px; + } + .el-form-item { + margin-bottom: 15px; + } + } + .profile-change__Pin-button { + display: flex; + align-items: center; + justify-content: center; + padding: 20px 0; + .footer__btn { + margin: 0 10px; + height: 30px; + min-width: 74px; + padding: 0 10px; + color: white; + background-color: $--color-primary; + border: none; + border-radius: 4px; + outline: none; + box-sizing: border-box; + font-size: 14px; + cursor: pointer; + transition: background-color linear .2s, color linear .1s; + } + + .footer__btn:hover:not(.footer__btn--disabled) { + background-color: $--color-primary-light-2; + } + + .footer__btn--light { + background-color: $--background-color-empty; + border: 1px solid $--border-color-base; + color: $--color-text-primary; + } + + .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { + background-color: $--background-color-empty; + border-color: $--color-primary-light-5; + color: $--color-primary; + } + + .footer__btn--disabled { + opacity: .6; + cursor: default; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/components/page/config/setup.scss b/nezha-fronted/src/assets/css/components/page/config/setup.scss new file mode 100644 index 000000000..38a007fe4 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/setup.scss @@ -0,0 +1,172 @@ +.setup { + width: 100%; + height: 100%; + margin: 0 auto; + .logo-header { + padding-left: 20px; + width: 100%; + height: 50px; + background-color: #202f3f; + position: relative; + } + .logo-header-text { + font-family: Verdand; + font-size: 18px; + font-weight: 400; + letter-spacing: 0; + color: $--border-color-base; + } + .language-select { + position: absolute; + top: 0; + right: 20px; + z-index: 2; + margin-top: 15px; + margin-right: 20px; + } + .flex-box{ + height: calc(100% - 50px); + } + .step-box { + width: 240px; + height: 100%; + } + .setup-box { + width: calc(100% - 240px); + height: 100%; + } + .step-box .step-inner { + height: 100%; + padding: 20px; + padding-left: 0; + box-sizing: border-box; + } + + .setup-box .setup-inner { + position: relative; + height: 100%; + padding: 40px 30px 0 30px; + border: 10px solid $--border-color-light; + box-sizing: border-box; + } + .setup-inner .setup-config { + position: relative; + height: 100%; + } + .setup-inner .setup-help { + width: calc(100% - 710px);; + height:calc(100% - 50px); + position: absolute; + top: 20px; + right: 0; + border-left: 1px solid $--border-color-light; + padding-left: 30px; + } + .setup-help .help-header { + font-family: Roboto-Medium; + font-size: 22px; + color: $--color-text-primary; + font-weight: 500; + margin-bottom: 20px; + } + .setup-help .help-body { + font-family: Roboto-Regular; + font-size: 16px; + color: $--color-text-primary; + line-height: 28px; + font-weight: 400; + } + .welcome { + line-height: 35px; + font-size: 16px; + } + .welcome .wel-header { + font-family: Roboto-Medium; + font-size: 26px; + color: $--color-text-primary; + font-weight: 500; + } + .wizard-header { + font-family: Roboto-Bold; + font-size: 14px; + color: $--color-text-primary; + font-weight: 700; + } + .welcome ul li { + list-style: inside !important; + font-family: Roboto-Regular; + font-size: 14px; + color: $--color-text-primary; + font-weight: 400; + } + .welcome pre { + border: 1px solid $--border-color-light; + border-left: 4px solid $--color-primary; + border-radius: 0; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + font-size: 14px; + background-color: $--background-color-base; + color: $--color-text-primary; + padding: 15px; + height: 48px; + line-height: 16px; + box-sizing: border-box; + } + .welcome .content-divider { + height: 1px; + width: 100%; + border-bottom: 1px solid $--border-color-light; + margin: 5px 0; + } + .setup-bottom-btn { + width: 100%; + height: 49px; + position: absolute; + bottom: 0; + right: 20px; + padding-top: 20px; + text-align: right; + } + /* 步骤条样式 */ + .el-step{ + height: 46px ; + } + .el-step .el-step__head{ + display: none ; + } + .el-step .el-step__main{ + padding-left: 20px ; + height: 46px ; + line-height: 46px; + } + .el-step .el-step__main .el-step__title{ + padding: 0 0 0 20px; + font-family: Roboto-Medium; + font-size: 16px; + color: $--color-text-secondary; + letter-spacing: 0; + font-weight: 400; + margin-top: 11px; + } + .el-step .el-step__main .el-step__title.is-process{ + border-left:2px solid $--color-primary ; + color: $--color-text-primary; + font-weight: 500; + padding-left: 18px; + } + .el-step .el-step__main .el-step__title.is-success{ + color: $--color-text-primary; + font-weight: 500; + } + .el-step .el-step__main .el-step__description{ + display: none ; + } + .el-select-dropdown__item.selected{ + font-weight: 400; + } + .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { + border-bottom: unset !important; + color: $--color-text-primary; + background-color: transparent; + } +} diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss new file mode 100644 index 000000000..0d2dccd59 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/system.scss @@ -0,0 +1,265 @@ +.system { + height: 100%; + position: relative; + margin-top: 10px; +} +.system-config-form{ + width: 61.8% !important; + position: relative; +} + +.linkBox{ + max-height: 800px; + width: 800px; +} +.scrollBox{ + position: relative; + height: 600px; + margin-bottom: 20px; +} +.linkTitle{ + display: flex; + align-items:center; + border-bottom: 2px solid $--border-color-base; + color: #6b778c; + font-size: 12px; + height: 24px; + line-height: 24px; + font-weight: 600; +} +.handle{ + cursor: move !important; + padding:0 5px; + line-height: 34px; +} +.linkBtn{ + height: 28px; + line-height: 0; + font-size: 12px; +} +.linkTitleHandle{ + padding: 0 13px; +} +.linkAddBox{ + display: flex; + padding: 10px 0; + border-bottom: 1px solid $--border-color-base; + font-size: 13px; + line-height: 34px; +} +.linkContent{ + display: flex; + padding: 10px 0; + font-size: 13px; + line-height: 34px; +} +.linkContent:not(:last-child){ + border-bottom: 1px solid $--border-color-base; +} +.linkFormContent{ + display: flex; + line-height: 34px; +} +.linkTitleName{ + width: 100px; + margin-right: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 31px; +} +.linkTitleUrl{ + width: 462px; + margin-right: 12px; + height: 31px; +} +.linkTitleUrlContent{ + display: inline-block; + width: 460px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 31px; + cursor: pointer; + outline: none; +} +.linkFormBtn .nz-icon-delete{ + cursor: pointer; + color: $--color-primary; + margin-left: 10px; +} +.linkFormBtn .nz-icon-edit{ + font-size: 14px; + cursor: pointer; +} +.nz-icon-create-square{ + cursor: pointer; + color: $--color-text-primary; +} +/deep/ .el-form-item--small .el-form-item__error{ + padding-top: 0; +} +.linkUrlTip{ + width: 430px; +} +.system-config-form.terminal /deep/ .el-input-number--small{ + width: 512px; +} +.system-config-form.basicForm /deep/ .el-input-number--small{ + width: 512px; +} +.system-config-form /deep/ .el-input input{ + text-align: left; +} +.utc-item { + color: $--color-text-secondary; + font-size: 12px; +} +.system-title{ + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + text-align: left; + padding-left: 20px; + font-weight: 500; + margin-bottom: 30px; +} +.system-title-border{ + border-top: 1px dashed $--border-color-light; + padding-top: 30px; + width: 699px; +} + +.system { + background-color: $--background-color-empty; + padding: 10px; + .el-form-item:last-of-type.monitorLastEle { + .el-form-item__content{ + margin-left: 180px !important; + margin-bottom: 20px; + } + } + .el-tabs__nav-scroll{ + background-color: $--background-color-empty; + } + .el-tabs__nav-scroll,.el-tabs__header,.el-tabs__nav-wrap{ + border-bottom: 0; + } + .el-form-item:last-of-type { + + .el-form-item__content { + margin-left: 0 !important; + text-align: center; + } + .nz-btn { + margin: 0 10px; + } + } + .full-table { + .el-tabs__content{ + height: calc( 100% - 100px); + } + .list-page .main-container{ + padding: unset; + } + .table-column-setting,.pagination-bottom{ + display: none; + } + } + .el-tabs__content { + padding-top: 25px; + border: 1px solid $--border-color-light; + } + .el-tabs__item { + outline: none; + box-sizing: border-box; + } + .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active { + color: $--color-primary; + background: $--background-color-empty; + border-bottom: none; + margin-left: .1px; + } + .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover { + color: $--color-primary; + opacity: .8; + } + .el-tabs--border-card>.el-tabs__header .el-tabs__item { + height: 40px; + background: $--background-color-base; + border: 1px solid $--border-color-light; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + margin-top: 0; + } + .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) { + margin-left: 5px; + } +} +.system-config-form .el-form-item__content{ + width: 512px; +} + +.system-config-form .el-input{ + width: 512px; + text-align: left; +} +.system-config-form .el-input__inner{ + height: 28px; + line-height: 28px; +} +.system-tabs { + box-shadow: unset !important; + border:unset; + border-top: unset; + height: 100%; +} +.system-tabs .el-tabs--border-card{ + box-shadow: unset !important; + height: 100%; + width: 100%; + border-bottom: unset; + border-left: unset; +} +.reset-form .el-checkbox-group{ + margin-left: -28px !important; +} +.el-form-item__tip { + color: $--color-text-secondary !important; + position: absolute; + font-size: 12px; + margin-top: 5px; + line-height: 12px; +} +.el-form-item__tip + .el-form-item__error { + margin-top: 20px; +} +.el-form-item__tip.el-form-item__tip--two-row + .el-form-item__error { + margin-top: 34px; +} +.el-form-item.has-tip { + margin-bottom: 34px; +} +.el-form-item.has-tip--two-row { + margin-bottom: 54px; +} +@keyframes warnBackground { + 0% {background-color: #FFFFFF;} + 25% {background-color: #EF7458;} + 50% {background-color: #FFFFFF;} + 75% {background-color: #EF7458;} + 100% {background-color: #FFFFFF;} +} +.warn-pop { + background-color: #FEF0F0; + border-color: #FEF0F0; + color:#F66C6C; +} +.warn-pop .popper__arrow:after{ + border-top-color: #FEF0F0 !important; +} +.system .logo-upload-tip{ + color:#F66C6C; + font-size: 12px; + line-height: 20px; +} diff --git a/nezha-fronted/src/assets/css/components/page/config/system/notifyMethodTab.scss b/nezha-fronted/src/assets/css/components/page/config/system/notifyMethodTab.scss new file mode 100644 index 000000000..953b04626 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/config/system/notifyMethodTab.scss @@ -0,0 +1,29 @@ +.notify-method-tab { + .notify-table{ + height: calc(100% - 110px) + } + .notify-table .el-table{ + height: calc(100% - 10px) !important; + } + .notificationMessage{ + margin-left: 20px; + display: flex; + width: calc(100% - 39px); + background: $--background-color-base; + color: $--color-text-secondary; + margin-bottom: 10px; + font-size: 14px; + justify-content: left; + justify-items: center; + align-items: flex-start; + padding: 10px; + box-sizing: border-box; + } + .notificationMessage .nz-icon { + font-size: 20px; + } + .notificationMessage .more{ + font-size: 14px; + cursor: pointer; + } +} diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss new file mode 100644 index 000000000..2e8af54d2 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss @@ -0,0 +1,167 @@ +.el-row:last-child { + margin-bottom: 0; +} +.el-col { + border-radius: 4px; +} +.bg-purple { + background: $--background-color-empty; +} +.grid-content { + border-radius: 4px; + min-height: 36px; +} + +.common-float-left { + float: left; + display:inline-block; +} + +.el-inner { + width: 200px; + border-top-width: 0px; + border-left-width: 0px; + border-right-width: 0px; + border-bottom-width: 10px; + border-color: red; +} + +.element-bottom-border { + padding-bottom: 5px; + border-bottom: 1px solid #dfe7f2; + margin-top: 15px; +} +/*metric样式--begin*/ +.element-item { + + &:first-of-type { + padding-top: 0; + .nz-icon-minus-position { + padding-top: 4px; + } + } + padding: 20px 0; + width: 100%; + border-bottom: 1px dashed $--border-color-base; + /deep/ .nz-icon-minus { + padding: 0 4px; + } +} +.element-item__padding.element-item { + padding: 0; +} +.nz-icon-minus-position { + padding: 24px 0 24px 0; +} +.right-box-form .element-item.form-row-item{ + width: calc(100% - 60px); + padding: 10px 10px 5px 0; +} +.legend-title{ + width: 108px; + margin-right: 10px; + text-align: left; + padding-left:10px; + height: 32px; + border-radius: $--border-radius-small; + line-height: 32px; + background: $--border-color-light; + color: $--color-text-regular; +} +/*metric样式--end*/ +.label-center{ + vertical-align: middle; + line-height: 34px; +} + +.z-top { + /*z-index: 2900;*/ +} +.save-chart-box{ + z-index: 2900; +} +.mc{ + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + z-index: 100; +} +/deep/ .el-color-picker{ + position: absolute; +} +.range /deep/ .el-color-picker{ + left: -17px; +} +.color-content{ + height: 0; + width: 0; + overflow: hidden; + position: absolute; + top: -280px; + left: 280px; +} +.color-tab{ + position: absolute; + top: -268px; + left: 144px; + height: 28px; + border-radius: 5px 5px 0 0; + width: 312px; + border: 1px solid $--border-color-light; + border-bottom: none; + background-color: $--background-color-empty; + display: flex; + justify-content: space-between; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.color-tab div{ + text-align: center; + flex: 1; + color: $--color-text-secondary; + transition: all .3s cubic-bezier(.645,.045,.355,1); + background: #E4E7ED; + cursor: pointer; +} +.color-tab div:first-child{ + border-right-color: $--border-color-base; +} +.color-tab div:hover{ + color: #409EFF; +} +.color-tab .color-active{ + color: #409EFF; + background-color: $--background-color-empty; +} +.color{ + position: relative; +} +.color-show{ + display: inline-block; + position: relative; + top: 1px; +} +.topology-box{ + width: 100%; + height: 242px; + border: 1px solid $--border-color-light; + border-radius: 2px; + position: relative; +} +.topology-dialog{ + position: fixed !important; + height: 100vh; + width: 100vw; + top: 0; + left: 0; + z-index: 11; +} +.topology-mc{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; +} diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss new file mode 100644 index 000000000..c149e600d --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss @@ -0,0 +1,306 @@ +.explores { + display: flex; + padding: 10px 0 10px 10px; + background-color: $--background-color-base; + box-sizing: border-box; + + .el-table--border::after, .el-table--group::after, .el-table::before { + height: 0; + } +} + +.explore-collapse.el-collapse { + border: none; + .el-collapse-item { + margin-bottom: 10px; + border: 1px solid $--border-color-light; + border-bottom: none; + } + .el-collapse-item__header { + height: 38px; + line-height: 38px; + flex-direction: row-reverse; + justify-content: flex-end; + + i { + margin: 0 8px; + } + } + .el-collapse-item__content { + padding: 0 30px 20px; + } +} +.explore { + .chart-view__switch { + margin-top: 20px; + border: 1px solid $--border-color-light; + border-radius: 2px; + height: 50px; + line-height: 50px; + .el-switch.is-checked { + margin-left: 35px; + } + } + .explore-table { + .el-table { + position: static !important; + tr td .cell { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .explore-table-gear .cell { + display: flex; + justify-content: center; + } + } + .promqlInput { + .query-row > div:first-of-type { + margin-right: 10px; + } + } + .promqlInput:not(:first-of-type) { + margin-top: 10px; + } + .main-container { + padding: 0 !important; + overflow: auto; + } + .metric-table{ + border-bottom: 1px solid $--border-color-light !important; + } + height: 100%; + border-right: 1px solid $--background-color-base; + .explore-close { + display: flex; + justify-content: flex-end; + padding: 18px 20px 4px 0; + + span { + cursor: pointer; + } + i { + font-size: 14px; + color: $--color-text-primary; + } + } + .el-dropdown-link { + span:nth-of-type(1) { + color: $--color-primary; + padding-right: 10px; + } + span:nth-of-type(2) { + font-size: 16px; + color: $--color-text-primary; + font-weight: 500; + padding-right: 20px; + } + span:nth-of-type(3) { + color: #BEBEBE; + } + } + .chart-room { + width: 100%; + height: 300px + } + .introduce-view { + .info-room { + padding: 24px; + background-color: #e9edf2; + border-top: 3px solid #3274d9; + box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); + flex-grow: 1; + + .cheat-sheet-item__title { + font-size: 21px; + } + + .cheat-sheet-item__label { + font-size: 13px; + } + + code { + font-family: Menlo, Monaco, Consolas, Courier New, monospace; + font-size: 11px; + background-color: $--background-color-1; + color: $--color-text-regular; + border: 1px solid $--border-color-base-focus; + border-radius: 4px; + } + } + .title-heard.info-room { + color: $--color-text-primary; + h1 { + font-size: 22px; + color: $--color-text-primary; + font-weight: 500; + } + .title-heard__divider { + width: 100%; + height: 1px; + border-bottom: 2px solid $--border-color-base; + margin: 5px 0 28px 0; + } + .introduce-view__content { + line-height: 28px; + margin-top: 18px; + h2 { + font-size: 22px; + margin-bottom: 5px; + color: $--color-text-primary; + font-weight: 400; + } + .introduce-view__content-label { + p { + font-size: 16px; + color: $--color-text-primary; + font-weight: 400; + } + span { + font-size: 14px; + color: $--color-text-regular; + font-weight: 400; + } + } + } + } + } +} +/*外部引用 样式start*/ +.doc-content { + font-size: 16px; +} + +.doc-content p, .doc-content.ul, .doc-content .alert { + margin: 15px 0 15px 0; + line-height: 1.5; +} + +.doc-content .content-divider{ + height: 1px; + width:100%; + border-bottom: 2px solid $--border-color-base-focus; + margin: 5px 0; +} + +.doc-content > h1 { + color: #e6522c; + font-size: 30px; + text-transform: uppercase; +} + +.doc-content > h1 a { + color: #000 !important; +} + +.doc-content.blog > h1 { + text-transform: none; +} + +.doc-content.blog .sponsor-logos > a > img { + width: 250px; + display: inline-block !important; + margin: 15px 55px; +} +.doc-content > h1 { + color: #e6522c; + font-size: 22px; +} + +.doc-content > h2 { + color: #e6522c; + font-size: 18px; +} + +.doc-content > h2 code { + color: #e6522c; + background: none; +} + +.doc-content > h3 { + font-size: 20px; + font-weight: bold; +} + +.doc-content > h4 { + font-weight: bold; + font-size: 18px; + margin-top: 20px; +} + +.doc-content a.header-anchor { + padding-left: 15px; + color: gray; + text-decoration: none; +} + +.doc-content img { + width: 90%; + margin-left: auto; + margin-right: auto; + display: block; +} + +.doc-content img.orig-size { + width: auto; + margin-left: 0; +} + +.doc-content .open-source-notice { + color: $--color-text-regular; + background-color: $--background-color-base; + text-align: center; + padding: 0.8em; + margin-top: 1.5em; +} + +.toc { + padding: 1em; + background-color: $--background-color-base; +} + +.toc-right { + float: right; + width: 40%; + margin: 0 0 0.5em 0.5em; +} + +.toc ul { + padding: 0 0 0 1.5em; + margin: 0; +} + +.toc a code { + color: #337ab7; + background-color: transparent; +} + +pre { + border: 1px solid $--border-color-base; + border-left: 4px solid #e6522c; + border-radius: 0; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + background-color: $--background-color-base; + color: $--color-text-primary; + padding: 15px; +} + +pre code { + white-space: pre; +} + +code { + color: $--color-text-primary; +} + +aside { + color: $--color-text-secondary; + padding-bottom: 8px; + border-bottom: 1px solid #aaa; +} + +article { + margin: 10px 0 60px 0; +} +/*外部引用 样式end*/ diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss new file mode 100644 index 000000000..9f575b676 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss @@ -0,0 +1,104 @@ +.log-detail { + position: relative; + * { + box-sizing: border-box; + } + .log-table{ + position: relative; + min-height: 200px; + } + .log-table .nz-table2 { + padding: 10px 0 0 0; + position: relative; + .el-table__body { + border-collapse: separate; + border-spacing: 0 6px; + + td { + vertical-align: top; + padding: 1px 0; + border: none; + } + td.el-table__expanded-cell { + padding: 0 0 0 60px; + background-color: $--background-color-base; + } + // 左侧边框 + td:first-child { + border-left: 3px solid; + } + td.log-border--debug { + border-left-color: #1f78c1; + } + td.log-border--info { + border-left-color: #7eb26d; + } + td.log-border--warn { + border-left-color: #ff851b; + } + td.log-border--error { + border-left-color: #e24d42; + } + td.log-border--fatel { + border-left-color: #705da0; + } + td.log-border--trace { + border-left-color: #6ed0e0; + } + td.log-border--unknown { + border-left-color: #dde4ed; + } + td.el-table__expanded-cell:first-child { + border-left: none; + } + // 不换行 + .log-row-wrap--no-wrap .cell { + white-space: nowrap; + overflow: visible; + .text-ellipsis{ + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap + } + } + .cell { + .text-ellipsis{ + overflow:visible; + text-overflow:unset; + white-space: unset; + } + } + } + } + + .log-chart { + height: 300px; + width: 100%; + } + .log-operations { + display: flex; + align-items: center; + height: 50px; + width: 100%; + padding: 0 10px 0 20px; + border: 1px solid $--border-color-light; + border-radius: 2px; + + .log-operation { + display: flex; + align-items: center; + + &.log-operation--right { + margin-left: auto; + } + &:not(:last-of-type) { + margin-right: 30px; + } + + .operation-label { + padding-right: 10px; + color: $--color-text-regular; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss new file mode 100644 index 000000000..1e78d06d4 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss @@ -0,0 +1,137 @@ +.promqlInput { + .no-resize{ + background: rgba(255,255,255,0); + } + .promqlInput { + position: relative; + width: 100%; + display: flex; + } + + .promqlInput .query-row { + display: flex; + flex-wrap: wrap; + width: 100%; + } + + .input-box .append-msg { + font-size: 12px; + line-height: 1; + padding-top: 4px; + } + + .input-box .error { + color: #F56C6C; + } + + .query-options .option { + width: 34px; + height: 29px !important; + line-height: 30px; + text-align: center; + } + + .query-options .option:focus, .query-options .option:hover { + background-color: rgb(247, 248, 250); + } + + .query-row .input-box { + flex: auto; + margin-right: 10px; + } + + .metric-btn { + height: 29px !important; + width: 105px; + margin-left: 1px; + } + + .metric-btn:hover, .metric-btn:focus { + background-image: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%); + color: $--color-text-regular; + } + + .metric-selector .el-cascader-panel { + height: 300px; + position: absolute; + z-index: 2100; + background-color: #FFF; + } + + .expr-title { + width: 120px; + padding-right: 20px; + text-align: right; + color: $--color-text-regular; + font-size: 14px; + letter-spacing: 0; + line-height: 22px; + } + + /deep/ .el-cascader-node { + padding: 0; + } + + /deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label { + padding: 0; + } + .metric-selector-title{ + width:108px; + margin-right: 10px; + height: 32px; + text-align: left; + padding: 0 0 0 10px; + font-weight: 400; + line-height: 33px; + background: $--border-color-light; + border-radius: $--border-radius-small; + font-size: 14px; + color: $--color-text-primary; + letter-spacing: 0; + } + .metric-selector-input-box{ + width: calc(100% - 160px); + } + .metric-null-input-box{ + width: 100%; + } + .metric-null-title{ + width:100%; + font-weight: bold; + letter-spacing: 0; + } + .nz-cascade { + padding: 0 10px 0 25px; + position: relative; + } + .nz-cascade .nz-icon-template2 { + display: none; + } + + .nz-cascade-temp .nz-icon-template2{ + display: inline-block; + position: absolute; + left: 5px; + } + .cascader-panel-more { + text-align: center; + } + .temp-form-box{ + width: 480px; + } + .temp-form-box .temp-form-box-title{ + font-family: PingFangSC-Medium; + font-size: 14px; + color: $--color-text-regular; + letter-spacing: 0; + font-weight: 600; + margin-bottom: 5px; + } + .temp-form-box .temp-form-box-col{ + margin-right: 10px; + } + .explore-select-header { + text-align: center; + margin-bottom: 14px; + } +} diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/overview/chart.scss b/nezha-fronted/src/assets/css/components/page/dashboard/overview/chart.scss new file mode 100644 index 000000000..01e7be6dc --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/dashboard/overview/chart.scss @@ -0,0 +1,57 @@ +.chart-room { + .showMore{ + text-align: center; + font-size: 12px; + position: absolute; + left: 50%; + transform: translateX(-50%); + z-index: 1; + } + .nz-icon-jinggao{ + color: $--color-warning; + margin-right: 5px; + font-size: 14px; + } + .moreChart{ + color: rgb(87, 148, 242); + cursor: pointer; + } + + width: 100%; + height: 100%; + position: relative; + + .legend-container{ + overflow: auto; + width: calc(100% - 30px); + max-height:80px; + min-height:25px; + /*height: 80px;*/ + font-size:12px; + text-align:left; + left: 10px; + bottom: 5px; + line-height: 18px; + position: absolute; + } + .legend-container .legend-item{ + text-overflow:ellipsis; + white-space:nowrap; + overflow-x:hidden; + cursor:pointer; + display:inline-block; + float:left; + line-height: 20px; + } + .ft-gr{ + color:lightgray; + } + .legend-shape{ + display:inline-block; + margin-right:5px; + border-radius:10px; + width:15px; + height:5px; + vertical-align: middle; + } +} diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss similarity index 82% rename from nezha-fronted/src/components/page/dashboard/overview/overview2.scss rename to nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss index a9a953f01..f60e7f97a 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss @@ -1,14 +1,14 @@ .overview { height: calc(100% - 20px) !important; padding: 0 10px; - background-color: #f6f6f6; + background-color: $--background-color-base; } .overview-content-header{ display: flex; justify-content: space-between; margin-top: 10px; padding: 5px 0 0 0; - background-color: white; + background-color: $--dashboard-background-color-empty; box-sizing: border-box; } .overview-content-header .header-title{ @@ -30,6 +30,7 @@ justify-content: space-between; min-width: 310px; padding-right: 7px !important; + color: $--color-text-primary; } .tool-container .pickTime{ margin-right: -20px; @@ -39,7 +40,6 @@ display: inline-block; height: 35px; line-height: 35px; - color: #333333; vertical-align: middle; } .content-row-box .content-col-box:first-child{ @@ -56,7 +56,7 @@ line-height: 1.3rem; } .date .sys-date{ - color: #333333; + color: $--color-text-primary; font-size: 0.75rem; line-height: 0.75rem; width: 88px; @@ -68,11 +68,11 @@ .operation .screen-icon{ font-size: 1.35rem !important; cursor: pointer; - color: #666666; + color: $--color-text-regular; } .overview-content { padding: 0 10px; - background-color: white; + background-color: $--dashboard-background-color-empty; box-sizing: border-box; height: calc(100% - 50px); width: 100%; @@ -100,25 +100,25 @@ .content-row-box .content-col-box{ margin: 5px; display: inline-block; - background-color: white; + background-color: $--background-color-empty; flex: 1; border-radius: 5px; - border: 1px solid #edecec; + border: 1px solid $--dashboard-card-border-color; } .content-col-title { height: 2rem; line-height: 2rem; - color: #333; + color: $--color-text-primary; font-size: 0.875rem; padding: 0 0.625rem; - background-color: #efefef; + background-color: $--dashboard-card-header-background-color; border-radius: 5px 5px 0 0; display: flex; justify-content: space-between; } .content-col-title .el-dropdown { font-size: 0.875rem; - color: #333; + color: $--color-text-primary; .nz-icon-arrow-down { font-size: 0.75rem; margin: 0 1.2rem 0 0.8rem; @@ -143,7 +143,7 @@ opacity: 0; width: 0.8rem; .el-input__suffix i { - color: #606266; + color: $--color-text-regular; } .el-cascader__tags { display: none; @@ -159,7 +159,7 @@ .el-input__inner { height: 100% !important; line-height: 1.6rem; - background-color: #efefef; + background-color: $--background-color-1; width: 6.688rem; padding-left: 0.625rem; padding-right: 0.8rem; @@ -171,7 +171,7 @@ .diy-content { height: 2rem; pointer-event: none; - color: #333; + color: $--color-text-primary; span, i { line-height: 2rem; } @@ -296,7 +296,7 @@ } .content-alert-num { position: absolute; - color: #666; + color: $--color-text-regular; font-size: 0.7rem; font-style: italic; right: 0; @@ -305,11 +305,11 @@ } .content-num-box .content-col-content-title { font-size: 0.875rem; - color: #666; + color: $--color-text-regular; } .content-col-content-num { font-weight: bold; - color: #333; + color: $--color-text-primary; } .overview-tooltip-box { @@ -358,7 +358,7 @@ position: fixed; transform: translate(-100%, -50%); min-width: unset; - background-color: rgba(255, 255, 255, 0.8) !important; + background-color: $--background-color-empty !important; } .axis-tooltip::after { content: ''; @@ -384,7 +384,7 @@ .overview-loading .el-loading-spinner{ transform: scale(0.5); top: -5px; - left: 0px; + left: 0; } .tooltip{ @@ -410,7 +410,7 @@ } } .tooltip--title { - color: #333333; + color: $--color-text-primary; font-size: 14px; font-weight: 600; padding-bottom: 10px; @@ -427,7 +427,7 @@ height: calc(100% - 30px); .legend-value { font-size: 12px; - color: #333333; + color: $--color-text-primary; position: absolute; //left: 155px; //top: 35px; @@ -447,7 +447,7 @@ .tooltip-asset { width: 260px; height: 150px; - border: 1px solid $--primary-border-color; + border: 1px solid $--border-color-base; border-radius: 2px; .tooltip-asset--title { @@ -455,10 +455,10 @@ height: 24px; line-height: 24px; font-size: 14px; - color: #333333; + color: $--color-text-primary; display: flex; justify-content: space-between; - border-bottom: 1px solid $--primary-border-color; + border-bottom: 1px solid $--border-color-base; box-sizing: border-box; } @@ -470,7 +470,7 @@ display: flex; height: 75px; box-sizing: border-box; - border-bottom: 1px solid $--primary-border-color; + border-bottom: 1px solid $--border-color-base; } .tooltip-asset--row + .tooltip-asset--row { @@ -486,8 +486,8 @@ padding-left: 10px; line-height: 75px; font-size: 14px; - border-right: 1px solid $--primary-border-color; - color: #333333; + border-right: 1px solid $--border-color-base; + color: $--color-text-primary; box-sizing: border-box; } .tooltip-asset--ping{ @@ -502,7 +502,7 @@ .tooltip-asset--sub-row { padding-left: 10px; font-size: 13px; - color: #333333; + color: $--color-text-primary; line-height: 25px; display: flex; @@ -524,15 +524,15 @@ } .red-sign { - background-color: $danger-color; + background-color: $--color-danger; } .green-sign { - background-color: $success-color; + background-color: $--color-success; } .gray-sign { - background-color: $suspended-color; + background-color: $--color-suspended; } span { position: absolute; @@ -572,7 +572,7 @@ .row--label { width: 36px; border-radius: 4px 0 0 4px; - color: white; + color: $--background-color-empty; text-align: center; } @@ -630,3 +630,68 @@ margin-left: -11px; } +.leaflet-control-zoom{ + border: 1px solid $--border-color-light !important; + box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important; + .leaflet-control-zoom-out,.leaflet-control-zoom-in{ + opacity: .7; + background: #FFF; + } +} +.leaflet-control-attribution{ + background-color: unset !important; + color: rgba(178, 178, 178, 0.77); +} + +.error-item{ + color: #FADED7 ; + animation: error-animation 1s infinite ease-in-out; + animation-direction:normal; +} +.real-marker{ + pointer-events: none; +} +.my-pane { + position: fixed; + width: 1px; + z-index: 99999; + height: 1px; + background-color: transparent; +} +.leaflet-bottom{ + z-index: 409; +} +.el-carousel--horizontal{ + height: 100%; +} +.el-carousel__container{ + height: calc(100% - 36px); +} +.el-carousel__item .project-name { + font-size: 18px; + margin: 0; + position: absolute; + z-index: 1; +} + +.maskLayer{ + width: 100%; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: 10; + cursor: pointer; +} +.el-carousel__indicator--horizontal .el-carousel__button{ + background-color: #C0C4CC; + opacity: .24; + height: 10px; + width: 10px; + border-radius: 50%; +} +.el-carousel__indicator--horizontal.is-active .el-carousel__button{ + opacity: 1; +} + diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss new file mode 100644 index 000000000..b5d1aadec --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss @@ -0,0 +1,68 @@ +.border-t-1-de{ + border-top: 1px solid $--border-color-base; +} +.border-t-1-tr{ + border-top: 1px solid transparent; +} +.panel { + height: 100%; + display: flex; + flex-direction:column; +} + +.panel .el-table { + border-radius: 5px; +} + +/* begin-chart list*/ +.table-list { + margin-top: 0; + overflow-y: auto; + height: calc(100% - 50px); + flex: 1; +} + +.box-content { + position: relative; + height: 100%; +} +.panel-select-header { + display: flex; + justify-content: space-evenly; + margin-bottom: 15px; +} +.panel-select-tail { + border-top: 1px solid $--border-color-base; + .panel-select-add { + line-height: 32px; + height: 32px; + display: inline-block; + cursor: pointer; + i { + color: $--color-primary; + font-size: 12px; + font-weight: bold; + padding-left: 20px; + } + } +} +/* end-chart list*/ +.panel-loading { + position: fixed; + left: 250px; + top: 59px; + height: 100%; + width: 100%; + background: center center no-repeat $--background-color-empty; + z-index: 10; +} +.show-panel-name{ + display: inline-block; + padding: 0 7px; + font-weight: bold; + max-width: 310px; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + vertical-align: bottom; +} diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss new file mode 100644 index 000000000..6f2e349fa --- /dev/null +++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss @@ -0,0 +1,61 @@ +.main-list--project { + .main-list{ + height: 100%; + width: 100%; + display: flex; + background: $--background-color-base; + .projectList{ + flex: 1; + margin-right: 10px; + } + .projectTopo{ + flex: 1; + margin-right: 10px; + } + .hide{ + display: none; + } + .ml10{ + margin-left: 10px; + } + } + .main-container{ + padding-right: 0 !important; + } +} +.project-calendar .el-input__inner { + height: 24px; +} + +.change-time-height { + height: 23px; +} + +.date-pick-group { + display: flex; + align-items: center; + justify-content: space-between; +} + +.date-pick-group button:first-of-type { + margin-right: 4px; +} + +.date-pick-group button:last-of-type { + margin-left: 4px; +} + +.project-list{ + .project-page{ + margin: 0 0 0 20px; + border: 1px solid $--border-color-light; + border-top: none; + .pagination{ + padding: 5px 0; + } + } + .pagination-bottom{ + width: calc(100% - 30px); + bottom: 18px; + } +} diff --git a/nezha-fronted/src/assets/css/element-var.scss b/nezha-fronted/src/assets/css/element-var.scss deleted file mode 100644 index c9c8851e6..000000000 --- a/nezha-fronted/src/assets/css/element-var.scss +++ /dev/null @@ -1,4 +0,0 @@ -/* 改变主题色变量 */ -/* 改变 icon 字体路径变量，必需 */ -$--font-path: '~element-ui/lib/theme-chalk/fonts'; -@import "~element-ui/packages/theme-chalk/src/index"; diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.scss b/nezha-fronted/src/assets/css/font/metricPreview.scss similarity index 89% rename from nezha-fronted/src/components/page/dashboard/metricPreview.scss rename to nezha-fronted/src/assets/css/font/metricPreview.scss index 1d3d5b563..974881bdd 100644 --- a/nezha-fronted/src/components/page/dashboard/metricPreview.scss +++ b/nezha-fronted/src/assets/css/font/metricPreview.scss @@ -43,10 +43,10 @@ padding-left:5px; } input, textarea { - background-color: $content-right-background-color; + background-color: $--content-right-background-color; } .el-input__inner, .el-textarea__inner, .el-input__count { - background-color: $content-right-background-color; + background-color: $--content-right-background-color; } .el-textarea { margin-top: 4px; diff --git a/nezha-fronted/src/assets/css/index.scss b/nezha-fronted/src/assets/css/index.scss new file mode 100644 index 000000000..564059227 --- /dev/null +++ b/nezha-fronted/src/assets/css/index.scss @@ -0,0 +1,43 @@ +@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写 + font-family: 'element-icons'; + src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */ + url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + font-weight: normal; + font-display: auto; + font-style: normal; +} +$--font-path: '~element-ui/lib/theme-chalk/fonts'; // 避免ele原字体加载语句出错 + +[v-cloak] { + display: none !important; +} +body { + height: 100%; + min-width: 1024px; + margin:0 !important; + padding: 0 !important; + cursor: default !important; +} +html { + height: 100%; + overflow: hidden; +} + +/* 默认主题和暗色主题 */ +.theme-light { + @import './themes/theme-light.scss'; // 加载主题变量 + @import './themes/src/index.scss'; // 加载ele样式 + @import './components/index'; // 加载nezha组件样式 + @import './common/index.scss'; // 加载通用样式 + @import './common.scss'; + @import '../stylus/main.scss'; +} + +.theme-dark { + @import './themes/theme-dark.scss'; // 加载主题变量 + @import './themes/src/index.scss'; // 加载ele样式 + @import './components/index'; // 加载nezha组件样式 + @import './common/index.scss'; // 加载通用样式 + @import './common.scss'; + @import '../stylus/main.scss'; +} diff --git a/nezha-fronted/src/assets/css/main.scss b/nezha-fronted/src/assets/css/main.scss index f1f8fe78a..233d6ab33 100644 --- a/nezha-fronted/src/assets/css/main.scss +++ b/nezha-fronted/src/assets/css/main.scss @@ -1,7 +1,3 @@ -@import './nzIcon.css'; -@import './font.scss'; -@import './theme.scss'; -@import './common.scss'; -@import '../stylus/index.scss'; -@import './common/tableCommon.scss'; -@import './common/rightBoxCommon.scss'; +@import './nzIcon.css'; // 自定义图标的字体 +@import './font.scss'; // 字体 +@import './index.scss'; // 主样式 diff --git a/nezha-fronted/src/assets/css/theme.scss b/nezha-fronted/src/assets/css/theme.scss deleted file mode 100644 index 29d4c85f4..000000000 --- a/nezha-fronted/src/assets/css/theme.scss +++ /dev/null @@ -1,64 +0,0 @@ -:root { - --theme-color: #FA901C; // 默认主题色，下方深化、浅化的色值默认值是写死的；用户自定义修改主题色后，由js计算新值 - --theme-color-dark-10: #E18219; // 默认主题色 深10% - --theme-color-light-10: #FA9B33; // 默认主题色 浅10% - --theme-color-light-20: #FBA649; // 默认主题色 浅20% - --theme-color-light-30: #FBB160; // 默认主题色 浅30% - --theme-color-light-40: #FBBC77; // 默认主题色 浅40% - --theme-color-light-50: #FCC88D; // 默认主题色 浅50% - --theme-color-light-60: #FCD4A4; // 默认主题色 浅60% - --theme-color-light-71: #FFDFBD; // 默认主题色 浅71% - --theme-color-light-80: #FFEAD2; // 默认主题色 浅80% - --theme-color-light-90: #FFF5E8; // 默认主题色 浅90% - --theme-color-light-96: #FFFBF6; // 默认主题色 浅90% - --theme-color-light-98: #FFFCF8; // 默认主题色 浅98% -} -$--theme-color: var(--theme-color); // 主题色 - -$--primary-border-color: #DEDEDE; -$--primary-border-radius: 2px; - -$--right-box-border-color: #E7EAED; - -/* 按钮 */ -$--button-border-radius: $--primary-border-radius; // 按钮圆角 - -$--button-primary-color: #FFF; // 普通按钮字色 -$--button-primary-background-color: var(--theme-color); // 普通按钮背景色 -$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度 -$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度 - -$--button-gray-color: #666; // 灰色按钮字色 -$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色 -$--button-gray-active-color: var(--theme-color); // 灰色按钮focus字色 -$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色 -$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色 -$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色 -$--button-gray-border-color: $--primary-border-color; // 灰色按钮边框色 -$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色 -$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度 - -$--danger-color: #DE5D3F; //全局警告色红色 -$--success-color: #23BF9A; //全局正常色绿色 -$--warning-color: var(--theme-color); //全局警告橙色 -$--suspended-color: #9e9c98; //全局停用色灰色 -$--monitor-color: #98AEC5; //全局停用色灰色 - -:export { - themeColor: $--theme-color; - dangerColor: $--danger-color; - successColor: $--success-color; - warningColor: var(--theme-color); - suspendedColor: $--suspended-color; - monitorColor: $--monitor-color; - primaryBorderColor: $--primary-border-color; - rightBoxBorderColor: $--right-box-border-color; -} -/* element-ui变量覆盖 */ -/*$--color-primary: red; // 覆盖element-ui的主题色 -$--box-shadow-base: none; // 取消box-shadow -$--box-shadow-dark: none; -$--box-shadow-light: 0 28px 32px 0 red; -$--input-focus-border: red; - -@import "~element-ui/packages/theme-chalk/src/index";*/ diff --git a/nezha-fronted/src/assets/css/themes/common.scss b/nezha-fronted/src/assets/css/themes/common.scss new file mode 100644 index 000000000..9b37b5c6e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/common.scss @@ -0,0 +1,17 @@ +/*** 非主题切换相关的变量 ***/ +/* 按钮 */ +$--button-border-radius: $--border-radius-small; // 按钮圆角 + +$--button-primary-color: $--background-color-empty; // 普通按钮字色 +$--button-primary-background-color: $--color-primary; // 普通按钮背景色 + +$--button-gray-color: $--color-text-regular; // 灰色按钮字色 +$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色 +$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色 +$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色 +$--button-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色 +$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色 +$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色 +$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色 + +$--pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2); diff --git a/nezha-fronted/src/assets/css/themes/src/alert.scss b/nezha-fronted/src/assets/css/themes/src/alert.scss new file mode 100644 index 000000000..500560b2b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/alert.scss @@ -0,0 +1,147 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(alert) { + width: 100%; + padding: $--alert-padding; + margin: 0; + box-sizing: border-box; + border-radius: $--alert-border-radius; + position: relative; + background-color: $--color-white; + overflow: hidden; + opacity: 1; + display: flex; + align-items: center; + transition: opacity .2s; + + @include when(light) { + .el-alert__closebtn { + color: $--color-text-placeholder; + } + } + + @include when(dark) { + .el-alert__closebtn { + color: $--color-white; + } + .el-alert__description { + color: $--color-white; + } + } + + @include when(center) { + justify-content: center; + } + + @include m(success) { + &.is-light { + background-color: $--alert-success-color; + color: $--color-success; + + .el-alert__description { + color: $--color-success; + } + } + + &.is-dark { + background-color: $--color-success; + color: $--color-white; + } + } + + @include m(info) { + &.is-light { + background-color: $--alert-info-color; + color: $--color-info; + } + + &.is-dark { + background-color: $--color-info; + color: $--color-white; + } + + .el-alert__description { + color: $--color-info; + } + } + + @include m(warning) { + &.is-light { + background-color: $--alert-warning-color; + color: $--color-warning; + + .el-alert__description { + color: $--color-warning; + } + } + + &.is-dark { + background-color: $--color-warning; + color: $--color-white; + } + } + + @include m(error) { + &.is-light { + background-color: $--alert-danger-color; + color: $--color-danger; + + .el-alert__description { + color: $--color-danger; + } + } + + &.is-dark { + background-color: $--color-danger; + color: $--color-white; + } + } + + @include e(content) { + display: table-cell; + padding: 0 8px; + } + + @include e(icon) { + font-size: $--alert-icon-size; + width: $--alert-icon-size; + @include when(big) { + font-size: $--alert-icon-large-size; + width: $--alert-icon-large-size; + } + } + + @include e(title) { + font-size: $--alert-title-font-size; + line-height: 18px; + @include when(bold) { + font-weight: bold; + } + } + + & .el-alert__description { + font-size: $--alert-description-font-size; + margin: 5px 0 0 0; + } + + @include e(closebtn) { + font-size: $--alert-close-font-size; + opacity: 1; + position: absolute; + top: 12px; + right: 15px; + cursor: pointer; + + @include when(customed) { + font-style: normal; + font-size: $--alert-close-customed-font-size; + top: 9px; + } + } +} + +.el-alert-fade-enter, +.el-alert-fade-leave-active { + opacity: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/aside.scss b/nezha-fronted/src/assets/css/themes/src/aside.scss new file mode 100644 index 000000000..b82749f3a --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/aside.scss @@ -0,0 +1,7 @@ +@import "mixins/mixins"; + +@include b(aside) { + overflow: auto; + box-sizing: border-box; + flex-shrink: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/autocomplete.scss b/nezha-fronted/src/assets/css/themes/src/autocomplete.scss new file mode 100644 index 000000000..d9c6e1941 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/autocomplete.scss @@ -0,0 +1,80 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; +@import "./input.scss"; +@import "./scrollbar.scss"; +@import "./popper"; + +@include b(autocomplete) { + position: relative; + display: inline-block; +} + +@include b(autocomplete-suggestion) { + margin: 5px 0; + box-shadow: $--box-shadow-light; + border-radius: $--border-radius-base; + border: 1px solid $--border-color-light; + box-sizing: border-box; + background-color: $--color-white; + + @include e(wrap) { + max-height: 280px; + padding: 10px 0; + box-sizing: border-box; + } + + @include e(list) { + margin: 0; + padding: 0; + } + + & li { + padding: 0 20px; + margin: 0; + line-height: 34px; + cursor: pointer; + color: $--color-text-regular; + font-size: $--font-size-base; + list-style: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background-color: $--select-option-hover-background; + } + + &.highlighted { + background-color: $--select-option-hover-background; + } + + &.divider { + margin-top: 6px; + border-top: 1px solid $--color-black; + } + + &.divider:last-child { + margin-bottom: -6px; + } + } + + @include when(loading) { + li { + text-align: center; + height: 100px; + line-height: 100px; + font-size: 20px; + color: #999; + @include utils-vertical-center; + + &:hover { + background-color: $--color-white; + } + } + + & .el-icon-loading { + vertical-align: middle; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/avatar.scss b/nezha-fronted/src/assets/css/themes/src/avatar.scss new file mode 100644 index 000000000..d5ed1eb74 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/avatar.scss @@ -0,0 +1,51 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(avatar) { + display: inline-block; + box-sizing: border-box; + text-align: center; + overflow: hidden; + color: $--avatar-font-color; + background: $--avatar-background-color; + width: $--avatar-large-size; + height: $--avatar-large-size; + line-height: $--avatar-large-size; + font-size: $--avatar-text-font-size; + + >img { + display: block; + height: 100%; + vertical-align: middle; + } + + @include m(circle) { + border-radius: 50%; + } + + @include m(square) { + border-radius: $--avatar-border-radius; + } + + @include m(icon) { + font-size: $--avatar-icon-font-size; + } + + @include m(large) { + width: $--avatar-large-size; + height: $--avatar-large-size; + line-height: $--avatar-large-size; + } + + @include m(medium) { + width: $--avatar-medium-size; + height: $--avatar-medium-size; + line-height: $--avatar-medium-size; + } + + @include m(small) { + width: $--avatar-small-size; + height: $--avatar-small-size; + line-height: $--avatar-small-size; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/backtop.scss b/nezha-fronted/src/assets/css/themes/src/backtop.scss new file mode 100644 index 000000000..f41524358 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/backtop.scss @@ -0,0 +1,22 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(backtop) { + position: fixed; + background-color: $--backtop-background-color; + width: 40px; + height: 40px; + border-radius: 50%; + color: $--backtop-font-color; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + box-shadow: 0 0 6px rgba(0,0,0, .12); + cursor: pointer; + z-index: 5; + + &:hover { + background-color: $--backtop-hover-background-color + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/badge.scss b/nezha-fronted/src/assets/css/themes/src/badge.scss new file mode 100644 index 000000000..4776e6779 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/badge.scss @@ -0,0 +1,57 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(badge) { + position: relative; + vertical-align: middle; + display: inline-block; + + @include e(content) { + background-color: $--badge-background-color; + border-radius: $--badge-radius; + color: $--color-white; + display: inline-block; + font-size: $--badge-font-size; + height: $--badge-size; + line-height: $--badge-size; + padding: 0 $--badge-padding; + text-align: center; + white-space: nowrap; + border: 1px solid $--color-white; + + @include when(fixed) { + position: absolute; + top: 0; + right: #{1 + $--badge-size / 2}; + transform: translateY(-50%) translateX(100%); + + @include when(dot) { + right: 5px; + } + } + + @include when(dot) { + height: 8px; + width: 8px; + padding: 0; + right: 0; + border-radius: 50%; + } + + @each $type in (primary, success, warning, info, danger) { + @include m($type) { + @if $type == primary { + background-color: $--color-primary; + } @else if $type == success { + background-color: $--color-success; + } @else if $type == warning { + background-color: $--color-warning; + } @else if $type == info { + background-color: $--color-info; + } @else { + background-color: $--color-danger; + } + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/base.scss b/nezha-fronted/src/assets/css/themes/src/base.scss new file mode 100644 index 000000000..380b79f58 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/base.scss @@ -0,0 +1,2 @@ +@import "common/transition.scss"; +@import "icon.scss"; diff --git a/nezha-fronted/src/assets/css/themes/src/breadcrumb-item.scss b/nezha-fronted/src/assets/css/themes/src/breadcrumb-item.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/breadcrumb.scss b/nezha-fronted/src/assets/css/themes/src/breadcrumb.scss new file mode 100644 index 000000000..3c3c3e1d8 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/breadcrumb.scss @@ -0,0 +1,55 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; + +@include b(breadcrumb) { + font-size: 14px; + line-height: 1; + @include utils-clearfix; + + @include e(separator) { + margin: 0 9px; + font-weight: bold; + color: $--color-text-placeholder; + + &[class*=icon] { + margin: 0 6px; + font-weight: normal; + } + } + + @include e(item) { + float: left; + + @include e(inner) { + color: $--color-text-regular; + + &.is-link, & a { + font-weight: bold; + text-decoration: none; + transition: $--color-transition-base; + color: $--color-text-primary; + + &:hover { + color: $--color-primary; + cursor: pointer; + } + } + } + + &:last-child { + .el-breadcrumb__inner, + .el-breadcrumb__inner a { + &, &:hover { + font-weight: normal; + color: $--color-text-regular; + cursor: text; + } + } + + .el-breadcrumb__separator { + display: none; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/button-group.scss b/nezha-fronted/src/assets/css/themes/src/button-group.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/button.scss b/nezha-fronted/src/assets/css/themes/src/button.scss new file mode 100644 index 000000000..52c8767d9 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/button.scss @@ -0,0 +1,260 @@ +@charset "UTF-8"; +@import "common/var"; +@import "mixins/button"; +@import "mixins/mixins"; +@import "mixins/utils"; + +@include b(button) { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: $--button-default-background-color; + border: $--border-base; + border-color: $--button-default-border-color; + color: $--button-default-font-color; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + transition: .1s; + font-weight: $--button-font-weight; + @include utils-user-select(none); + & + & { + margin-left: 10px; + } + + @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius); + + &:hover, + &:focus { + color: $--color-primary; + border-color: $--color-primary-light-7; + background-color: $--color-primary-light-9; + } + + &:active { + color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + outline: none; + } + + &::-moz-focus-inner { + border: 0; + } + + & [class*="el-icon-"] { + & + span { + margin-left: 5px; + } + } + + @include when(plain) { + &:hover, + &:focus { + background: $--color-white; + border-color: $--color-primary; + color: $--color-primary; + } + + &:active { + background: $--color-white; + border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + outline: none; + } + } + + @include when(active) { + color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + } + + @include when(disabled) { + &, + &:hover, + &:focus { + color: $--button-disabled-font-color; + cursor: not-allowed; + background-image: none; + background-color: $--button-disabled-background-color; + border-color: $--button-disabled-border-color; + } + + &.el-button--text { + background-color: transparent; + } + + &.is-plain { + &, + &:hover, + &:focus { + background-color: $--color-white; + border-color: $--button-disabled-border-color; + color: $--button-disabled-font-color; + } + } + } + + @include when(loading) { + position: relative; + pointer-events: none; + + &:before { + pointer-events: none; + content: ''; + position: absolute; + left: -1px; + top: -1px; + right: -1px; + bottom: -1px; + border-radius: inherit; + background-color: rgba(255,255,255,.35); + } + } + @include when(round) { + border-radius: 20px; + padding: 12px 23px; + } + @include when(circle) { + border-radius: 50%; + padding: $--button-padding-vertical; + } + @include m(primary) { + @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color); + } + @include m(success) { + @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color); + } + @include m(warning) { + @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color); + } + @include m(danger) { + @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color); + } + @include m(info) { + @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color); + } + @include m(medium) { + @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius); + @include when(circle) { + padding: $--button-medium-padding-vertical; + } + } + @include m(small) { + @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius); + @include when(circle) { + padding: $--button-small-padding-vertical; + } + } + @include m(mini) { + @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius); + @include when(circle) { + padding: $--button-mini-padding-vertical; + } + } + @include m(text) { + border-color: transparent; + color: $--color-primary; + background: transparent; + padding-left: 0; + padding-right: 0; + + &:hover, + &:focus { + color: mix($--color-white, $--color-primary, $--button-hover-tint-percent); + border-color: transparent; + background-color: transparent; + } + &:active { + color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + border-color: transparent; + background-color: transparent; + } + + &.is-disabled, + &.is-disabled:hover, + &.is-disabled:focus { + border-color: transparent; + } + } +} + +@include b(button-group) { + @include utils-clearfix; + display: inline-block; + vertical-align: middle; + + & > .el-button { + float: left; + position: relative; + & + .el-button { + margin-left: 0; + } + &.is-disabled { + z-index: 1; + } + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &:first-child:last-child { + border-top-right-radius: $--button-border-radius; + border-bottom-right-radius: $--button-border-radius; + border-top-left-radius: $--button-border-radius; + border-bottom-left-radius: $--button-border-radius; + + &.is-round { + border-radius: 20px; + } + + &.is-circle { + border-radius: 50%; + } + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:not(:last-child) { + margin-right: -1px; + } + + &:hover, + &:focus, + &:active { + z-index: 1; + } + + @include when(active) { + z-index: 1; + } + } + + & > .el-dropdown { + & > .el-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-color: rgba($--color-white, 0.5); + } + } + + @each $type in (primary, success, warning, danger, info) { + .el-button--#{$type} { + &:first-child { + border-right-color: rgba($--color-white, 0.5); + } + &:last-child { + border-left-color: rgba($--color-white, 0.5); + } + &:not(:first-child):not(:last-child) { + border-left-color: rgba($--color-white, 0.5); + border-right-color: rgba($--color-white, 0.5); + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/calendar.scss b/nezha-fronted/src/assets/css/themes/src/calendar.scss new file mode 100644 index 000000000..136486101 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/calendar.scss @@ -0,0 +1,79 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "button"; +@import "button-group"; + +@include b(calendar) { + background-color:#fff; + + @include e(header) { + display: flex; + justify-content: space-between; + padding: 12px 20px; + border-bottom: $--table-border; + } + + @include e(title) { + color: #000000; + align-self: center; + } + + @include e(body) { + padding: 12px 20px 35px; + } +} + +@include b(calendar-table) { + table-layout: fixed; + width: 100%; + + thead th { + padding: 12px 0; + color: $--color-text-regular; + font-weight: normal; + } + + &:not(.is-range) { + td.prev, + td.next { + color: $--color-text-placeholder; + } + } + + td { + border-bottom: $--calendar-border; + border-right: $--calendar-border; + vertical-align: top; + transition: background-color 0.2s ease; + + @include when(selected) { + background-color: $--calendar-selected-background-color; + } + + @include when(today) { + color: $--color-primary; + } + } + + tr:first-child td { + border-top: $--calendar-border; + } + + tr td:first-child { + border-left: $--calendar-border; + } + + tr.el-calendar-table__row--hide-border td { + border-top: none; + } + + @include b(calendar-day) { + box-sizing: border-box; + padding: 8px; + height: $--calendar-cell-width; + &:hover { + cursor: pointer; + background-color: $--calendar-selected-background-color; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/card.scss b/nezha-fronted/src/assets/css/themes/src/card.scss new file mode 100644 index 000000000..1a5b24781 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/card.scss @@ -0,0 +1,32 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(card) { + border-radius: $--card-border-radius; + border: 1px solid $--card-border-color; + background-color: $--color-white; + overflow: hidden; + color: $--color-text-primary; + transition: 0.3s; + + @include when(always-shadow) { + box-shadow: $--box-shadow-light; + } + + @include when(hover-shadow) { + &:hover, + &:focus { + box-shadow: $--box-shadow-light; + } + } + + @include e(header) { + padding: #{$--card-padding - 2 $--card-padding}; + border-bottom: 1px solid $--card-border-color; + box-sizing: border-box; + } + + @include e(body) { + padding: $--card-padding; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/carousel-item.scss b/nezha-fronted/src/assets/css/themes/src/carousel-item.scss new file mode 100644 index 000000000..6280ebd3c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/carousel-item.scss @@ -0,0 +1,50 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(carousel) { + @include e(item) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: inline-block; + overflow: hidden; + z-index: #{$--index-normal - 1}; + + @include when(active) { + z-index: #{$--index-normal + 1}; + } + + @include when(animating) { + transition: transform .4s ease-in-out; + } + + @include m(card) { + width: 50%; + transition: transform .4s ease-in-out; + &.is-in-stage { + cursor: pointer; + z-index: $--index-normal; + &:hover .el-carousel__mask, + &.is-hover .el-carousel__mask { + opacity: 0.12; + } + } + &.is-active { + z-index: #{$--index-normal + 1}; + } + } + } + + @include e(mask) { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: $--color-white; + opacity: 0.24; + transition: .2s; + } +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/carousel.scss b/nezha-fronted/src/assets/css/themes/src/carousel.scss new file mode 100644 index 000000000..cfca9626d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/carousel.scss @@ -0,0 +1,161 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(carousel) { + position: relative; + + @include m(horizontal) { + overflow-x: hidden; + } + + @include m(vertical) { + overflow-y: hidden; + } + + @include e(container) { + position: relative; + height: 300px; + } + + @include e(arrow) { + border: none; + outline: none; + padding: 0; + margin: 0; + height: $--carousel-arrow-size; + width: $--carousel-arrow-size; + cursor: pointer; + transition: .3s; + border-radius: 50%; + background-color: $--carousel-arrow-background; + color: $--color-white; + position: absolute; + top: 50%; + z-index: 10; + transform: translateY(-50%); + text-align: center; + font-size: $--carousel-arrow-font-size; + + @include m(left) { + left: 16px; + } + + @include m(right) { + right: 16px; + } + + &:hover { + background-color: $--carousel-arrow-hover-background; + } + + & i { + cursor: pointer; + } + } + + @include e(indicators) { + position: absolute; + list-style: none; + margin: 0; + padding: 0; + z-index: #{$--index-normal + 1}; + + @include m(horizontal) { + bottom: 0; + left: 50%; + transform: translateX(-50%); + } + + @include m(vertical) { + right: 0; + top: 50%; + transform: translateY(-50%); + } + + @include m(outside) { + bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2}; + text-align: center; + position: static; + transform: none; + .el-carousel__indicator:hover button { + opacity: 0.64; + } + button { + background-color: $--carousel-indicator-out-color; + opacity: 0.24; + } + } + + @include m(labels) { + left: 0; + right: 0; + transform: none; + text-align: center; + + .el-carousel__button { + height: auto; + width: auto; + padding: 2px 18px; + font-size: 12px; + } + + .el-carousel__indicator { + padding: 6px 4px; + } + } + } + + @include e(indicator) { + background-color: transparent; + cursor: pointer; + + &:hover button { + opacity: 0.72; + } + + @include m(horizontal) { + display: inline-block; + padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal; + } + + @include m(vertical) { + padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical; + .el-carousel__button { + width: $--carousel-indicator-height; + height: #{$--carousel-indicator-width / 2}; + } + } + + @include when(active) { + button { + opacity: 1; + } + } + } + + @include e(button) { + display: block; + opacity: 0.48; + width: $--carousel-indicator-width; + height: $--carousel-indicator-height; + background-color: $--color-white; + border: none; + outline: none; + padding: 0; + margin: 0; + cursor: pointer; + transition: .3s; + } +} + +.carousel-arrow-left-enter, +.carousel-arrow-left-leave-active { + transform: translateY(-50%) translateX(-10px); + opacity: 0; +} + +.carousel-arrow-right-enter, +.carousel-arrow-right-leave-active { + transform: translateY(-50%) translateX(10px); + opacity: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/cascader-panel.scss b/nezha-fronted/src/assets/css/themes/src/cascader-panel.scss new file mode 100644 index 000000000..7fca5a0f0 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/cascader-panel.scss @@ -0,0 +1,120 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "./checkbox"; +@import "./radio"; +@import "./scrollbar"; + +@include b(cascader-panel) { + display: flex; + border-radius: $--cascader-menu-radius; + font-size: $--cascader-menu-font-size; + + @include when(bordered) { + border: $--cascader-menu-border; + border-radius: $--cascader-menu-radius; + } +} + +@include b(cascader-menu) { + min-width: 180px; + box-sizing: border-box; + color: $--cascader-menu-font-color; + border-right: $--cascader-menu-border; + + &:last-child { + border-right: none; + .el-cascader-node { + padding-right: 20px; + } + } + + @include e(wrap) { + height: 204px; + } + + @include e(list) { + position: relative; + min-height: 100%; + margin: 0; + padding: 6px 0; + list-style: none; + box-sizing: border-box; + } + + @include e(hover-zone) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + + @include e(empty-text) { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: $--cascader-color-empty; + } +} + +@include b(cascader-node) { + position: relative; + display: flex; + align-items: center; + padding: 0 30px 0 20px; + height: 34px; + line-height: 34px; + outline: none; + + &.is-selectable.in-active-path { + color: $--cascader-menu-font-color; + } + + &.in-active-path, + &.is-selectable.in-checked-path, + &.is-active { + color: $--cascader-menu-selected-font-color; + font-weight: bold; + } + + &:not(.is-disabled) { + cursor: pointer; + &:hover, &:focus { + background: $--cascader-node-background-hover; + } + } + + @include when(disabled) { + color: $--cascader-node-color-disabled; + cursor: not-allowed; + } + + @include e(prefix) { + position: absolute; + left: 10px; + } + + @include e(postfix) { + position: absolute; + right: 10px; + } + + @include e(label) { + flex: 1; + padding: 0 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > .el-radio { + margin-right: 0; + + .el-radio__label { + padding-left: 0; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/cascader.scss b/nezha-fronted/src/assets/css/themes/src/cascader.scss new file mode 100644 index 000000000..5c883ea9c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/cascader.scss @@ -0,0 +1,182 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "./input"; +@import "./popper"; +@import "./tag"; +@import "./cascader-panel"; + +@include b(cascader) { + display: inline-block; + position: relative; + font-size: $--font-size-base; + line-height: $--input-height; + + &:not(.is-disabled):hover { + .el-input__inner { + cursor: pointer; + border-color: $--input-hover-border; + } + } + + .el-input { + cursor: pointer; + + .el-input__inner { + text-overflow: ellipsis; + + &:focus { + border-color: $--input-focus-border; + } + } + + .el-icon-arrow-down { + transition: transform .3s; + font-size: 14px; + + @include when(reverse) { + transform: rotateZ(180deg); + } + } + + .el-icon-circle-close:hover { + color: $--input-clear-hover-color; + } + + @include when(focus) { + .el-input__inner { + border-color: $--input-focus-border; + } + } + } + + @include m(medium) { + font-size: $--input-medium-font-size; + line-height: $--input-medium-height; + } + + @include m(small) { + font-size: $--input-small-font-size; + line-height: $--input-small-height; + } + + @include m(mini) { + font-size: $--input-mini-font-size; + line-height: $--input-mini-height; + } + + @include when(disabled) { + .el-cascader__label { + z-index: #{$--index-normal + 1}; + color: $--disabled-color-base; + } + } + + @include e(dropdown) { + margin: 5px 0; + font-size: $--cascader-menu-font-size; + background: $--cascader-menu-fill; + border: $--cascader-menu-border; + border-radius: $--cascader-menu-radius; + box-shadow: $--cascader-menu-shadow; + } + + @include e(tags) { + position: absolute; + left: 0; + right: 30px; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-wrap: wrap; + line-height: normal; + text-align: left; + box-sizing: border-box; + + .el-tag { + display: inline-flex; + align-items: center; + max-width: 100%; + margin: 2px 0 2px 6px; + text-overflow: ellipsis; + background: $--cascader-tag-background; + + &:not(.is-hit) { + border-color: transparent; + } + + > span { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + } + + .el-icon-close { + flex: none; + background-color: $--color-text-placeholder; + color: $--color-white; + + &:hover { + background-color: $--color-text-secondary; + } + } + } + } + + @include e(suggestion-panel) { + border-radius: $--cascader-menu-radius; + } + + @include e(suggestion-list) { + max-height: 204px; + margin: 0; + padding: 6px 0; + font-size: $--font-size-base; + color: $--cascader-menu-font-color; + text-align: center; + } + + @include e(suggestion-item) { + display: flex; + justify-content: space-between; + align-items: center; + height: 34px; + padding: 0 15px; + text-align: left; + outline: none; + cursor: pointer; + + &:hover, &:focus { + background: $--cascader-node-background-hover; + } + + &.is-checked { + color: $--cascader-menu-selected-font-color; + font-weight: bold; + } + + > span { + margin-right: 10px; + } + } + + @include e(empty-text) { + margin: 10px 0; + color: $--cascader-color-empty; + } + + @include e(search-input) { + flex: 1; + height: 24px; + min-width: 60px; + margin: 2px 0 2px 15px; + padding: 0; + color: $--cascader-menu-font-color; + border: none; + outline: none; + box-sizing: border-box; + + &::placeholder { + color: $--color-text-placeholder; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/checkbox-button.scss b/nezha-fronted/src/assets/css/themes/src/checkbox-button.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/checkbox-group.scss b/nezha-fronted/src/assets/css/themes/src/checkbox-group.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/checkbox.scss b/nezha-fronted/src/assets/css/themes/src/checkbox.scss new file mode 100644 index 000000000..7c1b9388a --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/checkbox.scss @@ -0,0 +1,359 @@ +@import "common/var"; +@import "mixins/mixins"; +@import "mixins/_button"; +@import "mixins/utils"; + +@include b(checkbox) { + color: $--checkbox-font-color; + font-weight: $--checkbox-font-weight; + font-size: $--font-size-base; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + user-select: none; + margin-right: 30px; + + @include when(bordered) { + padding: $--checkbox-bordered-padding; + border-radius: $--border-radius-base; + border: $--border-base; + box-sizing: border-box; + line-height: normal; + height: $--checkbox-bordered-height; + + &.is-checked { + border-color: $--color-primary; + } + + &.is-disabled { + border-color: $--border-color-lighter; + cursor: not-allowed; + } + + & + .el-checkbox.is-bordered { + margin-left: 10px; + } + + &.el-checkbox--medium { + padding: $--checkbox-bordered-medium-padding; + border-radius: $--button-medium-border-radius; + height: $--checkbox-bordered-medium-height; + + .el-checkbox__label { + line-height: 17px; + font-size: $--button-medium-font-size; + } + + .el-checkbox__inner { + height: $--checkbox-bordered-medium-input-height; + width: $--checkbox-bordered-medium-input-width; + } + } + + &.el-checkbox--small { + padding: $--checkbox-bordered-small-padding; + border-radius: $--button-small-border-radius; + height: $--checkbox-bordered-small-height; + + .el-checkbox__label { + line-height: 15px; + font-size: $--button-small-font-size; + } + + .el-checkbox__inner { + height: $--checkbox-bordered-small-input-height; + width: $--checkbox-bordered-small-input-width; + + &::after { + height: 6px; + width: 2px; + } + } + } + + &.el-checkbox--mini { + padding: $--checkbox-bordered-mini-padding; + border-radius: $--button-mini-border-radius; + height: $--checkbox-bordered-mini-height; + + .el-checkbox__label { + line-height: 12px; + font-size: $--button-mini-font-size; + } + + .el-checkbox__inner { + height: $--checkbox-bordered-mini-input-height; + width: $--checkbox-bordered-mini-input-width; + &::after { + height: 6px; + width: 2px; + } + } + } + } + + @include e(input) { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; + + @include when(disabled) { + .el-checkbox__inner { + background-color: $--checkbox-disabled-input-fill; + border-color: $--checkbox-disabled-border-color; + cursor: not-allowed; + + &::after { + cursor: not-allowed; + border-color: $--checkbox-disabled-icon-color; + } + + & + .el-checkbox__label { + cursor: not-allowed; + } + } + + &.is-checked { + .el-checkbox__inner { + background-color: $--checkbox-disabled-checked-input-fill; + border-color: $--checkbox-disabled-checked-input-border-color; + + &::after { + border-color: $--checkbox-disabled-checked-icon-color; + } + } + } + + &.is-indeterminate { + .el-checkbox__inner { + background-color: $--checkbox-disabled-checked-input-fill; + border-color: $--checkbox-disabled-checked-input-border-color; + + &::before { + background-color: $--checkbox-disabled-checked-icon-color; + border-color: $--checkbox-disabled-checked-icon-color; + } + } + } + + & + span.el-checkbox__label { + color: $--disabled-color-base; + cursor: not-allowed; + } + } + + @include when(checked) { + .el-checkbox__inner { + background-color: $--checkbox-checked-background-color; + border-color: $--checkbox-checked-input-border-color; + + &::after { + transform: rotate(45deg) scaleY(1); + } + } + + & + .el-checkbox__label { + color: $--checkbox-checked-font-color; + } + } + @include when(focus) { /*focus时 视觉上区分*/ + .el-checkbox__inner { + border-color: $--checkbox-input-border-color-hover; + } + } + @include when(indeterminate) { + .el-checkbox__inner { + background-color: $--checkbox-checked-background-color; + border-color: $--checkbox-checked-input-border-color; + + &::before { + content: ''; + position: absolute; + display: block; + background-color: $--checkbox-checked-icon-color; + height: 2px; + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; + } + + &::after { + display: none; + } + } + } + } + @include e(inner) { + display: inline-block; + position: relative; + border: $--checkbox-input-border; + border-radius: $--checkbox-border-radius; + box-sizing: border-box; + width: $--checkbox-input-width; + height: $--checkbox-input-height; + background-color: $--checkbox-background-color; + z-index: $--index-normal; + transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), + background-color .25s cubic-bezier(.71,-.46,.29,1.46); + + &:hover { + border-color: $--checkbox-input-border-color-hover; + } + + &::after { + box-sizing: content-box; + content: ""; + border: 1px solid $--checkbox-checked-icon-color; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + transform: rotate(45deg) scaleY(0); + width: 3px; + transition: transform .15s ease-in .05s; + transform-origin: center; + } + } + + @include e(original) { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; + } + + @include e(label) { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: $--checkbox-font-size; + } + + &:last-of-type { + margin-right: 0; + } +} + +@include b(checkbox-button) { + position: relative; + display: inline-block; + + @include e(inner) { + display: inline-block; + line-height: 1; + font-weight: $--checkbox-font-weight; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: $--button-default-background-color; + border: $--border-base; + border-left: 0; + color: $--button-default-font-color; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + transition: $--all-transition; + @include utils-user-select(none); + + @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0); + + &:hover { + color: $--color-primary; + } + + & [class*="el-icon-"] { + line-height: 0.9; + + & + span { + margin-left: 5px; + } + } + } + + @include e(original) { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + z-index: -1; + } + + &.is-checked { + & .el-checkbox-button__inner { + color: $--checkbox-button-checked-font-color; + background-color: $--checkbox-button-checked-background-color; + border-color: $--checkbox-button-checked-border-color; + box-shadow: -1px 0 0 0 $--color-primary-light-4; + } + &:first-child .el-checkbox-button__inner { + border-left-color: $--checkbox-button-checked-border-color; + } + } + + &.is-disabled { + & .el-checkbox-button__inner { + color: $--button-disabled-font-color; + cursor: not-allowed; + background-image: none; + background-color: $--button-disabled-background-color; + border-color: $--button-disabled-border-color; + box-shadow: none; + } + &:first-child .el-checkbox-button__inner { + border-left-color: $--button-disabled-border-color; + } + } + + &:first-child { + .el-checkbox-button__inner { + border-left: $--border-base; + border-radius: $--border-radius-base 0 0 $--border-radius-base; + box-shadow: none !important; + } + } + + &.is-focus { + & .el-checkbox-button__inner { + border-color: $--checkbox-button-checked-border-color; + } + } + + &:last-child { + .el-checkbox-button__inner { + border-radius: 0 $--border-radius-base $--border-radius-base 0; + } + } + @include m(medium) { + .el-checkbox-button__inner { + @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0); + } + } + @include m(small) { + .el-checkbox-button__inner { + @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0); + } + } + @include m(mini) { + .el-checkbox-button__inner { + @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0); + } + } +} + +@include b(checkbox-group) { + font-size: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/col.scss b/nezha-fronted/src/assets/css/themes/src/col.scss new file mode 100644 index 000000000..c2a3387d5 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/col.scss @@ -0,0 +1,156 @@ +@import "./common/var.scss"; +@import "./mixins/mixins.scss"; + +[class*="el-col-"] { + float: left; + box-sizing: border-box; +} + +.el-col-0 { + display: none; +} + +@for $i from 0 through 24 { + .el-col-#{$i} { + width: (1 / 24 * $i * 100) * 1%; + } + + .el-col-offset-#{$i} { + margin-left: (1 / 24 * $i * 100) * 1%; + } + + .el-col-pull-#{$i} { + position: relative; + right: (1 / 24 * $i * 100) * 1%; + } + + .el-col-push-#{$i} { + position: relative; + left: (1 / 24 * $i * 100) * 1%; + } +} + +@include res(xs) { + .el-col-xs-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-xs-#{$i} { + width: (1 / 24 * $i * 100) * 1%; + } + + .el-col-xs-offset-#{$i} { + margin-left: (1 / 24 * $i * 100) * 1%; + } + + .el-col-xs-pull-#{$i} { + position: relative; + right: (1 / 24 * $i * 100) * 1%; + } + + .el-col-xs-push-#{$i} { + position: relative; + left: (1 / 24 * $i * 100) * 1%; + } + } +} + +@include res(sm) { + .el-col-sm-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-sm-#{$i} { + width: (1 / 24 * $i * 100) * 1%; + } + + .el-col-sm-offset-#{$i} { + margin-left: (1 / 24 * $i * 100) * 1%; + } + + .el-col-sm-pull-#{$i} { + position: relative; + right: (1 / 24 * $i * 100) * 1%; + } + + .el-col-sm-push-#{$i} { + position: relative; + left: (1 / 24 * $i * 100) * 1%; + } + } +} + +@include res(md) { + .el-col-md-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-md-#{$i} { + width: (1 / 24 * $i * 100) * 1%; + } + + .el-col-md-offset-#{$i} { + margin-left: (1 / 24 * $i * 100) * 1%; + } + + .el-col-md-pull-#{$i} { + position: relative; + right: (1 / 24 * $i * 100) * 1%; + } + + .el-col-md-push-#{$i} { + position: relative; + left: (1 / 24 * $i * 100) * 1%; + } + } +} + +@include res(lg) { + .el-col-lg-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-lg-#{$i} { + width: (1 / 24 * $i * 100) * 1%; + } + + .el-col-lg-offset-#{$i} { + margin-left: (1 / 24 * $i * 100) * 1%; + } + + .el-col-lg-pull-#{$i} { + position: relative; + right: (1 / 24 * $i * 100) * 1%; + } + + .el-col-lg-push-#{$i} { + position: relative; + left: (1 / 24 * $i * 100) * 1%; + } + } +} + +@include res(xl) { + .el-col-xl-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-xl-#{$i} { + width: (1 / 24 * $i * 100) * 1%; + } + + .el-col-xl-offset-#{$i} { + margin-left: (1 / 24 * $i * 100) * 1%; + } + + .el-col-xl-pull-#{$i} { + position: relative; + right: (1 / 24 * $i * 100) * 1%; + } + + .el-col-xl-push-#{$i} { + position: relative; + left: (1 / 24 * $i * 100) * 1%; + } + } +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/collapse-item.scss b/nezha-fronted/src/assets/css/themes/src/collapse-item.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/collapse.scss b/nezha-fronted/src/assets/css/themes/src/collapse.scss new file mode 100644 index 000000000..ffe78f39c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/collapse.scss @@ -0,0 +1,63 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "common/transition"; + +@include b(collapse) { + border-top: 1px solid $--collapse-border-color; + border-bottom: 1px solid $--collapse-border-color; +} +@include b(collapse-item) { + @include when(disabled) { + .el-collapse-item__header { + color: $--font-color-disabled-base; + cursor: not-allowed; + } + } + @include e(header) { + display: flex; + align-items: center; + height: $--collapse-header-height; + line-height: $--collapse-header-height; + background-color: $--collapse-header-background-color; + color: $--collapse-header-font-color; + cursor: pointer; + border-bottom: 1px solid $--collapse-border-color; + font-size: $--collapse-header-font-size; + font-weight: 500; + transition: border-bottom-color .3s; + outline: none; + @include e(arrow) { + margin: 0 8px 0 auto; + transition: transform .3s; + font-weight: 300; + @include when(active) { + transform: rotate(90deg); + } + } + &.focusing:focus:not(:hover){ + color: $--color-primary; + } + @include when(active) { + border-bottom-color: transparent; + } + } + + @include e(wrap) { + will-change: height; + background-color: $--collapse-content-background-color; + overflow: hidden; + box-sizing: border-box; + border-bottom: 1px solid $--collapse-border-color; + } + + @include e(content) { + padding-bottom: 25px; + font-size: $--collapse-content-font-size; + color: $--collapse-content-font-color; + line-height: 1.769230769230769; + } + + &:last-child { + margin-bottom: -1px; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/color-picker.scss b/nezha-fronted/src/assets/css/themes/src/color-picker.scss new file mode 100644 index 000000000..ee92d9f90 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/color-picker.scss @@ -0,0 +1,384 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(color-predefine) { + display: flex; + font-size: 12px; + margin-top: 8px; + width: 280px; + + @include e(colors) { + display: flex; + flex: 1; + flex-wrap: wrap; + } + + @include e(color-selector) { + margin: 0 0 8px 8px; + width: 20px; + height: 20px; + border-radius: 4px; + cursor: pointer; + + &:nth-child(10n + 1) { + margin-left: 0; + } + + &.selected { + box-shadow: 0 0 3px 2px $--color-primary; + } + + > div { + display: flex; + height: 100%; + border-radius: 3px; + } + + @include when(alpha) { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); + } + } +} + +@include b(color-hue-slider) { + position: relative; + box-sizing: border-box; + width: 280px; + height: 12px; + background-color: #f00; + padding: 0 2px; + + @include e(bar) { + position: relative; + background: linear-gradient( + to right, #f00 0%, + #ff0 17%, #0f0 33%, + #0ff 50%, #00f 67%, + #f0f 83%, #f00 100%); + height: 100%; + } + + @include e(thumb) { + position: absolute; + cursor: pointer; + box-sizing: border-box; + left: 0; + top: 0; + width: 4px; + height: 100%; + border-radius: 1px; + background: #fff; + border: 1px solid #f0f0f0; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); + z-index: 1; + } + + @include when(vertical) { + width: 12px; + height: 180px; + padding: 2px 0; + + .el-color-hue-slider__bar { + background: linear-gradient( + to bottom, #f00 0%, + #ff0 17%, #0f0 33%, + #0ff 50%, #00f 67%, + #f0f 83%, #f00 100%); + } + + .el-color-hue-slider__thumb { + left: 0; + top: 0; + width: 100%; + height: 4px; + } + } +} + +@include b(color-svpanel) { + position: relative; + width: 280px; + height: 180px; + + @include e(('white', 'black')) { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + @include e('white') { + background: linear-gradient(to right, #fff, rgba(255,255,255,0)); + } + + @include e('black') { + background: linear-gradient(to top, #000, rgba(0,0,0,0)); + } + + @include e(cursor) { + position: absolute; + + > div { + cursor: head; + width: 4px; + height: 4px; + box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4); + border-radius: 50%; + transform: translate(-2px, -2px); + } + } +} + +@include b(color-alpha-slider) { + position: relative; + box-sizing: border-box; + width: 280px; + height: 12px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); + + @include e(bar) { + position: relative; + background: linear-gradient( + to right, rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 100%); + height: 100%; + } + + @include e(thumb) { + position: absolute; + cursor: pointer; + box-sizing: border-box; + left: 0; + top: 0; + width: 4px; + height: 100%; + border-radius: 1px; + background: #fff; + border: 1px solid #f0f0f0; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); + z-index: 1; + } + + @include when(vertical) { + width: 20px; + height: 180px; + + .el-color-alpha-slider__bar { + background: linear-gradient( + to bottom, rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 100%); + } + + .el-color-alpha-slider__thumb { + left: 0; + top: 0; + width: 100%; + height: 4px; + } + } +} + +@include b(color-dropdown) { + width: 300px; + + @include e(main-wrapper) { + margin-bottom: 6px; + + &::after { + content: ""; + display: table; + clear: both; + } + } + + @include e(btns) { + margin-top: 6px; + text-align: right; + } + + @include e(value) { + float: left; + line-height: 26px; + font-size: 12px; + color: $--color-black; + width: 160px; + } + + @include e(btn) { + border: 1px solid #dcdcdc; + color: #333; + line-height: 24px; + border-radius: 2px; + padding: 0 20px; + cursor: pointer; + background-color: transparent; + outline: none; + font-size: 12px; + + &[disabled] { + color: #cccccc; + cursor: not-allowed; + } + &:hover { + color: $--color-primary; + border-color: $--color-primary; + } + } + + @include e(link-btn) { + cursor: pointer; + color: $--color-primary; + text-decoration: none; + padding: 15px; + font-size: 12px; + &:hover { + color: tint($--color-primary, $--button-hover-tint-percent); + } + } +} + +@include b(color-picker) { + display: inline-block; + position: relative; + line-height: normal; + height: 40px; + + @include when(disabled) { + .el-color-picker__trigger { + cursor: not-allowed; + } + } + + @include m(medium) { + height: 36px; + + .el-color-picker__trigger { + height: 36px; + width: 36px; + } + + .el-color-picker__mask { + height: 34px; + width: 34px; + } + } + + @include m(small) { + height: 32px; + + .el-color-picker__trigger { + height: 32px; + width: 32px; + } + + .el-color-picker__mask { + height: 30px; + width: 30px; + } + + .el-color-picker__icon, + .el-color-picker__empty { + transform: translate3d(-50%, -50%, 0) scale(0.8); + } + } + + @include m(mini) { + height: 28px; + + .el-color-picker__trigger { + height: 28px; + width: 28px; + } + + .el-color-picker__mask { + height: 26px; + width: 26px; + } + + .el-color-picker__icon, + .el-color-picker__empty { + transform: translate3d(-50%, -50%, 0) scale(0.8); + } + } + + @include e(mask) { + height: 38px; + width: 38px; + border-radius: 4px; + position: absolute; + top: 1px; + left: 1px; + z-index: 1; + cursor: not-allowed; + background-color: rgba(255, 255, 255, .7); + } + + @include e(trigger) { + display: inline-block; + box-sizing: border-box; + height: 40px; + width: 40px; + padding: 4px; + border: 1px solid #e6e6e6; + border-radius: 4px; + font-size: 0; + position: relative; + cursor: pointer; + } + + @include e(color) { + position: relative; + display: block; + box-sizing: border-box; + border: 1px solid #999; + border-radius: $--border-radius-small; + width: 100%; + height: 100%; + text-align: center; + + @include when(alpha) { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); + } + } + + @include e(color-inner) { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include e(empty) { + font-size: 12px; + color: #999; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } + + @include e(icon) { + display: inline-block; + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + color: $--color-white; + text-align: center; + font-size: 12px; + } + + @include e(panel) { + position: absolute; + z-index: 10; + padding: 6px; + box-sizing: content-box; + background-color: $--color-white; + border: 1px solid $--border-color-lighter; + border-radius: $--border-radius-base; + box-shadow: $--dropdown-menu-box-shadow; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/common/popup.scss b/nezha-fronted/src/assets/css/themes/src/common/popup.scss new file mode 100644 index 000000000..00030ba6c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/common/popup.scss @@ -0,0 +1,42 @@ +@import "./var.scss"; +@import "../mixins/mixins"; + +.v-modal-enter { + animation: v-modal-in .2s ease; +} + +.v-modal-leave { + animation: v-modal-out .2s ease forwards; +} + +@keyframes v-modal-in { + 0% { + opacity: 0; + } + 100% { + } +} + +@keyframes v-modal-out { + 0% { + } + 100% { + opacity: 0; + } +} + +.v-modal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: $--popup-modal-opacity; + background: $--popup-modal-background-color; +} + +@include b(popup-parent) { + @include m(hidden) { + overflow: hidden; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/common/transition.scss b/nezha-fronted/src/assets/css/themes/src/common/transition.scss new file mode 100644 index 000000000..f8eb9e354 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/common/transition.scss @@ -0,0 +1,99 @@ +@import "var"; + +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + transition: $--fade-linear-transition; +} +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { + opacity: 0; +} + +.el-fade-in-linear-enter-active, +.el-fade-in-linear-leave-active { + transition: $--fade-linear-transition; +} +.el-fade-in-linear-enter, +.el-fade-in-linear-leave, +.el-fade-in-linear-leave-active { + opacity: 0; +} + +.el-fade-in-enter-active, +.el-fade-in-leave-active { + transition: all .3s cubic-bezier(.55,0,.1,1); +} +.el-fade-in-enter, +.el-fade-in-leave-active { + opacity: 0; +} + +.el-zoom-in-center-enter-active, +.el-zoom-in-center-leave-active { + transition: all .3s cubic-bezier(.55,0,.1,1); +} +.el-zoom-in-center-enter, +.el-zoom-in-center-leave-active { + opacity: 0; + transform: scaleX(0); +} + +.el-zoom-in-top-enter-active, +.el-zoom-in-top-leave-active { + opacity: 1; + transform: scaleY(1); + transition: $--md-fade-transition; + transform-origin: center top; +} +.el-zoom-in-top-enter, +.el-zoom-in-top-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.el-zoom-in-bottom-enter-active, +.el-zoom-in-bottom-leave-active { + opacity: 1; + transform: scaleY(1); + transition: $--md-fade-transition; + transform-origin: center bottom; +} +.el-zoom-in-bottom-enter, +.el-zoom-in-bottom-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.el-zoom-in-left-enter-active, +.el-zoom-in-left-leave-active { + opacity: 1; + transform: scale(1, 1); + transition: $--md-fade-transition; + transform-origin: top left; +} +.el-zoom-in-left-enter, +.el-zoom-in-left-leave-active { + opacity: 0; + transform: scale(.45, .45); +} + +.collapse-transition { + transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; +} +.horizontal-collapse-transition { + transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; +} + +.el-list-enter-active, +.el-list-leave-active { + transition: all 1s; +} +.el-list-enter, .el-list-leave-active { + opacity: 0; + transform: translateY(-30px); +} + +.el-opacity-transition { + transition: opacity .3s cubic-bezier(.55,0,.1,1); +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/common/var.scss b/nezha-fronted/src/assets/css/themes/src/common/var.scss new file mode 100644 index 000000000..fca3030b3 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/common/var.scss @@ -0,0 +1,1031 @@ +$--theme: default !default; +/* Element Chalk Variables */ + +// Special comment for theme configurator +// type|skipAutoTranslation|Category|Order +// skipAutoTranslation 1 + +/* Transition +-------------------------- */ +$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; +$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$--fade-linear-transition: opacity 200ms linear !default; +$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; +$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; + +/* Color +-------------------------- */ +/// color|1|Brand Color|0 +$--color-primary: #409EFF !default; +/// color|1|Background Color|4 +$--color-white: #FFFFFF !default; +/// color|1|Background Color|4 +$--color-black: #000000 !default; +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ +/// color|1|Functional Color|1 +$--color-success: #67C23A !default; +/// color|1|Functional Color|1 +$--color-warning: #E6A23C !default; +/// color|1|Functional Color|1 +$--color-danger: #F56C6C !default; +/// color|1|Functional Color|1 +$--color-info: #909399 !default; + +$--color-success-light: mix($--color-white, $--color-success, 80%) !default; +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; +$--color-info-light: mix($--color-white, $--color-info, 80%) !default; + +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; +/// color|1|Font Color|2 +$--color-text-primary: #303133 !default; +/// color|1|Font Color|2 +$--color-text-regular: #606266 !default; +/// color|1|Font Color|2 +$--color-text-secondary: #909399 !default; +/// color|1|Font Color|2 +$--color-text-placeholder: #C0C4CC !default; +/// color|1|Border Color|3 +$--border-color-base: #DCDFE6 !default; +/// color|1|Border Color|3 +$--border-color-light: #E4E7ED !default; +/// color|1|Border Color|3 +$--border-color-lighter: #EBEEF5 !default; +/// color|1|Border Color|3 +$--border-color-extra-light: #F2F6FC !default; + +// Background +/// color|1|Background Color|4 +$--background-color-base: #F5F7FA !default; + +/* Link +-------------------------- */ +$--link-color: $--color-primary-light-2 !default; +$--link-hover-color: $--color-primary !default; + +/* Border +-------------------------- */ +$--border-width-base: 1px !default; +$--border-style-base: solid !default; +$--border-color-hover: $--color-text-placeholder !default; +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; +/// borderRadius|1|Radius|0 +$--border-radius-base: 4px !default; +/// borderRadius|1|Radius|0 +$--border-radius-small: 2px !default; +/// borderRadius|1|Radius|0 +$--border-radius-circle: 100% !default; +/// borderRadius|1|Radius|0 +$--border-radius-zero: 0 !default; + +// Box-shadow +/// boxShadow|1|Shadow|1 +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; +// boxShadow|1|Shadow|1 +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; +/// boxShadow|1|Shadow|1 +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; + +/* Fill +-------------------------- */ +$--fill-base: $--color-white !default; + +/* Typography +-------------------------- */ +$--font-path: 'fonts' !default; +$--font-display: 'auto' !default; +/// fontSize|1|Font Size|0 +$--font-size-extra-large: 20px !default; +/// fontSize|1|Font Size|0 +$--font-size-large: 18px !default; +/// fontSize|1|Font Size|0 +$--font-size-medium: 16px !default; +/// fontSize|1|Font Size|0 +$--font-size-base: 14px !default; +/// fontSize|1|Font Size|0 +$--font-size-small: 13px !default; +/// fontSize|1|Font Size|0 +$--font-size-extra-small: 12px !default; +/// fontWeight|1|Font Weight|1 +$--font-weight-primary: 500 !default; +/// fontWeight|1|Font Weight|1 +$--font-weight-secondary: 100 !default; +/// fontLineHeight|1|Line Height|2 +$--font-line-height-primary: 24px !default; +/// fontLineHeight|1|Line Height|2 +$--font-line-height-secondary: 16px !default; +$--font-color-disabled-base: #bbb !default; +/* Size +-------------------------- */ +$--size-base: 14px !default; + +/* z-index +-------------------------- */ +$--index-normal: 1 !default; +$--index-top: 1000 !default; +$--index-popper: 2000 !default; + +/* Disable base +-------------------------- */ +$--disabled-fill-base: $--background-color-base !default; +$--disabled-color-base: $--color-text-placeholder !default; +$--disabled-border-base: $--border-color-light !default; + +/* Icon +-------------------------- */ +$--icon-color: #666 !default; +$--icon-color-base: $--color-info !default; + +/* Checkbox +-------------------------- */ +/// fontSize||Font|1 +$--checkbox-font-size: 14px !default; +/// fontWeight||Font|1 +$--checkbox-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--checkbox-font-color: $--color-text-regular !default; +$--checkbox-input-height: 14px !default; +$--checkbox-input-width: 14px !default; +/// borderRadius||Border|2 +$--checkbox-border-radius: $--border-radius-small !default; +/// color||Color|0 +$--checkbox-background-color: $--color-white !default; +$--checkbox-input-border: $--border-base !default; + +/// color||Color|0 +$--checkbox-disabled-border-color: $--border-color-base !default; +$--checkbox-disabled-input-fill: #edf2fc !default; +$--checkbox-disabled-icon-color: $--color-text-placeholder !default; + +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default; +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; + +/// color||Color|0 +$--checkbox-checked-font-color: $--color-primary !default; +$--checkbox-checked-input-border-color: $--color-primary !default; +/// color||Color|0 +$--checkbox-checked-background-color: $--color-primary !default; +$--checkbox-checked-icon-color: $--fill-base !default; + +$--checkbox-input-border-color-hover: $--color-primary !default; +/// height||Other|4 +$--checkbox-bordered-height: 40px !default; +/// padding||Spacing|3 +$--checkbox-bordered-padding: 9px 20px 9px 10px !default; +/// padding||Spacing|3 +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; +/// padding||Spacing|3 +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; +/// padding||Spacing|3 +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; +$--checkbox-bordered-medium-input-height: 14px !default; +$--checkbox-bordered-medium-input-width: 14px !default; +/// height||Other|4 +$--checkbox-bordered-medium-height: 36px !default; +$--checkbox-bordered-small-input-height: 12px !default; +$--checkbox-bordered-small-input-width: 12px !default; +/// height||Other|4 +$--checkbox-bordered-small-height: 32px !default; +$--checkbox-bordered-mini-input-height: 12px !default; +$--checkbox-bordered-mini-input-width: 12px !default; +/// height||Other|4 +$--checkbox-bordered-mini-height: 28px !default; + +/// color||Color|0 +$--checkbox-button-checked-background-color: $--color-primary !default; +/// color||Color|0 +$--checkbox-button-checked-font-color: $--color-white !default; +/// color||Color|0 +$--checkbox-button-checked-border-color: $--color-primary !default; + + + +/* Radio +-------------------------- */ +/// fontSize||Font|1 +$--radio-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--radio-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--radio-font-color: $--color-text-regular !default; +$--radio-input-height: 14px !default; +$--radio-input-width: 14px !default; +/// borderRadius||Border|2 +$--radio-input-border-radius: $--border-radius-circle !default; +/// color||Color|0 +$--radio-input-background-color: $--color-white !default; +$--radio-input-border: $--border-base !default; +/// color||Color|0 +$--radio-input-border-color: $--border-color-base !default; +/// color||Color|0 +$--radio-icon-color: $--color-white !default; + +$--radio-disabled-input-border-color: $--disabled-border-base !default; +$--radio-disabled-input-fill: $--disabled-fill-base !default; +$--radio-disabled-icon-color: $--disabled-fill-base !default; + +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default; +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default; +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default; + +/// color||Color|0 +$--radio-checked-font-color: $--color-primary !default; +/// color||Color|0 +$--radio-checked-input-border-color: $--color-primary !default; +/// color||Color|0 +$--radio-checked-input-background-color: $--color-white !default; +/// color||Color|0 +$--radio-checked-icon-color: $--color-primary !default; + +$--radio-input-border-color-hover: $--color-primary !default; + +$--radio-bordered-height: 40px !default; +$--radio-bordered-padding: 12px 20px 0 10px !default; +$--radio-bordered-medium-padding: 10px 20px 0 10px !default; +$--radio-bordered-small-padding: 8px 15px 0 10px !default; +$--radio-bordered-mini-padding: 6px 15px 0 10px !default; +$--radio-bordered-medium-input-height: 14px !default; +$--radio-bordered-medium-input-width: 14px !default; +$--radio-bordered-medium-height: 36px !default; +$--radio-bordered-small-input-height: 12px !default; +$--radio-bordered-small-input-width: 12px !default; +$--radio-bordered-small-height: 32px !default; +$--radio-bordered-mini-input-height: 12px !default; +$--radio-bordered-mini-input-width: 12px !default; +$--radio-bordered-mini-height: 28px !default; + +/// fontSize||Font|1 +$--radio-button-font-size: $--font-size-base !default; +/// color||Color|0 +$--radio-button-checked-background-color: $--color-primary !default; +/// color||Color|0 +$--radio-button-checked-font-color: $--color-white !default; +/// color||Color|0 +$--radio-button-checked-border-color: $--color-primary !default; +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default; + +/* Select +-------------------------- */ +$--select-border-color-hover: $--border-color-hover !default; +$--select-disabled-border: $--disabled-border-base !default; +/// fontSize||Font|1 +$--select-font-size: $--font-size-base !default; +$--select-close-hover-color: $--color-text-secondary !default; + +$--select-input-color: $--color-text-placeholder !default; +$--select-multiple-input-color: #666 !default; +/// color||Color|0 +$--select-input-focus-border-color: $--color-primary !default; +/// fontSize||Font|1 +$--select-input-font-size: 14px !default; + +$--select-option-color: $--color-text-regular !default; +$--select-option-disabled-color: $--color-text-placeholder !default; +$--select-option-disabled-background: $--color-white !default; +/// height||Other|4 +$--select-option-height: 34px !default; +$--select-option-hover-background: $--background-color-base !default; +/// color||Color|0 +$--select-option-selected-font-color: $--color-primary !default; +$--select-option-selected-hover: $--background-color-base !default; + +$--select-group-color: $--color-info !default; +$--select-group-height: 30px !default; +$--select-group-font-size: 12px !default; + +$--select-dropdown-background: $--color-white !default; +$--select-dropdown-shadow: $--box-shadow-light !default; +$--select-dropdown-empty-color: #999 !default; +/// height||Other|4 +$--select-dropdown-max-height: 274px !default; +$--select-dropdown-padding: 6px 0 !default; +$--select-dropdown-empty-padding: 10px 0 !default; +$--select-dropdown-border: solid 1px $--border-color-light !default; + +/* Alert +-------------------------- */ +$--alert-padding: 8px 16px !default; +/// borderRadius||Border|2 +$--alert-border-radius: $--border-radius-base !default; +/// fontSize||Font|1 +$--alert-title-font-size: 13px !default; +/// fontSize||Font|1 +$--alert-description-font-size: 12px !default; +/// fontSize||Font|1 +$--alert-close-font-size: 12px !default; +/// fontSize||Font|1 +$--alert-close-customed-font-size: 13px !default; + +$--alert-success-color: $--color-success-lighter !default; +$--alert-info-color: $--color-info-lighter !default; +$--alert-warning-color: $--color-warning-lighter !default; +$--alert-danger-color: $--color-danger-lighter !default; + +/// height||Other|4 +$--alert-icon-size: 16px !default; +/// height||Other|4 +$--alert-icon-large-size: 28px !default; + +/* MessageBox +-------------------------- */ +/// color||Color|0 +$--messagebox-title-color: $--color-text-primary !default; +$--msgbox-width: 420px !default; +$--msgbox-border-radius: 4px !default; +/// fontSize||Font|1 +$--messagebox-font-size: $--font-size-large !default; +/// fontSize||Font|1 +$--messagebox-content-font-size: $--font-size-base !default; +/// color||Color|0 +$--messagebox-content-color: $--color-text-regular !default; +/// fontSize||Font|1 +$--messagebox-error-font-size: 12px !default; +$--msgbox-padding-primary: 15px !default; +/// color||Color|0 +$--messagebox-success-color: $--color-success !default; +/// color||Color|0 +$--messagebox-info-color: $--color-info !default; +/// color||Color|0 +$--messagebox-warning-color: $--color-warning !default; +/// color||Color|0 +$--messagebox-danger-color: $--color-danger !default; + +/* Message +-------------------------- */ +$--message-shadow: $--box-shadow-base !default; +$--message-min-width: 380px !default; +$--message-background-color: #edf2fc !default; +$--message-padding: 15px 15px 15px 20px !default; +/// color||Color|0 +$--message-close-icon-color: $--color-text-placeholder !default; +/// height||Other|4 +$--message-close-size: 16px !default; +/// color||Color|0 +$--message-close-hover-color: $--color-text-secondary !default; + +/// color||Color|0 +$--message-success-font-color: $--color-success !default; +/// color||Color|0 +$--message-info-font-color: $--color-info !default; +/// color||Color|0 +$--message-warning-font-color: $--color-warning !default; +/// color||Color|0 +$--message-danger-font-color: $--color-danger !default; + +/* Notification +-------------------------- */ +$--notification-width: 330px !default; +/// padding||Spacing|3 +$--notification-padding: 14px 26px 14px 13px !default; +$--notification-radius: 8px !default; +$--notification-shadow: $--box-shadow-light !default; +/// color||Color|0 +$--notification-border-color: $--border-color-lighter !default; +$--notification-icon-size: 24px !default; +$--notification-close-font-size: $--message-close-size !default; +$--notification-group-margin-left: 13px !default; +$--notification-group-margin-right: 8px !default; +/// fontSize||Font|1 +$--notification-content-font-size: $--font-size-base !default; +/// color||Color|0 +$--notification-content-color: $--color-text-regular !default; +/// fontSize||Font|1 +$--notification-title-font-size: 16px !default; +/// color||Color|0 +$--notification-title-color: $--color-text-primary !default; + +/// color||Color|0 +$--notification-close-color: $--color-text-secondary !default; +/// color||Color|0 +$--notification-close-hover-color: $--color-text-regular !default; + +/// color||Color|0 +$--notification-success-icon-color: $--color-success !default; +/// color||Color|0 +$--notification-info-icon-color: $--color-info !default; +/// color||Color|0 +$--notification-warning-icon-color: $--color-warning !default; +/// color||Color|0 +$--notification-danger-icon-color: $--color-danger !default; + +/* Input +-------------------------- */ +$--input-font-size: $--font-size-base !default; +/// color||Color|0 +$--input-font-color: $--color-text-regular !default; +/// height||Other|4 +$--input-width: 140px !default; +/// height||Other|4 +$--input-height: 40px !default; +$--input-border: $--border-base !default; +$--input-border-color: $--border-color-base !default; +/// borderRadius||Border|2 +$--input-border-radius: $--border-radius-base !default; +$--input-border-color-hover: $--border-color-hover !default; +/// color||Color|0 +$--input-background-color: $--color-white !default; +$--input-fill-disabled: $--disabled-fill-base !default; +$--input-color-disabled: $--font-color-disabled-base !default; +/// color||Color|0 +$--input-icon-color: $--color-text-placeholder !default; +/// color||Color|0 +$--input-placeholder-color: $--color-text-placeholder !default; +$--input-max-width: 314px !default; + +$--input-hover-border: $--border-color-hover !default; +$--input-clear-hover-color: $--color-text-secondary !default; + +$--input-focus-border: $--color-primary !default; +$--input-focus-fill: $--color-white !default; + +$--input-disabled-fill: $--disabled-fill-base !default; +$--input-disabled-border: $--disabled-border-base !default; +$--input-disabled-color: $--disabled-color-base !default; +$--input-disabled-placeholder-color: $--color-text-placeholder !default; + +/// fontSize||Font|1 +$--input-medium-font-size: 14px !default; +/// height||Other|4 +$--input-medium-height: 36px !default; +/// fontSize||Font|1 +$--input-small-font-size: 13px !default; +/// height||Other|4 +$--input-small-height: 32px !default; +/// fontSize||Font|1 +$--input-mini-font-size: 12px !default; +/// height||Other|4 +$--input-mini-height: 28px !default; + +/* Cascader +-------------------------- */ +/// color||Color|0 +$--cascader-menu-font-color: $--color-text-regular !default; +/// color||Color|0 +$--cascader-menu-selected-font-color: $--color-primary !default; +$--cascader-menu-fill: $--fill-base !default; +$--cascader-menu-font-size: $--font-size-base !default; +$--cascader-menu-radius: $--border-radius-base !default; +$--cascader-menu-border: solid 1px $--border-color-light !default; +$--cascader-menu-shadow: $--box-shadow-light !default; +$--cascader-node-background-hover: $--background-color-base !default; +$--cascader-node-color-disabled:$--color-text-placeholder !default; +$--cascader-color-empty:$--color-text-placeholder !default; +$--cascader-tag-background: #f0f2f5; + +/* Group +-------------------------- */ +$--group-option-flex: 0 0 (1/5) * 100% !default; +$--group-option-offset-bottom: 12px !default; +$--group-option-fill-hover: rgba($--color-black, 0.06) !default; +$--group-title-color: $--color-black !default; +$--group-title-font-size: $--font-size-base !default; +$--group-title-width: 66px !default; + +/* Tab +-------------------------- */ +$--tab-font-size: $--font-size-base !default; +$--tab-border-line: 1px solid #e4e4e4 !default; +$--tab-header-color-active: $--color-text-secondary !default; +$--tab-header-color-hover: $--color-text-regular !default; +$--tab-header-color: $--color-text-regular !default; +$--tab-header-fill-active: rgba($--color-black, 0.06) !default; +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default; +$--tab-vertical-header-width: 90px !default; +$--tab-vertical-header-count-color: $--color-white !default; +$--tab-vertical-header-count-fill: $--color-text-secondary !default; + +/* Button +-------------------------- */ +/// fontSize||Font|1 +$--button-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--button-font-weight: $--font-weight-primary !default; +/// borderRadius||Border|2 +$--button-border-radius: $--border-radius-base !default; +/// padding||Spacing|3 +$--button-padding-vertical: 12px !default; +/// padding||Spacing|3 +$--button-padding-horizontal: 20px !default; + +/// fontSize||Font|1 +$--button-medium-font-size: $--font-size-base !default; +/// borderRadius||Border|2 +$--button-medium-border-radius: $--border-radius-base !default; +/// padding||Spacing|3 +$--button-medium-padding-vertical: 10px !default; +/// padding||Spacing|3 +$--button-medium-padding-horizontal: 20px !default; + +/// fontSize||Font|1 +$--button-small-font-size: 12px !default; +$--button-small-border-radius: #{$--border-radius-base - 1} !default; +/// padding||Spacing|3 +$--button-small-padding-vertical: 9px !default; +/// padding||Spacing|3 +$--button-small-padding-horizontal: 15px !default; +/// fontSize||Font|1 +$--button-mini-font-size: 12px !default; +$--button-mini-border-radius: #{$--border-radius-base - 1} !default; +/// padding||Spacing|3 +$--button-mini-padding-vertical: 7px !default; +/// padding||Spacing|3 +$--button-mini-padding-horizontal: 15px !default; + +/// color||Color|0 +$--button-default-font-color: $--color-text-regular !default; +/// color||Color|0 +$--button-default-background-color: $--color-white !default; +/// color||Color|0 +$--button-default-border-color: $--border-color-base !default; + +/// color||Color|0 +$--button-disabled-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--button-disabled-background-color: $--color-white !default; +/// color||Color|0 +$--button-disabled-border-color: $--border-color-lighter !default; + +/// color||Color|0 +$--button-primary-border-color: $--color-primary !default; +/// color||Color|0 +$--button-primary-font-color: $--color-white !default; +/// color||Color|0 +$--button-primary-background-color: $--color-primary !default; +/// color||Color|0 +$--button-success-border-color: $--color-success !default; +/// color||Color|0 +$--button-success-font-color: $--color-white !default; +/// color||Color|0 +$--button-success-background-color: $--color-success !default; +/// color||Color|0 +$--button-warning-border-color: $--color-warning !default; +/// color||Color|0 +$--button-warning-font-color: $--color-white !default; +/// color||Color|0 +$--button-warning-background-color: $--color-warning !default; +/// color||Color|0 +$--button-danger-border-color: $--color-danger !default; +/// color||Color|0 +$--button-danger-font-color: $--color-white !default; +/// color||Color|0 +$--button-danger-background-color: $--color-danger !default; +/// color||Color|0 +$--button-info-border-color: $--color-info !default; +/// color||Color|0 +$--button-info-font-color: $--color-white !default; +/// color||Color|0 +$--button-info-background-color: $--color-info !default; + +$--button-hover-tint-percent: 20% !default; +$--button-active-shade-percent: 10% !default; + + +/* cascader +-------------------------- */ +$--cascader-height: 200px !default; + +/* Switch +-------------------------- */ +/// color||Color|0 +$--switch-on-color: $--color-primary !default; +/// color||Color|0 +$--switch-off-color: $--border-color-base !default; +/// fontSize||Font|1 +$--switch-font-size: $--font-size-base !default; +$--switch-core-border-radius: 10px !default; +// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 +$--switch-width: 40px !default; +// height||Other|4 +$--switch-height: 20px !default; +// height||Other|4 +$--switch-button-size: 16px !default; + +/* Dialog +-------------------------- */ +$--dialog-background-color: $--color-white !default; +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; +/// fontSize||Font|1 +$--dialog-title-font-size: $--font-size-large !default; +/// fontSize||Font|1 +$--dialog-content-font-size: 14px !default; +/// fontLineHeight||LineHeight|2 +$--dialog-font-line-height: $--font-line-height-primary !default; +/// padding||Spacing|3 +$--dialog-padding-primary: 20px !default; + +/* Table +-------------------------- */ +/// color||Color|0 +$--table-border-color: $--border-color-lighter !default; +$--table-border: 1px solid $--table-border-color !default; +/// color||Color|0 +$--table-font-color: $--color-text-regular !default; +/// color||Color|0 +$--table-header-font-color: $--color-text-secondary !default; +/// color||Color|0 +$--table-row-hover-background-color: $--background-color-base !default; +$--table-current-row-background-color: $--color-primary-light-9 !default; +/// color||Color|0 +$--table-header-background-color: $--color-white !default; +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; + +/* Pagination +-------------------------- */ +/// fontSize||Font|1 +$--pagination-font-size: 13px !default; +/// color||Color|0 +$--pagination-background-color: $--color-white !default; +/// color||Color|0 +$--pagination-font-color: $--color-text-primary !default; +$--pagination-border-radius: 3px !default; +/// color||Color|0 +$--pagination-button-color: $--color-text-primary !default; +/// height||Other|4 +$--pagination-button-width: 35.5px !default; +/// height||Other|4 +$--pagination-button-height: 28px !default; +/// color||Color|0 +$--pagination-button-disabled-color: $--color-text-placeholder !default; +/// color||Color|0 +$--pagination-button-disabled-background-color: $--color-white !default; +/// color||Color|0 +$--pagination-hover-color: $--color-primary !default; + +/* Popup +-------------------------- */ +/// color||Color|0 +$--popup-modal-background-color: $--color-black !default; +/// opacity||Other|1 +$--popup-modal-opacity: 0.5 !default; + +/* Popover +-------------------------- */ +/// color||Color|0 +$--popover-background-color: $--color-white !default; +/// fontSize||Font|1 +$--popover-font-size: $--font-size-base !default; +/// color||Color|0 +$--popover-border-color: $--border-color-lighter !default; +$--popover-arrow-size: 6px !default; +/// padding||Spacing|3 +$--popover-padding: 12px !default; +$--popover-padding-large: 18px 20px !default; +/// fontSize||Font|1 +$--popover-title-font-size: 16px !default; +/// color||Color|0 +$--popover-title-font-color: $--color-text-primary !default; + +/* Tooltip +-------------------------- */ +/// color|1|Color|0 +$--tooltip-fill: $--color-text-primary !default; +/// color|1|Color|0 +$--tooltip-color: $--color-white !default; +/// fontSize||Font|1 +$--tooltip-font-size: 12px !default; +/// color||Color|0 +$--tooltip-border-color: $--color-text-primary !default; +$--tooltip-arrow-size: 6px !default; +/// padding||Spacing|3 +$--tooltip-padding: 10px !default; + +/* Tag +-------------------------- */ +/// color||Color|0 +$--tag-info-color: $--color-info !default; +/// color||Color|0 +$--tag-primary-color: $--color-primary !default; +/// color||Color|0 +$--tag-success-color: $--color-success !default; +/// color||Color|0 +$--tag-warning-color: $--color-warning !default; +/// color||Color|0 +$--tag-danger-color: $--color-danger !default; +/// fontSize||Font|1 +$--tag-font-size: 12px !default; +$--tag-border-radius: 4px !default; +$--tag-padding: 0 10px !default; + +/* Tree +-------------------------- */ +/// color||Color|0 +$--tree-node-hover-background-color: $--background-color-base !default; +/// color||Color|0 +$--tree-font-color: $--color-text-regular !default; +/// color||Color|0 +$--tree-expand-icon-color: $--color-text-placeholder !default; + +/* Dropdown +-------------------------- */ +$--dropdown-menu-box-shadow: $--box-shadow-light !default; +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; +$--dropdown-menuItem-hover-color: $--link-color !default; + +/* Badge +-------------------------- */ +/// color||Color|0 +$--badge-background-color: $--color-danger !default; +$--badge-radius: 10px !default; +/// fontSize||Font|1 +$--badge-font-size: 12px !default; +/// padding||Spacing|3 +$--badge-padding: 6px !default; +/// height||Other|4 +$--badge-size: 18px !default; + +/* Card +--------------------------*/ +/// color||Color|0 +$--card-border-color: $--border-color-lighter !default; +$--card-border-radius: 4px !default; +/// padding||Spacing|3 +$--card-padding: 20px !default; + +/* Slider +--------------------------*/ +/// color||Color|0 +$--slider-main-background-color: $--color-primary !default; +/// color||Color|0 +$--slider-runway-background-color: $--border-color-light !default; +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default; +$--slider-stop-background-color: $--color-white !default; +$--slider-disable-color: $--color-text-placeholder !default; +$--slider-margin: 16px 0 !default; +$--slider-border-radius: 3px !default; +/// height|1|Other|4 +$--slider-height: 6px !default; +/// height||Other|4 +$--slider-button-size: 16px !default; +$--slider-button-wrapper-size: 36px !default; +$--slider-button-wrapper-offset: -15px !default; + +/* Steps +--------------------------*/ +$--steps-border-color: $--disabled-border-base !default; +$--steps-border-radius: 4px !default; +$--steps-padding: 20px !default; + +/* Menu +--------------------------*/ +/// fontSize||Font|1 +$--menu-item-font-size: $--font-size-base !default; +/// color||Color|0 +$--menu-item-font-color: $--color-text-primary !default; +/// color||Color|0 +$--menu-background-color: $--color-white !default; +$--menu-item-hover-fill: $--color-primary-light-9 !default; + +/* Rate +--------------------------*/ +$--rate-height: 20px !default; +/// fontSize||Font|1 +$--rate-font-size: $--font-size-base !default; +/// height||Other|3 +$--rate-icon-size: 18px !default; +/// margin||Spacing|2 +$--rate-icon-margin: 6px !default; +$--rate-icon-color: $--color-text-placeholder !default; + +/* DatePicker +--------------------------*/ +$--datepicker-font-color: $--color-text-regular !default; +/// color|1|Color|0 +$--datepicker-off-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--datepicker-header-font-color: $--color-text-regular !default; +$--datepicker-icon-color: $--color-text-primary !default; +$--datepicker-border-color: $--disabled-border-base !default; +$--datepicker-inner-border-color: #e4e4e4 !default; +/// color||Color|0 +$--datepicker-inrange-background-color: $--border-color-extra-light !default; +/// color||Color|0 +$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default; +/// color||Color|0 +$--datepicker-active-color: $--color-primary !default; +/// color||Color|0 +$--datepicker-hover-font-color: $--color-primary !default; +$--datepicker-cell-hover-color: #fff !default; + +/* Loading +--------------------------*/ +/// height||Other|4 +$--loading-spinner-size: 42px !default; +/// height||Other|4 +$--loading-fullscreen-spinner-size: 50px !default; + +/* Scrollbar +--------------------------*/ +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; + +/* Carousel +--------------------------*/ +/// fontSize||Font|1 +$--carousel-arrow-font-size: 12px !default; +$--carousel-arrow-size: 36px !default; +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; +/// width||Other|4 +$--carousel-indicator-width: 30px !default; +/// height||Other|4 +$--carousel-indicator-height: 2px !default; +$--carousel-indicator-padding-horizontal: 4px !default; +$--carousel-indicator-padding-vertical: 12px !default; +$--carousel-indicator-out-color: $--border-color-hover !default; + +/* Collapse +--------------------------*/ +/// color||Color|0 +$--collapse-border-color: $--border-color-lighter !default; +/// height||Other|4 +$--collapse-header-height: 48px !default; +/// color||Color|0 +$--collapse-header-background-color: $--color-white !default; +/// color||Color|0 +$--collapse-header-font-color: $--color-text-primary !default; +/// fontSize||Font|1 +$--collapse-header-font-size: 13px !default; +/// color||Color|0 +$--collapse-content-background-color: $--color-white !default; +/// fontSize||Font|1 +$--collapse-content-font-size: 13px !default; +/// color||Color|0 +$--collapse-content-font-color: $--color-text-primary !default; + +/* Transfer +--------------------------*/ +$--transfer-border-color: $--border-color-lighter !default; +$--transfer-border-radius: $--border-radius-base !default; +/// height||Other|4 +$--transfer-panel-width: 200px !default; +/// height||Other|4 +$--transfer-panel-header-height: 40px !default; +/// color||Color|0 +$--transfer-panel-header-background-color: $--background-color-base !default; +/// height||Other|4 +$--transfer-panel-footer-height: 40px !default; +/// height||Other|4 +$--transfer-panel-body-height: 246px !default; +/// height||Other|4 +$--transfer-item-height: 30px !default; +/// height||Other|4 +$--transfer-filter-height: 32px !default; + +/* Header + --------------------------*/ +$--header-padding: 0 20px !default; + +/* Footer +--------------------------*/ +$--footer-padding: 0 20px !default; + +/* Main +--------------------------*/ +$--main-padding: 20px !default; + +/* Timeline +--------------------------*/ +$--timeline-node-size-normal: 12px !default; +$--timeline-node-size-large: 14px !default; +$--timeline-node-color: $--border-color-light !default; + +/* Backtop +--------------------------*/ +/// color||Color|0 +$--backtop-background-color: $--color-white !default; +/// color||Color|0 +$--backtop-font-color: $--color-primary !default; +/// color||Color|0 +$--backtop-hover-background-color: $--border-color-extra-light !default; + +/* Link +--------------------------*/ +/// fontSize||Font|1 +$--link-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--link-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--link-default-font-color: $--color-text-regular !default; +/// color||Color|0 +$--link-default-active-color: $--color-primary !default; +/// color||Color|0 +$--link-disabled-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--link-primary-font-color: $--color-primary !default; +/// color||Color|0 +$--link-success-font-color: $--color-success !default; +/// color||Color|0 +$--link-warning-font-color: $--color-warning !default; +/// color||Color|0 +$--link-danger-font-color: $--color-danger !default; +/// color||Color|0 +$--link-info-font-color: $--color-info !default; +/* Calendar +--------------------------*/ +/// border||Other|4 +$--calendar-border: $--table-border !default; +/// color||Other|4 +$--calendar-selected-background-color: #F2F8FE !default; +$--calendar-cell-width: 85px !default; + +/* Form +-------------------------- */ +/// fontSize||Font|1 +$--form-label-font-size: $--font-size-base !default; + +/* Avatar +--------------------------*/ +/// color||Color|0 +$--avatar-font-color: #fff !default; +/// color||Color|0 +$--avatar-background-color: #C0C4CC !default; +/// fontSize||Font Size|1 +$--avatar-text-font-size: 14px !default; +/// fontSize||Font Size|1 +$--avatar-icon-font-size: 18px !default; +/// borderRadius||Border|2 +$--avatar-border-radius: $--border-radius-base !default; +/// size|1|Avatar Size|3 +$--avatar-large-size: 40px !default; +/// size|1|Avatar Size|3 +$--avatar-medium-size: 36px !default; +/// size|1|Avatar Size|3 +$--avatar-small-size: 28px !default; + +/* Empty +-------------------------- */ +$--empty-padding: 40px 0 !default; +$--empty-image-width: 160px !default; +$--empty-description-margin-top: 20px !default; +$--empty-bottom-margin-top: 20px !default; + +/* Descriptions +-------------------------- */ +$--descriptions-header-margin-bottom: 20px !default; +$--descriptions-title-font-size: 16px !default; +$--descriptions-table-border: 1px solid $--border-color-lighter !default; +$--descriptions-item-bordered-label-background: #fafafa !default; + +/* Skeleton +--------------------------*/ +$--skeleton-color: #f2f2f2 !default; +$--skeleton-to-color: #e6e6e6 !default; + +/* Svg +--------------- */ +$--svg-monochrome-grey: #DCDDE0 !default; + +/* Result +-------------------------- */ +$--result-padding: 40px 30px !default; +$--result-icon-font-size: 64px !default; +$--result-title-font-size: 20px !default; +$--result-title-margin-top: 20px !default; +$--result-subtitle-margin-top: 10px !default; +$--result-extra-margin-top: 30px !default; +$--result-info-color: $--color-info !default; +$--result-success-color: $--color-success !default; +$--result-warning-color: $--color-warning !default; +$--result-danger-color: $--color-danger !default; + +/* Break-point +--------------------------*/ +$--sm: 768px !default; +$--md: 992px !default; +$--lg: 1200px !default; +$--xl: 1920px !default; + +$--breakpoints: ( + 'xs' : (max-width: $--sm - 1), + 'sm' : (min-width: $--sm), + 'md' : (min-width: $--md), + 'lg' : (min-width: $--lg), + 'xl' : (min-width: $--xl) +); + +$--breakpoints-spec: ( + 'xs-only' : (max-width: $--sm - 1), + 'sm-and-up' : (min-width: $--sm), + 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})", + 'sm-and-down': (max-width: $--md - 1), + 'md-and-up' : (min-width: $--md), + 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})", + 'md-and-down': (max-width: $--lg - 1), + 'lg-and-up' : (min-width: $--lg), + 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})", + 'lg-and-down': (max-width: $--xl - 1), + 'xl-only' : (min-width: $--xl), +); diff --git a/nezha-fronted/src/assets/css/themes/src/container.scss b/nezha-fronted/src/assets/css/themes/src/container.scss new file mode 100644 index 000000000..df7b2aff3 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/container.scss @@ -0,0 +1,14 @@ +@import "mixins/mixins"; + +@include b(container) { + display: flex; + flex-direction: row; + flex: 1; + flex-basis: auto; + box-sizing: border-box; + min-width: 0; + + @include when(vertical) { + flex-direction: column; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker.scss b/nezha-fronted/src/assets/css/themes/src/date-picker.scss new file mode 100644 index 000000000..516f05613 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker.scss @@ -0,0 +1,12 @@ +@import "./date-picker/date-table.scss"; +@import "./date-picker/month-table.scss"; +@import "./date-picker/year-table.scss"; +@import "./date-picker/time-spinner.scss"; +@import "./date-picker/picker.scss"; +@import "./date-picker/date-picker.scss"; +@import "./date-picker/date-range-picker.scss"; +@import "./date-picker/time-range-picker.scss"; +@import "./date-picker/time-picker.scss"; +@import "./input.scss"; +@import "./scrollbar.scss"; +@import "./popper"; \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/date-picker.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/date-picker.scss new file mode 100644 index 000000000..7ac85ab1c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/date-picker.scss @@ -0,0 +1,97 @@ +@import "../common/var"; +@import "../mixins/mixins"; +@import "./picker-panel.scss"; + +@include b(date-picker) { + width: 322px; + + &.has-sidebar.has-time { + width: 434px; + } + + &.has-sidebar { + width: 438px; + } + + &.has-time .el-picker-panel__body-wrapper { + position: relative; + } + + .el-picker-panel__content { + width: 292px; + } + + table { + table-layout: fixed; + width: 100%; + } + + @include e(editor-wrap) { + position: relative; + display: table-cell; + padding: 0 5px; + } + + @include e(time-header) { + position: relative; + border-bottom: 1px solid $--datepicker-inner-border-color; + font-size: 12px; + padding: 8px 5px 5px 5px; + display: table; + width: 100%; + box-sizing: border-box; + } + + @include e(header) { + margin: 12px; + text-align: center; + + @include m(bordered) { + margin-bottom: 0; + padding-bottom: 12px; + border-bottom: solid 1px $--border-color-lighter; + + & + .el-picker-panel__content { + margin-top: 0; + } + } + } + + @include e(header-label) { + font-size: 16px; + font-weight: 500; + padding: 0 5px; + line-height: 22px; + text-align: center; + cursor: pointer; + color: $--color-text-regular; + + &:hover { + color: $--datepicker-hover-font-color; + } + + &.active { + color: $--datepicker-active-color; + } + } + + @include e(prev-btn) { + float: left; + } + + @include e(next-btn) { + float: right; + } + + @include e(time-wrap) { + padding: 10px; + text-align: center; + } + + @include e(time-label) { + float: left; + cursor: pointer; + line-height: 30px; + margin-left: 10px; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/date-range-picker.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/date-range-picker.scss new file mode 100644 index 000000000..cff12a124 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/date-range-picker.scss @@ -0,0 +1,101 @@ +@import "../common/var"; + +@include b(date-range-picker) { + width: 646px; + + &.has-sidebar { + width: 756px; + } + + table { + table-layout: fixed; + width: 100%; + } + + .el-picker-panel__body { + min-width: 513px; + } + + .el-picker-panel__content { + margin: 0; + } + + @include e(header) { + position: relative; + text-align: center; + height: 28px; + + [class*=arrow-left] { + float: left; + } + + [class*=arrow-right] { + float: right; + } + + div { + font-size: 16px; + font-weight: 500; + margin-right: 50px; + } + } + + @include e(content) { + float: left; + width: 50%; + box-sizing: border-box; + margin: 0; + padding: 16px; + + @include when(left) { + border-right: 1px solid $--datepicker-inner-border-color; + } + .el-date-range-picker__header { + + div { + margin-left: 50px; + margin-right: 50px; + } + } + } + + @include e(editors-wrap) { + box-sizing: border-box; + display: table-cell; + + @include when(right) { + text-align: right; + } + } + + @include e(time-header) { + position: relative; + border-bottom: 1px solid $--datepicker-inner-border-color; + font-size: 12px; + padding: 8px 5px 5px 5px; + display: table; + width: 100%; + box-sizing: border-box; + + > .el-icon-arrow-right { + font-size: 20px; + vertical-align: middle; + display: table-cell; + color: $--datepicker-icon-color; + } + } + + @include e(time-picker-wrap) { + position: relative; + display: table-cell; + padding: 0 5px; + + .el-picker-panel { + position: absolute; + top: 13px; + right: 0; + z-index: 1; + background: $--color-white; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/date-table.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/date-table.scss new file mode 100644 index 000000000..5fed1bbd3 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/date-table.scss @@ -0,0 +1,151 @@ +@import "../common/var"; +@import "../mixins/mixins"; + +@include b(date-table) { + font-size: 12px; + user-select: none; + + @include when(week-mode) { + .el-date-table__row { + &:hover { + div { + background-color: $--datepicker-inrange-background-color; + } + td.available:hover { + color: $--datepicker-font-color; + } + td:first-child div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + td:last-child div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } + } + + &.current div { + background-color: $--datepicker-inrange-background-color; + } + } + } + + td { + width: 32px; + height: 30px; + padding: 4px 0; + box-sizing: border-box; + text-align: center; + cursor: pointer; + position: relative; + + & div { + height: 30px; + padding: 3px 0; + box-sizing: border-box; + } + + & span { + width: 24px; + height: 24px; + display: block; + margin: 0 auto; + line-height: 24px; + position: absolute; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + &.next-month, + &.prev-month { + color: $--datepicker-off-font-color; + } + + &.today { + position: relative; + span { + color: $--color-primary; + font-weight: bold; + } + &.start-date span, + &.end-date span { + color: $--color-white; + } + } + + &.available:hover { + color: $--datepicker-hover-font-color; + } + + &.in-range div { + background-color: $--datepicker-inrange-background-color; + &:hover { + background-color: $--datepicker-inrange-hover-background-color; + } + } + + &.current:not(.disabled) span { + color: $--color-white; + background-color: $--datepicker-active-color; + } + &.start-date div, + &.end-date div { + color: $--color-white; + } + + &.start-date span, + &.end-date span { + background-color: $--datepicker-active-color; + } + + &.start-date div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + + &.end-date div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } + + &.disabled div { + background-color: $--background-color-base; + opacity: 1; + cursor: not-allowed; + color: $--color-text-placeholder; + } + + &.selected div { + margin-left: 5px; + margin-right: 5px; + background-color: $--datepicker-inrange-background-color; + border-radius: 15px; + &:hover { + background-color: $--datepicker-inrange-hover-background-color; + } + } + + &.selected span { + background-color: $--datepicker-active-color; + color: $--color-white; + border-radius: 15px; + } + + &.week { + font-size: 80%; + color: $--datepicker-header-font-color; + } + } + + th { + padding: 5px; + color: $--datepicker-header-font-color; + font-weight: 400; + border-bottom: solid 1px $--border-color-lighter; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/month-table.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/month-table.scss new file mode 100644 index 000000000..1164f70b5 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/month-table.scss @@ -0,0 +1,82 @@ +@import "../common/var"; + +@include b(month-table) { + font-size: 12px; + margin: -1px; + border-collapse: collapse; + + td { + text-align: center; + padding: 8px 0px; + cursor: pointer; + & div { + height: 48px; + padding: 6px 0; + box-sizing: border-box; + } + &.today { + .cell { + color: $--color-primary; + font-weight: bold; + } + &.start-date .cell, + &.end-date .cell { + color: $--color-white; + } + } + + &.disabled .cell { + background-color: $--background-color-base; + cursor: not-allowed; + color: $--color-text-placeholder; + + &:hover { + color: $--color-text-placeholder; + } + } + + .cell { + width: 60px; + height: 36px; + display: block; + line-height: 36px; + color: $--datepicker-font-color; + margin: 0 auto; + border-radius: 18px; + &:hover { + color: $--datepicker-hover-font-color; + } + } + + &.in-range div { + background-color: $--datepicker-inrange-background-color; + &:hover { + background-color: $--datepicker-inrange-hover-background-color; + } + } + &.start-date div, + &.end-date div { + color: $--color-white; + } + + &.start-date .cell, + &.end-date .cell { + color: $--color-white; + background-color: $--datepicker-active-color; + } + + &.start-date div { + border-top-left-radius: 24px; + border-bottom-left-radius: 24px; + } + + &.end-date div { + border-top-right-radius: 24px; + border-bottom-right-radius: 24px; + } + + &.current:not(.disabled) .cell { + color: $--datepicker-active-color; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/picker-panel.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/picker-panel.scss new file mode 100644 index 000000000..70fed3b0d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/picker-panel.scss @@ -0,0 +1,117 @@ +@import "../common/var"; + +@include b(picker-panel) { + color: $--color-text-regular; + border: 1px solid $--datepicker-border-color; + box-shadow: $--box-shadow-light; + background: $--color-white; + border-radius: $--border-radius-base; + line-height: 30px; + margin: 5px 0; + + @include e((body, body-wrapper)) { + &::after { + content: ""; + display: table; + clear: both; + } + } + + @include e(content) { + position: relative; + margin: 15px; + } + + @include e(footer) { + border-top: 1px solid $--datepicker-inner-border-color; + padding: 4px; + text-align: right; + background-color: $--color-white; + position: relative; + font-size: 0; + } + + @include e(shortcut) { + display: block; + width: 100%; + border: 0; + background-color: transparent; + line-height: 28px; + font-size: 14px; + color: $--datepicker-font-color; + padding-left: 12px; + text-align: left; + outline: none; + cursor: pointer; + + &:hover { + color: $--datepicker-hover-font-color; + } + + &.active { + background-color: #e6f1fe; + color: $--datepicker-active-color; + } + } + + @include e(btn) { + border: 1px solid #dcdcdc; + color: #333; + line-height: 24px; + border-radius: 2px; + padding: 0 20px; + cursor: pointer; + background-color: transparent; + outline: none; + font-size: 12px; + + &[disabled] { + color: #cccccc; + cursor: not-allowed; + } + } + + @include e(icon-btn) { + font-size: 12px; + color: $--datepicker-icon-color; + border: 0; + background: transparent; + cursor: pointer; + outline: none; + margin-top: 8px; + + &:hover { + color: $--datepicker-hover-font-color; + } + + @include when(disabled) { + color: $--font-color-disabled-base; + + &:hover { + cursor: not-allowed; + } + } + } + + @include e(link-btn) { + vertical-align: middle; + } +} + +.el-picker-panel *[slot=sidebar], +.el-picker-panel__sidebar { + position: absolute; + top: 0; + bottom: 0; + width: 110px; + border-right: 1px solid $--datepicker-inner-border-color; + box-sizing: border-box; + padding-top: 6px; + background-color: $--color-white; + overflow: auto; +} + +.el-picker-panel *[slot=sidebar] + .el-picker-panel__body, +.el-picker-panel__sidebar + .el-picker-panel__body { + margin-left: 110px; +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/picker.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/picker.scss new file mode 100644 index 000000000..8110c2af0 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/picker.scss @@ -0,0 +1,197 @@ +@import "../mixins/mixins"; +@import "../common/var"; +@import "../common/transition"; + +@include b(date-editor) { + position: relative; + display: inline-block; + text-align: left; + + &.el-input, + &.el-input__inner { + width: 220px; + } + + @include m((monthrange)) { + &.el-input, + &.el-input__inner { + width: 300px; + } + } + + @include m((daterange, timerange)) { + &.el-input, + &.el-input__inner { + width: 350px; + } + } + + @include m(datetimerange) { + &.el-input, + &.el-input__inner { + width: 400px; + } + } + + @include m(dates) { + .el-input__inner { + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .el-icon-circle-close { + cursor: pointer; + } + + .el-range__icon { + font-size: 14px; + margin-left: -5px; + color: $--color-text-placeholder; + float: left; + line-height: 32px; + } + + .el-range-input { + appearance: none; + border: none; + outline: none; + display: inline-block; + height: 100%; + margin: 0; + padding: 0; + width: 39%; + text-align: center; + font-size: $--font-size-base; + color: $--color-text-regular; + + &::placeholder { + color: $--color-text-placeholder; + } + } + + .el-range-separator { + display: inline-block; + height: 100%; + padding: 0 5px; + margin: 0; + text-align: center; + line-height: 32px; + font-size: 14px; + width: 5%; + color: $--color-text-primary; + } + + .el-range__close-icon { + font-size: 14px; + color: $--color-text-placeholder; + width: 25px; + display: inline-block; + float: right; + line-height: 32px; + } +} + +@include b(range-editor) { + &.el-input__inner { + display: inline-flex; + align-items: center; + padding: 3px 10px; + } + + .el-range-input { + line-height: 1; + } + + @include when(active) { + border-color: $--color-primary; + + &:hover { + border-color: $--color-primary; + } + } + + @include m(medium) { + &.el-input__inner { + height: $--input-medium-height; + } + + .el-range-separator { + line-height: 28px; + font-size: $--input-medium-font-size; + } + + .el-range-input { + font-size: $--input-medium-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 28px; + } + } + + @include m(small) { + &.el-input__inner { + height: $--input-small-height; + } + + .el-range-separator { + line-height: 24px; + font-size: $--input-small-font-size; + } + + .el-range-input { + font-size: $--input-small-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 24px; + } + } + + @include m(mini) { + &.el-input__inner { + height: $--input-mini-height; + } + + .el-range-separator { + line-height: 20px; + font-size: $--input-mini-font-size; + } + + .el-range-input { + font-size: $--input-mini-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 20px; + } + } + + @include when(disabled) { + background-color: $--input-disabled-fill; + border-color: $--input-disabled-border; + color: $--input-disabled-color; + cursor: not-allowed; + + &:hover, &:focus { + border-color: $--input-disabled-border; + } + + input { + background-color: $--input-disabled-fill; + color: $--input-disabled-color; + cursor: not-allowed; + &::placeholder { + color: $--input-disabled-placeholder-color; + } + } + + .el-range-separator { + color: $--input-disabled-color; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/time-picker.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/time-picker.scss new file mode 100644 index 000000000..eaaf8f035 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/time-picker.scss @@ -0,0 +1,85 @@ +@import "../common/var"; + +@include b(time-panel) { + margin: 5px 0; + border: solid 1px $--datepicker-border-color; + background-color: $--color-white; + box-shadow: $--box-shadow-light; + border-radius: 2px; + position: absolute; + width: 180px; + left: 0; + z-index: $--index-top; + user-select: none; + box-sizing: content-box; + + @include e(content) { + font-size: 0; + position: relative; + overflow: hidden; + + &::after, &::before { + content: ""; + top: 50%; + position: absolute; + margin-top: -15px; + height: 32px; + z-index: -1; + left: 0; + right: 0; + box-sizing: border-box; + padding-top: 6px; + text-align: left; + border-top: 1px solid $--border-color-light; + border-bottom: 1px solid $--border-color-light; + } + + &::after { + left: 50%; + margin-left: 12%; + margin-right: 12%; + } + + &::before { + padding-left: 50%; + margin-right: 12%; + margin-left: 12%; + } + + &.has-seconds { + &::after { + left: calc(100% / 3 * 2); + } + + &::before { + padding-left: calc(100% / 3); + } + } + } + + @include e(footer) { + border-top: 1px solid $--datepicker-inner-border-color; + padding: 4px; + height: 36px; + line-height: 25px; + text-align: right; + box-sizing: border-box; + } + + @include e(btn) { + border: none; + line-height: 28px; + padding: 0 5px; + margin: 0 5px; + cursor: pointer; + background-color: transparent; + outline: none; + font-size: 12px; + color: $--color-text-primary; + + &.confirm { + font-weight: 800; + color: $--datepicker-active-color; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/time-range-picker.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/time-range-picker.scss new file mode 100644 index 000000000..a2bf6293d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/time-range-picker.scss @@ -0,0 +1,31 @@ +@import "../common/var"; + +@include b(time-range-picker) { + width: 354px; + overflow: visible; + + @include e(content) { + position: relative; + text-align: center; + padding: 10px; + } + + @include e(cell) { + box-sizing: border-box; + margin: 0; + padding: 4px 7px 7px; + width: 50%; + display: inline-block; + } + + @include e(header) { + margin-bottom: 5px; + text-align: center; + font-size: 14px; + } + + @include e(body) { + border-radius:2px; + border: 1px solid $--datepicker-border-color; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/time-spinner.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/time-spinner.scss new file mode 100644 index 000000000..c70260a05 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/time-spinner.scss @@ -0,0 +1,110 @@ +@import "../common/var"; + +@include b(time-spinner) { + &.has-seconds { + .el-time-spinner__wrapper { + width: 33.3%; + } + } + + @include e(wrapper) { + max-height: 190px; + overflow: auto; + display: inline-block; + width: 50%; + vertical-align: top; + position: relative; + + & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { + padding-bottom: 15px; + } + + @include when(arrow) { + box-sizing: border-box; + text-align: center; + overflow: hidden; + + .el-time-spinner__list { + transform: translateY(-32px); + } + + .el-time-spinner__item:hover:not(.disabled):not(.active) { + background: $--color-white; + cursor: default; + } + } + } + + @include e(arrow) { + font-size: 12px; + color: $--color-text-secondary; + position: absolute; + left: 0; + width: 100%; + z-index: $--index-normal; + text-align: center; + height: 30px; + line-height: 30px; + cursor: pointer; + + &:hover { + color: $--color-primary; + } + + &.el-icon-arrow-up { + top: 10px; + } + + &.el-icon-arrow-down { + bottom: 10px; + } + } + + @include e(input) { + &.el-input { + width: 70%; + + .el-input__inner { + padding: 0; + text-align: center; + } + } + } + + @include e(list) { + padding: 0; + margin: 0; + list-style: none; + text-align: center; + + &::after, + &::before { + content: ''; + display: block; + width: 100%; + height: 80px; + } + } + + @include e(item) { + height: 32px; + line-height: 32px; + font-size: 12px; + color: $--color-text-regular; + + &:hover:not(.disabled):not(.active) { + background: $--background-color-base; + cursor: pointer; + } + + &.active:not(.disabled) { + color: $--color-text-primary; + font-weight: bold; + } + + &.disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/date-picker/year-table.scss b/nezha-fronted/src/assets/css/themes/src/date-picker/year-table.scss new file mode 100644 index 000000000..18fbed921 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/date-picker/year-table.scss @@ -0,0 +1,51 @@ +@import "../common/var"; + +@include b(year-table) { + font-size: 12px; + margin: -1px; + border-collapse: collapse; + + .el-icon { + color: $--datepicker-icon-color; + } + + td { + text-align: center; + padding: 20px 3px; + cursor: pointer; + + &.today { + .cell { + color: $--color-primary; + font-weight: bold; + } + } + + &.disabled .cell { + background-color: $--background-color-base; + cursor: not-allowed; + color: $--color-text-placeholder; + + &:hover { + color: $--color-text-placeholder; + } + } + + .cell { + width: 48px; + height: 32px; + display: block; + line-height: 32px; + color: $--datepicker-font-color; + margin: 0 auto; + + &:hover { + color: $--datepicker-hover-font-color; + } + } + + &.current:not(.disabled) .cell { + color: $--datepicker-active-color; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/descriptions-item.scss b/nezha-fronted/src/assets/css/themes/src/descriptions-item.scss new file mode 100644 index 000000000..34148f787 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/descriptions-item.scss @@ -0,0 +1,32 @@ +@import 'mixins/mixins'; +@import 'common/var'; + +@include b(descriptions-item) { + + @include e(container) { + display: flex; + } + + @include e(label) { + &.has-colon { + &::after { + content: ':'; + position: relative; + top: -0.5px; + } + } + &.is-bordered-label { + font-weight: bold; + color: $--color-text-secondary; + background: $--descriptions-item-bordered-label-background; + } + + &:not(.is-bordered-label) { + margin-right: 10px; + } + } + + @include e(content) { + + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/descriptions.scss b/nezha-fronted/src/assets/css/themes/src/descriptions.scss new file mode 100644 index 000000000..fe575fddd --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/descriptions.scss @@ -0,0 +1,111 @@ +@import 'mixins/mixins'; +@import 'common/var'; +@import 'descriptions-item'; + +@include b(descriptions) { + box-sizing: border-box; + font-size: $--font-size-base; + color: $--color-text-primary; + + @include e(header) { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: $--descriptions-header-margin-bottom; + + @include e(title) { + font-size: $--descriptions-title-font-size; + font-weight: bold; + } + } + + @include e(body) { + color: $--color-text-regular; + background-color: $--color-white; + + table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + + th, td { + box-sizing: border-box; + text-align: left; + font-weight: normal; + line-height: 1.5; + + @include when(left) { + text-align: left; + } + + @include when(center) { + text-align: center; + } + + @include when(right) { + text-align: right; + } + } + } + } + + .is-bordered { + table-layout: auto; + th, td { + border: $--descriptions-table-border; + padding: 12px 10px; + } + } + + :not(.is-bordered) { + th, td { + padding-bottom: 12px; + } + } + + @include m(medium) { + &.is-bordered { + th, td { + padding: 10px; + } + } + + &:not(.is-bordered) { + th, td { + padding-bottom: 10px; + } + } + } + + @include m(small) { + font-size: 12px; + + &.is-bordered { + th, td { + padding: 8px 10px; + } + } + + &:not(.is-bordered) { + th, td { + padding-bottom: 8px; + } + } + } + + @include m(mini) { + font-size: 12px; + + &.is-bordered { + th, td { + padding: 6px 10px; + } + } + + &:not(.is-bordered) { + th, td { + padding-bottom: 6px; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/dialog.scss b/nezha-fronted/src/assets/css/themes/src/dialog.scss new file mode 100644 index 000000000..fa8a3a8ce --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/dialog.scss @@ -0,0 +1,123 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; +@import "common/popup"; + +@include b(dialog) { + position: relative; + margin: 0 auto 50px; + background: $--dialog-background-color; + border-radius: $--border-radius-small; + box-shadow: $--dialog-box-shadow; + box-sizing: border-box; + width: 50%; + + @include when(fullscreen) { + width: 100%; + margin-top: 0; + margin-bottom: 0; + height: 100%; + overflow: auto; + } + + @include e(wrapper) { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + margin: 0; + } + + @include e(header) { + padding: $--dialog-padding-primary; + padding-bottom: 10px; + } + + @include e(headerbtn) { + position: absolute; + top: $--dialog-padding-primary; + right: $--dialog-padding-primary; + padding: 0; + background: transparent; + border: none; + outline: none; + cursor: pointer; + font-size: $--message-close-size; + + .el-dialog__close { + color: $--color-info; + } + + &:focus, &:hover { + .el-dialog__close { + color: $--color-primary; + } + } + } + + @include e(title) { + line-height: $--dialog-font-line-height; + font-size: $--dialog-title-font-size; + color: $--color-text-primary; + } + + @include e(body) { + padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary; + color: $--color-text-regular; + font-size: $--dialog-content-font-size; + word-break: break-all; + } + + @include e(footer) { + padding: $--dialog-padding-primary; + padding-top: 10px; + text-align: right; + box-sizing: border-box; + } + + // 内容居中布局 + @include m(center) { + text-align: center; + + @include e(body) { + text-align: initial; + padding: 25px ($--dialog-padding-primary + 5px) 30px; + } + + @include e(footer) { + text-align: inherit; + } + } +} + +.dialog-fade-enter-active { + animation: dialog-fade-in .3s; +} + +.dialog-fade-leave-active { + animation: dialog-fade-out .3s; +} + +@keyframes dialog-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes dialog-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/display.scss b/nezha-fronted/src/assets/css/themes/src/display.scss new file mode 100644 index 000000000..fac8b494e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/display.scss @@ -0,0 +1,12 @@ +@import "common/var"; +@import "mixins/mixins"; + +.hidden { + @each $break-point-name, $value in $--breakpoints-spec { + &-#{$break-point-name} { + @include res($break-point-name, $--breakpoints-spec) { + display: none !important; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/divider.scss b/nezha-fronted/src/assets/css/themes/src/divider.scss new file mode 100644 index 000000000..4ed94ee59 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/divider.scss @@ -0,0 +1,47 @@ +@import "common/var"; +@import "mixins/mixins"; + +@include b(divider) { + background-color: $--border-color-base; + position: relative; + + @include m(horizontal) { + display: block; + height: 1px; + width: 100%; + margin: 24px 0; + } + + @include m(vertical) { + display: inline-block; + width: 1px; + height: 1em; + margin: 0 8px; + vertical-align: middle; + position: relative; + } + + @include e(text) { + position: absolute; + background-color: $--color-white; + padding: 0 20px; + font-weight: 500; + color: $--color-text-primary; + font-size: 14px; + + @include when(left) { + left: 20px; + transform: translateY(-50%); + } + + @include when(center) { + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + + @include when(right) { + right: 20px; + transform: translateY(-50%); + } + } +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/drawer.scss b/nezha-fronted/src/assets/css/themes/src/drawer.scss new file mode 100644 index 000000000..78fa9bda8 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/drawer.scss @@ -0,0 +1,219 @@ +@import "mixins/mixins"; +@import "common/var"; + +@keyframes el-drawer-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@mixin drawer-animation($direction) { + + @keyframes #{$direction}-drawer-in { + 0% { + + @if $direction == ltr { + transform: translate(-100%, 0px); + } + + @if $direction == rtl { + transform: translate(100%, 0px); + } + + @if $direction == ttb { + transform: translate(0px, -100%); + } + + @if $direction == btt { + transform: translate(0px, 100%); + } + } + + 100% { + @if $direction == ltr { + transform: translate(0px, 0px); + } + + @if $direction == rtl { + transform: translate(0px, 0px); + } + + @if $direction == ttb { + transform: translate(0px, 0px); + } + + @if $direction == btt { + transform: translate(0px, 0px); + } + } + } + + @keyframes #{$direction}-drawer-out { + 0% { + @if $direction == ltr { + transform: translate(0px, 0px); + } + + @if $direction == rtl { + transform: translate(0px, 0px);; + } + + @if $direction == ttb { + transform: translate(0px, 0px); + } + + @if $direction == btt { + transform: translate(0px, 0); + } + } + + 100% { + @if $direction == ltr { + transform: translate(-100%, 0px); + } + + @if $direction == rtl { + transform: translate(100%, 0px); + } + + @if $direction == ttb { + transform: translate(0px, -100%); + } + + @if $direction == btt { + transform: translate(0px, 100%); + } + } + } +} + +@mixin animation-in($direction) { + .el-drawer__open &.#{$direction} { + animation: #{$direction}-drawer-in .3s 1ms; + } +} + +@mixin animation-out($direction) { + &.#{$direction} { + animation: #{$direction}-drawer-out .3s; + } +} + +@include drawer-animation(rtl); +@include drawer-animation(ltr); +@include drawer-animation(ttb); +@include drawer-animation(btt); + +$directions: rtl, ltr, ttb, btt; + +@include b(drawer) { + position: absolute; + box-sizing: border-box; + background-color: $--dialog-background-color; + display: flex; + flex-direction: column; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), + 0 16px 24px 2px rgba(0, 0, 0, 0.14), + 0 6px 30px 5px rgba(0, 0, 0, 0.12); + overflow: hidden; + outline: 0; + + @each $direction in $directions { + @include animation-out($direction); + @include animation-in($direction); + } + + &__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin: 0; + } + + &__header { + align-items: center; + color: rgb(114, 118, 123); + display: flex; + margin-bottom: 32px; + padding: $--dialog-padding-primary; + padding-bottom: 0; + & > :first-child { + flex: 1; + } + } + + &__title { + margin: 0; + flex: 1; + line-height: inherit; + font-size: 1rem; + } + + &__close-btn { + border: none; + cursor: pointer; + font-size: $--font-size-extra-large; + color: inherit; + background-color: transparent; + } + + &__body { + flex: 1; + overflow: auto; + & > * { + box-sizing: border-box; + } + } + + &.ltr, &.rtl { + height: 100%; + top: 0; + bottom: 0; + } + + &.ttb, &.btt { + width: 100%; + left: 0; + right: 0; + } + + &.ltr { + left: 0; + } + + &.rtl { + right: 0; + } + + &.ttb { + top: 0; + } + + &.btt { + bottom: 0; + } +} + +.el-drawer__container { + position: relative; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; + width: 100%; +} + +.el-drawer-fade-enter-active { + animation: el-drawer-fade-in .3s; +} + +.el-drawer-fade-leave-active { + animation: el-drawer-fade-in .3s reverse; +} diff --git a/nezha-fronted/src/assets/css/themes/src/dropdown-item.scss b/nezha-fronted/src/assets/css/themes/src/dropdown-item.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/dropdown-menu.scss b/nezha-fronted/src/assets/css/themes/src/dropdown-menu.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/dropdown.scss b/nezha-fronted/src/assets/css/themes/src/dropdown.scss new file mode 100644 index 000000000..84718599b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/dropdown.scss @@ -0,0 +1,177 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "button"; +@import "./popper"; + +@include b(dropdown) { + display: inline-block; + position: relative; + color: $--color-text-regular; + font-size: $--font-size-base; + + .el-button-group { + display: block; + .el-button { + float: none; + } + } + + & .el-dropdown__caret-button { + padding-left: 5px; + padding-right: 5px; + position: relative; + border-left: none; + + &::before { + $gap: 5px; + + content: ''; + position: absolute; + display: block; + width: 1px; + top: $gap; + bottom: $gap; + left: 0; + background: mix(white, transparent, 50%); + } + + &.el-button--default::before { + background: mix($--button-default-border-color, transparent, 50%); + } + + &:hover { + &::before { + top: 0; + bottom: 0; + } + } + + & .el-dropdown__icon { + padding-left: 0; + } + } + @include e(icon) { + font-size: 12px; + margin: 0 3px; + } + + .el-dropdown-selfdefine { // 自定义 + &:focus:active, &:focus:not(.focusing) { + outline-width: 0; + } + } +} + +@include b(dropdown-menu) { + position: absolute; + top: 0; + left: 0; + z-index: 10; + padding: 10px 0; + margin: 5px 0; + background-color: $--color-white; + border: 1px solid $--border-color-lighter; + border-radius: $--border-radius-base; + box-shadow: $--dropdown-menu-box-shadow; + + @include e(item) { + list-style: none; + line-height: 36px; + padding: 0 20px; + margin: 0; + font-size: $--font-size-base; + color: $--color-text-regular; + cursor: pointer; + outline: none; + &:not(.is-disabled):hover, &:focus { + background-color: $--dropdown-menuItem-hover-fill; + color: $--dropdown-menuItem-hover-color; + } + + i { + margin-right: 5px; + } + + @include m(divided) { + $divided-offset: 6px; + + position: relative; + margin-top: $divided-offset; + border-top: 1px solid $--border-color-lighter; + + &:before { + content: ''; + height: $divided-offset; + display: block; + margin: 0 -20px; + background-color: $--color-white; + } + } + + @include when(disabled) { + cursor: default; + color: $--font-color-disabled-base; + pointer-events: none; + } + } + + @include m(medium) { + padding: 6px 0; + + @include e(item) { + line-height: 30px; + padding: 0 17px; + font-size: 14px; + + &.el-dropdown-menu__item--divided { + $divided-offset: 6px; + margin-top: $divided-offset; + + &:before { + height: $divided-offset; + margin: 0 -17px; + } + } + } + } + + @include m(small) { + padding: 6px 0; + + @include e(item) { + line-height: 27px; + padding: 0 15px; + font-size: 13px; + + &.el-dropdown-menu__item--divided { + $divided-offset: 4px; + margin-top: $divided-offset; + + &:before { + height: $divided-offset; + margin: 0 -15px; + } + } + } + } + + @include m(mini) { + padding: 3px 0; + + @include e(item) { + line-height: 24px; + padding: 0 10px; + font-size: 12px; + + &.el-dropdown-menu__item--divided { + $divided-offset: 3px; + margin-top: $divided-offset; + + &:before { + height: $divided-offset; + margin: 0 -10px; + } + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/empty.scss b/nezha-fronted/src/assets/css/themes/src/empty.scss new file mode 100644 index 000000000..76a384f0e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/empty.scss @@ -0,0 +1,45 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(empty) { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + box-sizing: border-box; + padding: $--empty-padding; + + @include e(image) { + width: $--empty-image-width; + + img { + user-select: none; + width: 100%; + height: 100%; + vertical-align: top; + object-fit: contain; + } + + svg { + fill: $--svg-monochrome-grey; + width: 100%; + height: 100%; + vertical-align: top; + } + } + + @include e(description) { + margin-top: $--empty-description-margin-top; + + p { + margin: 0; + font-size: $--font-size-base; + color: $--color-text-secondary; + } + } + + @include e(bottom) { + margin-top: $--empty-bottom-margin-top; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/fonts/element-icons.ttf b/nezha-fronted/src/assets/css/themes/src/fonts/element-icons.ttf new file mode 100644 index 000000000..91b74de36 Binary files /dev/null and b/nezha-fronted/src/assets/css/themes/src/fonts/element-icons.ttf differ diff --git a/nezha-fronted/src/assets/css/themes/src/fonts/element-icons.woff b/nezha-fronted/src/assets/css/themes/src/fonts/element-icons.woff new file mode 100644 index 000000000..02b9a2539 Binary files /dev/null and b/nezha-fronted/src/assets/css/themes/src/fonts/element-icons.woff differ diff --git a/nezha-fronted/src/assets/css/themes/src/footer.scss b/nezha-fronted/src/assets/css/themes/src/footer.scss new file mode 100644 index 000000000..71a67b001 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/footer.scss @@ -0,0 +1,8 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(footer) { + padding: $--footer-padding; + box-sizing: border-box; + flex-shrink: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/form-item.scss b/nezha-fronted/src/assets/css/themes/src/form-item.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/form.scss b/nezha-fronted/src/assets/css/themes/src/form.scss new file mode 100644 index 000000000..2494ca0be --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/form.scss @@ -0,0 +1,167 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; + +@include b(form) { + @include m(label-left) { + & .el-form-item__label { + text-align: left; + } + } + @include m(label-top) { + & .el-form-item__label { + float: none; + display: inline-block; + text-align: left; + padding: 0 0 10px 0; + } + } + @include m(inline) { + & .el-form-item { + display: inline-block; + margin-right: 10px; + vertical-align: top; + } + & .el-form-item__label { + float: none; + display: inline-block; + } + & .el-form-item__content { + display: inline-block; + vertical-align: top; + } + &.el-form--label-top .el-form-item__content { + display: block; + } + } +} +@include b(form-item) { + margin-bottom: 22px; + @include utils-clearfix; + + & .el-form-item { + margin-bottom: 0; + } + + & .el-input__validateIcon { + display: none; + } + + @include m(medium) { + .el-form-item__label { + line-height: 36px; + } + .el-form-item__content { + line-height: 36px; + } + } + @include m(small) { + .el-form-item__label { + line-height: 32px; + } + .el-form-item__content { + line-height: 32px; + } + &.el-form-item { + margin-bottom: 18px; + } + .el-form-item__error { + padding-top: 2px; + } + } + @include m(mini) { + .el-form-item__label { + line-height: 28px; + } + .el-form-item__content { + line-height: 28px; + } + &.el-form-item { + margin-bottom: 18px; + } + .el-form-item__error { + padding-top: 1px; + } + } + + @include e(label-wrap) { + float: left; + .el-form-item__label { + display: inline-block; + float: none; + } + } + + @include e(label) { + text-align: right; + vertical-align: middle; + float: left; + font-size: $--form-label-font-size; + color: $--color-text-regular; + line-height: 40px; + padding: 0 12px 0 0; + box-sizing: border-box; + } + @include e(content) { + line-height: 40px; + position: relative; + font-size: 14px; + @include utils-clearfix; + + .el-input-group { + vertical-align: top; + } + } + @include e(error) { + color: $--color-danger; + font-size: 12px; + line-height: 1; + padding-top: 4px; + position: absolute; + top: 100%; + left: 0; + + @include m(inline) { + position: relative; + top: auto; + left: auto; + display: inline-block; + margin-left: 10px; + } + } + + @include when(required) { + @include pseudo('not(.is-no-asterisk)') { + & > .el-form-item__label:before, + & .el-form-item__label-wrap > .el-form-item__label:before { + content: '*'; + color: $--color-danger; + margin-right: 4px; + } + } + } + + @include when(error) { + & .el-input__inner, + & .el-textarea__inner { + &, &:focus { + border-color: $--color-danger; + } + } + & .el-input-group__append, + & .el-input-group__prepend { + & .el-input__inner { + border-color: transparent; + } + } + .el-input__validateIcon { + color: $--color-danger; + } + } + + @include m(feedback) { + .el-input__validateIcon { + display: inline-block; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/header.scss b/nezha-fronted/src/assets/css/themes/src/header.scss new file mode 100644 index 000000000..9e8a1d8ed --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/header.scss @@ -0,0 +1,8 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(header) { + padding: $--header-padding; + box-sizing: border-box; + flex-shrink: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/icon.scss b/nezha-fronted/src/assets/css/themes/src/icon.scss new file mode 100644 index 000000000..25a448772 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/icon.scss @@ -0,0 +1,1167 @@ +@import "common/var"; + +@font-face { + font-family: 'element-icons'; + src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */ + url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + font-weight: normal; + font-display: $--font-display; + font-style: normal; +} + +[class^="el-icon-"], [class*=" el-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'element-icons' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + vertical-align: baseline; + display: inline-block; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.el-icon-ice-cream-round:before { + content: "\e6a0"; +} + +.el-icon-ice-cream-square:before { + content: "\e6a3"; +} + +.el-icon-lollipop:before { + content: "\e6a4"; +} + +.el-icon-potato-strips:before { + content: "\e6a5"; +} + +.el-icon-milk-tea:before { + content: "\e6a6"; +} + +.el-icon-ice-drink:before { + content: "\e6a7"; +} + +.el-icon-ice-tea:before { + content: "\e6a9"; +} + +.el-icon-coffee:before { + content: "\e6aa"; +} + +.el-icon-orange:before { + content: "\e6ab"; +} + +.el-icon-pear:before { + content: "\e6ac"; +} + +.el-icon-apple:before { + content: "\e6ad"; +} + +.el-icon-cherry:before { + content: "\e6ae"; +} + +.el-icon-watermelon:before { + content: "\e6af"; +} + +.el-icon-grape:before { + content: "\e6b0"; +} + +.el-icon-refrigerator:before { + content: "\e6b1"; +} + +.el-icon-goblet-square-full:before { + content: "\e6b2"; +} + +.el-icon-goblet-square:before { + content: "\e6b3"; +} + +.el-icon-goblet-full:before { + content: "\e6b4"; +} + +.el-icon-goblet:before { + content: "\e6b5"; +} + +.el-icon-cold-drink:before { + content: "\e6b6"; +} + +.el-icon-coffee-cup:before { + content: "\e6b8"; +} + +.el-icon-water-cup:before { + content: "\e6b9"; +} + +.el-icon-hot-water:before { + content: "\e6ba"; +} + +.el-icon-ice-cream:before { + content: "\e6bb"; +} + +.el-icon-dessert:before { + content: "\e6bc"; +} + +.el-icon-sugar:before { + content: "\e6bd"; +} + +.el-icon-tableware:before { + content: "\e6be"; +} + +.el-icon-burger:before { + content: "\e6bf"; +} + +.el-icon-knife-fork:before { + content: "\e6c1"; +} + +.el-icon-fork-spoon:before { + content: "\e6c2"; +} + +.el-icon-chicken:before { + content: "\e6c3"; +} + +.el-icon-food:before { + content: "\e6c4"; +} + +.el-icon-dish-1:before { + content: "\e6c5"; +} + +.el-icon-dish:before { + content: "\e6c6"; +} + +.el-icon-moon-night:before { + content: "\e6ee"; +} + +.el-icon-moon:before { + content: "\e6f0"; +} + +.el-icon-cloudy-and-sunny:before { + content: "\e6f1"; +} + +.el-icon-partly-cloudy:before { + content: "\e6f2"; +} + +.el-icon-cloudy:before { + content: "\e6f3"; +} + +.el-icon-sunny:before { + content: "\e6f6"; +} + +.el-icon-sunset:before { + content: "\e6f7"; +} + +.el-icon-sunrise-1:before { + content: "\e6f8"; +} + +.el-icon-sunrise:before { + content: "\e6f9"; +} + +.el-icon-heavy-rain:before { + content: "\e6fa"; +} + +.el-icon-lightning:before { + content: "\e6fb"; +} + +.el-icon-light-rain:before { + content: "\e6fc"; +} + +.el-icon-wind-power:before { + content: "\e6fd"; +} + +.el-icon-baseball:before { + content: "\e712"; +} + +.el-icon-soccer:before { + content: "\e713"; +} + +.el-icon-football:before { + content: "\e715"; +} + +.el-icon-basketball:before { + content: "\e716"; +} + +.el-icon-ship:before { + content: "\e73f"; +} + +.el-icon-truck:before { + content: "\e740"; +} + +.el-icon-bicycle:before { + content: "\e741"; +} + +.el-icon-mobile-phone:before { + content: "\e6d3"; +} + +.el-icon-service:before { + content: "\e6d4"; +} + +.el-icon-key:before { + content: "\e6e2"; +} + +.el-icon-unlock:before { + content: "\e6e4"; +} + +.el-icon-lock:before { + content: "\e6e5"; +} + +.el-icon-watch:before { + content: "\e6fe"; +} + +.el-icon-watch-1:before { + content: "\e6ff"; +} + +.el-icon-timer:before { + content: "\e702"; +} + +.el-icon-alarm-clock:before { + content: "\e703"; +} + +.el-icon-map-location:before { + content: "\e704"; +} + +.el-icon-delete-location:before { + content: "\e705"; +} + +.el-icon-add-location:before { + content: "\e706"; +} + +.el-icon-location-information:before { + content: "\e707"; +} + +.el-icon-location-outline:before { + content: "\e708"; +} + +.el-icon-location:before { + content: "\e79e"; +} + +.el-icon-place:before { + content: "\e709"; +} + +.el-icon-discover:before { + content: "\e70a"; +} + +.el-icon-first-aid-kit:before { + content: "\e70b"; +} + +.el-icon-trophy-1:before { + content: "\e70c"; +} + +.el-icon-trophy:before { + content: "\e70d"; +} + +.el-icon-medal:before { + content: "\e70e"; +} + +.el-icon-medal-1:before { + content: "\e70f"; +} + +.el-icon-stopwatch:before { + content: "\e710"; +} + +.el-icon-mic:before { + content: "\e711"; +} + +.el-icon-copy-document:before { + content: "\e718"; +} + +.el-icon-full-screen:before { + content: "\e719"; +} + +.el-icon-switch-button:before { + content: "\e71b"; +} + +.el-icon-aim:before { + content: "\e71c"; +} + +.el-icon-crop:before { + content: "\e71d"; +} + +.el-icon-odometer:before { + content: "\e71e"; +} + +.el-icon-time:before { + content: "\e71f"; +} + +.el-icon-bangzhu:before { + content: "\e724"; +} + +.el-icon-close-notification:before { + content: "\e726"; +} + +.el-icon-microphone:before { + content: "\e727"; +} + +.el-icon-turn-off-microphone:before { + content: "\e728"; +} + +.el-icon-position:before { + content: "\e729"; +} + +.el-icon-postcard:before { + content: "\e72a"; +} + +.el-icon-message:before { + content: "\e72b"; +} + +.el-icon-chat-line-square:before { + content: "\e72d"; +} + +.el-icon-chat-dot-square:before { + content: "\e72e"; +} + +.el-icon-chat-dot-round:before { + content: "\e72f"; +} + +.el-icon-chat-square:before { + content: "\e730"; +} + +.el-icon-chat-line-round:before { + content: "\e731"; +} + +.el-icon-chat-round:before { + content: "\e732"; +} + +.el-icon-set-up:before { + content: "\e733"; +} + +.el-icon-turn-off:before { + content: "\e734"; +} + +.el-icon-open:before { + content: "\e735"; +} + +.el-icon-connection:before { + content: "\e736"; +} + +.el-icon-link:before { + content: "\e737"; +} + +.el-icon-cpu:before { + content: "\e738"; +} + +.el-icon-thumb:before { + content: "\e739"; +} + +.el-icon-female:before { + content: "\e73a"; +} + +.el-icon-male:before { + content: "\e73b"; +} + +.el-icon-guide:before { + content: "\e73c"; +} + +.el-icon-news:before { + content: "\e73e"; +} + +.el-icon-price-tag:before { + content: "\e744"; +} + +.el-icon-discount:before { + content: "\e745"; +} + +.el-icon-wallet:before { + content: "\e747"; +} + +.el-icon-coin:before { + content: "\e748"; +} + +.el-icon-money:before { + content: "\e749"; +} + +.el-icon-bank-card:before { + content: "\e74a"; +} + +.el-icon-box:before { + content: "\e74b"; +} + +.el-icon-present:before { + content: "\e74c"; +} + +.el-icon-sell:before { + content: "\e6d5"; +} + +.el-icon-sold-out:before { + content: "\e6d6"; +} + +.el-icon-shopping-bag-2:before { + content: "\e74d"; +} + +.el-icon-shopping-bag-1:before { + content: "\e74e"; +} + +.el-icon-shopping-cart-2:before { + content: "\e74f"; +} + +.el-icon-shopping-cart-1:before { + content: "\e750"; +} + +.el-icon-shopping-cart-full:before { + content: "\e751"; +} + +.el-icon-smoking:before { + content: "\e752"; +} + +.el-icon-no-smoking:before { + content: "\e753"; +} + +.el-icon-house:before { + content: "\e754"; +} + +.el-icon-table-lamp:before { + content: "\e755"; +} + +.el-icon-school:before { + content: "\e756"; +} + +.el-icon-office-building:before { + content: "\e757"; +} + +.el-icon-toilet-paper:before { + content: "\e758"; +} + +.el-icon-notebook-2:before { + content: "\e759"; +} + +.el-icon-notebook-1:before { + content: "\e75a"; +} + +.el-icon-files:before { + content: "\e75b"; +} + +.el-icon-collection:before { + content: "\e75c"; +} + +.el-icon-receiving:before { + content: "\e75d"; +} + +.el-icon-suitcase-1:before { + content: "\e760"; +} + +.el-icon-suitcase:before { + content: "\e761"; +} + +.el-icon-film:before { + content: "\e763"; +} + +.el-icon-collection-tag:before { + content: "\e765"; +} + +.el-icon-data-analysis:before { + content: "\e766"; +} + +.el-icon-pie-chart:before { + content: "\e767"; +} + +.el-icon-data-board:before { + content: "\e768"; +} + +.el-icon-data-line:before { + content: "\e76d"; +} + +.el-icon-reading:before { + content: "\e769"; +} + +.el-icon-magic-stick:before { + content: "\e76a"; +} + +.el-icon-coordinate:before { + content: "\e76b"; +} + +.el-icon-mouse:before { + content: "\e76c"; +} + +.el-icon-brush:before { + content: "\e76e"; +} + +.el-icon-headset:before { + content: "\e76f"; +} + +.el-icon-umbrella:before { + content: "\e770"; +} + +.el-icon-scissors:before { + content: "\e771"; +} + +.el-icon-mobile:before { + content: "\e773"; +} + +.el-icon-attract:before { + content: "\e774"; +} + +.el-icon-monitor:before { + content: "\e775"; +} + +.el-icon-search:before { + content: "\e778"; +} + +.el-icon-takeaway-box:before { + content: "\e77a"; +} + +.el-icon-paperclip:before { + content: "\e77d"; +} + +.el-icon-printer:before { + content: "\e77e"; +} + +.el-icon-document-add:before { + content: "\e782"; +} + +.el-icon-document:before { + content: "\e785"; +} + +.el-icon-document-checked:before { + content: "\e786"; +} + +.el-icon-document-copy:before { + content: "\e787"; +} + +.el-icon-document-delete:before { + content: "\e788"; +} + +.el-icon-document-remove:before { + content: "\e789"; +} + +.el-icon-tickets:before { + content: "\e78b"; +} + +.el-icon-folder-checked:before { + content: "\e77f"; +} + +.el-icon-folder-delete:before { + content: "\e780"; +} + +.el-icon-folder-remove:before { + content: "\e781"; +} + +.el-icon-folder-add:before { + content: "\e783"; +} + +.el-icon-folder-opened:before { + content: "\e784"; +} + +.el-icon-folder:before { + content: "\e78a"; +} + +.el-icon-edit-outline:before { + content: "\e764"; +} + +.el-icon-edit:before { + content: "\e78c"; +} + +.el-icon-date:before { + content: "\e78e"; +} + +.el-icon-c-scale-to-original:before { + content: "\e7c6"; +} + +.el-icon-view:before { + content: "\e6ce"; +} + +.el-icon-loading:before { + content: "\e6cf"; +} + +.el-icon-rank:before { + content: "\e6d1"; +} + +.el-icon-sort-down:before { + content: "\e7c4"; +} + +.el-icon-sort-up:before { + content: "\e7c5"; +} + +.el-icon-sort:before { + content: "\e6d2"; +} + +.el-icon-finished:before { + content: "\e6cd"; +} + +.el-icon-refresh-left:before { + content: "\e6c7"; +} + +.el-icon-refresh-right:before { + content: "\e6c8"; +} + +.el-icon-refresh:before { + content: "\e6d0"; +} + +.el-icon-video-play:before { + content: "\e7c0"; +} + +.el-icon-video-pause:before { + content: "\e7c1"; +} + +.el-icon-d-arrow-right:before { + content: "\e6dc"; +} + +.el-icon-d-arrow-left:before { + content: "\e6dd"; +} + +.el-icon-arrow-up:before { + content: "\e6e1"; +} + +.el-icon-arrow-down:before { + content: "\e6df"; +} + +.el-icon-arrow-right:before { + content: "\e6e0"; +} + +.el-icon-arrow-left:before { + content: "\e6de"; +} + +.el-icon-top-right:before { + content: "\e6e7"; +} + +.el-icon-top-left:before { + content: "\e6e8"; +} + +.el-icon-top:before { + content: "\e6e6"; +} + +.el-icon-bottom:before { + content: "\e6eb"; +} + +.el-icon-right:before { + content: "\e6e9"; +} + +.el-icon-back:before { + content: "\e6ea"; +} + +.el-icon-bottom-right:before { + content: "\e6ec"; +} + +.el-icon-bottom-left:before { + content: "\e6ed"; +} + +.el-icon-caret-top:before { + content: "\e78f"; +} + +.el-icon-caret-bottom:before { + content: "\e790"; +} + +.el-icon-caret-right:before { + content: "\e791"; +} + +.el-icon-caret-left:before { + content: "\e792"; +} + +.el-icon-d-caret:before { + content: "\e79a"; +} + +.el-icon-share:before { + content: "\e793"; +} + +.el-icon-menu:before { + content: "\e798"; +} + +.el-icon-s-grid:before { + content: "\e7a6"; +} + +.el-icon-s-check:before { + content: "\e7a7"; +} + +.el-icon-s-data:before { + content: "\e7a8"; +} + +.el-icon-s-opportunity:before { + content: "\e7aa"; +} + +.el-icon-s-custom:before { + content: "\e7ab"; +} + +.el-icon-s-claim:before { + content: "\e7ad"; +} + +.el-icon-s-finance:before { + content: "\e7ae"; +} + +.el-icon-s-comment:before { + content: "\e7af"; +} + +.el-icon-s-flag:before { + content: "\e7b0"; +} + +.el-icon-s-marketing:before { + content: "\e7b1"; +} + +.el-icon-s-shop:before { + content: "\e7b4"; +} + +.el-icon-s-open:before { + content: "\e7b5"; +} + +.el-icon-s-management:before { + content: "\e7b6"; +} + +.el-icon-s-ticket:before { + content: "\e7b7"; +} + +.el-icon-s-release:before { + content: "\e7b8"; +} + +.el-icon-s-home:before { + content: "\e7b9"; +} + +.el-icon-s-promotion:before { + content: "\e7ba"; +} + +.el-icon-s-operation:before { + content: "\e7bb"; +} + +.el-icon-s-unfold:before { + content: "\e7bc"; +} + +.el-icon-s-fold:before { + content: "\e7a9"; +} + +.el-icon-s-platform:before { + content: "\e7bd"; +} + +.el-icon-s-order:before { + content: "\e7be"; +} + +.el-icon-s-cooperation:before { + content: "\e7bf"; +} + +.el-icon-bell:before { + content: "\e725"; +} + +.el-icon-message-solid:before { + content: "\e799"; +} + +.el-icon-video-camera:before { + content: "\e772"; +} + +.el-icon-video-camera-solid:before { + content: "\e796"; +} + +.el-icon-camera:before { + content: "\e779"; +} + +.el-icon-camera-solid:before { + content: "\e79b"; +} + +.el-icon-download:before { + content: "\e77c"; +} + +.el-icon-upload2:before { + content: "\e77b"; +} + +.el-icon-upload:before { + content: "\e7c3"; +} + +.el-icon-picture-outline-round:before { + content: "\e75f"; +} + +.el-icon-picture-outline:before { + content: "\e75e"; +} + +.el-icon-picture:before { + content: "\e79f"; +} + +.el-icon-close:before { + content: "\e6db"; +} + +.el-icon-check:before { + content: "\e6da"; +} + +.el-icon-plus:before { + content: "\e6d9"; +} + +.el-icon-minus:before { + content: "\e6d8"; +} + +.el-icon-help:before { + content: "\e73d"; +} + +.el-icon-s-help:before { + content: "\e7b3"; +} + +.el-icon-circle-close:before { + content: "\e78d"; +} + +.el-icon-circle-check:before { + content: "\e720"; +} + +.el-icon-circle-plus-outline:before { + content: "\e723"; +} + +.el-icon-remove-outline:before { + content: "\e722"; +} + +.el-icon-zoom-out:before { + content: "\e776"; +} + +.el-icon-zoom-in:before { + content: "\e777"; +} + +.el-icon-error:before { + content: "\e79d"; +} + +.el-icon-success:before { + content: "\e79c"; +} + +.el-icon-circle-plus:before { + content: "\e7a0"; +} + +.el-icon-remove:before { + content: "\e7a2"; +} + +.el-icon-info:before { + content: "\e7a1"; +} + +.el-icon-question:before { + content: "\e7a4"; +} + +.el-icon-warning-outline:before { + content: "\e6c9"; +} + +.el-icon-warning:before { + content: "\e7a3"; +} + +.el-icon-goods:before { + content: "\e7c2"; +} + +.el-icon-s-goods:before { + content: "\e7b2"; +} + +.el-icon-star-off:before { + content: "\e717"; +} + +.el-icon-star-on:before { + content: "\e797"; +} + +.el-icon-more-outline:before { + content: "\e6cc"; +} + +.el-icon-more:before { + content: "\e794"; +} + +.el-icon-phone-outline:before { + content: "\e6cb"; +} + +.el-icon-phone:before { + content: "\e795"; +} + +.el-icon-user:before { + content: "\e6e3"; +} + +.el-icon-user-solid:before { + content: "\e7a5"; +} + +.el-icon-setting:before { + content: "\e6ca"; +} + +.el-icon-s-tools:before { + content: "\e7ac"; +} + +.el-icon-delete:before { + content: "\e6d7"; +} + +.el-icon-delete-solid:before { + content: "\e7c9"; +} + +.el-icon-eleme:before { + content: "\e7c7"; +} + +.el-icon-platform-eleme:before { + content: "\e7ca"; +} + +.el-icon-loading { + animation: rotating 2s linear infinite; +} + +.el-icon--right { + margin-left: 5px; +} +.el-icon--left { + margin-right: 5px; +} + +@keyframes rotating { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/image.scss b/nezha-fronted/src/assets/css/themes/src/image.scss new file mode 100644 index 000000000..39358e6b2 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/image.scss @@ -0,0 +1,179 @@ +@import "mixins/mixins"; +@import "common/var"; + +%size { + width: 100%; + height: 100%; +} + +@include b(image) { + position: relative; + display: inline-block; + overflow: hidden; + + @include e(inner) { + @extend %size; + vertical-align: top; + + @include m(center) { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: block; + } + } + + @include e(placeholder) { + @extend %size; + background: $--background-color-base; + } + + @include e(error) { + @extend %size; + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + background: $--background-color-base; + color: $--color-text-placeholder; + vertical-align: middle; + } + + @include e(preview) { + cursor: pointer; + } +} + + +@include b(image-viewer) { + + + @include e(wrapper) { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + @include e(btn) { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + opacity: .8; + cursor: pointer; + box-sizing: border-box; + user-select: none; + } + + @include e(close) { + top: 40px; + right: 40px; + width: 40px; + height: 40px; + font-size: 24px; + color: #fff; + background-color: #606266; + } + + @include e(canvas) { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + @include e(actions) { + left: 50%; + bottom: 30px; + transform: translateX(-50%); + width: 282px; + height: 44px; + padding: 0 23px; + background-color: #606266; + border-color: #fff; + border-radius: 22px; + + @include e(actions__inner) { + width: 100%; + height: 100%; + text-align: justify; + cursor: default; + font-size: 23px; + color: #fff; + display: flex; + align-items: center; + justify-content: space-around; + } + } + + @include e(prev){ + top: 50%; + transform: translateY(-50%); + width: 44px; + height: 44px; + font-size: 24px; + color: #fff; + background-color: #606266; + border-color: #fff; + left: 40px; + } + + @include e(next){ + top: 50%; + transform: translateY(-50%); + width: 44px; + height: 44px; + font-size: 24px; + color: #fff; + background-color: #606266; + border-color: #fff; + right: 40px; + text-indent: 2px; + } + + @include e(mask) { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + opacity: .5; + background: #000; + } +} + +.viewer-fade-enter-active { + animation: viewer-fade-in .3s; +} + +.viewer-fade-leave-active { + animation: viewer-fade-out .3s; +} + +@keyframes viewer-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes viewer-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/index.scss b/nezha-fronted/src/assets/css/themes/src/index.scss new file mode 100644 index 000000000..0d81c5311 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/index.scss @@ -0,0 +1,86 @@ +@import "./base.scss"; +@import "./pagination.scss"; +@import "./dialog.scss"; +@import "./autocomplete.scss"; +@import "./dropdown.scss"; +@import "./dropdown-menu.scss"; +@import "./dropdown-item.scss"; +@import "./menu.scss"; +@import "./submenu.scss"; +@import "./menu-item.scss"; +@import "./menu-item-group.scss"; +@import "./input.scss"; +@import "./input-number.scss"; +@import "./radio.scss"; +@import "./radio-group.scss"; +@import "./radio-button.scss"; +@import "./checkbox.scss"; +@import "./checkbox-button.scss"; +@import "./checkbox-group.scss"; +@import "./switch.scss"; +@import "./select.scss"; +@import "./button.scss"; +@import "./button-group.scss"; +@import "./table.scss"; +@import "./table-column.scss"; +@import "./date-picker.scss"; +@import "./time-select.scss"; +@import "./time-picker.scss"; +@import "./popover.scss"; +@import "./tooltip.scss"; +@import "./message-box.scss"; +@import "./breadcrumb.scss"; +@import "./breadcrumb-item.scss"; +@import "./form.scss"; +@import "./form-item.scss"; +@import "./tabs.scss"; +@import "./tab-pane.scss"; +@import "./tag.scss"; +@import "./tree.scss"; +@import "./alert.scss"; +@import "./notification.scss"; +@import "./slider.scss"; +@import "./loading.scss"; +@import "./row.scss"; +@import "./col.scss"; +@import "./upload.scss"; +@import "./progress.scss"; +@import "./spinner.scss"; +@import "./message.scss"; +@import "./badge.scss"; +@import "./card.scss"; +@import "./rate.scss"; +@import "./steps.scss"; +@import "./step.scss"; +@import "./carousel.scss"; +@import "./scrollbar.scss"; +@import "./carousel-item.scss"; +@import "./collapse.scss"; +@import "./collapse-item.scss"; +@import "./cascader.scss"; +@import "./color-picker.scss"; +@import "./transfer.scss"; +@import "./container.scss"; +@import "./header.scss"; +@import "./aside.scss"; +@import "./main.scss"; +@import "./footer.scss"; +@import "./timeline.scss"; +@import "./timeline-item.scss"; +@import "./link.scss"; +@import "./divider.scss"; +@import "./image.scss"; +@import "./calendar.scss"; +@import "./backtop.scss"; +@import "./infinite-scroll.scss"; +@import "./page-header.scss"; +@import "./cascader-panel.scss"; +@import "./avatar.scss"; +@import "./drawer.scss"; +@import "./popconfirm.scss"; +@import "./skeleton.scss"; +@import "./skeleton-item.scss"; +@import "./empty.scss"; +@import "./descriptions.scss"; +@import "./descriptions-item.scss"; +@import "./result.scss"; diff --git a/nezha-fronted/src/assets/css/themes/src/infinite-scroll.scss b/nezha-fronted/src/assets/css/themes/src/infinite-scroll.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/infiniteScroll.scss b/nezha-fronted/src/assets/css/themes/src/infiniteScroll.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/input-number.scss b/nezha-fronted/src/assets/css/themes/src/input-number.scss new file mode 100644 index 000000000..4e5109cb8 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/input-number.scss @@ -0,0 +1,180 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "input"; + +@include b(input-number) { + position: relative; + display: inline-block; + width: 180px; + line-height: #{$--input-height - 2}; + + .el-input { + display: block; + + &__inner { + -webkit-appearance: none; + padding-left: #{$--input-height + 10}; + padding-right: #{$--input-height + 10}; + text-align: center; + } + } + + @include e((increase, decrease)) { + position: absolute; + z-index: 1; + top: 1px; + width: $--input-height; + height: auto; + text-align: center; + background: $--background-color-base; + color: $--color-text-regular; + cursor: pointer; + font-size: 13px; + + &:hover { + color: $--color-primary; + + &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { + border-color: $--input-focus-border; + } + } + + &.is-disabled { + color: $--disabled-color-base; + cursor: not-allowed; + } + } + + @include e(increase) { + right: 1px; + border-radius: 0 $--border-radius-base $--border-radius-base 0; + border-left: $--border-base; + } + + @include e(decrease) { + left: 1px; + border-radius: $--border-radius-base 0 0 $--border-radius-base; + border-right: $--border-base; + } + + @include when(disabled) { + @include e((increase, decrease)) { + border-color: $--disabled-border-base; + color: $--disabled-border-base; + + &:hover { + color: $--disabled-border-base; + cursor: not-allowed; + } + } + } + + @include m(medium) { + width: 200px; + line-height: #{$--input-medium-height - 2}; + + @include e((increase, decrease)) { + width: $--input-medium-height; + font-size: $--input-medium-font-size; + } + + .el-input__inner { + padding-left: #{$--input-medium-height + 7}; + padding-right: #{$--input-medium-height + 7}; + } + } + + @include m(small) { + width: 130px; + line-height: #{$--input-small-height - 2}; + + @include e((increase, decrease)) { + width: $--input-small-height; + font-size: $--input-small-font-size; + + [class*=el-icon] { + transform: scale(.9); + } + } + + .el-input__inner { + padding-left: #{$--input-small-height + 7}; + padding-right: #{$--input-small-height + 7}; + } + } + + @include m(mini) { + width: 130px; + line-height: #{$--input-mini-height - 2}; + + @include e((increase, decrease)) { + width: $--input-mini-height; + font-size: $--input-mini-font-size; + + [class*=el-icon] { + transform: scale(.8); + } + } + + .el-input__inner { + padding-left: #{$--input-mini-height + 7}; + padding-right: #{$--input-mini-height + 7}; + } + } + + @include when(without-controls) { + .el-input__inner { + padding-left: 15px; + padding-right: 15px; + } + } + + @include when(controls-right) { + .el-input__inner { + padding-left: 15px; + padding-right: #{$--input-height + 10}; + } + + @include e((increase, decrease)) { + height: auto; + line-height: #{($--input-height - 2) / 2}; + + [class*=el-icon] { + transform: scale(.8); + } + } + + @include e(increase) { + border-radius: 0 $--border-radius-base 0 0; + border-bottom: $--border-base; + } + + @include e(decrease) { + right: 1px; + bottom: 1px; + top: auto; + left: auto; + border-right: none; + border-left: $--border-base; + border-radius: 0 0 $--border-radius-base 0; + } + + &[class*=medium] { + [class*=increase], [class*=decrease] { + line-height: #{($--input-medium-height - 2) / 2}; + } + } + + &[class*=small] { + [class*=increase], [class*=decrease] { + line-height: #{($--input-small-height - 2) / 2}; + } + } + + &[class*=mini] { + [class*=increase], [class*=decrease] { + line-height: #{($--input-mini-height - 2) / 2}; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/input.scss b/nezha-fronted/src/assets/css/themes/src/input.scss new file mode 100644 index 000000000..99641eb92 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/input.scss @@ -0,0 +1,360 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(textarea) { + position: relative; + display: inline-block; + width: 100%; + vertical-align: bottom; + font-size: $--font-size-base; + + @include e(inner) { + display: block; + resize: vertical; + padding: 5px 15px; + line-height: 1.5; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: $--input-font-color; + background-color: $--input-background-color; + background-image: none; + border: $--input-border; + border-radius: $--input-border-radius; + transition: $--border-transition-base; + + &::placeholder { + color: $--input-placeholder-color; + } + + &:hover { + border-color: $--input-hover-border; + } + + &:focus { + outline: none; + border-color: $--input-focus-border; + } + } + + & .el-input__count { + color: $--color-info; + background: $--color-white; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px; + } + + @include when(disabled) { + .el-textarea__inner { + background-color: $--input-disabled-fill; + border-color: $--input-disabled-border; + color: $--input-disabled-color; + cursor: not-allowed; + + &::placeholder { + color: $--input-disabled-placeholder-color; + } + } + } + + @include when(exceed) { + .el-textarea__inner { + border-color: $--color-danger; + } + + .el-input__count { + color: $--color-danger; + } + } +} + +@include b(input) { + position: relative; + font-size: $--font-size-base; + display: inline-block; + width: 100%; + @include scroll-bar; + + & .el-input__clear { + color: $--input-icon-color; + font-size: $--input-font-size; + cursor: pointer; + transition: $--color-transition-base; + + &:hover { + color: $--input-clear-hover-color; + } + } + + & .el-input__count { + height: 100%; + display: inline-flex; + align-items: center; + color: $--color-info; + font-size: 12px; + + .el-input__count-inner { + background: $--color-white; + line-height: initial; + display: inline-block; + padding: 0 5px; + } + } + + @include e(inner) { + -webkit-appearance: none; + background-color: $--input-background-color; + background-image: none; + border-radius: $--input-border-radius; + border: $--input-border; + box-sizing: border-box; + color: $--input-font-color; + display: inline-block; + font-size: inherit; + height: $--input-height; + line-height: $--input-height; + outline: none; + padding: 0 15px; + transition: $--border-transition-base; + width: 100%; + + &::-ms-reveal { + display: none; + } + + &::placeholder { + color: $--input-placeholder-color; + } + + &:hover { + border-color: $--input-hover-border; + } + + &:focus { + outline: none; + border-color: $--input-focus-border; + } + } + + @include e(suffix) { + position: absolute; + height: 100%; + right: 5px; + top: 0; + text-align: center; + color: $--input-icon-color; + transition: all .3s; + pointer-events: none; + } + + @include e(suffix-inner) { + pointer-events: all; + } + + @include e(prefix) { + position: absolute; + height: 100%; + left: 5px; + top: 0; + text-align: center; + color: $--input-icon-color; + transition: all .3s; + } + + @include e(icon) { + height: 100%; + width: 25px; + text-align: center; + transition: all .3s; + line-height: $--input-height; + + &:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; + } + } + + @include e(validateIcon) { + pointer-events: none; + } + + @include when(active) { + .el-input__inner { + outline: none; + border-color: $--input-focus-border; + } + } + + @include when(disabled) { + .el-input__inner { + background-color: $--input-disabled-fill; + border-color: $--input-disabled-border; + color: $--input-disabled-color; + cursor: not-allowed; + + &::placeholder { + color: $--input-disabled-placeholder-color; + } + } + + .el-input__icon { + cursor: not-allowed; + } + } + + @include when(exceed) { + .el-input__inner { + border-color: $--color-danger; + } + + .el-input__suffix { + .el-input__count { + color: $--color-danger; + } + } + } + + @include m(suffix) { + .el-input__inner { + padding-right: 30px; + } + } + + @include m(prefix) { + .el-input__inner { + padding-left: 30px; + } + } + + @include m(medium) { + font-size: $--input-medium-font-size; + + @include e(inner) { + height: $--input-medium-height; + line-height: $--input-medium-height; + } + + .el-input__icon { + line-height: $--input-medium-height; + } + } + @include m(small) { + font-size: $--input-small-font-size; + + @include e(inner) { + height: $--input-small-height; + line-height: $--input-small-height; + } + + .el-input__icon { + line-height: $--input-small-height; + } + } + @include m(mini) { + font-size: $--input-mini-font-size; + + @include e(inner) { + height: $--input-mini-height; + line-height: $--input-mini-height; + } + + .el-input__icon { + line-height: $--input-mini-height; + } + } +} + +@include b(input-group) { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing:0; + + > .el-input__inner { + vertical-align: middle; + display: table-cell; + } + + @include e((append, prepend)) { + background-color: $--background-color-base; + color: $--color-info; + vertical-align: middle; + display: table-cell; + position: relative; + border: $--border-base; + border-radius: $--input-border-radius; + padding: 0 20px; + width: 1px; + white-space: nowrap; + + &:focus { + outline: none; + } + + .el-select, + .el-button { + display: inline-block; + margin: -10px -20px; + } + + button.el-button, + div.el-select .el-input__inner, + div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; + } + + .el-button, + .el-input { + font-size: inherit; + } + } + + @include e(prepend) { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + @include e(append) { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + @include m(prepend) { + .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; + } + } + + @include m(append) { + .el-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; + } + } +} + +/** disalbe default clear on IE */ +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/link.scss b/nezha-fronted/src/assets/css/themes/src/link.scss new file mode 100644 index 000000000..704379f0b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/link.scss @@ -0,0 +1,81 @@ +@import "mixins/mixins"; +@import "common/var"; + +$typeMap: ( + primary: $--link-primary-font-color, + danger: $--link-danger-font-color, + success: $--link-success-font-color, + warning: $--link-warning-font-color, + info: $--link-info-font-color); + +@include b(link) { + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + vertical-align: middle; + position: relative; + text-decoration: none; + outline: none; + cursor: pointer; + padding: 0; + font-size: $--link-font-size; + font-weight: $--link-font-weight; + + @include when(underline) { + &:hover:after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + border-bottom: 1px solid $--link-default-active-color + } + } + + @include when(disabled) { + cursor: not-allowed; + } + + & [class*="el-icon-"] { + & + span { + margin-left: 5px; + } + } + + + &.el-link--default { + color: $--link-default-font-color; + &:hover { + color: $--link-default-active-color + } + &:after { + border-color: $--link-default-active-color + } + @include when(disabled) { + color: $--link-disabled-font-color + } + } + + @each $type, $primaryColor in $typeMap { + &.el-link--#{$type} { + color: $primaryColor; + &:hover { + color: mix($primaryColor, $--color-white, 80%) + } + &:after { + border-color: $primaryColor + } + @include when(disabled) { + color: mix($primaryColor, $--color-white, 50%) + } + @include when(underline) { + &:hover:after { + border-color: $primaryColor + } + } + } + } + +} diff --git a/nezha-fronted/src/assets/css/themes/src/loading.scss b/nezha-fronted/src/assets/css/themes/src/loading.scss new file mode 100644 index 000000000..d63e5125b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/loading.scss @@ -0,0 +1,96 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(loading-parent) { + @include m(relative) { + position: relative !important; + } + + @include m(hidden) { + overflow: hidden !important; + } +} + +@include b(loading-mask) { + position: absolute; + z-index: 2000; + background-color: rgba(255, 255, 255, .9); + margin: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + transition: opacity 0.3s; + + @include when(fullscreen) { + position: fixed; + + .el-loading-spinner { + margin-top: #{- $--loading-fullscreen-spinner-size / 2}; + + .circular { + height: $--loading-fullscreen-spinner-size; + width: $--loading-fullscreen-spinner-size; + } + } + } +} + +@include b(loading-spinner) { + top: 50%; + margin-top: #{- $--loading-spinner-size / 2}; + width: 100%; + text-align: center; + position: absolute; + + .el-loading-text { + color: $--color-primary; + margin: 3px 0; + font-size: 14px; + } + + .circular { + height: $--loading-spinner-size; + width: $--loading-spinner-size; + animation: loading-rotate 2s linear infinite; + } + + .path { + animation: loading-dash 1.5s ease-in-out infinite; + stroke-dasharray: 90, 150; + stroke-dashoffset: 0; + stroke-width: 2; + stroke: $--color-primary; + stroke-linecap: round; + } + + i { + color: $--color-primary; + } +} + +.el-loading-fade-enter, +.el-loading-fade-leave-active { + opacity: 0; +} + +@keyframes loading-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes loading-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -40px; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -120px; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/main.scss b/nezha-fronted/src/assets/css/themes/src/main.scss new file mode 100644 index 000000000..3765af5ad --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/main.scss @@ -0,0 +1,12 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(main) { + // IE11 supports the
element partially https://caniuse.com/#search=main + display: block; + flex: 1; + flex-basis: auto; + overflow: auto; + box-sizing: border-box; + padding: $--main-padding; +} diff --git a/nezha-fronted/src/assets/css/themes/src/menu-item-group.scss b/nezha-fronted/src/assets/css/themes/src/menu-item-group.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/menu-item.scss b/nezha-fronted/src/assets/css/themes/src/menu-item.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/menu.scss b/nezha-fronted/src/assets/css/themes/src/menu.scss new file mode 100644 index 000000000..5b8c38e5b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/menu.scss @@ -0,0 +1,289 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; +@import "common/transition"; + +@mixin menu-item { + height: 56px; + line-height: 56px; + font-size: $--menu-item-font-size; + color: $--menu-item-font-color; + padding: 0 20px; + list-style: none; + cursor: pointer; + position: relative; + transition: border-color .3s, background-color .3s, color .3s; + box-sizing: border-box; + white-space: nowrap; + + * { + vertical-align: middle; + } + + i { + color: $--color-text-secondary; + } + + &:hover, + &:focus { + outline: none; + background-color: $--menu-item-hover-fill; + } + + @include when(disabled) { + opacity: 0.25; + cursor: not-allowed; + background: none !important; + } +} + +@include b(menu) { + border-right: solid 1px #e6e6e6; + list-style: none; + position: relative; + margin: 0; + padding-left: 0; + background-color: $--menu-background-color; + @include utils-clearfix; + &.el-menu--horizontal { + border-bottom: solid 1px #e6e6e6; + } + + @include m(horizontal) { + border-right: none; + & > .el-menu-item { + float: left; + height: 60px; + line-height: 60px; + margin: 0; + border-bottom: 2px solid transparent; + color: $--color-text-secondary; + + a, + a:hover { + color: inherit; + } + + &:not(.is-disabled):hover, + &:not(.is-disabled):focus{ + background-color: #fff; + } + } + & > .el-submenu { + float: left; + + &:focus, + &:hover { + outline: none; + .el-submenu__title { + color: $--color-text-primary; + } + } + + &.is-active { + .el-submenu__title { + border-bottom: 2px solid $--color-primary; + color: $--color-text-primary; + } + } + + & .el-submenu__title { + height: 60px; + line-height: 60px; + border-bottom: 2px solid transparent; + color: $--color-text-secondary; + + &:hover { + background-color: #fff; + } + } + & .el-submenu__icon-arrow { + position: static; + vertical-align: middle; + margin-left: 8px; + margin-top: -3px; + } + } + & .el-menu { + & .el-menu-item, + & .el-submenu__title { + background-color: $--color-white; + float: none; + height: 36px; + line-height: 36px; + padding: 0 10px; + color: $--color-text-secondary; + } + & .el-menu-item.is-active, + & .el-submenu.is-active > .el-submenu__title { + color: $--color-text-primary; + } + } + & .el-menu-item:not(.is-disabled):hover, + & .el-menu-item:not(.is-disabled):focus { + outline: none; + color: $--color-text-primary; + } + & > .el-menu-item.is-active { + border-bottom: 2px solid $--color-primary; + color: $--color-text-primary; + } + } + @include m(collapse) { + width: 64px; + + > .el-menu-item, + > .el-submenu > .el-submenu__title { + [class^="el-icon-"] { + margin: 0; + vertical-align: middle; + width: 24px; + text-align: center; + } + .el-submenu__icon-arrow { + display: none; + } + span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + + > .el-menu-item.is-active i { + color: inherit; + } + + .el-menu .el-submenu { + min-width: 200px; + } + + .el-submenu { + position: relative; + & .el-menu { + position: absolute; + margin-left: 5px; + top: 0; + left: 100%; + z-index: 10; + border: 1px solid $--border-color-light; + border-radius: $--border-radius-small; + box-shadow: $--box-shadow-light; + } + + &.is-opened { + > .el-submenu__title .el-submenu__icon-arrow { + transform: none; + } + } + } + } + @include m(popup) { + z-index: 100; + min-width: 200px; + border: none; + padding: 5px 0; + border-radius: $--border-radius-small; + box-shadow: $--box-shadow-light; + + &-bottom-start { + margin-top: 5px; + } + &-right-start { + margin-left: 5px; + margin-right: 5px; + } + } +} +@include b(menu-item) { + @include menu-item; + + & [class^="el-icon-"] { + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px; + vertical-align: middle; + } + @include when(active) { + color: $--color-primary; + i { + color: inherit; + } + } +} + +@include b(submenu) { + list-style: none; + margin: 0; + padding-left: 0; + + @include e(title) { + @include menu-item; + + &:hover { + background-color: $--menu-item-hover-fill; + } + } + & .el-menu { + border: none; + } + & .el-menu-item { + height: 50px; + line-height: 50px; + padding: 0 45px; + min-width: 200px; + } + @include e(icon-arrow) { + position: absolute; + top: 50%; + right: 20px; + margin-top: -7px; + transition: transform .3s; + font-size: 12px; + } + @include when(active) { + .el-submenu__title { + border-bottom-color: $--color-primary; + } + } + @include when(opened) { + > .el-submenu__title .el-submenu__icon-arrow { + transform: rotateZ(180deg); + } + } + @include when(disabled) { + .el-submenu__title, + .el-menu-item { + opacity: 0.25; + cursor: not-allowed; + background: none !important; + } + } + [class^="el-icon-"] { + vertical-align: middle; + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px; + } +} + +@include b(menu-item-group) { + > ul { + padding: 0; + } + @include e(title) { + padding: 7px 0 7px 20px; + line-height: normal; + font-size: 12px; + color: $--color-text-secondary; + } +} + +.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { + transition: .2s; + opacity: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/message-box.scss b/nezha-fronted/src/assets/css/themes/src/message-box.scss new file mode 100644 index 000000000..b2be54bd0 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/message-box.scss @@ -0,0 +1,226 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "common/popup"; +@import "button"; +@import "input"; + +@include b(message-box) { + display: inline-block; + width: $--msgbox-width; + padding-bottom: 10px; + vertical-align: middle; + background-color: $--color-white; + border-radius: $--msgbox-border-radius; + border: 1px solid $--border-color-lighter; + font-size: $--messagebox-font-size; + box-shadow: $--box-shadow-light; + text-align: left; + overflow: hidden; + backface-visibility: hidden; + + @include e(wrapper) { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-align: center; + + &::after { + content: ""; + display: inline-block; + height: 100%; + width: 0; + vertical-align: middle; + } + } + + @include e(header) { + position: relative; + padding: $--msgbox-padding-primary; + padding-bottom: 10px; + } + + @include e(title) { + padding-left: 0; + margin-bottom: 0; + font-size: $--messagebox-font-size; + line-height: 1; + color: $--messagebox-title-color; + } + + @include e(headerbtn) { + position: absolute; + top: $--msgbox-padding-primary; + right: $--msgbox-padding-primary; + padding: 0; + border: none; + outline: none; + background: transparent; + font-size: $--message-close-size; + cursor: pointer; + + .el-message-box__close { + color: $--color-info; + } + + &:focus, &:hover { + .el-message-box__close { + color: $--color-primary; + } + } + + } + + @include e(content) { + padding: 10px $--msgbox-padding-primary; + color: $--messagebox-content-color; + font-size: $--messagebox-content-font-size; + } + + @include e(container) { + position: relative; + } + + @include e(input) { + padding-top: 15px; + + & input.invalid { + border-color: $--color-danger; + &:focus { + border-color: $--color-danger; + } + } + } + + @include e(status) { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px !important; + + &::before { + // 防止图标切割 + padding-left: 1px; + } + + + .el-message-box__message { + padding-left: 36px; + padding-right: 12px; + } + + &.el-icon-success { + color: $--messagebox-success-color; + } + + &.el-icon-info { + color: $--messagebox-info-color; + } + + &.el-icon-warning { + color: $--messagebox-warning-color; + } + + &.el-icon-error { + color: $--messagebox-danger-color; + } + } + + @include e(message) { + margin: 0; + + & p { + margin: 0; + line-height: 24px; + } + } + + @include e(errormsg) { + color: $--color-danger; + font-size: $--messagebox-error-font-size; + min-height: 18px; + margin-top: 2px; + } + + @include e(btns) { + padding: 5px 15px 0; + text-align: right; + + & button:nth-child(2) { + margin-left: 10px; + } + } + + @include e(btns-reverse) { + flex-direction: row-reverse; + } + + // centerAlign 布局 + @include m(center) { + padding-bottom: 30px; + + @include e(header) { + padding-top: 30px; + } + + @include e(title) { + position: relative; + display: flex; + align-items: center; + justify-content: center; + } + + @include e(status) { + position: relative; + top: auto; + padding-right: 5px; + text-align: center; + transform: translateY(-1px); + } + + @include e(message) { + margin-left: 0; + } + + @include e((btns, content)) { + text-align: center; + } + + @include e(content) { + $padding-horizontal: $--msgbox-padding-primary + 12px; + + padding-left: $padding-horizontal; + padding-right: $padding-horizontal; + } + } +} + +.msgbox-fade-enter-active { + animation: msgbox-fade-in .3s; +} + +.msgbox-fade-leave-active { + animation: msgbox-fade-out .3s; +} + +@keyframes msgbox-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes msgbox-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/message.scss b/nezha-fronted/src/assets/css/themes/src/message.scss new file mode 100644 index 000000000..58de08408 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/message.scss @@ -0,0 +1,120 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(message) { + min-width: $--message-min-width; + box-sizing: border-box; + border-radius: $--border-radius-base; + border-width: $--border-width-base; + border-style: $--border-style-base; + border-color: $--border-color-lighter; + position: fixed; + left: 50%; + top: 20px; + transform: translateX(-50%); + background-color: $--message-background-color; + transition: opacity 0.3s, transform .4s, top 0.4s; + overflow: hidden; + padding: $--message-padding; + display: flex; + align-items: center; + + @include when(center) { + justify-content: center; + } + + @include when(closable) { + .el-message__content { + padding-right: 16px; + } + } + + p { + margin: 0; + } + + @include m(info) { + .el-message__content { + color: $--message-info-font-color; + } + } + + @include m(success) { + background-color: $--color-success-lighter; + border-color: $--color-success-light; + + .el-message__content { + color: $--message-success-font-color; + } + } + + @include m(warning) { + background-color: $--color-warning-lighter; + border-color: $--color-warning-light; + + .el-message__content { + color: $--message-warning-font-color; + } + } + + @include m(error) { + background-color: $--color-danger-lighter; + border-color: $--color-danger-light; + + .el-message__content { + color: $--message-danger-font-color; + } + } + + @include e(icon) { + margin-right: 10px; + } + + @include e(content) { + padding: 0; + font-size: 14px; + line-height: 1; + &:focus { + outline-width: 0; + } + } + + @include e(closeBtn) { + position: absolute; + top: 50%; + right: 15px; + transform: translateY(-50%); + cursor: pointer; + color: $--message-close-icon-color; + font-size: $--message-close-size; + + &:focus { + outline-width: 0; + } + &:hover { + color: $--message-close-hover-color; + } + } + + & .el-icon-success { + color: $--message-success-font-color; + } + + & .el-icon-error { + color: $--message-danger-font-color; + } + + & .el-icon-info { + color: $--message-info-font-color; + } + + & .el-icon-warning { + color: $--message-warning-font-color; + } +} + +.el-message-fade-enter, +.el-message-fade-leave-active { + opacity: 0; + transform: translate(-50%, -100%); +} diff --git a/nezha-fronted/src/assets/css/themes/src/mixins/_button.scss b/nezha-fronted/src/assets/css/themes/src/mixins/_button.scss new file mode 100644 index 000000000..03c86e52e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/mixins/_button.scss @@ -0,0 +1,81 @@ +@import "../common/var"; +@mixin button-plain($color) { + color: $color; + background: mix($--color-white, $color, 90%); + border-color: mix($--color-white, $color, 60%); + + &:hover, + &:focus { + background: $color; + border-color: $color; + color: $--color-white; + } + + &:active { + background: mix($--color-black, $color, $--button-active-shade-percent); + border-color: mix($--color-black, $color, $--button-active-shade-percent); + color: $--color-white; + outline: none; + } + + &.is-disabled { + &, + &:hover, + &:focus, + &:active { + color: mix($--color-white, $color, 40%); + background-color: mix($--color-white, $color, 90%); + border-color: mix($--color-white, $color, 80%); + } + } +} + +@mixin button-variant($color, $background-color, $border-color) { + color: $color; + background-color: $background-color; + border-color: $border-color; + + &:hover, + &:focus { + background: mix($--color-white, $background-color, $--button-hover-tint-percent); + border-color: mix($--color-white, $border-color, $--button-hover-tint-percent); + color: $color; + } + + &:active { + background: mix($--color-black, $background-color, $--button-active-shade-percent); + border-color: mix($--color-black, $border-color, $--button-active-shade-percent); + color: $color; + outline: none; + } + + &.is-active { + background: mix($--color-black, $background-color, $--button-active-shade-percent); + border-color: mix($--color-black, $border-color, $--button-active-shade-percent); + color: $color; + } + + &.is-disabled { + &, + &:hover, + &:focus, + &:active { + color: $--color-white; + background-color: mix($background-color, $--color-white); + border-color: mix($border-color, $--color-white); + } + } + + &.is-plain { + @include button-plain($background-color); + } +} + +@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + border-radius: $border-radius; + &.is-round { + padding: $padding-vertical $padding-horizontal; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/mixins/config.scss b/nezha-fronted/src/assets/css/themes/src/mixins/config.scss new file mode 100644 index 000000000..87e29b458 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/mixins/config.scss @@ -0,0 +1,4 @@ +$namespace: 'el'; +$element-separator: '__'; +$modifier-separator: '--'; +$state-prefix: 'is-'; diff --git a/nezha-fronted/src/assets/css/themes/src/mixins/function.scss b/nezha-fronted/src/assets/css/themes/src/mixins/function.scss new file mode 100644 index 000000000..f348cb60b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/mixins/function.scss @@ -0,0 +1,44 @@ +@import "config"; + +/* BEM support Func + -------------------------- */ +@function selectorToString($selector) { + $selector: inspect($selector); + $selector: str-slice($selector, 2, -2); + @return $selector; +} + +@function containsModifier($selector) { + $selector: selectorToString($selector); + + @if str-index($selector, $modifier-separator) { + @return true; + } @else { + @return false; + } +} + +@function containWhenFlag($selector) { + $selector: selectorToString($selector); + + @if str-index($selector, '.' + $state-prefix) { + @return true + } @else { + @return false + } +} + +@function containPseudoClass($selector) { + $selector: selectorToString($selector); + + @if str-index($selector, ':') { + @return true + } @else { + @return false + } +} + +@function hitAllSpecialNestRule($selector) { + + @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector); +} diff --git a/nezha-fronted/src/assets/css/themes/src/mixins/mixins.scss b/nezha-fronted/src/assets/css/themes/src/mixins/mixins.scss new file mode 100644 index 000000000..1a3b78dd1 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/mixins/mixins.scss @@ -0,0 +1,211 @@ +@import "function"; +@import "../common/var"; + +/* Break-points + -------------------------- */ +@mixin res($key, $map: $--breakpoints) { + // 循环断点Map，如果存在则返回 + @if map-has-key($map, $key) { + @media only screen and #{inspect(map-get($map, $key))} { + @content; + } + } @else { + @warn "Undefeined points: `#{$map}`"; + } +} + +/* Scrollbar + -------------------------- */ +@mixin scroll-bar { + $--scrollbar-thumb-background: #b4bccc; + $--scrollbar-track-background: #fff; + + &::-webkit-scrollbar { + z-index: 11; + width: 6px; + + &:horizontal { + height: 6px; + } + + &-thumb { + border-radius: 5px; + width: 6px; + background: $--scrollbar-thumb-background; + } + + &-corner { + background: $--scrollbar-track-background; + } + + &-track { + background: $--scrollbar-track-background; + + &-piece { + background: $--scrollbar-track-background; + width: 6px; + } + } + } +} + +/* Placeholder + -------------------------- */ +@mixin placeholder { + &::-webkit-input-placeholder { + @content + } + + &::-moz-placeholder { + @content + } + + &:-ms-input-placeholder { + @content + } +} + +/* BEM + -------------------------- */ +@mixin b($block) { + $selector: &; + $B: $namespace+'-'+$block !global; + + #{renderThemeClass($selector)}.#{$B} { + @content; + } +} + +@mixin e($element) { + $E: $element !global; + $selector: &; + $currentSelector: ""; + @each $unit in $element { + $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","}; + } + + @if hitAllSpecialNestRule($selector) { + @at-root { + #{renderThemeClass($selector)}#{$selector} { + #{$currentSelector} { + @content; + } + } + } + } @else { + @at-root { + #{renderThemeClass($currentSelector)}#{$currentSelector} { + @content; + } + } + } +} + +@mixin m($modifier) { + $selector: &; + $currentSelector: ""; + @each $unit in $modifier { + $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; + } + + @at-root { + #{renderThemeClass($currentSelector)}#{$currentSelector} { + @content; + } + } +} + +@mixin configurable-m($modifier, $E-flag: false) { + $selector: &; + $interpolation: ''; + + @if $E-flag { + $interpolation: $element-separator + $E-flag; + } + + @at-root { + #{renderThemeClass($selector)}#{$selector} { + .#{$B+$interpolation+$modifier-separator+$modifier} { + @content; + } + } + } +} + +@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) { + $selector: &; + $modifierCombo: ''; + + @if $modifier { + $modifierCombo: $modifier-separator + $modifier; + } + + @at-root { + #{renderThemeClass($selector)}#{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} { + @content + } + } +} + +@mixin meb($modifier: false, $element: $E, $block: $B) { + $selector: &; + $modifierCombo: ''; + + @if $modifier { + $modifierCombo: $modifier-separator + $modifier; + } + + @at-root { + #{renderThemeClass($selector)}#{$selector} { + .#{$block+$element-separator+$element+$modifierCombo} { + @content + } + } + } +} + +@mixin when($state) { + $selector: &; + @at-root { + #{renderThemeClass($selector)}&.#{$state-prefix + $state} { + @content; + } + } +} + +@mixin extend-rule($name) { + @extend #{'%shared-'+$name}; +} + +@mixin share-rule($name) { + $selector: &; + $rule-name: '%shared-'+$name; + + @at-root #{renderThemeClass($selector)}#{$rule-name} { + @content + } +} + +@mixin pseudo($pseudo) { + $selector: &; + @at-root #{renderThemeClass($selector)}#{&}#{':#{$pseudo}'} { + @content + } +} + + +@function containThemeString($str) { + @if str-index($str, 'theme') { + @return true + } @else { + @return false + } +} + +@function renderThemeClass($selector) { + @if containThemeString(inspect($selector)) { + @return '' + } @else { + @return '.theme-' + $--theme + ' ' + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/mixins/utils.scss b/nezha-fronted/src/assets/css/themes/src/mixins/utils.scss new file mode 100644 index 000000000..a64232663 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/mixins/utils.scss @@ -0,0 +1,39 @@ +@mixin utils-user-select($value) { + -moz-user-select: $value; + -webkit-user-select: $value; + -ms-user-select: $value; +} + +@mixin utils-clearfix { + $selector: &; + + @at-root { + #{$selector}::before, + #{$selector}::after { + display: table; + content: ""; + } + #{$selector}::after { + clear: both + } + } +} + +@mixin utils-vertical-center { + $selector: &; + + @at-root { + #{$selector}::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle + } + } +} + +@mixin utils-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/notification.scss b/nezha-fronted/src/assets/css/themes/src/notification.scss new file mode 100644 index 000000000..1105e2355 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/notification.scss @@ -0,0 +1,99 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(notification) { + display: flex; + width: $--notification-width; + padding: $--notification-padding; + border-radius: $--notification-radius; + box-sizing: border-box; + border: 1px solid $--notification-border-color; + position: fixed; + background-color: $--color-white; + box-shadow: $--notification-shadow; + transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s; + overflow: hidden; + + &.right { + right: 16px; + } + + &.left { + left: 16px; + } + + @include e(group) { + margin-left: $--notification-group-margin-left; + margin-right: $--notification-group-margin-right; + } + + @include e(title) { + font-weight: bold; + font-size: $--notification-title-font-size; + color: $--notification-title-color; + margin: 0; + } + + @include e(content) { + font-size: $--notification-content-font-size; + line-height: 21px; + margin: 6px 0 0 0; + color: $--notification-content-color; + text-align: justify; + + p { + margin: 0; + } + } + + @include e(icon) { + height: $--notification-icon-size; + width: $--notification-icon-size; + font-size: $--notification-icon-size; + } + + @include e(closeBtn) { + position: absolute; + top: 18px; + right: 15px; + cursor: pointer; + color: $--notification-close-color; + font-size: $--notification-close-font-size; + + &:hover { + color: $--notification-close-hover-color; + } + } + + .el-icon-success { + color: $--notification-success-icon-color; + } + + .el-icon-error { + color: $--notification-danger-icon-color; + } + + .el-icon-info { + color: $--notification-info-icon-color; + } + + .el-icon-warning { + color: $--notification-warning-icon-color; + } +} + +.el-notification-fade-enter { + &.right { + right: 0; + transform: translateX(100%); + } + + &.left { + left: 0; + transform: translateX(-100%); + } +} + +.el-notification-fade-leave-active { + opacity: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/option-group.scss b/nezha-fronted/src/assets/css/themes/src/option-group.scss new file mode 100644 index 000000000..c68addb9e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/option-group.scss @@ -0,0 +1,42 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(select-group) { + $gap: 20px; + + margin: 0; + padding: 0; + + @include e(wrap) { + position: relative; + list-style: none; + margin: 0; + padding: 0; + + &:not(:last-of-type) { + padding-bottom: 24px; + + &::after { + content: ''; + position: absolute; + display: block; + left: $gap; + right: $gap; + bottom: 12px; + height: 1px; + background: $--border-color-light; + } + } + } + + @include e(title) { + padding-left: $gap; + font-size: $--select-group-font-size; + color: $--select-group-color; + line-height: $--select-group-height; + } + + & .el-select-dropdown__item { + padding-left: $gap; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/option.scss b/nezha-fronted/src/assets/css/themes/src/option.scss new file mode 100644 index 000000000..ee5a383ee --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/option.scss @@ -0,0 +1,36 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(select-dropdown) { + @include e(item) { + font-size: $--select-font-size; + padding: 0 20px; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: $--select-option-color; + height: $--select-option-height; + line-height: $--select-option-height; + box-sizing: border-box; + cursor: pointer; + + @include when(disabled) { + color: $--select-option-disabled-color; + cursor: not-allowed; + + &:hover { + background-color: $--color-white; + } + } + + &.hover, &:hover { + background-color: $--select-option-hover-background; + } + + &.selected { + color: $--select-option-selected-font-color; + font-weight: bold; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/page-header.scss b/nezha-fronted/src/assets/css/themes/src/page-header.scss new file mode 100644 index 000000000..14c19fa9d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/page-header.scss @@ -0,0 +1,41 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(page-header) { + display: flex; + line-height: 24px; + + @include e(left) { + display: flex; + cursor: pointer; + margin-right: 40px; + position: relative; + + &::after { + content: ""; + position: absolute; + width: 1px; + height: 16px; + right: -20px; + top: 50%; + transform: translateY(-50%); + background-color: $--border-color-base; + } + + .el-icon-back { + font-size: 18px; + margin-right: 6px; + align-self: center; + } + + @include e(title) { + font-size: 14px; + font-weight: 500; + } + } + + @include e(content) { + font-size: 18px; + color: $--color-text-primary; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/pagination.scss b/nezha-fronted/src/assets/css/themes/src/pagination.scss new file mode 100644 index 000000000..02384e677 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/pagination.scss @@ -0,0 +1,295 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; +@import "select"; + +@include b(pagination) { + white-space: nowrap; + padding: 2px 5px; + color: $--pagination-font-color; + font-weight: bold; + @include utils-clearfix; + + span:not([class*=suffix]), + button { + display: inline-block; + font-size: $--pagination-font-size; + min-width: $--pagination-button-width; + height: $--pagination-button-height; + line-height: $--pagination-button-height; + vertical-align: top; + box-sizing: border-box; + } + + .el-input__inner { + text-align: center; + -moz-appearance: textfield; + line-height: normal; + } + + // pagesize 的下拉 icon + .el-input__suffix { + right: 0; + transform: scale(.8); + } + + .el-select .el-input { + width: 100px; + margin: 0 5px; + + .el-input__inner { + padding-right: 25px; + border-radius: $--pagination-border-radius; + } + } + + button { + border: none; + padding: 0 6px; + background: transparent; + + &:focus { + outline: none; + } + + &:hover { + color: $--pagination-hover-color; + } + + &:disabled { + color: $--pagination-button-disabled-color; + background-color: $--pagination-button-disabled-background-color; + cursor: not-allowed; + } + } + + .btn-prev, + .btn-next { + background: center center no-repeat; + background-size: 16px; + background-color: $--pagination-background-color; + cursor: pointer; + margin: 0; + color: $--pagination-button-color; + + .el-icon { + display: block; + font-size: 12px; + font-weight: bold; + } + } + + .btn-prev { + padding-right: 12px; + } + + .btn-next { + padding-left: 12px; + } + + .el-pager li.disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + } + + @include m(small) { + .btn-prev, + .btn-next, + .el-pager li, + .el-pager li.btn-quicknext, + .el-pager li.btn-quickprev, + .el-pager li:last-child { + border-color: transparent; + font-size: 12px; + line-height: 22px; + height: 22px; + min-width: 22px; + } + + .arrow.disabled { + visibility: hidden; + } + + .more::before, + li.more::before { + line-height: 24px; + } + + span:not([class*=suffix]), + button { + height: 22px; + line-height: 22px; + } + + @include e(editor) { + height: 22px; + &.el-input .el-input__inner { + height: 22px; + } + } + } + + @include e(sizes) { + margin: 0 10px 0 0; + font-weight: normal; + color: $--color-text-regular; + + .el-input .el-input__inner { + font-size: $--pagination-font-size; + padding-left: 8px; + + &:hover { + border-color: $--pagination-hover-color; + } + } + } + + @include e(total) { + margin-right: 10px; + font-weight: normal; + color: $--color-text-regular; + } + + @include e(jump) { + margin-left: 24px; + font-weight: normal; + color: $--color-text-regular; + + .el-input__inner { + padding: 0 3px; + } + } + + @include e(rightwrapper) { + float: right; + } + + @include e(editor) { + line-height: 18px; + padding: 0 2px; + height: $--pagination-button-height; + + text-align: center; + margin: 0 2px; + box-sizing: border-box; + border-radius: $--pagination-border-radius; + + &.el-input { + width: 50px; + } + + &.el-input .el-input__inner { + height: $--pagination-button-height; + } + + .el-input__inner::-webkit-inner-spin-button, + .el-input__inner::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + } + + @include when(background) { + .btn-prev, + .btn-next, + .el-pager li { + margin: 0 5px; + background-color: $--color-info-lighter; + color: $--color-text-regular; + min-width: 30px; + border-radius: 2px; + + &.disabled { + color: $--color-text-placeholder; + } + } + + .btn-prev, .btn-next { + padding: 0; + + &:disabled { + color: $--color-text-placeholder; + } + } + + .el-pager li:not(.disabled) { + &:hover { + color: $--pagination-hover-color; + } + + &.active { + background-color: $--color-primary; + color: $--color-white; + } + } + + &.el-pagination--small { + .btn-prev, + .btn-next, + .el-pager li { + margin: 0 3px; + min-width: 22px; + } + } + } +} + +@include b(pager) { + user-select: none; + list-style: none; + display: inline-block; + vertical-align: top; + font-size: 0; + padding: 0; + margin: 0; + + .more::before { + line-height: 30px; + } + + li { + padding: 0 4px; + background: $--pagination-background-color; + vertical-align: top; + display: inline-block; + font-size: $--pagination-font-size; + min-width: $--pagination-button-width; + height: $--pagination-button-height; + line-height: $--pagination-button-height; + cursor: pointer; + box-sizing: border-box; + text-align: center; + margin: 0; + + &.btn-quicknext, + &.btn-quickprev { + line-height: 28px; + color: $--pagination-button-color; + + &.disabled { + color: $--color-text-placeholder; + } + } + + &.btn-quickprev:hover { + cursor: pointer; + } + + &.btn-quicknext:hover { + cursor: pointer; + } + + &.active + li { + border-left: 0; + } + + &:hover { + color: $--pagination-hover-color; + } + + &.active { + color: $--pagination-hover-color; + cursor: default; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/popconfirm.scss b/nezha-fronted/src/assets/css/themes/src/popconfirm.scss new file mode 100644 index 000000000..bc4bb526c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/popconfirm.scss @@ -0,0 +1,16 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(popconfirm) { + @include e(main) { + display: flex; + align-items: center; + } + @include e(icon) { + margin-right: 5px; + } + @include e(action) { + text-align: right; + margin: 0 + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/popover.scss b/nezha-fronted/src/assets/css/themes/src/popover.scss new file mode 100644 index 000000000..896712ac9 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/popover.scss @@ -0,0 +1,40 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "./popper"; + +@include b(popover) { + position: absolute; + background: $--popover-background-color; + min-width: 150px; + border-radius: 4px; + border: 1px solid $--popover-border-color; + padding: $--popover-padding; + z-index: $--index-popper; + color: $--color-text-regular; + line-height: 1.4; + text-align: justify; + font-size: $--popover-font-size; + box-shadow: $--box-shadow-light; + word-break: break-all; + + @include m(plain) { + padding: $--popover-padding-large; + } + + @include e(title) { + color: $--popover-title-font-color; + font-size: $--popover-title-font-size; + line-height: 1; + margin-bottom: 12px; + } + + @include e(reference) { + &:focus:not(.focusing), &:focus:hover { + outline-width: 0; + } + } + + &:focus:active, &:focus { + outline-width: 0; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/popper.scss b/nezha-fronted/src/assets/css/themes/src/popper.scss new file mode 100644 index 000000000..2104f599b --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/popper.scss @@ -0,0 +1,101 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(popper) { + .popper__arrow, + .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .popper__arrow { + border-width: $--popover-arrow-size; + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)) + } + + .popper__arrow::after { + content: " "; + border-width: $--popover-arrow-size; + } + + &[x-placement^="top"] { + margin-bottom: #{$--popover-arrow-size + 6}; + } + + &[x-placement^="top"] .popper__arrow { + bottom: -$--popover-arrow-size; + left: 50%; + margin-right: #{$--tooltip-arrow-size / 2}; + border-top-color: $--popover-border-color; + border-bottom-width: 0; + + &::after { + bottom: 1px; + margin-left: -$--popover-arrow-size; + border-top-color: $--popover-background-color; + border-bottom-width: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: #{$--popover-arrow-size + 6}; + } + + &[x-placement^="bottom"] .popper__arrow { + top: -$--popover-arrow-size; + left: 50%; + margin-right: #{$--tooltip-arrow-size / 2}; + border-top-width: 0; + border-bottom-color: $--popover-border-color; + + &::after { + top: 1px; + margin-left: -$--popover-arrow-size; + border-top-width: 0; + border-bottom-color: $--popover-background-color; + } + } + + &[x-placement^="right"] { + margin-left: #{$--popover-arrow-size + 6}; + } + + &[x-placement^="right"] .popper__arrow { + top: 50%; + left: -$--popover-arrow-size; + margin-bottom: #{$--tooltip-arrow-size / 2}; + border-right-color: $--popover-border-color; + border-left-width: 0; + + &::after { + bottom: -$--popover-arrow-size; + left: 1px; + border-right-color: $--popover-background-color; + border-left-width: 0; + } + } + + &[x-placement^="left"] { + margin-right: #{$--popover-arrow-size + 6}; + } + + &[x-placement^="left"] .popper__arrow { + top: 50%; + right: -$--popover-arrow-size; + margin-bottom: #{$--tooltip-arrow-size / 2}; + border-right-width: 0; + border-left-color: $--popover-border-color; + + &::after { + right: 1px; + bottom: -$--popover-arrow-size; + margin-left: -$--popover-arrow-size; + border-right-width: 0; + border-left-color: $--popover-background-color; + } + } +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/progress.scss b/nezha-fronted/src/assets/css/themes/src/progress.scss new file mode 100644 index 000000000..e6139f59d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/progress.scss @@ -0,0 +1,141 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; + +@include b(progress) { + position: relative; + line-height: 1; + + @include e(text) { + font-size:14px; + color: $--color-text-regular; + display: inline-block; + vertical-align: middle; + margin-left: 10px; + line-height: 1; + + i { + vertical-align: middle; + display: block; + } + } + + @include m((circle,dashboard)) { + display: inline-block; + + .el-progress__text { + position: absolute; + top: 50%; + left: 0; + width: 100%; + text-align: center; + margin: 0; + transform: translate(0, -50%); + + i { + vertical-align: middle; + display: inline-block; + } + } + } + + + @include m(without-text) { + .el-progress__text { + display: none; + } + + .el-progress-bar { + padding-right: 0; + margin-right: 0; + display: block; + } + } + + @include m(text-inside) { + .el-progress-bar { + padding-right: 0; + margin-right: 0; + } + } + + @include when(success) { + .el-progress-bar__inner { + background-color: $--color-success; + } + + .el-progress__text { + color: $--color-success; + } + } + + @include when(warning) { + .el-progress-bar__inner { + background-color: $--color-warning; + } + + .el-progress__text { + color: $--color-warning; + } + } + + @include when(exception) { + .el-progress-bar__inner { + background-color: $--color-danger; + } + + .el-progress__text { + color: $--color-danger; + } + } +} + +@include b(progress-bar) { + padding-right: 50px; + display: inline-block; + vertical-align: middle; + width: 100%; + margin-right: -55px; + box-sizing: border-box; + + @include e(outer) { + height: 6px; + border-radius: 100px; + background-color: $--border-color-lighter; + overflow: hidden; + position: relative; + vertical-align: middle; + } + @include e(inner) { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: $--color-primary; + text-align: right; + border-radius: 100px; + line-height: 1; + white-space: nowrap; + transition: width 0.6s ease; + + @include utils-vertical-center; + } + + @include e(innerText) { + display: inline-block; + vertical-align: middle; + color: $--color-white; + font-size: 12px; + margin: 0 5px; + } +} + +@keyframes progress { + 0% { + background-position: 0 0; + } + + 100% { + background-position: 32px 0; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/radio-button.scss b/nezha-fronted/src/assets/css/themes/src/radio-button.scss new file mode 100644 index 000000000..bd4215eea --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/radio-button.scss @@ -0,0 +1,113 @@ +@import "mixins/mixins"; +@import "mixins/_button"; +@import "common/var"; + +@include b(radio-button) { + position: relative; + display: inline-block; + outline: none; + + @include e(inner) { + display: inline-block; + line-height: 1; + white-space: nowrap; + vertical-align: middle; + background: $--button-default-background-color; + border: $--border-base; + font-weight: $--button-font-weight; + border-left: 0; + color: $--button-default-font-color; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + cursor: pointer; + transition: $--all-transition; + + @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0); + + &:hover { + color: $--color-primary; + } + + & [class*="el-icon-"] { + line-height: 0.9; + + & + span { + margin-left: 5px; + } + } + } + + &:first-child { + .el-radio-button__inner { + border-left: $--border-base; + border-radius: $--border-radius-base 0 0 $--border-radius-base; + box-shadow: none !important; + } + } + + @include e(orig-radio) { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + + &:checked { + & + .el-radio-button__inner { + color: $--radio-button-checked-font-color; + background-color: $--radio-button-checked-background-color; + border-color: $--radio-button-checked-border-color; + box-shadow: -1px 0 0 0 $--radio-button-checked-border-color; + } + } + + &:disabled { + & + .el-radio-button__inner { + color: $--button-disabled-font-color; + cursor: not-allowed; + background-image: none; + background-color: $--button-disabled-background-color; + border-color: $--button-disabled-border-color; + box-shadow: none; + } + &:checked + .el-radio-button__inner { + background-color: $--radio-button-disabled-checked-fill; + } + } + } + + &:last-child { + .el-radio-button__inner { + border-radius: 0 $--border-radius-base $--border-radius-base 0; + } + } + + &:first-child:last-child { + .el-radio-button__inner { + border-radius: $--border-radius-base; + } + } + + @include m(medium) { + & .el-radio-button__inner { + @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0); + } + } + @include m(small) { + & .el-radio-button__inner { + @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0); + } + } + @include m(mini) { + & .el-radio-button__inner { + @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0); + } + } + + &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/ + box-shadow: 0 0 2px 2px $--radio-button-checked-border-color; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/radio-group.scss b/nezha-fronted/src/assets/css/themes/src/radio-group.scss new file mode 100644 index 000000000..2ee95a792 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/radio-group.scss @@ -0,0 +1,9 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(radio-group) { + display: inline-block; + line-height: 1; + vertical-align: middle; + font-size: 0; +} diff --git a/nezha-fronted/src/assets/css/themes/src/radio.scss b/nezha-fronted/src/assets/css/themes/src/radio.scss new file mode 100644 index 000000000..4d8faf179 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/radio.scss @@ -0,0 +1,199 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import 'mixins/button'; +@import "common/var"; + +@include b(radio) { + color: $--radio-font-color; + font-weight: $--radio-font-weight; + line-height: 1; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + outline: none; + font-size: $--font-size-base; + margin-right: 30px; + @include utils-user-select(none); + + @include when(bordered) { + padding: $--radio-bordered-padding; + border-radius: $--border-radius-base; + border: $--border-base; + box-sizing: border-box; + height: $--radio-bordered-height; + + &.is-checked { + border-color: $--color-primary; + } + + &.is-disabled { + cursor: not-allowed; + border-color: $--border-color-lighter; + } + + & + .el-radio.is-bordered { + margin-left: 10px; + } + } + + @include m(medium) { + &.is-bordered { + padding: $--radio-bordered-medium-padding; + border-radius: $--button-medium-border-radius; + height: $--radio-bordered-medium-height; + .el-radio__label { + font-size: $--button-medium-font-size; + } + .el-radio__inner { + height: $--radio-bordered-medium-input-height; + width: $--radio-bordered-medium-input-width; + } + } + } + @include m(small) { + &.is-bordered { + padding: $--radio-bordered-small-padding; + border-radius: $--button-small-border-radius; + height: $--radio-bordered-small-height; + .el-radio__label { + font-size: $--button-small-font-size; + } + .el-radio__inner { + height: $--radio-bordered-small-input-height; + width: $--radio-bordered-small-input-width; + } + } + } + @include m(mini) { + &.is-bordered { + padding: $--radio-bordered-mini-padding; + border-radius: $--button-mini-border-radius; + height: $--radio-bordered-mini-height; + .el-radio__label { + font-size: $--button-mini-font-size; + } + .el-radio__inner { + height: $--radio-bordered-mini-input-height; + width: $--radio-bordered-mini-input-width; + } + } + } + + &:last-child { + margin-right: 0; + } + + @include e(input) { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; + + @include when(disabled) { + .el-radio__inner { + background-color: $--radio-disabled-input-fill; + border-color: $--radio-disabled-input-border-color; + cursor: not-allowed; + + &::after { + cursor: not-allowed; + background-color: $--radio-disabled-icon-color; + } + + & + .el-radio__label { + cursor: not-allowed; + } + } + &.is-checked { + .el-radio__inner { + background-color: $--radio-disabled-checked-input-fill; + border-color: $--radio-disabled-checked-input-border-color; + + &::after { + background-color: $--radio-disabled-checked-icon-color; + } + } + } + & + span.el-radio__label { + color: $--color-text-placeholder; + cursor: not-allowed; + } + } + + @include when(checked) { + .el-radio__inner { + border-color: $--radio-checked-input-border-color; + background: $--radio-checked-icon-color; + + &::after { + transform: translate(-50%, -50%) scale(1); + } + } + + & + .el-radio__label { + color: $--radio-checked-font-color; + } + } + + @include when(focus) { + .el-radio__inner { + border-color: $--radio-input-border-color-hover; + } + } + } + @include e(inner) { + border: $--radio-input-border; + border-radius: $--radio-input-border-radius; + width: $--radio-input-width; + height: $--radio-input-height; + background-color: $--radio-input-background-color; + position: relative; + cursor: pointer; + display: inline-block; + box-sizing: border-box; + + &:hover { + border-color: $--radio-input-border-color-hover; + } + + &::after { + width: 4px; + height: 4px; + border-radius: $--radio-input-border-radius; + background-color: $--color-white; + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + transition: transform .15s ease-in; + } + } + + @include e(original) { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0; + } + + &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/ + .el-radio__inner { + box-shadow: 0 0 2px 2px $--radio-input-border-color-hover; + } + } + + @include e(label) { + font-size: $--radio-font-size; + padding-left: 10px; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/rate.scss b/nezha-fronted/src/assets/css/themes/src/rate.scss new file mode 100644 index 000000000..99d7d045e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/rate.scss @@ -0,0 +1,49 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(rate) { + height: $--rate-height; + line-height: 1; + + &:focus, &:active { + outline-width: 0; + } + + @include e(item) { + display: inline-block; + position: relative; + font-size: 0; + vertical-align: middle; + } + + @include e(icon) { + position: relative; + display: inline-block; + font-size: $--rate-icon-size; + margin-right: $--rate-icon-margin; + color: $--rate-icon-color; + transition: .3s; + &.hover { + transform: scale(1.15); + } + + .path2 { + position: absolute; + left: 0; + top: 0; + } + } + + @include e(decimal) { + position: absolute; + top: 0; + left: 0; + display: inline-block; + overflow: hidden; + } + + @include e(text) { + font-size: $--rate-font-size; + vertical-align: middle; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/reset.scss b/nezha-fronted/src/assets/css/themes/src/reset.scss new file mode 100644 index 000000000..a13e0deb4 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/reset.scss @@ -0,0 +1,79 @@ +@import 'common/var'; + +body { + font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; + font-weight: 400; + font-size: $--font-size-base; + color: $--color-black; + -webkit-font-smoothing: antialiased; +} + +a { + color: $--color-primary; + text-decoration: none; + + &:hover, + &:focus { + color: mix($--color-white, $--color-primary, $--button-hover-tint-percent); + } + + &:active { + color: mix($--color-black, $--color-primary, $--button-active-shade-percent); + } +} + +h1, h2, h3, h4, h5, h6 { + color: $--color-text-regular; + font-weight: inherit; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +h1 { + font-size: #{$--font-size-base + 6px}; +} + +h2 { + font-size: #{$--font-size-base + 4px}; +} + +h3 { + font-size: #{$--font-size-base + 2px}; +} + +h4, h5, h6, p { + font-size: inherit; +} + +p { + line-height: 1.8; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +sup, sub { + font-size: #{$--font-size-base - 1px}; +} + +small { + font-size: #{$--font-size-base - 2px}; +} + +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #eeeeee; +} diff --git a/nezha-fronted/src/assets/css/themes/src/result.scss b/nezha-fronted/src/assets/css/themes/src/result.scss new file mode 100644 index 000000000..2d69085ba --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/result.scss @@ -0,0 +1,61 @@ +@import 'mixins/mixins'; +@import 'common/var'; + +@include b(result) { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + box-sizing: border-box; + padding: $--result-padding; + + @include e(icon) { + svg { + width: $--result-icon-font-size; + height: $--result-icon-font-size; + } + } + + @include e(title) { + margin-top: $--result-title-margin-top; + + p { + margin: 0; + font-size: $--result-title-font-size; + color: $--color-text-primary; + line-height: 1.3; + } + } + + @include e(subtitle) { + margin-top: $--result-subtitle-margin-top; + + p { + margin: 0; + font-size: $--font-size-base; + color: $--color-text-regular; + line-height: 1.3; + } + } + + @include e(extra) { + margin-top: $--result-extra-margin-top; + } + + .icon-success { + fill: $--result-success-color; + } + + .icon-error { + fill: $--result-danger-color; + } + + .icon-info { + fill: $--result-info-color; + } + + .icon-warning { + fill: $--result-warning-color; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/row.scss b/nezha-fronted/src/assets/css/themes/src/row.scss new file mode 100644 index 000000000..0f435ae15 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/row.scss @@ -0,0 +1,43 @@ +@import "common/var"; +@import "mixins/mixins"; +@import "mixins/utils"; + +@include b(row) { + position: relative; + box-sizing: border-box; + @include utils-clearfix; + + @include m(flex) { + display: flex; + &:before, + &:after { + display: none; + } + + @include when(justify-center) { + justify-content: center; + } + @include when(justify-end) { + justify-content: flex-end; + } + @include when(justify-space-between) { + justify-content: space-between; + } + @include when(justify-space-around) { + justify-content: space-around; + } + + @include when(align-top) { + align-items: flex-start; + } + + @include when(align-middle) { + align-items: center; + } + @include when(align-bottom) { + align-items: flex-end; + } + } + +} + diff --git a/nezha-fronted/src/assets/css/themes/src/scrollbar.scss b/nezha-fronted/src/assets/css/themes/src/scrollbar.scss new file mode 100644 index 000000000..56e5f2910 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/scrollbar.scss @@ -0,0 +1,72 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(scrollbar) { + overflow: hidden; + position: relative; + + &:hover, + &:active, + &:focus { + > .el-scrollbar__bar { + opacity: 1; + transition: opacity 340ms ease-out; + } + } + + @include e(wrap) { + overflow: scroll; + height: 100%; + + @include m(hidden-default) { + scrollbar-width: none; + &::-webkit-scrollbar { + width: 0; + height: 0; + } + } + } + + @include e(thumb) { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: $--scrollbar-background-color; + transition: .3s background-color; + + &:hover { + background-color: $--scrollbar-hover-background-color; + } + } + + @include e(bar) { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + transition: opacity 120ms ease-out; + + @include when(vertical) { + width: 6px; + top: 2px; + + > div { + width: 100%; + } + } + + @include when(horizontal) { + height: 6px; + left: 2px; + + > div { + height: 100%; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/select-dropdown.scss b/nezha-fronted/src/assets/css/themes/src/select-dropdown.scss new file mode 100644 index 000000000..f9b3b4fd9 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/select-dropdown.scss @@ -0,0 +1,59 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "./popper"; + +@include b(select-dropdown) { + position: absolute; + z-index: #{$--index-top + 1}; + border: $--select-dropdown-border; + border-radius: $--border-radius-base; + background-color: $--select-dropdown-background; + box-shadow: $--select-dropdown-shadow; + box-sizing: border-box; + margin: 5px 0; + + @include when(multiple) { + & .el-select-dropdown__item.selected { + color: $--select-option-selected-font-color; + background-color: $--select-dropdown-background; + + &.hover { + background-color: $--select-option-hover-background; + } + + &::after { + position: absolute; + right: 20px; + font-family: 'element-icons'; + content: "\e6da"; + font-size: 12px; + font-weight: bold; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + } + + .el-scrollbar.is-empty .el-select-dropdown__list{ + padding: 0; + } +} + +@include b(select-dropdown__empty) { + padding: $--select-dropdown-empty-padding; + margin: 0; + text-align: center; + color: $--select-dropdown-empty-color; + font-size: $--select-font-size; +} + +@include b(select-dropdown__wrap) { + max-height: $--select-dropdown-max-height; +} + +@include b(select-dropdown__list) { + list-style: none; + padding: $--select-dropdown-padding; + margin: 0; + box-sizing: border-box; +} diff --git a/nezha-fronted/src/assets/css/themes/src/select.scss b/nezha-fronted/src/assets/css/themes/src/select.scss new file mode 100644 index 000000000..d5f6a30d1 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/select.scss @@ -0,0 +1,148 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; +@import "select-dropdown"; +@import "input"; +@import "tag"; +@import "option"; +@import "option-group"; +@import "scrollbar"; + +@include b(select) { + display: inline-block; + position: relative; + + .el-select__tags + >span { + display: contents; + } + + &:hover { + .el-input__inner { + border-color: $--select-border-color-hover; + } + } + + .el-input__inner { + cursor: pointer; + padding-right: 35px; + + &:focus { + border-color: $--select-input-focus-border-color; + } + } + + .el-input { + & .el-select__caret { + color: $--select-input-color; + font-size: $--select-input-font-size; + transition: transform .3s; + transform: rotateZ(180deg); + cursor: pointer; + + @include when(reverse) { + transform: rotateZ(0deg); + } + + @include when(show-close) { + font-size: $--select-font-size; + text-align: center; + transform: rotateZ(180deg); + border-radius: $--border-radius-circle; + color: $--select-input-color; + transition: $--color-transition-base; + + &:hover { + color: $--select-close-hover-color; + } + } + } + + &.is-disabled { + & .el-input__inner { + cursor: not-allowed; + + &:hover { + border-color: $--select-disabled-border; + } + } + } + + &.is-focus .el-input__inner { + border-color: $--select-input-focus-border-color; + } + } + + > .el-input { + display: block; + } + + @include e(input) { + border: none; + outline: none; + padding: 0; + margin-left: 15px; + color: $--select-multiple-input-color; + font-size: $--select-font-size; + appearance: none; + height: 28px; + background-color: transparent; + @include when(mini) { + height: 14px; + } + } + + @include e(close) { + cursor: pointer; + position: absolute; + top: 8px; + z-index: $--index-top; + right: 25px; + color: $--select-input-color; + line-height: 18px; + font-size: $--select-input-font-size; + + &:hover { + color: $--select-close-hover-color; + } + } + + @include e(tags) { + position: absolute; + line-height: normal; + white-space: normal; + z-index: $--index-normal; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .el-tag__close { + margin-top: -2px; + } + + .el-tag { + box-sizing: border-box; + border-color: transparent; + margin: 2px 0 2px 6px; + background-color: #f0f2f5; + + &__close.el-icon-close { + background-color: $--color-text-placeholder; + right: -7px; + top: 0; + color: $--color-white; + + &:hover { + background-color: $--color-text-secondary; + } + + &::before { + display: block; + transform: translate(0, .5px); + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/skeleton-item.scss b/nezha-fronted/src/assets/css/themes/src/skeleton-item.scss new file mode 100644 index 000000000..687c3c4ea --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/skeleton-item.scss @@ -0,0 +1,84 @@ +@import 'mixins/mixins'; +@import 'common/var'; + +@mixin circle-size($size) { + width: $size; + height: $size; + line-height: $size; +} + +@include b(skeleton) { + @include e(item) { + background: $--skeleton-color; + display: inline-block; + height: 16px; + border-radius: $--border-radius-base; + width: 100%; + } + + @include e(circle) { + border-radius: 50%; + @include circle-size($--avatar-medium-size); + + @include m(lg) { + @include circle-size($--avatar-large-size); + } + + @include m(md) { + @include circle-size($--avatar-small-size); + } + } + + @include e(button) { + height: 40px; + width: 64px; + border-radius: 4px; + } + + @include e(p) { + width: 100%; + @include when(last) { + width: 61%; + } + + @include when(first) { + width: 33%; + } + } + + @include e(text) { + width: 100%; + height: $--font-size-small; + } + + @include e(caption) { + height: $--font-size-extra-small; + } + + @include e(h1) { + height: $--font-size-extra-large; + } + + @include e(h3) { + height: $--font-size-large; + } + + @include e(h5) { + height: $--font-size-medium; + } + + @include e(image) { + width: unset; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0; + + svg { + fill: $--svg-monochrome-grey; + width: 22%; + height: 22%; + } + } + +} diff --git a/nezha-fronted/src/assets/css/themes/src/skeleton.scss b/nezha-fronted/src/assets/css/themes/src/skeleton.scss new file mode 100644 index 000000000..5bbfa08f3 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/skeleton.scss @@ -0,0 +1,40 @@ +@import 'mixins/mixins'; +@import 'common/var'; +@import "./skeleton-item.scss"; + +@mixin skeleton-color() { + background: linear-gradient( + 90deg, + $--skeleton-color 25%, + $--skeleton-to-color 37%, + $--skeleton-color 63% + ); + background-size: 400% 100%; + animation: #{$namespace}-skeleton-loading 1.4s ease infinite; +} + +@keyframes #{$namespace}-skeleton-loading { + 0% { + background-position: 100% 50%; + } + 100% { + background-position: 0 50%; + } +} + +@include b(skeleton) { + width: 100%; + @each $unit in (first-line, paragraph) { + @include e($unit) { + height: 16px; + margin-top: 16px; + background: $--skeleton-color; + } + } + + @include when(animated) { + .#{$namespace}-skeleton__item { + @include skeleton-color(); + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/slider.scss b/nezha-fronted/src/assets/css/themes/src/slider.scss new file mode 100644 index 000000000..666c52dcc --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/slider.scss @@ -0,0 +1,250 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "input-number"; +@import "tooltip"; +@import "common/var"; + +@include b(slider) { + + @include utils-clearfix; + + @include e(runway) { + width: 100%; + height: $--slider-height; + margin: $--slider-margin; + background-color: $--slider-runway-background-color; + border-radius: $--slider-border-radius; + position: relative; + cursor: pointer; + vertical-align: middle; + + &.show-input { + margin-right: 160px; + width: auto; + } + + &.disabled { + cursor: default; + + .el-slider__bar { + background-color: $--slider-disable-color; + } + + .el-slider__button { + border-color: $--slider-disable-color; + } + + .el-slider__button-wrapper { + &:hover, + &.hover { + cursor: not-allowed; + } + + &.dragging { + cursor: not-allowed; + } + } + + .el-slider__button { + &:hover, + &.hover, + &.dragging { + transform: scale(1); + } + + &:hover, + &.hover { + cursor: not-allowed; + } + + &.dragging { + cursor: not-allowed; + } + } + } + } + + @include e(input) { + float: right; + margin-top: 3px; + width: 130px; + + &.el-input-number--mini { + margin-top: 5px; + } + + &.el-input-number--medium { + margin-top: 0; + } + + &.el-input-number--large { + margin-top: -2px; + } + } + + @include e(bar) { + height: $--slider-height; + background-color: $--slider-main-background-color; + border-top-left-radius: $--slider-border-radius; + border-bottom-left-radius: $--slider-border-radius; + position: absolute; + } + + @include e(button-wrapper) { + height: $--slider-button-wrapper-size; + width: $--slider-button-wrapper-size; + position: absolute; + z-index: 1001; + top: $--slider-button-wrapper-offset; + transform: translateX(-50%); + background-color: transparent; + text-align: center; + user-select: none; + line-height: normal; + @include utils-vertical-center; + + .el-tooltip { + vertical-align: middle; + display: inline-block; + } + + &:hover, + &.hover { + cursor: grab; + } + + &.dragging { + cursor: grabbing; + } + } + + @include e(button) { + width: $--slider-button-size; + height: $--slider-button-size; + border: solid 2px $--slider-main-background-color; + background-color: $--color-white; + border-radius: 50%; + transition: .2s; + user-select: none; + + &:hover, + &.hover, + &.dragging { + transform: scale(1.2); + } + + &:hover, + &.hover { + cursor: grab; + } + + &.dragging { + cursor: grabbing; + } + } + + @include e(stop) { + position: absolute; + height: $--slider-height; + width: $--slider-height; + border-radius: $--border-radius-circle; + background-color: $--slider-stop-background-color; + transform: translateX(-50%); + } + + @include e(marks) { + top: 0; + left: 12px; + width: 18px; + height: 100%; + + @include e(marks-text) { + position: absolute; + transform: translateX(-50%); + font-size: 14px; + color: $--color-info; + margin-top: 15px; + } + } + + @include when(vertical) { + position: relative; + .el-slider__runway { + width: $--slider-height; + height: 100%; + margin: 0 16px; + } + .el-slider__bar { + width: $--slider-height; + height: auto; + border-radius: 0 0 3px 3px; + } + .el-slider__button-wrapper { + top: auto; + left: $--slider-button-wrapper-offset; + transform: translateY(50%); + } + .el-slider__stop { + transform: translateY(50%); + } + &.el-slider--with-input { + padding-bottom: #{$--input-medium-height + 22px}; + .el-slider__input { + overflow: visible; + float: none; + position: absolute; + bottom: 22px; + width: 36px; + margin-top: 15px; + .el-input__inner { + text-align: center; + padding-left: 5px; + padding-right: 5px; + } + .el-input-number__decrease, + .el-input-number__increase + { + top: $--input-small-height; + margin-top: -1px; + border: $--input-border; + line-height: 20px; + box-sizing: border-box; + transition: $--border-transition-base; + } + .el-input-number__decrease { + width: 18px; + right: 18px; + border-bottom-left-radius: $--input-border-radius; + } + .el-input-number__increase { + width: 19px; + border-bottom-right-radius: $--input-border-radius; + & ~ .el-input .el-input__inner { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + &:hover { + .el-input-number__decrease, + .el-input-number__increase + { + border-color: $--input-hover-border; + } + } + &:active { + .el-input-number__decrease, + .el-input-number__increase + { + border-color: $--input-focus-border; + } + } + } + } + + @include e(marks-text) { + margin-top: 0; + left: 15px; + transform: translateY(50%); + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/spinner.scss b/nezha-fronted/src/assets/css/themes/src/spinner.scss new file mode 100644 index 000000000..b76ffc09d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/spinner.scss @@ -0,0 +1,44 @@ +@import "mixins/mixins"; + +@include b(time-spinner) { + width: 100%; + white-space: nowrap; +} + +@include b(spinner) { + display: inline-block; + vertical-align: middle; +} +@include b(spinner-inner) { + animation: rotate 2s linear infinite; + width: 50px; + height: 50px; + + & .path { + stroke: #ececec; + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; + } + +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/step.scss b/nezha-fronted/src/assets/css/themes/src/step.scss new file mode 100644 index 000000000..37a831c5d --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/step.scss @@ -0,0 +1,317 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(step) { + position: relative; + flex-shrink: 1; + + @include pseudo(last-of-type) { + @include e(line) { + display: none; + } + + // 只有未设置 space 的情况下才自适应宽度 + @include when(flex) { + flex-basis: auto !important; + flex-shrink: 0; + flex-grow: 0; + } + + @include e((main, description)) { + padding-right: 0; + } + } + + @include e(head) { + position: relative; + width: 100%; + + @include when(process) { + color: $--color-text-primary; + border-color: $--color-text-primary; + } + + @include when(wait) { + color: $--color-text-placeholder; + border-color: $--color-text-placeholder; + } + + @include when(success) { + color: $--color-success; + border-color: $--color-success; + } + + @include when(error) { + color: $--color-danger; + border-color: $--color-danger; + } + + @include when(finish) { + color: $--color-primary; + border-color: $--color-primary; + } + } + + @include e(icon) { + position: relative; + z-index: 1; + display: inline-flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + font-size: 14px; + box-sizing: border-box; + background: $--color-white; + transition: .15s ease-out; + + @include when(text) { + border-radius: 50%; + border: 2px solid; + border-color: inherit; + } + + @include when(icon) { + width: 40px; + } + } + + @include e(icon-inner) { + display: inline-block; + user-select: none; + text-align: center; + font-weight: bold; + line-height: 1; + color: inherit; + + &[class*=el-icon]:not(.is-status) { + font-size: 25px; + font-weight: normal; + } + + // 组件自身表示状态的图标 + @include when(status) { + transform: translateY(1px); + } + } + + @include e(line) { + position: absolute; + border-color: inherit; + background-color: $--color-text-placeholder; + } + + @include e(line-inner) { + display: block; + border-width: 1px; + border-style: solid; + border-color: inherit; + transition: .15s ease-out; + box-sizing: border-box; + width: 0; + height: 0; + } + + @include e(main) { + white-space: normal; + text-align: left; + } + + @include e(title) { + font-size: 16px; + line-height: 38px; + + @include when(process) { + font-weight: bold; + color: $--color-text-primary; + } + + @include when(wait) { + color: $--color-text-placeholder; + } + + @include when(success) { + color: $--color-success; + } + + @include when(error) { + color: $--color-danger; + } + + @include when(finish) { + color: $--color-primary; + } + } + + @include e(description) { + padding-right: 10%; + margin-top: -5px; + font-size: 12px; + line-height: 20px; + font-weight: normal; + + @include when(process) { + color: $--color-text-primary; + } + + @include when(wait) { + color: $--color-text-placeholder; + } + + @include when(success) { + color: $--color-success; + } + + @include when(error) { + color: $--color-danger; + } + + @include when(finish) { + color: $--color-primary; + } + } + + @include when(horizontal) { + display: inline-block; + + @include e(line) { + height: 2px; + top: 11px; + left: 0; + right: 0; + } + } + + @include when(vertical) { + display: flex; + + @include e(head) { + flex-grow: 0; + width: 24px; + } + + @include e(main) { + padding-left: 10px; + flex-grow: 1; + } + + @include e(title) { + line-height: 24px; + padding-bottom: 8px; + } + + @include e(line) { + width: 2px; + top: 0; + bottom: 0; + left: 11px; + } + + @include e(icon) { + @include when(icon) { + width: 24px; + } + } + } + + @include when(center) { + + @include e(head) { + text-align: center; + } + + @include e(main) { + text-align: center; + } + + @include e(description) { + padding-left: 20%; + padding-right: 20%; + } + + @include e(line) { + left: 50%; + right: -50%; + } + } + + @include when(simple) { + display: flex; + align-items: center; + + @include e(head) { + width: auto; + font-size: 0; + padding-right: 10px; + } + + @include e(icon) { + background: transparent; + width: 16px; + height: 16px; + font-size: 12px; + } + + @include e(icon-inner) { + &[class*=el-icon]:not(.is-status) { + font-size: 18px; + } + + &.is-status { + transform: scale(.8) translateY(1px); + } + } + + @include e(main) { + position: relative; + display: flex; + align-items: stretch; + flex-grow: 1; + } + + @include e(title) { + font-size: 16px; + line-height: 20px; + } + + @include pseudo('not(:last-of-type)') { + @include e(title) { + max-width: 50%; + word-break: break-all; + } + } + + @include e(arrow) { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + height: 15px; + width: 1px; + background: $--color-text-placeholder; + } + + &::before { + transform: rotate(-45deg) translateY(-4px); + transform-origin: 0 0; + } + + &::after { + transform: rotate(45deg) translateY(4px); + transform-origin: 100% 100%; + } + } + + @include pseudo(last-of-type) { + @include e(arrow) { + display: none; + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/steps.scss b/nezha-fronted/src/assets/css/themes/src/steps.scss new file mode 100644 index 000000000..aa3464eea --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/steps.scss @@ -0,0 +1,20 @@ +@import "mixins/mixins"; + +@include b(steps) { + display: flex; + + @include m(simple) { + padding: 13px 8%; + border-radius: 4px; + background: $--background-color-base; + } + + @include m(horizontal) { + white-space: nowrap; + } + + @include m(vertical) { + height: 100%; + flex-flow: column; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/submenu.scss b/nezha-fronted/src/assets/css/themes/src/submenu.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/switch.scss b/nezha-fronted/src/assets/css/themes/src/switch.scss new file mode 100644 index 000000000..c38eedef1 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/switch.scss @@ -0,0 +1,116 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(switch) { + display: inline-flex; + align-items: center; + position: relative; + font-size: $--switch-font-size; + line-height: $--switch-height; + height: $--switch-height; + vertical-align: middle; + @include when(disabled) { + & .el-switch__core, + & .el-switch__label { + cursor: not-allowed; + } + } + + @include e(label) { + transition: .2s; + height: $--switch-height; + display: inline-block; + font-size: $--switch-font-size; + font-weight: 500; + cursor: pointer; + vertical-align: middle; + color: $--color-text-primary; + + @include when(active) { + color: $--color-primary; + } + + @include m(left) { + margin-right: 10px; + } + @include m(right) { + margin-left: 10px; + } + & * { + line-height: 1; + font-size: $--switch-font-size; + display: inline-block; + } + } + + @include e(input) { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0; + } + + @include e(core) { + margin: 0; + display: inline-block; + position: relative; + width: $--switch-width; + height: $--switch-height; + border: 1px solid $--switch-off-color; + outline: none; + border-radius: $--switch-core-border-radius; + box-sizing: border-box; + background: $--switch-off-color; + cursor: pointer; + transition: border-color .3s, background-color .3s; + vertical-align: middle; + + &:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + border-radius: $--border-radius-circle; + transition: all .3s; + width: $--switch-button-size; + height: $--switch-button-size; + background-color: $--color-white; + } + } + + @include when(checked) { + .el-switch__core { + border-color: $--switch-on-color; + background-color: $--switch-on-color; + &::after { + left: 100%; + margin-left: -$--switch-button-size - 1px; + } + } + } + + @include when(disabled) { + opacity: 0.6; + } + + @include m(wide) { + .el-switch__label { + &.el-switch__label--left { + span { + left: 10px; + } + } + &.el-switch__label--right { + span { + right: 10px; + } + } + } + } + + & .label-fade-enter, + & .label-fade-leave-active { + opacity: 0; + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/tab-pane.scss b/nezha-fronted/src/assets/css/themes/src/tab-pane.scss new file mode 100644 index 000000000..e69de29bb diff --git a/nezha-fronted/src/assets/css/themes/src/table-column.scss b/nezha-fronted/src/assets/css/themes/src/table-column.scss new file mode 100644 index 000000000..6fd54e7a4 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/table-column.scss @@ -0,0 +1,97 @@ +@import "mixins/mixins"; +@import "checkbox"; +@import "tag"; +@import "common/var"; + +@include b(table-column) { + @include m(selection) { + .cell { + padding-left: 14px; + padding-right: 14px; + } + } +} + +@include b(table-filter) { + border: solid 1px $--border-color-lighter; + border-radius: 2px; + background-color: $--color-white; + box-shadow: $--dropdown-menu-box-shadow; + box-sizing: border-box; + margin: 2px 0; + + /** used for dropdown mode */ + @include e(list) { + padding: 5px 0; + margin: 0; + list-style: none; + min-width: 100px; + } + + @include e(list-item) { + line-height: 36px; + padding: 0 10px; + cursor: pointer; + font-size: $--font-size-base; + + &:hover { + background-color: $--dropdown-menuItem-hover-fill; + color: $--dropdown-menuItem-hover-color; + } + + @include when(active) { + background-color: $--color-primary; + color: $--color-white; + } + } + + @include e(content) { + min-width: 100px; + } + + @include e(bottom) { + border-top: 1px solid $--border-color-lighter; + padding: 8px; + + button { + background: transparent; + border: none; + color: $--color-text-regular; + cursor: pointer; + font-size: $--font-size-small; + padding: 0 3px; + + &:hover { + color: $--color-primary; + } + + &:focus { + outline: none; + } + + &.is-disabled { + color: $--disabled-color-base; + cursor: not-allowed; + } + } + } + + @include e(wrap) { + max-height: 280px; + } + + @include e(checkbox-group) { + padding: 10px; + + label.el-checkbox { + display: block; + margin-right: 5px; + margin-bottom: 8px; + margin-left: 5px; + } + + .el-checkbox:last-child { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/src/table.scss b/nezha-fronted/src/assets/css/themes/src/table.scss new file mode 100644 index 000000000..319c5d135 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/table.scss @@ -0,0 +1,563 @@ +@import "mixins/mixins"; +@import "checkbox"; +@import "tag"; +@import "tooltip"; +@import "common/var"; + +@include b(table) { + position: relative; + overflow: hidden; + box-sizing: border-box; + flex: 1; + width: 100%; + max-width: 100%; + background-color: $--color-white; + font-size: 14px; + color: $--table-font-color; + + // 数据为空 + @include e(empty-block) { + min-height: 60px; + text-align: center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + @include e(empty-text) { + // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items + // set empty text line height up to contrainer min-height as workaround. + line-height: 60px; + width: 50%; + color: $--color-text-secondary; + } + + // 展开行 + @include e(expand-column) { + .cell { + padding: 0; + text-align: center; + } + } + + @include e(expand-icon) { + position: relative; + cursor: pointer; + color: #666; + font-size: 12px; + transition: transform 0.2s ease-in-out; + height: 20px; + + @include m(expanded) { + transform: rotate(90deg); + } + + > .el-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -5px; + margin-top: -5px; + } + } + + @include e(expanded-cell) { + background-color: $--color-white; + + // 纯属为了增加权重 + &[class*=cell] { + padding: 20px 50px; + } + + &:hover { + background-color: transparent !important; + } + } + + @include e(placeholder) { + display: inline-block; + width: 20px; + } + + @include e(append-wrapper) { + // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing + overflow: hidden; + } + + @include m(fit) { + border-right: 0; + border-bottom: 0; + + th.gutter, td.gutter { + border-right-width: 1px; + } + } + + @include m(scrollable-x) { + .el-table__body-wrapper { + overflow-x: auto; + } + } + + @include m(scrollable-y) { + .el-table__body-wrapper { + overflow-y: auto; + } + } + + thead { + color: $--table-header-font-color; + font-weight: 500; + + &.is-group { + th { + background: $--background-color-base; + } + } + } + + th, td { + padding: 12px 0; + min-width: 0; + box-sizing: border-box; + text-overflow: ellipsis; + vertical-align: middle; + position: relative; + text-align: left; + + @include when(center) { + text-align: center; + } + + @include when(right) { + text-align: right; + } + + &.gutter { + width: 15px; + border-right-width: 0; + border-bottom-width: 0; + padding: 0; + } + + &.is-hidden { + > * { + visibility: hidden; + } + } + } + + @include m(medium) { + th, td { + padding: 10px 0; + } + } + + @include m(small) { + font-size: 12px; + th, td { + padding: 8px 0; + } + } + + @include m(mini) { + font-size: 12px; + th, td { + padding: 6px 0; + } + } + + tr { + background-color: $--color-white; + + input[type="checkbox"] { + margin: 0; + } + } + + th.is-leaf, td { + border-bottom: $--table-border; + } + + th.is-sortable { + cursor: pointer; + } + + th { + overflow: hidden; + user-select: none; + background-color: $--table-header-background-color; + + > .cell { + display: inline-block; + box-sizing: border-box; + position: relative; + vertical-align: middle; + padding-left: 10px; + padding-right: 10px; + width: 100%; + + &.highlight { + color: $--color-primary; + } + } + + &.required > div::before { + display: inline-block; + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: #ff4d51; + margin-right: 5px; + vertical-align: middle; + } + } + + td { + div { + box-sizing: border-box; + } + + &.gutter { + width: 0; + } + } + + .cell { + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-all; + line-height: 23px; + padding-left: 10px; + padding-right: 10px; + + &.el-tooltip { + white-space: nowrap; + min-width: 50px; + } + } + + // 拥有多级表头 + @include m((group, border)) { + border: $--table-border; + + @include share-rule(border-pseudo) { + content: ''; + position: absolute; + background-color: $--table-border-color; + z-index: 1; + } + + // 表格右部伪 border + &::after { + @include extend-rule(border-pseudo); + top: 0; + right: 0; + width: 1px; + height: 100%; + } + } + + // 表格底部伪 border，总是有的 + &::before { + @include extend-rule(border-pseudo); + left: 0; + bottom: 0; + width: 100%; + height: 1px; + } + + // table--border + @include m(border) { + border-right: none; + border-bottom: none; + + &.el-loading-parent--relative { + border-color: transparent; + } + + th, td { + border-right: $--table-border; + + &:first-child .cell { + padding-left: 10px; + } + } + + th.gutter:last-of-type { + border-bottom: $--table-border; + border-bottom-width: 1px; + } + + & th { + border-bottom: $--table-border; + } + } + + @include m(hidden) { + visibility: hidden; + } + + @include e((fixed, fixed-right)) { + position: absolute; + top: 0; + left: 0; + overflow-x: hidden; + overflow-y: hidden; + box-shadow: $--table-fixed-box-shadow; + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: $--border-color-lighter; + z-index: 4; + } + } + + @include e(fixed-right-patch) { + position: absolute; + top: -1px; + right: 0; + background-color: $--color-white; + border-bottom: $--table-border; + } + + @include e(fixed-right) { + top: 0; + left: auto; + right: 0; + + .el-table__fixed-header-wrapper, + .el-table__fixed-body-wrapper, + .el-table__fixed-footer-wrapper { + left: auto; + right: 0; + } + } + + @include e(fixed-header-wrapper) { + position: absolute; + left: 0; + top: 0; + z-index: 3; + } + + @include e(fixed-footer-wrapper) { + position: absolute; + left: 0; + bottom: 0; + z-index: 3; + + & tbody td { + border-top: $--table-border; + background-color: $--table-row-hover-background-color; + color: $--table-font-color; + } + } + + @include e(fixed-body-wrapper) { + position: absolute; + left: 0; + top: 37px; + overflow: hidden; + z-index: 3; + } + + @include e((header-wrapper, body-wrapper, footer-wrapper)) { + width: 100%; + } + + @include e(footer-wrapper) { + margin-top: -1px; + td { + border-top: $--table-border; + } + } + + @include e((header, body, footer)) { + table-layout: fixed; + border-collapse: separate; + } + + @include e((header-wrapper, footer-wrapper)) { + overflow: hidden; + + & tbody td { + background-color: $--table-row-hover-background-color; + color: $--table-font-color; + } + } + + @include e(body-wrapper) { + overflow: hidden; + position: relative; + + @include when(scrolling-none) { + ~ .el-table__fixed, + ~ .el-table__fixed-right { + box-shadow: none; + } + } + + @include when(scrolling-left) { + ~ .el-table__fixed { + box-shadow: none; + } + } + + @include when(scrolling-right) { + ~ .el-table__fixed-right { + box-shadow: none; + } + } + + .el-table--border { + @include when(scrolling-right) { + ~ .el-table__fixed-right { + border-left: $--table-border; + } + } + + @include when(scrolling-left) { + ~ .el-table__fixed { + border-right: $--table-border; + } + } + } + } + + .caret-wrapper { + display: inline-flex; + flex-direction: column; + align-items: center; + height: 34px; + width: 24px; + vertical-align: middle; + cursor: pointer; + overflow: initial; + position: relative; + } + + .sort-caret { + width: 0; + height: 0; + border: solid 5px transparent; + position: absolute; + left: 7px; + + &.ascending { + border-bottom-color: $--color-text-placeholder; + top: 5px; + } + + &.descending { + border-top-color: $--color-text-placeholder; + bottom: 7px; + } + } + + .ascending .sort-caret.ascending { + border-bottom-color: $--color-primary; + } + + .descending .sort-caret.descending { + border-top-color: $--color-primary; + } + + .hidden-columns { + visibility: hidden; + position: absolute; + z-index: -1; + } + + @include m(striped) { + & .el-table__body { + & tr.el-table__row--striped { + td { + background: #FAFAFA; + } + + &.current-row td { + background-color: $--table-current-row-background-color; + } + } + } + } + + @include e(body) { + tr.hover-row { + &, &.el-table__row--striped { + &, &.current-row { + > td { + background-color: $--table-row-hover-background-color; + } + } + } + } + + tr.current-row > td { + background-color: $--table-current-row-background-color; + } + } + + @include e(column-resize-proxy) { + position: absolute; + left: 200px; + top: 0; + bottom: 0; + width: 0; + border-left: $--table-border; + z-index: 10; + } + + @include e(column-filter-trigger) { + display: inline-block; + line-height: 34px; + cursor: pointer; + + & i { + color: $--color-info; + font-size: 12px; + transform: scale(.75); + } + } + + @include m(enable-row-transition) { + .el-table__body td { + transition: background-color .25s ease; + } + } + + @include m(enable-row-hover) { + .el-table__body tr:hover > td { + background-color: $--table-row-hover-background-color; + } + } + + @include m(fluid-height) { + .el-table__fixed, + .el-table__fixed-right { + bottom: 0; + overflow: hidden; + } + } + + [class*=el-table__row--level] { + .el-table__expand-icon { + display: inline-block; + width: 20px; + line-height: 20px; + height: 20px; + text-align: center; + margin-right: 3px; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/tabs.scss b/nezha-fronted/src/assets/css/themes/src/tabs.scss new file mode 100644 index 000000000..7385c2f72 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/tabs.scss @@ -0,0 +1,602 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(tabs) { + @include e(header) { + padding: 0; + position: relative; + margin: 0 0 15px; + } + @include e(active-bar) { + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background-color: $--color-primary; + z-index: 1; + transition: transform .3s cubic-bezier(.645,.045,.355,1); + list-style: none; + } + @include e(new-tab) { + float: right; + border: 1px solid #d3dce6; + height: 18px; + width: 18px; + line-height: 18px; + margin: 12px 0 9px 10px; + border-radius: 3px; + text-align: center; + font-size: 12px; + color: #d3dce6; + cursor: pointer; + transition: all .15s; + + .el-icon-plus { + transform: scale(0.8, 0.8); + } + + &:hover { + color: $--color-primary; + } + } + @include e(nav-wrap) { + overflow: hidden; + margin-bottom: -1px; + position: relative; + + &::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background-color: $--border-color-light; + z-index: $--index-normal; + } + + @include when(scrollable) { + padding: 0 20px; + box-sizing: border-box; + } + } + @include e(nav-scroll) { + overflow: hidden; + } + @include e((nav-next, nav-prev)) { + position: absolute; + cursor: pointer; + line-height: 44px; + font-size: 12px; + color: $--color-text-secondary; + } + @include e(nav-next) { + right: 0; + } + @include e(nav-prev) { + left: 0; + } + @include e(nav) { + white-space: nowrap; + position: relative; + transition: transform .3s; + float: left; + z-index: #{$--index-normal + 1}; + + @include when(stretch) { + min-width: 100%; + display: flex; + & > * { + flex: 1; + text-align: center; + } + } + } + @include e(item) { + padding: 0 20px; + height: 40px; + box-sizing: border-box; + line-height: 40px; + display: inline-block; + list-style: none; + font-size: 14px; + font-weight: 500; + color: $--color-text-primary; + position: relative; + + &:focus, &:focus:active { + outline: none; + } + + &:focus.is-active.is-focus:not(:active) { + box-shadow: 0 0 2px 2px $--color-primary inset; + border-radius: 3px; + } + + & .el-icon-close { + border-radius: 50%; + text-align: center; + transition: all .3s cubic-bezier(.645,.045,.355,1); + margin-left: 5px; + &:before { + transform: scale(.9); + display: inline-block; + } + + &:hover { + background-color: $--color-text-placeholder; + color: $--color-white; + } + } + + @include when(active) { + color: $--color-primary; + } + + &:hover { + color: $--color-primary; + cursor: pointer; + } + + @include when(disabled) { + color: $--disabled-color-base; + cursor: default; + } + } + @include e(content) { + overflow: hidden; + position: relative; + } + @include m(card) { + > .el-tabs__header { + border-bottom: 1px solid $--border-color-light; + } + > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; + } + > .el-tabs__header .el-tabs__nav { + border: 1px solid $--border-color-light; + border-bottom: none; + border-radius: 4px 4px 0 0; + box-sizing: border-box; + } + > .el-tabs__header .el-tabs__active-bar { + display: none; + } + > .el-tabs__header .el-tabs__item .el-icon-close { + position: relative; + font-size: 12px; + width: 0; + height: 14px; + vertical-align: middle; + line-height: 15px; + overflow: hidden; + top: -1px; + right: -2px; + transform-origin: 100% 50%; + } + > .el-tabs__header .el-tabs__item { + border-bottom: 1px solid transparent; + border-left: 1px solid $--border-color-light; + transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1); + &:first-child { + border-left: none; + } + &.is-closable { + &:hover { + padding-left: 13px; + padding-right: 13px; + + & .el-icon-close { + width: 14px; + } + } + } + &.is-active { + border-bottom-color: $--color-white; + + &.is-closable { + padding-left: 20px; + padding-right: 20px; + + .el-icon-close { + width: 14px; + } + } + } + } + } + @include m(border-card) { + background: $--color-white; + border: 1px solid $--border-color-base; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); + + > .el-tabs__content { + padding: 15px; + } + > .el-tabs__header { + background-color: $--background-color-base; + border-bottom: 1px solid $--border-color-light; + margin: 0; + } + > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; + } + > .el-tabs__header .el-tabs__item { + transition: all .3s cubic-bezier(.645,.045,.355,1); + border: 1px solid transparent; + margin-top: -1px; + color: $--color-text-secondary; + + &:first-child { + margin-left: -1px; + } + + & + .el-tabs__item { + margin-left: -1px; + } + + &.is-active { + color: $--color-primary; + background-color: $--color-white; + border-right-color: $--border-color-base; + border-left-color: $--border-color-base; + } + &:not(.is-disabled):hover { + color: $--color-primary; + } + &.is-disabled { + color: $--disabled-color-base; + } + } + + > .el-tabs__header .is-scrollable .el-tabs__item:first-child { + margin-left: 0; + } + } + @include m((top, bottom)) { + .el-tabs__item.is-top:nth-child(2), + .el-tabs__item.is-bottom:nth-child(2) { + padding-left: 0; + } + .el-tabs__item.is-top:last-child, + .el-tabs__item.is-bottom:last-child { + padding-right: 0; + } + + &.el-tabs--border-card, &.el-tabs--card, + .el-tabs--left, .el-tabs--right { + > .el-tabs__header { + .el-tabs__item:nth-child(2) { + padding-left: 20px; + } + .el-tabs__item:last-child { + padding-right: 20px; + } + } + } + } + @include m(bottom) { + .el-tabs__header.is-bottom { + margin-bottom: 0; + margin-top: 10px; + } + &.el-tabs--border-card { + .el-tabs__header.is-bottom { + border-bottom: 0; + border-top: 1px solid $--border-color-base; + } + .el-tabs__nav-wrap.is-bottom { + margin-top: -1px; + margin-bottom: 0; + } + .el-tabs__item.is-bottom:not(.is-active) { + border: 1px solid transparent; + } + .el-tabs__item.is-bottom { + margin: 0 -1px -1px -1px; + } + } + } + @include m((left, right)) { + overflow: hidden; + + .el-tabs__header.is-left, + .el-tabs__header.is-right, + .el-tabs__nav-wrap.is-left, + .el-tabs__nav-wrap.is-right, + .el-tabs__nav-scroll { + height: 100%; + } + + .el-tabs__active-bar.is-left, + .el-tabs__active-bar.is-right { + top: 0; + bottom: auto; + width: 2px; + height: auto; + } + + .el-tabs__nav-wrap.is-left, + .el-tabs__nav-wrap.is-right { + margin-bottom: 0; + + > .el-tabs__nav-prev, + > .el-tabs__nav-next { + height: 30px; + line-height: 30px; + width: 100%; + text-align: center; + cursor: pointer; + + i { + transform: rotateZ(90deg); + } + } + > .el-tabs__nav-prev { + left: auto; + top: 0; + } + > .el-tabs__nav-next { + right: auto; + bottom: 0; + } + + &.is-scrollable { + padding: 30px 0; + } + + &::after { + height: 100%; + width: 2px; + bottom: auto; + top: 0; + } + } + + .el-tabs__nav.is-left, + .el-tabs__nav.is-right { + float: none; + } + .el-tabs__item.is-left, + .el-tabs__item.is-right { + display: block; + } + } + @include m(left) { + .el-tabs__header.is-left { + float: left; + margin-bottom: 0; + margin-right: 10px; + } + .el-tabs__nav-wrap.is-left { + margin-right: -1px; + &::after { + left: auto; + right: 0; + } + } + .el-tabs__active-bar.is-left { + right: 0; + left: auto; + } + .el-tabs__item.is-left { + text-align: right; + } + + &.el-tabs--card { + .el-tabs__active-bar.is-left { + display: none; + } + .el-tabs__item.is-left { + border-left: none; + border-right: 1px solid $--border-color-light; + border-bottom: none; + border-top: 1px solid $--border-color-light; + text-align: left; + } + .el-tabs__item.is-left:first-child { + border-right: 1px solid $--border-color-light; + border-top: none; + } + .el-tabs__item.is-left.is-active { + border: 1px solid $--border-color-light; + border-right-color: #fff; + border-left: none; + border-bottom: none; + + &:first-child { + border-top: none; + } + &:last-child { + border-bottom: none; + } + } + + .el-tabs__nav { + border-radius: 4px 0 0 4px; + border-bottom: 1px solid $--border-color-light; + border-right: none; + } + + .el-tabs__new-tab { + float: none; + } + } + + &.el-tabs--border-card { + .el-tabs__header.is-left { + border-right: 1px solid #dfe4ed; + } + .el-tabs__item.is-left { + border: 1px solid transparent; + margin: -1px 0 -1px -1px; + + &.is-active { + border-color: transparent; + border-top-color: rgb(209, 219, 229); + border-bottom-color: rgb(209, 219, 229); + } + } + } + } + @include m(right) { + .el-tabs__header.is-right { + float: right; + margin-bottom: 0; + margin-left: 10px; + } + + .el-tabs__nav-wrap.is-right { + margin-left: -1px; + &::after { + left: 0; + right: auto; + } + } + + .el-tabs__active-bar.is-right { + left: 0; + } + + &.el-tabs--card { + .el-tabs__active-bar.is-right { + display: none; + } + .el-tabs__item.is-right { + border-bottom: none; + border-top: 1px solid $--border-color-light; + } + .el-tabs__item.is-right:first-child { + border-left: 1px solid $--border-color-light; + border-top: none; + } + .el-tabs__item.is-right.is-active { + border: 1px solid $--border-color-light; + border-left-color: #fff; + border-right: none; + border-bottom: none; + + &:first-child { + border-top: none; + } + &:last-child { + border-bottom: none; + } + } + + .el-tabs__nav { + border-radius: 0 4px 4px 0; + border-bottom: 1px solid $--border-color-light; + border-left: none; + } + } + &.el-tabs--border-card { + .el-tabs__header.is-right { + border-left: 1px solid #dfe4ed; + } + .el-tabs__item.is-right { + border: 1px solid transparent; + margin: -1px -1px -1px 0; + + &.is-active { + border-color: transparent; + border-top-color: rgb(209, 219, 229); + border-bottom-color: rgb(209, 219, 229); + } + } + } + } +} + +.slideInRight-transition, +.slideInLeft-transition { + display: inline-block; +} +.slideInRight-enter { + animation: slideInRight-enter .3s; +} +.slideInRight-leave { + position: absolute; + left: 0; + right: 0; + animation: slideInRight-leave .3s; +} +.slideInLeft-enter { + animation: slideInLeft-enter .3s; +} +.slideInLeft-leave { + position: absolute; + left: 0; + right: 0; + animation: slideInLeft-leave .3s; +} + +@keyframes slideInRight-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%) + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0) + } +} +@keyframes slideInRight-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1 + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + opacity: 0 + } +} +@keyframes slideInLeft-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%) + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0) + } +} +@keyframes slideInLeft-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1 + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0 + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/tag.scss b/nezha-fronted/src/assets/css/themes/src/tag.scss new file mode 100644 index 000000000..162290206 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/tag.scss @@ -0,0 +1,163 @@ +@import "mixins/mixins"; +@import "common/var"; + +@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) { + background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight); + border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight); + color: mix($--tag-primary-color, $--color-white, $fontColorWeight); + + @include when(hit) { + border-color: $--tag-primary-color; + } + + .el-tag__close { + color: mix($--tag-primary-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight); + } + } + + &.el-tag--info { + background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight); + border-color: mix($--tag-info-color, $--color-white, $borderColorWeight); + color: mix($--tag-info-color, $--color-white, $fontColorWeight); + + @include when(hit) { + border-color: $--tag-info-color; + } + + .el-tag__close { + color: mix($--tag-info-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight); + } + } + } + + &.el-tag--success { + background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight); + border-color: mix($--tag-success-color, $--color-white, $borderColorWeight); + color: mix($--tag-success-color, $--color-white, $fontColorWeight); + + @include when(hit) { + border-color: $--tag-success-color; + } + + .el-tag__close { + color: mix($--tag-success-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight); + } + } + } + + &.el-tag--warning { + background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight); + border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight); + color: mix($--tag-warning-color, $--color-white, $fontColorWeight); + + @include when(hit) { + border-color: $--tag-warning-color; + } + + .el-tag__close { + color: mix($--tag-warning-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight); + } + } + } + + &.el-tag--danger { + background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight); + border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight); + color: mix($--tag-danger-color, $--color-white, $fontColorWeight); + + @include when(hit) { + border-color: $--tag-danger-color; + } + + .el-tag__close { + color: mix($--tag-danger-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight); + } + } + } +} + +@include b(tag) { + @include genTheme(10%, 20%, 100%, 100%); + display: inline-block; + height: 32px; + padding: $--tag-padding; + line-height: 30px; + font-size: $--tag-font-size; + color: $--tag-primary-color; + border-width: 1px; + border-style: solid; + border-radius: $--tag-border-radius; + box-sizing: border-box; + white-space: nowrap; + + .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; + + &::before { + display: block; + } + } + + @include m(dark) { + @include genTheme(100%, 100%, 0, 80%); + } + + @include m(plain) { + @include genTheme(0, 40%, 100%, 100%); + } + + @include m(medium) { + height: 28px; + line-height: 26px; + + .el-icon-close { + transform: scale(.8); + } + } + + @include m(small) { + height: 24px; + padding: 0 8px; + line-height: 22px; + + .el-icon-close { + transform: scale(.8); + } + } + + @include m(mini) { + height: 20px; + padding: 0 5px; + line-height: 19px; + + .el-icon-close { + margin-left: -3px; + transform: scale(.7); + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/time-picker.scss b/nezha-fronted/src/assets/css/themes/src/time-picker.scss new file mode 100644 index 000000000..10aaf54f6 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/time-picker.scss @@ -0,0 +1,8 @@ +@import "./date-picker/picker.scss"; +@import "./date-picker/picker-panel.scss"; +@import "./date-picker/time-spinner.scss"; +@import "./date-picker/time-picker.scss"; +@import "./date-picker/time-range-picker.scss"; +@import "./input.scss"; +@import "./scrollbar.scss"; +@import "./popper"; diff --git a/nezha-fronted/src/assets/css/themes/src/time-select.scss b/nezha-fronted/src/assets/css/themes/src/time-select.scss new file mode 100644 index 000000000..0de385387 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/time-select.scss @@ -0,0 +1,37 @@ +@import "common/var"; +@import "./date-picker/picker.scss"; +@import "./date-picker/date-picker.scss"; +@import "./scrollbar.scss"; +@import "./popper"; + +.time-select { + margin: 5px 0; + min-width: 0; +} + +.time-select .el-picker-panel__content { + max-height: 200px; + margin: 0; +} + +.time-select-item { + padding: 8px 10px; + font-size: 14px; + line-height: 20px; +} + +.time-select-item.selected:not(.disabled) { + color: $--color-primary; + font-weight: bold; +} + +.time-select-item.disabled { + color: $--datepicker-border-color; + cursor: not-allowed; +} + +.time-select-item:hover { + background-color: $--background-color-base; + font-weight: bold; + cursor: pointer; +} diff --git a/nezha-fronted/src/assets/css/themes/src/timeline-item.scss b/nezha-fronted/src/assets/css/themes/src/timeline-item.scss new file mode 100644 index 000000000..b36ed2b3e --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/timeline-item.scss @@ -0,0 +1,86 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(timeline-item) { + position: relative; + padding-bottom: 20px; + + @include e(wrapper) { + position: relative; + padding-left: 28px; + top: -3px; + } + + @include e(tail) { + position: absolute; + left: 4px; + height: 100%; + border-left: 2px solid $--timeline-node-color; + } + + @include e(icon) { + color: $--color-white; + font-size: $--font-size-small; + } + + @include e(node) { + position: absolute; + background-color: $--timeline-node-color; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + @include m(normal) { + left: -1px; + width: $--timeline-node-size-normal; + height: $--timeline-node-size-normal; + } + @include m(large) { + left: -2px; + width: $--timeline-node-size-large; + height: $--timeline-node-size-large; + } + + @include m(primary) { + background-color: $--color-primary; + } + @include m(success) { + background-color: $--color-success; + } + @include m(warning) { + background-color: $--color-warning; + } + @include m(danger) { + background-color: $--color-danger; + } + @include m(info) { + background-color: $--color-info; + } + } + + @include e(dot) { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + } + + @include e(content) { + color: $--color-text-primary; + } + + @include e(timestamp) { + color: $--color-text-secondary; + line-height: 1; + font-size: $--font-size-small; + + @include when(top) { + margin-bottom: 8px; + padding-top: 4px; + } + @include when(bottom) { + margin-top: 8px; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/timeline.scss b/nezha-fronted/src/assets/css/themes/src/timeline.scss new file mode 100644 index 000000000..60a779eca --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/timeline.scss @@ -0,0 +1,14 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(timeline) { + margin: 0; + font-size: $--font-size-base; + list-style: none; + + & .el-timeline-item:last-child { + & .el-timeline-item__tail { + display: none; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/tooltip.scss b/nezha-fronted/src/assets/css/themes/src/tooltip.scss new file mode 100644 index 000000000..0a016a85c --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/tooltip.scss @@ -0,0 +1,141 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(tooltip) { + &:focus:not(.focusing), &:focus:hover { + outline-width: 0; + } + @include e(popper) { + position: absolute; + border-radius: 4px; + padding: $--tooltip-padding; + z-index: $--index-popper; + font-size: $--tooltip-font-size; + line-height: 1.2; + min-width: 10px; + word-wrap: break-word; + + .popper__arrow, + .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .popper__arrow { + border-width: $--tooltip-arrow-size; + } + + .popper__arrow::after { + content: " "; + border-width: 5px; + } + + &[x-placement^="top"] { + margin-bottom: #{$--tooltip-arrow-size + 6px}; + } + + &[x-placement^="top"] .popper__arrow { + bottom: -$--tooltip-arrow-size; + border-top-color: $--tooltip-border-color; + border-bottom-width: 0; + + &::after { + bottom: 1px; + margin-left: -5px; + border-top-color: $--tooltip-fill; + border-bottom-width: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: #{$--tooltip-arrow-size + 6px}; + } + + &[x-placement^="bottom"] .popper__arrow { + top: -$--tooltip-arrow-size; + border-top-width: 0; + border-bottom-color: $--tooltip-border-color; + + &::after { + top: 1px; + margin-left: -5px; + border-top-width: 0; + border-bottom-color: $--tooltip-fill; + } + } + + &[x-placement^="right"] { + margin-left: #{$--tooltip-arrow-size + 6px}; + } + + &[x-placement^="right"] .popper__arrow { + left: -$--tooltip-arrow-size; + border-right-color: $--tooltip-border-color; + border-left-width: 0; + + &::after { + bottom: -5px; + left: 1px; + border-right-color: $--tooltip-fill; + border-left-width: 0; + } + } + + &[x-placement^="left"] { + margin-right: #{$--tooltip-arrow-size + 6px}; + } + + &[x-placement^="left"] .popper__arrow { + right: -$--tooltip-arrow-size; + border-right-width: 0; + border-left-color: $--tooltip-border-color; + + &::after { + right: 1px; + bottom: -5px; + margin-left: -5px; + border-right-width: 0; + border-left-color: $--tooltip-fill; + } + } + + @include when(dark) { + background: $--tooltip-fill; + color: $--tooltip-color; + } + + @include when(light) { + background: $--tooltip-color; + border: 1px solid $--tooltip-fill; + + &[x-placement^="top"] .popper__arrow { + border-top-color: $--tooltip-fill; + &::after { + border-top-color: $--tooltip-color; + } + } + &[x-placement^="bottom"] .popper__arrow { + border-bottom-color: $--tooltip-fill; + &::after { + border-bottom-color: $--tooltip-color; + } + } + &[x-placement^="left"] .popper__arrow { + border-left-color: $--tooltip-fill; + &::after { + border-left-color: $--tooltip-color; + } + } + &[x-placement^="right"] .popper__arrow { + border-right-color: $--tooltip-fill; + &::after { + border-right-color: $--tooltip-color; + } + } + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/transfer.scss b/nezha-fronted/src/assets/css/themes/src/transfer.scss new file mode 100644 index 000000000..fea7d7bad --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/transfer.scss @@ -0,0 +1,227 @@ +@import "mixins/mixins"; +@import "mixins/utils"; +@import "common/var"; +@import "input"; +@import "button"; +@import "checkbox"; +@import "checkbox-group"; + +@include b(transfer) { + font-size: $--font-size-base; + + @include e(buttons) { + display: inline-block; + vertical-align: middle; + padding: 0 30px; + } + + @include e(button) { + display: block; + margin: 0 auto; + padding: 10px; + border-radius: 50%; + color: $--color-white; + background-color: $--color-primary; + font-size: 0; + + @include when(with-texts) { + border-radius: $--border-radius-base; + } + + @include when(disabled) { + border: $--border-base; + background-color: $--background-color-base; + color: $--color-text-placeholder; + + &:hover { + border: $--border-base; + background-color: $--background-color-base; + color: $--color-text-placeholder; + } + } + + &:first-child { + margin-bottom: 10px; + } + + &:nth-child(2) { + margin: 0; + } + + i, span { + font-size: 14px; + } + + & [class*="el-icon-"] + span { + margin-left: 0; + } + } +} + +@include b(transfer-panel) { + border: 1px solid $--transfer-border-color; + border-radius: $--transfer-border-radius; + overflow: hidden; + background: $--color-white; + display: inline-block; + vertical-align: middle; + width: $--transfer-panel-width; + max-height: 100%; + box-sizing: border-box; + position: relative; + + @include e(body) { + height: $--transfer-panel-body-height; + + @include when(with-footer) { + padding-bottom: $--transfer-panel-footer-height; + } + } + + @include e(list) { + margin: 0; + padding: 6px 0; + list-style: none; + height: $--transfer-panel-body-height; + overflow: auto; + box-sizing: border-box; + + @include when(filterable) { + height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px}; + padding-top: 0; + } + } + + @include e(item) { + height: $--transfer-item-height; + line-height: $--transfer-item-height; + padding-left: 15px; + display: block !important; + + & + .el-transfer-panel__item { + margin-left: 0; + } + + &.el-checkbox { + color: $--color-text-regular; + } + + &:hover { + color: $--color-primary; + } + + &.el-checkbox .el-checkbox__label { + width: 100%; + @include utils-ellipsis; + display: block; + box-sizing: border-box; + padding-left: 24px; + line-height: $--transfer-item-height; + } + + .el-checkbox__input { + position: absolute; + top: 8px; + } + } + + @include e(filter) { + text-align: center; + margin: 15px; + box-sizing: border-box; + display: block; + width: auto; + + .el-input__inner { + height: $--transfer-filter-height; + width: 100%; + font-size: 12px; + display: inline-block; + box-sizing: border-box; + border-radius: #{$--transfer-filter-height / 2}; + padding-right: 10px; + padding-left: 30px; + } + + .el-input__icon { + margin-left: 5px; + } + + .el-icon-circle-close { + cursor: pointer; + } + } + + .el-transfer-panel__header { + height: $--transfer-panel-header-height; + line-height: $--transfer-panel-header-height; + background: $--transfer-panel-header-background-color; + margin: 0; + padding-left: 15px; + border-bottom: 1px solid $--transfer-border-color; + box-sizing: border-box; + color: $--color-black; + + .el-checkbox { + display: block; + line-height: 40px; + + .el-checkbox__label { + font-size: 16px; + color: $--color-text-primary; + font-weight: normal; + + span { + position: absolute; + right: 15px; + color: $--color-text-secondary; + font-size: 12px; + font-weight: normal; + } + } + } + } + + .el-transfer-panel__footer { + height: $--transfer-panel-footer-height; + background: $--color-white; + margin: 0; + padding: 0; + border-top: 1px solid $--transfer-border-color; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: $--index-normal; + @include utils-vertical-center; + + .el-checkbox { + padding-left: 20px; + color: $--color-text-regular; + } + } + + .el-transfer-panel__empty { + margin: 0; + height: $--transfer-item-height; + line-height: $--transfer-item-height; + padding: 6px 15px 0; + color: $--color-text-secondary; + text-align: center; + } + + .el-checkbox__label { + padding-left: 8px; + } + + .el-checkbox__inner { + height: 14px; + width: 14px; + border-radius: 3px; + &::after { + height: 6px; + width: 3px; + left: 4px; + } + } +} diff --git a/nezha-fronted/src/assets/css/themes/src/tree.scss b/nezha-fronted/src/assets/css/themes/src/tree.scss new file mode 100644 index 000000000..c3b18de18 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/tree.scss @@ -0,0 +1,123 @@ +@import "mixins/mixins"; +@import "common/var"; +@import "common/transition"; +@import "checkbox"; + +@include b(tree) { + position: relative; + cursor: default; + background: $--color-white; + color: $--tree-font-color; + + @include e(empty-block) { + position: relative; + min-height: 60px; + text-align: center; + width: 100%; + height: 100%; + } + + @include e(empty-text) { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: $--color-text-secondary; + font-size: $--font-size-base; + } + + @include e(drop-indicator) { + position: absolute; + left: 0; + right: 0; + height: 1px; + background-color: $--color-primary; + } +} + +@include b(tree-node) { + white-space: nowrap; + outline: none; + &:focus { /* focus */ + > .el-tree-node__content { + background-color: $--tree-node-hover-background-color; + } + } + + @include when(drop-inner) { + > .el-tree-node__content .el-tree-node__label { + background-color: $--color-primary; + color: #fff; + } + } + + @include e(content) { + display: flex; + align-items: center; + height: 26px; + cursor: pointer; + + & > .el-tree-node__expand-icon { + padding: 6px; + } + & > label.el-checkbox { + margin-right: 8px; + } + &:hover { + background-color: $--tree-node-hover-background-color; + } + + .el-tree.is-dragging & { + cursor: move; + + & * { + pointer-events: none; + } + } + + .el-tree.is-dragging.is-drop-not-allow & { + cursor: not-allowed; + } + } + + @include e(expand-icon) { + cursor: pointer; + color: $--tree-expand-icon-color; + font-size: 12px; + + transform: rotate(0deg); + transition: transform 0.3s ease-in-out; + + &.expanded { + transform: rotate(90deg); + } + + &.is-leaf { + color: transparent; + cursor: default; + } + } + + @include e(label) { + font-size: $--font-size-base; + } + + @include e(loading-icon) { + margin-right: 8px; + font-size: $--font-size-base; + color: $--tree-expand-icon-color; + } + + & > .el-tree-node__children { + overflow: hidden; + background-color: transparent; + } + + &.is-expanded > .el-tree-node__children { + display: block; + } +} + +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: mix($--color-white, $--color-primary, 92%); +} diff --git a/nezha-fronted/src/assets/css/themes/src/upload.scss b/nezha-fronted/src/assets/css/themes/src/upload.scss new file mode 100644 index 000000000..aebbc1cd5 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/src/upload.scss @@ -0,0 +1,603 @@ +@import "mixins/mixins"; +@import "progress"; +@import "common/var"; + +@include b(upload) { + display: inline-block; + text-align: center; + cursor: pointer; + outline: none; + @include e(input) { + display: none; + } + + @include e(tip) { + font-size: 12px; + color: $--color-text-regular; + margin-top: 7px; + } + + iframe { + position: absolute; + z-index: -1; + top: 0; + left: 0; + opacity: 0; + filter: alpha(opacity=0); + } + + /* 照片墙模式 */ + @include m(picture-card) { + background-color: #fbfdff; + border: 1px dashed #c0ccda; + border-radius: 6px; + box-sizing: border-box; + width: 148px; + height: 148px; + cursor: pointer; + line-height: 146px; + vertical-align: top; + + i { + font-size: 28px; + color: #8c939d; + } + + &:hover { + border-color: $--color-primary; + color: $--color-primary; + } + } + &:focus { + border-color: $--color-primary; + color: $--color-primary; + + .el-upload-dragger { + border-color: $--color-primary; + } + } +} + +@include b(upload-dragger) { + background-color: #fff; + border: 1px dashed #d9d9d9; + border-radius: 6px; + box-sizing: border-box; + width: 360px; + height: 180px; + text-align: center; + cursor: pointer; + position: relative; + overflow: hidden; + + .el-icon-upload { + font-size: 67px; + color: $--color-text-placeholder; + margin: 40px 0 16px; + line-height: 50px; + } + + + .el-upload__tip { + text-align: center; + } + + ~ .el-upload__files { + border-top: $--border-base; + margin-top: 7px; + padding-top: 5px; + } + + .el-upload__text { + color: $--color-text-regular; + font-size: 14px; + text-align: center; + + em { + color: $--color-primary; + font-style: normal; + } + } + + &:hover { + border-color: $--color-primary; + } + + @include when(dragover) { + background-color: rgba(32, 159, 255, .06); + border: 2px dashed $--color-primary; + } +} + +@include b(upload-list) { + margin: 0; + padding: 0; + list-style: none; + + @include e(item) { + transition: all .5s cubic-bezier(.55,0,.1,1); + font-size: 14px; + color: $--color-text-regular; + line-height: 1.8; + margin-top: 5px; + position: relative; + box-sizing: border-box; + border-radius: 4px; + width: 100%; + + .el-progress { + position: absolute; + top: 20px; + width: 100%; + } + + .el-progress__text { + position: absolute; + right: 0; + top: -13px; + } + + .el-progress-bar { + margin-right: 0; + padding-right: 0; + } + + &:first-child { + margin-top: 10px; + } + + & .el-icon-upload-success { + color: $--color-success; + } + + .el-icon-close { + display: none; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + opacity: .75; + color: $--color-text-regular; + //transform: scale(.7); + + &:hover { + opacity: 1; + } + } + + & .el-icon-close-tip { + display: none; + position: absolute; + top: 5px; + right: 5px; + font-size: 12px; + cursor: pointer; + opacity: 1; + color: $--color-primary; + } + + &:hover { + background-color: $--background-color-base; + + .el-icon-close { + display: inline-block; + } + + .el-progress__text { + display: none; + } + } + + @include when(success) { + .el-upload-list__item-status-label { + display: block; + } + + .el-upload-list__item-name:hover, .el-upload-list__item-name:focus { + color: $--link-hover-color; + cursor: pointer; + } + + &:focus:not(:hover) { /* 键盘focus */ + .el-icon-close-tip { + display: inline-block; + } + } + + &:not(.focusing):focus, &:active { /* click时 */ + outline-width: 0; + .el-icon-close-tip { + display: none; + } + } + + &:hover, &:focus { + .el-upload-list__item-status-label { + display: none; + } + } + } + } + + @include when(disabled) { + .el-upload-list__item:hover .el-upload-list__item-status-label { + display: block; + } + } + + @include e(item-name) { + color: $--color-text-regular; + display: block; + margin-right: 40px; + overflow: hidden; + padding-left: 4px; + text-overflow: ellipsis; + transition: color .3s; + white-space: nowrap; + + [class^="el-icon"] { + height: 100%; + margin-right: 7px; + color: $--color-text-secondary; + line-height: inherit; + } + } + + @include e(item-status-label) { + position: absolute; + right: 5px; + top: 0; + line-height: inherit; + display: none; + } + + @include e(item-delete) { + position: absolute; + right: 10px; + top: 0; + font-size: 12px; + color: $--color-text-regular; + display: none; + + &:hover { + color: $--color-primary; + } + } + + @include m(picture-card) { + margin: 0; + display: inline; + vertical-align: top; + + .el-upload-list__item { + overflow: hidden; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + box-sizing: border-box; + width: 148px; + height: 148px; + margin: 0 8px 8px 0; + display: inline-block; + + .el-icon-check, + .el-icon-circle-check { + color: $--color-white; + } + + .el-icon-close { + display: none; + } + &:hover { + .el-upload-list__item-status-label { + display: none; + } + + .el-progress__text { + display: block; + } + } + } + + .el-upload-list__item-name { + display: none; + } + + .el-upload-list__item-thumbnail { + width: 100%; + height: 100%; + } + + .el-upload-list__item-status-label { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + transform: rotate(45deg); + box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2); + + i { + font-size: 12px; + margin-top: 11px; + transform: rotate(-45deg); + } + } + + .el-upload-list__item-actions { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + cursor: default; + text-align: center; + color: #fff; + opacity: 0; + font-size: 20px; + background-color: rgba(0, 0, 0, .5); + transition: opacity .3s; + &::after { + display: inline-block; + content: ""; + height: 100%; + vertical-align: middle + } + + span { + display: none; + cursor: pointer; + } + + span + span { + margin-left: 15px; + } + + .el-upload-list__item-delete { + position: static; + font-size: inherit; + color: inherit; + } + + &:hover { + opacity: 1; + span { + display: inline-block; + } + } + } + + .el-progress { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + bottom: auto; + width: 126px; + + .el-progress__text { + top: 50%; + } + } + } + + @include m(picture) { + .el-upload-list__item { + overflow: hidden; + z-index: 0; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + box-sizing: border-box; + margin-top: 10px; + padding: 10px 10px 10px 90px; + height: 92px; + + .el-icon-check, + .el-icon-circle-check { + color: $--color-white; + } + + &:hover { + .el-upload-list__item-status-label { + background: transparent; + box-shadow: none; + top: -2px; + right: -12px; + } + + .el-progress__text { + display: block; + } + } + + &.is-success { + .el-upload-list__item-name { + line-height: 70px; + margin-top: 0; + i { + display: none; + } + } + } + } + + .el-upload-list__item-thumbnail { + vertical-align: middle; + display: inline-block; + width: 70px; + height: 70px; + float: left; + position: relative; + z-index: 1; + margin-left: -80px; + background-color: $--color-white + } + + .el-upload-list__item-name { + display: block; + margin-top: 20px; + + i { + font-size: 70px; + line-height: 1; + position: absolute; + left: 9px; + top: 10px; + } + } + + .el-upload-list__item-status-label { + position: absolute; + right: -17px; + top: -7px; + width: 46px; + height: 26px; + background: #13ce66; + text-align: center; + transform: rotate(45deg); + box-shadow: 0 1px 1px #ccc; + + i { + font-size: 12px; + margin-top: 12px; + transform: rotate(-45deg); + } + } + + .el-progress { + position: relative; + top: -7px; + } + } +} + +@include b(upload-cover) { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 10; + cursor: default; + @include utils-vertical-center; + + img { + display: block; + width: 100%; + height: 100%; + } + + @include e(label) { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + transform: rotate(45deg); + box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2); + + i { + font-size: 12px; + margin-top: 11px; + transform: rotate(-45deg); + color: #fff; + } + } + + @include e(progress) { + display: inline-block; + vertical-align: middle; + position: static; + width: 243px; + + + .el-upload__inner { + opacity: 0; + } + } + + @include e(content) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + @include e(interact) { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(#000, .72); + text-align: center; + + .btn { + display: inline-block; + color: $--color-white; + font-size: 14px; + cursor: pointer; + vertical-align: middle; + transition: $--md-fade-transition; + margin-top: 60px; + + i { + margin-top: 0; + } + + span { + opacity: 0; + transition: opacity .15s linear; + } + + &:not(:first-child) { + margin-left: 35px; + } + + &:hover { + transform: translateY(-13px); + + span { + opacity: 1; + } + } + + i { + color: $--color-white; + display: block; + font-size: 24px; + line-height: inherit; + margin: 0 auto 5px; + } + } + } + + @include e(title) { + position: absolute; + bottom: 0; + left: 0; + background-color: $--color-white; + height: 36px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: normal; + text-align: left; + padding: 0 10px; + margin: 0; + line-height: 36px; + font-size: 14px; + color: $--color-text-primary; + } + + + .el-upload__inner { + opacity: 0; + position: relative; + z-index: 1; + } +} diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss new file mode 100644 index 000000000..ef4bf85b8 --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -0,0 +1,93 @@ +/*** 主题色，主题切换相关 ***/ + +/* 1.主色(覆盖element-ui内置变量) */ +$--color-primary: #FA901C; + +/* 2.背景色 */ +// 空白背景色 +$--background-color-empty: #222329; +// 基础背景色(覆盖element-ui内置变量) +$--background-color-base: #18171D; +// 背景色1 +$--background-color-1: #444440; + +// 左侧菜单背景色 +$--left-menu-background-color-base: $--background-color-empty; +// 左侧菜单激活背景色 +$--left-menu-background-color-active: #191A1E; +// 左侧菜单展开背景色 +$--left-menu-background-color-open: #191A1E; +// 左侧菜单hover背景色 +$--menu-item-hover-fill: #191A1E; + +/* 3.字色 */ +// 标题字色 +$--color-text-primary: #FFFFFE; +// 普通字色 +$--color-text-regular: #BEBEBE; +// 次要字色 +$--color-text-secondary: #999998; +// 链接字色 +$--color-text-link: #3C92F1; + +/* 4.边框色 */ +// 普通边框色 +$--border-color-base: transparent; +// 浅边框色 +$--border-color-light: #2e2e2e; +// 普通边框色focus +$--border-color-base-focus: #C7C7C7; + +/* 5.提示色 */ +// 正常绿色 +$--color-success: #23BF9A; +// 警告橙色 +$--color-warning: #FA901C; +// 危险红色 +$--color-danger: #EC7F66; +// 普通灰色 +$--color-info: #999998; +// 停用灰色 +$--color-suspended: #9e9c98; +// 监控色 +$--color-monitor: #98AEC5; + +/* 6.table */ +// 表头字色 +$--table-header-font-color: #D8D8D8; +// 行背景色 +$--table-row-background-color: $--background-color-empty; +// 行鼠标hover背景色 +$--table-row-hover-background-color: #18171D; +// 表头背景色 +$--table-header-background-color: #191A1E; +// body背景色 +$--table-body-background-color: $--background-color-empty; + +/* 7.checkbox */ +// 背景色 +$--checkbox-background-color: $--background-color-empty; +$--checkbox-border-color: #454545; + +/* 8.滚动条 */ +// 背景色 +$--scrollbar-background-color: #404040; +$--scrollbar-background-color-hover: #505050; + +/* 9.dashboard */ +$--dashboard-background-color-empty: $--background-color-base; +$--dashboard-card-border-color: $--background-color-empty; +$--dashboard-card-header-background-color: $--background-color-empty; + +/* 10.dropdown */ +$--dropdown-menu-box-shadow-color: rgba(8,3,3,0.77); + +/* 11.input */ +$--input-background-color: $--background-color-base; + + + + +/*** themes/common.scss是与主题切换无关的变量 ***/ +@import './src/common/var.scss'; +@import './common.scss'; diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss new file mode 100644 index 000000000..eac16cbbd --- /dev/null +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -0,0 +1,91 @@ +/*** 主题色，主题切换相关 ***/ + +/* 1.主色(覆盖element-ui内置变量) */ +$--color-primary: #FA901C; + +/* 2.背景色 */ +// 空白背景色 +$--background-color-empty: #FFFFFE; +// 基础背景色(覆盖element-ui内置变量) +$--background-color-base: #F6F6F6; +// 背景色1 +$--background-color-1: #EFEFEF; + +// 左侧菜单背景色 +$--left-menu-background-color-base: #202F3F; +// 左侧菜单激活背景色 +$--left-menu-background-color-active: #101B27; +// 左侧菜单展开背景色 +$--left-menu-background-color-open: #182534; +// 左侧菜单hover背景色 +$--menu-item-hover-fill: #101B27; + +/* 3.字色 */ +// 标题字色(覆盖element-ui内置变量) +$--color-text-primary: #333332; +// 普通字色(覆盖element-ui内置变量) +$--color-text-regular: #666665; +// 次要字色(覆盖element-ui内置变量) +$--color-text-secondary: #999998; +// 链接字色 +$--color-text-link: #3C92F1; + +/* 4.边框色 */ +// 普通边框色(覆盖element-ui内置变量) +$--border-color-base: #DEDEDE; +// 浅边框色(覆盖element-ui内置变量) +$--border-color-light: #E7EAED; +// 普通边框色focus +$--border-color-base-focus: #C7C7C7; + +/* 5.提示色 */ +// 正常绿色(覆盖element-ui内置变量) +$--color-success: #23BF9A; +// 警告橙色(覆盖element-ui内置变量) +$--color-warning: #FA901C; +// 危险红色(覆盖element-ui内置变量) +$--color-danger: #EC7F66; +// 普通灰色(覆盖element-ui内置变量) +$--color-info: #999998; +// 停用灰色 +$--color-suspended: #9e9c98; +// 监控色 +$--color-monitor: #98AEC5; + +/* 6.table */ +// 表头字色 +$--table-header-font-color: $--color-text-primary; +// 行背景色 +$--table-row-background-color: $--background-color-empty; +// 行鼠标hover背景色 +$--table-row-hover-background-color: #fffbf6; +// 表头背景色 +$--table-header-background-color: $--background-color-empty; +// body背景色 +$--table-body-background-color: $--background-color-empty; + +/* 7.checkbox */ +// 背景色 +$--checkbox-background-color: $--background-color-empty; +$--checkbox-border-color: $--border-color-base-focus; + +/* 8.滚动条 */ +// 背景色 +$--scrollbar-background-color: #DDDDDD; +$--scrollbar-background-color-hover: #C8C8C8; + +/* 9.dashboard */ +$--dashboard-background-color-empty: $--background-color-empty; +$--dashboard-card-border-color: $--border-color-light; +$--dashboard-card-header-background-color: $--background-color-1; + +/* 10.dropdown */ +$--dropdown-menu-box-shadow-color: rgba(0, 0, 0, 0.1); + +/* 11.input */ +$--input-background-color: $--background-color-empty; + + +/*** themes/common.scss是与主题切换无关的变量 ***/ +@import './src/common/var.scss'; +@import './common.scss'; diff --git a/nezha-fronted/src/assets/js/theme.js b/nezha-fronted/src/assets/js/theme.js deleted file mode 100644 index 03048022a..000000000 --- a/nezha-fronted/src/assets/js/theme.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - -} diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index c07c99a67..f42071b2d 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -1,26 +1,12 @@ -[v-cloak] { - display: none !important; -} -body { - height: 100%; - min-width: 1024px; - margin: 0px !important; - padding:0px !important; - cursor: default !important; -} -html { - height: 100%; - overflow: hidden; -} /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb { - background-color: #ddd; + background-color: $--scrollbar-background-color; border-radius: 6px; - border: 2px solid #fff; + border: 2px solid $--background-color-empty; } /*---鼠标点击滚动条显示样式--*/ ::-webkit-scrollbar-thumb:hover { - background-color: #c8c8c8; + background-color: $--scrollbar-background-color-hover; border-radius: 6px; } /*---滚动条大小--*/ @@ -33,15 +19,10 @@ html { background-color: transparent; } -li{ - list-style-type:none ; +li { + list-style-type: none ; } -/*.nz-icon-gear:before { - color: #BA3939; - font-size:12px; -}*/ - /* begin--通用*/ .margin-l-5 { margin-left: 5px !important; @@ -74,7 +55,7 @@ li{ margin-right: 20px !important; } .project-search.alert-table.asset-table.endpoint-table { - margin-right: 0px !important; + margin-right:0 !important; } .margin-t-20 { margin-top: 20px !important; @@ -103,29 +84,6 @@ li{ .float-right { float: right; } -.display-none { - display: none; -} -.line-100 { - width: 100%; - height: 1px; - background: #C0C4CC; -} -.right-child-box .line-100 { - background: #DCDFE6; -} -.width-50 { - width: 50% !important; -} -.width-70 { - width: 70% !important; -} -.width-100 { - width: 100% !important; -} -.height-50 { - height: 50% !important; -} .height-100 { height: 100% !important; } @@ -137,289 +95,10 @@ li{ white-space: nowrap; } .global-active-color { - color: $global-text-color-active; -} -/* begin--按钮组件*/ -.nz-btn-min-width-35 { - min-width: 45px; -} -.nz-btn-min-width-60 { - min-width: 60px; -} -.nz-btn-min-width-75 { - min-width: 75px; -} -.nz-btn-min-width-82 { - min-width: 82px; -} -.nz-btn-min-width-100 { - min-width: 100px; -} -.nz-btn-min-width-120 { - min-width: 120px; -} -.nz-btn-min-width-140 { - min-width: 120px; -} -.nz-btn { - border-radius: 2px; - cursor: pointer; - text-align: center; - box-sizing: border-box; - -webkit-appearance: none; - white-space: nowrap; - font-size: 14px; - line-height: 16px; - position: relative; -} -.border-radius2{ - border-radius: 2px; -} -.to-top { - position: fixed; - right: 17px; - border-radius: 50%; - height: 40px; - width: 40px; - border: none; - cursor: pointer; - opacity: 0; - background-color: #aaa; - outline: none; - z-index: 100; - color: white; - transition: opacity .2s linear, top .2s linear; - transform: translateY(-50%); - bottom: 35px; -} -.to-top.to-top-is-hover, .nz-table .el-table__body-wrapper.ps--scrolling-y .to-top { - opacity: 0.5; -} -.to-top>i { - font-size: 20px; -} -.to-top:hover { - opacity: 1; - color: white; -} -.nz-btn-metricbtn{ - height: 32px; -} -.nz-btn-metric-bottom{ - position: fixed; - left:calc(50% + 128px); - bottom: 22px; - transform: translateX(-50%); -} -.nz-btn-metric-bottom-left{ - margin-right:30px; - font-size: 14px; - color: #999999; - letter-spacing: 0; - text-align: center; - line-height: 14px; -} -.nz-btn.nz-btn-size-normal:not(.nz-btn-size-alien) { - font-size: 12px; - height: 28px; - padding: 0 8px; -} -.nz-btn.nz-btn-size-small { - font-size: 12px; - padding: 2px 5px; -} -.nz-btn.nz-btn-size-small i { - font-size: 12px; -} -.nz-btn-size-large { - padding: 0 15px; - height: 28px; -} -.nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮 - height: 40px; - font-size: 12px; - padding: 4px 35px; - border-radius: 0 0 10px 10px; -} -.nz-btn.nz-btn-size-small.nz-btn-size-alien { //弹框顶部异形按钮 - height: 32px; - border-radius: 0 0 8px 8px; -} -.nz-btn.nz-btn-style-normal { /* 橙色按钮 */ - background-image: $btn-normal-background-color; - color: $btn-normal-txt-color; - box-shadow: $btn-normal-shadow; - border: 0px; -} -.nz-btn.nz-btn-style-light { /* 浅色按钮 */ - background-image: $btn-light-background-color; - border: 0px; - color: $btn-light-txt-color; - box-shadow: $btn-light-shadow; - letter-spacing: 0; -} -.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/ - background-color: white; - color: #444; - border: 1px solid #dcdfe6; -} -.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标时是个正方形*/ - padding: 2px 5px; -} -.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/ - padding: 4px 6px; -} -.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) { - //background-image: $btn-light-background-color-hover; -} -.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { - background-image: none; - //background-color: $btn-normal-background-color-hover; -} -.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) { - background-color: $--primary-border-color; -} - -.nz-btn.nz-btn-size-normal-new{ - height: 30px; - line-height: 30px; - text-align: center; - min-width: 74px; - padding: 0 10px; -} -.nz-btn.nz-btn-size-small-new{ - height: 24px; - line-height: 22px; - text-align: center; - min-width: 60px; - padding: 0 10px; -} -.nz-btn.nz-btn-size-mini-new{ - height: 22px; - line-height: 22px; - text-align: center; - min-width: 40px; - padding: 0 5px; -} -.nz-btn.nz-btn-style-normal-new { /* 新版橙色按钮 */ - background: $btn-normal-background-color-new; - color: $btn-normal-txt-color-new; - border: 1px solid $btn-normal-background-color-new; -} -.nz-btn.nz-btn-style-error-new { /* 新版红色色按钮 */ - background: $btn-error-background-color-new; - color: $btn-error-txt-color-new; - border: 1px solid $btn-error-background-color-new; -} -.nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */ - background: #fff; - border: 1px solid $btn-light-border-color-new; - color: $btn-light-txt-color-new; - //box-shadow: $btn-light-shadow; - letter-spacing: 0; -} -.nz-btn.nz-btn-style-normal-new:hover:not(.nz-btn-disabled) { /* 新版橙色按钮hover */ - background: $btn-normal-background-color-hover-new; - color: $btn-normal-txt-color-new; - //box-shadow: $btn-normal-shadow; - border: 1px solid $btn-normal-background-color-hover-new; -} -.nz-btn.nz-btn-style-error-new:hover:not(.nz-btn-disabled) { /* 新版红色按钮hover */ - background: $btn-error-background-color-hover-new; - color: $btn-error-txt-color-new; - //box-shadow: $btn-normal-shadow; - border: 1px solid $btn-error-background-color-hover-new; -} -.nz-btn.nz-btn-style-light-new:hover:not(.nz-btn-disabled) { /* 新版浅色按钮hover */ - border: 1px solid $btn-light-border-color-hover-new; - color: $btn-light-txt-color-hover-new; - //box-shadow: $btn-light-shadow; - letter-spacing: 0; -} -.nz-btn.nz-btn-style-normal-new:active:not(.nz-btn-disabled) { /* 新版橙色按钮active' */ - background: $btn-normal-background-color-active-new; - color: $btn-normal-txt-color-new; - //box-shadow: $btn-normal-shadow; - border-color: $btn-normal-background-color-active-new; -} -.nz-btn.nz-btn-style-error-new:active:not(.nz-btn-disabled) { /* 新版红色按钮active' */ - background: $btn-error-background-color-active-new; - color: $btn-error-txt-color-new; - //box-shadow: $btn-normal-shadow; - border-color: $btn-error-background-color-active-new; -} -.nz-btn.nz-btn-style-light-new:active:not(.nz-btn-disabled) { /* 新版浅色按钮active*/ - border: 1px solid $btn-light-border-color-active-new; - color: $btn-light-border-color-active-new; - //box-shadow: $btn-light-shadow; - letter-spacing: 0; -} - -.nz-btn:focus { - outline: 0; -} -.nz-btn .nz-btn-text{ - font-weight: 500; - white-space: nowrap; -} -.nz-btn-disabled { - background-image: none; - opacity: .6; - cursor: default !important; -} -.nz-btn-group { - border-radius: 2px; - display: flex; -} -.nz-btn-group-size-small { - max-height: 24px; -} -.nz-btn-group .nz-btn:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} -.gray-filter { - filter: opacity(50%); -} -.nz-btn-group .nz-btn:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; -} -.nz-btn-group .nz-btn:not(:first-child):not(:last-child) { - border-radius: 0; -} -.nz-btn-group .nz-btn { - box-shadow: none; - vertical-align: top; -} -.nz-btn-group .nz-btn:not(:last-of-type) { - border-right: 1px solid rgba(162,162,162,0.50); -} -.nz-btn-group.nz-btn-group-light { - box-shadow: $btn-normal-shadow; -} -.nz-btn-group .nz-input-group-middle input { - border-radius: 0px !important; - border: none; - border-right: 1px solid rgba(162,162,162,0.50) !important; -} -.nz-btn-group .nz-input-group-left input { - border-radius: 4px 0px 0px 4px !important; - border: none; - border-right: 1px solid rgba(162,162,162,0.50) !important; -} -.nz-btn-group .nz-input-group-right input { - border-radius: 0px 4px 4px 0px !important; - border: none; + color: $--color-primary; } /* end--按钮组件*/ -/*table提示样式*/ -.el-tooltip__popper.is-light { - border: 1px solid #EBEEF5; - color: #606266; - box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); -} /* begin--el-input扩展 */ .input-x-mini-22 .el-input__inner { @@ -449,26 +128,20 @@ li{ .el-textarea .el-input__count { /*防止字数限制提示信息遮挡内容和滚动条*/ right: 20px; } -/*.no-resize .el-textarea__inner { - padding: 5px 20px 5px 15px; -} -.el-textarea__inner { - padding: 5px 60px 5px 15px; -}*/ .el-radio__input .el-radio__inner:hover { - border-color: $btn-normal-background-color-active-new; + border-color: $--color-primary; } .el-radio__input.is-checked .el-radio__inner { - border-color: $btn-normal-background-color-active-new; - background: $btn-normal-background-color-active-new; + border-color: $--color-primary; + background: $--color-primary; } .el-radio__input.is-checked+.el-radio__label{ - color: $btn-normal-background-color-active-new;; + color: $--color-primary;; } .nz-input-append { position: absolute; right: 8px; - color: #666; + color: $--color-text-regular; top: 0; } /* end--el-input扩展 */ @@ -484,8 +157,8 @@ li{ font-size: 14px; } .nz-tab-style-light { - border-bottom: 3px solid $global-text-color-active; - color: #333; + border-bottom: 3px solid $--color-primary; + color: $--color-text-primary; cursor: default; box-sizing: border-box; font-weight: 600; @@ -514,8 +187,8 @@ li{ display: inline-block; } .nz-tab-item-active { - border-bottom: 3px solid $global-text-color-active; - color: #333; + border-bottom: 3px solid $--color-primary; + color: $--color-text-primary; cursor: default; font-weight: bold; } @@ -536,378 +209,26 @@ li{ /* end--通用*/ -/* begin--左侧列表*/ -.content-left { - display: inline-block; - width: 200px; - height: 100%; - vertical-align: top; - border-right: 1px solid #eeeeee; - padding: 0 0 0 15px; - box-sizing: border-box; -} -.sidebar-title { - padding-top: 22px; - color: #333333; - font-size: 14px; -} -.sidebar-info { - width: 100%; - padding-top: 24px; - font-size: 14px; -} -.orange-font{ - color:#FA901C; -} -.content-left .sidebar-info-item { - line-height: 20px; - padding: 0 0 0 10px; - cursor: pointer; - color: $content-left-text-color; - margin: 0 0 12px; - display: block; -} -.content-left .sidebar-info-item-add { - padding-left: calc(50% - 14px); -} -.content-left .sidebar-info-item.el-checkbox { - padding: 0; -} -.sidebar-info-item-txt { - display: inline-block; - width: 100px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.side-bar-menu-edit { - line-height: 20px; - float: right; - margin-right: 12px; -} -.side-bar-menu-edit>i, .sidebar-info-item .el-checkbox__label .checkbox-edit i { - font-size: 12px; - color: #999; -} -.sidebar-info-item .el-checkbox__label { - width: calc(100% - 25px); - vertical-align: middle; -} -.sidebar-info-item .el-checkbox__label>span:nth-child(2) { - float: right; -} -.content-left .sidebar-info-item-active { - border-left: 2px solid $global-text-color-active; - color: $box-title-color; - font-weight: bold; -} -.content-left .sidebar-info-sub-item { - margin: 0 0 10px 0; - padding-left: 10px; - line-height: 20px; - cursor: pointer; -} -.content-left .el-checkbox-group .sidebar-info-item-active { - border-left: none; -} -/* end--左侧列表*/ - -/* begin--右侧内容*/ -.content-right { - height: 100%; - padding: 0 5px 0 10px; - display: inline-block; - box-sizing: border-box; - background-color: $content-right-background-color; -} -.content-right-option { - cursor: pointer; - display: inline-block; - margin-right: 6px; -} -.content-right-option i { - font-size: 12px; -} -.content-right-option .nz-icon-delete { - color: #ee6723; -} -.content-right-option .nz-icon-view { - color: #898989; -} -.link { /*有外联的字段*/ - color: #3971BA; - cursor: pointer; -} -/* begin--顶部工具栏*/ -/*.main-list { - height: 100%; - position: relative; - z-index: 0; -} -.main-list.main-list-with-sub { - height: 50%; -} -.main-modal { - position: absolute; - height: 100%; - width: 100%; - display: none; - z-index: 100; -} -.top-tools { - display: flex; - height: 50px; - align-items : center; - position: relative; - flex-direction: row-reverse; -} -.top-tools>div { - margin-top: 2px; -} -.top-tools .top-tool-search { - width: 260px; -} -.top-tools .top-tool-btn-txt .nz-icon{ - display: inline-block; - font-size: 12px; - margin-right:6px; -} -.top-tool-right { - display: flex; - align-content: center; - height: 30px; - margin-right: 76px; -} -.top-tool-main-right { - position: absolute; - right: 0; - display: flex; - align-items: center; - transition: .4s right, .4s transform; -} -.top-tool-main-left { - position: absolute; - left: 0; - display: flex; - align-items: center; - transition: .4s right, .4s transform; -} -.top-tool-main-left>.panel-dropdown-title { - margin-top: -2px; - overflow: hidden; -} -.asset .top-tool-main-right-to-left { - right: calc(100% - 440px) !important; -} -.config .top-tool-main-right-to-left { - right: calc(100% - 492px) !important; -} -.top-tool-main-right-to-left { - right: calc(100% - 390px) !important; -} -.top-tool-main-right-to-left-small{ - right: calc(100% - 360px) !important; -} -.top-tool-main-right-to-left-little{ - right: calc(100% - 286px) !important; -}*/ -/* end--顶部工具栏*/ - -/* start--内容*/ -.nz-table { - border: none; - font-size: 12px; -} -.nz-table + .to-top-is-hover{ - display: none; -} - -.nz-table + .to-top-is-hover:hover{ - display: block; -} -.nz-table:hover + .to-top-is-hover{ - display: block; -} -.nz-table .el-table { - border: none; - font-size: 12px; - display: table-cell!important; -} -.nz-table::before { - height: 0; -} -.nz-table .el-table__fixed-right::before, .nz-table .el-table__fixed::before { - height: 0; -} -.nz-table.el-table--border::after, .nz-table.el-table--group::after { - width: 0; -} -.nz-table .el-table__header { - line-height: 36px; -} -.nz-table .el-table__header th { - color: #666666; - font-weight: bold; - font-size: 14px; - border-left: 1px solid white; - border-bottom: 1px solid #d4d4d4; -} -.nz-table .el-table__header th:first-of-type { - border-left: none; -} -.nz-table .el-table__header th:nth-last-child(2) { - border-right: none; -} -/*.nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { - border-right: none; - background: #f9f9f9; -}*/ -/*.nz-table .el-table__body { - width: 100% !important; -} -.nz-table .el-table__virtual-wrapper { - width: 100% !important; -}*/ -.chart-table .nz-table td, .chart-alert-info .nz-table td { - background-color: white; -} -.nz-table td { - padding: 0; - background-color: $content-right-background-color; -} -.nz-table td.danger .cell>span { - background-color: $danger-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table td.success .cell>span { - background-color: $success-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table td.suspended .cell>span { - background-color: $suspended-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table td.warning .cell>span { - background-color: $warning-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table .danger>span { - background-color: $danger-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table .success>span { - background-color: $success-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table .suspended>span { - background-color: $suspended-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.nz-table .warning>span { - background-color: $warning-color; - color: white; - padding:2px 5px; - border-radius: 4px; -} -.col-resize-area { - position: absolute; - top: 0; - right: 0; - width: 4px; - height: 100%; - cursor: col-resize; -} -.nz-table th { - padding: 0; -} -.nz-table th:last-of-type { - background-color: $content-right-background-color; -} -.nz-table .el-table__body-wrapper { - background-color: $content-right-background-color; - /*overflow: hidden;*/ -} -.chart-table .nz-table th:last-of-type { - background-color: white; -} -.chart-table .nz-table .el-table__body-wrapper { - background-color: white; -} -//小信息栏边框 -.nz-table th .cell{ - height: 32px; - line-height: 32px; - display:flex; - background-image: linear-gradient(#f8f8f8, #e6e6e6); - border-right: 1px solid #d4d4d4; - /*box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50);*/ -} -.nz-table td .cell{ - min-height: 38px; - line-height: 38px; -} -.nz-table td.alert-message-list-labels .cell{ - line-height: unset; - padding: 3px; -} -.el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td { - background-color: #f0f0f0; -} -/*.nz-table .el-table__row td:first-of-type { - padding-left: 38px; -}*/ -.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { /*覆盖tooltip小三角颜色*/ - border-top-color: #ebeef5; -} -.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow { /*覆盖tooltip小三角颜色*/ - border-right-color: #ebeef5; -} -.el-table .el-table__body tr:hover>td { - background-color: #f0f0f0 !important; -} -.alert-message-tag, .alert-rule-tag { - margin: 3px; -} -.alert-rule-tag { - cursor: default; - max-width: 100px; -} -/* end--内容*/ - /* begin--右弹框滑入滑出动画*/ @keyframes slide-in-from-right-580 { from {right: -580px} - to {right: 0px} + to {right:0} } @keyframes slide-out-to-right-580 { - from {right: 0px} + from {right:0} to {right: -580px} } @keyframes slide-in-from-right-840 { from {right: -870px} - to {right: 0px} + to {right:0} } @keyframes slide-out-to-right-840 { - from {right: 0px} + from {right:0} to {right: -870px} } @keyframes slide-in-from-right { /*from {right: -550px} - to {right: 0px}*/ + to {right:0}*/ from { transform: scaleX(0); transform-origin: right; @@ -966,7 +287,7 @@ li{ right: 0; z-index: 410; box-shadow: 0 0 15px #ccc; - background-color: white; + background-color: $--background-color-empty; height: calc(100% - 50px); } @@ -977,7 +298,7 @@ li{ width: 850px; }*/ .right-box-chart .el-input__inner, .right-box-chart input { - background-color: white; + background-color: $--background-color-empty; } /*.right-box-add-endpoint { width: 850px; @@ -1040,7 +361,7 @@ li{ /* begin--右侧弹框--内容*/ .nz-pop { /*小弹框*/ padding-top: 0; - box-shadow: $pop-box-shadow; + box-shadow: 0 0 12px 0 rgba(0,0,0,0.2); z-index: 2951 !important; border-radius: 5px; } @@ -1068,11 +389,11 @@ li{ padding-top: 10px; font-size: 14px; font-weight: bold; - color: $box-title-color; + color: $--color-text-primary; } .right-box-sub-title { font-size: 14px; - color: $box-title-color; + color: $--color-text-primary; background: #F6F6F6; padding: 8px 12px 5px 12px; } @@ -1081,7 +402,7 @@ li{ text-align: left; display: inline-block; padding-top: 14px; - color: $box-title-color; + color: $--color-text-primary; } .pop-item, .pop-item-wider { padding-top: 15px; @@ -1171,16 +492,16 @@ li{ margin-right: 15px } .dc-asset-state-in { - background-color: $success-color; + background-color: $--color-success; } .dc-asset-state-out { background-color: orange; } .dc-asset-state-suspended { - background-color: $danger-color; + background-color: $--color-danger; } .dc-asset-state-P1 { - background-color: $danger-color; + background-color: $--color-danger; } .chart-box-dropdown { width: 519px; @@ -1203,7 +524,7 @@ li{ font-size: 12px; } .pop-box-active { - background-color: $global-text-color-active; + background-color: $--color-primary; color: white; } .pop-box-active i { @@ -1323,17 +644,17 @@ li{ width: 100%; } .right-box-form .select-warp .el-select { - width: calc(100% - 0px); + width: 100%; } .right-box-form .el-form-item .el-form-item__label { padding: 0; font-size: 14px; - color: #666; + color: $--color-text-regular; } .right-box-form .el-form-item.metric-title-position .el-form-item__label { padding: 0; font-size: 14px; - color: $box-label-color; + color: $--color-text-regular; } .pop-item-wider .right-box-form .el-form-item .el-form-item__label { font-size: 14px; @@ -1342,7 +663,7 @@ li{ .right-box-form-left.right-box-form .el-form-item .el-form-item__label { padding: 0 20px 0 0; font-size: 14px; - color: $box-label-color; + color: $--color-text-regular; line-height: 34px; font-weight: bold; } @@ -1375,7 +696,7 @@ li{ } .right-child-box-title, .asset-sub-title, .label-center, .metric-title-label { font-size: 14px; - color: $box-label-color; + color: $--color-text-regular; } .right-box-form .el-form-item__content { line-height: 32px; @@ -1396,7 +717,7 @@ li{ } .right-box-form-content-txt { padding-left: 11px; - color: $box-title-color; + color: $--color-text-primary; font-size: 14px; word-break: break-all; } @@ -1577,7 +898,7 @@ li{ /*子菜单选中样式*/ .nz-submenu .el-menu--popup .el-menu-item .menu-item-active{ - color:$global-text-color-active !important; + color:$--color-primary !important; } //.nz-icon-setting:before { // content: "\E6CA"; @@ -1588,11 +909,11 @@ li{ .el-dropdown-menu__item:not(.is-disabled):hover, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover, .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { - color: $global-text-color-active; - background-color: $dropdown-hover-background-color !important; + color: $--color-primary; + background-color: $--background-color-base !important; } .el-select-dropdown__item.is-disabled:hover{ - background-color: #FFF; + background-color: $--background-color-empty; color: #C0C4CC; } .el-button--text, @@ -1601,42 +922,15 @@ li{ .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected, .el-select-dropdown__item.selected{ - color: $global-text-color-active !important; + color: $--color-primary !important; } .el-date-table td.today span { color: #232f3e; } .el-date-table td.end-date span, .el-date-table td.start-date span { - background-color: $global-text-color-active !important; + background-color: $--color-primary !important; } -/* --begin--复选框自定义颜色 */ -.el-checkbox__input.is-focus .el-checkbox__inner, -.el-checkbox__input .el-checkbox__inner:hover, -.el-checkbox__input.is-checked .el-checkbox__inner, -.el-checkbox__input.is-indeterminate .el-checkbox__inner { - border-color: $global-text-color-active; -} - -.el-checkbox__input.is-checked + .el-checkbox__label { - color: $box-title-color; -} - -.el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { - background-color: $global-text-color-active; -} - -.el-radio-button__inner:hover { - color: $global-text-color-active; -} - -.el-radio-button__orig-radio:checked+.el-radio-button__inner { - background-color: $global-text-color-active; - border-color: $global-text-color-active; - box-shadow: -1px 0 0 0 $global-text-color-active; -} -/* --end--复选框自定义颜色 */ - /* dashboard-dialog */ .nz-message .el-dialog__body { padding: 0 20px 10px 20px; @@ -1668,7 +962,7 @@ li{ } .nz-dialog-title { font-size: 18px; - color: $box-title-color; + color: $--color-text-primary; font-weight: bold; } @@ -1699,7 +993,7 @@ li{ } /*列表中状态字段 的小圆点*/ .active-icon{ - margin-top:0px; + margin-top: 0; width:8px; height:8px; border-radius:50%; @@ -1710,46 +1004,17 @@ li{ .clickable:hover{ cursor:pointer; } -.unclickable:hover{ - cursor: not-allowed; -} -/* panel-tool-tip列表搜索框 样式重写*/ -/*.relative-position{ - position: relative; -} -.query-input-inactive{ - left:213px; - width: 18%; - margin-top: 1px; -} -.query-input-active { - margin-top: 1px; -} -.sub-top-tools input { - background-color: $content-right-background-color; -} -.query-input-active .el-input__inner, .query-input-inactive .el-input__inner { - height: 30px; - line-height: 30px !important; -}*/ - -/*.el-textarea:not(.not-fixed-height) textarea { - height: 140px !important; -} -.nz-message .el-textarea textarea { - height: 70px !important; -}*/ /*el-data-picker选中背景色*/ .el-date-table td.current:not(.disabled) span { - background-color: $global-text-color-active; + background-color: $--color-primary; } .el-button--primary{ top:2px; background-image: unset; - border: 0px; + border:0; color: white; -webkit-box-shadow: 0 0 1px 1px rgba(162,162,162,0.5); box-shadow: 0 0 1px 1px rgba(162,162,162,0.5); @@ -1768,7 +1033,7 @@ li{ color: #ef775e !important; } .el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close { - color: $global-text-color-active; + color: $--color-primary; } .el-message-box__container { display: flex; @@ -1784,18 +1049,18 @@ li{ color: #606266; opacity: .8; border-color: #DCDFE6; - background-color: white; + background-color: $--background-color-empty; } .el-button--primary { box-shadow: none; - background-color: $global-text-color-active; + background-color: $--color-primary; } .el-button--primary:focus{ - background-color: $global-text-color-active; + background-color: $--color-primary; } .el-button--primary:hover { - background-color: $global-text-color-active; + background-color: $--color-primary; opacity: .8; } } @@ -1884,8 +1149,8 @@ li{ z-index: 29; } .el-table__fixed-right-patch { - width: 0px !important; - background-color: $content-right-background-color; + width:0 !important; + background-color: $--background-color-base; } .nz-table .el-table__fixed, .nz-table .el-table__fixed-right { height: 100% !important; @@ -1991,7 +1256,7 @@ li{ font-size: 14px !important; } .dropdown-item-active { - color: $global-text-color-active !important; + color: $--color-primary !important; font-weight: bold; background-color: #FAFAFA; } @@ -2003,7 +1268,7 @@ li{ width: 90px; } .left-menu-bg .el-collapse-item__header,.left-menu-bg .el-collapse-item__content{ //当左侧菜单含有el-collapse组件时使用 - background-color: $left-menu-bgcolor; + background-color: $--background-color-empty; } .transparent-pop{ //防止popover的提示框挡住页面元素无法操作 pointer-events: none; @@ -2091,7 +1356,7 @@ li{ .right-box-small-title{ font-family: Roboto-Regular; font-size: 14px; - color: #333333; + color: $--color-text-primary; letter-spacing: 0; text-align: left; width: calc(100% - 100px); @@ -2129,15 +1394,15 @@ li{ cursor: pointer; } .right-box .right-box-form-add .nz-icon-create-square{ - color: #FA901C; + color: $--color-primary; cursor: pointer; } .right-box .right-box-form-add .nz-icon-plus{ - color: #FA901C; + color: $--color-primary; cursor: pointer; } .right-box .right-box-form-minus-box .nz-icon-minus{ - color: #FA901C; + color: $--color-primary; cursor: pointer; } .nz-icon-caret-right{ @@ -2160,15 +1425,15 @@ li{ } } .el-radio-group .el-radio__inner:hover{ - border-color: $global-text-color-active !important; + border-color: $--color-primary !important; } .el-radio-group .is-checked { .el-radio__inner{ - background-color: $global-text-color-active !important; - border-color: $global-text-color-active !important; + background-color: $--color-primary !important; + border-color: $--color-primary !important; } .el-radio__label{ - color: $global-text-color-active !important;; + color: $--color-primary !important;; } } /deep/ .el-input__inner{ @@ -2187,8 +1452,8 @@ li{ } /deep/ .el-switch.is-checked .el-switch__core{ - border-color: $global-text-color-active; - background-color: $global-text-color-active; + border-color: $--color-primary; + background-color: $--color-primary; } .nz-dialog.silence-box .el-dialog__body{ padding-bottom: 0; @@ -2209,5 +1474,5 @@ li{ vertical-align: bottom; } .hover .user-username{ - color: #fa901c; + color: $--color-primary; } diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index 768834a2e..ef46ddaf3 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/nezha-fronted/src/components/charts/chart-alert-list.vue @@ -1,6 +1,3 @@ -