{"html":"

Select the

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

\n","css":".card-select-color {\n width: 20em;\n height: 15em;\n background: white;\n border-radius: 1em;\n overflow: hidden;\n --cyan: #62faed;\n --yellow: #fad962;\n --purple: #d462fa;\n --pink: #fa62c4;\n border: solid 0.2em white;\n position: relative;\n box-shadow: 0em 0.5em rgb(0, 0, 0, 0.25);\n}\n\n.card-select-color-title {\n width: 100%;\n height: 5em;\n background-color: var(--cyan);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.25s ease-in-out;\n}\n\n.card-select-color-title p {\n color: rgb(0, 0, 0, 0.5);\n font-size: 20px;\n}\n\n.card-select-color-title p::after {\n content: \" color theme\";\n font-weight: bold;\n}\n\n.card-select-color-colors {\n width: 100%;\n height: 8em;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.card-select-color-colors input[type=\"radio\"] + label {\n width: 2.65em;\n height: 2.65em;\n border-radius: 0.5em;\n box-shadow:\n inset 0em 0.25em 0.25em rgb(255, 255, 255, 0.25),\n inset 0em -0.25em rgb(0, 0, 0, 0.25);\n margin: 1em;\n transition: all 0.25s ease-in-out;\n cursor: pointer;\n}\n\n.card-select-color-colors input[type=\"radio\"]:hover + label {\n transform: scale(1.35);\n}\n\n.card-select-color-colors input[type=\"radio\"]:checked + label {\n box-shadow:\n inset 0em 0.25em 0.25em rgb(255, 255, 255, 0.25),\n inset 0em -0.25em rgb(0, 0, 0, 0.25),\n 0em 0em 0em 0.1em rgb(0, 0, 0, 0.25),\n 0em 0em 0.5em rgb(0, 0, 0, 0.5);\n transform: scale(1.25);\n}\n\n#cyan + label {\n background-color: var(--cyan);\n}\n\n#yellow + label {\n background-color: var(--yellow);\n}\n\n#purple + label {\n background-color: var(--purple);\n}\n\n#pink + label {\n background-color: var(--pink);\n}\n\n.card-select-color:has(#cyan:checked) .card-select-color-title {\n background-color: var(--cyan);\n}\n\n.card-select-color:has(#yellow:checked) .card-select-color-title {\n background-color: var(--yellow);\n}\n\n.card-select-color:has(#purple:checked) .card-select-color-title {\n background-color: var(--purple);\n}\n\n.card-select-color:has(#pink:checked) .card-select-color-title {\n background-color: var(--pink);\n}\n\n.card-select-color:has(#cyan:checked) {\n border: solid 0.2em var(--cyan);\n}\n\n.card-select-color:has(#yellow:checked) {\n border: solid 0.2em var(--yellow);\n}\n\n.card-select-color:has(#purple:checked) {\n border: solid 0.2em var(--purple);\n}\n\n.card-select-color:has(#pink:checked) {\n border: solid 0.2em var(--pink);\n}\n\n.button-next {\n position: absolute;\n bottom: 0em;\n right: 0em;\n background-color: rgb(0, 0, 0, 0.25);\n width: 7.5em;\n border-top-left-radius: 0.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: not-allowed;\n color: rgb(255, 255, 255, 0.75);\n transition: all 0.25s ease-in-out;\n}\n\n.button-next:hover {\n width: 100%;\n border-top-left-radius: 0em;\n}\n\n.button-next:active {\n transform: scale(1.25);\n}\n\n.card-select-color:has(#cyan:checked) .button-next {\n background-color: var(--cyan);\n color: rgb(0, 0, 0, 0.5);\n cursor: pointer;\n}\n\n.card-select-color:has(#yellow:checked) .button-next {\n background-color: var(--yellow);\n color: rgb(0, 0, 0, 0.5);\n cursor: pointer;\n}\n\n.card-select-color:has(#purple:checked) .button-next {\n background-color: var(--purple);\n color: rgb(0, 0, 0, 0.5);\n cursor: pointer;\n}\n\n.card-select-color:has(#pink:checked) .button-next {\n background-color: var(--pink);\n color: rgb(0, 0, 0, 0.5);\n cursor: pointer;\n}\n"}

tall-walrus-12

👁 实时预览

📝 源代码