lethdat
16caa9281b
- Added save functionality with toast notifications in NotificationSettings.vue and PlayerSettings.vue. - Improved layout and styling in NotificationSettings.vue and PlayerSettings.vue for better user experience. - Refactored PlayerSettings.vue to use a dynamic settingsItems array for rendering toggle switches. - Updated SecurityNConnected.vue to enhance security settings UI, including two-factor authentication and connected accounts management. - Introduced dialogs for changing passwords and enabling two-factor authentication with improved UX. - Added scrollbar-gutter CSS property to prevent layout shifts when dialogs open in uno.config.ts.
344 lines
8.4 KiB
TypeScript
344 lines
8.4 KiB
TypeScript
import { defineConfig, presetAttributify, presetTypography, presetWind4, transformerCompileClass, transformerVariantGroup } from 'unocss';
|
|
import { presetBootstrapBtn } from "./bootstrap_btn";
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
presetWind4() as any,
|
|
presetTypography(),
|
|
presetBootstrapBtn(),
|
|
presetAttributify(),
|
|
],
|
|
// By default, `.ts` and `.js` files are NOT extracted.
|
|
// If you want to extract them, use the following configuration.
|
|
// It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
|
|
content: {
|
|
pipeline: {
|
|
include: [
|
|
// the default
|
|
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
|
// include js/ts files
|
|
"(components|src)/**/*.{js,ts,vue,jsx,tsx}",
|
|
"./src/**/*.{js,jsx,ts,tsx,vue,md,mdx,html,svelte,astro}",
|
|
"./src/**/*.server.{js,jsx,ts,tsx,vue,md,mdx,html,svelte,astro}",
|
|
"../server/**/*.{ts,tsx,js,jsx,html}",
|
|
],
|
|
},
|
|
},
|
|
theme: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: "#14a74b",
|
|
50: "#effcf3",
|
|
100: "#dcf9e2",
|
|
200: "#bbf0c8",
|
|
300: "#86efac",
|
|
400: "#4ade80",
|
|
500: "#14a74b",
|
|
600: "#16a34a",
|
|
700: "#15803d",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
950: "#052e16",
|
|
light: "#4ade80",
|
|
active: "#15803d",
|
|
"active-light": "#bbf0c8",
|
|
dark: "#14532d",
|
|
},
|
|
accent: {
|
|
DEFAULT: "#14a74b",
|
|
50: "#ecfdf3",
|
|
100: "#d1fae5",
|
|
200: "#a7f3d0",
|
|
300: "#6ee7b7",
|
|
400: "#34d399",
|
|
500: "#14a74b",
|
|
600: "#0f8a3d",
|
|
700: "#0c6f33",
|
|
800: "#095a2a",
|
|
900: "#064622",
|
|
950: "#032814",
|
|
},
|
|
success: {
|
|
DEFAULT: "#22c55e",
|
|
50: "#f0fdf4",
|
|
100: "#dcfce7",
|
|
200: "#bbf7d0",
|
|
300: "#86efac",
|
|
400: "#4ade80",
|
|
500: "#22c55e",
|
|
600: "#16a34a",
|
|
700: "#15803d",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
950: "#052e16",
|
|
light: "#4ade80",
|
|
},
|
|
info: {
|
|
DEFAULT: "#0ea5e9",
|
|
50: "#f0f9ff",
|
|
100: "#e0f2fe",
|
|
200: "#bae6fd",
|
|
300: "#7dd3fc",
|
|
400: "#38bdf8",
|
|
500: "#0ea5e9",
|
|
600: "#0284c7",
|
|
700: "#0369a1",
|
|
800: "#075985",
|
|
900: "#0c4a6e",
|
|
950: "#082f49",
|
|
light: "#38bdf8",
|
|
},
|
|
warning: {
|
|
DEFAULT: "#f59e0b",
|
|
50: "#fffbeb",
|
|
100: "#fef3c7",
|
|
200: "#fde68a",
|
|
300: "#fcd34d",
|
|
400: "#fbbf24",
|
|
500: "#f59e0b",
|
|
600: "#d97706",
|
|
700: "#b45309",
|
|
800: "#92400e",
|
|
900: "#78350f",
|
|
950: "#451a03",
|
|
light: "#fbbf24",
|
|
},
|
|
danger: {
|
|
DEFAULT: "#ef4444",
|
|
50: "#fef2f2",
|
|
100: "#fee2e2",
|
|
200: "#fecaca",
|
|
300: "#fca5a5",
|
|
400: "#f87171",
|
|
500: "#ef4444",
|
|
600: "#dc2626",
|
|
700: "#b91c1c",
|
|
800: "#991b1b",
|
|
900: "#7f1d1d",
|
|
950: "#450a0a",
|
|
light: "#f87171",
|
|
active: "#dc2626",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "#fd7906",
|
|
50: "#fff7ed",
|
|
100: "#ffedd5",
|
|
200: "#fed7aa",
|
|
300: "#fdba74",
|
|
400: "#fb923c",
|
|
500: "#fd7906",
|
|
600: "#ea580c",
|
|
700: "#c2410c",
|
|
800: "#9a3412",
|
|
900: "#7c2d12",
|
|
950: "#431407",
|
|
light: "#fb923c",
|
|
inverse: "#4b5675",
|
|
dark: "#c2410c",
|
|
},
|
|
dark: {
|
|
DEFAULT: "#111827",
|
|
light: "#374151",
|
|
50: "#f9fafb",
|
|
100: "#f3f4f6",
|
|
200: "#e5e7eb",
|
|
300: "#d1d5db",
|
|
400: "#9ca3af",
|
|
500: "#6b7280",
|
|
600: "#4b5563",
|
|
700: "#374151",
|
|
800: "#1f2937",
|
|
900: "#111827",
|
|
950: "#030712",
|
|
},
|
|
white: {
|
|
DEFAULT: "#ffffff",
|
|
light: "#f8f9fa",
|
|
},
|
|
light: {
|
|
DEFAULT: "#f8f9fa",
|
|
light: "#e2e6ea",
|
|
dark: "#e2e6ea",
|
|
},
|
|
foreground: {
|
|
DEFAULT: "#111827",
|
|
light: "#374151",
|
|
dark: "#000000",
|
|
},
|
|
muted: {
|
|
DEFAULT: "#f3f4f6",
|
|
light: "#fafafa",
|
|
dark: "#e5e7eb",
|
|
},
|
|
page: {
|
|
DEFAULT: "#faf8f8",
|
|
light: "#f8f9fa",
|
|
},
|
|
surface: {
|
|
DEFAULT: "#fafafa",
|
|
light: "#f8f9fa",
|
|
},
|
|
muted: {
|
|
DEFAULT: "#f5f4f2",
|
|
light: "#f8f9fa",
|
|
},
|
|
border: {
|
|
DEFAULT: "#e6e7e2",
|
|
light: "#f8f9fa",
|
|
},
|
|
// bg: {
|
|
// page: "#faf8f8", // nền toàn trang
|
|
// surface: "#ffffff", // card, modal, table
|
|
// muted: "#f5f4f2", // section phụ
|
|
// border: "#e6e7e2", // viền
|
|
// }
|
|
},
|
|
boxShadow: {
|
|
"primary-box": "2px 2px 10px #aff6b8",
|
|
"card-box": "0px 3px 4px 0px #00000008",
|
|
},
|
|
radius: {
|
|
none: "0px",
|
|
sm: "0.125rem", // 2px
|
|
DEFAULT: "0.25rem", // 4px (áp dụng cho .rounded)
|
|
md: "0.375rem", // 6px
|
|
lg: "0.5rem", // 8px
|
|
xl: "0.75rem", // 12px
|
|
"2xl": "1rem", // 16px
|
|
"3xl": "1.5rem", // 24px
|
|
full: "9999px",
|
|
},
|
|
},
|
|
shortcuts: [
|
|
[
|
|
"press-animated",
|
|
"transition-all duration-200 ease-[cubic-bezier(.22,1,.36,1)] active:translate-y-0 active:scale-90 active:shadow-md",
|
|
],
|
|
["animate-loadingBar", ["animation", "loadingBar 1.5s linear infinite"]],
|
|
],
|
|
rules: [
|
|
['animate-spring-card', { animation: 'card-spring-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both' }],
|
|
],
|
|
transformers: [transformerVariantGroup(), transformerCompileClass({
|
|
classPrefix: "_",
|
|
})],
|
|
preflights: [
|
|
{
|
|
getCSS: (context) => {
|
|
return `
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
body {
|
|
scrollbar-gutter: stable !important;
|
|
}
|
|
/* Prevent layout shift when PrimeVue dialogs open */
|
|
body.p-overflow-hidden {
|
|
overflow: hidden !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
:root {
|
|
--font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-serif: 'Playfair Display', serif, 'Times New Roman', Times, serif;
|
|
--glow-stop-1: #ffc400;
|
|
--glow-stop-2: #ff9100;
|
|
--glow-stop-3: #f8682f;
|
|
--glow-stop-4: #e62c6d;
|
|
--glow-stop-5: #b25aff;
|
|
--capra-ramp-1: #ffc400;
|
|
--capra-ramp-2: #ff9100;
|
|
--capra-ramp-3: #ff530f;
|
|
--capra-ramp-4: #e62c6d;
|
|
--capra-ramp-5: #b25aff;
|
|
}
|
|
:focus {
|
|
outline-color: ${context.theme.colors?.primary?.active};
|
|
outline-width: 1px
|
|
}
|
|
@keyframes loadingBar {
|
|
0% { transform: translateX(-100%); }
|
|
50% { transform: translateX(0%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
.glass-nav {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
@keyframes card-spring-in {
|
|
0% { transform: scale(0.82) translateY(12px); opacity: 0; }
|
|
60% { transform: scale(1.04) translateY(-2px); opacity: 1; }
|
|
80% { transform: scale(0.98) translateY(1px); }
|
|
100% { transform: scale(1) translateY(0); }
|
|
}
|
|
@keyframes glow-enter-blur {
|
|
0% {
|
|
opacity: 0;
|
|
filter: blur(0);
|
|
}
|
|
100% {
|
|
opacity: 0.5;
|
|
filter: blur(60px);
|
|
}
|
|
}
|
|
@keyframes glow-enter-stroke {
|
|
0% {
|
|
background-position-x: 0%;
|
|
background-position-y: 0%;
|
|
}
|
|
100% {
|
|
background-position-x: 100%;
|
|
background-position-y: 100%;
|
|
}
|
|
}
|
|
@keyframes gradientShift {
|
|
0% {
|
|
background-position: 0% 0%;
|
|
}
|
|
12.5% {
|
|
background-position: 75% 25%;
|
|
}
|
|
25% {
|
|
background-position: 100% 50%;
|
|
}
|
|
37.5% {
|
|
background-position: 75% 75%;
|
|
}
|
|
50% {
|
|
background-position: 50% 100%;
|
|
}
|
|
62.5% {
|
|
background-position: 25% 75%;
|
|
}
|
|
75% {
|
|
background-position: 25% 50%;
|
|
}
|
|
87.5% {
|
|
background-position: 25% 25%;
|
|
}
|
|
100% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
|
|
|
|
`;
|
|
},
|
|
},
|
|
],
|
|
});
|