cover.css

/* Global Styles */
a,
a:focus,
a:hover {
  color: #fff;
  text-decoration: none;
}

/* Button Styles */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  background-color: #fff;
  border: 1px solid #fff;
  text-shadow: none;
}

/* Base Structure */
html,
body {
  height: 100%;
  margin: 0;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  overflow-x: auto; /* 页面水平滚动 */
  overflow-y: auto; /* 页面垂直滚动 */
}

/* Site Wrapper for Centering */
.site-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  width: 100%;
  min-height: 100vh; /* 填满视口 */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
  padding-top: 70px; /* 为固定导航栏留出空间 */
  padding-bottom: 50px; /* 为固定页脚留出空间 */
  box-sizing: border-box;
}

/* Inner Wrapper */
.site-wrapper-inner {
  width: 100%;
  max-width: 100%; /* 移除宽度限制，适应大型网格 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Cover Container */
.cover-container {
  width: 100%;
  max-width: 100%; /* 移除固定宽度限制 */
  margin: 0 auto;
  padding: 0; /* 移除左右padding，避免左侧空白 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Inner Content */
.inner {
  padding: 20px 0; /* 仅保留垂直padding */
  width: 100%;
}

/* Header (Masthead) */
.masthead-brand {
  margin: 10px 0;
  font-weight: 500;
}

.masthead-nav > li {
  display: inline-block;
  margin-left: 20px;
}

.masthead-nav > li > a {
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid transparent;
}

.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

/* Cover Section */
.cover {
  padding: 0;
  width: 100%;
}

/* Grid Styles */
#_grid {
  width: auto; /* 宽度由表格内容决定 */
  margin: 0 auto; /* 水平居中 */
  text-align: center;
}

#_grid table {
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed; /* 确保单元格均匀分布 */
  cursor: crosshair;
  margin: 0 auto; /* 表格居中 */
  line-height: 0; /* 移除垂直间距 */
  display: inline-table; /* 宽度自适应内容 */
}

#_grid td {
  width: 15px; /* 默认值，由JS动态覆盖 */
  height: 15px; /* 默认值，由JS动态覆盖 */
  min-width: 15px;
  min-height: 15px;
  max-width: 15px;
  max-height: 15px;
  padding: 0;
  margin: 0;
  background-color: white;
  box-sizing: border-box;
}

#_grid td:hover,
#_grid td.on:hover {
  background-color: #c3c1ff;
}

#_grid td.on {
  background-color: #a9a9a9;
}

/* Output Styles */
#_output {
  text-align: left;
  font-size: 14px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Footer Layout */
.footer {
  text-align: center;
  margin-top: 20px;
  width: 100%;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
  .masthead {
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0;
    z-index: 1000;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
  }
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}

@media (min-width: 992px) {
  .site-wrapper-inner {
    max-width: 100%; /* 移除宽度限制 */
  }
}