tabreaper.css

:root {
  color-scheme: light dark;
  --tab-active: rgb(6, 112, 204);
  --tab-selected: rgb(9, 150, 248);
}

body {
  width: min(40rem, 800px);
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: var(--in-content-text-color);
}

#match-count {
  margin: 4px;
  flex: none;
}

#summary-table {
}

#summary {
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 12px;
  margin-right: 1em;
}

#summary-table .highlight {
  font-weight: bold;
}

.summary-icon {
  margin: 4px;
  vertical-align: middle;
}

.summary-row {
  white-space: nowrap;
  vertical-align: middle;
  display: table-row;
}

.summary-close:hover, .summary-cell:hover {
  background-color: hsla(0,0%,70%,.2);
}

/* space for icon + close-icon */
.summary-close-icon-switcher {
  float: left;
  display: block;
  position: relative;
}

/* position close icon on top of the summary-icon */
.summary-close-icon-switcher .summary-close {
  position: absolute;
  top: 0;
  right: 0;
}

.summary-row:hover .summary-icon {
  opacity: 40%;
}

.summary-row:hover .summary-close {
  visibility: visible;
}

.summary-close {
  vertical-align: middle;
  visibility: hidden;
  width: 16px;
  height: 16px;
  margin: 4px;
}

.summary-icon {
  max-width: 16px;
}

/* from chrome:/skins/global/close-icon.css */
/* otherwise the close.svg looks black */
.summary-close {
  -moz-context-properties: fill, fill-opacity;
  color: inherit !important;
  fill: currentColor;
  fill-opacity: 0;
}

.summary-cell {
  overflow-x: clip;
  text-overflow: clip ellipsis;
  display: table-cell;
  vertical-align: middle;
}

.summary-cell-url {
  width: 100%;
}

.summary-row-elipsis {
  text-align: center;
}

.summary-row-not-found {
  text-align: center;
  font-style: italic;
  opacity: 0.6;
}

#close-button {
  margin-top: 4px;
}

#pinned-policy-warning.highlight {
  color: var(--warning-color, red);
}

span.avoidwrap {
  display:inline-block;
}

#unicode-warning {
  display: none; /* hidden by default */
}
#unicode-warning p {
  font-size: smaller;
}

#matching-panel {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

#matching-panel label {
  flex: 0 0 auto;
  padding-right: 0.5em;
}
#matching-panel input {
  flex: 1 0 auto;
}

.popup-body {
  flex: 0 0 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  max-height: 600px;
}

.popup-tab-panel {
  flex: 0 0 auto; /* Fixed within body */
  display: flex;
  flex-flow: row nowrap;
}

.popup-tabs-button {
  flex: 1 1 auto;
  height: 100%;
  margin: 0 -1px;
  padding: 12px;
  text-align: center;
}

.popup-tabs-button:hover {
  background-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
}

.popup-tabs-button:hover:active {
  background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.popup-tabs-button.selected {
  box-shadow: 0 -1px 0 var(--tab-active) inset, 0 -4px 0 var(--tab-selected) inset;
  color: var(--tab-selected);
}

.popup-tabs-button.selected:hover {
  color: var(--tab-active);
}

.popup-tabs-separator {
  background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  width: 1px;
  z-index: 100;
}

.popup-header > .text-header {
  align-self: center;
  font-size: 1.385em;
  font-weight: lighter;
}

.popup-header {
  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1));
  padding: 1em;
}

.popup-fixed-panel {
  flex: 0 0 auto;
  padding: 0.5em 1em 0.5em 1em;
}

.popup-panel {
  flex: 1 1 auto;
  padding: 0.5em 1em 0.5em 1em;
}

.popup-end-panel {
  order: 10;
}

.popup-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}