Fix CSS issues with cookie overlay (#12077)

pulumi · Jun 19, 2024 · f1ba876 · f1ba876
1 parent 35c9efb
commit f1ba876
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 38 deletions.
diff --git a/assets/css/bundle.css b/assets/css/bundle.css
@@ -23023,36 +23023,31 @@ section.newsletter-input pulumi-hubspot-form input.hs-input{
  border-radius: 0.25rem
 }
 
-#segment-consent-manager{
+#segment-consent-manager>div:first-child{
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
+ margin: 1rem;
+ border-radius: 0.5rem;
+ border-width: 2px;
+ --tw-border-opacity: 1;
+ border-color: rgba(128, 90, 195, var(--tw-border-opacity));
+ padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
- z-index:100
-}
-
-#segment-consent-manager>div:first-child{
- width: 100%;
- padding-left: 0.75rem;
- padding-right: 0.75rem
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ z-index:99999
 }
 
 @media (min-width: 1024px){
  #segment-consent-manager>div:first-child{
- float: right;
- margin-right: 0.5rem;
- margin-bottom: 0.5rem;
+ left: auto;
+ margin: 1rem;
  width: 33.333333%;
  overflow: hidden;
- border-radius: 0.5rem;
- padding-left: 1rem;
- padding-right: 1rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+ padding: 0.5rem
  }
 }
 
@@ -23066,8 +23061,7 @@ section.newsletter-input pulumi-hubspot-form input.hs-input{
 }
 
 #segment-consent-manager p{
- padding-right: 2rem;
- padding-bottom: 0.5rem;
+ padding-right: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
@@ -23082,22 +23076,31 @@ section.newsletter-input pulumi-hubspot-form input.hs-input{
 
 #segment-consent-manager button{
  font-weight: 700;
+ text-decoration: none
+}
+
+#segment-consent-manager button[aria-label=Close]{
+ top: 0px;
+ right: 0px;
+ margin-top: 1rem;
+ font-size: 1.125rem;
+ line-height: 1.75rem;
  --tw-text-opacity: 1;
- color: rgba(0, 0, 0, var(--tw-text-opacity));
- text-decoration: none;
- top:10%
+ color: rgba(77, 54, 117, var(--tw-text-opacity))
 }
 
 #segment-consent-manager .manage-cookies-btn{
+ margin-top: 0.5rem;
  border-radius: 0.375rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgba(128, 90, 195, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+ background-color: rgba(128, 90, 195, var(--tw-bg-opacity));
  padding: 0.75rem;
+ font-weight: 700;
  --tw-text-opacity: 1;
- color: rgba(128, 90, 195, var(--tw-text-opacity));
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
  text-decoration: none;
  transition:all 120ms linear
 }
@@ -23110,14 +23113,14 @@ section.newsletter-input pulumi-hubspot-form input.hs-input{
  --tw-bg-opacity: 1;
  background-color: rgba(242, 239, 249, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
- color: rgba(128, 90, 195, var(--tw-text-opacity))
+ color: rgba(102, 72, 156, var(--tw-text-opacity))
 }
 
 #segment-consent-manager .manage-cookies-btn:focus{
  --tw-bg-opacity: 1;
- background-color: rgba(230, 222, 243, var(--tw-bg-opacity));
+ background-color: rgba(242, 239, 249, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
- color: rgba(128, 90, 195, var(--tw-text-opacity))
+ color: rgba(230, 222, 243, var(--tw-text-opacity))
 }
 
 .sr-only{

diff --git a/theme/src/scss/main.scss b/theme/src/scss/main.scss
@@ -366,14 +366,13 @@ section.newsletter-input pulumi-hubspot-form input.hs-input {
 }
 
 #segment-consent-manager {
- @apply fixed bottom-0 right-0 left-0 text-black;
- z-index: 100;
 
  > div:first-child {
- @apply w-full px-3;
+ @apply text-black fixed bottom-0 right-0 left-0 p-2 m-4 border-2 border-violet-600 rounded-lg shadow-lg;
+ z-index: 99999;
 
  @screen lg {
- @apply w-1/3 float-right mb-2 mr-2 rounded-lg shadow-lg overflow-hidden px-4 py-2;
+ @apply w-1/3 left-auto m-4 overflow-hidden p-2;
  }
  }
 
@@ -386,7 +385,7 @@ section.newsletter-input pulumi-hubspot-form input.hs-input {
  }
 
  p {
- @apply text-black text-left text-sm pr-8 pb-2;
+ @apply text-black text-left text-sm pr-2;
 
  a {
  text-decoration: none;
@@ -395,24 +394,27 @@ section.newsletter-input pulumi-hubspot-form input.hs-input {
  }
 
  button {
- @apply text-black font-bold no-underline;
- top: 10%;
+ @apply font-bold no-underline;
+ }
+
+ button[aria-label="Close"] {
+ @apply text-violet-800 mt-4 top-0 right-0 text-lg;
  }
 
  .manage-cookies-btn {
- @apply bg-white text-violet-600 border-2 border-violet-600 no-underline p-3 rounded-md;
+ @apply mt-2 bg-violet-600 text-white font-bold border-2 border-violet-600 no-underline p-3 rounded-md;
  @include transition;
 
  &.disabled {
  opacity: 0.3rem;
  }
 
  &:hover {
- @apply bg-violet-100 text-violet-600;
+ @apply bg-violet-100 text-violet-700;
  }
 
  &:focus {
- @apply bg-violet-200 text-violet-600;
+ @apply bg-violet-100 text-violet-200;
  }
  }
 }