diff --git a/web/src/components/save/SupportedServices.svelte b/web/src/components/save/SupportedServices.svelte index ed64953b..6628c9f4 100644 --- a/web/src/components/save/SupportedServices.svelte +++ b/web/src/components/save/SupportedServices.svelte @@ -101,11 +101,16 @@ flex-direction: row; font-size: 13px; font-weight: 500; + background: none; + } + + #services-button:not(:focus-visible) { + box-shadow: none; } .expand-icon { - height: 21px; - width: 21px; + height: 22px; + width: 22px; display: flex; align-items: center; justify-content: center; @@ -116,10 +121,16 @@ transition: transform 0.2s; } - #services-button:hover .expand-icon { + #services-button:active .expand-icon { background: var(--button-elevated-hover); } + @media (hover: hover) { + #services-button:hover .expand-icon { + background: var(--button-elevated-hover); + } + } + .expand-icon :global(svg) { height: 18px; width: 18px; @@ -130,7 +141,6 @@ .expanded .expand-icon { transform: rotate(45deg); - transition: transform 0.2s; } #services-container { @@ -152,4 +162,16 @@ #services-disclaimer { padding: 0; } + + @media screen and (max-width: 535px) { + .expand-icon { + height: 21px; + width: 21px; + } + + .expand-icon :global(svg) { + height: 16px; + width: 16px; + } + } diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index 4e348f3a..b856355d 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -51,6 +51,10 @@ } @media screen and (max-width: 535px) { + #cobalt-save-container { + padding-top: calc(var(--padding) / 2); + } + #terms-note { font-size: 11px; padding-bottom: 0;