react-tailwind-element-inspector/dist/styles.css

Inspect DOM elements hierarchy and classNames on hover in React + Tailwind projects.

/* Inspector overlay base */
.inspector-overlay {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 9998;
  /* add subtle inset shadow */
  box-shadow: inset 0 0 0 2px transparent;
}

/* Highlight target element */
.inspector-hover-overlay {
  border: 2px solid #00aaff;
  border-radius: 6px;
  transition: border-color 0.2s ease-in-out;
}

/* Highlight siblings */
.inspector-sibling-overlay {
  border: 2px dashed #00ff66;
  border-radius: 6px;
}

/* Highlight parent levels */
.inspector-parent-0-overlay { border: 2px dashed #ffff00; }
.inspector-parent-1-overlay { border: 2px dashed #ffa500; }
.inspector-parent-2-overlay { border: 2px dashed #ff4500; }

/* deeper parents */
.inspector-parent-0-overlay, .inspector-parent-1-overlay,
.inspector-parent-2-overlay, .inspector-parent-3-overlay,
.inspector-parent-4-overlay, .inspector-parent-5-overlay,
.inspector-parent-6-overlay, .inspector-parent-7-overlay,
.inspector-parent-8-overlay, .inspector-parent-9-overlay {
  border-radius: 4px;
}

/* hierarchy level indicator */
.inspector-overlay[data-level]::after {
  content: attr(data-level);
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
}

/* Inspector Panel Styling */
.inspector-panel {
  display: flex; /* Changed from none by JS */
  flex-direction: column;
  position: fixed;
  background-color: #2c2c2c; /* Darker background */
  color: #e0e0e0; /* Lighter text */
  border: 1px solid #444; /* Subtle border */
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* More pronounced shadow */
  z-index: 10000;
  min-width: 280px; /* Slightly wider */
  min-height: 150px;
  resize: both; /* Allow user resizing */
  overflow: hidden; /* Content tree will handle its own scroll */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font stack */
}

.inspector-panel-header {
  background-color: #383838; /* Slightly lighter header */
  padding: 8px 12px;
  cursor: grab; /* Indicate draggable */
  border-bottom: 1px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 7px; /* Match panel rounding */
  border-top-right-radius: 7px;
}

.title-bar {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between toggle and title */
}

.inspector-active-toggle {
    margin-left: 5px; /* Align with padding */
    cursor: pointer;
    /* Basic styling for the toggle switch */
    appearance: none;
    width: 36px;
    height: 20px;
    background-color: #555;
    border-radius: 10px;
    position: relative;
    outline: none;
    transition: background-color 0.3s;
}

.inspector-active-toggle::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.inspector-active-toggle:checked {
    background-color: #4CAF50; /* Green when active */
}

.inspector-active-toggle:checked::before {
    transform: translateX(16px);
}

.inspector-settings-button {
  background: none;
  border: none;
  color: #b0b0b0; /* Lighter icon color */
  font-size: 18px; /* Larger icon */
  cursor: pointer;
  padding: 2px 5px;
}

.inspector-settings-button:hover {
  color: #ffffff;
}

.inspector-settings-panel {
  padding: 10px 15px;
  background-color: #333;
  border-bottom: 1px solid #444;
  max-height: 300px; /* Prevent settings from becoming too tall */
  overflow-y: auto;
}

.inspector-settings-panel h4, .inspector-settings-panel h5 {
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #e0e0e0;
  border-bottom: 1px solid #4a4a4a;
  padding-bottom: 4px;
}
.inspector-settings-panel h4:first-child {
    margin-top: 0;
}

.inspector-settings-panel hr {
    border: none;
    border-top: 1px solid #4a4a4a;
    margin: 10px 0;
}

.inspector-settings-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: #c0c0c0; /* Lighter label text */
}

.inspector-settings-panel input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

.inspector-settings-panel input[type="number"] {
    background-color: #555;
    color: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 2px 5px;
    width: 60px; /* Adjust as needed */
}

.inspector-panel-content {
  padding: 10px 15px;
  overflow-y: auto; /* Allow content to scroll */
  flex-grow: 1; /* Take remaining space */
  font-size: 12px;
  line-height: 1.6;
}

.inspector-panel-content strong {
  color: #87ceeb; /* Sky blue for strong tags */
}

.inspector-panel-content em {
  color: #999; /* Grey for emphasis (none) */
}

/* Tree View Content Styling */
.inspector-panel-content.inspector-tree-view {
  padding: 5px 0; /* Reduced padding for tree items to manage their own */
  overflow-y: auto;
  flex-grow: 1;
}

.inspector-tree-item {
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid #3a3a3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspector-tree-item:hover {
  background-color: #4a4a4a;
}

.inspector-tree-item[data-element-type="target"] {
  background-color: #405060; /* Slightly different background for the main target */
  font-weight: bold;
}

.inspector-tree-item .tag-name {
  color: #87ceeb; /* Sky blue */
}

.inspector-tree-item .element-id {
  color: #ffdead; /* Navajo white for ID */
  margin-left: 5px;
}

.inspector-tree-item .element-classes {
  color: #98fb98; /* Pale green for classes */
  margin-left: 5px;
}

.inspector-details {
    padding: 5px 10px 5px 0; /* Indent details further */
    font-size: 11px;
    color: #ccc;
    border-bottom: 1px solid #3a3a3a;
}

.inspector-details strong {
    color: #bbb;
}

/* Overlay for preview (e.g. on tree hover) */
.inspector-preview-overlay {
  border: 2px dashed #ff8c00; /* DarkOrange dashed for preview */
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px transparent;
  z-index: 9999; /* Ensure preview is on top */
}


/* Tooltip styling (old, can be removed or repurposed if needed) */
/* ... keep or remove old .inspector-tooltip styles ... */