/* ========================================= 🌙 Worktime 系統深色模式樣式使用方式：在加上 .dark-mode ========================================= */ /* 基礎背景 + 文字顏色 */ body.dark-mode { background-color: #0f172a; color: #e5e7eb; } /* 若有用 bg-gray-100 當主背景 */ body.dark-mode .bg-gray-100 { background-color: #0f172a !important; } /* ================================ NAVBAR（含 h6 / span / icon） ================================ */ body.dark-mode .navbar-main, body.dark-mode nav.navbar { background-color: #020617 !important; color: #e5e7eb !important; box-shadow: none !important; } body.dark-mode .navbar-main h1, body.dark-mode .navbar-main h2, body.dark-mode .navbar-main h3, body.dark-mode .navbar-main h4, body.dark-mode .navbar-main h5, body.dark-mode .navbar-main h6, body.dark-mode .navbar-main span, body.dark-mode .navbar-main i, body.dark-mode .navbar-main .nav-link, body.dark-mode .navbar-main .text-body, body.dark-mode .navbar-main #nav-username { color: #e5e7eb !important; } /* ================================ SIDENAV + SIDENAV HEADER ================================ */ body.dark-mode .sidenav { background-color: #020617 !important; } body.dark-mode .sidenav .sidenav-header, body.dark-mode .sidenav .sidenav-header a, body.dark-mode .sidenav .sidenav-header span, body.dark-mode .sidenav .sidenav-header i { color: #e5e7eb !important; } /* sidenav 連結 */ body.dark-mode .sidenav .nav-link.text-dark { color: #e5e7eb !important; } body.dark-mode .sidenav .nav-link i { color: #cbd5e1 !important; } body.dark-mode .sidenav .nav-link.active { color: #ffffff !important; } /* ================================ CARD（含 header / body） ================================ */ body.dark-mode .card { background-color: #111827 !important; color: #e5e7eb !important; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2); } /* Card Header */ body.dark-mode .card .card-header { background-color: #020617 !important; border-bottom: 1px solid #1f2937 !important; } body.dark-mode .card .card-header h1, body.dark-mode .card .card-header h2, body.dark-mode .card .card-header h3, body.dark-mode .card .card-header h4, body.dark-mode .card .card-header h5, body.dark-mode .card .card-header h6, body.dark-mode .card .card-header span, body.dark-mode .card .card-header i { color: #e5e7eb !important; } /* Card Body（含 h4/h6/p/li/label 等） */ body.dark-mode .card .card-body, body.dark-mode .card .card-body * { color: #e5e7eb !important; } /* ================================ Footer ================================ */ body.dark-mode .footer { background-color: transparent; color: #9ca3af; } /* ================================ Text 類別覆蓋 ================================ */ body.dark-mode .text-dark { color: #e5e7eb !important; } body.dark-mode .text-muted { color: #9ca3af !important; } /* Border 顏色略暗，避免太刺眼 */ body.dark-mode .border, body.dark-mode .border-bottom, body.dark-mode .border-top, body.dark-mode .border-start, body.dark-mode .border-end { border-color: #1f2937 !important; } /* ========================================= 🌙 FullCalendar 深色模式 ========================================= */ body.dark-mode .fc { /* 整體底色稍微拉暗 */ background-color: transparent; } /* 月曆表格邊框、背景 */ body.dark-mode .fc .fc-scrollgrid, body.dark-mode .fc-theme-standard td, body.dark-mode .fc-theme-standard th { /* border-color: #1f2937 !important; */ border-color: #ffffff !important; } body.dark-mode .fc .fc-daygrid-day-frame { background-color: #020617; } /* 星期列、標題列 */ body.dark-mode .fc .fc-col-header-cell-cushion, body.dark-mode .fc .fc-toolbar-title { color: #e5e7eb !important; } body.dark-mode .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1.5rem; } /* Toolbar 按鈕 */ body.dark-mode .fc .fc-button-primary { background-color: #111827; border-color: #1f2937; color: #e5e7eb; } body.dark-mode .fc .fc-button-primary:hover { background-color: #1f2937; border-color: #374151; } body.dark-mode .fc .fc-button-primary:not(:disabled).fc-button-active { background-color: #2563eb; border-color: #1d4ed8; } /* 日期數字 */ body.dark-mode .fc .fc-daygrid-day-number { color: #e5e7eb !important; } /* 今天那格 */ body.dark-mode .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame { background-color: #ffeaa7 !important; } body.dark-mode .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color:#020617 !important; } /* 你原本標的假日 class（fc-day-holiday）在 dark 下再調整一下 */ body.dark-mode .fc-daygrid-day.fc-day-holiday .fc-daygrid-day-frame { background-color: rgba(248, 113, 113, 0.1); /* 淡紅 */ } body.dark-mode .fc-daygrid-day.fc-day-holiday .fc-daygrid-day-number { color: #c0392b !important; } /* 事件（工時）外觀 */ body.dark-mode .fc .fc-event { background-color: #2563eb; border-color: #3b82f6; color: #f9fafb; } /* event hover */ body.dark-mode .fc .fc-event:hover { background-color: #1d4ed8; border-color: #60a5fa; } /* 月曆底部 today / prev / next 底色 */ body.dark-mode .fc .fc-button-group .fc-button { background-color: #111827; border-color: #1f2937; color: #e5e7eb; } /* ========================================= 🌙 FullCalendar Dark Mode - Header 部分 ========================================= */ /* Toolbar（上方的月份、切換按鈕區） */ body.dark-mode .fc-toolbar, body.dark-mode .fc-toolbar.fc-header-toolbar { background-color: #0f172a; /* 深底 */ color: #e2e8f0; /* 淺字 */ border-bottom: 1px solid #1e293b; padding: 0.5rem 0.75rem; border-radius: 0.5rem; } /* Toolbar 內所有文字（月份） */ body.dark-mode .fc-toolbar-title { color: #e2e8f0 !important; } /* Toolbar 內按鈕 */ body.dark-mode .fc .fc-button { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } body.dark-mode .fc .fc-button:hover { background-color: #334155; border-color: #475569; } /* active 或今日按鈕 */ body.dark-mode .fc .fc-button.fc-button-active { background-color: #475569 !important; border-color: #6366f1 !important; color: white !important; } /* ============================== 星期列（Sun / Mon / Tue 等） ============================== */ body.dark-mode .fc-col-header-cell { background-color: #0f172a; border-color: #1e293b; } body.dark-mode .fc-col-header-cell-cushion { color: #e2e8f0 !important; font-weight: 600; } /* ========================================= Calendar 主格線 & 事件文字（你之前已有）這裡補「如果還沒套到 header 區」 ========================================= */ /* 日期格線白化 */ body.dark-mode .fc .fc-daygrid-day-frame { background-color: #111827; border-color: #1e293b; } /* 日期數字（左上角） */ body.dark-mode .fc-daygrid-day-number { color: #e5e7eb; } /* 事件文字 */ body.dark-mode .fc-event-title, body.dark-mode .fc-event-time { color: #e5e7eb !important; } /* =========================== 🌞 Light Mode — form-select =========================== */ .form-select { background-color: #ffffff !important; border: 2px solid #9e9e9e; border-radius: 0.5rem; padding-right: 2.5rem; box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.08); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; color: #34495e; font-weight: 500; } .form-select:hover { border-color: #5e72e4; background-color: #ffffff; } .form-select:focus { border-color: #5e72e4 !important; box-shadow: 0 0 0 0.15rem rgba(94, 114, 228, 0.25) !important; outline: none; } /* Label 強調 */ label + .form-select, label.form-label { font-weight: 600; } /* =========================== 🌙 Dark Mode — form-select =========================== */ body.dark-mode .form-select { background-color: #1e293b !important; /* 深灰藍 */ border: 2px solid #475569; /* 亮灰框 */ color: #e2e8f0 !important; /* 亮字 */ box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.45); } body.dark-mode .form-select:hover { border-color: #818cf8; background-color: #1f2f47; } body.dark-mode .form-select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.35) !important; } /* Label 在暗色模式變亮 */ body.dark-mode label { color: #e2e8f0 !important; } /* ========================================= 🌙 Modal 深色模式（含填寫工時兩個 modal） ========================================= */ /* 整體 modal 背景：黑透明遮罩可以沿用 Bootstrap 預設 */ body.dark-mode .modal-content { background-color: #020617; /* 非常深的藍灰 */ color: #e5e7eb; border: 1px solid #1f2937; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); } /* header / footer 跟 body 稍微區隔一下 */ body.dark-mode .modal-header { border-bottom-color: #1f2937; background-color: #020617; } body.dark-mode .modal-footer { border-top-color: #1f2937; background-color: #020617; } /* 標題、一般文字 */ body.dark-mode .modal-title, body.dark-mode .modal-header h5, body.dark-mode .modal-header h6, body.dark-mode .modal-body, body.dark-mode .modal-body p, body.dark-mode .modal-body li, body.dark-mode .modal-body label { color: #e5e7eb; } /* 關閉按鈕（小叉叉）反白一點 */ body.dark-mode .modal-header .btn-close { filter: invert(0.9); } /* modal 內的 input / textarea 單獨深色（先只改 modal，頁面其他 input 之後再統一） */ body.dark-mode .modal .form-control, body.dark-mode .modal textarea.form-control { background-color: #020617; border-color: #475569; color: #e5e7eb; } body.dark-mode .modal .form-control::placeholder, body.dark-mode .modal textarea.form-control::placeholder { color: #6b7280; } body.dark-mode .modal .form-control:focus, body.dark-mode .modal textarea.form-control:focus { background-color: #020617; border-color: #6366f1; box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.35); } /* modal 裡的小提示文字 / 錯誤訊息 */ body.dark-mode .modal .form-text { color: #9ca3af; } body.dark-mode .modal .text-danger { color: #fecaca !important; } /* ========================================= 🟦 Light Mode - 全系統 Input 邊框強化 ========================================= */ input.form-control, textarea.form-control, select.form-select { border: 2px solid #9ca3af !important; /* 明顯灰框 */ background-color: #ffffff !important; color: #111827 !important; border-radius: 0.5rem !important; /* 更柔和 */ box-shadow: none !important; transition: all 0.15s ease; } input.form-control:hover, textarea.form-control:hover, select.form-select:hover { border-color: #5e72e4 !important; /* hover 變藍紫 */ } input.form-control:focus, textarea.form-control:focus, select.form-select:focus { border-color: #5e72e4 !important; box-shadow: 0 0 0 0.15rem rgba(94, 114, 228, 0.35) !important; outline: none !important; } /* ========================================= 🌙 Dark Mode - 全系統 Input 邊框強化 ========================================= */ body.dark-mode input.form-control, body.dark-mode textarea.form-control, body.dark-mode select.form-select { background-color: #1e293b !important; /* 深底 */ color: #e2e8f0 !important; /* 淺字 */ border: 2px solid #475569 !important; /* 清楚但柔和的深灰框 */ } body.dark-mode input.form-control:hover, body.dark-mode textarea.form-control:hover, body.dark-mode select.form-select:hover { border-color: #818cf8 !important; /* 淡紫 hover */ } body.dark-mode input.form-control:focus, body.dark-mode textarea.form-control:focus, body.dark-mode select.form-select:focus { border-color: #6366f1 !important; /* 藍紫焦點 */ box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.35) !important; outline: none !important; } /* Label 深色模式補強 */ body.dark-mode .form-label { color: #e5e7eb !important; } /* ========================================= 📌 常用工時區塊（Workhour Blocks） ========================================= */ /* 亮色模式下的常用工時 block 外觀 */ .workhour-block { background-color: #f8fafc !important; /* 淺藍灰底，比 bg-light 更柔和 */ color: #111827 !important; /* 深色字體 */ border: 1px solid #cbd5e1 !important; /* 淺灰邊框 */ border-radius: 0.5rem; } /* 常用 block 裡的小按鈕（X） */ .workhour-block .btn-link { color: #6b7280 !important; } .workhour-block .btn-link:hover { color: #ef4444 !important; } /* 深色模式下的常用工時 block 外觀 */ body.dark-mode .workhour-block { background-color: #111827 !important; /* 深灰底 */ color: #e5e7eb !important; /* 淺字 */ border: 1px solid #475569 !important; /* 深灰邊框 */ } /* 深色模式下的 X 按鈕 */ body.dark-mode .workhour-block .btn-link { color: #9ca3af !important; } body.dark-mode .workhour-block .btn-link:hover { color: #f97373 !important; } /* 拖曳 Calendar 事件到常用區塊時的提示（亮色） */ #workhour-blocks.workhour-blocks-dropping { border: 2px dashed #6366f1; border-radius: 0.5rem; padding: 0.35rem; background-color: rgba(99, 102, 241, 0.06); transition: background-color 0.15s ease, border-color 0.15s ease; } /* 深色模式下的拖曳提示 */ body.dark-mode #workhour-blocks.workhour-blocks-dropping { border-color: #a5b4fc; background-color: rgba(129, 140, 248, 0.18); }