<style> /* XML Formatter - WordPress/Elementor safe styles with high specificity */<br /> div.xmlf-wrapper,<br /> div.xmlf-wrapper *,<br /> div.xmlf-wrapper *::before,<br /> div.xmlf-wrapper *::after {<br /> box-sizing: border-box !important;<br /> margin: 0;<br /> padding: 0;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;<br /> line-height: 1.5;<br /> }<br /> div.xmlf-wrapper {<br /> max-width: 940px;<br /> margin: 0 auto;<br /> padding: 28px 0px;<br /> background: #ffffff;<br /> border-radius: 12px;<br /> color: #1e2235;<br /> }<br /> div.xmlf-wrapper h1.xmlf-title {<br /> font-size: 22px !important;<br /> font-weight: 700 !important;<br /> color: #1e2235 !important;<br /> margin: 0 0 20px 0 !important;<br /> padding: 0 !important;<br /> text-align: center !important;<br /> letter-spacing: -0.3px;<br /> line-height: 1.3 !important;<br /> }<br /> div.xmlf-wrapper h1.xmlf-title span.xmlf-title-accent {<br /> color: #4150F6 !important;<br /> }<br /> div.xmlf-wrapper label.xmlf-label {<br /> display: block;<br /> font-size: 15px !important;<br /> font-weight: 600 !important;<br /> color: #1e2235 !important;<br /> margin-bottom: 6px !important;<br /> }<br /> div.xmlf-wrapper label.xmlf-label span.xmlf-label-hint {<br /> font-weight: 400 !important;<br /> color: #7c829b !important;<br /> font-size: 13px !important;<br /> }<br /> div.xmlf-wrapper textarea.xmlf-textarea {<br /> width: 100% !important;<br /> min-height: 160px !important;<br /> max-height: 300px !important;<br /> padding: 12px 14px !important;<br /> font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;<br /> font-size: 13px !important;<br /> line-height: 1.6 !important;<br /> color: #1e2235 !important;<br /> background: #f8f9fc !important;<br /> border: 1.5px solid #dde0ed !important;<br /> border-radius: 8px !important;<br /> resize: vertical !important;<br /> outline: none !important;<br /> transition: border-color 0.2s ease, box-shadow 0.2s ease !important;<br /> -webkit-appearance: none !important;<br /> }<br /> div.xmlf-wrapper textarea.xmlf-textarea:focus {<br /> border-color: #4150F6 !important;<br /> box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.1) !important;<br /> }<br /> div.xmlf-wrapper textarea.xmlf-textarea::placeholder {<br /> color: #a3a8c3 !important;<br /> }<br /> div.xmlf-wrapper div.xmlf-actions {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 8px;<br /> margin: 14px 0;<br /> align-items: center;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 8px 16px !important;<br /> font-size: 14px !important;<br /> font-weight: 500 !important;<br /> border-radius: 7px !important;<br /> border: 1.5px solid transparent !important;<br /> cursor: pointer !important;<br /> transition: all 0.2s ease !important;<br /> white-space: nowrap !important;<br /> line-height: 1.4 !important;<br /> -webkit-appearance: none !important;<br /> text-decoration: none !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn svg {<br /> width: 15px;<br /> height: 15px;<br /> flex-shrink: 0;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-primary {<br /> background: #4150F6 !important;<br /> color: #ffffff !important;<br /> border-color: #4150F6 !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-primary:hover {<br /> background: #3441d4 !important;<br /> border-color: #3441d4 !important;<br /> box-shadow: 0 2px 8px rgba(65, 80, 246, 0.25) !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-secondary {<br /> background: #f0f1f8 !important;<br /> color: #1e2235 !important;<br /> border-color: #dde0ed !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-secondary:hover {<br /> background: #e4e6f2 !important;<br /> border-color: #c5c9de !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-danger {<br /> background: #fff0f0 !important;<br /> color: #d63939 !important;<br /> border-color: #fdd !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-danger:hover {<br /> background: #ffe0e0 !important;<br /> border-color: #f5baba !important;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn-success {<br /> background: #e8faf0 !important;<br /> color: #1a9956 !important;<br /> border-color: #c3ecd6 !important;<br /> }<br /> div.xmlf-wrapper div.xmlf-options {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> margin-bottom: 14px;<br /> flex-wrap: wrap;<br /> }<br /> div.xmlf-wrapper span.xmlf-opt-label {<br /> font-size: 14px !important;<br /> font-weight: 500 !important;<br /> color: #5a5f7d !important;<br /> }<br /> div.xmlf-wrapper select.xmlf-select {<br /> padding: 7px 32px 7px 12px !important;<br /> font-size: 14px !important;<br /> border: 1.5px solid #dde0ed !important;<br /> border-radius: 7px !important;<br /> background: #f8f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5f7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;<br /> -webkit-appearance: none !important;<br /> appearance: none !important;<br /> color: #1e2235 !important;<br /> cursor: pointer !important;<br /> outline: none !important;<br /> font-family: inherit !important;<br /> transition: border-color 0.2s ease !important;<br /> }<br /> div.xmlf-wrapper select.xmlf-select:focus {<br /> border-color: #4150F6 !important;<br /> }<br /> div.xmlf-wrapper div.xmlf-section {<br /> margin-top: 18px;<br /> }<br /> div.xmlf-wrapper div.xmlf-output-header {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> margin-bottom: 6px;<br /> }<br /> div.xmlf-wrapper div.xmlf-toast {<br /> position: fixed;<br /> bottom: 24px;<br /> left: 50%;<br /> transform: translateX(-50%) translateY(80px);<br /> padding: 10px 20px;<br /> background: #1e2235;<br /> color: #ffffff;<br /> border-radius: 8px;<br /> font-size: 14px;<br /> font-weight: 500;<br /> z-index: 99999;<br /> opacity: 0;<br /> transition: all 0.3s ease;<br /> pointer-events: none;<br /> box-shadow: 0 4px 16px rgba(0,0,0,0.15);<br /> }<br /> div.xmlf-wrapper div.xmlf-toast.xmlf-toast-visible {<br /> opacity: 1;<br /> transform: translateX(-50%) translateY(0);<br /> }<br /> div.xmlf-wrapper div.xmlf-toast.xmlf-toast-error {<br /> background: #d63939;<br /> }<br /> div.xmlf-wrapper div.xmlf-dropzone-active textarea.xmlf-textarea {<br /> border-color: #4150F6 !important;<br /> background: #eef0ff !important;<br /> box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.15) !important;<br /> }<br /> div.xmlf-wrapper input[type="file"].xmlf-file-input {<br /> display: none !important;<br /> }<br /> /* Responsive */<br /> @media screen and (max-width: 600px) {<br /> div.xmlf-wrapper {<br /> padding: 18px 14px;<br /> border-radius: 8px;<br /> }<br /> div.xmlf-wrapper h1.xmlf-title {<br /> font-size: 19px !important;<br /> }<br /> div.xmlf-wrapper div.xmlf-actions {<br /> gap: 6px;<br /> }<br /> div.xmlf-wrapper button.xmlf-btn {<br /> padding: 7px 12px !important;<br /> font-size: 13px !important;<br /> }<br /> div.xmlf-wrapper textarea.xmlf-textarea {<br /> min-height: 120px !important;<br /> font-size: 12px !important;<br /> }<br /> }<br /> </style> <h1>XML Formatter</h1> <label> Input XML (or drag and drop an XML file) </label> <textarea id="xmlfInput" placeholder="Enter your XML code here..."></textarea> <button id="xmlfFormat" type="button"> Format XML </button> <button id="xmlfOpen" type="button"> Open File </button> <button id="xmlfClear" type="button"> Clear </button> <button id="xmlfSample" type="button"> Sample XML </button> Indentation <select id="xmlfIndent"> <option value="2">2 Spaces</option> <option value="4">4 Spaces</option> <option value="tab">Tab</option> </select> <label>Formatted XML</label> <textarea id="xmlfOutput" readonly="readonly" placeholder="Formatted XML will appear here..."></textarea> <button id="xmlfDownload" type="button"> Download XML </button> <button id="xmlfCopy" type="button"> Copy XML </button> <input id="xmlfFileInput" accept=".xml,.xsl,.xslt,.svg,.xhtml" type="file" />
