hexo-theme-wang/source/css/time.styl

a hexo theme minimalism

.site-time {
  position: absolute;
  bottom: 15%;
  width: 100%;
  height: 10%;
  text-align: center;
  z-index: 100;

  #clock {
    display: inline-block;
    font-size: 3.5em; // 稍微放大字体
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 300;
    color: rgba(0, 255, 255, 0.85); // 稍微提高亮度
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); // 增强光晕效果
    background: rgba(15, 15, 25, 0.5); // 增加背景透明度
    backdrop-filter: blur(10px); // 增强模糊效果
    -webkit-backdrop-filter: blur(10px);
    padding: 0.3em 1em; // 增加水平内边距
    border-radius: 20px; // 更大的圆角
    border: 1px solid rgba(0, 255, 255, 0.25); // 增强边框显示
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(0, 255, 255, 0.2); // 双重阴影效果
    letter-spacing: 0.05em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); // 使用更平滑的动画曲线

    &:hover {
      color: rgba(0, 255, 255, 1);
      text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
      box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 255, 255, 0.3);
      transform: translateY(-5px) scale(1.03);
    }
  }
}

// 为侧边栏添加时钟样式 - 增强版
.sidebar-bg {
  #clock {
    display: block;
    text-align: center;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 300;
    color: rgba(0, 255, 255, 0.85);
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
    background: rgba(15, 15, 25, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 15px;
    border: 1px solid rgba(0, 255, 255, 0.25);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 10px rgba(0, 255, 255, 0.15);
    letter-spacing: 0.05em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    // 自适应大小设置
    font-size: calc(1.2vw + 1.1rem);
    padding: 0.4em 0.8em;
    max-width: 95%;
    margin: 1em auto; // Centered horizontally with some top margin

    &:hover {
      color: rgba(0, 255, 255, 1);
      text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
      box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(0, 255, 255, 0.2);
      transform: translateY(-3px) scale(1.02); // Simplified hover effect
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .site-time {
    #clock {
      font-size: 2.5em;
      padding: 0.2em 0.6em;
    }
  }

  .sidebar-bg {
    #clock {
      font-size: calc(2vw + 0.8rem); // 中等屏幕上的字体大小
      padding: 0.2em 0.5em;
    }
  }
}

@media (max-width: 480px) {
  .site-time {
    #clock {
      font-size: 2em;
      padding: 0.2em 0.5em;
    }
  }

  .sidebar-bg {
    #clock {
      font-size: calc(3vw + 0.7rem); // 小屏幕上的字体大小
      padding: 0.2em 0.4em;
      max-width: 95%;
    }
  }
}