{"html":"\n","css":".navbar-container {\n display: flex;\n justify-content: center;\n padding: 1rem;\n}\n\n.search-bar {\n display: flex;\n align-items: center;\n width: 100%;\n max-width: 500px;\n background-color: #1a1b23;\n padding: 0.5rem 1rem;\n border-radius: 30px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);\n transition: all 0.3s ease;\n border: 1px solid #2a2b33;\n}\n\n.search-bar:focus-within {\n background-color: #222533;\n border-color: #00ff99;\n box-shadow: 0 4px 15px rgba(0, 255, 153, 0.35);\n}\n\n.search-bar:hover {\n background-color: #222533;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);\n}\n\n.InputContainer {\n display: flex;\n align-items: center;\n flex-grow: 1;\n gap: 0.75rem;\n}\n\n.input {\n flex: 1;\n border: none;\n outline: none;\n font-size: 1rem;\n background: none;\n color: #f0f0f0;\n padding: 0.5rem 0;\n font-family: inherit;\n}\n\n.input::placeholder {\n color: #8a8a8a;\n opacity: 1;\n transition: opacity 0.2s ease;\n}\n\n.input:focus::placeholder {\n opacity: 0.5;\n}\n\n.searchIcon {\n width: 20px;\n height: 20px;\n fill: #8a8a8a;\n transition: fill 0.2s ease;\n}\n\n.search-bar:focus-within .searchIcon {\n fill: #00ff99;\n}\n\n.border {\n width: 1px;\n height: 24px;\n background-color: #3a3b43;\n margin: 0 0.75rem;\n}\n\n.micButton {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n border-radius: 50%;\n background: none;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.micButton:hover {\n background-color: #2a2b33;\n}\n\n.micIcon {\n width: 18px;\n height: 18px;\n fill: #8a8a8a;\n transition: fill 0.2s ease;\n}\n\n.micButton:hover .micIcon {\n fill: #ff5100;\n}\n"}

light-mayfly-18

👁 实时预览

📝 源代码