切換選單
1
2
12
鑽石託管 | DiamondHost WIKI
切換偏好設定選單
切換個人選單
尚未登入
若您做出任何編輯,會公開您的 IP 位址。

MediaWiki:Common.css

MediaWiki介面頁面
Admin留言 | 貢獻2026年4月8日 (三) 19:50的修訂

注意:在您發布之後,您可能需要清除瀏覽器快取才能看到變更。

  • Firefox或Safari:按住Shift時點擊重新整理,或按Ctrl-F5Ctrl-R(Mac則為⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac則為⌘-Shift-R
  • Edge:按住Ctrl時點擊重新整理,或按Ctrl-F5
/* --- 1. 全局配置 --- */
:root {
    --brand-color: #007bff; /* 你的品牌主色 */
    --bg-gray: #f9f9f9;
    --border-color: #e2e8f0;
}

/* 移除 MediaWiki 預設的笨重外框 */
#content {
    border: none !important;
    background: white !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 12px;
    margin: 20px auto;
    max-width: 1200px; /* 限制寬度,閱讀更舒適 */
    padding: 3em !important;
}

/* --- 2. 標題與字體 --- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: var(--bg-gray) !important;
}

#firstHeading {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    border: none !important;
    margin-bottom: 0.5em !important;
}

/* 在標題下方加一條漸層線 */
#firstHeading::after {
    content: "";
    display: block;
    width: 60px;
    height: 5px;
    background: var(--brand-color);
    border-radius: 10px;
    margin-top: 10px;
}

/* --- 3. 側邊導覽列大改 --- */
#mw-panel {
    width: 12em !important;
    padding-left: 20px !important;
}

#mw-panel .portal h3 {
    background: none !important;
    color: #1a202c !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* --- 4. 自訂組件(用於首頁與教學) --- */
/* 卡片樣式 */
.mw-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.2s;
}
.mw-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

/* 專業側邊資訊欄 (Infobox) */
.portable-infobox {
    float: right;
    width: 300px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-top: 5px solid var(--brand-color);
    margin-left: 20px;
    padding: 15px;
    border-radius: 4px;
}