{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"6f73ae","snapshot":null,"tags":null,"title":"input by barisdogansutcu","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":474,"cssLen":314,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n","css":".password {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n.password input {\n width: 30px;\n height: 40px;\n text-align: center;\n background-color: transparent;\n border: none;\n border-bottom: solid 2px rgb(20, 181, 230);\n font-size: 20px;\n color: white;\n outline: none;\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"bf9022","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":501,"cssLen":659,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".group {\n display: flex;\n line-height: 28px;\n align-items: center;\n position: relative;\n max-width: 190px;\n}\n\n.input {\n width: 100%;\n height: 40px;\n line-height: 28px;\n padding: 0 1rem;\n padding-left: 2.5rem;\n border: 2px solid transparent;\n border-radius: 8px;\n outline: none;\n background-color: #f3f3f4;\n color: #0d0c22;\n transition: 0.3s ease;\n}\n\n.input::placeholder {\n color: #9e9ea7;\n}\n\n.input:focus,\ninput:hover {\n outline: none;\n border-color: rgba(0, 48, 73, 0.4);\n background-color: #fff;\n box-shadow: 0 0 0 4px rgb(0 48 73 / 10%);\n}\n\n.icon {\n position: absolute;\n left: 1rem;\n fill: #9e9ea7;\n width: 1rem;\n height: 1rem;\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"e9ebf7","snapshot":null,"tags":null,"title":"input by andrew-demchenk0","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":539,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n --input-focus: #2d8cf0;\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n width: 200px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 15px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.input:focus {\n border: 2px solid var(--input-focus);\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"2ceda0","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1363,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n @gmail.com\n

","css":".input-container {\n position: relative;\n display: flex;\n width: 100%;\n max-width: 290px;\n}\n\n.input-container > span,\n.input-container .input {\n white-space: nowrap;\n display: block;\n}\n\n.input-container > span,\n.input-container .input:first-child {\n border-radius: 6px 0 0 6px;\n}\n\n.input-container > span,\n.input-container .input {\n border-radius: 0 6px 6px 0;\n}\n\n.input-container > span,\n.input-container .input {\n margin-left: -1px;\n}\n\n.input-container .input {\n position: relative;\n z-index: 1;\n flex: 1 1 auto;\n width: 1%;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.input-container span {\n text-align: center;\n padding: 8px 12px;\n font-size: 14px;\n line-height: 25px;\n color: #6b7385;\n background: #d4def5;\n border: 1px solid #CDD9ED;\n font-weight: bold;\n transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;\n}\n\n.input-container:focus-within > span {\n color: #fff;\n background-color: #148cd1;\n border-color: #148cd1;\n}\n\n.input {\n display: block;\n width: 100%;\n padding: 8px 16px;\n line-height: 25px;\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n border-radius: 6px;\n -webkit-appearance: none;\n color: #99A3BA;\n border: 1px solid #CDD9ED;\n background: #fff;\n transition: border 0.3s ease;\n}\n\n.input::placeholder {\n color: #CBD1DC;\n}\n\n.input:focus {\n outline: none;\n border-color: #148cd1;\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"54dfdb","snapshot":null,"tags":null,"title":"input by alexruix","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":495,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"/* From uiverse.io by @alexruix */\n.input {\n line-height: 28px;\n border: 2px solid transparent;\n border-bottom-color: #777;\n padding: .2rem 0;\n outline: none;\n background-color: transparent;\n color: #0d0c22;\n transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.input:focus, input:hover {\n outline: none;\n padding: .2rem 1rem;\n border-radius: 1rem;\n border-color: #7a9cc6;\n}\n\n.input::placeholder {\n color: #777;\n}\n\n.input:focus::placeholder {\n opacity: 0;\n transition: opacity .3s;\n}\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"2d7878","snapshot":null,"tags":null,"title":"input by Bodyhc","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":132,"cssLen":597,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".search {\n display: inline-block;\n position: relative;\n}\n\n.search input[type=\"text\"] {\n width: 200px;\n padding: 10px;\n border: none;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.search button[type=\"submit\"] {\n background-color: #4e99e9;\n border: none;\n color: #fff;\n cursor: pointer;\n padding: 10px 20px;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n position: absolute;\n top: 0;\n right: 0;\n transition: .9s ease;\n}\n\n.search button[type=\"submit\"]:hover {\n transform: scale(1.1);\n color: rgb(255, 255, 255);\n background-color: blue;\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"5cb414","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":975,"cssLen":949,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n\n\n\n

","css":".InputContainer {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-radius: 10px;\n overflow: hidden;\n cursor: pointer;\n padding-left: 15px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);\n}\n\n.input {\n width: 170px;\n height: 100%;\n border: none;\n outline: none;\n font-size: 0.9em;\n caret-color: rgb(255, 81, 0);\n}\n\n.labelforsearch {\n cursor: text;\n padding: 0px 12px;\n}\n\n.searchIcon {\n width: 13px;\n}\n\n.border {\n height: 40%;\n width: 1.3px;\n background-color: rgb(223, 223, 223);\n}\n\n.micIcon {\n width: 12px;\n}\n\n.micButton {\n padding: 0px 15px 0px 12px;\n border: none;\n background-color: transparent;\n height: 40px;\n cursor: pointer;\n transition-duration: .3s;\n}\n\n.searchIcon path {\n fill: rgb(114, 114, 114);\n}\n\n.micIcon path {\n fill: rgb(255, 81, 0);\n}\n\n.micButton:hover {\n background-color: rgb(255, 230, 230);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"c2bdc6","snapshot":null,"tags":null,"title":"input by satisshTechie","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":168,"cssLen":971,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

50px

","css":".PB-range-slider {\n -webkit-appearance: none;\n width: 100%;\n height: 4px;\n border-radius: 5px;\n background: #D5DBE1;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s;\n}\n\n.PB-range-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: #000000;\n cursor: pointer;\n transition: 0.3s ease-in-out;\n}\n\n.PB-range-slider::-webkit-slider-thumb:hover {\n box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.16);\n transition: 0.3s ease-in-out;\n}\n\n.PB-range-slider::-moz-range-thumb {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: #000000;\n cursor: pointer;\n}\n\n.PB-range-slider-div {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding: 1rem;\n border-radius: 6px;\n border: 1px solid #C6CACE;\n box-shadow: 0px 1px 2px 0px #1F1E241F;\n}\n\n.PB-range-slidervalue {\n font-weight: 600;\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"32a047","snapshot":null,"tags":null,"title":"input by InfinityLoopGames","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":494,"cssLen":5227,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"/*The eye icon on the password can be stylize with any tool you want\nto use (the only way i know to do this correctly is using JS)\nthis is meant to be wide supported and it really depends on you browsers\nif i realize any way to stylize the eye it could be added in the future\nin other input type*/\n\n.submit {\n color: #9fc4d0;\n text-decoration: none;\n font-size: 25px;\n border: none;\n background: none;\n font-weight: 600;\n font-family: \"Poppins\", sans-serif;\n margin: 10px 0 0;\n}\n\n.submit::before {\n margin-left: auto;\n}\n\n.submit::after,\n.submit::before {\n content: \"\";\n width: 0%;\n height: 2px;\n background: #06aed8;\n display: block;\n transition: 0.5s;\n}\n\n.submit:hover::after,\n.submit:hover::before {\n width: 100%;\n}\n\n.container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n display: flex;\n margin: auto;\n aspect-ratio: 16/9;\n align-items: center;\n justify-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n}\n\n.input-container {\n filter: drop-shadow(46px 36px 24px #4090b5)\n drop-shadow(-55px -40px 25px #9e30a9);\n animation: blinkShadowsFilter 8s ease-in infinite;\n}\n\n.input-content {\n display: grid;\n align-content: center;\n justify-items: center;\n align-items: center;\n text-align: center;\n padding-inline: 1em;\n}\n\n.input-content::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n filter: blur(40px);\n -webkit-clip-path: polygon(\n 26% 0,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n clip-path: polygon(\n 26% 0,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n background: rgba(122, 251, 255, 0.5568627451);\n transition: all 1s ease-in-out;\n}\n\n.input-content::after {\n content: \"\";\n position: absolute;\n width: 98%;\n height: 98%;\n box-shadow: inset 0px 0px 20px 20px #212121;\n background: repeating-linear-gradient(\n to bottom,\n transparent 0%,\n rgba(64, 144, 181, 0.6) 1px,\n rgb(0, 0, 0) 3px,\n hsl(295, 60%, 12%) 5px,\n #153544 4px,\n transparent 0.5%\n ),\n repeating-linear-gradient(\n to left,\n hsl(295, 60%, 12%) 100%,\n hsla(295, 60%, 12%, 0.99) 100%\n );\n -webkit-clip-path: polygon(\n 26% 0,\n 31% 5%,\n 61% 5%,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n clip-path: polygon(\n 26% 0,\n 31% 5%,\n 61% 5%,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n animation: backglitch 50ms linear infinite;\n}\n\n.input-dist {\n z-index: 80;\n display: grid;\n align-items: center;\n text-align: center;\n width: 100%;\n padding-inline: 1em;\n padding-block: 1.2em;\n grid-template-columns: 1fr;\n}\n\n.input-type {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n font-size: 1.1rem;\n background-color: transparent;\n width: 100%;\n border: none;\n}\n\n.input-is {\n color: #fff;\n font-size: 0.9rem;\n background-color: transparent;\n width: 100%;\n box-sizing: border-box;\n padding-inline: 0.5em;\n padding-block: 0.7em;\n border: none;\n transition: all 1s ease-in-out;\n border-bottom: 1px solid hsl(221, 26%, 43%);\n}\n\n.input-is:hover {\n transition: all 1s ease-in-out;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(102, 224, 255, 0.2) 27%,\n rgba(102, 224, 255, 0.2) 63%,\n transparent 100%\n );\n}\n\n.input-content:focus-within::before {\n transition: all 1s ease-in-out;\n background: hsla(0, 0%, 100%, 0.814);\n}\n\n.input-is:focus {\n outline: none;\n border-bottom: 1px solid hsl(192, 100%, 100%);\n color: hsl(192, 100%, 88%);\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(102, 224, 255, 0.2) 27%,\n rgba(102, 224, 255, 0.2) 63%,\n transparent 100%\n );\n}\n\n.input-is::-moz-placeholder {\n color: hsla(192, 100%, 88%, 0.806);\n}\n\n.input-is::placeholder {\n color: hsla(192, 100%, 88%, 0.806);\n}\n\n@keyframes backglitch {\n 0% {\n box-shadow: inset 0px 20px 20px 30px #212121;\n }\n\n 50% {\n box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);\n }\n\n to {\n box-shadow: inset 0px 20px 20px 30px #212121;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) translate(-50%, 20%);\n }\n\n 50% {\n transform: rotate(180deg) translate(40%, 10%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, 20%);\n }\n}\n\n@keyframes blinkShadowsFilter {\n 0% {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))\n drop-shadow(-55px -40px 28px #9e30a9);\n }\n\n 25% {\n filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))\n drop-shadow(-55px 40px 24px #9e30a9);\n }\n\n 50% {\n filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))\n drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));\n }\n\n 75% {\n filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))\n drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));\n }\n\n to {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))\n drop-shadow(-55px -40px 28px #9e30a9);\n }\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"ed2b87","snapshot":null,"tags":null,"title":"input by Rodrypaladin","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":132,"cssLen":974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".box-input {\n position: relative;\n}\n\n.border {\n background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);\n box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.5),\n 25px -10px 30px -5px rgba(255, 0, 212, 0.5),\n 25px 10px 30px -5px rgba(255, 174, 0, 0.5),\n -25px 10px 30px -5px rgba(255, 230, 0, 0.5);\n padding: 4px;\n}\n\n.input {\n background-color: #212121;\n max-width: 250px;\n height: 40px;\n padding: 0 19px 0 10px;\n font-size: 1.1em;\n position: relative;\n border: none;\n color: white;\n outline: 0;\n overflow: hidden;\n}\n\n.box-input::after,\n.box-input::before {\n content: \"\";\n width: 130px;\n height: 30px;\n position: absolute;\n z-index: -1;\n}\n\n.box-input::after {\n bottom: 0;\n right: 0;\n}\n\n.box-input::before {\n top: 0;\n left: 0;\n}\n\n.input::placeholder {\n transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s;\n}\n\n.input:focus::placeholder {\n padding-left: 165px;\n transform: translateY(-50px);\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"95e48c","snapshot":null,"tags":null,"title":"input by garerim","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":693,"cssLen":375,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".container-input {\n position: relative;\n}\n\n.input {\n width: 150px;\n padding: 10px 0px 10px 40px;\n border-radius: 9999px;\n border: solid 1px #333;\n transition: all .2s ease-in-out;\n outline: none;\n opacity: 0.8;\n}\n\n.container-input svg {\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translate(0, -50%);\n}\n\n.input:focus {\n opacity: 1;\n width: 250px;\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"d6f9d7","snapshot":null,"tags":null,"title":"input by fanishah","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":2934,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".search-bar {\n display: flex;\n}\n\n.search-bar input,\n.search-btn, \n.search-btn:before, \n.search-btn:after {\n transition: all 0.25s ease-out;\n}\n\n.search-bar input,\n.search-btn {\n width: 3em;\n height: 3em;\n}\n\n.search-bar input:invalid:not(:focus),\n.search-btn {\n cursor: pointer;\n}\n\n.search-bar,\n.search-bar input:focus,\n.search-bar input:valid {\n width: 100%;\n}\n\n.search-bar input:focus,\n.search-bar input:not(:focus) + .search-btn:focus {\n outline: transparent;\n}\n\n.search-bar {\n margin: auto;\n padding: 1.5em;\n justify-content: center;\n max-width: 30em;\n}\n\n.search-bar input {\n background: transparent;\n border-radius: 1.5em;\n box-shadow: 0 0 0 0.4em #171717 inset;\n padding: 0.75em;\n transform: translate(0.5em,0.5em) scale(0.5);\n transform-origin: 100% 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.search-bar input::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n.search-bar input:focus,\n.search-bar input:valid {\n background: #fff;\n border-radius: 0.375em 0 0 0.375em;\n box-shadow: 0 0 0 0.1em #d9d9d9 inset;\n transform: scale(1);\n}\n\n.search-btn {\n background: #171717;\n border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;\n padding: 0.75em;\n position: relative;\n transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);\n transform-origin: 0 50%;\n}\n\n.search-btn:before, \n.search-btn:after {\n content: \"\";\n display: block;\n opacity: 0;\n position: absolute;\n}\n\n.search-btn:before {\n border-radius: 50%;\n box-shadow: 0 0 0 0.2em #f1f1f1 inset;\n top: 0.75em;\n left: 0.75em;\n width: 1.2em;\n height: 1.2em;\n}\n\n.search-btn:after {\n background: #f1f1f1;\n border-radius: 0 0.25em 0.25em 0;\n top: 51%;\n left: 51%;\n width: 0.75em;\n height: 0.25em;\n transform: translate(0.2em,0) rotate(45deg);\n transform-origin: 0 50%;\n}\n\n.search-btn span {\n display: inline-block;\n overflow: hidden;\n width: 1px;\n height: 1px;\n}\n\n/* Active state */\n.search-bar input:focus + .search-btn,\n.search-bar input:valid + .search-btn {\n background: #2762f3;\n border-radius: 0 0.375em 0.375em 0;\n transform: scale(1);\n}\n\n.search-bar input:focus + .search-btn:before, \n.search-bar input:focus + .search-btn:after,\n.search-bar input:valid + .search-btn:before, \n.search-bar input:valid + .search-btn:after {\n opacity: 1;\n}\n\n.search-bar input:focus + .search-btn:hover,\n.search-bar input:valid + .search-btn:hover,\n.search-bar input:valid:not(:focus) + .search-btn:focus {\n background: #0c48db;\n}\n\n.search-bar input:focus + .search-btn:active,\n.search-bar input:valid + .search-btn:active {\n transform: translateY(1px);\n}\n\n@media screen and (prefers-color-scheme: dark) {\n body, input {\n color: #f1f1f1;\n }\n\n .search-bar input {\n box-shadow: 0 0 0 0.4em #f1f1f1 inset;\n }\n\n .search-bar input:focus,\n\t.search-bar input:valid {\n background: #3d3d3d;\n box-shadow: 0 0 0 0.1em #3d3d3d inset;\n }\n\n .search-btn {\n background: #f1f1f1;\n }\n}"}]}},"actionData":null,"errors":null}