/* buke-course-review.css 「課程目錄」折疊選單 + 麵包屑排版的共用樣式。 由 bukeliaoma / bukeliaomaclass1~9 這 10 個頁面的 一起 載入。 之後要調整下拉選單的外觀（寬度、字級、間距、開啟方向...）， 只需要改這一份檔案，全站 10 個頁面會一起套用，不用逐頁修改。 這份檔案依賴各頁 :root 裡已定義的顏色變數： --pr, --pr-d, --pr-l, --border, --white, --shm, --gold-l, --text, --sub, --ac, --cw 如果之後有新頁面套用本樣式，但變數名稱不同，下拉選單會套用不到顏色， 屆時要嘛統一變數命名，要嘛把下面的 var(--xxx) 改成實際色碼。 */ /* 讓「課程目錄」選單貼齊麵包屑列右側 */ .bc-wrap .bc{ justify-content:space-between; } .bc-path{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } /* 折疊選單本體（原生 details/summary，不需要 JS，不受 CSP script-src 限制） */ .course-review{ position:relative; } .course-review summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--pr); padding:6px 12px; border:1px solid var(--border); border-radius:7px; background:var(--white); user-select:none; transition:background .15s, color .15s; } .course-review summary::-webkit-details-marker{ display:none; } .course-review summary::marker{ content:''; } .course-review summary:hover{ background:var(--pr-l); } .course-review[open] summary{ background:var(--pr-l); color:var(--pr-d); } .cr-arrow{ font-size:10px; transition:transform .2s; } .course-review[open] .cr-arrow{ transform:rotate(180deg); } /* 下拉面板 —— 想調整選單大小，改這裡 */ .cr-panel{ position:absolute; top:calc(100% + 6px); right:0; background:var(--white); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shm); padding:8px; min-width:220px; /* 選單寬度 */ z-index:80; display:flex; flex-direction:column; gap:2px; /* 選項間垂直間距 */ } .cr-panel a, .cr-panel .cr-current{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; /* 每個選項的高度/邊距 */ border-radius:6px; font-size:13.5px; /* 選項文字大小 */ text-decoration:none; color:var(--text); } .cr-panel a:hover{ background:var(--pr-l); color:var(--pr); text-decoration:none; } .cr-panel .cr-current{ background:var(--gold-l); color:#8a6600; font-weight:800; cursor:default; } @media (max-width:560px){ .bc{ padding:9px 14px; } .cr-panel{ right:0; left:auto; min-width:min(78vw, 260px); } }