wahyd4.github.com/source/css/tag-cloud.css

/* =========================================================
   Tag Cloud · Nebula style (toozhao.com/tags/)
   Inject via head.njk — 标签云专用样式
   ========================================================= */

/* ---- 页面级背景装饰：柔和星云光斑 ---- */
.tag-cloud-wrap {
  position: relative;
  padding: 10px 0 30px;
}
.tag-cloud-wrap::before,
.tag-cloud-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
.tag-cloud-wrap::before {
  width: 340px; height: 340px;
  top: -40px; left: -80px;
  background: radial-gradient(circle, rgba(120, 160, 255, 0.28), transparent 70%);
}
.tag-cloud-wrap::after {
  width: 320px; height: 320px;
  bottom: -60px; right: -60px;
  background: radial-gradient(circle, rgba(255, 150, 200, 0.22), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-wrap::before { background: radial-gradient(circle, rgba(90, 130, 255, 0.22), transparent 70%); }
  .tag-cloud-wrap::after  { background: radial-gradient(circle, rgba(255, 120, 180, 0.16), transparent 70%); }
}

/* ---- 统计横幅 ---- */
.tag-cloud-stats {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 8px auto 26px;
  width: fit-content;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 0.92em;
  letter-spacing: 0.06em;
  color: #5b6472;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(90, 120, 200, 0.18);
  box-shadow: 0 4px 18px rgba(80, 110, 200, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tag-cloud-stats strong {
  color: #3b6fd4;
  font-size: 1.15em;
  margin: 0 2px;
}
.tag-cloud-stats::before { content: '✦ '; color: #8a5cf6; }
.tag-cloud-stats::after  { content: ' ✦'; color: #8a5cf6; }
@media (prefers-color-scheme: dark) {
  .tag-cloud-stats {
    color: #aeb6c4;
    background: rgba(40, 46, 56, 0.7);
    border-color: rgba(130, 160, 230, 0.2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  }
  .tag-cloud-stats strong { color: #7ba6f0; }
}

/* ---- 标签容器：flex 居中换行，错落有致 ---- */
.tag-cloud-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px 16px;
  padding: 12px 4px 40px;
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 标签胶囊 ---- */
.tag-cloud-tags a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.32em 0.95em 0.34em;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  color: var(--c, #3b6fd4);
  background: var(--cb, rgba(80, 130, 220, 0.10));
  border: 1px solid color-mix(in srgb, var(--c, #3b6fd4) 22%, transparent);
  box-shadow: 0 2px 10px rgba(60, 90, 160, 0.06);
  transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  will-change: transform;
  opacity: 0; /* 进场动画控制 */
  animation: tagIn 0.55s ease forwards;
  animation-delay: calc(var(--i, 0) * 22ms);
  animation-timeline: auto;
}
/* 进场：淡入上浮 */
@keyframes tagIn {
  from { opacity: 0; filter: blur(3px); }
  to   { opacity: 1; filter: blur(0); }
}
/* 漂浮：独立 translate 属性，不与 hover transform 冲突 */
.tag-cloud-tags a {
  animation: tagIn 0.55s ease forwards, floatY var(--dur, 6s) ease-in-out var(--fd, 0s) infinite;
}
@keyframes floatY {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tag-cloud-tags a { animation: none; opacity: 1; translate: none; }
}

/* hover：放大 + 发光 + 背景填充 */
.tag-cloud-tags a:hover {
  transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)) scale(1.18);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c, #3b6fd4) 35%, transparent);
  border-color: color-mix(in srgb, var(--c, #3b6fd4) 55%, transparent);
  background: var(--c, #3b6fd4);
  color: #fff;
  z-index: 2;
}

/* 超级热门标签：渐变背景 + 呼吸光晕 */
.tag-cloud-tags a.hot {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c, #e0503a) 88%, #fff),
    color-mix(in srgb, var(--c, #e0503a) 60%, #000));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--c, #e0503a) 45%, transparent);
  animation: tagIn 0.55s ease forwards, floatY var(--dur, 6s) ease-in-out var(--fd, 0s) infinite, hotGlow 2.6s ease-in-out infinite;
}
@keyframes hotGlow {
  0%, 100% { box-shadow: 0 4px 16px color-mix(in srgb, var(--c, #e0503a) 35%, transparent); }
  50%      { box-shadow: 0 6px 30px color-mix(in srgb, var(--c, #e0503a) 60%, transparent); }
}
.tag-cloud-tags a.hot .tag-count { background: rgba(255, 255, 255, 0.25); color: #fff; }
.tag-cloud-tags a.hot:hover { box-shadow: 0 10px 34px color-mix(in srgb, var(--c, #e0503a) 70%, transparent); }
/* 中热标签：实底点缀 */
.tag-cloud-tags a.warm { background: var(--c, #e8a33d); color: #fff; border-color: transparent; }
.tag-cloud-tags a.warm .tag-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---- 计数徽章 ---- */
.tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--c, #3b6fd4) 14%, transparent);
  color: color-mix(in srgb, var(--c, #3b6fd4) 85%, #222);
  transition: background 0.25s ease, color 0.25s ease;
}
.tag-cloud-tags a:hover .tag-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ---- 暗色模式 ---- */
@media (prefers-color-scheme: dark) {
  .tag-cloud-tags a {
    color: var(--c, #7ba6f0);
    background: var(--cb-dark, rgba(90, 130, 220, 0.16));
    border-color: color-mix(in srgb, var(--c, #7ba6f0) 26%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  .tag-cloud-tags a:hover {
    background: var(--c, #7ba6f0);
    color: #101318;
  }
  .tag-count {
    background: rgba(0, 0, 0, 0.25);
    color: color-mix(in srgb, var(--c, #7ba6f0) 80%, #fff);
  }
  .tag-cloud-tags a:hover .tag-count { background: rgba(0, 0, 0, 0.2); color: #101318; }
}

/* ---- 移动端适配 ---- */
@media (max-width: 600px) {
  .tag-cloud-tags { gap: 9px 10px; padding: 6px 0 30px; }
  .tag-cloud-tags a { padding: 0.28em 0.75em 0.3em; }
  .tag-cloud-stats { font-size: 0.85em; padding: 8px 18px; margin-bottom: 18px; }
}