body { margin: 100px auto 24px; box-shadow: none; background: #f1f1f1; padding: 0; } #wc-logo { border: 0; margin: 0 0 24px; padding: 0; text-align: center; img { max-width: 50%; } } .wc-setup-content { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); padding: 24px 24px 0; margin: 0 0 20px; background: #fff; overflow: hidden; zoom: 1; h1, h2, h3, table { margin: 0 0 24px; border: 0; padding: 0; color: #666; clear: none; } p { margin: 0 0 24px; font-size: 1em; line-height: 1.75em; color: #666; } table { font-size: 1em; line-height: 1.75em; color: #666; } a { color: #a16696; &:hover, &:focus { color: #111; } } .form-table { th { width: 35%; vertical-align: top; font-weight: normal; } td { vertical-align: top; select, input { width: 100%; box-sizing: border-box; } input[size] { width: auto; } .description { line-height: 1.5em; display: block; margin-top: 0.25em; color: #999; font-style: italic; } .input-checkbox, .input-radio { width: auto; box-sizing: inherit; padding: inherit; margin: 0 0.5em 0 0; box-shadow: none; } } .section_title { td { padding: 0; h2, p { margin: 12px 0 0; } } } th, td { padding: 12px 0; margin: 0; border: 0; &:first-child { padding-right: 1em; } } } table.tax-rates { width: 100%; font-size: 0.92em; th { padding: 0; text-align: center; width: auto; vertical-align: middle; } td { border: 1px solid #f5f5f5; padding: 6px; text-align: center; vertical-align: middle; input { outline: 0; border: 0; padding: 0; box-shadow: none; text-align: center; width: 100%; } &.sort { cursor: move; color: #ccc; &::before { content: '\f333'; font-family: 'dashicons'; } } &.readonly { background: #f5f5f5; } } .add { padding: 1em 0 0 1em; line-height: 1em; font-size: 1em; width: 0; margin: 6px 0 0; height: 0; overflow: hidden; position: relative; display: inline-block; &::before { content: '\f502'; font-family: 'dashicons'; position: absolute; left: 0; top: 0; } } .remove { padding: 1em 0 0 1em; line-height: 1em; font-size: 1em; width: 0; margin: 0; height: 0; overflow: hidden; position: relative; display: inline-block; &::before { content: '\f182'; font-family: 'dashicons'; position: absolute; left: 0; top: 0; } } } .wc-setup-pages { width: 100%; border-top: 1px solid #eee; thead th { display: none; } .page-name { width: 30%; font-weight: bold; } th, td { padding: 14px 0; border-bottom: 1px solid #eee; &:first-child { padding-right: 9px; } } th { padding-top: 0; } .page-options { p { color: #777; margin: 6px 0 0 24px; line-height: 1.75em; input { vertical-align: middle; margin: 1px 0 0; height: 1.75em; width: 1.75em; line-height: 1.75em; } label { line-height: 1; } } } } @media screen and (max-width: 782px) { .form-table { tbody { th { width: auto; } } } } .twitter-share-button { float: right; } .wc-setup-next-steps { overflow: hidden; margin: 0 0 24px; padding-bottom: 2px; h2 { margin-bottom: 12px; } .wc-setup-next-steps-first { float: left; width: 50%; box-sizing: border-box; } .wc-setup-next-steps-last { float: right; width: 50%; box-sizing: border-box; } ul { padding: 0 2em 0 0; list-style: none outside; margin: 0 0 -0.75em; li a { display: block; padding: 0 0 0.75em; } .setup-product { a.button { background-color: #f7f7f7; border-color: #ccc; color: #23282d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #ccc; text-shadow: 1px 0 1px #eee, 0 1px 1px #eee; font-size: 1em; height: auto; line-height: 1.75em; margin: 0 0 0.75em; opacity: 1; padding: 1em; text-align: center; &:hover, &:focus, &:active { background: #f5f5f5; border-color: #aaa; } } a.button-primary { color: #fff; background-color: #bb77ae; border-color: #a36597; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597; text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597; &:hover, &:focus, &:active { color: #fff; background: #a36597; border-color: #a36597; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597; } } } li a::before { color: #82878c; font: normal 20px/1 'dashicons'; speak: none; display: inline-block; padding: 0 10px 0 0; top: 1px; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; vertical-align: top; } .learn-more a::before { content: '\f105'; } .video-walkthrough a::before { content: '\f126'; } .newsletter a::before { content: '\f465'; } } } .woocommerce-tracker, .updated { padding: 24px 24px 0; margin: 0 0 24px; overflow: hidden; background: #f5f5f5; p { padding: 0; margin: 0 0 12px; } p:last-child { margin: 0 0 24px; } } } .wc-setup-steps { padding: 0 0 24px; margin: 0; list-style: none outside; overflow: hidden; color: #ccc; width:100%; display: inline-flex; li { width: 20%; float: left; padding: 0 0 0.8em; margin: 0; text-align: center; position: relative; border-bottom: 4px solid #ccc; line-height: 1.4em; } li::before { content: ''; border: 4px solid #ccc; border-radius: 100%; width: 4px; height: 4px; position: absolute; bottom: 0; left: 50%; margin-left: -6px; margin-bottom: -8px; background: #fff; } li.active { border-color: #a16696; color: #a16696; &::before { border-color: #a16696; } } li.done { border-color: #a16696; color: #a16696; &::before { border-color: #a16696; background: #a16696; } } } .wc-setup .wc-setup-actions { overflow: hidden; .button { float: right; font-size: 1.25em; padding: 0.5em 1em; line-height: 1em; margin-right: 0.5em; margin-bottom: 2px; height: auto; border-radius: 4px; } .button-primary { background-color: #bb77ae; border-color: #a36597; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597; text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597; float: right; margin: 0; opacity: 1; &:hover, &:focus, &:active { background: #a36597; border-color: #a36597; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597; } } } .wc-return-to-dashboard { font-size: 0.85em; color: #b5b5b5; margin: 1.18em 0; display: block; text-align: center; } .wc-wizard-storefront { .wc-wizard-storefront-intro { padding: 40px 40px 0; background: #F5F5F5; text-align: center; img { margin: 40px 0 0 0; width: 100%; display: block; } } .wc-wizard-storefront-features { list-style: none outside; margin: 0 0 20px; padding: 0 0 0 30px; overflow: hidden; } .wc-wizard-storefront-feature { margin: 0; padding: 20px 30px 20px 2em; width: 50%; box-sizing: border-box; &::before { margin-left: -2em; position: absolute; } &.first { clear: both; float: left; } &.last { float: right; } } .wc-wizard-storefront-feature__bulletproof::before { content: '🔒'; } .wc-wizard-storefront-feature__mobile::before { content: '📱'; } .wc-wizard-storefront-feature__accessibility::before { content: '👓'; } .wc-wizard-storefront-feature__search::before { content: '🔍'; } .wc-wizard-storefront-feature__compatibility::before { content: '🔧'; } .wc-wizard-storefront-feature__extendable::before { content: '🎨'; } } ul.wc-wizard-shipping-methods, ul.wc-wizard-payment-gateways { border: 1px solid #eee; border-bottom-width: 2px; padding: 0; margin: 0 0 1em; list-style: none outside; border-radius: 4px; li.wc-wizard-shipping, li.wc-wizard-gateway { padding: 1.5em 1em 1em 4em; border-top: 1px solid #eee; list-style: none outside; cursor: pointer; color: #555; box-sizing: border-box; clear: both; &:first-child { border-top: 0; } &.featured { width: 50%; float: left; clear: none; border-right: 1px solid #eee; border-top: 0; } &.featured-row-last { border-right: 0; } .wc-wizard-shipping-settings, .wc-wizard-gateway-settings { display: none; margin-bottom: 0; cursor: default; } &.checked { background: #f7f1f6; .wc-wizard-shipping-settings, .wc-wizard-gateway-settings { display: table; } } .wc-wizard-shipping-description, .wc-wizard-gateway-description { font-style: italic; p { margin: 0 0 0.5em; } p:last-child { margin-bottom: 0; } } .wc-wizard-shipping-enable, .wc-wizard-gateway-enable { margin: 0 0 0.5em; label { display: block; font-weight: bold; vertical-align: middle; img { max-height: 2em; vertical-align: middle; } } label::before { content: ''; background: #fff; border: 2px solid #eee; display: inline-block; float: left; vertical-align: middle; width: 2em; height: 2em; padding: 0; box-sizing: border-box; line-height: 1.8em; text-align: center; margin: 0 1em 0 -3em; border-radius: 4px; } input { opacity: 0; width: 0; position: absolute; &:checked + label::before { content: '\f147'; font-family: 'dashicons'; color: #fff; border-color: #a46497; background: #a46497; } &:focus + label { outline: 1px solid #ddd; /* focus style */ } } } } }