/**
* صفحهی حساب کاربری.
*
* تا اینجا هیچ استایلی نداشت و همان چیزی بود که ووکامرس خام میدهد:
* منو یک فهرستِ گلولهای، پیشخوان یک پاراگراف پر از لینکِ زیرخطدار، و
* جدولِ سفارشها بدون خط و ساختار. این صفحه جایی است که مشتریِ برگشته
* میآید، پس ارزشش را دارد.
*
* @package NB_Theme
*/
/* ======================================================== چیدمان کلی */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 230px minmax( 0, 1fr );
gap: 20px;
align-items: start;
}
/* صفحهی ورود/ثبتنام ستونبندی ندارد. */
.woocommerce-account:not( .logged-in ) .woocommerce {
display: block;
}
/*
* جای هر دو ستون صریح اعلام میشود، و هر چیز دیگری که ووکامرس داخل
* .woocommerce بریزد تمام عرض میگیرد.
*
* چرا: `.woocommerce-notices-wrapper` هم فرزندِ همین عنصر است و بهعنوان
* آیتمِ اول گرید، خانهی اول را میگرفت. نتیجهاش این بود که منو به
* ستون دوم و محتوا به ردیف بعد میافتاد — منو وسط صفحه معلق و محتوا
* ۱۵۶ پیکسل عرض در گوشه. همان تلهی pseudo-element در جدول سبد، اینبار
* با یک عنصر واقعی.
*/
.woocommerce-account.logged-in .woocommerce > * {
grid-column: 1 / -1;
}
/*
* width و float هم اینجا خنثی میشوند.
*
* ووکامرس روی این دو `width: 30%` و `width: 68%` میگذارد (برای چیدمانِ
* شناورِ قدیمیاش). داخل گرید آن درصدها به عرضِ *ترک* حساب میشوند، نه
* صفحه: منو ۳۰٪ از ۲۳۰ = ۶۹ پیکسل و محتوا ۶۸٪ از ۹۰۰ = ۶۱۲. هر دو
* وسط ستون خودشان جمع شده بودند.
*/
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 2;
width: auto;
float: none;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
grid-column: 2;
grid-row: 2;
width: auto;
float: none;
}
/* ============================================================== منو */
.woocommerce-MyAccount-navigation {
background: var( --nb-surface-alt, #1a2033 );
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
padding: 8px;
}
.woocommerce-MyAccount-navigation ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.woocommerce-MyAccount-navigation li {
margin: 0;
list-style: none;
}
.woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
border-radius: var( --nb-radius-sm, 10px );
color: var( --nb-text, #ededed );
font-size: 13.5px;
font-weight: 600;
line-height: 1.7;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
background: var( --nb-surface, #131829 );
color: var( --nb-text, #ededed );
}
.woocommerce-MyAccount-navigation li.is-active a {
background: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
}
/*
* آیکنِ هر آیتم با mask کشیده میشود تا رنگش از خودِ لینک بیاید و در
* حالت فعال هم درست بماند. هر endpoint کلاس خودش را دارد، پس بدون
* دستزدن به قالبِ ووکامرس میشود تفکیکشان کرد.
*/
.woocommerce-MyAccount-navigation li a::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 0.85;
/*
* آیکنِ پیشفرض — لازم است، نه تزئینی.
*
* زمینه currentColor است و شکل را ماسک میبُرد. هر endpointای که
* ماسک نداشته باشد، همان مستطیلِ توپُرِ ۱۸×۱۸ میشود: روی این
* فروشگاه «شیوه پرداخت» و «احراز هویت» که از افزونههای دیگر
* میآیند، دو مربعِ خالی شده بودند.
*/
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2.5'/%3E%3Cpath d='M8.5 8.5h7'/%3E%3Cpath d='M8.5 12.5h7'/%3E%3Cpath d='M8.5 16.5h4'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2.5'/%3E%3Cpath d='M8.5 8.5h7'/%3E%3Cpath d='M8.5 12.5h7'/%3E%3Cpath d='M8.5 16.5h4'/%3E%3C/svg%3E" );
}
/*
* انتخابگرها عمداً `li` دارند.
*
* قاعدهی پایهی بالا (.woocommerce-MyAccount-navigation li a::before) وزنِ
* (0,1,3) دارد و اینها بدون li میشدند (0,1,2) — یعنی ماسکِ پیشفرض روی
* همهی آیکنهای اختصاصی مینشست و همهشان یک شکل میشدند.
*/
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9 16l-4-4 4-4'/%3E%3Cpath d='M5 12h10'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9 16l-4-4 4-4'/%3E%3Cpath d='M5 12h10'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
color: var( --nb-text-muted, #98a2b3 );
}
/* =========================================================== محتوا */
/*
* بدون زمینه و بدون قاب — عمداً.
*
* قبلاً این خودش یک کارت بود و کارتهای داخلش (کاشیها، جدول سفارشها)
* کارتِ دوم روی کارتِ اول میشدند. دو سطحِ تودرتو نه چیزی را از هم جدا
* میکند و نه سلسلهمراتب میسازد؛ فقط دو خط اضافه میکشد و فضا
* میخورد. سطح فقط جایی میآید که یک چیزِ مشخص را از بقیه جدا کند.
*/
.woocommerce-MyAccount-content {
min-width: 0;
}
.woocommerce-MyAccount-content > p {
font-size: 13.5px;
line-height: 2.1;
color: var( --nb-text-muted, #98a2b3 );
}
/* پیشخوانِ ووکامرس یک پاراگرافِ پر از لینکِ زیرخطدار است. زیرخطها
حذف و لینکها با رنگ مشخص میشوند تا متن خوانا بماند. */
.woocommerce-MyAccount-content > p a {
color: var( --nb-link, #a78bfa );
text-decoration: none;
font-weight: 600;
}
.woocommerce-MyAccount-content > p a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ==================================================== جدول سفارشها */
.woocommerce-orders-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.woocommerce-orders-table th.woocommerce-orders-table__header {
padding: 10px 12px;
border: 0;
border-bottom: 1px solid var( --nb-border, #242c42 );
font-size: 12.5px;
font-weight: 600;
color: var( --nb-text-muted, #98a2b3 );
text-align: start;
white-space: nowrap;
}
.woocommerce-orders-table td.woocommerce-orders-table__cell,
.woocommerce-orders-table th.woocommerce-orders-table__cell {
padding: 16px 12px;
border: 0;
border-bottom: 1px solid var( --nb-border, #242c42 );
font-size: 13px;
color: var( --nb-text, #ededed );
vertical-align: middle;
text-align: start;
}
.woocommerce-orders-table tr:last-child td,
.woocommerce-orders-table tr:last-child th {
border-bottom: 0;
}
.woocommerce-orders-table__cell-order-number a {
color: var( --nb-text, #ededed );
font-weight: 700;
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.woocommerce-orders-table__cell-order-number a:hover {
color: var( --nb-link, #a78bfa );
}
.woocommerce-orders-table__cell-order-date {
color: var( --nb-text-muted, #98a2b3 );
white-space: nowrap;
}
.woocommerce-orders-table__cell-order-total {
font-weight: 700;
white-space: nowrap;
}
/* ---- نشانِ وضعیت ----
کلاسِ وضعیت روی خودِ ردیف است (…__row--status-processing و مانند آن)
پس بدون بازنویسی قالبِ ووکامرس هم میشود رنگ داد. */
.woocommerce-orders-table__cell-order-status {
white-space: nowrap;
}
.woocommerce-orders-table__row .woocommerce-orders-table__cell-order-status {
font-size: 12px;
font-weight: 600;
}
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
color: var( --nb-text, #ededed );
}
.woocommerce-orders-table__cell-order-status::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-inline-end: 7px;
vertical-align: 1px;
background: var( --nb-text-muted, #98a2b3 );
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
background: var( --nb-success, #22c55e );
}
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before {
background: #f59e0b;
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before {
background: var( --nb-danger, #e5484d );
}
/* ---- دکمهی «مشاهده» ---- */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button {
display: inline-block;
padding: 9px 18px;
border: 0;
border-radius: var( --nb-radius-sm, 10px );
background: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
font-size: 13px;
font-weight: 600;
line-height: 1.7;
text-decoration: none;
white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover {
background: var( --nb-accent-hover, #8b3af0 );
color: var( --nb-acc-fg, #fff );
}
/* ================================================== فرمها و نشانی */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
font-size: 16px;
font-weight: 700;
color: var( --nb-text, #ededed );
margin: 0 0 14px;
}
/* یک خط جداکننده کافی است؛ کادرِ توپُر اینجا چیزی اضافه نمیکرد. */
.woocommerce-MyAccount-content fieldset {
margin: 24px 0 0;
padding: 20px 0 0;
border: 0;
border-top: 1px solid var( --nb-border, #242c42 );
}
.woocommerce-MyAccount-content .woocommerce-Address {
background: var( --nb-surface, #131829 );
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius-sm, 10px );
padding: 18px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.woocommerce-MyAccount-content .woocommerce-Address address {
font-style: normal;
font-size: 13px;
line-height: 2;
color: var( --nb-text-muted, #98a2b3 );
}
.woocommerce-MyAccount-content .form-row {
margin: 0 0 14px;
}
.woocommerce-MyAccount-content label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 600;
color: var( --nb-text, #ededed );
}
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius-sm, 10px );
background: var( --nb-surface, #131829 );
color: var( --nb-text, #ededed );
font-size: 13.5px;
}
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
outline: none;
border-color: var( --nb-accent, #720eec );
}
.woocommerce-MyAccount-content em,
.woocommerce-MyAccount-content .woocommerce-password-hint {
display: block;
margin-top: 5px;
font-size: 11.5px;
font-style: normal;
color: var( --nb-text-muted, #98a2b3 );
}
/* ============================================================ موبایل */
@media ( max-width: 900px ) {
.woocommerce-account .woocommerce {
grid-template-columns: minmax( 0, 1fr );
}
/*
* جای صریحِ ستونها باید برداشته شود، وگرنه `grid-column: 2` روی
* محتوا یک ستونِ *ضمنی* دوم میسازد و شبکه دوباره دوستونی میشود.
* اندازهگیری: قالبِ ستونها روی موبایل «0px 346px» بود و دکمهی
* منو که `1 / -1` داشت فقط همان ستونِ صفرپیکسلی را میگرفت — ۳۴
* پیکسل عرض بهجای تمامعرض.
*/
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
grid-column: 1;
grid-row: auto;
}
/*
* منو روی موبایل یک نوارِ افقیِ قابل کشیدن میشود. فهرستِ عمودی
* ششآیتمی بالای هر صفحه، نصفِ نمایشگر را میگرفت و کاربر باید
* هر بار از رویش رد میشد.
*/
.woocommerce-MyAccount-navigation ul {
flex-direction: row;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
gap: 6px;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
display: none;
}
.woocommerce-MyAccount-navigation li a {
white-space: nowrap;
padding: 10px 14px;
}
}
@media ( max-width: 768px ) {
.woocommerce-MyAccount-content {
padding: 16px;
}
/* جدولِ سفارشها به کارت تبدیل میشود — همان کاری که با سبد شد. */
.woocommerce-orders-table thead {
display: none;
}
.woocommerce-orders-table,
.woocommerce-orders-table tbody {
display: block;
width: 100%;
}
.woocommerce-orders-table tr.woocommerce-orders-table__row {
display: grid;
grid-template-columns: minmax( 0, 1fr ) auto;
gap: 8px 12px;
padding: 14px;
margin: 0 0 12px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: 12px;
background: var( --nb-surface, #131829 );
}
.woocommerce-orders-table tr.woocommerce-orders-table__row td,
.woocommerce-orders-table tr.woocommerce-orders-table__row th {
display: block;
padding: 0;
border: 0;
width: auto;
}
.woocommerce-orders-table tr.woocommerce-orders-table__row td::before,
.woocommerce-orders-table tr.woocommerce-orders-table__row th::before {
display: none !important;
}
/*
* شمارهی سفارش | است نه | ، و CSS موبایلِ خودِ ووکامرس آن را
* مخفی میکند — کارت بدون شمارهی سفارش هیچ فایدهای ندارد. سه کلاس
* تا آن قاعده شکست بخورد.
*/
.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table tr.woocommerce-orders-table__row th.woocommerce-orders-table__cell-order-number {
display: block;
grid-column: 1;
font-size: 14px;
}
.woocommerce-orders-table__cell-order-status {
grid-column: 2;
justify-self: end;
}
.woocommerce-orders-table__cell-order-date {
grid-column: 1;
font-size: 12px;
}
.woocommerce-orders-table__cell-order-total {
grid-column: 2;
justify-self: end;
}
.woocommerce-orders-table__cell-order-actions {
grid-column: 1 / -1;
margin-top: 4px;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
display: block;
text-align: center;
}
}
/* ==========================================================================
کارت کاربر
==========================================================================
بالای منو، همان جایی که فروشگاههای جاافتاده اطلاعات کاربر را میگذارند:
مشتری تا وارد میشود ببیند چند سفارش دارد و چقدر خرید کرده، بدون
اینکه لازم باشد جایی کلیک کند.
========================================================================== */
.nb-acc__card {
margin: -8px -8px 8px;
grid-column: auto;
padding: 16px;
border-bottom: 1px solid var( --nb-border, #242c42 );
background: var( --nb-surface, #131829 );
border-radius: var( --nb-radius, 14px ) var( --nb-radius, 14px ) 0 0;
}
.nb-acc__id {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 14px;
min-width: 0;
}
.nb-acc__avatar {
flex: 0 0 auto;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
font-size: 17px;
font-weight: 800;
line-height: 1;
}
.nb-acc__who {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.nb-acc__name {
font-size: 13.5px;
font-weight: 700;
color: var( --nb-text, #ededed );
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-acc__phone {
font-size: 12px;
color: var( --nb-text-muted, #98a2b3 );
font-variant-numeric: tabular-nums;
}
/* دو ستون — چهار عدد در دو ردیف. */
.nb-acc__stats {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 1px;
background: var( --nb-border, #242c42 );
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius-sm, 10px );
overflow: hidden;
}
.nb-acc__stat {
padding: 10px 12px;
background: var( --nb-surface-alt, #1a2033 );
min-width: 0;
}
.nb-acc__stat strong {
display: block;
margin-bottom: 3px;
font-size: 11px;
font-weight: 500;
color: var( --nb-text-muted, #98a2b3 );
}
.nb-acc__stat span {
display: block;
font-size: 13px;
font-weight: 700;
color: var( --nb-text, #ededed );
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nb-acc__stat span .woocommerce-Price-amount {
color: inherit;
}
/* روی دسکتاپ منو کشو نیست، پس اینها لازم نیستند. */
.nb-acc__toggle,
.nb-acc__veil,
.nb-acc__close {
display: none;
}
/* ==========================================================================
موبایل — منو به کشو تبدیل میشود
==========================================================================
فهرست ششآیتمیِ عمودی بالای هر صفحه، نصف نمایشگر را میگرفت و کاربر
هر بار باید از رویش رد میشد. همان الگوی سبد کشویی به کار میرود.
========================================================================== */
@media ( max-width: 900px ) {
.nb-acc__toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 14px;
padding: 13px 16px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius-sm, 10px );
background: var( --nb-surface-alt, #1a2033 );
color: var( --nb-text, #ededed );
font-size: 13.5px;
font-weight: 600;
}
.nb-acc__toggle-icon {
width: 18px;
height: 12px;
flex: 0 0 auto;
background:
linear-gradient( currentColor, currentColor ) top/100% 2px no-repeat,
linear-gradient( currentColor, currentColor ) center/100% 2px no-repeat,
linear-gradient( currentColor, currentColor ) bottom/100% 2px no-repeat;
}
.nb-acc__veil {
display: block;
position: fixed;
inset: 0;
z-index: 9998;
background: rgba( 0, 0, 0, 0.55 );
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.nb-acc-open .nb-acc__veil {
opacity: 1;
visibility: visible;
}
/* خودِ منو: کشویی از راست، مثل سبد. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 9999;
width: min( 280px, 86vw );
margin: 0;
border-radius: 0;
border-inline-start: 1px solid var( --nb-border, #242c42 );
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX( 100% );
transition: transform 0.28s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}
.nb-acc-open .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
.nb-acc-open .woocommerce-MyAccount-navigation {
transform: translateX( 0 );
}
.nb-acc-open,
.nb-acc-open body {
overflow: hidden;
}
/* داخل کشو، فهرست دوباره عمودی میشود. */
.woocommerce-MyAccount-navigation ul {
flex-direction: column;
overflow: visible;
}
/* سمتِ مقابلِ آواتار. inline-start روی صفحهی راستچین یعنی راست،
و دکمه دقیقاً روی آواتار میافتاد. */
.nb-acc__close {
display: block;
position: absolute;
inset-block-start: 14px;
inset-inline-end: 14px;
width: 30px;
height: 30px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius-sm, 8px );
background: var( --nb-surface-alt, #1a2033 );
color: var( --nb-text-muted, #98a2b3 );
}
.nb-acc__close::before,
.nb-acc__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 1.6px;
background: currentColor;
}
.nb-acc__close::before {
transform: translate( -50%, -50% ) rotate( 45deg );
}
.nb-acc__close::after {
transform: translate( -50%, -50% ) rotate( -45deg );
}
@media ( prefers-reduced-motion: reduce ) {
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
.nb-acc__veil {
transition: none;
}
}
}
/* ==========================================================================
پیشخوان — کاشیهای وضعیت
==========================================================================
هر کاشی یک لینک است، نه یک عددِ تزئینی: به فهرستِ سفارشهای همان
وضعیت میرود. رنگ فقط روی آیکن و عدد مینشیند، نه روی کلِ کاشی —
پنج مستطیلِ رنگیِ توپُر کنار هم، صفحه را شلوغ میکند و هیچکدام
برجسته نمیشود.
========================================================================== */
.nb-acc__tiles {
display: grid;
grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
gap: 10px;
margin: 0 0 20px;
}
.nb-acc__tile {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
color: var( --nb-text, #ededed );
text-decoration: none;
transition: border-color 0.15s ease, transform 0.12s ease;
}
.nb-acc__tile:hover {
border-color: var( --nb-tile, var( --nb-accent, #720eec ) );
transform: translateY( -2px );
}
.nb-acc__tile.is-active {
border-color: var( --nb-tile, var( --nb-accent, #720eec ) );
}
.nb-acc__tile-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
/* رنگِ کمجانِ همان وضعیت — با color-mix از همان یک متغیر ساخته
میشود، پس هر کاشی فقط یک رنگ تعریف میکند نه دو تا. */
background: color-mix( in srgb, var( --nb-tile, var( --nb-accent ) ) 16%, transparent );
color: var( --nb-tile, var( --nb-accent ) );
}
.nb-acc__tile-icon svg {
width: 18px;
height: 18px;
display: block;
}
.nb-acc__tile-num {
font-size: 20px;
font-weight: 800;
line-height: 1.2;
color: var( --nb-text, #ededed );
font-variant-numeric: tabular-nums;
}
.nb-acc__tile-label {
font-size: 11.5px;
line-height: 1.6;
color: var( --nb-text-muted, #98a2b3 );
}
.nb-acc__tile--completed { --nb-tile: var( --nb-success, #22c55e ); }
.nb-acc__tile--processing { --nb-tile: #3b82f6; }
.nb-acc__tile--pending { --nb-tile: #f59e0b; }
.nb-acc__tile--on-hold { --nb-tile: var( --nb-link, #a78bfa ); }
.nb-acc__tile--cancelled { --nb-tile: var( --nb-danger, #e5484d ); }
/* ==========================================================================
پیشخوان — آخرین سفارشها
========================================================================== */
.nb-acc__block {
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
overflow: hidden;
}
.nb-acc__block-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var( --nb-border, #242c42 );
}
.nb-acc__block-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var( --nb-text, #ededed );
}
.nb-acc__block-more {
font-size: 12.5px;
font-weight: 600;
color: var( --nb-link, #a78bfa );
text-decoration: none;
white-space: nowrap;
}
.nb-acc__block-more:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.nb-acc__orders {
margin: 0;
padding: 0;
list-style: none;
}
/*
* چهار ستون: تصویرها، شماره و تاریخ، وضعیت، مبلغ.
*
* ستونِ کشسان روی «شماره و تاریخ» است نه روی وضعیت — وضعیت یک برچسب
* است و کشیدهشدنش آن را به نوارِ رنگیِ عریض تبدیل میکند. (همین اتفاق
* افتاد وقتی مارکآپ عوض شد و ستونها جابهجا ماندند.)
*/
.nb-acc__order {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-bottom: 1px solid var( --nb-border, #242c42 );
font-size: 12.5px;
}
.nb-acc__order:last-child {
border-bottom: 0;
}
.nb-acc__order-id {
font-weight: 700;
color: var( --nb-text, #ededed );
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.nb-acc__order-id:hover {
color: var( --nb-link, #a78bfa );
}
.nb-acc__order-date {
color: var( --nb-text-muted, #98a2b3 );
white-space: nowrap;
}
.nb-acc__order-status {
font-weight: 600;
color: var( --nb-tile, var( --nb-text-muted ) );
}
.nb-acc__order-total {
font-weight: 700;
white-space: nowrap;
color: var( --nb-text, #ededed );
}
.nb-acc__order--completed { --nb-tile: var( --nb-success, #22c55e ); }
.nb-acc__order--processing { --nb-tile: #3b82f6; }
.nb-acc__order--pending { --nb-tile: #f59e0b; }
.nb-acc__order--on-hold { --nb-tile: var( --nb-link, #a78bfa ); }
.nb-acc__order--cancelled,
.nb-acc__order--failed { --nb-tile: var( --nb-danger, #e5484d ); }
@media ( max-width: 900px ) {
.nb-acc__tiles {
grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
}
}
@media ( max-width: 560px ) {
.nb-acc__tiles {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 8px;
}
.nb-acc__order {
grid-template-columns: 1fr auto;
gap: 6px 12px;
}
.nb-acc__order-date {
grid-column: 1;
order: 3;
}
.nb-acc__order-status {
grid-column: 2;
order: 2;
text-align: end;
}
.nb-acc__order-total {
grid-column: 2;
order: 4;
text-align: end;
}
}
/* سلامِ کوتاه بالای پیشخوان. */
.nb-acc__hello {
margin: 0 0 16px;
font-size: 14px;
color: var( --nb-text-muted, #98a2b3 );
}
.nb-acc__hello strong {
color: var( --nb-text, #ededed );
font-weight: 700;
}
/* ==========================================================================
جزئیات سفارش
==========================================================================
همان زبانِ پاپآپ سفارش، در اندازهی صفحه — تا کاربر بین این دو گم
نشود. مارکآپِ سرصفحه در woocommerce/myaccount/view-order.php است؛
بقیه مالِ خودِ ووکامرس است و فقط استایل میگیرد.
========================================================================== */
.nb-vo__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin: 0 0 18px;
padding: 16px 18px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
}
.nb-vo__no {
font-size: 15px;
color: var( --nb-text-muted, #98a2b3 );
}
.nb-vo__no strong {
font-size: 17px;
font-weight: 800;
color: var( --nb-text, #ededed );
font-variant-numeric: tabular-nums;
}
.nb-vo__status {
padding: 5px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var( --nb-tile, var( --nb-text ) );
background: color-mix( in srgb, var( --nb-tile, var( --nb-accent ) ) 15%, transparent );
}
.nb-vo__status--completed { --nb-tile: var( --nb-success, #22c55e ); }
.nb-vo__status--processing { --nb-tile: #3b82f6; }
.nb-vo__status--pending { --nb-tile: #f59e0b; }
.nb-vo__status--on-hold { --nb-tile: var( --nb-link, #a78bfa ); }
.nb-vo__status--cancelled,
.nb-vo__status--failed,
.nb-vo__status--refunded { --nb-tile: var( --nb-danger, #e5484d ); }
.nb-vo__date {
margin-inline-start: auto;
font-size: 12.5px;
color: var( --nb-text-muted, #98a2b3 );
}
/* ---- پیامهای فروشگاه ---- */
.nb-vo__sub,
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
margin: 0 0 12px;
font-size: 14px;
font-weight: 700;
color: var( --nb-text, #ededed );
}
.nb-vo__notes {
margin: 0 0 18px;
}
.nb-vo__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.nb-vo__note {
padding: 13px 15px;
border: 1px solid var( --nb-border, #242c42 );
border-inline-start: 3px solid var( --nb-accent, #720eec );
border-radius: var( --nb-radius-sm, 10px );
background: var( --nb-surface, #131829 );
}
.nb-vo__note-date {
display: block;
margin-bottom: 5px;
font-size: 11.5px;
color: var( --nb-text-muted, #98a2b3 );
}
.nb-vo__note-body {
font-size: 13px;
line-height: 2;
color: var( --nb-text, #ededed );
}
.nb-vo__note-body p {
margin: 0;
}
/* ---- جدول اقلام ---- */
.woocommerce-order-details,
.woocommerce-customer-details {
margin: 0 0 18px;
}
.woocommerce-table--order-details {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
overflow: hidden;
background: var( --nb-surface-alt, #1a2033 );
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
padding: 13px 16px;
border: 0;
border-bottom: 1px solid var( --nb-border, #242c42 );
font-size: 13px;
text-align: start;
vertical-align: middle;
color: var( --nb-text, #ededed );
}
.woocommerce-table--order-details thead th {
font-size: 12px;
font-weight: 600;
color: var( --nb-text-muted, #98a2b3 );
background: var( --nb-surface, #131829 );
}
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
font-weight: 600;
color: var( --nb-text-muted, #98a2b3 );
}
/* «قیمت نهایی» — ردیف آخرِ tfoot، نه هر ردیفی که آخر باشد. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: 0;
font-size: 14.5px;
font-weight: 800;
color: var( --nb-text, #ededed );
}
.woocommerce-table--order-details .product-name a {
color: var( --nb-text, #ededed );
font-weight: 600;
text-decoration: none;
}
.woocommerce-table--order-details .product-name a:hover {
color: var( --nb-link, #a78bfa );
}
/* مشخصاتی که مشتری وارد کرده — آیدی تلگرام و مانند آن. */
.woocommerce-table--order-details .wc-item-meta,
.woocommerce-table--order-details dl.variation {
margin: 6px 0 0;
padding: 0;
font-size: 12px;
line-height: 1.9;
color: var( --nb-text-muted, #98a2b3 );
list-style: none;
}
.woocommerce-table--order-details .wc-item-meta li,
.woocommerce-table--order-details .wc-item-meta p,
.woocommerce-table--order-details dl.variation dt,
.woocommerce-table--order-details dl.variation dd,
.woocommerce-table--order-details dl.variation p {
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
}
.woocommerce-table--order-details .wc-item-meta li strong {
font-weight: 600;
color: var( --nb-text, #ededed );
}
.woocommerce-table--order-details .wc-item-meta li::after,
.woocommerce-table--order-details dl.variation dd::after {
content: "";
display: block;
}
/* ---- نشانی صورتحساب ---- */
.woocommerce-customer-details .woocommerce-columns,
.woocommerce-customer-details .col2-set {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
gap: 14px;
}
.woocommerce-customer-details address {
margin: 0;
padding: 16px 18px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
font-style: normal;
font-size: 13px;
line-height: 2.2;
color: var( --nb-text, #ededed );
}
.woocommerce-customer-details address p {
margin: 0;
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
display: flex;
align-items: center;
gap: 8px;
color: var( --nb-text-muted, #98a2b3 );
direction: ltr;
justify-content: flex-end;
}
@media ( max-width: 560px ) {
.nb-vo__head {
padding: 14px;
}
.nb-vo__date {
margin-inline-start: 0;
width: 100%;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
padding: 11px 12px;
font-size: 12.5px;
}
}
/* ==========================================================================
بازطراحی پیشخوان — کاشیها، کارت کاربر، سفارشها
========================================================================== */
/*
* کاشیها رنگِ وضعیتشان را میگیرند.
*
* پیش از این همه یکشکل و خنثی بودند و رنگ فقط روی آیکنِ کوچک بود —
* یعنی چشم باید هر پنج تا را میخواند تا بفهمد کدام مهم است. حالا خودِ
* عدد رنگی و درشت است و پسزمینهی رقیقِ همان رنگ را دارد.
*
* کاشیِ صفر کمرنگ میشود، نه پنهان: جایش در شبکه بماند تا چیدمان با هر
* حسابی یکسان باشد، ولی وزنِ بصری نگیرد.
*/
.nb-acc__tile {
position: relative;
gap: 6px;
overflow: hidden;
background: color-mix( in srgb, var( --nb-tile, var( --nb-accent ) ) 7%, var( --nb-surface-alt, #1a2033 ) );
border-color: color-mix( in srgb, var( --nb-tile, var( --nb-accent ) ) 22%, transparent );
}
.nb-acc__tile:hover {
background: color-mix( in srgb, var( --nb-tile, var( --nb-accent ) ) 14%, var( --nb-surface-alt, #1a2033 ) );
}
.nb-acc__tile-num {
font-size: 26px;
font-weight: 800;
line-height: 1.1;
color: var( --nb-tile, var( --nb-text ) );
font-variant-numeric: tabular-nums;
}
.nb-acc__tile-label {
font-size: 12px;
color: var( --nb-text-muted, #98a2b3 );
}
/* بدون سفارش در این وضعیت: هست ولی داد نمیزند. */
.nb-acc__tile.is-zero {
background: var( --nb-surface-alt, #1a2033 );
border-color: var( --nb-border, #242c42 );
}
.nb-acc__tile.is-zero .nb-acc__tile-num {
color: var( --nb-text-muted, #98a2b3 );
opacity: .55;
}
.nb-acc__tile.is-zero .nb-acc__tile-icon {
opacity: .4;
}
/* ---------- کارت کاربر ---------- */
.nb-acc__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var( --nb-border, #242c42 );
}
.nb-acc__meta-item {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.nb-acc__meta-num {
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var( --nb-text, #ededed );
/* مبلغ میتواند بلند باشد؛ نباید کارت را بشکند. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-acc__meta-num .woocommerce-Price-currencySymbol {
font-size: 11px;
font-weight: 400;
opacity: .7;
}
.nb-acc__meta-label {
font-size: 11px;
color: var( --nb-text-muted, #98a2b3 );
}
/* ---------- سفارشها ---------- */
/*
* تصویرِ کالاها، همپوشان.
*
* شمارهی سفارش برای مشتری معنایی ندارد؛ تصویر همان چیزی است که با آن
* سفارش را میشناسد. همپوشانی جا را کم میکند و در یک نگاه میگوید
* سفارش چند قلم بوده.
*/
.nb-acc__order-thumbs {
display: flex;
flex-direction: row-reverse;
align-items: center;
flex: 0 0 auto;
}
.nb-acc__order-thumb {
display: block;
width: 38px;
height: 38px;
overflow: hidden;
border: 2px solid var( --nb-surface, #141a2b );
border-radius: 9px;
background: var( --nb-surface-alt, #1a2033 );
}
/* هر تصویر کمی روی قبلی — راستبهچپ، پس از سمت راست میآید. */
.nb-acc__order-thumb + .nb-acc__order-thumb {
margin-right: -12px;
}
.nb-acc__order-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nb-acc__order-more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-right: -12px;
border: 2px solid var( --nb-surface, #141a2b );
border-radius: 9px;
background: var( --nb-surface-alt, #1a2033 );
color: var( --nb-text-muted, #98a2b3 );
font-size: 11px;
font-weight: 700;
}
.nb-acc__order-main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
/*
* وضعیت به شکل برچسب، نه متنِ رها.
*
* رنگش از همان متغیرِ وضعیت میآید که کاشیها هم استفاده میکنند، پس
* «لغو شده» در هر دو جای صفحه یک رنگ است.
*/
.nb-acc__order-status {
justify-self: start;
padding: 4px 10px;
border-radius: 999px;
background: color-mix( in srgb, var( --nb-tile, var( --nb-text-muted ) ) 16%, transparent );
color: var( --nb-tile, var( --nb-text-muted ) );
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
@media ( max-width: 600px ) {
/* روی گوشی تصویرها اول، بعد بقیه زیرش. */
.nb-acc__order-thumbs {
order: -1;
}
.nb-acc__meta {
grid-template-columns: 1fr;
}
}
/* ---------- میانبرهای پیشخوان ---------- */
.nb-acc__actions {
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: 10px;
margin: 16px 0;
}
.nb-acc__action {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
/* ۴۸ پیکسل، تا روی گوشی هدفِ لمسیِ درستی باشد. */
min-height: 48px;
padding: 12px 14px;
background: var( --nb-surface-alt, #1a2033 );
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
color: var( --nb-text, #ededed );
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.nb-acc__action:hover,
.nb-acc__action:focus-visible {
border-color: var( --nb-accent, #720eec );
transform: translateY( -1px );
}
.nb-acc__action svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
opacity: .85;
}
/* «ادامهی خرید» — تنها دکمهی پررنگ، چون تنها کاری است که به فروش میرسد. */
.nb-acc__action--main {
background: var( --nb-accent, #720eec );
border-color: transparent;
color: var( --nb-acc-fg, #fff );
}
.nb-acc__action--main:hover,
.nb-acc__action--main:focus-visible {
background: var( --nb-accent-hover, #8b3cff );
border-color: transparent;
}
/* ==========================================================================
موبایل
========================================================================== */
@media ( max-width: 700px ) {
/*
* کاشیها روی گوشی افقی میشوند.
*
* حالت عمودی (آیکن بالا، عدد وسط، برچسب پایین) هر کاشی را بلند
* میکرد و پنجتایی سه ردیف میگرفت — یعنی کاربر باید اسکرول میکرد
* تا به سفارشها برسد. افقی که باشند نصفِ ارتفاع میگیرند.
*/
.nb-acc__tiles {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.nb-acc__tile {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
.nb-acc__tile-icon {
order: -1;
flex: 0 0 auto;
width: 30px;
height: 30px;
}
.nb-acc__tile-num {
font-size: 19px;
}
/* برچسب زیر عدد، در همان ستون. */
.nb-acc__tile-num,
.nb-acc__tile-label {
flex: 0 1 auto;
min-width: 0;
}
.nb-acc__tile-label {
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* کاشیِ پنجم تنها میماند، پس تمامِ عرض را میگیرد.
*
* بدون این، یک کاشی نصفه کنارِ فضای خالی مینشیند که بههمریخته
* دیده میشود.
*/
.nb-acc__tile:last-child:nth-child( odd ) {
grid-column: 1 / -1;
}
/* ---------- میانبرها ---------- */
.nb-acc__actions {
grid-template-columns: 1fr 1fr;
}
/* «ادامهی خرید» تمامعرض، چون مهمترین است. */
.nb-acc__action--main {
grid-column: 1 / -1;
}
/* ---------- سفارشها ---------- */
/*
* ردیفِ سفارش روی گوشی دو سطر میشود: بالا تصویر و شماره و تاریخ،
* پایین وضعیت و مبلغ. چهار ستون در ۳۹۰ پیکسل جا نمیشود و همهچیز
* له میشد.
*/
.nb-acc__order {
grid-template-columns: auto 1fr;
gap: 10px 12px;
padding: 12px 14px;
}
.nb-acc__order-status {
grid-column: 1;
justify-self: start;
}
.nb-acc__order-total {
grid-column: 2;
justify-self: end;
font-size: 13px;
}
.nb-acc__order-thumb,
.nb-acc__order-more {
width: 34px;
height: 34px;
}
}
/* ==========================================================================
۰.۳۷ — منوی حساب، دکمهی مشاهده، و فرمِ جزئیات حساب
========================================================================== */
/* ------------------------------------------------ منو: ظاهرِ تازه */
/*
* منو تا اینجا درست کار میکرد ولی تخت بود: یک مستطیل، شش ردیفِ هموزن،
* و آیتمِ فعال یک لکهی بنفشِ توپُر. مالک گفت جذاب نیست. سه چیز عوض
* میشود — عمق (شیب بهجای رنگِ تخت)، جهت (پیکان، تا معلوم باشد ردیف
* جایی میرود)، و مرزبندی (خروج از بقیه جدا میشود).
*/
.woocommerce-MyAccount-navigation {
padding: 10px;
background: linear-gradient(
180deg,
var( --nb-surface-alt, #1a2033 ),
var( --nb-surface, #131829 )
);
}
.woocommerce-MyAccount-navigation li a {
position: relative;
padding: 11px 12px;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/*
* پیکان، سمتِ پایانِ ردیف.
*
* شکلش عمداً به سمت چپ است: صفحه راستچین است و پایانِ ردیف سمتِ چپ.
* جابهجاییِ hover هم translateX منفی است چون transform فیزیکی است و
* از جهتِ نوشتار پیروی نمیکند.
*/
.woocommerce-MyAccount-navigation li a::after {
content: "";
flex: 0 0 auto;
width: 15px;
height: 15px;
margin-inline-start: auto;
background: currentColor;
opacity: 0.28;
transition: opacity 0.18s ease, transform 0.18s ease;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8.5 12l6 6.5'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8.5 12l6 6.5'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li a:hover::after {
opacity: 0.6;
transform: translateX( -3px );
}
.woocommerce-MyAccount-navigation li.is-active a::after {
opacity: 0.9;
}
/* آیکن در حالت عادی کمرنگ است و روی hover جان میگیرد. */
.woocommerce-MyAccount-navigation li a:hover::before {
opacity: 1;
}
.woocommerce-MyAccount-navigation li.is-active a {
box-shadow: 0 6px 18px -7px var( --nb-accent, #720eec );
}
@supports ( background: color-mix( in srgb, red 50%, blue ) ) {
.woocommerce-MyAccount-navigation li.is-active a {
background: linear-gradient(
135deg,
var( --nb-accent, #720eec ),
color-mix( in srgb, var( --nb-accent, #720eec ) 70%, #000 )
);
}
}
/*
* خروج با بقیه فرق دارد و باید دیده شود که فرق دارد.
*
* خطِ جداکننده در حالتِ نوارِ افقی (۷۶۹ تا ۹۹۱) خنثی میشود، وگرنه یک
* خطِ عمودیِ بیربط وسطِ نوار میافتد.
*/
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var( --nb-border, #242c42 );
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: rgba( 239, 68, 68, 0.12 );
color: #fca5a5;
}
.woocommerce-MyAccount-navigation-link--customer-logout a::after {
display: none;
}
/*
* منو روی دسکتاپ همارتفاعِ محتوا میشود.
*
* پیشتر sticky بود با align-self: start، یعنی فقط به اندازهی شش
* آیتمش قد میکشید و زیرش تا ته صفحه خالی میماند — دو ستون با دو
* قدِ متفاوت. آیتمِ گرید بهطور پیشفرض کشیده میشود، پس فقط باید آن
* دو خط برداشته شوند؛ ارتفاعِ ردیف را ستونِ بلندتر (محتوا) تعیین
* میکند و منو خودش را به آن میرساند.
*/
@media ( min-width: 901px ) {
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
align-self: stretch;
}
}
/* نوارِ افقی: پیکان و خطِ جداکننده آنجا معنا ندارند. */
@media ( min-width: 769px ) and ( max-width: 991px ) {
.woocommerce-MyAccount-navigation li a::after {
display: none;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
}
/* دکمهی بازکردنِ کشو هم همخانوادهی بقیه شود. */
@media ( max-width: 900px ) {
.nb-acc__toggle {
justify-content: flex-start;
border-radius: var( --nb-radius, 14px );
background: linear-gradient(
180deg,
var( --nb-surface-alt, #1a2033 ),
var( --nb-surface, #131829 )
);
}
.nb-acc__toggle::after {
content: "";
width: 15px;
height: 15px;
margin-inline-start: auto;
background: currentColor;
opacity: 0.35;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8.5 12l6 6.5'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8.5 12l6 6.5'/%3E%3C/svg%3E" );
}
}
/* --------------------------------------- دکمهی مشاهدهی سفارش */
.nb-acc__order-view {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 13px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: 999px;
background: var( --nb-surface-alt, #1a2033 );
color: var( --nb-text, #ededed );
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.nb-acc__order-view:hover,
.nb-acc__order-view:focus-visible {
background: var( --nb-accent, #720eec );
border-color: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
}
.nb-acc__order-view-arrow {
width: 13px;
height: 13px;
background: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8.5 12l6 6.5'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8.5 12l6 6.5'/%3E%3C/svg%3E" );
}
/*
* روی گوشی دکمه تمامعرضِ سطرِ سوم میشود.
*
* چپاندنش کنارِ وضعیت و مبلغ یعنی سه چیز در ۳۹۰ پیکسل، و هدفِ لمسیِ
* دکمه به زیرِ ۴۴ پیکسل میرسید — همان چیزی که قرار بود واضح باشد،
* سختترین چیزِ ردیف میشد.
*/
@media ( max-width: 768px ) {
.nb-acc__order-view {
grid-column: 1 / -1;
justify-content: center;
padding: 10px;
font-size: 12.5px;
}
}
/* ------------------------------------------- فرمِ جزئیات حساب */
/*
* تا نسخهی ۰.۳۶ این صفحه عملاً استایل نداشت: کادرها سفید با متنِ سیاه
* روی صفحهی تیره. ریشهاش در tokens بود (متغیرهای --wc-form-*) و آنجا
* درست شد؛ این بخش فقط چیدمان و سلسلهمراتب را میسازد.
*/
.woocommerce-EditAccountForm {
max-width: 680px;
}
.woocommerce-EditAccountForm .required {
color: #f87171;
text-decoration: none;
border: 0;
}
/*
* بخشِ رمز عبور یک کارتِ جدا میشود.
*
* سه کادرِ رمز پشتِ سرِ چهار کادرِ مشخصات، یک ستونِ هفتتایی بود و مرزی
* بین مشخصاتِ کاربر و تغییرِ رمز دیده نمیشد.
*/
.woocommerce-EditAccountForm fieldset {
margin: 6px 0 18px;
padding: 16px 18px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
}
.woocommerce-EditAccountForm legend {
padding: 0 8px;
font-size: 13.5px;
font-weight: 700;
color: var( --nb-text, #ededed );
}
.woocommerce-EditAccountForm fieldset .form-row:last-child {
margin-bottom: 0;
}
@media ( min-width: 700px ) {
/*
* نام و نام خانوادگی کنار هم. ووکامرس برایشان float و درصد میگذارد
* که داخل گرید بههم میریزد، پس هر دو خنثی میشوند.
*/
.woocommerce-EditAccountForm {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.woocommerce-EditAccountForm > * {
grid-column: 1 / -1;
}
.woocommerce-EditAccountForm > .form-row-first,
.woocommerce-EditAccountForm > .form-row-last {
width: auto;
float: none;
}
.woocommerce-EditAccountForm > .form-row-first {
grid-column: 1;
}
.woocommerce-EditAccountForm > .form-row-last {
grid-column: 2;
}
}
/*
* ردیفِ سفارش روی گوشی: سه ستون، دو سطر، جای هر تکه صریح.
*
* دو چیز اینجا درست شد. اول جایگذاریِ خودکار: دکمهی مشاهده که هر دو
* ستون را میگرفت جلوتر از وضعیت و مبلغ میافتاد — سطرِ دوم دکمه بود و
* سطرِ سوم مبلغ. دوم اندازهاش: دکمهی تمامعرض روی ۳۸۱ پیکسل یک نوارِ
* ۳۲۸ پیکسلی میشد که از خودِ سفارش پرنورتر بود. حالا ستونِ سومِ همان
* سطرِ وضعیت است — کوچک، ولی هنوز دکمه.
*/
@media ( max-width: 768px ) {
.nb-acc__order {
grid-template-columns: auto 1fr auto;
}
.nb-acc__order-thumbs {
grid-row: 1;
grid-column: 1;
}
.nb-acc__order-main {
grid-row: 1;
grid-column: 2 / -1;
}
.nb-acc__order-status {
grid-row: 2;
grid-column: 1;
justify-self: start;
}
.nb-acc__order-total {
grid-row: 2;
grid-column: 2;
justify-self: start;
}
.nb-acc__order-view {
grid-row: 2;
grid-column: 3;
justify-self: end;
padding: 6px 12px;
font-size: 11.5px;
}
/*
* تصویرها روی گوشی از هم جدا میشوند.
*
* همپوشانی روی دسکتاپ خوب کار میکند چون تصویرها بزرگترند و کنارشان
* جا هست؛ روی ۳۸۱ پیکسل با تصویرِ ۳۴ پیکسلی، ۱۲ پیکسل همپوشانی یعنی
* یکسومِ هر تصویر زیرِ بعدی میرفت و هیچکدام شناخته نمیشد.
*/
.nb-acc__order-thumb + .nb-acc__order-thumb,
.nb-acc__order-more {
margin-right: 6px;
}
}
/* ==========================================================================
تبِ سفارشها — نسخهی دسکتاپ
==========================================================================
جدول تا اینجا فقط چند خطِ افقی بود: نه قابی داشت، نه سرستونی که از
بدنه جدا باشد، نه تصویری از کالا. همان اطلاعاتی که در پیشخوان کارت
بود، اینجا متنِ خشک شده بود. سه چیز اضافه میشود — قاب، نشانِ رنگیِ
وضعیت، و تصویرِ کالاها — تا هر دو صفحه یک زبان داشته باشند.
========================================================================== */
.woocommerce-orders-table {
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
}
/*
* گوشهها روی سلولها گرد میشوند، نه روی خودِ جدول.
*
* overflow: hidden روی در همهی مرورگرها سلولها را نمیبُرد، پس
* زمینهی سرستون از گوشهی گردِ قاب بیرون میزد. خاصیتهای منطقی
* استفاده شده تا روی صفحهی راستچین هم سمتِ درست گرد شود.
*/
.woocommerce-orders-table thead th.woocommerce-orders-table__header {
background: var( --nb-surface, #131829 );
padding: 13px 16px;
}
.woocommerce-orders-table thead th.woocommerce-orders-table__header:first-child {
border-start-start-radius: 13px;
}
.woocommerce-orders-table thead th.woocommerce-orders-table__header:last-child {
border-start-end-radius: 13px;
}
.woocommerce-orders-table td.woocommerce-orders-table__cell,
.woocommerce-orders-table th.woocommerce-orders-table__cell {
padding: 14px 16px;
}
.woocommerce-orders-table tbody tr.woocommerce-orders-table__row {
transition: background 0.15s ease;
}
.woocommerce-orders-table tbody tr.woocommerce-orders-table__row:hover td,
.woocommerce-orders-table tbody tr.woocommerce-orders-table__row:hover th {
background: rgba( 255, 255, 255, 0.025 );
}
/* ---- شمارهی سفارش، کنارِ تصویرِ کالاها ---- */
.nb-ot__id {
display: flex;
align-items: center;
gap: 12px;
}
/* ---- مبلغ و تعداد ---- */
.nb-ot__total {
display: block;
font-weight: 700;
white-space: nowrap;
}
.nb-ot__count {
display: block;
margin-top: 3px;
font-size: 11.5px;
color: var( --nb-text-muted, #98a2b3 );
}
/* ---- نشانِ وضعیت ---- */
/*
* نقطهی قبلی روی خودِ | بود. حالا نشان یک span است و نقطهاش را
* خودش دارد، وگرنه هر ردیف دو نقطه میگرفت.
*/
.woocommerce-orders-table__cell-order-status::before {
display: none;
}
.nb-ot__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
}
.nb-ot__pill::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.nb-ot__pill--completed {
color: #4ade80;
background: rgba( 34, 197, 94, 0.12 );
border-color: rgba( 34, 197, 94, 0.25 );
}
.nb-ot__pill--processing,
.nb-ot__pill--on-hold,
.nb-ot__pill--pending {
color: #fbbf24;
background: rgba( 245, 158, 11, 0.12 );
border-color: rgba( 245, 158, 11, 0.25 );
}
.nb-ot__pill--cancelled,
.nb-ot__pill--failed {
color: #fca5a5;
background: rgba( 239, 68, 68, 0.12 );
border-color: rgba( 239, 68, 68, 0.25 );
}
.nb-ot__pill--refunded {
color: var( --nb-text-muted, #98a2b3 );
background: rgba( 255, 255, 255, 0.06 );
border-color: var( --nb-border, #242c42 );
}
/*
* روی گوشی جدول کارت میشود و قابِ بیرونی دیگر لازم نیست — هر ردیف
* خودش قاب دارد و دو قاب تودرتو فقط فضا میخورد.
*/
@media ( max-width: 768px ) {
.woocommerce-orders-table {
border: 0;
border-radius: 0;
background: none;
}
.nb-ot__id {
gap: 10px;
}
.nb-ot__total {
font-size: 13px;
}
}
/*
* وضعیت، مبلغ و دکمه در یک بسته.
*
* روی دسکتاپ این بسته باید *نباشد*: display: contents یعنی خودِ span
* جعبه نمیسازد و سه فرزندش مستقیم در گریدِ پنجستونیِ ردیف مینشینند،
* همانطور که قبلاً بودند.
*
* روی گوشی اما لازم است. سطرِ دوم پیش از این سه سلولِ همان گرید بود و
* عرضِ ستونِ اولش را تصویرها تعیین میکردند: سفارشِ چهارقلمی ستون را
* ۱۵۴ پیکسل میکرد و دکمه از لبهی چپِ صفحه بیرون میزد — روی ۳۸۱
* پیکسل دیده شد، «مشاهده» نصفه بود. حالا سطرِ دوم یک سلولِ تمامعرض
* است و چیدمانِ داخلش هیچ ربطی به عرضِ تصویرها ندارد.
*/
.nb-acc__order-meta {
display: contents;
}
@media ( max-width: 768px ) {
.nb-acc__order {
grid-template-columns: auto minmax( 0, 1fr );
}
.nb-acc__order-meta {
display: flex;
align-items: center;
gap: 10px;
grid-row: 2;
grid-column: 1 / -1;
min-width: 0;
}
/* مبلغ فضای میانی را میگیرد تا دکمه به لبه بچسبد. */
.nb-acc__order-total {
flex: 1 1 auto;
min-width: 0;
}
/* جایگذاریِ تکتکِ سطرِ دوم دیگر لازم نیست — بسته خودش جا دارد. */
.nb-acc__order-status,
.nb-acc__order-total,
.nb-acc__order-view {
grid-row: auto;
grid-column: auto;
justify-self: auto;
}
.nb-acc__order-view {
flex: 0 0 auto;
}
}
/*
* روی گوشی: وضعیت میرود بالا-چپ، کنارِ شمارهی سفارش.
*
* پیش از این وضعیت در سطرِ دوم کنارِ مبلغ و دکمه بود و آن سطر را شلوغ
* میکرد. حالا سطرِ اول سه بخش دارد — تصویرها (راست)، شماره و تاریخ
* (میان)، وضعیت (چپ) — و سطرِ دوم فقط مبلغ و دکمه است.
*
* align-self: start لازم است وگرنه برچسب وسطِ ارتفاعِ دو خطیِ شماره و
* تاریخ میایستد، نه بالای آن.
*/
@media ( max-width: 768px ) {
.nb-acc__order {
grid-template-columns: auto minmax( 0, 1fr ) auto;
}
.nb-acc__order-status {
grid-row: 1;
grid-column: 3;
justify-self: end;
align-self: start;
}
.nb-acc__order-meta {
grid-row: 2;
grid-column: 1 / -1;
}
}
/* ---------------------------------------- ردیفِ سفارش: مینیمال */
/*
* واحدِ پول نباید بشکند.
*
* مبلغ روی گوشی flex: 1 گرفته بود با min-width: 0، و «تومان» که یک
* span جداست در فضای باقیمانده دو خط میشد — روی ۳۸۱ پیکسل دیده شد:
* «تو» روی «مان». عرضِ انعطافپذیر میماند، ولی خودِ متن نمیشکند.
*/
.nb-acc__order-total,
.nb-acc__order-total .woocommerce-Price-amount,
.nb-acc__order-total .woocommerce-Price-currencySymbol {
white-space: nowrap;
}
/*
* دکمهی مشاهده بدون قاب.
*
* قاب + زمینه + متنِ پررنگ، سه نشانه برای یک دکمه بود و در ردیفی که
* خودش قاب دارد زیادی بود. زمینهی ملایم بهتنهایی میگوید این دکمه
* است؛ رنگِ شاخص را برای وضعیتِ hover نگه میداریم.
*/
.nb-acc__order-view {
border-color: transparent;
background: rgba( 255, 255, 255, 0.05 );
color: var( --nb-text-muted, #98a2b3 );
font-weight: 600;
}
.nb-acc__order-view:hover,
.nb-acc__order-view:focus-visible {
background: var( --nb-accent, #720eec );
border-color: transparent;
color: var( --nb-acc-fg, #fff );
}
/* برچسبِ وضعیت کمی سبکتر. */
.nb-acc__order-status {
padding: 3px 9px;
font-size: 10.5px;
}
@media ( max-width: 768px ) {
/* کمی فضای نفسکشیدن بین دو سطر. */
.nb-acc__order {
gap: 12px 12px;
padding: 14px;
}
}
/* -------------------------------- کارتِ سفارش روی گوشی: همزبان با پیشخوان */
/*
* دکمهی «مشاهده» در تبِ سفارشها تمامعرض و بنفشِ توپُر بود، در حالی که
* همان دکمه در پیشخوان یک قرصِ کوچکِ خاکستری است. دو صفحهی کنارِ هم با
* دو زبانِ متفاوت. اینجا به همان قرص تبدیل میشود؛ رنگِ شاخص برای hover
* میماند.
*/
@media ( max-width: 768px ) {
.woocommerce-orders-table__cell-order-actions {
justify-self: end;
margin-top: 2px;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
display: inline-flex;
align-items: center;
padding: 7px 15px;
border-radius: 999px;
background: rgba( 255, 255, 255, 0.05 );
color: var( --nb-text-muted, #98a2b3 );
font-size: 12px;
font-weight: 600;
text-align: start;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:focus-visible {
background: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
}
/* تعدادِ کالا کنارِ مبلغ مینشیند، نه یک خطِ جدا زیرِ آن. */
.nb-ot__total {
display: inline;
}
.nb-ot__count {
display: inline;
margin: 0;
margin-inline-start: 6px;
}
}
/* ==========================================================================
۰.۳۸ — خروج ته منو، کارتِ سفارش روی گوشی، و کیف پول
========================================================================== */
/* --------------------------------------------- «خروج» میرود ته منو */
/*
* حالا که منو همارتفاعِ محتواست، زیرِ «خروج» یک فضای خالیِ بلند میماند و
* دکمه وسطِ ستون آویزان است. `margin-top: auto` داخل یک ستونِ flex یعنی
* «تمامِ فضای باقیمانده را بگیر و خودت را هل بده پایین».
*
* برای اینکه آن فضا وجود داشته باشد، خودِ nav هم باید ستونِ flex باشد و
* ul کشیده شود؛ وگرنه ul فقط به اندازهی آیتمهایش قد میکشد و auto چیزی
* برای گرفتن ندارد.
*/
.woocommerce-MyAccount-navigation {
display: flex;
flex-direction: column;
}
.woocommerce-MyAccount-navigation ul {
flex: 1 1 auto;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: auto;
}
/*
* تنها جایی که نباید ته بچسبد، نوارِ افقیِ ۷۶۹ تا ۹۹۱ است: آنجا ul یک
* ردیف است و margin-top: auto آیتم را به *کفِ نوار* هل میدهد، یعنی
* «خروج» چند پیکسل پایینتر از بقیه میایستد.
*/
@media ( min-width: 769px ) and ( max-width: 991px ) {
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 0;
}
}
/* دکمهی «مشاهده»ی جدول هم مثل پیشخوان، قرصِ ملایم — نه بنفشِ توپُر. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
padding: 7px 15px;
border-radius: 999px;
background: rgba( 255, 255, 255, 0.05 );
color: var( --nb-text-muted, #98a2b3 );
font-size: 12px;
font-weight: 600;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:focus-visible {
background: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
}
/* ------------------------------- کارتِ سفارش روی گوشی، مثلِ پیشخوان */
/*
* تا اینجا کارتِ تبِ سفارشها پنج چیز را زیرِ هم میچید — شماره، تاریخ،
* وضعیت، مبلغ، دکمه — و پنج خط بلند میشد، در حالی که همان سفارش در
* پیشخوان دو سطر بود. حالا هر دو یک چیدمان دارند:
*
* سطر ۱: [تصویر + شماره] [وضعیت]
* سطر ۲: [تاریخ] [مبلغ] [دکمه]
*
* جای هر سلول صریح داده میشود چون جایگذاریِ خودکار با سلولهایی که
* ستونِ مشخص دارند قابل پیشبینی نیست — همان چیزی که یکبار دکمه را وسطِ
* ردیفِ پیشخوان انداخت.
*/
@media ( max-width: 768px ) {
.woocommerce-orders-table tr.woocommerce-orders-table__row {
grid-template-columns: auto minmax( 0, 1fr ) auto;
gap: 10px 10px;
align-items: center;
}
.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table tr.woocommerce-orders-table__row th.woocommerce-orders-table__cell-order-number {
grid-row: 1;
grid-column: 1 / 3;
}
.woocommerce-orders-table__cell-order-status {
grid-row: 1;
grid-column: 3;
justify-self: end;
align-self: start;
}
.woocommerce-orders-table__cell-order-date {
grid-row: 2;
grid-column: 1;
white-space: nowrap;
}
.woocommerce-orders-table__cell-order-total {
grid-row: 2;
grid-column: 2;
justify-self: start;
}
.woocommerce-orders-table__cell-order-actions {
grid-row: 2;
grid-column: 3;
justify-self: end;
margin-top: 0;
}
}
/* ==========================================================================
کیف پول (TeraWallet)
==========================================================================
افزونه استایلِ خودش را برای قالبِ روشن نوشته: کارتِ سفید، متنِ #333،
نوارِ خاکستری. روی صفحهی تیرهی این فروشگاه سه لکهی سفیدِ درشت
میشد. کلاسهایش تمیز و نامدار است، پس بدون دستزدن به افزونه
میشود همه را به توکنهای قالب وصل کرد.
========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-header h2 {
margin: 0 0 4px;
color: var( --nb-text, #ededed );
font-size: 20px;
font-weight: 800;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-header p {
margin: 0 0 18px;
color: var( --nb-text-muted, #98a2b3 );
font-size: 13px;
}
/* ---- کارتِ موجودی ---- */
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-balance-card {
border: 1px solid var( --nb-border, #242c42 );
border-bottom: 0;
background: var( --nb-accent, #720eec );
}
@supports ( background: color-mix( in srgb, red 50%, blue ) ) {
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-balance-card {
background: linear-gradient(
135deg,
var( --nb-accent, #720eec ),
color-mix( in srgb, var( --nb-accent, #720eec ) 62%, #000 )
);
}
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-balance-card h3 {
margin: 0 0 6px;
color: rgba( 255, 255, 255, 0.72 );
font-size: 13px;
font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-price {
color: #fff;
font-weight: 800;
}
/*
* نشانِ «تومان» یک SVG است که با اندازهی قلم بزرگ میشود — روی قلمِ
* ۵۶ پیکسلی ۶۹×۶۴ میشد و از خودِ عدد بزرگتر به چشم میآمد. کوچکش
* میکنیم تا عدد اول خوانده شود.
*/
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-price .woocommerce-Price-currencySymbol {
font-size: 0.42em;
opacity: 0.85;
vertical-align: 0.25em;
}
/* ---- نوارِ دکمهها ---- */
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-nav-tabs {
border: 1px solid var( --nb-border, #242c42 );
border-top: 0;
background: var( --nb-surface-alt, #1a2033 );
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-nav-tab {
/* زمینهی خاکستریِ افزونه روی خودِ لینک است، نه روی نوار. */
background: transparent;
color: var( --nb-text-muted, #98a2b3 );
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-nav-tab:hover,
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-nav-tab:focus-visible {
background: rgba( 255, 255, 255, 0.04 );
color: var( --nb-text, #ededed );
}
/* ---- سه کاشیِ آمار ---- */
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card {
border: 1px solid var( --nb-border, #242c42 );
background: var( --nb-surface-alt, #1a2033 );
color: var( --nb-text, #ededed );
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card__value {
color: var( --nb-text, #ededed );
font-weight: 800;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card__value .woocommerce-Price-currencySymbol {
font-size: 0.62em;
opacity: 0.8;
vertical-align: 0.15em;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card__label {
color: var( --nb-text-muted, #98a2b3 );
font-size: 12px;
}
/*
* آیکنها رنگِ معنایی میگیرند — همان سه رنگی که کاشیهای پیشخوان دارند،
* تا «شارژ» و «خرج» و «موجودی» در یک نگاه از هم جدا شوند.
*/
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card--success .woo-wallet-stat-card__icon {
background: rgba( 34, 197, 94, 0.12 );
color: #4ade80;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card--danger .woo-wallet-stat-card__icon {
background: rgba( 239, 68, 68, 0.12 );
color: #fca5a5;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stat-card--neutral .woo-wallet-stat-card__icon {
background: var( --nb-accent-20, rgba( 114, 14, 236, 0.18 ) );
color: var( --nb-link, #a78bfa );
}
/* ---- فهرستِ تراکنشها ---- */
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-transactions-list {
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
}
.woocommerce-account .woocommerce-MyAccount-content .ww-txn-head {
border-bottom: 1px solid var( --nb-border, #242c42 );
}
.woocommerce-account .woocommerce-MyAccount-content .ww-txn-title {
color: var( --nb-text, #ededed );
font-size: 15px;
font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-content .ww-txn-empty {
color: var( --nb-text-muted, #98a2b3 );
font-size: 13px;
}
/*
* جدولِ تراکنشها وقتی خالی نیست با استایلِ خامِ افزونه میآید. همان
* قواعدِ جدولِ سفارشها رویش گذاشته میشود تا دو جدولِ حساب یک شکل
* باشند.
*/
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-transactions-list table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-transactions-list th,
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-transactions-list td {
padding: 12px 16px;
border: 0;
border-bottom: 1px solid var( --nb-border, #242c42 );
color: var( --nb-text, #ededed );
font-size: 13px;
text-align: start;
background: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-transactions-list th {
color: var( --nb-text-muted, #98a2b3 );
font-size: 12.5px;
font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-transactions-list tr:last-child td {
border-bottom: 0;
}
/*
* آیکنِ «کیف پول من» در منو.
*
* بدون این، endpointای که افزونه اضافه کرده ماسکِ پیشفرض (برگه) را
* میگیرد و کنارِ «شیوه پرداخت» و «احراز هویت» سه آیکنِ یکسان میشود.
* انتخابگر `li` دارد تا از قاعدهی پایه سنگینتر بماند.
*/
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--woo-wallet a::before {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h11.5a1.5 1.5 0 0 1 1.5 1.5V9'/%3E%3Cpath d='M3 8v10a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-2.5'/%3E%3Cpath d='M20.5 11.5v4h-3.75a2 2 0 0 1 0-4h3.75Z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h11.5a1.5 1.5 0 0 1 1.5 1.5V9'/%3E%3Cpath d='M3 8v10a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-2.5'/%3E%3Cpath d='M20.5 11.5v4h-3.75a2 2 0 0 1 0-4h3.75Z'/%3E%3C/svg%3E" );
}
/* ==========================================================================
۰.۳۹ — تبِ سفارشها همان لیستِ پیشخوان میشود
==========================================================================
تا اینجا دو صفحه دو زبان داشتند: پیشخوان یک فهرستِ کارتی بود و تبِ
سفارشها یک جدولِ پنجستونی با سرستون. هرچقدر جدول را زیباتر میکردم
باز «جدول» بود.
حالا مارکآپِ هر دو یکی است — همان کلاسهای nb-acc__order-* را PHP در
سلولها چاپ میکند — و اینجا فقط جدول از حالتِ جدول درمیآید تا آن
کلاسها بتوانند در گرید بنشینند.
========================================================================== */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-orders-table tbody {
display: block;
width: 100%;
}
/* سرستونها حذف — پیشخوان هم ندارد. */
.woocommerce-account .woocommerce-orders-table thead {
display: none;
}
.woocommerce-account .woocommerce-orders-table {
margin: 0;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
overflow: hidden;
}
/* ردیف = همان .nb-acc__order */
.woocommerce-account .woocommerce-orders-table tr.woocommerce-orders-table__row {
display: grid;
grid-template-columns: auto minmax( 0, 1fr ) auto auto auto;
align-items: center;
gap: 14px;
margin: 0;
padding: 13px 16px;
border: 0;
border-bottom: 1px solid var( --nb-border, #242c42 );
border-radius: 0;
background: none;
font-size: 12.5px;
}
.woocommerce-account .woocommerce-orders-table tr.woocommerce-orders-table__row:last-child {
border-bottom: 0;
}
/*
* سلولِ شماره جعبه نمیسازد.
*
* display: contents یعنی خودِ | ناپدید میشود و دو فرزندش — تصویرها و
* بلوکِ شماره/تاریخ — مستقیم فرزندِ گرید میشوند. بدون این، هر دو داخل
* یک سلول گیر میافتادند و ستونِ اولِ گرید نمیتوانست فقط تصویرها را
* بگیرد.
*/
.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table tr.woocommerce-orders-table__row th.woocommerce-orders-table__cell-order-number {
display: contents;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell {
display: block;
width: auto;
padding: 0;
border: 0;
background: none;
font-size: inherit;
text-align: start;
}
/*
* رنگِ برچسبِ وضعیت.
*
* .nb-acc__order-status رنگش را از --nb-tile میخواند و در پیشخوان،
* ردیف (.nb-acc__order--cancelled) آن را میدهد. اینجا کلاسِ خودِ
* ووکامرس همان نقش را بازی میکند، با همان نگاشتِ رنگ.
*/
.woocommerce-orders-table__row--status-completed { --nb-tile: var( --nb-success, #22c55e ); }
.woocommerce-orders-table__row--status-processing { --nb-tile: #3b82f6; }
.woocommerce-orders-table__row--status-pending { --nb-tile: #f59e0b; }
.woocommerce-orders-table__row--status-on-hold { --nb-tile: var( --nb-link, #a78bfa ); }
.woocommerce-orders-table__row--status-refunded { --nb-tile: var( --nb-text-muted, #98a2b3 ); }
.woocommerce-orders-table__row--status-cancelled,
.woocommerce-orders-table__row--status-failed { --nb-tile: var( --nb-danger, #e5484d ); }
/* نقطهی قدیمیِ روی سلولِ وضعیت دیگر لازم نیست — برچسب خودش گویاست. */
.woocommerce-orders-table__cell-order-status::before {
display: none;
}
/* دکمه، همان قرصِ ملایمِ پیشخوان. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
display: inline-flex;
align-items: center;
padding: 7px 15px;
border: 0;
border-radius: 999px;
background: rgba( 255, 255, 255, 0.05 );
color: var( --nb-text-muted, #98a2b3 );
font-size: 12px;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:focus-visible {
background: var( --nb-accent, #720eec );
color: var( --nb-acc-fg, #fff );
}
/* ---- گوشی: همان دو سطرِ پیشخوان ---- */
@media ( max-width: 768px ) {
.woocommerce-account .woocommerce-orders-table tr.woocommerce-orders-table__row {
grid-template-columns: auto minmax( 0, 1fr ) auto;
gap: 12px;
padding: 14px;
}
.woocommerce-account .woocommerce-orders-table .nb-acc__order-thumbs {
grid-row: 1;
grid-column: 1;
}
.woocommerce-account .woocommerce-orders-table .nb-acc__order-main {
grid-row: 1;
grid-column: 2;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
grid-row: 1;
grid-column: 3;
justify-self: end;
align-self: start;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
grid-row: 2;
grid-column: 1 / 3;
justify-self: start;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
grid-row: 2;
grid-column: 3;
justify-self: end;
margin-top: 0;
}
}
/* ------------------------------------------- فاصلهی زیرِ پاراگراف */
/*
* آخرین پاراگرافِ هر جعبه نباید margin پایین داشته باشد.
*
* قاعدهی عمومیِ p یک فاصلهی یکخطی میگذارد که بینِ پاراگرافها لازم
* است، ولی وقتی پاراگراف آخرین چیزِ یک کادر است آن فاصله به padding
* کادر اضافه میشود و متن بالانشین به نظر میرسد — در جعبهی «تایید
* آدرس ایمیل» کاملاً پیداست.
*/
.woocommerce-account .woocommerce-MyAccount-content p:last-child,
.woocommerce-message p:last-child,
.woocommerce-info p:last-child,
.woocommerce-error p:last-child,
.woocommerce-notice p:last-child {
margin-bottom: 0;
}
/* ==========================================================================
۰.۴۰ — جزئیات حساب کاربری
========================================================================== */
/*
* دو فیلدِ «نام» و «نام خانوادگی» باریک شده بودند.
*
* علتش دوباره وزنِ انتخابگر بود: ووکامرس با
* `.woocommerce form .form-row-first` (سه کلاس) روی آنها
* `width: 47%` و `float` میگذارد، و قاعدهی دوکلاسیِ قبلیِ ما میباخت.
* داخل گرید، آن ۴۷٪ به عرضِ *ستون* حساب میشد نه فرم — ۴۷٪ از ۳۳۲
* پیکسل شد ۱۵۶ پیکسل، یعنی نصفِ نصف. (اندازهگیریشده روی ۱۵۶۸ پیکسل.)
*
* چهار کلاس تا قطعی برنده شود.
*/
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-last {
width: auto;
float: none;
}
/*
* ` ` بازماندهی چیدمانِ شناورِ ووکامرس است. داخل
* گرید کارش را نمیکند و فقط یک سطرِ خالیِ تمامعرض اضافه میکند — دو
* تا از آنها بینِ فیلدها فاصلهی بیدلیل میانداختند.
*/
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .clear {
display: none;
}
/*
* فرم یک کارت میشود.
*
* تا حالا روی زمینهی خالیِ صفحه شناور بود، بدون قاب و بدون عنوان، در
* حالی که بقیهی صفحههای حساب همه کارت دارند.
*/
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
padding: 20px 22px;
border: 1px solid var( --nb-border, #242c42 );
border-radius: var( --nb-radius, 14px );
background: var( --nb-surface-alt, #1a2033 );
}
/*
* حالا که خودِ فرم کارت است، بخشِ گذرواژه دیگر نباید کارتِ دوم باشد —
* کارت داخل کارت نه چیزی را جدا میکند و نه سلسلهمراتب میسازد. یک خطِ
* جداکننده همان کار را میکند.
*/
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset {
margin: 20px 0 0;
padding: 20px 0 0;
border: 0;
border-top: 1px solid var( --nb-border, #242c42 );
border-radius: 0;
background: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm legend {
display: block;
width: 100%;
margin: 0 0 14px;
padding: 0;
font-size: 14px;
font-weight: 700;
color: var( --nb-text, #ededed );
}
/* دکمهی ذخیره ته فرم، سمتِ شروع. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > p:last-of-type {
margin: 20px 0 0;
padding-top: 18px;
border-top: 1px solid var( --nb-border, #242c42 );
}
/* ==========================================================================
۰.۴۱ — سه اصلاح
========================================================================== */
/* ---------------------------------- ۱. ظرفهای سفیدِ پشتِ کیف پول */
/*
* کارتها تیره شده بودند ولی دو ظرفِ *پشتشان* سفید مانده بود و از لای
* فاصلهی بینشان بیرون میزد — نوارهای سفیدِ عمودی بینِ سه کاشی و یک
* نوارِ افقی بالای فهرستِ تراکنشها. اندازهگیریشده:
* .woo-wallet-content-area و .woo-wallet-top-section هر دو
* rgb(255,255,255).
*/
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-my-wallet-container,
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-content-area,
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-top-section,
.woocommerce-account .woocommerce-MyAccount-content .woo-wallet-stats-grid {
background: transparent;
box-shadow: none;
}
/* ------------------- ۳. فرمِ جزئیات حساب، همعرضِ ستونِ محتوا */
/*
* ۶۸۰ پیکسل عرضِ راحتِ خواندن برای یک فرم است، ولی اینجا ستونِ محتوا
* پهنتر است و نصفِ آن خالی میماند — کنارِ صفحههای دیگرِ حساب که
* تمامعرضاند، ناقص به نظر میرسد. عرض آزاد میشود و فاصلهی دو ستونِ
* فیلدها کمی باز میشود تا در عرضِ بیشتر هم جمع بماند.
*/
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
max-width: none;
}
@media ( min-width: 700px ) {
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
column-gap: 20px;
}
}
| |