diff --git a/apps/theme/static_src/src/css/components.css b/apps/theme/static_src/src/css/components.css index 343c6a96..2ab90736 100644 --- a/apps/theme/static_src/src/css/components.css +++ b/apps/theme/static_src/src/css/components.css @@ -90,4 +90,18 @@ @apply mt-1; @apply mr-2; } + .info-circle { + @apply relative; + @apply -top-0.5; + @apply inline-block; + @apply leading-none; + @apply text-center; + @apply h-5; + @apply w-5; + @apply border-2; + @apply border-solid; + @apply border-neutral-300; + @apply text-neutral-300; + @apply rounded-3xl; + } } \ No newline at end of file diff --git a/apps/theme/static_src/src/css/custom/forms-custom.css b/apps/theme/static_src/src/css/custom/forms-custom.css index 0cc3d2a0..e8fe4316 100644 --- a/apps/theme/static_src/src/css/custom/forms-custom.css +++ b/apps/theme/static_src/src/css/custom/forms-custom.css @@ -181,11 +181,25 @@ table[class^="form__table--"] label { @apply text-base; } .form__directory select { - @apply text-neutral-400; + @apply text-white; @apply sm:text-2xl; @apply bg-neutral-900; @apply border-green; @apply h-16; + + background-image: + linear-gradient(45deg, transparent 50%, white 50%), + linear-gradient(135deg, white 50%, transparent 50%); + background-position: + calc(100% - 24px) calc(1em + 6px), + calc(100% - 16px) calc(1em + 6px); + background-size: + 8px 8px, + 8px 8px; + background-repeat: no-repeat; +} +.form__directory select:focus { + /* @apply border-neutral-400; */ } .form__directory p { @apply lg:col-span-2; diff --git a/apps/theme/templates/greencheck/directory_index.html b/apps/theme/templates/greencheck/directory_index.html index ee5864b1..09c3b24f 100644 --- a/apps/theme/templates/greencheck/directory_index.html +++ b/apps/theme/templates/greencheck/directory_index.html @@ -15,7 +15,9 @@

I'm looking for

- What is this? + What is this directory for? + +

The Green Web Directory is a searchable list which enables people to quickly find verified green hosting companies. These are organisations that offer