Add GUI code
Without CI/CD caps. Change-Id: Ida4e34db68a0ea1dbc76be8797372c1d329c08a4
This commit is contained in:
Fotis Paraskevopoulos
Radosław Piliszek
parent
7d008ab44c
commit
c1248c11fe
3
gui/.env.development
Normal file
3
gui/.env.development
Normal file
@ -0,0 +1,3 @@
|
||||
NODE_ENV=development
|
||||
VITE_API_URL=http://localhost:3000
|
||||
VITE_API_URL=https://exz-nebulous-backend-staging-2003f98f736b.herokuapp.com
|
||||
3
gui/.env.production
Normal file
3
gui/.env.production
Normal file
@ -0,0 +1,3 @@
|
||||
NODE_ENV=production
|
||||
VITE_API_URL=https://exz-nebulous-backend-staging-2003f98f736b.herokuapp.com
|
||||
|
||||
2
gui/.eslintignore
Normal file
2
gui/.eslintignore
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
34
gui/.eslintrc.js
Normal file
34
gui/.eslintrc.js
Normal file
@ -0,0 +1,34 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
plugins: ["@typescript-eslint", "prettier"],
|
||||
extends: ["plugin:vue/vue3-strongly-recommended", "@vue/typescript/recommended", "eslint:recommended", "prettier"],
|
||||
parser: "vue-eslint-parser",
|
||||
parserOptions: {
|
||||
parser: "@typescript-eslint/parser",
|
||||
sourceType: "module"
|
||||
},
|
||||
rules: {
|
||||
"prettier/prettier": ["error", { endOfLine: "auto" }],
|
||||
"comma-dangle": ["error", "never"],
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-unused-vars": "off",
|
||||
"no-undef": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
"vue/multi-word-component-names": "off",
|
||||
"space-before-function-paren": "off",
|
||||
"vue/attribute-hyphenation": "off",
|
||||
quotes: [2, "double", "avoid-escape"],
|
||||
camelcase: "off",
|
||||
"import/first": "off",
|
||||
"vue/require-default-prop": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"vue/v-on-event-hyphenation": "off"
|
||||
},
|
||||
globals: {
|
||||
_: true
|
||||
}
|
||||
}
|
||||
27
gui/.gitignore
vendored
Normal file
27
gui/.gitignore
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# we are using pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
2
gui/.prettierignore
Normal file
2
gui/.prettierignore
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
7
gui/.prettierrc.js
Normal file
7
gui/.prettierrc.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
trailingComma: "none",
|
||||
semi: false,
|
||||
singleQuote: false,
|
||||
tabWidth: 2,
|
||||
printWidth: 120
|
||||
}
|
||||
16
gui/README.md
Normal file
16
gui/README.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
|
||||
|
||||
## Type Support For `.vue` Imports in TS
|
||||
|
||||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
|
||||
|
||||
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
|
||||
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
|
||||
|
||||
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
|
||||
13
gui/index.html
Normal file
13
gui/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nebulous</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
55
gui/licenses/licenses.dev.csv
Normal file
55
gui/licenses/licenses.dev.csv
Normal file
@ -0,0 +1,55 @@
|
||||
"module name","license","repository"
|
||||
"@babel/eslint-parser@7.23.3","MIT","https://github.com/babel/babel"
|
||||
"@eslint-community/eslint-utils@4.4.0","MIT","https://github.com/eslint-community/eslint-utils"
|
||||
"@eslint-community/regexpp@4.10.0","MIT","https://github.com/eslint-community/regexpp"
|
||||
"@eslint/eslintrc@2.1.3","MIT","https://github.com/eslint/eslintrc"
|
||||
"@eslint/js@8.53.0","MIT","https://github.com/eslint/eslint"
|
||||
"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1","MIT",""
|
||||
"@tailwindcss/forms@0.5.6","MIT","https://github.com/tailwindlabs/tailwindcss-forms"
|
||||
"@types/dropzone@5.7.7","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/flat@5.0.5","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/js-beautify@1.14.3","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/leaflet.markercluster@1.5.4","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/leaflet@1.9.8","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/lodash@4.14.201","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/node@20.9.0","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/tabulator-tables@5.5.4","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@types/toastify-js@1.12.3","MIT","https://github.com/DefinitelyTyped/DefinitelyTyped"
|
||||
"@typescript-eslint/parser@6.10.0","BSD-2-Clause","https://github.com/typescript-eslint/typescript-eslint"
|
||||
"@typescript-eslint/scope-manager@6.10.0","MIT","https://github.com/typescript-eslint/typescript-eslint"
|
||||
"@typescript-eslint/types@6.10.0","MIT","https://github.com/typescript-eslint/typescript-eslint"
|
||||
"@typescript-eslint/typescript-estree@6.10.0","BSD-2-Clause","https://github.com/typescript-eslint/typescript-eslint"
|
||||
"@typescript-eslint/visitor-keys@6.10.0","MIT","https://github.com/typescript-eslint/typescript-eslint"
|
||||
"@vitejs/plugin-vue@4.4.1","MIT","https://github.com/vitejs/vite-plugin-vue"
|
||||
"@vue/eslint-config-standard@8.0.1","MIT","https://github.com/vuejs/eslint-config-standard"
|
||||
"autoprefixer@10.4.16","MIT","https://github.com/postcss/autoprefixer"
|
||||
"enigma-nebulous@0.0.0","UNLICENSED",""
|
||||
"eslint-config-prettier@9.0.0","MIT","https://github.com/prettier/eslint-config-prettier"
|
||||
"eslint-config-standard@17.1.0","MIT","https://github.com/standard/eslint-config-standard"
|
||||
"eslint-import-resolver-custom-alias@1.3.2","MIT","https://github.com/laysent/eslint-import-resolver-custom-alias"
|
||||
"eslint-import-resolver-node@0.3.9","MIT","https://github.com/import-js/eslint-plugin-import"
|
||||
"eslint-module-utils@2.8.0","MIT","https://github.com/import-js/eslint-plugin-import"
|
||||
"eslint-plugin-es@4.1.0","MIT","https://github.com/mysticatea/eslint-plugin-es"
|
||||
"eslint-plugin-import@2.29.0","MIT","https://github.com/import-js/eslint-plugin-import"
|
||||
"eslint-plugin-n@15.7.0","MIT","https://github.com/eslint-community/eslint-plugin-n"
|
||||
"eslint-plugin-prettier@5.0.1","MIT","https://github.com/prettier/eslint-plugin-prettier"
|
||||
"eslint-plugin-promise@6.1.1","ISC","https://github.com/eslint-community/eslint-plugin-promise"
|
||||
"eslint-plugin-vue@9.18.1","MIT","https://github.com/vuejs/eslint-plugin-vue"
|
||||
"eslint-scope@7.2.2","BSD-2-Clause","https://github.com/eslint/eslint-scope"
|
||||
"eslint-utils@3.0.0","MIT","https://github.com/mysticatea/eslint-utils"
|
||||
"eslint-visitor-keys@2.1.0","Apache-2.0","https://github.com/eslint/eslint-visitor-keys"
|
||||
"eslint@8.53.0","MIT","https://github.com/eslint/eslint"
|
||||
"lodash@4.17.21","MIT","https://github.com/lodash/lodash"
|
||||
"path@0.12.7","MIT","https://github.com/jinder/path"
|
||||
"postcss-advanced-variables@3.0.1","CC0-1.0","https://github.com/jonathantneal/postcss-advanced-variables"
|
||||
"postcss-import@15.1.0","MIT","https://github.com/postcss/postcss-import"
|
||||
"postcss-nesting@12.0.1","MIT-0","https://github.com/csstools/postcss-plugins"
|
||||
"postcss@8.4.31","MIT","https://github.com/postcss/postcss"
|
||||
"prettier-linter-helpers@1.0.0","MIT","https://github.com/prettier/prettier-linter-helpers"
|
||||
"prettier@3.0.3","MIT","https://github.com/prettier/prettier"
|
||||
"tailwind-merge@1.14.0","MIT","https://github.com/dcastil/tailwind-merge"
|
||||
"tailwindcss@3.3.5","MIT","https://github.com/tailwindlabs/tailwindcss"
|
||||
"typescript@5.2.2","Apache-2.0","https://github.com/Microsoft/TypeScript"
|
||||
"vite@4.5.0","MIT","https://github.com/vitejs/vite"
|
||||
"vue-eslint-parser@9.3.2","MIT","https://github.com/vuejs/vue-eslint-parser"
|
||||
"vue-tsc@1.8.22","MIT","https://github.com/vuejs/language-tools"
|
||||
|
95
gui/package.json
Normal file
95
gui/package.json
Normal file
@ -0,0 +1,95 @@
|
||||
{
|
||||
"name": "enigma-nebulous",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"serve": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint src --ext .js,.ts,.vue",
|
||||
"format": "prettier . --write",
|
||||
"license-checker:dev": "license-checker --development --csv --out ./licenses/licenses.dev.csv",
|
||||
"license-validation": "license-checker --production --direct --excludePrivatePackages --onlyAllow 'MIT; ISC; 0BSD; BSD-3-Clause; BSD-2-Clause; Apache-2.0'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ckeditor/ckeditor5-build-balloon": "^38.1.0",
|
||||
"@ckeditor/ckeditor5-build-balloon-block": "^38.1.0",
|
||||
"@ckeditor/ckeditor5-build-classic": "^38.1.0",
|
||||
"@ckeditor/ckeditor5-build-decoupled-document": "^38.1.0",
|
||||
"@ckeditor/ckeditor5-build-inline": "^38.1.0",
|
||||
"@fullcalendar/daygrid": "^5.11.3",
|
||||
"@fullcalendar/interaction": "^5.11.3",
|
||||
"@fullcalendar/list": "^5.11.3",
|
||||
"@fullcalendar/timegrid": "^5.11.3",
|
||||
"@fullcalendar/vue3": "^5.11.2",
|
||||
"@headlessui/vue": "^1.7.13",
|
||||
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vuelidate/components": "^1.2.6",
|
||||
"@vuelidate/core": "^2.0.3",
|
||||
"@vuelidate/validators": "^2.0.4",
|
||||
"axios": "^1.6.2",
|
||||
"chart.js": "^4.4.0",
|
||||
"dayjs": "^1.11.5",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flat": "^5.0.2",
|
||||
"highlight.js": "^11.6.0",
|
||||
"js-beautify": "^1.14.6",
|
||||
"leaflet": "^1.9.3",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
"license-checker": "^25.0.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"lucide": "^0.90.0",
|
||||
"lucide-vue-next": "^0.95.0",
|
||||
"monaco-editor": "0.44.0",
|
||||
"monaco-yaml": "^5.1.0",
|
||||
"pinia": "^2.0.23",
|
||||
"simplebar": "^5.3.9",
|
||||
"tabulator-tables": "^5.3.4",
|
||||
"tiny-slider": "^2.9.4",
|
||||
"tippy.js": "^6.3.7",
|
||||
"toastify-js": "^1.12.0",
|
||||
"tom-select": "^2.3.1",
|
||||
"uuid": "^9.0.1",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "^3.3.9",
|
||||
"vue-draggable-next": "^2.2.1",
|
||||
"vue-router": "^4.1.6",
|
||||
"xlsx": "^0.18.5",
|
||||
"zoom-vanilla.js": "^2.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@types/dropzone": "^5.7.4",
|
||||
"@types/flat": "^5.0.2",
|
||||
"@types/js-beautify": "^1.13.3",
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/leaflet.markercluster": "^1.5.1",
|
||||
"@types/lodash": "^4.14.195",
|
||||
"@types/node": "^20.9.0",
|
||||
"@types/tabulator-tables": "^5.4.8",
|
||||
"@types/toastify-js": "^1.11.1",
|
||||
"@types/uuid": "^9.0.7",
|
||||
"@typescript-eslint/parser": "^6.10.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vue/eslint-config-standard": "^8.0.1",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-prettier": "^5.0.1",
|
||||
"eslint-plugin-vue": "^9.18.1",
|
||||
"lodash": "^4.17.21",
|
||||
"path": "^0.12.7",
|
||||
"postcss": "^8.4.25",
|
||||
"postcss-advanced-variables": "^3.0.1",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-nesting": "^12.0.0",
|
||||
"prettier": "^3.0.3",
|
||||
"tailwind-merge": "^1.13.2",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.4.2",
|
||||
"vue-eslint-parser": "^9.3.2",
|
||||
"vue-tsc": "^1.8.22"
|
||||
}
|
||||
}
|
||||
4826
gui/pnpm-lock.yaml
generated
Normal file
4826
gui/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
9
gui/postcss.config.cjs
Normal file
9
gui/postcss.config.cjs
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
"postcss-import": {},
|
||||
"postcss-advanced-variables": {},
|
||||
"tailwindcss/nesting": {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
1
gui/public/vite.svg
Normal file
1
gui/public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
47
gui/src/Master.vue
Normal file
47
gui/src/Master.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<Modal />
|
||||
<div class="py-5 md:py-0">
|
||||
<MobileMenu v-if="!isMenuHidden" />
|
||||
<Header v-if="!isMenuHidden" layout="side-menu" />
|
||||
<div class="flex overflow-hidden">
|
||||
<SideMenu v-if="!isMenuHidden" />
|
||||
<!-- BEGIN: Content -->
|
||||
<div
|
||||
:class="[
|
||||
'flex flex-col',
|
||||
'max-w-full md:max-w-none rounded-[30px] md:rounded-none px-4 md:px-[22px] min-w-0 min-h-screen bg-slate-100',
|
||||
'flex-1 md:pt-20 pb-10 mt-5 md:mt-1 relative dark:bg-darkmode-700'
|
||||
]"
|
||||
>
|
||||
<Snackbar v-if="uiStore.snackbarMessage && !uiStore.isModalOpened" class="mt-4" />
|
||||
<RouterView />
|
||||
</div>
|
||||
<!-- END: Content -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, Ref } from "vue"
|
||||
import { RouteLocationNormalizedLoaded, useRoute } from "vue-router"
|
||||
import { useUIStore } from "@/store/modules/ui.ts"
|
||||
import Header from "@/components/Header"
|
||||
import SideMenu from "@/components/SideMenu"
|
||||
import MobileMenu from "@/components/MobileMenu"
|
||||
import Modal from "@/components/Modal"
|
||||
import Snackbar from "@/components/Snackbar"
|
||||
|
||||
const route: RouteLocationNormalizedLoaded = useRoute()
|
||||
|
||||
const uiStore = useUIStore()
|
||||
|
||||
const isMenuHidden: Ref<boolean> = ref(true)
|
||||
|
||||
watch(
|
||||
route,
|
||||
() => {
|
||||
isMenuHidden.value = Boolean(route.meta.hideMenu)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
1926
gui/src/assets/css/_public-sans.css
Normal file
1926
gui/src/assets/css/_public-sans.css
Normal file
File diff suppressed because it is too large
Load Diff
3
gui/src/assets/css/_tailwind.css
Normal file
3
gui/src/assets/css/_tailwind.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
81
gui/src/assets/css/app.css
Normal file
81
gui/src/assets/css/app.css
Normal file
@ -0,0 +1,81 @@
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| TailwindCSS Directives
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Import TailwindCSS directives and swipe out at build-time with all of
|
||||
| the styles it generates based on your configured design system.
|
||||
|
|
||||
| Please check this link for more details:
|
||||
| https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
|
||||
|
|
||||
*/
|
||||
@import "./_tailwind.css";
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Fonts
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Import all fonts used in the template, the font configuration can be
|
||||
| seen in "tailwind.config.js".
|
||||
|
|
||||
| Please check this link for more details:
|
||||
| https://tailwindcss.com/docs/theme
|
||||
|
|
||||
*/
|
||||
@import "./_public-sans.css";
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| 3rd Party Libraries
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Import 3rd party library CSS files.
|
||||
|
|
||||
*/
|
||||
@import "simplebar/src/simplebar.css";
|
||||
@import "dropzone/dist/dropzone.css";
|
||||
@import "tabulator-tables/dist/css/tabulator.css";
|
||||
@import "tom-select/dist/css/tom-select.css";
|
||||
@import "zoom-vanilla.js/dist/zoom.css";
|
||||
@import "toastify-js/src/toastify.css";
|
||||
@import "highlight.js/styles/github.css";
|
||||
@import "tippy.js/dist/tippy.css";
|
||||
@import "tippy.js/themes/light.css";
|
||||
@import "tippy.js/dist/svg-arrow.css";
|
||||
@import "tippy.js/animations/shift-away.css";
|
||||
@import "tiny-slider/dist/tiny-slider.css";
|
||||
@import "leaflet/dist/leaflet.css";
|
||||
@import "leaflet.markercluster/dist/MarkerCluster.css";
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Components
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Import CSS components.
|
||||
|
|
||||
*/
|
||||
@import "./components/_global.css";
|
||||
@import "./components/_side-nav.css";
|
||||
@import "./components/_mobile-menu.css";
|
||||
@import "./components/_top-nav.css";
|
||||
@import "./components/_intro.css";
|
||||
@import "./components/_zoom-in.css";
|
||||
@import "./components/_image-fit.css";
|
||||
@import "./components/_typing-dots.css";
|
||||
@import "./components/_scrollbar.css";
|
||||
@import "./components/_scrollbar-hidden.css";
|
||||
@import "./components/_box.css";
|
||||
@import "./components/_tiny-slider.css";
|
||||
@import "./components/_tippy.css";
|
||||
@import "./components/_toastify.css";
|
||||
@import "./components/_transitions.css";
|
||||
@import "./components/_zoom-vanilla.css";
|
||||
@import "./components/_tom-select.css";
|
||||
@import "./components/_ckeditor.css";
|
||||
@import "./components/_litepicker.css";
|
||||
@import "./components/_full-calendar.css";
|
||||
@import "./components/_tabulator.css";
|
||||
@import "./components/_main.css";
|
||||
16
gui/src/assets/css/components/_box.css
Normal file
16
gui/src/assets/css/components/_box.css
Normal file
@ -0,0 +1,16 @@
|
||||
@layer components {
|
||||
.box {
|
||||
box-shadow: 0px 3px 5px #0000000b;
|
||||
background-color: white;
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
border-radius: 0.6rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.box {
|
||||
background-color: theme("backgroundColor.card-color");
|
||||
border-color: theme("colors.darkmode.500");
|
||||
}
|
||||
}
|
||||
}
|
||||
284
gui/src/assets/css/components/_ckeditor.css
Normal file
284
gui/src/assets/css/components/_ckeditor.css
Normal file
@ -0,0 +1,284 @@
|
||||
.ck-editor,
|
||||
.document-editor,
|
||||
.ck-editor__editable {
|
||||
box-shadow: theme("boxShadow.sm");
|
||||
}
|
||||
|
||||
.document-editor {
|
||||
display: flex;
|
||||
max-height: 700px;
|
||||
flex-flow: column nowrap;
|
||||
border-radius: var(--ck-border-radius);
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
.document-editor__toolbar {
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid theme("colors.slate.200");
|
||||
}
|
||||
.document-editor__toolbar .ck-toolbar {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: theme("colors.slate.100");
|
||||
.ck-icon {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
.document-editor__editable-container {
|
||||
overflow-y: scroll;
|
||||
padding: calc(2 * var(--ck-spacing-large));
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
.document-editor__editable-container .ck-editor__editable {
|
||||
width: 15.8cm;
|
||||
margin: 0 auto;
|
||||
min-height: 21cm;
|
||||
background: white;
|
||||
padding: 1cm 2cm 2cm;
|
||||
border-radius: var(--ck-border-radius);
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
box-shadow: theme("boxShadow.sm");
|
||||
}
|
||||
.ck-heading-dropdown .ck-list .ck-button__label {
|
||||
line-height: calc(1.7 * var(--ck-line-height-base) * var(--ck-font-size-base));
|
||||
min-width: 6em;
|
||||
}
|
||||
.ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
|
||||
transform: scale(0.8);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ck-content h2,
|
||||
.ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
|
||||
font-size: 2.18em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ck-content h2 {
|
||||
line-height: 1.37em;
|
||||
padding-top: 0.342em;
|
||||
margin-bottom: 0.142em;
|
||||
}
|
||||
.ck-content h3,
|
||||
.ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
|
||||
font-size: 1.75em;
|
||||
font-weight: normal;
|
||||
color: hsl(203, 100%, 50%);
|
||||
}
|
||||
.ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
|
||||
color: var(--ck-color-list-button-on-text);
|
||||
}
|
||||
.ck-content h3 {
|
||||
line-height: 1.86em;
|
||||
padding-top: 0.171em;
|
||||
margin-bottom: 0.357em;
|
||||
}
|
||||
.ck-content h4,
|
||||
.ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
|
||||
font-size: 1.31em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ck-content h4 {
|
||||
line-height: 1.24em;
|
||||
padding-top: 0.286em;
|
||||
margin-bottom: 0.952em;
|
||||
}
|
||||
.ck-content p {
|
||||
font-size: 1em;
|
||||
line-height: 1.63em;
|
||||
padding-top: 0.5em;
|
||||
margin-bottom: 1.13em;
|
||||
}
|
||||
.ck-content blockquote {
|
||||
font-family: Georgia, serif;
|
||||
margin-left: calc(2 * var(--ck-spacing-large));
|
||||
margin-right: calc(2 * var(--ck-spacing-large));
|
||||
}
|
||||
}
|
||||
|
||||
.ck.ck-content {
|
||||
min-height: 250px;
|
||||
&.ck-editor__editable_inline {
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
}
|
||||
}
|
||||
|
||||
.ck .ck {
|
||||
.ck-content {
|
||||
min-height: 250px;
|
||||
&.ck-editor__editable_inline {
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
}
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: revert;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: revert;
|
||||
margin: revert;
|
||||
padding: revert;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: revert;
|
||||
font-weight: revert;
|
||||
}
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: revert;
|
||||
vertical-align: revert;
|
||||
}
|
||||
}
|
||||
&.ck-reset_all,
|
||||
&.ck-reset_all * {
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
&.ck-toolbar,
|
||||
&.ck-balloon-panel {
|
||||
background-color: theme("colors.slate.100");
|
||||
border-color: theme("colors.slate.200");
|
||||
.ck-icon {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
&.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
|
||||
border-color: theme("colors.slate.200");
|
||||
}
|
||||
&.ck-button:not(.ck-disabled):hover,
|
||||
&a.ck-button:not(.ck-disabled):hover {
|
||||
background-color: theme("colors.slate.200");
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.document-editor {
|
||||
border-color: theme("colors.darkmode.900" / 30%);
|
||||
.document-editor__toolbar {
|
||||
border-color: theme("colors.darkmode.900" / 20%);
|
||||
}
|
||||
.document-editor__toolbar .ck-toolbar {
|
||||
background-color: theme("colors.darkmode.900" / 20%);
|
||||
.ck-toolbar__separator {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
.ck-tooltip .ck-tooltip__text {
|
||||
color: theme("colors.slate.200");
|
||||
background-color: theme("colors.darkmode.800");
|
||||
&:after {
|
||||
border-bottom: theme("colors.darkmode.800");
|
||||
}
|
||||
}
|
||||
.ck.ck-icon :not([fill]) {
|
||||
fill: theme("colors.slate.300");
|
||||
}
|
||||
.ck.ck-dropdown__panel {
|
||||
border-color: theme("colors.darkmode.800");
|
||||
}
|
||||
.ck.ck-button.ck-on,
|
||||
a.ck.ck-button.ck-on {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
}
|
||||
.document-editor__editable-container {
|
||||
background-color: theme("colors.darkmode.600");
|
||||
}
|
||||
.document-editor__editable-container .ck-editor__editable {
|
||||
border-color: theme("colors.darkmode.900" / 20%);
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
}
|
||||
|
||||
.ck.ck-content.ck-editor__editable_inline {
|
||||
border-color: theme("colors.darkmode.900" / 20%);
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
|
||||
.ck {
|
||||
&.ck-list {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
&.ck-dropdown__panel {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
border-color: theme("colors.darkmode.800");
|
||||
}
|
||||
&.ck.ck-input-text {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
border-color: theme("colors.darkmode.400");
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.ck-insert-table-dropdown-grid-box {
|
||||
border-color: theme("colors.darkmode.400");
|
||||
}
|
||||
&.ck-reset_all,
|
||||
&.ck-reset_all * {
|
||||
color: theme("colors.slate.300") !important;
|
||||
}
|
||||
.ck {
|
||||
.ck-content.ck-editor__editable_inline {
|
||||
border-color: theme("colors.darkmode.900" / 20%);
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
&.ck-toolbar,
|
||||
&.ck-balloon-panel {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
border-color: theme("colors.darkmode.900" / 20%);
|
||||
&:before {
|
||||
border-bottom-color: theme("colors.darkmode.900" / 20%) !important;
|
||||
}
|
||||
&:after {
|
||||
border-bottom-color: theme("colors.darkmode.900" / 20%) !important;
|
||||
}
|
||||
.ck-toolbar__separator {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
.ck-tooltip .ck-tooltip__text {
|
||||
color: theme("colors.slate.200");
|
||||
background-color: theme("colors.darkmode.800");
|
||||
&:after {
|
||||
border-bottom-color: theme("colors.darkmode.900" / 20%);
|
||||
}
|
||||
}
|
||||
.ck.ck-icon :not([fill]) {
|
||||
fill: theme("colors.slate.300");
|
||||
}
|
||||
.ck.ck-dropdown__panel {
|
||||
border-color: theme("colors.darkmode.800");
|
||||
}
|
||||
.ck.ck-button.ck-on,
|
||||
a.ck.ck-button.ck-on {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
}
|
||||
&.ck-editor__main > .ck-editor__editable {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
&:not(.ck-focused) {
|
||||
border-color: theme("colors.darkmode.900" / 20%);
|
||||
}
|
||||
}
|
||||
&.ck-button:not(.ck-disabled):hover,
|
||||
&a.ck-button:not(.ck-disabled):hover {
|
||||
background-color: theme("colors.darkmode.900" / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
215
gui/src/assets/css/components/_full-calendar.css
Normal file
215
gui/src/assets/css/components/_full-calendar.css
Normal file
@ -0,0 +1,215 @@
|
||||
.full-calendar {
|
||||
.fc-toolbar {
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.fc-toolbar-chunk {
|
||||
&:nth-child(1) {
|
||||
order: 3;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
order: 1;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
order: 2;
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
margin-top: theme("spacing.3");
|
||||
margin-bottom: theme("spacing.3");
|
||||
}
|
||||
.fc-button-group {
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
width: theme("spacing.20");
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
width: 100%;
|
||||
border-radius: theme("borderRadius.md");
|
||||
margin-bottom: theme("spacing.2");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-toolbar-title {
|
||||
font-size: theme("fontSize.lg");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
}
|
||||
.fc-toolbar-chunk .fc-button-primary {
|
||||
&:first-child {
|
||||
border-top-left-radius: theme("borderRadius.md");
|
||||
border-bottom-left-radius: theme("borderRadius.md");
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: theme("borderRadius.md");
|
||||
border-bottom-right-radius: theme("borderRadius.md");
|
||||
}
|
||||
}
|
||||
.fc-theme-standard {
|
||||
.fc-scrollgrid,
|
||||
th,
|
||||
td,
|
||||
.fc-list {
|
||||
border-color: theme("colors.slate.200" / 60%);
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-radius: theme("borderRadius.md");
|
||||
tr th .fc-scrollgrid-sync-inner {
|
||||
padding-top: theme("spacing.3");
|
||||
padding-bottom: theme("spacing.3");
|
||||
}
|
||||
}
|
||||
.fc-daygrid-event-harness {
|
||||
margin-left: theme("spacing.5");
|
||||
margin-right: theme("spacing.5");
|
||||
}
|
||||
.fc-h-event {
|
||||
background-color: theme("colors.primary");
|
||||
border-color: theme("colors.primary");
|
||||
border-radius: theme("borderRadius.md");
|
||||
}
|
||||
.fc-event-title-container {
|
||||
padding: theme("spacing.1") theme("spacing.2");
|
||||
font-size: theme("fontSize.xs");
|
||||
}
|
||||
.fc-daygrid-event {
|
||||
font-size: theme("fontSize.xs");
|
||||
}
|
||||
.fc-daygrid-event-dot {
|
||||
border-color: theme("colors.primary");
|
||||
margin-right: theme("spacing.2");
|
||||
}
|
||||
.fc-daygrid-dot-event .fc-event-title {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
.fc-col-header-cell-cushion {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
&.fc .fc-view-harness {
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
min-height: 400px !important;
|
||||
}
|
||||
}
|
||||
&.fc .fc-daygrid-day-frame {
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
min-height: 60px !important;
|
||||
}
|
||||
}
|
||||
.fc-daygrid-more-link {
|
||||
font-size: theme("fontSize.sm");
|
||||
@media (max-width: calc(theme("screens.md") - 1px)) {
|
||||
color: theme("colors.slate.500");
|
||||
font-size: 10px;
|
||||
}
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
padding-left: 0;
|
||||
display: block;
|
||||
margin-top: calc(theme("spacing.3") * -1);
|
||||
leading: 10px;
|
||||
}
|
||||
}
|
||||
.fc-daygrid-day-bottom {
|
||||
padding-top: theme("spacing.1");
|
||||
}
|
||||
.fc-day-other {
|
||||
background-color: theme("colors.slate.100" / 50%);
|
||||
}
|
||||
.fc-button-primary {
|
||||
font-weight: theme("fontWeight.normal") !important;
|
||||
display: inline-block !important;
|
||||
border: 1px solid theme("colors.slate.200" / 60%) !important;
|
||||
color: theme("colors.slate.500") !important;
|
||||
background-color: transparent !important;
|
||||
text-transform: capitalize !important;
|
||||
padding: 0.4em 0.65em !important;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
|
||||
transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
box-shadow: theme("boxShadow.sm");
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: theme("borderRadius.md");
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
box-shadow: theme("ringWidth.4");
|
||||
--tw-ring-color: theme("colors.primary");
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
--tw-background-opacity: 0.9;
|
||||
--tw-border-opacity: 0.9;
|
||||
}
|
||||
&:not(button) {
|
||||
text-align: center;
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.fc-icon {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.fc-button-primary:not(:disabled):active,
|
||||
.fc-button-primary:not(:disabled).fc-button-active {
|
||||
color: white !important;
|
||||
background-color: theme("colors.primary") !important;
|
||||
border-color: theme("colors.primary") !important;
|
||||
}
|
||||
.fc-list-day-cushion {
|
||||
background-color: theme("colors.slate.100" / 50%) !important;
|
||||
padding: 0.75rem 1.25rem !important;
|
||||
}
|
||||
.fc-list-event td {
|
||||
padding: theme("spacing.3") theme("spacing.5");
|
||||
}
|
||||
.fc-list-event-dot {
|
||||
border-color: theme("colors.primary") !important;
|
||||
}
|
||||
.fc-event-time {
|
||||
padding-left: theme("spacing.[0.5]");
|
||||
padding-right: theme("spacing.[0.5]");
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.fc-daygrid-more-link {
|
||||
padding-left: theme("spacing.2");
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.full-calendar {
|
||||
.fc-button-primary {
|
||||
background-color: theme("colors.darkmode.400") !important;
|
||||
border-color: theme("colors.darkmode.400") !important;
|
||||
}
|
||||
.fc-list-day-cushion {
|
||||
background-color: theme("colors.darkmode.400") !important;
|
||||
}
|
||||
.fc-event:hover td {
|
||||
border-color: theme("colors.darkmode.400") !important;
|
||||
background-color: theme("colors.darkmode.400") !important;
|
||||
}
|
||||
.fc-theme-standard {
|
||||
.fc-scrollgrid,
|
||||
th,
|
||||
td,
|
||||
.fc-list {
|
||||
border-color: theme("colors.darkmode.400");
|
||||
}
|
||||
}
|
||||
.fc-day-other {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
}
|
||||
.fc-button-primary:focus {
|
||||
--tw-ring-color: theme("colors.slate.700");
|
||||
--tw-ring-opacity: 0.5;
|
||||
transition-property: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
gui/src/assets/css/components/_global.css
Normal file
46
gui/src/assets/css/components/_global.css
Normal file
@ -0,0 +1,46 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background-color: theme("colors.primary");
|
||||
@media screen(md) {
|
||||
background-color: theme("colors.slate.200");
|
||||
}
|
||||
&.dark {
|
||||
background-color: theme("colors.darkmode.800");
|
||||
body {
|
||||
color: theme("colors.slate.300");
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
border-color: theme("colors.white" / 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
padding-left: theme("spacing.3");
|
||||
padding-right: theme("spacing.3");
|
||||
font-family: theme("fontFamily.public-sans");
|
||||
font-size: theme("fontSize.sm");
|
||||
line-height: theme("lineHeight.5");
|
||||
color: theme("colors.slate.800");
|
||||
@media screen(sm) {
|
||||
padding-left: theme("spacing.8");
|
||||
padding-right: theme("spacing.8");
|
||||
}
|
||||
@media screen(md) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
&:hover:not([disabled]) {
|
||||
color: theme("colors.primary")
|
||||
}
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
12
gui/src/assets/css/components/_image-fit.css
Normal file
12
gui/src/assets/css/components/_image-fit.css
Normal file
@ -0,0 +1,12 @@
|
||||
@layer components {
|
||||
.image-fit {
|
||||
position: relative;
|
||||
& > img {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
53
gui/src/assets/css/components/_intro.css
Normal file
53
gui/src/assets/css/components/_intro.css
Normal file
@ -0,0 +1,53 @@
|
||||
* {
|
||||
@for $i from 1 to 50 {
|
||||
> .intro-x:nth-child($i) {
|
||||
z-index: calc(50 - $i);
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform: translateX(50px);
|
||||
animation: 0.4s intro-x-animation ease-in-out 0.33333s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i * 0.1s);
|
||||
}
|
||||
> .-intro-x:nth-child($i) {
|
||||
z-index: calc(50 - $i);
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform: translateX(-50px);
|
||||
animation: 0.4s intro-x-animation ease-in-out 0.33333s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i * 0.1s);
|
||||
}
|
||||
> .intro-y:nth-child($i) {
|
||||
z-index: calc(50 - $i);
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform: translateY(50px);
|
||||
animation: 0.4s intro-y-animation ease-in-out 0.33333s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i * 0.1s);
|
||||
}
|
||||
> .-intro-y:nth-child($i) {
|
||||
z-index: calc(50 - $i);
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform: translateY(-50px);
|
||||
animation: 0.4s intro-y-animation ease-in-out 0.33333s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i * 0.1s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes intro-x-animation {
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
@keyframes intro-y-animation {
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
282
gui/src/assets/css/components/_litepicker.css
Normal file
282
gui/src/assets/css/components/_litepicker.css
Normal file
@ -0,0 +1,282 @@
|
||||
.litepicker {
|
||||
background-color: white;
|
||||
border-radius: theme("borderRadius.md");
|
||||
font-size: theme("fontSize.sm");
|
||||
z-index: 999999 !important;
|
||||
margin-top: 7px;
|
||||
box-shadow: 0px 3px 20px #00000014;
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
width: 310px;
|
||||
}
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
left: 0px !important;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
left: 9px;
|
||||
top: -7px;
|
||||
border-bottom-color: #f7f7f7;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #e8e8e8;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
left: 10px;
|
||||
top: -6px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
border-left: 6px solid transparent;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
.container__months,
|
||||
.container__footer {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding-top: 0;
|
||||
}
|
||||
.container__footer {
|
||||
border-top: 1px solid theme("colors.slate.200" / 60%);
|
||||
margin: 0;
|
||||
padding: theme("spacing.3");
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
text-align: center;
|
||||
}
|
||||
.preview-date-range {
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
width: 100%;
|
||||
display: block;
|
||||
order: 1;
|
||||
margin-bottom: theme("spacing.[1.5]");
|
||||
}
|
||||
}
|
||||
.button-cancel {
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
width: 100% !important;
|
||||
margin-left: 0px !important;
|
||||
padding-top: 0.375rem !important;
|
||||
padding-bottom: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
.button-apply {
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
width: 100% !important;
|
||||
margin-left: 0px !important;
|
||||
padding-top: 0.375rem !important;
|
||||
padding-bottom: 0.375rem !important;
|
||||
margin-bottom: theme("spacing.[1.5]");
|
||||
}
|
||||
}
|
||||
.button-apply,
|
||||
.button-cancel {
|
||||
width: theme("spacing.20");
|
||||
padding: theme("spacing.1") theme("spacing.2");
|
||||
border-radius: theme("borderRadius.md");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
margin-left: theme("spacing.1");
|
||||
margin-right: 0;
|
||||
}
|
||||
.button-apply {
|
||||
background-color: theme("colors.primary");
|
||||
color: white;
|
||||
}
|
||||
.button-cancel {
|
||||
background-color: theme("colors.slate.200" / 70%);
|
||||
color: theme("colors.slate.500");
|
||||
}
|
||||
}
|
||||
.container__months {
|
||||
padding-left: theme("spacing.1");
|
||||
padding-right: theme("spacing.1");
|
||||
.month-item-weekdays-row {
|
||||
color: theme("colors.slate.400");
|
||||
margin-top: theme("spacing.3");
|
||||
}
|
||||
.month-item-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: theme("spacing.2");
|
||||
.button-previous-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: theme("spacing.8");
|
||||
height: theme("spacing.8");
|
||||
&:hover {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
svg {
|
||||
transform: rotate(135deg);
|
||||
margin-right: calc(theme("spacing.1") * -1);
|
||||
}
|
||||
}
|
||||
.button-next-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: theme("spacing.8");
|
||||
height: theme("spacing.8");
|
||||
&:hover {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
svg {
|
||||
transform: rotate(-45deg);
|
||||
margin-left: calc(theme("spacing.1") * -1);
|
||||
}
|
||||
}
|
||||
.button-previous-month:hover svg,
|
||||
.button-previous-month svg,
|
||||
.button-next-month:hover svg,
|
||||
.button-next-month svg {
|
||||
fill: transparent;
|
||||
border: solid black;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
border-color: #4a5568;
|
||||
width: theme("spacing.2");
|
||||
height: theme("spacing.2");
|
||||
display: block;
|
||||
}
|
||||
div > .month-item-name,
|
||||
div > .month-item-year {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74, 85, 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-size: 15px;
|
||||
background-position: center right 0.6rem;
|
||||
background-color: transparent;
|
||||
font-size: theme("fontSize.sm");
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: theme("spacing.1");
|
||||
padding-bottom: theme("spacing.1");
|
||||
padding-left: theme("spacing.2");
|
||||
padding-right: theme("spacing.8");
|
||||
border-radius: theme("borderRadius.md");
|
||||
border-color: theme("colors.slate.200");
|
||||
font-weight: theme("fontWeight.normal");
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: theme("colors.slate.200");
|
||||
--tw-ring-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container__days {
|
||||
.day-item {
|
||||
color: theme("colors.slate.700");
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background-color: theme("colors.slate.100");
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
&.is-today,
|
||||
&.is-today:hover {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
color: theme("colors.primary");
|
||||
}
|
||||
&.is-start-date,
|
||||
&.is-start-date:hover,
|
||||
&.is-end-date,
|
||||
&.is-end-date:hover {
|
||||
background-color: theme("colors.primary");
|
||||
color: white;
|
||||
}
|
||||
&.is-in-range,
|
||||
&.is-in-range:hover {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
}
|
||||
.week-number {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: calc(theme("screens.lg") - 1px)) {
|
||||
:root {
|
||||
--litepicker-day-width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.litepicker {
|
||||
background-color: theme("colors.darkmode.600");
|
||||
&:before,
|
||||
&:after {
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: theme("colors.darkmode.600");
|
||||
}
|
||||
.container__months {
|
||||
.button-previous-month:hover {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
}
|
||||
.button-next-month:hover {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
}
|
||||
.month-item-header {
|
||||
.button-previous-month:hover svg,
|
||||
.button-previous-month svg,
|
||||
.button-next-month:hover svg,
|
||||
.button-next-month svg {
|
||||
border-color: theme("colors.slate.200");
|
||||
}
|
||||
div > .month-item-name,
|
||||
div > .month-item-year {
|
||||
color: theme("colors.slate.200");
|
||||
}
|
||||
div > .month-item-name,
|
||||
div > .month-item-year {
|
||||
border-color: theme("colors.darkmode.400");
|
||||
}
|
||||
}
|
||||
}
|
||||
.container__days {
|
||||
.day-item {
|
||||
color: theme("colors.slate.200");
|
||||
&:hover {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
}
|
||||
&.is-start-date,
|
||||
&.is-start-date:hover,
|
||||
&.is-end-date,
|
||||
&.is-end-date:hover {
|
||||
background-color: theme("colors.primary");
|
||||
color: theme("colors.slate.200");
|
||||
}
|
||||
&.is-in-range,
|
||||
&.is-in-range:hover {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
}
|
||||
&.is-today,
|
||||
&.is-today:hover {
|
||||
color: theme("colors.slate.200");
|
||||
}
|
||||
}
|
||||
}
|
||||
.container__footer {
|
||||
border-color: theme("colors.darkmode.400");
|
||||
.button-cancel {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
}
|
||||
.container__tooltip {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
&:before,
|
||||
&:after {
|
||||
border-top-color: theme("colors.darkmode.600");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
gui/src/assets/css/components/_main.css
Normal file
7
gui/src/assets/css/components/_main.css
Normal file
@ -0,0 +1,7 @@
|
||||
.text-error {
|
||||
@apply text-sm font-medium text-danger normal-case;
|
||||
}
|
||||
|
||||
.input--invalid {
|
||||
@apply !border-red-700 border;
|
||||
}
|
||||
88
gui/src/assets/css/components/_mobile-menu.css
Normal file
88
gui/src/assets/css/components/_mobile-menu.css
Normal file
@ -0,0 +1,88 @@
|
||||
.mobile-menu {
|
||||
.menu__divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: theme("colors.white" / 8%);
|
||||
position: relative;
|
||||
}
|
||||
.menu {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
.menu__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-left: theme("spacing.3");
|
||||
.menu__sub-icon {
|
||||
transition-property: theme("transitionProperty.DEFAULT");
|
||||
transition-timing-function: theme("transitionTimingFunction.in");
|
||||
transition-duration: theme("transitionDuration.100");
|
||||
margin-left: auto;
|
||||
svg {
|
||||
width: theme("spacing.5");
|
||||
height: theme("spacing.5");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
& > li {
|
||||
/* First level */
|
||||
& > .menu {
|
||||
padding-left: theme("spacing.6");
|
||||
padding-right: theme("spacing.6");
|
||||
}
|
||||
& > ul {
|
||||
background: theme("colors.black" / 10%);
|
||||
border-radius: theme("borderRadius.lg");
|
||||
margin: theme("spacing.1") theme("spacing.4");
|
||||
&:not(.menu__sub-open) {
|
||||
display: none;
|
||||
}
|
||||
& > li {
|
||||
/* Second level */
|
||||
& > .menu {
|
||||
padding-left: theme("spacing.4");
|
||||
padding-right: theme("spacing.4");
|
||||
}
|
||||
& > ul {
|
||||
background: theme("colors.black" / 10%);
|
||||
border-radius: theme("borderRadius.lg");
|
||||
margin: theme("spacing.1") auto;
|
||||
&:not(.menu__sub-open) {
|
||||
display: none;
|
||||
}
|
||||
& > li {
|
||||
/* Third level */
|
||||
& > .menu {
|
||||
padding-left: theme("spacing.4");
|
||||
padding-right: theme("spacing.4");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.mobile-menu {
|
||||
ul {
|
||||
& > li {
|
||||
/* First level */
|
||||
& > ul {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
& > li {
|
||||
/* Second level */
|
||||
& > ul {
|
||||
background-color: theme("colors.darkmode.600");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
gui/src/assets/css/components/_scrollbar-hidden.css
Normal file
7
gui/src/assets/css/components/_scrollbar-hidden.css
Normal file
@ -0,0 +1,7 @@
|
||||
@layer components {
|
||||
.scrollbar-hidden {
|
||||
&::-webkit-scrollbar {
|
||||
@apply w-0 bg-transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
gui/src/assets/css/components/_scrollbar.css
Normal file
21
gui/src/assets/css/components/_scrollbar.css
Normal file
@ -0,0 +1,21 @@
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-primary;
|
||||
}
|
||||
385
gui/src/assets/css/components/_side-nav.css
Normal file
385
gui/src/assets/css/components/_side-nav.css
Normal file
@ -0,0 +1,385 @@
|
||||
.side-nav {
|
||||
&.side-nav--simple {
|
||||
.side-menu {
|
||||
.side-menu__title {
|
||||
@apply hidden;
|
||||
.side-menu__sub-icon {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav__divider {
|
||||
display: none;
|
||||
padding-left: theme("spacing.5");
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
@media screen(xl) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav__divider::before {
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 20px;
|
||||
margin-left: -15px;
|
||||
background-color: theme("colors.slate.500");
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.side-menu {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: theme("spacing.5");
|
||||
color: theme("colors.primary");
|
||||
margin-bottom: theme("spacing.1");
|
||||
position: relative;
|
||||
border-radius: theme("borderRadius.xl");
|
||||
|
||||
.side-menu__bullet {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: theme("colors.primary");
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
display: none;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
margin-left: theme("spacing.3");
|
||||
@media screen(xl) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.side-menu__sub-icon {
|
||||
transition-property: theme("transitionProperty.DEFAULT");
|
||||
transition-timing-function: theme("transitionTimingFunction.in");
|
||||
transition-duration: theme("transitionDuration.100");
|
||||
margin-left: auto;
|
||||
margin-right: theme("spacing.5");
|
||||
display: none;
|
||||
@media screen(xl) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: theme("spacing.4");
|
||||
height: theme("spacing.4");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
& > li {
|
||||
/* First level */
|
||||
|
||||
& > .side-menu {
|
||||
&.side-menu--active {
|
||||
background-color: theme("colors.slate.100");
|
||||
z-index: 10;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: absolute;
|
||||
border-bottom: 3px solid theme("colors.black" / 8%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 80px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
background-image: theme("backgroundImage.menu-active");
|
||||
margin-right: -47px;
|
||||
opacity: 0;
|
||||
animation: 0.3s ease-in-out 1s active-side-menu-chevron;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.side-menu__icon {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not(.side-menu--active):not(.side-menu--open) {
|
||||
background-color: theme("colors.slate.100");
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
border-bottom: 3px solid theme("colors.black" / 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
padding: theme("spacing[1.5]") 0;
|
||||
background-color: theme("colors.white" / 4%);
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: theme("colors.white" / 30%);
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.side-menu__sub-open {
|
||||
margin-bottom: theme("spacing.1");
|
||||
}
|
||||
|
||||
& > li {
|
||||
/* Second level */
|
||||
|
||||
& > .side-menu {
|
||||
height: 48px;
|
||||
|
||||
&.side-menu--active {
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
color: theme("colors.slate.700");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
|
||||
.side-menu__bullet {
|
||||
outline: 4px solid theme("colors.primary" / 70%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.side-menu--active) {
|
||||
color: theme("colors.slate.600");
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
padding: theme("spacing[1.5]") 0;
|
||||
background-color: theme("colors.white" / 4%);
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: theme("colors.white" / 30%);
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.side-menu__sub-open {
|
||||
margin-bottom: theme("spacing.1");
|
||||
}
|
||||
|
||||
& > li {
|
||||
/* Third level */
|
||||
|
||||
& > .side-menu {
|
||||
height: 48px;
|
||||
|
||||
&.side-menu--active {
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
color: theme("colors.slate.700");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.side-menu--active) {
|
||||
color: theme("colors.slate.600");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
}
|
||||
|
||||
.side-menu__icon {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes active-side-menu-chevron {
|
||||
100% {
|
||||
opacity: 1;
|
||||
margin-right: -27px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.side-nav {
|
||||
.side-menu {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
|
||||
& > ul {
|
||||
& > li {
|
||||
/* First level */
|
||||
|
||||
& > .side-menu {
|
||||
&.side-menu--active {
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
border-color: theme("colors.black" / 8%);
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-image: theme("backgroundImage.menu-active-dark");
|
||||
}
|
||||
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.side-menu--active) {
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not(.side-menu--active):not(.side-menu--open) {
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
background-color: theme("colors.darkmode.900" / 30%);
|
||||
}
|
||||
|
||||
& > li {
|
||||
/* Second level */
|
||||
|
||||
& > .side-menu {
|
||||
&.side-menu--active {
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.side-menu--active) {
|
||||
color: theme("colors.slate.400");
|
||||
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
background-color: transparent;
|
||||
|
||||
&:before {
|
||||
background-color: theme("colors.darkmode.900" / 30%);
|
||||
}
|
||||
|
||||
& > li {
|
||||
/* Third level */
|
||||
|
||||
& > .side-menu {
|
||||
&.side-menu--active {
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
|
||||
.side-menu__title {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.side-menu--active) {
|
||||
color: theme("colors.slate.400");
|
||||
|
||||
.side-menu__icon {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
297
gui/src/assets/css/components/_tabulator.css
Normal file
297
gui/src/assets/css/components/_tabulator.css
Normal file
@ -0,0 +1,297 @@
|
||||
.tabulator-print-fullscreen-hide:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.tabulator {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
.tabulator-header {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
color: currentColor;
|
||||
border-top: 1px solid theme("colors.slate.200");
|
||||
border-bottom: 1px solid theme("colors.slate.200");
|
||||
background-color: transparent;
|
||||
.tabulator-headers {
|
||||
.tabulator-col {
|
||||
background-color: transparent;
|
||||
border-right-width: 0;
|
||||
&:hover {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
.tabulator-col-content {
|
||||
padding: theme("spacing.3") theme("spacing.5");
|
||||
.tabulator-col-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
.tabulator-arrow {
|
||||
top: -3px;
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
&.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-bottom-color: #cbd5e0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-row {
|
||||
border-bottom: 1px solid theme("colors.slate.200");
|
||||
&:hover,
|
||||
&.tabulator-row-even:hover {
|
||||
background-color: theme("colors.slate.200");
|
||||
}
|
||||
&.tabulator-row-even {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
.tabulator-cell {
|
||||
border-right: 0;
|
||||
padding: theme("spacing.3") theme("spacing.5");
|
||||
&.tabulator-row-handle {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.tabulator-responsive-collapse-toggle {
|
||||
width: theme("spacing.4");
|
||||
height: theme("spacing.4");
|
||||
margin-right: calc(theme("spacing.5") * -1);
|
||||
background-color: theme("colors.slate.400");
|
||||
border-radius: theme("borderRadius.full");
|
||||
}
|
||||
}
|
||||
.tabulator-responsive-collapse {
|
||||
padding: theme("spacing.3");
|
||||
border-color: theme("colors.slate.200");
|
||||
border-bottom: 0;
|
||||
td {
|
||||
padding: theme("spacing.2");
|
||||
strong {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-footer {
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
padding: 0;
|
||||
margin-top: theme("spacing.2");
|
||||
@media (max-width: calc(theme("screens.md") - 1px)) {
|
||||
white-space: normal;
|
||||
}
|
||||
.tabulator-paginator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (max-width: calc(theme("screens.md") - 1px)) {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
> label {
|
||||
font-weight: theme("fontWeight.normal");
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
.tabulator-page-size {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74, 85, 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-size: 15px;
|
||||
background-position: center right 0.6rem;
|
||||
padding-top: theme("spacing.2");
|
||||
padding-bottom: theme("spacing.2");
|
||||
padding-left: theme("spacing.3");
|
||||
padding-right: theme("spacing.8");
|
||||
margin-left: theme("spacing.2");
|
||||
margin-right: auto;
|
||||
border-radius: theme("borderRadius.md");
|
||||
appearance: none;
|
||||
font-weight: theme("fontWeight.normal");
|
||||
background-color: white;
|
||||
border-color: theme("colors.slate.200");
|
||||
background-repeat: no-repeat;
|
||||
@media (max-width: calc(theme("screens.md") - 1px)) {
|
||||
margin-right: theme("spacing.3");
|
||||
}
|
||||
}
|
||||
.tabulator-page {
|
||||
min-width: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-color: transparent;
|
||||
color: theme("colors.slate.700");
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity,
|
||||
box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
border-width: 1px;
|
||||
box-shadow: theme("boxShadow.sm");
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: theme("spacing.2") theme("spacing.3");
|
||||
border-radius: theme("borderRadius.md");
|
||||
font-weight: theme("fontWeight.normal");
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
box-shadow: theme("ringWidth.4");
|
||||
--tw-ring-color: theme("colors.primary");
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
--tw-background-opacity: 0.9;
|
||||
--tw-border-opacity: 0.9;
|
||||
}
|
||||
&:not(button) {
|
||||
text-align: center;
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@media (max-width: calc(theme("screens.sm") - 1px)) {
|
||||
margin-right: 0;
|
||||
padding-left: theme("spacing.1");
|
||||
padding-right: theme("spacing.1");
|
||||
}
|
||||
&:hover {
|
||||
background-color: theme("colors.slate.200");
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
&.active {
|
||||
background-color: theme("colors.slate.100");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
&:hover {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
}
|
||||
&[data-page="first"],
|
||||
&[data-page="prev"],
|
||||
&[data-page="next"],
|
||||
&[data-page="last"] {
|
||||
width: theme("spacing.5");
|
||||
color: transparent;
|
||||
}
|
||||
&[data-page="first"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-size: 50%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&[data-page="prev"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-size: 45%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&[data-page="next"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-size: 45%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&[data-page="last"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%232d3748' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-size: 50%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-tableholder {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
.tabulator-placeholder {
|
||||
margin-top: calc(theme("spacing.2") * -1);
|
||||
.tabulator-placeholder-contents {
|
||||
color: theme("colors.slate.500");
|
||||
font-weight: theme("fontWeight.normal");
|
||||
font-size: theme("fontSize.sm");
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-alert {
|
||||
background: #ffffffbd;
|
||||
.tabulator-alert-msg {
|
||||
font-weight: theme("fontWeight.normal");
|
||||
font-size: theme("fontSize.base");
|
||||
background-color: transparent;
|
||||
&.tabulator-alert-state-msg {
|
||||
border-width: 0;
|
||||
color: theme("colors.slate.700");
|
||||
}
|
||||
&.tabulator-alert-state-error {
|
||||
border-width: 0;
|
||||
color: theme("colors.danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.tabulator {
|
||||
.tabulator-header {
|
||||
color: theme("colors.slate.300");
|
||||
border-color: theme("colors.darkmode.400");
|
||||
.tabulator-headers .tabulator-col:hover {
|
||||
background-color: theme("colors.darkmode.300");
|
||||
}
|
||||
}
|
||||
.tabulator-table {
|
||||
background-color: transparent;
|
||||
color: theme("colors.slate.200");
|
||||
.tabulator-row {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
&:hover,
|
||||
&.tabulator-row-even:hover {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
}
|
||||
&.tabulator-row-even {
|
||||
background-color: theme("colors.darkmode.400");
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-footer {
|
||||
.tabulator-paginator {
|
||||
> label {
|
||||
color: theme("colors.slate.200");
|
||||
}
|
||||
.tabulator-page-size {
|
||||
background-color: theme("colors.darkmode.300");
|
||||
border-color: theme("colors.darkmode.600");
|
||||
color: theme("colors.slate.200");
|
||||
}
|
||||
.tabulator-page {
|
||||
background: transparent;
|
||||
color: theme("colors.slate.200");
|
||||
&:focus {
|
||||
--tw-ring-color: theme("colors.slate.700");
|
||||
--tw-ring-opacity: 0.5;
|
||||
transition: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
&.active,
|
||||
&.active:hover {
|
||||
background-color: theme("colors.darkmode.300");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabulator-alert {
|
||||
background-color: theme("colors.black"/ 30%);
|
||||
.tabulator-alert-msg.tabulator-alert-state-msg {
|
||||
color: theme("colors.slate.200");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
110
gui/src/assets/css/components/_tiny-slider.css
Normal file
110
gui/src/assets/css/components/_tiny-slider.css
Normal file
@ -0,0 +1,110 @@
|
||||
.tns-outer {
|
||||
position: relative;
|
||||
.tns-controls button {
|
||||
width: theme("spacing.5");
|
||||
height: theme("spacing.5");
|
||||
background-color: theme("colors.slate.200");
|
||||
color: transparent;
|
||||
border-radius: theme("borderRadius.full");
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
z-index: theme("zIndex.10");
|
||||
outline: none;
|
||||
&:hover {
|
||||
background-color: theme("colors.slate.300");
|
||||
}
|
||||
&[data-controls="prev"] {
|
||||
left: 0;
|
||||
margin-left: calc(theme("spacing.6") * -1);
|
||||
&:before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(102 113 132)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-size: 80%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
transform: rotate(90deg);
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&[data-controls="next"] {
|
||||
right: 0;
|
||||
margin-right: calc(theme("spacing.6") * -1);
|
||||
&:before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(102 113 132)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-size: 80%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
transform: rotate(-90deg);
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tns-nav {
|
||||
margin-bottom: -1.8rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: theme("zIndex.10");
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
button {
|
||||
width: theme("spacing.3");
|
||||
height: theme("spacing.3");
|
||||
background-color: theme("colors.slate.300");
|
||||
border-radius: theme("borderRadius.full");
|
||||
margin-left: theme("spacing.1");
|
||||
margin-right: theme("spacing.1");
|
||||
outline: none;
|
||||
&.tns-nav-active {
|
||||
background-color: theme("colors.slate.500");
|
||||
}
|
||||
}
|
||||
}
|
||||
button[data-action] {
|
||||
display: none;
|
||||
}
|
||||
.tns-visually-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.tns-outer {
|
||||
.tns-controls button {
|
||||
background-color: theme("colors.darkmode.300");
|
||||
&:hover {
|
||||
background-color: theme("colors.darkmode.200");
|
||||
}
|
||||
}
|
||||
.tns-nav {
|
||||
button {
|
||||
background-color: theme("colors.darkmode.300");
|
||||
&.tns-nav-active {
|
||||
background-color: theme("colors.darkmode.200");
|
||||
}
|
||||
}
|
||||
}
|
||||
button[data-action] {
|
||||
display: none;
|
||||
}
|
||||
.tns-visually-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
54
gui/src/assets/css/components/_tippy.css
Normal file
54
gui/src/assets/css/components/_tippy.css
Normal file
@ -0,0 +1,54 @@
|
||||
.tooltip-content {
|
||||
left: 10000px;
|
||||
position: fixed;
|
||||
}
|
||||
.tippy-box {
|
||||
border-radius: theme("borderRadius.md");
|
||||
.tippy-content {
|
||||
padding: theme("spacing.[1.5]") theme("spacing.3");
|
||||
}
|
||||
}
|
||||
.tippy-popper {
|
||||
&[x-placement="left"],
|
||||
&[x-placement="right"],
|
||||
&[x-placement="left-start"],
|
||||
&[x-placement="left-end"],
|
||||
&[x-placement="right-start"],
|
||||
&[x-placement="right-end"] {
|
||||
.tippy-roundarrow,
|
||||
.tippy-arrow {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
&[x-placement="top"],
|
||||
&[x-placement="bottom"],
|
||||
&[x-placement="top-start"],
|
||||
&[x-placement="top-end"],
|
||||
&[x-placement="bottom-start"],
|
||||
&[x-placement="bottom-end"] {
|
||||
.tippy-roundarrow,
|
||||
.tippy-arrow {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.tippy-box {
|
||||
box-shadow:
|
||||
0 0 20px 4px #00000026,
|
||||
0 4px 80px -8px #24282f40,
|
||||
0 4px 4px -2px #5b5e6926;
|
||||
color: theme("colors.slate.300");
|
||||
background-color: theme("colors.darkmode.300");
|
||||
& > .tippy-svg-arrow {
|
||||
fill: theme("colors.darkmode.300");
|
||||
}
|
||||
}
|
||||
}
|
||||
29
gui/src/assets/css/components/_toastify.css
Normal file
29
gui/src/assets/css/components/_toastify.css
Normal file
@ -0,0 +1,29 @@
|
||||
.toastify {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
color: theme("colors.slate.700");
|
||||
max-width: calc(100% - 30px);
|
||||
@media screen(md) {
|
||||
max-width: none;
|
||||
}
|
||||
.toast-close {
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding-right: theme("spacing.3");
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:before {
|
||||
content: "×";
|
||||
display: block;
|
||||
color: theme("colors.slate.500");
|
||||
font-size: theme("fontSize.3xl");
|
||||
margin-top: calc(theme("spacing.[1.5]") * -1);
|
||||
font-weight: theme("fontWeight.light");
|
||||
}
|
||||
}
|
||||
}
|
||||
173
gui/src/assets/css/components/_tom-select.css
Normal file
173
gui/src/assets/css/components/_tom-select.css
Normal file
@ -0,0 +1,173 @@
|
||||
.tom-select {
|
||||
&.ts-wrapper,
|
||||
&.plugin-dropdown_input.focus.dropdown-active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-shadow: theme("boxShadow.sm");
|
||||
border-radius: theme("borderRadius.DEFAULT");
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-size: 18px;
|
||||
background-position: center right 0.6rem;
|
||||
background-repeat: no-repeat;
|
||||
.ts-control {
|
||||
border: 0;
|
||||
display: flex;
|
||||
outline: none;
|
||||
min-height: 36px;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
font-size: inherit;
|
||||
padding: theme("spacing.2") theme("spacing.3");
|
||||
input {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ts-wrapper.disabled {
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
&.ts-wrapper.single.input-active .ts-control {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.ts-wrapper.multi {
|
||||
&.has-items .ts-control {
|
||||
column-gap: theme("spacing.[2.5]");
|
||||
row-gap: theme("spacing.1");
|
||||
padding: theme("spacing.1") theme("spacing.[2.5]");
|
||||
}
|
||||
.ts-control > div {
|
||||
padding: 0 theme("spacing.2");
|
||||
margin: 0 0 0 calc(theme("spacing.[1.5]") * -1);
|
||||
border-radius: theme("borderRadius.DEFAULT");
|
||||
background-color: theme("colors.slate.200");
|
||||
}
|
||||
}
|
||||
&.ts-wrapper.plugin-remove_button .item .remove {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-color: theme("colors.slate.300");
|
||||
padding: theme("spacing.1") theme("spacing.2");
|
||||
}
|
||||
&.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
|
||||
margin-left: theme("spacing.2");
|
||||
}
|
||||
&.ts-wrapper .dropdown-header {
|
||||
border-color: theme("colors.slate.200");
|
||||
background-color: theme("colors.slate.100");
|
||||
padding: theme("spacing.[2.5]");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
}
|
||||
&.plugin-dropdown_input.focus.dropdown-active {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(74 85 104)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
}
|
||||
&.plugin-dropdown_input .dropdown-input-wrap .dropdown-input {
|
||||
outline: none;
|
||||
}
|
||||
.ts-dropdown {
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
width: auto;
|
||||
z-index: 50;
|
||||
margin-top: 1px;
|
||||
font-size: inherit;
|
||||
box-shadow: theme("boxShadow.sm");
|
||||
border-radius: theme("borderRadius.DEFAULT");
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
.dropdown-input-wrap {
|
||||
padding: theme("spacing.2");
|
||||
.dropdown-input {
|
||||
border-radius: theme("borderRadius.DEFAULT");
|
||||
border: 1px solid theme("colors.slate.200");
|
||||
}
|
||||
}
|
||||
.optgroup-header {
|
||||
padding: theme("spacing.[2.5]") theme("spacing.3");
|
||||
font-weight: theme("fontWeight.medium");
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
.option {
|
||||
padding: theme("spacing.[2.5]") theme("spacing.3");
|
||||
&[data-selectable] {
|
||||
&.active:not(.selected) {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
&:hover:not(.selected) {
|
||||
color: inherit;
|
||||
background-color: theme("colors.slate.100");
|
||||
}
|
||||
}
|
||||
}
|
||||
.selected {
|
||||
color: white;
|
||||
background-color: theme("colors.primary");
|
||||
}
|
||||
[data-selectable] .highlight {
|
||||
color: white;
|
||||
background-color: theme("colors.danger");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.tom-select {
|
||||
&.ts-wrapper,
|
||||
&.plugin-dropdown_input.focus.dropdown-active {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
.ts-control {
|
||||
color: theme("colors.slate.300");
|
||||
}
|
||||
}
|
||||
&.ts-wrapper.disabled {
|
||||
border-color: transparent;
|
||||
background-color: theme("colors.darkmode.800" / 50%);
|
||||
}
|
||||
&.ts-wrapper.multi {
|
||||
.ts-control > div {
|
||||
color: theme("colors.slate.300");
|
||||
background-color: theme("colors.darkmode.600");
|
||||
}
|
||||
}
|
||||
&.ts-wrapper.plugin-remove_button .item .remove {
|
||||
border-color: theme("colors.darkmode.400");
|
||||
}
|
||||
&.ts-wrapper .dropdown-header {
|
||||
border-color: theme("colors.darkmode.800");
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
&.plugin-dropdown_input.focus.dropdown-active {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='rotate(180)' fill='none' stroke='rgb(255 255 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
}
|
||||
.ts-dropdown {
|
||||
color: theme("colors.slate.300");
|
||||
border-color: theme("colors.darkmode.800");
|
||||
background-color: theme("colors.darkmode.700");
|
||||
.dropdown-input-wrap {
|
||||
.dropdown-input {
|
||||
border-color: theme("colors.darkmode.800");
|
||||
background-color: theme("colors.darkmode.600");
|
||||
}
|
||||
}
|
||||
.optgroup-header {
|
||||
color: theme("colors.slate.300");
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
.option {
|
||||
&[data-selectable] {
|
||||
&.active:not(.selected) {
|
||||
background-color: theme("colors.darkmode.600");
|
||||
}
|
||||
&:hover:not(.selected) {
|
||||
background-color: theme("colors.darkmode.600");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ts-wrapper {
|
||||
border-color: theme("colors.darkmode.800");
|
||||
background-color: theme("colors.darkmode.800");
|
||||
}
|
||||
}
|
||||
335
gui/src/assets/css/components/_top-nav.css
Normal file
335
gui/src/assets/css/components/_top-nav.css
Normal file
@ -0,0 +1,335 @@
|
||||
.top-nav {
|
||||
.top-menu {
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: theme("spacing.5");
|
||||
padding-right: theme("spacing.5");
|
||||
margin-right: theme("spacing.1");
|
||||
color: theme("colors.slate.600");
|
||||
position: relative;
|
||||
border-radius: theme("borderRadius.full");
|
||||
@media screen(xl) {
|
||||
border-radius: theme("borderRadius.xl");
|
||||
}
|
||||
.top-menu__icon {
|
||||
z-index: 10;
|
||||
}
|
||||
.top-menu__title {
|
||||
margin-left: theme("spacing.3");
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
.top-menu__sub-icon {
|
||||
transition-property: theme("transitionProperty.DEFAULT");
|
||||
transition-timing-function: theme("transitionTimingFunction.in");
|
||||
transition-duration: theme("transitionDuration.100");
|
||||
width: theme("spacing.4");
|
||||
height: theme("spacing.4");
|
||||
display: none;
|
||||
@media screen(xl) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
& > li {
|
||||
/* First level */
|
||||
&:hover {
|
||||
& > .top-menu {
|
||||
&:not(.top-menu--active) {
|
||||
background-color: theme("colors.slate.100");
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: theme("borderRadius.full");
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
border-bottom: 3px solid theme("colors.black" / 8%);
|
||||
@media screen(xl) {
|
||||
border-radius: theme("borderRadius.xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-menu__title {
|
||||
.top-menu__sub-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
& > .top-menu {
|
||||
margin-top: 3px;
|
||||
&.top-menu--active {
|
||||
color: theme("colors.primary");
|
||||
background-color: theme("colors.slate.100");
|
||||
&:before {
|
||||
content: "";
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: theme("borderRadius.xl");
|
||||
position: absolute;
|
||||
border-bottom: 3px solid theme("colors.black" / 8%);
|
||||
@media screen(xl) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 80px;
|
||||
background-image: theme("backgroundImage.menu-active");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transform: rotate(90deg);
|
||||
display: none;
|
||||
animation: 0.3s ease-in-out 1s active-top-menu-chevron;
|
||||
animation-fill-mode: forwards;
|
||||
margin-bottom: -74px;
|
||||
opacity: 0;
|
||||
@media screen(xl) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.top-menu__icon {
|
||||
color: theme("colors.primary");
|
||||
}
|
||||
.top-menu__title {
|
||||
font-weight: theme("fontWeight.medium");
|
||||
color: theme("colors.slate.800");
|
||||
@media screen(xl) {
|
||||
color: theme("colors.primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-menu__icon {
|
||||
margin-top: -3px;
|
||||
}
|
||||
.top-menu__title {
|
||||
margin-top: -3px;
|
||||
.top-menu__sub-icon {
|
||||
margin-left: theme("spacing.2");
|
||||
}
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
box-shadow: 0px 3px 20px #00000014;
|
||||
background-color: theme("colors.slate.100");
|
||||
display: none;
|
||||
width: theme("spacing.56");
|
||||
position: absolute;
|
||||
border-radius: theme("borderRadius.md");
|
||||
z-index: 20;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-top: theme("spacing.1");
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: theme("colors.white" / 4%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: theme("borderRadius.md");
|
||||
z-index: -1;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: theme("spacing.1");
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-top: calc(theme("spacing.1") * -1);
|
||||
cursor: pointer;
|
||||
}
|
||||
& > li {
|
||||
/* Second level */
|
||||
padding-left: theme("spacing.5");
|
||||
padding-right: theme("spacing.5");
|
||||
position: relative;
|
||||
&:hover {
|
||||
position: relative;
|
||||
& > .top-menu {
|
||||
.top-menu__title {
|
||||
.top-menu__sub-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
& > .top-menu {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
.top-menu__title {
|
||||
width: 100%;
|
||||
.top-menu__sub-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
box-shadow: 0px 3px 20px #00000014;
|
||||
left: 100%;
|
||||
background-color: theme("colors.slate.100");
|
||||
display: none;
|
||||
width: theme("spacing.56");
|
||||
position: absolute;
|
||||
border-radius: theme("borderRadius.md");
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: theme("colors.white" / 4%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: theme("borderRadius.md");
|
||||
z-index: -1;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: theme("spacing.1");
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-top: calc(theme("spacing.1") * -1);
|
||||
cursor: pointer;
|
||||
}
|
||||
& > li {
|
||||
/* Third level */
|
||||
padding-left: theme("spacing.5");
|
||||
padding-right: theme("spacing.5");
|
||||
& > .top-menu {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
.top-menu__title {
|
||||
width: 100%;
|
||||
.top-menu__sub-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes active-top-menu-chevron {
|
||||
100% {
|
||||
opacity: 1;
|
||||
margin-bottom: -56px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.top-nav {
|
||||
.top-menu {
|
||||
.top-menu__icon {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
.top-menu__title {
|
||||
color: theme("colors.slate.400");
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
& > li {
|
||||
/* First level */
|
||||
&:hover {
|
||||
& > .top-menu {
|
||||
&:not(.top-menu--active) {
|
||||
background-color: transparent;
|
||||
&:before {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .top-menu {
|
||||
&.top-menu--active {
|
||||
background-color: theme("colors.darkmode.700");
|
||||
&:before {
|
||||
border-color: theme("colors.black"/ 8%);
|
||||
background-color: theme("colors.darkmode.700");
|
||||
}
|
||||
&:after {
|
||||
background-image: theme("backgroundImage.menu-active-dark");
|
||||
}
|
||||
.top-menu__icon {
|
||||
color: white;
|
||||
}
|
||||
.top-menu__title {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
box-shadow: 0px 3px 7px #0000001c;
|
||||
background-color: theme("colors.darkmode.600");
|
||||
&:before {
|
||||
background-color: theme("colors.black" / 10%);
|
||||
}
|
||||
& > li {
|
||||
/* Second level */
|
||||
& > ul {
|
||||
box-shadow: 0px 3px 7px #0000001c;
|
||||
background-color: theme("colors.darkmode.600");
|
||||
&:before {
|
||||
background-color: theme("colors.black" / 10%);
|
||||
}
|
||||
& > li {
|
||||
/* Third level */
|
||||
& > .top-menu {
|
||||
.top-menu__title {
|
||||
.top-menu__sub-icon {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
40
gui/src/assets/css/components/_transitions.css
Normal file
40
gui/src/assets/css/components/_transitions.css
Normal file
@ -0,0 +1,40 @@
|
||||
.unwrap-enter-active {
|
||||
animation: unwrapToRight .6s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
|
||||
}
|
||||
|
||||
.unwrap-leave-active {
|
||||
animation: wrapToLeft .6s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
|
||||
}
|
||||
|
||||
@keyframes unwrapToRight {
|
||||
from {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
}
|
||||
to {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wrapToLeft {
|
||||
from {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
to {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-to,
|
||||
.fade-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
22
gui/src/assets/css/components/_typing-dots.css
Normal file
22
gui/src/assets/css/components/_typing-dots.css
Normal file
@ -0,0 +1,22 @@
|
||||
@layer components {
|
||||
.typing-dots {
|
||||
span {
|
||||
@apply opacity-0;
|
||||
&:nth-child(1) {
|
||||
animation: 1s type-animation infinite 0.33333s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation: 1s type-animation infinite 0.66666s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation: 1s type-animation infinite 0.99999s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes type-animation {
|
||||
50% {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
gui/src/assets/css/components/_zoom-in.css
Normal file
14
gui/src/assets/css/components/_zoom-in.css
Normal file
@ -0,0 +1,14 @@
|
||||
@layer components {
|
||||
.zoom-in {
|
||||
transition-property: transform, box-shadow;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(theme("scale.105"));
|
||||
box-shadow: theme("boxShadow.xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
9
gui/src/assets/css/components/_zoom-vanilla.css
Normal file
9
gui/src/assets/css/components/_zoom-vanilla.css
Normal file
@ -0,0 +1,9 @@
|
||||
.zoom-overlay {
|
||||
background-color: theme("colors.black" / 75%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
.zoom-overlay {
|
||||
background-color: theme("colors.black" / 40%);
|
||||
}
|
||||
}
|
||||
BIN
gui/src/assets/images/fakers/food-beverage-1.jpg
Normal file
BIN
gui/src/assets/images/fakers/food-beverage-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
gui/src/assets/images/fakers/food-beverage-2.jpg
Normal file
BIN
gui/src/assets/images/fakers/food-beverage-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
gui/src/assets/images/fakers/preview-1.jpg
Normal file
BIN
gui/src/assets/images/fakers/preview-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
gui/src/assets/images/fakers/preview-2.jpg
Normal file
BIN
gui/src/assets/images/fakers/preview-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
gui/src/assets/images/fakers/profile-1.jpg
Normal file
BIN
gui/src/assets/images/fakers/profile-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
gui/src/assets/images/fakers/profile-2.jpg
Normal file
BIN
gui/src/assets/images/fakers/profile-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
gui/src/assets/images/nebulous-logo.png
Normal file
BIN
gui/src/assets/images/nebulous-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
6
gui/src/assets/svg/ArrowDown.svg
Normal file
6
gui/src/assets/svg/ArrowDown.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M12 2C17.5222 2 22 6.47676 22 12C22 17.5222 17.5222 22 12 22C6.47676 22 2 17.5222 2 12C2 6.47676 6.47676 2 12 2Z"
|
||||
stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 437 B |
72
gui/src/assets/svg/error-illustration.svg
Normal file
72
gui/src/assets/svg/error-illustration.svg
Normal file
@ -0,0 +1,72 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="840" height="726.849" viewBox="0 0 840 726.849">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="gray" stop-opacity="0.251"/>
|
||||
<stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
|
||||
<stop offset="1" stop-color="gray" stop-opacity="0.102"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-2" x1="-1.386" y1="7.85" x2="-1.386" y2="6.809" xlink:href="#linear-gradient"/>
|
||||
</defs>
|
||||
<g id="undraw_Taken_if77" transform="translate(0 -0.001)">
|
||||
<g id="Group_1" data-name="Group 1" opacity="0.8">
|
||||
<ellipse id="Ellipse_1" data-name="Ellipse 1" cx="146.46" cy="113.46" rx="146.46" ry="113.46" transform="translate(285.54 18.85)" fill="url(#linear-gradient)"/>
|
||||
</g>
|
||||
<path id="Ellipse_2" data-name="Ellipse 2" d="M143.21,0C222.3,0,286.42,49.67,286.42,110.94S222.3,221.88,143.21,221.88,0,172.21,0,110.94,64.117,0,143.21,0Z" transform="translate(288.79 21.37)" fill="#475569"/>
|
||||
<path id="Path_1" data-name="Path 1" d="M491.94,231.21c0-61.27,64.11-110.94,143.2-110.94A175.54,175.54,0,0,1,706.5,135c-25.17-17-58.1-27.33-94.14-27.33-79.09,0-143.21,49.67-143.21,110.94,0,41.14,28.91,77.05,71.86,96.21C510.94,294.48,491.94,264.57,491.94,231.21Z" transform="translate(-180 -86.57)" fill="#334155" opacity="0.54"/>
|
||||
<path id="Path_2" data-name="Path 2" d="M432,176.9,590.76,451.88,749.52,726.85H114.48L273.24,451.88Z" fill="#f1f5f9" opacity="0.2"/>
|
||||
<g id="Group_2" data-name="Group 2" opacity="0.3">
|
||||
<path id="Path_3" data-name="Path 3" d="M649.67,652.79,662,616.2a62.66,62.66,0,0,0-23.2-70.89l.1-.06a61.48,61.48,0,0,0-15.79-8h0l-.17-.06-.19-.06h0a61.55,61.55,0,0,0-16.9-3.18,59.272,59.272,0,0,0-6.11,0,62.316,62.316,0,0,0-10.49,1.45c-1,.22-2,.47-2.91.74s-1.93.56-2.88.87c-1.9.63-3.77,1.34-5.6,2.15-.92.4-1.83.82-2.72,1.27a61.46,61.46,0,0,0-7.75,4.56c-.83.57-1.64,1.16-2.44,1.76a62,62,0,0,0-21.24,29.6L524.33,634a61.861,61.861,0,0,0-2.68,28.12c.2,1.45.45,2.89.74,4.32s.65,2.84,1,4.24c.27.93.55,1.86.86,2.78.46,1.37,1,2.74,1.51,4.08.37.89.76,1.78,1.17,2.66.81,1.75,1.71,3.46,2.68,5.13a54.1,54.1,0,0,0,3.16,4.88c.84,1.18,1.73,2.34,2.65,3.46a52.246,52.246,0,0,0,3.92,4.33,61.809,61.809,0,0,0,21,13.89h0l.34.14a21.647,21.647,0,0,1,1.4-2.17c3-4.11,8.22-7,13.19-5.92.36.08.72.19,1.08.3,2.52.89,5,2.48,7.43,3.26a6.66,6.66,0,0,0,5.61-.07c4.86-2.59,3.06-10.76,7.23-14.34a6.5,6.5,0,0,1,.61-.46,1.9,1.9,0,0,1-.16-.23c3.22-2,7.68-.67,11.39.62,4,1.41,9.22,2.36,12-.91,1.88-2.24,1.74-5.65,3.53-8,2.08-2.7,6-3,9.39-2.52l.17.05c6.5,2.68,13.6-1.77,13.1-8.78a54.765,54.765,0,0,1,3.02-20.07Z" transform="translate(-180 -86.57)" fill="#f1f5f9"/>
|
||||
</g>
|
||||
<path id="Path_4" data-name="Path 4" d="M563.21,706.78c2.92-4,7.93-6.8,12.73-5.71s9.35,5.66,13.62,3.37c5.84-3.12,1.7-14.59,11.18-15.44a12.441,12.441,0,0,1,5.77,1c4,1.63,10.26,3.47,13.34-.2,1.81-2.16,1.68-5.45,3.41-7.69,2-2.6,5.81-2.93,9.06-2.43l.16.05c6.27,2.59,13.13-1.71,12.64-8.47-.63-9,2.23-17.48,2.85-19.32l11.88-35.31A60.38,60.38,0,0,0,622,540.34h0a60.38,60.38,0,0,0-76.27,37.86L527,633.73a60.39,60.39,0,0,0,34.82,75.15,21.445,21.445,0,0,1,1.39-2.1Z" transform="translate(-180 -86.57)" fill="#fff"/>
|
||||
<circle id="Ellipse_3" data-name="Ellipse 3" cx="6.51" cy="6.51" r="6.51" transform="translate(398.84 479.57)" fill="#475569" opacity="0.2"/>
|
||||
<circle id="Ellipse_4" data-name="Ellipse 4" cx="6.51" cy="6.51" r="6.51" transform="translate(435.86 492.02)" fill="#475569" opacity="0.2"/>
|
||||
<ellipse id="Ellipse_5" data-name="Ellipse 5" cx="9.76" cy="6.51" rx="9.76" ry="6.51" transform="matrix(0.319, -0.948, 0.948, 0.319, 406.3, 524.221)" fill="#475569"/>
|
||||
<circle id="Ellipse_6" data-name="Ellipse 6" cx="9.76" cy="9.76" r="9.76" transform="translate(542.77 477.76)" fill="#fff"/>
|
||||
<circle id="Ellipse_7" data-name="Ellipse 7" cx="4.88" cy="4.88" r="4.88" transform="translate(578.57 467.29)" fill="#fff"/>
|
||||
<ellipse id="Ellipse_19" data-name="Ellipse 19" cx="34" cy="7" rx="34" ry="7" transform="translate(423 44.43)" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_20" data-name="Ellipse 20" cx="34" cy="7" rx="34" ry="7" transform="translate(358 74.43)" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_21" data-name="Ellipse 21" cx="34" cy="7" rx="34" ry="7" transform="translate(483 87.43)" opacity="0.05"/>
|
||||
<g id="Group_4" data-name="Group 4" opacity="0.5">
|
||||
<g id="Group_3" data-name="Group 3" opacity="0.3">
|
||||
<path id="Path_5" data-name="Path 5" d="M662.67,259.79,675,223.2a62.66,62.66,0,0,0-23.2-70.89l.1-.06a61.477,61.477,0,0,0-15.79-8h0l-.17-.06-.19-.06h0a61.55,61.55,0,0,0-16.9-3.18,59.264,59.264,0,0,0-6.11,0,62.32,62.32,0,0,0-10.49,1.45c-1,.22-2,.47-2.91.74s-1.93.56-2.88.87c-1.9.63-3.77,1.34-5.6,2.15-.92.4-1.83.82-2.72,1.27a61.467,61.467,0,0,0-7.75,4.56c-.83.57-1.64,1.16-2.44,1.76a62,62,0,0,0-21.24,29.6L537.33,241a61.858,61.858,0,0,0-2.68,28.12c.2,1.45.45,2.89.74,4.32s.65,2.84,1,4.24c.27.93.55,1.86.86,2.78.46,1.37,1,2.74,1.51,4.08.37.89.76,1.78,1.17,2.66.81,1.75,1.71,3.46,2.68,5.13a54.078,54.078,0,0,0,3.16,4.88c.84,1.18,1.73,2.34,2.65,3.46,1.24,1.5,2.54,2.95,3.92,4.33a61.81,61.81,0,0,0,21,13.89h0l.34.14a21.648,21.648,0,0,1,1.4-2.17c3-4.11,8.22-7,13.19-5.92.36.08.72.19,1.08.3,2.52.89,5,2.48,7.43,3.26a6.66,6.66,0,0,0,5.61-.07c4.86-2.59,3.06-10.76,7.23-14.34a6.509,6.509,0,0,1,.61-.46,1.887,1.887,0,0,1-.16-.23c3.22-2,7.68-.67,11.39.62,4,1.41,9.22,2.36,12-.91,1.88-2.24,1.74-5.65,3.53-8,2.08-2.7,6-3,9.39-2.52h.17c6.5,2.68,13.6-1.77,13.1-8.78C659.06,270.51,662,261.7,662.67,259.79Z" transform="translate(-180 -86.57)" fill="url(#linear-gradient-2)"/>
|
||||
</g>
|
||||
<path id="Path_6" data-name="Path 6" d="M576.21,313.78c2.92-4,7.93-6.8,12.73-5.71s9.35,5.66,13.62,3.37c5.84-3.12,1.7-14.59,11.18-15.44a12.44,12.44,0,0,1,5.77,1c4,1.63,10.26,3.47,13.34-.2,1.81-2.16,1.68-5.45,3.41-7.69,2-2.6,5.81-2.93,9.06-2.43l.16.05c6.27,2.59,13.13-1.71,12.64-8.47-.63-9,2.23-17.48,2.85-19.32l11.88-35.31A60.38,60.38,0,0,0,635,147.34h0a60.38,60.38,0,0,0-76.27,37.86L540,240.73a60.39,60.39,0,0,0,34.82,75.15,21.447,21.447,0,0,1,1.39-2.1Z" transform="translate(-180 -86.57)" fill="#f1f5f9"/>
|
||||
<circle id="Ellipse_8" data-name="Ellipse 8" cx="6.51" cy="6.51" r="6.51" transform="translate(411.84 86.57)" opacity="0.2"/>
|
||||
<circle id="Ellipse_9" data-name="Ellipse 9" cx="6.51" cy="6.51" r="6.51" transform="translate(448.86 99.02)" opacity="0.2"/>
|
||||
</g>
|
||||
<path id="Path_7" data-name="Path 7" d="M749.52,186a87.515,87.515,0,0,1,2.79,22c0,61.27-64.11,110.94-143.2,110.94C544.38,318.9,489.69,285.64,472,240c13.14,50.77,71,89,140.41,89,79.09,0,143.21-49.67,143.21-110.94a88.159,88.159,0,0,0-6.1-32.06Z" transform="translate(-180 -86.57)" opacity="0.1"/>
|
||||
<g id="Group_5" data-name="Group 5" opacity="0.8">
|
||||
<ellipse id="Ellipse_10" data-name="Ellipse 10" cx="296.18" cy="77.41" rx="296.18" ry="77.41" transform="translate(135.82 103.27)" fill="#cbd5e1"/>
|
||||
</g>
|
||||
<path id="Path_8" data-name="Path 8" d="M612,192.4c-158.18,0-286.42,33.51-286.42,74.86H898.42C898.42,225.91,770.18,192.4,612,192.4Z" transform="translate(-180 -86.57)" fill="#f1f5f9"/>
|
||||
<path id="Path_9" data-name="Path 9" d="M612,342.11c158.18,0,286.42-33.51,286.42-74.85H325.58C325.58,308.6,453.82,342.11,612,342.11Z" transform="translate(-180 -86.57)" fill="#fff"/>
|
||||
<path id="Path_10" data-name="Path 10" d="M612,342.11c158.18,0,286.42-33.51,286.42-74.85H325.58C325.58,308.6,453.82,342.11,612,342.11Z" transform="translate(-180 -86.57)" fill="#f1f5f9"/>
|
||||
<rect id="Rectangle_1" data-name="Rectangle 1" width="273.4" height="39.06" rx="17.22" transform="translate(295.3 161.15)" fill="#475569" opacity="0.05"/>
|
||||
<path id="Path_11" data-name="Path 11" d="M313.89,144.38a3.68,3.68,0,0,1-2.05-4.44,1.86,1.86,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.619,1.619,0,0,0,.36.21,3.68,3.68,0,0,1,2.05,4.44,1.889,1.889,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.649,1.649,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.621,1.621,0,0,0,313.89,144.38Z" transform="translate(-180 -86.57)" fill="#fff" opacity="0.5"/>
|
||||
<path id="Path_12" data-name="Path 12" d="M822.89,450.38a3.68,3.68,0,0,1-2-4.44,1.851,1.851,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.817,1.817,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.622,1.622,0,0,0,.36.21,3.68,3.68,0,0,1,2,4.44,1.89,1.89,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.645,1.645,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0a1.62,1.62,0,0,0-.36-.25Z" transform="translate(-180 -86.57)" fill="#fff" opacity="0.5"/>
|
||||
<path id="Path_13" data-name="Path 13" d="M260.89,592.38a3.68,3.68,0,0,1-2.05-4.44,1.859,1.859,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.817,1.817,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.619,1.619,0,0,0,.36.21,3.68,3.68,0,0,1,2.05,4.44,1.891,1.891,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.647,1.647,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0a1.62,1.62,0,0,0-.36-.25Z" transform="translate(-180 -86.57)" fill="#fff" opacity="0.5"/>
|
||||
<path id="Path_14" data-name="Path 14" d="M205.89,261.38a3.68,3.68,0,0,1-2-4.44,1.859,1.859,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.621,1.621,0,0,0,.36.21,3.68,3.68,0,0,1,2.05,4.44,1.889,1.889,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.62,1.62,0,0,0,205.89,261.38Z" transform="translate(-180 -86.57)" fill="#fff" opacity="0.5"/>
|
||||
<path id="Path_15" data-name="Path 15" d="M812.89,93.38a3.68,3.68,0,0,1-2-4.44,1.858,1.858,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.818,1.818,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,2,2,0,0,0-.41-.08h0A1.84,1.84,0,0,0,801.34,93h0a1.618,1.618,0,0,0,.36.21,3.68,3.68,0,0,1,2,4.44,1.885,1.885,0,0,0-.08.4h0A1.84,1.84,0,0,0,807,99.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0a1.623,1.623,0,0,0-.38-.25Z" transform="translate(-180 -86.57)" fill="#fff" opacity="0.5"/>
|
||||
<g id="Group_6" data-name="Group 6" opacity="0.5">
|
||||
<rect id="Rectangle_2" data-name="Rectangle 2" width="3" height="17" transform="translate(110 257.85)" fill="#fff"/>
|
||||
<rect id="Rectangle_3" data-name="Rectangle 3" width="3" height="17" transform="translate(120 264.85) rotate(90)" fill="#fff"/>
|
||||
</g>
|
||||
<g id="Group_7" data-name="Group 7" opacity="0.5">
|
||||
<rect id="Rectangle_4" data-name="Rectangle 4" width="3" height="17" transform="translate(830 177.85)" fill="#fff"/>
|
||||
<rect id="Rectangle_5" data-name="Rectangle 5" width="3" height="17" transform="translate(840 184.85) rotate(90)" fill="#fff"/>
|
||||
</g>
|
||||
<g id="Group_8" data-name="Group 8" opacity="0.5">
|
||||
<rect id="Rectangle_6" data-name="Rectangle 6" width="3" height="17" transform="translate(730 456.85)" fill="#fff"/>
|
||||
<rect id="Rectangle_7" data-name="Rectangle 7" width="3" height="17" transform="translate(740 463.85) rotate(90)" fill="#fff"/>
|
||||
</g>
|
||||
<circle id="Ellipse_11" data-name="Ellipse 11" cx="6" cy="6" r="6" transform="translate(717 75.85)" fill="#fff" opacity="0.5"/>
|
||||
<circle id="Ellipse_12" data-name="Ellipse 12" cx="6" cy="6" r="6" transform="translate(0 6.85)" fill="#fff" opacity="0.5"/>
|
||||
<circle id="Ellipse_13" data-name="Ellipse 13" cx="6" cy="6" r="6" transform="translate(180 351.85)" fill="#fff" opacity="0.5"/>
|
||||
<ellipse id="Ellipse_14" data-name="Ellipse 14" cx="34" cy="7" rx="34" ry="7" transform="translate(200 147.43)" fill="#475569" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_15" data-name="Ellipse 15" cx="34" cy="7" rx="34" ry="7" transform="translate(200 200.43)" fill="#475569" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_16" data-name="Ellipse 16" cx="34" cy="7" rx="34" ry="7" transform="translate(587 147.43)" fill="#475569" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_17" data-name="Ellipse 17" cx="34" cy="7" rx="34" ry="7" transform="translate(587 200.43)" fill="#475569" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_18" data-name="Ellipse 18" cx="34" cy="7" rx="34" ry="7" transform="translate(398 117.43)" fill="#475569" opacity="0.05"/>
|
||||
<ellipse id="Ellipse_22" data-name="Ellipse 22" cx="34" cy="7" rx="34" ry="7" transform="translate(398 221.43)" fill="#475569" opacity="0.05"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
121
gui/src/assets/svg/illustration.svg
Normal file
121
gui/src/assets/svg/illustration.svg
Normal file
@ -0,0 +1,121 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="330.653" height="229.984" viewBox="0 0 330.653 229.984">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="gray" stop-opacity="0.251"/>
|
||||
<stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
|
||||
<stop offset="1" stop-color="gray" stop-opacity="0.102"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Group_1" data-name="Group 1" transform="translate(-420 -259)">
|
||||
<circle id="Ellipse_37" data-name="Ellipse 37" cx="3.972" cy="3.972" r="3.972" transform="translate(722.377 259)" fill="#f1f5f9" opacity="0.1"/>
|
||||
<ellipse id="Ellipse_38" data-name="Ellipse 38" cx="27.882" cy="2.78" rx="27.882" ry="2.78" transform="translate(620.471 483.424)" fill="#6c63ff" opacity="0.1"/>
|
||||
<path id="Path_65" data-name="Path 65" d="M136.394,487.31l-.122,6.6-.98,53.523L126.9,567.077l-28.9.331V490.352l30.166-2.39Z" transform="translate(354.436 -100.91)" fill="#5f5d7e"/>
|
||||
<path id="Path_66" data-name="Path 66" d="M136.394,487.31l-.122,6.6-.98,53.523L126.9,567.077l-28.9.331V490.352l30.166-2.39Z" transform="translate(354.436 -100.91)" fill="#334155"/>
|
||||
<path id="Path_67" data-name="Path 67" d="M194.819,487.31l-.122,6.6-.98,53.523-8.387,19.641,2.208-73.038-.007-.046-.94-6.031Z" transform="translate(296.011 -100.91)" fill="#475569"/>
|
||||
<path id="Path_68" data-name="Path 68" d="M128.166,487.962l8.228-.652-.122,6.6-7.166.079L98,494.34v-3.988Z" transform="translate(354.436 -100.91)" opacity="0.1"/>
|
||||
<path id="Path_69" data-name="Path 69" d="M930.981,487.562v76.613h-6.729L897.33,544.538V485.4l24.053-2.261,1.476.679,1.393.642Z" transform="translate(-180.328 -98.121)" fill="#475569"/>
|
||||
<rect id="Rectangle_55" data-name="Rectangle 55" width="6.729" height="80.356" transform="translate(743.924 385.698)" fill="#334155"/>
|
||||
<path id="Path_70" data-name="Path 70" d="M930.981,483.819v4.4l-6.729.076-26.922.3v-3.2l24.053-2.261,1.476.679,1.393.642v-.642Z" transform="translate(-180.328 -98.121)" opacity="0.1"/>
|
||||
<path id="Path_71" data-name="Path 71" d="M330.653,464.929v6.242L0,474.858v-7.944l31.113-6.289,270.745-1.986Z" transform="translate(420 -81.73)" fill="#475569"/>
|
||||
<path id="Path_72" data-name="Path 72" d="M330.653,477.64v6.242L0,487.57v-7.944Z" transform="translate(420 -94.441)" fill="#334155"/>
|
||||
<rect id="Rectangle_56" data-name="Rectangle 56" width="115.818" height="89.925" rx="22.82" transform="translate(540.975 289.64)" fill="#475569"/>
|
||||
<rect id="Rectangle_57" data-name="Rectangle 57" width="97.349" height="73.356" rx="7" transform="translate(550.295 297.752)" fill="#f1f5f9"/>
|
||||
<circle id="Ellipse_39" data-name="Ellipse 39" cx="1.595" cy="1.595" r="1.595" transform="translate(544.9 332.833)" fill="#e6e8ec"/>
|
||||
<circle id="Ellipse_40" data-name="Ellipse 40" cx="2.631" cy="2.631" r="2.631" transform="translate(649.326 331.969)" fill="#e6e8ec"/>
|
||||
<path id="Path_73" data-name="Path 73" d="M620.934,349.638l-12.448-7.566a1.7,1.7,0,0,0-2.525,1.483V358.27a1.7,1.7,0,0,0,2.525,1.483l12.448-7.143a1.7,1.7,0,0,0,0-2.972Zm9.36,1.274a17.542,17.542,0,1,0-17.542,17.542,17.542,17.542,0,0,0,17.542-17.542Zm-31.688,0a14.146,14.146,0,1,1,14.146,14.146,14.146,14.146,0,0,1-14.146-14.146Z" transform="translate(-11.469 -14.925)" fill="#475469"/>
|
||||
<path id="Path_74" data-name="Path 74" d="M736.127,405.782a4.14,4.14,0,0,0-.374-1.165c.251-.857.414-1.384.414-1.384a1.93,1.93,0,0,0-.04-.331,5.081,5.081,0,0,0-5.147-4.263c-1.986.036-5.753.169-9.93.639.238-1.671.523-3.671.821-5.729l.546.06a2.6,2.6,0,0,1,.391.02h.175a1.8,1.8,0,0,0,1.211-.371.715.715,0,0,0-.222-1.172A2.952,2.952,0,0,0,726.565,391a2.317,2.317,0,0,0,0-2.694c-.7-.993-2.178-1.655-2.257-2.823a3.449,3.449,0,0,1,.748-1.844,7.7,7.7,0,0,0-1.215-9.251,18.1,18.1,0,0,0-1.47-1.307c-.728-2.674-1.489-5.064-1.714-5.14a5.783,5.783,0,0,1-1.268-1.264,6.084,6.084,0,0,0-.023-1.367c-.351-2.317-2.648-3.972-3.912-6.017a10.388,10.388,0,0,1-1.168-6.894,49.319,49.319,0,0,1,1.807-6.9,8.782,8.782,0,0,0,.354-5.187,9.428,9.428,0,0,0-2.135-3.217,24.318,24.318,0,0,0-7.586-5.958,15.076,15.076,0,0,0-6.716-1.436h-.023l-.364.02-.258.017-.258.026-.275.026h0c-.281.036-.559.079-.837.136a28.9,28.9,0,0,0-6.14-.688h-.268a3.144,3.144,0,0,0-1.754.414c-.735.513-.828,1.433-1.049,2.234a6.2,6.2,0,0,1-2.383,3.31c-.791.569-1.721.993-2.476,1.589a2.522,2.522,0,0,0-1.142,2.37,2.586,2.586,0,0,0,1.655,1.622c-.1.119-.2.235-.288.357.156.063.331.119.473.165.993.3,2.062.331,3.068.6a6.725,6.725,0,0,1,.814.275,11.624,11.624,0,0,0-1.36,5.468,11.78,11.78,0,0,0,6.163,10.333v.331c.1,3.455-.159,7.659-1.926,8.371s-3.459,1.516-4.5,2.036l-.331.175c-.275-.126-.549-.258-.818-.4,0,0-1.407-.166-1.162.907,0,0-4.253-.662-6.587,1.155a60.664,60.664,0,0,0-6.914,6.6c-.751.99-6.56,3.154-6.56,3.154a7.448,7.448,0,0,0,1.039-5.693s-.874-3.78-.457-5.3,1.5-7.143,1.5-7.143.152-5.938-3.088-8.662-5.494-4.965-4.243-2.317a36.912,36.912,0,0,0,1.834,3.545s-7.748,1.84-5,4.713,3.5,2.876,3.5,2.876-.917,7.093-1.086,8.414-1.655,11.383-1.655,11.383-.083,4.786.751,5.527a3.765,3.765,0,0,0,4,2.979s6.58-.166,8.414-.907,8.162-4.7,8.831-4.455a.38.38,0,0,1,.129.086.943.943,0,0,1,.1.1c-.662,1.466-2.231,6.444-1.562,8.89,0,0-.583,6.927,2.916,9.155,0,0,5.081,8.579,3.164,13.2-.152.374-.288.718-.414,1.053-2.909-2.413-7.348-4.634-14.126-5.862-.692-.126-1.38-.278-2.062-.444-1.926-.467-7.225-.894-9.747,7.484a36.849,36.849,0,0,1-2.237,5.667,18.709,18.709,0,0,0-2.118,7.745c-.056,4,2.012,7.973,9.519,9.43a28.567,28.567,0,0,0,1.443,9.079c2.082,5.2,5.415,13.61,5.415,13.61s4,8.579,4.25,12.041a55.272,55.272,0,0,1,.235,7.282,3.231,3.231,0,0,1-.033.364,8.769,8.769,0,0,1-1.119,1.016c-.583.331-2.5,2.393-2.5,2.886a8.82,8.82,0,0,0,.126,1.41,3.474,3.474,0,0,0-1.4,2.515c0,4.475,12.7,8.1,28.365,8.1s28.362-3.641,28.362-8.1c0-4.084-10.592-7.46-24.354-8.016,2.87-1.145,5.418-2.347,6.474-3.31a1.549,1.549,0,0,0,.5-.682L705.5,473.78s-.208.046-.516.136l-.185-.278c-1.185-1.8-3.465-5.4-3.465-6.375,0-.361-.6-2.668-1.476-5.829V451.289c8.692,1.324,19.892-.477,19.892-.477l.05-.026h.218v-.119c1.506-.834,9.039-5.246,11.273-11.1.662-1.708-.162-4.154-1.8-6.769,1.145-2.843,3.972-10.188,3.69-13.117,0-.156-.02-.331-.02-.5a8.635,8.635,0,0,0,.033-.9c.331-4.3,2.979-12.164,2.979-12.164S736.16,405.981,736.127,405.782ZM679.86,386.665c.6,1.059,1.248,2.413,1.5,2.962h0s-.88-1.622-1.486-2.962Zm.629,92.709-.063.023v-.331a19.7,19.7,0,0,1,.063-2.588,3.032,3.032,0,0,0-.285-1.344,31.773,31.773,0,0,1-2.029-7.987,40.057,40.057,0,0,1-.434-6.835,121.041,121.041,0,0,0,.149-15.113l5.124,1.152,5.958,12.147s3.833,5.931,5.021,10.611V473.8a11.453,11.453,0,0,1-1.791,3.886c-.791,1.082-1.562,2.178-2.277,3.31-.218.351-.46.712-.7,1.049-.079,0-3.995.228-4.66.963a4.449,4.449,0,0,0-1.245,1.887l-.169.026a39.5,39.5,0,0,0-2.645-5.544Z" transform="translate(-50.055 -12.157)" fill="url(#linear-gradient)"/>
|
||||
<path id="Path_75" data-name="Path 75" d="M775.915,767.873l-1.324,4.3-5.627,4.882-8.275,2.376s-3.889-2.128-2.565-2.542a3.266,3.266,0,0,0,1.248-1.086c-.463,1.688,3.22-.487,3.22-.487s9.516-6.785,10.509-7.53a7.484,7.484,0,0,1,2.118-.97C775.634,767.465,775.915,767.873,775.915,767.873Z" transform="translate(-120.277 -304.91)" opacity="0.1"/>
|
||||
<path id="Path_76" data-name="Path 76" d="M757.738,692.923l-1.324,4.3-5.627,4.882-8.275,2.376s-3.889-2.128-2.565-2.542a3.264,3.264,0,0,0,1.248-1.086,16.531,16.531,0,0,0,1.1-1.6c.708-1.139,1.476-2.237,2.261-3.31a11.912,11.912,0,0,0,2.089-5.5c.579-4.551-5.3-13.736-5.3-13.736L730.68,654.79l14.894,1.82s8.026,27.555,8.026,28.878c0,.993,2.264,4.584,3.442,6.4C757.457,692.516,757.738,692.923,757.738,692.923Z" transform="translate(-102.1 -229.96)" fill="#f8d4d4"/>
|
||||
<ellipse id="Ellipse_41" data-name="Ellipse 41" cx="28.173" cy="8.126" rx="28.173" ry="8.126" transform="translate(619.203 472.187)" fill="#1e293b"/>
|
||||
<path id="Path_77" data-name="Path 77" d="M770.57,773.456a1.589,1.589,0,0,1-.5.685c-2.045,1.877-9.7,4.667-14.421,6.183a33.427,33.427,0,0,1-3.783,1.076,11.216,11.216,0,0,1-5.213-1.678c-1.655-1.016-.165-2.459.5-3.2s4.634-.966,4.634-.966c-1.9,3.167,2.81.387,2.81.387s9.516-6.785,10.509-7.53a9.136,9.136,0,0,1,2.813-1.158Z" transform="translate(-112.285 -305.197)" fill="#fff"/>
|
||||
<path id="Path_79" data-name="Path 79" d="M789.781,788.09c-2.045,1.877-9.694,4.667-14.421,6.183C779.643,790.645,786.825,788.749,789.781,788.09Z" transform="translate(-131.992 -319.14)" opacity="0.1"/>
|
||||
<ellipse id="Ellipse_42" data-name="Ellipse 42" cx="5.637" cy="1.625" rx="5.637" ry="1.625" transform="translate(641.74 476.07)" opacity="0.1"/>
|
||||
<rect id="Rectangle_58" data-name="Rectangle 58" width="5.792" height="42.862" transform="translate(644.242 434.833)" fill="#1e293b"/>
|
||||
<path id="Path_80" data-name="Path 80" d="M783.792,687.128v4.965A40.74,40.74,0,0,1,778,689.045V685h1.208Z" transform="translate(-133.758 -250.171)" opacity="0.1"/>
|
||||
<path id="Path_81" data-name="Path 81" d="M754.27,610.208s19.124-4.922,23.884-8.606,23.45,13.65,20.981,20.19-11.459,11.277-11.459,11.277-24.86,4.045-29.094-4.392S754.27,610.208,754.27,610.208Z" transform="translate(-117.882 -194.037)" fill="#94a3b8"/>
|
||||
<path id="Path_82" data-name="Path 82" d="M754.27,610.208s19.124-4.922,23.884-8.606,23.45,13.65,20.981,20.19-11.459,11.277-11.459,11.277-24.86,4.045-29.094-4.392S754.27,610.208,754.27,610.208Z" transform="translate(-117.882 -194.037)" fill="#94a3b8" opacity="0.445"/>
|
||||
<path id="Path_83" data-name="Path 83" d="M749.27,604.208s19.124-4.922,23.884-8.606,23.45,13.65,20.981,20.19-11.459,11.277-11.459,11.277-24.86,4.045-29.094-4.392S749.27,604.208,749.27,604.208Z" transform="translate(-114.537 -190.023)" fill="#334155"/>
|
||||
<path id="Path_84" data-name="Path 84" d="M673.421,423.313l-2.069-.751a7.524,7.524,0,0,0,1.036-5.709s-.87-3.793-.457-5.329,1.489-7.166,1.489-7.166.152-5.958-3.068-8.688-5.455-4.965-4.213-2.317a36.851,36.851,0,0,0,1.82,3.558s-7.7,1.844-4.965,4.73,3.475,2.883,3.475,2.883-.91,7.116-1.076,8.44-1.655,11.419-1.655,11.419-.083,4.8.745,5.544a3.744,3.744,0,0,0,3.972,2.979C669.046,432.9,676.069,425.134,673.421,423.313Z" transform="translate(-56.426 -54.261)" fill="#f8d4d4"/>
|
||||
<path id="Path_85" data-name="Path 85" d="M784.127,413.249v4.634l-4.8,1.566-8.175,6.017-2.168,1.6-9.681-3.889-6.123-6.454s.3-.162.814-.43l.331-.175c1.036-.52,2.668-1.324,4.472-2.042s2.016-4.928,1.913-8.4v-.331c-.083-2.433-.331-4.422-.331-4.422s1.009-.192,2.479-.41c4.074-.606,11.677-1.423,11.009,1.072a5.752,5.752,0,0,0,0,2.578c.02.093.04.189.063.281a21.835,21.835,0,0,0,2.82,6.16l6.62,2.383.185.066Z" transform="translate(-117.153 -59.421)" fill="#f8d4d4"/>
|
||||
<path id="Path_86" data-name="Path 86" d="M838.485,441.541v-1.407a4.636,4.636,0,0,1,1.572,0c.579.166,1.678,1.9,2.175,2.069s3.535,11.5,3.2,12.495-3.459,23.411-3.459,23.411l-6.3,6.951-1.241-19.114,4.055-11.336Z" transform="translate(-171.511 -86.307)" fill="#f8d4d4"/>
|
||||
<path id="Path_87" data-name="Path 87" d="M737.631,601.77s-5.762,1.241-5.031,3.062,3.955,1.9,3.955,1.9Z" transform="translate(-103.342 -194.489)" fill="#fdc2cc"/>
|
||||
<path id="Path_88" data-name="Path 88" d="M710.965,463.909l-4.385,9.45-5.213,3.806-.91-5.882s-1.761-3.889-2.519-4.548a.379.379,0,0,0-.129-.086c-.662-.248-6.951,3.724-8.771,4.468s-8.357.91-8.357.91l2.9-10.343s5.792-2.151,6.537-3.144a60.232,60.232,0,0,1,6.868-6.62c2.317-1.82,6.544-1.158,6.544-1.158l.066.027,1.086.47,3.144,7.7Z" transform="translate(-68.65 -93.384)" fill="#f8d4d4"/>
|
||||
<path id="Path_89" data-name="Path 89" d="M701.066,669.314a19.757,19.757,0,0,0-.063,2.595c.023.923.063,1.708.063,1.708l-1.9,3.972s-6.537,2.151-5.461,1.241a3.6,3.6,0,0,0,.662-2.214,56.131,56.131,0,0,0-.235-7.3c-.248-3.475-4.22-12.081-4.22-12.081s-3.31-8.44-5.378-13.653-1.324-14.646-1.324-14.646.331-7.116,1.82-9.268,7.282-2.9,7.282-2.9l2.717,9.013s2.234,8.44,3.062,9.681.579,16.053.248,17.625a42.152,42.152,0,0,0,.434,6.858,32.207,32.207,0,0,0,2.012,8.01,3.059,3.059,0,0,1,.281,1.359Z" transform="translate(-70.252 -204.524)" fill="#f8d4d4"/>
|
||||
<path id="Path_90" data-name="Path 90" d="M722.3,785.068l-1.9,3.972s-6.537,2.151-5.461,1.241a3.6,3.6,0,0,0,.662-2.214c.235-.235.487-.493.745-.758a16.712,16.712,0,0,1,5.908-3.949h0C722.263,784.283,722.3,785.068,722.3,785.068Z" transform="translate(-91.489 -315.975)" opacity="0.1"/>
|
||||
<path id="Path_91" data-name="Path 91" d="M719.522,791.588a.187.187,0,0,1,0,.046c-.331,1.572-5.792,3.724-5.792,3.724s-3.475.579-5.461,1.076a1.374,1.374,0,0,1-.467.043c-1.532-.116-1.6-3.065-1.6-3.518a9.4,9.4,0,0,1,2.482-2.9,17.738,17.738,0,0,0,1.84-1.764,17.078,17.078,0,0,1,6.031-4.028h0S719.787,789.956,719.522,791.588Z" transform="translate(-85.723 -316.584)" fill="#fff"/>
|
||||
<path id="Path_93" data-name="Path 93" d="M722.76,806.268a.2.2,0,0,1,0,.046c-.331,1.572-5.792,3.724-5.792,3.724s-3.475.579-5.461,1.076a1.375,1.375,0,0,1-.467.043c1.8-1.235,6.166-4.2,6.755-4.263S721.287,805.993,722.76,806.268Z" transform="translate(-88.961 -331.264)" opacity="0.1"/>
|
||||
<path id="Path_94" data-name="Path 94" d="M788.514,404.442c-2.045,1.685-3.925,1.443-6.782,1.443-2.065,0-4.75.725-6.441-.2-.07-2.585-.331-4.76-.331-4.76s14.4-2.731,13.488.662a6.018,6.018,0,0,0,.066,2.86Z" transform="translate(-131.724 -59.422)" opacity="0.1"/>
|
||||
<path id="Path_95" data-name="Path 95" d="M781.1,361.146a11.833,11.833,0,0,1-11.833,11.833,8.247,8.247,0,0,1-.907-.033h0a11.833,11.833,0,1,1,12.743-11.8Z" transform="translate(-120.003 -25.593)" fill="#f8d4d4"/>
|
||||
<path id="Path_96" data-name="Path 96" d="M742.7,459.252l3.144,4.965-4.385,9.45-5.213,3.806-.91-5.9s-1.761-3.889-2.519-4.548c.218-.533.367-.778.367-.583,0,.827,2.036,4.551,2.036,4.551,6.289-2.151,4.336-10.509,4.336-10.509s-.781-7.447-1.086-9.407l1.086.47Z" transform="translate(-103.532 -93.675)" opacity="0.1"/>
|
||||
<path id="Path_97" data-name="Path 97" d="M784.127,439.869V444.5l-4.8,1.566-8.175,6.017-2.168,1.6-9.681-3.889-6.123-6.454s.3-.162.814-.43l.331-.175a40.414,40.414,0,0,0,16.718,3c12.468-1.986,12.839-5,12.528-6.067Z" transform="translate(-117.153 -86.041)" opacity="0.1"/>
|
||||
<path id="Path_98" data-name="Path 98" d="M743.016,514.772a92.777,92.777,0,0,1-9.6,4.055c-5.709,2.069-18.287-.662-19.859-1.076s-13.653-5.213-18.287-7.033-5.792-.331-6.868-.5-1.82-2.234-1.986-2.813,2.979-5.627,4.717-8.192,6.951-2.069,7.7-2.234,5.958,0,5.958,0-.331-1.655,1.572-6.289-3.144-13.239-3.144-13.239c-3.475-2.234-2.9-9.185-2.9-9.185-.827-3.062,1.82-10.1,1.82-9.268s2.036,4.551,2.036,4.551c6.289-2.151,4.336-10.509,4.336-10.509s-.91-8.688-1.152-9.764,1.152-.91,1.152-.91q.4.209.814.4a40.229,40.229,0,0,0,17.059,3.161c15.116-2.439,12.438-6.328,12.339-6.467l.735.261c5.461,3.972,3.806,17.128,3.806,17.128l-2.046,9.82-1.519,7.315s5.378,32.6,5.875,34.257S743.016,514.772,743.016,514.772Z" transform="translate(-72.484 -85.901)" fill="#94a3b8"/>
|
||||
<path id="Path_99" data-name="Path 99" d="M730.994,622c-.331.248-4.055,7.944-1.324,10.095S730.994,622,730.994,622Z" transform="translate(-100.759 -208.023)" opacity="0.1"/>
|
||||
<path id="Path_100" data-name="Path 100" d="M743.68,625.27c.083.248,7.778,12.495,12,13.488Z" transform="translate(-110.798 -210.21)" opacity="0.1"/>
|
||||
<path id="Path_101" data-name="Path 101" d="M797.2,332.386l-1.231.261a8.3,8.3,0,0,1,1.039-.308Z" transform="translate(-145.78 -14.236)" opacity="0.1"/>
|
||||
<path id="Path_102" data-name="Path 102" d="M783.931,396.545l-2.317,9.814A11.986,11.986,0,0,1,778.4,404.2a9.8,9.8,0,0,0-2.35-1.966,10.2,10.2,0,0,0-4.081-.563,19.63,19.63,0,0,1-5.1-.874,3.6,3.6,0,0,1-1.324-.642,3.217,3.217,0,0,1-.662-2.8,42.893,42.893,0,0,0,.05-5.723c-.02-.357-.046-.715-.076-1.072-.132-1.6-.563-3.452-2.2-4.137-.841-.331-1.844-.3-2.648-.7a2.185,2.185,0,0,1-.331-.2c-1.192-.834-1.3-2.506-1.254-3.912q.106-2.9.2-5.8a16.864,16.864,0,0,0-.063-2.863h0a6.352,6.352,0,0,0-.516-1.827c-.718-1.536-2.214-2.817-2.482-4.438a1.8,1.8,0,0,1-.03-.228c-.139-1.45.774-2.8,1.1-4.227.642-2.87-1.516-6.014-4.69-6.838-.993-.258-2.059-.308-3.048-.6a4.887,4.887,0,0,1-.467-.165,13.894,13.894,0,0,1,11.167-5.3c7.391,0,13.385,5.3,13.385,11.833a11.356,11.356,0,0,1-4.945,9.185c.02.093.043.189.07.281a20.819,20.819,0,0,0,3.191,6.16l7.493,2.383.834.265C785.8,383.395,783.931,396.545,783.931,396.545Z" transform="translate(-113.969 -25.596)" opacity="0.1"/>
|
||||
<path id="Path_103" data-name="Path 103" d="M867.572,520.655a1.124,1.124,0,0,1-.212-.03A.439.439,0,0,1,867.572,520.655Z" transform="translate(-193.541 -140.2)" opacity="0.1"/>
|
||||
<path id="Path_104" data-name="Path 104" d="M759.671,330a28.465,28.465,0,0,0-6.315-.738,3.5,3.5,0,0,0-1.986.417c-.732.513-.824,1.44-1.043,2.241a6.216,6.216,0,0,1-2.367,3.31c-.784.573-1.708.993-2.459,1.6a2.566,2.566,0,0,0-1.135,2.376,2.938,2.938,0,0,0,2.171,1.84c.993.281,2.049.331,3.048.6,3.174.824,5.329,3.972,4.687,6.835-.331,1.427-1.235,2.777-1.1,4.227.162,1.731,1.761,3.065,2.512,4.67a10.092,10.092,0,0,1,.586,4.687l-.2,5.8c-.053,1.529.079,3.369,1.589,4.117.808.4,1.814.354,2.648.7,1.635.682,2.065,2.539,2.2,4.134a42.74,42.74,0,0,1,.026,6.8,3.187,3.187,0,0,0,.662,2.8,3.549,3.549,0,0,0,1.324.642,19.634,19.634,0,0,0,5.1.874,10.307,10.307,0,0,1,4.081.563,9.878,9.878,0,0,1,2.35,1.966,12.988,12.988,0,0,0,7.672,3.359,2.285,2.285,0,0,0,1.734-.354c.427-.394.175-1.244-.434-1.195a2.943,2.943,0,0,0,2.787-1.066,2.35,2.35,0,0,0,0-2.7c-.692-.993-2.161-1.655-2.241-2.833a3.5,3.5,0,0,1,.741-1.85,7.781,7.781,0,0,0-1.2-9.268c-1.552-1.605-3.879-2.823-4.422-4.882-.361-1.377.185-2.823-.023-4.223-.331-2.317-2.625-3.972-3.886-6.037a10.5,10.5,0,0,1-1.162-6.914,49.179,49.179,0,0,1,1.8-6.918,8.928,8.928,0,0,0,.351-5.206,9.539,9.539,0,0,0-2.122-3.227,23.9,23.9,0,0,0-7.533-5.958,13.774,13.774,0,0,0-9.837-.907" transform="translate(-111.233 -12.175)" fill="#474157"/>
|
||||
<path id="Path_105" data-name="Path 105" d="M759.671,330a28.465,28.465,0,0,0-6.315-.738,3.5,3.5,0,0,0-1.986.417c-.732.513-.824,1.44-1.043,2.241a6.216,6.216,0,0,1-2.367,3.31c-.784.573-1.708.993-2.459,1.6a2.566,2.566,0,0,0-1.135,2.376,2.938,2.938,0,0,0,2.171,1.84c.993.281,2.049.331,3.048.6,3.174.824,5.329,3.972,4.687,6.835-.331,1.427-1.235,2.777-1.1,4.227.162,1.731,1.761,3.065,2.512,4.67a10.092,10.092,0,0,1,.586,4.687l-.2,5.8c-.053,1.529.079,3.369,1.589,4.117.808.4,1.814.354,2.648.7,1.635.682,2.065,2.539,2.2,4.134a42.74,42.74,0,0,1,.026,6.8,3.187,3.187,0,0,0,.662,2.8,3.549,3.549,0,0,0,1.324.642,19.634,19.634,0,0,0,5.1.874,10.307,10.307,0,0,1,4.081.563,9.878,9.878,0,0,1,2.35,1.966,12.988,12.988,0,0,0,7.672,3.359,2.285,2.285,0,0,0,1.734-.354c.427-.394.175-1.244-.434-1.195a2.943,2.943,0,0,0,2.787-1.066,2.35,2.35,0,0,0,0-2.7c-.692-.993-2.161-1.655-2.241-2.833a3.5,3.5,0,0,1,.741-1.85,7.781,7.781,0,0,0-1.2-9.268c-1.552-1.605-3.879-2.823-4.422-4.882-.361-1.377.185-2.823-.023-4.223-.331-2.317-2.625-3.972-3.886-6.037a10.5,10.5,0,0,1-1.162-6.914,49.179,49.179,0,0,1,1.8-6.918,8.928,8.928,0,0,0,.351-5.206,9.539,9.539,0,0,0-2.122-3.227,23.9,23.9,0,0,0-7.533-5.958,13.774,13.774,0,0,0-9.837-.907" transform="translate(-111.233 -12.175)" fill="#1e293b"/>
|
||||
<path id="Path_106" data-name="Path 106" d="M737.18,548.476s2.813,1.076,5.792-1.9S737.18,548.476,737.18,548.476Z" transform="translate(-106.449 -156.917)" opacity="0.1"/>
|
||||
<g id="Group_116" data-name="Group 116" transform="translate(633.048 317.105)" opacity="0.1">
|
||||
<path id="Path_107" data-name="Path 107" d="M793.1,330.871a11.776,11.776,0,0,1,1.655-.209,12.551,12.551,0,0,0-2.317.073Z" transform="translate(-776.467 -330.203)"/>
|
||||
<path id="Path_108" data-name="Path 108" d="M777.411,390.5a9.9,9.9,0,0,0-2.353-1.966,10.3,10.3,0,0,0-4.081-.563,19.53,19.53,0,0,1-5.1-.874,3.549,3.549,0,0,1-1.324-.642,3.225,3.225,0,0,1-.662-2.8,42.733,42.733,0,0,0-.026-6.8c-.136-1.6-.563-3.452-2.2-4.134-.837-.351-1.84-.308-2.648-.7-1.509-.748-1.655-2.588-1.592-4.117q.1-2.9.2-5.8a10.059,10.059,0,0,0-.586-4.69c-.751-1.605-2.35-2.936-2.512-4.67-.136-1.446.778-2.8,1.1-4.227.642-2.87-1.516-6.011-4.69-6.835-.993-.258-2.059-.311-3.048-.6a2.905,2.905,0,0,1-2.155-1.82,2.52,2.52,0,0,1,1.132-2.38c.751-.606,1.675-1.023,2.463-1.6a6.193,6.193,0,0,0,2.363-3.31,3.713,3.713,0,0,1,1.043-2.241,2.648,2.648,0,0,1,1.357-.4c-.295,0-.589-.017-.88-.017a3.521,3.521,0,0,0-1.986.414c-.732.516-.824,1.44-1.043,2.241a6.216,6.216,0,0,1-2.367,3.31c-.784.573-1.708.993-2.459,1.6a2.568,2.568,0,0,0-1.135,2.38,2.92,2.92,0,0,0,2.158,1.82c.99.295,2.049.331,3.048.6,3.174.824,5.329,3.972,4.687,6.835-.331,1.427-1.235,2.78-1.1,4.227.162,1.734,1.761,3.065,2.512,4.67a10.057,10.057,0,0,1,.586,4.69q-.1,2.9-.2,5.8c-.053,1.529.079,3.369,1.589,4.117.808.4,1.814.354,2.648.7,1.635.682,2.065,2.539,2.2,4.134a42.74,42.74,0,0,1,.026,6.8,3.187,3.187,0,0,0,.662,2.8,3.549,3.549,0,0,0,1.324.642,19.5,19.5,0,0,0,5.1.874,10.308,10.308,0,0,1,4.081.563A9.959,9.959,0,0,1,775.9,390.5a12.968,12.968,0,0,0,7.669,3.36,3.544,3.544,0,0,0,1.109-.043,12.945,12.945,0,0,1-7.267-3.317Z" transform="translate(-744.18 -329.32)"/>
|
||||
</g>
|
||||
<path id="Path_109" data-name="Path 109" d="M684.782,484s-2.648,2.429-2.261,3.422S684.782,484,684.782,484Z" transform="translate(-69.856 -115.699)" opacity="0.1"/>
|
||||
<path id="Path_110" data-name="Path 110" d="M668.535,577.927c-1.91-.467-7.176-.9-9.681,7.507a37.186,37.186,0,0,1-2.221,5.683c-2.4,4.935-5.508,15.083,8.146,17.317l32.767,7.447s17.542,2.151,18.7,1.324a3.207,3.207,0,0,0,.993-2.648s-19.363,0-23.169-5.958-3.972-14.067-3.972-14.067.477-12.521-19.528-16.159C669.908,578.248,669.213,578.092,668.535,577.927Z" transform="translate(-51.152 -178.397)" fill="#474157"/>
|
||||
<path id="Path_111" data-name="Path 111" d="M668.535,578.1c-1.91-.467-7.176-.9-9.681,7.51a37.188,37.188,0,0,1-2.221,5.683c-2.4,4.932-5.508,15.08,8.146,17.314l32.767,7.447s17.542,2.151,18.7,1.324a3.207,3.207,0,0,0,.993-2.648s-19.363,0-23.169-5.958S690.1,594.7,690.1,594.7s.477-12.521-19.528-16.159C669.908,578.418,669.213,578.256,668.535,578.1Z" transform="translate(-51.152 -178.511)" fill="#334155"/>
|
||||
<path id="Path_112" data-name="Path 112" d="M811.958,543.834a5.061,5.061,0,0,0-5.114-4.276c-4.713.086-19.22.715-25.959,5.117,0,0-5.13,3.31-6.62,3.31s-21.68,17.211,8.275,32.6c0,0,16.053,4.568,22.341-6.156,0,0,4.468-11.518,4.137-15.507S812,544.178,812,544.178,811.991,544.049,811.958,543.834Z" transform="translate(-125.886 -152.867)" fill="#475569"/>
|
||||
<path id="Path_113" data-name="Path 113" d="M811.958,553.257a4.963,4.963,0,0,0-5.114-3.949c-4.713.079-19.22.662-25.959,4.723,0,0-5.13,3.055-6.62,3.055s-21.68,15.887,8.275,30.1c0,0,16.053,4.217,22.341-5.683,0,0,4.468-10.635,4.137-14.315S812,553.575,812,553.575,811.991,553.456,811.958,553.257Z" transform="translate(-125.886 -159.39)" fill="#475569" opacity="0.1"/>
|
||||
<rect id="Rectangle_59" data-name="Rectangle 59" width="5.296" height="11.277" transform="translate(664.763 427.716)" fill="#1e293b"/>
|
||||
<ellipse id="Ellipse_43" data-name="Ellipse 43" cx="14.908" cy="0.957" rx="14.908" ry="0.957" transform="translate(461.439 379.949)" opacity="0.1"/>
|
||||
<path id="Path_114" data-name="Path 114" d="M266.794,405.634a5.684,5.684,0,0,0-.755,1.42c-.046.126-.093.265-.139.4a1.22,1.22,0,0,0-.262-.089,3.753,3.753,0,0,0-1.182-.1c0-.152.02-.331.023-.483.05-1.744-.156-4.177-1.82-3.148-1.6.993-.457,2.648.573,3.71l.265.258c-.94.662-1.119,2.228-1.274,3.853s-1.536,3.406-2.453,4.415c-.093.1-.175.2-.258.281a3.346,3.346,0,0,0-2.664-.685c-.036-.142-.079-.291-.122-.45-.741-2.674-2.28-7.311-4.243-8.328l.258-.331c.834-1.092,1.774-2.711.387-3.128s-1.513,1.407-1.436,2.77c0,.172.026.331.04.483a2.042,2.042,0,0,0-1.45.708l-.215-.252c-1.125-1.324-3.187-3.432-3.813-1.84-.583,1.483,1.235,3.406,2.512,4.521l.079.07c-.857,3.485,2.876,6.332,4.9,7.563l.261.159c-2.78,3.277-4.5,9.417-4.5,9.417l7.785,1.39s5.163-4.452,4.5-8.635h.053c5.16-1.033,6.332-6.534,5.527-9.8l.093-.036a5.871,5.871,0,0,0,2.39-1.807C271.3,405.928,268.271,403.664,266.794,405.634Z" transform="translate(222.063 -61.62)" fill="#475569"/>
|
||||
<path id="Path_115" data-name="Path 115" d="M266.794,405.634a5.684,5.684,0,0,0-.755,1.42c-.046.126-.093.265-.139.4a1.22,1.22,0,0,0-.262-.089,3.753,3.753,0,0,0-1.182-.1c0-.152.02-.331.023-.483.05-1.744-.156-4.177-1.82-3.148-1.6.993-.457,2.648.573,3.71l.265.258c-.94.662-1.119,2.228-1.274,3.853s-1.536,3.406-2.453,4.415c-.093.1-.175.2-.258.281a3.346,3.346,0,0,0-2.664-.685c-.036-.142-.079-.291-.122-.45-.741-2.674-2.28-7.311-4.243-8.328l.258-.331c.834-1.092,1.774-2.711.387-3.128s-1.513,1.407-1.436,2.77c0,.172.026.331.04.483a2.042,2.042,0,0,0-1.45.708l-.215-.252c-1.125-1.324-3.187-3.432-3.813-1.84-.583,1.483,1.235,3.406,2.512,4.521l.079.07c-.857,3.485,2.876,6.332,4.9,7.563l.261.159c-2.78,3.277-4.5,9.417-4.5,9.417l7.785,1.39s5.163-4.452,4.5-8.635h.053c5.16-1.033,6.332-6.534,5.527-9.8l.093-.036a5.871,5.871,0,0,0,2.39-1.807C271.3,405.928,268.271,403.664,266.794,405.634Z" transform="translate(222.063 -61.62)" fill="none" opacity="0.1"/>
|
||||
<path id="Path_116" data-name="Path 116" d="M252.281,410.632l-.9,2.664s-.506-.357-1.145-.92c-1.278-1.115-3.1-3.038-2.512-4.521.626-1.592,2.688.51,3.813,1.84C251.98,410.222,252.281,410.632,252.281,410.632Z" transform="translate(221.08 -64.374)" fill="#f1f5f9"/>
|
||||
<path id="Path_117" data-name="Path 117" d="M265.366,406.372a12.878,12.878,0,0,1-.887,1.043,13.984,13.984,0,0,1-.162-1.4c-.076-1.364.069-3.174,1.436-2.77S266.187,405.279,265.366,406.372Z" transform="translate(209.915 -61.633)" fill="#f1f5f9"/>
|
||||
<path id="Path_118" data-name="Path 118" d="M297.718,407.222c-.026.877-.113,1.576-.113,1.576a11.254,11.254,0,0,1-1.135-1.013c-1.029-1.069-2.168-2.717-.573-3.71C297.559,403.045,297.765,405.477,297.718,407.222Z" transform="translate(189.306 -62.063)" fill="#f1f5f9"/>
|
||||
<path id="Path_119" data-name="Path 119" d="M310.61,411.379a5.871,5.871,0,0,1-2.4,1.8,6.681,6.681,0,0,1-.8.288l-1.072-1.506a10.934,10.934,0,0,1,.444-1.463,5.688,5.688,0,0,1,.755-1.42,1.919,1.919,0,0,1,3.073,2.3Z" transform="translate(181.79 -65.072)" fill="#f1f5f9"/>
|
||||
<path id="Path_120" data-name="Path 120" d="M256.831,414.57c.453.526.755.937.755.937l-.9,2.664s-.506-.357-1.145-.92a5.213,5.213,0,0,1,1.026-2.34A3.1,3.1,0,0,1,256.831,414.57Z" transform="translate(215.776 -69.249)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_121" data-name="Path 121" d="M265.4,412.088a12.9,12.9,0,0,1-.887,1.043,13.967,13.967,0,0,1-.162-1.4,1.807,1.807,0,0,1,1.049.357Z" transform="translate(209.882 -67.349)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_122" data-name="Path 122" d="M263.826,423.624l-2.264.993a13.76,13.76,0,0,1-1.2-.682c-2.38-1.466-7.162-5.15-3.955-9.493s5.882,3.449,6.934,7.255C263.671,422.84,263.826,423.624,263.826,423.624Z" transform="translate(215.916 -68.308)" fill="#f1f5f9"/>
|
||||
<path id="Path_123" data-name="Path 123" d="M299.22,414.643a1.844,1.844,0,0,1,1.248-.563c-.026.877-.113,1.575-.113,1.575a11.266,11.266,0,0,1-1.135-1.012Z" transform="translate(186.553 -68.921)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_124" data-name="Path 124" d="M308.213,417.581a6.692,6.692,0,0,1-.8.288l-1.072-1.506a10.935,10.935,0,0,1,.444-1.463,3.83,3.83,0,0,1,1.428,2.681Z" transform="translate(181.79 -69.47)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_125" data-name="Path 125" d="M285.8,427.814l-.381.066c-7.589,1.155-2.5-2.939-2.5-2.939s.331-.314.8-.831c.917-1.009,2.294-2.78,2.453-4.415.238-2.459.513-4.766,3.416-4.088C292.452,416.272,293,426.374,285.8,427.814Z" transform="translate(198.577 -69.862)" fill="#f1f5f9"/>
|
||||
<rect id="Rectangle_60" data-name="Rectangle 60" width="14.5" height="3.813" transform="translate(469.747 376.844)" fill="#474157"/>
|
||||
<rect id="Rectangle_61" data-name="Rectangle 61" width="18.946" height="13.306" transform="translate(467.443 364.452)" fill="#474157"/>
|
||||
<rect id="Rectangle_62" data-name="Rectangle 62" width="14.5" height="3.813" transform="translate(469.608 376.844)" fill="#334155" opacity="0.1"/>
|
||||
<rect id="Rectangle_63" data-name="Rectangle 63" width="18.946" height="13.306" transform="translate(467.384 364.455)" fill="#334155" opacity="0.1"/>
|
||||
<rect id="Rectangle_64" data-name="Rectangle 64" width="14.5" height="3.813" transform="translate(470.7 376.844)" fill="#1e293b"/>
|
||||
<path id="Path_126" data-name="Path 126" d="M273.539,439c.331,1.139.49,1.923.49,1.923l-2.264.993a13.763,13.763,0,0,1-1.2-.682A5.677,5.677,0,0,1,273.539,439Z" transform="translate(205.727 -85.593)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_127" data-name="Path 127" d="M285.8,445.244l-.381.066c-7.589,1.155-2.5-2.939-2.5-2.939s.331-.314.8-.831a5,5,0,0,1,2.081,3.7Z" transform="translate(198.577 -87.292)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_128" data-name="Path 128" d="M257.76,451.555s4.25-15.225,10.211-10.525-2.426,11.915-2.426,11.915Z" transform="translate(214.291 -86.348)" fill="#f1f5f9"/>
|
||||
<circle id="Ellipse_44" data-name="Ellipse 44" cx="0.477" cy="0.477" r="0.477" transform="translate(473.719 348.045)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_45" data-name="Ellipse 45" cx="0.477" cy="0.477" r="0.477" transform="translate(473.679 350.273)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_46" data-name="Ellipse 46" cx="0.477" cy="0.477" r="0.477" transform="translate(487.504 348.482)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_47" data-name="Ellipse 47" cx="0.477" cy="0.477" r="0.477" transform="translate(476.38 359.884)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_48" data-name="Ellipse 48" cx="0.477" cy="0.477" r="0.477" transform="translate(486.511 352.179)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_49" data-name="Ellipse 49" cx="0.477" cy="0.477" r="0.477" transform="translate(481.586 357.104)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_50" data-name="Ellipse 50" cx="0.477" cy="0.477" r="0.477" transform="translate(475.347 348.998)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_51" data-name="Ellipse 51" cx="0.477" cy="0.477" r="0.477" transform="translate(486.194 349.915)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_52" data-name="Ellipse 52" cx="0.477" cy="0.477" r="0.477" transform="translate(484.565 353.609)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_53" data-name="Ellipse 53" cx="0.477" cy="0.477" r="0.477" transform="translate(479.557 359.527)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_54" data-name="Ellipse 54" cx="0.477" cy="0.477" r="0.477" transform="translate(478.525 357.184)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_55" data-name="Ellipse 55" cx="0.477" cy="0.477" r="0.477" transform="translate(476.062 351.901)" fill="#1e293b" opacity="0.1"/>
|
||||
<rect id="Rectangle_65" data-name="Rectangle 65" width="14.5" height="1.393" transform="translate(470.7 376.844)" opacity="0.1"/>
|
||||
<rect id="Rectangle_66" data-name="Rectangle 66" width="18.946" height="13.306" transform="translate(468.397 364.452)" fill="#1e293b"/>
|
||||
<circle id="Ellipse_56" data-name="Ellipse 56" cx="0.477" cy="0.477" r="0.477" transform="translate(480.193 361.672)" fill="#1e293b" opacity="0.1"/>
|
||||
<circle id="Ellipse_57" data-name="Ellipse 57" cx="0.477" cy="0.477" r="0.477" transform="translate(477.333 362.268)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_129" data-name="Path 129" d="M399.263,626s2.36,3.088-1.089,7.748-6.289,8.606-5.15,11.505c0,0,5.21-8.659,9.45-8.778S403.927,631.21,399.263,626Z" transform="translate(123.968 -210.699)" fill="#f1f5f9"/>
|
||||
<path id="Path_130" data-name="Path 130" d="M399.525,626a3.8,3.8,0,0,1,.483.967c4.134,4.859,6.338,9.393,2.363,9.509-3.7.116-8.146,6.736-9.211,8.39.036.129.079.258.126.381,0,0,5.21-8.659,9.45-8.778S404.188,631.21,399.525,626Z" transform="translate(123.706 -210.699)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_131" data-name="Path 131" d="M424.553,636.492c0,1.086-.122,1.966-.271,1.966s-.271-.88-.271-1.966.152-.576.3-.576S424.553,635.4,424.553,636.492Z" transform="translate(103.067 -217.252)" fill="#475569"/>
|
||||
<path id="Path_132" data-name="Path 132" d="M426.437,640.312c-.953.52-1.784.834-1.857.7s.642-.662,1.6-1.182.576-.142.662,0S427.393,639.793,426.437,640.312Z" transform="translate(102.689 -219.775)" fill="#475569"/>
|
||||
<path id="Path_133" data-name="Path 133" d="M363.985,626s-2.36,3.088,1.089,7.748,6.289,8.606,5.147,11.505c0,0-5.206-8.659-9.446-8.778S359.321,631.21,363.985,626Z" transform="translate(146.771 -210.699)" fill="#f1f5f9"/>
|
||||
<path id="Path_134" data-name="Path 134" d="M363.985,626a3.8,3.8,0,0,0-.483.967c-4.134,4.859-6.338,9.393-2.363,9.509,3.7.116,8.146,6.736,9.211,8.39a3.669,3.669,0,0,1-.129.381s-5.206-8.655-9.446-8.768S359.321,631.21,363.985,626Z" transform="translate(146.771 -210.699)" fill="#1e293b" opacity="0.1"/>
|
||||
<path id="Path_135" data-name="Path 135" d="M361.44,636.492c0,1.086.122,1.966.271,1.966s.271-.88.271-1.966-.152-.576-.3-.576S361.44,635.4,361.44,636.492Z" transform="translate(144.927 -217.252)" fill="#475569"/>
|
||||
<path id="Path_136" data-name="Path 136" d="M355.691,640.312c.953.52,1.784.834,1.857.7s-.642-.662-1.6-1.182-.576-.142-.662,0S354.734,639.793,355.691,640.312Z" transform="translate(149.17 -219.775)" fill="#475569"/>
|
||||
<path id="Ellipse_58" data-name="Ellipse 58" d="M24.691,0C38.327,0,49.382,1.7,49.382,3.79S38.327,7.58,24.691,7.58,0,5.883,0,3.79,11.055,0,24.691,0Z" transform="translate(492.3 450.604)" fill="#f1f5f9" opacity="0.077"/>
|
||||
<path id="Path_137" data-name="Path 137" d="M380.556,668.693l-.119.963-.166,1.364-.066.566-.169,1.364-.07.569-.165,1.36-1.873,15.49c-.169,1.383-2.429,2.459-5.153,2.459h-9.837c-2.727,0-4.965-1.076-5.15-2.459l-1.893-15.49-.165-1.36-.069-.569-.169-1.364-.066-.566-.165-1.364-.119-.963c-.1-.781,1.125-1.443,2.671-1.443H377.89C379.427,667.25,380.652,667.912,380.556,668.693Z" transform="translate(149.146 -238.296)" fill="#1e293b"/>
|
||||
<path id="Path_138" data-name="Path 138" d="M280.188,623.15l-.165,1.36H255.176l-.165-1.36Z" transform="translate(249.394 -191.79)" fill="#334155"/>
|
||||
<path id="Path_139" data-name="Path 139" d="M280.425,628.98l-.165,1.364H255.88l-.169-1.364Z" transform="translate(248.926 -195.69)" fill="#334155"/>
|
||||
<path id="Path_140" data-name="Path 140" d="M280.668,634.81l-.165,1.364H256.6l-.165-1.364Z" transform="translate(248.444 -199.59)" fill="#334155"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 33 KiB |
9
gui/src/assets/svg/logo.svg
Normal file
9
gui/src/assets/svg/logo.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="311.899" height="291.707" viewBox="0 0 311.899 291.707">
|
||||
<g id="Icon_ionic-ios-apps" data-name="Icon ionic-ios-apps" transform="translate(-4.57 -4.492)">
|
||||
<path id="Path_9" data-name="Path 9" d="M305.678,64.318,184.327,9a65.721,65.721,0,0,0-47.842,0L15.22,64.318c-14.293,6.5-14.293,17.117,0,23.639l120.221,54.826a69.059,69.059,0,0,0,50.033,0L305.687,87.956C319.971,81.46,319.971,70.822,305.678,64.318Z" transform="translate(0.07)" fill="#fff" opacity="0.999"/>
|
||||
<g id="Group_1" data-name="Group 1" transform="translate(4.533 135.941)">
|
||||
<path id="Path_10" data-name="Path 10" d="M108.2,53.266,44,24a10.438,10.438,0,0,0-8.553,0L12.99,34.227c-11.32,5.145-11.32,13.556,0,18.721l95.21,43.42a54.692,54.692,0,0,0,39.625,0l95.2-43.42c11.32-5.148,11.32-13.556,0-18.721L220.582,24a10.438,10.438,0,0,0-8.553,0l-64.2,29.268a54.692,54.692,0,0,1-39.625,0Z" transform="translate(28.02 60.176)" fill="#fff" opacity="0.5"/>
|
||||
<path id="Path_11" data-name="Path 11" d="M274.692,27.406l-23.1-10.493a11.652,11.652,0,0,0-9.618,0l-78.68,35.625a64.317,64.317,0,0,1-37.812,0L46.815,16.914a11.652,11.652,0,0,0-9.618,0L14.108,27.407c-12.819,5.825-12.819,15.351,0,21.2L121.925,97.783a61.937,61.937,0,0,0,44.874,0L274.615,48.608C287.51,42.773,287.51,33.232,274.692,27.406Z" transform="translate(11.592 -15.875)" fill="#fff" opacity="0.75"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
11
gui/src/assets/svg/phone-illustration.svg
Normal file
11
gui/src/assets/svg/phone-illustration.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="280.056" height="304.433" viewBox="0 0 280.056 304.433">
|
||||
<g id="Group_2" data-name="Group 2" transform="translate(-104.693 -1.265)">
|
||||
<rect id="Rectangle_76" data-name="Rectangle 76" width="4.104" height="33.821" rx="0.751" transform="matrix(0.788, -0.616, 0.616, 0.788, 250.1, 52.551)" fill="#3f3d56"/>
|
||||
<path id="Rectangle_80" data-name="Rectangle 80" d="M12.78,0H124.507a12.78,12.78,0,0,1,12.78,12.78V266.236a12.78,12.78,0,0,1-12.78,12.78H12.78A12.78,12.78,0,0,1,0,266.236V12.78A12.78,12.78,0,0,1,12.78,0Z" transform="matrix(0.788, -0.616, 0.616, 0.788, 104.693, 85.834)" fill="#475569"/>
|
||||
<path id="Path_176" data-name="Path 176" d="M109.443,0H93.695V1.894a8.976,8.976,0,0,1-8.981,8.976H34.63a8.976,8.976,0,0,1-8.981-8.976V0H10.9A10.9,10.9,0,0,0,0,10.9V253.6a10.9,10.9,0,0,0,10.9,10.9h98.54a10.9,10.9,0,0,0,10.9-10.9V10.922A10.9,10.9,0,0,0,109.443,0Z" transform="matrix(0.788, -0.616, 0.616, 0.788, 116.052, 86.183)" fill="#f1f5f9"/>
|
||||
<rect id="Rectangle_81" data-name="Rectangle 81" width="19.171" height="3.891" rx="1.269" transform="matrix(0.788, -0.616, 0.616, 0.788, 153.48, 58.292)" fill="#e6e8ec"/>
|
||||
<circle id="Ellipse_5" data-name="Ellipse 5" cx="2.209" cy="2.209" r="2.209" transform="matrix(0.788, -0.616, 0.616, 0.788, 170.71, 44.496)" fill="#e6e8ec"/>
|
||||
<circle id="Ellipse_11" data-name="Ellipse 11" cx="25.971" cy="25.971" r="25.971" transform="matrix(0.788, -0.616, 0.616, 0.788, 210.99, 151.214)" fill="#fff"/>
|
||||
<path id="Path_222" data-name="Path 222" d="M69.422,34.712A34.711,34.711,0,1,1,34.711,0,34.711,34.711,0,0,1,69.422,34.712ZM30.7,53.085,56.448,27.337a2.237,2.237,0,0,0,0-3.168L53.28,21.024a2.233,2.233,0,0,0-3.164,0l-21,21L19.31,32.2a2.246,2.246,0,0,0-3.168,0l-3.168,3.187a2.247,2.247,0,0,0,0,3.168L27.532,53.1a2.237,2.237,0,0,0,3.168,0Z" transform="matrix(0.788, -0.616, 0.616, 0.788, 196.054, 147.189)" fill="#94a3b8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
12
gui/src/assets/svg/radial-gradient.svg
Normal file
12
gui/src/assets/svg/radial-gradient.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<radialGradient id="successGradient">
|
||||
<stop offset="10%" stop-color="transparent" />
|
||||
<stop offset="70%" stop-color="#5EEAD4" />
|
||||
</radialGradient>
|
||||
<radialGradient id="errorGradient">
|
||||
<stop offset="10%" stop-color="transparent" />
|
||||
<stop offset="70%" stop-color="#DC143C" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 515 B |
32
gui/src/assets/svg/woman-illustration.svg
Normal file
32
gui/src/assets/svg/woman-illustration.svg
Normal file
@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="251.014" height="317.588" viewBox="0 0 251.014 317.588">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="0.505" y1="1.007" x2="0.505" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="gray" stop-opacity="0.251"/>
|
||||
<stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
|
||||
<stop offset="1" stop-color="gray" stop-opacity="0.102"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Group_1" data-name="Group 1" transform="translate(-125.954 18.154)">
|
||||
<rect id="Rectangle_77" data-name="Rectangle 77" width="3.785" height="18.307" rx="1.276" transform="translate(287.945 23.197) rotate(-11)" fill="#3f3d56"/>
|
||||
<rect id="Rectangle_78" data-name="Rectangle 78" width="4.265" height="31.863" rx="1.276" transform="translate(294.207 56.13) rotate(-11)" fill="#3f3d56"/>
|
||||
<rect id="Rectangle_79" data-name="Rectangle 79" width="4.059" height="32.137" rx="1.276" transform="translate(302.481 98.339) rotate(-11)" fill="#3f3d56"/>
|
||||
<path id="Path_190" data-name="Path 190" d="M0,0A.7.7,0,0,0,.83.107,2.943,2.943,0,0,1,0,0Z" transform="translate(269.32 191.355) rotate(-11)" fill="url(#linear-gradient)"/>
|
||||
<path id="Path_192" data-name="Path 192" d="M43.471,0l-.819,4.463L42.02,7.877l-1.15,6.245L29.721,21.927s-1-.86-2.663-2.216C22.489,15.948,12.885,8.288,5.834,4.175A23.753,23.753,0,0,0,0,1.487Z" transform="translate(259.796 205.712) rotate(-11)" fill="#f8d4d4"/>
|
||||
<path id="Path_194" data-name="Path 194" d="M44.318,12.282s13,2.231,13.761-3.32S51.388.41,45.072.037.849,2.268.849,2.268s-6.686,8.918,17.462,10.41Z" transform="translate(249.226 198.636) rotate(-11)" fill="#1e293b"/>
|
||||
<rect id="Rectangle_82" data-name="Rectangle 82" width="68.005" height="80.639" transform="translate(221.269 29.959) rotate(-11)" fill="#334155"/>
|
||||
<path id="Path_198" data-name="Path 198" d="M25.9,6.7a10.913,10.913,0,0,0-4.142,2.932C14.9,16.42,5.088,32.343,5.088,32.343-7.462,17.39,6.426,5.582,12.345,1.523,13.785.541,14.751,0,14.751,0Z" transform="translate(142.668 179.037) rotate(-11)" fill="#f8d4d4"/>
|
||||
<path id="Path_199" data-name="Path 199" d="M36.043,0s3.346,23.41,14.865,28.984S36.043,44.976,36.043,44.976L0,31.588S20.44,24.9,16.35,5.2Z" transform="translate(236.89 52.85) rotate(-11)" fill="#f8d4d4"/>
|
||||
<path id="Path_200" data-name="Path 200" d="M43.508,0l-.815,4.448L42.03,7.875,40.88,14.12l-11.149,7.8s-1-.853-2.663-2.208C22.5,15.947,12.9,8.286,5.834,4.174A23.6,23.6,0,0,0,0,1.486Z" transform="translate(218.498 199.899) rotate(-11)" fill="#f8d4d4"/>
|
||||
<path id="Path_202" data-name="Path 202" d="M43.03,14.445S54.7,14.527,55.4,8.96,49.041.408,43.03.035.5,2.439.5,2.439s-5.181,10.515,17.79,12Z" transform="translate(207.79 192.853) rotate(-11)" fill="#334155"/>
|
||||
<path id="Path_204" data-name="Path 204" d="M89.962,101.836c-.51-.251-1.021-.51-1.523-.761l-1.371-1.729-17.98-22.8v.4c-.122,3.808-1.416,33.98-11.514,36.767-10.776,2.97-23.775,3.716-29.7-16.35S11.119,33.446,0,30.842L16.54,17.279s10.951,12.809,15.413,25.07c-.167-.761-7.73-36.1-1.523-42.349H84.694s8.377,23.859,14.119,35.678c4.47,9.177,11.179,30.873,15.5,45.555C118.588,95.728,103.563,108.53,89.962,101.836Z" transform="translate(242.03 186.268) rotate(-11)" fill="#475569"/>
|
||||
<path id="Path_205" data-name="Path 205" d="M60.518,52.029C52.141,56.986,15.366,54.965,3.4,54.161L.14,53.925c-.35,0,.053-.2.053-.2l.335-3.374L9.449,27.69,57.2,0c-.968,2.917-1.287,7.38-1.211,12.489C56.208,28.908,60.518,52.029,60.518,52.029Z" transform="translate(260.759 136.409) rotate(-11)" opacity="0.1"/>
|
||||
<path id="Path_206" data-name="Path 206" d="M60.916,52.005C52.539,56.963,15.764,54.941,3.8,54.138L.54,53.909,0,53.863l.594-.152L3.53,52.95,9.843,27.682,57.591,0C56.624,2.917,56.3,7.38,56.38,12.489,56.6,28.893,60.916,52.005,60.916,52.005Z" transform="translate(260.16 135.409) rotate(-11)" fill="#cbd5e1"/>
|
||||
<path id="Path_208" data-name="Path 208" d="M2.406,0,13.555,6.686A10.914,10.914,0,0,0,9.413,9.618C8.484,6.907,2.653,3.122,0,1.508,1.439.541,2.406,0,2.406,0Z" transform="translate(154.789 176.698) rotate(-11)" opacity="0.1"/>
|
||||
<path id="Path_209" data-name="Path 209" d="M.761.107A.662.662,0,0,1,0,0,2.642,2.642,0,0,0,.761.107Z" transform="translate(268.311 189.076) rotate(-11)" opacity="0.1"/>
|
||||
<path id="Path_210" data-name="Path 210" d="M135.295,56.833s-10.037,1.112-17.1-6.321c0,0-29.7,8.552-39.76,27.872S0,135.614,0,135.614s11.9,6.686,10.776,10.029L55.744,119.63s15.992-11.514,20.432-14.119,28.992-18.581,34.193,24.895,0,38.275,0,38.275,7.433,2.6,18.208-18.208,44.215-25.641,44.215-25.641l1.858-21.917s6.633-14.53,1.523-20.561a12.946,12.946,0,0,1-2.978-6.29c-.845-5.567-.313-12.841,11.521-20.548,18.208-11.9,37.109-18.43,29.657-27.4s-55.228-42.823-55.228-42.823L148.124,2.658S192,26.711,191.085,30.723c-7.252,5.121-31.631,15.312-45.785,14.961C145.3,45.684,147.928,56.46,135.295,56.833Z" transform="translate(128.76 43.985) rotate(-11)" fill="#94a3b8"/>
|
||||
<path id="Path_211" data-name="Path 211" d="M22.2,9.081A72.58,72.58,0,0,1,20.143,0L.449,5.2A21.591,21.591,0,0,1,0,16.565,21.179,21.179,0,0,0,22.2,9.078Z" transform="translate(252.344 50.975) rotate(-11)" opacity="0.1"/>
|
||||
<circle id="Ellipse_10" data-name="Ellipse 10" cx="21.179" cy="21.179" r="21.179" transform="translate(232.292 28.197) rotate(-11)" fill="#f8d4d4"/>
|
||||
<path id="Path_213" data-name="Path 213" d="M0,0S12.261,24.156,8.544,31.581" transform="translate(312.28 207.976) rotate(-11)" opacity="0.1"/>
|
||||
<path id="Path_221" data-name="Path 221" d="M57.637.16C63.515.83,69.1,3.35,74.886,4.729a8.56,8.56,0,0,0,4.463.167c2.246-.693,4.074-3.046,6.4-2.978,1.434.046,2.7,1.021,3.884,1.957a47.776,47.776,0,0,1,5.331,4.752c3.99,4.333,6.465,10.167,10.1,14.881S119.433,31.9,124.6,29.733c-3.513,13.712-20.022,24.138-32.488,24.991-4.973.341-10.068-.693-14.881.761a12.894,12.894,0,0,1-3.755.914c-2.772,0-5-2.543-6.732-5.018C62.7,45.563,59.494,38.96,54.932,33.652c-1.523-1.759-3.282-3.427-5.414-3.746s-4.089.7-5.985,1.683c-3.13,1.622-6.328,3.3-8.757,6.092S30.815,44.6,31.82,48.343c.541,2.026,1.775,3.854,1.8,5.97.046,3.381-2.936,5.849-3.526,9.138a34.266,34.266,0,0,0-.145,4.158c-.259,4.506-3.209,8.193-6.282,11.034-1.2,1.1-2.526,2.285-2.879,3.983-.236,1.165,0,2.39-.152,3.572-.449,2.924-3.366,4.409-5.948,4.79A17.157,17.157,0,0,1,5.763,89.93c3.61-1.707,5.834-6.564,5-10.913-1.15-6.032-7.212-10.365-6.691-16.5a19.119,19.119,0,0,1,1.676-5.429A49.745,49.745,0,0,0,8.6,46.8a17.334,17.334,0,0,0-.175-8.2c-.761-2.361-2.353-4.241-3.7-6.237A35.466,35.466,0,0,1,.441,23.578a6.177,6.177,0,0,1-.41-2.909A6,6,0,0,1,1.9,17.661c3.313-3.482,6.854-7.1,11.294-8.1A25.42,25.42,0,0,1,19.6,9.322,75.68,75.68,0,0,0,30.741,8.85c3.046-.358,8.193-.312,10.776-2.285,2.406-1.844,3.762-4.158,6.724-5.331A19.8,19.8,0,0,1,57.641.16Z" transform="translate(202.236 5.622) rotate(-11)" fill="#475569"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
200
gui/src/base-components/Alert/Alert.vue
Normal file
200
gui/src/base-components/Alert/Alert.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: true
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { TransitionRoot } from "@headlessui/vue"
|
||||
import { computed, ref, HTMLAttributes, useAttrs } from "vue"
|
||||
|
||||
export type Variant =
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "pending"
|
||||
| "danger"
|
||||
| "dark"
|
||||
| "outline-primary"
|
||||
| "outline-secondary"
|
||||
| "outline-success"
|
||||
| "outline-warning"
|
||||
| "outline-pending"
|
||||
| "outline-danger"
|
||||
| "outline-dark"
|
||||
| "soft-primary"
|
||||
| "soft-secondary"
|
||||
| "soft-success"
|
||||
| "soft-warning"
|
||||
| "soft-pending"
|
||||
| "soft-danger"
|
||||
| "soft-dark"
|
||||
|
||||
interface AlertProps extends /* @vue-ignore */ HTMLAttributes {
|
||||
as?: string | object
|
||||
dismissible?: boolean
|
||||
variant?: Variant
|
||||
onShow?: () => void
|
||||
onShown?: () => void
|
||||
onHide?: () => void
|
||||
onHidden?: () => void
|
||||
}
|
||||
|
||||
const { as, dismissible, variant } = withDefaults(defineProps<AlertProps>(), {
|
||||
as: "div",
|
||||
variant: "primary",
|
||||
dismissible: false,
|
||||
onShow: () => {},
|
||||
onShown: () => {},
|
||||
onHide: () => {},
|
||||
onHidden: () => {}
|
||||
})
|
||||
|
||||
const attrs = useAttrs()
|
||||
const show = ref<boolean>(true)
|
||||
|
||||
// Main Colors
|
||||
const primary = [
|
||||
"bg-primary border-primary text-white", // Default
|
||||
"dark:border-primary" // Dark
|
||||
]
|
||||
const secondary = [
|
||||
"bg-secondary/70 border-secondary/70 text-slate-500", // Default
|
||||
"dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300" // Dark mode
|
||||
]
|
||||
const success = [
|
||||
"bg-success border-success text-slate-900", // Default
|
||||
"dark:border-success" // Dark mode
|
||||
]
|
||||
const warning = [
|
||||
"bg-warning border-warning text-slate-900", // Default
|
||||
"dark:border-warning" // Dark mode
|
||||
]
|
||||
const pending = [
|
||||
"bg-pending border-pending text-white", // Default
|
||||
"dark:border-pending" // Dark mode
|
||||
]
|
||||
const danger = [
|
||||
"bg-danger border-danger text-white", // Default
|
||||
"dark:border-danger" // Dark mode
|
||||
]
|
||||
const dark = [
|
||||
"bg-dark border-dark text-white", // Default
|
||||
"dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300" // Dark mode
|
||||
]
|
||||
|
||||
// Outline
|
||||
const outlinePrimary = [
|
||||
"border-primary text-primary", // Default
|
||||
"dark:border-primary" // Dark mode
|
||||
]
|
||||
const outlineSecondary = [
|
||||
"border-secondary text-slate-500", // Default
|
||||
"dark:border-darkmode-100/40 dark:text-slate-300" // Dark mode
|
||||
]
|
||||
const outlineSuccess = [
|
||||
"border-success text-success dark:border-success", // Default
|
||||
"dark:border-success" // Dark mode
|
||||
]
|
||||
const outlineWarning = [
|
||||
"border-warning text-warning", // Default
|
||||
"dark:border-warning" // Dark mode
|
||||
]
|
||||
const outlinePending = [
|
||||
"border-pending text-pending", // Default
|
||||
"dark:border-pending" // Dark mode
|
||||
]
|
||||
const outlineDanger = [
|
||||
"border-danger text-danger", // Default
|
||||
"dark:border-danger" // Dark mode
|
||||
]
|
||||
const outlineDark = [
|
||||
"border-dark text-dark", // Default
|
||||
"dark:border-darkmode-800 dark:text-slate-300" // Dark mode
|
||||
]
|
||||
|
||||
// Soft Color
|
||||
const softPrimary = [
|
||||
"bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary", // Default
|
||||
"dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary" // Dark mode
|
||||
]
|
||||
const softSecondary = [
|
||||
"bg-slate-300 border-secondary bg-opacity-10 text-slate-500", // Default
|
||||
"dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300" // Dark mode
|
||||
]
|
||||
const softSuccess = [
|
||||
"bg-success border-success bg-opacity-20 border-opacity-5 text-success", // Default
|
||||
"dark:border-success dark:border-opacity-20" // Dark mode
|
||||
]
|
||||
const softWarning = [
|
||||
"bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning", // Default
|
||||
"dark:border-warning dark:border-opacity-20" // Dark mode
|
||||
]
|
||||
const softPending = [
|
||||
"bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending", // Default
|
||||
"dark:border-pending dark:border-opacity-20" // Dark mode
|
||||
]
|
||||
const softDanger = [
|
||||
"bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger", // Default
|
||||
"dark:text-white dark:border-danger dark:border-opacity-20" // Dark mode
|
||||
]
|
||||
const softDark = [
|
||||
"bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark", // Default
|
||||
"dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300" // Dark mode
|
||||
]
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
"relative border rounded-md px-5 py-4",
|
||||
variant === "primary" && primary,
|
||||
variant === "secondary" && secondary,
|
||||
variant === "success" && success,
|
||||
variant === "warning" && warning,
|
||||
variant === "pending" && pending,
|
||||
variant === "danger" && danger,
|
||||
variant === "dark" && dark,
|
||||
variant === "outline-primary" && outlinePrimary,
|
||||
variant === "outline-secondary" && outlineSecondary,
|
||||
variant === "outline-success" && outlineSuccess,
|
||||
variant === "outline-warning" && outlineWarning,
|
||||
variant === "outline-pending" && outlinePending,
|
||||
variant === "outline-danger" && outlineDanger,
|
||||
variant === "outline-dark" && outlineDark,
|
||||
variant === "soft-primary" && softPrimary,
|
||||
variant === "soft-secondary" && softSecondary,
|
||||
variant === "soft-success" && softSuccess,
|
||||
variant === "soft-warning" && softWarning,
|
||||
variant === "soft-pending" && softPending,
|
||||
variant === "soft-danger" && softDanger,
|
||||
variant === "soft-dark" && softDark,
|
||||
dismissible && "pl-5 pr-16",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="show"
|
||||
enter="transition-all ease-linear duration-150"
|
||||
enterFrom="invisible opacity-0 translate-y-1"
|
||||
enterTo="visible opacity-100 translate-y-0"
|
||||
leave="transition-all ease-linear duration-150"
|
||||
leaveFrom="visible opacity-100 translate-y-0"
|
||||
leaveTo="invisible opacity-0 translate-y-1"
|
||||
>
|
||||
<component :is="as" role="alert" :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot
|
||||
:dismiss="
|
||||
() => {
|
||||
show = false
|
||||
}
|
||||
"
|
||||
></slot>
|
||||
</component>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
31
gui/src/base-components/Alert/DismissButton.vue
Normal file
31
gui/src/base-components/Alert/DismissButton.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, ButtonHTMLAttributes, useAttrs } from "vue"
|
||||
|
||||
interface DismissButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
|
||||
as?: string | object
|
||||
}
|
||||
|
||||
const { as } = withDefaults(defineProps<DismissButtonProps>(), {
|
||||
as: "button"
|
||||
})
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge(["text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2", typeof attrs.class === "string" && attrs.class])
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="as" type="button" aria-label="Close" :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</component>
|
||||
</template>
|
||||
8
gui/src/base-components/Alert/index.ts
Normal file
8
gui/src/base-components/Alert/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import Alert from "./Alert.vue"
|
||||
import DismissButton from "./DismissButton.vue"
|
||||
|
||||
const AlertComponent = Object.assign({}, Alert, {
|
||||
DismissButton
|
||||
})
|
||||
|
||||
export default AlertComponent
|
||||
27
gui/src/base-components/Breadcrumb/Breadcrumb.vue
Normal file
27
gui/src/base-components/Breadcrumb/Breadcrumb.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { HTMLAttributes, useSlots, provide } from "vue"
|
||||
|
||||
export type ProvideBeradcrumb = {
|
||||
light?: boolean
|
||||
}
|
||||
|
||||
interface BreadcrumbProps extends /* @vue-ignore */ HTMLAttributes {
|
||||
light?: boolean
|
||||
}
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const { light } = defineProps<BreadcrumbProps>()
|
||||
|
||||
provide<ProvideBeradcrumb>("breadcrumb", {
|
||||
light
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex" aria-label="breadcrumb">
|
||||
<ol :class="['flex items-center text-primary dark:text-slate-300', { 'text-white/90': light }]">
|
||||
<component v-for="(item, key) in slots.default && slots.default()" :key="key" :is="item" :index="key" />
|
||||
</ol>
|
||||
</nav>
|
||||
</template>
|
||||
42
gui/src/base-components/Breadcrumb/Link.vue
Normal file
42
gui/src/base-components/Breadcrumb/Link.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLinkProps } from "vue-router"
|
||||
import { computed, LiHTMLAttributes, inject } from "vue"
|
||||
import { ProvideBeradcrumb } from "./Breadcrumb.vue"
|
||||
|
||||
interface LinkProps extends /* @vue-ignore */ LiHTMLAttributes {
|
||||
to?: RouterLinkProps["to"]
|
||||
active?: boolean
|
||||
index?: number
|
||||
}
|
||||
|
||||
const { to, active, index } = withDefaults(defineProps<LinkProps>(), {
|
||||
to: "",
|
||||
active: false,
|
||||
index: 0
|
||||
})
|
||||
|
||||
const breadcrumb = inject<ProvideBeradcrumb>("breadcrumb")
|
||||
|
||||
const computedClass = computed(() => [
|
||||
index > 0 && "relative ml-5 pl-0.5",
|
||||
breadcrumb &&
|
||||
!breadcrumb.light &&
|
||||
index > 0 &&
|
||||
"before:content-[''] before:w-[14px] before:h-[14px] before:bg-bredcrumb-chevron-dark before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
|
||||
breadcrumb &&
|
||||
breadcrumb.light &&
|
||||
index > 0 &&
|
||||
"before:content-[''] before:w-[14px] before:h-[14px] before:bg-bredcrumb-chevron-light before:bg-[length:100%] before:-ml-[1.125rem] before:absolute before:my-auto before:inset-y-0",
|
||||
index > 0 && "dark:before:bg-bredcrumb-chevron-darkmode",
|
||||
breadcrumb && !breadcrumb.light && active && "text-slate-800 cursor-text dark:text-slate-400",
|
||||
breadcrumb && breadcrumb.light && active && "text-white/70"
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li :class="computedClass">
|
||||
<RouterLink :to="to">
|
||||
<slot></slot>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</template>
|
||||
8
gui/src/base-components/Breadcrumb/index.ts
Normal file
8
gui/src/base-components/Breadcrumb/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import Breadcrumb from "./Breadcrumb.vue"
|
||||
import Link from "./Link.vue"
|
||||
|
||||
const BreadcrumbComponent = Object.assign({}, Breadcrumb, {
|
||||
Link
|
||||
})
|
||||
|
||||
export default BreadcrumbComponent
|
||||
230
gui/src/base-components/Button/Button.vue
Normal file
230
gui/src/base-components/Button/Button.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, ButtonHTMLAttributes, useAttrs } from "vue"
|
||||
|
||||
type Variant =
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "pending"
|
||||
| "danger"
|
||||
| "dark"
|
||||
| "outline-primary"
|
||||
| "outline-secondary"
|
||||
| "outline-success"
|
||||
| "outline-warning"
|
||||
| "outline-pending"
|
||||
| "outline-danger"
|
||||
| "outline-dark"
|
||||
| "soft-primary"
|
||||
| "soft-secondary"
|
||||
| "soft-success"
|
||||
| "soft-warning"
|
||||
| "soft-pending"
|
||||
| "soft-danger"
|
||||
| "soft-dark"
|
||||
| "facebook"
|
||||
| "twitter"
|
||||
| "instagram"
|
||||
| "linkedin"
|
||||
|
||||
type Elevated = boolean
|
||||
type Size = "sm" | "lg"
|
||||
type Rounded = boolean
|
||||
|
||||
interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
|
||||
as?: string | object
|
||||
variant?: Variant
|
||||
elevated?: Elevated
|
||||
size?: Size
|
||||
rounded?: Rounded
|
||||
}
|
||||
|
||||
const { as, size, variant, elevated, rounded } = withDefaults(defineProps<ButtonProps>(), {
|
||||
as: "button"
|
||||
})
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
// General Styles
|
||||
const generalStyles = [
|
||||
"transition duration-200 border uppercase shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md cursor-pointer", // Default
|
||||
"focus:ring-4 focus:ring-primary focus:ring-opacity-20", // On focus
|
||||
"focus-visible:outline-none", // On focus visible
|
||||
"dark:focus:ring-slate-700 dark:focus:ring-opacity-50", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90", // On hover and not disabled
|
||||
"[&:not(button)]:text-center", // Not a button element
|
||||
"disabled:opacity-70 disabled:cursor-not-allowed" // Disabled
|
||||
]
|
||||
|
||||
// Sizes
|
||||
const small = ["text-xs py-1.5 px-2"]
|
||||
const large = ["text-lg py-1.5 px-4"]
|
||||
|
||||
// Main Colors
|
||||
const primary = [
|
||||
"bg-primary border-primary text-white dark:border-primary" // Default
|
||||
]
|
||||
const secondary = [
|
||||
"bg-secondary/70 border-secondary/70 text-slate-500", // Default
|
||||
"dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-slate-100 [&:hover:not(:disabled)]:border-slate-100", // On hover and not disabled
|
||||
"[&:hover:not(:disabled)]:dark:border-darkmode-300/80 [&:hover:not(:disabled)]:dark:bg-darkmode-300/80" // On hover and not disabled in dark mode
|
||||
]
|
||||
const success = [
|
||||
"bg-success border-success text-slate-900", // Default
|
||||
"dark:border-success" // Dark mode
|
||||
]
|
||||
const warning = [
|
||||
"bg-warning border-warning text-slate-900", // Default
|
||||
"dark:border-warning" // Dark mode
|
||||
]
|
||||
const pending = [
|
||||
"bg-pending border-pending text-white", // Default
|
||||
"dark:border-pending" // Dark mode
|
||||
]
|
||||
const danger = [
|
||||
"bg-danger border-danger text-white", // Default
|
||||
"dark:border-danger" // Dark mode
|
||||
]
|
||||
const dark = [
|
||||
"bg-dark border-dark text-white", // Default
|
||||
"dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300", // Dark mode
|
||||
"[&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70" // On hover and not disabled in dark mode
|
||||
]
|
||||
|
||||
// Social Media
|
||||
const facebook = ["bg-[#3b5998] border-[#3b5998] text-white dark:border-[#3b5998]"]
|
||||
const twitter = ["bg-[#4ab3f4] border-[#4ab3f4] text-white dark:border-[#4ab3f4]"]
|
||||
const instagram = ["bg-[#517fa4] border-[#517fa4] text-white dark:border-[#517fa4]"]
|
||||
const linkedin = ["bg-[#0077b5] border-[#0077b5] text-white dark:border-[#0077b5]"]
|
||||
|
||||
// Outline
|
||||
const outlinePrimary = [
|
||||
"border-primary text-primary", // Default
|
||||
"dark:border-primary", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-primary/10" // On hover and not disabled
|
||||
]
|
||||
const outlineSecondary = [
|
||||
"border-secondary text-slate-500", // Default
|
||||
"dark:border-darkmode-100/40 dark:text-slate-300", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-secondary/20", // On hover and not disabled
|
||||
"[&:hover:not(:disabled)]:dark:bg-darkmode-100/10" // On hover and not disabled in dark mode
|
||||
]
|
||||
const outlineSuccess = [
|
||||
"border-success text-success", // Default
|
||||
"dark:border-success", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-success/10" // On hover and not disabled
|
||||
]
|
||||
const outlineWarning = [
|
||||
"border-warning text-warning", // Default
|
||||
"dark:border-warning", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-warning/10" // On hover and not disabled
|
||||
]
|
||||
const outlinePending = [
|
||||
"border-pending text-pending", // Default
|
||||
"dark:border-pending", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-pending/10" // On hover and not disabled
|
||||
]
|
||||
const outlineDanger = [
|
||||
"border-danger text-danger", // Default
|
||||
"dark:border-danger", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-danger/10" // On hover and not disabled
|
||||
]
|
||||
const outlineDark = [
|
||||
"border-dark text-dark", // Default
|
||||
"dark:border-darkmode-800 dark:text-slate-300", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-darkmode-800/30", // On hover and not disabled
|
||||
"[&:hover:not(:disabled)]:dark:bg-opacity-30" // On hover and not disabled in dark mode
|
||||
]
|
||||
|
||||
// Soft Color
|
||||
const softPrimary = [
|
||||
"bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary", // Default
|
||||
"dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
|
||||
"[&:hover:not(:disabled)]:dark:border-opacity-60" // On hover and not disabled in dark mode
|
||||
]
|
||||
const softSecondary = [
|
||||
"bg-slate-300 border-secondary bg-opacity-20 text-slate-500", // Default
|
||||
"dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10", // On hover and not disabled
|
||||
"[&:hover:not(:disabled)]:dark:bg-darkmode-100/10 [&:hover:not(:disabled)]:dark:border-darkmode-100/20" // On hover and not disabled in dark mode
|
||||
]
|
||||
const softSuccess = [
|
||||
"bg-success border-success bg-opacity-20 border-opacity-5 text-success", // Default
|
||||
"dark:border-success dark:border-opacity-20", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10" // On hover and not disabled
|
||||
]
|
||||
const softWarning = [
|
||||
"bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning", // Default
|
||||
"dark:border-warning dark:border-opacity-20", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10" // On hover and not disabled
|
||||
]
|
||||
const softPending = [
|
||||
"bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending", // Default
|
||||
"dark:border-pending dark:border-opacity-20", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10" // On hover and not disabled
|
||||
]
|
||||
const softDanger = [
|
||||
"bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger", // Default
|
||||
"dark:border-danger dark:border-opacity-20", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10" // On hover and not disabled
|
||||
]
|
||||
const softDark = [
|
||||
"bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark", // Default
|
||||
"dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300", // Dark mode
|
||||
"[&:hover:not(:disabled)]:bg-opacity-10 [&:hover:not(:disabled)]:border-opacity-10", // On hover and not disabled
|
||||
"[&:hover:not(:disabled)]:dark:bg-darkmode-800/50 [&:hover:not(:disabled)]:dark:border-darkmode-800" // On hover and not disabled in dark mode
|
||||
]
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
generalStyles,
|
||||
size === "sm" && small,
|
||||
size === "lg" && large,
|
||||
variant === "primary" && primary,
|
||||
variant === "secondary" && secondary,
|
||||
variant === "success" && success,
|
||||
variant === "warning" && warning,
|
||||
variant === "pending" && pending,
|
||||
variant === "danger" && danger,
|
||||
variant === "dark" && dark,
|
||||
variant === "outline-primary" && outlinePrimary,
|
||||
variant === "outline-secondary" && outlineSecondary,
|
||||
variant === "outline-success" && outlineSuccess,
|
||||
variant === "outline-warning" && outlineWarning,
|
||||
variant === "outline-pending" && outlinePending,
|
||||
variant === "outline-danger" && outlineDanger,
|
||||
variant === "outline-dark" && outlineDark,
|
||||
variant === "soft-primary" && softPrimary,
|
||||
variant === "soft-secondary" && softSecondary,
|
||||
variant === "soft-success" && softSuccess,
|
||||
variant === "soft-warning" && softWarning,
|
||||
variant === "soft-pending" && softPending,
|
||||
variant === "soft-danger" && softDanger,
|
||||
variant === "soft-dark" && softDark,
|
||||
variant === "facebook" && facebook,
|
||||
variant === "twitter" && twitter,
|
||||
variant === "instagram" && instagram,
|
||||
variant === "linkedin" && linkedin,
|
||||
rounded && "rounded-full",
|
||||
elevated && "shadow-md",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</component>
|
||||
</template>
|
||||
3
gui/src/base-components/Button/index.ts
Normal file
3
gui/src/base-components/Button/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import Button from "./Button.vue"
|
||||
|
||||
export default Button
|
||||
28
gui/src/base-components/Calendar/Draggable.vue
Normal file
28
gui/src/base-components/Calendar/Draggable.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { HTMLAttributes, ref, onMounted } from "vue"
|
||||
import { Draggable as FullCalendarDraggable } from "@fullcalendar/interaction"
|
||||
|
||||
interface DraggableProps extends /* @vue-ignore */ HTMLAttributes {
|
||||
options: FullCalendarDraggable["settings"]
|
||||
}
|
||||
|
||||
const props = defineProps<DraggableProps>()
|
||||
|
||||
const draggableRef = ref<HTMLDivElement>()
|
||||
|
||||
const init = () => {
|
||||
if (draggableRef.value) {
|
||||
new FullCalendarDraggable(draggableRef.value, props.options)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="draggableRef">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
3
gui/src/base-components/Calendar/index.ts
Normal file
3
gui/src/base-components/Calendar/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import Draggable from "./Draggable.vue"
|
||||
|
||||
export { Draggable }
|
||||
35
gui/src/base-components/Card/Card.vue
Normal file
35
gui/src/base-components/Card/Card.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<component :is="as" :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { computed, useAttrs } from "vue"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
interface CardProps {
|
||||
animate?: boolean
|
||||
as?: string
|
||||
}
|
||||
|
||||
const { animate } = withDefaults(defineProps<CardProps>(), {
|
||||
as: "div"
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
animate && "zoom-in",
|
||||
"relative p-5 box z-0",
|
||||
"before:-mt-2.5 before:absolute before:-z-10 before:content-[''] before:w-[90%] before:shadow-[0px_3px_5px_#0000000b] before:h-full before:rounded-md before:mx-auto before:inset-x-0 before:bg-card-color/70",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
</script>
|
||||
3
gui/src/base-components/Card/index.ts
Normal file
3
gui/src/base-components/Card/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import Card from "./Card.vue"
|
||||
|
||||
export default Card
|
||||
48
gui/src/base-components/Chart/ProgressBar.vue
Normal file
48
gui/src/base-components/Chart/ProgressBar.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="absolute text-3xl mt-5 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
{{ props.title ?? props.progressPercentage + "%" }}
|
||||
</div>
|
||||
<BaseChart type="doughnut" :height="props.height" :width="props.width" :data="data" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import BaseChart from "./index.vue"
|
||||
import { getColor } from "@/utils/colors.ts"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string
|
||||
progressPercentage?: number
|
||||
width?: number
|
||||
height?: number
|
||||
bgColor?: string
|
||||
}>(),
|
||||
{ progressPercentage: 0 }
|
||||
)
|
||||
|
||||
const data = computed(() => ({
|
||||
datasets: [
|
||||
{
|
||||
data: [props.progressPercentage, 100 - props.progressPercentage],
|
||||
borderWidth: 0,
|
||||
backgroundColor: [props.bgColor ?? getColor("warning", 0.8), "transparent"],
|
||||
tension: 0.4,
|
||||
cutout: "90%",
|
||||
rotation: 270,
|
||||
weight: 0.01,
|
||||
spacing: 1,
|
||||
circumference: 180,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
cutoutPercentage: 95
|
||||
}
|
||||
]
|
||||
}))
|
||||
</script>
|
||||
6
gui/src/base-components/Chart/index.ts
Normal file
6
gui/src/base-components/Chart/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import Chart from "./index.vue"
|
||||
import ProgressBar from "./ProgressBar.vue"
|
||||
export type { ProvideChart } from "./index.vue"
|
||||
|
||||
export default Chart
|
||||
export { ProgressBar }
|
||||
112
gui/src/base-components/Chart/index.vue
Normal file
112
gui/src/base-components/Chart/index.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{
|
||||
width: `${width}px`,
|
||||
height: `${height}px`
|
||||
}"
|
||||
>
|
||||
<canvas ref="chartRef" :class="$attrs.class"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ChartJs, { ChartConfiguration, ChartOptions } from "chart.js/auto"
|
||||
import { CanvasHTMLAttributes, ref, onMounted, inject, watch, computed } from "vue"
|
||||
|
||||
export interface ChartElement extends HTMLCanvasElement {
|
||||
instance: ChartJs
|
||||
}
|
||||
|
||||
export type ProvideChart = (el: ChartElement) => void
|
||||
|
||||
interface ChartProps extends /* @vue-ignore */ CanvasHTMLAttributes, /* @vue-ignore */ ChartConfiguration {
|
||||
width?: number
|
||||
height?: number
|
||||
type: ChartConfiguration["type"]
|
||||
data: ChartConfiguration["data"]
|
||||
options?: ChartConfiguration["options"]
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
const props = defineProps<ChartProps>()
|
||||
|
||||
const chartRef = ref<ChartElement>()
|
||||
|
||||
const init = (el: ChartElement, props: ChartProps) => {
|
||||
const canvas = el?.getContext("2d")
|
||||
if (canvas) {
|
||||
// Attach ChartJs instance
|
||||
el.instance = new ChartJs(canvas, {
|
||||
type: props.type,
|
||||
data: props.data,
|
||||
options: defaultOptions.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const bindInstance = (el: ChartElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideChart>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const defaultOptions = computed<ChartOptions>(() => {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
},
|
||||
...props.options
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
bindInstance(chartRef.value)
|
||||
init(chartRef.value, props)
|
||||
}
|
||||
|
||||
watch(props, () => {
|
||||
if (chartRef.value) {
|
||||
chartRef.value.instance.data = props.data
|
||||
if (props.options) {
|
||||
chartRef.value.instance.options = props.options
|
||||
}
|
||||
chartRef.value.instance.update()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
60
gui/src/base-components/Ckeditor/BalloonBlockEditor.vue
Normal file
60
gui/src/base-components/Ckeditor/BalloonBlockEditor.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import BalloonBlockEditor from "@ckeditor/ckeditor5-build-balloon-block"
|
||||
import { ref, onMounted, inject } from "vue"
|
||||
import { CkeditorElement, init } from "./ckeditor"
|
||||
|
||||
export type ProvideBalloonBlockEditor = (el: CkeditorElement) => void
|
||||
|
||||
interface CkeditorProps {
|
||||
modelValue: string
|
||||
// eslint-disable-next-line
|
||||
config?: any
|
||||
as?: string | object
|
||||
disabled?: boolean
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
interface CkeditorEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
// eslint-disable-next-line
|
||||
(e: "focus", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "blur", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "ready", editor: any): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CkeditorProps>(), {
|
||||
as: "div",
|
||||
config: () => ({})
|
||||
})
|
||||
|
||||
const emit = defineEmits<CkeditorEmit>()
|
||||
const editorRef = ref<CkeditorElement>()
|
||||
const cacheData = ref("")
|
||||
|
||||
const bindInstance = (el: CkeditorElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideBalloonBlockEditor>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const vEditorDirective = {
|
||||
mounted(el: CkeditorElement) {
|
||||
init(el, BalloonBlockEditor, { props, emit, cacheData })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
bindInstance(editorRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.as" ref="editorRef" v-editor-directive class="select"></component>
|
||||
</template>
|
||||
60
gui/src/base-components/Ckeditor/BalloonEditor.vue
Normal file
60
gui/src/base-components/Ckeditor/BalloonEditor.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import BalloonEditor from "@ckeditor/ckeditor5-build-balloon"
|
||||
import { ref, onMounted, inject } from "vue"
|
||||
import { CkeditorElement, init } from "./ckeditor"
|
||||
|
||||
export type ProvideBalloonEditor = (el: CkeditorElement) => void
|
||||
|
||||
interface CkeditorProps {
|
||||
modelValue: string
|
||||
// eslint-disable-next-line
|
||||
config?: any
|
||||
as?: string | object
|
||||
disabled?: boolean
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
interface CkeditorEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
// eslint-disable-next-line
|
||||
(e: "focus", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "blur", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "ready", editor: any): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CkeditorProps>(), {
|
||||
as: "div",
|
||||
config: () => ({})
|
||||
})
|
||||
|
||||
const emit = defineEmits<CkeditorEmit>()
|
||||
const editorRef = ref<CkeditorElement>()
|
||||
const cacheData = ref("")
|
||||
|
||||
const bindInstance = (el: CkeditorElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideBalloonEditor>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const vEditorDirective = {
|
||||
mounted(el: CkeditorElement) {
|
||||
init(el, BalloonEditor, { props, emit, cacheData })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
bindInstance(editorRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.as" ref="editorRef" v-editor-directive class="select"></component>
|
||||
</template>
|
||||
60
gui/src/base-components/Ckeditor/ClassicEditor.vue
Normal file
60
gui/src/base-components/Ckeditor/ClassicEditor.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
|
||||
import { ref, onMounted, inject } from "vue"
|
||||
import { CkeditorElement, init } from "./ckeditor"
|
||||
|
||||
export type ProvideClassicEditor = (el: CkeditorElement) => void
|
||||
|
||||
interface CkeditorProps {
|
||||
modelValue: string
|
||||
// eslint-disable-next-line
|
||||
config?: any
|
||||
as?: string | object
|
||||
disabled?: boolean
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
interface CkeditorEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
// eslint-disable-next-line
|
||||
(e: "focus", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "blur", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "ready", editor: any): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CkeditorProps>(), {
|
||||
as: "div",
|
||||
config: () => ({})
|
||||
})
|
||||
|
||||
const emit = defineEmits<CkeditorEmit>()
|
||||
const editorRef = ref<CkeditorElement>()
|
||||
const cacheData = ref("")
|
||||
|
||||
const bindInstance = (el: CkeditorElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideClassicEditor>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const vEditorDirective = {
|
||||
mounted(el: CkeditorElement) {
|
||||
init(el, ClassicEditor, { props, emit, cacheData })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
bindInstance(editorRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.as" ref="editorRef" v-editor-directive class="select"></component>
|
||||
</template>
|
||||
61
gui/src/base-components/Ckeditor/DocumentEditor.vue
Normal file
61
gui/src/base-components/Ckeditor/DocumentEditor.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import DocumentEditor from "@ckeditor/ckeditor5-build-decoupled-document"
|
||||
import { ref, onMounted, inject } from "vue"
|
||||
import { CkeditorElement, init } from "./ckeditor"
|
||||
|
||||
export type ProvideDocumentEditor = (el: CkeditorElement) => void
|
||||
|
||||
interface CkeditorProps {
|
||||
modelValue: string
|
||||
// eslint-disable-next-line
|
||||
config?: any
|
||||
as?: string | object
|
||||
disabled?: boolean
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
interface CkeditorEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
// eslint-disable-next-line
|
||||
(e: "focus", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "blur", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "ready", editor: any): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CkeditorProps>(), {
|
||||
as: "div",
|
||||
config: () => ({})
|
||||
})
|
||||
|
||||
const emit = defineEmits<CkeditorEmit>()
|
||||
const editorRef = ref<CkeditorElement>()
|
||||
const cacheData = ref("")
|
||||
|
||||
const bindInstance = (el: CkeditorElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideDocumentEditor>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const vEditorDirective = {
|
||||
mounted(el: CkeditorElement) {
|
||||
// @ts-ignore
|
||||
init(el, DocumentEditor, { props, emit, cacheData })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
bindInstance(editorRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.as" ref="editorRef" v-editor-directive class="select"></component>
|
||||
</template>
|
||||
60
gui/src/base-components/Ckeditor/InlineEditor.vue
Normal file
60
gui/src/base-components/Ckeditor/InlineEditor.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import InlineEditor from "@ckeditor/ckeditor5-build-inline"
|
||||
import { ref, onMounted, inject } from "vue"
|
||||
import { CkeditorElement, init } from "./ckeditor"
|
||||
|
||||
export type ProvideInlineEditor = (el: CkeditorElement) => void
|
||||
|
||||
interface CkeditorProps {
|
||||
modelValue: string
|
||||
// eslint-disable-next-line
|
||||
config?: any
|
||||
as?: string | object
|
||||
disabled?: boolean
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
interface CkeditorEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
// eslint-disable-next-line
|
||||
(e: "focus", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "blur", value: string, editor: any): void
|
||||
// eslint-disable-next-line
|
||||
(e: "ready", editor: any): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CkeditorProps>(), {
|
||||
as: "div",
|
||||
config: () => ({})
|
||||
})
|
||||
|
||||
const emit = defineEmits<CkeditorEmit>()
|
||||
const editorRef = ref<CkeditorElement>()
|
||||
const cacheData = ref("")
|
||||
|
||||
const bindInstance = (el: CkeditorElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideInlineEditor>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const vEditorDirective = {
|
||||
mounted(el: CkeditorElement) {
|
||||
init(el, InlineEditor, { props, emit, cacheData })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
bindInstance(editorRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.as" ref="editorRef" v-editor-directive class="select"></component>
|
||||
</template>
|
||||
86
gui/src/base-components/Ckeditor/ckeditor.ts
Normal file
86
gui/src/base-components/Ckeditor/ckeditor.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import { Ref, UnwrapRef } from "vue"
|
||||
|
||||
export interface CkeditorElement extends HTMLDivElement {
|
||||
CKEditor: unknown
|
||||
}
|
||||
|
||||
export type CkeditorProps = {
|
||||
modelValue: string
|
||||
config: { initialData: string }
|
||||
disabled?: boolean
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
export type CkeditorEmit = {
|
||||
(e: "update:modelValue", value: string): void
|
||||
(e: "focus", value: string, editor: unknown): void
|
||||
(e: "blur", value: string, editor: unknown): void
|
||||
(e: "ready", editor: unknown): void
|
||||
}
|
||||
|
||||
const init = async (
|
||||
el: CkeditorElement,
|
||||
editorBuild: unknown,
|
||||
{
|
||||
props,
|
||||
emit,
|
||||
cacheData
|
||||
}: {
|
||||
props: CkeditorProps
|
||||
emit: CkeditorEmit
|
||||
cacheData: Ref<UnwrapRef<string>>
|
||||
}
|
||||
) => {
|
||||
// Initial data
|
||||
cacheData.value = props.modelValue
|
||||
props.config.initialData = props.modelValue
|
||||
|
||||
// Init CKEditor
|
||||
// @ts-ignore
|
||||
const editor = await editorBuild.create(el, props.config)
|
||||
|
||||
// Attach CKEditor instance
|
||||
el.CKEditor = editor
|
||||
|
||||
// Set initial disabled state
|
||||
props.disabled && editor.enableReadOnlyMode("ckeditor")
|
||||
|
||||
// Set on change event
|
||||
editor.model.document.on("change:data", () => {
|
||||
const data = editor.getData()
|
||||
cacheData.value = data
|
||||
emit("update:modelValue", data)
|
||||
})
|
||||
|
||||
// Set on focus event
|
||||
editor.editing.view.document.on("focus", (evt: string) => {
|
||||
emit("focus", evt, editor)
|
||||
})
|
||||
|
||||
// Set on blur event
|
||||
editor.editing.view.document.on("blur", (evt: string) => {
|
||||
emit("blur", evt, editor)
|
||||
})
|
||||
|
||||
// Set on ready event
|
||||
emit("ready", editor)
|
||||
}
|
||||
|
||||
// Watch model change
|
||||
const updateData = (
|
||||
el: CkeditorElement,
|
||||
{
|
||||
props,
|
||||
cacheData
|
||||
}: {
|
||||
props: CkeditorProps
|
||||
cacheData: Ref<UnwrapRef<string>>
|
||||
}
|
||||
) => {
|
||||
if (cacheData.value !== props.modelValue) {
|
||||
// @ts-ignore
|
||||
el.CKEditor.setData(props.modelValue)
|
||||
}
|
||||
}
|
||||
|
||||
export { init, updateData }
|
||||
13
gui/src/base-components/Ckeditor/index.ts
Normal file
13
gui/src/base-components/Ckeditor/index.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import BalloonBlockEditor from "./BalloonBlockEditor.vue"
|
||||
import BalloonEditor from "./BalloonEditor.vue"
|
||||
import ClassicEditor from "./ClassicEditor.vue"
|
||||
import DocumentEditor from "./DocumentEditor.vue"
|
||||
import InlineEditor from "./InlineEditor.vue"
|
||||
|
||||
export type { ProvideBalloonBlockEditor } from "./BalloonBlockEditor.vue"
|
||||
export type { ProvideBalloonEditor } from "./BalloonEditor.vue"
|
||||
export type { ProvideClassicEditor } from "./ClassicEditor.vue"
|
||||
export type { ProvideDocumentEditor } from "./DocumentEditor.vue"
|
||||
export type { ProvideInlineEditor } from "./InlineEditor.vue"
|
||||
|
||||
export { BalloonBlockEditor, BalloonEditor, ClassicEditor, DocumentEditor, InlineEditor }
|
||||
53
gui/src/base-components/Dropzone/Dropzone.vue
Normal file
53
gui/src/base-components/Dropzone/Dropzone.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { HTMLAttributes, ref, inject, onMounted } from "vue"
|
||||
import DropzoneJs, { DropzoneOptions } from "dropzone"
|
||||
import { init } from "./dropzone"
|
||||
|
||||
export type ProvideDropzone = (el: DropzoneElement) => void
|
||||
|
||||
export interface DropzoneElement extends HTMLDivElement {
|
||||
dropzone: DropzoneJs
|
||||
}
|
||||
|
||||
interface DropzoneProps extends /* @vue-ignore */ HTMLAttributes {
|
||||
options: DropzoneOptions
|
||||
refKey?: string
|
||||
}
|
||||
|
||||
const props = defineProps<DropzoneProps>()
|
||||
|
||||
const fileUploadRef = ref<DropzoneElement>()
|
||||
|
||||
const bindInstance = (el: DropzoneElement) => {
|
||||
if (props.refKey) {
|
||||
const bind = inject<ProvideDropzone>(`bind[${props.refKey}]`)
|
||||
if (bind) {
|
||||
bind(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const vFileUploadDirective = {
|
||||
mounted(el: DropzoneElement) {
|
||||
init(el, props)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (fileUploadRef.value) {
|
||||
bindInstance(fileUploadRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="fileUploadRef"
|
||||
v-file-upload-directive
|
||||
class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-darkmode-200/60 [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5"
|
||||
>
|
||||
<div class="dz-message">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
17
gui/src/base-components/Dropzone/dropzone.ts
Normal file
17
gui/src/base-components/Dropzone/dropzone.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import Dropzone, { DropzoneOptions } from "dropzone"
|
||||
import { DropzoneElement } from "./Dropzone.vue"
|
||||
|
||||
const init = (
|
||||
el: DropzoneElement,
|
||||
props: {
|
||||
options: DropzoneOptions
|
||||
refKey?: string
|
||||
}
|
||||
) => {
|
||||
Dropzone.autoDiscover = false
|
||||
if (!el.dropzone) {
|
||||
el.dropzone = new Dropzone(el, props.options)
|
||||
}
|
||||
}
|
||||
|
||||
export { init }
|
||||
5
gui/src/base-components/Dropzone/index.ts
Normal file
5
gui/src/base-components/Dropzone/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import Dropzone from "./Dropzone.vue"
|
||||
|
||||
export type { ProvideDropzone, DropzoneElement } from "./Dropzone.vue"
|
||||
|
||||
export default Dropzone
|
||||
63
gui/src/base-components/ExpandTransition/index.vue
Normal file
63
gui/src/base-components/ExpandTransition/index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<transition name="expand" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @leave="leave">
|
||||
<slot></slot>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ExpandTransition",
|
||||
methods: {
|
||||
beforeEnter(element) {
|
||||
element.style.position = "absolute"
|
||||
element.style.visibility = "hidden"
|
||||
element.style.height = "auto"
|
||||
},
|
||||
|
||||
enter(element) {
|
||||
const height = getComputedStyle(element).height
|
||||
element.style.position = null
|
||||
element.style.visibility = null
|
||||
element.style.height = 0
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = height
|
||||
})
|
||||
},
|
||||
|
||||
afterEnter(element) {
|
||||
element.style.height = "auto"
|
||||
},
|
||||
|
||||
leave(element) {
|
||||
element.style.height = getComputedStyle(element).height
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
overflow: hidden;
|
||||
transition:
|
||||
height 1s ease-in-out,
|
||||
opacity 1s ease-in-out;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.expand-enter-from,
|
||||
.expand-leave-to {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.expand-enter-to,
|
||||
.expand-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
44
gui/src/base-components/FileIcon/FileIcon.vue
Normal file
44
gui/src/base-components/FileIcon/FileIcon.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { HTMLAttributes } from "vue"
|
||||
|
||||
type Variant = "empty-directory" | "directory" | "file" | "image"
|
||||
|
||||
interface FileIconProps extends /* @vue-ignore */ HTMLAttributes {
|
||||
variant: Variant
|
||||
type?: string
|
||||
src?: string
|
||||
}
|
||||
|
||||
function getSVG(variant: string) {
|
||||
if (variant === "empty-directory") {
|
||||
return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_2' data-name='Group 2' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='786' height='721' rx='40' transform='translate(567 158)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")"
|
||||
} else if (variant === "directory") {
|
||||
return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='786' height='786' viewBox='0 0 786 786'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(-567 -93)'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='418' height='681' rx='40' transform='translate(896 109)' fill='%2395a5b9'/%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='433' height='681' rx='40' transform='translate(606 93)' fill='%23a0aec0'/%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='742' height='734' rx='40' transform='translate(590 145)' fill='%23bec8d9'/%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='786' height='692' rx='40' transform='translate(567 187)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A\")"
|
||||
} else if (variant === "file") {
|
||||
return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='628.027' height='786.012' viewBox='0 0 628.027 786.012'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%238a97ac'/%3E%3Cstop offset='1' stop-color='%235d6c83'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(-646 -92.988)'%3E%3Cpath id='Union_2' data-name='Union 2' d='M40,786A40,40,0,0,1,0,746V40A40,40,0,0,1,40,0H501V103h29v24h98V746a40,40,0,0,1-40,40Z' transform='translate(646 93)' fill='url(%23linear-gradient)'/%3E%3Cpath id='Intersection_2' data-name='Intersection 2' d='M.409,162.042l.058-109.9c31.605,29.739,125.37,125.377,125.37,125.377l-109.976.049A20.025,20.025,0,0,1,.409,162.042Z' transform='translate(1147 42)' fill='%23bec8d9' stroke='%23bec8d9' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A\")"
|
||||
}
|
||||
}
|
||||
|
||||
const { variant, type, src } = defineProps<FileIconProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:style="{
|
||||
backgroundImage: getSVG(variant)
|
||||
}"
|
||||
class="relative block bg-center bg-no-repeat bg-contain before:content-[''] before:pt-[100%] before:w-full before:block"
|
||||
>
|
||||
<div
|
||||
v-if="variant === 'file'"
|
||||
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center m-auto text-white"
|
||||
>
|
||||
{{ type }}
|
||||
</div>
|
||||
<div v-if="variant === 'image'" class="absolute top-0 left-0 w-full h-full image-fit">
|
||||
<img class="rounded-md" alt="Midone Tailwind HTML Admin Template" :src="src" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
3
gui/src/base-components/FileIcon/index.ts
Normal file
3
gui/src/base-components/FileIcon/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import FileIcon from "./FileIcon.vue"
|
||||
|
||||
export default FileIcon
|
||||
20
gui/src/base-components/Form/FormCheck/FormCheck.vue
Normal file
20
gui/src/base-components/Form/FormCheck/FormCheck.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs } from "vue"
|
||||
|
||||
const attrs = useAttrs()
|
||||
const computedClass = computed(() => twMerge(["flex items-center", typeof attrs.class === "string" && attrs.class]))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
66
gui/src/base-components/Form/FormCheck/Input.vue
Normal file
66
gui/src/base-components/Form/FormCheck/Input.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, InputHTMLAttributes, useAttrs } from "vue"
|
||||
|
||||
interface InputProps extends /* @vue-ignore */ InputHTMLAttributes {
|
||||
modelValue?: InputHTMLAttributes["value"]
|
||||
type: "radio" | "checkbox"
|
||||
}
|
||||
|
||||
interface InputEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<InputProps>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
// Default
|
||||
"transition-all duration-100 ease-in-out",
|
||||
|
||||
// Input type radio
|
||||
props.type === "radio" &&
|
||||
"shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",
|
||||
|
||||
// Input type checkbox
|
||||
props.type === "checkbox" &&
|
||||
"shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",
|
||||
|
||||
// On checked
|
||||
"[&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10",
|
||||
"[&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10",
|
||||
|
||||
// On checked and not disabled
|
||||
"[&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50",
|
||||
|
||||
// On checked and disabled
|
||||
"[&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50",
|
||||
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
|
||||
const emit = defineEmits<InputEmit>()
|
||||
|
||||
const localValue = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(newValue) {
|
||||
emit("update:modelValue", newValue)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input :class="computedClass" :type="props.type" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
|
||||
</template>
|
||||
20
gui/src/base-components/Form/FormCheck/Label.vue
Normal file
20
gui/src/base-components/Form/FormCheck/Label.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs } from "vue"
|
||||
|
||||
const attrs = useAttrs()
|
||||
const computedClass = computed(() => twMerge(["cursor-pointer ml-2", typeof attrs.class === "string" && attrs.class]))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</label>
|
||||
</template>
|
||||
10
gui/src/base-components/Form/FormCheck/index.ts
Normal file
10
gui/src/base-components/Form/FormCheck/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import FormCheck from "./FormCheck.vue"
|
||||
import Input from "./Input.vue"
|
||||
import Label from "./Label.vue"
|
||||
|
||||
const FormCheckComponent = Object.assign({}, FormCheck, {
|
||||
Input,
|
||||
Label
|
||||
})
|
||||
|
||||
export default FormCheckComponent
|
||||
22
gui/src/base-components/Form/FormHelp.vue
Normal file
22
gui/src/base-components/Form/FormHelp.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs } from "vue"
|
||||
|
||||
const attrs = useAttrs()
|
||||
const computedClass = computed(() =>
|
||||
twMerge(["text-xs text-slate-500 mt-2", typeof attrs.class === "string" && attrs.class])
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
26
gui/src/base-components/Form/FormInline.vue
Normal file
26
gui/src/base-components/Form/FormInline.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs, provide } from "vue"
|
||||
|
||||
export type ProvideFormInline = boolean
|
||||
|
||||
const attrs = useAttrs()
|
||||
const computedClass = computed(() =>
|
||||
twMerge(["block sm:flex items-center", typeof attrs.class === "string" && attrs.class])
|
||||
)
|
||||
|
||||
provide<ProvideFormInline>("formInline", true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
57
gui/src/base-components/Form/FormInput.vue
Normal file
57
gui/src/base-components/Form/FormInput.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<input :class="computedClass" :type="props.type" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, InputHTMLAttributes, useAttrs, inject } from "vue"
|
||||
import { ProvideFormInline } from "./FormInline.vue"
|
||||
import { ProvideInputGroup } from "./InputGroup/InputGroup.vue"
|
||||
|
||||
interface FormInputProps extends /* @vue-ignore */ InputHTMLAttributes {
|
||||
value?: InputHTMLAttributes["value"]
|
||||
modelValue?: InputHTMLAttributes["value"]
|
||||
formInputSize?: "sm" | "lg"
|
||||
rounded?: boolean
|
||||
}
|
||||
|
||||
interface FormInputEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<FormInputProps>()
|
||||
const attrs = useAttrs()
|
||||
const formInline = inject<ProvideFormInline>("formInline", false)
|
||||
const inputGroup = inject<ProvideInputGroup>("inputGroup", false)
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
"disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent",
|
||||
"[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent",
|
||||
"transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",
|
||||
props.formInputSize === "sm" && "text-xs py-1.5 px-2",
|
||||
props.formInputSize === "lg" && "text-lg py-1.5 px-4",
|
||||
props.rounded && "rounded-full",
|
||||
formInline && "flex-1",
|
||||
inputGroup && "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
|
||||
const emit = defineEmits<FormInputEmit>()
|
||||
|
||||
const localValue = computed({
|
||||
get() {
|
||||
return props.modelValue === undefined ? props.value : props.modelValue
|
||||
},
|
||||
set(newValue) {
|
||||
emit("update:modelValue", newValue)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
30
gui/src/base-components/Form/FormLabel.vue
Normal file
30
gui/src/base-components/Form/FormLabel.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs, inject } from "vue"
|
||||
import { ProvideFormInline } from "./FormInline.vue"
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const formInline = inject<ProvideFormInline>("formInline", false)
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
"inline-block mb-2",
|
||||
formInline && "mb-2 sm:mb-0 sm:mr-5 sm:text-right",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</label>
|
||||
</template>
|
||||
64
gui/src/base-components/Form/FormSelect.vue
Normal file
64
gui/src/base-components/Form/FormSelect.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, SelectHTMLAttributes, useAttrs, inject, ref } from "vue"
|
||||
import { ProvideFormInline } from "./FormInline.vue"
|
||||
|
||||
interface FormSelectProps extends /* @vue-ignore */ SelectHTMLAttributes {
|
||||
value?: SelectHTMLAttributes["value"]
|
||||
modelValue?: SelectHTMLAttributes["value"]
|
||||
formSelectSize?: "sm" | "lg"
|
||||
}
|
||||
|
||||
interface FormSelectEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
}
|
||||
|
||||
const selectRef = ref<HTMLSelectElement>()
|
||||
const props = defineProps<FormSelectProps>()
|
||||
const attrs = useAttrs()
|
||||
const formInline = inject<ProvideFormInline>("formInline", false)
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
"disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50",
|
||||
"[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50",
|
||||
"transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50",
|
||||
props.formSelectSize === "sm" && "text-xs py-1.5 pl-2 pr-8",
|
||||
props.formSelectSize === "lg" && "text-lg py-1.5 pl-4 pr-8",
|
||||
formInline && "flex-1",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
|
||||
const emit = defineEmits<FormSelectEmit>()
|
||||
|
||||
const localValue = computed({
|
||||
get() {
|
||||
if (props.modelValue === undefined && props.value === undefined) {
|
||||
const firstOption = selectRef.value?.querySelectorAll("option")[0]
|
||||
return (
|
||||
firstOption !== undefined &&
|
||||
(firstOption.getAttribute("value") !== null ? firstOption.getAttribute("value") : firstOption.text)
|
||||
)
|
||||
}
|
||||
|
||||
return props.modelValue === undefined ? props.value : props.modelValue
|
||||
},
|
||||
set(newValue) {
|
||||
emit("update:modelValue", newValue)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<select ref="selectRef" :class="computedClass" v-bind="_.omit(attrs, 'class')" v-model="localValue">
|
||||
<slot></slot>
|
||||
</select>
|
||||
</template>
|
||||
9
gui/src/base-components/Form/FormSwitch/FormSwitch.vue
Normal file
9
gui/src/base-components/Form/FormSwitch/FormSwitch.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import FormCheck from "../FormCheck"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormCheck>
|
||||
<slot></slot>
|
||||
</FormCheck>
|
||||
</template>
|
||||
55
gui/src/base-components/Form/FormSwitch/Input.vue
Normal file
55
gui/src/base-components/Form/FormSwitch/Input.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, InputHTMLAttributes, useAttrs } from "vue"
|
||||
import FormCheck from "../FormCheck"
|
||||
|
||||
interface InputProps extends /* @vue-ignore */ InputHTMLAttributes {
|
||||
value?: InputHTMLAttributes["value"]
|
||||
modelValue?: InputHTMLAttributes["value"]
|
||||
type: "checkbox"
|
||||
}
|
||||
|
||||
interface InputEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<InputProps>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
// Default
|
||||
"w-[38px] h-[24px] p-px rounded-full relative",
|
||||
"before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600",
|
||||
|
||||
// On checked
|
||||
"checked:bg-primary checked:border-primary checked:bg-none",
|
||||
"before:checked:ml-[14px] before:checked:bg-white",
|
||||
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
|
||||
const emit = defineEmits<InputEmit>()
|
||||
|
||||
const localValue = computed({
|
||||
get() {
|
||||
return props.modelValue === undefined ? props.value : props.modelValue
|
||||
},
|
||||
set(newValue) {
|
||||
emit("update:modelValue", newValue)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormCheck.Input :type="props.type" :class="computedClass" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
|
||||
</template>
|
||||
9
gui/src/base-components/Form/FormSwitch/Label.vue
Normal file
9
gui/src/base-components/Form/FormSwitch/Label.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import FormCheck from "../FormCheck"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormCheck.Label>
|
||||
<slot></slot>
|
||||
</FormCheck.Label>
|
||||
</template>
|
||||
10
gui/src/base-components/Form/FormSwitch/index.ts
Normal file
10
gui/src/base-components/Form/FormSwitch/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import FormSwitch from "./FormSwitch.vue"
|
||||
import Input from "./Input.vue"
|
||||
import Label from "./Label.vue"
|
||||
|
||||
const FormSwitchComponent = Object.assign({}, FormSwitch, {
|
||||
Input,
|
||||
Label
|
||||
})
|
||||
|
||||
export default FormSwitchComponent
|
||||
58
gui/src/base-components/Form/FormTextarea.vue
Normal file
58
gui/src/base-components/Form/FormTextarea.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, InputHTMLAttributes, useAttrs, inject } from "vue"
|
||||
import { ProvideFormInline } from "./FormInline.vue"
|
||||
import { ProvideInputGroup } from "./InputGroup/InputGroup.vue"
|
||||
|
||||
interface FormTextareaProps extends /* @vue-ignore */ InputHTMLAttributes {
|
||||
value?: InputHTMLAttributes["value"]
|
||||
modelValue?: InputHTMLAttributes["value"]
|
||||
formTextareaSize?: "sm" | "lg"
|
||||
rounded?: boolean
|
||||
}
|
||||
|
||||
interface FormTextareaEmit {
|
||||
(e: "update:modelValue", value: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<FormTextareaProps>()
|
||||
const attrs = useAttrs()
|
||||
const formInline = inject<ProvideFormInline>("formInline", false)
|
||||
const inputGroup = inject<ProvideInputGroup>("inputGroup", false)
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
"disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent",
|
||||
"[&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent",
|
||||
"transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80",
|
||||
props.formTextareaSize === "sm" && "text-xs py-1.5 px-2",
|
||||
props.formTextareaSize === "lg" && "text-lg py-1.5 px-4",
|
||||
props.rounded && "rounded-full",
|
||||
formInline && "flex-1",
|
||||
inputGroup && "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r z-10",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
|
||||
const emit = defineEmits<FormTextareaEmit>()
|
||||
|
||||
const localValue = computed({
|
||||
get() {
|
||||
return props.modelValue === undefined ? props.value : props.modelValue
|
||||
},
|
||||
set(newValue) {
|
||||
emit("update:modelValue", newValue)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<textarea :type="props.type" :class="computedClass" v-bind="_.omit(attrs, 'class')" v-model="localValue" />
|
||||
</template>
|
||||
24
gui/src/base-components/Form/InputGroup/InputGroup.vue
Normal file
24
gui/src/base-components/Form/InputGroup/InputGroup.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs, provide } from "vue"
|
||||
|
||||
export type ProvideInputGroup = boolean
|
||||
|
||||
const attrs = useAttrs()
|
||||
const computedClass = computed(() => twMerge(["flex", typeof attrs.class === "string" && attrs.class]))
|
||||
|
||||
provide<ProvideInputGroup>("inputGroup", true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
30
gui/src/base-components/Form/InputGroup/Text.vue
Normal file
30
gui/src/base-components/Form/InputGroup/Text.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from "lodash"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { computed, useAttrs, inject } from "vue"
|
||||
import { ProvideInputGroup } from "../InputGroup/InputGroup.vue"
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const inputGroup = inject<ProvideInputGroup>("inputGroup")
|
||||
|
||||
const computedClass = computed(() =>
|
||||
twMerge([
|
||||
"py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400",
|
||||
inputGroup && "rounded-none [&:not(:first-child)]:border-l-transparent first:rounded-l last:rounded-r",
|
||||
typeof attrs.class === "string" && attrs.class
|
||||
])
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="computedClass" v-bind="_.omit(attrs, 'class')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
8
gui/src/base-components/Form/InputGroup/index.ts
Normal file
8
gui/src/base-components/Form/InputGroup/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import InputGroup from "./InputGroup.vue"
|
||||
import Text from "./Text.vue"
|
||||
|
||||
const InputGroupComponent = Object.assign({}, InputGroup, {
|
||||
Text
|
||||
})
|
||||
|
||||
export default InputGroupComponent
|
||||
11
gui/src/base-components/Form/index.ts
Normal file
11
gui/src/base-components/Form/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import FormCheck from "./FormCheck"
|
||||
import FormInput from "./FormInput.vue"
|
||||
import FormTextarea from "./FormTextarea.vue"
|
||||
import FormHelp from "./FormHelp.vue"
|
||||
import FormInline from "./FormInline.vue"
|
||||
import FormLabel from "./FormLabel.vue"
|
||||
import FormSelect from "./FormSelect.vue"
|
||||
import FormSwitch from "./FormSwitch"
|
||||
import InputGroup from "./InputGroup"
|
||||
|
||||
export { FormCheck, FormInput, FormTextarea, FormHelp, FormInline, FormLabel, FormSelect, FormSwitch, InputGroup }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user