@anglefeint/astro-theme 0.1.18 → 0.1.19

package/src/styles/ai/background.css

@@ -0,0 +1 @@
+/* AI background layer: reserved for backdrop/ambient effects. */

package/src/styles/ai/base.css

@@ -0,0 +1,249 @@
+/* AI base layer: page chrome variables and foundational surfaces. */
+/* AI theme styles extracted from global.css */
+body.ai-page header .ai-scanlines,
+body.ai-page footer .ai-scanlines {
+  position: absolute;
+  inset: 0;
+  contain: layout paint;
+  z-index: 1;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.55) 2px,
+    rgba(0, 0, 0, 0.55) 4px
+  );
+  pointer-events: none;
+  opacity: 0.78;
+  transition: opacity 0.3s ease;
+}
+body.ai-page header .ai-scanlines::after,
+body.ai-page footer .ai-scanlines::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 1px,
+    rgba(0, 0, 0, 0.12) 1px,
+    rgba(0, 0, 0, 0.12) 2px
+  );
+  pointer-events: none;
+  opacity: 0.8;
+}
+body.ai-page header:hover .ai-scanlines,
+body.ai-page footer:hover .ai-scanlines {
+  opacity: 0;
+}
+/* ========== 点线网络 漂浮浮动 文章页 (body.ai-page) ========== */
+body.ai-page {
+  background: #03060c !important;
+  background-image: none !important;
+  min-height: 100vh;
+  --chrome-bg: rgba(14, 10, 16, 0.72);
+  --chrome-border: rgba(255, 106, 132, 0.14);
+  --chrome-link: rgba(214, 243, 255, 0.92);
+  --chrome-link-hover: rgba(255, 168, 188, 0.98);
+  --chrome-active: rgba(132, 214, 255, 0.92);
+  --chrome-text-muted: rgba(178, 220, 238, 0.7);
+}
+/* 终端式滚动条 */
+body.ai-page {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 106, 132, 0.48) transparent;
+}
+body.ai-page::-webkit-scrollbar {
+  width: 6px;
+}
+body.ai-page::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.ai-page::-webkit-scrollbar-thumb {
+  background: rgba(255, 106, 132, 0.34);
+  border-radius: 3px;
+}
+body.ai-page::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 120, 152, 0.58);
+  box-shadow: 0 0 8px rgba(255, 106, 132, 0.4);
+}
+body.ai-page::-webkit-scrollbar-thumb {
+  box-shadow: 0 0 6px rgba(255, 106, 132, 0.26);
+}
+.ai-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.ai-glow {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    140deg,
+    #05060b 0%,
+    #0b1322 24%,
+    #0f1d2f 46%,
+    #221018 72%,
+    #13070f 100%
+  );
+}
+.ai-glow-shift {
+  animation: ai-glow-shift 25s ease-in-out infinite;
+}
+@keyframes ai-glow-shift {
+  0%,
+  100% {
+    filter: brightness(1) saturate(1);
+  }
+  33% {
+    filter: brightness(1.02) saturate(1.1) hue-rotate(5deg);
+  }
+  66% {
+    filter: brightness(0.99) saturate(1.05) hue-rotate(-3deg);
+  }
+}
+/* 柔和光晕：中心径向青蓝光 */
+.ai-haze {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 92% 72% at 50% 38%,
+    rgba(122, 212, 252, 0.08) 0%,
+    rgba(255, 90, 120, 0.06) 34%,
+    transparent 65%
+  );
+  animation: ai-haze-drift 18s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+@keyframes ai-haze-drift {
+  0% {
+    opacity: 0.8;
+    transform: translate(2%, 1%) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-2%, -1%) scale(0.98);
+  }
+}
+/* 边缘暗角 */
+.ai-vignette {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 75% 75% at 50% 50%,
+    transparent 45%,
+    rgba(0, 0, 0, 0.25) 100%
+  );
+  pointer-events: none;
+}
+.ai-stripe {
+  position: absolute;
+  inset: 0;
+  opacity: 0.06;
+  background: repeating-linear-gradient(
+    90deg,
+    transparent,
+    transparent 1px,
+    rgba(196, 232, 255, 0.28) 1px,
+    rgba(196, 232, 255, 0.28) 2px
+  );
+}
+/* 噪点层 */
+.ai-noise {
+  position: absolute;
+  inset: 0;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  pointer-events: none;
+}
+/* 六边形网格 */
+.ai-hex-grid {
+  position: absolute;
+  inset: 0;
+  opacity: 0.11;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='49'%3E%3Cpath d='M28 0L56 14.5v29L28 49L0 43.5v-29z' fill='none' stroke='rgba(255,112,140,0.42)' stroke-width='0.5'/%3E%3Cpath d='M0 14.5L28 29v14.5' fill='none' stroke='rgba(162,220,255,0.32)' stroke-width='0.4'/%3E%3C/svg%3E");
+  background-size: 56px 49px;
+  pointer-events: none;
+}
+/* 思维流粒子 */
+.ai-thought-particles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.ai-particle {
+  position: absolute;
+  left: var(--x, 50%);
+  top: var(--y, 50%);
+  width: 4px;
+  height: 4px;
+  background: rgba(255, 138, 158, 0.6);
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(255, 110, 136, 0.36);
+  animation: ai-particle-float var(--d, 4s) ease-in-out infinite;
+  animation-delay: calc(var(--i, 0) * -0.3s);
+}
+.ai-particle:nth-child(3n) {
+  width: 6px;
+  height: 6px;
+  background: rgba(168, 224, 255, 0.56);
+  box-shadow: 0 0 12px rgba(124, 206, 255, 0.34);
+}
+.ai-particle:nth-child(5n) {
+  width: 2px;
+  height: 2px;
+  background: rgba(182, 255, 218, 0.62);
+  box-shadow: 0 0 8px rgba(182, 255, 218, 0.28);
+}
+@keyframes ai-particle-float {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.5;
+  }
+  25% {
+    transform: translate(8px, -12px) scale(1.2);
+    opacity: 0.8;
+  }
+  50% {
+    transform: translate(-6px, 6px) scale(0.9);
+    opacity: 0.6;
+  }
+  75% {
+    transform: translate(4px, 8px) scale(1.1);
+    opacity: 0.7;
+  }
+}
+.ai-network-canvas {
+  position: absolute;
+  inset: -8%;
+  width: 116%;
+  height: 116%;
+  opacity: 1;
+  pointer-events: none;
+  filter: brightness(1.28) saturate(1.08);
+  animation: ai-drift 25s ease-in-out infinite;
+}
+@keyframes ai-drift {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(1.2%, 0.6%) scale(1.008);
+  }
+  50% {
+    transform: translate(-0.8%, 1%) scale(0.995);
+  }
+  75% {
+    transform: translate(0.5%, -0.8%) scale(1.005);
+  }
+}
+body.ai-page .ai-content,
+body.ai-page footer {
+  position: relative;
+  z-index: 10;
+}

package/src/styles/ai/controls.css

@@ -0,0 +1,396 @@
+/* AI controls/state layer: progress, interactions, and motion effects. */
+/* ========== 新增 AI 风格特效 ========== */
+/* 复古块状光标（正文末尾） */
+.ai-block-cursor {
+  display: inline-block;
+  width: 0.6em;
+  height: 1.1em;
+  background: rgba(150, 226, 255, 0.94);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: ai-block-cursor-blink 1s step-end infinite;
+}
+@keyframes ai-block-cursor-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+/* 阅读进度条（紫色，更醒目） */
+.ai-read-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 4px;
+  width: calc(var(--read-progress, 0) * 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(132, 214, 255, 0.92),
+    rgba(94, 196, 255, 0.94)
+  );
+  box-shadow: 0 0 14px rgba(104, 204, 255, 0.45);
+  z-index: 100;
+  transition: width 0.08s ease-out;
+}
+/* 鼠标跟随光斑 */
+.ai-mouse-glow {
+  position: fixed;
+  width: 300px;
+  height: 300px;
+  left: calc(var(--mouse-x, -9999px) - 150px);
+  top: calc(var(--mouse-y, -9999px) - 150px);
+  background: radial-gradient(
+    circle,
+    rgba(124, 210, 248, 0.1) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.3s;
+}
+body.ai-page:not(:hover) .ai-mouse-glow {
+  opacity: 0.5;
+}
+/* 深度模糊：上下边缘虚化 */
+.ai-depth-blur {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 15;
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 15%,
+    black 85%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 15%,
+    black 85%,
+    transparent 100%
+  );
+  backdrop-filter: blur(0);
+  transition: backdrop-filter 0.3s;
+}
+.ai-depth-blur::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    transparent 12%,
+    transparent 88%,
+    black 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    transparent 12%,
+    transparent 88%,
+    black 100%
+  );
+}
+/* 思考中三连点 */
+.ai-thinking-dots {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  gap: 6px;
+  z-index: 50;
+  opacity: 1;
+  animation: ai-thinking-fade 0.8s ease-out 1.2s forwards;
+}
+.ai-thinking-dots span {
+  width: 6px;
+  height: 6px;
+  background: rgba(150, 226, 255, 0.82);
+  border-radius: 50%;
+  animation: ai-dot-pulse 0.8s ease-in-out infinite;
+}
+.ai-thinking-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.ai-thinking-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes ai-thinking-fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+@keyframes ai-dot-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+/* 故障效果：链接/代码块 hover 极轻微 RGB 分离 */
+body.ai-page .ai-content .prose a:hover {
+  animation: ai-glitch-link 0.4s ease-out;
+}
+body.ai-page .ai-content .prose pre:hover {
+  animation: ai-glitch-pre 0.35s ease-out;
+}
+@keyframes ai-glitch-link {
+  0%,
+  100% {
+    text-shadow:
+      0 0 10px rgba(100, 255, 220, 0.6),
+      0 0 20px rgba(120, 180, 255, 0.3);
+  }
+  20% {
+    text-shadow:
+      -0.5px 0 rgba(88, 176, 236, 0.4),
+      0.5px 0 rgba(100, 255, 220, 0.4);
+  }
+  40% {
+    text-shadow:
+      0.5px 0 rgba(88, 176, 236, 0.3),
+      -0.5px 0 rgba(100, 255, 220, 0.3);
+  }
+  60% {
+    text-shadow:
+      0 0 10px rgba(100, 255, 220, 0.6),
+      0 0 20px rgba(120, 180, 255, 0.3);
+  }
+}
+@keyframes ai-glitch-pre {
+  0%,
+  100% {
+    box-shadow:
+      inset 0 0 30px rgba(0, 40, 80, 0.3),
+      0 0 20px rgba(100, 220, 255, 0.06);
+  }
+  30% {
+    box-shadow:
+      inset 0 0 30px rgba(0, 40, 80, 0.3),
+      -1px 0 rgba(84, 170, 230, 0.15),
+      1px 0 rgba(80, 255, 200, 0.15);
+  }
+}
+/* 悬浮预览卡 */
+body.ai-page .ai-content .prose a.ai-link-preview {
+  position: relative;
+}
+body.ai-page .ai-content .prose a.ai-link-preview::after {
+  content: attr(data-preview);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  padding: 6px 12px;
+  background: rgba(6, 14, 24, 0.95);
+  border: 1px solid rgba(100, 255, 180, 0.3);
+  border-radius: 6px;
+  font-size: 0.75em;
+  color: rgba(180, 255, 220, 0.9);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+body.ai-page .ai-content .prose a.ai-link-preview:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-12px);
+}
+/* 时间戳日志风格 */
+.ai-log-date {
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+}
+.ai-log-label {
+  color: rgba(100, 255, 180, 0.7);
+  margin-right: 0.25em;
+}
+
+/* ========== AI 时代氛围增强 ========== */
+/* 元信息终端化 */
+.ai-meta-terminal {
+  font-family: ui-monospace, monospace;
+  font-size: 0.78em;
+  color: rgba(180, 224, 246, 0.84);
+  margin-bottom: 0.62em;
+  letter-spacing: 0.04em;
+}
+.ai-system-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-bottom: 0.55rem;
+}
+.ai-system-chip {
+  font-family: ui-monospace, monospace;
+  font-size: 0.68em;
+  color: rgba(186, 232, 252, 0.94);
+  background: rgba(8, 18, 30, 0.82);
+  border: 1px solid rgba(126, 192, 224, 0.34);
+  border-radius: 5px;
+  padding: 0.16rem 0.5rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+/* 提示词式标题 */
+.ai-prompt-line {
+  font-size: 0.86em;
+  color: rgba(154, 218, 246, 0.8);
+  margin-bottom: 0.4em;
+}
+.ai-prompt-topic {
+  color: rgba(188, 232, 252, 0.88);
+  font-style: normal;
+}
+/* 对话气泡 / Response 区域 */
+.ai-response-wrap {
+  position: relative;
+  border: 1px solid rgba(152, 222, 255, 0.2);
+  background: linear-gradient(
+    180deg,
+    rgba(10, 16, 28, 0.54),
+    rgba(16, 8, 16, 0.4)
+  );
+  border-radius: 8px;
+  padding: 0.75rem 0.9rem 0.45rem;
+  box-shadow:
+    inset 0 0 0 1px rgba(138, 206, 238, 0.12),
+    0 8px 26px rgba(0, 0, 0, 0.32);
+}
+.ai-response-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  margin-bottom: 0.8em;
+}
+.ai-response-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(
+    145deg,
+    rgba(118, 204, 244, 0.62),
+    rgba(132, 214, 255, 0.42)
+  );
+  border: 1px solid rgba(136, 208, 242, 0.42);
+  box-shadow:
+    0 0 0 2px rgba(10, 18, 28, 0.64),
+    0 0 14px rgba(124, 206, 246, 0.32);
+}
+.ai-response-label {
+  font-size: 0.8em;
+  color: rgba(170, 226, 250, 0.92);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.ai-response-meta {
+  margin-left: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.68em;
+  color: rgba(188, 226, 248, 0.76);
+}
+.ai-response-meta strong {
+  color: rgba(194, 236, 252, 0.96);
+  font-weight: 600;
+}
+/* 字数/Token 角落 */
+.ai-stats-corner {
+  position: absolute;
+  top: 0.5em;
+  right: 1em;
+  font-family: ui-monospace, monospace;
+  font-size: 0.7em;
+  color: rgba(176, 218, 240, 0.58);
+}
+.ai-model-id {
+  color: rgba(158, 218, 246, 0.82);
+}
+/* Regenerate 按钮 */
+.ai-regenerate {
+  display: block;
+  margin: 2em auto 0;
+  padding: 0.5em 1.2em;
+  font-size: 0.85em;
+  font-family: ui-monospace, monospace;
+  color: rgba(188, 234, 252, 0.94);
+  background: rgba(10, 18, 28, 0.68);
+  border: 1px solid rgba(126, 192, 224, 0.34);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.ai-regenerate:hover:not(:disabled) {
+  background: rgba(126, 192, 224, 0.12);
+  box-shadow: 0 0 14px rgba(124, 206, 246, 0.24);
+}
+.ai-regenerate:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.ai-regenerating {
+  pointer-events: none;
+}
+.ai-regenerate-flash {
+  animation: ai-flash 0.6s ease-out;
+}
+@keyframes ai-flash {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* 首字放大 */
+body.ai-page
+  .ai-content
+  .prose
+  .ai-prose-body
+  > p:first-of-type::first-letter {
+  float: left;
+  font-size: 3.2em;
+  line-height: 0.9;
+  margin-right: 0.1em;
+  color: rgba(160, 226, 252, 0.94);
+  text-shadow: 0 0 22px rgba(124, 206, 246, 0.3);
+}
+/* 段落滚动浮现 */
+.ai-prose-body p,
+.ai-prose-body h2,
+.ai-prose-body h3,
+.ai-prose-body pre,
+.ai-prose-body blockquote,
+.ai-prose-body ul,
+.ai-prose-body ol {
+  opacity: 0;
+  transform: translateY(12px);
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+}
+.ai-prose-body .ai-para-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+

package/src/styles/ai/hero.css

@@ -0,0 +1 @@
+/* AI hero layer: reserved for hero/monitor-specific style rules. */