{"html":"

\n \n \n \n

\n","css":".font-size-selector {\n display: flex;\n gap: 8px;\n}\n\n.font-btn {\n width: 48px;\n height: 48px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n color: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n transition: all 0.3s ease;\n font-family: Georgia, serif;\n}\n\n.font-btn:nth-child(1) {\n font-size: 0.85rem;\n}\n\n.font-btn:nth-child(2) {\n font-size: 1.1rem;\n}\n\n.font-btn:nth-child(3) {\n font-size: 1.4rem;\n}\n\n.font-btn:hover {\n background: rgba(74, 144, 226, 0.1);\n border-color: rgba(74, 144, 226, 0.3);\n color: #fff;\n}\n\n.font-btn.active {\n background: rgba(74, 144, 226, 0.2);\n border-color: rgba(74, 144, 226, 0.5);\n color: #fff;\n}\n\n/* Theme Options */\n.theme-options {\n display: flex;\n gap: 10px;\n}\n\n.theme-btn {\n width: 52px;\n height: 52px;\n border-radius: 12px;\n border: 2px solid rgba(255, 255, 255, 0.1);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n}\n\n.theme-btn svg {\n width: 24px;\n height: 24px;\n}\n\n.theme-btn[data-theme=\"light\"] {\n background: #f5f5f5;\n color: #333;\n}\n\n.theme-btn[data-theme=\"dark\"] {\n background: #1a1f2e;\n color: #fff;\n}\n\n.theme-btn[data-theme=\"sepia\"] {\n background: #f4ecd8;\n color: #5c4b37;\n}\n\n.theme-btn:hover {\n transform: scale(1.05);\n}\n\n.theme-btn.active {\n border-color: #4a90e2;\n box-shadow: 0 0 16px rgba(74, 144, 226, 0.3);\n}\n"}

yellow-gecko-81

👁 实时预览

📝 源代码