.woocommerce-customize-store__container { display: flex; flex-direction: column; button { cursor: pointer; } } .woocommerce-customize-store-error-link { cursor: pointer; } .woocommerce-customize-store-header { min-height: 64px; padding: 1rem; width: 100%; .edit-site-site-hub__view-mode-toggle-container { background-color: transparent; height: 32px; width: 32px; } .edit-site-site-icon { line-height: 0; svg { height: 32px; width: 32px; } } .edit-site-site-hub__site-title { font-size: 0.8125rem; font-weight: 500; margin: 0; padding: 0 0 0 0.75rem; line-height: 2rem; color: $gray-900; } } .woocommerce-customize-store-container { display: flex; flex-direction: row; } .woocommerce-customize-store-sidebar { flex: 0 0 380px; padding: 1rem; .woocommerce-customize-store-sidebar__title { color: #1e1e1e; font-size: 1rem; font-weight: 600; margin: 0; padding: 0; line-height: 2.5; } button { background-color: transparent; border: none; line-height: 1; padding-right: 0; vertical-align: middle; } svg { color: inherit; height: 24px; width: 24px; margin: 0.25rem; } p { padding: 0 1rem; color: #757575; max-width: 20rem; } } .woocommerce-customize-store-main { margin-right: 2.5rem; width: 100%; min-width: 820px; p { color: #2f2f2f; font-size: 0.813rem; line-height: 1.5; margin: 0; padding: 0; &.select-theme-text { font-size: 1rem; font-weight: 500; color: #1e1e1e; margin-bottom: 24px; } } .woocommerce-cys-design-with-ai__error-notice { margin: 0 0 24px; } } .woocommerce-customize-store-banner { background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-background.svg) no-repeat center right; background-size: auto 218px; background-position-y: 29px; border-radius: 4px; display: flex; margin: 1.25rem 0 3.375rem; min-height: 248px; width: 100%; align-items: center; padding-left: 50px; padding-right: 40px; position: relative; &.offline-banner { background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-offline.svg) no-repeat center right; background-size: auto 218px; background-position-y: 29px; } &.no-ai-banner { background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-no-ai.svg) no-repeat center right; } &.existing-ai-theme-banner, &.existing-no-ai-theme-banner { background: rgba(246, 247, 247, 1); .woocommerce-customize-store-banner-content { width: 100%; display: flex; justify-content: space-between; .banner-actions { width: 50%; } } .preview-iframe { pointer-events: none; position: absolute; bottom: -497px; right: 50px; width: 1100px; height: 710px; -moz-transform: scale(0.3); -moz-transform-origin: top right; -o-transform: scale(0.3); -o-transform-origin: top right; -webkit-transform: scale(0.3); -webkit-transform-origin: top right; border-top-left-radius: 28px; border-top-right-radius: 28px; } } .woocommerce-customize-store-banner-content { width: 450px; @media only screen and (min-width: 1400px) { width: 700px; } button.is-link { color: var(--wp-admin-theme-color, #3858e9); text-decoration: none; font-weight: 500; } button.components-button { padding: 8px 16px; height: 40px; } button.components-button + button.components-button { // add left margin for all buttons with another button to its left margin-left: 12px; } h1 { font-size: 1.25rem; line-height: 23.87px; font-weight: 500; color: #000; padding: 0; } p { margin: 12px 0 28px 0; color: #2f2f2f; line-height: 16px; &.ai-disclaimer { color: #757575; font-size: 12px; margin-top: 10px; margin-bottom: 0; line-height: 18px; a { text-decoration: none; } } } } } .woocommerce-customize-store-theme-cards { display: grid; flex-wrap: wrap; gap: 32px; row-gap: 54px; grid-template-columns: repeat(2, 1fr); @media only screen and (min-width: 1600px) { grid-template-columns: repeat(4, 1fr); } .theme-card { display: block; text-decoration: none; a { &:focus { box-shadow: none; } } img { border-radius: 4px; border: 1px solid #e9e9e9; width: 100%; height: 240px; object-fit: cover; object-position: 0 0; } .theme-card__title { font-size: 1rem; margin: 0; padding: 0; font-weight: 600; } .theme-card__info { margin: 24px 0 8px 0; display: flex; .theme-card__color-palettes { margin-left: auto; } } .theme-card__color-palettes { display: flex; margin: 0 0 0 auto; padding: 0; gap: 5px; li { width: 20px; height: 20px; box-shadow: inset 0 0 0 1px #0003; border-radius: 50%; margin-bottom: 0; &.more_palettes { box-shadow: none; font-size: 11px; text-align: center; } } } .theme-card__active { border-radius: 100px; background: rgba(56, 88, 233, 0.2); padding: 5px 10px; justify-content: flex-end; align-items: center; gap: 10px; color: #1d35b4; font-size: 12px; font-style: normal; font-weight: 500; line-height: 20px; /* 166.667% */ margin-right: 10px; } .theme-card__free { color: #1e1e1e; font-size: 14px; font-style: normal; font-weight: 400; line-height: 16px; /* 114.286% */ } } } .woocommerce-customize-store-browse-themes { text-align: center; button { background-color: #fff; border: 1px solid var(--wp-admin-theme-color, #3858e9); border-radius: 2px; color: var(--wp-admin-theme-color, #3858e9); display: inline-block; font-size: 0.8125rem; margin: 3.75rem 0; padding: 0.5rem 0.75rem; } }