forked from SmartBench/CMVR-IOT-UI
feat: update styles for a retro theme across the application
- Changed edge colors in vue-flow adapter for a cohesive retro look. - Updated feature colors and backgrounds in index.vue to match the new theme. - Enhanced login page styles with retro textures and colors. - Introduced a new retro.css file to define a comprehensive color palette and styles. - Adjusted various components to utilize the new retro styles, including buttons, inputs, and cards. - Improved responsiveness and accessibility in the login form and other UI elements.
This commit is contained in:
parent
e9fb33cc61
commit
a59028227f
17
index.html
17
index.html
@ -7,6 +7,9 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
@ -44,7 +47,7 @@
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #d8b36a;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
@ -62,7 +65,7 @@
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #008080;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
@ -79,7 +82,7 @@
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #d8b36a;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
@ -122,7 +125,7 @@
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #7171C6;
|
||||
background: #3b342a;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
@ -178,8 +181,8 @@
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #FFF;
|
||||
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
color: #fff4dc;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -212,4 +215,4 @@
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -9,30 +9,30 @@ $yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
// 默认主题变量
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText: #409eff;
|
||||
$menuBg: #304156;
|
||||
$menuHover: #263445;
|
||||
$menuText: #e7dac0;
|
||||
$menuActiveText: #f3cf7a;
|
||||
$menuBg: #3b342a;
|
||||
$menuHover: #554a3a;
|
||||
|
||||
// 浅色主题theme-light
|
||||
$menuLightBg: #ffffff;
|
||||
$menuLightHover: #f0f1f5;
|
||||
$menuLightText: #303133;
|
||||
$menuLightActiveText: #409eff;
|
||||
$menuLightBg: #fffaf0;
|
||||
$menuLightHover: #e8dcc0;
|
||||
$menuLightText: #504737;
|
||||
$menuLightActiveText: #008080;
|
||||
|
||||
// 基础变量
|
||||
$base-sidebar-width: 200px;
|
||||
$sideBarWidth: 200px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
$base-menu-color: #e7dac0;
|
||||
$base-menu-color-active: #f3cf7a;
|
||||
$base-menu-background: #3b342a;
|
||||
$base-sub-menu-background: #2c271f;
|
||||
$base-sub-menu-hover: #554a3a;
|
||||
|
||||
// 组件变量
|
||||
$--color-primary: #409eff;
|
||||
$--color-primary: #008080;
|
||||
$--color-success: #67c23a;
|
||||
$--color-warning: #e6a23c;
|
||||
$--color-danger: #f56c6c;
|
||||
|
||||
@ -139,7 +139,7 @@ const theme = ref(settingsStore.theme)
|
||||
const sideTheme = ref(settingsStore.sideTheme)
|
||||
const tagsViewPersist = ref(settingsStore.tagsViewPersist)
|
||||
const storeSettings = computed(() => settingsStore)
|
||||
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
|
||||
const predefineColors = ref(["#008080", "#8B4513", "#65743F", "#B07A2A", "#9A4035", "#406E72", "#746B5D", "#4B3D30"])
|
||||
|
||||
/** 是否需要dynamicTitle */
|
||||
function dynamicTitleChange() {
|
||||
@ -278,4 +278,4 @@ defineExpose({
|
||||
margin: -3px 8px 0px 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import locale from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
import '@/styles/retro.css' // retro theme overrides must load after Element Plus and the base styles
|
||||
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
|
||||
@ -15,7 +15,7 @@ const useSettingsStore = defineStore(
|
||||
{
|
||||
state: () => ({
|
||||
title: '',
|
||||
theme: storageSetting.theme || '#409EFF',
|
||||
theme: storageSetting.theme || '#008080',
|
||||
sideTheme: storageSetting.sideTheme || sideTheme,
|
||||
showSettings: showSettings,
|
||||
navType: storageSetting.navType === undefined ? navType : storageSetting.navType,
|
||||
|
||||
522
src/styles/retro.css
Normal file
522
src/styles/retro.css
Normal file
@ -0,0 +1,522 @@
|
||||
:root {
|
||||
/* Core palette: aged paper, oxidized teal and workshop brown. */
|
||||
--retro-bg-page: #faf3df;
|
||||
--retro-bg-white: #fffaf0;
|
||||
--retro-bg-muted: #efe4ca;
|
||||
--retro-bg-deep: #3b342a;
|
||||
--retro-border-dark: #7a674f;
|
||||
--retro-border-strong: #4b3d30;
|
||||
--retro-text-primary: #211b12;
|
||||
--retro-text-regular: #504737;
|
||||
--retro-text-secondary: #7c7160;
|
||||
--retro-primary: #008080;
|
||||
--retro-primary-dark: #005e5e;
|
||||
--retro-primary-soft: #d4e4dc;
|
||||
--retro-ochre: #b07a2a;
|
||||
--retro-danger: #9a4035;
|
||||
--retro-success: #65743f;
|
||||
--retro-radius-none: 0px;
|
||||
--retro-radius-sm: 2px;
|
||||
--retro-border-width: 2px;
|
||||
--retro-shadow-hard: 4px 4px 0 0 rgba(33, 27, 18, 0.3);
|
||||
--retro-shadow-small: 2px 2px 0 0 rgba(33, 27, 18, 0.32);
|
||||
--retro-shadow-inset: inset 2px 2px 0 rgba(75, 61, 48, 0.14);
|
||||
--retro-font-display: "Playfair Display", "Noto Serif SC", "Songti SC", STSong, Georgia, "Times New Roman", serif;
|
||||
--retro-font-body: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||||
--retro-paper-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.055'/%3E%3C/svg%3E");
|
||||
|
||||
/* Element Plus theme bridge. */
|
||||
--el-color-primary: var(--retro-primary);
|
||||
--el-color-primary-rgb: 0, 128, 128;
|
||||
--el-color-success: var(--retro-success);
|
||||
--el-color-warning: var(--retro-ochre);
|
||||
--el-color-danger: var(--retro-danger);
|
||||
--el-color-error: var(--retro-danger);
|
||||
--el-color-info: #746b5d;
|
||||
|
||||
--el-bg-color: var(--retro-bg-white);
|
||||
--el-bg-color-page: var(--retro-bg-page);
|
||||
--el-bg-color-overlay: var(--retro-bg-white);
|
||||
--el-text-color-primary: var(--retro-text-primary);
|
||||
--el-text-color-regular: var(--retro-text-regular);
|
||||
--el-text-color-secondary: var(--retro-text-secondary);
|
||||
--el-text-color-placeholder: #998c78;
|
||||
--el-text-color-disabled: #aa9d87;
|
||||
|
||||
--el-border-color-darker: var(--retro-border-strong);
|
||||
--el-border-color-dark: #665442;
|
||||
--el-border-color: var(--retro-border-dark);
|
||||
--el-border-color-light: #a58f70;
|
||||
--el-border-color-lighter: #c7b99d;
|
||||
--el-border-color-extra-light: #ddd1b7;
|
||||
--el-border-radius-base: var(--retro-radius-sm);
|
||||
--el-border-radius-small: var(--retro-radius-none);
|
||||
--el-border-radius-round: var(--retro-radius-sm);
|
||||
--el-border-radius-circle: var(--retro-radius-sm);
|
||||
|
||||
--el-fill-color: #e8dcc0;
|
||||
--el-fill-color-light: #f0e6cf;
|
||||
--el-fill-color-lighter: #f5ecd9;
|
||||
--el-fill-color-extra-light: #faf3e3;
|
||||
--el-fill-color-dark: #d8c8a8;
|
||||
--el-fill-color-darker: #c9b58f;
|
||||
--el-fill-color-blank: var(--retro-bg-white);
|
||||
--el-disabled-bg-color: #eadfc7;
|
||||
--el-disabled-text-color: #948874;
|
||||
--el-disabled-border-color: #b9aa8e;
|
||||
--el-mask-color: rgba(33, 27, 18, 0.58);
|
||||
--el-mask-color-extra-light: rgba(33, 27, 18, 0.25);
|
||||
--el-box-shadow: var(--retro-shadow-hard);
|
||||
--el-box-shadow-light: var(--retro-shadow-hard);
|
||||
--el-box-shadow-lighter: var(--retro-shadow-small);
|
||||
--el-box-shadow-dark: 6px 6px 0 rgba(20, 16, 11, 0.48);
|
||||
--el-font-family: var(--retro-font-body);
|
||||
|
||||
/* Existing layout variables. */
|
||||
--main-fill-bg: var(--retro-bg-page);
|
||||
--navbar-bg: #f4ead2;
|
||||
--navbar-text: var(--retro-text-primary);
|
||||
--navbar-hover: #e4d5b7;
|
||||
--sidebar-bg: var(--retro-bg-deep);
|
||||
--sidebar-text: #e7dac0;
|
||||
--sidebar-logo-text: #fff4dc;
|
||||
--menu-hover: #554a3a;
|
||||
--menu-active-text: #f3cf7a;
|
||||
--tags-bg: #e9dcc0;
|
||||
--tags-item-bg: #fff7e7;
|
||||
--tags-item-border: var(--retro-border-dark);
|
||||
--tags-item-text: var(--retro-text-regular);
|
||||
--tags-item-hover: #dfd0b2;
|
||||
--tags-close-hover: #806b50;
|
||||
--splitpanes-default-bg: var(--retro-bg-white);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
background-color: var(--retro-bg-page);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-body);
|
||||
background-image: var(--retro-paper-texture);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--retro-bg-white);
|
||||
background: var(--retro-primary);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.retro-title,
|
||||
.el-dialog__title,
|
||||
.el-drawer__title,
|
||||
.el-card__header,
|
||||
.el-descriptions__title,
|
||||
.el-page-header__title {
|
||||
font-family: var(--retro-font-display);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Background and structural surfaces. */
|
||||
#app .app-main {
|
||||
background-color: var(--retro-bg-page) !important;
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
|
||||
#app .app-container {
|
||||
border: var(--retro-border-width) solid var(--retro-border-dark);
|
||||
border-radius: var(--retro-radius-none);
|
||||
background-color: rgba(255, 250, 240, 0.96);
|
||||
box-shadow: var(--retro-shadow-hard);
|
||||
}
|
||||
|
||||
#app .navbar {
|
||||
border-bottom: var(--retro-border-width) solid var(--retro-border-strong);
|
||||
background: var(--navbar-bg) !important;
|
||||
box-shadow: 0 3px 0 rgba(75, 61, 48, 0.3) !important;
|
||||
}
|
||||
|
||||
#app .navbar .hamburger-container,
|
||||
#app .navbar .right-menu-item {
|
||||
border-right: 1px solid rgba(75, 61, 48, 0.24);
|
||||
}
|
||||
|
||||
#app .navbar .right-menu-item.hover-effect:hover,
|
||||
#app .navbar .hamburger-container:hover {
|
||||
background: var(--navbar-hover) !important;
|
||||
}
|
||||
|
||||
#app .navbar .user-avatar {
|
||||
border: 2px solid var(--retro-border-strong);
|
||||
border-radius: var(--retro-radius-sm) !important;
|
||||
filter: sepia(0.18) contrast(1.04);
|
||||
}
|
||||
|
||||
#app .sidebar-container {
|
||||
border-right: 3px solid var(--retro-border-strong);
|
||||
background: var(--retro-bg-deep) !important;
|
||||
box-shadow: 4px 0 0 rgba(33, 27, 18, 0.25) !important;
|
||||
}
|
||||
|
||||
#app .sidebar-logo-container,
|
||||
#app .sidebar-container .scrollbar-wrapper,
|
||||
#app .sidebar-container .el-menu {
|
||||
--el-menu-bg-color: var(--retro-bg-deep) !important;
|
||||
--el-menu-text-color: var(--sidebar-text) !important;
|
||||
--el-menu-hover-bg-color: var(--menu-hover) !important;
|
||||
background: var(--retro-bg-deep) !important;
|
||||
}
|
||||
|
||||
#app .sidebar-logo-container {
|
||||
border-bottom: 2px solid #8e7658;
|
||||
}
|
||||
|
||||
#app .sidebar-logo-container .sidebar-title {
|
||||
color: var(--sidebar-logo-text) !important;
|
||||
font-family: var(--retro-font-display) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
#app .sidebar-container .el-menu-item,
|
||||
#app .sidebar-container .el-sub-menu__title {
|
||||
color: var(--sidebar-text) !important;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
#app .sidebar-container .el-menu-item:hover,
|
||||
#app .sidebar-container .el-sub-menu__title:hover {
|
||||
background: var(--menu-hover) !important;
|
||||
}
|
||||
|
||||
#app .sidebar-container .el-menu-item.is-active {
|
||||
color: var(--menu-active-text) !important;
|
||||
border-left-color: var(--retro-primary);
|
||||
background: #594d3c !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#app .tags-view-container {
|
||||
border-bottom: 2px solid var(--retro-border-strong) !important;
|
||||
background: var(--tags-bg) !important;
|
||||
box-shadow: 0 3px 0 rgba(75, 61, 48, 0.22) !important;
|
||||
}
|
||||
|
||||
#app .tags-view-container .tags-view-item {
|
||||
border: 1px solid var(--retro-border-dark) !important;
|
||||
border-radius: 0 !important;
|
||||
background: var(--tags-item-bg) !important;
|
||||
color: var(--tags-item-text) !important;
|
||||
}
|
||||
|
||||
#app .tags-view-container .tags-view-item.active {
|
||||
border-color: var(--retro-primary-dark) !important;
|
||||
background: var(--retro-primary) !important;
|
||||
color: #fffaf0 !important;
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.28);
|
||||
}
|
||||
|
||||
#app .tags-view-container .tags-view-item.active::before {
|
||||
border-radius: 0 !important;
|
||||
background: #f3cf7a !important;
|
||||
}
|
||||
|
||||
/* Element Plus: hard edges and mechanical interaction. */
|
||||
.el-button {
|
||||
border-width: 2px;
|
||||
border-radius: var(--retro-radius-sm);
|
||||
box-shadow: var(--retro-shadow-small);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-button:not(.is-disabled):hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 rgba(33, 27, 18, 0.32);
|
||||
}
|
||||
|
||||
.el-button:not(.is-disabled):active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-button.is-circle,
|
||||
.el-button.is-round {
|
||||
border-radius: var(--retro-radius-sm);
|
||||
}
|
||||
|
||||
.el-button.is-text,
|
||||
.el-button.is-link,
|
||||
.el-button--text {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-input-number,
|
||||
.el-date-editor.el-input__wrapper {
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: var(--retro-radius-sm);
|
||||
background-color: var(--retro-bg-white);
|
||||
box-shadow: var(--retro-shadow-inset) !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover,
|
||||
.el-select__wrapper:hover,
|
||||
.el-textarea__inner:hover,
|
||||
.el-input-number:hover {
|
||||
border-color: var(--retro-primary);
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-select__wrapper.is-focused,
|
||||
.el-textarea__inner:focus {
|
||||
border-color: var(--retro-primary);
|
||||
box-shadow: var(--retro-shadow-inset), 2px 2px 0 rgba(0, 128, 128, 0.35) !important;
|
||||
}
|
||||
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-message-box,
|
||||
.el-drawer,
|
||||
.el-popover.el-popper,
|
||||
.el-dropdown__popper,
|
||||
.el-select__popper,
|
||||
.el-picker__popper {
|
||||
border: 2px solid var(--retro-border-strong);
|
||||
border-radius: var(--retro-radius-none);
|
||||
background-color: var(--retro-bg-white);
|
||||
box-shadow: var(--retro-shadow-hard) !important;
|
||||
}
|
||||
|
||||
.el-card__header,
|
||||
.el-dialog__header,
|
||||
.el-message-box__header,
|
||||
.el-drawer__header {
|
||||
border-bottom: 2px solid var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted);
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-message-box__header {
|
||||
margin-right: 0;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.el-dialog__footer,
|
||||
.el-message-box__btns {
|
||||
border-top: 1px solid var(--retro-border-dark);
|
||||
background: #f7eedb;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-border-color: var(--retro-border-dark);
|
||||
--el-table-header-bg-color: var(--retro-bg-muted);
|
||||
--el-table-header-text-color: var(--retro-text-primary);
|
||||
--el-table-row-hover-bg-color: #eee2c8;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
border-bottom: 2px solid var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted) !important;
|
||||
font-family: var(--retro-font-display);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell {
|
||||
border-bottom-color: #c9b999;
|
||||
}
|
||||
|
||||
.el-table::before,
|
||||
.el-table--border::after,
|
||||
.el-table--border::before,
|
||||
.el-table__inner-wrapper::before {
|
||||
background-color: var(--retro-border-dark) !important;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 2px;
|
||||
background-color: var(--retro-border-dark);
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
height: 3px;
|
||||
background-color: var(--retro-primary);
|
||||
}
|
||||
|
||||
.el-tag,
|
||||
.el-badge__content,
|
||||
.el-segmented,
|
||||
.el-checkbox__inner,
|
||||
.el-radio__inner,
|
||||
.el-switch__core,
|
||||
.el-progress-bar__outer,
|
||||
.el-pagination button,
|
||||
.el-pager li {
|
||||
border-radius: var(--retro-radius-none) !important;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-width: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-checkbox__inner,
|
||||
.el-radio__inner {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.el-pagination button,
|
||||
.el-pager li {
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
margin: 0 2px;
|
||||
background: var(--retro-bg-white) !important;
|
||||
}
|
||||
|
||||
.el-pager li.is-active {
|
||||
background: var(--retro-primary) !important;
|
||||
color: #fffaf0;
|
||||
}
|
||||
|
||||
.el-alert,
|
||||
.el-collapse,
|
||||
.el-collapse-item__header,
|
||||
.el-collapse-item__wrap,
|
||||
.el-descriptions,
|
||||
.el-upload-dragger,
|
||||
.el-tree,
|
||||
.el-menu--popup {
|
||||
border-radius: var(--retro-radius-none) !important;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
border: 2px dashed var(--retro-border-dark);
|
||||
background: #fbf3e1;
|
||||
}
|
||||
|
||||
.el-tooltip__trigger:focus-visible,
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 3px double var(--retro-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background-color: rgba(250, 243, 223, 0.82);
|
||||
}
|
||||
|
||||
.el-message,
|
||||
.el-notification {
|
||||
border: 2px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--retro-shadow-hard);
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
height: 3px !important;
|
||||
background: var(--retro-primary) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-left: 1px solid var(--retro-border-dark);
|
||||
background: #e1d3b6 !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 1px solid var(--retro-border-strong);
|
||||
border-radius: 0 !important;
|
||||
background: #8c7a61 !important;
|
||||
}
|
||||
|
||||
/* Dark mode remains archival and warm instead of returning to modern blue-black. */
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
--retro-bg-page: #1e1c17;
|
||||
--retro-bg-white: #29261f;
|
||||
--retro-bg-muted: #373126;
|
||||
--retro-border-dark: #917b5d;
|
||||
--retro-border-strong: #bd9d6d;
|
||||
--retro-text-primary: #f1e4c7;
|
||||
--retro-text-regular: #d4c5a8;
|
||||
--retro-text-secondary: #aa9b81;
|
||||
--retro-shadow-hard: 4px 4px 0 0 rgba(0, 0, 0, 0.72);
|
||||
--retro-shadow-small: 2px 2px 0 0 rgba(0, 0, 0, 0.72);
|
||||
--el-bg-color: var(--retro-bg-white);
|
||||
--el-bg-color-page: var(--retro-bg-page);
|
||||
--el-bg-color-overlay: #302c23;
|
||||
--el-text-color-primary: var(--retro-text-primary);
|
||||
--el-text-color-regular: var(--retro-text-regular);
|
||||
--el-text-color-secondary: var(--retro-text-secondary);
|
||||
--el-border-color: var(--retro-border-dark);
|
||||
--el-border-color-light: #74644e;
|
||||
--el-border-color-lighter: #5d513f;
|
||||
--el-border-color-extra-light: #4c4335;
|
||||
--el-fill-color: #3e382d;
|
||||
--el-fill-color-light: #373229;
|
||||
--el-fill-color-lighter: #322e26;
|
||||
--el-fill-color-extra-light: #2d2a23;
|
||||
--el-fill-color-blank: var(--retro-bg-white);
|
||||
--main-fill-bg: var(--retro-bg-page);
|
||||
--navbar-bg: #302b22;
|
||||
--navbar-text: var(--retro-text-primary);
|
||||
--navbar-hover: #493f31;
|
||||
--tags-bg: #352f25;
|
||||
--tags-item-bg: #29261f;
|
||||
--tags-item-border: #806d53;
|
||||
--tags-item-text: var(--retro-text-regular);
|
||||
}
|
||||
|
||||
html.dark #app .app-container {
|
||||
background-color: rgba(41, 38, 31, 0.96);
|
||||
}
|
||||
|
||||
html.dark .el-loading-mask {
|
||||
background-color: rgba(30, 28, 23, 0.82);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#app .app-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#app .app-container {
|
||||
padding: 14px;
|
||||
box-shadow: 3px 3px 0 rgba(33, 27, 18, 0.28);
|
||||
}
|
||||
}
|
||||
@ -96,13 +96,15 @@ const handleDragCustom = (event, node) => {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
background: #f1e7d0;
|
||||
}
|
||||
|
||||
.library-header {
|
||||
padding: 16px 14px 14px;
|
||||
border-bottom: 1px solid #e4e8ef;
|
||||
background: #fff;
|
||||
border-bottom: 2px solid var(--retro-border-dark);
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
|
||||
.library-heading {
|
||||
@ -113,13 +115,15 @@ const handleDragCustom = (event, node) => {
|
||||
}
|
||||
|
||||
.library-title {
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.library-subtitle {
|
||||
margin-top: 2px;
|
||||
color: #8a94a6;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -138,16 +142,16 @@ const handleDragCustom = (event, node) => {
|
||||
.el-collapse-item__header {
|
||||
height: 46px;
|
||||
padding: 0 14px;
|
||||
border-bottom-color: #e8ebf0;
|
||||
background: #f8fafc;
|
||||
color: #344054;
|
||||
border-bottom: 1px solid var(--retro-border-dark);
|
||||
background: #efe4ca;
|
||||
color: var(--retro-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
border-bottom-color: #e8ebf0;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid var(--retro-border-dark);
|
||||
background: #f7eedb;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
@ -170,10 +174,10 @@ const handleDragCustom = (event, node) => {
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
place-items: center;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #7a8597;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-white);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
@ -192,16 +196,18 @@ const handleDragCustom = (event, node) => {
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
padding: 9px 8px 9px 10px;
|
||||
border: 1px solid #e1e6ed;
|
||||
border-radius: 7px;
|
||||
background: #fff;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.22);
|
||||
cursor: grab;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #f2a071;
|
||||
box-shadow: 0 5px 14px rgba(31, 41, 55, 0.08);
|
||||
transform: translateX(2px);
|
||||
border-color: var(--retro-primary);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
transform: translate(-1px, -1px);
|
||||
}
|
||||
|
||||
&:active { cursor: grabbing; }
|
||||
@ -212,8 +218,9 @@ const handleDragCustom = (event, node) => {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
|
||||
img {
|
||||
width: 21px;
|
||||
@ -226,7 +233,8 @@ const handleDragCustom = (event, node) => {
|
||||
|
||||
.node-name {
|
||||
overflow: hidden;
|
||||
color: #202938;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
@ -237,7 +245,7 @@ const handleDragCustom = (event, node) => {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
color: #7a8597;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -245,7 +253,7 @@ const handleDragCustom = (event, node) => {
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
color: #a8b0bf;
|
||||
color: var(--retro-border-dark);
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -94,10 +94,10 @@ defineExpose({ closePopover });
|
||||
gap: 8px;
|
||||
margin: -4px -4px 10px;
|
||||
padding: 5px 7px 5px 9px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 6px;
|
||||
background: #f7f9fc;
|
||||
color: #526071;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -125,9 +125,9 @@ defineExpose({ closePopover });
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 7px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 0;
|
||||
background: rgba(255, 250, 240, 0.76);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
@ -135,28 +135,28 @@ defineExpose({ closePopover });
|
||||
}
|
||||
|
||||
.node-state--success {
|
||||
border-color: #c8ead5;
|
||||
background: #effaf3;
|
||||
color: #1e7d49;
|
||||
border-color: #65743f;
|
||||
background: #e2e3c7;
|
||||
color: #536431;
|
||||
}
|
||||
|
||||
.node-state--failed,
|
||||
.node-state--stopped {
|
||||
border-color: #f1cecb;
|
||||
background: #fff3f2;
|
||||
color: #c33b32;
|
||||
border-color: #9a4035;
|
||||
background: #efd8cf;
|
||||
color: #8f332c;
|
||||
}
|
||||
|
||||
.node-state--paused {
|
||||
border-color: #d9dee7;
|
||||
background: #f3f5f8;
|
||||
color: #657084;
|
||||
border-color: #746b5d;
|
||||
background: #e7dcc5;
|
||||
color: #61594d;
|
||||
}
|
||||
|
||||
.node-state--running {
|
||||
border-color: #cbdcf8;
|
||||
background: #f0f6ff;
|
||||
color: #2f6fca;
|
||||
border-color: #406e72;
|
||||
background: #d9e5e2;
|
||||
color: #315f63;
|
||||
|
||||
.node-state__icon { animation: rotate-animation 1.2s linear infinite; }
|
||||
}
|
||||
@ -176,11 +176,12 @@ defineExpose({ closePopover });
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.result-section--output { border-top: 1px solid #e8ebf0; }
|
||||
.result-section--output { border-top: 1px solid var(--retro-border-dark); }
|
||||
|
||||
.result-section__title {
|
||||
margin-bottom: 8px;
|
||||
color: #344054;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
@ -188,7 +189,7 @@ defineExpose({ closePopover });
|
||||
.result-section__content {
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
color: #475467;
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,9 +218,10 @@ onMounted(() => {
|
||||
height: 36px;
|
||||
flex: 0 0 36px;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
background: #f1f5f9;
|
||||
color: var(--node-accent, #475569);
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--node-accent, #406e72);
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
@ -240,7 +241,8 @@ onMounted(() => {
|
||||
|
||||
.node-title__name {
|
||||
overflow: hidden;
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
line-height: 22px;
|
||||
@ -251,10 +253,10 @@ onMounted(() => {
|
||||
.node-title__type {
|
||||
flex: 0 0 auto;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
color: #697386;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: #f0e6cf;
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -287,31 +289,32 @@ onMounted(() => {
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #7b8494;
|
||||
color: var(--retro-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #dfe4ec;
|
||||
background: #f8fafc;
|
||||
color: #344054;
|
||||
border-color: var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-primary);
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
|
||||
}
|
||||
|
||||
&.is-run:hover {
|
||||
border-color: #b7dfc7;
|
||||
background: #effaf3;
|
||||
color: #168447;
|
||||
border-color: #65743f;
|
||||
background: #e2e3c7;
|
||||
color: #536431;
|
||||
}
|
||||
|
||||
&.is-danger:hover {
|
||||
border-color: #f2c5c2;
|
||||
background: #fff3f2;
|
||||
color: #d93025;
|
||||
border-color: #9a4035;
|
||||
background: #efd8cf;
|
||||
color: #8f332c;
|
||||
}
|
||||
|
||||
&.is-confirm { color: #168447; }
|
||||
&.is-confirm { color: #65743f; }
|
||||
}
|
||||
|
||||
.node-title__editor {
|
||||
@ -325,7 +328,7 @@ onMounted(() => {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
color: #7a8494;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
<template #edge-flow-edge="edgeProps">
|
||||
<FlowEdge v-bind="edgeProps" />
|
||||
</template>
|
||||
<Background color="#d9dee8" :gap="24" :size="1" />
|
||||
<Background color="#b8a98b" :gap="24" :size="1.2" />
|
||||
<Controls position="bottom-right" />
|
||||
</VueFlow>
|
||||
</el-main>
|
||||
@ -528,11 +528,11 @@ const defaultEdgeOptions = {
|
||||
interactionWidth: 32,
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: "#ff6b35",
|
||||
color: "#8b4513",
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
style: { stroke: "#ff6b35", strokeWidth: 2 },
|
||||
style: { stroke: "#8b4513", strokeWidth: 2 },
|
||||
};
|
||||
|
||||
/**
|
||||
@ -2723,10 +2723,10 @@ onUnmounted(() => {
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #dfe6ef;
|
||||
border-radius: 6px;
|
||||
background: #f7f9fc;
|
||||
color: #65758b;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@ -2753,8 +2753,10 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e3e7ee;
|
||||
background: #fff;
|
||||
border-bottom: 3px solid var(--retro-border-strong);
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: 0 3px 0 rgba(33, 27, 18, 0.22);
|
||||
gap: 18px;
|
||||
|
||||
.flow-heading {
|
||||
@ -2767,7 +2769,8 @@ onUnmounted(() => {
|
||||
.flow-heading__name {
|
||||
overflow: hidden;
|
||||
max-width: 320px;
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
text-overflow: ellipsis;
|
||||
@ -2780,10 +2783,10 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 5px;
|
||||
background: #f8fafc;
|
||||
color: #687386;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: #efe4ca;
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -2791,35 +2794,35 @@ onUnmounted(() => {
|
||||
.flow-status__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
border-radius: 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.flow-status--release,
|
||||
.flow-status--testRunFinish {
|
||||
border-color: #c8ead5;
|
||||
background: #effaf3;
|
||||
color: #1e7d49;
|
||||
border-color: #65743f;
|
||||
background: #e2e3c7;
|
||||
color: #536431;
|
||||
}
|
||||
|
||||
.flow-status--testRunning,
|
||||
.flow-status--updateData {
|
||||
border-color: #cbdcf8;
|
||||
background: #f0f6ff;
|
||||
color: #2f6fca;
|
||||
border-color: #406e72;
|
||||
background: #d9e5e2;
|
||||
color: #315f63;
|
||||
}
|
||||
|
||||
.flow-status--testRunError,
|
||||
.flow-status--stop {
|
||||
border-color: #f1cecb;
|
||||
background: #fff3f2;
|
||||
color: #c33b32;
|
||||
border-color: #9a4035;
|
||||
background: #efd8cf;
|
||||
color: #8f332c;
|
||||
}
|
||||
|
||||
.flow-status--pause {
|
||||
border-color: #ead9b8;
|
||||
background: #fff9eb;
|
||||
color: #9a6700;
|
||||
border-color: #a06a1e;
|
||||
background: #f1dec0;
|
||||
color: #82551a;
|
||||
}
|
||||
|
||||
.btn__container {
|
||||
@ -2838,7 +2841,7 @@ onUnmounted(() => {
|
||||
|
||||
.publish-actions {
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid #e4e8ef;
|
||||
border-left: 2px solid var(--retro-border-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2851,14 +2854,16 @@ onUnmounted(() => {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--retro-bg-page);
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
margin: 0;
|
||||
width: 272px;
|
||||
padding: 0;
|
||||
border-right: 1px solid #e3e7ee;
|
||||
background: #f8fafc;
|
||||
border-right: 3px solid var(--retro-border-strong);
|
||||
background: #f1e7d0;
|
||||
box-shadow: 3px 0 0 rgba(33, 27, 18, 0.18);
|
||||
}
|
||||
|
||||
.canvas-toolbar {
|
||||
@ -2869,26 +2874,31 @@ onUnmounted(() => {
|
||||
z-index: 20;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 7px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 6px 18px rgba(31, 41, 55, 0.1);
|
||||
border: 2px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
background-color: rgba(255, 250, 240, 0.97);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
|
||||
.el-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #566174;
|
||||
color: var(--retro-text-regular);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-button + .el-button { margin-left: 2px; }
|
||||
|
||||
.el-button:hover {
|
||||
background: #f1f5f9;
|
||||
color: #1f2937;
|
||||
border-color: var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-primary);
|
||||
transform: none;
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2896,13 +2906,15 @@ onUnmounted(() => {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
margin: 0 4px;
|
||||
background: #e1e6ed;
|
||||
background: var(--retro-border-dark);
|
||||
}
|
||||
|
||||
.flow__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background-color: #faf3df;
|
||||
background-image: var(--retro-paper-texture);
|
||||
|
||||
:deep(.vue-flow__node) {
|
||||
border: 0;
|
||||
@ -2923,7 +2935,7 @@ onUnmounted(() => {
|
||||
|
||||
:deep(.vue-flow__edge-path),
|
||||
:deep(.vue-flow__connection-path) {
|
||||
stroke: #ff6b35;
|
||||
stroke: #8b4513;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@ -2936,14 +2948,14 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
:deep(.vue-flow__selection) {
|
||||
border: 1px solid #2f80ed;
|
||||
background: rgba(47, 128, 237, 0.1);
|
||||
box-shadow: 0 0 0 1px rgba(47, 128, 237, 0.08);
|
||||
border: 2px solid var(--retro-primary);
|
||||
background: rgba(0, 128, 128, 0.1);
|
||||
box-shadow: 3px 3px 0 rgba(0, 92, 92, 0.18);
|
||||
}
|
||||
|
||||
:deep(.vue-flow__nodesselection-rect) {
|
||||
border: 1px dashed rgba(47, 128, 237, 0.72);
|
||||
background: rgba(47, 128, 237, 0.04);
|
||||
border: 2px dashed var(--retro-primary);
|
||||
background: rgba(0, 128, 128, 0.05);
|
||||
}
|
||||
|
||||
:deep(.vue-flow__handle) {
|
||||
@ -2960,16 +2972,32 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
:deep(.vue-flow__edge.selected .vue-flow__edge-path) {
|
||||
stroke: #1677ff;
|
||||
stroke: var(--retro-primary);
|
||||
stroke-width: 4;
|
||||
filter: drop-shadow(0 0 3px rgba(22, 119, 255, 0.45));
|
||||
filter: drop-shadow(2px 2px 0 rgba(33, 27, 18, 0.3));
|
||||
}
|
||||
|
||||
:deep(.vue-flow__controls) {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12);
|
||||
border: 2px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
}
|
||||
|
||||
:deep(.vue-flow__controls-button) {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-white);
|
||||
color: var(--retro-text-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--retro-bg-muted);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,12 +58,13 @@ onMounted(() => {
|
||||
.group__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
background-color: rgba(255, 250, 240, 0.97);
|
||||
background-image: var(--retro-paper-texture);
|
||||
padding: 16px;
|
||||
cursor: default;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #b8c5d8;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.26);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@ -78,12 +79,12 @@ onMounted(() => {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #64748b;
|
||||
background: #406e72;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #8fa0b8;
|
||||
box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -96,17 +97,18 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
color: #475569;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.group-summary__count {
|
||||
padding: 2px 8px;
|
||||
border: 1px solid #d9e0ea;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
color: var(--retro-text-regular);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -114,11 +116,12 @@ onMounted(() => {
|
||||
.child__container {
|
||||
min-height: 80px;
|
||||
flex: 1;
|
||||
background-color: #f6f8fb;
|
||||
background-image: radial-gradient(#d6dde8 0.7px, transparent 0.7px);
|
||||
background-color: #f4ead2;
|
||||
background-image: radial-gradient(#b9aa8e 0.8px, transparent 0.8px), var(--retro-paper-texture);
|
||||
background-size: 16px 16px;
|
||||
border: 1px dashed #aeb9c9;
|
||||
border-radius: 6px;
|
||||
border: 2px dashed var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-shadow: inset 2px 2px 0 rgba(75, 61, 48, 0.12);
|
||||
}
|
||||
|
||||
.el-row {
|
||||
|
||||
@ -21,5 +21,5 @@ defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.action-queue-node__summary { margin-top: 7px; color: #667085; font-size: 11px; line-height: 16px; }
|
||||
.action-queue-node__summary { margin-top: 7px; color: var(--retro-text-secondary); font-size: 11px; line-height: 16px; }
|
||||
</style>
|
||||
|
||||
@ -129,9 +129,10 @@ defineExpose({ closePopover })
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #f0e6cf;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
@ -147,15 +148,15 @@ defineExpose({ closePopover })
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: var(--retro-primary);
|
||||
border-radius: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,9 +214,10 @@ defineExpose({ closePopover })
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #f0e6cf;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
@ -226,15 +228,15 @@ defineExpose({ closePopover })
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: var(--retro-primary);
|
||||
border-radius: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -176,20 +176,24 @@ const setNodeName = (name) => {
|
||||
.group__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background-color: rgba(255, 250, 240, 0.98);
|
||||
background-image: var(--retro-paper-texture);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #cfd7e6;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.26);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.18s ease, box-shadow 0.18s ease;
|
||||
|
||||
&:hover { border-color: #aeb9c9; }
|
||||
&:hover {
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
@ -198,13 +202,13 @@ const setNodeName = (name) => {
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #ff6b35;
|
||||
border-radius: 0;
|
||||
background: #8b4513;
|
||||
}
|
||||
|
||||
&--dragover {
|
||||
border-color: #ff6b35;
|
||||
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.14);
|
||||
border-color: var(--retro-primary);
|
||||
box-shadow: inset 0 0 0 3px rgba(0, 128, 128, 0.16), 5px 5px 0 rgba(33, 27, 18, 0.26);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -217,17 +221,18 @@ const setNodeName = (name) => {
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
margin-top: 4px;
|
||||
color: #344054;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loop-body-count {
|
||||
padding: 2px 8px;
|
||||
color: #667085;
|
||||
border: 1px solid #dfe4ec;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
color: var(--retro-text-regular);
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
background: var(--retro-bg-muted);
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -247,15 +252,17 @@ const setNodeName = (name) => {
|
||||
.child__container {
|
||||
min-height: 300px;
|
||||
flex: 1;
|
||||
background-color: #f7f9fc;
|
||||
border: 1px dashed #aeb9c9;
|
||||
border-radius: 6px;
|
||||
background-color: #f4ead2;
|
||||
background-image: var(--retro-paper-texture);
|
||||
border: 2px dashed var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-shadow: inset 2px 2px 0 rgba(75, 61, 48, 0.12);
|
||||
transition: background-color 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
&--dragover .child__container {
|
||||
background-color: #fff8f3;
|
||||
border-color: #ff6b35;
|
||||
background-color: #dce7db;
|
||||
border-color: var(--retro-primary);
|
||||
}
|
||||
|
||||
.el-row {
|
||||
|
||||
@ -47,12 +47,13 @@ const setNodeName = (name) => {
|
||||
.node__container {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
position: relative;
|
||||
|
||||
.title__container {
|
||||
@ -73,7 +74,7 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #737a87;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
@ -82,9 +83,10 @@ const setNodeName = (name) => {
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
background-color: #f0e6cf;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
@ -100,15 +102,15 @@ const setNodeName = (name) => {
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: #9a4035;
|
||||
border-radius: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -196,7 +198,7 @@ const setNodeName = (name) => {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.paramsTitle {
|
||||
color: #0c0d0e;
|
||||
color: var(--retro-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -237,10 +237,11 @@ defineExpose({ closePopover });
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
padding: 16px;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-left: 4px solid var(--node-accent, #b7791f);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-left: 6px solid var(--node-accent, #a06a1e);
|
||||
border-radius: 0;
|
||||
background-color: var(--retro-bg-white);
|
||||
background-image: var(--retro-paper-texture);
|
||||
// box-shadow: 0 8px 24px rgba(31, 41, 55, 0.09);
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
@ -249,7 +250,7 @@ defineExpose({ closePopover });
|
||||
.condition-summary {
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e8ebf0;
|
||||
border-top: 1px dashed var(--retro-border-dark);
|
||||
}
|
||||
|
||||
.condition-summary__title,
|
||||
@ -261,13 +262,14 @@ defineExpose({ closePopover });
|
||||
|
||||
.condition-summary__title {
|
||||
margin-bottom: 8px;
|
||||
color: #344054;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.condition-summary__count {
|
||||
color: #98a2b3;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -276,9 +278,9 @@ defineExpose({ closePopover });
|
||||
min-height: 44px;
|
||||
margin-top: 6px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e4e8ef;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: #f0e6cf;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@ -287,19 +289,19 @@ defineExpose({ closePopover });
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -18px;
|
||||
border-top: 1px solid var(--node-accent, #b7791f);
|
||||
border-top: 2px solid var(--node-accent, #a06a1e);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-summary__item--else {
|
||||
background: #fffaf0;
|
||||
background: #f1dec0;
|
||||
}
|
||||
|
||||
.condition-summary__order {
|
||||
width: 96px;
|
||||
flex: 0 0 96px;
|
||||
color: #3978c5;
|
||||
color: var(--retro-primary-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
overflow: hidden;
|
||||
@ -309,7 +311,7 @@ defineExpose({ closePopover });
|
||||
|
||||
.condition-summary__text {
|
||||
flex: 1;
|
||||
color: #7a8494;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
@ -79,16 +79,18 @@ const deleteEdge = () => {
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 1px solid #efb8b4;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #d93025;
|
||||
border: 2px solid #9a4035;
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-white);
|
||||
color: #8f332c;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(31, 41, 55, 0.2);
|
||||
box-shadow: 3px 3px 0 rgba(33, 27, 18, 0.32);
|
||||
|
||||
&:hover {
|
||||
border-color: #d93025;
|
||||
background: #fff1f0;
|
||||
border-color: #6f2823;
|
||||
background: #efd8cf;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.34);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -260,31 +260,33 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flow-node-shell {
|
||||
--node-accent: #4f6b8a;
|
||||
--node-accent: #406e72;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--queue-drop-active .flow-node-content {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.35), 0 10px 24px rgba(47, 128, 237, 0.18);
|
||||
border-radius: 0;
|
||||
outline: 3px dashed var(--retro-primary);
|
||||
outline-offset: 4px;
|
||||
box-shadow: 6px 6px 0 rgba(0, 128, 128, 0.25);
|
||||
}
|
||||
|
||||
&--start,
|
||||
&--subStart { --node-accent: #239565; }
|
||||
&--subStart { --node-accent: #65743f; }
|
||||
|
||||
&--end,
|
||||
&--subEnd,
|
||||
&--stopLoop { --node-accent: #d45252; }
|
||||
&--stopLoop { --node-accent: #9a4035; }
|
||||
|
||||
&--branch { --node-accent: #b7791f; }
|
||||
&--branch { --node-accent: #a06a1e; }
|
||||
&--loop,
|
||||
&--currentLoop { --node-accent: #df6b35; }
|
||||
&--currentLoop { --node-accent: #8b4513; }
|
||||
&--http,
|
||||
&--code { --node-accent: #3978c5; }
|
||||
&--code { --node-accent: #406e72; }
|
||||
&--sdAgent,
|
||||
&--recognize { --node-accent: #7a5ab8; }
|
||||
&--recognize { --node-accent: #76543c; }
|
||||
|
||||
&--loop,
|
||||
&--selectArea {
|
||||
@ -292,24 +294,28 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
}
|
||||
|
||||
&:hover .flow-node-card {
|
||||
border-color: #cbd3df;
|
||||
box-shadow: 0 10px 26px rgba(31, 41, 55, 0.11);
|
||||
transform: translate(-1px, -1px);
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
&--selected .flow-node-card {
|
||||
border-color: #2f80ed;
|
||||
box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2), 0 10px 26px rgba(31, 41, 55, 0.12);
|
||||
border-color: var(--retro-primary);
|
||||
outline: 2px solid var(--retro-primary);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 6px 6px 0 rgba(0, 92, 92, 0.28);
|
||||
}
|
||||
|
||||
&--selected.flow-node-shell--branch :deep(.node__container) {
|
||||
border-color: #2f80ed;
|
||||
box-shadow: none;
|
||||
border-color: var(--retro-primary);
|
||||
}
|
||||
|
||||
&--selected.flow-node-shell--loop :deep(.group__container),
|
||||
&--selected.flow-node-shell--selectArea :deep(.group__container) {
|
||||
border-color: #2f80ed;
|
||||
box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.18);
|
||||
border-color: var(--retro-primary);
|
||||
outline: 2px solid var(--retro-primary);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 6px 6px 0 rgba(0, 92, 92, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
@ -322,7 +328,9 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
.flow-node-executor {
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
color: #667085;
|
||||
padding-top: 6px;
|
||||
border-top: 1px dashed var(--retro-border-dark);
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
@ -334,11 +342,12 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
height: auto;
|
||||
padding: 13px 14px 13px 16px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid #dfe4ec;
|
||||
border-left: 4px solid var(--node-accent);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 7px 20px rgba(31, 41, 55, 0.08);
|
||||
background-color: rgba(255, 250, 240, 0.98);
|
||||
background-image: var(--retro-paper-texture);
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-left: 6px solid var(--node-accent);
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0 rgba(33, 27, 18, 0.28);
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
|
||||
@ -366,8 +375,9 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
height: 38px;
|
||||
flex: 0 0 38px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f9;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background: var(--retro-bg-muted);
|
||||
}
|
||||
|
||||
:deep(.terminal-node__icon img) {
|
||||
@ -378,7 +388,8 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
:deep(.terminal-node__content) { min-width: 0; }
|
||||
|
||||
:deep(.terminal-node__title) {
|
||||
color: #1f2937;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
line-height: 21px;
|
||||
@ -387,7 +398,7 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
:deep(.terminal-node__description) {
|
||||
overflow: hidden;
|
||||
margin-top: 3px;
|
||||
color: #7a8494;
|
||||
color: var(--retro-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
@ -398,19 +409,20 @@ onMounted(() => bindComponent(componentRef.value));
|
||||
.flow-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid var(--retro-bg-white);
|
||||
border-radius: 0;
|
||||
background: var(--node-accent);
|
||||
box-shadow: 0 0 0 1px var(--node-accent), 0 2px 5px rgba(31, 41, 55, 0.18);
|
||||
box-shadow: 0 0 0 1px var(--node-accent), 2px 2px 0 rgba(33, 27, 18, 0.34);
|
||||
z-index: 10;
|
||||
transition: transform 0.14s ease, box-shadow 0.14s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18), 0 2px 6px rgba(31, 41, 55, 0.2);
|
||||
box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.22), 2px 2px 0 rgba(33, 27, 18, 0.36);
|
||||
}
|
||||
|
||||
&--target {
|
||||
left: -6px;
|
||||
background: #fff;
|
||||
background: var(--retro-bg-white);
|
||||
border-color: var(--node-accent);
|
||||
}
|
||||
|
||||
|
||||
@ -150,11 +150,11 @@ const toVueEdge = (edge) => {
|
||||
interactionWidth: 32,
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: "#ff6b35",
|
||||
color: "#8b4513",
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
style: { stroke: "#ff6b35", strokeWidth: 2 },
|
||||
style: { stroke: "#8b4513", strokeWidth: 2 },
|
||||
data: { backend: normalized },
|
||||
};
|
||||
};
|
||||
|
||||
@ -219,8 +219,8 @@ const features = [
|
||||
title: '设备接入',
|
||||
description: '配置机器人与终端设备',
|
||||
icon: SetUp,
|
||||
color: '#2563eb',
|
||||
background: '#eaf2ff',
|
||||
color: '#006b6b',
|
||||
background: '#d8e5dc',
|
||||
menuTitles: ['设备注册', '设备配置管理', '设备管理'],
|
||||
fallback: '/device/register',
|
||||
},
|
||||
@ -228,8 +228,8 @@ const features = [
|
||||
title: '流程编排',
|
||||
description: '构建可视化测试工作流',
|
||||
icon: Operation,
|
||||
color: '#0f8a73',
|
||||
background: '#e7f6f2',
|
||||
color: '#65743f',
|
||||
background: '#e2e3c7',
|
||||
menuTitles: ['任务流程编排', '流程编排'],
|
||||
fallback: '/flow',
|
||||
},
|
||||
@ -237,8 +237,8 @@ const features = [
|
||||
title: '巡检执行',
|
||||
description: '调度机器人巡检任务',
|
||||
icon: Monitor,
|
||||
color: '#c56a16',
|
||||
background: '#fff3e5',
|
||||
color: '#965b24',
|
||||
background: '#f1dec0',
|
||||
menuTitles: ['执行任务', '运行任务', '巡检任务执行'],
|
||||
fallback: '/inspection/runTask',
|
||||
},
|
||||
@ -246,8 +246,8 @@ const features = [
|
||||
title: '巡检配置',
|
||||
description: '管理地图、点位与任务',
|
||||
icon: Grid,
|
||||
color: '#6b57c7',
|
||||
background: '#f0edff',
|
||||
color: '#76543c',
|
||||
background: '#ead8c8',
|
||||
menuTitles: ['巡检任务', '巡检地图', '地图管理'],
|
||||
fallback: '/inspection/task',
|
||||
},
|
||||
@ -255,8 +255,8 @@ const features = [
|
||||
title: '测试记录',
|
||||
description: '追踪执行结果与日志',
|
||||
icon: DocumentChecked,
|
||||
color: '#d14343',
|
||||
background: '#ffeded',
|
||||
color: '#8f3f35',
|
||||
background: '#efd8cf',
|
||||
menuTitles: ['任务历史', '测试记录', '任务实例', '执行记录'],
|
||||
fallback: '/test/history',
|
||||
},
|
||||
@ -264,8 +264,8 @@ const features = [
|
||||
title: '语料中心',
|
||||
description: '管理语音与合成资源',
|
||||
icon: Headset,
|
||||
color: '#087f9c',
|
||||
background: '#e8f7fa',
|
||||
color: '#406e72',
|
||||
background: '#d9e5e2',
|
||||
menuTitles: ['语料库', '语料管理', '车载语料'],
|
||||
fallback: '/corpusManger/corpus',
|
||||
},
|
||||
@ -458,18 +458,23 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
border-radius: 6px;
|
||||
border: 3px solid var(--retro-border-strong);
|
||||
border-radius: 0;
|
||||
background-image: url('../assets/images/index-background.jpg');
|
||||
background-position: center 48%;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
background-color: #66503b;
|
||||
background-blend-mode: multiply;
|
||||
color: #fff4dc;
|
||||
box-shadow: 6px 6px 0 rgba(33, 27, 18, 0.38);
|
||||
}
|
||||
|
||||
.hero-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(8, 24, 37, 0.72);
|
||||
background-color: rgba(48, 37, 25, 0.68);
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
|
||||
.hero-content,
|
||||
@ -487,7 +492,7 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 13px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
color: rgba(255, 244, 220, 0.86);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -495,9 +500,10 @@ onBeforeUnmount(() => {
|
||||
.state-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #35d2a0;
|
||||
box-shadow: 0 0 0 5px rgba(53, 210, 160, 0.16);
|
||||
border: 1px solid #fff4dc;
|
||||
border-radius: 0;
|
||||
background: #d7b35f;
|
||||
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.34);
|
||||
animation: status-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@ -506,13 +512,15 @@ onBeforeUnmount(() => {
|
||||
font-size: 32px;
|
||||
line-height: 1.28;
|
||||
font-weight: 700;
|
||||
font-family: var(--retro-font-display);
|
||||
letter-spacing: 0;
|
||||
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.46);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
max-width: 670px;
|
||||
margin: 12px 0 22px;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
color: rgba(255, 244, 220, 0.8);
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
@ -526,30 +534,31 @@ onBeforeUnmount(() => {
|
||||
.hero-actions :deep(.el-button) {
|
||||
min-width: 126px;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-actions :deep(.el-button--primary) {
|
||||
border-color: #1688e7;
|
||||
background: #1688e7;
|
||||
border-color: #d8c497;
|
||||
background: #007272;
|
||||
color: #fffaf0;
|
||||
}
|
||||
|
||||
.cockpit-button {
|
||||
border-color: rgba(255, 255, 255, 0.42) !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #fff !important;
|
||||
border-color: #d8c497 !important;
|
||||
background: rgba(59, 52, 42, 0.72) !important;
|
||||
color: #fff4dc !important;
|
||||
}
|
||||
|
||||
.cockpit-button:hover {
|
||||
border-color: #fff !important;
|
||||
background: rgba(255, 255, 255, 0.18) !important;
|
||||
border-color: #fff4dc !important;
|
||||
background: rgba(91, 75, 54, 0.88) !important;
|
||||
}
|
||||
|
||||
.hero-time {
|
||||
min-width: 190px;
|
||||
padding-left: 26px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.24);
|
||||
border-left: 2px solid rgba(255, 244, 220, 0.42);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
@ -560,12 +569,13 @@ onBeforeUnmount(() => {
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
font-family: var(--retro-font-display);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hero-time > span:last-child,
|
||||
.time-label {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
color: rgba(255, 244, 220, 0.76);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@ -592,6 +602,8 @@ onBeforeUnmount(() => {
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
font-family: var(--retro-font-display);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
@ -600,6 +612,7 @@ onBeforeUnmount(() => {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
line-height: 1.35;
|
||||
font-family: var(--retro-font-display);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@ -620,16 +633,18 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: var(--el-bg-color);
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background-color: var(--el-bg-color);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: var(--retro-shadow-small);
|
||||
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: 0 10px 24px rgba(28, 44, 64, 0.08);
|
||||
transform: translate(-2px, -2px);
|
||||
border-color: var(--retro-border-strong);
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.3);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
@ -638,14 +653,15 @@ onBeforeUnmount(() => {
|
||||
flex: 0 0 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.metric-icon--blue { color: #2563eb; background: #eaf2ff; }
|
||||
.metric-icon--green { color: #0f8a73; background: #e7f6f2; }
|
||||
.metric-icon--orange { color: #c56a16; background: #fff3e5; }
|
||||
.metric-icon--red { color: #d14343; background: #ffeded; }
|
||||
.metric-icon--blue { color: #006b6b; background: #d8e5dc; }
|
||||
.metric-icon--green { color: #65743f; background: #e2e3c7; }
|
||||
.metric-icon--orange { color: #965b24; background: #f1dec0; }
|
||||
.metric-icon--red { color: #8f3f35; background: #efd8cf; }
|
||||
|
||||
.metric-content {
|
||||
min-width: 0;
|
||||
@ -694,9 +710,11 @@ onBeforeUnmount(() => {
|
||||
.dashboard-panel {
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: var(--el-bg-color);
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
background-color: var(--el-bg-color);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: var(--retro-shadow-small);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
@ -706,6 +724,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
.text-action {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed currentColor;
|
||||
padding: 5px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -731,7 +750,7 @@ onBeforeUnmount(() => {
|
||||
min-height: 63px;
|
||||
padding: 11px 6px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--el-border-color-extra-light);
|
||||
border-top: 1px solid var(--retro-border-dark);
|
||||
display: grid;
|
||||
grid-template-columns: 10px minmax(130px, 1fr) auto 18px;
|
||||
align-items: center;
|
||||
@ -753,7 +772,7 @@ onBeforeUnmount(() => {
|
||||
.task-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border-radius: 0;
|
||||
background: var(--el-color-info);
|
||||
}
|
||||
|
||||
@ -807,7 +826,8 @@ onBeforeUnmount(() => {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--el-color-success-light-9);
|
||||
@ -835,13 +855,13 @@ onBeforeUnmount(() => {
|
||||
min-width: 0;
|
||||
min-height: 76px;
|
||||
padding: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr) 14px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
background: var(--el-fill-color-extra-light);
|
||||
background: #f5ecd9;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
@ -849,8 +869,9 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
border-color: var(--el-border-color);
|
||||
background: var(--el-fill-color-light);
|
||||
border-color: var(--retro-primary);
|
||||
background: #e8dcc0;
|
||||
box-shadow: 2px 2px 0 rgba(33, 27, 18, 0.24);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@ -858,7 +879,8 @@ onBeforeUnmount(() => {
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--retro-border-dark);
|
||||
border-radius: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -896,7 +918,7 @@ onBeforeUnmount(() => {
|
||||
.recent-item {
|
||||
min-width: 0;
|
||||
min-height: 62px;
|
||||
border-top: 1px solid var(--el-border-color-extra-light);
|
||||
border-top: 1px solid var(--retro-border-dark);
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
@ -955,11 +977,12 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
:global(html.dark) .hero-panel::before {
|
||||
background: rgba(4, 13, 22, 0.82);
|
||||
background-color: rgba(22, 19, 14, 0.8);
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
|
||||
:global(html.dark) .metric-card:hover {
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
|
||||
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.72);
|
||||
}
|
||||
|
||||
:global(html.dark) .metric-icon,
|
||||
@ -968,8 +991,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
@keyframes status-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 4px rgba(53, 210, 160, 0.12); }
|
||||
50% { box-shadow: 0 0 0 7px rgba(53, 210, 160, 0.04); }
|
||||
0%, 100% { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.34); }
|
||||
50% { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); }
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@ -1005,7 +1028,7 @@ onBeforeUnmount(() => {
|
||||
.hero-time {
|
||||
width: 100%;
|
||||
padding: 18px 0 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.24);
|
||||
border-top: 2px solid rgba(255, 244, 220, 0.42);
|
||||
border-left: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@ -167,57 +167,81 @@ getCookie()
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(250, 243, 223, 0.76);
|
||||
background-image: var(--retro-paper-texture);
|
||||
}
|
||||
.login::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
opacity: 0.3; /* 只在这层做透明 */
|
||||
background-position: center;
|
||||
filter: sepia(0.82) saturate(0.65) contrast(1.08);
|
||||
opacity: 0.24;
|
||||
z-index: -1;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
margin: 0 auto 30px;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
color: var(--retro-text-primary);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 24px;
|
||||
line-height: 1.45;
|
||||
text-shadow: 1px 1px 0 #fff4dc;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
border: 3px solid var(--retro-border-strong);
|
||||
border-top: 10px solid var(--retro-primary);
|
||||
border-radius: 0;
|
||||
outline: 1px solid #b59a72;
|
||||
outline-offset: -7px;
|
||||
background-color: rgba(255, 250, 240, 0.96);
|
||||
background-image: var(--retro-paper-texture);
|
||||
box-shadow: 8px 8px 0 rgba(33, 27, 18, 0.38);
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
max-width: 100%;
|
||||
padding: 32px 30px 14px;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
input {
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 0px;
|
||||
height: 43px;
|
||||
width: 15px;
|
||||
margin-left: 0;
|
||||
color: var(--retro-primary-dark);
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
color: var(--retro-text-secondary);
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--retro-border-dark);
|
||||
background: var(--retro-bg-white);
|
||||
filter: sepia(0.2) contrast(1.1);
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
@ -227,13 +251,32 @@ getCookie()
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
color: var(--retro-text-regular);
|
||||
font-family: var(--retro-font-display);
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0;
|
||||
background: rgba(239, 228, 202, 0.86);
|
||||
border-top: 2px solid var(--retro-border-dark);
|
||||
}
|
||||
.login-code-img {
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
height: 44px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.login {
|
||||
padding: 18px;
|
||||
align-items: flex-start;
|
||||
padding-top: 12vh;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 28px 20px 12px;
|
||||
box-shadow: 5px 5px 0 rgba(33, 27, 18, 0.36);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user