CSS
/**********************************************
全站淺黃 + 綠色配色(無障礙 4.5:1)
主色: 淺黃 #FFF9C4
強調 / hover / active: 深綠 #2E7D32
文字預設色: #1B5E20
背景色: #ffffff
**********************************************/
/* ========================================
全站文字 & 連結
======================================== */
/* 網頁整體設定 */
body {
color: #1B5E20; /* 全站預設文字顏色(深綠) */
font-size: 1.8rem; /* 全站基礎字體大小 */
background: #ffffff; /* 頁面背景顏色 */
margin: 0; /* 移除瀏覽器預設外距 */
font-family: sans-serif; /* 使用無襯線字體 */
}
/* 所有超連結預設樣式 */
a {
color: #1B5E20;
text-decoration: none; /* 取消底線 */
transition: background-color 0.2s ease, color 0.2s ease; /* 平滑 hover / focus */
}
/* 連結滑鼠移入或鍵盤聚焦 */
a:hover,
a:focus {
background-color: #FFE082; /* 淡黃提示 */
color: #1B5E20; /* 維持深綠文字 */
outline: none; /* 移除預設外框 */
}
/* ========================================
按鈕
======================================== */
.btn,
.mbtn {
display: inline-block;
text-align: center;
padding: 8px 2em;
font-size: 1.8rem;
border-radius: 6px;
border: 2px solid #2E7D32;
background: #FFF9C4;
color: #1B5E20;
transition: 0.2s ease-in-out;
}
.btn:hover,
.btn:focus,
.mbtn:hover,
.mbtn:focus {
background-color: #2E7D32;
color: #ffffff;
border-color: #1B5E20;
}
/* ========================================
頁籤 nav-tabs
======================================== */
.nav-tabs {
display: flex !important;
justify-content: center !important;
background: #FFF9C4;
border-radius: 6px;
padding: 0.4em;
flex-wrap: wrap;
}
.nav-tabs > li > a {
color: #1B5E20;
font-size: 1.6rem;
padding: 0.5em 1.2em;
border-radius: 20px;
white-space: nowrap;
border: 1px solid transparent;
transition: 0.2s ease-in-out;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
background: #FFE082;
border: 1px solid #2E7D32;
}
.nav-tabs > li > a.active {
background: #2E7D32;
color: #ffffff;
font-weight: bold;
border: 1px solid #1B5E20;
}
/* ========================================
主選單 / 次選單
======================================== */
.navbar-nav > li > a {
font-size: 1.8rem;
color: #1B5E20;
white-space: nowrap;
}
.navbar-nav li ul,
.dropdown-menu {
background: #FFFDE7;
border: 2px solid #2E7D32;
border-radius: 6px;
padding: 0.4em 0;
}
.navbar-nav li ul li a,
.dropdown-menu > li > a {
font-size: 1.7rem;
padding: 0.7em 1.2em;
color: #1B5E20;
line-height: 1.6;
white-space: nowrap;
word-break: keep-all;
}
.navbar-nav li ul li a:hover,
.navbar-nav li ul li a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: #2E7D32;
color: #ffffff;
}
/* ========================================
側邊欄 / Menu
======================================== */
.sidebar li a,
.menu li a {
display: block;
padding: 0.8em 1em;
font-size: 1.8rem;
color: #1B5E20;
}
.sidebar li a:hover,
.menu li a:hover {
background-color: #FFE082;
}
/* ========================================
模組標題
======================================== */
.mt {
font-size: 2rem;
line-height: 2;
font-weight: bold;
color: #2E7D32;
border-bottom: 2px solid #2E7D32;
}
/* ========================================
頁尾
======================================== */
.footer {
padding: 5px 15px;
background: #2E7D32;
color: #ffffff;
min-height: 30px;
}
.footer a {
color: #ffffff;
}
/* ========================================
資訊列表
======================================== */
.listUi .d-item {
border-bottom: 1px solid #cfd8dc;
}
.d-txt .mtitle {
font-size: 1.8rem;
}
.mdetail {
color: #455A64;
}
.mdate {
font-size: 1.3rem;
color: #546E7A;
}
/* ========================================
表單 / 彈窗
======================================== */
textarea.form-control {
box-shadow: none;
}
.mpopdiv .mbox {
background: #FFF9C4;
}
/* ========================================
響應式:手機漢堡選單
======================================== */
@media (max-width: 768px) {
.navbar-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #FFF9C4;
max-height: 0;
overflow: hidden;
flex-direction: column;
border-bottom: 2px solid #2E7D32;
transition: max-height 0.4s ease;
z-index: 1000;
}
.navbar-nav li a {
padding: 14px 20px;
font-size: 2rem;
color: #1B5E20;
border-bottom: 1px solid #2E7D32;
white-space: nowrap;
}
.navbar-nav li ul li a {
font-size: 1.9rem;
padding-left: 2.5em;
background: #FFFDE7;
}
.navbar-nav li a:hover {
background: #2E7D32;
color: #ffffff;
}
.navbar-toggle {
display: block;
position: fixed;
top: 10px;
left: 10px;
width: 50px;
height: 45px;
background: #FFF9C4;
border: 2px solid #2E7D32;
border-radius: 6px;
padding: 5px;
z-index: 1001;
}
.navbar-toggle span {
display: block;
height: 5px;
margin: 6px 0;
background: #2E7D32;
border-radius: 3px;
transition: 0.3s;
}
#nav-toggle { display: none; }
#nav-toggle:checked + .navbar-toggle + .navbar-nav {
max-height: 600px;
}
#nav-toggle:checked + .navbar-toggle span:nth-child(1) {
transform: rotate(45deg) translate(7px, 7px);
}
#nav-toggle:checked + .navbar-toggle span:nth-child(2) {
opacity: 0;
}
#nav-toggle:checked + .navbar-toggle span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
body { padding-top: 60px; }
}
/* ========================================
無障礙:鍵盤 Focus
======================================== */
:focus-visible {
outline: 4px solid #000000;
outline-offset: 3px;
border-radius: 6px;
}
/* ========================================
高對比模式
======================================== */
body.high-contrast {
background: #ffffff;
color: #000000;
}
body.high-contrast a {
color: #0000EE;
text-decoration: underline;
}
body.high-contrast a:hover,
body.high-contrast a:focus {
background: #000000;
color: #ffffff;
}
body.high-contrast .btn,
body.high-contrast .mbtn {
background: #ffffff;
color: #000000;
border: 3px solid #000000;
}
body.high-contrast .btn:hover,
body.high-contrast .mbtn:hover {
background: #000000;
color: #ffffff;
}
body.high-contrast .nav-tabs {
background: #ffffff;
border: 3px solid #000000;
}
body.high-contrast .nav-tabs > li > a.active {
background: #000000;
color: #ffffff;
}
body.high-contrast .navbar-nav li ul,
body.high-contrast .dropdown-menu {
background: #ffffff;
border: 3px solid #000000;
}
body.high-contrast .navbar-nav li ul li a:hover {
background: #000000;
color: #ffffff;
}
body.high-contrast .footer {
background: #000000;
color: #ffffff;
}
/* ========================================
教務處業務職掌表格(超進階版 + 列寬自動調整)
======================================== */
/* 外層容器:手機橫向滑動 */
.office-table-wrapper {
width: 100%;
overflow-x: auto;
}
/* 表格整體 */
.office-table {
width: 100%;
border-collapse: collapse;
font-size: clamp(1.4rem, 1.2vw + 0.8rem, 1.7rem);
line-height: clamp(1.45, 1vw + 1.2, 1.7);
transition: font-size 0.3s ease, line-height 0.3s ease;
table-layout: auto; /* 列寬自動調整 */
}
/* 表格標題 */
.office-table caption {
caption-side: top;
font-size: clamp(1.6rem, 1.5vw + 0.8rem, 2rem);
font-weight: bold;
padding: 12px 0;
color: #1B5E20;
}
/* 表頭列 */
.office-table thead th {
background-color: #FFF9C4;
color: #1B5E20;
font-weight: bold;
text-align: center;
padding: clamp(6px, 0.5vw + 4px, 10px);
transition: background-color 0.3s ease, padding 0.3s ease;
}
/* 所有儲存格 */
.office-table th,
.office-table td {
border: 1px solid #2E7D32;
padding: clamp(4px, 0.5vw + 4px, 10px);
vertical-align: top;
transition: padding 0.3s ease;
}
/* 第一欄(職稱)固定不換行 */
.office-table tbody th[scope="row"] {
background-color: #FFFDE7;
font-weight: bold;
white-space: nowrap;
padding: clamp(4px, 0.5vw + 4px, 10px);
}
/* 交錯列顏色 */
.office-table tbody tr:nth-child(even) td { background-color: #FAFAFA; }
.office-table tbody tr:nth-child(odd) td { background-color: #FFFFFF; }
/* 滑鼠 / 鍵盤聚焦整列提示 */
.office-table tbody tr:hover td,
.office-table tbody tr:focus-within td { background-color: #FFE082; }
/* 清單微調 */
.office-table ul { margin: 0; padding-left: clamp(0.8em, 1vw + 0.5em, 1.4em); }
.office-table li { margin-bottom: clamp(0.2em, 0.3vw + 0.2em, 0.4em); }
/* 分機欄置中 */
.office-table td:last-child { text-align: center; white-space: nowrap; }
/* 高對比模式 */
body.high-contrast .office-table,
body.high-contrast .office-table th,
body.high-contrast .office-table td,
body.high-contrast .office-table tbody th[scope="row"] {
background-color: #ffffff;
color: #000000;
border: 3px solid #000000;
}
body.high-contrast .office-table tbody tr:hover td,
body.high-contrast .office-table tbody tr:focus-within td {
background-color: #000000;
color: #ffffff;
}
全站淺黃 + 綠色配色(無障礙 4.5:1)
主色: 淺黃 #FFF9C4
強調 / hover / active: 深綠 #2E7D32
文字預設色: #1B5E20
背景色: #ffffff
**********************************************/
/* ========================================
全站文字 & 連結
======================================== */
/* 網頁整體設定 */
body {
color: #1B5E20; /* 全站預設文字顏色(深綠) */
font-size: 1.8rem; /* 全站基礎字體大小 */
background: #ffffff; /* 頁面背景顏色 */
margin: 0; /* 移除瀏覽器預設外距 */
font-family: sans-serif; /* 使用無襯線字體 */
}
/* 所有超連結預設樣式 */
a {
color: #1B5E20;
text-decoration: none; /* 取消底線 */
transition: background-color 0.2s ease, color 0.2s ease; /* 平滑 hover / focus */
}
/* 連結滑鼠移入或鍵盤聚焦 */
a:hover,
a:focus {
background-color: #FFE082; /* 淡黃提示 */
color: #1B5E20; /* 維持深綠文字 */
outline: none; /* 移除預設外框 */
}
/* ========================================
按鈕
======================================== */
.btn,
.mbtn {
display: inline-block;
text-align: center;
padding: 8px 2em;
font-size: 1.8rem;
border-radius: 6px;
border: 2px solid #2E7D32;
background: #FFF9C4;
color: #1B5E20;
transition: 0.2s ease-in-out;
}
.btn:hover,
.btn:focus,
.mbtn:hover,
.mbtn:focus {
background-color: #2E7D32;
color: #ffffff;
border-color: #1B5E20;
}
/* ========================================
頁籤 nav-tabs
======================================== */
.nav-tabs {
display: flex !important;
justify-content: center !important;
background: #FFF9C4;
border-radius: 6px;
padding: 0.4em;
flex-wrap: wrap;
}
.nav-tabs > li > a {
color: #1B5E20;
font-size: 1.6rem;
padding: 0.5em 1.2em;
border-radius: 20px;
white-space: nowrap;
border: 1px solid transparent;
transition: 0.2s ease-in-out;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
background: #FFE082;
border: 1px solid #2E7D32;
}
.nav-tabs > li > a.active {
background: #2E7D32;
color: #ffffff;
font-weight: bold;
border: 1px solid #1B5E20;
}
/* ========================================
主選單 / 次選單
======================================== */
.navbar-nav > li > a {
font-size: 1.8rem;
color: #1B5E20;
white-space: nowrap;
}
.navbar-nav li ul,
.dropdown-menu {
background: #FFFDE7;
border: 2px solid #2E7D32;
border-radius: 6px;
padding: 0.4em 0;
}
.navbar-nav li ul li a,
.dropdown-menu > li > a {
font-size: 1.7rem;
padding: 0.7em 1.2em;
color: #1B5E20;
line-height: 1.6;
white-space: nowrap;
word-break: keep-all;
}
.navbar-nav li ul li a:hover,
.navbar-nav li ul li a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: #2E7D32;
color: #ffffff;
}
/* ========================================
側邊欄 / Menu
======================================== */
.sidebar li a,
.menu li a {
display: block;
padding: 0.8em 1em;
font-size: 1.8rem;
color: #1B5E20;
}
.sidebar li a:hover,
.menu li a:hover {
background-color: #FFE082;
}
/* ========================================
模組標題
======================================== */
.mt {
font-size: 2rem;
line-height: 2;
font-weight: bold;
color: #2E7D32;
border-bottom: 2px solid #2E7D32;
}
/* ========================================
頁尾
======================================== */
.footer {
padding: 5px 15px;
background: #2E7D32;
color: #ffffff;
min-height: 30px;
}
.footer a {
color: #ffffff;
}
/* ========================================
資訊列表
======================================== */
.listUi .d-item {
border-bottom: 1px solid #cfd8dc;
}
.d-txt .mtitle {
font-size: 1.8rem;
}
.mdetail {
color: #455A64;
}
.mdate {
font-size: 1.3rem;
color: #546E7A;
}
/* ========================================
表單 / 彈窗
======================================== */
textarea.form-control {
box-shadow: none;
}
.mpopdiv .mbox {
background: #FFF9C4;
}
/* ========================================
響應式:手機漢堡選單
======================================== */
@media (max-width: 768px) {
.navbar-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #FFF9C4;
max-height: 0;
overflow: hidden;
flex-direction: column;
border-bottom: 2px solid #2E7D32;
transition: max-height 0.4s ease;
z-index: 1000;
}
.navbar-nav li a {
padding: 14px 20px;
font-size: 2rem;
color: #1B5E20;
border-bottom: 1px solid #2E7D32;
white-space: nowrap;
}
.navbar-nav li ul li a {
font-size: 1.9rem;
padding-left: 2.5em;
background: #FFFDE7;
}
.navbar-nav li a:hover {
background: #2E7D32;
color: #ffffff;
}
.navbar-toggle {
display: block;
position: fixed;
top: 10px;
left: 10px;
width: 50px;
height: 45px;
background: #FFF9C4;
border: 2px solid #2E7D32;
border-radius: 6px;
padding: 5px;
z-index: 1001;
}
.navbar-toggle span {
display: block;
height: 5px;
margin: 6px 0;
background: #2E7D32;
border-radius: 3px;
transition: 0.3s;
}
#nav-toggle { display: none; }
#nav-toggle:checked + .navbar-toggle + .navbar-nav {
max-height: 600px;
}
#nav-toggle:checked + .navbar-toggle span:nth-child(1) {
transform: rotate(45deg) translate(7px, 7px);
}
#nav-toggle:checked + .navbar-toggle span:nth-child(2) {
opacity: 0;
}
#nav-toggle:checked + .navbar-toggle span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
body { padding-top: 60px; }
}
/* ========================================
無障礙:鍵盤 Focus
======================================== */
:focus-visible {
outline: 4px solid #000000;
outline-offset: 3px;
border-radius: 6px;
}
/* ========================================
高對比模式
======================================== */
body.high-contrast {
background: #ffffff;
color: #000000;
}
body.high-contrast a {
color: #0000EE;
text-decoration: underline;
}
body.high-contrast a:hover,
body.high-contrast a:focus {
background: #000000;
color: #ffffff;
}
body.high-contrast .btn,
body.high-contrast .mbtn {
background: #ffffff;
color: #000000;
border: 3px solid #000000;
}
body.high-contrast .btn:hover,
body.high-contrast .mbtn:hover {
background: #000000;
color: #ffffff;
}
body.high-contrast .nav-tabs {
background: #ffffff;
border: 3px solid #000000;
}
body.high-contrast .nav-tabs > li > a.active {
background: #000000;
color: #ffffff;
}
body.high-contrast .navbar-nav li ul,
body.high-contrast .dropdown-menu {
background: #ffffff;
border: 3px solid #000000;
}
body.high-contrast .navbar-nav li ul li a:hover {
background: #000000;
color: #ffffff;
}
body.high-contrast .footer {
background: #000000;
color: #ffffff;
}
/* ========================================
教務處業務職掌表格(超進階版 + 列寬自動調整)
======================================== */
/* 外層容器:手機橫向滑動 */
.office-table-wrapper {
width: 100%;
overflow-x: auto;
}
/* 表格整體 */
.office-table {
width: 100%;
border-collapse: collapse;
font-size: clamp(1.4rem, 1.2vw + 0.8rem, 1.7rem);
line-height: clamp(1.45, 1vw + 1.2, 1.7);
transition: font-size 0.3s ease, line-height 0.3s ease;
table-layout: auto; /* 列寬自動調整 */
}
/* 表格標題 */
.office-table caption {
caption-side: top;
font-size: clamp(1.6rem, 1.5vw + 0.8rem, 2rem);
font-weight: bold;
padding: 12px 0;
color: #1B5E20;
}
/* 表頭列 */
.office-table thead th {
background-color: #FFF9C4;
color: #1B5E20;
font-weight: bold;
text-align: center;
padding: clamp(6px, 0.5vw + 4px, 10px);
transition: background-color 0.3s ease, padding 0.3s ease;
}
/* 所有儲存格 */
.office-table th,
.office-table td {
border: 1px solid #2E7D32;
padding: clamp(4px, 0.5vw + 4px, 10px);
vertical-align: top;
transition: padding 0.3s ease;
}
/* 第一欄(職稱)固定不換行 */
.office-table tbody th[scope="row"] {
background-color: #FFFDE7;
font-weight: bold;
white-space: nowrap;
padding: clamp(4px, 0.5vw + 4px, 10px);
}
/* 交錯列顏色 */
.office-table tbody tr:nth-child(even) td { background-color: #FAFAFA; }
.office-table tbody tr:nth-child(odd) td { background-color: #FFFFFF; }
/* 滑鼠 / 鍵盤聚焦整列提示 */
.office-table tbody tr:hover td,
.office-table tbody tr:focus-within td { background-color: #FFE082; }
/* 清單微調 */
.office-table ul { margin: 0; padding-left: clamp(0.8em, 1vw + 0.5em, 1.4em); }
.office-table li { margin-bottom: clamp(0.2em, 0.3vw + 0.2em, 0.4em); }
/* 分機欄置中 */
.office-table td:last-child { text-align: center; white-space: nowrap; }
/* 高對比模式 */
body.high-contrast .office-table,
body.high-contrast .office-table th,
body.high-contrast .office-table td,
body.high-contrast .office-table tbody th[scope="row"] {
background-color: #ffffff;
color: #000000;
border: 3px solid #000000;
}
body.high-contrast .office-table tbody tr:hover td,
body.high-contrast .office-table tbody tr:focus-within td {
background-color: #000000;
color: #ffffff;
}
瀏覽數:
