style.css

/* 网络时钟样式 - 响应式设计，优先优化 iPhone SE */

/* CSS 变量定义 */
:root {
  /* 默认深色主题 */
  --primary-bg: #000000;
  --text-color: #ffffff;
  --text-secondary: #cccccc;
  --accent-color: #007aff;
  --shadow-color: rgba(255, 255, 255, 0.1);
  --panel-bg: rgba(28, 28, 30, 0.95);
  --setting-item-bg: rgba(255, 255, 255, 0.05);
  --setting-item-hover-bg: rgba(255, 255, 255, 0.1);

  /* 响应式尺寸 - 适配各种屏幕 */
  --time-size: clamp(3rem, 18vw, 8rem);     /* 最小48px，最大128px */
  --date-size: clamp(1rem, 5vw, 2.5rem);    /* 最小16px，最大40px */
  --setting-btn-size: 44px;                  /* iOS推荐触摸目标最小尺寸 */
  --setting-panel-height: 70vh;

  /* 间距和边距 */
  --safe-padding: 20px;
  --border-radius: 12px;
  --transition-speed: 0.3s;
}

/* 白天主题 */
[data-theme="light"] {
  --primary-bg: #ffffff;
  --text-color: #000000;
  --text-secondary: #666666;
  --accent-color: #007aff;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --panel-bg: rgba(255, 255, 255, 0.95);
  --setting-item-bg: rgba(0, 0, 0, 0.05);
  --setting-item-hover-bg: rgba(0, 0, 0, 0.1);
}

/* 夜间主题（默认） */
[data-theme="dark"] {
  --primary-bg: #000000;
  --text-color: #ffffff;
  --text-secondary: #cccccc;
  --accent-color: #007aff;
  --shadow-color: rgba(255, 255, 255, 0.1);
  --panel-bg: rgba(28, 28, 30, 0.95);
  --setting-item-bg: rgba(255, 255, 255, 0.05);
  --setting-item-hover-bg: rgba(255, 255, 255, 0.1);
}

/* 基础重置和全局样式 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--primary-bg);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  height: 100vh;
  overflow: hidden; /* 防止滚动 */
  user-select: none; /* 防止文字选择 */
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* 防止长按菜单 */
  -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
}

/* 主时钟容器 */
.clock-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;

  /* iOS 安全区域支持 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);

  /* 性能优化 */
  contain: layout style paint;
}

/* 时间显示 */
.time-display {
  font-size: var(--time-size);
  font-weight: 200;
  font-variant-numeric: tabular-nums; /* 数字等宽 */
  font-feature-settings: "tnum" 1;    /* 强制启用表格数字 */
  letter-spacing: 0.05em;             /* 微调间距确保稳定 */
  line-height: 0.8;
  margin-bottom: 2vh;

  /* 硬件加速和性能优化 */
  transform: translateZ(0);
  will-change: contents;

  /* 文字阴影增强可读性 */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 日期显示 */
.date-display {
  font-size: var(--date-size);
  opacity: 0.7;
  font-weight: 300;
  letter-spacing: 0.02em;
  transition: opacity var(--transition-speed) ease;

  /* 当隐藏时的动画 */
  transform: translateZ(0);
}

.date-display.hidden {
  opacity: 0;
  transform: translateY(-10px);
}

/* 操作按钮容器 */
.action-buttons {
  position: fixed;
  top: calc(var(--safe-padding) + env(safe-area-inset-top));
  right: calc(var(--safe-padding) + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

/* 设置按钮和全屏按钮共用样式 */
.settings-btn,
.fullscreen-btn {
  width: var(--setting-btn-size);
  height: var(--setting-btn-size);

  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;

  font-size: 18px;
  color: var(--text-color);

  cursor: pointer;
  z-index: 100;

  /* 触摸优化 */
  touch-action: manipulation;

  /* 动画过渡 */
  transition: all var(--transition-speed) ease;

  /* 模糊背景效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.settings-btn:hover,
.fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.settings-btn:active,
.fullscreen-btn:active {
  transform: scale(0.95);
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.3);
}

/* 设置面板背景遮罩 */
.settings-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-speed) ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.settings-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* 设置面板 */
.settings-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: var(--setting-panel-height);
  max-height: 400px;

  background: var(--panel-bg);
  border-radius: var(--border-radius) var(--border-radius) 0 0;

  z-index: 300;

  /* 初始状态：隐藏在底部 */
  transform: translateY(100%);
  transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

  /* 模糊背景效果 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* 安全区域适配 */
  padding-bottom: env(safe-area-inset-bottom);
}

.settings-panel.active {
  transform: translateY(0);
}

/* 设置面板内容 */
.settings-content {
  padding: 30px var(--safe-padding) var(--safe-padding);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 允许垂直滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
}

.settings-content h3 {
  margin: 0 0 30px 0;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: var(--text-color);
}

/* 设置组 */
.setting-group {
  margin-bottom: 30px;
}

.setting-group h4 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.8;
}

/* 设置项 */
.setting-item {
  margin-bottom: 15px;
}

.setting-item label {
  display: flex;
  align-items: center;
  padding: 15px;
  background: var(--setting-item-bg);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
  font-size: 16px;

  /* 触摸目标优化 */
  min-height: 44px;
}

.setting-item label:active {
  background: var(--setting-item-hover-bg);
}

/* 主题选择器特殊布局 */
.setting-item:has(.theme-selector) label {
  justify-content: space-between;
  padding-right: 10px;
}

/* 主题选择器样式 */
.theme-selector {
  background: var(--setting-item-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-color);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  min-width: 120px;
}

.theme-selector:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.theme-selector option {
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 8px 12px;
}

/* 白天主题下的选择器调整 */
[data-theme="light"] .theme-selector {
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-color);
}

[data-theme="light"] .theme-selector option {
  background: var(--panel-bg);
  color: var(--text-color);
}

/* 自定义复选框 */
.setting-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-right: 12px;
  position: relative;
  transition: all var(--transition-speed) ease;
  flex-shrink: 0;
}

.setting-item input[type="checkbox"]:checked + .checkbox-custom {
  background: var(--accent-color);
}

.checkbox-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 12px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.setting-item input[type="checkbox"]:checked + .checkbox-custom::after {
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
}

/* 关闭按钮 */
.close-btn {
  margin-top: auto;
  padding: 15px 30px;
  background: var(--accent-color);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed) ease;

  /* 触摸优化 */
  min-height: 44px;
  touch-action: manipulation;
}

.close-btn:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* ==================== 响应式媒体查询 ==================== */

/* 小屏设备 (iPhone SE 等) - 优先适配 320px */
@media (max-width: 320px) {
  :root {
    --time-size: clamp(3rem, 18vw, 4.5rem);
    --date-size: clamp(0.9rem, 5.5vw, 1.5rem);
    --safe-padding: 15px;
  }

  .settings-content {
    padding: 25px var(--safe-padding) var(--safe-padding);
  }
}

/* 中等屏幕设备 (iPhone 6/7/8, iPhone X/11/12 mini) - 375px */
@media (min-width: 375px) and (max-width: 414px) {
  :root {
    --time-size: clamp(3.5rem, 16vw, 6rem);
    --date-size: clamp(1rem, 4.5vw, 2rem);
  }
}

/* 大屏手机 (iPhone Plus, Pro Max) - 414px+ */
@media (min-width: 414px) and (max-width: 768px) {
  :root {
    --time-size: clamp(4rem, 15vw, 7rem);
    --date-size: clamp(1.2rem, 4vw, 2.2rem);
  }
}

/* 平板设备 (iPad mini, iPad) - 768px+ */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --time-size: clamp(5rem, 12vw, 8rem);
    --date-size: clamp(1.5rem, 3vw, 2.5rem);
  }

  .action-buttons {
    top: 30px;
    right: 30px;
    gap: 15px;
  }

  .fullscreen-btn,
  .settings-btn {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

/* 桌面端 - 1024px+ */
@media (min-width: 1024px) {
  :root {
    --time-size: 8rem;
    --date-size: 2.5rem;
  }

  .clock-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .action-buttons {
    top: 40px;
    right: 40px;
    gap: 20px;
  }

  .fullscreen-btn,
  .settings-btn {
    width: 55px;
    height: 55px;
    font-size: 26px;
  }
}

/* 横屏模式 - 通用适配 */
@media (orientation: landscape) {
  :root {
    --time-size: clamp(2.5rem, 10vh, 6rem);
    --date-size: clamp(0.8rem, 2.5vh, 2rem);
    --setting-panel-height: 95vh;
  }

  .clock-container {
    justify-content: center;
    padding: 5px;
    flex-direction: row;
    align-items: center;
  }

  .time-display {
    margin-bottom: 0;
    margin-right: 3vw;
    line-height: 1;
  }

  .date-display {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    margin-left: 2vw;
  }

  .settings-panel {
    height: auto;
    max-height: 95vh;
  }

  .settings-content {
    padding: 20px var(--safe-padding) calc(var(--safe-padding) + env(safe-area-inset-bottom));
  }
}

/* 横屏 - 小屏设备 (iPhone SE 横屏 568×320) */
@media (orientation: landscape) and (max-height: 568px) {
  :root {
    --time-size: clamp(2.5rem, 12vh, 5rem);
    --date-size: clamp(0.8rem, 3vh, 1.5rem);
  }
}

/* 横屏 - 超宽屏 (iPhone Plus/Pro Max 横屏) */
@media (orientation: landscape) and (min-width: 568px) and (max-height: 414px) {
  :root {
    --time-size: clamp(3rem, 10vh, 5.5rem);
    --date-size: clamp(1rem, 2.5vh, 1.8rem);
  }

  .clock-container {
    gap: 4vw;
  }

  .time-display {
    margin-right: 0;
  }

  .date-display {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    margin-left: 0;
  }
}

/* 深色模式下的微调（虽然默认就是深色） */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: rgba(255, 255, 255, 0.15);
  }

  .time-display {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  }
}

/* 减少动画的用户偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --text-color: #ffffff;
    --primary-bg: #000000;
  }

  .settings-btn,
  .setting-item label {
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}