Custom Dice!

BaronOfDice Verified independent store

→

.product-options{display:"none" !important} .product-info__block{ display = "none" } /* JH New 04-04-24 */ .product-info.product-info--sticky { width: 100% !important; background: white; } #product-media { display: none !important; } /* JH New 10-04-23 */ .product-grid__container>.product-grid__content { width: 100%; } .add-to-cart { width: 100%; } /* jh end */ .medium-up--one-half * {box-sizing: border-box;} .flex-container { display: flex; flex-direction: row; } .flex-item-left { padding: 10px; flex: 60%; text-align: center; } .flex-item-right { padding: 10px; flex: 40%; text-align: left; } .flex-btn-left { padding: 0 2px 0 0; flex: 50%; text-align: center; } .flex-btn-right { padding: 0 0 0 2px; flex: 50%; text-align: center; } /* Responsive layout - makes a one column-layout instead of two-column layout */ @media (max-width: 900px) { .flex-container { flex-direction: column; } } /*Flex for Inlay Hot Buttons*/ .hot-flex-container { display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: space-evenly; } .hot-flex-container * { /*min-width:30px;*/ /*min-height:20px;*/ /*border: 1px solid black;*/ /*border-radius: 5px;*/ /*margin: 0.5%;*/ /*flex: 0 0 24%;*/ margin: 3px; width: 25px; height: 25px; display: inline-block; vertical-align: middle; border-radius: 50%; box-sizing: border-box; cursor: pointer; transition: 0.3s ease-in-out; border: 1px solid #fff; box-shadow: 0px 0px 0px 2px #50505070; padding: 3px !important; } .hot-flex-item-left { background-color: #000000; } .hot-flex-item-left2 { background: repeating-linear-gradient(45deg, #fbe23b, #e0a91b 10px); } .hot-flex-item-right { background-color: #FFFFFF; } .hot-flex-item-right2 { background: repeating-linear-gradient(45deg, #B87333, #f0a865 10px); } /* Responsive layout - makes a one column-layout instead of a two-column layout */ @media (max-width: 120px) { .hot-flex-item-right, .hot-flex-item-right2, .hot-flex-item-left, .hot-flex-item-left2 { flex: 50%; } } @media (max-width: 60px) { .hot-flex-item-right, .hot-flex-item-right2, .hot-flex-item-left, .hot-flex-item-left2 { flex: 100%; } } /*End Flex for Inlay Hot Buttons*/ .col-two { display: grid; grid-template-columns: 50% 50%; justify-content: center; align-content: center; justify-items: stretch; align-items: stretch; column-gap: 10px; } .col-three { display: grid; grid-template-columns: 33% 33% 33%; justify-content: center; align-content: center; justify-items: stretch; align-items: stretch; column-gap: 10px; } @media (max-width: 465px) { .col-three { grid-template-columns: 100%; grid-template-rows: auto auto auto; } } fieldset.jester { border: 0; padding: 0; margin: 0 0 -12px; position: relative; } .jester input { clip: rect(0,0,0,0); overflow: hidden; position: absolute; height: 1px; width: 1px; } fieldset.jester label{ font-family: var(--typeBasePrimary),var(--typeBaseFallback); font-size: var(--typeBaseSize); letter-spacing: var(--typeBaseSpacing); line-height: var(--typeBaseLineHeight); position: relative; display: inline-block; font-weight: 400; padding: 7px 15px; margin: 0 8px 12px 0; background-color: #fff; background-color: var(--colorBody); box-shadow: 0 0 0 1px #e8e8e1; box-shadow: 0 0 0 1px var(--colorBorder); border-radius: 1px; overflow: hidden; cursor: pointer; text-align: center; width: 100%; } .jester label.disabled { color: #e8e8e1; box-shadow: 0 0 0 1px #e8e8e1; cursor: default; } .jester label.disabled:after { position: absolute; content: ""; left: 50%; top: 0; bottom: 0; border-left: 2px solid; border-color: #e8e8e1; border-color: var(--colorBorder); transform: rotate(45deg); } fieldset.jester legend{ font-family: var(--typeBasePrimary),var(--typeBaseFallback); font-size: var(--typeBaseSize); letter-spacing: var(--typeBaseSpacing); line-height: var(--typeBaseLineHeight); position: relative; display: inline-block; font-weight: 400; padding: 7px 15px; margin: 0 8px 12px 0; overflow: hidden; } .jester input:checked+label{ box-shadow: 0 0 0 2px var(--colorTextBody); } td label{ margin-bottom: 0px !important; } td { padding: 0px !important; } .upload{ padding: 10px 12px; min-height: auto; min-width: auto; border-radius: var(--gw_main_border_radius, 5px); text-transform: unset; box-shadow: none; background: 0 0; color: var(--gw_main_color_review, var(--gw_main_color, #000)); border: 1px solid var(--gw_main_color_review, var(--gw_main_color, #000)); transition: all .15s ease-in-out; } .upload:hover{ color: blue; border: 1px solid blue; } #avpoptions-container__v2, .variant-wrapper, .product__main-photos, #pipNo, #transSmoke, #clipRound, #dottedRound, #dottedRect { display: none; } #colorClear { padding: 0 5px !important; border: #0086fb 2px dashed; font-weight: bold; color: #0086fb; display: none; } #myRange { width: 100% !important; position: relative !important; margin: 0 0 20px 0 !important; } .apo-delete__file{ display: none !important; } /* The animation code */ #dottedRoundShadow, #dottedRectShadow { animation-name: dottedShadow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; filter:blur(3px); -webkit-filter: blur(3px); } #dottedRoundRed, #dottedRectRed { animation-name: dottedRed; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes dottedShadow { from { stroke-width:7.7166; opacity: 1; filter: blur(3px); -webkit-filter: blur(3px); } to { stroke-width:17.7166; opacity: 0.5; filter: blur(6px); -webkit-filter: blur(6px); } } @keyframes dottedRed { from { stroke-width:7.7166; opacity: 1; transform: translate(0px, 0px) scaleX(1) scaleY(1); } to { stroke-width:17.7166; opacity: 1; transform: translate(0px, -20px) scaleX(1) scaleY(1); } } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .qtySlideContainer { max-width: 350px; } .qtySlideContainer input{ border-radius: 15px; border-style: outset; border-color: #a4aeba; border-width: 3px; padding: 0px 3px; height: auto; } /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ .qtySlideContainer input::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; width: 15px; /* Set a specific slider handle width */ height: 15px; /* Slider handle height */ background: #173153; /* Green background */ cursor: pointer; /* Cursor on hover */ border-radius: 50%; } .qtySlideContainer input::-moz-range-thumb { width: 15px; /* Set a specific slider handle width */ height: 15px; /* Slider handle height */ background: #173153; /* Green background */ cursor: pointer; /* Cursor on hover */ border-radius: 50%; } .optionsPanel { width: 100%; max-width: 440px; padding: 56px 40px; border-radius: 40px; box-shadow: 0px 8px 40px rgb(128 128 128 / 15%); margin: auto; } datalist { display: flex; /*flex-direction: column;*/ justify-content: space-between; writing-mode: horizontal-tb; width: 100%; max-width: 350px; font-size: 10px; } #toggleOverlay { position: absolute; right: 0; bottom: 0; } #toggleOverlay2 { position: absolute; right: 0; top: 0; cursor: pointer; } #toggleOverlay label,#toggleOverlay2 label { margin-bottom: 0 !important; font-variant-caps: all-petite-caps; margin-top: -5px; } .jesterHot { display: flex; flex-wrap: wrap; } .jesterHot > label { margin-right: 12px; cursor: pointer; margin-bottom: 10px; } .jesterHot > label { } .jesterHot > label input { position: fixed; opacity: 0; } .jesterHot > label span { margin: 0; width: 30px; height: 30px; display: inline-block; vertical-align: middle; border-radius: 2px; box-sizing: border-box; cursor: pointer; transition: 0.3s ease-in-out; border: 1px solid #fff; box-shadow: 0px 0px 0px 2px #50505070; } #toggleOverlay3 { position: absolute; left: 0; top: 0; } #toggleOverlay3 svg{ width: 30px; cursor: pointer; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } #toggleOverlay3 label{ margin-bottom: 0 !important; font-variant-caps: all-petite-caps; margin-top: -5px; } /* AVIS CSS Copy */ .apo-file { width: 100%; height: 100%; } .apo-file input { display:none } .apo-file > label { min-width: 220px; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: 0.4s; } .apo-file > label > span { display: inline-block; text-align: center; font-size: 14px; color: #6d7175; line-height: 1.5; margin-top: 6px; } .apo-file__action { padding: 4px 16px; background: #fde5e5; font-weight: bold; color: #f82020 !important; border-radius: 6px; box-shadow: 0px 5px 10px -8px #df7474; transition: 0.4s; } .apo-file > label:hover .apo-file__action { transform: scale(1.15); transition: 0.4s; } .apo-file__lable { width: 100%; height: 100px; border: 1px dashed #888; border-radius: 6px; cursor: pointer; } #randomColors { width: 100px; height: 100px; fill: magenta; animation-name: randomColors; animation-duration: 8s; animation-iteration-count: infinite; } @keyframes randomColors { 0% {fill: magenta;} 25% {fill: orange;} 50% {fill: teal;} 75% {fill: purple;} 100% {fill: magenta;} } .loader { background-color: white; overflow: hidden; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; z-index: 100000; } .loader__element { border-radius: 100%; border: 15px solid #555; margin: 25px; } .loader__element:nth-child(1) { animation: preloader .6s ease-in-out alternate infinite; } .loader__element:nth-child(2) { animation: preloader .6s ease-in-out alternate .2s infinite; } .loader__element:nth-child(3) { animation: preloader .6s ease-in-out alternate .4s infinite; } .loader__element:nth-child(4) { animation: preloader .6s ease-in-out alternate infinite; } .loader__element:nth-child(5) { animation: preloader .6s ease-in-out alternate .2s infinite; } .loader__element:nth-child(6) { animation: preloader .6s ease-in-out alternate .4s infinite; } @keyframes preloader { 100% { transform: scale(2); } } #add_to_cart_btn { width: 100%; } /* Hide Buy w SHOP */ .shopify-payment-button__more-options, .shopify-payment-terms, .shopify-payment-button__button { display: none; } /* jh v1.0.1 patch 04-24-23*/ .apo-file__img{display:none;} #avp-watermark-footer{display:none !important;} //Function to adjust variants to defaults on reload function jesterRedefault(){ var p=document.querySelectorAll('input'); for(i=0;i Dark var scheme = ['#6D6E71','#BCBEC0','#808285']; var lum = 0.2; document.getElementById('watts').innerText='Dark'; break; case 'Dark': //Dark -> Normal var scheme = ['#F7941D','#FFF682','#FFDE17']; var lum = 0.5; document.getElementById('watts').innerText='Normal'; break; case 'Normal': //Normal -> Bright var scheme = ['#F16258','#FFDE17','#FDBA1D']; var lum = 0.8; document.getElementById('watts').innerText='Bright'; break; } var elems = ['transSquare','transSquarePearl','transSquareBack','transRound','transRoundPearl','transRoundBack']; for(i=0;i 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h * 100, s: s * 100, l: l * 100, }; } clamp(value) { if (value > 255) { value = 255; } else if (value < 0) { value = 0; } return value; } } //?? class Solver { constructor(target, baseColor) { this.target = target; this.targetHSL = target.hsl(); this.reusedColor = new Color(0, 0, 0); } solve() { const result = this.solveNarrow(this.solveWide()); return { values: result.values, loss: result.loss, filter: this.css(result.values), }; } solveWide() { const A = 5; const c = 15; const a = [60, 180, 18000, 600, 1.2, 1.2]; let best = { loss: Infinity }; for (let i = 0; best.loss > 25 && i < 3; i++) { const initial = [50, 20, 3750, 50, 100, 100]; const result = this.spsa(A, a, c, initial, 1000); if (result.loss < best.loss) { best = result; } } return best; } solveNarrow(wide) { const A = wide.loss; const c = 2; const A1 = A + 1; const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; return this.spsa(A, a, c, wide.values, 500); } spsa(A, a, c, values, iters) { const alpha = 1; const gamma = 0.16666666666666666; let best = null; let bestLoss = Infinity; const deltas = new Array(6); const highArgs = new Array(6); const lowArgs = new Array(6); for (let k = 0; k < iters; k++) { const ck = c / Math.pow(k + 1, gamma); for (let i = 0; i < 6; i++) { deltas[i] = Math.random() > 0.5 ? 1 : -1; highArgs[i] = values[i] + ck * deltas[i]; lowArgs[i] = values[i] - ck * deltas[i]; } const lossDiff = this.loss(highArgs) - this.loss(lowArgs); for (let i = 0; i < 6; i++) { const g = lossDiff / (2 * ck) * deltas[i]; const ak = a[i] / Math.pow(A + k + 1, alpha); values[i] = fix(values[i] - ak * g, i); } const loss = this.loss(values); if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; } } return { values: best, loss: bestLoss }; function fix(value, idx) { let max = 100; if (idx === 2 /* saturate */) { max = 7500; } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; } if (idx === 3 /* hue-rotate */) { if (value > max) { value %= max; } else if (value < 0) { value = max + value % max; } } else if (value < 0) { value = 0; } else if (value > max) { value = max; } return value; } } loss(filters) { // Argument is array of percentages. const color = this.reusedColor; color.set(0, 0, 0); color.invert(filters[0] / 100); color.sepia(filters[1] / 100); color.saturate(filters[2] / 100); color.hueRotate(filters[3] * 3.6); color.brightness(filters[4] / 100); color.contrast(filters[5] / 100); const colorHSL = color.hsl(); return ( Math.abs(color.r - this.target.r) + Math.abs(color.g - this.target.g) + Math.abs(color.b - this.target.b) + Math.abs(colorHSL.h - this.targetHSL.h) + Math.abs(colorHSL.s - this.targetHSL.s) + Math.abs(colorHSL.l - this.targetHSL.l) ); } css(filters) { function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); } return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`; } } function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, (m, r, g, b) => { return r + r + g + g + b + b; }); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? [ parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), ] : null; } function jesterColor(hex,target,gradient){ const rgb = hexToRgb(hex); if (rgb.length !== 3) { alert('Invalid format!'); return; } const color = new Color(rgb[0], rgb[1], rgb[2]); const solver = new Solver(color); const result = solver.solve(); var filterString = result.filter; filterString = filterString.substring(7,filterString.length-1); //Apply filter to the image & preview if(target=='userImage'){ //JH Add Inset Shadow var thisAttr = document.getElementById("dropColor").attributes; for(i=0;i 1){ x.children[i].children[0].attributes[1].value=rgb1[0]/255 + " " +rgb2[0]/255 ; //R x.children[i].children[1].attributes[1].value=rgb1[1]/255 + " " +rgb2[1]/255 ; //G x.children[i].children[2].attributes[1].value=rgb1[2]/255 + " " +rgb2[2]/255 ; //B } } }else{ var rgb1 = hex2rgb(hex); var rgb2 = hex2rgb(ColorLuminance(hex, -0.4)); for(i=0;i 1){ x.children[i].children[0].attributes[1].value=rgb1[0]/255 + " " +rgb2[0]/255 ; //R x.children[i].children[1].attributes[1].value=rgb1[1]/255 + " " +rgb2[1]/255 ; //G x.children[i].children[2].attributes[1].value=rgb1[2]/255 + " " +rgb2[2]/255 ; //B } } } } //Function to convert RGB to HEX function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } //Function to convert HEX to RGB function hex2rgb(x){ if(x.length == 7){ x = x.substring(1,7); } if(x.length != 6){ throw "Only six-digit hex colors are allowed."; } var aRgbHex = x.match(/.{1,2}/g); var aRgb = [ parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16) ]; return aRgb; } //Debug to Show Hidden Elements function jesterDebug(src){ var avis = document.getElementById('avpoptions-container__v2'); switch(src){ case "avis": avis.style.display='block'; avis.querySelector('textarea').innerText = 'hello'; //Enter text break; case "variant": document.querySelectorAll('.variant-wrapper') .forEach(element => element.style.display='block'); break; case "show": avis.style.display='block'; document.querySelectorAll('.variant-wrapper') .forEach(element => element.style.display='block'); break; case "hide": avis.style.display='none'; //Hide AVIS document.querySelectorAll('.variant-wrapper') .forEach(element => element.style.display='none'); break; case "avis2": avis.style.display = 'block'; var avistwo = avis.querySelectorAll('.avp-option'); for(i=0;i { console.log('The page has fully loaded'); //Event Listener for AVIS Upload document.querySelector('.apo-file').addEventListener("change", thisIs); //Set AVIS options var fieldSet = document.querySelectorAll('input'); for (i=0;i Show more