sky121113
a599b14df1
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m6s
1. 修復帳號管理與角色權限頁面搜尋功能，支援 Enter 鍵快捷提交。 2. 完成 B013 (機台故障上報) API 實作，改用非同步隊列 (ProcessMachineError) 處理日誌上報。 3. 精簡 B013 API 參數，移除冗餘的 message 欄位，統一由雲端對照表翻譯。 4. 更新技術規格文件 (SKILL.md) 與系統 API 文件配置 (api-docs.php)。 5. 修正平台管理員帳號在搜尋過濾時的資料隔離邏輯。
534 lines
16 KiB
CSS
534 lines
16 KiB
CSS
@import 'flatpickr/dist/flatpickr.min.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-display: 'Outfit', var(--font-sans);
|
|
--color-luxury-deep: #0f172a;
|
|
--color-luxury-card: #1e293b;
|
|
--color-accent: #06b6d4;
|
|
/* Cyan 500 */
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Luxury Cards */
|
|
.luxury-card {
|
|
@apply bg-white dark:bg-[#1e293b] border-0 rounded-2xl;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.luxury-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Luxury Gradient Accents */
|
|
.bg-luxury-gradient {
|
|
background: linear-gradient(135deg, var(--color-accent), #6366f1);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-luxury-in {
|
|
animation: fadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
/* Additional Loading Animations */
|
|
@keyframes fadeInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-right {
|
|
animation: fadeInRight 0.8s ease-out forwards;
|
|
}
|
|
|
|
@keyframes trickle {
|
|
0% { width: 0%; opacity: 1; }
|
|
20% { width: 30%; }
|
|
50% { width: 70%; }
|
|
80% { width: 90%; }
|
|
95% { width: 95%; }
|
|
100% { width: 95%; }
|
|
}
|
|
|
|
.animate-trickle {
|
|
animation: trickle 10s cubic-bezier(0.1, 0.5, 0.5, 1) forwards;
|
|
}
|
|
|
|
/* Top Progress Bar (Trickle Style) */
|
|
.top-loading-bar {
|
|
@apply fixed top-0 left-0 right-0 h-0.5 z-[99999] bg-gradient-to-r from-cyan-500 to-blue-500 opacity-0 transition-opacity duration-300;
|
|
width: 0%;
|
|
}
|
|
|
|
.top-loading-bar.loading {
|
|
@apply opacity-100;
|
|
animation: trickle 12s cubic-bezier(0.1, 0.5, 0.5, 1) forwards;
|
|
}
|
|
|
|
@keyframes loadingPulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
/* Skeleton Loading Utilities (Option C) */
|
|
.skeleton {
|
|
@apply bg-slate-100 dark:bg-slate-800 animate-pulse-subtle rounded-lg overflow-hidden relative border-none !text-transparent selection:bg-transparent pointer-events-none;
|
|
}
|
|
|
|
@keyframes pulse-subtle {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.animate-pulse-subtle {
|
|
animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* Custom Scrollbar - Minimal & Elegant */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #94a3b8;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #334155;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #64748b;
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #94a3b8 transparent;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.luxury-nav-item {
|
|
@apply flex items-center gap-x-3.5 py-2.5 px-4 text-sm font-semibold rounded-xl transition-all duration-200;
|
|
@apply text-slate-600 hover:text-slate-900 hover:bg-slate-100;
|
|
@apply dark:text-slate-300 dark:hover:text-white dark:hover:bg-white/5;
|
|
}
|
|
|
|
.luxury-nav-item.active {
|
|
@apply bg-slate-100 text-slate-900;
|
|
@apply dark:bg-white/10 dark:text-white;
|
|
position: relative;
|
|
}
|
|
|
|
.luxury-nav-item.active::before {
|
|
content: "";
|
|
@apply absolute left-0 w-1 h-5 bg-cyan-500 rounded-full;
|
|
box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
|
|
}
|
|
|
|
/* Submenu styling */
|
|
.luxury-submenu {
|
|
@apply mt-2 space-y-1 ps-4 border-l border-slate-200 ms-4;
|
|
@apply dark:border-white/10;
|
|
}
|
|
|
|
/* Luxury Buttons */
|
|
.btn-luxury-primary {
|
|
@apply inline-flex items-center justify-center gap-x-2 px-4 py-2.5 text-sm font-semibold rounded-xl text-white transition-all duration-200;
|
|
background: linear-gradient(135deg, #06b6d4, #3b82f6);
|
|
box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
|
|
}
|
|
|
|
.btn-luxury-primary:hover {
|
|
@apply -translate-y-0.5;
|
|
box-shadow: 0 8px 20px -4px rgba(6, 182, 212, 0.4);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.btn-luxury-primary:active {
|
|
@apply translate-y-0 scale-[0.98];
|
|
}
|
|
|
|
.btn-luxury-rose {
|
|
@apply inline-flex items-center justify-center gap-x-2 px-4 py-2.5 text-sm font-semibold rounded-xl text-white transition-all duration-300;
|
|
background: linear-gradient(135deg, #f43f5e, #e11d48);
|
|
box-shadow: 0 4px 12px -2px rgba(225, 29, 72, 0.3), 0 0 0 1px rgba(225, 29, 72, 0.1);
|
|
}
|
|
|
|
.btn-luxury-rose:hover {
|
|
@apply -translate-y-0.5;
|
|
box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.5), 0 0 15px rgba(225, 29, 72, 0.2);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.btn-luxury-rose:active {
|
|
@apply translate-y-0 scale-[0.97];
|
|
}
|
|
|
|
.btn-luxury-secondary {
|
|
@apply inline-flex items-center justify-center gap-x-2 px-3 py-2 text-sm font-semibold rounded-xl transition-all duration-200;
|
|
@apply bg-white text-slate-700 border border-slate-200 shadow-sm;
|
|
@apply dark:bg-slate-800 dark:text-white dark:border-slate-700;
|
|
}
|
|
|
|
.btn-luxury-secondary:hover {
|
|
@apply bg-slate-50 border-slate-300 -translate-y-0.5 shadow-md;
|
|
@apply dark:bg-slate-700/50 dark:border-slate-600;
|
|
}
|
|
|
|
.btn-luxury-ghost {
|
|
@apply inline-flex items-center justify-center gap-x-2 px-4 py-2 text-sm font-bold rounded-xl transition-all duration-200;
|
|
@apply text-slate-500 hover:bg-slate-100 hover:text-slate-900;
|
|
@apply dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-cyan-400;
|
|
}
|
|
|
|
/* Luxury Form Elements */
|
|
.luxury-input, .luxury-select {
|
|
@apply py-3 px-5 block w-full border-slate-200 rounded-xl text-sm font-bold text-slate-700 placeholder-slate-400 transition-all duration-200 outline-none border;
|
|
@apply dark:bg-slate-900/40 dark:border-slate-700 dark:text-slate-200 dark:placeholder-slate-500;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.luxury-input:focus, .luxury-select:focus {
|
|
@apply ring-4 ring-cyan-500/10 border-cyan-500;
|
|
@apply dark:ring-cyan-500/20 dark:border-cyan-400/50;
|
|
}
|
|
|
|
/* Input Icon Optimization (Date/Time) */
|
|
.luxury-input[type="date"]::-webkit-calendar-picker-indicator,
|
|
.luxury-input[type="time"]::-webkit-calendar-picker-indicator,
|
|
.luxury-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
@apply cursor-pointer transition-opacity hover:opacity-100;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.dark .luxury-input[type="date"]::-webkit-calendar-picker-indicator,
|
|
.dark .luxury-input[type="time"]::-webkit-calendar-picker-indicator,
|
|
.dark .luxury-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.luxury-select {
|
|
@apply appearance-none pr-10;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 0.85rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.25em 1.25em;
|
|
}
|
|
|
|
/* Preline Searchable Select Customizations */
|
|
.hs-select-toggle.luxury-select-toggle {
|
|
@apply luxury-input pr-10 cursor-pointer text-start flex items-center justify-between relative;
|
|
}
|
|
|
|
.hs-select-toggle.luxury-select-toggle::after {
|
|
content: "";
|
|
@apply absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 transition-transform duration-300 pointer-events-none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* 當選單開啟時旋轉箭頭 */
|
|
.hs-select.active .hs-select-toggle::after,
|
|
.hs-select-toggle.active::after,
|
|
.hs-select-toggle[aria-expanded="true"]::after {
|
|
@apply rotate-180;
|
|
}
|
|
|
|
.hs-select-menu {
|
|
@apply mt-2 max-h-72 p-2 space-y-0.5 z-50 bg-white border border-slate-200 rounded-2xl shadow-2xl overflow-y-auto;
|
|
@apply dark:bg-slate-900 dark:border-slate-800;
|
|
}
|
|
|
|
.hs-select-option {
|
|
@apply py-2.5 px-4 w-full text-sm font-bold text-slate-700 cursor-pointer hover:bg-slate-50 rounded-xl transition-colors;
|
|
@apply dark:text-slate-200 dark:hover:bg-slate-800;
|
|
}
|
|
|
|
.hs-selected.hs-select-option {
|
|
@apply bg-cyan-50 text-cyan-600;
|
|
@apply dark:bg-cyan-500/10 dark:text-cyan-400;
|
|
}
|
|
|
|
.hs-select-search-wrapper {
|
|
@apply p-2 sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-10 mb-1 border-b border-slate-100 dark:border-slate-800;
|
|
}
|
|
|
|
.hs-select-search-input {
|
|
@apply luxury-input py-2 px-3 text-xs border-slate-100 dark:border-slate-800;
|
|
}
|
|
|
|
/* Small variants for filter bars */
|
|
.luxury-input-sm {
|
|
@apply py-2.5 text-sm !important;
|
|
}
|
|
|
|
.luxury-select-sm .hs-select-toggle {
|
|
@apply py-2.5 text-sm !important;
|
|
}
|
|
}
|
|
/* Flatpickr Luxury Theme Overrides */
|
|
.flatpickr-calendar {
|
|
border: 1px solid #e2e8f0 !important;
|
|
border-radius: 1.25rem !important;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
|
|
background: #ffffff !important;
|
|
padding: 4px !important;
|
|
}
|
|
|
|
.dark .flatpickr-calendar {
|
|
background: #1e293b !important;
|
|
border-color: #334155 !important;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
.flatpickr-day {
|
|
color: #475569 !important;
|
|
border-radius: 12px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.dark .flatpickr-day {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
.flatpickr-day.prevMonthDay,
|
|
.flatpickr-day.nextMonthDay {
|
|
color: #cbd5e1 !important;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.dark .flatpickr-day.prevMonthDay,
|
|
.dark .flatpickr-day.nextMonthDay {
|
|
color: #475569 !important;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.flatpickr-day.today {
|
|
border-color: #06b6d4 !important;
|
|
color: #06b6d4 !important;
|
|
}
|
|
|
|
.flatpickr-day.selected {
|
|
background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
|
|
border-color: transparent !important;
|
|
color: white !important;
|
|
box-shadow: 0 8px 15px -3px rgba(6, 182, 212, 0.4) !important;
|
|
}
|
|
|
|
.flatpickr-day:not(.selected):hover {
|
|
background: #f1f5f9 !important;
|
|
}
|
|
|
|
.dark .flatpickr-day:not(.selected):hover {
|
|
background: #334155 !important;
|
|
}
|
|
|
|
/* Weekdays & Header */
|
|
.flatpickr-weekday {
|
|
color: #94a3b8 !important;
|
|
font-weight: 800 !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.dark .flatpickr-weekday {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
.flatpickr-months .flatpickr-month {
|
|
color: #1e293b !important;
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
.dark .flatpickr-months .flatpickr-month {
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
.flatpickr-prev-month,
|
|
.flatpickr-next-month {
|
|
color: #1e293b !important;
|
|
fill: currentColor !important;
|
|
@apply transition-colors duration-200 !important;
|
|
}
|
|
|
|
.dark .flatpickr-prev-month,
|
|
.dark .flatpickr-next-month {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
.flatpickr-prev-month:hover,
|
|
.flatpickr-next-month:hover {
|
|
color: #06b6d4 !important;
|
|
}
|
|
|
|
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
|
font-weight: 800 !important;
|
|
@apply bg-transparent dark:bg-slate-800 text-slate-900 dark:text-slate-100 !important;
|
|
border: none !important;
|
|
border-radius: 6px !important;
|
|
padding: 2px 4px !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.flatpickr-monthDropdown-month {
|
|
@apply bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 !important;
|
|
}
|
|
|
|
/* Time Section */
|
|
.flatpickr-time {
|
|
border-top: 1px solid #f1f5f9 !important;
|
|
margin-top: 8px !important;
|
|
padding-top: 8px !important;
|
|
}
|
|
|
|
.dark .flatpickr-time {
|
|
border-top-color: #334155 !important;
|
|
}
|
|
|
|
.flatpickr-time input {
|
|
color: #1e293b !important;
|
|
font-weight: 800 !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.dark .flatpickr-time input {
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
.flatpickr-time input:hover,
|
|
.flatpickr-time input:focus {
|
|
background: #f1f5f9 !important;
|
|
}
|
|
|
|
.dark .flatpickr-time input:hover,
|
|
.dark .flatpickr-time input:focus {
|
|
background: #334155 !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .flatpickr-am-pm {
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
/* Time Stepper Arrows & Separator */
|
|
.flatpickr-time .numInputWrapper span.arrowUp:after {
|
|
border-bottom-color: #94a3b8 !important;
|
|
}
|
|
|
|
.flatpickr-time .numInputWrapper span.arrowUp:hover:after {
|
|
border-bottom-color: #06b6d4 !important;
|
|
}
|
|
|
|
.flatpickr-time .numInputWrapper span.arrowDown:after {
|
|
border-top-color: #94a3b8 !important;
|
|
}
|
|
|
|
.flatpickr-time .numInputWrapper span.arrowDown:hover:after {
|
|
border-top-color: #06b6d4 !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .numInputWrapper span.arrowUp:after {
|
|
border-bottom-color: #64748b !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .numInputWrapper span.arrowUp:hover:after {
|
|
border-bottom-color: #06b6d4 !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .numInputWrapper span.arrowDown:after {
|
|
border-top-color: #64748b !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .numInputWrapper span.arrowDown:hover:after {
|
|
border-top-color: #06b6d4 !important;
|
|
}
|
|
|
|
.flatpickr-time .numInputWrapper span {
|
|
border-color: #f1f5f9 !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .numInputWrapper span {
|
|
border-color: #334155 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .numInputWrapper span:hover {
|
|
background: #334155 !important;
|
|
}
|
|
|
|
.flatpickr-time .flatpickr-time-separator {
|
|
color: #94a3b8 !important;
|
|
}
|
|
|
|
.dark .flatpickr-time .flatpickr-time-separator {
|
|
color: #64748b !important;
|
|
}
|
|
|
|
.flatpickr-weekdays {
|
|
background: transparent !important;
|
|
}
|
|
|