/* 設定輪播區域 */
.news-carousel {
width: 100%;
height: 30px; /* 固定高度 */
overflow: hidden;
position: relative;
background-color: #f8f9fa; /* 背景顏色 */
border: 1px solid #ddd; /* 輕微邊框 */
display: flex;
align-items: center;
justify-content: center; /* 水平置中 */
padding: 0 10px; border-radius: 6px;
}
/* 在輪播框的左上角顯示 "NEWS" 並加背景色，並且確保 NEWS 層級高於跑馬文字 */
.news-carousel::before {
content: "報頭條";
font-size: 12px; /* 更縮小字型 */
font-weight: bold;
color: #fff; /* 文字顏色 */
background-color: #007bff; /* 背景顏色 */
position: absolute;
top: 0;
left: 0;
padding: 0 5px; /* 填滿左邊並且上下不留間距 */
height: 100%; /* 讓高度填滿整個輪播區域 */
line-height: 30px; /* 使文字垂直居中 */
z-index: 10; /* 提高層級讓 NEWS 顯示在最上層 */
box-sizing: border-box; /* 保證內邊距不會影響寬度 */
text-align: center; /* 文字水平置中 */
}
/* 設定輪播內容 */
.carousel-container {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
/* 確保每個標題完全佔滿輪播區域 */
.carousel-item {
min-width: 100%;
text-align: right; /* 設置右對齊 */
line-height: 30px; /* 垂直居中 */
overflow: hidden;
display: flex;
flex-direction: row; /* 水平排列網站名稱和標題 */
justify-content: flex-end; /* 標題靠右對齊 */
align-items: center; /* 垂直置中 */
height: 30px; /* 限制每一項的高度，保證不會超過一行 */
white-space: nowrap; /* 禁止換行 */
flex-wrap: nowrap; /* 防止換行 */
box-sizing: border-box; /* 確保邊距和填充不會擴展框的大小 */
}
/* 來源網站名稱，用 [ ] 突顯並設為上標，縮小字型 */
.news-source {
font-size: 8px; /* 更小字型 */
font-weight: bold;
color: #555;
margin-right: 5px;
background-color: #f0f0f0; /* 背景顏色 */
padding: 2px 5px; /* 增加內邊距 */
border-radius: 4px; /* 邊角圓滑 */
vertical-align: super; /* 上標 */
}
/* 標題連結樣式（彩虹漸變） */
.carousel-item a {
text-decoration: none;
font-size: 16px;
font-weight: bold;
display: inline-block;
background-image: linear-gradient(45deg, #ff0000, #ff7300, #ffeb00, #47ff00, #00ffee, #0044ff, #9b00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow 3s infinite linear;
overflow: hidden; /* 隱藏溢出的文字 */
text-overflow: ellipsis; /* 顯示省略號 */
white-space: nowrap; /* 確保只顯示一行 */
}
/* 行動裝置適配 */
@media (max-width: 768px) {
.news-carousel {
height: auto; /* 調整高度適應 */
padding: 5px; /* 增加一些邊距 */
}
.carousel-item {
text-align: center; /* 文字置中 */
white-space: nowrap; /* 確保只顯示一行 */
overflow: hidden; /* 隱藏溢出的文字 */
font-size: 14px; /* 行動版文字大小 */
line-height: 1.6; /* 增加行高 */
max-width: 100%; /* 限制寬度 */
}
/* 讓標題文字過長時顯示省略號 */
.carousel-item a {
font-size: 14px; /* 調整字型大小 */
text-overflow: ellipsis; /* 顯示省略號 */
white-space: nowrap; /* 禁止換行 */
overflow: hidden; /* 隱藏溢出的文字 */
}
/* 隱藏網站名稱 [網站名稱] */
.news-source {
display: none; /* 在行動版隱藏網站名稱 */
}
/* 隱藏 NEWS 在行動版 */
.news-carousel::before {
display: none; /* 隱藏 NEWS */
}
}
/* 桌面版（大於768px）特定樣式 */
@media (min-width: 769px) {
.news-carousel {
padding: 0 10px; /* 調整桌面版的內邊距 */
height: 30px; /* 固定高度 */
}
.carousel-item {
font-size: 16px; /* 桌面版字型大小 */
white-space: nowrap; /* 確保標題不換行 */
text-overflow: ellipsis; /* 顯示省略號 */
overflow: hidden; /* 隱藏溢出的文字 */
line-height: 30px; /* 垂直居中 */
height: 30px; /* 高度限制為30px，避免拆分為兩行 */
justify-content: flex-end; /* 標題靠右對齊 */
box-sizing: border-box; /* 保證內邊距不會影響寬度 */
}
.carousel-item a {
font-size: 16px; /* 桌面版標題字型 */
}
/* 保持網站名稱和標題置中 */
.news-source {
font-size: 10px; /* 字型縮小 */
vertical-align: super; /* 上標 */
margin-bottom: 0; /* 確保網站名稱不會與標題重疊 */
}
}