/* ============================================================ CodePro IDTS 操作導覽（driver.js 1.8.0）・「森林冒險」主題色票／形狀／字型全部沿用 public/css/student_center.css，老師端與家長端共用同一套（見 teacher_center.css、adult_center.css 檔頭）。為什麼這裡要「再宣告一次」CSS variable： student_center.css 把 --sc-* 全部宣告在 .sc-app 之下（理由見該檔檔頭：設計稿的 class 命名跟 Bootstrap 4.5.2 內建 class 同名，不能寫進全域）。而 driver.js 的 popover 是掛在底下、不是 .sc-app 的子孫元素，繼承不到那組變數 —— 跟 .sc-app-modal 被 fancybox 搬到 body 是同一個問題。兩邊各自宣告一次，彈窗掛到哪裡都還是同一套顏色字型；順帶讓外層沒有 .sc-app 的舊版側欄頁面（reimburse／course_feedback／ learning_status／teaching_class_detail）也有一致的導覽外觀。覆寫時要注意 driver.js 自己的 driver.css： - .driver-popover 帶 all:unset，所有想要的樣式都得自己寫滿。 - 按鈕的實際 class 是 .driver-popover-footer-btn，停用狀態是外加 .driver-popover-btn-disabled（不是 :disabled 屬性），選擇器別寫錯。 - 箭頭是 border 三角形，尺寸由 JS 用 getBoundingClientRect 動態量測後才算位置，所以放大 border-width 是安全的。 ============================================================ */ .driver-popover.sc-tour-popover { /* 取自 student_center.css:23-64，只列導覽會用到的 */ --sc-brand: #e8833a; --sc-card: #fffaf0; --sc-card-2: #f8efdf; --sc-line: #ddcdb7; --sc-stroke: #6b4f3a; --sc-ink: #3f2d22; --sc-ink-soft: #715b4b; --sc-ink-mute: #9b8674; --sc-r: 14px; --sc-r-lg: 20px; --sc-pill: 999px; --sc-font-display: "Baloo 2", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif; --sc-font-body: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif; /* 形狀對齊 .sc-app .card（student_center.css:249-258）：硬陰影 0 4px 0 是這套設計系統的識別特徵，不要換成模糊陰影 */ background: var(--sc-card); border: 1.5px solid var(--sc-line); border-radius: var(--sc-r-lg); box-shadow: 0 4px 0 rgba(107, 79, 58, 0.13); color: var(--sc-ink); font-family: var(--sc-font-body); font-size: 15.9px; line-height: 1.7; padding: 18px 20px 15px; /* 對齊 .sc-app .pad */ min-width: 260px; max-width: 340px; -webkit-font-smoothing: antialiased; } .sc-tour-popover .driver-popover-title { font-family: var(--sc-font-display); font-weight: 800; font-size: 17.5px; line-height: 1.45; color: var(--sc-ink); padding-right: 26px; /* 讓開右上角關閉鈕 */ } .sc-tour-popover .driver-popover-description { font-size: 14.5px; line-height: 1.75; color: var(--sc-ink-soft); } /* driver.css 只給 5px，標題與內文貼太近 */ .sc-tour-popover .driver-popover-title[style*="block"] + .driver-popover-description { margin-top: 7px; } /* 關閉鈕：低調，不搶主按鈕的視線 */ .sc-tour-popover .driver-popover-close-btn { top: 11px; right: 12px; width: 27px; height: 27px; line-height: 25px; font-size: 21px; color: var(--sc-ink-mute); background: transparent; border-radius: 50%; transition: background 0.16s, color 0.16s; } .sc-tour-popover .driver-popover-close-btn:hover, .sc-tour-popover .driver-popover-close-btn:focus { background: var(--sc-card-2); color: var(--sc-ink); } .sc-tour-popover .driver-popover-footer { align-items: center; gap: 10px; margin-top: 16px; } /* 進度文字做成膠囊，對齊 .sc-app .pill（student_center.css:284-294） */ .sc-tour-popover .driver-popover-progress-text { flex: none; display: inline-flex; align-items: center; font-size: 12.19px; font-weight: 700; padding: 4px 10px; border-radius: var(--sc-pill); background: var(--sc-card-2); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; } .sc-tour-popover .driver-popover-navigation-btns { gap: 8px; } /* driver.css 用 button+button{margin-left:4px} 拉開間距，這裡改用 gap，把它歸零免得兩者疊加 */ .sc-tour-popover .driver-popover-navigation-btns button + button { margin-left: 0; } /* 按鈕：對齊 .sc-app .btn（student_center.css:132-152）。往下壓 3px 的 :active 手感是這套設計系統的招牌互動，一併沿用。 */ .sc-tour-popover .driver-popover-footer-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sc-font-display); font-weight: 800; font-size: 14.2px; padding: 8px 17px; min-height: 40px; border: 2.5px solid var(--sc-stroke); border-radius: 13px; cursor: pointer; white-space: nowrap; text-shadow: none; background: var(--sc-brand); color: var(--sc-ink); box-shadow: 0 4px 0 var(--sc-stroke); transition: transform 0.16s, box-shadow 0.16s, background 0.16s; } .sc-tour-popover .driver-popover-footer-btn:hover, .sc-tour-popover .driver-popover-footer-btn:focus { background: var(--sc-brand); color: var(--sc-ink); transform: translateY(-1px); box-shadow: 0 5px 0 var(--sc-stroke); } .sc-tour-popover .driver-popover-footer-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sc-stroke); } /* 上一步＝次要按鈕，對齊 .sc-app .btn.ghost（student_center.css:198-205） */ .sc-tour-popover .driver-popover-prev-btn, .sc-tour-popover .driver-popover-prev-btn:hover, .sc-tour-popover .driver-popover-prev-btn:focus { background: var(--sc-card); } /* 停用是外加 class，不是 :disabled 屬性 */ .sc-tour-popover .driver-popover-btn-disabled, .sc-tour-popover .driver-popover-btn-disabled:hover { opacity: 0.4; transform: none; box-shadow: 0 4px 0 var(--sc-stroke); } /* 箭頭：driver.css base 是 border:5px solid #fff，四個方向各留一邊不透明。放大到 8px 才配得上卡片的厚描邊；三角形無法描邊，只填卡片底色。 */ .sc-tour-popover .driver-popover-arrow { border-width: 8px; } .sc-tour-popover .driver-popover-arrow-side-top { border-top-color: var(--sc-card); } .sc-tour-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--sc-card); } .sc-tour-popover .driver-popover-arrow-side-left { border-left-color: var(--sc-card); } .sc-tour-popover .driver-popover-arrow-side-right { border-right-color: var(--sc-card); } /* 高亮外框：探險橘。畫在遮罩 SVG 裡（由 tour.js 的 attach_stage_outline 補上的 path），不掛在被高亮的元素身上 —— driver.js 換步驟時是先把 class 瞬間搬到新元素、遮罩的洞才用 rAF 慢慢滑過去，掛在元素上會變成框線先到、洞後到。這條 path 跟遮罩共用同一份 d，兩者才會逐格同步。 */ .sc-tour-stage-outline { fill: none; stroke: #e8833a; stroke-width: 3; stroke-linejoin: round; pointer-events: none; } /* ============================================================ 側欄的「操作說明」小按鈕沿用身份卡上訊息鈴鐺 .idcard .msg 的形狀（student_center.css:475），只是縮一號、改成湖水藍，避免跟主操作的探險橘搶。 ============================================================ */ .sc-app .idcard .msg.tour-replay-btn { width: 38px; height: 38px; background: #e1eff3; /* --sc-grape-w */ border-color: #b9d4de; color: #2d647a; /* --sc-grape-d */ font-size: 15px; } .sc-app .idcard .msg.tour-replay-btn:hover { background: #5b9bb5; /* --sc-grape */ color: #fffaf0; } /* 身份卡是 flex，多塞一顆按鈕後姓名區要允許收縮，否則長名字會把兩顆按鈕擠出容器 */ .sc-app .idcard .who { min-width: 0; } .sc-app .idcard .who strong, .sc-app .idcard .who .sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ 主選單（家長）自己刻的彈窗，不走 driver.js —— popover 是「指著某個元素講解」，不適合拿來當選單。形狀一樣沿用 .sc-app .card 那套羊皮紙語彙。跟 popover 同理，這裡也掛在 body 底下，變數要自己再宣告一次。 ============================================================ */ .sc-tour-menu { --sc-brand: #e8833a; --sc-brand-w: #fbe5d2; --sc-brand-d: #9b4519; --sc-card: #fffaf0; --sc-card-2: #f8efdf; --sc-line: #ddcdb7; --sc-stroke: #6b4f3a; --sc-ink: #3f2d22; --sc-ink-soft: #715b4b; --sc-ink-mute: #9b8674; --sc-r-lg: 20px; --sc-font-display: "Baloo 2", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif; --sc-font-body: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif; position: fixed; inset: 0; z-index: 1000000001; /* driver.js 的 popover 是 1000000000 */ display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--sc-font-body); -webkit-font-smoothing: antialiased; } .sc-tour-menu-backdrop { position: absolute; inset: 0; background: rgba(63, 45, 34, 0.62); /* --sc-ink */ } .sc-tour-menu-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--sc-card); border: 1.5px solid var(--sc-line); border-radius: var(--sc-r-lg); box-shadow: 0 6px 0 rgba(107, 79, 58, 0.2); overflow: hidden; } .sc-tour-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: linear-gradient(145deg, #fffaf0 0%, var(--sc-brand-w) 155%); border-bottom: 1.5px solid var(--sc-line); } .sc-tour-menu-kicker { display: block; font-family: var(--sc-font-display); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--sc-brand-d); margin-bottom: 2px; } .sc-tour-menu-head b { font-family: var(--sc-font-display); font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--sc-ink); } .sc-tour-menu-x { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sc-ink-mute); font-size: 20px; cursor: pointer; transition: background 0.16s, color 0.16s; } .sc-tour-menu-x:hover { background: var(--sc-card-2); color: var(--sc-ink); } .sc-tour-menu-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 20px; overflow-y: auto; } /* 選項卡：跟側欄的 .ai-sso-btn 同一個語彙（圖示＋主標＋說明＋箭頭） */ .sc-tour-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; background: var(--sc-card); border: 1.5px solid var(--sc-line); border-radius: 14px; box-shadow: 0 3px 0 rgba(107, 79, 58, 0.12); color: var(--sc-ink); cursor: pointer; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; } .sc-tour-menu-item:hover, .sc-tour-menu-item:focus { border-color: var(--sc-brand); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(107, 79, 58, 0.16); outline: none; } .sc-tour-menu-item:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(107, 79, 58, 0.12); } .sc-tour-menu-icon { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--sc-brand-w); border: 1.5px solid #e9ba91; color: var(--sc-brand-d); font-size: 17px; } .sc-tour-menu-copy { flex: 1; min-width: 0; } .sc-tour-menu-copy strong { display: block; font-family: var(--sc-font-display); font-size: 15.5px; font-weight: 800; line-height: 1.4; } .sc-tour-menu-copy small { display: block; font-size: 12.8px; line-height: 1.5; color: var(--sc-ink-soft); } .sc-tour-menu-go { flex: none; color: var(--sc-ink-mute); font-size: 14px; } .sc-tour-menu-foot { padding: 12px 20px 16px; border-top: 1.5px solid var(--sc-line-2, #eadfce); background: var(--sc-card-2); font-size: 12.5px; line-height: 1.6; color: var(--sc-ink-soft); } @media (max-width: 900px) { .sc-tour-menu { padding: 14px; } .sc-tour-menu-head b { font-size: 17.5px; } .sc-tour-menu-item { padding: 11px 12px; gap: 10px; } .sc-tour-menu-copy strong { font-size: 15px; } } /* ============================================================ 子功能提示（Hints）跟主流程刻意做出區隔：主流程是「帶你走一遍」的大彈窗， hint 是「順手問一下」的小卡 —— 窄一點、用湖水藍、沒有上下步按鈕。 ============================================================ */ /* 錨點本身若是 static，absolute 的紅點會跑到更外層的祖先上，所以 tour.js 掛徽章前會補這個 class 當定位基準。 */ .sc-tour-hint-anchor { position: relative; } /* 掛在功能標題／按鈕右上角的小紅點。用紅色而不是設計系統既有的湖水藍：它要在滿版的內容裡被一眼看到，而且外圈的暈開動畫本身就是「這裡有東西還沒看過」的訊號。絕對定位疊在錨點上，不佔版面寬度、不擠壓原本的排版。點過一次就會被移除（見 tour.js 的 attach_hint_dot），不會一直閃。徽章是塞進別人家的元素裡（分頁按鈕、區塊標題…），宿主的既有樣式（例如 .sc-app .subtabs button）權重都比這條單一 class 高，會把尺寸、背景、內距全部蓋掉，所以外觀相關的宣告一律 !important 鎖住。 */ .sc-tour-hint-dot { all: unset !important; position: absolute !important; top: -4px !important; right: -4px !important; z-index: 3 !important; box-sizing: border-box !important; display: block !important; width: 10px !important; height: 10px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid #fffaf0 !important; border-radius: 50% !important; background: #e04a3f !important; box-shadow: none !important; /* 純圓點，不放任何字符；font-size 歸零是保險，避免宿主的文字樣式把它撐開 */ font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; cursor: pointer !important; pointer-events: auto !important; transition: background 0.16s, transform 0.16s !important; } .sc-tour-hint-dot:hover, .sc-tour-hint-dot:focus { background: #a8322a !important; transform: scale(1.2) !important; outline: none !important; } /* 一圈一圈往外暈開的紅色光暈。宿主可能也對自己的元素下了 ::after （分頁按鈕的底線就是），同樣要壓過去。 */ .sc-tour-hint-dot::after { content: "" !important; position: absolute !important; top: -2px !important; right: -2px !important; bottom: -2px !important; left: -2px !important; width: auto !important; height: auto !important; border: 1.5px solid #e04a3f !important; border-radius: 50% !important; background: none !important; pointer-events: none !important; animation: sc-tour-hint-ripple 1.9s ease-out infinite !important; } @keyframes sc-tour-hint-ripple { 0% { transform: scale(1); opacity: 0.7; } 65% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } /* 會暈眩的使用者把動畫關掉，徽章本身仍在（沿用站台既有的處理方式） */ @media (prefers-reduced-motion: reduce) { .sc-tour-hint-dot::after { animation: none; opacity: 0.55; } } .driver-popover.sc-tour-hint { --sc-card: #fffaf0; --sc-ink: #3f2d22; --sc-ink-soft: #715b4b; --sc-ink-mute: #9b8674; --sc-info: #5b9bb5; --sc-info-w: #e1eff3; --sc-info-d: #2d647a; --sc-font-display: "Baloo 2", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif; --sc-font-body: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif; background: var(--sc-card); border: 1.5px solid #b9d4de; border-radius: 16px; box-shadow: 0 4px 0 rgba(45, 100, 122, 0.16); color: var(--sc-ink); font-family: var(--sc-font-body); padding: 14px 16px; min-width: 220px; max-width: 290px; -webkit-font-smoothing: antialiased; } /* 標題前面加一顆湖水藍圓點，一眼分得出這是 hint 不是主流程 */ .sc-tour-hint .driver-popover-title { display: flex !important; align-items: center; gap: 7px; font-family: var(--sc-font-display); font-weight: 800; font-size: 15px; line-height: 1.45; color: var(--sc-info-d); padding-right: 22px; } .sc-tour-hint .driver-popover-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-info); } .sc-tour-hint .driver-popover-description { font-size: 13.6px; line-height: 1.7; color: var(--sc-ink-soft); } .sc-tour-hint .driver-popover-title[style*="block"] + .driver-popover-description, .sc-tour-hint .driver-popover-title[style*="flex"] + .driver-popover-description { margin-top: 6px; } .sc-tour-hint .driver-popover-close-btn { top: 9px; right: 10px; width: 22px; height: 22px; line-height: 20px; font-size: 18px; color: var(--sc-ink-mute); background: transparent; border-radius: 50%; transition: background 0.16s, color 0.16s; } .sc-tour-hint .driver-popover-close-btn:hover, .sc-tour-hint .driver-popover-close-btn:focus { background: var(--sc-info-w); color: var(--sc-info-d); } /* hint 沒有按鈕與進度，footer 整塊不需要佔位 */ .sc-tour-hint .driver-popover-footer { display: none; } .sc-tour-hint .driver-popover-arrow { border-width: 7px; } .sc-tour-hint .driver-popover-arrow-side-top { border-top-color: var(--sc-card); } .sc-tour-hint .driver-popover-arrow-side-bottom { border-bottom-color: var(--sc-card); } .sc-tour-hint .driver-popover-arrow-side-left { border-left-color: var(--sc-card); } .sc-tour-hint .driver-popover-arrow-side-right { border-right-color: var(--sc-card); } /* 手機版：側欄展開後可用寬度變窄，popover 要跟著縮 */ @media (max-width: 900px) { .driver-popover.sc-tour-popover { max-width: calc(100vw - 32px); padding: 15px 16px 13px; font-size: 15px; } .sc-tour-popover .driver-popover-title { font-size: 16.5px; } .sc-tour-popover .driver-popover-description { font-size: 14px; } .sc-tour-popover .driver-popover-footer-btn { font-size: 13.5px; padding: 7px 14px; min-height: 38px; } }