91 lines
7.8 KiB
CSS
91 lines
7.8 KiB
CSS
/* XShop Components — buttons, cards, breadcrumbs, pagination, notices, etc. */
|
|
|
|
/* Buttons */
|
|
.xshop-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--xshop-space-2); padding: var(--xshop-space-2) var(--xshop-space-4); border-radius: var(--xshop-radius-sm); border: 1px solid transparent; font-weight: var(--xshop-weight-medium); font-size: var(--xshop-text-sm); cursor: pointer; transition: background var(--xshop-transition), border-color var(--xshop-transition), color var(--xshop-transition); text-decoration: none; line-height: 1.4; }
|
|
.xshop-btn--primary { background: var(--xshop-primary); color: #fff; border-color: var(--xshop-primary); }
|
|
.xshop-btn--primary:hover { background: var(--xshop-primary-600); border-color: var(--xshop-primary-600); color: #fff; }
|
|
.xshop-btn--secondary { background: var(--xshop-card); color: var(--xshop-text); border-color: var(--xshop-border); }
|
|
.xshop-btn--secondary:hover { background: var(--xshop-surface); }
|
|
.xshop-btn--ghost { background: transparent; color: var(--xshop-text); border-color: transparent; }
|
|
.xshop-btn--ghost:hover { background: var(--xshop-surface); }
|
|
.xshop-btn:disabled { opacity: .55; cursor: not-allowed; }
|
|
|
|
/* Card — post-card, product placeholder, generic */
|
|
.xshop-card { background: var(--xshop-card); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--xshop-transition); }
|
|
.xshop-card:hover { box-shadow: var(--xshop-shadow-md); }
|
|
.xshop-card__media { aspect-ratio: 16/10; background: var(--xshop-surface); overflow: hidden; }
|
|
.xshop-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
.xshop-card__media--placeholder { display: flex; align-items: center; justify-content: center; color: var(--xshop-muted); font-size: var(--xshop-text-sm); }
|
|
.xshop-card__body { padding: var(--xshop-space-4); display: flex; flex-direction: column; gap: var(--xshop-space-2); flex: 1; }
|
|
.xshop-card__title { font-size: var(--xshop-text-base); margin: 0; line-height: var(--xshop-leading-tight); }
|
|
.xshop-card__title a { color: var(--xshop-text); }
|
|
.xshop-card__title a:hover { color: var(--xshop-link); }
|
|
.xshop-card__meta { font-size: var(--xshop-text-sm); color: var(--xshop-muted); display: flex; gap: var(--xshop-space-2); flex-wrap: wrap; }
|
|
.xshop-card__excerpt { font-size: var(--xshop-text-sm); color: var(--xshop-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
|
|
/* Breadcrumbs */
|
|
.xshop-breadcrumbs { font-size: var(--xshop-text-sm); color: var(--xshop-muted); }
|
|
.xshop-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--xshop-space-2); list-style: none; margin: 0; padding: 0; align-items: center; }
|
|
.xshop-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--xshop-space-2); }
|
|
.xshop-breadcrumbs li + li::before { content: "/"; opacity: .5; }
|
|
[dir="rtl"] .xshop-breadcrumbs li + li::before { content: "/"; }
|
|
.xshop-breadcrumbs a { color: var(--xshop-muted); }
|
|
.xshop-breadcrumbs a:hover { color: var(--xshop-text); }
|
|
.xshop-breadcrumbs [aria-current="page"] { color: var(--xshop-text); font-weight: var(--xshop-weight-medium); }
|
|
|
|
/* Pagination */
|
|
.xshop-pagination { display: flex; justify-content: center; margin-block-start: var(--xshop-space-8); }
|
|
.xshop-pagination .nav-links { display: flex; gap: var(--xshop-space-1); flex-wrap: wrap; align-items: center; }
|
|
.xshop-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 40px; block-size: 40px; padding-inline: var(--xshop-space-2); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-sm); background: var(--xshop-card); color: var(--xshop-text); font-size: var(--xshop-text-sm); text-decoration: none; }
|
|
.xshop-pagination .page-numbers:hover { background: var(--xshop-surface); }
|
|
.xshop-pagination .page-numbers.current { background: var(--xshop-primary); border-color: var(--xshop-primary); color: #fff; font-weight: var(--xshop-weight-bold); }
|
|
.xshop-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
|
|
|
|
/* Search form */
|
|
.xshop-search-form { display: flex; gap: var(--xshop-space-2); max-inline-size: 520px; }
|
|
.xshop-search-form input[type="search"] { flex: 1; }
|
|
|
|
/* Empty state */
|
|
.xshop-empty { text-align: center; padding: var(--xshop-space-12) var(--xshop-space-6); background: var(--xshop-surface); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); }
|
|
.xshop-empty__title { font-size: var(--xshop-text-xl); margin: 0 0 var(--xshop-space-2); }
|
|
.xshop-empty__text { color: var(--xshop-muted); margin: 0 0 var(--xshop-space-4); }
|
|
|
|
/* Loading */
|
|
.xshop-loading { display: inline-flex; align-items: center; gap: var(--xshop-space-2); color: var(--xshop-muted); font-size: var(--xshop-text-sm); }
|
|
.xshop-loading__spinner { inline-size: 16px; block-size: 16px; border: 2px solid var(--xshop-border); border-block-start-color: var(--xshop-primary); border-radius: 50%; animation: xshop-spin 600ms linear infinite; }
|
|
@keyframes xshop-spin { to { transform: rotate(360deg); } }
|
|
@media (prefers-reduced-motion: reduce) { .xshop-loading__spinner { animation: none; } }
|
|
|
|
/* Notices */
|
|
.xshop-notice { padding: var(--xshop-space-3) var(--xshop-space-4); border-radius: var(--xshop-radius-sm); border: 1px solid var(--xshop-border); background: var(--xshop-surface); font-size: var(--xshop-text-sm); }
|
|
.xshop-notice--success { background: var(--xshop-success-bg); border-color: #86efac; color: #14532d; }
|
|
[data-theme="dark"] .xshop-notice--success { color: #bbf7d0; }
|
|
.xshop-notice--warning { background: var(--xshop-warning-bg); border-color: #fcd34d; }
|
|
.xshop-notice--error { background: var(--xshop-danger-bg); border-color: #fca5a5; }
|
|
|
|
/* Comments */
|
|
.xshop-comments { margin-block-start: var(--xshop-space-8); border-block-start: 1px solid var(--xshop-border); padding-block-start: var(--xshop-space-8); }
|
|
.xshop-comments__title { font-size: var(--xshop-text-xl); }
|
|
.xshop-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--xshop-space-4); }
|
|
.xshop-comment { background: var(--xshop-card); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); padding: var(--xshop-space-4); }
|
|
.xshop-comment__meta { font-size: var(--xshop-text-sm); color: var(--xshop-muted); margin-block-end: var(--xshop-space-2); }
|
|
.xshop-comment__body { font-size: var(--xshop-text-base); }
|
|
.xshop-comment .children { list-style: none; margin-block-start: var(--xshop-space-4); padding-inline-start: var(--xshop-space-6); display: flex; flex-direction: column; gap: var(--xshop-space-4); border-inline-start: 2px solid var(--xshop-border); }
|
|
@media (max-width: 640px) { .xshop-comment .children { padding-inline-start: var(--xshop-space-3); } }
|
|
|
|
/* Page header */
|
|
.xshop-page-header { margin-block-end: var(--xshop-space-6); }
|
|
.xshop-page-header__title { font-size: var(--xshop-text-3xl); margin: 0; }
|
|
.xshop-page-header__desc { color: var(--xshop-muted); margin-block-start: var(--xshop-space-2); }
|
|
|
|
/* 404 */
|
|
.xshop-404 { text-align: center; padding: var(--xshop-space-16) var(--xshop-space-4); }
|
|
.xshop-404__code { font-size: 5rem; font-weight: var(--xshop-weight-bold); line-height: 1; color: var(--xshop-border); margin: 0; }
|
|
.xshop-404__title { font-size: var(--xshop-text-3xl); margin: var(--xshop-space-4) 0 var(--xshop-space-2); }
|
|
|
|
/* Promo banner foundation */
|
|
.xshop-promo { background: var(--xshop-surface); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-md); padding: var(--xshop-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--xshop-space-4); flex-wrap: wrap; }
|
|
|
|
/* Woo notice compat */
|
|
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--xshop-radius-sm); }
|