rozenite-preview/dist/assets/preview-panel-BjoWzy1K.css

A Rozenite plugin that lets you select React Native components in DevTools and preview them live on your simulator. Ideal for rapid UI development, component testing, and debugging complex apps.

.devtools-preview-panel{display:flex;flex-direction:column;height:100%;background:#1e1e1e;color:#ccc;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:13px}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#2d2d30;border-bottom:1px solid #3e3e42;min-height:34px}.toolbar-left{display:flex;align-items:center;gap:8px}.toolbar-right{display:flex;align-items:center;gap:4px}.search-container{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:8px;color:#858585;pointer-events:none}.search-input{background:#3c3c3c;border:1px solid #464647;border-radius:4px;color:#ccc;font-size:13px;padding:6px 8px 6px 28px;width:200px;outline:none}.search-input:focus{border-color:#007acc;background:#404040}.search-input::placeholder{color:#858585}.toolbar-btn{background:transparent;border:none;color:#ccc;cursor:pointer;padding:6px;border-radius:3px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#404040}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.icon{color:currentColor}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:#252526;border-bottom:1px solid #3e3e42;font-size:12px}.status-left{display:flex;align-items:center;gap:8px}.status-text{color:#858585}.status-text.active{color:#4fc3f7}.status-separator{color:#555}.content{flex:1;overflow:auto;padding:8px 0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;text-align:center}.empty-icon{color:#858585;margin-bottom:16px}.empty-title{color:#ccc;font-size:16px;font-weight:500;margin:0 0 8px}.empty-description{color:#858585;margin:0 0 16px;line-height:1.4}.clear-search-btn{background:#007acc;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:13px;padding:8px 16px}.clear-search-btn:hover{background:#005a9e}.component-list{padding:0 8px}.component-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin:2px 0;border-radius:4px;cursor:pointer;transition:background-color .15s ease}.component-item:hover{background:#2a2d2e}.component-item.selected{background:#094771;border:1px solid #007acc}.component-info{flex:1;min-width:0}.component-header{display:flex;align-items:center;gap:8px;margin-bottom:2px}.component-icon{color:#4fc3f7;flex-shrink:0}.component-name{color:#ccc;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-path{color:#858585;font-size:11px;margin-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-btn{background:transparent;border:1px solid #464647;border-radius:3px;color:#ccc;cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .15s ease}.preview-btn:hover,.component-item.selected .preview-btn{background:#007acc;border-color:#007acc;opacity:1}.content::-webkit-scrollbar{width:6px}.content::-webkit-scrollbar-track{background:#1e1e1e}.content::-webkit-scrollbar-thumb{background:#424242;border-radius:3px}.content::-webkit-scrollbar-thumb:hover{background:#4a4a4a}.vscode-btn{background:transparent;border:none;color:#ccc;cursor:pointer;padding:6px;border-radius:3px;display:flex;align-items:center;justify-content:center}.vscode-btn:hover{background:#404040}.vscode-btn:disabled{opacity:.5;cursor:not-allowed}