/* * tool-page.css — shared styles for standalone tool pages. * Loaded by absolute URL: * Complements /landing.built.css (Tailwind). Dark mode keys off the `.dark` * class on , matching the rest of the site. * * Lifted from pages/gemini-watermark-remover.html so every tool looks identical; * `.preview-card svg` is added so vector (SVG) results get the same framing. */ .dropzone { border: 2px dashed rgb(209 213 219); border-radius: 1rem; padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 150ms, background-color 150ms; background: rgba(255, 255, 255, 0.6); } .dark .dropzone { border-color: rgb(55 65 81); background: rgba(23, 23, 23, 0.6); } .dropzone:hover, .dropzone.dragover { border-color: rgb(37 99 235); background: rgba(37, 99, 235, 0.06); } .preview-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .preview-grid { grid-template-columns: 1fr 1fr; } } .preview-card { border: 1px solid rgb(229 231 235); border-radius: 0.75rem; background: rgb(255 255 255); padding: 0.75rem; } .dark .preview-card { border-color: rgb(38 38 38); background: rgb(23 23 23); } .preview-card img, .preview-card canvas, .preview-card svg { width: 100%; height: auto; display: block; border-radius: 0.5rem; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; } .dark .preview-card img, .dark .preview-card canvas, .dark .preview-card svg { background-image: linear-gradient(45deg, #262626 25%, transparent 25%), linear-gradient(-45deg, #262626 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #262626 75%), linear-gradient(-45deg, transparent 75%, #262626 75%); } .status-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 9999px; } .status-pill.ok { background: rgba(34, 197, 94, 0.12); color: rgb(22, 163, 74); } .status-pill.warn { background: rgba(245, 158, 11, 0.12); color: rgb(180, 83, 9); } .status-pill.err { background: rgba(239, 68, 68, 0.12); color: rgb(185, 28, 28); } .dark .status-pill.ok { color: rgb(74, 222, 128); } .dark .status-pill.warn { color: rgb(251, 191, 36); } .dark .status-pill.err { color: rgb(248, 113, 113); } .format-radio { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; padding: 0.375rem 0.75rem; border: 1px solid rgb(229 231 235); border-radius: 9999px; cursor: pointer; user-select: none; } .dark .format-radio { border-color: rgb(55 65 81); } .format-radio input { accent-color: rgb(37 99 235); } .format-radio:has(input:checked) { border-color: rgb(37 99 235); background: rgba(37, 99, 235, 0.08); }