/* ============================================================
* studio-polish.css — design studio interface
*
* Reimagined toolbar + left tab rail for product_customization.php.
* Linked LAST so it overrides the legacy customizer CSS without
* editing the fragile ~4,200-line base stylesheet.
*
* The customizer ships inconsistent PNG button icons (with text
* baked in) and white tab labels on a light rail (invisible).
* This file:
* - hides the PNG icons and rebuilds every button with one
* consistent FontAwesome 4.7 icon + a real CSS label
* - rebuilds the left rail as a readable vertical nav
* - leaves the canvas, sizing and all JS hooks untouched
*
* Scoped to .create_design_outer (the customizer ).
* ============================================================ */
.create_design_outer {
--st-teal: #a2d8d6;
--st-teal-hover: #84c1bf;
--st-ink: #1c3a39;
--st-ink-soft: #2d4f4e;
--st-cream: #f4ede4;
--st-cream-soft: #faf6f0;
--st-tan: #e7d9c8;
--st-line: #e8e3da;
--st-muted: #6f6a63;
}
/* ---- 0. Lock the page scroll ------------------------------
* The studio is a fixed 1800px-wide app but its real content
* (rail + panels + canvas) only fills ~1357px, leaving dead
* margin you could scroll into and get lost in. Lock the page
* so it can't drift into that empty space — the design panel
* still scrolls internally, and the canvas is untouched.
* This stylesheet only loads on the customizer, so html/body
* here means the studio page only. */
html, body {
overflow: hidden !important;
}
/* ---- 1. Base typography ----------------------------------- */
.create_design_outer,
.create_design_outer p,
.create_design_outer a,
.create_design_outer span,
.create_design_outer div,
.create_design_outer button,
.create_design_outer input,
.create_design_outer select,
.create_design_outer label {
font-family: 'Quicksand', sans-serif;
}
.create_design_outer h1,
.create_design_outer h2,
.create_design_outer h3,
.create_design_outer h4 {
font-family: 'Quicksand', sans-serif;
color: var(--st-ink);
letter-spacing: 0.01em;
}
.create_design_outer .fa,
.create_design_outer [class^="fa-"],
.create_design_outer [class*=" fa-"] {
font-family: FontAwesome !important;
}
/* ============================================================ */
/* 2. LEFT TAB RAIL (.left_pinkblock) */
/* Was: light rail + white labels = invisible text. */
/* Now: clean white vertical nav, readable ink labels, */
/* consistent FontAwesome glyphs, clear active state. */
/* ============================================================ */
.create_design_outer .left_pinkblock {
background: #ffffff !important;
border-right: 1px solid var(--st-line);
box-shadow: 1px 0 6px rgba(0,0,0,0.04);
}
.create_design_outer .left_pinkblock .options {
border: 0 !important;
border-bottom: 1px solid #f1ede5 !important;
line-height: normal !important;
}
.create_design_outer .left_pinkblock .options:last-child {
border-bottom: 0 !important;
}
/* tab button — icon stacked over label, both centred */
.create_design_outer .left_pinkblock .options a {
display: block !important;
padding: 16px 3px !important;
text-align: center;
text-decoration: none !important;
color: var(--st-ink-soft) !important;
transition: background .16s ease, color .16s ease;
}
/* drop the legacy PNG icon + stray
spacers */
.create_design_outer .left_pinkblock .options a img { display: none !important; }
.create_design_outer .left_pinkblock .options a br { display: none !important; }
/* new consistent glyph */
.create_design_outer .left_pinkblock .options a::before {
font-family: FontAwesome !important;
display: block;
font-size: 21px;
line-height: 1;
margin-bottom: 8px;
color: inherit;
}
/* the label text node sits right after ::before — kept compact so the
* longest label ("BACKGROUND COLOR") fits inside the 90px rail. Words
* wrap only at spaces (never mid-word), so it reads BACKGROUND / COLOR. */
.create_design_outer .left_pinkblock .options a {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.012em;
line-height: 1.3;
text-transform: uppercase;
overflow-wrap: normal;
word-break: normal;
}
/* per-tab glyphs */
.create_design_outer .left_pinkblock .product_icon::before { content: "\f1b2"; } /* cube */
.create_design_outer .left_pinkblock .art_icon::before { content: "\f1fc"; } /* paint-brush */
.create_design_outer .left_pinkblock .upload_icon::before { content: "\f0ee"; } /* cloud-upload */
.create_design_outer .left_pinkblock .text_icon::before { content: "\f031"; } /* font */
.create_design_outer .left_pinkblock .color_icon::before { content: "\f043"; } /* tint */
/* hover + active */
.create_design_outer .left_pinkblock .options a:hover {
background: var(--st-cream) !important;
color: var(--st-ink) !important;
}
.create_design_outer .left_pinkblock .options a.active {
background: var(--st-teal) !important;
color: var(--st-ink) !important;
box-shadow: inset 3px 0 0 var(--st-ink);
}
/* ============================================================ */
/* 3. TOP TOOLBAR (.top_iconarea) */
/* Was: mismatched PNG icons with baked-in text labels. */
/* Now: one white surface, every action rebuilt as a tidy */
/* icon-over-label button; Add to Cart promoted to a pill. */
/* ============================================================ */
.create_design_outer .top_iconarea {
background: #ffffff;
border-bottom: 1px solid var(--st-line);
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
/* The studio is a fixed 1800px-wide app; on a narrower viewport its
* right edge (where Add to Cart floats) was clipped off-screen.
* Cap the toolbar to the visible width so every action stays in
* reach. The canvas area keeps its own width — untouched. */
box-sizing: border-box;
max-width: calc(100vw - 90px);
padding: 9px 18px !important;
line-height: normal;
}
.create_design_outer .top_iconarea .block {
border: 0 !important;
padding: 0 3px !important;
margin: 0 !important;
display: inline-block;
vertical-align: middle;
}
/* subtle group separators between tool clusters */
.create_design_outer .top_iconarea .block + .block {
border-left: 1px solid #efece6 !important;
}
/* the button itself — note: no `display` override here, so the
* inline `display:none` on the Show Grid / Show Safe Area toggle
* partners keeps them hidden until the JS reveals them. */
.create_design_outer .top_iconarea .block a {
margin: 0 2px !important;
min-width: 62px;
padding: 7px 9px !important;
border-radius: 9px;
text-align: center;
text-decoration: none !important;
vertical-align: middle;
transition: background .15s ease, transform .1s ease;
}
.create_design_outer .top_iconarea .block a:hover {
background: var(--st-cream);
}
.create_design_outer .top_iconarea .block a:active {
transform: translateY(1px);
}
/* hide every legacy PNG icon — each button is fully rebuilt below */
.create_design_outer .top_iconarea .block a img { display: none !important; }
/* glyph (::before) + label (::after), stacked */
.create_design_outer .top_iconarea .block a::before {
font-family: FontAwesome !important;
display: block;
font-size: 17px;
line-height: 1;
color: var(--st-ink-soft);
transition: color .15s ease;
}
.create_design_outer .top_iconarea .block a::after {
display: block;
margin-top: 5px;
font-family: 'Quicksand', sans-serif;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.015em;
color: var(--st-muted);
white-space: nowrap;
}
.create_design_outer .top_iconarea .block a:hover::before { color: var(--st-ink); }
/* disabled (e.g. redo before any action) */
.create_design_outer .top_iconarea .block a[disabled],
.create_design_outer .top_iconarea .block a.disabled {
opacity: 0.4;
pointer-events: none;
}
/* per-button glyph + label */
.create_design_outer #undo_btn::before { content: "\f0e2"; } /* undo */
.create_design_outer #undo_btn::after { content: "Undo"; }
.create_design_outer #redo_btn::before { content: "\f01e"; } /* repeat */
.create_design_outer #redo_btn::after { content: "Redo"; }
.create_design_outer #SaveTheDraft::before { content: "\f0c7"; } /* floppy */
.create_design_outer #SaveTheDraft::after { content: "Save Draft"; }
.create_design_outer #saveme::before { content: "\f07b"; } /* folder */
.create_design_outer #saveme::after { content: "My Designs"; }
.create_design_outer .top_iconarea a[onclick*="removeme"]::before { content: "\f014"; } /* trash */
.create_design_outer .top_iconarea a[onclick*="removeme"]::after { content: "Remove"; }
.create_design_outer .top_iconarea a[onclick*="duplicate"]::before { content: "\f24d"; } /* clone */
.create_design_outer .top_iconarea a[onclick*="duplicate"]::after { content: "Duplicate"; }
.create_design_outer .top_iconarea a[onclick*="cleanAll"]::before { content: "\f12d"; } /* eraser */
.create_design_outer .top_iconarea a[onclick*="cleanAll"]::after { content: "Clear Canvas"; }
.create_design_outer #grid_block_hide::before { content: "\f00a"; } /* th */
.create_design_outer #grid_block_hide::after { content: "Hide Grid"; }
.create_design_outer #grid_block_show::before { content: "\f009"; } /* th-large */
.create_design_outer #grid_block_show::after { content: "Show Grid"; }
.create_design_outer #hideSafeArea::before { content: "\f125"; } /* crop */
.create_design_outer #hideSafeArea::after { content: "Hide Safe Area"; }
.create_design_outer #showSafeArea::before { content: "\f125"; }
.create_design_outer #showSafeArea::after { content: "Show Safe Area"; }
.create_design_outer #previewbtn::before { content: "\f06e"; } /* eye */
.create_design_outer #previewbtn::after { content: "Preview"; }
.create_design_outer #my_designs::before { content: "\f1b2"; } /* cube */
.create_design_outer #my_designs::after { content: "Products"; }
.create_design_outer .top_iconarea a[data-target="#NewTemplate"]::before { content: "\f0c7"; }
.create_design_outer .top_iconarea a[data-target="#NewTemplate"]::after { content: "Save Product"; }
/* Add to Cart — promoted to a primary teal pill, pushed right */
.create_design_outer .top_iconarea .block:has(#addtocart) {
float: right;
border-left: 0 !important;
}
.create_design_outer #addtocart {
background: var(--st-teal) !important;
min-width: 0;
padding: 10px 22px !important;
border-radius: 22px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.create_design_outer #addtocart:hover { background: var(--st-teal-hover) !important; }
.create_design_outer #addtocart::before {
content: "\f07a"; /* shopping-cart */
display: inline-block;
vertical-align: middle;
font-size: 16px;
color: var(--st-ink) !important;
margin-right: 8px;
}
.create_design_outer #addtocart::after {
content: "Add to Cart";
display: inline-block;
vertical-align: middle;
margin-top: 0;
font-size: 13px;
font-weight: 600;
color: var(--st-ink) !important;
}
/* artist-only "Variants" toggle — match the toolbar voice */
.create_design_outer .vp-toggle-btn {
font-family: 'Quicksand', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--st-ink) !important;
background: var(--st-cream) !important;
border: 1px solid var(--st-line) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
transition: background .15s ease;
}
.create_design_outer .vp-toggle-btn:hover { background: var(--st-tan) !important; }
/* ============================================================ */
/* 4. Product browser (.browseproduct) */
/* ============================================================ */
.create_design_outer .browseproduct {
background: var(--st-cream-soft);
}
.create_design_outer .browseproduct p {
color: var(--st-ink);
}
.create_design_outer .browseproduct li,
.create_design_outer .browseproduct .product,
.create_design_outer .browseproduct .singleproduct,
.create_design_outer .browseproduct .col-md-6 > a,
.create_design_outer .browseproduct .col-md-6 > div {
border-radius: 10px;
transition: box-shadow .2s ease, transform .15s ease;
}
.create_design_outer .browseproduct li:hover,
.create_design_outer .browseproduct .product:hover,
.create_design_outer .browseproduct .singleproduct:hover {
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.create_design_outer .browseproduct img { border-radius: 6px; }
.create_design_outer .browseproduct .productdetail img,
.create_design_outer .browseproduct .otherproducts img {
width: 100%;
max-height: 130px;
object-fit: contain;
background: #ffffff;
}
.create_design_outer .browseproduct .productdetail p,
.create_design_outer .browseproduct .otherproducts p {
font-size: 13px;
font-weight: 500;
line-height: 1.35;
color: var(--st-ink);
margin-top: 8px;
}
/* "Browse Products" pill (rendered as a styled ) */
.create_design_outer .browseproduct p[style*="border-radius"] {
background: var(--st-teal) !important;
color: var(--st-ink) !important;
font-weight: 600 !important;
letter-spacing: 0.03em;
padding: 10px 22px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: background .2s ease;
}
.create_design_outer .browseproduct p[style*="border-radius"]:hover {
background: var(--st-teal-hover) !important;
}
/* ---- 5. Primary action buttons (in-panel) ----------------- */
.create_design_outer .create_save_btn,
.create_design_outer .create_save_btn_outer a,
.create_design_outer a.updated_template {
background: var(--st-teal) !important;
color: var(--st-ink) !important;
border: 0 !important;
border-radius: 22px !important;
font-weight: 600 !important;
letter-spacing: 0.03em;
padding: 9px 24px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: background .2s ease, transform .12s ease !important;
}
.create_design_outer .create_save_btn:hover,
.create_design_outer .create_save_btn_outer a:hover,
.create_design_outer a.updated_template:hover {
background: var(--st-teal-hover) !important;
transform: translateY(-1px);
}
/* ---- 6. Modals -------------------------------------------- */
.create_design_outer .product_customizer_modal .modal-dialog,
.create_design_outer .modal-window > div {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 50px rgba(0,0,0,0.22);
border: 0;
}
.create_design_outer .product_customizer_modal .modal-header,
.create_design_outer #savechanges_modal .modal-header {
background: var(--st-cream);
border-bottom: 1px solid var(--st-line);
padding: 16px 22px;
}
.create_design_outer .product_customizer_modal .modal-header h3,
.create_design_outer .product_customizer_modal .modal-header .modal-title,
.create_design_outer #savechanges_modal .modal-header .modal-title {
font-weight: 600;
color: var(--st-ink);
}
.create_design_outer .product_customizer_modal .modal-body { padding: 22px; }
.create_design_outer .product_customizer_modal .modal-body input[type="submit"],
.create_design_outer .product_customizer_modal .modal-body .btn {
background: var(--st-teal);
color: var(--st-ink);
border: 0;
border-radius: 22px;
font-weight: 600;
padding: 9px 22px;
transition: background .2s ease;
}
.create_design_outer .product_customizer_modal .modal-body input[type="submit"]:hover,
.create_design_outer .product_customizer_modal .modal-body .btn:hover {
background: var(--st-teal-hover);
}
.create_design_outer #boxes #dialog {
border-radius: 14px !important;
overflow: hidden;
box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
/* ---- 7. Panels (.left / .right) --------------------------- */
.create_design_outer .left,
.create_design_outer .right { background: #ffffff; }
.create_design_outer .catheadding,
.create_design_outer .inputheading,
.create_design_outer .shapesmenu > p:first-child {
font-weight: 600;
color: var(--st-ink);
}
.create_design_outer .inputheading {
background: var(--st-cream-soft) !important;
border-radius: 8px;
}
.create_design_outer .catheadding,
.create_design_outer .row.catheadding {
border-bottom: 1px solid var(--st-line);
padding-bottom: 8px;
}
/* ---- 8. Colour swatches ----------------------------------- */
/* Colour swatches render as circles — the picker row shown when a
design element is selected, the expanded "all colours" view, and the
font/outline/shape colour pickers (all share the .square class). */
.create_design_outer .mainsquare,
.create_design_outer .square {
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.08);
transition: transform .12s ease, box-shadow .12s ease;
}
.create_design_outer .mainsquare:hover,
.create_design_outer .square:hover {
transform: scale(1.06);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* ---- 9. Draw tool buttons --------------------------------- */
.create_design_outer .toolrow .dtool,
.create_design_outer .tooldiv .btn {
border-radius: 8px !important;
border: 1px solid var(--st-line) !important;
background: #fff !important;
color: var(--st-ink) !important;
transition: background .15s ease, border-color .15s ease;
}
.create_design_outer .toolrow .dtool:hover,
.create_design_outer .tooldiv .btn:hover {
background: var(--st-cream) !important;
border-color: var(--st-teal) !important;
}
/* ---- 10. Form controls ------------------------------------ */
.create_design_outer select,
.create_design_outer input[type="text"],
.create_design_outer input[type="number"],
.create_design_outer input[type="email"] {
border: 1px solid var(--st-line);
border-radius: 8px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.create_design_outer select:focus,
.create_design_outer input[type="text"]:focus,
.create_design_outer input[type="number"]:focus,
.create_design_outer input[type="email"]:focus {
border-color: var(--st-teal);
box-shadow: 0 0 0 3px rgba(162,216,214,0.25);
outline: none;
}
/* ---- 11. Branded scrollbars ------------------------------- */
.create_design_outer .browseproduct ::-webkit-scrollbar,
.create_design_outer .left ::-webkit-scrollbar,
.create_design_outer .right ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.create_design_outer .browseproduct ::-webkit-scrollbar-thumb,
.create_design_outer .left ::-webkit-scrollbar-thumb,
.create_design_outer .right ::-webkit-scrollbar-thumb {
background: #cfc8bd;
border-radius: 8px;
}
.create_design_outer .browseproduct ::-webkit-scrollbar-track,
.create_design_outer .left ::-webkit-scrollbar-track,
.create_design_outer .right ::-webkit-scrollbar-track {
background: transparent;
}
/* ---- 12. SVG colour editor — back button ------------------ */
.create_design_outer .studio-color-back {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 0 16px;
padding: 8px 16px;
background: #ffffff;
border: 1px solid var(--st-line);
border-radius: 20px;
font-family: 'Quicksand', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--st-ink);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.create_design_outer .studio-color-back:hover {
background: var(--st-cream);
border-color: var(--st-teal);
}
.create_design_outer .studio-color-back .fa { font-size: 11px; }
/* ---- 13. SVG colour editor — region/tile selection ---------
* The active colour tile (set by svgcolorChange) gets a clear ring
* so the user can see which colour they are editing. .region-picked
* is a brief flash applied when the tile is reached by clicking the
* matching region on the canvas (studio-color-pick.js). */
.create_design_outer .artcolors_all_show .clr {
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.create_design_outer .artcolors_all_show .clr:hover {
transform: scale(1.08);
}
.create_design_outer .artcolors_all_show .clr.active {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--st-ink);
}
@keyframes studioRegionPick {
0% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st-teal); }
100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st-ink); }
}
.create_design_outer .artcolors_all_show .clr.region-picked {
animation: studioRegionPick .65s ease;
}
/* ---- 14. Eyedropper tool ----------------------------------- */
/* sits in the same row as the SVG colour tiles */
.create_design_outer .artcolors-pick-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 6px;
}
.create_design_outer .artcolors-pick-row .artcolors_all_show {
flex: 1;
margin: 0;
}
.create_design_outer .studio-eyedropper {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--st-line);
border-radius: 9px;
color: var(--st-ink-soft);
font-size: 16px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.create_design_outer .studio-eyedropper:hover {
background: var(--st-cream);
border-color: var(--st-teal);
color: var(--st-ink);
}
/* armed state */
.create_design_outer .studio-eyedropper.is-active {
background: var(--st-teal);
border-color: var(--st-teal);
color: var(--st-ink);
box-shadow: 0 0 0 3px rgba(162,216,214,0.35);
}
/* while armed, the cursor becomes an eyedropper across the studio */
.create_design_outer.studio-eyedropper-on,
.create_design_outer.studio-eyedropper-on * {
cursor: url('../create_design_img/cursor-eyedropper.png') 5 27, crosshair !important;
}
/* colour loupe that follows the cursor while picking */
.studio-eyedropper-loupe {
position: fixed;
z-index: 99999;
width: 52px;
height: 52px;
border-radius: 50%;
pointer-events: none;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 5px #1c3a39,
0 6px 16px rgba(0,0,0,0.3);
}
/* when no colour region is under the cursor — show a hatched/empty loupe */
.studio-eyedropper-loupe[data-empty="1"] {
background-image:
linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%),
linear-gradient(45deg, #d8d8d8 25%, #f4f4f4 25%, #f4f4f4 75%, #d8d8d8 75%) !important;
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
}