跳至內容

MediaWiki:Common.css

出自贊一百科 - 中華文化的專業百科

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

  • Firefox或Safari:按住Shift時點擊重新整理,或按Ctrl-F5或Ctrl-R(Mac則為⌘-R)
  • Google Chrome:按Ctrl-Shift-R(Mac則為⌘-Shift-R)
  • Edge:按住Ctrl時點擊重新整理,或按Ctrl-F5。
/* 此 CSS 會套用至所有的介面外觀 */

/* 重置 <cite> 元素的斜体样式。
   浏览器默认将 <cite> 渲染为斜体,这里重置为继承父元素样式,
   避免 CS1/CS2 模板中的 cite 标签出现意外的斜体。 */
cite,
dfn {
	font-style: inherit;
}

/* 参考文献列表(<references/> 或 {{reflist}} 生成的 .references 容器)
   的底部外边距。 */
.references {
	margin-bottom: 0.5em;
}


/* 初始化反向引用计数器 */
span[ rel="mw:referencedBy" ] {
	counter-reset: mw-ref-linkback 0;
}

/* 单个引用被多次使用时,回跳链接用小写字母编号(a、b、c ...) */
span[ rel='mw:referencedBy' ] > a::before {
	content: counter( mw-ref-linkback, lower-alpha );
	font-size: 80%;
	font-weight: bold;
	font-style: italic;
}

/* 单个反向引用链接显示 "↑"(脱字符 ^)作为回跳箭头 */
a[ rel="mw:referencedBy" ]::before {
	font-weight: bold;
	content: "^";
}

/* 反向引用容器前缀为 "↑ "(箭头后带空格) */
span[ rel="mw:referencedBy" ]::before {
	content: "^ ";
}

/* --------------------------------------------------------------------------
   PDF 外部链接图标
   -------------------------------------------------------------------------- */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
	background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
	padding: 8px 18px 8px 0;
}

/* --------------------------------------------------------------------------
   屏幕媒体(非打印)下,缩小参考文献列表的字号。
   需与 Template:Refbegin/styles.css 和 Template:Reflist/styles.css 保持一致。
   -------------------------------------------------------------------------- */
@media screen {
	.references {
		font-size: 90%;
	}
}

/* --------------------------------------------------------------------------
   響應式設定。
   -------------------------------------------------------------------------- */
/* ========== 全局響應式基礎 ========== */
:root {
    --content-max-width: 1200px;
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
}

.content-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========== 桌面版(> 1024px) ========== */
@media screen and (min-width: 1025px) {
    .sidebar-desktop { 
        display: block; 
        width: 280px; 
        float: right; 
    }
    .infobox { 
        max-width: 350px; 
    }
}

/* ========== 平板版(768px - 1024px) ========== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .sidebar-desktop { width: 220px; }
    .content-wrapper { padding: 0 1.5rem; }
}

/* ========== 手機版(< 768px) ========== */
@media screen and (max-width: 768px) {
    /* 隱藏桌面專屬元素 */
    .sidebar-desktop,
    .desktop-only { 
        display: none !important; 
    }
    
    /* 內容全寬 */
    .content-wrapper,
    .mw-parser-output { 
        padding: 0.5rem; 
        font-size: 16px; /* 避免 iOS 自動縮放 */
    }
    
    /* 表格橫向滾動 */
    table.wikitable {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 圖片自適應 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ========== 小手機(< 480px) ========== */
@media screen and (max-width: 480px) {
    body { 
        font-size: 15px; 
        line-height: 1.6;
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
}