From 48e855dd07aa441a4bb0aee9cbae6384ce9d46ca Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Thu, 10 Apr 2025 11:26:08 +0500 Subject: [PATCH] style checkout page --- assets/css/custom.css | 709 +++++++++++++++++++++++++++++++++++++- assets/css/custom.css.map | 1 + assets/scss/custom.scss | 406 ++++++++++++++++++++++ theme.json | 9 + 4 files changed, 1115 insertions(+), 10 deletions(-) create mode 100644 assets/css/custom.css.map create mode 100644 assets/scss/custom.scss diff --git a/assets/css/custom.css b/assets/css/custom.css index 39c14fe..c51f975 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -3,14 +3,703 @@ html { } body { - background: radial-gradient( - circle at right 15%, /* Position circle at right edge, 65% down */ - rgba(142, 154, 236, 0.4) 0%, /* Starting color at center */ - rgba(142, 154, 236, 0) 25% /* Ending color at 50% distance */ - ), - radial-gradient( - circle at left 85%, /* Position circle at left edge, 85% down */ - rgba(142, 154, 236, 0.4) 0%, /* Starting color at center */ - rgba(142, 154, 236, 0) 25% /* Ending color at 50% distance */ - ); + background: radial-gradient(circle at right 15%, rgba(142, 154, 236, 0.4) 0%, rgba(142, 154, 236, 0) 25%), radial-gradient(circle at left 85%, rgba(142, 154, 236, 0.4) 0%, rgba(142, 154, 236, 0) 25%); } + +.woocommerce input[type=email], +.woocommerce input[type=number], +.woocommerce input[type=password], +.woocommerce input[type=tel], +.woocommerce input[type=text], +.woocommerce input[type=url], +.woocommerce input[type=search], +.woocommerce input[type=date], +.woocommerce textarea, +.woocommerce select, +.wc-block-components-form input[type=email], +.wc-block-components-form input[type=number], +.wc-block-components-form input[type=password], +.wc-block-components-form input[type=tel], +.wc-block-components-form input[type=text], +.wc-block-components-form input[type=url], +.wc-block-components-form input[type=search], +.wc-block-components-form input[type=date], +.wc-block-components-form textarea, +.wc-block-components-form select, +.woocommerce-page input[type=email], +.woocommerce-page input[type=number], +.woocommerce-page input[type=password], +.woocommerce-page input[type=tel], +.woocommerce-page input[type=text], +.woocommerce-page input[type=url], +.woocommerce-page input[type=search], +.woocommerce-page input[type=date], +.woocommerce-page textarea, +.woocommerce-page select { + padding: 1em; + color: var(--wp--preset--color--foreground); + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + transition: border-color 0.3s, box-shadow 0.3s; +} +.woocommerce input[type=email]::placeholder, +.woocommerce input[type=number]::placeholder, +.woocommerce input[type=password]::placeholder, +.woocommerce input[type=tel]::placeholder, +.woocommerce input[type=text]::placeholder, +.woocommerce input[type=url]::placeholder, +.woocommerce input[type=search]::placeholder, +.woocommerce input[type=date]::placeholder, +.woocommerce textarea::placeholder, +.woocommerce select::placeholder, +.wc-block-components-form input[type=email]::placeholder, +.wc-block-components-form input[type=number]::placeholder, +.wc-block-components-form input[type=password]::placeholder, +.wc-block-components-form input[type=tel]::placeholder, +.wc-block-components-form input[type=text]::placeholder, +.wc-block-components-form input[type=url]::placeholder, +.wc-block-components-form input[type=search]::placeholder, +.wc-block-components-form input[type=date]::placeholder, +.wc-block-components-form textarea::placeholder, +.wc-block-components-form select::placeholder, +.woocommerce-page input[type=email]::placeholder, +.woocommerce-page input[type=number]::placeholder, +.woocommerce-page input[type=password]::placeholder, +.woocommerce-page input[type=tel]::placeholder, +.woocommerce-page input[type=text]::placeholder, +.woocommerce-page input[type=url]::placeholder, +.woocommerce-page input[type=search]::placeholder, +.woocommerce-page input[type=date]::placeholder, +.woocommerce-page textarea::placeholder, +.woocommerce-page select::placeholder { + color: var(--wp--preset--color--foreground); + opacity: 0.7; +} +.woocommerce input[type=email]:hover, +.woocommerce input[type=number]:hover, +.woocommerce input[type=password]:hover, +.woocommerce input[type=tel]:hover, +.woocommerce input[type=text]:hover, +.woocommerce input[type=url]:hover, +.woocommerce input[type=search]:hover, +.woocommerce input[type=date]:hover, +.woocommerce textarea:hover, +.woocommerce select:hover, +.wc-block-components-form input[type=email]:hover, +.wc-block-components-form input[type=number]:hover, +.wc-block-components-form input[type=password]:hover, +.wc-block-components-form input[type=tel]:hover, +.wc-block-components-form input[type=text]:hover, +.wc-block-components-form input[type=url]:hover, +.wc-block-components-form input[type=search]:hover, +.wc-block-components-form input[type=date]:hover, +.wc-block-components-form textarea:hover, +.wc-block-components-form select:hover, +.woocommerce-page input[type=email]:hover, +.woocommerce-page input[type=number]:hover, +.woocommerce-page input[type=password]:hover, +.woocommerce-page input[type=tel]:hover, +.woocommerce-page input[type=text]:hover, +.woocommerce-page input[type=url]:hover, +.woocommerce-page input[type=search]:hover, +.woocommerce-page input[type=date]:hover, +.woocommerce-page textarea:hover, +.woocommerce-page select:hover { + border-color: var(--wp--preset--color--foreground); +} +.woocommerce input[type=email]:focus, +.woocommerce input[type=number]:focus, +.woocommerce input[type=password]:focus, +.woocommerce input[type=tel]:focus, +.woocommerce input[type=text]:focus, +.woocommerce input[type=url]:focus, +.woocommerce input[type=search]:focus, +.woocommerce input[type=date]:focus, +.woocommerce textarea:focus, +.woocommerce select:focus, +.wc-block-components-form input[type=email]:focus, +.wc-block-components-form input[type=number]:focus, +.wc-block-components-form input[type=password]:focus, +.wc-block-components-form input[type=tel]:focus, +.wc-block-components-form input[type=text]:focus, +.wc-block-components-form input[type=url]:focus, +.wc-block-components-form input[type=search]:focus, +.wc-block-components-form input[type=date]:focus, +.wc-block-components-form textarea:focus, +.wc-block-components-form select:focus, +.woocommerce-page input[type=email]:focus, +.woocommerce-page input[type=number]:focus, +.woocommerce-page input[type=password]:focus, +.woocommerce-page input[type=tel]:focus, +.woocommerce-page input[type=text]:focus, +.woocommerce-page input[type=url]:focus, +.woocommerce-page input[type=search]:focus, +.woocommerce-page input[type=date]:focus, +.woocommerce-page textarea:focus, +.woocommerce-page select:focus { + outline: none; + border-color: var(--wp--preset--color--foreground); + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); +} +.woocommerce select, +.wc-block-components-form select, +.woocommerce-page select { + appearance: none; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7z' fill='%23FAF7EF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1em top 50%; + padding-right: 2.5em; +} +.woocommerce select option, +.wc-block-components-form select option, +.woocommerce-page select option { + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); +} +.woocommerce textarea, +.wc-block-components-form textarea, +.woocommerce-page textarea { + min-height: 100px; + resize: vertical; +} +.woocommerce input[type=checkbox], +.woocommerce input[type=radio], +.wc-block-components-form input[type=checkbox], +.wc-block-components-form input[type=radio], +.woocommerce-page input[type=checkbox], +.woocommerce-page input[type=radio] { + position: relative; + width: 1.25em; + height: 1.25em; + margin-right: 0.5em; + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + cursor: pointer; +} +.woocommerce input[type=checkbox]:checked, +.woocommerce input[type=radio]:checked, +.wc-block-components-form input[type=checkbox]:checked, +.wc-block-components-form input[type=radio]:checked, +.woocommerce-page input[type=checkbox]:checked, +.woocommerce-page input[type=radio]:checked { + background-color: var(--wp--preset--color--foreground); + border-color: var(--wp--preset--color--foreground); +} +.woocommerce input[type=checkbox]:checked::after, +.woocommerce input[type=radio]:checked::after, +.wc-block-components-form input[type=checkbox]:checked::after, +.wc-block-components-form input[type=radio]:checked::after, +.woocommerce-page input[type=checkbox]:checked::after, +.woocommerce-page input[type=radio]:checked::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 0.5em; + height: 0.5em; + background-color: var(--wp--preset--color--background); + border-radius: 1px; +} +.woocommerce input[type=checkbox]:focus, +.woocommerce input[type=radio]:focus, +.wc-block-components-form input[type=checkbox]:focus, +.wc-block-components-form input[type=radio]:focus, +.woocommerce-page input[type=checkbox]:focus, +.woocommerce-page input[type=radio]:focus { + outline: none; + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); +} +.woocommerce input[type=radio], +.wc-block-components-form input[type=radio], +.woocommerce-page input[type=radio] { + border-radius: 50%; +} +.woocommerce input[type=radio]:checked::after, +.wc-block-components-form input[type=radio]:checked::after, +.woocommerce-page input[type=radio]:checked::after { + border-radius: 50%; +} +.woocommerce .woocommerce-invalid input[type=email], +.woocommerce .woocommerce-invalid input[type=number], +.woocommerce .woocommerce-invalid input[type=password], +.woocommerce .woocommerce-invalid input[type=tel], +.woocommerce .woocommerce-invalid input[type=text], +.woocommerce .woocommerce-invalid input[type=url], +.woocommerce .woocommerce-invalid input[type=search], +.woocommerce .woocommerce-invalid input[type=date], +.woocommerce .woocommerce-invalid textarea, +.woocommerce .woocommerce-invalid select, +.woocommerce .woocommerce-invalid-required-field input[type=email], +.woocommerce .woocommerce-invalid-required-field input[type=number], +.woocommerce .woocommerce-invalid-required-field input[type=password], +.woocommerce .woocommerce-invalid-required-field input[type=tel], +.woocommerce .woocommerce-invalid-required-field input[type=text], +.woocommerce .woocommerce-invalid-required-field input[type=url], +.woocommerce .woocommerce-invalid-required-field input[type=search], +.woocommerce .woocommerce-invalid-required-field input[type=date], +.woocommerce .woocommerce-invalid-required-field textarea, +.woocommerce .woocommerce-invalid-required-field select, +.woocommerce .has-error input[type=email], +.woocommerce .has-error input[type=number], +.woocommerce .has-error input[type=password], +.woocommerce .has-error input[type=tel], +.woocommerce .has-error input[type=text], +.woocommerce .has-error input[type=url], +.woocommerce .has-error input[type=search], +.woocommerce .has-error input[type=date], +.woocommerce .has-error textarea, +.woocommerce .has-error select, +.wc-block-components-form .woocommerce-invalid input[type=email], +.wc-block-components-form .woocommerce-invalid input[type=number], +.wc-block-components-form .woocommerce-invalid input[type=password], +.wc-block-components-form .woocommerce-invalid input[type=tel], +.wc-block-components-form .woocommerce-invalid input[type=text], +.wc-block-components-form .woocommerce-invalid input[type=url], +.wc-block-components-form .woocommerce-invalid input[type=search], +.wc-block-components-form .woocommerce-invalid input[type=date], +.wc-block-components-form .woocommerce-invalid textarea, +.wc-block-components-form .woocommerce-invalid select, +.wc-block-components-form .woocommerce-invalid-required-field input[type=email], +.wc-block-components-form .woocommerce-invalid-required-field input[type=number], +.wc-block-components-form .woocommerce-invalid-required-field input[type=password], +.wc-block-components-form .woocommerce-invalid-required-field input[type=tel], +.wc-block-components-form .woocommerce-invalid-required-field input[type=text], +.wc-block-components-form .woocommerce-invalid-required-field input[type=url], +.wc-block-components-form .woocommerce-invalid-required-field input[type=search], +.wc-block-components-form .woocommerce-invalid-required-field input[type=date], +.wc-block-components-form .woocommerce-invalid-required-field textarea, +.wc-block-components-form .woocommerce-invalid-required-field select, +.wc-block-components-form .has-error input[type=email], +.wc-block-components-form .has-error input[type=number], +.wc-block-components-form .has-error input[type=password], +.wc-block-components-form .has-error input[type=tel], +.wc-block-components-form .has-error input[type=text], +.wc-block-components-form .has-error input[type=url], +.wc-block-components-form .has-error input[type=search], +.wc-block-components-form .has-error input[type=date], +.wc-block-components-form .has-error textarea, +.wc-block-components-form .has-error select, +.woocommerce-page .woocommerce-invalid input[type=email], +.woocommerce-page .woocommerce-invalid input[type=number], +.woocommerce-page .woocommerce-invalid input[type=password], +.woocommerce-page .woocommerce-invalid input[type=tel], +.woocommerce-page .woocommerce-invalid input[type=text], +.woocommerce-page .woocommerce-invalid input[type=url], +.woocommerce-page .woocommerce-invalid input[type=search], +.woocommerce-page .woocommerce-invalid input[type=date], +.woocommerce-page .woocommerce-invalid textarea, +.woocommerce-page .woocommerce-invalid select, +.woocommerce-page .woocommerce-invalid-required-field input[type=email], +.woocommerce-page .woocommerce-invalid-required-field input[type=number], +.woocommerce-page .woocommerce-invalid-required-field input[type=password], +.woocommerce-page .woocommerce-invalid-required-field input[type=tel], +.woocommerce-page .woocommerce-invalid-required-field input[type=text], +.woocommerce-page .woocommerce-invalid-required-field input[type=url], +.woocommerce-page .woocommerce-invalid-required-field input[type=search], +.woocommerce-page .woocommerce-invalid-required-field input[type=date], +.woocommerce-page .woocommerce-invalid-required-field textarea, +.woocommerce-page .woocommerce-invalid-required-field select, +.woocommerce-page .has-error input[type=email], +.woocommerce-page .has-error input[type=number], +.woocommerce-page .has-error input[type=password], +.woocommerce-page .has-error input[type=tel], +.woocommerce-page .has-error input[type=text], +.woocommerce-page .has-error input[type=url], +.woocommerce-page .has-error input[type=search], +.woocommerce-page .has-error input[type=date], +.woocommerce-page .has-error textarea, +.woocommerce-page .has-error select { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; +} +.woocommerce .woocommerce-invalid input[type=email]:focus, +.woocommerce .woocommerce-invalid input[type=number]:focus, +.woocommerce .woocommerce-invalid input[type=password]:focus, +.woocommerce .woocommerce-invalid input[type=tel]:focus, +.woocommerce .woocommerce-invalid input[type=text]:focus, +.woocommerce .woocommerce-invalid input[type=url]:focus, +.woocommerce .woocommerce-invalid input[type=search]:focus, +.woocommerce .woocommerce-invalid input[type=date]:focus, +.woocommerce .woocommerce-invalid textarea:focus, +.woocommerce .woocommerce-invalid select:focus, +.woocommerce .woocommerce-invalid-required-field input[type=email]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=number]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=password]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=tel]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=text]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=url]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=search]:focus, +.woocommerce .woocommerce-invalid-required-field input[type=date]:focus, +.woocommerce .woocommerce-invalid-required-field textarea:focus, +.woocommerce .woocommerce-invalid-required-field select:focus, +.woocommerce .has-error input[type=email]:focus, +.woocommerce .has-error input[type=number]:focus, +.woocommerce .has-error input[type=password]:focus, +.woocommerce .has-error input[type=tel]:focus, +.woocommerce .has-error input[type=text]:focus, +.woocommerce .has-error input[type=url]:focus, +.woocommerce .has-error input[type=search]:focus, +.woocommerce .has-error input[type=date]:focus, +.woocommerce .has-error textarea:focus, +.woocommerce .has-error select:focus, +.wc-block-components-form .woocommerce-invalid input[type=email]:focus, +.wc-block-components-form .woocommerce-invalid input[type=number]:focus, +.wc-block-components-form .woocommerce-invalid input[type=password]:focus, +.wc-block-components-form .woocommerce-invalid input[type=tel]:focus, +.wc-block-components-form .woocommerce-invalid input[type=text]:focus, +.wc-block-components-form .woocommerce-invalid input[type=url]:focus, +.wc-block-components-form .woocommerce-invalid input[type=search]:focus, +.wc-block-components-form .woocommerce-invalid input[type=date]:focus, +.wc-block-components-form .woocommerce-invalid textarea:focus, +.wc-block-components-form .woocommerce-invalid select:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=email]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=number]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=password]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=tel]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=text]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=url]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=search]:focus, +.wc-block-components-form .woocommerce-invalid-required-field input[type=date]:focus, +.wc-block-components-form .woocommerce-invalid-required-field textarea:focus, +.wc-block-components-form .woocommerce-invalid-required-field select:focus, +.wc-block-components-form .has-error input[type=email]:focus, +.wc-block-components-form .has-error input[type=number]:focus, +.wc-block-components-form .has-error input[type=password]:focus, +.wc-block-components-form .has-error input[type=tel]:focus, +.wc-block-components-form .has-error input[type=text]:focus, +.wc-block-components-form .has-error input[type=url]:focus, +.wc-block-components-form .has-error input[type=search]:focus, +.wc-block-components-form .has-error input[type=date]:focus, +.wc-block-components-form .has-error textarea:focus, +.wc-block-components-form .has-error select:focus, +.woocommerce-page .woocommerce-invalid input[type=email]:focus, +.woocommerce-page .woocommerce-invalid input[type=number]:focus, +.woocommerce-page .woocommerce-invalid input[type=password]:focus, +.woocommerce-page .woocommerce-invalid input[type=tel]:focus, +.woocommerce-page .woocommerce-invalid input[type=text]:focus, +.woocommerce-page .woocommerce-invalid input[type=url]:focus, +.woocommerce-page .woocommerce-invalid input[type=search]:focus, +.woocommerce-page .woocommerce-invalid input[type=date]:focus, +.woocommerce-page .woocommerce-invalid textarea:focus, +.woocommerce-page .woocommerce-invalid select:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=email]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=number]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=password]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=tel]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=text]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=url]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=search]:focus, +.woocommerce-page .woocommerce-invalid-required-field input[type=date]:focus, +.woocommerce-page .woocommerce-invalid-required-field textarea:focus, +.woocommerce-page .woocommerce-invalid-required-field select:focus, +.woocommerce-page .has-error input[type=email]:focus, +.woocommerce-page .has-error input[type=number]:focus, +.woocommerce-page .has-error input[type=password]:focus, +.woocommerce-page .has-error input[type=tel]:focus, +.woocommerce-page .has-error input[type=text]:focus, +.woocommerce-page .has-error input[type=url]:focus, +.woocommerce-page .has-error input[type=search]:focus, +.woocommerce-page .has-error input[type=date]:focus, +.woocommerce-page .has-error textarea:focus, +.woocommerce-page .has-error select:focus { + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); +} +.woocommerce .woocommerce-error, +.wc-block-components-form .woocommerce-error, +.woocommerce-page .woocommerce-error { + background-color: rgba(250, 247, 239, 0.1); + border-left: 3px solid var(--wp--preset--color--foreground); + color: var(--wp--preset--color--foreground); + padding: 1em 1.5em; + margin-bottom: 2em; + border-radius: 4px; +} +.woocommerce .woocommerce-error li, +.wc-block-components-form .woocommerce-error li, +.woocommerce-page .woocommerce-error li { + list-style: none; + margin-left: 0; +} +.woocommerce .woocommerce-error, +.woocommerce .woocommerce-message, +.wc-block-components-form .woocommerce-error, +.wc-block-components-form .woocommerce-message, +.woocommerce-page .woocommerce-error, +.woocommerce-page .woocommerce-message { + margin: 0 0 2em; + padding: 1em 1.5em; + border-radius: 4px; +} +.woocommerce .woocommerce-error::before, +.woocommerce .woocommerce-message::before, +.wc-block-components-form .woocommerce-error::before, +.wc-block-components-form .woocommerce-message::before, +.woocommerce-page .woocommerce-error::before, +.woocommerce-page .woocommerce-message::before { + margin-right: 0.5em; +} +.woocommerce span.required, +.wc-block-components-form span.required, +.woocommerce-page span.required { + color: var(--wp--preset--color--foreground); + opacity: 0.8; +} + +.wc-block-components-form .wc-block-components-text-input input[type=email], +.wc-block-components-form .wc-block-components-text-input input[type=number], +.wc-block-components-form .wc-block-components-text-input input[type=password], +.wc-block-components-form .wc-block-components-text-input input[type=tel], +.wc-block-components-form .wc-block-components-text-input input[type=text], +.wc-block-components-form .wc-block-components-text-input input[type=url], +.wc-block-components-form .wc-block-components-text-input select, +.wc-block-components-form .wc-block-components-select input[type=email], +.wc-block-components-form .wc-block-components-select input[type=number], +.wc-block-components-form .wc-block-components-select input[type=password], +.wc-block-components-form .wc-block-components-select input[type=tel], +.wc-block-components-form .wc-block-components-select input[type=text], +.wc-block-components-form .wc-block-components-select input[type=url], +.wc-block-components-form .wc-block-components-select select { + padding: 1em; + color: var(--wp--preset--color--foreground); + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; +} +.wc-block-components-form .wc-block-components-text-input input[type=email]::placeholder, +.wc-block-components-form .wc-block-components-text-input input[type=number]::placeholder, +.wc-block-components-form .wc-block-components-text-input input[type=password]::placeholder, +.wc-block-components-form .wc-block-components-text-input input[type=tel]::placeholder, +.wc-block-components-form .wc-block-components-text-input input[type=text]::placeholder, +.wc-block-components-form .wc-block-components-text-input input[type=url]::placeholder, +.wc-block-components-form .wc-block-components-text-input select::placeholder, +.wc-block-components-form .wc-block-components-select input[type=email]::placeholder, +.wc-block-components-form .wc-block-components-select input[type=number]::placeholder, +.wc-block-components-form .wc-block-components-select input[type=password]::placeholder, +.wc-block-components-form .wc-block-components-select input[type=tel]::placeholder, +.wc-block-components-form .wc-block-components-select input[type=text]::placeholder, +.wc-block-components-form .wc-block-components-select input[type=url]::placeholder, +.wc-block-components-form .wc-block-components-select select::placeholder { + color: var(--wp--preset--color--foreground); + opacity: 0.7; +} +.wc-block-components-form .wc-block-components-text-input input[type=email]:hover, +.wc-block-components-form .wc-block-components-text-input input[type=number]:hover, +.wc-block-components-form .wc-block-components-text-input input[type=password]:hover, +.wc-block-components-form .wc-block-components-text-input input[type=tel]:hover, +.wc-block-components-form .wc-block-components-text-input input[type=text]:hover, +.wc-block-components-form .wc-block-components-text-input input[type=url]:hover, +.wc-block-components-form .wc-block-components-text-input select:hover, +.wc-block-components-form .wc-block-components-select input[type=email]:hover, +.wc-block-components-form .wc-block-components-select input[type=number]:hover, +.wc-block-components-form .wc-block-components-select input[type=password]:hover, +.wc-block-components-form .wc-block-components-select input[type=tel]:hover, +.wc-block-components-form .wc-block-components-select input[type=text]:hover, +.wc-block-components-form .wc-block-components-select input[type=url]:hover, +.wc-block-components-form .wc-block-components-select select:hover { + border-color: var(--wp--preset--color--foreground); +} +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=number]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=password]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=text]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=url]:focus, +.wc-block-components-form .wc-block-components-text-input select:focus, +.wc-block-components-form .wc-block-components-select input[type=email]:focus, +.wc-block-components-form .wc-block-components-select input[type=number]:focus, +.wc-block-components-form .wc-block-components-select input[type=password]:focus, +.wc-block-components-form .wc-block-components-select input[type=tel]:focus, +.wc-block-components-form .wc-block-components-select input[type=text]:focus, +.wc-block-components-form .wc-block-components-select input[type=url]:focus, +.wc-block-components-form .wc-block-components-select select:focus { + outline: none; + border-color: var(--wp--preset--color--foreground); + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); +} +.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input { + padding: 1em; + color: var(--wp--preset--color--foreground); + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; +} +.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:hover, .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus { + border-color: var(--wp--preset--color--foreground); +} +.wc-block-components-form .has-error input, .wc-block-components-form .has-error select, .wc-block-components-form .has-error textarea { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; +} +.wc-block-components-form .has-error .wc-block-components-validation-error { + color: var(--wp--preset--color--foreground); + font-size: 0.875em; + margin-top: 0.5em; +} + +.woocommerce div.product form.cart .variations select, +.single-product div.product table.variations select { + padding: 1em; + color: var(--wp--preset--color--foreground); + background-color: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + min-width: 150px; +} + +.woocommerce .quantity .qty { + padding: 0.7em; + text-align: center; +} + +.woocommerce form .form-row label, +.wc-block-components-form .wc-block-components-text-input label { + color: var(--wp--preset--color--foreground); + margin-bottom: 0.5em; + display: block; +} + +.woocommerce form .form-row.woocommerce-validated input.input-text { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; +} +.woocommerce form .form-row.woocommerce-validated input.input-text:focus { + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); +} +.woocommerce form .form-row.woocommerce-invalid input.input-text { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; +} +.woocommerce form .form-row.woocommerce-invalid input.input-text:focus { + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); +} +.woocommerce form .form-row .woocommerce-input-wrapper .description { + background: rgba(250, 247, 239, 0.1); + border-radius: 3px; + color: var(--wp--preset--color--foreground); + padding: 0.5em 1em; + margin: 0.5em 0 0; + font-size: 0.875em; +} + +.woocommerce #respond input#submit, +.woocommerce a.button, +.woocommerce button.button, +.woocommerce input.button, +.wc-block-components-button:not(.is-link) { + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 0.85em; + padding: 0.75em 1.5em; + background-color: transparent; + color: var(--wp--preset--color--foreground); + transition: all 0.25s ease; + font-weight: normal; +} +.woocommerce #respond input#submit:hover, +.woocommerce a.button:hover, +.woocommerce button.button:hover, +.woocommerce input.button:hover, +.wc-block-components-button:not(.is-link):hover { + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + text-decoration: none; +} +.woocommerce #respond input#submit.alt, +.woocommerce a.button.alt, +.woocommerce button.button.alt, +.woocommerce input.button.alt, +.wc-block-components-button:not(.is-link).alt { + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); +} +.woocommerce #respond input#submit.alt:hover, +.woocommerce a.button.alt:hover, +.woocommerce button.button.alt:hover, +.woocommerce input.button.alt:hover, +.wc-block-components-button:not(.is-link).alt:hover { + background-color: transparent; + color: var(--wp--preset--color--foreground); +} + +.woocommerce-info, +.woocommerce-message, +.woocommerce-error { + border-radius: 4px; + background-color: rgba(250, 247, 239, 0.1); + border-left: 3px solid var(--wp--preset--color--foreground); + color: var(--wp--preset--color--foreground); + padding: 1em 1.5em; + margin-bottom: 2em; +} +.woocommerce-info a, +.woocommerce-message a, +.woocommerce-error a { + color: var(--wp--preset--color--foreground); + font-weight: 600; + text-decoration: underline; +} +.woocommerce-info a:hover, +.woocommerce-message a:hover, +.woocommerce-error a:hover { + text-decoration: none; +} + +.wc-block-components-notice-banner, +.woocommerce-error { + color: var(--wp--preset--color--foreground); +} +.wc-block-components-notice-banner.is-error, .wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-warning, +.woocommerce-error.is-error, +.woocommerce-error.is-info, +.woocommerce-error.is-success, +.woocommerce-error.is-warning { + border-left-color: var(--wp--preset--color--foreground); +} + +#coming-soon-footer-banner { + background: black; + color: var(--wp--preset--color--foreground); +} + +.wc-block-components-title.wc-block-components-title { + font-size: 38px; + margin-bottom: 1rem; +} + +.wc-block-components-notice-banner.is-error { + background-color: black; + border-color: white; +} + +.wc-blocks-components-select .wc-blocks-components-select__select { + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + color: var(--wp--preset--color--foreground); +} + +.wc-blocks-components-select .wc-blocks-components-select__label { + color: var(--wp--preset--color--foreground); +} + +.wc-blocks-components-select .wc-blocks-components-select__container { + background: transparent; + color: var(--wp--preset--color--foreground); + border: 1px solid var(--wp--preset--color--foreground); + border: none; + border-radius: 12px; +} + +.wc-blocks-components-select .wc-blocks-components-select__expand { + fill: var(--wp--preset--color--foreground) !important; +} + +.wc-block-components-form .wc-block-components-text-input.has-error label, .wc-block-components-text-input.has-error label { + color: var(--wp--preset--color--foreground); +} + +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus { + background-color: var(--wp--preset--color--background); +} + +/*# sourceMappingURL=custom.css.map */ diff --git a/assets/css/custom.css.map b/assets/css/custom.css.map new file mode 100644 index 0000000..efbc020 --- /dev/null +++ b/assets/css/custom.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"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","file":"custom.css"} \ No newline at end of file diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss new file mode 100644 index 0000000..8f551c2 --- /dev/null +++ b/assets/scss/custom.scss @@ -0,0 +1,406 @@ +html { + background: var(--wp--preset--color--background); +} + +body { + background: radial-gradient( + circle at right 15%, + rgba(142, 154, 236, 0.4) 0%, + rgba(142, 154, 236, 0) 25% + ), + radial-gradient( + circle at left 85%, + rgba(142, 154, 236, 0.4) 0%, + rgba(142, 154, 236, 0) 25% + ); +} + +// Common WooCommerce input field styling +.woocommerce, +.wc-block-components-form, +.woocommerce-page { + input[type=email], + input[type=number], + input[type=password], + input[type=tel], + input[type=text], + input[type=url], + input[type=search], + input[type=date], + textarea, + select { + padding: 1em; + color: var(--wp--preset--color--foreground); + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + transition: border-color 0.3s, box-shadow 0.3s; + + &::placeholder { + color: var(--wp--preset--color--foreground); + opacity: 0.7; + } + + &:hover { + border-color: var(--wp--preset--color--foreground); + } + + &:focus { + outline: none; + border-color: var(--wp--preset--color--foreground); + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); + } + } + + // Special styling for select fields + select { + appearance: none; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7z' fill='%23FAF7EF'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1em top 50%; + padding-right: 2.5em; + + option { + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); + } + } + + // Textarea specific styling + textarea { + min-height: 100px; + resize: vertical; + } + + // Checkbox and radio styling + input[type=checkbox], + input[type=radio] { + position: relative; + width: 1.25em; + height: 1.25em; + margin-right: 0.5em; + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + cursor: pointer; + + &:checked { + background-color: var(--wp--preset--color--foreground); + border-color: var(--wp--preset--color--foreground); + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 0.5em; + height: 0.5em; + background-color: var(--wp--preset--color--background); + border-radius: 1px; + } + } + + &:focus { + outline: none; + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); + } + } + + input[type=radio] { + border-radius: 50%; + + &:checked::after { + border-radius: 50%; + } + } + + // Error state styling + .woocommerce-invalid, + .woocommerce-invalid-required-field, + .has-error { + input[type=email], + input[type=number], + input[type=password], + input[type=tel], + input[type=text], + input[type=url], + input[type=search], + input[type=date], + textarea, + select { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; + + &:focus { + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); + } + } + } + + .woocommerce-error { + background-color: rgba(250, 247, 239, 0.1); + border-left: 3px solid var(--wp--preset--color--foreground); + color: var(--wp--preset--color--foreground); + padding: 1em 1.5em; + margin-bottom: 2em; + border-radius: 4px; + + li { + list-style: none; + margin-left: 0; + } + } + + // Validation error messages + .woocommerce-error, + .woocommerce-message { + margin: 0 0 2em; + padding: 1em 1.5em; + border-radius: 4px; + + &::before { + margin-right: 0.5em; + } + } + + span.required { + color: var(--wp--preset--color--foreground); + opacity: 0.8; + } +} + +// Specific class for WooCommerce components +.wc-block-components-form { + .wc-block-components-text-input, + .wc-block-components-select { + input[type=email], + input[type=number], + input[type=password], + input[type=tel], + input[type=text], + input[type=url], + select { + padding: 1em; + color: var(--wp--preset--color--foreground); + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + + &::placeholder { + color: var(--wp--preset--color--foreground); + opacity: 0.7; + } + + &:hover { + border-color: var(--wp--preset--color--foreground); + } + + &:focus { + outline: none; + border-color: var(--wp--preset--color--foreground); + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); + } + } + } + + // Style the combobox + .wc-block-components-combobox .wc-block-components-combobox-control { + input.components-combobox-control__input { + padding: 1em; + color: var(--wp--preset--color--foreground); + background: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + + &:hover, &:focus { + border-color: var(--wp--preset--color--foreground); + } + } + } + + // Error states for WC blocks + .has-error { + input, select, textarea { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; + } + + .wc-block-components-validation-error { + color: var(--wp--preset--color--foreground); + font-size: 0.875em; + margin-top: 0.5em; + } + } +} + +// Fix for variable products dropdown +.woocommerce div.product form.cart .variations select, +.single-product div.product table.variations select { + padding: 1em; + color: var(--wp--preset--color--foreground); + background-color: transparent; + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + min-width: 150px; +} + +// Fix for cart quantity inputs +.woocommerce .quantity .qty { + padding: 0.7em; + text-align: center; +} + +// Form labels +.woocommerce form .form-row label, +.wc-block-components-form .wc-block-components-text-input label { + color: var(--wp--preset--color--foreground); + margin-bottom: 0.5em; + display: block; +} + +// Form validation indicators +.woocommerce form .form-row { + &.woocommerce-validated { + input.input-text { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; + + &:focus { + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); + } + } + } + + &.woocommerce-invalid { + input.input-text { + border-color: var(--wp--preset--color--foreground); + border-width: 2px; + + &:focus { + box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); + } + } + } + + .woocommerce-input-wrapper { + .description { + background: rgba(250, 247, 239, 0.1); + border-radius: 3px; + color: var(--wp--preset--color--foreground); + padding: 0.5em 1em; + margin: 0.5em 0 0; + font-size: 0.875em; + } + } +} + +// Button styles for consistency +.woocommerce #respond input#submit, +.woocommerce a.button, +.woocommerce button.button, +.woocommerce input.button, +.wc-block-components-button:not(.is-link) { + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 0.85em; + padding: .75em 1.5em; + background-color: transparent; + color: var(--wp--preset--color--foreground); + transition: all 0.25s ease; + font-weight: normal; + + &:hover { + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + text-decoration: none; + } + + &.alt { + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + + &:hover { + background-color: transparent; + color: var(--wp--preset--color--foreground); + } + } +} + +// Notices and messages +.woocommerce-info, +.woocommerce-message, +.woocommerce-error { + border-radius: 4px; + background-color: rgba(250, 247, 239, 0.1); + border-left: 3px solid var(--wp--preset--color--foreground); + color: var(--wp--preset--color--foreground); + padding: 1em 1.5em; + margin-bottom: 2em; + + a { + color: var(--wp--preset--color--foreground); + font-weight: 600; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } +} + +// Make sure error feedback text uses foreground color +.wc-block-components-notice-banner, +.woocommerce-error { + color: var(--wp--preset--color--foreground); + + &.is-error, + &.is-info, + &.is-success, + &.is-warning { + border-left-color: var(--wp--preset--color--foreground); + } +} + +#coming-soon-footer-banner { + background: black; + color: var(--wp--preset--color--foreground); +} + +.wc-block-components-title.wc-block-components-title { + font-size: 38px; + margin-bottom: 1rem; +} + +.wc-block-components-notice-banner.is-error { + background-color: black; + border-color: white; +} + +.wc-blocks-components-select .wc-blocks-components-select__select { + border: 1px solid var(--wp--preset--color--foreground); + border-radius: 12px; + color: var(--wp--preset--color--foreground); +} + +.wc-blocks-components-select .wc-blocks-components-select__label { + color: var(--wp--preset--color--foreground); +} + +.wc-blocks-components-select .wc-blocks-components-select__container { + background: transparent; + color: var(--wp--preset--color--foreground); + border: 1px solid var(--wp--preset--color--foreground); + border: none; + border-radius: 12px; +} + +.wc-blocks-components-select .wc-blocks-components-select__expand { + fill: var(--wp--preset--color--foreground) !important; +} + +.wc-block-components-form .wc-block-components-text-input.has-error label, .wc-block-components-text-input.has-error label { + color: var(--wp--preset--color--foreground); +} + +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus { + background-color: var(--wp--preset--color--background); +} \ No newline at end of file diff --git a/theme.json b/theme.json index 09c2515..3f8f7d3 100644 --- a/theme.json +++ b/theme.json @@ -330,6 +330,15 @@ "text": "var(--wp--preset--color--foreground)" } }, + "h2": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--eb-garamond)", + "fontSize": "var(--wp--preset--font-size--x-large)", + "fontStyle": "normal", + "fontWeight": "700", + "lineHeight": "1.0" + } + }, "link": { ":hover": { "color": {