/* ==================================================================
* ♿ CKEditor 5 前台內容樣式還原 (無障礙完美相容 + 修正樣式對不上 Bug)
* ================================================================== */
.ck-content {
font-size: 1rem;
line-height: 1.75;
color: #1a1a1a;
}
.ck-content .text-left { text-align: left !important; }
.ck-content .text-center { text-align: center !important; }
.ck-content .text-right { text-align: right !important; }
.ck-content .text-justify { text-align: justify !important; text-justify: inter-word; }
/* ------------------------------------------------------------------
* 1. 項目列表與數字列表 (修正：移除 !important，允許行內自訂樣式生效)
* ------------------------------------------------------------------ */
.ck-content ul {
list-style-type: disc; /* 預設圓點，但允許 HTML 的 style="list-style-type:square" 覆蓋 */
padding-left: 2.5rem;
margin-top: 0.5rem;
margin-bottom: 1.25rem;
}
.ck-content ol {
list-style-type: decimal; /* 預設數字 */
padding-left: 2.5rem;
margin-top: 0.5rem;
margin-bottom: 1.25rem;
}
.ck-content li {
margin-bottom: 0.5rem;
/* 👑 防呆：防止 Bootstrap 的某些 class (如 .list-unstyled) 意外把點點拔掉 */
display: list-item !important;
}
/* ------------------------------------------------------------------
* 8. 項目與數字列表系統 (List Styles Class) - 同時支援 inline style 與 class
* 核心原則：inline style 優先級最高，class 次之，預設值最後
* ------------------------------------------------------------------ */
/* --- 無序列表 (ul) 專用 Class 還原 --- */
/* 圓點 (disc) - 使用 class 時套用 */
.ck-content ul.ck-list-styles-cls-disc,
.ck-content ul.ck-list-styles-cls-disc > li {
list-style-type: disc !important;
}
/* 方塊 (square) - 使用 class 時套用 */
.ck-content ul.ck-list-styles-cls-square,
.ck-content ul.ck-list-styles-cls-square > li {
list-style-type: square !important;
}
/* 空心圓 (circle) - 使用 class 時套用 */
.ck-content ul.ck-list-styles-cls-circle,
.ck-content ul.ck-list-styles-cls-circle > li {
list-style-type: circle !important;
}
/* 👁️ 支援 inline style 直接設定 - 用屬性選擇器，不使用 !important */
.ck-content ul[style*="list-style-type:square"] > li,
.ck-content ul[style*="list-style-type: square"] > li {
list-style-type: square;
}
.ck-content ul[style*="list-style-type:circle"] > li,
.ck-content ul[style*="list-style-type: circle"] > li {
list-style-type: circle;
}
.ck-content ul[style*="list-style-type:disc"] > li,
.ck-content ul[style*="list-style-type: disc"] > li {
list-style-type: disc;
}
/* --- 有序列表 (ol) 專用 Class 還原 --- */
/* 標準數字 (1, 2, 3...) - 使用 class 時套用 */
.ck-content ol.ck-list-styles-cls-decimal,
.ck-content ol.ck-list-styles-cls-decimal > li {
list-style-type: decimal !important;
}
/* 字首補零數字 (01, 02, 03...) */
.ck-content ol.ck-list-styles-cls-decimal-leading-zero,
.ck-content ol.ck-list-styles-cls-decimal-leading-zero > li {
list-style-type: decimal-leading-zero !important;
}
/* 小寫羅馬數字 (i, ii, iii...) */
.ck-content ol.ck-list-styles-cls-lower-roman,
.ck-content ol.ck-list-styles-cls-lower-roman > li {
list-style-type: lower-roman !important;
}
/* 大寫羅馬數字 (I, II, III...) */
.ck-content ol.ck-list-styles-cls-upper-roman,
.ck-content ol.ck-list-styles-cls-upper-roman > li {
list-style-type: upper-roman !important;
}
/* 小寫英文字母 (a, b, c...) */
.ck-content ol.ck-list-styles-cls-lower-latin,
.ck-content ol.ck-list-styles-cls-lower-latin > li {
list-style-type: lower-latin !important;
}
/* 大寫英文字母 (A, B, C...) */
.ck-content ol.ck-list-styles-cls-upper-latin,
.ck-content ol.ck-list-styles-cls-upper-latin > li {
list-style-type: upper-latin !important;
}
/* 👁️ 支援有序列表的 inline style 直接設定 */
.ck-content ol[style*="list-style-type:decimal"] > li,
.ck-content ol[style*="list-style-type: decimal"] > li {
list-style-type: decimal;
}
.ck-content ol[style*="list-style-type:lower-roman"] > li,
.ck-content ol[style*="list-style-type: lower-roman"] > li {
list-style-type: lower-roman;
}
.ck-content ol[style*="list-style-type:upper-roman"] > li,
.ck-content ol[style*="list-style-type: upper-roman"] > li {
list-style-type: upper-roman;
}
.ck-content ol[style*="list-style-type:lower-latin"] > li,
.ck-content ol[style*="list-style-type: lower-latin"] > li {
list-style-type: lower-latin;
}
.ck-content ol[style*="list-style-type:upper-latin"] > li,
.ck-content ol[style*="list-style-type: upper-latin"] > li {
list-style-type: upper-latin;
}
/* ------------------------------------------------------------------
* 2. 超連結 (符合無障礙高對比 4.5:1，且隨時強制有底線)
* ------------------------------------------------------------------ */
.ck-content a {
color: #0056b3 !important;
text-decoration: underline !important;
font-weight: 500;
}
.ck-content a:hover {
color: #003366 !important;
text-decoration: underline !important;
}
.ck-content a:focus-visible {
outline: 3px solid #ffc107 !important;
outline-offset: 2px;
}
/* ------------------------------------------------------------------
* 3. 區塊引言 (blockquote)
* ------------------------------------------------------------------ */
.ck-content blockquote {
overflow: hidden;
padding: 0.75rem 1.25rem;
margin: 1.5rem 0;
border-left: 5px solid #495057 !important; /* 強制亮出左側灰色裝飾線 */
background-color: #f8f9fa !important; /* 強制帶上淺灰底色 */
color: #343a40;
}
.ck-content blockquote p {
margin-bottom: 0 !important;
}
/* ------------------------------------------------------------------
* 4. 粗體、文字段落與刪除線
* ------------------------------------------------------------------ */
.ck-content strong {
font-weight: 700 !important; /* 強制加粗 */
}
.ck-content s {
text-decoration: line-through !important;
color: #495057;
}
.ck-content p {
margin-top: 0;
margin-bottom: 1.25rem;
/* 👑 關鍵防破版：給予段落最小高度，確保連續的
空行能完美撐開高度，不塌陷 */
min-height: 1em;
}
/* ==================================================================
* 🖼️ CKEditor 5 圖片對齊 前台網頁相容樣式
* ================================================================== */
/* 1. 靠左對齊 */
.image-style-align-left,
.image-style-inline-align-left {
float: left;
margin-right: 1.5rem;
margin-bottom: 1rem;
}
/* 2. 靠右對齊 */
.image-style-align-right,
.image-style-inline-align-right {
float: right;
margin-left: 1.5rem;
margin-bottom: 1rem;
}
/* 3. 置中對齊 */
.image-style-block-align-center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* 4. 防破版：清除浮動 (避免圖片飄到公告內容容器的外層去) */
.ck-editor-editable-area::after,
.ck-content::after { /* 請換成你前台顯示公告內容的 div class */
content: "";
display: table;
clear: both;
}
/* ------------------------------------------------------------------
* 5. 表格系統 (figure.table) - 無障礙完整補強版
* ------------------------------------------------------------------ */
/* 外層容器 */
.ck-content figure.table {
margin: 1.5rem 0;
width: 100%;
/* ♿ 無障礙關鍵：在手機等小螢幕上，大表格會自動長出橫向捲軸，
絕對不會死硬地撐破網頁邊框，符合移動端無障礙閱讀標準 */
overflow-x: auto;
display: block;
}
/* 實體 Table 標籤 */
.ck-content figure.table table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
/* ♿ 邊框顏色改用 #6c757d (對比度 > 4.5:1)，確保低視能者也能清晰看見格子邊界 */
border: 1px solid #6c757d !important;
background-color: #ffffff;
}
/* 儲存格與表頭通用樣式 */
.ck-content figure.table th,
.ck-content figure.table td {
padding: 0.75rem 1rem; /* 給予充足內距，文字絕不黏邊 */
border: 1px solid #6c757d !important; /* 每格線條強制顯現 */
vertical-align: middle; /* 垂直置中，排版更整齊 */
color: #1a1a1a !important; /* 內文字體極深，維持超高對比度 */
font-size: 0.95rem;
text-align: left; /* 預設靠左，最符合語音導讀邏輯 */
}
/* 補強：如果使用者在編輯器內有勾選「標題列 ()」 */
.ck-content figure.table th {
background-color: #e9ecef !important; /* 表頭自帶優雅的淺灰色底 */
font-weight: 700 !important; /* 強制加粗 */
color: #000000 !important; /* 表頭文字用純黑，與底色形成強烈對比 */
}
/* ♿ 斑馬紋優化（強烈建議加上！）
這能幫助閱讀障礙或高齡使用者，在看寬表格時眼睛不會對錯行 */
.ck-content figure.table tr:nth-child(even) {
background-color: #f8f9fa; /* 偶數行帶有極淡灰色 */
}
/* 當滑鼠滑過某一行時的提示色，能進一步引導視覺焦點 */
.ck-content figure.table tr:hover {
background-color: #f1f3f5;
} |