{"html":"

\n \n

\n","css":"/* Component Wrapper (local background allowed) */\n.ai-mode-component {\n --btn-bg: #2c303d;\n --btn-text: #e8e8e8;\n --btn-border: #ffffff;\n --gradient-green: #34a853;\n --gradient-yellow: #ffd314;\n --gradient-red: #ff4641;\n --gradient-blue: #3186ff;\n\n display: flex;\n justify-content: center;\n align-items: center;\n background: #202124;\n padding: 4em;\n border-radius: 1em;\n}\n\n/* Button */\n.ai-mode-button {\n background: var(--btn-bg);\n border: none;\n border-radius: 5em;\n cursor: pointer;\n\n font-size: 0.875em;\n font-weight: 400;\n line-height: 1.25em;\n\n height: 2.25em;\n padding: 0 1em 0 0.85em;\n\n position: relative;\n color: var(--btn-text);\n overflow: visible;\n\n transition: transform 0.15s ease;\n}\n\n/* Active (pressed) */\n.ai-mode-button:active {\n transform: scale(0.97);\n}\n\n/* Focus Ring */\n.ai-mode-button:focus-visible {\n outline: 0.15em solid var(--gradient-blue);\n outline-offset: 0.3em;\n}\n\n/* Outer border/glow */\n.ai-mode-button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n border: 0.07em solid var(--btn-border);\n background: rgba(255, 255, 255, 0.08);\n opacity: 0.4;\n transition:\n opacity 0.4s linear,\n background-color 0.4s linear;\n}\n\n.ai-mode-button:hover::before {\n opacity: 0;\n}\n\n/* Blur Layer */\n.blur-layer,\n.gradient-layer {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n overflow: hidden;\n pointer-events: none;\n}\n\n.blur-layer {\n opacity: 0.35;\n filter: blur(0.2em);\n}\n\n/* Rotating gradient */\n.rotating-gradient {\n position: absolute;\n inset: 0;\n height: 200%;\n top: -50%;\n opacity: 0;\n\n background: conic-gradient(\n rgba(49, 134, 255, 0) 0deg,\n var(--gradient-green) 43deg,\n var(--gradient-yellow) 65deg,\n var(--gradient-red) 105deg,\n var(--gradient-blue) 144deg,\n var(--gradient-blue) 180deg,\n rgba(49, 134, 255, 0) 324deg,\n rgba(49, 134, 255, 0) 360deg\n );\n\n transform: rotate(180deg);\n scale: 2 1;\n transition: opacity 0.4s linear;\n}\n\n.ai-mode-button:hover .rotating-gradient {\n opacity: 1;\n animation: rotate-gradient 2s linear infinite;\n}\n\n@keyframes rotate-gradient {\n from {\n transform: rotate(180deg);\n }\n to {\n transform: rotate(540deg);\n }\n}\n\n/* Inner background */\n.inner-bg {\n position: absolute;\n inset: 0.15em;\n border-radius: inherit;\n background: var(--btn-bg);\n transition: filter 1s cubic-bezier(0, 0, 0, 1);\n}\n\n.ai-mode-button:hover .inner-bg {\n filter: blur(0.2em);\n}\n\n.inner-bg::after {\n content: \"\";\n position: absolute;\n inset: -0.7em;\n border-radius: inherit;\n background: var(--btn-bg);\n opacity: 0.5;\n}\n\n/* Button content */\n.button-content {\n position: relative;\n z-index: 2;\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n\n/* Icon */\n.icon {\n width: 1.25em;\n height: 1.25em;\n display: flex;\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n fill: currentColor;\n}\n\n/* Text label */\n.label {\n font-size: 1em;\n line-height: 1.25em;\n}\n"}

afraid-turtle-52

👁 实时预览

📝 源代码