{"html":"

\n \n

Beta

\n \n

\n\n

\n Light\n

\n \n \n \n \n \n \n \n \n \n \n

📐 -45°

\n \n \n \n \n \n \n \n \n \n 100%\n

\n\n

\n Refraction\n

\n \n

\n 78\n

\n Depth\n

\n \n

\n 56\n

\n Dispersion\n

\n \n

\n 98\n

\n Frost\n

\n \n

\n 60\n

\n","css":"/* Note: dropdown is functional, to see click the dropdown.. */\n.glass-card {\n width: 290px;\n background: rgba(36, 36, 36, 0.75);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-radius: 14px;\n padding: 14px 16px;\n color: #ffffff;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n box-shadow:\n 0 20px 40px rgba(0, 0, 0, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.08);\n transition: transform 0.3s ease;\n}\n\n/* dropdown*/\n.card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n position: relative;\n}\n\n.header-dropdown-container {\n position: relative;\n}\n\n.hidden-toggle {\n display: none;\n}\n\n.header-dropdown {\n display: flex;\n align-items: center;\n gap: 8px;\n background: rgba(255, 255, 255, 0.08);\n padding: 6px 10px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.header-dropdown:hover {\n background: rgba(255, 255, 255, 0.15);\n}\n\n.icon-circle {\n width: 12px;\n height: 12px;\n border: 2px solid #8e8e93;\n border-radius: 50%;\n transition: border-color 0.2s ease;\n}\n\n.header-dropdown:hover .icon-circle {\n border-color: #0a84ff;\n}\n\n.title {\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.3px;\n}\n\n.arrow-down {\n color: #8e8e93;\n margin-left: 2px;\n transition: transform 0.3s ease;\n}\n\n/* dropdown Logic */\n.dropdown-menu {\n opacity: 0;\n visibility: hidden;\n transform: translateY(-10px);\n position: absolute;\n top: 120%;\n left: 0;\n background: rgba(40, 40, 40, 0.95);\n backdrop-filter: blur(15px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n padding: 4px;\n min-width: 120px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);\n z-index: 10;\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.hidden-toggle:checked ~ .dropdown-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n}\n\n.hidden-toggle:checked + .header-dropdown .arrow-down {\n transform: rotate(180deg);\n color: #ffffff;\n}\n\n.dropdown-item {\n padding: 6px 8px;\n font-size: 13px;\n border-radius: 4px;\n cursor: pointer;\n color: #e0e0e0;\n transition: all 0.2s ease;\n}\n\n.dropdown-item:hover {\n background: #0a84ff;\n color: white;\n}\n\n.dropdown-item.active {\n background: rgba(255, 255, 255, 0.1);\n}\n\n/* elements */\n.beta-tag {\n font-size: 11px;\n color: #8e8e93;\n font-weight: 500;\n}\n\n.close-btn {\n margin-left: auto;\n background: none;\n border: none;\n color: #8e8e93;\n cursor: pointer;\n font-size: 14px;\n padding: 4px;\n transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n color: #fff;\n transform: rotate(90deg);\n}\n\n.divider {\n border: none;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n margin: 8px 0;\n}\n\n.control-group {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n}\n\n.group-label {\n font-size: 12px;\n color: #8e8e93;\n width: 65px;\n margin-top: 6px;\n}\n\n.light-controls {\n display: flex;\n gap: 8px;\n flex: 1;\n background: rgba(0, 0, 0, 0.2);\n padding: 8px;\n border-radius: 10px;\n}\n\n.light-preview {\n width: 52px;\n height: 52px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n background: radial-gradient(circle at top left, #a1a1a1, #1a1a1a 70%);\n}\n.pin-icon {\n position: relative;\n}\n.torch-svg {\n height: 20px;\n position: absolute;\n top: 30px;\n left: 30px;\n transform: rotate(-140deg);\n}\n.input-box {\n background: rgba(255, 255, 255, 0.06);\n padding: 5px 8px;\n width: 90px;\n border-radius: 6px;\n font-size: 12px;\n color: #e0e0e0;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n/* Range Slider Section */\n.sliders-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.slider-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.slider-content {\n display: flex;\n align-items: center;\n gap: 10px;\n background: rgba(36, 36, 36, 0.75);\n height: 35px;\n padding-inline: 10px;\n border-radius: 5px;\n}\n.slider-divider {\n height: 50%;\n width: 2px;\n background-color: #cccccc77;\n}\n.slider-value {\n font-weight: 600;\n color: #8e8e93;\n}\n\n.slider-row label {\n font-size: 12px;\n color: #8e8e93;\n width: 70px;\n}\n\n/* The Secret to the Pure CSS Blue Fill */\n.slider-wrapper {\n flex: 1;\n height: 8px;\n display: flex;\n align-items: center;\n border-radius: 3px;\n overflow: hidden;\n background-color: #1a1a1a;\n}\n\n.custom-slider {\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n background: transparent;\n outline: none;\n cursor: grab;\n}\n\n.custom-slider:active {\n cursor: grabbing;\n}\n\n/* Chrome, Safari, Edge Thumb */\n.custom-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 20px;\n width: 20px;\n border-radius: 999px;\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.1);\n cursor: pointer;\n box-shadow: -407px 0 0 400px #0a84ff;\n transition: transform 0.2s ease;\n}\n\n.custom-slider:hover::-webkit-slider-thumb {\n transform: scale(1.2);\n}\n\n/* Firefox Fill */\n.custom-slider::-moz-range-progress {\n background-color: #0a84ff;\n}\n\n.custom-slider::-moz-range-thumb {\n height: 14px;\n width: 14px;\n border-radius: 50%;\n background: #ffffff;\n border: none;\n}\n"}

fluffy-hound-44

👁 实时预览

📝 源代码