檢視模板:事件資料/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;
    }
}