MediaWiki:Common.css：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第96行： / 第96行： @@
 }
-/* 软件信息表格的整体样式 */
+/* 软件信息主容器 */
 .software-info {
+    display: flex;
-    width: auto; /* 自适应宽度，根据内容决定 */
+    flex-direction: column; /* 默认移动端纵向 */
-    border-collapse: collapse; /* 合并表格边框，避免多重边框 */
+    align-items: center; /* 居中对齐 */
+    gap: 10px; /* 每个分类块之间的间距 */
 }
+/* 软件信息分类（桌面端横向排列） */
-/* LOGO 单元格样式 */
+@media (min-width: 768px) {
-.software-info-logo {
+    .software-info {
-    width: 300px; /* 设置LOGO区域宽度 */
-    height: 300px; /* 设置LOGO区域高度 */
+        flex-direction: row; /* 桌面端横向排列 */
-    text-align: center; /* 文字居中对齐 */
+        flex-wrap: wrap; /* 超出屏幕时换行 */
+        justify-content: center;
-    vertical-align: middle; /* 垂直居中对齐 */
+    }
-}
+    .software-info-section {
-/* 无 LOGO 时的占位内容样式 */
+        flex: 1; /* 让每个分类块等宽 */
-.software-info-no-image {
-    display: flex; /* 使用flex布局，使内容居中 */
+        min-width: 200px; /* 避免内容太窄 */
+    }
-    justify-content: center; /* 水平居中对齐 */
-    align-items: center; /* 垂直居中对齐 */
-    width: 300px; /* 设置占位区宽度 */
-    height: 300px; /* 设置占位区高度 */
-    font-size: 14px; /* 字体大小 */
-    color: #888; /* 字体颜色，设置为淡灰色，确保内容不突兀 */
-    background-color: #f5f5f5; /* 背景色设置为淡灰色，突出显示占位内容 */
-    border: 1px dashed #ccc; /* 虚线边框，便于区分与其他内容 */
 }
-/* 表头单元格（标题行）的样式 */
+/* 表格样式 */
-.software-info th {
+.software-info-section table {
-    background: #f2f2f2; /* 背景颜色浅灰色，区分表头与其他部分 */
+    width: 100%; /* 让表格填充分类块 */
+    border-collapse: collapse;
-    text-align: left; /* 表头文字左对齐 */
-    padding: 8px; /* 增加内边距，提高可读性 */
 }
-/* 分类标题（合并行）样式，居中并带背景色 */
+/* 分类标题 */
-.software-info-category {
+.software-info-section table caption {
+    font-weight: bold;
-    text-align: center; /* 文字居中对齐 */
+    text-align: center;
-    background: #e6e6e6; /* 背景色浅灰色 */
+    padding: 5px;
-    font-weight: bold; /* 加粗字体，使其作为类别标题更突出 */
 }
-/* 所有单元格的样式 */
+/* 单元格样式 */
-.software-info th,
+.software-info-section th,
-.software-info td {
+.software-info-section td {
-    border: 1px solid #ccc; /* 为单元格添加边框，颜色为浅灰色 */
+    border: 1px solid var(--mw-border-color);
-    padding: 8px; /* 增加内边距，使内容更清晰 */
+    padding: 8px;
 }