freshroute-server/extension/popup.css

Local development server for FreshRoute extension with API mocking and extended functionality

body{width:300px;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.title{font-size:16px;font-weight:600;color:#333}.toggle-switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translateX(26px)}.status{margin-bottom:15px;padding:10px;border-radius:5px;text-align:center;font-weight:500}.status.enabled{background-color:#e8f5e8;color:#2e7d32;border:1px solid #c8e6c9}.status.disabled{background-color:#ffebee;color:#c62828;border:1px solid #ffcdd2}.rules-summary{margin-bottom:15px;padding:10px;background-color:#f5f5f5;border-radius:5px}.rules-count{display:flex;justify-content:space-between;margin-bottom:8px}.rule-type{font-size:12px;color:#666}.settings-section{margin-bottom:15px;padding:12px;background-color:#f8f9fa;border-radius:5px;border:1px solid #e0e0e0}.settings-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.settings-row:last-child{margin-bottom:0}.settings-label{font-size:13px;color:#555;font-weight:500}.small-toggle{width:40px;height:20px}.small-toggle .slider:before{height:14px;width:14px;left:3px;bottom:3px}.small-toggle input:checked+.slider:before{transform:translateX(17px)}.button{width:100%;padding:10px;background-color:#1976d2;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;margin-bottom:10px;transition:background-color .3s}.button:hover{background-color:#1565c0}.button.secondary{background-color:#757575}.button.secondary:hover{background-color:#616161}.recorder-section{margin-bottom:15px;padding:12px;background-color:#f8f9fa;border-radius:5px;border:1px solid #e0e0e0}.recorder-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.recorder-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.recorder-status{font-size:12px;padding:2px 8px;border-radius:12px;font-weight:500}.recorder-status.ready{background-color:#e3f2fd;color:#1976d2}.recorder-status.recording{background-color:#ffebee;color:#d32f2f;animation:1.5s infinite pulse}.recorder-status.stopped{background-color:#fff3e0;color:#f57c00}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.recorder-controls{display:flex;gap:8px;margin-bottom:10px}.recorder-btn{flex:1;padding:8px;font-size:12px;margin-bottom:0}.record-icon{color:#d32f2f;font-size:16px}.stop-icon{color:#f57c00;font-size:12px}.recorded-requests{margin-top:10px}.requests-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px;font-weight:500}.button.small{padding:4px 8px;font-size:11px;margin-bottom:0;width:auto}.requests-list{max-height:200px;overflow-y:auto;border:1px solid #ddd;border-radius:4px;background-color:#fff;margin-bottom:10px}.request-item{padding:8px;border-bottom:1px solid #eee;display:flex;align-items:center;font-size:11px;cursor:pointer;transition:background-color .2s}.request-item:hover{background-color:#f5f5f5}.request-item:last-child{border-bottom:none}.request-item.selected{background-color:#e3f2fd}.request-checkbox{margin-right:8px}.request-details{flex:1;min-width:0}.request-method{font-weight:600;margin-right:6px;padding:1px 4px;border-radius:2px;font-size:10px}.method-GET{background-color:#4caf50;color:#fff}.method-POST{background-color:#ff9800;color:#fff}.method-PUT{background-color:#2196f3;color:#fff}.method-DELETE{background-color:#f44336;color:#fff}.method-PATCH{background-color:#9c27b0;color:#fff}.request-url{color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.request-status{font-size:10px;margin-left:4px;padding:1px 4px;border-radius:2px}.status-2xx{background-color:#4caf50;color:#fff}.status-3xx{background-color:#ff9800;color:#fff}.status-4xx{background-color:#f44336;color:#fff}.status-5xx{background-color:#9c27b0;color:#fff}.convert-controls{display:flex;flex-direction:column;gap:8px}.group-input,.group-select{padding:6px;border:1px solid #ddd;border-radius:4px;font-size:12px}.button.primary{background-color:#4caf50}.button.primary:hover{background-color:#45a049}.footer{margin-top:15px;padding-top:15px;border-top:1px solid #e0e0e0;font-size:12px;color:#666;text-align:center}