//Utils
.hidden {
display: none !important;
}
//Search Loader
.custom-loader {
position: relative;
left: 50%;
top: 154px;
transform: translateX(-50%);
p {
padding: 3rem 1rem 0;
text-align: center;
line-height: 1.3;
letter-spacing: 4px;
font-size: 1.125em;
}
.dice {
display: flex;
margin-top: 4rem;
justify-content: center;
}
.face {
margin: 0 -25px;
padding: 5px;
opacity: 0;
.card-img-loader {
max-height: 150px;
border-radius: 4px;
}
.first {
transform: rotate(-20deg);
position: relative;
top: 10px;
}
.second {
transform: rotate(-10deg);
position: relative;
top: -12px;
}
.third {
position: relative;
top: -19px;
}
.fourth {
transform: rotate(10deg);
position: relative;
top: -12px;
}
.fifth {
transform: rotate(20deg);
position: relative;
top: 10px;
}
&:nth-child(1) {
animation: waves 5s linear infinite;
}
&:nth-child(2) {
animation: waves 5s 0.2s linear infinite;
}
&:nth-child(3) {
animation: waves 5s 0.4s linear infinite;
}
&:nth-child(4) {
animation: waves 5s 0.6s linear infinite;
}
&:nth-child(5) {
animation: waves 5s 0.8s linear infinite;
}
.first-face {
justify-content: center;
align-items: center;
}
}
}
@keyframes waves {
0% {
transform: translateY(0);
opacity: 0;
}
4% {
transform: translateY(-25px);
opacity: 1;
}
8% {
transform: translateY(0);
opacity: 1;
}
70% {
opacity: 0;
}
}
.mtgSearch {
background-color: #f2f2f2;
}
.o-advanced-search {
display: grid;
grid-template-columns: 300px 1fr;
grid-column-gap: 24px;
padding: 40px;
.m-advanced-search {
border-radius: 4px;
.m-filter__btns {
display: grid;
grid-template-columns: 1fr;
grid-gap: 16px;
.a-button {
width: 100%;
&.resetFilters {
background: #e8e8e8;
border: #bdbdbd 1px solid;
}
}
}
.m-filter__matchBtns {
margin-top: 8px;
}
.m-filter__input {
padding-top: 16px;
display: flex;
flex-direction: column;
}
}
}
.m-advanced-search__sidebar {
border: #bdbdbd 1px solid;
background: white;
padding: 16px;
position: sticky;
top: 92px;
}
.mobileModal__header {
display: none;
}
.button--advancedSearch {
display: none;
}
.noscroll {
overflow: hidden !important;
overflow-x: hidden;
overflow-y: hidden;
}
a#binderpos-open-credit {
z-index: unset !important;
}
//Decklist
#decklistOpened {
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.optionTitle {
display: grid;
grid-template-columns: 50% 1fr 1fr 1fr;
}
.cardFields {
display: grid;
grid-template-columns: 50% 1fr 1fr 1fr;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
i.fas.fa-exchange-alt {
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
height: 10px;
}
.checkbox {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: none;
font-family: "Roboto", sans-serif;
color: var(--color-secondary);
font-size: 12px;
text-align: right;
vertical-align: top;
height: 50px;
em {
font-style: normal;
padding-left: 15px;
color: #0a162e;
}
p {
position: absolute;
top: 17px;
left: 73px;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
display: flex;
align-items: center;
color: #767676;
width: max-content;
}
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
&:checked ~ .checkmark {
background-color: var(--color-primary);
}
&:checked ~ .checkmark:after {
display: block;
}
}
.checkmark {
position: absolute;
top: 50%;
left: 0;
height: 25px;
width: 25px;
border: 1px solid #c2c2c2;
border-radius: 4px;
background-color: #dedede;
transform: translateY(-50%);
&:after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&:hover input ~ .checkmark {
background-color: var(--color-primary);
}
}
#decklistWrapper {
max-width: 648px;
position: fixed;
right: 0;
top: 0;
height: 100vh;
box-shadow: -20px 0px 20px 0px rgba(0, 0, 0, 0.5);
background: white;
width: 100%;
z-index: 9999999999;
span.backBtn {
position: fixed;
top: 30px;
right: 39px;
cursor: pointer;
color: var(--color-primary);
font-weight: 600;
font-style: normal;
padding-left: 10px;
font-family: "Roboto", sans-serif;
}
#decklist-close-button {
font-size: 30px !important;
padding-right: 10px !important;
color: var(--color-primary) !important;
font-size: 17px !important;
font-weight: 900 !important;
font-family: sans-serif !important;
top: 12px !important;
cursor: pointer;
&:hover {
color: var(--color-secondary) !important;
transition: all 0.5s;
}
}
.decklist-title {
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 30px;
line-height: 45px;
text-align: center;
color: var(--color-primary);
margin: 0;
margin-top: 21px;
border-bottom: 1px solid #ebeff2;
padding-bottom: 25px;
}
#decklistAction button {
background: var(--color-primary);
height: 80px;
border: none;
width: 100%;
position: absolute;
bottom: 0;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 30px;
align-items: center;
text-align: center;
color: #ffffff;
}
#deckListBody {
overflow: hidden scroll;
height: calc(100vh - 222px);
position: relative;
top: 47px;
select#gameType {
background: none;
border: none;
font-family: "Roboto", sans-serif;
position: fixed;
color: grey;
margin: 0 auto;
width: 168px;
display: block;
top: 65px;
right: 223px;
padding: 0 !important;
&:focus {
outline: none;
}
}
.decklistActions {
border-bottom: 1px solid #ebeff2;
height: 46px;
position: fixed;
width: 100%;
background: white;
z-index: 999;
max-width: 648px;
top: 93px;
.checkbox {
margin-top: -4px;
}
.checkmark {
top: 13px;
left: 25px;
transform: unset !important;
}
.totals {
top: 118px;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 210%;
display: flex;
align-items: center;
text-align: right;
color: #767676;
position: absolute;
top: 11px;
right: 39px;
width: fit-content;
em {
color: var(--color-secondary);
font-weight: 600;
font-style: normal;
padding-left: 10px;
}
}
}
.textImgWrapper {
width: 70%;
left: 50%;
position: absolute;
transform: translate(-50%, -56%);
text-align: center;
top: 50%;
span {
display: block;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 180%;
text-align: center;
color: #c7c7c7;
width: 231px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 16px;
}
}
#deck-builder {
overflow: auto;
background: transparent;
resize: vertical;
height: 68vh;
resize: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -52%);
width: 75%;
border: 1px solid #c7c7c7;
box-sizing: border-box;
border-radius: 5px;
}
.decklistItem {
padding: 10px;
height: 70px;
display: grid;
grid-template-columns: 35px 50px 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 5px;
.left-align {
text-align: left;
}
.optionsWrapper {
width: 100%;
display: none;
background: white;
z-index: 09999;
position: absolute;
border: 1px solid #ebeff2;
right: 5px;
margin-top: 61px;
color: grey;
box-shadow: 1px 1px 6px #dadada;
padding: 10px;
font-family: "Roboto", sans-serif;
font-size: 12px;
max-width: 633px;
left: 1px;
.optionStyle:hover {
cursor: pointer;
background: #d0e8e8;
color: #505050;
}
&:not(:first-child) {
text-align: center;
}
.optionsHeaders {
font-weight: 600;
font-size: 12px;
padding-bottom: 6px;
}
}
i.fas.fa-exchange-alt {
color: var(--color-secondary);
cursor: pointer;
webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
img {
width: 36px;
display: inline-block;
height: 50px;
}
.required {
display: inline-block;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
align-items: center;
text-align: center;
color: #797979;
text-align: center;
width: 43px;
vertical-align: top;
top: 50%;
position: relative;
transform: translateY(-50%);
height: 10px;
}
.linePrice {
display: inline-block;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 59px;
text-align: center;
color: #767676;
width: 110px;
vertical-align: top;
top: 50%;
position: relative;
transform: translateY(-50%);
}
.decklistTitle {
display: inline-block;
padding-left: 20px;
font-family: "Roboto", sans-serif;
font-style: normal;
font-size: 14px;
line-height: 17px;
color: var(--color-secondary);
font-weight: 500;
position: relative;
width: 244px;
em {
font-size: 12px;
&.setName {
font-weight: 600;
font-style: normal;
}
}
}
.decklistTitleNoStock {
display: inline-block;
padding-left: 20px;
font-family: "Roboto", sans-serif;
font-style: normal;
font-size: 14px;
line-height: 21px;
color: var(--color-secondary);
font-weight: 500;
position: relative;
width: 244px;
vertical-align: top;
top: 50%;
position: relative;
transform: translateY(-50%);
}
.noStock {
display: inline-block;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 210%;
text-align: right;
color: #d67f7f;
padding-left: 19px;
vertical-align: top;
top: 50%;
position: relative;
transform: translateY(-50%);
}
.unknown {
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
align-items: center;
text-align: right;
color: #969696;
display: inline-block;
float: right;
padding-right: 19px;
margin-top: 13px;
}
.qtyWrapper {
display: grid;
border: 1px solid #d8d8d8;
box-sizing: border-box;
border-radius: 5px;
grid-template-columns: 1fr 1fr 1fr;
input[type="number"] {
padding: 0;
text-align: center;
width: 35px;
border: none;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 100%;
align-items: center;
text-align: center;
color: #767676;
box-shadow: unset !important;
}
.minusQty,
.addQty {
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 59px;
align-items: center;
text-align: center;
color: var(--color-secondary);
padding: 0 10px;
cursor: pointer;
webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
&.maxed {
color: #d2d2d2;
cursor: unset;
}
}
}
}
}
}
}
.hide {
display: none;
}
.o-advanced-search .m-advanced-search .m-filter__btns--advancedSearch {
margin-top: 24px;
display: none;
}
.o-advanced-search .m-advanced-search .m-filter__btns--minMax {
grid-gap: 0;
}
.productCard__card.foiled .js-tilt-glare-inner,
.productPage__imageWrap.foiled .js-tilt-glare-inner {
background-image: linear-gradient(
45deg,
rgba(255, 165, 0, 0.3),
rgba(255, 255, 0, 0.3),
rgba(0, 128, 0, 0.3),
rgba(0, 255, 255, 0.3),
rgba(0, 0, 255, 0.3),
rgba(238, 130, 238, 0.3)
) !important;
background-image: conic-gradient(
from 3.1416rad at 0% 50%,
rgba(255, 165, 0, 0.3),
rgba(255, 255, 0, 0.3),
rgba(0, 128, 0, 0.3),
rgba(0, 255, 255, 0.3),
rgba(0, 0, 255, 0.3),
rgba(238, 130, 238, 0.3)
) !important;
border-radius: 12px;
}
.productCard__card.foiled .js-tilt-glare,
.productPage__imageWrap.foiled .js-tilt-glare {
background-image: linear-gradient(
45deg,
rgba(255, 165, 0, 0.15),
rgba(255, 255, 0, 0.15),
rgba(0, 128, 0, 0.15),
rgba(0, 255, 255, 0.15),
rgba(0, 0, 255, 0.15),
rgba(238, 130, 238, 0.15)
) !important;
border-radius: 12px;
}
.bxModal {
.checkbox {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: none;
font-family: "Roboto", sans-serif;
color: #25878c;
font-size: 12px;
text-align: right;
vertical-align: top;
height: 50px;
em {
font-style: normal;
padding-left: 15px;
color: #0a162e;
}
p {
position: absolute;
top: 17px;
left: 73px;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
display: flex;
align-items: center;
color: #767676;
}
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
&:checked ~ .checkmark {
background-color: #eb7c00;
}
&:checked ~ .checkmark:after {
display: block;
}
}
.checkmark {
position: absolute;
top: 50%;
left: 0;
height: 30px;
width: 29px;
border: 1px solid #c2c2c2;
border-radius: 4px;
background-color: #dedede;
transform: translateY(-50%);
&:after {
content: "";
position: absolute;
display: none;
left: 9px;
top: 7px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&:hover input ~ .checkmark {
background-color: #eb7c00;
}
}
}