changed selection color for mobile devices
alexanderroese
parent
81fc3d9714
commit
f2bf76a6aa
306
assets/base.css
306
assets/base.css
|
|
@ -252,7 +252,13 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
|
|||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba(var(--color-foreground), 0.2);
|
||||
/* background-color: rgba(var(--color-foreground), 0.2); */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* mozilla firefox */
|
||||
::-moz-selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
|
|
@ -534,7 +540,7 @@ a:not([href]) {
|
|||
}
|
||||
|
||||
.circle-divider::after {
|
||||
content: '\2022';
|
||||
content: "\2022";
|
||||
margin: 0 1.3rem 0 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -596,7 +602,8 @@ details > * {
|
|||
--duration-extra-long: 600ms;
|
||||
--duration-extended: 3s;
|
||||
--ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
|
||||
--animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
|
||||
--animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow)
|
||||
forwards;
|
||||
--animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
|
||||
}
|
||||
|
||||
|
|
@ -675,7 +682,7 @@ summary::-webkit-details-marker {
|
|||
z-index: 2;
|
||||
display: block;
|
||||
cursor: default;
|
||||
content: ' ';
|
||||
content: " ";
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -710,7 +717,8 @@ summary::-webkit-details-marker {
|
|||
*:focus-visible {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
||||
outline-offset: 0.3rem;
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
|
||||
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
}
|
||||
|
||||
/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
|
||||
|
|
@ -718,7 +726,8 @@ summary::-webkit-details-marker {
|
|||
.no-js *:focus {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
||||
outline-offset: 0.3rem;
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
|
||||
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
}
|
||||
|
||||
/* Negate the fallback side-effect for browsers that support :focus-visible */
|
||||
|
|
@ -762,14 +771,16 @@ summary::-webkit-details-marker {
|
|||
.focus-offset:focus-visible {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
||||
outline-offset: 1rem;
|
||||
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
|
||||
box-shadow: 0 0 0 1rem rgb(var(--color-background)),
|
||||
0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
|
||||
}
|
||||
|
||||
.focus-offset.focused,
|
||||
.no-js .focus-offset:focus {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
||||
outline-offset: 1rem;
|
||||
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
|
||||
box-shadow: 0 0 0 1rem rgb(var(--color-background)),
|
||||
0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
|
||||
}
|
||||
|
||||
.no-js .focus-offset:focus:not(:focus-visible) {
|
||||
|
|
@ -1204,15 +1215,17 @@ deferred-media {
|
|||
.shopify-challenge__button,
|
||||
.customer button,
|
||||
button.shopify-payment-button__button--unbranded,
|
||||
.shopify-payment-button [role='button'],
|
||||
.cart__dynamic-checkout-buttons [role='button'],
|
||||
.shopify-payment-button [role="button"],
|
||||
.cart__dynamic-checkout-buttons [role="button"],
|
||||
.cart__dynamic-checkout-buttons iframe {
|
||||
--shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
|
||||
--shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
|
||||
--shadow-blur-radius: var(--buttons-shadow-blur-radius);
|
||||
--shadow-opacity: var(--buttons-shadow-opacity);
|
||||
--shadow-visible: var(--buttons-shadow-visible);
|
||||
--border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
|
||||
--border-offset: var(
|
||||
--buttons-border-offset
|
||||
); /* reduce radius edge artifacts */
|
||||
--border-opacity: calc(1 - var(--buttons-border-opacity));
|
||||
border-radius: var(--buttons-radius-outset);
|
||||
position: relative;
|
||||
|
|
@ -1231,8 +1244,8 @@ button.shopify-payment-button__button--unbranded {
|
|||
}
|
||||
|
||||
.cart__dynamic-checkout-buttons iframe {
|
||||
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--shadow-opacity));
|
||||
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset)
|
||||
var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
|
||||
}
|
||||
|
||||
.button,
|
||||
|
|
@ -1258,9 +1271,9 @@ button.shopify-payment-button__button--unbranded {
|
|||
.shopify-challenge__button:before,
|
||||
.customer button:before,
|
||||
.shopify-payment-button__button--unbranded:before,
|
||||
.shopify-payment-button [role='button']:before,
|
||||
.cart__dynamic-checkout-buttons [role='button']:before {
|
||||
content: '';
|
||||
.shopify-payment-button [role="button"]:before,
|
||||
.cart__dynamic-checkout-buttons [role="button"]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -1268,15 +1281,15 @@ button.shopify-payment-button__button--unbranded {
|
|||
left: 0;
|
||||
z-index: -1;
|
||||
border-radius: var(--buttons-radius-outset);
|
||||
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--shadow-opacity));
|
||||
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset)
|
||||
var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
|
||||
}
|
||||
|
||||
.button:after,
|
||||
.shopify-challenge__button:after,
|
||||
.customer button:after,
|
||||
.shopify-payment-button__button--unbranded:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--buttons-border-width);
|
||||
right: var(--buttons-border-width);
|
||||
|
|
@ -1286,7 +1299,8 @@ button.shopify-payment-button__button--unbranded {
|
|||
border-radius: var(--buttons-radius);
|
||||
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
|
||||
rgba(var(--color-button-text), var(--border-opacity)),
|
||||
0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
|
||||
0 0 0 var(--buttons-border-width)
|
||||
rgba(var(--color-button), var(--alpha-button-background));
|
||||
transition: box-shadow var(--duration-short) ease;
|
||||
}
|
||||
|
||||
|
|
@ -1297,7 +1311,8 @@ button.shopify-payment-button__button--unbranded {
|
|||
--border-offset: 1.3px;
|
||||
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
|
||||
rgba(var(--color-button-text), var(--border-opacity)),
|
||||
0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
|
||||
0 0 0 calc(var(--buttons-border-width) + 1px)
|
||||
rgba(var(--color-button), var(--alpha-button-background));
|
||||
}
|
||||
|
||||
.button--secondary:after {
|
||||
|
|
@ -1308,17 +1323,21 @@ button.shopify-payment-button__button--unbranded {
|
|||
.button:focus,
|
||||
.button.focused,
|
||||
.shopify-payment-button__button--unbranded:focus-visible,
|
||||
.shopify-payment-button [role='button']:focus-visible,
|
||||
.shopify-payment-button [role="button"]:focus-visible,
|
||||
.shopify-payment-button__button--unbranded:focus,
|
||||
.shopify-payment-button [role='button']:focus {
|
||||
.shopify-payment-button [role="button"]:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
|
||||
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
|
||||
0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
|
||||
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
}
|
||||
|
||||
.button:focus:not(:focus-visible):not(.focused),
|
||||
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused),
|
||||
.shopify-payment-button [role='button']:focus:not(:focus-visible):not(.focused) {
|
||||
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(
|
||||
.focused
|
||||
),
|
||||
.shopify-payment-button
|
||||
[role="button"]:focus:not(:focus-visible):not(.focused) {
|
||||
box-shadow: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -1351,10 +1370,10 @@ button.shopify-payment-button__button--unbranded {
|
|||
/* Button - other */
|
||||
|
||||
.button:disabled,
|
||||
.button[aria-disabled='true'],
|
||||
.button[aria-disabled="true"],
|
||||
.button.disabled,
|
||||
.customer button:disabled,
|
||||
.customer button[aria-disabled='true'],
|
||||
.customer button[aria-disabled="true"],
|
||||
.customer button.disabled,
|
||||
.quantity__button.disabled {
|
||||
cursor: not-allowed;
|
||||
|
|
@ -1453,7 +1472,7 @@ details[open] > .share-button__fallback {
|
|||
|
||||
.share-button__fallback:after {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--inputs-border-width);
|
||||
right: var(--inputs-border-width);
|
||||
|
|
@ -1461,7 +1480,8 @@ details[open] > .share-button__fallback {
|
|||
left: var(--inputs-border-width);
|
||||
border: 0.1rem solid transparent;
|
||||
border-radius: var(--inputs-radius);
|
||||
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
|
||||
box-shadow: 0 0 0 var(--inputs-border-width)
|
||||
rgba(var(--color-foreground), var(--inputs-border-opacity));
|
||||
transition: box-shadow var(--duration-short) ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -1469,15 +1489,16 @@ details[open] > .share-button__fallback {
|
|||
.share-button__fallback:before {
|
||||
background: rgb(var(--color-background));
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: var(--inputs-radius-outset);
|
||||
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
|
||||
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
|
||||
box-shadow: var(--inputs-shadow-horizontal-offset)
|
||||
var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--inputs-shadow-opacity));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -1523,8 +1544,10 @@ details[open] > .share-button__fallback {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
|
||||
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
|
||||
.field:not(:focus-visible):not(.focused)
|
||||
+ .share-button__copy:not(:focus-visible):not(.focused),
|
||||
.field:not(:focus-visible):not(.focused)
|
||||
+ .share-button__close:not(:focus-visible):not(.focused) {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -1544,7 +1567,8 @@ details[open] > .share-button__fallback {
|
|||
.share-button__fallback .field__input:-webkit-autofill {
|
||||
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
||||
outline-offset: 0.1rem;
|
||||
box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
box-shadow: 0 0 0 0.1rem rgb(var(--color-background)),
|
||||
0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
||||
}
|
||||
|
||||
.share-button__fallback .field__input {
|
||||
|
|
@ -1610,15 +1634,16 @@ details[open] > .share-button__fallback {
|
|||
.customer select:before,
|
||||
.localization-form__select:before {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: var(--inputs-radius-outset);
|
||||
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
|
||||
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
|
||||
box-shadow: var(--inputs-shadow-horizontal-offset)
|
||||
var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--inputs-shadow-opacity));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -1628,7 +1653,7 @@ details[open] > .share-button__fallback {
|
|||
.customer select:after,
|
||||
.localization-form__select:after {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--inputs-border-width);
|
||||
right: var(--inputs-border-width);
|
||||
|
|
@ -1636,7 +1661,8 @@ details[open] > .share-button__fallback {
|
|||
left: var(--inputs-border-width);
|
||||
border: 0.1rem solid transparent;
|
||||
border-radius: var(--inputs-radius);
|
||||
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
|
||||
box-shadow: 0 0 0 var(--inputs-border-width)
|
||||
rgba(var(--color-foreground), var(--inputs-border-opacity));
|
||||
transition: box-shadow var(--duration-short) ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -1666,7 +1692,8 @@ details[open] > .share-button__fallback {
|
|||
.customer .field input:focus-visible,
|
||||
.customer select:focus-visible,
|
||||
.localization-form__select:focus-visible.localization-form__select:after {
|
||||
box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
|
||||
box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
|
||||
rgba(var(--color-foreground));
|
||||
outline: 0;
|
||||
border-radius: var(--inputs-radius);
|
||||
}
|
||||
|
|
@ -1676,7 +1703,8 @@ details[open] > .share-button__fallback {
|
|||
.customer .field input:focus,
|
||||
.customer select:focus,
|
||||
.localization-form__select:focus.localization-form__select:after {
|
||||
box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
|
||||
box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
|
||||
rgba(var(--color-foreground));
|
||||
outline: 0;
|
||||
border-radius: var(--inputs-radius);
|
||||
}
|
||||
|
|
@ -1747,7 +1775,8 @@ details[open] > .share-button__fallback {
|
|||
margin-bottom: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
|
||||
transition: top var(--duration-short) ease,
|
||||
font-size var(--duration-short) ease;
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1.5;
|
||||
|
|
@ -1823,7 +1852,7 @@ details[open] > .share-button__fallback {
|
|||
resize: none;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -1902,7 +1931,7 @@ input[type='checkbox'] {
|
|||
|
||||
.quantity:after {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--inputs-border-width);
|
||||
right: var(--inputs-border-width);
|
||||
|
|
@ -1910,7 +1939,8 @@ input[type='checkbox'] {
|
|||
left: var(--inputs-border-width);
|
||||
border: 0.1rem solid transparent;
|
||||
border-radius: var(--inputs-radius);
|
||||
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
|
||||
box-shadow: 0 0 0 var(--inputs-border-width)
|
||||
rgba(var(--color-foreground), var(--inputs-border-opacity));
|
||||
transition: box-shadow var(--duration-short) ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -1918,15 +1948,16 @@ input[type='checkbox'] {
|
|||
.quantity:before {
|
||||
background: rgb(var(--color-background));
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: var(--inputs-radius-outset);
|
||||
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
|
||||
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
|
||||
box-shadow: var(--inputs-shadow-horizontal-offset)
|
||||
var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--inputs-shadow-opacity));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -2006,7 +2037,7 @@ input[type='checkbox'] {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.quantity__input[type='number'] {
|
||||
.quantity__input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
|
|
@ -2023,7 +2054,7 @@ input[type='checkbox'] {
|
|||
}
|
||||
|
||||
.quantity__rules .divider + .divider::before {
|
||||
content: '\2022';
|
||||
content: "\2022";
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -2144,7 +2175,7 @@ product-info .loading__spinner:not(.hidden) ~ *,
|
|||
.utility-bar__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: 'announcements';
|
||||
grid-template-areas: "announcements";
|
||||
}
|
||||
|
||||
.utility-bar__grid .list-social {
|
||||
|
|
@ -2167,12 +2198,12 @@ product-info .loading__spinner:not(.hidden) ~ *,
|
|||
@media screen and (min-width: 990px) {
|
||||
.utility-bar__grid--3-col {
|
||||
grid-template-columns: 3fr 4fr 3fr;
|
||||
grid-template-areas: 'social-icons announcements language-currency';
|
||||
grid-template-areas: "social-icons announcements language-currency";
|
||||
}
|
||||
|
||||
.utility-bar__grid--2-col {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: 'social-icons language-currency';
|
||||
grid-template-areas: "social-icons language-currency";
|
||||
}
|
||||
|
||||
.announcement-bar.announcement-bar--one-announcement,
|
||||
|
|
@ -2389,7 +2420,7 @@ product-info .loading__spinner:not(.hidden) ~ *,
|
|||
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-areas: 'left-icons heading icons';
|
||||
grid-template-areas: "left-icons heading icons";
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -2408,26 +2439,26 @@ product-info .loading__spinner:not(.hidden) ~ *,
|
|||
.header--top-left,
|
||||
.header--middle-left:not(.header--has-menu) {
|
||||
grid-template-areas:
|
||||
'heading icons'
|
||||
'navigation navigation';
|
||||
"heading icons"
|
||||
"navigation navigation";
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.header--top-left.drawer-menu,
|
||||
.header--middle-left.drawer-menu {
|
||||
grid-template-areas: 'navigation heading icons';
|
||||
grid-template-areas: "navigation heading icons";
|
||||
grid-template-columns: auto 1fr auto;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.header--middle-left {
|
||||
grid-template-areas: 'heading navigation icons';
|
||||
grid-template-areas: "heading navigation icons";
|
||||
grid-template-columns: auto auto 1fr;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.header--middle-center:not(.drawer-menu) {
|
||||
grid-template-areas: 'navigation heading icons';
|
||||
grid-template-areas: "navigation heading icons";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
|
@ -2438,21 +2469,22 @@ product-info .loading__spinner:not(.hidden) ~ *,
|
|||
|
||||
.header--top-center {
|
||||
grid-template-areas:
|
||||
'left-icons heading icons'
|
||||
'navigation navigation navigation';
|
||||
"left-icons heading icons"
|
||||
"navigation navigation navigation";
|
||||
}
|
||||
|
||||
.header--top-center.drawer-menu {
|
||||
grid-template-areas: 'left-icons heading icons';
|
||||
grid-template-areas: "left-icons heading icons";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
}
|
||||
|
||||
.header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
|
||||
.header:not(.header--middle-left, .header--middle-center)
|
||||
.header__inline-menu {
|
||||
margin-top: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header *[tabindex='-1']:focus {
|
||||
.header *[tabindex="-1"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -2596,11 +2628,13 @@ product-info .loading__spinner:not(.hidden) ~ *,
|
|||
margin-right: -1.2rem;
|
||||
}
|
||||
|
||||
.header__icon--menu[aria-expanded='true']::before {
|
||||
content: '';
|
||||
.header__icon--menu[aria-expanded="true"]::before {
|
||||
content: "";
|
||||
top: 100%;
|
||||
left: 0;
|
||||
height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
|
||||
height: calc(
|
||||
var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))
|
||||
);
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -2669,7 +2703,7 @@ details[open] .modal-overlay {
|
|||
|
||||
details[open] .modal-overlay::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
background-color: rgb(var(--color-foreground), 0.5);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
|
@ -2685,7 +2719,9 @@ details[open] .modal-overlay::after {
|
|||
.search-modal {
|
||||
opacity: 0;
|
||||
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
|
||||
min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
|
||||
min-height: calc(
|
||||
100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width))
|
||||
);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -2859,7 +2895,8 @@ details[open] > .header__menu-item .icon-caret {
|
|||
}
|
||||
|
||||
.header__submenu {
|
||||
transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
|
||||
transition: opacity var(--duration-default) ease,
|
||||
transform var(--duration-default) ease;
|
||||
}
|
||||
|
||||
.global-settings-popup,
|
||||
|
|
@ -2868,7 +2905,8 @@ details[open] > .header__menu-item .icon-caret {
|
|||
border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: var(--popup-border-width);
|
||||
box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
|
||||
box-shadow: var(--popup-shadow-horizontal-offset)
|
||||
var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--popup-shadow-opacity));
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -2980,7 +3018,7 @@ details-disclosure > details {
|
|||
}
|
||||
|
||||
.ratio::before {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: var(--ratio-percent);
|
||||
|
|
@ -2988,20 +3026,23 @@ details-disclosure > details {
|
|||
|
||||
.content-container {
|
||||
border-radius: var(--text-boxes-radius);
|
||||
border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
|
||||
border: var(--text-boxes-border-width) solid
|
||||
rgba(var(--color-foreground), var(--text-boxes-border-opacity));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-container:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(var(--text-boxes-border-width) * -1);
|
||||
right: calc(var(--text-boxes-border-width) * -1);
|
||||
bottom: calc(var(--text-boxes-border-width) * -1);
|
||||
left: calc(var(--text-boxes-border-width) * -1);
|
||||
border-radius: var(--text-boxes-radius);
|
||||
box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
|
||||
var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
|
||||
box-shadow: var(--text-boxes-shadow-horizontal-offset)
|
||||
var(--text-boxes-shadow-vertical-offset)
|
||||
var(--text-boxes-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -3024,21 +3065,23 @@ details-disclosure > details {
|
|||
|
||||
.global-media-settings {
|
||||
position: relative;
|
||||
border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
|
||||
border: var(--media-border-width) solid
|
||||
rgba(var(--color-foreground), var(--media-border-opacity));
|
||||
border-radius: var(--media-radius);
|
||||
overflow: visible !important;
|
||||
background-color: rgb(var(--color-background));
|
||||
}
|
||||
|
||||
.global-media-settings:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(var(--media-border-width) * -1);
|
||||
right: calc(var(--media-border-width) * -1);
|
||||
bottom: calc(var(--media-border-width) * -1);
|
||||
left: calc(var(--media-border-width) * -1);
|
||||
border-radius: var(--media-radius);
|
||||
box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
|
||||
box-shadow: var(--media-shadow-horizontal-offset)
|
||||
var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--media-shadow-opacity));
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
|
|
@ -3131,9 +3174,9 @@ details-disclosure > details {
|
|||
.button:focus,
|
||||
.button.focused,
|
||||
.shopify-payment-button__button--unbranded:focus-visible,
|
||||
.shopify-payment-button [role='button']:focus-visible,
|
||||
.shopify-payment-button [role="button"]:focus-visible,
|
||||
.shopify-payment-button__button--unbranded:focus,
|
||||
.shopify-payment-button [role='button']:focus {
|
||||
.shopify-payment-button [role="button"]:focus {
|
||||
outline: solid transparent 1px;
|
||||
}
|
||||
|
||||
|
|
@ -3152,7 +3195,7 @@ details-disclosure > details {
|
|||
|
||||
.rte:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -3178,9 +3221,11 @@ details-disclosure > details {
|
|||
.rte img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
|
||||
border: var(--media-border-width) solid
|
||||
rgba(var(--color-foreground), var(--media-border-opacity));
|
||||
border-radius: var(--media-radius);
|
||||
box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
|
||||
box-shadow: var(--media-shadow-horizontal-offset)
|
||||
var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
|
||||
rgba(var(--color-shadow), var(--media-shadow-opacity));
|
||||
margin-bottom: var(--media-shadow-vertical-offset);
|
||||
}
|
||||
|
|
@ -3228,7 +3273,7 @@ details-disclosure > details {
|
|||
}
|
||||
|
||||
.shape--arch {
|
||||
clip-path: url('#Shape-Arch');
|
||||
clip-path: url("#Shape-Arch");
|
||||
}
|
||||
|
||||
.shape--blob {
|
||||
|
|
@ -3361,7 +3406,8 @@ details-disclosure > details {
|
|||
.animate--hover-3d-lift .customer button,
|
||||
.animate--hover-3d-lift .shopify-payment-button__button,
|
||||
.animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
|
||||
transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
|
||||
transition: transform var(--duration-long) ease,
|
||||
box-shadow var(--duration-long) ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
|
@ -3372,10 +3418,13 @@ details-disclosure > details {
|
|||
.animate--hover-3d-lift .customer button:not([disabled]):hover,
|
||||
.animate--hover-3d-lift .shopify-payment-button__button:hover,
|
||||
.animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
|
||||
transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
|
||||
transition: transform var(--duration-extended) ease,
|
||||
box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
|
||||
transform: rotate(1deg);
|
||||
box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
|
||||
0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05),
|
||||
1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
|
||||
0 0 0.5rem 0 rgba(255, 255, 255, 0),
|
||||
0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
|
||||
|
|
@ -3383,7 +3432,11 @@ details-disclosure > details {
|
|||
}
|
||||
|
||||
.animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
|
||||
.animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
|
||||
.animate--hover-3d-lift
|
||||
.collage__item
|
||||
.card-wrapper:hover
|
||||
.card--standard
|
||||
.card__inner {
|
||||
transform: rotate(0.5deg); /* Less intense rotation for collage items. */
|
||||
}
|
||||
|
||||
|
|
@ -3399,18 +3452,30 @@ details-disclosure > details {
|
|||
isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
|
||||
}
|
||||
|
||||
.animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
|
||||
.animate--hover-3d-lift
|
||||
.card-wrapper
|
||||
.card--shape.card--standard:not(.card--text)
|
||||
.card__inner {
|
||||
box-shadow: none;
|
||||
transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
|
||||
transition: transform var(--duration-long) ease,
|
||||
filter var(--duration-long) ease;
|
||||
}
|
||||
|
||||
.animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
|
||||
transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
|
||||
filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
|
||||
.animate--hover-3d-lift
|
||||
.card-wrapper:hover
|
||||
.card--shape.card--standard:not(.card--text)
|
||||
.card__inner {
|
||||
transition: transform calc(2 * var(--duration-extended)) ease,
|
||||
filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
|
||||
filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15))
|
||||
drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.animate--hover-3d-lift .card-wrapper:hover .card--card:after,
|
||||
.animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
|
||||
.animate--hover-3d-lift
|
||||
.card-wrapper:hover
|
||||
.card--standard
|
||||
.card__inner:after,
|
||||
.animate--hover-3d-lift
|
||||
.card-wrapper:hover
|
||||
.card--shape.card--standard:not(.card--text)
|
||||
|
|
@ -3428,7 +3493,7 @@ details-disclosure > details {
|
|||
.card--shape.card--standard:not(.card--text)
|
||||
.card__inner
|
||||
.card__media:before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -3438,7 +3503,7 @@ details-disclosure > details {
|
|||
|
||||
.animate--hover-3d-lift .card-wrapper .card--card:before,
|
||||
.animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -3446,7 +3511,8 @@ details-disclosure > details {
|
|||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
|
||||
transition: background-position calc(2 * var(--duration-extended)) ease,
|
||||
opacity var(--duration-default) ease;
|
||||
mix-blend-mode: overlay;
|
||||
background-size: 400% 100%;
|
||||
background-position: 90% 0;
|
||||
|
|
@ -3460,7 +3526,10 @@ details-disclosure > details {
|
|||
}
|
||||
|
||||
.animate--hover-3d-lift .card-wrapper:hover .card--card:before,
|
||||
.animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
|
||||
.animate--hover-3d-lift
|
||||
.card-wrapper:hover
|
||||
.card--standard
|
||||
.card__media:after {
|
||||
opacity: 0.2;
|
||||
transition: background-position 6s ease, opacity var(--duration-long) ease;
|
||||
background-position: left;
|
||||
|
|
@ -3469,7 +3538,7 @@ details-disclosure > details {
|
|||
|
||||
:root {
|
||||
--easter-egg: none;
|
||||
--sparkle: url('./sparkle.gif');
|
||||
--sparkle: url("./sparkle.gif");
|
||||
}
|
||||
|
||||
.animate--hover-vertical-lift .button:not(.button--tertiary),
|
||||
|
|
@ -3485,24 +3554,34 @@ details-disclosure > details {
|
|||
}
|
||||
|
||||
.animate--hover-vertical-lift .card-wrapper:hover .card--card,
|
||||
.animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
|
||||
.animate--hover-vertical-lift
|
||||
.card-wrapper:hover
|
||||
.card--standard
|
||||
.card__inner {
|
||||
transform: translateY(-0.75rem);
|
||||
}
|
||||
|
||||
.animate--hover-vertical-lift .card-wrapper:active .card--card,
|
||||
.animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
|
||||
.animate--hover-vertical-lift
|
||||
.card-wrapper:active
|
||||
.card--standard
|
||||
.card__inner {
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
.animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
|
||||
.animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
|
||||
.animate--hover-vertical-lift
|
||||
.button:not(.button--tertiary):not([disabled]):hover,
|
||||
.animate--hover-vertical-lift
|
||||
.shopify-challenge__button:not([disabled]):hover,
|
||||
.animate--hover-vertical-lift .customer button:not([disabled]):hover,
|
||||
.animate--hover-vertical-lift .shopify-payment-button__button:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
|
||||
.animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
|
||||
.animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
|
||||
.animate--hover-vertical-lift
|
||||
.button:not(.button--tertiary):not([disabled]):active,
|
||||
.animate--hover-vertical-lift
|
||||
.shopify-challenge__button:not([disabled]):active,
|
||||
.animate--hover-vertical-lift .customer button:not([disabled]):active,
|
||||
.animate--hover-vertical-lift .shopify-payment-button__button:active {
|
||||
transform: translateY(0);
|
||||
|
|
@ -3510,14 +3589,17 @@ details-disclosure > details {
|
|||
|
||||
.animate--hover-vertical-lift .button:not([disabled]):hover:after,
|
||||
.animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
|
||||
.animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
|
||||
.animate--hover-vertical-lift
|
||||
.shopify-payment-button__button:not([disabled]):hover:after {
|
||||
--border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on. */
|
||||
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
|
||||
rgba(var(--color-button-text), var(--border-opacity)),
|
||||
0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
|
||||
0 0 0 var(--buttons-border-width)
|
||||
rgba(var(--color-button), var(--alpha-button-background));
|
||||
}
|
||||
|
||||
.animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
|
||||
.animate--hover-vertical-lift
|
||||
.button:not([disabled]).button--secondary:hover:after {
|
||||
--border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue