<style> /* CSS Beautifier & Minifier Styles - All classes prefixed with cssbm */ /* Reset and Base */ .cssbm-container * { box-sizing: border-box; margin: 0; padding: 0; line-height: 1.5 !important; } .cssbm-container { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; max-width: 1280px; min-height: 550px; margin: 0 auto; padding: 20px; border-radius: 16px; } /* Header */ .cssbm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .cssbm-title { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 10px; } .cssbm-title-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #4150F6 0%, #6366f1 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; } .cssbm-header-actions { display: flex; gap: 8px; } .cssbm-btn { padding: 10px 18px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } .cssbm-btn:hover { transform: translateY(-1px); } .cssbm-btn:active { transform: translateY(0); } .cssbm-btn-primary { background: linear-gradient(135deg, #4150F6 0%, #6366f1 100%); color: white; box-shadow: 0 4px 12px rgba(65, 80, 246, 0.3); } .cssbm-btn-primary:hover { box-shadow: 0 6px 16px rgba(65, 80, 246, 0.4); } .cssbm-btn-secondary { background: #10b981; color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .cssbm-btn-secondary:hover { background: #059669; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4); } .cssbm-btn-outline { background: white; color: #4150F6; border: 2px solid #e5e7eb; } .cssbm-btn-outline:hover { border-color: #4150F6; background: #f8f9ff; } .cssbm-btn-ghost { background: transparent; color: #64748b; padding: 8px 12px; } .cssbm-btn-ghost:hover { background: #f1f5f9; color: #4150F6; } /* Main Layout */ .cssbm-main { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 16px; min-height: 420px; } /* Editor Panels */ .cssbm-panel { background: white; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .cssbm-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; } .cssbm-panel-title { font-size: 13px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; } .cssbm-panel-actions { display: flex; gap: 4px; } .cssbm-icon-btn { width: 32px; height: 32px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.15s ease; } .cssbm-icon-btn:hover { background: #e2e8f0; color: #4150F6; } .cssbm-editor-wrapper { flex: 1; position: relative; display: flex; } .cssbm-line-numbers { width: 40px; padding: 12px 8px; background: #f8fafc; border-right: 1px solid #e5e7eb; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 13px; line-height: 1.6; color: #94a3b8; text-align: right; user-select: none; overflow: hidden; } .cssbm-textarea { flex: 1; width: 100%; height: 100%; min-height: 350px; padding: 12px; border: none; resize: none; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 13px; line-height: 1.6; color: #1e293b; background: white; outline: none; } .cssbm-textarea::placeholder { color: #94a3b8; } .cssbm-textarea:focus { background: #fafbff; } /* Controls Panel */ .cssbm-controls { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: white; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .cssbm-control-group { display: flex; flex-direction: column; gap: 8px; } .cssbm-label { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } .cssbm-select { padding: 10px 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #1e293b; background: white; cursor: pointer; transition: border-color 0.15s ease; appearance: none; background-image: 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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .cssbm-select:focus { outline: none; border-color: #4150F6; } .cssbm-checkbox-wrapper { display: flex; align-items: center; gap: 8px; padding: 8px 0; } .cssbm-checkbox { width: 18px; height: 18px; border: 2px solid #e5e7eb; border-radius: 4px; cursor: pointer; accent-color: #4150F6; } .cssbm-checkbox-label { font-size: 14px; color: #475569; cursor: pointer; } .cssbm-divider { height: 1px; background: #e5e7eb; margin: 4px 0; } .cssbm-btn-full { width: 100%; justify-content: center; } /* Status Bar */ .cssbm-status { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #f8fafc; border-top: 1px solid #e5e7eb; font-size: 12px; color: #64748b; } .cssbm-status-item { display: flex; align-items: center; gap: 6px; } .cssbm-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; } /* Toast Notification */ .cssbm-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1e293b; color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); z-index: 1000; opacity: 0; transition: all 0.3s ease; } .cssbm-toast.cssbm-show { transform: translateX(-50%) translateY(0); opacity: 1; } .cssbm-toast.cssbm-success { background: #10b981; } .cssbm-toast.cssbm-error { background: #ef4444; } /* Responsive Styles */ @media (max-width: 1024px) { .cssbm-main { grid-template-columns: 1fr; gap: 12px; } .cssbm-controls { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; } .cssbm-control-group { flex: 1; min-width: 120px; } .cssbm-btn-full { flex: 0 0 auto; width: auto; } .cssbm-divider { display: none; } .cssbm-textarea { min-height: 200px; } } @media (max-width: 640px) { .cssbm-container { padding: 12px; border-radius: 0; } .cssbm-header { flex-direction: column; align-items: flex-start; } .cssbm-header-actions { width: 100%; justify-content: flex-start; } .cssbm-title { font-size: 1.25rem; } .cssbm-controls { flex-direction: column; } .cssbm-control-group { width: 100%; } .cssbm-btn-full { width: 100%; } .cssbm-line-numbers { display: none; } .cssbm-textarea { min-height: 180px; } .cssbm-btn { padding: 10px 14px; font-size: 13px; } } /* Animations */ @keyframes cssbm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .cssbm-loading { animation: cssbm-pulse 1.5s ease-in-out infinite; } </style> <!-- Header --> <header> <h1> { } CSS Beautifier & Minifier </h1> <button onclick="cssbmClearAll()" title="Clear All"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg> Clear </button> <button onclick="cssbmLoadSample()" title="Load Sample CSS"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg> Sample </button> </header> <!-- Main Content --> <main> <!-- Input Panel --> Input CSS <button onclick="cssbmPasteFromClipboard()" title="Paste from Clipboard"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> </button> <button onclick="cssbmClearInput()" title="Clear Input"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> </button> 1 <textarea id="cssbm-input" placeholder="Paste your CSS here..." oninput="cssbmUpdateLineNumbers('input'); cssbmAutoProcess()" onscroll="cssbmSyncScroll('input')" ></textarea> 0 characters <!-- Controls --> <label>Indent Size</label> <select id="cssbm-indent"> <option value="2">2 spaces</option> <option value="4">4 spaces</option> <option value="tab">Tab</option> </select> <input type="checkbox" id="cssbm-auto-update" checked> <label for="cssbm-auto-update">Auto Update</label> <button onclick="cssbmBeautify()"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg> Beautify </button> <button onclick="cssbmMinify()"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg> Minify </button> <button onclick="cssbmCopyOutput()"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy Output </button> <button onclick="cssbmDownload()"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download </button> <!-- Output Panel --> Output CSS <button onclick="cssbmCopyOutput()" title="Copy Output"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> </button> <button onclick="cssbmClearOutput()" title="Clear Output"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> </button> 1 <textarea id="cssbm-output" placeholder="Processed CSS will appear here..." readonly onscroll="cssbmSyncScroll('output')" ></textarea> 0 characters </main> <!-- Toast -->
