diff --git a/assets/postcode_modal.css b/assets/postcode_modal.css index 269bcd3..916f6ae 100644 --- a/assets/postcode_modal.css +++ b/assets/postcode_modal.css @@ -1,47 +1,67 @@ .postcode_modal { - border-radius: 5px; - box-shadow(10px); + border-radius: 3px; border: none; - max-width: 80ch; - box-shadow: 0 0 20pc black; + max-width: 60ch; padding: 2rem; + padding-bottom: 1rem; opacity: 0; - transition: opacity 0.3s ease, display 0.3s allow-discrete; + transition: + opacity 0.3s ease, + display 0.3s allow-discrete; &[open] { - opacity: 1; - transition-behavior: allow-discrete; - transition: opacity 0.3s ease, display 0.3s allow-discrete; - } - - &:not([open]) { - display: none; + opacity: 1; + transition-behavior: allow-discrete; + transition: + opacity 0.3s ease, + display 0.3s allow-discrete; } h2 { - font-size: 1.5rem; - margin: .6rem; + font-size: 1.1rem; + font-weight: 700; + } + + p { + font-size: 1rem; + } + + &:not([open]) { + display: none; + } + + form { + margin-top: 1rem; } input[type="text"] { - padding: .3rem; - font-size: 1.4rem; - caret-color: hsl(344 98 40); + padding: 0.3rem; + font-size: 1.2rem; + caret-color: var(--wp--preset--color--vivid-red); + background: hsl(0 1 80); + border: none; + + &:focus, + &:valid, + &:invalid, + &:autofill, + &:autofill:focus { + background: hsl(0 1 80) !important; + } } button { - border: none; - font-size: 1.4rem; + font-size: 1.2rem; + font-weight: 700; color: hsl(233 100 100); - padding: .4rem 1rem; - border-radius: 5px; - background: hsl(344 98 40); - border: 1px hsl(344 98 40) solid; - margin: 0 0 0 .3rem; - transition: .2s all linear; - - &:hover{ - color: hsl(344 98 40 ); + padding: 0.4rem 1rem; + background: var(--wp--preset--color--vivid-red); + border: 1px var(--wp--preset--color--vivid-red) solid; + margin: 0 0 0 0.3rem; + transition: 0.2s all linear; + padding: 0.2em 2.5em; + &:hover { + color: var(--wp--preset--color--vivid-red); background: hsl(344 98 100); cursor: pointer; } @@ -51,20 +71,19 @@ display: flex; justify-content: space-between; align-items: center; - - &>{ + div { display: flex; + gap: 1.5rem; } } &::backdrop { - backdrop-filter: blur(1px); - background-color: hsl(40deg 100 0 /0.4); - background: radial-gradient(circle,rgba(33, 33, 33, 0.68) 0%, rgba(15, 15, 15, 0.8) 23%, rgba(0, 0, 0, 0.87) 100%); + backdrop-filter: blur(2px); + background: hsl(0 1 65 / 0.6); } .error_message_modal_postcode { min-height: 1lh; - color: hsl(344 98 40 ); - }/* HTML:
*/ + color: var(--wp--preset--color--vivid-red); + } /* HTML: */ } diff --git a/prijs-per-postcode.php b/prijs-per-postcode.php index a2ab7e7..09c6708 100644 --- a/prijs-per-postcode.php +++ b/prijs-per-postcode.php @@ -1,7 +1,6 @@