<style> /* CSS Beautifier & Minifier Styles - All classes prefixed with cssbm */<br /> /* Reset and Base */<br /> .cssbm-container * {<br /> box-sizing: border-box;<br /> margin: 0;<br /> padding: 0;<br /> line-height: 1.5 !important;<br /> }<br /> .cssbm-container {<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;<br /> max-width: 1280px;<br /> min-height: 550px;<br /> margin: 0 auto;<br /> padding: 20px;<br /> background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);<br /> border-radius: 16px;<br /> box-shadow: 0 4px 24px rgba(65, 80, 246, 0.08);<br /> }<br /> /* Header */<br /> .cssbm-header {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> margin-bottom: 20px;<br /> flex-wrap: wrap;<br /> gap: 12px;<br /> }<br /> .cssbm-title {<br /> font-size: 1.5rem;<br /> font-weight: 700;<br /> color: #1a1a2e;<br /> display: flex;<br /> align-items: center;<br /> gap: 10px;<br /> }<br /> .cssbm-title-icon {<br /> width: 32px;<br /> height: 32px;<br /> background: linear-gradient(135deg, #4150F6 0%, #6366f1 100%);<br /> border-radius: 8px;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: white;<br /> font-size: 16px;<br /> }<br /> .cssbm-header-actions {<br /> display: flex;<br /> gap: 8px;<br /> }<br /> .cssbm-btn {<br /> padding: 10px 18px;<br /> border: none;<br /> border-radius: 8px;<br /> font-size: 14px;<br /> font-weight: 600;<br /> cursor: pointer;<br /> transition: all 0.2s ease;<br /> display: inline-flex;<br /> align-items: center;<br /> gap: 6px;<br /> }<br /> .cssbm-btn:hover {<br /> transform: translateY(-1px);<br /> }<br /> .cssbm-btn:active {<br /> transform: translateY(0);<br /> }<br /> .cssbm-btn-primary {<br /> background: linear-gradient(135deg, #4150F6 0%, #6366f1 100%);<br /> color: white;<br /> box-shadow: 0 4px 12px rgba(65, 80, 246, 0.3);<br /> }<br /> .cssbm-btn-primary:hover {<br /> box-shadow: 0 6px 16px rgba(65, 80, 246, 0.4);<br /> }<br /> .cssbm-btn-secondary {<br /> background: #10b981;<br /> color: white;<br /> box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);<br /> }<br /> .cssbm-btn-secondary:hover {<br /> background: #059669;<br /> box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);<br /> }<br /> .cssbm-btn-outline {<br /> background: white;<br /> color: #4150F6;<br /> border: 2px solid #e5e7eb;<br /> }<br /> .cssbm-btn-outline:hover {<br /> border-color: #4150F6;<br /> background: #f8f9ff;<br /> }<br /> .cssbm-btn-ghost {<br /> background: transparent;<br /> color: #64748b;<br /> padding: 8px 12px;<br /> }<br /> .cssbm-btn-ghost:hover {<br /> background: #f1f5f9;<br /> color: #4150F6;<br /> }<br /> /* Main Layout */<br /> .cssbm-main {<br /> display: grid;<br /> grid-template-columns: 1fr 200px 1fr;<br /> gap: 16px;<br /> min-height: 420px;<br /> }<br /> /* Editor Panels */<br /> .cssbm-panel {<br /> background: white;<br /> border-radius: 12px;<br /> border: 1px solid #e5e7eb;<br /> overflow: hidden;<br /> display: flex;<br /> flex-direction: column;<br /> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);<br /> }<br /> .cssbm-panel-header {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding: 12px 16px;<br /> background: #f8fafc;<br /> border-bottom: 1px solid #e5e7eb;<br /> }<br /> .cssbm-panel-title {<br /> font-size: 13px;<br /> font-weight: 600;<br /> color: #475569;<br /> text-transform: uppercase;<br /> letter-spacing: 0.5px;<br /> }<br /> .cssbm-panel-actions {<br /> display: flex;<br /> gap: 4px;<br /> }<br /> .cssbm-icon-btn {<br /> width: 32px;<br /> height: 32px;<br /> border: none;<br /> background: transparent;<br /> border-radius: 6px;<br /> cursor: pointer;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: #64748b;<br /> transition: all 0.15s ease;<br /> }<br /> .cssbm-icon-btn:hover {<br /> background: #e2e8f0;<br /> color: #4150F6;<br /> }<br /> .cssbm-editor-wrapper {<br /> flex: 1;<br /> position: relative;<br /> display: flex;<br /> }<br /> .cssbm-line-numbers {<br /> width: 40px;<br /> padding: 12px 8px;<br /> background: #f8fafc;<br /> border-right: 1px solid #e5e7eb;<br /> font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;<br /> font-size: 13px;<br /> line-height: 1.6;<br /> color: #94a3b8;<br /> text-align: right;<br /> user-select: none;<br /> overflow: hidden;<br /> }<br /> .cssbm-textarea {<br /> flex: 1;<br /> width: 100%;<br /> height: 100%;<br /> min-height: 350px;<br /> padding: 12px;<br /> border: none;<br /> resize: none;<br /> font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;<br /> font-size: 13px;<br /> line-height: 1.6;<br /> color: #1e293b;<br /> background: white;<br /> outline: none;<br /> }<br /> .cssbm-textarea::placeholder {<br /> color: #94a3b8;<br /> }<br /> .cssbm-textarea:focus {<br /> background: #fafbff;<br /> }<br /> /* Controls Panel */<br /> .cssbm-controls {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 12px;<br /> padding: 16px;<br /> background: white;<br /> border-radius: 12px;<br /> border: 1px solid #e5e7eb;<br /> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);<br /> }<br /> .cssbm-control-group {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 8px;<br /> }<br /> .cssbm-label {<br /> font-size: 12px;<br /> font-weight: 600;<br /> color: #64748b;<br /> text-transform: uppercase;<br /> letter-spacing: 0.5px;<br /> }<br /> .cssbm-select {<br /> padding: 10px 12px;<br /> border: 2px solid #e5e7eb;<br /> border-radius: 8px;<br /> font-size: 14px;<br /> color: #1e293b;<br /> background: white;<br /> cursor: pointer;<br /> transition: border-color 0.15s ease;<br /> appearance: none;<br /> 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");<br /> background-repeat: no-repeat;<br /> background-position: right 12px center;<br /> padding-right: 36px;<br /> }<br /> .cssbm-select:focus {<br /> outline: none;<br /> border-color: #4150F6;<br /> }<br /> .cssbm-checkbox-wrapper {<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 8px 0;<br /> }<br /> .cssbm-checkbox {<br /> width: 18px;<br /> height: 18px;<br /> border: 2px solid #e5e7eb;<br /> border-radius: 4px;<br /> cursor: pointer;<br /> accent-color: #4150F6;<br /> }<br /> .cssbm-checkbox-label {<br /> font-size: 14px;<br /> color: #475569;<br /> cursor: pointer;<br /> }<br /> .cssbm-divider {<br /> height: 1px;<br /> background: #e5e7eb;<br /> margin: 4px 0;<br /> }<br /> .cssbm-btn-full {<br /> width: 100%;<br /> justify-content: center;<br /> }<br /> /* Status Bar */<br /> .cssbm-status {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> padding: 8px 12px;<br /> background: #f8fafc;<br /> border-top: 1px solid #e5e7eb;<br /> font-size: 12px;<br /> color: #64748b;<br /> }<br /> .cssbm-status-item {<br /> display: flex;<br /> align-items: center;<br /> gap: 6px;<br /> }<br /> .cssbm-status-dot {<br /> width: 6px;<br /> height: 6px;<br /> border-radius: 50%;<br /> background: #10b981;<br /> }<br /> /* Toast Notification */<br /> .cssbm-toast {<br /> position: fixed;<br /> bottom: 24px;<br /> left: 50%;<br /> transform: translateX(-50%) translateY(100px);<br /> background: #1e293b;<br /> color: white;<br /> padding: 12px 24px;<br /> border-radius: 8px;<br /> font-size: 14px;<br /> font-weight: 500;<br /> box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);<br /> z-index: 1000;<br /> opacity: 0;<br /> transition: all 0.3s ease;<br /> }<br /> .cssbm-toast.cssbm-show {<br /> transform: translateX(-50%) translateY(0);<br /> opacity: 1;<br /> }<br /> .cssbm-toast.cssbm-success {<br /> background: #10b981;<br /> }<br /> .cssbm-toast.cssbm-error {<br /> background: #ef4444;<br /> }<br /> /* Responsive Styles */<br /> @media (max-width: 1024px) {<br /> .cssbm-main {<br /> grid-template-columns: 1fr;<br /> gap: 12px;<br /> }<br /> .cssbm-controls {<br /> order: -1;<br /> flex-direction: row;<br /> flex-wrap: wrap;<br /> align-items: center;<br /> }<br /> .cssbm-control-group {<br /> flex: 1;<br /> min-width: 120px;<br /> }<br /> .cssbm-btn-full {<br /> flex: 0 0 auto;<br /> width: auto;<br /> }<br /> .cssbm-divider {<br /> display: none;<br /> }<br /> .cssbm-textarea {<br /> min-height: 200px;<br /> }<br /> }<br /> @media (max-width: 640px) {<br /> .cssbm-container {<br /> padding: 12px;<br /> border-radius: 0;<br /> }<br /> .cssbm-header {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> }<br /> .cssbm-header-actions {<br /> width: 100%;<br /> justify-content: flex-start;<br /> }<br /> .cssbm-title {<br /> font-size: 1.25rem;<br /> }<br /> .cssbm-controls {<br /> flex-direction: column;<br /> }<br /> .cssbm-control-group {<br /> width: 100%;<br /> }<br /> .cssbm-btn-full {<br /> width: 100%;<br /> }<br /> .cssbm-line-numbers {<br /> display: none;<br /> }<br /> .cssbm-textarea {<br /> min-height: 180px;<br /> }<br /> .cssbm-btn {<br /> padding: 10px 14px;<br /> font-size: 13px;<br /> }<br /> }<br /> /* Animations */<br /> @keyframes cssbm-pulse {<br /> 0%, 100% { opacity: 1; }<br /> 50% { opacity: 0.5; }<br /> }<br /> .cssbm-loading {<br /> animation: cssbm-pulse 1.5s ease-in-out infinite;<br /> }<br /> </style> <!-- Header --> <header> <h1>{ } CSS Beautifier & Minifier</h1> Clear Sample </header><!-- Main Content --> <main> <!-- Input Panel --> Input CSS <button title="Paste from Clipboard"></button></main> <button title="Clear Input"></button> 1 <textarea id="cssbm-input" placeholder="Paste your CSS here..."></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 id="cssbm-auto-update" checked="checked" type="checkbox" /> <label for="cssbm-auto-update">Auto Update</label> <button></button> Beautify Minify Copy Output Download <!-- Output Panel --> Output CSS <button title="Copy Output"></button> 1 <textarea id="cssbm-output" readonly="readonly" placeholder="Processed CSS will appear here..."></textarea> 0 characters <!-- Toast -->
