element-call/src/DevTools.module.css

.devTools {
  display: flex;
  flex-direction: column;
  border-top: 2px solid #111;
  background-color: #111;
}

.toolbar {
  display: flex;
  background-color: #222;
}

.tab {
  vertical-align: middle;
  padding: 4px 8px;
  background-color: #444;
  margin: 0 2px;
  cursor: pointer;
}

.activeTab {
  background-color: #666;
}

.devToolsContainer {
  display: flex;
  height: 250px;
  gap: 2px;
  overflow-x: auto;
}

.user {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #555;
  min-width: 512px;
}

.userId {
  font-size: 14px;
  font-weight: bold;
  padding: 12px;
}

.userId > * {
  margin-right: 4px;
}

.userId > :last-child {
  margin-right: 0;
}

.events {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  background-color: #222;
}

.event {
  display: flex;
  font-family: monospace;
  padding: 4px 12px;
  background-color: #333;
  cursor: pointer;
}

.event:nth-child(even) {
  background-color: #444;
}

.event:hover {
  background-color: #555;
}

.event > * {
  margin-right: 4px;
}

.event > :last-child {
  margin-right: 0;
}

.eventType, .eventDetails {
  font-size: 12px;
}

.eventType {
  font-weight: bold;
}

.eventDetails {
  font-weight: 200;
  word-break: break-all;
}

.eventViewer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  max-width: 80%;
  border-radius: 8px;
  border: 1px solid black;
  background-color: #222;
  padding: 20px;
  margin: 20px;
}

.eventViewer .content {
  max-height: 200px;
  overflow: auto;
}