模板:事件資料/styles.css
< 模板:事件資料
/* =========================
季彝 Wiki — 事件資料提示框
========================= */
/* ---------- 基礎框架 ---------- */
.lky-event-notice {
display: flex;
align-items: center;
gap: 18px;
margin: 18px 0 24px;
padding: 18px 22px;
border: 1px solid #a2a9b1;
border-left: 8px solid #72777d;
border-radius: 4px;
background: #f8f9fa;
color: #202122;
box-sizing: border-box;
transition:
border-color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
/* 防止 MediaWiki 自動生成空段落破壞排版 */
.lky-event-notice > p {
display: none;
}
/* ---------- 左側圖示 ---------- */
.lky-event-notice-icon {
flex: 0 0 58px;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
font-size: 2.3rem;
line-height: 1;
background: #eaecf0;
color: #54595d;
}
/* ---------- 右側內容 ---------- */
.lky-event-notice-content {
flex: 1 1 auto;
min-width: 0;
}
/* 標題 */
.lky-event-notice-title {
margin: 0 0 7px;
font-size: 1.08rem;
line-height: 1.5;
}
/* 日期 / 類型 / 狀態 */
.lky-event-notice-meta {
margin: 0 0 8px;
font-size: 0.92rem;
line-height: 1.5;
color: #54595d;
}
/* 說明 */
.lky-event-notice-text {
margin: 0;
line-height: 1.65;
}
/* =========================================================
校園發展
campus-development
藍色 / 正式
========================================================= */
.lky-event-type-campus-development {
border-color: #a7c7f2;
border-left-color: #36c;
background: #f5f9ff;
}
.lky-event-type-campus-development .lky-event-notice-icon {
background: #eaf2ff;
color: #36c;
}
/* =========================================================
校園活動
campus-event
紫色 / 活動感
========================================================= */
.lky-event-type-campus-event {
border-color: #c8b7e8;
border-left-color: #674ea7;
background: #faf7ff;
border-radius: 8px;
}
.lky-event-type-campus-event .lky-event-notice-icon {
background: #f0eaff;
color: #674ea7;
}
/* =========================================================
校園趣聞
campus-anecdote
黃色 / 輕鬆、趣聞
========================================================= */
.lky-event-type-campus-anecdote {
border-color: #e4c75e;
border-left-color: #ac6600;
background: #fffaf0;
border-radius: 10px;
}
.lky-event-type-campus-anecdote .lky-event-notice-icon {
background: #fff0c2;
color: #8a4b00;
border-radius: 12px;
}
/* =========================================================
學術事件
academic
綠色 / 學術
========================================================= */
.lky-event-type-academic {
border-color: #9bcba7;
border-left-color: #14866d;
background: #f4fbf7;
}
.lky-event-type-academic .lky-event-notice-icon {
background: #e4f5eb;
color: #14866d;
}
/* =========================================================
行政事件
administrative
深灰藍 / 正式行政
========================================================= */
.lky-event-type-administrative {
border-color: #b8c1cc;
border-left-color: #54595d;
background: #f5f6f7;
}
.lky-event-type-administrative .lky-event-notice-icon {
background: #eaecf0;
color: #54595d;
border-radius: 4px;
}
/* =========================================================
人員事件
personnel
青綠色
========================================================= */
.lky-event-type-personnel {
border-color: #9bcfd0;
border-left-color: #168a8a;
background: #f3fbfb;
}
.lky-event-type-personnel .lky-event-notice-icon {
background: #def4f4;
color: #168a8a;
}
/* =========================================================
組織相關
organization
靛藍色
========================================================= */
.lky-event-type-organization {
border-color: #adb8e3;
border-left-color: #4b5fa7;
background: #f6f7fd;
}
.lky-event-type-organization .lky-event-notice-icon {
background: #e8ebfa;
color: #4b5fa7;
border-radius: 8px;
}
/* =========================================================
校園設施
facility
棕橙色
========================================================= */
.lky-event-type-facility {
border-color: #d8bd95;
border-left-color: #9a6700;
background: #fcf8f2;
}
.lky-event-type-facility .lky-event-notice-icon {
background: #f4e9d6;
color: #8a5a00;
}
/* =========================================================
技術事件
technical
科技藍 / Cyan
========================================================= */
.lky-event-type-technical {
border-color: #91c6db;
border-left-color: #087ea4;
background: #f2faff;
box-shadow: inset 0 0 0 1px rgba(8, 126, 164, 0.04);
}
.lky-event-type-technical .lky-event-notice-icon {
background: #dff5fc;
color: #087ea4;
border-radius: 6px;
}
/* =========================================================
一般校園事件
incident
橙色 / 注意
========================================================= */
.lky-event-type-incident {
border-color: #e6ad74;
border-left-color: #d66b00;
background: #fff7ed;
}
.lky-event-type-incident .lky-event-notice-icon {
background: #ffe7cc;
color: #b85700;
}
/* =========================================================
重大事件
major-event
紅色 / 高重要度
========================================================= */
.lky-event-type-major-event {
border: 1px solid #d89a9a;
border-left: 10px solid #b32424;
background: #fff5f5;
box-shadow: 0 2px 7px rgba(179, 36, 36, 0.10);
}
.lky-event-type-major-event .lky-event-notice-icon {
background: #fce3e3;
color: #b32424;
border: 1px solid #e7b3b3;
}
.lky-event-type-major-event .lky-event-notice-title {
color: #7d1717;
}
/* =========================================================
其他
other
中性灰
========================================================= */
.lky-event-type-other {
border-color: #c8ccd1;
border-left-color: #72777d;
background: #f8f9fa;
}
.lky-event-type-other .lky-event-notice-icon {
background: #eaecf0;
color: #72777d;
}
/* =========================================================
狀態外觀
========================================================= */
/* 持續更新：
用輕微陰影表示「活躍中」 */
.lky-event-status-ongoing {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
}
/* 已歸檔：
整體弱化 */
.lky-event-status-archived {
opacity: 0.82;
}
/* 已取消：
弱化 + 虛線 */
.lky-event-status-cancelled {
border-style: dashed;
opacity: 0.80;
}
/* 有爭議：
額外警示底線 */
.lky-event-status-disputed {
border-bottom: 3px solid #d8a500;
}
/* =========================================================
Hover
========================================================= */
.lky-event-notice:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
}
/* =========================================================
手機
========================================================= */
@media (max-width: 650px) {
.lky-event-notice {
display: block;
padding: 16px 18px;
border-left-width: 6px;
}
.lky-event-type-major-event {
border-left-width: 8px;
}
.lky-event-notice-icon {
display: none;
}
.lky-event-notice-title {
font-size: 1rem;
}
.lky-event-notice-meta {
font-size: 0.88rem;
}
}