/* ============================================= LuxTool — /images/image-to-svg/image-to-svg.css Styles unique to Image to SVG's own controls (.svg-*). Preview panels reuse .bgrem-* classes from Background Remover's stylesheet (linked separately on this page) rather than duplicating them — see index.html . Site chrome and generic shared building blocks come from /style.css. ============================================= */ /* ══════════════════════════════════════════════════════ IMAGE TO SVG CONVERTER ══════════════════════════════════════════════════════ */ .svg-panel { width: 100%; max-width: none; margin: 0 auto 1rem; } .svg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .svg-card { background: rgba(30, 41, 59, .45); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem; } .svg-checker { background: linear-gradient(45deg, rgba(148, 163, 184, .16) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, .16) 75%, rgba(148, 163, 184, .16)), linear-gradient(45deg, rgba(148, 163, 184, .16) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, .16) 75%, rgba(148, 163, 184, .16)); background-position: 0 0, 12px 12px; background-size: 24px 24px; background-color: rgba(15, 23, 42, .9); } .svg-preview-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .svg-preview-container svg { max-width: 100%; max-height: 280px; width: auto; height: auto; } .svg-controls { margin-top: .85rem; padding: 1rem; border: 1px solid var(--border); border-radius: .8rem; background: rgba(30, 41, 59, .35); } .svg-control-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .svg-control-row:last-child { margin-bottom: 0; } .svg-control-group { display: flex; flex-direction: column; gap: .5rem; } .svg-mode-toggle { display: flex; gap: .5rem; } .svg-mode-btn { flex: 1; padding: .55rem .75rem; border: 1px solid var(--gold-dim); border-radius: .5rem; background: transparent; color: var(--text); font-size: .85rem; font-weight: 600; cursor: pointer; transition: .2s; font-family: inherit; } .svg-mode-btn:hover { background: rgba(251, 191, 36, .1); border-color: var(--gold); } .svg-mode-btn.active { background: rgba(251, 191, 36, .2); border-color: var(--gold); color: var(--gold); } .svg-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(30, 41, 59, .8); border-radius: 3px; outline: none; cursor: pointer; } .svg-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); cursor: pointer; transition: .2s; } .svg-slider::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 0 10px rgba(251, 191, 36, .5); } .svg-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); cursor: pointer; border: none; transition: .2s; } .lux-checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--text); font-size: .9rem; } .lux-checkbox { width: 18px; height: 18px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(30, 41, 59, .7); cursor: pointer; accent-color: var(--gold); } .svg-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; } @media(max-width:768px) { .svg-grid { grid-template-columns: 1fr } .svg-control-row { grid-template-columns: 1fr } } @media (min-width: 1100px) { .svg-panel:has(#svg-workspace:not(.hidden)) { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .svg-panel:has(#svg-workspace:not(.hidden)) > #svg-drop-zone { grid-column: 1; width: 100%; min-height: 180px; margin: 0; padding: 1rem; } .svg-panel:has(#svg-workspace:not(.hidden)) > #svg-workspace { grid-column: 2; min-width: 0; margin-top: 0 !important; position: relative; } } @media (min-width: 1500px) { .svg-panel:has(#svg-workspace:not(.hidden)) > #svg-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); gap: .9rem 1.1rem; align-items: start; } #svg-workspace > .svg-grid { grid-column: 1; grid-row: 1 / span 4; } #svg-workspace > .svg-controls, #svg-workspace > .svg-actions, #svg-workspace > #svg-msg { grid-column: 2; margin-top: 0; } #svg-workspace > .svg-controls .svg-control-row { grid-template-columns: 1fr; } #svg-workspace > .svg-actions .btn { flex: 1; } #svg-workspace > #svg-loading { grid-column: 1 / -1; grid-row: 1 / span 4; } }