From 914c096463fc20eb2950b7f5381c19143e186714 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Mon, 1 Nov 2021 17:23:01 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-1072=20feat:=20=E4=B8=BB=E9=A2=98=E5=88=87?= =?UTF-8?q?=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/index.html | 3 +- nezha-fronted/src/App.vue | 12 - nezha-fronted/src/assets/css/THEME_README.md | 30 + nezha-fronted/src/assets/css/common.scss | 60 +- .../src/assets/css/common/button.scss | 204 ++ .../src/assets/css/common/checkbox.scss | 25 + .../src/assets/css/common/index.scss | 4 + .../src/assets/css/common/rightBoxCommon.scss | 19 +- .../src/assets/css/common/tableCommon.scss | 112 +- .../css}/components/charts/chart.scss | 143 +- .../css}/components/cli/webSSH.scss | 118 +- .../components/common/alert/alertLabel.scss | 65 + .../common/alert/alertRuleInfo.scss | 113 ++ .../common/alert/selectAlertSilence.scss | 54 + .../common/bottomBox/bottomBox.scss | 134 ++ .../common/bottomBox/panelTabNew.scss | 230 +++ .../common/bottomBox/terminalLogCMDTab.scss | 101 + .../bottomBox/terminalLogMonitorTab.scss | 67 + .../bottomBox/terminalLogRecordTab.scss | 54 + .../components/common/browserWindowZoom.scss | 57 + .../css/components/common/chartUnit.scss | 24 + .../common/detailView/detailView.scss | 29 +- .../detailView/detailViewTopSearch.scss | 93 + .../common/detailView/list/common.scss | 59 + .../detailView/view/detailRightTop.scss | 29 + .../detailView/view/detailViewRight.scss | 73 + .../css/components/common/elementSet.scss | 67 + .../common/labelFilter/clickSearch.scss | 108 ++ .../assets/css/components/common/loading.scss | 8 + .../assets/css/components/common/login.scss | 295 +++ .../css/components/common/multipleTime.scss | 110 ++ .../css/components/common/nezhaColor.scss | 97 + .../css/components/common/nzTransfer.scss | 96 + .../css/components/common/pagination.scss | 75 + .../css/components/common/popBox/guide.scss | 182 ++ .../common/popBox/selectAssetMetaGroup.scss | 60 + .../common/popBox/selectAssetType.scss | 62 + .../components/common/popBox/selectPanel.scss | 66 + .../components/common/popBox/selectWalk.scss | 50 + .../common/project/L5/CanvasContextMenu.scss | 39 + .../common/project/L5/CanvasProps.scss | 621 +++++++ .../common/project/L5/popData/common.scss | 300 +++ .../common/project/L5/topoTooltip.scss | 73 + .../common/project/L5/topologyTopTool.scss | 173 ++ .../css}/components/common/project/chart.scss | 12 +- .../components/common/project/topology.scss | 131 +- .../components/common/project/topologyL5.scss | 143 ++ .../common/rightBox/addEndpointBox.scss | 202 ++ .../common/rightBox/alertRuleBox.scss | 59 + .../common/rightBox/alertSilenceBox.scss | 98 + .../common/rightBox/asset/assetBox.scss | 44 + .../common/rightBox/assetStateBox.scss | 20 + .../common/rightBox/batchAddEndpoint.scss | 34 + .../common/rightBox/batchModifyEndpoint.scss | 327 ++++ .../common/rightBox/editEndpointBoxNew.scss | 229 +++ .../common/rightBox/locationCascader.scss | 57 + .../components/common/rightBox/menuBox.scss | 17 + .../components/common/rightBox/moduleBox.scss | 237 +++ .../common/rightBox/pipelineSelect.scss | 31 + .../rightBox/trafficSetting/subBox.scss | 66 + .../trafficSetting/trafficSettingTab.scss | 153 ++ .../css/components/common/searchInput.scss | 345 ++++ .../common/table/alert/alertMessageTable.scss | 102 + .../common/table/alert/alertRuleTable.scss | 45 + .../common/table/alert/alertSilenceTable.scss | 30 + .../common/table/asset/assetTable.scss | 32 + .../common/table/settings/projectTable.scss | 22 + .../common/table/settings/userTable.scss | 25 + .../common/table/special/endpointQuery.scss | 29 + .../css/components/common/timePicker.scss | 72 + .../src/assets/css/components/index.scss | 85 + .../css/components/layout/container.scss | 9 + .../assets/css/components/layout/header.scss | 152 ++ .../assets/css/components/layout/home.scss | 22 + .../css/components/layout/leftMenu.scss | 112 ++ .../components/page/alert/alertMessage.scss | 6 + .../css/components/page/alert/nzAlertTag.scss | 76 + .../css/components/page/config/about.scss | 71 + .../css/components/page/config/agent.scss | 44 + .../css/components/page/config/assetMeta.scss | 74 + .../components/page/config/mibBrowser.scss | 219 +++ .../page/config/operationRecord.scss | 34 + .../css/components/page/config/profile.scss | 344 ++++ .../page/config/profileChangePin.scss | 63 + .../css/components/page/config/setup.scss | 172 ++ .../css/components/page/config/system.scss | 265 +++ .../page/config/system/notifyMethodTab.scss | 29 + .../components/page/dashboard/chartBox.scss | 167 ++ .../page/dashboard/explore/explore.scss | 306 +++ .../page/dashboard/explore/logTab.scss | 104 ++ .../page/dashboard/explore/promqlInput.scss | 137 ++ .../page/dashboard/overview/chart.scss | 57 + .../page/dashboard/overview/overview2.scss | 129 +- .../css/components/page/dashboard/panel.scss | 68 + .../page/monitor/project/project.scss | 61 + nezha-fronted/src/assets/css/element-var.scss | 4 - .../css/font}/metricPreview.scss | 4 +- nezha-fronted/src/assets/css/index.scss | 43 + nezha-fronted/src/assets/css/main.scss | 10 +- nezha-fronted/src/assets/css/theme.scss | 64 - .../src/assets/css/themes/common.scss | 17 + .../src/assets/css/themes/src/alert.scss | 147 ++ .../src/assets/css/themes/src/aside.scss | 7 + .../assets/css/themes/src/autocomplete.scss | 80 + .../src/assets/css/themes/src/avatar.scss | 51 + .../src/assets/css/themes/src/backtop.scss | 22 + .../src/assets/css/themes/src/badge.scss | 57 + .../src/assets/css/themes/src/base.scss | 2 + .../css/themes/src/breadcrumb-item.scss | 0 .../src/assets/css/themes/src/breadcrumb.scss | 55 + .../assets/css/themes/src/button-group.scss | 0 .../src/assets/css/themes/src/button.scss | 260 +++ .../src/assets/css/themes/src/calendar.scss | 79 + .../src/assets/css/themes/src/card.scss | 32 + .../assets/css/themes/src/carousel-item.scss | 50 + .../src/assets/css/themes/src/carousel.scss | 161 ++ .../assets/css/themes/src/cascader-panel.scss | 120 ++ .../src/assets/css/themes/src/cascader.scss | 182 ++ .../css/themes/src/checkbox-button.scss | 0 .../assets/css/themes/src/checkbox-group.scss | 0 .../src/assets/css/themes/src/checkbox.scss | 359 ++++ .../src/assets/css/themes/src/col.scss | 156 ++ .../assets/css/themes/src/collapse-item.scss | 0 .../src/assets/css/themes/src/collapse.scss | 63 + .../assets/css/themes/src/color-picker.scss | 384 ++++ .../assets/css/themes/src/common/popup.scss | 42 + .../css/themes/src/common/transition.scss | 99 + .../src/assets/css/themes/src/common/var.scss | 1031 ++++++++++ .../src/assets/css/themes/src/container.scss | 14 + .../assets/css/themes/src/date-picker.scss | 12 + .../themes/src/date-picker/date-picker.scss | 97 + .../src/date-picker/date-range-picker.scss | 101 + .../themes/src/date-picker/date-table.scss | 151 ++ .../themes/src/date-picker/month-table.scss | 82 + .../themes/src/date-picker/picker-panel.scss | 117 ++ .../css/themes/src/date-picker/picker.scss | 197 ++ .../themes/src/date-picker/time-picker.scss | 85 + .../src/date-picker/time-range-picker.scss | 31 + .../themes/src/date-picker/time-spinner.scss | 110 ++ .../themes/src/date-picker/year-table.scss | 51 + .../css/themes/src/descriptions-item.scss | 32 + .../assets/css/themes/src/descriptions.scss | 111 ++ .../src/assets/css/themes/src/dialog.scss | 123 ++ .../src/assets/css/themes/src/display.scss | 12 + .../src/assets/css/themes/src/divider.scss | 47 + .../src/assets/css/themes/src/drawer.scss | 219 +++ .../assets/css/themes/src/dropdown-item.scss | 0 .../assets/css/themes/src/dropdown-menu.scss | 0 .../src/assets/css/themes/src/dropdown.scss | 177 ++ .../src/assets/css/themes/src/empty.scss | 45 + .../css/themes/src/fonts/element-icons.ttf | Bin 0 -> 55956 bytes .../css/themes/src/fonts/element-icons.woff | Bin 0 -> 28200 bytes .../src/assets/css/themes/src/footer.scss | 8 + .../src/assets/css/themes/src/form-item.scss | 0 .../src/assets/css/themes/src/form.scss | 167 ++ .../src/assets/css/themes/src/header.scss | 8 + .../src/assets/css/themes/src/icon.scss | 1167 ++++++++++++ .../src/assets/css/themes/src/image.scss | 179 ++ .../src/assets/css/themes/src/index.scss | 86 + .../css/themes/src/infinite-scroll.scss | 0 .../assets/css/themes/src/infiniteScroll.scss | 0 .../assets/css/themes/src/input-number.scss | 180 ++ .../src/assets/css/themes/src/input.scss | 360 ++++ .../src/assets/css/themes/src/link.scss | 81 + .../src/assets/css/themes/src/loading.scss | 96 + .../src/assets/css/themes/src/main.scss | 12 + .../css/themes/src/menu-item-group.scss | 0 .../src/assets/css/themes/src/menu-item.scss | 0 .../src/assets/css/themes/src/menu.scss | 289 +++ .../assets/css/themes/src/message-box.scss | 226 +++ .../src/assets/css/themes/src/message.scss | 120 ++ .../assets/css/themes/src/mixins/_button.scss | 81 + .../assets/css/themes/src/mixins/config.scss | 4 + .../css/themes/src/mixins/function.scss | 44 + .../assets/css/themes/src/mixins/mixins.scss | 211 +++ .../assets/css/themes/src/mixins/utils.scss | 39 + .../assets/css/themes/src/notification.scss | 99 + .../assets/css/themes/src/option-group.scss | 42 + .../src/assets/css/themes/src/option.scss | 36 + .../assets/css/themes/src/page-header.scss | 41 + .../src/assets/css/themes/src/pagination.scss | 295 +++ .../src/assets/css/themes/src/popconfirm.scss | 16 + .../src/assets/css/themes/src/popover.scss | 40 + .../src/assets/css/themes/src/popper.scss | 101 + .../src/assets/css/themes/src/progress.scss | 141 ++ .../assets/css/themes/src/radio-button.scss | 113 ++ .../assets/css/themes/src/radio-group.scss | 9 + .../src/assets/css/themes/src/radio.scss | 199 ++ .../src/assets/css/themes/src/rate.scss | 49 + .../src/assets/css/themes/src/reset.scss | 79 + .../src/assets/css/themes/src/result.scss | 61 + .../src/assets/css/themes/src/row.scss | 43 + .../src/assets/css/themes/src/scrollbar.scss | 72 + .../css/themes/src/select-dropdown.scss | 59 + .../src/assets/css/themes/src/select.scss | 148 ++ .../assets/css/themes/src/skeleton-item.scss | 84 + .../src/assets/css/themes/src/skeleton.scss | 40 + .../src/assets/css/themes/src/slider.scss | 250 +++ .../src/assets/css/themes/src/spinner.scss | 44 + .../src/assets/css/themes/src/step.scss | 317 ++++ .../src/assets/css/themes/src/steps.scss | 20 + .../src/assets/css/themes/src/submenu.scss | 0 .../src/assets/css/themes/src/switch.scss | 116 ++ .../src/assets/css/themes/src/tab-pane.scss | 0 .../assets/css/themes/src/table-column.scss | 97 + .../src/assets/css/themes/src/table.scss | 563 ++++++ .../src/assets/css/themes/src/tabs.scss | 602 ++++++ .../src/assets/css/themes/src/tag.scss | 163 ++ .../assets/css/themes/src/time-picker.scss | 8 + .../assets/css/themes/src/time-select.scss | 37 + .../assets/css/themes/src/timeline-item.scss | 86 + .../src/assets/css/themes/src/timeline.scss | 14 + .../src/assets/css/themes/src/tooltip.scss | 141 ++ .../src/assets/css/themes/src/transfer.scss | 227 +++ .../src/assets/css/themes/src/tree.scss | 123 ++ .../src/assets/css/themes/src/upload.scss | 603 ++++++ .../src/assets/css/themes/theme-dark.scss | 93 + .../src/assets/css/themes/theme-light.scss | 91 + nezha-fronted/src/assets/js/theme.js | 3 - nezha-fronted/src/assets/stylus/main.scss | 869 +-------- .../components/charts/chart-alert-list.vue | 8 - .../charts/chart-bar-statistics.vue | 5 - .../src/components/charts/chart-detail.vue | 7 +- .../src/components/charts/chart-group.vue | 31 - .../components/charts/chart-list-group.vue | 35 +- .../src/components/charts/chart-list.vue | 32 +- .../src/components/charts/chart-pie.vue | 5 - .../components/charts/chart-single-stat.vue | 5 - .../src/components/charts/chart-table.vue | 6 - .../src/components/charts/chart-url.vue | 13 - .../src/components/charts/chartPreview.vue | 72 +- .../src/components/charts/diagram-chart.vue | 3 - .../components/charts/line-chart-block.vue | 5 - nezha-fronted/src/components/charts/logs.vue | 24 - .../src/components/charts/text-chart.vue | 3 - nezha-fronted/src/components/cli/console.vue | 61 - nezha-fronted/src/components/cli/webSSH.vue | 110 -- .../common/ChartDiagram/diagram.vue | 150 -- .../components/common/alert/alertLabel.vue | 133 -- .../components/common/alert/alertLabel2.vue | 152 -- .../components/common/alert/alertRuleInfo.vue | 166 +- .../common/alert/selectAlertSilence.vue | 68 - .../components/common/bottomBox/bottomBox.vue | 126 -- .../common/bottomBox/tabs/alertMessageTab.vue | 4 - .../bottomBox/tabs/alertMessageTabNew.vue | 6 - .../common/bottomBox/tabs/cabinetTab.vue | 4 - .../bottomBox/tabs/chartTempPreview.vue | 622 ------- .../common/bottomBox/tabs/endpointQuery.vue | 6 - .../bottomBox/tabs/endpointQueryTab.vue | 723 ------- .../common/bottomBox/tabs/endpointTab.vue | 4 - .../common/bottomBox/tabs/endpointTabNew.vue | 6 - .../common/bottomBox/tabs/logBottomTab.vue | 8 +- .../common/bottomBox/tabs/modelTab.vue | 103 - .../common/bottomBox/tabs/panelTab.vue | 735 -------- .../common/bottomBox/tabs/panelTabNew.vue | 240 +-- .../bottomBox/tabs/terminalLogCMDTab.vue | 106 +- .../bottomBox/tabs/terminalLogMonitorTab.vue | 76 - .../bottomBox/tabs/terminalLogRecordTab.vue | 61 +- .../common/bottomBox/tabs/terminalLogTab.vue | 2 +- .../components/common/browserWindowZoom.vue | 56 - .../src/components/common/chartUnit.vue | 28 - .../common/detailView/detailViewTopSearch.vue | 121 +- .../list/alertRule/alertRuleDetail.vue | 100 - .../detailView/list/asset/assetDetail.vue | 94 +- .../common/detailView/list/dc/dcDetail.vue | 106 +- .../list/endpoint/endpointDetail.vue | 106 +- .../detailView/list/module/moduleDetail.vue | 105 +- .../common/detailView/nzDetailView.vue | 8 +- .../view/detailRightTop/detailRightTop.vue | 32 - .../detailView/view/detailViewRight.vue | 67 +- .../src/components/common/elementSet.vue | 70 - .../src/components/common/exportXLSX.vue | 5 +- .../src/components/common/header.vue | 908 --------- .../common/honeycomb/hexagonFigureSvg.vue | 7 - .../src/components/common/js/constants.js | 4 + .../common/labelFilter/clickSearch.vue | 121 -- .../common/labelFilter/dropdown.vue | 4 - .../src/components/common/loading.vue | 9 +- nezha-fronted/src/components/common/login.vue | 328 +--- .../src/components/common/multipleTime.vue | 141 -- .../src/components/common/nezhaColor.vue | 103 +- .../src/components/common/nzTransfer.vue | 99 - .../src/components/common/pagination.vue | 133 +- .../src/components/common/pickTime.vue | 17 +- .../common/popBox/cabinetConfig.vue | 222 --- .../src/components/common/popBox/guide.vue | 185 -- .../components/common/popBox/selectArea.vue | 95 - .../common/popBox/selectAssetMetaGroup.vue | 67 - .../common/popBox/selectAssetType.vue | 64 - .../components/common/popBox/selectPanel.vue | 80 - .../components/common/popBox/selectWalk.vue | 54 - .../common/popBox/topToolMoreOptions.vue | 13 - .../common/project/L5/CanvasContextMenu.vue | 51 - .../common/project/L5/CanvasProps.vue | 655 +------ .../common/project/L5/topoTooltip.vue | 70 - .../common/project/L5/topologyTopTool.vue | 169 -- .../common/project/popData/Info.vue | 83 +- .../common/project/popData/Main.vue | 135 -- .../common/project/popData/alertTable.vue | 60 - .../common/project/popData/assetTable.vue | 34 - .../common/project/popData/endpointTable.vue | 34 - .../common/project/popData/expressionInfo.vue | 36 - .../components/common/project/topologyL5.vue | 152 +- .../common/rightBox/addEndpointBox.vue | 483 ----- .../rightBox/administration/assetTypeBox.vue | 3 - .../rightBox/administration/modelBox.vue | 3 - .../rightBox/administration/roleBox.vue | 3 - .../rightBox/administration/userBox.vue | 3 - .../common/rightBox/alertRuleBox.vue | 61 - .../common/rightBox/alertSilenceBox.vue | 101 - .../rightBox/asset/assetBatchEditBox.vue | 4 - .../common/rightBox/asset/assetBox.vue | 48 - .../common/rightBox/assetMetaBox.vue | 3 - .../common/rightBox/assetMetaGroup.vue | 4 - .../common/rightBox/assetStateBox.vue | 29 - .../common/rightBox/batchAddEndpoint.vue | 34 - .../common/rightBox/batchModifyEndpoint.vue | 492 +---- .../components/common/rightBox/cabinetBox.vue | 10 - .../common/rightBox/chartTempBox.vue | 3 - .../common/rightBox/editEndpointBoxNew.vue | 236 --- .../common/rightBox/exprTmplBox.vue | 2 +- .../common/rightBox/locationCascader.vue | 66 - .../components/common/rightBox/menuBox.vue | 20 - .../components/common/rightBox/moduleBox.vue | 244 +-- .../common/rightBox/pipelineSelect.vue | 36 - .../components/common/rightBox/profileBox.vue | 16 +- .../components/common/rightBox/projectBox.vue | 4 - .../common/rightBox/setting/cabinetBox.vue | 4 - .../common/rightBox/trafficSetting/subBox.vue | 69 - .../trafficSetting/trafficSettingBox.vue | 4 - .../trafficSetting/trafficSettingTab.vue | 167 +- .../src/components/common/searchInput.vue | 385 +--- .../common/table/alert/alertMessageTable.vue | 119 -- .../common/table/alert/alertRuleTable.vue | 53 - .../common/table/alert/alertSilenceTable.vue | 86 - .../common/table/asset/assetTable.vue | 51 +- .../components/common/table/nzDataList.vue | 5 - .../common/table/settings/projectTable.vue | 24 +- .../common/table/settings/userTable.vue | 27 +- .../common/table/special/endpointQueryTab.vue | 32 +- .../src/components/common/timePicker.vue | 133 -- .../src/components/layout/container.vue | 12 - .../src/components/layout/header.vue | 140 +- nezha-fronted/src/components/layout/home.vue | 24 - .../src/components/layout/leftMenu.vue | 107 +- .../components/page/alert/alertMessage.vue | 43 - .../src/components/page/alert/nzAlertTag.vue | 83 - .../src/components/page/asset/Console.vue | 62 - .../components/page/asset/accountConfig.vue | 245 --- .../src/components/page/asset/asset.vue | 32 +- .../src/components/page/asset/cloneChat.vue | 181 -- .../page/asset/components/alert.vue | 4 - .../page/asset/components/operation.vue | 65 - .../page/asset/endpointStatusPop.vue | 249 --- .../components/page/asset/moduleListPop.vue | 86 - .../src/components/page/config/about.vue | 78 - .../src/components/page/config/agent.vue | 60 - .../src/components/page/config/assetMeta.vue | 75 +- .../src/components/page/config/changePin.vue | 125 -- .../components/page/config/credentials.vue | 4 - .../src/components/page/config/dc.vue | 5 - .../src/components/page/config/mibBrowser.vue | 238 --- .../page/config/operationRecord.vue | 36 - .../src/components/page/config/profile.vue | 360 +--- .../page/config/profileChangePin.vue | 65 - .../src/components/page/config/setup.vue | 198 -- .../src/components/page/config/snmp.vue | 4 - .../src/components/page/config/system.vue | 348 ---- .../page/config/system/apiKeyTab.vue | 3 - .../page/config/system/apiKeyTable.vue | 3 - .../components/page/config/system/linkTab.vue | 3 - .../page/config/system/linkTable.vue | 3 - .../page/config/system/notifyMethodTab.vue | 33 +- .../page/config/system/notifyMethodTable.vue | 3 - .../components/page/dashboard/chartBox.vue | 170 -- .../components/page/dashboard/chartMetric.vue | 1399 -------------- .../page/dashboard/chartMetricForPreview.vue | 657 ------- .../page/dashboard/explore/editor.vue | 975 ---------- .../page/dashboard/explore/explore.vue | 13 - .../page/dashboard/explore/exploreItem.vue | 383 +--- .../page/dashboard/explore/logTab.vue | 110 -- .../page/dashboard/explore/promqlInput.vue | 170 -- .../page/dashboard/metricPreview.vue | 459 ----- .../components/page/dashboard/metricSet.scss | 70 - .../components/page/dashboard/metricSet.vue | 590 ------ .../page/dashboard/overview/chart.vue | 79 - .../page/dashboard/overview/overview.vue | 244 +-- .../page/dashboard/overview/overview2.vue | 1653 ----------------- .../src/components/page/dashboard/panel.vue | 233 +-- .../components/page/monitor/project/index.vue | 33 +- .../page/monitor/project/project.vue | 27 +- .../page/monitor/project/projectList.vue | 16 - nezha-fronted/src/main.js | 9 +- nezha-fronted/src/permission.js | 1 + nezha-fronted/src/store/user.js | 13 +- 395 files changed, 23682 insertions(+), 23372 deletions(-) create mode 100644 nezha-fronted/src/assets/css/THEME_README.md create mode 100644 nezha-fronted/src/assets/css/common/button.scss create mode 100644 nezha-fronted/src/assets/css/common/checkbox.scss create mode 100644 nezha-fronted/src/assets/css/common/index.scss rename nezha-fronted/src/{ => assets/css}/components/charts/chart.scss (85%) rename nezha-fronted/src/{ => assets/css}/components/cli/webSSH.scss (63%) create mode 100644 nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss create mode 100644 nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss create mode 100644 nezha-fronted/src/assets/css/components/common/alert/selectAlertSilence.scss create mode 100644 nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss create mode 100644 nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogCMDTab.scss create mode 100644 nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogMonitorTab.scss create mode 100644 nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogRecordTab.scss create mode 100644 nezha-fronted/src/assets/css/components/common/browserWindowZoom.scss create mode 100644 nezha-fronted/src/assets/css/components/common/chartUnit.scss rename nezha-fronted/src/{ => assets/css}/components/common/detailView/detailView.scss (72%) create mode 100644 nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss create mode 100644 nezha-fronted/src/assets/css/components/common/detailView/list/common.scss create mode 100644 nezha-fronted/src/assets/css/components/common/detailView/view/detailRightTop.scss create mode 100644 nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss create mode 100644 nezha-fronted/src/assets/css/components/common/elementSet.scss create mode 100644 nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss create mode 100644 nezha-fronted/src/assets/css/components/common/loading.scss create mode 100644 nezha-fronted/src/assets/css/components/common/login.scss create mode 100644 nezha-fronted/src/assets/css/components/common/multipleTime.scss create mode 100644 nezha-fronted/src/assets/css/components/common/nezhaColor.scss create mode 100644 nezha-fronted/src/assets/css/components/common/nzTransfer.scss create mode 100644 nezha-fronted/src/assets/css/components/common/pagination.scss create mode 100644 nezha-fronted/src/assets/css/components/common/popBox/guide.scss create mode 100644 nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss create mode 100644 nezha-fronted/src/assets/css/components/common/popBox/selectAssetType.scss create mode 100644 nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss create mode 100644 nezha-fronted/src/assets/css/components/common/popBox/selectWalk.scss create mode 100644 nezha-fronted/src/assets/css/components/common/project/L5/CanvasContextMenu.scss create mode 100644 nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss create mode 100644 nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss create mode 100644 nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss create mode 100644 nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss rename nezha-fronted/src/{ => assets/css}/components/common/project/chart.scss (98%) rename nezha-fronted/src/{ => assets/css}/components/common/project/topology.scss (80%) create mode 100644 nezha-fronted/src/assets/css/components/common/project/topologyL5.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/asset/assetBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/assetStateBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/batchAddEndpoint.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/locationCascader.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/menuBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/pipelineSelect.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/subBox.scss create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/trafficSettingTab.scss create mode 100644 nezha-fronted/src/assets/css/components/common/searchInput.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/alert/alertSilenceTable.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/asset/assetTable.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/settings/projectTable.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss create mode 100644 nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss create mode 100644 nezha-fronted/src/assets/css/components/common/timePicker.scss create mode 100644 nezha-fronted/src/assets/css/components/index.scss create mode 100644 nezha-fronted/src/assets/css/components/layout/container.scss create mode 100644 nezha-fronted/src/assets/css/components/layout/header.scss create mode 100644 nezha-fronted/src/assets/css/components/layout/home.scss create mode 100644 nezha-fronted/src/assets/css/components/layout/leftMenu.scss create mode 100644 nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss create mode 100644 nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/about.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/agent.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/assetMeta.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/operationRecord.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/profile.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/setup.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/system.scss create mode 100644 nezha-fronted/src/assets/css/components/page/config/system/notifyMethodTab.scss create mode 100644 nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss create mode 100644 nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss create mode 100644 nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss create mode 100644 nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss create mode 100644 nezha-fronted/src/assets/css/components/page/dashboard/overview/chart.scss rename nezha-fronted/src/{ => assets/css}/components/page/dashboard/overview/overview2.scss (82%) create mode 100644 nezha-fronted/src/assets/css/components/page/dashboard/panel.scss create mode 100644 nezha-fronted/src/assets/css/components/page/monitor/project/project.scss delete mode 100644 nezha-fronted/src/assets/css/element-var.scss rename nezha-fronted/src/{components/page/dashboard => assets/css/font}/metricPreview.scss (89%) create mode 100644 nezha-fronted/src/assets/css/index.scss delete mode 100644 nezha-fronted/src/assets/css/theme.scss create mode 100644 nezha-fronted/src/assets/css/themes/common.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/alert.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/aside.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/autocomplete.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/avatar.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/backtop.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/badge.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/base.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/breadcrumb-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/breadcrumb.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/button-group.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/button.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/calendar.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/card.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/carousel-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/carousel.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/cascader-panel.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/cascader.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/checkbox-button.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/checkbox-group.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/checkbox.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/col.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/collapse-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/collapse.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/color-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/common/popup.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/common/transition.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/common/var.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/container.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/date-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/date-range-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/date-table.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/month-table.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/picker-panel.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/time-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/time-range-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/time-spinner.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/date-picker/year-table.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/descriptions-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/descriptions.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/dialog.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/display.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/divider.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/drawer.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/dropdown-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/dropdown-menu.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/dropdown.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/empty.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/fonts/element-icons.ttf create mode 100644 nezha-fronted/src/assets/css/themes/src/fonts/element-icons.woff create mode 100644 nezha-fronted/src/assets/css/themes/src/footer.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/form-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/form.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/header.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/icon.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/image.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/index.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/infinite-scroll.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/infiniteScroll.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/input-number.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/input.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/link.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/loading.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/main.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/menu-item-group.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/menu-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/menu.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/message-box.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/message.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/mixins/_button.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/mixins/config.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/mixins/function.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/mixins/mixins.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/mixins/utils.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/notification.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/option-group.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/option.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/page-header.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/pagination.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/popconfirm.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/popover.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/popper.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/progress.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/radio-button.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/radio-group.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/radio.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/rate.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/reset.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/result.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/row.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/scrollbar.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/select-dropdown.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/select.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/skeleton-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/skeleton.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/slider.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/spinner.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/step.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/steps.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/submenu.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/switch.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/tab-pane.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/table-column.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/table.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/tabs.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/tag.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/time-picker.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/time-select.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/timeline-item.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/timeline.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/tooltip.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/transfer.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/tree.scss create mode 100644 nezha-fronted/src/assets/css/themes/src/upload.scss create mode 100644 nezha-fronted/src/assets/css/themes/theme-dark.scss create mode 100644 nezha-fronted/src/assets/css/themes/theme-light.scss delete mode 100644 nezha-fronted/src/assets/js/theme.js delete mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/chartTempPreview.vue delete mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue delete mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/modelTab.vue delete mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue delete mode 100644 nezha-fronted/src/components/common/header.vue delete mode 100644 nezha-fronted/src/components/common/popBox/cabinetConfig.vue delete mode 100644 nezha-fronted/src/components/common/popBox/selectArea.vue delete mode 100644 nezha-fronted/src/components/page/asset/Console.vue delete mode 100644 nezha-fronted/src/components/page/asset/accountConfig.vue delete mode 100644 nezha-fronted/src/components/page/asset/cloneChat.vue delete mode 100644 nezha-fronted/src/components/page/asset/components/operation.vue delete mode 100644 nezha-fronted/src/components/page/asset/endpointStatusPop.vue delete mode 100644 nezha-fronted/src/components/page/asset/moduleListPop.vue delete mode 100644 nezha-fronted/src/components/page/config/changePin.vue delete mode 100644 nezha-fronted/src/components/page/dashboard/chartMetric.vue delete mode 100644 nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue delete mode 100644 nezha-fronted/src/components/page/dashboard/explore/editor.vue delete mode 100644 nezha-fronted/src/components/page/dashboard/metricPreview.vue delete mode 100644 nezha-fronted/src/components/page/dashboard/metricSet.scss delete mode 100644 nezha-fronted/src/components/page/dashboard/metricSet.vue delete mode 100644 nezha-fronted/src/components/page/dashboard/overview/overview2.vue 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 0000000000000000000000000000000000000000..91b74de36778b0ff8958d37d07ce70fb3b26f50b GIT binary patch literal 55956 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
%#5t+7yTm^Z{)9pPFdh-)p? z70Lyb71b@_PUHS~9CyvfrBIBY6sik5TZ@D3`-%{avZo>tk4%nDNlxf(>hQldU@{F@ ze6B#R$59h-4LCf;$#i8BOsn$trrrtrEf(C;i3_~}x@iDw;0ZY^`-c@CBEkZ3AfPz~ zTh$sM^$+)VKRN)dG~vd;h{`d9Bu=A_&^a)ugxH7x?g_?KA39Z`gQTcBOc6MAkyTMw0?i2G4Ox3=#$`p!h`_Y`L;Hvi4>H9YH@*6wq=g0d!E$hD* zUDJ1Iucc2L{Nl{|NW@e>b~R3zw?V zp;DWxuKb-Xwua^g+m?6A>z%gJp{QCKj`?1^;e2i~8IP(~-lUsMdJ`5DdektPc&}Zp zXexjEEACjVQVspUS6=S>K}fBP#oS+cyS%AFwVhUsm4om-L7Iu>ZqOJch{=Ihz^nvT z3i~I*uPVYArIbV}Fk0ivdqsc}JHBX_$tk!(g~3eNa22_Nzzg zj|?;fP%gsZ2_7jxhWXu$I6;@y5P5sVA!i6!WprnT96%~uf+GjGQn>9X@+)YjR4jZ!)5kD34BKK9qOKpkC6^i9 zA3`mUdLi@pgvux441?MC3 zkhgk((=V(k4Qqpqj;_XOv>MZ8t{|pPgT|>!{ypivq(VvLjlFGwnFCe9$#dG2Cp{(A zUgIs3ctut4*mBbEk6^aY$8bzOoCiHlEp{Z0Tc&qJ&3nBe&V=h~oNO!KD>nY6i!0xk z3jEwWe!fP6i)hT6#xBRr&O{nPrjRB35Do5rZoKR)r>hizGei#@EcEL_ULxq%BisjP zauGTRf&nBuV4;%~C(e`MxDOUMpZLGX|G)*$!PS}?Co_4U(&)Eoo=(x%gF^hth9NN{ zIS~9fUQY7v{Lm+4C{vXAACH$eS_5y?P9eW%H#`IV@L!M1Ma5XEIFCNeLW@F|#uAvs zmkdC~1})<@5>I^T=Cv5@qhsS|G#+GAG9rOvT+M1GGp? z(q9fIQo1w61lh#!rnW zwG$Osi?3YK6h*e{s_rOmP~ML99U?sMNo&=1%8ES7;`5x=#@^6m?Sk&L-Ib@t8&H$S zR)JPMvt>&{o}IX$?(4-3PCkdX)qB)tv^?B6K65n}b9gY>3sx%W&zSlTKG6JLuGLYh zI_#?5=5+%Nzhd$s0-%HcdZO`)vc&iuFAaKO$(l@VukFZ3c86N(;Azx7{6b)=j4~|Z zb?JAt=ohqR;7gwrvs;*PIwp346){B9v7{lZ<8vgj+zml+L16R`^i02?uqd;hog*MU@HBR4^4R?frnN{O_yUX8L~fs{*oUk#mR=4 z58|M^Um8YTMf>5R{fDlqSe_bz0*#Tt$-Zjql;&2`N6$b1kqO&fr~JqrbmKn?ao@{_Fw+DR7lgv6sk(OJ;S6o^ zbv2szPs0V#*h7~Gmv6iO$Ey0q0}s5RHiiT1(89gV6O=!`@x~t&<^9*sKe@Tp*=&0G zh8tfpnO?fFcSmdOvuMI=doG?a(u6!N*4iBwwm6M@(U?FFqH$=Ivo&nXCy#&uB_BU> zKc)&#c*mFs?P1y96|EpE3IZaR5qQtB3u^4kk_4Y@+HwfLGbzi?3*M&A^o2dQ{H zDb4&_g%~oP&5P#ZAb{JcSuju~h4yh*7~wL=ZbNxl;2ANFLWl-3J8xtO`HeFqzJX{u zQAu*OTHGQ|5kP<`F@GnmKe&_cl&Nt8-+A?SO{VW&ZQLN!x{f;hj{|h}#}{o^lnyu?Re;4%`?`u`(Ngne^}R9Tif~nmrTpP zL3$E8DNObU_eW5#1aYaVv0A)X+JbyuRM#XX)gA#EaYWh*i~IyB1d*>BNoLk`*Mi6L>AKM?ZN{J4cxl`EzH2(;uHNT;WscR^-J! zV(ZENPbKk?dSU?OU(*nD45x6*4;T(XaCsv39L;zQl^@K{5>yXeiI)&9V z@^4g5t9Dx)_(_gZg;n}rt8e0sk5+`I&6*Z=I$mq(ph^1%tMBnXhUKX%e66Qq_C5*B ze;zDXyw1kb4_q!j-QQs8w|9i^sctk@`gl4rwXtz(2bu37@jO(}x;$@j3%k2G zhI5(-s^Sc{;!lim{9Qe$+C?;1C2~b^=ZV4?2jMLm-7LzQuQ=AUk9Tw;k^>R5h~rRW z__^0ZoA#^f{!J;dbQeGWc2&LoJh45!<~KF?k4;U@-eu~z@ZGZ>KWn`FtIwSq~R|ot5{2Cw2YRP2gZgubCgK#HDx(=O%l4JsUjWBS!M4v~&$lWkr?@|ya zlLuFn3hBk9s2taMqUOy+`5ea^iXNbKFND{Dw&XV{cwL0A>Ztl%brQx8L+D-P&-6nF zjQ&nW6zd@&vlw&sla|BKvnL!3C(W>FsYv*l7shWY^_dp>w$3o_oUzrn(Bv!St9f0S zTm1umY&rY+&l@*-m2Y`-i))=TTlvP;na*0Cn^sk7{B>Xf=L-h7v$TrO#~c7FS1+~4 zN+L6s7!PP#ddq}P%(a-XCC_iD+^3X`u)65iJqGD_Pz&pipl?8JLE8j<^kWzSa3P#8 zk$ft64oj244;b#kDj#(y1XhD6U|@4$=d!TqBAVNK7k(roq4?YxsjL)lFR>GicaSV5J980Y)Hjcndt)VXQTQrK zguW$(WARP!Mo58!YNBOsRI$btNg&KQqhE0dl8DT6j^v*Lr_g-(g76-f361N71c91K zsqV^vXvDi7nP^s33EA&v@2k7y7-O^ z4xKceslgg46#jw%s$^55bENf)>t|Te zKJ>NvF662c5;X1hI=R}kw)J>pMVXO%TAA@mX=&$A?WH*^1P_mS2Kv@(yhAh? zPtw@~Kmkcdza>JokI+uH{Oup4?)TU1ZVZ-BbyV3d6c{jxR6gFqla3ZN%ZL#QfQ zZd8D*iJnhWOIU4N{0m~MrcD-Wsja3y_i}xWtrYQE`D3Lwf2`R`JoTj$Cgfh8Frl>G zQ)0^>E4>pYxI;KTl2+4_(xju6sbgPc92k4d&o>U_pUl6BpFif!Q4NYxE65k>w`TO) zTGRw-aw~~H^ioLoqJ9b#Nef$HHD^yO66>N`AZ&`?{+RZZ%APWI@;giIua(G^W=meP z4^x&g4%S)InTMJxdo%Z@()_08c+cj{Js|q{N~i5T2MlQ}y~BH7){e6L>O-k~%rfQ8 z3eUfc#h|`BC?a<~fVjwJ3&#ez0{7+x%9ufIAdM3^tWI>24;#Zg1WJi5_KXxwUZ$u5 zEu?C4R4;YBOh0)1DGpG@Xh9Ql5TtV{QP3f1sn7|e{J;s$5gvq2N~7#5W+^wpGj{^H zX{P99h%GU4Nd}fbgP%J{6^1kLRsOzIi}`SDT8m22NJyqdmaxraq)N?Xq{hw^^dWuQ z18ZawMj|0Sgf$)}n|&IOP+lN6@kI!fA`XF3LVg+i-WFO!$zVVYVE~BIP|^_20zD4V zcV(c)Fqi1^S^9|vMN8qnG|-R8q0CEhK1D7KyT%H#{QJlsjp4S?_$_3!)F2}}Bao$@ z#@Pv$lD3Jd^gDC>;rv>ntuoD>Ou51@0xAv4rc$4pQanyW!{J4b@@tmo{ymgm1dr!a zwH_eC?Yz69)X*Gmw^P}MU!zFpb<7iJx*$+|Bjw9C@@)dg#GoEAfQzAJ--y;5$#Y6g z;_G`PdLg6A4xLL;kWY@XX5e4d$kH`MqaV>{JCGE zJ!8j5>D%IlJ6=|l7j(!BdgA$WWtvXEPIsscMR}s}6_N)@a9Kb~18&9`KURn->VN3| zmAT3RtdC`l|(ME*K=)AQd^8g{8jwM=2Zp3fkd^)W% z8W<*-$>=cxn>mIvsob!Z7o8AoX*~B_iic9E6pgW*fN$xSvnGi(vrZt%2_+Q%HRbb4 z2m-%{*N42%oM1U!@ps$$eMsRL*OOcf}YkFbsMfPRJXM^q?Jw>=_5 zD~4$0t6iK8P2Zp>8>Ua+aGTVgD(MG^{?On#JLKF?1I&zo8Dn@@xnwg|22d_}wg|gP zzgZf5Yt7rbBV&Nv6T!dZtqgOqgU>(i0Z(bEV}(bY#_q=cM{P1mU=3lIxK$0EIE25^ z4Q#ezJua>CLQcgxA1Bo7)SJf5;P_cbjg1j{iW`ec4#_@s{PqO7*K$l5&HU(|;Dcj$ z`h>kO37#cFuNh;sEmkr)R4W4vIG)Xj1Ho!c`Ua^@Em)VO2H2yG;t^o&635Z>GT9BR z;5JOv11u*+P#6rtIe#)p>)wjF4~SZz>d25EEU!x;pXNoOMaz|?xrdcQ2pW7D0x4j9aWF2CaVJ=4;^;+wKv0 zg6vz_{~SmIl%0E z)c;7Cgj4!oFN=&~(*74^_>_4^=PTlO%J&I0K@bBgVN4y&D_W6~#=y{um`q3$3Xf-Z z7$As>b;i2`hfoh7?TJd=Tm`+3i;dM$O^a@dyob=7T~PfTeoiAx^>*;i8t{fyDqwP^<~yx;u5n3F*Ahyd=a+nw1>A>nNQP)R$Z|g@2Gw? z)D-tP=~DQs1Dj@BD_xAQ!h5g~{ueh0gVK7qV!TV3ly9xPVCAx$f+fL`V!7H`Z!bzT_`vrhzwbCv2AYB4IbqM~noxM^)FXl?D zc;eY7&+pk2GfA1dM~LBKA)1Z$SthTGs1Ky~raz1C^O(PL^F07+0q((doTRBNIU+*_A|qT7EOVZ?i0%cwEKc4vVn|AF-w3a^T|K9+hA`lPC~KsdIV0CL0j-KOJypSD~BStv$e$S zk;(@mv{ME(y^Qgd#yJ_a;~C5(ZjT&ae2(HR_!dR^>=8ovizBqs&Rq$XC{0axu5q@N zIa)w17F1@zY@d0)SP7|s6+@(5av5Cfwioad9G})0VAQ&pYDg7|xYl~?t=91yf?ipd zc?mod%>e&SS7Ab?v{aa|FOX`^fiqOXtkVbvTrGhuvKjREBkqun?xY1N{YllfMCR@7?6 zbt^CPt@^yF)ruFT#4EDY1(Cx~u)yWAwqWrbEdKO?$Bam&Obw$s7l&pr8)BU}?CIH2 zVo07xF+kI2FqG#dr%^8vj3va|P42rX>Fx7*KY44ho|}NZVB)Jh!lv?{yzX|tz1RO$ zCSswd?A|14GNRcTS0=24&Cg!L@hYwROt|t~V-Q25s;eIp?F^ zRh=a7KM+RzTs<@at>Jnz^J8-sOcD90GG4DA?UO%vvj=sTTRl2=@905UC|53&%W%(* z-JPs1g>Zulx3U^e2c-RLAke$5ms=((D%b5r^$~{!S8oyX&6V=97(^2=-dXM7^UV}& zn8WBSDi>f;2bJe}1!@ni9jjc0A1zV3Y3wqn*5_IIQ z$2Bl>6vuPxceLa15!(&@lCWsULFDK^kRQktb`I1pP7&E<`EkXv#Ha?z92+}elfuXM zAtiRBVcB+2<<*={Qk7ZSyK`r(B`~yQYo`0K`IgHbYn$~x7|NDvMy+ETCr~o z24~jVpjrmDSbUpL`-L>jM`17$GpAwdTdjrytp31MqpTKrBwkWfW4wZfP6hE$Y1~xC z1%O%PXm0$@<2r3PM+Zm+Ov^%V&h~A5PKUIu;toVVF1IT-B;*UO26ll}6&IvP37YNZ zrQuX{@!GPe|4NN!vT9TRdl>cmyy8QP+K3ZALqGIxgM*1=qm zG`J+{TL1;siK$6Z!h)%$&Yn-zd62YH2`fDASLTmD*FLZ9#<|4oU5s~dV<1{jjy3E? z8J?hn&9&AGEj690t-6V~tK9T4^Xa*)W9~-Uee@$O=0WKfOk9ICoq6v~>|EfcWXng6 z((W7Q9N9VZ>7PgkWa3IU%8H*}r)}?ECu^G%MqHL>f%}4eGu~}{_c|UyvEvNj@oM1R zYg(V4Uu0N<*VVxC-5~kyHG8*uaG6p!!s7(Xa4bP>1!ZD%)dsqqy&J9dMv?fScDW46T!rUC?PqSXoTJBY3^Z7XW;-E6#XPdd6cWy zO-m{ZWv)A4z~XdODPtit%(rL(Uxh=baJ8t0`w$3N1X=KTd(e@|)g>;8^`A~0`oS6- zevM0Nrn~hM5Nc`Xpf1r@y};Z>-{pJevskG5Bl-1>;^2XW3V)Y67E~-YrvA4Cq()O_bQC_EDKk)FD&(88gd=`j2PlRo3;MfELP6+IT4}MY) z?Ra4OmM!M9SNziz`}WbN2hEu+TX2hZ_Vt}JHDJEN6J6?$n6ESsZ(IX!>*_t?x%uqA zeRzfLA2j3JAK0;F3++U59B2IsI};Hvv^4tGY#M4-mTVANUvr_g_AeyCdbyXG9y7su zlL=5R>?FDac77PxG^k){S&fpbINUJ?ITk9n)PK*7B-zL!QQC`h=QeExC6@(}8_J*N$Um zm=<{UE0O4Oy@*i+lRGHCRsGm8p{Xn}l4(FP_Ls^D(ES#Si=Y=-u3SeuTiHBWrBm)fn0cJp}_18orE@ON6fF=ZSW)%uSy#i7lW@!A$& zdVKKp&qlbd$QwKdfRU49ZgA!Ajz?a92-H)ZBbEh!Xi=>7!sT>NeE>PzwWF!RejbDi zQ6IH}()_f=DGeSN#&w_xrVw134qY!g8!8_iJPdSKBOR5vgLE*qar8#zOALrJV8DHU z78qcv3@`u?&VjQ*;zDdMz+MFGDL6EEHhBCTdlRb3&g_GZvzE{Of0lB;FB`lp`~eyT zAF2N+TCley%;jKTi)Ll+=^6$p@C#%F{L;9i8R|>RI?x?2q86UvBjhAI?K!)kE?PTO#zLkxl`<5+iTxT%W!Sau_uZBIH zrL4OpcUrzMi#4IVQ>Qex(aFl#yv9b(7NhYzzK=tGBCKT_wExyHJlisErKseDa1 z@_6MeE+DFVD46$#;2nv*E+58Trkrw%#Mm=VXT(A~@(Sd92$=C9RAZfxVk zJey@JHu$K9|9|eIFIi$U`GPQ;2_aNs+>y+sglJgjc>U%3^-=M3xqA>66)f3u24Q(E zf>X&5Sc<|Ac+pPWF~?CF{>$(F!>CFEUv*Vy%x$1h7NRkB{2TH&^VvVxy~n?`54d*w}yQ10(*+u2XxT z?pPT=CpdWU+Vet}4##^|w(WS|o?g$Yr#Bo}yYi}Q&WD_!0MBtL(*k5^_O_?A2;5~= z)h?<%m%27ASB|j~jP+nD)|@|GAE`ZsTCNKcY3=u6-RVC7mx406UTRtk^fd4-~DkfMBXKPDl|~EbG`J4 zw2U4GKK5Z*UL|4xVzd>yFl@_V4V`_{F5ZpC>y>!GIx@Df)RcO44WoLwW{#r0!G}0>TFC!MjhvM;2&1O?|~K%|5CjmH7^!k zX*a9C!ODw*8Ow6+-DuSt%R6veb;I)B*#I-f4>`|beUh}_S<+Vt)?pn6%K9r22cxL! zvzC2cVwxmDndPOR5U|g@P33CZQ{oNz9*0f+Y)`n#pgi#IlE$_az-aau2XyYk@WxCG zD;1+4B=n*asNS}bcUtwTQh`ZSu3Xd<3^r}U!6@VpuL=7JuAjH@EnNa#4}yc9IPz$F zbGWrN+}!bK;RFx{W@(~az$*-rQWeN$;2JPuQWXlb#A+@;NGKOU>K4tFv@r0Ucjlep zd%1T&+F<+7zMr~eX_U(HH$Uj=YBqn*dVsgOM!N7nG)6QwRO7r>EwOG%vEJifsRl4F z>m1zyR2~}|8oOJ%^byx89Ls>C2kZNMk}+F63C_@h$txdTDrT~S*k^1hdc|n=r!j9= z$a9M)>>;P$bFN>j_2^jnb<7j$^xop(hv$0O4o~)%ET@0@a>Pk??BHM*3^GQU=<197 z`V5Nn&dhj2UAQ)_^Y~@Bu4wZk)^nNG?^)M`RCo_{K&N5td>nnko{>-sR;b}0two#B z@=n4yf2KLLs|ARt7`tBxQ5jOWBb2)=$^+^^|5;nKe>PG z0R1i0pnZLt*W9h;WSWBqbFv<&Oc~YjL%Lq8D5p~x&YZ>SGiD69LO848P2*y`)A?FC zxd$%79??9%b9cHw)3EB;A_J0w8B!qK8#u%L5$f@JpYjm(E%KPU{@`8Pwf&C$h^;|v zTjoOxvBR19A7*q6m$o__xc@$;nfrp_;9{V@FJ@~Wi8P`Q*f%HRTdUAs*OY9r+SXvp zrp*IT_Yc4jQ~2U^wmCxRsSxa(F>G`C}2?*@}~z}y}Lf=P>&;oaT=>f z0Kwv>thyq;-qE9m)Rt8(xb}2N_bqiLJ=Nay22`U+p?;z+*Z~#*S2Vp z0)z$HMvw=30OnDEI?E;X6_8~HxtSN>!1=NB&(DX)0%PwP@IW6}vjMcS$10n=%t-0V zv9Uz3b^W%rJ)Lbk_CXgf>a+lTUl?I8&p8Q)pP)=hoCLnUlXa!txXEiOsJ33}p$yROXZ-qgZI?5ARZC#SzZr!H4Arnb1_qs$MP&d_vJ&KFcYv zqQLkhR&O>!{t%;FsQzOr2kbWUiE{8FiGhFNCe**}}%v65wR{D-_M-)TgBFr-!g;A2^;qSQz_lZf?7G=8C_(c~515rmrsCp+c*thTnVF@QShi=ElAYg6BUOoB4}SV9nIs zA2Q}uU3=(eZl)@Dc?tO9;u#@hFt2}wfVFb;!f2-!Zu`7?vaEjow!(|*k*lvhqKYe} z*S&n#T`#Zu8@i`@3lFS3Ul#NzxH6=1^gA%$IpBca2)pRe{hLRjhu92d5^utmqXyW~ z$zAQqWc#ksW1|NS;8GXM)mSyCNA>;X{rU&TKNt++QX4V9SYs%`Jy;#9oS4VM(2+zp zLfCM^@PjnQk8-J^m!QzOVemNg(&lf@$F6{KC9E#!=D)~WzolP}k8@tgu!tW%`GrS$ zS#d1BLoMgT`Z~)@EF)>5Zq*X}U*z6?Jj~{#e3>lrL`Il~Qb`S$O2S~2FKSl_*+Y)R z*ve%{zk|%ps%wqt5T0}bDXIYt%21fSstYT+x;AumyKOhTDul&Pak1;Zt*5MeAsVRgJzs+7jZ`B(+$Jds4e(}IB}R}>hWuz5ho0-!AR z^Js_qn`??sZ1@De>Wb=a7$%sDr~YBxXYi$h+@^x!7iH(LB56lhC1L*!%?|n_?(wFq{hzwGg0TC=wH>+{eT z1PzzLJ6H~CL3y$m;ex*#ZQ(U^bzI~*4u}Zx9c-vrE^$sJ$pg!*&_uPD>h5B{=@j4v z9b~{8H&lImya>j{dmYS$@o@<23UfjJ$oIg~Ag5#0>0=`&9&<;%*f=&0x?=q~diGfL~z{2sUA6zGi5PjclPgA|O@*@FY{qI-k~ zEx|0UIAn;L=e;BJG0)JhArI{_pArG{5A>V}d`vztw_6FGGq=n8#nrvNt95Z99Ko?% zc#-~U$1c`@SO4H}sL0(6fS?JyptCe|EtHDYzDF9+7xppq2@P!b2>dt%Ft(Mk+ygB+ ze~OD^rPY^JE4?MI3~7NkY(mqz#Fxi;nC0*IB4Y-!Ko6iQq61OzBE7NIA8d<&bwD;$ zpj)iGg0#vKSGhl71dk?^%gobMy(oBY*^(ba7=6!_e_rB+Or>*TBZwGtS>!=gtPCi$orTn+sZ@=i6f7pM_MZRDoUD_D*36yjQ zJS&4QSMA-Uc2%-1!K{EGi*>6zy^$T$K&v2+ay)Ald&BsY`EvH!sjI@+oEav3tzQ9d z)a@7AXHhqnxJMY~s0uStUI(q&{Q?x}s5o#i z%vLqvdlntVES>bJjp~;+PC*lSO2I`P4<5*>YW6^|$%loIwl)ZhZ-l?yf zSEE}yRcNGetTk4sRi|{6Dvy81Obm}PnsYNSP_mC8p2%+MN3x}e7U}5eZLb__@9pVO z4^@t>IIpLrrRTgA>LDw1k1r7D2n5VKyv_Xk1rcrb${+O~dpgX{_TJuhdaVOal$!CT z*@-usIYh5<=!s^p`4W=*DB=q&g}u!?DB$b#1_ItrU*J;+a+*%BfF<+j-)lE%?9Y8C z+P>L_BWhqXXJ;=Y>_v^8s|^gYBQ2;aU_=M~3@qxL!c536qind&iAU+YJE;F~vu1ag zC0CQZ+1t?aOP6LRZO^0ou8Zu@e-Le5=WDiU4qww9<|~Jf5{C01{Rl7cl!hQnvZEt9( zDTH?~MqU_cc+4qlW5Q~?7am)_5u`Zf%6drD9O3 z3gt2b&&C!o1%x)yWD>$M09>W<4>mF~u30Ms`bnfvOFUgffOLMurlPfB3>LD^I`D7@ ze8<7o9JIzJVU~#)e13;;$US?FU>{{m292<%i)sobv zSH{Kf^ZC*D;N;`EMvp_a`8|Ds{ZDQg8MyL-PwiC6ZgV^rfTgg#(Mg-UcK>@#llJd& zYW8#NjgGF?24AZkmI;u`t-LmH-hX|CY2J_<-Rp8AQ7GW@Y#O+7|C8I+x`s$|G}@1% zh!sxF_8oU4t;~+XQ5TYNo~^!fTf3m=#-~~Nx#U0yx8WJ2P|iB#s1-)%Dvw%W72&U0VGZHut*{N@ zA6sENY(HMN!VcVj#|pcZ1LU;A9;KhIbzhh@qIqL7JTV`R$I_{(bSm#Q5=PQU<*ziR z3yEmfidjDgjBGBRPKAdCH&}NrHd02mnn&))^l&~u6`snbli`bynUP4O!a0Y0i?`gfiNy|3ZoMSL3s6PE*80Ry3^~CQ;wjVVU(ChUBdWg zkxvq#i>#V)P6>p=aHz=7u18)mq#lG(KEIWLi?{XotG1+?eo(Y9iH>GjRD9gl?`c2O zPAX|+!|JXB8Uq(KkefWv9{E6Berm$1TQknoYo#^{V$fQF^c}R4R)N{G+q*DKV0x&R z)=(eyW4e3}t)+F?m2nNsejnHNoXKkUav<*8_cff*-U3cj;Mi1RELl(muMBE~Cro3VJWSkFKQm(^a$|Ho^z#YWe^jqQi6zT}#)|2Qht( z(gek5k_?)nX_}!pT~D)=pd_UzO*mhRvXrAd73c`f(G4_DAEuAcjdT;;Ot)a7eU$!$ zZl#aX$LLS#HcW=^ppVm?^a;9)?xsJZd+1*JbNVFRM}I+|qEFNP^Z@-O{TKQSJxHIW zhp0rKqtDY{(Zlp#=@|Vt`T{*d|D7JCFVbJrWAr!lI8@VLqA$}Ebez6IPtsTEYxH;Y z6g^FUPhY2RU=r|6dWN2*Z_#t~ZF-)*L*J!;pns%)qVLi7=>>X`en3B@m*_|IWBLjG zlwPKPrdQ}^^grlT`Z@iA7U-AQk^efqLI0C}MgKx?(*L4=rTQfuBk*i4! zsLg7N+N!pxL1;f$sO@Tp;*ZCSNDSnijAYY=)MV3AJoljj=-QP?Clc{YI^)Zv^U-`d zlFMh~nVc&bPs~R0Mzn!nn9RmgvrZ1-jw6+6moX-LTuI^OQds# zZ!!|iX47-Brrv6d8{w7@YJ!vLxs<0Sxl4u%8Ew{>w-r#lqmW9ZW3x8CX!&%e0biN5 zi$k23UBJXP5sl3{CerzQI_Z@^GM&eYh+>m~cqGLzv~jQrRW3}IU_RUv_kF~BYI>$l8wew4GGSgyT&a-;--5pj_fn( zIU{Qa#>8fv;u;yU=i^Bu>xp8lOLB>^S#L6mHl<_HJcc^Ig!5wD8=ah7jI>r$MdBDc zvq|wr)8b7FG3=Q{G-kMfPOTG(H)bjptqYY&tVD9~pAUfIVqUMiWkP zjSMy90AEp2Eg6rwCZaiGA`0@zrDHK8>jJjsIqt@TSwjR}xqLJm0j>CA>CAj&G94@M zXzpREisV2cM#`6)ivs|Wi2}MQrA6aOTMU(Or6Nf;~S|NKQDWjAS%n*!W_fF2pAd+l-OO*iyz^ z&X${rXYBcGAvWurh{xsuwuVerFwN++?Dj$`@0deJ8F^bQ9Z%Vl0K!QHUp)GkNoAu%Ub;17@DZ`*~v`ot}*hF9nC}Q%I3x zMxBs=YseZgBYp&L`!n$vz`KYxZKuWMz~s&qfQ>-x$dIcVv?0@^*O-jwtLW9ZR6ryj zo%T&e^HDI2XktDW&oyM?jHm#JTil;WGyY)g<2HDb(dl>$qZ=4Js+rE>CdMgr0YK0o z(ldhCC$fdyj1ydB5}4samqYYTL|wU9JO`GX^BzH;r_ozr7Ey=f&(3H*pN+=yPIPA+ zL!9fw>2#87>=c1`3P={s#%3JyEpI+LYeeUw^AYauLWbG@u#34bhZ+QsV;GWw32}(X zS#OniBj7nmCn>q98jz%EO!}5?fa3j&G0C`=;*y4)3(6xbubjFM!pB0rw6ftdIuaC78`*;f*LIGsWmZ$cJhE}M%K(BQobw1wkzY}@FV9ou%twr$%sPI!WjZQD-Aw(aEhfA7;>W6ZI?HTS9-^|Y(@ zDt85OaS%|De_=-r0{7o@E#?36|M>rhgo>Il2ngtpe=h4k3DwAvi$RS|K+0p zq|S#a)oE;N=LIoGXa4i@|K$Y#L=L?Lk!4});_=Vx{g-2afIyi18w6rwZ~R}~Ul0&5 zw*TZCR$*Xk=<#nZQ}}=$p z3j%@wci;?(=aFMWSW#Pr zM-sk`m0uq8xYb`Cmsw(7J!k}vp6qi1VS~jP7&6A5mE-EG{5)pI7l~c<3JjAJf7Ao{ z%?06O$C!E2hN3FRmRCu5Ow%tiyBh2ns`-x@zc75e`(i)8rv=+je8;kh-i@>exF|8Zoy0d%E ze^yR-Rn9=!jEdV-)~sl5yJK;fvbNWAZT=0qvKdpinc}dSaI={~ycm_gm}Gd^0er~R z)M9-DIXmj{IvSw8>#@8WklyP7dhek4qeA$TB>3Zo_|qu(V@mi_%=j`yUn2T(`yTQ; zqHm61jJ91ll zVp~T9dV8jNyJ~v-x_ZZaTgTx12W0$5X#9t){Ks&gcFBydQ8lk&_OJ3ir{DE4*RO$x zAEV#D`xGh<%>8yX{Px|y4AcrzlvS)!*GlBewa-%DN&>&QaZ`s&q%5_vQjbc+EH$-K z*`?3tfsOQ+56~*ljNeyZ-{0)jU)J+W*Qx@kC-zG!MBuUtn9Q>kDG@^I6k_nrv_eJ^ zr!eGUS$Sec8K>psVcB^KMj>irsAO_8bj;%w8dybgGtA7x529$sax)yv(+??V`*Jfp z%zY0BXlQacg0d_npv(DUULP)9)=1cYE2euqQ_K9?BF>tg?x+Ykm43d!xh;gizD4>E3L9epi+%` zorRj_F_Y3X_zqm8;Ac8yye*)KjEtAfl=ZQZHs3>2kw*h$p=Q5Krfd!#1JS9vnGU&7 zfF@M)DYt{^z(%TWmP7vArgG2-ds$sUA8RYfJsuSSWEnX*Av#u9sN1e`z6c^&K4Cge zcG$Z9MfyPnU>b>f)?3)i>LTwTBM_0)kG%=yHoH7MVp|SD?8ESk)+n{SX%tt*Ke0(x zPJEfe6<2d)(auCyWhU`aHdbPp)0JqocQMFBM1?3RR(48~gTs}4b#O7wL`B6uX-XDB znuF7oX0?B@!bC=;C#gzSPNtc|m0@*wvD-vj1u6MbHdeNo)0K6#Z*l%03)oG$!otqk z)?7X?<|=C|@5c7Xy*jpdbI=Z~rdnZb;&1CN{~kk-l?m9GZG;((l|2vG_}hp!DkmEq zcww`KXo9s6Ma;>53FE}NP*2>E#R1jUW@($SDccde(cdUIdIh8xwzJftI8X=r3ftLg z(H?LBr-bdSwHOcFfCM6T_F8NQh(KGBD+?{I19@PV$d!#2{{aIKLG+2Kiln~O5-YJw z7B2F_c1`-A8n`5SWwxepa0R3gyE0r;J;(#Pid~tmX&!6=hs3Uo*Ypm$ff(Xf=4-|W zUqDlFLW4DngFs-DIHAd!?Li+9Qi9NE&FP>3s3t*Zw&s4Y3oMZ!G+gsJNCZAg5Sp$9 z9?Sv7Bngez!VcT#(v7JXLXJ@ z){p&>^Um%ZZtNVhmcz^GoNgQ*JD2Oo>FjHq9mA8;&g~p)TpP=ld(Z70YCIUzmdnoT zoNBxpTbJVjbPhDWjPb~=13D*MAQRlPuR!kz7fc1WtlLpW-(^?8JbO;4hVkq?4_ z+Ce^}E@}x#*;jCPC<`S*{8sH;qa(5_(66nhh$H|eU2+ru1zTZ$%Xa0_QrTx%u3ne6 z1aLV{c&<^Gsf1uTcLc6Mm)!(~Y&!y{vePq?@XRYBr`A(cQi%*ZQm5imZc>TND{`mC zQzOz5?6XIF>!kv~e&tCnzJ1Br2aI~fG{E8?Nc{u<;fe`bD(!M^|ESc8`%~*cP6rd8;|6V2x@2uxge@=KyBC$ zi|`bR5K!rXMgz%-+SGYrU?UxdcEKn0MB{=ow_;1K8@Ik?DUSk+>#z`~?)SGAcL>qe+6j#(>P6M{$6J#k$uU#{R z-s{lpIh;j{n>TN#5M7|;A&LN1S5Gb5Z@ugDY*&{Z*Za%xtn`OuARbR}-%5Hcw^6D#e_2aE~PSe-7MjKb4wJ!33 z(UO00wX^f|aZYJ;{}Bj8$PK4MAY^41k{Y=@QXe(UE}6SS=V6B{B+j9W3ZjN_70#Z8 ze2jW9VXfX0r9)+Z(b4nQx^_;mAkB;{k(_6jbV@{qX~iG>E99ftViOjF*0<}%b3h6d zC08EgJC5_Dkaga%63kZv-zn>M`Ou=?caQ$DJnbbILNgE&t0i--sRVb;I1yO|gu@g*36P2j+4 z$rd6RhpMY$mQ__g$Ig_Ja`Ja{6uWErwOlScZqYlvM(_P_qf)zCTaw)CYQE%s+LMfJ zO(DqM#Jk1j^Keb=>NVQmtFrGoY7?~~*~lS_J>!F28Wfa^A*0z0~`fAN#`t$O( zy5#bxO@mI$t3XMB(*Hh|_>>5ttM0ut`nW@*>ho}!zRS2f%-)y?R=n(3%CY7b>2HW0 zCUP6(X*34R>aaC4FSNhlme{6B#*|YG*;4IPqOqi^{9uphXu)g*6Y$FZ#CSX5$hO04 zZU*T?ERi_mnCy)SKN=OGnQ>#f$!CTI1e2`d>hc19*rtTV5s|VX@nJl)Pv5uK&OE*C z2}Rqb)wQTiw>;sRpVIZU*2EQKPBn@bUhDwoj(VmS);oLJRz%?2cgi;DITjQfPMYJP z9^Xh!_U@qI91`~QR@CE9>JuHaWgcc7BV$9UY}Rc!mM{0O9OkJ6@Ggmq$)v@7#%jHJ z^O&i$E|-7tWIgs-KJJGKiiiZ@%CY)9d0#iZn`OkffC>1oHm92#C+lz9xpG&nr#e2+ z-+I*%4~C>LsU*~z8lsnaf9QcXqOu8+iz1{_%JrR$L-Ho-L>)jGrVSTpzS!KnMUDu4 zLX6me!Ucs$j#b);7sfVojBBtp&o>Xk>vF8FizA+D6J5nX4ZS9IUFSSygS3m zHi(kIix6ZDUj9hVGyQyCXIE;>-N_~qDhN_`+%O|_XfCP^MHPtppE@bzt*L~ z{_Q(lz)u=OkiCOy1~;HcrO%BO2{})w&mH<{FMDjjK%GjrLXRo;UFUpHT z`_V1WfO(#mz+cgGdoqeSvoK#0&rT;eTjHl%skfy~wD8zaL3i^tU?zw6p>+kDOji7x z8hy0SzG~Id#U6)C%6=={;CZP9d0tsTFF1M%@Il};%S8x*-z0^({Jv?T@0We8%{ zt78~Q>;b}GCK$nn2BNpX#bnjM#p^EU?MWI@WrnsTFg19NRP0*^x_3_O@X&j`{uqC` z{r%hbmk?^Aoo=Pj)(Y~1tHjQo&fWVP-bzhR;)kT0d*XmoFff}iy||DZgZx9HrtN@3 z+P-6O11*u%vcV@)xhQ+evUSc_zae=(_m0dd5WS$}w=>tqO_QiYW!mtYfEoC(B#Ti<;t7f~Vs`Xf`N(Q6xm^eE#1-Y3 zT`9C(n+;;oh&(htVZ9)uwhNb6b;(19DVsdvkma1^&tG6A&zB78x#Hk)K~rsGyN}!) zx9wwK7$E1wK4Jkg#D5`ckkJc;c?2_q{eF}Fa6Abw?kkh%v}YPF*o^%OfTjr)2 z$vkbnEmR=&8&M&$jC0~!*Ym6b&#$|9B|Y!hvbKqReN7tp^0t3h?W}g^*O{|&PvOMg zcTrz8tDh1(#@i^7%mnu~4w4M>HY}90`0p!7RHkNc1Qq%QYCC3{NQ{#s=%MxFPi3MS zK2LI(i z(`8yUH)YgFb&}h^?X6Bl@$9z#CE%CFDD1HyUwt53(s%%XTQk=PDj$I+<3m2j04g7V zK1-lDff@BEtPFbqwk`Va&~NmDnKTb_t?sju3!#(DH0!!si*51vbd2e>-1O@VEYpJc zl#{y);fp(%@o1u2l3xB{gdtZ$pr~zZ!{GMKB~bj&bl2>Pk=+Aw!_>-V29EVv?%XzY z(?~;ZZl;NLyK5+Wy7rlErWAlBa?k>Ca+SQtPb_iwQl46)CwSP%q-18b$FVh8t_zoQ>{liC%y|> z>3YN1WMK@~ch4(H`L`FId5=6X%fZHY)ok;8=}vY*C90)u z#4~^%i>K8bV)&fgE6x)J&6Y0}hWEb}?10!ovua#D?;)*~g1Sena|R;34k7+ZKj_o^ zqny~-?P&K1!ajr|9pYgVhVn1?s{s9U@GIIe+O(p0c|h*iW_Ekc^?J2&i%p%b14^V` zx8b9Gb=%QT`l%w%dAG`|r48S5@AvxP1^YG~zwbgg8|}NIDSG|3qpa=9Fh>iMmqQ_o zZMMl$&wduessya*aOG8E*xi$R9_kNCbZR^4$&wRdHm-TG)Q{`>8^=eVC^1tHbd_K~a&#uAI0o0B&j#&Q(-lfAuW{)0$J z{*(Wj1Qz9hEjHWzJSAhBu?;uh>uJw>x2Lo9V}?i^iD#RfWwx&FAtnuy9kGMxM0WK! zfozwL(_*s5+`Oh-2wQU~2JBM_=(}TD=Pi&2hN)K9!n*^M=^`?WhrW104QIP-=Pjq! zs1?dpG09!Y#1I@R4hGh*$b((^=C0zKD|G%>%kB&;bWKBu9Y=6FYH$*Q3DECN1XEI_ z2~l+T#DHBi@HG5cah5C)tAvRg7|6=fz7wNL=p_CNebNlsr^$Q)9O-ErTL2c21%3=% z~Yzh^L<@QvQuEWJOAZoiMs`StnunB{Qk$O6s5<(>5x|!PFXz_vK4s&@n&dQ3JX ztm)8tC&?Mw?qv}ajGfqu1Vp36g2i{6K4q)EW>i#K{fQ~13R)gfCjNnv49Yj8so)k} zF{!I9f~c7JV!5@mGS`QEg_#go7JAg%O06V>I#S-~@939vONBI64+ih*_qZlZBH(wa zvD9w-iXeQh>dJ^!Hp>T6-F|dfe^9lTxY-dO0Z+#*W@!S&8|n^1Ub0ma6&{eXoPbPQDjVXp&vBq$nSso=nfEl8C1@v${QKYX1*X|(bh!x@idwn@x_4O>f) zyFU7drfQZr4hD^3R$+%arp8raXeOgpI=voJb&KZAxu;Jg!LZb(}BF>+H3<)2NQaWa-&3RTIggc1U@!%Ld+ zN!mDIq?0KE62X58Wedq1S{A7OXhxlvh6YKL1>vWu^)jImVH5KNqYMQvB`HEfiqMG2 z2I0mMT!M6(GBQM%j+BLXP5;nh={SMLxzPJFA{7^5I!f(8vGzlC93d`1<`utY+nwnq?y)207lDC(quzEp0}@ zXJ+Bzk;5ATa+?U!(*kj41&U;nT%8gI0W}m-3QdF!CW(8W@nO6#hE9T5412^e_qP8q zuD{(iJ==-Qi`0J%m3=}YOlq{Xu*M!zQ$kC2;{82s!akY1SJB^gm1CjX?%V38i-F@S zLY&kJ~Q`-)%5q%!j%M*jH4ibKgzNI)6}I-USwsL=m_Eo*+Ruvw%*f zADgLC9jdAOVZ+USQtT@4Fg{jX>@Iq zM0uM8==%J$1iqPUU1ioVJnGllmp@wQmR5#JN6sHi_AvdPO00X%=zPat)y5x{;2{$t z9duj$wQ~LDxP_PL=U3#;k=zMB4L8&1T?IbGo&0?5t~PW&KZ<**>guLulwT z2cd0DA+W8;GxCRIr_z zmL=^hD?{-eW*fjOdcs<73vPggQw#UHm0@GgzU~WY)WZH3fn!y;*yy-4o&MeBc(!+; zqc+{0kB@0mQ8odV<&16ntF!M%lG5om1$qxgjt)9BB$YwCp5c$-vO-!#HE1qz)mCD3 zpdnrwji%lJ_&iTVt9!R1 z;c?NTNdQ}{bGn0&5_uacNCQStRu+W5fTj*HSfEV{N5Nj{sk$~Tb(4$s)FJ zcPPF*ES6TK`a~#(9;jy@`GO#L)76ylI~awK0SYwOzwTu)4wgnTQ|C#1$2@UO#5kJZ zH9u)@uU#C8Z{9YN<+sn`*x)D@;@P>cjFOT@!YJby$Ucld=r68&7Ux*qys4Lg^b2dV zJ8$~Uo^-hP5%uwBr^}j*?{EQuvR*BN+G&%lb=DBInmJtRnWiK)`d&bGPacRRIGDup zOgPW(19eG}Wm=McVrC`jcC(L<7@_lKV`u}lww==$z>%;Hto|m zOc>M%Gcc=YaMOfLa}M6qY1q1iZxZ!JU*q8drrP}9FLxIYEh`V%%{u%J%cJp;oOw1Z z%VJ%=&3BgH$tyVL1S^>XY?xZiS+$321B<-(7mzUC_m>lKjK9s^7YBYG=ZZ~7P4QVT zf6*U(HQ9g9b!CaZWa2(i#i;QP@JhtlJufrLGq2~#N5C?>x1wHx9P|J_ z50`d^P9ddnnTMUDDd-wgC$!gePjPK)O7xpH`n+YYb}@#+a!~TD@Uc7!Py4ZdTM=gc z*Nvn}?G{TX`%ihK@o(0eU>PQY`-p-%k(tBoDQFs#nC9@KuWE6XS}}WjsnLl{h?E)u zpCz?$jGSAJ8wtb$r3etJ5!c~S`IpUM$$ok(>ePzZNv6FcGRStOY+Xqrj}7-d%5RNo zjLZjDuu=(WbQb}Bw~LVj%|%X>cAnUc*?t{`nvZQH0a=~;K(yTcI-+wI0m`Xe18Zxh z$s>O9?LcrR$OV)vTF6jFaxlf<6bH%1-o!}Wmhsv%+qbjr>6jR6yb%cP2 z9j0)DzpY1cHMScsO+3q^a5zkN-mrY+OwcB`>T}atq0ASfYZdod&a^rRX-CT74I>Go z;=nHl14`?yj+>xAFh6yvNPs@l5>GZ85BR$0h%Cb>`pyq@vF>hs-ZVeIuq7gnH`5~u ze&|4g4-n>3uiuOOh0AJ^)C&XNNX_DPPxAvntOwn21~;W^r?9P!qt%qz3%zAv>BA+NgAOpuh81?gt}nnhV;V-* z%Kr`Hg>xFQ)PVm{%xo#>iWGq5T++~H!jNDKYLg<{iI4x@d(9-Ud=j1?mB9 zq0fybLmD}W!;XPaOMBN1#Om4JwQs7@Q~{iM^ca8nNP^XkAL?ZHI3G<;pX5n8_n+fu zYMWc$aY#Ig{;|&z$vYYi_W|Ci7D1ww^jqv3927Hg@@Qc|mP{zsx7hLOY zo+5^^pg7n76HkJ}9*QyYQH`6RVfLCV;SRnm8?(-1{N@L);9S><#dNsrjcOj3j%wn$ z@%KPe$3YasyWj{aJoLQ`m)y zT%OvYm-06wu>0s&ha{x|zLz0>GaSy&Fl0PXdj|qq*PcUf)83-*Qcl+MKC+rbIIP{H z0=~gkWh0w?s4Ma=wz`1Clnx27+r=^?{tf5Bk-{Jt7l*cklel{n<3_BfgfRSoq4V2S z9(R;)xpjfGhK*h8d!g`;b>lqGcohGT4t@EP#S({aMjZE$r0yx8(rY1IF4k|(C8em_ zXsKXQ`wW7+@5mp%m^knyG(d=nGQ>pvhic3B;)2)cSRZf7QT*Dqokvu$+nVLXa<1JmSfM zac@$*tg%_oo5ajpFfH)efc63PGBmtHz(M~C~lUE6q5d8MuSK6YqS$a z=v*P4L~>;yrksG7j*jwvSLBS&c8(eA$c1M#g?)Uc?Sf?GCLt%!-I2J=mMrfhW~cG( zPAZqZ<-_l_!)IVYFt|=Hg2$}<-6i4+y4~-)g!H0Za$rGkn5Whm-{1zrcQFA!djsd> z3(SU~KAaCYk2S6oHTQ&s0lYWP<8e^viV&(42>VKGua{RMWcV9)M;%no2C9otZ9AX% ztArWr!yO>XLul<4k{1mJ&SS3yvs5blIoK@vP~m~PBgFo%sU>hPuis*@H3RED%8qc2 z?|7fP5x=&LdRf#U&zq8Kid>D~KzJ@cQ8`hX`dZq7P@U}xOrX2OU{E+urqwet>~$4J zbvAn3nu3>bHzR#aZyQw~1?z_|@%gkleq^vGglfz;^R#a-KBB`{h@82J47X%d;Vsf{ zUA_@zM?FyH?c`?0(N}(F#1%%wyz_fz(AMeGR{QPlcl>GYWuM))b)(JC$rR1E!ou^P zOlst>YWK}D%k3j>Dk!iCroC#`O>F6NLa@HFSO7H2>f;VO7(LyX(^Y zZ63iW{YtGlHBbQKXPBRZaU-I(Kl3ef*O#9l7GKq?H#Qa=Q z5@+wM%5-}N4+{a;Rr{U#l0hNTZA}P9y8Z&4fIzK)0@-`lr}SaZfg4p!azL>36ZdzP zZ_1VS{xcFCnaOH^zMa;`PoI5_Xh#Dqx->9ZRJHE!t#9v7+66ac4^FY#uaHL(PSz$X z#L5e*a{Zt3mL+;_CDj#nXqGcfH$@g>XJR!N@ub5ka&%FG`+IvbPzU$`Y)3I(pWZv> ztYtk1BGMzxunIEDBS{@0`6#grt&&1v$nIez^f{0kh@6zaIJpVMNuqG|ie^6=CxuYB ztok2yP4F$ccII9nFhtcYA}#UmO^*VY2;P54ZhcJn0y!{BaBz{m+$h3G31H$Ht;(+V7aFgXPuwp|Y(JLiPRh*kvUFOx|0 zATAPBbz6`?LT&f5p^n~z>LY2+p;5^b=khxCBZB8UZAlaHJA$2(>j(;EIonADcS@W9 zGN1GWB_u?9WAYCs1G17!H%MwS&ZkTkZPMbi&o|BHsd~)5ZWgs4I4P4q%G&1W1gx9} zR3ashye80}*_akVx8s-uJHw$c7W%H_RD?_W8)4G|vE*5taVOVm=uhqeo)A%8#oUERPxuJ+?W%65frzV2MP=KhY}=p9nNV_UU+ z&ZmX+e;6jKClkj4JmD0GW6<%D$z+f}2 zInWYK^V4T*->xFQzBbac^#zXEXDBanCszCP^5 z9{Z5Q+1WV>Jz6Bz20;$3V#PhHwc01)r`g02z!i%c8!pIgwX<9QbOBkY#GvHtG|0jcaoT7Q((gKxUO)4jJ=%_fSd^0 zQQ9?9qyb%g&!`|D2JlZ$bxu|@MWa=wGxaoc{}9s@N+z|tc-1=%8f*?;wvI9*+?-i3 z_W`q2>eq#vk>i;9E@YMx@)b7c*vkR#uD#@d-=v*PLmwYg1(7Q&` zNy1n?RwkT33Kn$xLPmYphcK)Y@?(Su;CJE46N22IGD?L+BpZ%c&u#MRMY?1N3ZPrq zU1_NvpAwk*MQVNnMkIX8;s7z~=fls=s{Kypm%qao;GLn1r=1DB0sP0Uhy#{ zxdw&X7?(aKE(>qO3c1l82Ny3UDp1#&AoHgh%7Rg*edgQDj3bPPLxQ2^VT}88Cz_$~ z7l|T7hI}^lsQDH)@n)Zp4V*jzNFf6yG?j_5>;;}D-m?d0Jilzqz6+zJ4&Ls&Q?R^E zynoY$4Nw)|{CZ9_zQ1#{OBVuGIJ~+;BmCt5z8EeD=1c?Tk)Qrn`?)5qg~*yDpo@*|IK>$>@J>Rk0Qy$^|2RKPV^rc%*x-*O^zk3izLp6rQ*0 z_-Q;6`9$wFM9h-?xD4TeVL2sIwBs$TRuDu|ZXMyB1a-xUu|T+kKEZvB$J(%*!(hPv zklS55?~1J%#Y$@Ddw$=*y86|VQ5{V`6Ag@JxPY7D_tIGH*$&G(jK5jV-fafM0+Z&$Czpc&FZzyd4gk68!lrq{D- zDbK(?VbErfa*@lyjZA6%&Y>qeRFpn0(Y$%abiK95(`t4p*Eols$7jTCO>OC>&)x2U zhJX|!uibcD`9}6CbA@u+q}{T)P=(RzjAQBdXLia*ZW(qxBs$c(4a1ujQLwU{ zOa*dG1>Nu#)*MYvRo5X@7HOqTRd>;Z(oLhh;h=>+_6R-7BG+sU>UTNXk~)pErNj_| zE;{XT3Et$9e9kkCGudP2?M@%w5N_oUU-|ngN+K_iJE2o77V1x6(hRhUVE9QfF838@ z{=lO+A@EOJ{?cIZ3pxHxM=UeGzf$8ic2k5{P1mmu+kvm2lAjpwoQ+eq`mM&t;m6m% z|9)v=L?V;O?#K=|Xh(WZRj64XAlY}F1)IvG(Y^1`#<4N&@=L(dsV4x>GR0jau`xn) zFbEgWt71Yk_R#VPz`ds08M@4PL3CtmLN1?qFdBK?pV9`6HFRBNO|H_*3OLu%EdhLg4>1SaC&$>Rhz5x~j-ITEH)7u}#)cl_JTLUSCTX2JqE~&`qSrE={qBo$3 zV=!d>n*Bgp9V697`&EbmvN`lArWKlQu*wRfQ`V0Bo`}_RcXW;w&9!h1_8$?~awY#w5P;59sB}ZW^CyijuN^3whUkJcPNxHsGO%t@!&9SCKZ&6r-lo zSh`_#Q(WaaZpT*B9aym6r_;6EU0dq#%Zq4%^9-|p2uH7h@Wx1Ds+Q@&Gb?=hu2ZNq z*)8HDj}&gI*hU{9qy<0!aLuMWvfHi*tn*36BtyoWXylf>S1P6#)&=s zo@w$HPM<2h(M;h#%51Y;XRs?@+PntWOh-=disri8PIY6!`WMeep{(0KwOg(adkU7- zF(=RS8t7Yx{}D5e;t!~No;H>7yR&+O;g(G*X8IT|sgHvrh_~s@7E}6pA?5xI5>Id* z2j(vBlv#Wt{bq#IwP#-LUgCR;?;ImFNo*6fFHH*)oCi1|E&i$0u1z{r_0-P&uC4?N z0D%C5euZn^UOnhZ;C46eR!En_mojnnCI7JNz-i4VbK_)AUst1DX#1tu?zh;HixSET zRtGi+JqU{oph5%BC*wz+WwmtKKy3_()IQdHLngYh6Ri)u@jy8MCJQSiMMEOkX8!3$ zpz%Z+^q`ywt{tjiM28(JoK&`vuqDt6DV~LN%>e)Hm0GLxmqF)&xhWH(A>4Ya3rdMk z$|;+=!TL7&SAK_1GxRDeFAR$Pe7v=UH;IZHi=>y;a#xk|`Yo-M$8X1Qb*%f(anOjV z`5h90=9Vm5!4!XE)|RzEVZVR}{3iD%t?21$Hbj~-894L_6SYj4MLH$82+ig+II%N? zP}*Nj`8Y&0Ij)IoMFZx8VbVtd-;tp|q7syXp>Z|$<4}u&fKrH-Ik<5o(bJXch*Fvk zO`7wqr4|)j8vA>KHM>qAlvI$Whb!r@p-}|OqZf}e(f7akgcai}nKXXud7BJ^Q&%1D ziKh%EiR%8y+|i@!_Ap9-ilIKkCOc^x`pC0Vm+7vqnV3K0NYuYC`Z#u68in^|T{hzL zR(Os91|t69qnNg>tM2?!1Ju4yj(wX(09@LX^JJGCU@jL`z5%cJ%(b=6{?ac%XPH?{ z|7=8gpM!n`3^SDpdMvGGL6TAf!R$Lbt;83Iy%ZoQr3V)f%hceVs}Gvj?R(_%5=OZG zkjCGqAvqNx%1E8Nc@$79*pye)3iN!JfiV zLF$les_t$V?o4_0W>2OO&N=C+XoRVDDIa~DEUF_k!YRmWMN`v&o?b!RWcYbJLD&{wRKdo78c_Xt)^SZgvExSJk{}~ zc1LoA!j{WIGU;lY+rLY%q90x|a)-AzuB&i`3p4OM9iQ|fDTqxk9k~P54J@53nGLGi z6|~>OR>nR^+PD=z_Jc4}tv{B}u)gofD6?B%`XuBy5ODG4S}W)Ji;x&FZGjSm_!zc9 zdpvroF1@Ws-dxY>%9sTQvtIm~&>xP;(hz5a@eW6jCAfq8VnaW37zJU{U{y7}mG>m> zR#m995+&=^VZ`7nO!b7PZ1c+=%V6$xDE z&A9&iVKMBPOJI2pA?ub&$6_1a?3|>U&w+}TkyT1I?4qmW%&?Gl(bQ|S)5o>vI*SWE z^Eh4(HM%M)7@WUc#=_7;9Eqw2j+^mW)uKmZ4k-Pp3i4LVV~1d^lsoyv?xsBgZ(~ik ze+9=LAjuYi)+@@0=x5YUUe);l@8&EU)k1Zc%_!46@*QbLK*)VRCqbAi#mC+%;rL`t zxnTWm_dHfVBcJsl|GMzX+qQNJp!;b6AAr6Pwiw2ZkR(HwJUz&g_pJs=XjH%a@?D5~ zz-K}busXd`IZcj_^_JnKDC)SHbwbZZ{HVJ`xzulCKla^VzWU+nt=h#JUqS}sxx>GZ zB{o@#uV!uJm9*Pn1Y%2)j43J~*DFF9Ktrb01D^+0FD&kPMzudw&(*6m`7=XyM?z;g z92nPmr_vcqxt+AwRz)mSNGc{2+j1B5YjTai*y~4|D8a(j5)Q&{u|UqmG6kApQ9;}b zI9;J2VqB|UhC`JYX{KClFBs#d!+@O0yIjKfvrT8tgHE^m_2C^}`ZWdCh%mvI&}o6G z`2LYbIvwl;k}WNR7P57G*gCG+6o2y~Q_IJu949ZRe);x1f05&=$b5be8TvUqqt;!; zNAT0%Ah97isDXLo26OgCF*cS?JqPBqR>Cd?1d=Q~bmu`5+FHRDR;`rK4>3)x-kd?Bmx1tYVoRK|sT+ID;L9Dx}^-lW;_}3%* zb`OW`pb2rGC*>7!r!8Oi$Ldw`ZRc%WK9>TbZ6ue%W`u@Ncpe^=i}83IdB31qY9~)q zzoAtt6dlN4NGA6UAx(luO}vR_Pm!7@j>e>ROq9E_fcs-GC}JxIl^MH4x($PwTQgp` zYusc|pJH=&E3YX5MIsBE=*j$!BECe+zJQMacFYE#n}R}EHW_(Vj$JI<1gOU{VP&ZX z$0GDP8Q)z|IeKRkHeqP8iSIA;I=L0@btDVOxvs}A)k*;_R?aHMtxIoX$x=KPkBcw< z^rkU;qWbm&=bJHj1F0_E+ipu}1SpRZXu^lr+Y*uv(m!{vhUjP5j0s?f7J;;Xa6f&z zaH_w}5-Iafg-IDmj9Lm}>pd8+pmDK!)c}Ril&Rc(qSju$v+fQCxfAS*Tx;_SuG2lP zZdHhEbUwx%<@WogclH|oz81@|(LuWeEm!tz;z#;27bLosO{UWX_cyQWHvKnJEq~tE zUX_e*>g^f0*<{|{taN`he@;Qh1}^C?gg@I~kh#0I(8(jTuW|Aw|K@S91sDqAwi(;W z&;hM8omYpu=ar`x4?S*mv483khvyU7_5yPIbWSWuquRSLO|A-NG(p&#=@}P7g{&$s)f?<(~nLM(BVfSMGUpl=J|G6_0eT)0l|`0%u17p{qXG_5}un_}qKy39Da!F83b5)#Q_k zsdMpFsR5W1@k2~j-oI)na;Tls>LXx@mAEzA0;tZcsU}?BrJA1#6Nf}^QnBuPXJ;Im zI9O4K|FHde<RXh%dnq#?Q$dj@l%%TygRLpIvLK}|z3 z{{BQ9$ER=n%Il=((Y#2{qL)I?B$Uwz@%^=QPm#)-g?f`rcM=@Dm?mmEo+*m&qjLtz z|5-t4E{bc}1k^S+W&@sIfF?Jg__1dt@eZ`fR?2DOZeIa-7O_wCXQcqHnL&21x z%uH>0IwN0oxQq2>f{PVKR?DZpYJlppYOC9V8H-T=>benjT7ij))qH=3hPHB#9tKoC1aJzAlVS)90p~v z_Eyw@lh53J!Woa_&%U128LQr}XIw98Cxyr33t8)de^=aawcZI;rsmd^LP-#)V`*~v z2EoOw{VDuv@*s#|LV@!blIM)&y%XeR8H^Z%`*+qBI3jR3H0X-Ebfj%50m5lvk;P^7 zisuYilDo6F^9Ykz#DCYc=6IYo{*F=T>p+8lm_@uS_Wp{xINAe6cU+=DatkOH=*^GD zV~WBMf=jwZLiJ3BQ2Fu-V^;9VFeb(BG9}XfTyNk=8~3}qaxES;NcE2Z;;_=!2a}^n zjZa4aHp_9{BV1OCVxe@9ZED>{R2sC*F{hKhugM%lgs*bD3tz(2_8|Ti_%e$p_oq|a zME0jR`(t!;Iz~XlKtFyX!Rda_~q!Dh=+44tpS7C?BH~Ig< zUT{_}lgu2r(G>$UI;})v%|U~G65$(mTg3uIs+CuJ2OQ~!5AMOkbcri5oAbZDqD*wg zD{NdrLnerBj1w|)X5hLK*^WMV*A7!s!O|$Bl7Q`QI4^ER!1vK(9`MH{8M3tSFcuOT zJ~zFyPF4A=ihgCQrPW)A4FvYBnoGs`R9I=|!bP9<#%RtlDUzm9Gn-4eXBmyB>T}y) zj2O9vFvU9?PgRTjpObkrCr$WDX-y4qN$@M(tnxTBi6GI5KN0=ogfHP)IT zgiSXWeWOZF^M~goG^&F&HRpbMj90$VI7HJKB}DuID2@GAOdX}LFf?gaLvZ?o{a$P7 zvShIk{-@{q>h#>v9}qVYgc}{=csAZEk-|>?T~C2)OVTIs^5M5lgw5cC^x_11WEt_= zr-1c_J*`AZtIZdNc%z0(WP5K~vF1eNN}Xkg4vDy_iDfMIb1z`>mrm-!&^~WWz3_0V zJ>}E7j-HpGXJ&b5MrvhQQ>fa`p}Gf2HRN(C52V)8be_5b=^2cpKW{7A*U{1G)KvUU zun(v}oVAc2g$M0q?u+^(0PJ0xZYve;Mgr@m5U#ES{L3XX$?LNfnKCeuf%WhQ`CKvd ztk5+vR?K|XeZq-AODvO*|4&CRu2}b|oV3+4Mdu}kqmtbjLW&UJF zYCyBAR_W>YOd{F01d`?T)AW%&UKZbXMw{~6ygqzbj}Oc|1Izl>>|cZMH(7pIT13V7 zqsFegTRH!B4)qg{628QJQ$17j<-#?g>;=6XAs+6D;NN0U=JPJPYk{(V3+y&iP{uwGeq<*w(S{5rL1stpVq@yFZ`oX+Af#HF6d>HkX0km(v}3OQ(8Wf9#JR zj<7)Dv{_dsX$FLpC$Cc`_VCl6z!(V3l%|(qwH53^?`2JIE3Nuzw#)8j^AvBAi{n6= z)@5`~Zw6GVJ}{fAqD%RcvC`}ALb&r6FG{4VZ5+lJWp^PQh}@!cY92+0Hd%aQZ&@ef zglV@7tbWqOLf9^X%k>s5$s6rpT?<1wV66_t-{qRDOl{Aeb~`rsPzi*!i`=Ax0iBte zT%b#M(&|$PLt0)r6BvT9Ue7uGMfA3E@-pqhR#bwcmsUtVil?LpB2*_ve1s0a+!HPECKTm3r{ZP7jRd+*NM$`M&5F%V=o1Z z5DRX_-5!$%^E*1plQm%u3kTPDL_$#rAU{1XNAP`8ouLQE;~q)FI!0KRi2pfKH=Zp2 zij+IJ+Ge)ZE-%w zaw^d!Mp`o$^xPEw{gECpxFbJ&wAa|XQ-S*Pnz{%5%{Z`@&~%kLhciAqD@F_HWZKZ$ z*2IXYT$A(t3=$mhi#uWm8d4}7!DH{=A;12eBHTq) zVP3+wN>weaDD>?z2wbo$N2Y|RFmQeB8waJ%RUQ*p@69A^mO0ltG}mG1ah@GJmQ=4Z z{q%Su!~>YV{gTt$ZL6lY*Dp=}VzI+(wUZ%1Y9Fc*Do0FN+2&$+kDj4IUpjLi*b8Mt zoPY0Joy4qXJ?^SpOg>gTl>_yo)b*_@m-(0K=SWcrHOd)KtgubY|9o&c@0f7J^+a(- zVjg)ef+$k7N@Oh))r4B8VQJ|vfX;7%Pa!x2nNU(n1>mpxD54|TO|ya~>Nouy=4-=7HNpn zCA+<<*7PNFi8KY9wRfUFx$SOW4~pcdQQ1nw%k*8tIx!ef^05ClQc_(z3Yn1NhnqCA%xvU ziph=*F1v!_z7xh6h#&7z-aWd#6R&81%HAa{u!gK#XC~$%a^2?%S3RWwm|LnVs4FjL z9;#lraoD_z;2ph!4wj2G>7F|K6EB8aVlk3L$!m?R^{Y{>sA&!48ZsDfC)!n-F!9iM zg6v?(iEzoY$FzwZzDd~Z3&d=ByuK>kziO$s+@-K=kY$Lyw>tt8y0mGuW%;78f2{td z)TpNZLqo)ql-8&)=rJUD4Jie=`(wcHvfh+H+xZE>F>IDD#L#WZ0J&%)RAdv2GF$vn z6K?D^VLVZ19s@?y=?$c29$8R^|NP-3&7*lLktm~KszLPFF^QdA^%&V-S3;+!{nPE0 zf%7w~qp@<8!<~DT&9}NLGsTRP`%nNW7L|ot)Mi?|{_iCRPNYW_g=N%~CW8Q_RA|+L zS3p5#vl@>5Z1v0>X>z-RdpwF^IdR#ogsMG}e{XQMAvMa5@pxivn+wNrR4eJJ3H;v# z{Nh9E8?VQM_6QNp&v%OKXtVMW$GHCqqb*$0F1BFhf|%}lehm5s7Z3WL2zJT>eQ2rY zfpB(?^D}kP&dw1a;n(xyxZA;35$ByYdEDurwy3jn(KMD`5Q;`aNf+5E=L^HS@R#y= zd7R)kBb`J!3f#v_;hj`mjB@5uVI%6QYWX22tJIsdRL^R>C1@rLb0g~28@P!G5TXF0 z$XY{erHZ_34np}b!yrIr@}i@`uNy1U(hQl#9jgb@?J0@e@J#A(h@dEs#ZWJwW(fd9YBR&z~Wjx-$OqK^wLs zlt8~=-mtKnmC5GQL(9gMHRY<^kE94!$pC?pC5%zaeS=WBCIf0bF`*3*xrakc^W!Bc z%r(5sH6Qnqk(AwY*kqIol|5A|Hs}E0ssSFA%Ak0~at%9IN%u0(kE!n0@+Em7)IxNx z+cdk{$ZQ3VDGVSNp(B$u|@=1DBNwa>P$Kc|MW(k)lyoiUQ6iuDxGqhU(?6o+Nh^g zE@+&iN4UQ<5sIX!ekr@Fzx)v?!f^S~jk zO|BN_v}vW+rcHCUxJ+i{n)Xeb<_N>}iGo<*zXH-|I;%P(`B3#Wxk5gqe5vF_uBgg6 zA>js0THCQ6=54cLnKUB$gINmLT{BOCi^RZBabQN0v1Hog;=F0bMP@%I3eU;A$OBHx z8zw$aO>bBx5L{9y^fdJ-tfnZuQ+kKCy(3vaFxyIxv5C6MX8ynmf^;9okaNJ!!OTL_{n)( zyo_E2QrW7PKNVfxG{veEV5$UEY@vdnptvjWm1U=5&!MR>Y9)TPD0pBNGm11BZ|c=B zBr!EKaFIf3syPEv@;jcX;*O26sHmg_r{eo06cznPQPGDKwd)LAAdSr6+$fXABPgoR zCNYGCmzb`GXrLVb*B7Bhw*!SThr57rtvCb~Uk=9v;oRj5xJ3iSRagbU{CNf;heZn~ z*Y#PXGA@5fvEjC({Z_A1kn#zsa3~5}%C|Ygedfp$N{rCy{8&1Nu^+&@Md@azN6b@~ zO_t#D>ZiypD@*?tR)XLW6oC0%R%t7gUMVGboW6B0ii8;+aP91rfR>Ld`4OqHeQk`NX)QglRgR070 z)$P@VlJF;Mvv|^&L${1i+<4@obI$4T%tQ#|A{tBmHRRUlHpe-$L?cznSE1yzb=Za)|t# zSbss{Mx*=_;OG9EO)8hOygv8p@_Jz&4WWC|DlIFCh}h&PCB>A;eXL*9Q9w6C$zhcRXMMes3RZ_K@Flx)p)AW( z`o5LHg=4HzCBBpG=PU%2upEnV~;h{w?l_Q0RP;yH<>2BiyV zjrVfuDI$FU)E^$XbSGawC&OUINLdpT^uU%a2Pi%8f`)f9m1&ewqjzLBK;nwIVpCB| zt%A>2^Md51{AA>jLfc*SAGD^xf081YI8aC_mJNN}+Gnkz{H5)5}fr%wHw0(z+=&`C8YR{1Yz#`Khs=U~j@uP{kyTSki|XjTDbv{Qx|j=+j; zu)y{K^$JbEdvu~d0!X_!;&SDpjA)2-u^3IcS$07QZoiAz3e zG|3M!g0s$KBs*N3zvptVs6@Nzt$~41GvCcL^WD8-(u0~ie>UgAEmkqkym1`5FsunQ z`UVoO8++cVU*2-S+F*XC=beV-E!S8ZOmt!jJOlqqPbNuYizRTLNwg40oBYQXQ~frR zXr1K0iZi6IY^~%NMYCkJ3QlH2LpZthjKNvkH5Y-9?@oQQaU^sT5Xk?T_P5}0)6M39 zS=ol-RQJN4uusgXZ!{Qu=NhSTqHDsh^TL@)sQ4u@+*rr95TdKJ{FoX%) zSuHkspTr#FW~z;v1#Xy8EK$HB6mV-_G=sr_p0tMauN?F9R~7Xyj17KW;GX^XIsRIM zgwr{#hyF0~AW(`@Sg=*IHdfv9F?ULxm{R(a*M)mAN&kyFoFVLD)p*a<80(od+)euw zLd$+gF=83Mm=J%b4tEgh#@RoV>WcVps*ye}kCXg3qpNTtkMmPSzkgIjDK^R^D%IgP zrqPZu0U?6ke<{L(#2N{1@Q?t>8$ANKGoB(oDZzP><@;=gjNmFM`5AIwQS8B50_NQ&ytIqmN&yU)JX$%=Ua_rNmJRMM`HAqMGt1o ze|dp0%(N&1hO2~$@N#fY@a573>f8W_egt#tBS53baLoIH&-VrT3=)}N0H*x5(fDn^ zm147_;!`;RP16iqC$2$Sh%0kq$(S+574%hG%wSt#B<89xO1YXB^yo#4FS-|guL50T z-NPCJKnbHZN)B_c_Q$IZ1?*O6r!e<=EKT6r2U#GR;A5I~)fy2(Q2buMA^u9-4kND~ zFs*joNSa6d8zg!cn;7UC86m~be$`y}Z%2>36_i5qhfh8EYrXgb(oQxzUwHG}<2TPW z$PsbYaOgjde(q(R_{6PW`+>>zx2GQc3z6@??S-xu!`z#XpDR?gBhnog)4;-f^+nQb z?5kre5X%Mhv1BeR7EegP1eYXLz47AW+jC^$;%jrj4lpfhiH(+tzlVSFlQ6H>PXQk^ zvVGPfg3w7^dP6eq^634!c-9|4br{~@-mu8MP+&ym!w!dh*i826^<-aj2WhF7uhHw} zYwBA_2f0*|B3XJcLusaT9sO2@kc^mUE?rk2)8TH8x>!9u*qm5jk`!L=KVVKvtbSIY ztSVP6AYYGbfC-DPllI{*DEQN(JtCP4KwS`nj|0zKERA&@LT`yfou&1iWHvt)C8V!F z*%6a8zzz8ikQ^^Rue2}c;V>cuix-E|CfofGP$G9VL0O}gWsXb$6cgOR06j68C8PxC zjAUy#!9)8MIbJ&tke$SkUJYk=6~=F|`HH&Cg~BRfC%`yag$c}}qQZ2kYR=>-Dq+;= zRVy_ET2U{jOt6IN!3-57|I*Xr4%JyqCQDt&-P3dDq{}-8CI5^DJN#>y;g<%hFLxq` z$uS#4X&8Q(7L-rr52~{wUgcU+@{&KO&YO6Z>jLL;^UAbE|MhIUqE}OK4(=B?C8Fsd z91WpPJkB?y2=M(Vl4Qpz2<26dY3M?RSOU1*Aag~w{+oDQ?1hmyjeE2cV|j;nz^ggjLct&4ySTv2ggKcLJs7#w zC?*MR-wD+FgmrWZn*i%-8Y8@#U)>e(zibuu2Xf!K_RUO7;PFJe%xLM?R z4=RYDVwhCoOS66TI@qpy>e3j_mU8X^_)*ljC{L6CB%-85;Xx%8bA&=Ima>Z+*Je>k zv*|MMq1;&tK9Yx{Aq& zF_u;=r!8cXJ*gHyg%nN{UJc7{hJQVtGKV~*+Z{5e#>)yP^0?NPtl7kjG7(ymHr9DO zbsMz^2Bvt$PCQ4mg_%(HZJ&aMzj!WS2A8EW`X@<^DEUFB{1ULuevM#p9y9q8+mUt0e9^3hRpcS_#b z*9W)A?0CFwds2QE1znQpl;3stq+9JEpB-V(<(EcB;S=(?lzjfc(OG?cWH!8>NWcfU zBMpAwaoAgXyWJWeMAX;JRc!x^6RhTY5$XA+;E#O~)GFxlp{q9~LNhr;p9|v`ib~*D zBB;I)MuRh_iP``lI|WvH1OstT$A z#iEj%{6!^qe7gv!9XPgm>~oft{0u?65#*wwhkB5s{6dtETby@3q8Yj{Y%*LSf=UpK zjv&KuZG2D;6AbUCbow&1n*j|bLP?;~gAX!I<+!Rn#*m=+LbWcJm&@&FwaP|e6~#C- z%!ND%DGMV3)iW5~AjCbTPvz+~J@SKvU(FO< zR=TXz&uB9M02402y*5aZsp$cy|JrKDjof&I5=WkUYG~FrVO?w1bn4noSuH;HpA{b# zR|~jrx`o*xgj~Rr6azU=AO~!Ko^<1C0N<-GPQ3V0QHv+-CE%*H1R6}LXJgU-XQD{E)fp$Ha=zdLSF>P zPlXq+_Fqz>d1^SffaW~+3GYK+BF84PJ-`63@POHsUUgucjI7uzInsCNc8M{PA~tue)00ODY1BIh@>2evGp0}(oHn>Y-8~JHh*gE#_542 zJ?BS*zFB9@i&>kV?OM|wTy@Tnu7ZPzx`(ph(byZ~HO{qLQib9}B(6+KRqRz0KyfFuGF;>IM)+%ok76@p@TW#G!wl5% zcrE?CP!F7ZZp!d(r0GAV4&c^w#njQ+%5opdMNXy_VSC24ZpB_8%IHivt+3@w%!)wS_VfM%4+1A72 zC2N&8FR9`QoxokU3&P|X6lbenKw^kujAl`ToAN5d4ioCcJWHeHVbS_WOUUwhbJK%m z1XKz5;&A`RJd5RF61CZ$u@Vw50x@SOIA>=*YD}gCea>{$az>SPNUBdV5`ZEq5)%a zR)IlCV>FtMM&p!ZOfG|&tkXBO#LjLZc&WFDYmH5@o{?(E{@Bvn0)O)73|{kWvxVv` z#MjiOBmL8z7Is5#l|N`m8cE-zv0GmavB;zI@NFKepo;qI$fa0i`Ifp#%`y*ehyDJl zcy0A)ch=?{h#CSOW}ty4C@*=co)C>u8lavg52VpX9=@fjq-PS1fG=Gxz@3c=Ss+aq zt);1|TrZ3MukC%cDCU8d<{=>yY=J8BCDj1%GW}T1IeD9TcxdR-@UUxmQPP^NMhNqi zvWX25DOou@yvy&MF|$1y^358ZQJ$Lxn49RQ+l;=*W$!3pvm@2p!N#aCp;2Jc5PGte zH-B|dNuv-g4QqFK#i?g5)4a*{cJ#hxiy>Vx5oC%0THJwCh@iKsE9UaB70a;*O5rsX4U-|ah>-*fG}(gfMD?y}ENNs?%I z#jQQ{!wI(|KF2@w^{qSa3bXvKt?u zCyMle8!vl{?q9cVKV>PoXxcls-ulk8uaG0^El8C--(mBDVP)XPq2CRtaxf%~$y_1{ z-Ji`RbAfCi7ZA%-1JKcl!G_(t8wPU^=GLr%r0VJt?PAUAq}9dM(&qeTzaJ9qh5VSt zQ9?_rj3CFmm_G*UcCbfCl887yisK~-6^2)&j+5D)^6!U;fKFX>LX!WJ-}(djSw62B z7Z@ubSoS?kGqs$N#h%SE9!U&DsKWTag}wbm7~M%R*~WbAI8#4P!{g)sUtQN18b=Yv zcV=#HFL%3px4ZWzIon(=m&-M^sYx%_)8$yE7^2pw~M(z(0PQHz`Ma1D?JTp6LU2ljS_NE%1S$GB3gj`hbD1!;47=6Bc%J zJvKLeV>KRMy)iu(Ykt^~B@SP$$5(&md*Fx8T%cc4pd}XtZ9`atG;Jv1!n8H|!r{8W%Z6f{PX-x4d!HMmfj=eJs|CF8G0m2|9FI!%-T)Xa!y4~>AP6zo$Y;5VHZpwIzu1jt%;tybq97uY(uYqc5|){)xYmghlt57vQF zF)yO|l|c7V$$NoikkQQZpj-2uE!n;~IO-u9-qkoxD@CM6BiN2(UT-fxIfZv2Rm*GB zMQF{VOQTEvf6QyyyrU!of&Fv`HgA4EZTv#qGoOhV2s|4IQb_OzlM&ZO?rEbvXR0GU z$B(cGEA|k}$k@!Ty9bEd{Pe{J03A(xgS_qDbkCEgUh&42%}stB@#ctNYriKACLQ>~ z@)aT+34kvn%v&A57b@gRYr0;4_#|cUF!JW`Dj^01U6p*0ss>x~vyYMFT2q_-0G~qu1wflB;BRMZ7yp;;-;X^^r5>tTaGsa#5ab@M1W?MqmX@Af zj_-*tM~Ifz$zeUM5f6vy;=2oUb&G53h~5Z}XqC%;&GNzbbt?tbtf@@mC=Q>=H*kTE}Lf;D7!kJ7(jUxlIIrHlNTtxa8g}72L-7& ze*R8{9W3uLfocV)oM2D#>5RPr3~Dl>SY`~J%{TXLAPxHmB@~HAnWdXPj=I^PzpUQ&yO@A zMb;s8$5h=_UR)!in$b?H<`glse$_D4e$BYfld!*EZQ)vfvo{#{bDsugK`2L3X`mki zKDrkWQ`F%r$h@xZMF%Ac{{wQ1EV4jchr(5|>lzt8V=_7HI+28Isy)_&2$Kmrc>9HO zqf_>`=aV}%GsMDL;+p%@ndAHEyS!LNkEVx|M0mFxQs}+oGmAN*#N}UQrflQI-;)y& zMyt`W+3(K3JUXRDt!yMNt3AhO-sC6yKE#wlW;~JM#~$K!we-fb$l5MQV|Z7sI8*@| zMmf)ACWgN85d#tL&+~vA%#fM@0|g)`)C@5FTH{l|1}FjajT}E=)7&5K<@rzHSp5)949E_&BQ;_m(Q9;UVAWnGbe< zOdTO%H*2{4^402dM+sffV__PK$BM?>-KQ(1V+XEJQzD1LD@G)mkadMjsB-+M>yo({ zg~>Z)J)BGSXh~UTcDt@IsQaUrT=(@$)#oEoUMOQkViTofb9eWRM8*jV>+)rOie80< zzKZJPiHlYDHq-@mCbcJ%xiFLd10vsvod5uMoMT{QU|;~^O#A7&@%%Pl8Ms*(K;Xvn zy=@5k|4bGJ<^~{_gMkSo3IH~J3rYZZoMT{QU|??e-@p*V!Tv7Aupj&&S|GL|0wHK2s3IUDq9Yh1awFO#6eN};_9coYCMKXJ{wH21wkPx`WGI>` z4k=tIqAB1iE-Iud@+(#=z${KIek|ZEDlLL7;4V-uh%V+YBrm=&7%+4&+%Y6E=rT+) zm@@1$WHazINHm-^5;d+h{5DWFpf?sbsyHk-dN}wwHaUhl(mEbGdOEf{06Q!@cstfS zJUoaz+&w@&ay`;M96oM7%0D(glt17=I6!JZ(m@VEK0$s#zCsW}q(bmROhd3k>O@{d zltk=BGDUzz%0?zeU`D`42uCnSSVyKv97tG5m`Kn`8cAA7j!DKz{7O1XY)Yg`;!6xm zI!lgBI!s7RR!n3}a!jsF@J%93kWIW!7*149XimIN@J}*Nc2BrZ^iWPvdQi4e08utk zc2S~Hyiwdz7*aw~h*GXn;8Pk?FjHDnic`W<`cxoPJXCB{npCn>&Q%&!I#p6tdR3ZL z=2kRTh*r8*-d6%wgjeiXMp(vpoMT{QU|^JF=waYv00AZ-<^nvc1-N6DcL<;RKw36VTFd z3Oar}g9NcPGvE9>GalOjuJ8#Dr|X7xVh>$rCvK4Mgq!4h;TE|s+(r*0;STjDVIPl} z3ioi0oD;m(1+zY0ggsp1Rk%TZ6K;~d5Jp zS{~IlHhE%l=j&8wI(G}b-lvh3OhTw_xiz^O1w&EhI@k7hMtN9|ol8_=O{Qk1YDgZ&N>f;9L~!&gC@gWL-y(+L$4F}LSf`QFGFp`{7}wZSi|YQr zXaBR1(W2zUYLenl2rxXWnb)zZJKv+kfzKIJb=*bKEazmTnQT@~O34aEeYT?#QxCAI zy9!J&;GLY+2lX3fKVSxHu>b&goNZPGnB%$;-rs8qZT9WnJt{N0?OvIgnHdyWNz~Yu zPm(t;S7v5rW@ct)W@cvQj^reJ_u714>=|h^8vMr_!AAS*Zv5XLPD6lAgoqF$L5dE# z=%J4RwlKstPQng$aR`TTGETv%B!4>2g0tdmI6KaPbK+b$H_n6e;(RziE`ST-Lbxz4 zf{P-<#c*+40(&@uOX5JcThrk#UOd)Z1 z%ut|21%(<%p|dwfd!7?9=Ip&g?r;ZxG(O9`{Mz4ARdGV;~{t`9)^eG5qKmX zg-7Etcq|@=$KwfjBA$dN<0*J5o`$F68F(h1g=gbAcrKoY=i>!cr9Ls*W(R%Bi@8J<1KhA-iEj19e5|+g?HmUcrV_E_u~WjAU=c-<0JSe zK8BCu6Zj-Pg-_!%_$)q$&*KaDBEEz#<16?ozJ{;k8~7%^g>U0K_%6PO@8bvfA%27( z<0tqjeukgp7x*Q9gVRjg3~vKl8cOM!OBdlrpmVu zcyqL2TBL<43R$aqP%F!<%8b>rHfbq~S!M<6xC6PC)huxot;Af7$3nzPvuYy3S}+~4 zx-LY_r$XyRch0QPr6^PtO*E@TUyHGp6QN1H-kGRTA?)(@Y}^#Z;Dn{#l5;z8OLw^{ z^45rMdwIs2y5sNh)KuBbbDgz&NiK{L+D4|CFx|0?6wOI}JZdzV(w$XuOxG(t>$*o~ zYNe`#PbHs;DjX}7$GJ4qY%g>#?}8w<5Mw)7G33&$z{T1h&=>89xt9jKsPCRYtrrw;1McB~w zaZ?qF&qDXuw5smVe<|xIrz`SoIAVMjkCe5l?6D1*nXEd6Q|(gI^^{-i&Lyd@ z)m-R^Duz!J|IGFxD@&n!tYEryH}YA(WaN|L%t}=a+c>ZJKFjkpb7)0mvZ7)tJ-xkN zTxLD03&urC<;2y#(1Wqm#%4_B*-TOZwW_C!Y%gw!s1!LX693HhI)>uw4c#myPe;s% z5u^4nigTe;s#fdxE^W+&CsSjY&Zt)gT-6K8EpJLu*`DjF%ut7jYGCHlxjt$rCDkUA zWytC7ROPB9S9Rzj(&tihDnVaVTUwN4`pTi*<({j$b@h)36pl@sa70zQl$B%I z2BS;%I|r$tcWt99XJU4+me$HhC+7&una(K$#;}Rl=2K=fcf}GXhJGPeE8N&x^B(AW zo;_aFpY?lP&wDbaDxwlkSGI(z78QX^RSE9w2%r}Fu(;{=g=|a%)^1ew&x-rv)P$Z|yNGau-3Yn#bOGA)s z`umh~MNuWNU~!Aj3A0u+ZWBtUq!E`MQv`8japDPCQIRptr*V6#Z`n++Ia_2d-A(P_ z|48c4*HIlGWKJWQDnVA%hy7LaW`sHEirHST`qmWr;9!9|ez@jZ;5y*j9!^{wgf&}Z z8YFItE|o0V_RxxJk93zDS+Ux1%_8!+ zZcF?5VJLspUofc|(MA}LU2X=pDr1vPwA0)Mj#yVg^m3sX5E|As&F_ZFVUdzd zL-<{iu%+fQ?odH!+aYPH!HNr_xGG(CoQ8r;dL}EGru?|i0=kO6MhtB^sG*nZ?b!I> z_nlxx?z_WuQ=3)NM^!7RgWMrPbJAC9RVwF2&!5yj1azXQoXK4hD42D_i|(W5p!wvC zT1$4@G?37uw .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 @@ -