/* * Mugsocks – Product Options Complete Styles (Apple-like) * ======================================================= * Includes: * 1. Inline colour selector (circle chip + label) * 2. Apple-style popup colour modal (created by JS) * 3. Custom + / - qty controls (esp. mobile) * 4. Purple "Total with options" bar */ /* =========================== * 1. INLINE COLOUR SELECTOR * =========================== */ .mugsocks-colour-row { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .mugsocks-colour-row-text { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 15px; color: #4b5563; white-space: nowrap; } /* Round Apple-like chip using native */ #mugsocks_sock_colour.mugsocks-colour-picker { -webkit-appearance: none; appearance: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid #ccc; background: transparent; cursor: pointer; box-sizing: border-box; display: inline-block; } #mugsocks_sock_colour.mugsocks-colour-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; } #mugsocks_sock_colour.mugsocks-colour-picker::-webkit-color-swatch { border: none; border-radius: 50%; } #mugsocks_sock_colour.mugsocks-colour-picker::-moz-color-swatch { border: none; border-radius: 50%; } #mugsocks_sock_colour.mugsocks-colour-picker:focus { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #7c3aed; } #mugsocks_sock_colour.mugsocks-colour-picker:active { transform: scale(0.96); transition: transform 0.08s ease-out; } @media (max-width: 480px) { #mugsocks_sock_colour.mugsocks-colour-picker { width: 38px; height: 38px; } .mugsocks-colour-row-text { font-size: 14px; } } /* ==================================== * 2. APPLE-STYLE POPUP COLOUR MODAL * ==================================== * This modal is injected into by JS. */ .mugsocks-colour-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; /* default hidden; JS toggles .is-visible */ align-items: center; justify-content: center; z-index: 9999; } .mugsocks-colour-backdrop.is-visible { display: flex; } .mugsocks-colour-modal { width: min(420px, 92vw); background: rgba(255,255,255,0.96); border-radius: 18px; padding: 20px 18px 10px; box-shadow: 0 20px 40px rgba(0,0,0,0.25); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; box-sizing: border-box; max-height: 90vh; overflow: auto; } .mugsocks-colour-modal h2 { margin: 0 0 16px; text-align: center; font-weight: 600; font-size: 18px; color: #111827; } .mugsocks-colour-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding: 4px 6px 14px; } @media (max-width: 480px) { .mugsocks-colour-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } .mugsocks-colour-swatch { border: none; border-radius: 12px; height: 52px; cursor: pointer; padding: 0; outline: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); transition: transform 0.1s ease, box-shadow 0.1s ease; background-clip: padding-box; display: flex; align-items: center; justify-content: center; } .mugsocks-colour-swatch:active { transform: scale(0.96); } .mugsocks-colour-swatch.is-selected { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #7c3aed; } .mugsocks-chosen-wrapper { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 6px 6px 12px; } .mugsocks-chosen-label { font-size: 15px; color: #4b5563; white-space: nowrap; } .mugsocks-chosen-preview { width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); background: #f3f4f6; } .mugsocks-button-row { display: flex; justify-content: space-between; padding: 8px 4px 2px; gap: 6px; } .mugsocks-modal-btn { flex: 1 1 0; border: none; background: transparent; padding: 8px 18px; font-size: 17px; font-weight: 400; color: #7c3aed; border-radius: 12px; text-align: center; } .mugsocks-modal-btn-secondary { color: #6b7280; } .mugsocks-modal-btn-primary { background: rgba(124,58,237,0.12); } .mugsocks-modal-btn:active { background: rgba(120,120,128,0.16); } /* ======================================= * 3. CUSTOM + / - QUANTITY CONTROLS * ======================================= * JS wraps each number input in .mugsocks-sock-options * with .mugsocks-qty-wrapper and adds +/- buttons. */ .mugsocks-qty-wrapper { display: inline-flex; align-items: stretch; border: 1px solid #d1d5db; border-radius: 999px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } .mugsocks-qty-btn { border: none; background: #f3f4f6; padding: 4px 10px; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; min-width: 32px; } .mugsocks-qty-btn:active { background: #e5e7eb; } .mugsocks-qty-input { border: none; width: 50px; text-align: center; font-size: 15px; padding: 4px 6px; -moz-appearance: textfield; } /* hide native spinners inside our custom control */ .mugsocks-qty-input::-webkit-inner-spin-button, .mugsocks-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @media (max-width: 480px) { .mugsocks-qty-input { width: 44px; font-size: 16px; } .mugsocks-qty-btn { min-width: 34px; padding-inline: 12px; } } /* container where original HTML lives */ .mugsocks-sock-options input[type="number"] { max-width: 120px; } /* ==================================== * 4. PURPLE "TOTAL WITH OPTIONS" BAR * ==================================== * Update selectors to match your actual markup if needed. */ .mugsocks-options-total, .mugsocks-total-with-options, .mugsocks-sock-options .options-total, .mugsocks-dynamic-total { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #4c1d95; padding: 12px 16px; border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 15px; margin-top: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); } .mugsocks-options-total strong, .mugsocks-total-with-options strong, .mugsocks-sock-options .options-total strong, .mugsocks-dynamic-total strong { font-weight: 600; } /* Rainbow custom pill inside the Apple-style colour modal */ .mugsocks-colour-swatch.mugsocks-colour-swatch-custom { background: linear-gradient(135deg, #ff3b30, #ff9500, #ffcc00, #34c759, #5ac8fa, #007aff, #5856d6, #ff2d55); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 0 0 1px rgba(0,0,0,0.15); } .mugsocks-colour-swatch.mugsocks-colour-swatch-custom .mugsocks-colour-swatch-label { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); letter-spacing: 0.02em; } .mugsocks-dynamic-total { display: flex; flex-direction: column; gap: 6px; } .mugsocks-dynamic-total-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .mugsocks-dynamic-breakdown { list-style: none; margin: 0; margin-top: 4px; padding: 0; font-size: 13px; opacity: 0.9; } .mugsocks-dynamic-breakdown li { display: flex; justify-content: space-between; gap: 12px; } .mugsocks-breakdown-label { flex: 1 1 auto; } .mugsocks-breakdown-amount { flex: 0 0 auto; font-weight: 500; } /* Layout for total-with-options area */ .mugsocks-dynamic-total-main, .mugsocks-total-with-options { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .mugsocks-total-label, .mugsocks-dynamic-total-label { font-weight: 600; } .mugsocks-total-amount, .mugsocks-dynamic-total-amount { font-weight: 700; } .mugsocks-total-note { display: block; margin-top: 4px; font-size: 12px; color: #6b7280; } .mugsocks-dynamic-breakdown { margin: 8px 0 0; padding-left: 0; list-style: none; font-size: 13px; color: #6b7280; } .mugsocks-dynamic-breakdown li { display: flex; justify-content: space-between; gap: 6px; } /* ==================================== * Modern upload area + cropper modal * ==================================== */ /* Container */ .mugsocks-uploader { margin-top: 1.25rem; } .mugsocks-uploader > label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: #111827; } /* Drag & drop area */ .mugsocks-dropzone { border-radius: 14px; border: 2px dashed #d8b4fe; background: #faf5ff; padding: 18px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .mugsocks-dropzone-icon { font-size: 24px; line-height: 1; } .mugsocks-dropzone-text { font-size: 14px; color: #4b5563; } .mugsocks-dropzone-or { font-weight: 500; color: #6b21a8; } .mugsocks-dropzone .mugsocks-browse-btn.button { margin-left: auto; } .mugsocks-dropzone--over, .mugsocks-dropzone:focus-within { border-color: #a855f7; background: #f3e8ff; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25); transform: translateY(-1px); } /* Upload thumbnails */ .mugsocks-upload-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .mugsocks-upload-thumb { width: 110px; border-radius: 12px; background: #f9fafb; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); padding: 6px; text-align: center; position: relative; overflow: hidden; } .mugsocks-thumb-image { border-radius: 8px; overflow: hidden; } .mugsocks-thumb-image img { display: block; width: 100%; height: 90px; object-fit: cover; } .mugsocks-thumb-meta { margin-top: 4px; } .mugsocks-thumb-id { display: block; font-size: 11px; color: #9ca3af; } .mugsocks-thumb-remove { display: inline-block; margin-top: 2px; font-size: 12px; color: #dc2626; cursor: pointer; text-decoration: underline; } /* Modal + cropper pop-out */ .mugsocks-upload-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 9999; padding: 32px 16px; box-sizing: border-box; } .mugsocks-upload-modal-inner { position: relative; max-width: 720px; margin: 0 auto; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.45); overflow: hidden; display: flex; flex-direction: column; } .mugsocks-upload-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .mugsocks-upload-modal-title { font-weight: 600; } .mugsocks-upload-modal-body { padding: 18px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; } .mugsocks-upload-crop-wrap { min-height: 260px; background: #000; border-radius: 12px; overflow: hidden; } .mugsocks-upload-controls { display: flex; flex-direction: column; gap: 8px; } .mugsocks-upload-controls .button { width: 100%; justify-content: center; } /* Progress bar */ .mugsocks-progress { margin-top: 12px; height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .mugsocks-progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, #a855f7, #6366f1); } /* Upload overlay inside modal */ .mugsocks-upload-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.65); } .mugsocks-upload-overlay-inner { text-align: center; color: #f9fafb; } .mugsocks-upload-overlay-title { font-weight: 600; margin-bottom: 4px; } .mugsocks-upload-overlay-percent { display: block; font-size: 24px; font-weight: 700; } /* Responsive tweaks */ @media (max-width: 768px) { .mugsocks-upload-modal-body { grid-template-columns: minmax(0, 1fr); } .mugsocks-upload-modal { padding: 24px 12px; } } /* Extra spacing above add-to-cart */ .mugsocks-dynamic-total { margin-bottom: 24px; } /* Modern file input overlay – hide native "Choose files" button */ .mugsocks-browse-btn { position: relative; overflow: hidden; } .mugsocks-browse-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }