芝麻web文件管理V1.00
编辑当前文件:/home4/randall/public_html/sl/wp-content/plugins/woocommerce/assets/css/woocommerce-blocktheme.scss
/** * woocommerce-blocktheme.scss * Block theme default styles to ensure WooCommerce looks better out of the box with block themes that are not optimised for WooCommerce specifically. */ @import "fonts"; @import "variables"; /** * Layout */ .woocommerce-cart, .woocommerce-account, .woocommerce-checkout { .wp-block-post-title, main .woocommerce { // Allow Cart/Checkout/Account pages more space to breathe. max-width: 1000px; } } .clear { clear: both; } /** * General */ .woocommerce { button.button, a.button { &.disabled, &:disabled, &:disabled[disabled], &.disabled:hover, &:disabled:hover, &:disabled[disabled]:hover { opacity: 0.5; } } #respond input#submit, input.button, a.button.alt { &:hover { opacity: 0.9; } &.disabled, &:disabled, &:disabled[disabled], &.disabled:hover, &:disabled:hover, &:disabled[disabled]:hover { opacity: 0.5; } } } /** * Products */ .woocommerce { /** * Shop products list */ ul.products li.product .woocommerce-loop-product__title { // Slightly increase font size to make product title more readable. font-size: 1.2rem; } /** * Single Product */ div.product { // Ensure the single product contains its content. // For details see https://github.com/woocommerce/woocommerce/pull/33511. &::after { content: ""; display: block; clear: both; } div.summary > * { // Ensure a more even block gap spacing in product summary. margin-bottom: var(--wp--style--block-gap); } .woocommerce-tabs { ul.tabs li.active { &::before { box-shadow: 2px 2px 0 var(--wp--preset--color--background, $contentbg); } &::after { box-shadow: -2px 2px 0 var(--wp--preset--color--background, $contentbg); } } } form.cart { div.quantity { display: inline-block; float: none; // Remove float set by WC core. vertical-align: middle; // Adjust positioning of quantity selector and button. .qty { margin-right: 0.5rem; } } button[name="add-to-cart"], button.single_add_to_cart_button { display: inline-block; float: none; // Remove float set by WC core. margin-top: 0; margin-bottom: 0; vertical-align: middle; } } .related.products { // Ensure related products doesn't stick to product tabs. margin-top: 5rem; } } .woocommerce-Reviews { #comments { // Add spacing between the review comments and the review form. margin-bottom: var(--wp--style--block-gap); } .commentlist { // Ensure review comments width doesn't exceed review container. box-sizing: border-box; } .comment-reply-title { // Make review form title visually distinct. font-size: var(--wp--preset--font-size--medium); font-weight: 700; } } .price ins, bdi { // Ensure discounted prices aren't underlined. // For details see https://github.com/woocommerce/woocommerce-blocks/pull/5684. text-decoration: none; } span.onsale { // Style "On Sale" badge in theme colors by default. background-color: var(--wp--preset--color--foreground, $highlight); color: var(--wp--preset--color--background, $highlightext); } /** * Product variations */ table.variations { tr { // Limit variation dropdown width and add block gap. display: block; margin-bottom: var(--wp--style--block-gap); th { // Ensure variation label doesn't stick to dropdown. padding-right: 1rem; } td select { // Add padding to product variation dropdowns. height: 3.5rem; padding: 0.9rem 1.1rem; font-size: var(--wp--preset--font-size--small); } } } // Ensure variation label is vertically centered. div.product form.cart table.variations td select { min-width: 70%; // Fix for Safari. } div.product form.cart table.variations td, div.product form.cart table.variations th { vertical-align: middle; } .single_variation_wrap .woocommerce-variation { margin-bottom: var(--wp--style--block-gap); } } /** * Products grid */ a.added_to_cart { // Prevent "View Cart" button from sticking to "Add to Cart" button. // For details see https://github.com/woocommerce/woocommerce-blocks/issues/5285. display: block; margin-top: 1rem; } /** * Form elements */ .woocommerce-page { // Ensure text input fields aren't too small. .input-text { font-size: var(--wp--preset--font-size--small); padding: 0.9rem 1.1rem; } label { margin-bottom: 0.7rem; } // Ensure dropdowns are visually consistent with other form fields. .select2-container { .select2-selection, .select2-search__field { height: 3.5rem; font-size: var(--wp--preset--font-size--small); padding: 0.9rem 1.1rem; } .select2-dropdown { padding: 0.9rem 1.1rem; .select2-search__field { margin-bottom: 1rem; } } .select2-selection .select2-selection__arrow { position: absolute; top: 0; right: 0; width: 3rem; height: 3.5rem; } } } .woocommerce { form { .form-row { margin-bottom: 1rem; } textarea { // Ensure textareas don't look squished. min-height: 100px; } } } /** * Cart / Checkout */ .woocommerce-page { /** * Tables */ table.shop_table { // Adjust table width to new checkout width. width: 70%; border-collapse: collapse; @media only screen and ( max-width: 768px ) { width: 100%; } th, td { // Allow cells more space to breathe. padding: 1rem; } } table.shop_table_responsive { // Responsive tables should still take up the full width. width: 100%; } /** * Cart specific */ .woocommerce-cart-form { .product-remove { // Decrease width of the product remove column. width: 1rem; } .product-thumbnail { // Increase product thumbnails to improve visually fidelity. width: 120px; a img { width: 117px; } } .coupon { display: flex; align-items: center; flex-wrap: wrap; } #coupon_code { // Allow sufficient space for the coupon code. width: auto; margin-right: 0.8rem; height: 50px; font-size: var(--wp--preset--font-size--small); padding: 0 1.1rem; } @media only screen and ( max-width: 768px ) { .product-remove { width: auto; } #coupon_code { width: 50%; margin-right: 0; } } } .cart-collaterals h2 { // Ensure cart subheadline size is reasonable. font-size: var(--wp--preset--font-size--medium); } /** * Checkout specific */ .woocommerce-form-coupon .button { min-height: 50px; } /** * Order confirmation */ .woocommerce-thankyou-order-received, .woocommerce-column__title, .woocommerce-customer-details h2 { font-size: var(--wp--preset--font-size--large); font-weight: 300; } ul.woocommerce-order-overview { // Display order overview items next to each other. display: flex; width: 100%; padding-left: 0; font-size: var(--wp--preset--font-size--small); @media only screen and ( max-width: 768px ) { flex-direction: column; } li { flex-grow: 1; margin-bottom: 1rem; border: none; display: inline; text-transform: uppercase; strong { text-transform: none; display: block; } } } .woocommerce-customer-details address { // Ensure customer details match order overview. box-sizing: border-box; width: 70%; padding: 1rem; border-width: 1px; border-radius: 0; } } /** * My account */ .woocommerce-account { .woocommerce-MyAccount-navigation { ul { // Ensure top left alignment of the navigation. margin: 0 0 2rem; padding: 0; } li { // Remove default list styling. list-style: none; padding: 1rem 0; @media only screen and ( max-width: 768px ) { padding: 0.35rem 0; } &:first-child { padding-top: 0; } &.is-active { a { text-decoration: underline; } } a { text-decoration: none; &:hover { text-decoration: underline; } } } } .woocommerce-MyAccount-content { > p:first-of-type, p.form-row-first, p.form-row-last { // Ensure first paragraph in content is top aligned. margin-block-start: 0; } } table.shop_table.order_details, .woocommerce-customer-details address { // Ensure order/customer details are full width in My Account. width: 100%; } .addresses .title .edit { // Align "Add" and "Edit" buttons when title is too long (/my-account/edit-address/). display: block; margin-bottom: 1rem; } &.woocommerce-edit-address .woocommerce-MyAccount-content form > h3 { // Ensure headline is top aligned (/my-account/edit-address/shipping/). margin-block-start: 0; } .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions { a { display: block; margin-bottom: 1em; text-align: center; } } } /** * My account - Login form */ .woocommerce-page { .woocommerce-form-login { .input-text { // Ensure inputs are well spaced. font-size: var(--wp--preset--font-size--small); padding: 0.9rem 1.1rem; } label { margin-bottom: 0.7rem; } .show-password-input { // Adjust password field icon position. top: 0.8rem; right: 1.2rem; } } } /** * Store notice */ p.demo_store, .woocommerce-store-notice { // Add theme colors to the store notice. background: var(--wp--preset--color--foreground, $primary); bottom: 0; color: var(--wp--preset--color--background, $primarytext); position: fixed; top: auto !important; a { color: var(--wp--preset--color--background, $primarytext); } }