Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
Line 2: Line 2:
@import url("/res/Common/css/materialdesignicons.min.css");
@import url("/res/Common/css/materialdesignicons.min.css");


.wikitable {
.prettytable {
   text-align: center;
   text-align: center;
}
}


/* 表头单元格的样式 */
/* 表头单元格的样式 */
.wikitable th {
.prettytable th {
   background-color: #646262; /* 背景颜色 */
   background-color: #646262; /* 背景颜色 */
   color: #ffffff; /* 字体颜色 */
   color: #ffffff; /* 字体颜色 */
Line 17: Line 17:


/* 表头行的样式 */
/* 表头行的样式 */
.wikitable thead tr {
.prettytable thead tr {
   background-color: #646262; /* 行背景颜色 */
   background-color: #646262; /* 行背景颜色 */
}
}


.wikitable td {
.prettytable td {
   min-width: 100px;
   min-width: 100px;
   border: 1px solid #646262;
   border: 1px solid #646262;
Line 28: Line 28:


/* 固定第一列的样式 */
/* 固定第一列的样式 */
.wikitable th:first-child,
.prettytable th:first-child,
.wikitable td:first-child {
.prettytable td:first-child {
   position: -webkit-sticky; /* Safari */
   position: -webkit-sticky; /* Safari */
   position: sticky;
   position: sticky;
Line 36: Line 36:
   border: 1px solid #646262;
   border: 1px solid #646262;
}
}
.wikitable td:first-child {
.prettytable td:first-child {
   background-color: #f2f4f8;
   background-color: #f2f4f8;
}
}
Line 42: Line 42:
/* 小屏幕(如手机) */
/* 小屏幕(如手机) */
@media (max-width: 600px) {
@media (max-width: 600px) {
   .wikitable {
   .prettytable {
     min-width: 100%;
     min-width: 100%;
   }
   }
Line 49: Line 49:
/* 中等屏幕(如平板电脑) */
/* 中等屏幕(如平板电脑) */
@media (min-width: 601px) and (max-width: 1024px) {
@media (min-width: 601px) and (max-width: 1024px) {
   .wikitable {
   .prettytable {
     min-width: 600px;
     min-width: 600px;
   }
   }
Line 56: Line 56:
/* 大屏幕(如桌面电脑) */
/* 大屏幕(如桌面电脑) */
@media (min-width: 1025px) {
@media (min-width: 1025px) {
   .wikitable {
   .prettytable {
     min-width: 600px;
     min-width: 600px;
   }
   }
}
}

Latest revision as of 21:41, 20 July 2024

@import url("/res/Common/css/vuetify.min.css");
@import url("/res/Common/css/materialdesignicons.min.css");

.prettytable {
  text-align: center;
}

/* 表头单元格的样式 */
.prettytable th {
  background-color: #646262; /* 背景颜色 */
  color: #ffffff; /* 字体颜色 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文本居中对齐 */
  border-bottom: 2px solid #646262; /* 底部边框 */
  font-weight: bold; /* 字体加粗 */
}

/* 表头行的样式 */
.prettytable thead tr {
  background-color: #646262; /* 行背景颜色 */
}

.prettytable td {
  min-width: 100px;
  border: 1px solid #646262;
  border-collapse: collapse; /* 使边框合并成一个 */
}

/* 固定第一列的样式 */
.prettytable th:first-child,
.prettytable td:first-child {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  left: 0;
  z-index: 1; /* 确保固定列在前面 */
  border: 1px solid #646262;
}
.prettytable td:first-child {
  background-color: #f2f4f8;
}

/* 小屏幕(如手机) */
@media (max-width: 600px) {
  .prettytable {
    min-width: 100%;
  }
}

/* 中等屏幕(如平板电脑) */
@media (min-width: 601px) and (max-width: 1024px) {
  .prettytable {
    min-width: 600px;
  }
}

/* 大屏幕(如桌面电脑) */
@media (min-width: 1025px) {
  .prettytable {
    min-width: 600px;
  }
}