mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-06 01:56:37 +08:00
feat(frontend): wire pages to shadcn bridge and modular helpers
This commit is contained in:
Sagit
@@ -1,71 +1,128 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
|
||||
/* 移动端视口高度优化 */
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 现代浏览器使用 100dvh，避免地址栏收起/展开导致的布局跳动 */
|
||||
@supports (height: 100dvh) {
|
||||
.h-screen {
|
||||
height: 100dvh;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
/* 解决移动端100vh问题 */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.h-screen {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端滚动优化 */
|
||||
@media (max-width: 768px) {
|
||||
* {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 安全区域变量与工具类（适配刘海/底部手势条） */
|
||||
:root {
|
||||
--safe-area-top: env(safe-area-inset-top, 0px);
|
||||
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
||||
|
||||
--background: #f6f7fb;
|
||||
--foreground: #111827;
|
||||
--border: #e5e7eb;
|
||||
--input: #d1d5db;
|
||||
--ring: #93c5fd;
|
||||
|
||||
--content1: #ffffff;
|
||||
--divider: #e5e7eb;
|
||||
|
||||
--default-50: #f9fafb;
|
||||
--default-100: #f3f4f6;
|
||||
--default-200: #e5e7eb;
|
||||
--default-300: #d1d5db;
|
||||
--default-400: #9ca3af;
|
||||
--default-500: #6b7280;
|
||||
--default-600: #4b5563;
|
||||
--default-700: #374151;
|
||||
--default-800: #1f2937;
|
||||
--default-900: #111827;
|
||||
|
||||
--primary-50: #eff6ff;
|
||||
--primary-100: #dbeafe;
|
||||
--primary-200: #bfdbfe;
|
||||
--primary-300: #93c5fd;
|
||||
--primary-400: #60a5fa;
|
||||
--primary-500: #3b82f6;
|
||||
--primary-600: #2563eb;
|
||||
--primary-700: #1d4ed8;
|
||||
--primary-800: #1e40af;
|
||||
--primary-900: #1e3a8a;
|
||||
|
||||
--secondary-50: #eef2ff;
|
||||
--secondary-100: #e0e7ff;
|
||||
--secondary-200: #c7d2fe;
|
||||
--secondary-300: #a5b4fc;
|
||||
--secondary-400: #818cf8;
|
||||
--secondary-500: #6366f1;
|
||||
--secondary-600: #4f46e5;
|
||||
--secondary-700: #4338ca;
|
||||
--secondary-800: #3730a3;
|
||||
--secondary-900: #312e81;
|
||||
|
||||
--danger-50: #fef2f2;
|
||||
--danger-100: #fee2e2;
|
||||
--danger-200: #fecaca;
|
||||
--danger-300: #fca5a5;
|
||||
--danger-400: #f87171;
|
||||
--danger-500: #ef4444;
|
||||
--danger-600: #dc2626;
|
||||
--danger-700: #b91c1c;
|
||||
--danger-800: #991b1b;
|
||||
--danger-900: #7f1d1d;
|
||||
|
||||
--success-50: #f0fdf4;
|
||||
--success-100: #dcfce7;
|
||||
--success-200: #bbf7d0;
|
||||
--success-300: #86efac;
|
||||
--success-400: #4ade80;
|
||||
--success-500: #22c55e;
|
||||
--success-600: #16a34a;
|
||||
--success-700: #15803d;
|
||||
--success-800: #166534;
|
||||
--success-900: #14532d;
|
||||
|
||||
--warning-50: #fffbeb;
|
||||
--warning-100: #fef3c7;
|
||||
--warning-200: #fde68a;
|
||||
--warning-300: #fcd34d;
|
||||
--warning-400: #fbbf24;
|
||||
--warning-500: #f59e0b;
|
||||
--warning-600: #d97706;
|
||||
--warning-700: #b45309;
|
||||
--warning-800: #92400e;
|
||||
--warning-900: #78350f;
|
||||
|
||||
--primary: #2563eb;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #6366f1;
|
||||
--secondary-foreground: #ffffff;
|
||||
--danger: #dc2626;
|
||||
--success: #16a34a;
|
||||
--warning: #d97706;
|
||||
}
|
||||
|
||||
[data-slot="input-wrapper"] {
|
||||
box-shadow: none;
|
||||
.dark {
|
||||
--background: #0b1020;
|
||||
--foreground: #f3f4f6;
|
||||
--border: #334155;
|
||||
--input: #475569;
|
||||
--ring: #60a5fa;
|
||||
|
||||
--content1: #111827;
|
||||
--divider: #334155;
|
||||
|
||||
--default-50: #0f172a;
|
||||
--default-100: #1e293b;
|
||||
--default-200: #334155;
|
||||
--default-300: #475569;
|
||||
--default-400: #64748b;
|
||||
--default-500: #94a3b8;
|
||||
--default-600: #cbd5e1;
|
||||
--default-700: #e2e8f0;
|
||||
--default-800: #f1f5f9;
|
||||
--default-900: #f8fafc;
|
||||
|
||||
--primary: #3b82f6;
|
||||
--secondary: #818cf8;
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
--warning: #f59e0b;
|
||||
}
|
||||
|
||||
[data-slot="input-wrapper"]:focus-within:not([data-invalid="true"]),
|
||||
[data-slot="input-wrapper"][data-focus="true"]:not([data-invalid="true"]),
|
||||
[data-slot="input-wrapper"][data-focused="true"]:not([data-invalid="true"]),
|
||||
button[data-slot="trigger"][data-focus="true"]:not([data-invalid="true"]),
|
||||
button[data-slot="trigger"][data-open="true"]:not([data-invalid="true"]) {
|
||||
border-color: var(--heroui-default-200, #e5e7eb) !important;
|
||||
outline: none !important;
|
||||
outline-offset: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
[data-slot="input-wrapper"] input:focus,
|
||||
[data-slot="input-wrapper"] textarea:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border-color: transparent !important;
|
||||
html,
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.safe-top {
|
||||
@@ -76,8 +133,46 @@ button[data-slot="trigger"][data-open="true"]:not([data-invalid="true"]) {
|
||||
padding-bottom: var(--safe-area-bottom);
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-tiny {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.h-screen {
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.h-screen {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
* {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 验证码弹层动画 */
|
||||
.captcha-modal-enter {
|
||||
animation: captchaModalIn 0.3s ease-out forwards;
|
||||
}
|
||||
@@ -87,13 +182,13 @@ button[data-slot="trigger"][data-open="true"]:not([data-invalid="true"]) {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 验证码弹层背景渐入 */
|
||||
.captcha-backdrop-enter {
|
||||
animation: backdropFadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
@@ -102,9 +197,8 @@ button[data-slot="trigger"][data-open="true"]:not([data-invalid="true"]) {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@config "../../tailwind.config.js"
|
||||
|
||||
Reference in New Issue
Block a user