mirror of
https://github.com/vatesfr/xen-orchestra.git
synced 2026-09-10 22:14:48 -05:00
feat(lite): introducing @xen-orchestra/web-core (#7302)
This PR introduces `@xen-orchestra/web-core`, which will be the common base for
XO Lite and XO 6.
This package is not meant to be distributed and will be used as-is in other
packages thanks to Yarn Workspace. This mean that the files of XO Web Core will
not be built by themselves but by either the package which use it.
Styles have been moved from XO Lite to XO Web Core.
Colors variable have been renamed and updated according to the new Design
System. XO Lite has been updated accordingly.
- `extra-blue` → `purple`
- `green-infra` → `green`
- `orange-world` → `orange`
- `red-vates` → `red`
- `blue-scale` → `grey`
⚠️ A new intermediate shade has been introduced (`--color-grey-400`). So
`--color-blue-scale-400` is now `--color-grey-500` and `--color-blue-scale-500`
is now `--color-grey-600`.
PostCSS color function plugin is used to generate the shades of color like it is
done on the Figma mockup (with blending the base color with black or white at
different degrees).
PostCSS custom media are now loaded globally thanks to a plugin and no longer
require to import `_responsive.pcss` file manually in each file where a custom
media was needed.
This commit is contained in:
Thierry Goettelmann
committed by
GitHub
GitHub
parent
71f3be288b
commit
5242affdc1
@@ -48,7 +48,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['@xen-orchestra/lite/**/*.{vue,ts}'],
|
||||
files: ['@xen-orchestra/{web-core,lite,web}/**/*.{vue,ts}'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>XO Lite</title>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"type-check": "vue-tsc --build --force tsconfig.type-check.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@csstools/postcss-global-data": "^2.1.1",
|
||||
"@fontsource/poppins": "^5.0.8",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
@@ -22,7 +23,6 @@
|
||||
"@intlify/unplugin-vue-i18n": "^2.0.0",
|
||||
"@novnc/novnc": "^1.4.0",
|
||||
"@tsconfig/node18": "^18.2.2",
|
||||
"strip-json-comments": "^5.0.1",
|
||||
"@types/d3-time-format": "^4.0.3",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
@@ -32,6 +32,7 @@
|
||||
"@vueuse/core": "^10.7.1",
|
||||
"@vueuse/math": "^10.7.1",
|
||||
"@vueuse/shared": "^10.7.1",
|
||||
"@xen-orchestra/web-core": "*",
|
||||
"complex-matcher": "^0.7.1",
|
||||
"d3-time-format": "^4.1.0",
|
||||
"decorator-synchronized": "^0.6.0",
|
||||
@@ -51,6 +52,7 @@
|
||||
"pinia": "^2.1.7",
|
||||
"placement.js": "^1.0.0-beta.5",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-color-function": "^4.1.0",
|
||||
"postcss-custom-media": "^10.0.2",
|
||||
"postcss-nested": "^6.0.1",
|
||||
"typescript": "^5.3.3",
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'@csstools/postcss-global-data': {
|
||||
files: ['../web-core/lib/assets/css/.globals.pcss'],
|
||||
},
|
||||
'postcss-nested': {},
|
||||
'postcss-custom-media': {},
|
||||
'postcss-color-function': {},
|
||||
},
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -16,7 +16,6 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import favicon from '@/assets/favicon.svg'
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
import AppLogin from '@/components/AppLogin.vue'
|
||||
import AppNavigation from '@/components/AppNavigation.vue'
|
||||
@@ -32,14 +31,6 @@ import { logicAnd } from '@vueuse/math'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null
|
||||
if (link == null) {
|
||||
link = document.createElement('link')
|
||||
link.rel = 'icon'
|
||||
document.getElementsByTagName('head')[0].appendChild(link)
|
||||
}
|
||||
link.href = favicon
|
||||
|
||||
const xenApiStore = useXenApiStore()
|
||||
|
||||
const { pool } = usePoolCollection()
|
||||
@@ -75,10 +66,6 @@ whenever(
|
||||
useUnreachableHosts()
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
@import '@/assets/base.css';
|
||||
</style>
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.main {
|
||||
overflow: auto;
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
@custom-media --mobile (max-width: 1023px);
|
||||
@custom-media --desktop (min-width: 1024px);
|
||||
@@ -1,100 +0,0 @@
|
||||
@import 'reset.css';
|
||||
@import 'theme.css';
|
||||
@import '@fontsource/poppins/400.css';
|
||||
@import '@fontsource/poppins/500.css';
|
||||
@import '@fontsource/poppins/600.css';
|
||||
@import '@fontsource/poppins/700.css';
|
||||
@import '@fontsource/poppins/900.css';
|
||||
@import '@fontsource/poppins/400-italic.css';
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-size: 1.3rem;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: var(--color-blue-scale-100);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-extra-blue-base);
|
||||
}
|
||||
|
||||
code,
|
||||
code *,
|
||||
pre {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.card-view {
|
||||
padding: 1.2rem;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
color: var(--color-extra-blue-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--color-extra-blue-d20);
|
||||
}
|
||||
|
||||
.link:active,
|
||||
.link.router-link-active {
|
||||
color: var(--color-extra-blue-d40);
|
||||
}
|
||||
|
||||
.link.router-link-active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.context-color-success {
|
||||
color: var(--color-green-infra-base);
|
||||
}
|
||||
|
||||
.context-color-error {
|
||||
color: var(--color-red-vates-base);
|
||||
}
|
||||
|
||||
.context-color-warning {
|
||||
color: var(--color-orange-world-base);
|
||||
}
|
||||
|
||||
.context-color-info {
|
||||
color: var(--color-extra-blue-base);
|
||||
}
|
||||
|
||||
.context-background-color-success {
|
||||
background-color: var(--background-color-green-infra);
|
||||
}
|
||||
|
||||
.context-background-color-error {
|
||||
background-color: var(--background-color-red-vates);
|
||||
}
|
||||
|
||||
.context-background-color-warning {
|
||||
background-color: var(--background-color-orange-world);
|
||||
}
|
||||
|
||||
.context-background-color-info {
|
||||
background-color: var(--background-color-extra-blue);
|
||||
}
|
||||
|
||||
.context-border-color-success {
|
||||
border-color: var(--color-green-infra-base);
|
||||
}
|
||||
|
||||
.context-border-color-error {
|
||||
border-color: var(--color-red-vates-base);
|
||||
}
|
||||
|
||||
.context-border-color-warning {
|
||||
border-color: var(--color-orange-world-base);
|
||||
}
|
||||
|
||||
.context-border-color-info {
|
||||
border-color: var(--color-extra-blue-base);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB |
@@ -1,87 +0,0 @@
|
||||
:root {
|
||||
--color-logo: #282467;
|
||||
|
||||
--color-blue-scale-000: #000000;
|
||||
--color-blue-scale-100: #1a1b38;
|
||||
--color-blue-scale-200: #595a6f;
|
||||
--color-blue-scale-300: #9899a5;
|
||||
--color-blue-scale-400: #e5e5e7;
|
||||
--color-blue-scale-500: #ffffff;
|
||||
|
||||
--color-extra-blue-l60: #d1cefb;
|
||||
--color-extra-blue-l40: #bbb5f9;
|
||||
--color-extra-blue-l20: #a39df8;
|
||||
--color-extra-blue-base: #8f84ff;
|
||||
--color-extra-blue-d20: #716ac6;
|
||||
--color-extra-blue-d40: #554f94;
|
||||
--color-extra-blue-d60: #383563;
|
||||
|
||||
--color-green-infra-l60: #b5dbca;
|
||||
--color-green-infra-l40: #91c9b0;
|
||||
--color-green-infra-l20: #70b795;
|
||||
--color-green-infra-base: #55a57b;
|
||||
--color-green-infra-d20: #438463;
|
||||
--color-green-infra-d40: #32634a;
|
||||
--color-green-infra-d60: #214231;
|
||||
|
||||
--color-orange-world-l60: #f2cda8;
|
||||
--color-orange-world-l40: #ebb57d;
|
||||
--color-orange-world-l20: #e59d56;
|
||||
--color-orange-world-base: #ef7f18;
|
||||
--color-orange-world-d20: #bf6612;
|
||||
--color-orange-world-d40: #864f1f;
|
||||
--color-orange-world-d60: #5a3514;
|
||||
|
||||
--color-red-vates-l60: #dda5a7;
|
||||
--color-red-vates-l40: #ce787c;
|
||||
--color-red-vates-l20: #bf4f51;
|
||||
--color-red-vates-base: #be1621;
|
||||
--color-red-vates-d20: #8e2221;
|
||||
--color-red-vates-d40: #6a1919;
|
||||
--color-red-vates-d60: #471010;
|
||||
|
||||
--color-grayscale-200: #585757;
|
||||
|
||||
--background-color-primary: #ffffff;
|
||||
--background-color-secondary: #f6f6f7;
|
||||
--background-color-extra-blue: #f4f3fe;
|
||||
--background-color-green-infra: #ecf5f2;
|
||||
--background-color-orange-world: #fbf2e9;
|
||||
--background-color-red-vates: #f5e8e9;
|
||||
|
||||
--shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.06);
|
||||
--shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.1), 0 0.2rem 0.1rem rgba(20, 20, 30, 0.06),
|
||||
0 0.1rem 0.1rem rgba(20, 20, 30, 0.08);
|
||||
--shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.1), 0 0.1rem 1.8rem rgba(20, 20, 30, 0.06),
|
||||
0 0.6rem 1rem rgba(20, 20, 30, 0.08);
|
||||
--shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.1), 0 0.9rem 4.6rem rgba(20, 20, 30, 0.06),
|
||||
0 2.4rem 3.8rem rgba(20, 20, 30, 0.04);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
--color-logo: #e5e5e7;
|
||||
|
||||
--color-blue-scale-000: #ffffff;
|
||||
--color-blue-scale-100: #e5e5e7;
|
||||
--color-blue-scale-200: #9899a5;
|
||||
--color-blue-scale-300: #595a6f;
|
||||
--color-blue-scale-400: #1a1b38;
|
||||
--color-blue-scale-500: #000000;
|
||||
|
||||
--background-color-primary: #14141d;
|
||||
--background-color-secondary: #17182a;
|
||||
--background-color-extra-blue: #35335d;
|
||||
--background-color-green-infra: #243b3d;
|
||||
--background-color-orange-world: #493328;
|
||||
--background-color-red-vates: #3c1a28;
|
||||
|
||||
--shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.12);
|
||||
--shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.2), 0 0.2rem 0.1rem rgba(20, 20, 30, 0.12),
|
||||
0 0.1rem 0.1rem rgba(20, 20, 30, 0.16);
|
||||
--shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.2), 0 0.1rem 1.8rem rgba(20, 20, 30, 0.12),
|
||||
0 0.6rem 1rem rgba(20, 20, 30, 0.16);
|
||||
--shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.2), 0 0.9rem 4.6rem rgba(20, 20, 30, 0.12),
|
||||
0 2.4rem 3.8rem rgba(20, 20, 30, 0.08);
|
||||
}
|
||||
@@ -51,14 +51,14 @@ const openSettings = () => router.push({ name: 'settings' })
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
border: none;
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--background-color-secondary);
|
||||
gap: 0.8rem;
|
||||
|
||||
&:disabled {
|
||||
color: var(--color-blue-scale-400);
|
||||
color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
@@ -72,7 +72,7 @@ const openSettings = () => router.push({ name: 'settings' })
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -86,6 +86,6 @@ const openSettings = () => router.push({ name: 'settings' })
|
||||
}
|
||||
|
||||
.menu-item-logout {
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -46,7 +46,7 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore)
|
||||
justify-content: space-between;
|
||||
height: 5.5rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 0.1rem solid var(--color-blue-scale-400);
|
||||
border-bottom: 0.1rem solid var(--color-grey-500);
|
||||
background-color: var(--background-color-secondary);
|
||||
|
||||
img {
|
||||
|
||||
@@ -135,7 +135,7 @@ form {
|
||||
background-color: var(--background-color-secondary);
|
||||
|
||||
.error {
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,7 +156,7 @@ input {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border: 1px solid var(--color-blue-scale-400);
|
||||
border: 1px solid var(--color-grey-500);
|
||||
border-radius: 0.8rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ useEventListener(
|
||||
}
|
||||
|
||||
code:not(.hljs-code) {
|
||||
background-color: var(--background-color-extra-blue);
|
||||
background-color: var(--background-color-purple-10);
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
@@ -81,12 +81,12 @@ useEventListener(
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-bottom: 2px solid var(--color-blue-scale-400);
|
||||
border-bottom: 2px solid var(--color-grey-500);
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border-bottom: 1px solid var(--color-blue-scale-400);
|
||||
border-bottom: 1px solid var(--color-grey-500);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,11 +103,11 @@ useEventListener(
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-extra-blue-d20);
|
||||
color: var(--color-purple-d20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@ whenever(isOpen, () => {
|
||||
max-width: 37rem;
|
||||
height: calc(100vh - 5.5rem);
|
||||
padding: 0.5rem;
|
||||
border-right: 1px solid var(--color-blue-scale-400);
|
||||
border-right: 1px solid var(--color-grey-500);
|
||||
background-color: var(--background-color-primary);
|
||||
|
||||
&.collapsible {
|
||||
|
||||
@@ -41,9 +41,9 @@ watchEffect(() => {
|
||||
display: inline-flex;
|
||||
padding: 0.3125em 0.5em;
|
||||
pointer-events: none;
|
||||
color: var(--color-blue-scale-500);
|
||||
color: var(--color-grey-600);
|
||||
border-radius: 0.5em;
|
||||
background-color: var(--color-blue-scale-100);
|
||||
background-color: var(--color-grey-100);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -145,6 +145,6 @@ watchEffect(() => {
|
||||
content: '';
|
||||
transform: rotate(45deg) skew(20deg, 20deg);
|
||||
border-radius: 0.3125em;
|
||||
background-color: var(--color-blue-scale-100);
|
||||
background-color: var(--color-grey-100);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -54,14 +54,14 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
padding: 0 0.7rem;
|
||||
border: 1px solid var(--color-blue-scale-400);
|
||||
border: 1px solid var(--color-grey-500);
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--color-blue-scale-500);
|
||||
background-color: var(--color-grey-600);
|
||||
box-shadow: var(--shadow-100);
|
||||
gap: 0.1rem;
|
||||
|
||||
&:focus-within {
|
||||
outline: 1px solid var(--color-extra-blue-l40);
|
||||
outline: 1px solid var(--color-purple-l40);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
|
||||
}
|
||||
|
||||
.form-widget:hover .widget {
|
||||
border-color: var(--color-extra-blue-l60);
|
||||
border-color: var(--color-purple-l60);
|
||||
}
|
||||
|
||||
.element {
|
||||
@@ -93,8 +93,8 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--color-blue-scale-100);
|
||||
background-color: var(--color-blue-scale-500);
|
||||
color: var(--color-grey-100);
|
||||
background-color: var(--color-grey-600);
|
||||
flex: 1;
|
||||
|
||||
&:disabled {
|
||||
@@ -134,7 +134,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,7 @@ defineProps<{
|
||||
font-size: 1.3rem;
|
||||
line-height: 150%;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
|
||||
& svg {
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@@ -25,6 +25,6 @@
|
||||
font-weight: 500;
|
||||
font-size: 1.25em;
|
||||
line-height: 150%;
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,6 +27,6 @@
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
line-height: 150%;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,7 +85,7 @@ const objectRoute = computed(() => {
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.unknown {
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,7 +33,7 @@ const isRecordNotFound = computed(() => props.isReady && !props.uuidChecker(id.v
|
||||
}
|
||||
|
||||
.spinner {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
display: flex;
|
||||
margin: auto;
|
||||
width: 10rem;
|
||||
|
||||
@@ -26,7 +26,7 @@ import UiStatusPanel from '@/components/ui/UiStatusPanel.vue'
|
||||
.contact {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
|
||||
& a {
|
||||
text-transform: lowercase;
|
||||
|
||||
@@ -44,7 +44,7 @@ const masterSessionStorage = useSessionStorage('master', null)
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.warning-not-current-pool {
|
||||
color: var(--color-orange-world-base);
|
||||
color: var(--color-orange-base);
|
||||
cursor: pointer;
|
||||
|
||||
.wrapper {
|
||||
|
||||
@@ -26,18 +26,18 @@ const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.power-state-icon {
|
||||
color: var(--color-extra-blue-d60);
|
||||
color: var(--color-purple-d60);
|
||||
|
||||
&.state-running {
|
||||
color: var(--color-green-infra-base);
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
|
||||
&.state-paused {
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
}
|
||||
|
||||
&.state-suspended {
|
||||
color: var(--color-extra-blue-d20);
|
||||
color: var(--color-purple-d20);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,7 +37,7 @@ const progress = computed(() => {
|
||||
.progress-circle-fill {
|
||||
animation: progress 1s ease-out forwards;
|
||||
fill: none;
|
||||
stroke: var(--color-green-infra-base);
|
||||
stroke: var(--color-green-base);
|
||||
stroke-width: 1.2;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: v-bind(progress), 100;
|
||||
@@ -46,13 +46,13 @@ const progress = computed(() => {
|
||||
.progress-circle-background {
|
||||
fill: none;
|
||||
stroke-width: 1.2;
|
||||
stroke: var(--color-blue-scale-400);
|
||||
stroke: var(--color-grey-500);
|
||||
}
|
||||
|
||||
.progress-circle-text {
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
fill: var(--color-green-infra-base);
|
||||
fill: var(--color-green-base);
|
||||
text-anchor: middle;
|
||||
alignment-baseline: middle;
|
||||
}
|
||||
|
||||
@@ -29,18 +29,18 @@ defineProps<{
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
padding: 0 1.5rem;
|
||||
border-bottom: 1px solid var(--color-blue-scale-400);
|
||||
border-bottom: 1px solid var(--color-grey-500);
|
||||
background-color: var(--background-color-primary);
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,28 +60,28 @@ const computedData = computed(() => {
|
||||
}
|
||||
|
||||
.progress-item:nth-child(1) {
|
||||
--progress-bar-color: var(--color-extra-blue-d60);
|
||||
--progress-bar-color: var(--color-purple-d60);
|
||||
}
|
||||
|
||||
.progress-item:nth-child(2) {
|
||||
--progress-bar-color: var(--color-extra-blue-d40);
|
||||
--progress-bar-color: var(--color-purple-d40);
|
||||
}
|
||||
|
||||
.progress-item:nth-child(3) {
|
||||
--progress-bar-color: var(--color-extra-blue-d20);
|
||||
--progress-bar-color: var(--color-purple-d20);
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
--progress-bar-height: 1.2rem;
|
||||
--progress-bar-color: var(--color-extra-blue-l20);
|
||||
--progress-bar-background-color: var(--color-blue-scale-400);
|
||||
--progress-bar-color: var(--color-purple-l20);
|
||||
--progress-bar-background-color: var(--color-grey-500);
|
||||
|
||||
&.warning {
|
||||
--progress-bar-color: var(--color-orange-world-base);
|
||||
--progress-bar-color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
&.error {
|
||||
--progress-bar-color: var(--color-red-vates-base);
|
||||
--progress-bar-color: var(--color-red-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,12 +25,12 @@
|
||||
th,
|
||||
td {
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-bottom: 0.1rem solid var(--color-blue-scale-400);
|
||||
border-bottom: 0.1rem solid var(--color-grey-500);
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--background-color-extra-blue);
|
||||
background-color: var(--background-color-purple-10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -127,14 +127,14 @@ const openRawValueModal = (code: string) =>
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.6rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
border-radius: 0.4rem;
|
||||
gap: 0.6rem;
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
color: var(--color-green-infra-l20);
|
||||
color: var(--color-green-l20);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -157,7 +157,7 @@ const openRawValueModal = (code: string) =>
|
||||
|
||||
.help {
|
||||
font-style: italic;
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
}
|
||||
|
||||
.default-value {
|
||||
@@ -168,12 +168,12 @@ const openRawValueModal = (code: string) =>
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
opacity: 1;
|
||||
color: var(--color-green-infra-base);
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
}
|
||||
|
||||
.v-model-indicator,
|
||||
.context-indicator {
|
||||
color: var(--color-green-infra-base);
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -81,7 +81,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
|
||||
|
||||
.input.indeterminate + .fake-checkbox > .icon {
|
||||
opacity: 1;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
|
||||
|
||||
.fake-checkbox {
|
||||
width: 2.5em;
|
||||
--background-color: var(--color-blue-scale-400);
|
||||
--background-color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -128,7 +128,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
|
||||
|
||||
.input.indeterminate + .fake-checkbox > .icon {
|
||||
opacity: 1;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -143,7 +143,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
|
||||
.icon {
|
||||
font-size: var(--checkbox-icon-size);
|
||||
position: absolute;
|
||||
color: var(--color-blue-scale-500);
|
||||
color: var(--color-grey-600);
|
||||
|
||||
filter: drop-shadow(0 0.0625em 0.5em rgba(0, 0, 0, 0.1)) drop-shadow(0 0.1875em 0.1875em rgba(0, 0, 0, 0.06))
|
||||
drop-shadow(0 0.1875em 0.25em rgba(0, 0, 0, 0.08));
|
||||
@@ -162,44 +162,44 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--shadow-100);
|
||||
|
||||
--border-color: var(--color-blue-scale-400);
|
||||
--border-color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
& + .fake-checkbox {
|
||||
cursor: not-allowed;
|
||||
--background-color: var(--background-color-secondary);
|
||||
--border-color: var(--color-blue-scale-400);
|
||||
--border-color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
&:checked + .fake-checkbox {
|
||||
--border-color: transparent;
|
||||
--background-color: var(--color-extra-blue-l60);
|
||||
--background-color: var(--color-purple-l60);
|
||||
}
|
||||
}
|
||||
|
||||
.input:not(:disabled) {
|
||||
&:hover + .fake-checkbox,
|
||||
&:focus + .fake-checkbox {
|
||||
--border-color: var(--color-extra-blue-l40);
|
||||
--border-color: var(--color-purple-l40);
|
||||
}
|
||||
|
||||
&:active + .fake-checkbox {
|
||||
--border-color: var(--color-extra-blue-l20);
|
||||
--border-color: var(--color-purple-l20);
|
||||
}
|
||||
|
||||
&:checked + .fake-checkbox {
|
||||
--border-color: transparent;
|
||||
--background-color: var(--color-extra-blue-base);
|
||||
--background-color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
&:checked:hover + .fake-checkbox,
|
||||
&:checked:focus + .fake-checkbox {
|
||||
--background-color: var(--color-extra-blue-d20);
|
||||
--background-color: var(--color-purple-d20);
|
||||
}
|
||||
|
||||
&:checked:active + .fake-checkbox {
|
||||
--background-color: var(--color-extra-blue-d40);
|
||||
--background-color: var(--color-purple-d40);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -144,14 +144,14 @@ defineExpose({
|
||||
--after-width: v-bind('afterWidth || "1.625em"');
|
||||
--caret-width: 1.5em;
|
||||
|
||||
--text-color: var(--color-blue-scale-100);
|
||||
--text-color: var(--color-grey-100);
|
||||
|
||||
&.empty {
|
||||
--text-color: var(--color-blue-scale-300);
|
||||
--text-color: var(--color-grey-300);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
--text-color: var(--color-blue-scale-400);
|
||||
--text-color: var(--color-grey-500);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,7 +189,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
--background-color: var(--background-color-primary);
|
||||
--border-color: var(--color-blue-scale-400);
|
||||
--border-color: var(--color-grey-500);
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
@@ -199,63 +199,63 @@ defineExpose({
|
||||
&:not(:disabled) {
|
||||
&.info {
|
||||
&:hover {
|
||||
--border-color: var(--color-extra-blue-l60);
|
||||
--border-color: var(--color-purple-l60);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--border-color: var(--color-extra-blue-l40);
|
||||
--border-color: var(--color-purple-l40);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--border-color: var(--color-extra-blue-base);
|
||||
--border-color: var(--color-purple-base);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
--border-color: var(--color-green-infra-base);
|
||||
--border-color: var(--color-green-base);
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--color-green-infra-l60);
|
||||
--border-color: var(--color-green-l60);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--border-color: var(--color-green-infra-l40);
|
||||
--border-color: var(--color-green-l40);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--border-color: var(--color-green-infra-base);
|
||||
--border-color: var(--color-green-base);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
--border-color: var(--color-orange-world-base);
|
||||
--border-color: var(--color-orange-base);
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--color-orange-world-l60);
|
||||
--border-color: var(--color-orange-l60);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--border-color: var(--color-orange-world-l40);
|
||||
--border-color: var(--color-orange-l40);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--border-color: var(--color-orange-world-base);
|
||||
--border-color: var(--color-orange-base);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
--border-color: var(--color-red-vates-base);
|
||||
--border-color: var(--color-red-base);
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--color-red-vates-l60);
|
||||
--border-color: var(--color-red-l60);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--border-color: var(--color-red-vates-l40);
|
||||
--border-color: var(--color-red-l40);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
--border-color: var(--color-red-vates-base);
|
||||
--border-color: var(--color-red-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,7 +96,7 @@ useContext(DisabledContext, () => props.disabled)
|
||||
|
||||
&.light {
|
||||
font-size: 1.6rem;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -104,7 +104,7 @@ useContext(DisabledContext, () => props.disabled)
|
||||
font-size: 1.4rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,7 +126,7 @@ useContext(DisabledContext, () => props.disabled)
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
|
||||
& > span {
|
||||
text-decoration: underline;
|
||||
@@ -134,14 +134,14 @@ useContext(DisabledContext, () => props.disabled)
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--color-orange-world-base);
|
||||
color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
|
||||
.help {
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,7 +53,7 @@ whenever(
|
||||
<style lang="postcss" scoped>
|
||||
.collapsible {
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--background-color-extra-blue);
|
||||
background-color: var(--background-color-purple-10);
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -67,16 +67,16 @@ whenever(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-extra-blue-base);
|
||||
border-bottom: 1px solid var(--color-purple-base);
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.collapsible & {
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
padding-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -87,6 +87,6 @@ whenever(
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,7 +65,7 @@ const vmCount = computed(() => recordsByHostRef.value.get(props.hostOpaqueRef)?.
|
||||
}
|
||||
|
||||
.master-icon {
|
||||
color: var(--color-orange-world-base);
|
||||
color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
.vm-count {
|
||||
@@ -76,9 +76,9 @@ const vmCount = computed(() => recordsByHostRef.value.get(props.hostOpaqueRef)?.
|
||||
justify-content: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
color: var(--color-blue-scale-500);
|
||||
color: var(--color-grey-600);
|
||||
border-radius: calc(var(--size) / 2);
|
||||
background-color: var(--color-extra-blue-base);
|
||||
background-color: var(--color-purple-base);
|
||||
--size: 2.3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,6 +23,6 @@ const { records: hosts, isReady, hasError } = useHostCollection()
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,27 +40,27 @@ const hasTooltip = computed(() => hasEllipsis(textElement.value))
|
||||
.infra-item-label {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--background-color-primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
background-color: var(--background-color-primary);
|
||||
}
|
||||
|
||||
&.exact-active {
|
||||
color: var(--color-blue-scale-100);
|
||||
background-color: var(--background-color-extra-blue);
|
||||
color: var(--color-grey-100);
|
||||
background-color: var(--background-color-purple-10);
|
||||
|
||||
.icon {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ defineProps<{
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
}
|
||||
|
||||
.link-placeholder {
|
||||
@@ -41,7 +41,7 @@ defineProps<{
|
||||
.loader {
|
||||
flex: 1;
|
||||
animation: pulse alternate 1s infinite;
|
||||
background-color: var(--background-color-extra-blue);
|
||||
background-color: var(--background-color-purple-10);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
@@ -43,6 +43,6 @@ const { isReady, hasError, pool } = usePoolCollection()
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,18 +40,18 @@ const { stop } = useIntersectionObserver(rootElement, ([entry]) => {
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.infra-action {
|
||||
color: var(--color-extra-blue-d60);
|
||||
color: var(--color-purple-d60);
|
||||
|
||||
&.running {
|
||||
color: var(--color-green-infra-base);
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
}
|
||||
|
||||
&.suspended {
|
||||
color: var(--color-extra-blue-d20);
|
||||
color: var(--color-purple-d20);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,6 +31,6 @@ const vms = computed(() => recordsByHostRef.value.get(props.hostOpaqueRef ?? ('O
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -87,9 +87,9 @@ const open = (event: MouseEvent) => {
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
cursor: default;
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
border-radius: 0.8rem;
|
||||
background-color: var(--color-blue-scale-500);
|
||||
background-color: var(--color-grey-600);
|
||||
gap: 0.5rem;
|
||||
|
||||
&.horizontal {
|
||||
|
||||
@@ -72,7 +72,7 @@ const handleClick = async () => {
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.menu-item {
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
}
|
||||
|
||||
.submenu-icon {
|
||||
|
||||
@@ -16,11 +16,11 @@ const horizontal = inject(
|
||||
.ui-menu-separator {
|
||||
&.horizontal {
|
||||
margin: 0 0.5rem;
|
||||
border-right: 1px solid var(--color-blue-scale-400);
|
||||
border-right: 1px solid var(--color-grey-500);
|
||||
}
|
||||
|
||||
&:not(.horizontal) {
|
||||
border-bottom: 1px solid var(--color-blue-scale-400);
|
||||
border-bottom: 1px solid var(--color-grey-500);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,10 +29,10 @@ defineProps<{
|
||||
white-space: nowrap;
|
||||
border-radius: 0.8rem;
|
||||
gap: 1rem;
|
||||
background-color: var(--color-blue-scale-500);
|
||||
background-color: var(--color-grey-600);
|
||||
|
||||
&.disabled {
|
||||
color: var(--color-blue-scale-400);
|
||||
color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
@@ -44,8 +44,8 @@ defineProps<{
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--color-extra-blue-base);
|
||||
background-color: var(--background-color-extra-blue);
|
||||
color: var(--color-purple-base);
|
||||
background-color: var(--background-color-purple-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@ const { records: alarms, start, isStarted, isReady, hasError } = useAlarmCollect
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.no-alarm & {
|
||||
color: var(--color-green-infra-base);
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
|
||||
@@ -83,12 +83,12 @@ const hasError = computed(() => hostStoreHasError.value || vmStoreHasError.value
|
||||
.progress-item {
|
||||
margin-top: 2.6rem;
|
||||
--progress-bar-height: 1.2rem;
|
||||
--progress-bar-color: var(--color-extra-blue-base);
|
||||
--progress-bar-background-color: var(--color-blue-scale-400);
|
||||
--progress-bar-color: var(--color-purple-base);
|
||||
--progress-bar-background-color: var(--color-grey-500);
|
||||
|
||||
&.warning {
|
||||
--progress-bar-color: var(--color-orange-world-base);
|
||||
--footer-value-color: var(--color-orange-world-base);
|
||||
--progress-bar-color: var(--color-orange-base);
|
||||
--footer-value-color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
& .footer-value {
|
||||
|
||||
@@ -31,7 +31,7 @@ const { count, patches, areSomeLoaded, areAllLoaded } = useHostPatches(hosts)
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.patches-title {
|
||||
--section-title-right-color: var(--color-red-vates-base);
|
||||
--section-title-right-color: var(--color-red-base);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
|
||||
@@ -52,10 +52,10 @@ const inactive = computed(() => props.total - props.active)
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 0.65rem;
|
||||
background-color: var(--color-green-infra-base);
|
||||
background-color: var(--color-green-base);
|
||||
|
||||
&.inactive {
|
||||
background-color: var(--color-blue-scale-400);
|
||||
background-color: var(--color-grey-500);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -43,7 +43,7 @@ const hasTooltip = computed(() => hasEllipsis(descriptionElement.value))
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.level {
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ const hasTasks = computed(() => props.pendingTasks.length > 0 || (props.finished
|
||||
|
||||
.no-tasks {
|
||||
text-align: center;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -68,11 +68,11 @@ td[colspan='5'] {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
display: block;
|
||||
font-size: 4rem;
|
||||
margin: 2rem auto 0;
|
||||
|
||||
@@ -40,12 +40,12 @@ const isDisplayed = computed(() => !isNaN(percentUsed.value) && !isNaN(percentFr
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -49,11 +49,11 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
|
||||
background-color: var(--background-color-primary);
|
||||
|
||||
&.disabled {
|
||||
color: var(--color-blue-scale-400);
|
||||
color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-secondary);
|
||||
@@ -62,8 +62,8 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
|
||||
&:active,
|
||||
&.active,
|
||||
&.busy {
|
||||
color: var(--color-extra-blue-base);
|
||||
background-color: var(--background-color-extra-blue);
|
||||
color: var(--color-purple-base);
|
||||
background-color: var(--background-color-purple-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,8 +24,8 @@ defineProps<{
|
||||
font-weight: 500;
|
||||
padding: 0 0.8rem;
|
||||
height: 1.8em;
|
||||
color: var(--color-blue-scale-500);
|
||||
color: var(--color-grey-600);
|
||||
border-radius: 9.6rem;
|
||||
background-color: var(--color-blue-scale-300);
|
||||
background-color: var(--color-grey-300);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -86,27 +86,27 @@ const className = computed(() => {
|
||||
}
|
||||
|
||||
&.color-info {
|
||||
--button-accent-color: var(--color-extra-blue-base);
|
||||
--button-accent-color-hover: var(--color-extra-blue-d20);
|
||||
--button-accent-color-active: var(--color-extra-blue-d40);
|
||||
--button-accent-color: var(--color-purple-base);
|
||||
--button-accent-color-hover: var(--color-purple-d20);
|
||||
--button-accent-color-active: var(--color-purple-d40);
|
||||
}
|
||||
|
||||
&.color-success {
|
||||
--button-accent-color: var(--color-green-infra-base);
|
||||
--button-accent-color-hover: var(--color-green-infra-d20);
|
||||
--button-accent-color-active: var(--color-green-infra-d40);
|
||||
--button-accent-color: var(--color-green-base);
|
||||
--button-accent-color-hover: var(--color-green-d20);
|
||||
--button-accent-color-active: var(--color-green-d40);
|
||||
}
|
||||
|
||||
&.color-warning {
|
||||
--button-accent-color: var(--color-orange-world-base);
|
||||
--button-accent-color-hover: var(--color-orange-world-d20);
|
||||
--button-accent-color-active: var(--color-orange-world-d40);
|
||||
--button-accent-color: var(--color-orange-base);
|
||||
--button-accent-color-hover: var(--color-orange-d20);
|
||||
--button-accent-color-active: var(--color-orange-d40);
|
||||
}
|
||||
|
||||
&.color-error {
|
||||
--button-accent-color: var(--color-red-vates-base);
|
||||
--button-accent-color-hover: var(--color-red-vates-d20);
|
||||
--button-accent-color-active: var(--color-red-vates-d40);
|
||||
--button-accent-color: var(--color-red-base);
|
||||
--button-accent-color-hover: var(--color-red-d20);
|
||||
--button-accent-color-active: var(--color-red-d40);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -119,7 +119,7 @@ const className = computed(() => {
|
||||
--button-accent-color: var(--button-accent-color-active);
|
||||
}
|
||||
|
||||
--button-color: var(--color-blue-scale-500);
|
||||
--button-color: var(--color-grey-600);
|
||||
--button-border-color: transparent;
|
||||
--button-background-color: var(--button-accent-color);
|
||||
|
||||
@@ -141,7 +141,7 @@ const className = computed(() => {
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
--button-color: var(--color-blue-scale-400);
|
||||
--button-color: var(--color-grey-500);
|
||||
--button-border-color: transparent;
|
||||
--button-background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.footer {
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -17,7 +17,7 @@ import UiSpinner from '@/components/ui/UiSpinner.vue'
|
||||
}
|
||||
|
||||
.spinner {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -44,28 +44,28 @@ const tags = computed(() => {
|
||||
justify-content: space-between;
|
||||
|
||||
--section-title-left-size: 2rem;
|
||||
--section-title-left-color: var(--color-blue-scale-100);
|
||||
--section-title-left-color: var(--color-grey-100);
|
||||
--section-title-left-weight: 500;
|
||||
--section-title-right-size: 1.6rem;
|
||||
--section-title-right-color: var(--color-extra-blue-base);
|
||||
--section-title-right-color: var(--color-purple-base);
|
||||
--section-title-right-weight: 700;
|
||||
|
||||
&.h6 {
|
||||
margin-bottom: 1rem;
|
||||
--section-title-left-size: 1.5rem;
|
||||
--section-title-left-color: var(--color-blue-scale-300);
|
||||
--section-title-left-color: var(--color-grey-300);
|
||||
--section-title-left-weight: 400;
|
||||
}
|
||||
|
||||
&.h5 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--color-extra-blue-base);
|
||||
border-bottom: 1px solid var(--color-purple-base);
|
||||
--section-title-left-size: 1.6rem;
|
||||
--section-title-left-color: var(--color-extra-blue-base);
|
||||
--section-title-left-color: var(--color-purple-base);
|
||||
--section-title-left-weight: 700;
|
||||
--section-title-right-size: 1.4rem;
|
||||
--section-title-right-color: var(--color-extra-blue-base);
|
||||
--section-title-right-color: var(--color-purple-base);
|
||||
--section-title-right-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,9 +23,9 @@ defineProps<{
|
||||
justify-content: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
color: var(--color-blue-scale-500);
|
||||
color: var(--color-grey-600);
|
||||
border-radius: calc(var(--size) / 2);
|
||||
background-color: var(--color-blue-scale-300);
|
||||
background-color: var(--color-grey-300);
|
||||
--size: 1.75em;
|
||||
|
||||
.overflow {
|
||||
@@ -33,19 +33,19 @@ defineProps<{
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: var(--color-extra-blue-base);
|
||||
background-color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: var(--color-green-infra-base);
|
||||
background-color: var(--color-green-base);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--color-orange-world-base);
|
||||
background-color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--color-red-vates-base);
|
||||
background-color: var(--color-red-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,11 +27,11 @@ const emit = defineEmits<{
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
height: 3.4rem;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
border-radius: 1.7rem;
|
||||
background-color: var(--background-color-extra-blue);
|
||||
background-color: var(--background-color-purple-10);
|
||||
gap: 1rem;
|
||||
border: 1px solid var(--color-extra-blue-base);
|
||||
border: 1px solid var(--color-purple-base);
|
||||
}
|
||||
|
||||
.label,
|
||||
@@ -55,10 +55,10 @@ const emit = defineEmits<{
|
||||
border-radius: 1.4rem;
|
||||
width: 2.8rem;
|
||||
margin: 0.2rem;
|
||||
background-color: var(--color-extra-blue-l40);
|
||||
background-color: var(--color-purple-l40);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-red-vates-l20);
|
||||
background-color: var(--color-red-l20);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,8 +12,6 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
@import '@/assets/_responsive.pcss';
|
||||
|
||||
.key,
|
||||
.value {
|
||||
padding-top: 0.5rem;
|
||||
@@ -24,7 +22,7 @@
|
||||
.key {
|
||||
padding-right: 2rem;
|
||||
text-align: left;
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
|
||||
@media (--desktop) {
|
||||
min-width: 20rem;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
.ui-raw {
|
||||
background-color: var(--color-blue-scale-400);
|
||||
background-color: var(--color-grey-500);
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<style lang="postcss" scoped>
|
||||
.ui-separator {
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-blue-scale-400);
|
||||
border-top: 1px solid var(--color-grey-500);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,7 +24,7 @@ defineProps<{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@@ -29,12 +29,12 @@ const isTabBarDisabled = useContext(DisabledContext, () => props.disabled)
|
||||
padding: 0 1.5rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
color: var(--color-blue-scale-400);
|
||||
color: var(--color-grey-500);
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
@@ -42,19 +42,19 @@ const isTabBarDisabled = useContext(DisabledContext, () => props.disabled)
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border-bottom-color: var(--color-extra-blue-base);
|
||||
border-bottom-color: var(--color-purple-base);
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-extra-blue-base);
|
||||
border-bottom-color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
border-bottom-color: var(--color-purple-base);
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-extra-blue-base);
|
||||
border-bottom-color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
border-bottom-color: var(--color-purple-base);
|
||||
background-color: var(--background-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ useContext(DisabledContext, () => props.disabled)
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 5rem;
|
||||
border-bottom: 1px solid var(--color-blue-scale-400);
|
||||
border-bottom: 1px solid var(--color-grey-500);
|
||||
background-color: var(--background-color-primary);
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@@ -19,12 +19,12 @@ defineProps<{
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
|
||||
:deep(th),
|
||||
:deep(td) {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--color-blue-scale-400);
|
||||
border-top: 1px solid var(--color-grey-500);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@ defineProps<{
|
||||
:deep(thead) {
|
||||
th,
|
||||
td {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
@@ -45,7 +45,7 @@ defineProps<{
|
||||
&.vertical-border {
|
||||
:deep(th),
|
||||
:deep(td) {
|
||||
border-right: 1px solid var(--color-blue-scale-400);
|
||||
border-right: 1px solid var(--color-grey-500);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
@@ -55,6 +55,6 @@ defineProps<{
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: var(--background-color-red-vates);
|
||||
background-color: var(--background-color-red-10);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,7 @@ const tag = computed(() => {
|
||||
line-height: 150%;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
|
||||
&.display {
|
||||
font-size: 6.4rem;
|
||||
|
||||
@@ -30,16 +30,16 @@ const icon = computed(() => {
|
||||
color: var(--icon-color);
|
||||
|
||||
&.error {
|
||||
--icon-color: var(--color-red-vates-base);
|
||||
--icon-color: var(--color-red-base);
|
||||
}
|
||||
&.warning {
|
||||
--icon-color: var(--color-orange-world-base);
|
||||
--icon-color: var(--color-orange-base);
|
||||
}
|
||||
&.info {
|
||||
--icon-color: var(--color-extra-blue-base);
|
||||
--icon-color: var(--color-purple-base);
|
||||
}
|
||||
&.success {
|
||||
--icon-color: var(--color-green-infra-base);
|
||||
--icon-color: var(--color-green-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,6 +72,6 @@ defineSlots<{
|
||||
.subtitle {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: var(--color-blue-scale-200);
|
||||
color: var(--color-grey-200);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,22 +29,22 @@ const progressWithUnit = computed(() => {
|
||||
height: var(--progress-bar-height, 0.4rem);
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.4rem;
|
||||
background-color: var(--progress-bar-background-color, var(--background-color-extra-blue));
|
||||
background-color: var(--progress-bar-background-color, var(--background-color-purple-10));
|
||||
|
||||
&.color-info {
|
||||
--progress-bar-color: var(--color-extra-blue-base);
|
||||
--progress-bar-color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
&.color-success {
|
||||
--progress-bar-color: var(--color-green-infra-base);
|
||||
--progress-bar-color: var(--color-green-base);
|
||||
}
|
||||
|
||||
&.color-warning {
|
||||
--progress-bar-color: var(--color-orange-world-base);
|
||||
--progress-bar-color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
&.color-error {
|
||||
--progress-bar-color: var(--color-red-vates-base);
|
||||
--progress-bar-color: var(--color-red-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ withDefaults(
|
||||
|
||||
<style lang="postcss">
|
||||
.unit {
|
||||
color: var(--color-blue-scale-300);
|
||||
color: var(--color-grey-300);
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
@@ -25,15 +25,15 @@ defineProps<{
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 4.5rem;
|
||||
width: 0;
|
||||
border-left: 0.1rem solid var(--color-extra-blue-base);
|
||||
background-color: var(--color-extra-blue-base);
|
||||
border-left: 0.1rem solid var(--color-purple-base);
|
||||
background-color: var(--color-purple-base);
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -133,6 +133,6 @@ const getHostState = (host: XenApiHost) => (isHostRunning(host) ? VM_POWER_STATE
|
||||
|
||||
.star {
|
||||
margin: 0 1rem;
|
||||
color: var(--color-orange-world-base);
|
||||
color: var(--color-orange-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,7 +53,7 @@ const { isMobile } = storeToRefs(useUiStore())
|
||||
<style lang="postcss" scoped>
|
||||
.vms-actions-bar {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--color-blue-scale-400);
|
||||
border-bottom: 1px solid var(--color-grey-500);
|
||||
background-color: var(--background-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,10 +10,10 @@ export const useChartTheme = () => {
|
||||
|
||||
const getColors = () => ({
|
||||
background: style.getPropertyValue('--background-color-primary'),
|
||||
text: style.getPropertyValue('--color-blue-scale-300'),
|
||||
splitLine: style.getPropertyValue('--color-blue-scale-400'),
|
||||
primary: style.getPropertyValue('--color-extra-blue-base'),
|
||||
secondary: style.getPropertyValue('--color-orange-world-base'),
|
||||
text: style.getPropertyValue('--color-grey-300'),
|
||||
splitLine: style.getPropertyValue('--color-grey-500'),
|
||||
primary: style.getPropertyValue('--color-purple-base'),
|
||||
secondary: style.getPropertyValue('--color-orange-base'),
|
||||
})
|
||||
|
||||
const colors = ref(getColors())
|
||||
|
||||
@@ -3,6 +3,7 @@ import { createApp } from 'vue'
|
||||
import App from '@/App.vue'
|
||||
import i18n from '@/i18n'
|
||||
import router from '@/router'
|
||||
import '@xen-orchestra/web-core/assets/css/base.pcss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ img {
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
|
||||
@@ -30,7 +30,7 @@ img {
|
||||
width: 30%;
|
||||
}
|
||||
.numeric {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 96px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1em;
|
||||
@@ -40,7 +40,7 @@ img {
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
|
||||
@@ -145,8 +145,6 @@ const { colorMode } = storeToRefs(useUiStore())
|
||||
</script>
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
@import '@/assets/_responsive.pcss';
|
||||
|
||||
.card-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -176,9 +174,9 @@ h5 {
|
||||
flex-direction: column;
|
||||
gap: 1.6em;
|
||||
&.selected {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
img {
|
||||
outline: solid 2px var(--color-extra-blue-base);
|
||||
outline: solid 2px var(--color-purple-base);
|
||||
}
|
||||
}
|
||||
&:not(.selected) {
|
||||
|
||||
@@ -236,7 +236,7 @@ watch(
|
||||
.warning {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-orange-world-base);
|
||||
color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
.code-highlight {
|
||||
|
||||
@@ -123,7 +123,7 @@ const openInNewTab = () => {
|
||||
}
|
||||
|
||||
.spinner {
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
display: flex;
|
||||
margin: auto;
|
||||
width: 10rem;
|
||||
@@ -143,7 +143,7 @@ const openInNewTab = () => {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 4rem;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
|
||||
@@ -157,8 +157,8 @@ const openInNewTab = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
background-color: var(--color-extra-blue-base);
|
||||
color: var(--color-blue-scale-500);
|
||||
background-color: var(--color-purple-base);
|
||||
color: var(--color-grey-600);
|
||||
text-decoration: none;
|
||||
padding: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@@ -520,7 +520,7 @@ async function cancel() {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 76.5vh;
|
||||
color: var(--color-extra-blue-base);
|
||||
color: var(--color-purple-base);
|
||||
text-align: center;
|
||||
padding: 5rem;
|
||||
margin: auto;
|
||||
@@ -536,15 +536,15 @@ async function cancel() {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.status {
|
||||
color: var(--color-blue-scale-100);
|
||||
color: var(--color-grey-100);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--color-green-infra-base);
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--color-red-vates-base);
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
.success,
|
||||
.danger {
|
||||
@@ -560,6 +560,6 @@ async function cancel() {
|
||||
gap: 0.5em;
|
||||
}
|
||||
.warning {
|
||||
color: var(--color-orange-world-base);
|
||||
color: var(--color-orange-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
5
@xen-orchestra/web-core/lib/assets/css/.globals.pcss
Normal file
5
@xen-orchestra/web-core/lib/assets/css/.globals.pcss
Normal file
@@ -0,0 +1,5 @@
|
||||
/* This file is meant to provide PostCSS utilities that will be globally available */
|
||||
/* https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data */
|
||||
|
||||
@custom-media --mobile (max-width: 1023px);
|
||||
@custom-media --desktop (min-width: 1024px);
|
||||
121
@xen-orchestra/web-core/lib/assets/css/_colors.pcss
Normal file
121
@xen-orchestra/web-core/lib/assets/css/_colors.pcss
Normal file
@@ -0,0 +1,121 @@
|
||||
:root {
|
||||
--color-grey-000: #000000;
|
||||
--color-grey-100: #1a1b38;
|
||||
--color-grey-200: #595a6f;
|
||||
--color-grey-300: #9899a5;
|
||||
--color-grey-400: #bfbfc6;
|
||||
--color-grey-500: #e5e5e7;
|
||||
--color-grey-600: #ffffff;
|
||||
|
||||
--background-color-primary: #ffffff;
|
||||
--background-color-secondary: #f6f6f7;
|
||||
|
||||
--color-purple-base: #8f84ff;
|
||||
--color-purple-d20: color(#8f84ff blend(black 20%));
|
||||
--color-purple-d40: color(#8f84ff blend(black 40%));
|
||||
--color-purple-d60: color(#8f84ff blend(black 60%));
|
||||
--color-purple-l20: color(#8f84ff blend(white 20%));
|
||||
--color-purple-l40: color(#8f84ff blend(white 40%));
|
||||
--color-purple-l60: color(#8f84ff blend(white 60%));
|
||||
--background-color-purple-10: color(white blend(#8f84ff 10%));
|
||||
--background-color-purple-20: color(white blend(#8f84ff 20%));
|
||||
--background-color-purple-30: color(white blend(#8f84ff 30%));
|
||||
--background-color-purple-60: color(white blend(#8f84ff 60%));
|
||||
|
||||
--color-green-base: #2ca878;
|
||||
--color-green-d20: color(#2ca878 blend(black 20%));
|
||||
--color-green-d40: color(#2ca878 blend(black 40%));
|
||||
--color-green-d60: color(#2ca878 blend(black 60%));
|
||||
--color-green-l20: color(#2ca878 blend(white 20%));
|
||||
--color-green-l40: color(#2ca878 blend(white 40%));
|
||||
--color-green-l60: color(#2ca878 blend(white 60%));
|
||||
--background-color-green-10: color(white blend(#2ca878 10%));
|
||||
--background-color-green-20: color(white blend(#2ca878 20%));
|
||||
--background-color-green-30: color(white blend(#2ca878 30%));
|
||||
--background-color-green-60: color(white blend(#2ca878 60%));
|
||||
|
||||
--color-orange-base: #ef7f18;
|
||||
--color-orange-d20: color(#ef7f18 blend(black 20%));
|
||||
--color-orange-d40: color(#ef7f18 blend(black 40%));
|
||||
--color-orange-d60: color(#ef7f18 blend(black 60%));
|
||||
--color-orange-l20: color(#ef7f18 blend(white 20%));
|
||||
--color-orange-l40: color(#ef7f18 blend(white 40%));
|
||||
--color-orange-l60: color(#ef7f18 blend(white 60%));
|
||||
--background-color-orange-10: color(white blend(#ef7f18 10%));
|
||||
--background-color-orange-20: color(white blend(#ef7f18 20%));
|
||||
--background-color-orange-30: color(white blend(#ef7f18 30%));
|
||||
--background-color-orange-60: color(white blend(#ef7f18 60%));
|
||||
|
||||
--color-red-base: #be1621;
|
||||
--color-red-d20: color(#be1621 blend(black 20%));
|
||||
--color-red-d40: color(#be1621 blend(black 40%));
|
||||
--color-red-d60: color(#be1621 blend(black 60%));
|
||||
--color-red-l20: color(#be1621 blend(white 20%));
|
||||
--color-red-l40: color(#be1621 blend(white 40%));
|
||||
--color-red-l60: color(#be1621 blend(white 60%));
|
||||
--background-color-red-10: color(white blend(#be1621 10%));
|
||||
--background-color-red-20: color(white blend(#be1621 20%));
|
||||
--background-color-red-30: color(white blend(#be1621 30%));
|
||||
--background-color-red-60: color(white blend(#be1621 60%));
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--color-grey-000: #ffffff;
|
||||
--color-grey-100: #e5e5e7;
|
||||
--color-grey-200: #bfbfc6;
|
||||
--color-grey-300: #9899a5;
|
||||
--color-grey-400: #595a6f;
|
||||
--color-grey-500: #3a3b54;
|
||||
--color-grey-600: #000000;
|
||||
|
||||
--background-color-primary: #14141e;
|
||||
--background-color-secondary: #17182b;
|
||||
|
||||
--color-purple-base: #8f84ff;
|
||||
--color-purple-d20: color(#8f84ff blend(white 20%));
|
||||
--color-purple-d40: color(#8f84ff blend(white 40%));
|
||||
--color-purple-d60: color(#8f84ff blend(white 60%));
|
||||
--color-purple-l20: color(#8f84ff blend(black 20%));
|
||||
--color-purple-l40: color(#8f84ff blend(black 40%));
|
||||
--color-purple-l60: color(#8f84ff blend(black 60%));
|
||||
--background-color-purple-10: color(#17182b blend(#8f84ff 25%));
|
||||
--background-color-purple-20: color(#17182b blend(#8f84ff 35%));
|
||||
--background-color-purple-30: color(#17182b blend(#8f84ff 45%));
|
||||
--background-color-purple-60: color(#17182b blend(#8f84ff 85%));
|
||||
|
||||
--color-green-base: #2ca878;
|
||||
--color-green-d20: color(#2ca878 blend(white 20%));
|
||||
--color-green-d40: color(#2ca878 blend(white 40%));
|
||||
--color-green-d60: color(#2ca878 blend(white 60%));
|
||||
--color-green-l20: color(#2ca878 blend(black 20%));
|
||||
--color-green-l40: color(#2ca878 blend(black 40%));
|
||||
--color-green-l60: color(#2ca878 blend(black 60%));
|
||||
--background-color-green-10: color(#17182b blend(#2ca878 25%));
|
||||
--background-color-green-20: color(#17182b blend(#2ca878 35%));
|
||||
--background-color-green-30: color(#17182b blend(#2ca878 45%));
|
||||
--background-color-green-60: color(#17182b blend(#2ca878 85%));
|
||||
|
||||
--color-orange-base: #ef7f18;
|
||||
--color-orange-d20: color(#ef7f18 blend(white 20%));
|
||||
--color-orange-d40: color(#ef7f18 blend(white 40%));
|
||||
--color-orange-d60: color(#ef7f18 blend(white 60%));
|
||||
--color-orange-l20: color(#ef7f18 blend(black 20%));
|
||||
--color-orange-l40: color(#ef7f18 blend(black 40%));
|
||||
--color-orange-l60: color(#ef7f18 blend(black 60%));
|
||||
--background-color-orange-10: color(#17182b blend(#ef7f18 25%));
|
||||
--background-color-orange-20: color(#17182b blend(#ef7f18 35%));
|
||||
--background-color-orange-30: color(#17182b blend(#ef7f18 45%));
|
||||
--background-color-orange-60: color(#17182b blend(#ef7f18 85%));
|
||||
|
||||
--color-red-base: #be1621;
|
||||
--color-red-d20: color(#be1621 blend(white 20%));
|
||||
--color-red-d40: color(#be1621 blend(white 40%));
|
||||
--color-red-d60: color(#be1621 blend(white 60%));
|
||||
--color-red-l20: color(#be1621 blend(black 20%));
|
||||
--color-red-l40: color(#be1621 blend(black 40%));
|
||||
--color-red-l60: color(#be1621 blend(black 60%));
|
||||
--background-color-red-10: color(#17182b blend(#be1621 25%));
|
||||
--background-color-red-20: color(#17182b blend(#be1621 35%));
|
||||
--background-color-red-30: color(#17182b blend(#be1621 45%));
|
||||
--background-color-red-60: color(#17182b blend(#be1621 85%));
|
||||
}
|
||||
47
@xen-orchestra/web-core/lib/assets/css/_context.pcss
Normal file
47
@xen-orchestra/web-core/lib/assets/css/_context.pcss
Normal file
@@ -0,0 +1,47 @@
|
||||
.context-color-success {
|
||||
color: var(--color-green-base);
|
||||
}
|
||||
|
||||
.context-color-error {
|
||||
color: var(--color-red-base);
|
||||
}
|
||||
|
||||
.context-color-warning {
|
||||
color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
.context-color-info {
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
.context-background-color-success {
|
||||
background-color: var(--background-color-green-10);
|
||||
}
|
||||
|
||||
.context-background-color-error {
|
||||
background-color: var(--background-color-red-10);
|
||||
}
|
||||
|
||||
.context-background-color-warning {
|
||||
background-color: var(--background-color-orange-10);
|
||||
}
|
||||
|
||||
.context-background-color-info {
|
||||
background-color: var(--background-color-purple-10);
|
||||
}
|
||||
|
||||
.context-border-color-success {
|
||||
border-color: var(--color-green-base);
|
||||
}
|
||||
|
||||
.context-border-color-error {
|
||||
border-color: var(--color-red-base);
|
||||
}
|
||||
|
||||
.context-border-color-warning {
|
||||
border-color: var(--color-orange-base);
|
||||
}
|
||||
|
||||
.context-border-color-info {
|
||||
border-color: var(--color-purple-base);
|
||||
}
|
||||
6
@xen-orchestra/web-core/lib/assets/css/_fonts.pcss
Normal file
6
@xen-orchestra/web-core/lib/assets/css/_fonts.pcss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import '@fontsource/poppins/400.css';
|
||||
@import '@fontsource/poppins/500.css';
|
||||
@import '@fontsource/poppins/600.css';
|
||||
@import '@fontsource/poppins/700.css';
|
||||
@import '@fontsource/poppins/900.css';
|
||||
@import '@fontsource/poppins/400-italic.css';
|
||||
@@ -3,6 +3,10 @@ html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
36
@xen-orchestra/web-core/lib/assets/css/_shadows.pcss
Normal file
36
@xen-orchestra/web-core/lib/assets/css/_shadows.pcss
Normal file
@@ -0,0 +1,36 @@
|
||||
:root {
|
||||
--shadow-100: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.06);
|
||||
|
||||
--shadow-200: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.08), 0 0.2rem 0.1rem 0 rgba(26, 27, 56, 0.06),
|
||||
0 0.1rem 0.3rem 0 rgba(26, 27, 56, 0.1);
|
||||
|
||||
--shadow-300: 0 0.6rem 1rem 0 rgba(26, 27, 56, 0.08), 0 0.1rem 1.8rem 0 rgba(26, 27, 56, 0.06),
|
||||
0 0.3rem 0.5rem 0 rgba(26, 27, 56, 0.1);
|
||||
|
||||
--shadow-400: 0 2.4rem 3.8rem 0 rgba(26, 27, 56, 0.04), 0 0.9rem 4.6rem 0 rgba(26, 27, 56, 0.06),
|
||||
0 1.1rem 1.5rem 0 rgba(26, 27, 56, 0.1);
|
||||
|
||||
--shadow-500: 0 0.4rem 5rem 0 rgba(26, 27, 56, 0.25);
|
||||
|
||||
--shadow-left: 0 0 0 0 rgba(26, 27, 56, 0.1), -0.9rem 0 2rem 0 rgba(26, 27, 56, 0.1),
|
||||
-3.7rem 0 3.7rem 0 rgba(26, 27, 56, 0.09), -8.3rem 0 5rem 0 rgba(26, 27, 56, 0.05),
|
||||
-14.8rem 0 5.9rem 0 rgba(26, 27, 56, 0.01), -23.1rem 0 6.5rem 0 rgba(26, 27, 56, 0);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--shadow-100: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
--shadow-200: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.16), 0 0.2rem 0.1rem 0 rgba(0, 0, 0, 0.12),
|
||||
0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
--shadow-300: 0 0.6rem 1rem 0 rgba(0, 0, 0, 0.16), 0 0.1rem 1.8rem 0 rgba(0, 0, 0, 0.12),
|
||||
0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
--shadow-400: 0 2.4rem 3.8rem 0 rgba(0, 0, 0, 0.08), 0 0.9rem 4.6rem 0 rgba(0, 0, 0, 0.12),
|
||||
0 1.1rem 1.5rem 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
--shadow-500: 0 0.4rem 5rem 0 rgba(0, 0, 0, 0.8);
|
||||
|
||||
--shadow-left: 0 0 0 0 rgba(0, 0, 0, 0.5), -0.9rem 0 2rem 0 rgba(0, 0, 0, 0.45), -3.7rem 0 3.7rem 0 rgba(0, 0, 0, 0.4),
|
||||
-8.3rem 0 5rem 0 rgba(0, 0, 0, 0.35), -14.8rem 0 5.9rem 0 rgba(0, 0, 0, 0.3), -23.1rem 0 6.5rem 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
123
@xen-orchestra/web-core/lib/assets/css/_typography.pcss
Normal file
123
@xen-orchestra/web-core/lib/assets/css/_typography.pcss
Normal file
@@ -0,0 +1,123 @@
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
.h7,
|
||||
.p1,
|
||||
.p2,
|
||||
.p3,
|
||||
.p4,
|
||||
.c1,
|
||||
.c2,
|
||||
.c3,
|
||||
.c4,
|
||||
.c5 {
|
||||
font-weight: 400;
|
||||
|
||||
&.black {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&.semi-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
.h7,
|
||||
.p1,
|
||||
.p2,
|
||||
.p3,
|
||||
.p4,
|
||||
.c1,
|
||||
.c2,
|
||||
.c3,
|
||||
.c4,
|
||||
.c5 {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.p1,
|
||||
.p2,
|
||||
.p3,
|
||||
.p4,
|
||||
.c1,
|
||||
.c2,
|
||||
.c3,
|
||||
.c4,
|
||||
.c5 {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 4.8rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 2.4rem;
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.h6,
|
||||
.p1,
|
||||
.c1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.h7,
|
||||
.p2,
|
||||
.c2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.p3,
|
||||
.c3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.p4,
|
||||
.c4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.c1,
|
||||
.c2,
|
||||
.c3,
|
||||
.c4,
|
||||
.c5 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
53
@xen-orchestra/web-core/lib/assets/css/base.pcss
Normal file
53
@xen-orchestra/web-core/lib/assets/css/base.pcss
Normal file
@@ -0,0 +1,53 @@
|
||||
@import '_colors.pcss';
|
||||
@import '_reset.pcss';
|
||||
@import '_fonts.pcss';
|
||||
@import '_context.pcss';
|
||||
@import '_shadows.pcss';
|
||||
@import '_typography.pcss';
|
||||
|
||||
:root {
|
||||
color: var(--color-grey-100);
|
||||
background-color: var(--background-color-primary);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
&.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-purple-base);
|
||||
}
|
||||
|
||||
code,
|
||||
code *,
|
||||
pre {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.card-view {
|
||||
padding: 1.2rem;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
color: var(--color-purple-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--color-purple-d20);
|
||||
}
|
||||
|
||||
.link:active,
|
||||
.link.router-link-active {
|
||||
color: var(--color-purple-d40);
|
||||
}
|
||||
|
||||
.link.router-link-active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
18
@xen-orchestra/web-core/package.json
Normal file
18
@xen-orchestra/web-core/package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@xen-orchestra/web-core",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"exports": {
|
||||
"./*": {
|
||||
"types": "./lib/*",
|
||||
"import": "./lib/*"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"lib"
|
||||
],
|
||||
"devDependencies": {
|
||||
"vue": "^3.4.7"
|
||||
}
|
||||
}
|
||||
75
yarn.lock
75
yarn.lock
@@ -1963,6 +1963,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.7.tgz#a4836e3dbd693081a30b32ce9c2a781e1be16788"
|
||||
integrity sha512-lHPKJDkPUECsyAvD60joYfDmp8UERYxHGkFfyLJFTVK/ERJe0sVlIFLXU5XFxdjNDTerp5L4KeaKG+Z5S94qxQ==
|
||||
|
||||
"@csstools/postcss-global-data@^2.1.1":
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@csstools/postcss-global-data/-/postcss-global-data-2.1.1.tgz#b7250b5387f529cd3aa1a8dd966c1123f58c718b"
|
||||
integrity sha512-tihdBLogY2G5jgUSu2jKSEVeOcnWqsz6k7UmPM7+ezhuV9FP5MIyX35Hc/YvqipQLRNsfBj9wRkBvsE7k1GM8A==
|
||||
|
||||
"@esbuild/aix-ppc64@0.19.11":
|
||||
version "0.19.11"
|
||||
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3"
|
||||
@@ -5807,6 +5812,11 @@ bach@^1.0.0:
|
||||
async-settle "^1.0.0"
|
||||
now-and-later "^2.0.0"
|
||||
|
||||
balanced-match@0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
|
||||
integrity sha512-4xb6XqAEo3Z+5pEDJz33R8BZXI8FRJU+cDNLdKgDpmnz+pKKRVYLpdv+VvUAC7yUhBMj4izmyt19eCGv1QGV7A==
|
||||
|
||||
balanced-match@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
|
||||
@@ -7089,7 +7099,7 @@ collection-visit@^1.0.0:
|
||||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^1.9.0, color-convert@^1.9.3:
|
||||
color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
@@ -7113,6 +7123,13 @@ color-name@^1.0.0, color-name@~1.1.4:
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
color-string@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
|
||||
integrity sha512-sz29j1bmSDfoAxKIEU6zwoIZXN6BrFbAMIhfYCNyiZXBDuU/aiHlN84lp/xDzL2ubyFhLDobHIlU1X70XRrMDA==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
color-string@^1.6.0:
|
||||
version "1.9.1"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
|
||||
@@ -7126,6 +7143,15 @@ color-support@^1.1.0, color-support@^1.1.2, color-support@^1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
|
||||
integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
|
||||
|
||||
color@^0.11.0:
|
||||
version "0.11.4"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
|
||||
integrity sha512-Ajpjd8asqZ6EdxQeqGzU5WBhhTfJ/0cA4Wlbre7e5vXfmDSmda7Ov6jeKoru+b0vHcb1CqvuroTHp5zIWzhVMA==
|
||||
dependencies:
|
||||
clone "^1.0.2"
|
||||
color-convert "^1.3.0"
|
||||
color-string "^0.3.0"
|
||||
|
||||
color@^3.0.0:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
|
||||
@@ -7645,6 +7671,16 @@ cson-parser@^4.0.7:
|
||||
dependencies:
|
||||
coffeescript "1.12.7"
|
||||
|
||||
css-color-function@~1.3.3:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.3.tgz#8ed24c2c0205073339fafa004bc8c141fccb282e"
|
||||
integrity sha512-YD/WhiRZIYgadwFJ48X5QmlOQ/w8Me4yQI6/eSUoiE8spIFp+S/rGpsAH48iyq/0ZWkCDWqVQKUlQmUzn7BQ9w==
|
||||
dependencies:
|
||||
balanced-match "0.1.0"
|
||||
color "^0.11.0"
|
||||
debug "^3.1.0"
|
||||
rgb "~0.1.0"
|
||||
|
||||
css-color-keywords@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
|
||||
@@ -8254,7 +8290,7 @@ debug@2.6.9, debug@^2.1.0, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
debug@3.X, debug@^3.2.7:
|
||||
debug@3.X, debug@^3.1.0, debug@^3.2.7:
|
||||
version "3.2.7"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
|
||||
integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
|
||||
@@ -16690,6 +16726,16 @@ postcss-calc@^7.0.1:
|
||||
postcss-selector-parser "^6.0.2"
|
||||
postcss-value-parser "^4.0.2"
|
||||
|
||||
postcss-color-function@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-4.1.0.tgz#b6f9355e07b12fcc5c34dab957834769b03d8f57"
|
||||
integrity sha512-2/fuv6mP5Lt03XbRpVfMdGC8lRP1sykme+H1bR4ARyOmSMB8LPSjcL6EAI1iX6dqUF+jNEvKIVVXhan1w/oFDQ==
|
||||
dependencies:
|
||||
css-color-function "~1.3.3"
|
||||
postcss "^6.0.23"
|
||||
postcss-message-helpers "^2.0.0"
|
||||
postcss-value-parser "^3.3.1"
|
||||
|
||||
postcss-colormin@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
|
||||
@@ -16787,6 +16833,11 @@ postcss-merge-rules@^4.0.3:
|
||||
postcss-selector-parser "^3.0.0"
|
||||
vendors "^1.0.0"
|
||||
|
||||
postcss-message-helpers@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
|
||||
integrity sha512-tPLZzVAiIJp46TBbpXtrUAKqedXSyW5xDEo1sikrfEfnTs+49SBZR/xDdqCiJvSSbtr615xDsaMF3RrxS2jZlA==
|
||||
|
||||
postcss-minify-font-values@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
|
||||
@@ -17000,6 +17051,14 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.11, postcss-selecto
|
||||
cssesc "^3.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
postcss-selector-parser@^6.0.13:
|
||||
version "6.0.15"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
|
||||
integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
|
||||
dependencies:
|
||||
cssesc "^3.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
postcss-svgo@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
|
||||
@@ -17039,7 +17098,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
|
||||
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
|
||||
|
||||
postcss@^6.0.1, postcss@^6.0.11:
|
||||
postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.23:
|
||||
version "6.0.23"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
|
||||
integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
|
||||
@@ -18663,6 +18722,11 @@ rgb-regex@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
|
||||
integrity sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==
|
||||
|
||||
rgb@~0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
|
||||
integrity sha512-F49dXX73a92N09uQkfCp2QjwXpmJcn9/i9PvjmwsSIXUGqRLCf/yx5Q9gRxuLQTq248kakqQuc8GX/U/CxSqlA==
|
||||
|
||||
rgba-regex@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
|
||||
@@ -19920,11 +19984,6 @@ strip-json-comments@^3.1.1:
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
|
||||
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
|
||||
|
||||
strip-json-comments@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-5.0.1.tgz#0d8b7d01b23848ed7dbdf4baaaa31a8250d8cfa0"
|
||||
integrity sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==
|
||||
|
||||
strip-json-comments@~2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||
|
||||
Reference in New Issue
Block a user