@c9up/ream 0.2.28 → 0.2.30

package/src/profiler/client/toolbar.css

@@ -0,0 +1,595 @@
+/*
+ * The debug toolbar's stylesheet. Loaded into the bar's shadow root from
+ * /__ream/profiler/_assets/toolbar.css: a same-origin stylesheet passes a
+ * `style-src 'self'` policy, where an inline one would be dropped.
+ */
+
+:host {
+  all: initial;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.rp {
+  --bg: #17191d;
+  --bg-2: #1f2228;
+  --bg-3: #272b33;
+  --line: #2f343d;
+  --text: #e6e8eb;
+  --muted: #8b939e;
+  --accent: #6cb6ff;
+  --ok: #3fb950;
+  --warn: #d29922;
+  --bad: #f85149;
+  --bar: 34px;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  color: var(--text);
+  font:
+    12px / 1.45 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
+  text-align: left;
+}
+
+.rp[data-closed] {
+  left: auto;
+  right: 8px;
+  bottom: 8px;
+}
+
+.mono,
+.sql,
+pre,
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* The closed state: one small button in the corner. */
+.restore {
+  display: none;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  color: var(--accent);
+  font-weight: 700;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.4);
+}
+
+.rp[data-closed] .restore {
+  display: block;
+}
+
+/* ── The bar ─────────────────────────────────────────────── */
+
+.bar {
+  display: flex;
+  align-items: stretch;
+  height: var(--bar);
+  background: var(--bg);
+  border-top: 1px solid var(--line);
+  box-shadow: 0 -2px 10px rgb(0 0 0 / 0.35);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 11px;
+  border-right: 1px solid var(--line);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.item:hover,
+.item:focus-visible,
+.item[data-active] {
+  background: var(--bg-2);
+  outline: none;
+}
+
+.item .label {
+  color: var(--muted);
+}
+
+.item .value {
+  font-weight: 600;
+}
+
+.item[data-tone="ok"] .value {
+  color: var(--ok);
+}
+
+.item[data-tone="warn"] {
+  box-shadow: inset 0 -3px 0 var(--warn);
+}
+
+.item[data-tone="warn"] .value {
+  color: var(--warn);
+}
+
+.item[data-tone="bad"] {
+  box-shadow: inset 0 -3px 0 var(--bad);
+}
+
+.item[data-tone="bad"] .value {
+  color: var(--bad);
+}
+
+.status {
+  display: inline-block;
+  min-width: 34px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-align: center;
+  font-weight: 700;
+  color: #fff;
+  background: #238636;
+}
+
+.status[data-tone="warn"] {
+  background: #9e6a03;
+}
+
+.status[data-tone="bad"] {
+  background: #b62324;
+}
+
+.spacer {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewing {
+  margin-left: 8px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: #1f3a5f;
+  color: var(--accent);
+}
+
+.tool {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  border-left: 1px solid var(--line);
+  color: var(--muted);
+}
+
+.tool:hover {
+  color: var(--text);
+  background: var(--bg-2);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* ── Hover summaries ─────────────────────────────────────── */
+
+.info {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 1px);
+  left: 0;
+  min-width: 240px;
+  max-width: 520px;
+  max-height: 420px;
+  overflow: auto;
+  padding: 8px 10px;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: 6px 6px 0 0;
+  box-shadow: 0 -4px 14px rgb(0 0 0 / 0.4);
+  cursor: default;
+  white-space: normal;
+}
+
+.item:hover .info,
+.item:focus-within .info {
+  display: block;
+}
+
+.rp[data-open] .item .info {
+  display: none;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+  padding: 3px 0;
+}
+
+.row b {
+  flex: 0 0 130px;
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.row span {
+  overflow-wrap: anywhere;
+}
+
+/* ── The panel ───────────────────────────────────────────── */
+
+.panel {
+  display: none;
+  flex-direction: column;
+  background: var(--bg);
+  border-top: 1px solid var(--line);
+  box-shadow: 0 -4px 16px rgb(0 0 0 / 0.4);
+}
+
+.rp[data-open] .panel {
+  display: flex;
+}
+
+.rp[data-closed] .bar,
+.rp[data-closed] .panel {
+  display: none;
+}
+
+.grip {
+  height: 5px;
+  cursor: row-resize;
+  background: var(--bg-3);
+}
+
+.grip:hover {
+  background: var(--accent);
+}
+
+.tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 6px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg-2);
+  overflow-x: auto;
+}
+
+.tab {
+  padding: 7px 12px;
+  color: var(--muted);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text);
+}
+
+.tab[data-active] {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+
+.tab .count {
+  margin-left: 6px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--bg-3);
+  color: var(--text);
+  font-size: 11px;
+}
+
+.tab .count[data-tone="warn"] {
+  background: #5c4106;
+}
+
+.tab .count[data-tone="bad"] {
+  background: #6e1a1b;
+}
+
+.body {
+  flex: 1;
+  overflow: auto;
+  padding: 10px 12px 14px;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  color: var(--muted);
+}
+
+.toolbar input[type="search"] {
+  min-width: 220px;
+  padding: 4px 8px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--bg-2);
+  color: var(--text);
+  font: inherit;
+}
+
+.chip {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--bg-3);
+  color: var(--muted);
+  font-size: 11px;
+}
+
+button.chip[data-off] {
+  text-decoration: line-through;
+  opacity: 0.55;
+}
+
+.chip[data-tone="warn"] {
+  background: #5c4106;
+  color: #f2cc60;
+}
+
+.chip[data-tone="bad"] {
+  background: #6e1a1b;
+  color: #ffa198;
+}
+
+.chip[data-tone="ok"] {
+  background: #133d20;
+  color: #7ee787;
+}
+
+.btn {
+  padding: 3px 9px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--bg-2);
+}
+
+.btn:hover,
+.btn[data-on] {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.list {
+  border-top: 1px solid var(--line);
+}
+
+.entry {
+  display: grid;
+  grid-template-columns: 78px 1fr auto;
+  gap: 10px;
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+}
+
+.entry:hover {
+  background: var(--bg-2);
+}
+
+.entry[data-tone="warn"] {
+  box-shadow: inset 3px 0 0 var(--warn);
+}
+
+.entry[data-tone="bad"] {
+  box-shadow: inset 3px 0 0 var(--bad);
+}
+
+.entry .num {
+  color: var(--muted);
+  text-align: right;
+}
+
+.entry .meter {
+  height: 3px;
+  margin-top: 4px;
+  background: var(--accent);
+  border-radius: 2px;
+  opacity: 0.6;
+}
+
+.entry .extra {
+  display: none;
+  grid-column: 2 / 4;
+}
+
+.entry[data-expanded] .extra {
+  display: block;
+}
+
+.sql {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.meta {
+  color: var(--muted);
+}
+
+.bad {
+  color: var(--bad);
+}
+
+pre {
+  margin: 6px 0 0;
+  padding: 8px;
+  max-height: 320px;
+  overflow: auto;
+  border-radius: 4px;
+  background: var(--bg-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+h3 {
+  margin: 14px 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+h3:first-child {
+  margin-top: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  color: var(--muted);
+  font-weight: 500;
+}
+
+td.key {
+  width: 200px;
+  color: var(--muted);
+}
+
+tr.pick {
+  cursor: pointer;
+}
+
+tr.pick:hover,
+tr.pick[data-active] {
+  background: var(--bg-2);
+}
+
+.empty {
+  padding: 18px 4px;
+  color: var(--muted);
+}
+
+/* ── Timeline ────────────────────────────────────────────── */
+
+.lane {
+  display: grid;
+  grid-template-columns: 260px 1fr 70px;
+  align-items: center;
+  gap: 10px;
+  padding: 3px 0;
+}
+
+.lane .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.track {
+  position: relative;
+  height: 12px;
+  background: var(--bg-2);
+  border-radius: 2px;
+}
+
+.span {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-width: 2px;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+.legend::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 5px;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+.legend[data-kind="request"]::before {
+  background: #3b4250;
+}
+
+.legend[data-kind="query"]::before {
+  background: #a371f7;
+}
+
+.legend[data-kind="log"]::before {
+  background: var(--warn);
+}
+
+.legend[data-kind="event"]::before {
+  background: var(--ok);
+}
+
+.span[data-kind="request"] {
+  background: #3b4250;
+}
+
+.span[data-kind="query"] {
+  background: #a371f7;
+}
+
+.span[data-kind="log"] {
+  background: var(--warn);
+}
+
+.span[data-kind="event"] {
+  background: var(--ok);
+}
+
+@media (max-width: 760px) {
+  .item .label {
+    display: none;
+  }
+
+  .lane {
+    grid-template-columns: 140px 1fr 56px;
+  }
+}
+
+@media print {
+  .rp {
+    display: none;
+  }
+}