781 lines
13 KiB
CSS
781 lines
13 KiB
CSS
|
|
@media all and (min-width: 769px) {
|
|
:root {
|
|
--layout-outer-width: 94%;
|
|
}
|
|
/* Reverse Layout for Even Items */
|
|
.spice-categories .spice-item:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/**** GLOBAL ***/
|
|
|
|
|
|
html:not(.html-home-page) .master-wrapper-content,
|
|
.html-home-page .topic-block,
|
|
.html-home-page .home-page-category-grid,
|
|
.html-home-page .news-list-homepage,
|
|
.html-home-page .home-page-polls,
|
|
.html-home-page .home-page-product-grid {
|
|
width: var(--layout-outer-width);
|
|
}
|
|
|
|
.home-page-polls li {
|
|
min-width: 100px;
|
|
}
|
|
|
|
|
|
/**** GLOBAL TABLES ***/
|
|
|
|
|
|
.cart tr {
|
|
width: 31.33333%;
|
|
margin: 40px 1% 0;
|
|
}
|
|
|
|
.cart tr:nth-child(2n+1) {
|
|
clear: none;
|
|
}
|
|
|
|
.cart tr:nth-child(3n+1) {
|
|
clear: both;
|
|
}
|
|
|
|
.order-details-page .data-table tr {
|
|
width: 31.33333%;
|
|
margin: 40px 1% 0;
|
|
}
|
|
|
|
.order-details-page .data-table tr:nth-child(2n+1) {
|
|
clear: none;
|
|
}
|
|
|
|
.order-details-page .data-table tr:nth-child(3n+1) {
|
|
clear: both;
|
|
}
|
|
|
|
|
|
/*** HEADER ***/
|
|
|
|
|
|
.header-selectors-wrapper > div {
|
|
width: 20%;
|
|
}
|
|
|
|
|
|
/*** FOOTER ***/
|
|
|
|
|
|
.footer-block {
|
|
display: inline-block;
|
|
width: 25.33333%;
|
|
margin: 0 4%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.footer-block .title {
|
|
margin: 0 0 15px;
|
|
background: none;
|
|
padding: 0;
|
|
cursor: auto;
|
|
}
|
|
|
|
.footer-block .list {
|
|
display: block !important; /* prevents toggle display:none on resize */
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
.footer-block .title strong {
|
|
font-weight: 700;
|
|
}
|
|
.footer-block .list li {
|
|
padding: 5px 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.footer-block .list a {
|
|
display: inline;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/*footer ui*/
|
|
.follow-us {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
flex-wrap: wrap;
|
|
padding-block: 40px;
|
|
width: 100%;
|
|
}
|
|
|
|
.follow-us > div {
|
|
width: calc(33% - 20px);
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.follow-us .title {
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter-email {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border: 0;
|
|
}
|
|
/*** Homepage Categories TABLES ***/
|
|
/* Target only the home page category grid */
|
|
.home-page-category-grid .category-item {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.home-page-category-grid .item-box .picture,
|
|
.home-page-category-grid .item-box .picture a {
|
|
position: static;
|
|
margin: 0;
|
|
}
|
|
|
|
.home-page-category-grid .item-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Style for each item */
|
|
.home-page-category-grid .item-grid .item-box {
|
|
width: 100%;
|
|
margin: 0;
|
|
grid-column: span 2;
|
|
grid-row: span 1;
|
|
}
|
|
|
|
.home-page-category-grid .item-box:nth-child(5n + 4),
|
|
.home-page-category-grid .item-box:nth-child(5n + 5) {
|
|
grid-column: span 3;
|
|
grid-row: span 1;
|
|
}
|
|
/* Every first item in a set of 5 spans 2 columns and 2 rows */
|
|
.home-page-category-grid .item-box:nth-child(5n + 1) {
|
|
grid-column: span 4;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
/*** CATEGORY ***/
|
|
|
|
|
|
.product-selectors {
|
|
text-align: left;
|
|
}
|
|
|
|
.product-selectors .product-viewmode {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
.product-selectors .product-viewmode span {
|
|
display: none;
|
|
}
|
|
|
|
.product-selectors .product-viewmode a {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 32px;
|
|
margin: 0 0 0 12px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.product-selectors .product-viewmode a.grid {
|
|
background-image: url('../images/view-grid.png');
|
|
}
|
|
|
|
.product-selectors .product-viewmode a.list {
|
|
background-image: url('../images/view-list.png');
|
|
}
|
|
|
|
.product-selectors .product-viewmode a.selected {
|
|
opacity: 1;
|
|
}
|
|
|
|
.item-box {
|
|
width: 47%;
|
|
margin: 0 1.5% 50px;
|
|
}
|
|
|
|
.category-grid .item-box:nth-child(2n+1) {
|
|
clear: none;
|
|
}
|
|
|
|
.category-grid .item-box:nth-child(3n+1) {
|
|
clear: both;
|
|
}
|
|
.item-box:nth-child(n+1) {
|
|
clear: none;
|
|
}
|
|
|
|
.item-box:nth-child(2n+1) {
|
|
clear: both;
|
|
}
|
|
|
|
.product-list .item-box {
|
|
float: none;
|
|
width: auto;
|
|
margin: 0 5px 30px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.product-list .item-box:not(:last-child) {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.product-list .item-box .product-item:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.product-list .item-box .picture {
|
|
float: left;
|
|
width: 220px;
|
|
}
|
|
|
|
.product-list .item-box:hover .picture a img,
|
|
.product-list .item-box:focus .picture a img {
|
|
opacity: 1;
|
|
}
|
|
|
|
.product-list .item-box .picture:hover a img,
|
|
.product-list .item-box .picture:focus a img {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.product-list .item-box .picture ~ .buttons,
|
|
.product-list .item-box .picture + .details {
|
|
margin: 0 0 0 240px;
|
|
}
|
|
|
|
.product-list .item-box .product-title {
|
|
height: auto;
|
|
padding: 10px 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.product-list .item-box .description {
|
|
display: block;
|
|
margin: 0 0 10px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.product-list .item-box .prices {
|
|
min-height: initial;
|
|
margin: 0 0 15px;
|
|
}
|
|
|
|
.product-list .item-box .buttons {
|
|
}
|
|
|
|
.product-list .item-box .product-box-add-to-cart-button {
|
|
width: auto;
|
|
min-width: 150px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.product-list .item-box .add-to-compare-list-button,
|
|
.product-list .item-box .add-to-wishlist-button {
|
|
width: auto;
|
|
padding-inline: 30px;
|
|
}
|
|
|
|
|
|
/*** PRODUCT PAGE ***/
|
|
|
|
|
|
.gallery {
|
|
width: 550px;
|
|
}
|
|
|
|
.variant-picture {
|
|
float: left;
|
|
}
|
|
|
|
.variant-picture + .variant-overview {
|
|
width: auto;
|
|
margin: 0 0 0 240px;
|
|
}
|
|
|
|
.variant-overview {
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
/*** PRODUCT REVIEWS ***/
|
|
|
|
|
|
.product-review-item .review-title {
|
|
float: left;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.product-review-item .product-review-box {
|
|
float: right;
|
|
}
|
|
|
|
.write-review .review-rating div {
|
|
display: inline-block;
|
|
margin: 0 0 0 5px;
|
|
cursor: default;
|
|
vertical-align: middle;
|
|
font-size: 14px;
|
|
height: 17px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*** REGISTRATION, LOGIN, ACCOUNT ***/
|
|
|
|
|
|
.address-list-page .section,
|
|
.order-list-page .section,
|
|
.return-request-list-page .section {
|
|
display: inline-block;
|
|
width: 45%;
|
|
margin: 20px 1%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.recurring-payments {
|
|
width: 100% !important;
|
|
margin: 20px 0 !important;
|
|
}
|
|
|
|
|
|
/*** SHOPPING CART ***/
|
|
|
|
|
|
.order-progress {
|
|
padding: 20px;
|
|
}
|
|
|
|
.order-progress li {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.order-progress a {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.cart-options .common-buttons {
|
|
text-align: right;
|
|
}
|
|
|
|
.cart-options .checkout-attributes,
|
|
.cart-options .selected-checkout-attributes {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.cart-footer .totals {
|
|
float: right;
|
|
width: 45%;
|
|
margin: 0 2.5%;
|
|
}
|
|
|
|
.cart-footer .terms-of-service {
|
|
text-align: left;
|
|
}
|
|
|
|
.cart-footer .checkout-buttons,
|
|
.cart-footer .addon-buttons {
|
|
text-align: right;
|
|
}
|
|
|
|
.cart-footer .cart-collaterals {
|
|
float: left;
|
|
width: 45%;
|
|
margin: 0 2.5%;
|
|
}
|
|
|
|
.cart-footer .cart-collaterals div,
|
|
.cart-footer .cart-collaterals label {
|
|
text-align: left;
|
|
}
|
|
|
|
.cart-footer .estimate-shipping label {
|
|
display: block;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.cart-footer .estimate-shipping .buttons {
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/*** CHECKOUT ***/
|
|
|
|
|
|
.checkout-page .selected-checkout-attributes {
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
.checkout-page .cart-footer .totals {
|
|
max-width: 350px;
|
|
margin: 0;
|
|
}
|
|
|
|
.checkout-page .address-grid {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.checkout-page .address-item {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
zoom: 1;
|
|
width: 48%;
|
|
margin: 0 1% 40px;
|
|
}
|
|
|
|
.shipping-method .method-list li,
|
|
.payment-method .method-list li {
|
|
display: inline-block;
|
|
width: 25%;
|
|
margin: 20px 2%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.shipping-method .method-name {
|
|
background-color: #f6f6f6;
|
|
padding: 10px;
|
|
}
|
|
|
|
.payment-method .payment-logo {
|
|
display: block;
|
|
background-color: #f6f6f6;
|
|
padding: 10px;
|
|
}
|
|
|
|
.payment-method .payment-details {
|
|
display: block;
|
|
width: auto;
|
|
min-width: 0;
|
|
margin: 10px 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.payment-info .info {
|
|
padding: 30px 75px;
|
|
}
|
|
|
|
.order-review-data,
|
|
.order-details-area,
|
|
.shipment-details-area {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.order-review-data > div,
|
|
.order-details-area > div,
|
|
.shipment-details-area > div {
|
|
float: left;
|
|
width: 48%;
|
|
margin: 0 1% 40px;
|
|
}
|
|
|
|
|
|
/*** ORDER DETAILS & SHIPPING DETAILS ***/
|
|
|
|
|
|
.order-details-page .section.options {
|
|
text-align: right;
|
|
}
|
|
|
|
.order-details-page .selected-checkout-attributes {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.order-details-page .tax-shipping-info {
|
|
text-align: right;
|
|
}
|
|
|
|
.order-details-page .totals {
|
|
float: right;
|
|
clear: both;
|
|
}
|
|
|
|
.shipment-details-page .tracking-number .tracking-url {
|
|
color: var(--theme-color);
|
|
}
|
|
|
|
|
|
/*** BLOG & NEWS ***/
|
|
|
|
|
|
.blog-posts .tags {
|
|
float: right;
|
|
width: 80%;
|
|
text-align: right;
|
|
}
|
|
|
|
.blog-posts .buttons {
|
|
float: left;
|
|
width: 20%;
|
|
text-align: left;
|
|
}
|
|
|
|
.new-comment {
|
|
text-align: center;
|
|
}
|
|
|
|
.new-comment .buttons {
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-list .comment {
|
|
display: table;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.comment-list .comment:last-child {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.comment-info {
|
|
display: table-cell;
|
|
width: 15%;
|
|
margin: 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.comment-info .username {
|
|
min-height: 40px;
|
|
margin: 0;
|
|
border: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-info .avatar {
|
|
border: none;
|
|
}
|
|
|
|
.comment-info .avatar img {
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
}
|
|
|
|
.comment-content {
|
|
display: table-cell;
|
|
width: 85%;
|
|
border-left: 1px solid #ddd;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
}
|
|
|
|
.comment-time {
|
|
min-height: 40px;
|
|
margin: 0;
|
|
background-color: #f6f6f6;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.comment-title {
|
|
margin: 0 0 -20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.comment-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
|
|
/*** FORUM & PROFILE ***/
|
|
|
|
|
|
.forum-actions,
|
|
.topic-actions {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.forum-actions .actions,
|
|
.topic-actions .actions {
|
|
float: left;
|
|
}
|
|
|
|
.forum-actions .pager,
|
|
.topic-actions .pager {
|
|
float: right;
|
|
max-width: 450px;
|
|
}
|
|
|
|
.forum-actions .pager li,
|
|
.topic-actions .pager li {
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
.forum-actions .pager.upper {
|
|
display: block;
|
|
}
|
|
|
|
.topic-actions.lower .actions {
|
|
display: block;
|
|
}
|
|
|
|
.topic-posts {
|
|
margin: 0 0 30px;
|
|
}
|
|
|
|
.topic-post {
|
|
display: table;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.topic-post .post-info {
|
|
display: table-cell;
|
|
width: 15%;
|
|
margin: 0;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
}
|
|
|
|
.topic-post .user-info {
|
|
width: auto;
|
|
}
|
|
|
|
.topic-post .username {
|
|
min-height: 40px;
|
|
margin: 0;
|
|
border: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.topic-post .avatar {
|
|
margin: auto;
|
|
border: none;
|
|
}
|
|
|
|
.topic-post .avatar img {
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
}
|
|
|
|
.topic-post .user-stats li {
|
|
margin: 0;
|
|
}
|
|
|
|
.topic-post .send-pm {
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.topic-post .pm-button,
|
|
.profile-info-box .pm-button {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.topic-post .post-content {
|
|
display: table-cell;
|
|
width: 85%;
|
|
border-left: 1px solid #ddd;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
}
|
|
|
|
.topic-post .post-head {
|
|
min-height: 40px;
|
|
overflow: hidden;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
.topic-post .post-time {
|
|
float: left;
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.topic-post .post-actions {
|
|
float: right;
|
|
margin: 0;
|
|
}
|
|
|
|
.topic-post .post-actions a {
|
|
margin: 0;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.topic-post .post-actions .manage-post a {
|
|
}
|
|
|
|
.topic-post .post-actions .quote-post a {
|
|
min-width: 70px;
|
|
}
|
|
|
|
.topic-post .post-actions a.post-link-button {
|
|
margin: 0 0 0 10px;
|
|
border-left: 1px solid #ddd;
|
|
text-align: center;
|
|
}
|
|
|
|
.topic-post .post-text {
|
|
padding: 20px 5px;
|
|
}
|
|
|
|
.topic-post .post-vote {
|
|
padding: 20px 0 20px 15px;
|
|
}
|
|
|
|
.forum-table th.replies,
|
|
.forum-table th.views,
|
|
.forum-table th.votes,
|
|
.forum-table td.replies,
|
|
.forum-table td.views,
|
|
.forum-table td.votes {
|
|
display: table-cell;
|
|
}
|
|
|
|
.forum-table td.image {
|
|
max-width: none;
|
|
}
|
|
|
|
.forum-table td.image div {
|
|
max-width: none;
|
|
background-size: initial;
|
|
}
|
|
|
|
.ui-tabs-nav {
|
|
text-align: left;
|
|
}
|
|
|
|
.ui-tabs-nav li {
|
|
margin: 0 10px -1px 0;
|
|
/*override jQuery UI styles, do not delete doubled properties*/
|
|
margin: 0 10px -1px 0 !important;
|
|
}
|
|
|
|
.profile-info-box .avatar {
|
|
float: left;
|
|
margin: 0 15px 15px 0;
|
|
}
|
|
|
|
.profile-info-box .profile-stats {
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
|
|
.profile-info-box .title {
|
|
text-align: left;
|
|
}
|
|
|
|
.profile-info-box .send-pm {
|
|
clear: both;
|
|
text-align: left;
|
|
}
|
|
}
|